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

package/dist/components/overlays/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,45 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialogContent`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: `portalProps` added for the bits-ui Portal, as on DialogContent.
+-->
+<script lang="ts" module>
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
+
+  /**
+   * The card's 24px radius, a ring and `shadow-xl`: it is a dialog, and was
+   * drawn like a menu. `size="sm"` for a short confirmation with no description.
+   */
+  export type AlertDialogContentProps = AlertDialogPrimitive.ContentProps & {
+    size?: 'default' | 'sm'
+    portalProps?: AlertDialogPrimitive.PortalProps
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import AlertDialogOverlay from './alert-dialog-overlay.svelte'
+  import AlertDialogPortal from './alert-dialog-portal.svelte'
+
+  let {
+    ref = $bindable(null),
+    size = 'default',
+    portalProps,
+    class: className,
+    ...rest
+  }: AlertDialogContentProps = $props()
+</script>
+
+<AlertDialogPortal {...portalProps}>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content
+    bind:ref
+    data-slot="alert-dialog-content"
+    data-size={size}
+    class={cn(
+      'bg-background 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 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[min(var(--radius-4xl),24px)] ring-1 ring-foreground/5 dark:ring-foreground/10 p-6 shadow-xl duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+      className,
+    )}
+    {...rest}
+  />
+</AlertDialogPortal>

package/dist/components/overlays/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,12 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+/**
+ * The card's 24px radius, a ring and `shadow-xl`: it is a dialog, and was
+ * drawn like a menu. `size="sm"` for a short confirmation with no description.
+ */
+export type AlertDialogContentProps = AlertDialogPrimitive.ContentProps & {
+    size?: 'default' | 'sm';
+    portalProps?: AlertDialogPrimitive.PortalProps;
+};
+declare const AlertDialogContent: import("svelte").Component<AlertDialogContentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/components/overlays/alert-dialog/alert-dialog-description.svelte

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

package/dist/components/overlays/alert-dialog/alert-dialog-description.svelte.d.ts

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

package/dist/components/overlays/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,35 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialogFooter`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type AlertDialogFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: AlertDialogFooterProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-footer"
+  class={cn(
+    'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/overlays/alert-dialog/alert-dialog-footer.svelte.d.ts

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

package/dist/components/overlays/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,35 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialogHeader`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type AlertDialogHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: AlertDialogHeaderProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-header"
+  class={cn(
+    'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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

package/dist/components/overlays/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,35 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialogMedia`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type AlertDialogMediaProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: AlertDialogMediaProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="alert-dialog-media"
+  class={cn(
+    "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+    className,
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/overlays/alert-dialog/alert-dialog-media.svelte.d.ts

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

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

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialogOverlay`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
+
+  export type AlertDialogOverlayProps = AlertDialogPrimitive.OverlayProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: AlertDialogOverlayProps = $props()
+</script>
+
+<AlertDialogPrimitive.Overlay
+  bind:ref
+  data-slot="alert-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/50',
+    className,
+  )}
+  {...rest}
+/>

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

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

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

@@ -0,0 +1,16 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialogPortal`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
+
+  export type AlertDialogPortalProps = AlertDialogPrimitive.PortalProps
+</script>
+
+<script lang="ts">
+  let { ...rest }: AlertDialogPortalProps = $props()
+</script>
+
+<AlertDialogPrimitive.Portal {...rest} />

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

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

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

@@ -0,0 +1,26 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialogTitle`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
+
+  export type AlertDialogTitleProps = AlertDialogPrimitive.TitleProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: AlertDialogTitleProps = $props()
+</script>
+
+<AlertDialogPrimitive.Title
+  bind:ref
+  data-slot="alert-dialog-title"
+  class={cn(
+    'text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+    className,
+  )}
+  {...rest}
+/>

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+<!--
+  Origin: the React package 2.23.0 `alert-dialog.tsx` (`AlertDialog`), itself shadcn/ui new-york `alert-dialog`
+  Svelte: shadcn-svelte `alert-dialog`
+  Diverged: bits-ui AlertDialog for Radix, with `bind:open`. It shares a
+    `close()` through context so AlertDialogAction can close as Radix's did.
+-->
+<script lang="ts" module>
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui'
+  import { getContext, setContext } from 'svelte'
+
+  const CLOSE = Symbol('alert-dialog-close')
+
+  /** The enclosing AlertDialog's close, for AlertDialogAction. */
+  export function getAlertDialogClose(): (() => void) | undefined {
+    return getContext<(() => void) | undefined>(CLOSE)
+  }
+
+  /**
+   * For a confirmation the operator cannot dismiss by clicking outside it:
+   * `Dialog` closes on an outside click, this does not. Reach for it when the
+   * action is destructive or hard to undo; everything else wants `Dialog`.
+   */
+  export type AlertDialogProps = AlertDialogPrimitive.RootProps
+</script>
+
+<script lang="ts">
+  let { open = $bindable(false), ...rest }: AlertDialogProps = $props()
+
+  setContext(CLOSE, () => {
+    open = false
+  })
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...rest} />

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

@@ -0,0 +1,12 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+/** The enclosing AlertDialog's close, for AlertDialogAction. */
+export declare function getAlertDialogClose(): (() => void) | undefined;
+/**
+ * For a confirmation the operator cannot dismiss by clicking outside it:
+ * `Dialog` closes on an outside click, this does not. Reach for it when the
+ * action is destructive or hard to undo; everything else wants `Dialog`.
+ */
+export type AlertDialogProps = AlertDialogPrimitive.RootProps;
+declare const AlertDialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

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

@@ -0,0 +1,12 @@
+export { type AlertDialogProps, default as AlertDialog } from './alert-dialog.svelte';
+export { type AlertDialogActionProps, default as AlertDialogAction, } from './alert-dialog-action.svelte';
+export { type AlertDialogCancelProps, default as AlertDialogCancel, } from './alert-dialog-cancel.svelte';
+export { type AlertDialogContentProps, default as AlertDialogContent, } from './alert-dialog-content.svelte';
+export { type AlertDialogDescriptionProps, default as AlertDialogDescription, } from './alert-dialog-description.svelte';
+export { type AlertDialogFooterProps, default as AlertDialogFooter, } from './alert-dialog-footer.svelte';
+export { type AlertDialogHeaderProps, default as AlertDialogHeader, } from './alert-dialog-header.svelte';
+export { type AlertDialogMediaProps, default as AlertDialogMedia, } from './alert-dialog-media.svelte';
+export { type AlertDialogOverlayProps, default as AlertDialogOverlay, } from './alert-dialog-overlay.svelte';
+export { type AlertDialogPortalProps, default as AlertDialogPortal, } from './alert-dialog-portal.svelte';
+export { type AlertDialogTitleProps, default as AlertDialogTitle, } from './alert-dialog-title.svelte';
+export { type AlertDialogTriggerProps, default as AlertDialogTrigger, } from './alert-dialog-trigger.svelte';

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

@@ -0,0 +1,12 @@
+export { default as AlertDialog } from './alert-dialog.svelte';
+export { default as AlertDialogAction, } from './alert-dialog-action.svelte';
+export { default as AlertDialogCancel, } from './alert-dialog-cancel.svelte';
+export { default as AlertDialogContent, } from './alert-dialog-content.svelte';
+export { default as AlertDialogDescription, } from './alert-dialog-description.svelte';
+export { default as AlertDialogFooter, } from './alert-dialog-footer.svelte';
+export { default as AlertDialogHeader, } from './alert-dialog-header.svelte';
+export { default as AlertDialogMedia, } from './alert-dialog-media.svelte';
+export { default as AlertDialogOverlay, } from './alert-dialog-overlay.svelte';
+export { default as AlertDialogPortal, } from './alert-dialog-portal.svelte';
+export { default as AlertDialogTitle, } from './alert-dialog-title.svelte';
+export { default as AlertDialogTrigger, } from './alert-dialog-trigger.svelte';

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

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

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

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

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

@@ -0,0 +1,79 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogContent`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: `portalProps` added for the bits-ui Portal, as shadcn-svelte has it.
+    The close button keeps the React classes rather than shadcn-svelte's ghost Button.
+-->
+<script lang="ts" module>
+  import { Dialog as DialogPrimitive } from 'bits-ui'
+  import type { Snippet } from 'svelte'
+
+  import type { WithoutChildrenOrChild } from '../../../utils/types.js'
+
+  export const DIALOG_SIZE_CLASS = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+  } as const
+
+  export type DialogSize = keyof typeof DIALOG_SIZE_CLASS
+
+  /**
+   * A ring rather than a border, and `shadow-xl` rather than `shadow-lg`: a
+   * dialog sits above everything, so it casts the deeper shadow.
+   *
+   * `size` names four widths rather than each dialog carrying its own
+   * `sm:max-w-*`. `lg` is the default: it is what an unstyled dialog rendered at.
+   */
+  export type DialogContentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<DialogPrimitive.PortalProps>
+    children: Snippet
+    showCloseButton?: boolean
+    size?: DialogSize
+  }
+</script>
+
+<script lang="ts">
+  import XIcon from '@lucide/svelte/icons/x'
+
+  import { cn } from '../../../utils/cn.js'
+  import DialogOverlay from './dialog-overlay.svelte'
+  import DialogPortal from './dialog-portal.svelte'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    showCloseButton = true,
+    size = 'lg',
+    ...rest
+  }: DialogContentProps = $props()
+</script>
+
+<DialogPortal {...portalProps}>
+  <DialogOverlay />
+  <DialogPrimitive.Content
+    bind:ref
+    data-slot="dialog-content"
+    data-size={size}
+    class={cn(
+      'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[min(var(--radius-4xl),24px)] ring-1 ring-foreground/5 dark:ring-foreground/10 p-6 shadow-xl duration-200 outline-none',
+      DIALOG_SIZE_CLASS[size],
+      className,
+    )}
+    {...rest}
+  >
+    {@render children?.()}
+    {#if showCloseButton}
+      <DialogPrimitive.Close
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <XIcon />
+        <span class="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    {/if}
+  </DialogPrimitive.Content>
+</DialogPortal>

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

@@ -0,0 +1,26 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../utils/types.js';
+export declare const DIALOG_SIZE_CLASS: {
+    readonly sm: "sm:max-w-sm";
+    readonly md: "sm:max-w-md";
+    readonly lg: "sm:max-w-lg";
+    readonly xl: "sm:max-w-xl";
+};
+export type DialogSize = keyof typeof DIALOG_SIZE_CLASS;
+/**
+ * A ring rather than a border, and `shadow-xl` rather than `shadow-lg`: a
+ * dialog sits above everything, so it casts the deeper shadow.
+ *
+ * `size` names four widths rather than each dialog carrying its own
+ * `sm:max-w-*`. `lg` is the default: it is what an unstyled dialog rendered at.
+ */
+export type DialogContentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<DialogPrimitive.PortalProps>;
+    children: Snippet;
+    showCloseButton?: boolean;
+    size?: DialogSize;
+};
+declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "ref">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

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

@@ -0,0 +1,23 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogDescription`), 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 DialogDescriptionProps = DialogPrimitive.DescriptionProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: DialogDescriptionProps = $props()
+</script>
+
+<DialogPrimitive.Description
+  bind:ref
+  data-slot="dialog-description"
+  class={cn('text-muted-foreground text-sm', className)}
+  {...rest}
+/>

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

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

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

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogFooter`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type DialogFooterProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: DialogFooterProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dialog-footer"
+  class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,27 @@
+<!--
+  Origin: the React package 2.23.0 `dialog.tsx` (`DialogHeader`), itself shadcn/ui new-york `dialog`
+  Svelte: shadcn-svelte `dialog`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type DialogHeaderProps = WithElementRef<HTMLAttributes<HTMLDivElement>>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { ref = $bindable(null), class: className, children, ...rest }: DialogHeaderProps = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="dialog-header"
+  class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>