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

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

@@ -0,0 +1,32 @@
+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;
+};
+declare const Hint: import("svelte").Component<HintProps, {}, "">;
+type Hint = ReturnType<typeof Hint>;
+export default Hint;

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

@@ -0,0 +1 @@
+export { default as Hint, type HintProps } from './hint.svelte';

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

@@ -0,0 +1 @@
+export { default as Hint } from './hint.svelte';

package/dist/components/overlays/hover-card/hover-card-content.svelte

@@ -0,0 +1,46 @@
+<!--
+  Origin: the React package 2.23.0 `hover-card.tsx` (`HoverCardContent`), itself shadcn/ui new-york `hover-card`
+  Svelte: shadcn-svelte `hover-card`
+  Diverged: the origin variable is bits-ui's
+    (`--bits-link-preview-content-transform-origin`). The portal is a prop,
+    `portalProps`, as PopoverContent's is, not a separate part.
+-->
+<script lang="ts" module>
+  import { LinkPreview as HoverCardPrimitive } from 'bits-ui'
+
+  /**
+   * The floating card. A ring rather than a border, and `rounded-2xl` rather
+   * than shadcn's `rounded-md`: 6px was the smallest radius in a system whose
+   * cards are 24px.
+   */
+  export type HoverCardContentProps = HoverCardPrimitive.ContentProps & {
+    portalProps?: HoverCardPrimitive.PortalProps
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    align = 'center',
+    sideOffset = 4,
+    portalProps,
+    class: className,
+    ...rest
+  }: HoverCardContentProps = $props()
+</script>
+
+<HoverCardPrimitive.Portal {...portalProps}>
+  <HoverCardPrimitive.Content
+    bind:ref
+    data-slot="hover-card-content"
+    {align}
+    {sideOffset}
+    class={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--bits-link-preview-content-transform-origin) rounded-2xl p-4 shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10 outline-hidden',
+      className,
+    )}
+    {...rest}
+  />
+</HoverCardPrimitive.Portal>

package/dist/components/overlays/hover-card/hover-card-content.svelte.d.ts

@@ -0,0 +1,12 @@
+import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+/**
+ * The floating card. A ring rather than a border, and `rounded-2xl` rather
+ * than shadcn's `rounded-md`: 6px was the smallest radius in a system whose
+ * cards are 24px.
+ */
+export type HoverCardContentProps = HoverCardPrimitive.ContentProps & {
+    portalProps?: HoverCardPrimitive.PortalProps;
+};
+declare const HoverCardContent: import("svelte").Component<HoverCardContentProps, {}, "ref">;
+type HoverCardContent = ReturnType<typeof HoverCardContent>;
+export default HoverCardContent;

package/dist/components/overlays/hover-card/hover-card-trigger.svelte

@@ -0,0 +1,18 @@
+<!--
+  Origin: the React package 2.23.0 `hover-card.tsx` (`HoverCardTrigger`), itself shadcn/ui new-york `hover-card`
+  Svelte: shadcn-svelte `hover-card`
+  Diverged: `asChild` is bits-ui's `child` snippet. The trigger renders an `a`,
+    and bits-ui gives it `role="button"` with `aria-haspopup="dialog"`, where
+    Radix leaves a plain link.
+-->
+<script lang="ts" module>
+  import { LinkPreview as HoverCardPrimitive } from 'bits-ui'
+
+  export type HoverCardTriggerProps = HoverCardPrimitive.TriggerProps
+</script>
+
+<script lang="ts">
+  let { ref = $bindable(null), ...rest }: HoverCardTriggerProps = $props()
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...rest} />

package/dist/components/overlays/hover-card/hover-card-trigger.svelte.d.ts

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

package/dist/components/overlays/hover-card/hover-card.svelte

