@jovertical/mise-design-system 0.0.0-stage → 1.1.0

package/dist/components/overlays/dialog/dialog-header.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type DialogHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const DialogHeader: import("svelte").Component<DialogHeaderProps, {}, "ref">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/components/overlays/dialog/dialog-overlay.svelte

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogOverlay`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Dialog as DialogPrimitive } from 'bits-ui'
+
+  export type DialogOverlayProps = DialogPrimitive.OverlayProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: DialogOverlayProps = $props()
+</script>
+
+<DialogPrimitive.Overlay
+  bind:ref
+  data-slot="dialog-overlay"
+  class={cn(
+    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/20 backdrop-blur-sm',
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/overlays/dialog/dialog-overlay.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+export type DialogOverlayProps = DialogPrimitive.OverlayProps;
+declare const DialogOverlay: import("svelte").Component<DialogPrimitive.OverlayProps, {}, "ref">;
+type DialogOverlay = ReturnType<typeof DialogOverlay>;
+export default DialogOverlay;

package/dist/components/overlays/dialog/dialog-portal.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogPortal`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: bits-ui Portal for Radix Portal.
+-->
+<script lang="ts" module>
+  import { Dialog as DialogPrimitive } from 'bits-ui'
+
+  export type DialogPortalProps = DialogPrimitive.PortalProps
+</script>
+
+<script lang="ts">
+  let { ...rest }: DialogPortalProps = $props()
+</script>
+
+<DialogPrimitive.Portal {...rest} />

package/dist/components/overlays/dialog/dialog-portal.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+export type DialogPortalProps = DialogPrimitive.PortalProps;
+declare const DialogPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type DialogPortal = ReturnType<typeof DialogPortal>;
+export default DialogPortal;

package/dist/components/overlays/dialog/dialog-title.svelte

@@ -0,0 +1,23 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogTitle`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { Dialog as DialogPrimitive } from 'bits-ui'
+
+  export type DialogTitleProps = DialogPrimitive.TitleProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: DialogTitleProps = $props()
+</script>
+
+<DialogPrimitive.Title
+  bind:ref
+  data-slot="dialog-title"
+  class={cn('font-heading text-lg leading-none font-semibold', className)}
+  {...rest}
+/>

package/dist/components/overlays/dialog/dialog-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+export type DialogTitleProps = DialogPrimitive.TitleProps;
+declare const DialogTitle: import("svelte").Component<DialogPrimitive.TitleProps, {}, "ref">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/components/overlays/dialog/dialog-trigger.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogTrigger`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: `asChild` is bits-ui's `child` snippet. No `type` default; Radix's trigger had none.
+-->
+<script lang="ts" module>
+  import { Dialog as DialogPrimitive } from 'bits-ui'
+
+  export type DialogTriggerProps = DialogPrimitive.TriggerProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: DialogTriggerProps = $props()
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...rest} />

package/dist/components/overlays/dialog/dialog-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+export type DialogTriggerProps = DialogPrimitive.TriggerProps;
+declare const DialogTrigger: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+type DialogTrigger = ReturnType<typeof DialogTrigger>;
+export default DialogTrigger;

package/dist/components/overlays/dialog/dialog.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`Dialog`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: bits-ui Dialog for Radix Dialog. `open` is bindable.
+-->
+<script lang="ts" module>
+  import { Dialog as DialogPrimitive } from 'bits-ui'
+
+  export type DialogProps = DialogPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let { open = $bindable(false), ...rest }: DialogProps = $props()
+</script>
+
+<DialogPrimitive.Root bind:open {...rest} />

package/dist/components/overlays/dialog/dialog.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+export type DialogProps = DialogPrimitive.RootProps;
+declare const Dialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/overlays/dialog/index.d.ts

@@ -0,0 +1,10 @@
+export { type DialogProps, default as Dialog } from './dialog.svelte';
+export { type DialogCloseProps, default as DialogClose } from './dialog-close.svelte';
+export { type DialogContentProps, type DialogSize, default as DialogContent, } from './dialog-content.svelte';
+export { type DialogDescriptionProps, default as DialogDescription, } from './dialog-description.svelte';
+export { type DialogFooterProps, default as DialogFooter } from './dialog-footer.svelte';
+export { type DialogHeaderProps, default as DialogHeader } from './dialog-header.svelte';
+export { type DialogOverlayProps, default as DialogOverlay } from './dialog-overlay.svelte';
+export { type DialogPortalProps, default as DialogPortal } from './dialog-portal.svelte';
+export { type DialogTitleProps, default as DialogTitle } from './dialog-title.svelte';
+export { type DialogTriggerProps, default as DialogTrigger } from './dialog-trigger.svelte';

