@adea-ai/ui 0.109.0 → 0.109.1

package/dist/components/ui/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","createDialogFocusRestoration","DialogOverlay","headingVariants","sheetVariants","variants","side","top","bottom","start","end","variant","edge","inset","compoundVariants","class","defaultVariants","sheetVariantFor","SheetContentProps","closeButton","Element","closeLabel","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","when","_$mergeProps","data-variant","_$memo","CloseButton","aria-label","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","size","leading","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\nimport { headingVariants } from '../typography'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * `variant` decides how it meets that edge. `inset` — the default for `end` —\n * docks the panel inside the main view: below the top bar, one equal gap from\n * the top bar, the end edge and the bottom, with no scrim, so the work it edits\n * stays visible and the top bar stays reachable. It is the shape for editing one\n * thing beside its context (appearance settings, a task, a record). `edge` runs\n * edge to edge over a scrim — the shape of a navigation drawer, and the default\n * for every other side.\n *\n * Its parts read alike everywhere: `SheetHeader` holds a heading, a description\n * and a full-width rule beneath, with the close button in the corner;\n * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that\n * holds the decision.\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\n// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be\n// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the\n// pinned footer out of view. Only SheetBody scrolls.\nconst sheetVariants = cva(\n  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n      variant: {\n        edge: '',\n        inset: 'panel-dialog-inset w-lg rounded-xl border',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        variant: 'edge',\n        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',\n      },\n      {\n        side: 'bottom',\n        variant: 'edge',\n        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',\n      },\n      {\n        side: 'start',\n        variant: 'edge',\n        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',\n      },\n      {\n        side: 'end',\n        variant: 'edge',\n        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',\n      },\n    ],\n    defaultVariants: { side: 'end', variant: 'edge' },\n  }\n)\n\n/** `inset` for the end edge, `edge` for every other side, unless the caller says. */\nconst sheetVariantFor = (\n  side: SheetContentProps['side'],\n  variant: SheetContentProps['variant']\n): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** The close button's accessible name. Defaults to \"Close\". */\n    closeLabel?: string\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'variant',\n    'children',\n    'closeButton',\n    'closeLabel',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  const variant = () => sheetVariantFor(local.side, local.variant)\n\n  return (\n    <KobalteDialog.Portal>\n      {/* An inset panel is beside the work, so the work stays in view: no scrim.\n          It is still modal — focus stays inside and an outside click dismisses. */}\n      <Show when={variant() === 'edge'}>\n        <DialogOverlay />\n      </Show>\n      <KobalteDialogContent\n        data-variant={variant()}\n        class={cn(\n          sheetVariants({ side: local.side, variant: variant() }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label={local.closeLabel ?? 'Close'}\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\nexport function SheetHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn(\n        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Title\n      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}
+{"version":3,"file":"sheet.js","names":["Dialog","KobalteDialog","Content","KobalteDialogContent","useDialogContext","X","Accessor","ComponentProps","JSX","Show","splitProps","cva","VariantProps","overlayTitle","cn","createDialogFocusRestoration","DialogOverlay","sheetVariants","variants","side","top","bottom","start","end","variant","edge","inset","compoundVariants","class","defaultVariants","sheetVariantFor","SheetContentProps","closeButton","Element","closeLabel","restoreFocusRef","HTMLElement","SheetContent","props","local","rest","dialog","focusRestoration","open","isOpen","onOpenAutoFocus","onCloseAutoFocus","_$createComponent","Portal","children","when","_$mergeProps","data-variant","_$memo","CloseButton","aria-label","tabindex","Sheet","SheetTrigger","Trigger","SheetCloseButton","SheetHeader","_el$","_tmpl$","_$spread","SheetBody","_el$2","_tmpl$2","SheetFooter","_el$3","_tmpl$3","SheetTitle","Title","SheetDescription","Description","_$createComponent","KobalteDialog","KobalteDialogContent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import {\n  Dialog as KobalteDialog,\n  Content as KobalteDialogContent,\n  useDialogContext,\n} from '@kobalte/core/dialog'\n// AlertDialog shares DialogRoot.Content; Sheet uses the stable named primitive.\nimport { X } from 'lucide-solid'\nimport type { Accessor, ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { overlayTitle } from '#lib/overlay'\nimport { cn } from '#lib/utils'\nimport { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'\n\n/**\n * Sheet.\n *\n * A dialog anchored to an edge of the window rather than centred. Use it when\n * the content is a *panel beside* the work — a details inspector, a filter rail,\n * a settings flyout — so the user keeps the context it belongs to in view.\n * A centred dialog interrupts; a sheet is inspected.\n *\n * `side` decides which edge; the panel is a full-height column for `start` and\n * `end`, and a full-width row for `top` and `bottom`. The slide-in direction\n * follows from the side, so a caller never pairs them by hand.\n *\n * `variant` decides how it meets that edge. `inset` — the default for `end` —\n * docks the panel inside the main view: below the top bar, one equal gap from\n * the top bar, the end edge and the bottom, with no scrim, so the work it edits\n * stays visible and the top bar stays reachable. It is the shape for editing one\n * thing beside its context (appearance settings, a task, a record). `edge` runs\n * edge to edge over a scrim — the shape of a navigation drawer, and the default\n * for every other side.\n *\n * Its parts read alike everywhere: `SheetHeader` holds a heading, a description\n * and a full-width rule beneath, with the close button in the corner;\n * `SheetBody` scrolls on its own; `SheetFooter` is a full-width tinted band that\n * holds the decision.\n *\n * Controlled sheets opened from outside a `SheetTrigger` restore focus to the\n * element focused before opening. Pass `restoreFocusRef` when a stable external\n * opener must be used instead, such as when another layer closes before the\n * sheet opens.\n */\n// `overflow-clip`, not `overflow-hidden`: a hidden overflow can still be\n// scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the\n// pinned footer out of view. Only SheetBody scrolls.\nconst sheetVariants = cva(\n  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',\n  {\n    variants: {\n      side: {\n        top: 'data-expanded:slide-in-from-top data-closed:slide-out-to-top',\n        bottom: 'data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',\n        start: 'data-expanded:slide-in-from-left data-closed:slide-out-to-left',\n        end: 'data-expanded:slide-in-from-right data-closed:slide-out-to-right',\n      },\n      variant: {\n        edge: '',\n        inset: 'panel-dialog-inset w-lg rounded-xl border',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        variant: 'edge',\n        class: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b',\n      },\n      {\n        side: 'bottom',\n        variant: 'edge',\n        class: 'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t',\n      },\n      {\n        side: 'start',\n        variant: 'edge',\n        class: 'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e',\n      },\n      {\n        side: 'end',\n        variant: 'edge',\n        class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',\n      },\n    ],\n    defaultVariants: { side: 'end', variant: 'edge' },\n  }\n)\n\n/** `inset` for the end edge, `edge` for every other side, unless the caller says. */\nconst sheetVariantFor = (\n  side: SheetContentProps['side'],\n  variant: SheetContentProps['variant']\n): 'edge' | 'inset' => variant ?? ((side ?? 'end') === 'end' ? 'inset' : 'edge')\n\nexport type SheetContentProps = ComponentProps<typeof KobalteDialogContent> &\n  VariantProps<typeof sheetVariants> & {\n    closeButton?: JSX.Element | false\n    /** The close button's accessible name. Defaults to \"Close\". */\n    closeLabel?: string\n    /** Supplies the stable external element to focus when the controlled sheet closes. */\n    restoreFocusRef?: Accessor<HTMLElement | undefined>\n  }\n\nexport function SheetContent(props: SheetContentProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'side',\n    'variant',\n    'children',\n    'closeButton',\n    'closeLabel',\n    'restoreFocusRef',\n    'onOpenAutoFocus',\n    'onCloseAutoFocus',\n  ])\n  const dialog = useDialogContext()\n  const focusRestoration = createDialogFocusRestoration({\n    open: dialog.isOpen,\n    restoreFocusRef: local.restoreFocusRef,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n  })\n\n  const variant = () => sheetVariantFor(local.side, local.variant)\n\n  return (\n    <KobalteDialog.Portal>\n      {/* An inset panel is beside the work, so the work stays in view: no scrim.\n          It is still modal — focus stays inside and an outside click dismisses. */}\n      <Show when={variant() === 'edge'}>\n        <DialogOverlay />\n      </Show>\n      <KobalteDialogContent\n        data-variant={variant()}\n        class={cn(\n          sheetVariants({ side: local.side, variant: variant() }),\n          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',\n          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',\n          local.class\n        )}\n        {...rest}\n        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}\n        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}\n      >\n        {local.children}\n        <Show when={local.closeButton !== false}>\n          {/* The close action opts into the tab order explicitly. Engines that\n              derive tabbability from the DOM instead of the host (Playwright's\n              WebKit walks only explicit tabindex and form controls) would skip\n              an implicitly-tabbable button and jump past the sheet's end. */}\n          <KobalteDialog.CloseButton\n            aria-label={local.closeLabel ?? 'Close'}\n            tabindex=\"0\"\n            class=\"absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n          >\n            {local.closeButton ?? <X class=\"size-4\" />}\n          </KobalteDialog.CloseButton>\n        </Show>\n      </KobalteDialogContent>\n    </KobalteDialog.Portal>\n  )\n}\n\nexport function Sheet(props: ComponentProps<typeof KobalteDialog>) {\n  return <KobalteDialog {...props} />\n}\n\nexport function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {\n  return <KobalteDialog.Trigger {...props} />\n}\n\nexport function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />\n}\n\nexport function SheetHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      class={cn(\n        'flex shrink-0 flex-col gap-1.5 border-b border-border p-4 pe-12 text-start',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto p-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      class={cn(\n        'flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-border bg-background px-4 py-3',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />\n}\n\nexport function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />\n  )\n}\n\nexport { sheetVariants }\n"],"mappings":"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"}

