feat(responsive) Add optional css mode to OnlyOnDevice utlity

src/lib/ui/utils/OnlyOnDevice/OnlyOnDevice.svelte

@@ -3,18 +3,33 @@
 
   import { useDeviceCtx } from '$lib/ctx/device/index.svelte.js'
 
-  let {
-    desktop = false,
-    tablet = false,
-    phone = false,
-    children,
-  }: { desktop?: boolean; tablet?: boolean; phone?: boolean; children: Snippet } = $props()
+  import { cn } from '../index.js'
+
+  type TProps = {
+    css?: boolean
+    desktop?: boolean
+    tablet?: boolean
+    phone?: boolean
+    children: Snippet
+  }
+
+  const { css = false, desktop = false, tablet = false, phone = false, children }: TProps = $props()
 
   const targets = { desktop, tablet, phone, 'phone-xs': phone }
 
   const { device } = useDeviceCtx()
 </script>
 
-{#if targets[device.$.type]}
+{#if css}
+  <div
+    class={cn(
+      desktop ? 'contents' : 'hidden',
+      tablet ? 'md:contents' : 'md:hidden',
+      phone ? 'sm:contents' : 'sm:hidden',
+    )}
+  >
+    {@render children()}
+  </div>
+{:else if targets[device.$.type]}
   {@render children()}
 {/if}

src/stories/UI Utilities/OnlyOnDevice/index.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+
+import component from './index.svelte'
+
+const meta = {
+  component,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<component>
+type Story = StoryObj<typeof meta>
+
+export default meta
+
+export const OnlyOnDevice: Story = {}

src/stories/UI Utilities/OnlyOnDevice/index.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { useDeviceCtx } from '$lib/ctx/device/index.svelte.js'
+  import OnlyOnDevice from '$ui/utils/OnlyOnDevice/index.js'
+
+  const { device } = useDeviceCtx.get()
+</script>
+
+<main class="flex flex-col justify-center gap-10 p-5">
+  <h3>Current device - {device.$.type}</h3>
+
+  <section class="flex gap-6">
+    <div class="flex flex-col gap-4">
+      <h2 class="text-lg font-medium">Js mode</h2>
+
+      {@render section('js')}
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <h2 class="text-lg font-medium">css mode</h2>
+
+      {@render section('css')}
+    </div>
+  </section>
+</main>
+
+{#snippet section(mode: 'js' | 'css')}
+  {@const css = mode === 'css'}
+
+  <section>
+    <OnlyOnDevice desktop tablet phone {css}>
+      <div>desktop, tablet and phone (all)</div>
+    </OnlyOnDevice>
+
+    <OnlyOnDevice desktop tablet {css}>
+      <div>desktop and tablet</div>
+    </OnlyOnDevice>
+
+    <OnlyOnDevice desktop {css}>
+      <div>desktop only</div>
+    </OnlyOnDevice>
+
+    <OnlyOnDevice tablet phone {css}>
+      <div>tablet and phone</div>
+    </OnlyOnDevice>
+
+    <OnlyOnDevice tablet {css}>
+      <div>tablet only</div>
+    </OnlyOnDevice>
+
+    <OnlyOnDevice phone {css}>
+      <div>phone only</div>
+    </OnlyOnDevice>
+  </section>
+{/snippet}