package/dist/components/overlays/dialog/index.js

@@ -0,0 +1,10 @@
+export { default as Dialog } from './dialog.svelte';
+export { default as DialogClose } from './dialog-close.svelte';
+export { default as DialogContent, } from './dialog-content.svelte';
+export { default as DialogDescription, } from './dialog-description.svelte';
+export { default as DialogFooter } from './dialog-footer.svelte';
+export { default as DialogHeader } from './dialog-header.svelte';
+export { default as DialogOverlay } from './dialog-overlay.svelte';
+export { default as DialogPortal } from './dialog-portal.svelte';
+export { default as DialogTitle } from './dialog-title.svelte';
+export { default as DialogTrigger } from './dialog-trigger.svelte';

package/dist/components/overlays/drawer/drawer-close.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerClose`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package. `asChild` is bits-ui's `child` snippet.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  export type DrawerCloseProps = DrawerPrimitive.CloseProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: DrawerCloseProps = $props()
+</script>
+
+<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...rest} />

package/dist/components/overlays/drawer/drawer-close.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+export type DrawerCloseProps = DrawerPrimitive.CloseProps;
+declare const DrawerClose: import("svelte").Component<DrawerPrimitive.TriggerProps, {}, "ref">;
+type DrawerClose = ReturnType<typeof DrawerClose>;
+export default DrawerClose;

package/dist/components/overlays/drawer/drawer-content.svelte

@@ -0,0 +1,50 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerContent`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package. The portal takes `portalProps`, as
+    PopoverContent's does.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  /** The panel, its overlay and, from the bottom, the drag handle. */
+  export type DrawerContentProps = DrawerPrimitive.ContentProps & {
+    portalProps?: DrawerPrimitive.PortalProps
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import DrawerOverlay from './drawer-overlay.svelte'
+  import DrawerPortal from './drawer-portal.svelte'
+
+  let {
+    ref = $bindable(null),
+    portalProps,
+    class: className,
+    children,
+    ...rest
+  }: DrawerContentProps = $props()
+</script>
+
+<DrawerPortal {...portalProps}>
+  <DrawerOverlay />
+  <DrawerPrimitive.Content
+    bind:ref
+    data-slot="drawer-content"
+    class={cn(
+      'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+      'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+      'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+      'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+      'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+      className,
+    )}
+    {...rest}
+  >
+    <div
+      class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+    ></div>
+    {@render children?.()}
+  </DrawerPrimitive.Content>
+</DrawerPortal>

package/dist/components/overlays/drawer/drawer-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+/** The panel, its overlay and, from the bottom, the drag handle. */
+export type DrawerContentProps = DrawerPrimitive.ContentProps & {
+    portalProps?: DrawerPrimitive.PortalProps;
+};
+declare const DrawerContent: import("svelte").Component<DrawerContentProps, {}, "ref">;
+type DrawerContent = ReturnType<typeof DrawerContent>;
+export default DrawerContent;

package/dist/components/overlays/drawer/drawer-description.svelte

@@ -0,0 +1,23 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerDescription`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  export type DrawerDescriptionProps = DrawerPrimitive.DescriptionProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: DrawerDescriptionProps = $props()
+</script>
+
+<DrawerPrimitive.Description
+  bind:ref
+  data-slot="drawer-description"
+  class={cn('text-muted-foreground text-sm', className)}
+  {...rest}
+/>

package/dist/components/overlays/drawer/drawer-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+export type DrawerDescriptionProps = DrawerPrimitive.DescriptionProps;
+declare const DrawerDescription: import("svelte").Component<DrawerPrimitive.DescriptionProps, {}, "ref">;
+type DrawerDescription = ReturnType<typeof DrawerDescription>;
+export default DrawerDescription;

package/dist/components/overlays/drawer/drawer-footer.svelte

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerFooter`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type DrawerFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: DrawerFooterProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="drawer-footer"
+  class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/overlays/drawer/drawer-footer.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type DrawerFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const DrawerFooter: import("svelte").Component<DrawerFooterProps, {}, "ref">;
+type DrawerFooter = ReturnType<typeof DrawerFooter>;
+export default DrawerFooter;

package/dist/components/overlays/drawer/drawer-header.svelte

@@ -0,0 +1,30 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerHeader`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type DrawerHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: DrawerHeaderProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="drawer-header"
+  class={cn(
+    'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/overlays/drawer/drawer-header.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type DrawerHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+declare const DrawerHeader: import("svelte").Component<DrawerHeaderProps, {}, "ref">;
+type DrawerHeader = ReturnType<typeof DrawerHeader>;
+export default DrawerHeader;

package/dist/components/overlays/drawer/drawer-overlay.svelte

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerOverlay`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  export type DrawerOverlayProps = DrawerPrimitive.OverlayProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: DrawerOverlayProps = $props()
+</script>
+
+<DrawerPrimitive.Overlay
+  bind:ref
+  data-slot="drawer-overlay"
+  class={cn(
+    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/overlays/drawer/drawer-overlay.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+export type DrawerOverlayProps = DrawerPrimitive.OverlayProps;
+declare const DrawerOverlay: import("svelte").Component<DrawerPrimitive.OverlayProps, {}, "ref">;
+type DrawerOverlay = ReturnType<typeof DrawerOverlay>;
+export default DrawerOverlay;

package/dist/components/overlays/drawer/drawer-portal.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerPortal`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  export type DrawerPortalProps = DrawerPrimitive.PortalProps
+</script>
+
+<script lang="ts">
+  let { ...rest }: DrawerPortalProps = $props()
+</script>
+
+<DrawerPrimitive.Portal {...rest} />

package/dist/components/overlays/drawer/drawer-portal.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+export type DrawerPortalProps = DrawerPrimitive.PortalProps;
+declare const DrawerPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type DrawerPortal = ReturnType<typeof DrawerPortal>;
+export default DrawerPortal;

package/dist/components/overlays/drawer/drawer-title.svelte

@@ -0,0 +1,23 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerTitle`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  export type DrawerTitleProps = DrawerPrimitive.TitleProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: DrawerTitleProps = $props()
+</script>
+
+<DrawerPrimitive.Title
+  bind:ref
+  data-slot="drawer-title"
+  class={cn('text-foreground font-semibold', className)}
+  {...rest}
+/>

package/dist/components/overlays/drawer/drawer-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+export type DrawerTitleProps = DrawerPrimitive.TitleProps;
+declare const DrawerTitle: import("svelte").Component<DrawerPrimitive.TitleProps, {}, "ref">;
+type DrawerTitle = ReturnType<typeof DrawerTitle>;
+export default DrawerTitle;

package/dist/components/overlays/drawer/drawer-trigger.svelte

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`DrawerTrigger`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package. `asChild` is bits-ui's `child` snippet.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  export type DrawerTriggerProps = DrawerPrimitive.TriggerProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: DrawerTriggerProps = $props()
+</script>
+
+<DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...rest} />

package/dist/components/overlays/drawer/drawer-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+export type DrawerTriggerProps = DrawerPrimitive.TriggerProps;
+declare const DrawerTrigger: import("svelte").Component<DrawerPrimitive.TriggerProps, {}, "ref">;
+type DrawerTrigger = ReturnType<typeof DrawerTrigger>;
+export default DrawerTrigger;

package/dist/components/overlays/drawer/drawer.svelte

@@ -0,0 +1,28 @@
+<!--
+  Origin: the React package 2.23.0 `drawer.tsx` (`Drawer`), itself shadcn/ui new-york `drawer`
+  Svelte: shadcn-svelte `drawer`
+  Diverged: unaudited, as in the React package. vaul-svelte for vaul, with
+    `bind:open` and `bind:activeSnapPoint`. `shouldScaleBackground` stays
+    vaul's default, off, as React leaves it; shadcn-svelte turns it on.
+-->
+<script lang="ts" module>
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte'
+
+  /**
+   * A panel dragged in from an edge. Slides from the bottom by default: the
+   * phone sheet, for a screen that wants a bottom sheet rather than a centred
+   * `Dialog`. `direction="right"` makes it a side panel, though `Sheet` is the
+   * usual one there.
+   */
+  export type DrawerProps = DrawerPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let {
+    open = $bindable(false),
+    activeSnapPoint = $bindable(null),
+    ...rest
+  }: DrawerProps = $props()
+</script>
+
+<DrawerPrimitive.Root bind:open bind:activeSnapPoint {...rest} />

package/dist/components/overlays/drawer/drawer.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+/**
+ * A panel dragged in from an edge. Slides from the bottom by default: the
+ * phone sheet, for a screen that wants a bottom sheet rather than a centred
+ * `Dialog`. `direction="right"` makes it a side panel, though `Sheet` is the
+ * usual one there.
+ */
+export type DrawerProps = DrawerPrimitive.RootProps;
+declare const Drawer: import("svelte").Component<import("vaul-svelte").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/overlays/drawer/index.d.ts

@@ -0,0 +1,10 @@
+export { type DrawerProps, default as Drawer } from './drawer.svelte';
+export { type DrawerCloseProps, default as DrawerClose } from './drawer-close.svelte';
+export { type DrawerContentProps, default as DrawerContent } from './drawer-content.svelte';
+export { type DrawerDescriptionProps, default as DrawerDescription, } from './drawer-description.svelte';
+export { type DrawerFooterProps, default as DrawerFooter } from './drawer-footer.svelte';
+export { type DrawerHeaderProps, default as DrawerHeader } from './drawer-header.svelte';
+export { type DrawerOverlayProps, default as DrawerOverlay } from './drawer-overlay.svelte';
+export { type DrawerPortalProps, default as DrawerPortal } from './drawer-portal.svelte';
+export { type DrawerTitleProps, default as DrawerTitle } from './drawer-title.svelte';
+export { type DrawerTriggerProps, default as DrawerTrigger } from './drawer-trigger.svelte';

package/dist/components/overlays/drawer/index.js

@@ -0,0 +1,10 @@
+export { default as Drawer } from './drawer.svelte';
+export { default as DrawerClose } from './drawer-close.svelte';
+export { default as DrawerContent } from './drawer-content.svelte';
+export { default as DrawerDescription, } from './drawer-description.svelte';
+export { default as DrawerFooter } from './drawer-footer.svelte';
+export { default as DrawerHeader } from './drawer-header.svelte';
+export { default as DrawerOverlay } from './drawer-overlay.svelte';
+export { default as DrawerPortal } from './drawer-portal.svelte';
+export { default as DrawerTitle } from './drawer-title.svelte';
+export { default as DrawerTrigger } from './drawer-trigger.svelte';

package/dist/components/overlays/hint/hint.svelte

@@ -0,0 +1,69 @@
+<!--
+  Origin: the React package 2.23.0 `hint.tsx`
+  Diverged: Lucide's circle-question-mark for Tabler's help. Spreads the rest
+    onto the button, as every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  /**
+   * The `?` that explains the thing it sits beside.
+   *
+   * Named for the slot it fills: `StatTile` takes a `hint`, and a heading takes
+   * one inline because `CardTitle` is a flex row. It carries what a caption
+   * cannot fit and says it only to whoever asks, which is why it beats
+   * lengthening the label or adding a second line under it.
+   *
+   * **A `button`, not a bare icon.** A tooltip anchored to a non-focusable
+   * element never opens for a keyboard, so the explanation simply does not
+   * exist for anyone not using a mouse. `aria-label` falls back to "More info"
+   * when no `label` is given, which is worse than a real one and better than
+   * nothing.
+   *
+   * Use it sparingly: one per figure is plenty. A screen where every caption
+   * has a `?` has moved its documentation into tooltips, and none of it is
+   * readable without hunting.
+   */
+  export type HintProps = Omit<HTMLButtonAttributes, 'children'> & {
+    /**
+     * Announced in place of the glyph, so name what is being explained ("How
+     * stock health is calculated", not "Help").
+     */
+    label?: string
+    /** The explanation, shown in the tooltip. */
+    children: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import CircleQuestionMarkIcon from '@lucide/svelte/icons/circle-question-mark'
+
+  import { cn } from '../../../utils/cn.js'
+  import Tooltip from '../tooltip/tooltip.svelte'
+  import TooltipContent from '../tooltip/tooltip-content.svelte'
+  import TooltipTrigger from '../tooltip/tooltip-trigger.svelte'
+
+  let { label, children, class: className, ...rest }: HintProps = $props()
+</script>
+
+<Tooltip>
+  <TooltipTrigger>
+    {#snippet child({ props })}
+      <button
+        type="button"
+        aria-label={label ?? 'More info'}
+        class={cn(
+          'text-muted-foreground hover:text-foreground focus-visible:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-4 shrink-0 items-center justify-center rounded-full focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+          className,
+        )}
+        {...props}
+        {...rest}
+      >
+        <CircleQuestionMarkIcon class="size-3.5" />
+      </button>
+    {/snippet}
+  </TooltipTrigger>
+
+  <TooltipContent class="max-w-xs text-balance">{@render children()}</TooltipContent>
+</Tooltip>