package/dist/components/ui/typography/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,eAAe;;;;;8EAsC1B,CAAA;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAA;AAEV,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAG/D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,IAAI,gBAAgB,CAC1E,CAAC,EACD,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kCA0B9E;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY;;;;8EA6BvB,CAAA;AAEF,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAA;AAEV,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAGzD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CACtE,CAAC,EACD,gBAAgB,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,kCAoBvE"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/typography/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC9E,OAAO,EAAmC,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAGtD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,eAAe;;;;;8EAsC1B,CAAA;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAA;AAEV,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAA;AAG/D,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,IAAI,gBAAgB,CAC1E,CAAC,EACD,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kCA0B9E;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY;;;;8EA6BvB,CAAA;AAEF,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAA;AAEV,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAGzD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,IAAI,gBAAgB,CACtE,CAAC,EACD,gBAAgB,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CACF,CAAA;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,GAAG,GAAG,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,kCAoBvE"}

package/dist/components/ui/typography/typography.js

@@ -26,7 +26,7 @@ import { Polymorphic } from "@kobalte/core/polymorphic";
 * stack already sets the rhythm (a card or dialog header), and is the only other
 * option.
 */
-var headingVariants = cva("font-semibold", {
+var headingVariants = /* @__PURE__ */ cva("font-semibold", {
 	variants: {
 		size: {
 			/** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */
@@ -113,7 +113,7 @@ function Heading(props) {
 *
 * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
 */
-var textVariants = cva("", {
+var textVariants = /* @__PURE__ */ cva("", {
 	variants: {
 		variant: {
 			/** 14px / 400. Body copy and descriptions. */

package/dist/components/ui/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":["Polymorphic","PolymorphicProps","ComponentProps","splitProps","ValidComponent","cva","VariantProps","cn","headingVariants","variants","size","display","title","page","section","card","subsection","leading","rung","none","numeric","true","tone","inherit","foreground","muted","defaultVariants","headingElement","const","HeadingVariantProps","HeadingSize","HeadingProps","T","class","Heading","props","local","rest","as","_$createComponent","_$mergeProps","textVariants","variant","body","label","strong","caption","micro","code","textElement","TextVariantProps","TextVariant","TextProps","Text","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/typography/typography.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Typography.\n *\n * The type ladder in `theme.css` has eight rungs, each with its own leading. These\n * two components are where a rung is paired with its weight and tracking, so a call\n * site names a *role* — a page title, a section heading, a caption — and never\n * re-decides `text-xl font-semibold tracking-tight` for itself. Twenty call sites\n * that each choose a size and a weight drift; twenty that name a role cannot.\n *\n * **Size is visual; the element is the document outline.** They are separate\n * decisions and the API keeps them separate. Each size has a conventional default\n * element (`display`, `title` and `page` render an `h1`, `section` an `h2`, `card`\n * an `h3`, `subsection` an `h4`) so the common case needs no prop, but the default\n * is a convenience, not a coupling: a card-sized title that is the first heading\n * in a settings section is an `h2`, so it says `as=\"h2\"`. Never pick a `size` to get\n * a heading level, and never pick an element to get a size.\n *\n * Headings are 600, and weights stop at 600 — on a dark surface a bold word blooms.\n * Leading comes from the rung; `leading=\"none\"` is for a title whose surrounding\n * stack already sets the rhythm (a card or dialog header), and is the only other\n * option.\n */\nexport const headingVariants = cva('font-semibold', {\n  variants: {\n    size: {\n      /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */\n      display: 'text-3xl tracking-tight',\n      /** 24px. A landing title or a headline figure larger than a stat's. */\n      title: 'text-2xl tracking-tight',\n      /** 20px. The title of a page (`PageHeaderTitle`). */\n      page: 'text-xl tracking-tight',\n      /** 18px. A section heading inside a page (`PageSection`). */\n      section: 'text-lg tracking-tight',\n      /** 16px. A card, dialog, drawer or settings-section title. */\n      card: 'text-base tracking-tight',\n      /** 14px. A heading inside a compact surface: a sheet, a chart, a column. */\n      subsection: 'text-sm',\n    },\n    leading: {\n      /** The rung's own line-height from `theme.css`. */\n      rung: '',\n      /** Line-height 1, for a title whose container's gap sets the rhythm. */\n      none: 'leading-none',\n    },\n    /** Tabular figures, so a row of numbers can be compared without digits shifting. */\n    numeric: {\n      true: 'tabular-nums',\n    },\n    tone: {\n      /** Inherit the surrounding colour — right on every surface by construction. */\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    size: 'section',\n    leading: 'rung',\n    tone: 'inherit',\n  },\n})\n\n/**\n * The conventional element for each heading size. Exported so a test (and a\n * reader) can see the whole mapping in one place; pass `as` to depart from it.\n */\nexport const headingElement = {\n  display: 'h1',\n  title: 'h1',\n  page: 'h1',\n  section: 'h2',\n  card: 'h3',\n  subsection: 'h4',\n} as const\n\ntype HeadingVariantProps = VariantProps<typeof headingVariants>\ntype HeadingSize = keyof typeof headingElement\n\nexport type HeadingProps<T extends ValidComponent = 'h2'> = PolymorphicProps<\n  T,\n  HeadingVariantProps & {\n    class?: string\n  }\n>\n\nexport function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>) {\n  const [local, rest] = splitProps(props as HeadingProps & { as?: ValidComponent }, [\n    'as',\n    'size',\n    'leading',\n    'numeric',\n    'tone',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? headingElement[(local.size ?? 'section') as HeadingSize]}\n      data-slot=\"heading\"\n      class={cn(\n        headingVariants({\n          size: local.size,\n          leading: local.leading,\n          numeric: local.numeric,\n          tone: local.tone,\n        }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'h2'>)}\n    />\n  )\n}\n\n/**\n * Text.\n *\n * Everything that is not a heading. Body and strong copy use the content font\n * axis; labels, captions and microcopy inherit the UI face. Code uses its own\n * family and size axis for anything a user compares character by character.\n *\n * `tone` is a separate axis from `variant` because \"secondary\" is a colour\n * decision, not a size: a muted caption and a muted body line are both common.\n * The default inherits, so text on a filled surface picks up that surface's\n * foreground without the caller restating it.\n *\n * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.\n */\nexport const textVariants = cva('', {\n  variants: {\n    variant: {\n      /** 14px / 400. Body copy and descriptions. */\n      body: 'font-content text-content',\n      /** 14px / 500. Labels, control text, list-row titles. */\n      label: 'text-sm font-medium',\n      /** 14px / 600. Emphasis inside body copy. */\n      strong: 'font-content text-content font-semibold',\n      /** 12px / 400. Metadata, secondary rows, units. */\n      caption: 'text-xs',\n      /** 11px / 500. The floor: keyboard keys, the status bar. */\n      micro: 'text-2xs font-medium',\n      /** 12px mono. Ids, paths, hashes, inline code. */\n      code: 'font-code text-code',\n    },\n    tone: {\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n    numeric: {\n      true: 'tabular-nums',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    tone: 'inherit',\n  },\n})\n\nexport const textElement = {\n  body: 'p',\n  label: 'span',\n  strong: 'span',\n  caption: 'span',\n  micro: 'span',\n  code: 'code',\n} as const\n\ntype TextVariantProps = VariantProps<typeof textVariants>\ntype TextVariant = keyof typeof textElement\n\nexport type TextProps<T extends ValidComponent = 'p'> = PolymorphicProps<\n  T,\n  TextVariantProps & {\n    class?: string\n  }\n>\n\nexport function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {\n  const [local, rest] = splitProps(props as TextProps & { as?: ValidComponent }, [\n    'as',\n    'variant',\n    'tone',\n    'numeric',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}\n      data-slot=\"text\"\n      class={cn(\n        textVariants({ variant: local.variant, tone: local.tone, numeric: local.numeric }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'p'>)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAaQ,kBAAkBH,IAAI,iBAAiB;CAClDI,UAAU;EACRC,MAAM;;GAEJC,SAAS;;GAETC,OAAO;;GAEPC,MAAM;;GAENC,SAAS;;GAETC,MAAM;;GAENC,YAAY;EACd;EACAC,SAAS;;GAEPC,MAAM;;GAENC,MAAM;EACR;;EAEAC,SAAS,EACPC,MAAM,eACR;EACAC,MAAM;;GAEJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;CACF;CACAC,iBAAiB;EACfhB,MAAM;EACNO,SAAS;EACTK,MAAM;CACR;AACF,CAAC;;;;;AAMD,IAAaK,iBAAiB;CAC5BhB,SAAS;CACTC,OAAO;CACPC,MAAM;CACNC,SAAS;CACTC,MAAM;CACNC,YAAY;AACd;AAYA,SAAgBkB,QAAyCC,OAAwB;CAC/E,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAAiD;EAChF;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMX,eAAgBS,MAAM1B,QAAQ;EAA0B;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEjEH,GACLC,gBAAgB;IACdE,MAAM0B,MAAM1B;IACZO,SAASmB,MAAMnB;IACfG,SAASgB,MAAMhB;IACfE,MAAMc,MAAMd;GACd,CAAC,GACDc,MAAMH,KACR;EAAC;CAAA,GACII,IAA4B,CAAA;AAGvC;;;;;;;;;;;;;;;AAgBA,IAAaI,eAAepC,IAAI,IAAI;CAClCI,UAAU;EACRiC,SAAS;;GAEPC,MAAM;;GAENC,OAAO;;GAEPC,QAAQ;;GAERC,SAAS;;GAETC,OAAO;;GAEPC,MAAM;EACR;EACA1B,MAAM;GACJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;EACAL,SAAS,EACPC,MAAM,eACR;CACF;CACAK,iBAAiB;EACfgB,SAAS;EACTpB,MAAM;CACR;AACF,CAAC;AAED,IAAa2B,cAAc;CACzBN,MAAM;CACNC,OAAO;CACPC,QAAQ;CACRC,SAAS;CACTC,OAAO;CACPC,MAAM;AACR;AAYA,SAAgBK,KAAqClB,OAAqB;CACxE,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAA8C;EAC7E;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMW,YAAab,MAAMM,WAAW;EAAuB;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAE9DnC,GACLkC,aAAa;IAAEC,SAASN,MAAMM;IAASpB,MAAMc,MAAMd;IAAMF,SAASgB,MAAMhB;GAAQ,CAAC,GACjFgB,MAAMH,KACR;EAAC;CAAA,GACII,IAA2B,CAAA;AAGtC"}
+{"version":3,"file":"typography.js","names":["Polymorphic","PolymorphicProps","ComponentProps","splitProps","ValidComponent","cva","VariantProps","cn","headingVariants","variants","size","display","title","page","section","card","subsection","leading","rung","none","numeric","true","tone","inherit","foreground","muted","defaultVariants","headingElement","const","HeadingVariantProps","HeadingSize","HeadingProps","T","class","Heading","props","local","rest","as","_$createComponent","_$mergeProps","textVariants","variant","body","label","strong","caption","micro","code","textElement","TextVariantProps","TextVariant","TextProps","Text","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/ui/typography/typography.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Typography.\n *\n * The type ladder in `theme.css` has eight rungs, each with its own leading. These\n * two components are where a rung is paired with its weight and tracking, so a call\n * site names a *role* — a page title, a section heading, a caption — and never\n * re-decides `text-xl font-semibold tracking-tight` for itself. Twenty call sites\n * that each choose a size and a weight drift; twenty that name a role cannot.\n *\n * **Size is visual; the element is the document outline.** They are separate\n * decisions and the API keeps them separate. Each size has a conventional default\n * element (`display`, `title` and `page` render an `h1`, `section` an `h2`, `card`\n * an `h3`, `subsection` an `h4`) so the common case needs no prop, but the default\n * is a convenience, not a coupling: a card-sized title that is the first heading\n * in a settings section is an `h2`, so it says `as=\"h2\"`. Never pick a `size` to get\n * a heading level, and never pick an element to get a size.\n *\n * Headings are 600, and weights stop at 600 — on a dark surface a bold word blooms.\n * Leading comes from the rung; `leading=\"none\"` is for a title whose surrounding\n * stack already sets the rhythm (a card or dialog header), and is the only other\n * option.\n */\n// cva only returns a closure. A heading-only consumer must discard Text's recipe.\nexport const headingVariants = /* @__PURE__ */ cva('font-semibold', {\n  variants: {\n    size: {\n      /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */\n      display: 'text-3xl tracking-tight',\n      /** 24px. A landing title or a headline figure larger than a stat's. */\n      title: 'text-2xl tracking-tight',\n      /** 20px. The title of a page (`PageHeaderTitle`). */\n      page: 'text-xl tracking-tight',\n      /** 18px. A section heading inside a page (`PageSection`). */\n      section: 'text-lg tracking-tight',\n      /** 16px. A card, dialog, drawer or settings-section title. */\n      card: 'text-base tracking-tight',\n      /** 14px. A heading inside a compact surface: a sheet, a chart, a column. */\n      subsection: 'text-sm',\n    },\n    leading: {\n      /** The rung's own line-height from `theme.css`. */\n      rung: '',\n      /** Line-height 1, for a title whose container's gap sets the rhythm. */\n      none: 'leading-none',\n    },\n    /** Tabular figures, so a row of numbers can be compared without digits shifting. */\n    numeric: {\n      true: 'tabular-nums',\n    },\n    tone: {\n      /** Inherit the surrounding colour — right on every surface by construction. */\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    size: 'section',\n    leading: 'rung',\n    tone: 'inherit',\n  },\n})\n\n/**\n * The conventional element for each heading size. Exported so a test (and a\n * reader) can see the whole mapping in one place; pass `as` to depart from it.\n */\nexport const headingElement = {\n  display: 'h1',\n  title: 'h1',\n  page: 'h1',\n  section: 'h2',\n  card: 'h3',\n  subsection: 'h4',\n} as const\n\ntype HeadingVariantProps = VariantProps<typeof headingVariants>\ntype HeadingSize = keyof typeof headingElement\n\nexport type HeadingProps<T extends ValidComponent = 'h2'> = PolymorphicProps<\n  T,\n  HeadingVariantProps & {\n    class?: string\n  }\n>\n\nexport function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>) {\n  const [local, rest] = splitProps(props as HeadingProps & { as?: ValidComponent }, [\n    'as',\n    'size',\n    'leading',\n    'numeric',\n    'tone',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? headingElement[(local.size ?? 'section') as HeadingSize]}\n      data-slot=\"heading\"\n      class={cn(\n        headingVariants({\n          size: local.size,\n          leading: local.leading,\n          numeric: local.numeric,\n          tone: local.tone,\n        }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'h2'>)}\n    />\n  )\n}\n\n/**\n * Text.\n *\n * Everything that is not a heading. Body and strong copy use the content font\n * axis; labels, captions and microcopy inherit the UI face. Code uses its own\n * family and size axis for anything a user compares character by character.\n *\n * `tone` is a separate axis from `variant` because \"secondary\" is a colour\n * decision, not a size: a muted caption and a muted body line are both common.\n * The default inherits, so text on a filled surface picks up that surface's\n * foreground without the caller restating it.\n *\n * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.\n */\nexport const textVariants = /* @__PURE__ */ cva('', {\n  variants: {\n    variant: {\n      /** 14px / 400. Body copy and descriptions. */\n      body: 'font-content text-content',\n      /** 14px / 500. Labels, control text, list-row titles. */\n      label: 'text-sm font-medium',\n      /** 14px / 600. Emphasis inside body copy. */\n      strong: 'font-content text-content font-semibold',\n      /** 12px / 400. Metadata, secondary rows, units. */\n      caption: 'text-xs',\n      /** 11px / 500. The floor: keyboard keys, the status bar. */\n      micro: 'text-2xs font-medium',\n      /** 12px mono. Ids, paths, hashes, inline code. */\n      code: 'font-code text-code',\n    },\n    tone: {\n      inherit: '',\n      foreground: 'text-foreground',\n      muted: 'text-muted-foreground',\n    },\n    numeric: {\n      true: 'tabular-nums',\n    },\n  },\n  defaultVariants: {\n    variant: 'body',\n    tone: 'inherit',\n  },\n})\n\nexport const textElement = {\n  body: 'p',\n  label: 'span',\n  strong: 'span',\n  caption: 'span',\n  micro: 'span',\n  code: 'code',\n} as const\n\ntype TextVariantProps = VariantProps<typeof textVariants>\ntype TextVariant = keyof typeof textElement\n\nexport type TextProps<T extends ValidComponent = 'p'> = PolymorphicProps<\n  T,\n  TextVariantProps & {\n    class?: string\n  }\n>\n\nexport function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {\n  const [local, rest] = splitProps(props as TextProps & { as?: ValidComponent }, [\n    'as',\n    'variant',\n    'tone',\n    'numeric',\n    'class',\n  ])\n\n  return (\n    <Polymorphic\n      as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}\n      data-slot=\"text\"\n      class={cn(\n        textVariants({ variant: local.variant, tone: local.tone, numeric: local.numeric }),\n        local.class\n      )}\n      {...(rest as ComponentProps<'p'>)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAaQ,kBAAkCH,oBAAI,iBAAiB;CAClEI,UAAU;EACRC,MAAM;;GAEJC,SAAS;;GAETC,OAAO;;GAEPC,MAAM;;GAENC,SAAS;;GAETC,MAAM;;GAENC,YAAY;EACd;EACAC,SAAS;;GAEPC,MAAM;;GAENC,MAAM;EACR;;EAEAC,SAAS,EACPC,MAAM,eACR;EACAC,MAAM;;GAEJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;CACF;CACAC,iBAAiB;EACfhB,MAAM;EACNO,SAAS;EACTK,MAAM;CACR;AACF,CAAC;;;;;AAMD,IAAaK,iBAAiB;CAC5BhB,SAAS;CACTC,OAAO;CACPC,MAAM;CACNC,SAAS;CACTC,MAAM;CACNC,YAAY;AACd;AAYA,SAAgBkB,QAAyCC,OAAwB;CAC/E,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAAiD;EAChF;EACA;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMX,eAAgBS,MAAM1B,QAAQ;EAA0B;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAEjEH,GACLC,gBAAgB;IACdE,MAAM0B,MAAM1B;IACZO,SAASmB,MAAMnB;IACfG,SAASgB,MAAMhB;IACfE,MAAMc,MAAMd;GACd,CAAC,GACDc,MAAMH,KACR;EAAC;CAAA,GACII,IAA4B,CAAA;AAGvC;;;;;;;;;;;;;;;AAgBA,IAAaI,eAA+BpC,oBAAI,IAAI;CAClDI,UAAU;EACRiC,SAAS;;GAEPC,MAAM;;GAENC,OAAO;;GAEPC,QAAQ;;GAERC,SAAS;;GAETC,OAAO;;GAEPC,MAAM;EACR;EACA1B,MAAM;GACJC,SAAS;GACTC,YAAY;GACZC,OAAO;EACT;EACAL,SAAS,EACPC,MAAM,eACR;CACF;CACAK,iBAAiB;EACfgB,SAAS;EACTpB,MAAM;CACR;AACF,CAAC;AAED,IAAa2B,cAAc;CACzBN,MAAM;CACNC,OAAO;CACPC,QAAQ;CACRC,SAAS;CACTC,OAAO;CACPC,MAAM;AACR;AAYA,SAAgBK,KAAqClB,OAAqB;CACxE,MAAM,CAACC,OAAOC,QAAQlC,WAAWgC,OAA8C;EAC7E;EACA;EACA;EACA;EACA;CAAO,CACR;CAED,OAAAI,gBACGvC,aAAWwC,WAAA;EAAA,IACVF,KAAE;GAAA,OAAEF,MAAME,MAAMW,YAAab,MAAMM,WAAW;EAAuB;EAAA,aAAA;EAAA,KAAA,WAAA;GAAA,OAE9DnC,GACLkC,aAAa;IAAEC,SAASN,MAAMM;IAASpB,MAAMc,MAAMd;IAAMF,SAASgB,MAAMhB;GAAQ,CAAC,GACjFgB,MAAMH,KACR;EAAC;CAAA,GACII,IAA2B,CAAA;AAGtC"}

package/dist/index.js

@@ -2,12 +2,12 @@ import { cn } from "./lib/utils.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion/accordion.js";
 import { controlInteractive, controlSize, controlSizeIcon, controlSizes, cva, surfaceInteractive } from "./lib/variants.js";
 import { Alert, AlertDescription, AlertTitle, alertVariants } from "./components/ui/alert/alert.js";
-import { Heading, Text, headingElement, headingVariants, textElement, textVariants } from "./components/ui/typography/typography.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/ui/alert-dialog/alert-dialog.js";
 import { AnnotationSurface } from "./components/ui/annotation-surface/annotation-surface.js";
 import { AspectRatio } from "./components/ui/aspect-ratio/aspect-ratio.js";
 import { Avatar, AvatarFallback, AvatarImage, initialsFrom } from "./components/ui/avatar/avatar.js";
 import { Badge, badgeVariants } from "./components/ui/badge/badge.js";
+import { Heading, Text, headingElement, headingVariants, textElement, textVariants } from "./components/ui/typography/typography.js";
 import { Board, BoardCardBody, BoardCardTitle, BoardCardTrigger, boardCardTitleVariants } from "./components/ui/board/board.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "./components/ui/breadcrumb/breadcrumb.js";
 import { Button, buttonVariants } from "./components/ui/button/button.js";

package/dist/lib/overlay.d.ts

@@ -11,6 +11,11 @@
  */
 /** The panel itself: fill, hairline edge, radius, elevation. */
 export declare const overlaySurface = "bg-popover text-popover-foreground rounded-xl border border-border shadow-lg";
+/**
+ * Overlay titles have one fixed typography role. Keep this small recipe shared
+ * without loading the configurable Heading component into every dialog.
+ */
+export declare const overlayTitle = "font-semibold text-base tracking-tight leading-none";
 /** The span of the portal wrapper that centres a dialog-like overlay. */
 export declare const overlayPositioner = "fixed inset-0 z-(--z-dialog) grid place-items-center p-4";
 /** The dimming layer behind a modal overlay. */

package/dist/lib/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/lib/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,gEAAgE;AAChE,eAAO,MAAM,cAAc,iFACqD,CAAA;AAEhF;;;GAGG;AACH,eAAO,MAAM,YAAY,wDAAwD,CAAA;AAEjF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,6DAA6D,CAAA;AAE3F,gDAAgD;AAChD,eAAO,MAAM,YAAY,yFAC+D,CAAA;AAExF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,+FACuE,CAAA;AAE9F;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,QAIf,CAAA;AAEX;qCACqC;AACrC,eAAO,MAAM,aAAa,QAGf,CAAA;AAEX,+DAA+D;AAC/D,eAAO,MAAM,YAAY,+BAA+B,CAAA;AAExD;;;GAGG;AACH,eAAO,MAAM,QAAQ,QAOV,CAAA;AAEX,qFAAqF;AACrF,eAAO,MAAM,mBAAmB,kGACiE,CAAA;AAEjG,4CAA4C;AAC5C,eAAO,MAAM,SAAS,mFAC4D,CAAA;AAElF,oCAAoC;AACpC,eAAO,MAAM,aAAa,8BAA8B,CAAA;AAExD,iDAAiD;AACjD,eAAO,MAAM,kBAAkB,QAAQ,CAAA;AAEvC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa;;CAAuC,CAAA"}

package/dist/lib/overlay.js

@@ -12,6 +12,11 @@
 */
 /** The panel itself: fill, hairline edge, radius, elevation. */
 var overlaySurface = "bg-popover text-popover-foreground rounded-xl border border-border shadow-lg";
+/**
+* Overlay titles have one fixed typography role. Keep this small recipe shared
+* without loading the configurable Heading component into every dialog.
+*/
+var overlayTitle = "font-semibold text-base tracking-tight leading-none";
 /** The span of the portal wrapper that centres a dialog-like overlay. */
 var overlayPositioner = "fixed inset-0 z-(--z-dialog) grid place-items-center p-4";
 /** The dimming layer behind a modal overlay. */
@@ -74,6 +79,6 @@ var menuSeparator = "bg-border -mx-1 my-1 h-px";
 */
 var topLayerProps = { "data-kb-top-layer": "" };
 //#endregion
-export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, popoverArrow, popoverMotion, tooltipTip, topLayerProps };
+export { destructiveMenuItem, menuItem, menuLabel, menuSeparator, overlayMotion, overlayPositioner, overlayScrim, overlaySurface, overlayTitle, popoverArrow, popoverMotion, tooltipTip, topLayerProps };
 
 //# sourceMappingURL=overlay.js.map

package/dist/lib/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;AAGF,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;;;;;AAiB7B,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * Overlay titles have one fixed typography role. Keep this small recipe shared\n * without loading the configurable Heading component into every dialog.\n */\nexport const overlayTitle = 'font-semibold text-base tracking-tight leading-none'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;;;;AAMF,IAAa,eAAe;;AAG5B,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;;;;;AAiB7B,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}

package/dist/r/alert-dialog.json

@@ -7,7 +7,6 @@
     "@kobalte/core@^0.13.14"
   ],
   "registryDependencies": [
-    "@adea-ai/ui/typography",
     "lib"
   ],
   "files": [

package/dist/r/contextual-sidebar.json

@@ -20,6 +20,11 @@
       "path": "src/components/layout/contextual-sidebar/index.ts",
       "type": "registry:ui",
       "target": "components/layout/contextual-sidebar/index.ts"
+    },
+    {
+      "path": "src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx",
+      "type": "registry:ui",
+      "target": "components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx"
     }
   ]
 }

package/dist/r/dialog.json

@@ -8,7 +8,6 @@
     "lucide-solid@^1.51.0"
   ],
   "registryDependencies": [
-    "@adea-ai/ui/typography",
     "lib"
   ],
   "files": [

package/dist/r/registry.json

@@ -61,7 +61,6 @@
         "@kobalte/core@^0.13.14"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -569,7 +568,6 @@
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1213,7 +1211,6 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/dialog",
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1609,6 +1606,11 @@
           "path": "src/components/layout/contextual-sidebar/index.ts",
           "type": "registry:ui",
           "target": "components/layout/contextual-sidebar/index.ts"
+        },
+        {
+          "path": "src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx"
         }
       ]
     },

package/dist/r/sheet.json

@@ -9,7 +9,6 @@
   ],
   "registryDependencies": [
     "@adea-ai/ui/dialog",
-    "@adea-ai/ui/typography",
     "lib"
   ],
   "files": [

package/dist/r/src/components/layout/contextual-sidebar/contextual-sidebar.tsx

@@ -1,7 +1,6 @@
 import type { Accessor, JSX } from 'solid-js'
 import { Show, createSignal, createUniqueId, onCleanup, onMount } from 'solid-js'
 import { cn } from '../../../lib/utils'
-import { Sheet, SheetContent, SheetTitle } from '../../ui/sheet'
 import {
   SidebarNav,
   SidebarNavContent,
@@ -11,6 +10,9 @@ import {
 } from '../sidebar-nav/sidebar-nav'
 import { PixelResizeHandle } from '../pixel-resize-handle/pixel-resize-handle'
 
+type MobileModule = typeof import('./mobile-contextual-sidebar')
+type MobileLoad = MobileModule | { error: unknown }
+
 export type ContextualSidebarRenderContext = {
   /** Whether the slot is being rendered inside the modal mobile sheet. */
   mobile: boolean
@@ -67,6 +69,22 @@ export type ContextualSidebarProps = {
  */
 export function ContextualSidebar(props: ContextualSidebarProps) {
   const [isNarrowViewport, setIsNarrowViewport] = createSignal(false)
+  const [mobileLoad, setMobileLoad] = createSignal<MobileLoad>()
+  let mobileRequested = false
+  // Keep the resolved component mounted across viewport changes for Sheet cleanup.
+  const loadMobile = () => {
+    if (mobileRequested) return
+    mobileRequested = true
+    // Native module caching shares successful loads without keeping a rejected promise.
+    void import('./mobile-contextual-sidebar').then(
+      (module) => {
+        if (mobileRequested) setMobileLoad(module)
+      },
+      (error: unknown) => {
+        if (mobileRequested) setMobileLoad({ error })
+      }
+    )
+  }
   const [mobileMount, setMobileMount] = createSignal<
     { element: HTMLElement; connected: boolean } | undefined
   >()
@@ -81,6 +99,7 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
     const media = window.matchMedia('(max-width: 48rem)')
     const updateViewport = () => {
       const wasNarrow = isNarrowViewport()
+      if (media.matches) loadMobile()
       // Close before mounting a modal. A desktop-expanded host state is not
       // mobile intent, and opening the Sheet for one frame can steal focus.
       if (media.matches && !wasNarrow) props.onOpenChange(false)
@@ -90,10 +109,14 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
     // A route can mount after a wide-loaded host crosses into mobile. Clear
     // that stale seed, but preserve a sidebar intentionally opened at a
     // narrow boot viewport.
+    if (media.matches) loadMobile()
     if (media.matches && props.wideViewportAtLoad && props.open) props.onOpenChange(false)
     setIsNarrowViewport(media.matches)
     media.addEventListener('change', updateViewport)
-    onCleanup(() => media.removeEventListener('change', updateViewport))
+    onCleanup(() => {
+      mobileRequested = false
+      media.removeEventListener('change', updateViewport)
+    })
   })
 
   const renderSidebar = (mobile: boolean) => {
@@ -160,21 +183,23 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
   }
 
   return (
-    <Sheet
-      open={isNarrowViewport() && props.open}
-      onOpenChange={(open) => props.onOpenChange(open)}
-    >
+    <>
       <Show when={!isNarrowViewport()}>{(_wide) => renderSidebar(false)}</Show>
-      <Show when={isNarrowViewport()}>
-        <SheetContent
-          side="start"
-          class={cn('gap-0 p-0', props.sheetClass)}
-          restoreFocusRef={props.restoreFocusRef}
-        >
-          <SheetTitle class="sr-only">{props.title} navigation</SheetTitle>
-          {renderSidebar(true)}
-        </SheetContent>
+      <Show when={mobileLoad()} keyed>
+        {(loaded) => {
+          if ('error' in loaded) throw loaded.error
+          return (
+            <loaded.MobileSidebar
+              open={isNarrowViewport() && props.open}
+              onOpenChange={props.onOpenChange}
+              label={props.label}
+              sheetClass={props.sheetClass}
+              restoreFocusRef={props.restoreFocusRef}
+              renderSidebar={() => renderSidebar(true)}
+            />
+          )
+        }}
       </Show>
-    </Sheet>
+    </>
   )
 }

package/dist/r/src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx

@@ -0,0 +1,28 @@
+import type { Accessor, JSX } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { Sheet, SheetContent } from '../../ui/sheet'
+
+export type MobileContextualSidebarProps = {
+  open: boolean
+  onOpenChange(open: boolean): void
+  label: string
+  sheetClass?: string
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+  renderSidebar(): JSX.Element
+}
+
+/** Sheet wrappers are loaded only when a contextual sidebar enters mobile mode. */
+export function MobileSidebar(props: MobileContextualSidebarProps) {
+  return (
+    <Sheet open={props.open} onOpenChange={props.onOpenChange}>
+      <SheetContent
+        side="start"
+        aria-label={props.label}
+        class={cn('gap-0 p-0', props.sheetClass)}
+        restoreFocusRef={props.restoreFocusRef}
+      >
+        {props.renderSidebar()}
+      </SheetContent>
+    </Sheet>
+  )
+}

package/dist/r/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -5,9 +5,14 @@ import {
 // Use the alert-specific export rather than DialogRoot.Content, which other imports can replace.
 import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
-import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '../../../lib/overlay'
+import {
+  overlayMotion,
+  overlayPositioner,
+  overlayScrim,
+  overlaySurface,
+  overlayTitle,
+} from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
-import { headingVariants } from '../typography'
 
 /**
  * AlertDialog.
@@ -116,12 +121,7 @@ export function AlertDialogFooter(props: ComponentProps<'div'>) {
 
 export function AlertDialogTitle(props: ComponentProps<typeof KobalteAlertDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteAlertDialog.Title
-      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteAlertDialog.Title class={cn(overlayTitle, local.class)} {...rest} />
 }
 
 export function AlertDialogDescription(

package/dist/r/src/components/ui/dialog/dialog.tsx

@@ -7,9 +7,14 @@ import {
 import { X } from 'lucide-solid'
 import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
-import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '../../../lib/overlay'
+import {
+  overlayMotion,
+  overlayPositioner,
+  overlayScrim,
+  overlaySurface,
+  overlayTitle,
+} from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
-import { headingVariants } from '../typography'
 
 type FocusCycle = {
   content: HTMLElement
@@ -326,12 +331,7 @@ export function DialogFooter(props: ComponentProps<'div'>) {
 
 export function DialogTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteDialog.Title
-      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />
 }
 
 export function DialogDescription(props: ComponentProps<typeof KobalteDialog.Description>) {

package/dist/r/src/components/ui/sheet/sheet.tsx

@@ -8,9 +8,9 @@ import { X } from 'lucide-solid'
 import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '../../../lib/variants'
+import { overlayTitle } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
-import { headingVariants } from '../typography'
 
 /**
  * Sheet.
@@ -215,12 +215,7 @@ export function SheetFooter(props: ComponentProps<'div'>) {
 
 export function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteDialog.Title
-      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />
 }
 
 export function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {

package/dist/r/src/components/ui/typography/typography.tsx

@@ -25,7 +25,8 @@ import { cn } from '../../../lib/utils'
  * stack already sets the rhythm (a card or dialog header), and is the only other
  * option.
  */
-export const headingVariants = cva('font-semibold', {
+// cva only returns a closure. A heading-only consumer must discard Text's recipe.
+export const headingVariants = /* @__PURE__ */ cva('font-semibold', {
   variants: {
     size: {
       /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */
@@ -130,7 +131,7 @@ export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>)
  *
  * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
  */
-export const textVariants = cva('', {
+export const textVariants = /* @__PURE__ */ cva('', {
   variants: {
     variant: {
       /** 14px / 400. Body copy and descriptions. */

package/dist/r/src/lib/overlay.ts

@@ -14,6 +14,12 @@
 export const overlaySurface =
   'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'
 
+/**
+ * Overlay titles have one fixed typography role. Keep this small recipe shared
+ * without loading the configurable Heading component into every dialog.
+ */
+export const overlayTitle = 'font-semibold text-base tracking-tight leading-none'
+
 /** The span of the portal wrapper that centres a dialog-like overlay. */
 export const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.109.0",
+  "version": "0.109.1",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -61,7 +61,6 @@
         "@kobalte/core@^0.13.14"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -569,7 +568,6 @@
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1213,7 +1211,6 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/dialog",
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1609,6 +1606,11 @@
           "path": "src/components/layout/contextual-sidebar/index.ts",
           "type": "registry:ui",
           "target": "components/layout/contextual-sidebar/index.ts"
+        },
+        {
+          "path": "src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx"
         }
       ]
     },