@getmicdrop/svelte-components 2.8.0 → 3.0.0

package/dist/components/Button/Button.svelte.d.ts

@@ -1,80 +1,39 @@
-export default Button;
-type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    size?: string | undefined;
-    className?: string | undefined;
-    variant?: string | undefined;
-    shape?: string | undefined;
-    success?: boolean | undefined;
-    minWidth?: string | undefined;
-    disabled?: boolean | undefined;
-    loading?: boolean | undefined;
-    successText?: string | undefined;
-    beforeIcon?: null | undefined;
-    afterIcon?: null | undefined;
-    responsive?: boolean | undefined;
-    active?: boolean | undefined;
-    href?: null | undefined;
-    justify?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    mouseover: MouseEvent;
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    size?: string | undefined;
-    className?: string | undefined;
-    variant?: string | undefined;
-    shape?: string | undefined;
-    success?: boolean | undefined;
-    minWidth?: string | undefined;
-    disabled?: boolean | undefined;
-    loading?: boolean | undefined;
-    successText?: string | undefined;
-    beforeIcon?: null | undefined;
-    afterIcon?: null | undefined;
-    responsive?: boolean | undefined;
-    active?: boolean | undefined;
-    href?: null | undefined;
-    justify?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    mouseover: MouseEvent;
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+type Variant = 'blue-solid' | 'blue-outline' | 'gray-outline' | 'red-solid' | 'red-outline' | 'red-text' | 'gray-text' | 'icon' | 'toggle';
+type Size = '' | 'full' | 'full-md-auto' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | 'half';
+type MinWidth = '' | 'sm' | 'action' | 'modal' | 'modal-responsive';
+type Shape = '' | 'circle';
+type Justify = '' | 'between';
+interface Props {
+    variant?: Variant;
+    size?: Size;
+    minWidth?: MinWidth;
+    shape?: Shape;
+    disabled?: boolean;
+    loading?: boolean;
+    success?: boolean;
+    successText?: string;
+    className?: string;
+    beforeIcon?: string | null;
+    afterIcon?: string | null;
+    responsive?: boolean;
+    active?: boolean;
+    href?: string | null;
+    justify?: Justify;
+    /** Click event callback */
+    onclick?: (e: MouseEvent) => void;
+    /** Mouseover event callback */
+    onmouseover?: (e: MouseEvent) => void;
+    /** Mouseenter event callback */
+    onmouseenter?: (e: MouseEvent) => void;
+    /** Mouseleave event callback */
+    onmouseleave?: (e: MouseEvent) => void;
+    /** Slot content */
+    children?: Snippet;
+    /** Rest props for additional attributes */
+    [key: string]: unknown;
 }
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;
 //# sourceMappingURL=Button.svelte.d.ts.map

package/dist/components/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuPA;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAAiS;sCAT3P,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Button/Button.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,OAAO,GAAG,YAAY,GAAG,cAAc,GAAG,cAAc,GAAG,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;AAC3I,KAAK,IAAI,GAAG,EAAE,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AACtF,KAAK,QAAQ,GAAG,EAAE,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO,GAAG,kBAAkB,CAAC;AACpE,KAAK,KAAK,GAAG,EAAE,GAAG,QAAQ,CAAC;AAC3B,KAAK,OAAO,GAAG,EAAE,GAAG,SAAS,CAAC;AAE9B,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,+BAA+B;IAC/B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA0OH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,43 +1,73 @@
-<script>
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
+  import type { Snippet } from 'svelte';
 
