@getmicdrop/svelte-components 5.10.3 → 5.13.0

package/dist/primitives/Drawer/Drawer.stories.svelte

@@ -1,80 +1,80 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Drawer from './Drawer.svelte';
-  import Button from '../Button/Button.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Drawer',
-    component: Drawer,
-    tags: ['autodocs'],
-    argTypes: {
-      position: {
-        control: 'select',
-        options: ['left', 'right'],
-      },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Sliding panel overlay that appears from the side of the screen.',
-        },
-      },
-    },
-  });
-
-  let openLeft = $state(false);
-  let openRight = $state(false);
-</script>
-
-<Story name="Right (Default)">
-  {#snippet template()}
-    <div>
-      <Button onclick={() => openRight = true}>Open Right Drawer</Button>
-      <Drawer bind:open={openRight} position="right">
-        <div class="p-6">
-          <h2 class="text-xl font-semibold mb-4">Drawer Title</h2>
-          <p class="text-gray-600 mb-4">
-            This drawer slides in from the right side. Click outside or use the close button to dismiss.
-          </p>
-          <div class="space-y-4">
-            <p class="text-sm text-gray-500">Some content here...</p>
-            <Button onclick={() => openRight = false}>Close</Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Left">
-  {#snippet template()}
-    <div>
-      <Button onclick={() => openLeft = true}>Open Left Drawer</Button>
-      <Drawer bind:open={openLeft} position="left">
-        <div class="p-6">
-          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Drawer from './Drawer.svelte';
+  import Button from '../Button/Button.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Drawer',
+    component: Drawer,
+    tags: ['autodocs'],
+    argTypes: {
+      position: {
+        control: 'select',
+        options: ['left', 'right'],
+      },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Sliding panel overlay that appears from the side of the screen.',
+        },
+      },
+    },
+  });
+
+  let openLeft = $state(false);
+  let openRight = $state(false);
+</script>
+
+<Story name="Right (Default)">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openRight = true}>Open Right Drawer</Button>
+      <Drawer bind:open={openRight} position="right">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-4">Drawer Title</h2>
+          <p class="text-gray-600 mb-4">
+            This drawer slides in from the right side. Click outside or use the close button to dismiss.
+          </p>
+          <div class="space-y-4">
+            <p class="text-sm text-gray-500">Some content here...</p>
+            <Button onclick={() => openRight = false}>Close</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Left">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openLeft = true}>Open Left Drawer</Button>
+      <Drawer bind:open={openLeft} position="left">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-4">Navigation</h2>
           <nav class="space-y-2">
             <a href="/dashboard" class="block px-3 py-2 rounded hover:bg-gray-100">Dashboard</a>
             <a href="/shows" class="block px-3 py-2 rounded hover:bg-gray-100">Shows</a>
             <a href="/performers" class="block px-3 py-2 rounded hover:bg-gray-100">Performers</a>
             <a href="/settings" class="block px-3 py-2 rounded hover:bg-gray-100">Settings</a>
           </nav>