@@ -0,0 +1,22 @@
+<!--
+  Origin: the React package 2.23.0 `hover-card.tsx` (`HoverCard`), itself shadcn/ui new-york `hover-card`
+  Svelte: shadcn-svelte `hover-card`
+  Diverged: bits-ui's LinkPreview for Radix's HoverCard, with `bind:open`.
+    bits-ui renders no element for the root, so it carries no `data-slot`.
+-->
+<script lang="ts" module>
+  import { LinkPreview as HoverCardPrimitive } from 'bits-ui'
+
+  /**
+   * A preview on hover or focus, for a fact worth a glance without leaving the
+   * page: a person's details behind their name, a linked record's summary.
+   * Reach for `Tooltip` instead when the content is a single short label.
+   */
+  export type HoverCardProps = HoverCardPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let { open = $bindable(false), ...rest }: HoverCardProps = $props()
+</script>
+
+<HoverCardPrimitive.Root bind:open {...rest} />

package/dist/components/overlays/hover-card/hover-card.svelte.d.ts

@@ -0,0 +1,10 @@
+import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+/**
+ * A preview on hover or focus, for a fact worth a glance without leaving the
+ * page: a person's details behind their name, a linked record's summary.
+ * Reach for `Tooltip` instead when the content is a single short label.
+ */
+export type HoverCardProps = HoverCardPrimitive.RootProps;
+declare const HoverCard: import("svelte").Component<import("bits-ui").LinkPreviewRootPropsWithoutHTML, {}, "open">;
+type HoverCard = ReturnType<typeof HoverCard>;
+export default HoverCard;

package/dist/components/overlays/hover-card/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard, type HoverCardProps } from './hover-card.svelte';
+export { default as HoverCardContent, type HoverCardContentProps, } from './hover-card-content.svelte';
+export { default as HoverCardTrigger, type HoverCardTriggerProps, } from './hover-card-trigger.svelte';

package/dist/components/overlays/hover-card/index.js

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './hover-card.svelte';
+export { default as HoverCardContent, } from './hover-card-content.svelte';
+export { default as HoverCardTrigger, } from './hover-card-trigger.svelte';

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

@@ -0,0 +1,3 @@
+export { default as Popover, type PopoverProps } from './popover.svelte';
+export { default as PopoverContent, type PopoverContentProps } from './popover-content.svelte';
+export { default as PopoverTrigger, type PopoverTriggerProps } from './popover-trigger.svelte';

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

@@ -0,0 +1,3 @@
+export { default as Popover } from './popover.svelte';
+export { default as PopoverContent } from './popover-content.svelte';
+export { default as PopoverTrigger } from './popover-trigger.svelte';

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