-  /** @type {boolean} Whether the checkbox is checked */
-  export let checked = false;
-  /** @type {string} The value attribute */
-  export let value = "";
-  /** @type {string} Name attribute for form submission */
-  export let name = "";
-  /** @type {boolean} Whether the checkbox is disabled */
-  export let disabled = false;
-  /** @type {string} Color variant */
-  export let color = "primary";
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
-
-  const dispatch = createEventDispatcher();
-
-  function handleChange(event) {
-    checked = event.target.checked;
-    dispatch("change", { checked, value });
+  interface Props {
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** The value attribute */
+    value?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Color variant */
+    color?: 'primary' | 'red' | 'green' | 'blue';
+    /** Additional CSS classes */
+    class?: string;
+    /** Change event callback */
+    onchange?: (data: { checked: boolean; value: string }) => void;
+    /** Click event callback */
+    onclick?: (e: MouseEvent) => void;
+    /** Focus event callback */
+    onfocus?: (e: FocusEvent) => void;
+    /** Blur event callback */
+    onblur?: (e: FocusEvent) => void;
+    /** Keydown event callback */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Keyup event callback */
+    onkeyup?: (e: KeyboardEvent) => void;
+    /** Slot content */
+    children?: Snippet;
   }
 
+  let {
+    checked = $bindable(false),
+    value = '',
+    name = '',
+    disabled = false,
+    color = 'primary',
+    class: className = '',
+    onchange,
+    onclick,
+    onfocus,
+    onblur,
+    onkeydown,
+    onkeyup,
+    children
+  }: Props = $props();
+
   // Color classes matching flowbite-svelte
-  const colorClasses = {
-    primary: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600",
-    red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
-    green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
-    blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
+  const colorClasses: Record<string, string> = {
+    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
   };
 
-  $: inputClasses = [
-    "w-4 h-4 rounded",
-    "bg-gray-100 border-gray-300",
-    "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
-    "focus:ring-2",
+  let inputClasses = $derived([
+    'w-4 h-4 rounded',
+    'bg-gray-100 border-gray-300',
+    'dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800',
+    'focus:ring-2',
     colorClasses[color] || colorClasses.primary,
-    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-  ].join(" ");
+    disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+  ].join(' '));
+
+  function handleChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+    checked = target.checked;
+    onchange?.({ checked, value });
+  }
 </script>
 
 <label class="checkbox {className}" class:checkbox--disabled={disabled}>
@@ -47,17 +77,17 @@
     {value}
     {disabled}
     bind:checked
-    on:change={handleChange}
-    on:click
-    on:focus
-    on:blur
-    on:keydown
-    on:keyup
+    onchange={handleChange}
+    onclick={onclick}
+    onfocus={onfocus}
+    onblur={onblur}
+    onkeydown={onkeydown}
+    onkeyup={onkeyup}
     class={inputClasses}
   />
-  {#if $$slots.default}
+  {#if children}
     <span class="checkbox__label">
-      <slot />
+      {@render children()}
     </span>
   {/if}
 </label>

package/dist/components/Checkbox/Checkbox.svelte.d.ts

@@ -1,64 +1,36 @@
-export default Checkbox;
-type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    color?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    color?: string | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-}, {
-    default: {};
-}>, {
-    click: PointerEvent;
-    focus: FocusEvent;
-    blur: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** The value attribute */
+    value?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Color variant */
+    color?: 'primary' | 'red' | 'green' | 'blue';
+    /** Additional CSS classes */
+    class?: string;
+    /** Change event callback */
+    onchange?: (data: {
+        checked: boolean;
+        value: string;
+    }) => void;
+    /** Click event callback */
+    onclick?: (e: MouseEvent) => void;
+    /** Focus event callback */
+    onfocus?: (e: FocusEvent) => void;
+    /** Blur event callback */
+    onblur?: (e: FocusEvent) => void;
+    /** Keydown event callback */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Keyup event callback */
+    onkeyup?: (e: KeyboardEvent) => void;
+    /** Slot content */
+    children?: Snippet;
 }
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
 //# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/components/Checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgFA;;;;;;;;;;;;;;;;;;;;eAAiL;sCAT3I,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACrC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0DH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Drawer/Drawer.svelte

@@ -1,40 +1,53 @@
 <script>
-  import { createEventDispatcher, onDestroy } from "svelte";
+  import { onDestroy } from "svelte";
   import { fly, fade } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
 
-  /** @type {boolean} Whether the drawer is visible */
-  export let show = false;
-  /** @type {boolean} Flowbite-style hidden prop (inverse of show) */
-  export let hidden = true;
-  /** @type {string} Optional title for the drawer header */
-  export let title = "";
-  /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
-  export let placement = "left";
-  /** @type {string} Width of the drawer (for left/right placement) */
-  export let width = "320px";
-  /** @type {string} Height of the drawer (for top/bottom placement) */
-  export let height = "auto";
-  /** @type {number} Transition duration in ms */
-  export let duration = 200;
-  /** @type {boolean} Whether clicking the backdrop closes the drawer */
-  export let closeOnBackdropClick = true;
-  /** @type {boolean} Whether pressing Escape closes the drawer */
-  export let closeOnEscape = true;
-  /** @type {string} Optional id for the drawer element */
-  export let id = "";
-  /** @type {object|undefined} Custom transition params (flowbite API) */
-  export let transitionParams = undefined;
-
-  const dispatch = createEventDispatcher();
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} [show] - Whether the drawer is visible
+   * @property {boolean} [hidden] - Flowbite-style hidden prop (inverse of show)
+   * @property {string} [title] - Optional title for the drawer header
+   * @property {'left'|'right'|'top'|'bottom'} [placement] - Which side the drawer slides from
+   * @property {string} [width] - Width of the drawer (for left/right placement)
+   * @property {string} [height] - Height of the drawer (for top/bottom placement)
+   * @property {number} [duration] - Transition duration in ms
+   * @property {boolean} [closeOnBackdropClick] - Whether clicking the backdrop closes the drawer
+   * @property {boolean} [closeOnEscape] - Whether pressing Escape closes the drawer
+   * @property {string} [id] - Optional id for the drawer element
+   * @property {object} [transitionParams] - Custom transition params (flowbite API)
+   * @property {Function} [onclose] - Callback when drawer closes
+   * @property {import('svelte').Snippet} [header] - Snippet for header content
+   * @property {import('svelte').Snippet} [actions] - Snippet for actions content
+   * @property {import('svelte').Snippet} [children] - Default slot content
+   */
+
+  /** @type {Props} */
+  let {
+    show = $bindable(false),
+    hidden = $bindable(true),
+    title = "",
+    placement = "left",
+    width = "320px",
+    height = "auto",
+    duration = 200,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    id = "",
+    transitionParams = undefined,
+    onclose,
+    header,
+    actions,
+    children
+  } = $props();
 
   // Support both show and hidden props (flowbite uses hidden)
-  $: isVisible = show || !hidden;
+  let isVisible = $derived(show || !hidden);
 
   function close() {
     hidden = true;
     show = false;
-    dispatch("close");
+    onclose?.();
   }
 
   function handleBackdropClick(e) {
@@ -50,7 +63,7 @@
   }
 
   // Calculate transition params based on placement (use custom if provided)
-  $: computedTransitionParams = transitionParams || (() => {
+  let computedTransitionParams = $derived(transitionParams || (() => {
     switch (placement) {
       case "left":
         return { x: -320, duration, easing: cubicOut };
@@ -63,16 +76,18 @@
       default:
         return { x: -320, duration, easing: cubicOut };
     }
-  })();
+  })());
 
   // Lock body scroll when drawer is open
-  $: if (typeof document !== "undefined") {
-    if (isVisible) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (isVisible) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
     }
-  }
+  });
 
   onDestroy(() => {
     if (typeof document !== "undefined") {
@@ -81,28 +96,28 @@
   });
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 {#if isVisible}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="drawer-backdrop"
-    on:click={handleBackdropClick}
+    onclick={handleBackdropClick}
     transition:fade={{ duration: 150 }}
   >
     <div
       {id}
       class="drawer drawer--{placement}"
       style="--drawer-width: {width}; --drawer-height: {height};"
-      on:click|stopPropagation
+      onclick={(e) => e.stopPropagation()}
       transition:fly={computedTransitionParams}
     >
       <!-- Optional header with title -->
-      {#if title || $$slots.header}
+      {#if title || header}
         <div class="drawer__header">
-          {#if $$slots.header}
-            <slot name="header" />
+          {#if header}
+            {@render header()}
           {:else}
             <h3 class="drawer__title">{title}</h3>
           {/if}
@@ -111,13 +126,15 @@
 
       <!-- Content slot -->
       <div class="drawer__content">
-        <slot />
+        {#if children}
+          {@render children()}
+        {/if}
       </div>
 
       <!-- Actions slot (optional) -->
-      {#if $$slots.actions}
+      {#if actions}
         <div class="drawer__actions">
-          <slot name="actions" />
+          {@render actions()}
         </div>
       {/if}
     </div>