-          <div class="mt-6">
-            <Button variant="ghost" onclick={() => openLeft = false}>Close</Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Form">
-  {#snippet template()}
-    <div>
-      <Button onclick={() => openRight = true}>Edit Profile</Button>
-      <Drawer bind:open={openRight} position="right">
-        <div class="p-6">
-          <h2 class="text-xl font-semibold mb-6">Edit Profile</h2>
+          <div class="mt-6">
+            <Button variant="ghost" onclick={() => openLeft = false}>Close</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Form">
+  {#snippet template()}
+    <div>
+      <Button onclick={() => openRight = true}>Edit Profile</Button>
+      <Drawer bind:open={openRight} position="right">
+        <div class="p-6">
+          <h2 class="text-xl font-semibold mb-6">Edit Profile</h2>
           <form class="space-y-4">
             <div>
               <label for="drawer-name" class="block text-sm font-medium mb-1">Name</label>
@@ -89,12 +89,12 @@
               <textarea id="drawer-bio" class="w-full border rounded px-3 py-2" rows="3" placeholder="Tell us about yourself"></textarea>
             </div>
           </form>
-          <div class="flex gap-2 mt-6">
-            <Button variant="ghost" onclick={() => openRight = false}>Cancel</Button>
-            <Button onclick={() => openRight = false}>Save Changes</Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  {/snippet}
-</Story>
+          <div class="flex gap-2 mt-6">
+            <Button variant="ghost" onclick={() => openRight = false}>Cancel</Button>
+            <Button onclick={() => openRight = false}>Save Changes</Button>
+          </div>
+        </div>
+      </Drawer>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Drawer/Drawer.svelte

@@ -5,8 +5,7 @@
   import type { Snippet } from "svelte";
 
   interface Props {
-    show?: boolean;
-    hidden?: boolean;
+    open?: boolean;
     title?: string;
     placement?: string;
     width?: string;
@@ -26,8 +25,7 @@
   }
 
   let {
-    show = $bindable(false),
-    hidden = $bindable(true),
+    open = $bindable(false),
     title = "",
     placement = "left",
     width = "md",
@@ -46,7 +44,7 @@
     ...restProps
   }: Props = $props();
 
-  let isVisible = $derived(show || !hidden);
+  let isVisible = $derived(open);
   let drawerElement: HTMLElement | null = $state(null);
   let previouslyFocusedElement: Element | null = $state(null);
 
@@ -59,38 +57,37 @@
   };
 
   let widthClass = $derived(widthClasses[width] || widthClasses.md);
-
-  // Compute fly transition direction based on placement
-  let flyParams = $derived.by(() => {
-    const distance = 400;
-    switch (placement) {
-      case 'left': return { x: -distance, duration: 300 };
-      case 'right': return { x: distance, duration: 300 };
-      case 'top': return { y: -distance, duration: 300 };
-      case 'bottom': return { y: distance, duration: 300 };
-      default: return { x: -distance, duration: 300 };
-    }
-  });
-
-  // Placement classes (without transform - we use Svelte transitions now)
-  let placementClasses = $derived.by(() => {
-    switch (placement) {
-      case 'left':
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
-      case 'right':
-        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700`;
-      case 'top':
-        return `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700`;
-      case 'bottom':
-        return `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700`;
-      default:
-        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
-    }
-  });
-
+
+  // Compute fly transition direction based on placement
+  let flyParams = $derived.by(() => {
+    const distance = 400;
+    switch (placement) {
+      case 'left': return { x: -distance, duration: 300 };
+      case 'right': return { x: distance, duration: 300 };
+      case 'top': return { y: -distance, duration: 300 };
+      case 'bottom': return { y: distance, duration: 300 };
+      default: return { x: -distance, duration: 300 };
+    }
+  });
+
+  // Placement classes (without transform - we use Svelte transitions now)
+  let placementClasses = $derived.by(() => {
+    switch (placement) {
+      case 'left':
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+      case 'right':
+        return `top-0 right-0 h-screen ${widthClass} max-w-full border-l border-gray-200 dark:border-gray-700`;
+      case 'top':
+        return `top-0 left-0 right-0 w-full border-b border-gray-200 dark:border-gray-700`;
+      case 'bottom':
+        return `bottom-0 left-0 right-0 w-full border-t border-gray-200 dark:border-gray-700`;
+      default:
+        return `top-0 left-0 h-screen ${widthClass} max-w-full border-r border-gray-200 dark:border-gray-700`;
+    }
+  });
+
   function close() {
-    hidden = true;
-    show = false;
+    open = false;
     onclose?.();
   }
 
@@ -125,15 +122,14 @@
       }
     }
   }
-
-  function handleEdgeClick() {
-    if (edge && placement === "bottom") {
-      hidden = false;
-      show = true;
-      onopen?.();
-    }
-  }
-
+
+  function handleEdgeClick() {
+    if (edge && placement === "bottom") {
+      open = true;
+      onopen?.();
+    }
+  }
+
   // Lock body scroll when drawer is open
   $effect(() => {
     if (typeof document !== "undefined") {
@@ -152,85 +148,85 @@
       }
     }
   });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<!-- Edge trigger for bottom placement -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-{#if edge && placement === "bottom" && !isVisible}
-  <div
-    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
-    style="bottom: {edgeOffset}px"
-    onclick={handleEdgeClick}
-  >
-    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
-  </div>
-{/if}
-
-<!-- Only render when visible - no transform issues with portals! -->
-{#if isVisible}
-  <!-- Backdrop -->
-  {#if backdrop}
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
-      onclick={handleBackdropClick}
-      transition:fade={{ duration: 200 }}
-      role="presentation"
-    ></div>
-  {/if}
-
-  <!-- Drawer panel - proper dialog with focus trap -->
-  <aside
-    bind:this={drawerElement}
-    {id}
-    class="
-      fixed z-40 flex flex-col bg-white dark:bg-gray-800
-      {placementClasses}
-      {className}
-    "
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby={title ? `${id}-label` : undefined}
-    tabindex="-1"
-    transition:fly={flyParams}
-    {...restProps}
-  >
-    <!-- Header (sticky) -->
-    {#if title || header}
-      <header class="shrink-0 p-4 border-b border-gray-200 dark:border-gray-700">
-        {#if header}
-          {@render header()}
-        {:else}
-          <h5
-            id={id ? `${id}-label` : undefined}
-            class={typography.h3}
-          >
-            {title}
-          </h5>
-        {/if}
-      </header>
-    {/if}
-
-    <!-- Content (single scrollable area) -->
-    <div class="flex-1 overflow-y-auto overscroll-contain">
-      {#if children}{@render children()}{/if}
-    </div>
-
-    <!-- Actions (sticky footer) -->
-    {#if actions}
-      <footer class="shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
-        {@render actions()}
-      </footer>
-    {/if}
-  </aside>
-{/if}
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- Edge trigger for bottom placement -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#if edge && placement === "bottom" && !isVisible}
+  <div
+    class="fixed bottom-0 left-0 right-0 z-40 flex justify-center w-full p-4 cursor-pointer bg-white border-t border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
+    style="bottom: {edgeOffset}px"
+    onclick={handleEdgeClick}
+  >
+    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
+  </div>
+{/if}
+
+<!-- Only render when visible - no transform issues with portals! -->
+{#if isVisible}
+  <!-- Backdrop -->
+  {#if backdrop}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80"
+      onclick={handleBackdropClick}
+      transition:fade={{ duration: 200 }}
+      role="presentation"
+    ></div>
+  {/if}
+
+  <!-- Drawer panel - proper dialog with focus trap -->
+  <aside
+    bind:this={drawerElement}
+    {id}
+    class="
+      fixed z-40 flex flex-col bg-white dark:bg-gray-800
+      {placementClasses}
+      {className}
+    "
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={title ? `${id}-label` : undefined}
+    tabindex="-1"
+    transition:fly={flyParams}
+    {...restProps}
+  >
+    <!-- Header (sticky) -->
+    {#if title || header}
+      <header class="shrink-0 p-4 border-b border-gray-200 dark:border-gray-700">
+        {#if header}
+          {@render header()}
+        {:else}
+          <h5
+            id={id ? `${id}-label` : undefined}
+            class={typography.h3}
+          >
+            {title}
+          </h5>
+        {/if}
+      </header>
+    {/if}
+
+    <!-- Content (single scrollable area) -->
+    <div class="flex-1 overflow-y-auto overscroll-contain">
+      {#if children}{@render children()}{/if}
+    </div>
+
+    <!-- Actions (sticky footer) -->
+    {#if actions}
+      <footer class="shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 flex flex-col gap-3">
+        {@render actions()}
+      </footer>
+    {/if}
+  </aside>
+{/if}

package/dist/primitives/Drawer/Drawer.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { Snippet } from "svelte";
 interface Props {
-    show?: boolean;
-    hidden?: boolean;
+    open?: boolean;
     title?: string;
     placement?: string;
     width?: string;
@@ -19,7 +18,7 @@ interface Props {
     class?: string;
     [key: string]: unknown;
 }
-declare const Drawer: import("svelte").Component<Props, {}, "show" | "hidden">;
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;
 //# sourceMappingURL=Drawer.svelte.d.ts.map

package/dist/primitives/Drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAsMH,QAAA,MAAM,MAAM,0DAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmMH,QAAA,MAAM,MAAM,+CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}