@@ -0,0 +1,54 @@
+<!--
+  Origin: the React package 2.23.0 `popover.tsx` (`PopoverContent`), itself shadcn/ui new-york `popover`
+  Svelte: shadcn-svelte `popover`
+  Diverged: the size and origin variables are bits-ui's
+    (`--bits-popover-anchor-width` is the trigger's width).
+-->
+<script lang="ts" module>
+  import { Popover as PopoverPrimitive } from 'bits-ui'
+
+  /**
+   * The floating panel. It is not a `flex flex-col gap-4` like the reference's
+   * settings panel: most popovers are menus, filters or list panels that pass
+   * `p-0` and own their layout, and `p-0` cancels padding but not a gap. Add
+   * `flex flex-col gap-4` at the call site for the form case.
+   */
+  export type PopoverContentProps = PopoverPrimitive.ContentProps & {
+    /**
+     * The panel takes the trigger's exact width instead of its own `w-72`, and
+     * drops the padding: the shape a Select-like popover wants, where the
+     * content inside owns its own padding.
+     */
+    matchTriggerWidth?: boolean
+    portalProps?: PopoverPrimitive.PortalProps
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    align = 'center',
+    sideOffset = 4,
+    matchTriggerWidth = false,
+    portalProps,
+    class: className,
+    ...rest
+  }: PopoverContentProps = $props()
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+  <PopoverPrimitive.Content
+    bind:ref
+    data-slot="popover-content"
+    {align}
+    {sideOffset}
+    class={cn(
+      'bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-(--bits-popover-content-transform-origin) rounded-3xl text-sm shadow-lg ring-1 outline-hidden duration-100',
+      matchTriggerWidth ? 'w-[var(--bits-popover-anchor-width)] p-0' : 'w-72 p-4',
+      className,
+    )}
+    {...rest}
+  />
+</PopoverPrimitive.Portal>

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

@@ -0,0 +1,19 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+/**
+ * The floating panel. It is not a `flex flex-col gap-4` like the reference's
+ * settings panel: most popovers are menus, filters or list panels that pass
+ * `p-0` and own their layout, and `p-0` cancels padding but not a gap. Add
+ * `flex flex-col gap-4` at the call site for the form case.
+ */
+export type PopoverContentProps = PopoverPrimitive.ContentProps & {
+    /**
+     * The panel takes the trigger's exact width instead of its own `w-72`, and
+     * drops the padding: the shape a Select-like popover wants, where the
+     * content inside owns its own padding.
+     */
+    matchTriggerWidth?: boolean;
+    portalProps?: PopoverPrimitive.PortalProps;
+};
+declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

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

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

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

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

package/dist/components/overlays/popover/popover.svelte

@@ -0,0 +1,22 @@
+<!--
+  Origin: the React package 2.23.0 `popover.tsx` (`Popover`), itself shadcn/ui new-york `popover`
+  Svelte: shadcn-svelte `popover`
+  Diverged: bits-ui Popover for Radix, with `bind:open`. React's `PopoverAnchor`
+    has no bits-ui part; PopoverContent's `customAnchor` prop does its job.
+-->
+<script lang="ts" module>
+  import { Popover as PopoverPrimitive } from 'bits-ui'
+
+  /**
+   * A positioned panel with no semantics of its own; whatever goes in it brings
+   * its meaning. Reach for it when the content is not a list of commands: a
+   * filter, a form, a preview, a feed. Commands want `DropdownMenu`.
+   */
+  export type PopoverProps = PopoverPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let { open = $bindable(false), ...rest }: PopoverProps = $props()
+</script>
+
+<PopoverPrimitive.Root bind:open {...rest} />

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

@@ -0,0 +1,10 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+/**
+ * A positioned panel with no semantics of its own; whatever goes in it brings
+ * its meaning. Reach for it when the content is not a list of commands: a
+ * filter, a form, a preview, a feed. Commands want `DropdownMenu`.
+ */
+export type PopoverProps = PopoverPrimitive.RootProps;
+declare const Popover: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

@@ -0,0 +1,8 @@
+export { default as Sheet, type SheetProps } from './sheet.svelte';
+export { default as SheetClose, type SheetCloseProps } from './sheet-close.svelte';
+export { default as SheetContent, type SheetContentProps, type SheetSide, } from './sheet-content.svelte';
+export { default as SheetDescription, type SheetDescriptionProps } from './sheet-description.svelte';
+export { default as SheetFooter, type SheetFooterProps } from './sheet-footer.svelte';
+export { default as SheetHeader, type SheetHeaderProps } from './sheet-header.svelte';
+export { default as SheetTitle, type SheetTitleProps } from './sheet-title.svelte';
+export { default as SheetTrigger, type SheetTriggerProps } from './sheet-trigger.svelte';

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

@@ -0,0 +1,8 @@
+export { default as Sheet } from './sheet.svelte';
+export { default as SheetClose } from './sheet-close.svelte';
+export { default as SheetContent, } from './sheet-content.svelte';
+export { default as SheetDescription } from './sheet-description.svelte';
+export { default as SheetFooter } from './sheet-footer.svelte';
+export { default as SheetHeader } from './sheet-header.svelte';
+export { default as SheetTitle } from './sheet-title.svelte';
+export { default as SheetTrigger } from './sheet-trigger.svelte';

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

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

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

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

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

@@ -0,0 +1,71 @@
+<!--
+  Origin: the React package 2.23.0 `sheet.tsx` (`SheetContent`), itself shadcn/ui new-york `sheet`
+  Svelte: shadcn-svelte `sheet`
+  Diverged: unaudited, as in the React package. The portal and overlay are drawn inline, as React draws them;
+    neither is exported, as in React. Adds `data-side`, so a caller can
+    style by side without repeating the prop.
+-->
+<script lang="ts" module>
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import type { Snippet } from 'svelte'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  export const SHEET_SIDE_CLASS = {
+    right:
+      'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+    left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+    top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+    bottom:
+      'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+  } as const
+
+  export type SheetSide = keyof typeof SHEET_SIDE_CLASS
+
+  export type SheetContentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    side?: SheetSide
+    portalProps?: SheetPrimitive.PortalProps
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import XIcon from '@lucide/svelte/icons/x'
+
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    side = 'right',
+    portalProps,
+    class: className,
+    children,
+    ...rest
+  }: SheetContentProps = $props()
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+  <SheetPrimitive.Overlay
+    data-slot="sheet-overlay"
+    class="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"
+  />
+  <SheetPrimitive.Content
+    bind:ref
+    data-slot="sheet-content"
+    data-side={side}
+    class={cn(
+      'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+      SHEET_SIDE_CLASS[side],
+      className,
+    )}
+    {...rest}
+  >
+    {@render children?.()}
+    <SheetPrimitive.Close
+      class="ring-offset-background focus:ring-ring data-[state=open]:bg-muted absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+    >
+      <XIcon class="size-4" />
+      <span class="sr-only">Close</span>
+    </SheetPrimitive.Close>
+  </SheetPrimitive.Content>
+</SheetPrimitive.Portal>

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

@@ -0,0 +1,18 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+export declare const SHEET_SIDE_CLASS: {
+    readonly right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm";
+    readonly left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm";
+    readonly top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b";
+    readonly bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t";
+};
+export type SheetSide = keyof typeof SHEET_SIDE_CLASS;
+export type SheetContentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    side?: SheetSide;
+    portalProps?: SheetPrimitive.PortalProps;
+    children?: Snippet;
+};
+declare const SheetContent: import("svelte").Component<SheetContentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

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

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

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

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

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

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `sheet.tsx` (`SheetFooter`), itself shadcn/ui new-york `sheet`
+  Svelte: shadcn-svelte `sheet`
+  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 SheetFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SheetFooterProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-footer"
+  class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `sheet.tsx` (`SheetHeader`), itself shadcn/ui new-york `sheet`
+  Svelte: shadcn-svelte `sheet`
+  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 SheetHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: SheetHeaderProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-header"
+  class={cn('flex flex-col gap-1.5 p-4', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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

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

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

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

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

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

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

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

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

package/dist/components/overlays/sheet/sheet.svelte

@@ -0,0 +1,20 @@
+<!--
+  Origin: the React package 2.23.0 `sheet.tsx` (`Sheet`), itself shadcn/ui new-york `sheet`
+  Svelte: shadcn-svelte `sheet`
+  Diverged: unaudited, as in the React package. bits-ui Dialog for Radix Dialog, with `bind:open`.
+-->
+<script lang="ts" module>
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+
+  /**
+   * A panel anchored to the viewport's edge, `side="right"` by default: the
+   * desktop side panel for a quick view without leaving the list.
+   */
+  export type SheetProps = SheetPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let { open = $bindable(false), ...rest }: SheetProps = $props()
+</script>
+
+<SheetPrimitive.Root bind:open {...rest} />

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

@@ -0,0 +1,9 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+/**
+ * A panel anchored to the viewport's edge, `side="right"` by default: the
+ * desktop side panel for a quick view without leaving the list.
+ */
+export type SheetProps = SheetPrimitive.RootProps;
+declare const Sheet: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;