@krizaka/ui 3.5.0 → 3.7.0

package/README.md

@@ -144,6 +144,7 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/page-header` | `PageHeader` (`title`, `description`, `actions`, `breadcrumb`, `as` h1·h2) | server |
 | `@krizaka/ui/alert` | `Alert` (`tone` info·success·warning·danger, `icon`, `title`, `action`; `role="alert"` for danger and warning, `status` otherwise), `alertVariants` | server |
 | `@krizaka/ui/separator` | `Separator` (`orientation`, `decorative`, Radix), `separatorVariants` | server |
+| `@krizaka/ui/skip-link` | `SkipLink` (`href`, default `#content`; the label as children): the first tab stop, hidden until focused, Enter moves focus to the content (WCAG 2.4.1) | client |
 | `@krizaka/ui/kbd` | `Kbd` (`size` sm·md), `kbdVariants` | server |
 | `@krizaka/ui/tabs` | `Tabs.Root/List/Trigger/Content` (`variant` underline·segmented·pills on the root, `orientation`, `value`/`defaultValue` + `onValueChange`; one light glides to the active tab), `tabs` (the slots) | client |
 | `@krizaka/ui/nav-bar` | `NavBar.Root` (`label`, `compactAfter`, `floating`) `/Brand/Items/Link` (`active`) `/Menu` (`label`, `columns`) `/MenuLink` (`title`, `description`, `icon`) `/Actions/Mobile` (`openLabel`, `closeLabel`) `/MobileLink`, `navBar` (the slots) | client |

package/dist/app-shell.d.ts

@@ -4,19 +4,19 @@ import * as React from 'react';
 declare const appShell: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             drawer?: tailwind_variants.ClassValue;
             overlay?: tailwind_variants.ClassValue;
             brand?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            group?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
-            footer?: tailwind_variants.ClassValue;
-            body?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
-            main?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             itemBadge?: tailwind_variants.ClassValue;
@@ -27,19 +27,19 @@ declare const appShell: tailwind_variants.TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             drawer?: tailwind_variants.ClassValue;
             overlay?: tailwind_variants.ClassValue;
             brand?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            group?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
-            footer?: tailwind_variants.ClassValue;
-            body?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
-            main?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             itemBadge?: tailwind_variants.ClassValue;
@@ -69,19 +69,19 @@ declare const appShell: tailwind_variants.TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
+            body?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            header?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            nav?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
             root?: tailwind_variants.ClassValue;
             drawer?: tailwind_variants.ClassValue;
             overlay?: tailwind_variants.ClassValue;
             brand?: tailwind_variants.ClassValue;
-            nav?: tailwind_variants.ClassValue;
-            group?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
-            footer?: tailwind_variants.ClassValue;
-            body?: tailwind_variants.ClassValue;
-            header?: tailwind_variants.ClassValue;
-            title?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
-            main?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             itemBadge?: tailwind_variants.ClassValue;
@@ -135,9 +135,11 @@ type AppShellRootProps = React.ComponentProps<"div"> & {
     collapsed?: boolean;
     /** Called when the sidebar collapses or expands. */
     onCollapsedChange?: (collapsed: boolean) => void;
+    /** The words of the "skip to content" link (`Skip to content`), the first tab stop; it lands on `AppShell.Main`. Without it, no link. */
+    skipLabel?: string;
 };
 /** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */
-declare function AppShellRoot({ defaultCollapsed, collapsed: controlled, onCollapsedChange, className, ...props }: AppShellRootProps): React.JSX.Element;
+declare function AppShellRoot({ defaultCollapsed, collapsed: controlled, onCollapsedChange, skipLabel, className, children, ...props }: AppShellRootProps): React.JSX.Element;
 type AppShellSidebarProps = Omit<React.ComponentProps<"nav">, "children"> & {
     /** The navigation's accessible name (`Studio`, `Administration`). */
     label: string;

package/dist/app-shell.js

@@ -6,6 +6,9 @@ import {
 import {
   cn
 } from "./chunk-G3ETON2A.js";
+import {
+  SkipLink
+} from "./chunk-3GODX3D6.js";
 
 // src/app-shell/app-shell.tsx
 import { Dialog as DialogPrimitive, Slot } from "radix-ui";
@@ -41,7 +44,7 @@ var useShell = () => {
   if (!ctx) throw new Error("AppShell parts must be inside <AppShell.Root>");
   return ctx;
 };
-function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, className, ...props }) {
+function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, className, children, ...props }) {
   const [own, setOwn] = React.useState(defaultCollapsed);
   const [open, setOpen] = React.useState(false);
   const collapsed = controlled ?? own;
@@ -53,7 +56,10 @@ function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onColla
     [controlled, onCollapsedChange]
   );
   const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);
-  return /* @__PURE__ */ jsx(ShellContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: s.root({ className }), ...props }) });
+  return /* @__PURE__ */ jsx(ShellContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    skipLabel && /* @__PURE__ */ jsx(SkipLink, { href: "#content", children: skipLabel }),
+    children
+  ] }) });
 }
 function SidebarContent({ brand, children, footer, collapseLabels, closeLabel }) {
   const { collapsed, setCollapsed, inDrawer } = useShell();
@@ -112,7 +118,7 @@ function AppShellHeader({ title, menuLabel, actions, className, children, ...pro
   ] });
 }
 function AppShellMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx("main", { className: s.main({ className }), ...props });
+  return /* @__PURE__ */ jsx("main", { id: "content", tabIndex: -1, className: s.main({ className }), ...props });
 }
 var AppShell = {
   Root: AppShellRoot,

package/dist/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/app-shell/app-shell.tsx"],"sourcesContent":["// Client (the collapse, the drawer). The shell of an application screen, read from the products' consoles (Orochia\n// admin and studio, Orazaka web-admin and web-client): a sidebar of sections that collapses to its icons on a desktop,\n// a header with the screen's title and actions, the content — and below `md` the sidebar becomes a drawer opened from\n// the header (Radix Dialog: focus trap, Escape, focus return). Words arrive as props; links through `asChild`.\nimport { Dialog as DialogPrimitive, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph, CloseGlyph } from \"../glyphs\";\n\nexport const appShell = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    sidebar:\n      \"sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex \" +\n      \"w-64 data-collapsed:w-[4.25rem]\",\n    drawer:\n      \"kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden\",\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    brand: \"flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    nav: \"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2\",\n    group: \"mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only\",\n    item:\n      \"group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg \" +\n      \"aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0\",\n    itemLabel: \"min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only\",\n    itemBadge:\n      \"ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent \" +\n      \"[[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    header:\n      \"sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6\",\n    menuButton:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    title: \"min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n    main: \"min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8\",\n  },\n});\nconst s = appShell();\n\ninterface ShellState {\n  collapsed: boolean;\n  setCollapsed: (value: boolean) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inDrawer: boolean;\n}\nconst ShellContext = React.createContext<ShellState | null>(null);\nconst useShell = () => {\n  const ctx = React.useContext(ShellContext);\n  if (!ctx) throw new Error(\"AppShell parts must be inside <AppShell.Root>\");\n  return ctx;\n};\n\nexport type AppShellRootProps = React.ComponentProps<\"div\"> & {\n  /** The sidebar starts collapsed to its icons (desktop). */\n  defaultCollapsed?: boolean;\n  /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */\n  collapsed?: boolean;\n  /** Called when the sidebar collapses or expands. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n};\n\n/** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */\nexport function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, className, ...props }: AppShellRootProps) {\n  const [own, setOwn] = React.useState(defaultCollapsed);\n  const [open, setOpen] = React.useState(false);\n  const collapsed = controlled ?? own;\n  const setCollapsed = React.useCallback(\n    (value: boolean) => {\n      if (controlled === undefined) setOwn(value);\n      onCollapsedChange?.(value);\n    },\n    [controlled, onCollapsedChange],\n  );\n  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);\n  return (\n    <ShellContext.Provider value={value}>\n      <div className={s.root({ className })} {...props} />\n    </ShellContext.Provider>\n  );\n}\n\nexport type AppShellSidebarProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Studio`, `Administration`). */\n  label: string;\n  /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */\n  brand?: React.ReactNode;\n  /** The sections: `AppShell.Group` and `AppShell.Item`. */\n  children: React.ReactNode;\n  /** At the bottom, above the collapse button: the account, a plan, the version. */\n  footer?: React.ReactNode;\n  /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */\n  collapseLabels?: readonly [string, string];\n  /** The drawer's close button words (phone). */\n  closeLabel: string;\n};\n\nfunction SidebarContent({ brand, children, footer, collapseLabels, closeLabel }: Pick<AppShellSidebarProps, \"brand\" | \"children\" | \"footer\" | \"collapseLabels\" | \"closeLabel\">) {\n  const { collapsed, setCollapsed, inDrawer } = useShell();\n  return (\n    <>\n      <div className={s.brand()}>\n        {brand}\n        {inDrawer && (\n          <DialogPrimitive.Close className={cn(s.menuButton(), \"ml-auto flex\")} aria-label={closeLabel}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n      <div className={s.nav()}>{children}</div>\n      {(footer || (collapseLabels && !inDrawer)) && (\n        <div className={s.footer()}>\n          {footer}\n          {collapseLabels && !inDrawer && (\n            <button type=\"button\" className={s.collapse()} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}>\n              <ChevronGlyph direction={collapsed ? \"right\" : \"left\"} className=\"h-4 w-4\" />\n              <span className={collapsed ? \"sr-only\" : undefined}>{collapsed ? collapseLabels[1] : collapseLabels[0]}</span>\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */\nexport function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps) {\n  const shell = useShell();\n  const content = { brand, children, footer, collapseLabels, closeLabel };\n  return (\n    <>\n      <nav aria-label={label} data-collapsed={shell.collapsed ? \"\" : undefined} className={s.sidebar({ className })} {...props}>\n        <SidebarContent {...content} />\n      </nav>\n      <DialogPrimitive.Root open={shell.open} onOpenChange={shell.setOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay className={s.overlay()} />\n          <DialogPrimitive.Content className={s.drawer()} aria-describedby={undefined}>\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            <ShellContext.Provider value={{ ...shell, collapsed: false, inDrawer: true }}>\n              <nav aria-label={label} className=\"flex min-h-0 flex-1 flex-col\" onClick={(e) => (e.target as Element).closest(\"a\") && shell.setOpen(false)}>\n                <SidebarContent {...content} />\n              </nav>\n            </ShellContext.Provider>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n}\n\nexport type AppShellGroupProps = React.ComponentProps<\"p\"> & {\n  /** The group's name, above its items (hidden when the sidebar is collapsed). */\n  children: React.ReactNode;\n};\n\n/** A heading between groups of items. */\nexport function AppShellGroup({ className, ...props }: AppShellGroupProps) {\n  return <p className={s.group({ className })} {...props} />;\n}\n\nexport type AppShellItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon): it stays when the sidebar collapses. */\n  icon?: React.ReactNode;\n  /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */\n  label: string;\n  /** The screen it opens is the current one: `aria-current=\"page\"`. */\n  current?: boolean;\n  /** A count beside it (unread, pending): a number or a few characters. */\n  badge?: React.ReactNode;\n  /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  /** Your link element when `asChild`. */\n  children?: React.ReactElement;\n};\n\n/** A destination of the sidebar: icon, words, a count. */\nexport function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }: AppShellItemProps) {\n  const { collapsed } = useShell();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      {icon}\n      <span className={s.itemLabel()}>{label}</span>\n      {badge != null && <span className={s.itemBadge()}>{badge}</span>}\n    </>\n  );\n  return (\n    <Comp aria-current={current ? \"page\" : undefined} title={collapsed ? label : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n}\n\n/** The column right of the sidebar: Header, then Main. */\nexport function AppShellBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type AppShellHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The screen's title (an `h1`). */\n  title?: React.ReactNode;\n  /** The button that opens the drawer on a phone: its words. */\n  menuLabel: string;\n  /** The screen's actions, on the right. */\n  actions?: React.ReactNode;\n};\n\n/** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */\nexport function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps) {\n  const { open, setOpen } = useShell();\n  return (\n    <header className={s.header({ className })} {...props}>\n      <button type=\"button\" className={s.menuButton()} aria-label={menuLabel} aria-expanded={open} aria-haspopup=\"dialog\" onClick={() => setOpen(true)}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M4 7h16M4 12h16M4 17h10\" />\n        </svg>\n      </button>\n      {title && <h1 className={s.title()}>{title}</h1>}\n      {children}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n\n/** The screen's content. */\nexport function AppShellMain({ className, ...props }: React.ComponentProps<\"main\">) {\n  return <main className={s.main({ className })} {...props} />;\n}\n\nexport const AppShell = {\n  Root: AppShellRoot,\n  Sidebar: AppShellSidebar,\n  Group: AppShellGroup,\n  Item: AppShellItem,\n  Body: AppShellBody,\n  Header: AppShellHeader,\n  Main: AppShellMain,\n};\n"],"mappings":"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","names":["value"]}
+{"version":3,"sources":["../src/app-shell/app-shell.tsx"],"sourcesContent":["// Client (the collapse, the drawer). The shell of an application screen, read from the products' consoles (Orochia\n// admin and studio, Orazaka web-admin and web-client): a sidebar of sections that collapses to its icons on a desktop,\n// a header with the screen's title and actions, the content — and below `md` the sidebar becomes a drawer opened from\n// the header (Radix Dialog: focus trap, Escape, focus return). Words arrive as props; links through `asChild`.\nimport { SkipLink } from \"@krizaka/ui/skip-link\";\nimport { Dialog as DialogPrimitive, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph, CloseGlyph } from \"../glyphs\";\n\nexport const appShell = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    sidebar:\n      \"sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex \" +\n      \"w-64 data-collapsed:w-[4.25rem]\",\n    drawer:\n      \"kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden\",\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    brand: \"flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    nav: \"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2\",\n    group: \"mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only\",\n    item:\n      \"group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg \" +\n      \"aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0\",\n    itemLabel: \"min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only\",\n    itemBadge:\n      \"ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent \" +\n      \"[[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    header:\n      \"sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6\",\n    menuButton:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    title: \"min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n    main: \"min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8\",\n  },\n});\nconst s = appShell();\n\ninterface ShellState {\n  collapsed: boolean;\n  setCollapsed: (value: boolean) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inDrawer: boolean;\n}\nconst ShellContext = React.createContext<ShellState | null>(null);\nconst useShell = () => {\n  const ctx = React.useContext(ShellContext);\n  if (!ctx) throw new Error(\"AppShell parts must be inside <AppShell.Root>\");\n  return ctx;\n};\n\nexport type AppShellRootProps = React.ComponentProps<\"div\"> & {\n  /** The sidebar starts collapsed to its icons (desktop). */\n  defaultCollapsed?: boolean;\n  /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */\n  collapsed?: boolean;\n  /** Called when the sidebar collapses or expands. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** The words of the \"skip to content\" link (`Skip to content`), the first tab stop; it lands on `AppShell.Main`. Without it, no link. */\n  skipLabel?: string;\n};\n\n/** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */\nexport function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, className, children, ...props }: AppShellRootProps) {\n  const [own, setOwn] = React.useState(defaultCollapsed);\n  const [open, setOpen] = React.useState(false);\n  const collapsed = controlled ?? own;\n  const setCollapsed = React.useCallback(\n    (value: boolean) => {\n      if (controlled === undefined) setOwn(value);\n      onCollapsedChange?.(value);\n    },\n    [controlled, onCollapsedChange],\n  );\n  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);\n  return (\n    <ShellContext.Provider value={value}>\n      <div className={s.root({ className })} {...props}>\n        {skipLabel && <SkipLink href=\"#content\">{skipLabel}</SkipLink>}\n        {children}\n      </div>\n    </ShellContext.Provider>\n  );\n}\n\nexport type AppShellSidebarProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Studio`, `Administration`). */\n  label: string;\n  /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */\n  brand?: React.ReactNode;\n  /** The sections: `AppShell.Group` and `AppShell.Item`. */\n  children: React.ReactNode;\n  /** At the bottom, above the collapse button: the account, a plan, the version. */\n  footer?: React.ReactNode;\n  /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */\n  collapseLabels?: readonly [string, string];\n  /** The drawer's close button words (phone). */\n  closeLabel: string;\n};\n\nfunction SidebarContent({ brand, children, footer, collapseLabels, closeLabel }: Pick<AppShellSidebarProps, \"brand\" | \"children\" | \"footer\" | \"collapseLabels\" | \"closeLabel\">) {\n  const { collapsed, setCollapsed, inDrawer } = useShell();\n  return (\n    <>\n      <div className={s.brand()}>\n        {brand}\n        {inDrawer && (\n          <DialogPrimitive.Close className={cn(s.menuButton(), \"ml-auto flex\")} aria-label={closeLabel}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n      <div className={s.nav()}>{children}</div>\n      {(footer || (collapseLabels && !inDrawer)) && (\n        <div className={s.footer()}>\n          {footer}\n          {collapseLabels && !inDrawer && (\n            <button type=\"button\" className={s.collapse()} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}>\n              <ChevronGlyph direction={collapsed ? \"right\" : \"left\"} className=\"h-4 w-4\" />\n              <span className={collapsed ? \"sr-only\" : undefined}>{collapsed ? collapseLabels[1] : collapseLabels[0]}</span>\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */\nexport function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps) {\n  const shell = useShell();\n  const content = { brand, children, footer, collapseLabels, closeLabel };\n  return (\n    <>\n      <nav aria-label={label} data-collapsed={shell.collapsed ? \"\" : undefined} className={s.sidebar({ className })} {...props}>\n        <SidebarContent {...content} />\n      </nav>\n      <DialogPrimitive.Root open={shell.open} onOpenChange={shell.setOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay className={s.overlay()} />\n          <DialogPrimitive.Content className={s.drawer()} aria-describedby={undefined}>\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            <ShellContext.Provider value={{ ...shell, collapsed: false, inDrawer: true }}>\n              <nav aria-label={label} className=\"flex min-h-0 flex-1 flex-col\" onClick={(e) => (e.target as Element).closest(\"a\") && shell.setOpen(false)}>\n                <SidebarContent {...content} />\n              </nav>\n            </ShellContext.Provider>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n}\n\nexport type AppShellGroupProps = React.ComponentProps<\"p\"> & {\n  /** The group's name, above its items (hidden when the sidebar is collapsed). */\n  children: React.ReactNode;\n};\n\n/** A heading between groups of items. */\nexport function AppShellGroup({ className, ...props }: AppShellGroupProps) {\n  return <p className={s.group({ className })} {...props} />;\n}\n\nexport type AppShellItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon): it stays when the sidebar collapses. */\n  icon?: React.ReactNode;\n  /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */\n  label: string;\n  /** The screen it opens is the current one: `aria-current=\"page\"`. */\n  current?: boolean;\n  /** A count beside it (unread, pending): a number or a few characters. */\n  badge?: React.ReactNode;\n  /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  /** Your link element when `asChild`. */\n  children?: React.ReactElement;\n};\n\n/** A destination of the sidebar: icon, words, a count. */\nexport function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }: AppShellItemProps) {\n  const { collapsed } = useShell();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      {icon}\n      <span className={s.itemLabel()}>{label}</span>\n      {badge != null && <span className={s.itemBadge()}>{badge}</span>}\n    </>\n  );\n  return (\n    <Comp aria-current={current ? \"page\" : undefined} title={collapsed ? label : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n}\n\n/** The column right of the sidebar: Header, then Main. */\nexport function AppShellBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type AppShellHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The screen's title (an `h1`). */\n  title?: React.ReactNode;\n  /** The button that opens the drawer on a phone: its words. */\n  menuLabel: string;\n  /** The screen's actions, on the right. */\n  actions?: React.ReactNode;\n};\n\n/** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */\nexport function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps) {\n  const { open, setOpen } = useShell();\n  return (\n    <header className={s.header({ className })} {...props}>\n      <button type=\"button\" className={s.menuButton()} aria-label={menuLabel} aria-expanded={open} aria-haspopup=\"dialog\" onClick={() => setOpen(true)}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M4 7h16M4 12h16M4 17h10\" />\n        </svg>\n      </button>\n      {title && <h1 className={s.title()}>{title}</h1>}\n      {children}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n\n/** The screen's content. */\nexport function AppShellMain({ className, ...props }: React.ComponentProps<\"main\">) {\n  return <main id=\"content\" tabIndex={-1} className={s.main({ className })} {...props} />;\n}\n\nexport const AppShell = {\n  Root: AppShellRoot,\n  Sidebar: AppShellSidebar,\n  Group: AppShellGroup,\n  Item: AppShellItem,\n  Body: AppShellBody,\n  Header: AppShellHeader,\n  Main: AppShellMain,\n};\n"],"mappings":"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","names":["value"]}

package/dist/chat.js

@@ -1,7 +1,8 @@
 "use client";
+import "./chunk-NPF3OHE2.js";
 import {
   Avatar
-} from "./chunk-F2GKFIYK.js";
+} from "./chunk-CURW36FI.js";
 
 // src/chat/chat.tsx
 import { tv } from "tailwind-variants";

package/dist/chat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chat/chat.tsx"],"sourcesContent":["// Client (the composer's draft). A conversation's parts — the bubble with its time and receipt, the typing dots, the\n// composer, a conversation in a list — the same API as React Native. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Avatar } from \"../avatar\";\n\nexport const chat = tv({\n  slots: {\n    row: \"flex flex-col gap-0.5\",\n    bubble: \"max-w-[80%] rounded-2xl px-3 py-2 text-sm leading-snug\",\n    context: \"mb-0.5 block text-xs opacity-85\",\n    time: \"mt-0.5 block text-right text-[11px] tabular-nums\",\n    status: \"flex items-center gap-1 text-xs text-fg-secondary data-[status=failed]:text-fg-danger [&>svg]:h-3.5 [&>svg]:w-3.5\",\n    typing: \"inline-flex items-center gap-1 self-start rounded-2xl bg-surface-2 px-3.5 py-3\",\n    dot: \"h-[7px] w-[7px] rounded-full bg-fg-secondary motion-safe:animate-[kz-typing_1.2s_ease-in-out_infinite]\",\n    composer: \"flex items-end gap-2 border-t border-border-subtle bg-surface-0 px-3 py-2\",\n    input:\n      \"max-h-32 min-h-10 flex-1 resize-none rounded-2xl border border-border-default bg-surface-1 px-3.5 py-2.5 text-sm text-fg placeholder:text-fg-muted \" +\n      \"focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    send:\n      \"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent hover:bg-accent-hover focus-visible:outline-hidden \" +\n      \"focus-visible:ring-2 focus-visible:ring-ring disabled:bg-surface-3 disabled:text-fg-muted [&>svg]:h-[18px] [&>svg]:w-[18px]\",\n    item: \"flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    count: \"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-xs font-extrabold text-on-accent\",\n  },\n});\n\nexport type MessageStatus = \"sending\" | \"sent\" | \"delivered\" | \"read\" | \"failed\";\n\nexport type MessageBubbleLabels = {\n  /** The words of each status, shown under the last message of yours. */\n  status?: Partial<Record<MessageStatus, string>>;\n  /** A failed message's retry button (“Retry”). */\n  retry?: string;\n};\n\nconst STATUS: Record<MessageStatus, string> = { sending: \"Sending\", sent: \"Sent\", delivered: \"Delivered\", read: \"Read\", failed: \"Not sent\" };\n\nexport type MessageBubbleProps = {\n  /** The text. */\n  text: string;\n  /** Yours (right, in the accent) or theirs (left). */\n  mine?: boolean;\n  /** The time, written by the app (“14:02”). */\n  time?: string;\n  /** Where a message of yours stands; shown when `showStatus`. */\n  status?: MessageStatus;\n  /** Show the status under the bubble (the last message of yours). */\n  showStatus?: boolean;\n  /** A line above the text: what it answers. */\n  context?: string;\n  /** Sends a failed message again (a button under it). */\n  onRetry?: () => void;\n  /** Part of a run of the same sender: the corner towards the next one is tighter. */\n  grouped?: \"first\" | \"middle\" | \"last\" | \"single\";\n  /** The words, passed translated. */\n  labels?: MessageBubbleLabels;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\nconst CORNERS = {\n  mine: { first: \"rounded-br-md\", middle: \"rounded-r-md\", last: \"rounded-tr-md\", single: \"\" },\n  theirs: { first: \"rounded-bl-md\", middle: \"rounded-l-md\", last: \"rounded-tl-md\", single: \"\" },\n} as const;\n\n/** A message: yours in the accent on the right, theirs on the left, the time inside, the receipt under the last of yours. */\nexport function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = \"single\", labels, className }: MessageBubbleProps) {\n  const s = chat();\n  const words = { ...STATUS, ...labels?.status };\n  return (\n    <div className={s.row({ className: [mine ? \"items-end\" : \"items-start\", className].filter(Boolean).join(\" \") })}>\n      <p\n        className={s.bubble({\n          className: [mine ? \"bg-accent text-on-accent\" : \"bg-surface-2 text-fg\", CORNERS[mine ? \"mine\" : \"theirs\"][grouped], status === \"failed\" ? \"ring-2 ring-danger\" : \"\", status === \"sending\" ? \"opacity-70\" : \"\"].join(\" \"),\n        })}\n      >\n        {context ? <span className={s.context()}>{context}</span> : null}\n        {text}\n        {time ? <span className={s.time()}>{time}</span> : null}\n      </p>\n      {showStatus && status ? (\n        <p className={s.status()} data-status={status}>\n          {status === \"sent\" || status === \"delivered\" || status === \"read\" ? (\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={status === \"read\" ? \"stroke-accent\" : \"stroke-fg-secondary\"}>\n              <path d={status === \"sent\" ? \"M5 12.5l4.5 4.5L19 7.5\" : \"M2 12.5l4.5 4.5L16 7.5M9 15l2 2 9.5-9.5\"} />\n            </svg>\n          ) : null}\n          {words[status]}\n          {status === \"failed\" && onRetry ? (\n            <button type=\"button\" onClick={onRetry} className=\"ml-1 font-semibold text-fg underline underline-offset-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n              {labels?.retry ?? \"Retry\"}\n            </button>\n          ) : null}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport type TypingIndicatorProps = {\n  /** What is read and shown beside the dots (“Elena is typing”) — passed translated. */\n  label: string;\n  /** Show the words beside the dots. */\n  showLabel?: boolean;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Three dots that breathe while the other person types, announced politely; still under reduced motion. */\nexport function TypingIndicator({ label, showLabel, className }: TypingIndicatorProps) {\n  const s = chat();\n  return (\n    <div role=\"status\" className={[\"flex items-center gap-2\", className].filter(Boolean).join(\" \")}>\n      <style href=\"krizaka-typing\" precedence=\"default\">{\"@keyframes kz-typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}\"}</style>\n      <span className={s.typing()} aria-hidden>\n        {[0, 1, 2].map((i) => (\n          <span key={i} className={s.dot()} style={{ animationDelay: `${i * 0.18}s` }} />\n        ))}\n      </span>\n      <span className={showLabel ? \"text-xs text-fg-secondary\" : \"sr-only\"}>{label}</span>\n    </div>\n  );\n}\n\nexport type MessageComposerProps = {\n  /** The draft (controlled). */\n  value: string;\n  /** Called on every key. */\n  onValueChange: (text: string) => void;\n  /** Sends the draft (Enter, or the button); Shift+Enter adds a line. */\n  onSend: () => void;\n  /** The input's name and placeholder (“Message”). */\n  placeholder: string;\n  /** The send button's name (“Send”). */\n  sendLabel: string;\n  /** Before the input: an attach button. */\n  leading?: React.ReactNode;\n  /** Cannot write: the reason in its place. */\n  disabledReason?: string;\n  /** The longest message. Default 4000. */\n  maxLength?: number;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Where a message is written: a growing textarea (Enter sends, Shift+Enter a new line), an attach slot, a send button. */\nexport function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength = 4000, className }: MessageComposerProps) {\n  const s = chat();\n  const ready = value.trim().length > 0;\n  return (\n    <form\n      className={s.composer({ className })}\n      onSubmit={(e) => {\n        e.preventDefault();\n        if (ready) onSend();\n      }}\n    >\n      {disabledReason ? (\n        <p className=\"m-0 flex-1 py-2 text-sm text-fg-secondary\">{disabledReason}</p>\n      ) : (\n        <>\n          {leading}\n          <textarea\n            aria-label={placeholder}\n            placeholder={placeholder}\n            rows={1}\n            maxLength={maxLength}\n            value={value}\n            onChange={(e) => onValueChange(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n                e.preventDefault();\n                if (ready) onSend();\n              }\n            }}\n            className={s.input()}\n            style={{ fieldSizing: \"content\" } as React.CSSProperties}\n          />\n          <button type=\"submit\" aria-label={sendLabel} disabled={!ready} className={s.send()}>\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n              <path d=\"M4 12l16-8-6 16-2.5-6.5L4 12z\" />\n            </svg>\n          </button>\n        </>\n      )}\n    </form>\n  );\n}\n\nexport type ConversationItemProps = {\n  /** The other person's name. */\n  name: string;\n  /** Their avatar's URL. */\n  avatar?: string | null;\n  /** The last message, or “typing…”. */\n  preview: string;\n  /** The preview is the typing signal: in the accent. */\n  typing?: boolean;\n  /** When (“14:02”, “Mon”). */\n  time?: string;\n  /** Unread messages: a count, the name in bold. */\n  unread?: number;\n  /** The unread count in words (“3 unread”). */\n  unreadLabel?: string;\n  /** Before the name: a presence dot (online). */\n  online?: boolean;\n  /** The presence in words (“online”). */\n  onlineLabel?: string;\n  /** Opens the conversation (a link). */\n  href?: string;\n  /** Opens the conversation (a button). */\n  onSelect?: () => void;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\n/** A conversation in the list: avatar, name, the last message or typing, the time, the unread count. */\nexport function ConversationItem({ name, avatar, preview, typing, time, unread = 0, unreadLabel, online, onlineLabel, href, onSelect, className }: ConversationItemProps) {\n  const s = chat();\n  const body = (\n    <>\n      <span className=\"relative shrink-0\">\n        <Avatar src={avatar ?? null} alt=\"\" fallback={name.charAt(0)} size=\"lg\" />\n        {online ? <span aria-hidden className=\"absolute bottom-0 right-0 h-3 w-3 rounded-full bg-success ring-2 ring-surface-0\" /> : null}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-sm text-fg\", unread > 0 ? \"font-extrabold\" : \"font-semibold\"].join(\" \")}>\n            {name}\n            {online && onlineLabel ? <span className=\"sr-only\">{`, ${onlineLabel}`}</span> : null}\n          </span>\n          {time ? <span className={[\"shrink-0 text-xs tabular-nums\", unread > 0 ? \"text-fg-accent\" : \"text-fg-secondary\"].join(\" \")}>{time}</span> : null}\n        </span>\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-xs\", typing ? \"text-fg-accent\" : unread > 0 ? \"text-fg\" : \"text-fg-secondary\"].join(\" \")}>{preview}</span>\n          {unread > 0 ? (\n            <span className={s.count()}>\n              <span aria-hidden>{unread > 99 ? \"99+\" : unread}</span>\n              <span className=\"sr-only\">{unreadLabel ?? String(unread)}</span>\n            </span>\n          ) : null}\n        </span>\n      </span>\n    </>\n  );\n  return href ? (\n    <a href={href} className={s.item({ className })}>\n      {body}\n    </a>\n  ) : (\n    <button type=\"button\" onClick={onSelect} className={s.item({ className })}>\n      {body}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/chat/chat.tsx"],"sourcesContent":["// Client (the composer's draft). A conversation's parts — the bubble with its time and receipt, the typing dots, the\n// composer, a conversation in a list — the same API as React Native. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { Avatar } from \"../avatar\";\n\nexport const chat = tv({\n  slots: {\n    row: \"flex flex-col gap-0.5\",\n    bubble: \"max-w-[80%] rounded-2xl px-3 py-2 text-sm leading-snug\",\n    context: \"mb-0.5 block text-xs opacity-85\",\n    time: \"mt-0.5 block text-right text-[11px] tabular-nums\",\n    status: \"flex items-center gap-1 text-xs text-fg-secondary data-[status=failed]:text-fg-danger [&>svg]:h-3.5 [&>svg]:w-3.5\",\n    typing: \"inline-flex items-center gap-1 self-start rounded-2xl bg-surface-2 px-3.5 py-3\",\n    dot: \"h-[7px] w-[7px] rounded-full bg-fg-secondary motion-safe:animate-[kz-typing_1.2s_ease-in-out_infinite]\",\n    composer: \"flex items-end gap-2 border-t border-border-subtle bg-surface-0 px-3 py-2\",\n    input:\n      \"max-h-32 min-h-10 flex-1 resize-none rounded-2xl border border-border-default bg-surface-1 px-3.5 py-2.5 text-sm text-fg placeholder:text-fg-muted \" +\n      \"focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    send:\n      \"inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent hover:bg-accent-hover focus-visible:outline-hidden \" +\n      \"focus-visible:ring-2 focus-visible:ring-ring disabled:bg-surface-3 disabled:text-fg-muted [&>svg]:h-[18px] [&>svg]:w-[18px]\",\n    item: \"flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n    count: \"inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-xs font-extrabold text-on-accent\",\n  },\n});\n\nexport type MessageStatus = \"sending\" | \"sent\" | \"delivered\" | \"read\" | \"failed\";\n\nexport type MessageBubbleLabels = {\n  /** The words of each status, shown under the last message of yours. */\n  status?: Partial<Record<MessageStatus, string>>;\n  /** A failed message's retry button (“Retry”). */\n  retry?: string;\n};\n\nconst STATUS: Record<MessageStatus, string> = { sending: \"Sending\", sent: \"Sent\", delivered: \"Delivered\", read: \"Read\", failed: \"Not sent\" };\n\nexport type MessageBubbleProps = {\n  /** The text. */\n  text: string;\n  /** Yours (right, in the accent) or theirs (left). */\n  mine?: boolean;\n  /** The time, written by the app (“14:02”). */\n  time?: string;\n  /** Where a message of yours stands; shown when `showStatus`. */\n  status?: MessageStatus;\n  /** Show the status under the bubble (the last message of yours). */\n  showStatus?: boolean;\n  /** A line above the text: what it answers. */\n  context?: string;\n  /** Sends a failed message again (a button under it). */\n  onRetry?: () => void;\n  /** Part of a run of the same sender: the corner towards the next one is tighter. */\n  grouped?: \"first\" | \"middle\" | \"last\" | \"single\";\n  /** The words, passed translated. */\n  labels?: MessageBubbleLabels;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\nconst CORNERS = {\n  mine: { first: \"rounded-br-md\", middle: \"rounded-r-md\", last: \"rounded-tr-md\", single: \"\" },\n  theirs: { first: \"rounded-bl-md\", middle: \"rounded-l-md\", last: \"rounded-tl-md\", single: \"\" },\n} as const;\n\n/** A message: yours in the accent on the right, theirs on the left, the time inside, the receipt under the last of yours. */\nexport function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = \"single\", labels, className }: MessageBubbleProps) {\n  const s = chat();\n  const words = { ...STATUS, ...labels?.status };\n  return (\n    <div className={s.row({ className: [mine ? \"items-end\" : \"items-start\", className].filter(Boolean).join(\" \") })}>\n      <p\n        className={s.bubble({\n          className: [mine ? \"bg-accent text-on-accent\" : \"bg-surface-2 text-fg\", CORNERS[mine ? \"mine\" : \"theirs\"][grouped], status === \"failed\" ? \"ring-2 ring-danger\" : \"\", status === \"sending\" ? \"opacity-70\" : \"\"].join(\" \"),\n        })}\n      >\n        {context ? <span className={s.context()}>{context}</span> : null}\n        {text}\n        {time ? <span className={s.time()}>{time}</span> : null}\n      </p>\n      {showStatus && status ? (\n        <p className={s.status()} data-status={status}>\n          {status === \"sent\" || status === \"delivered\" || status === \"read\" ? (\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden className={status === \"read\" ? \"stroke-accent\" : \"stroke-fg-secondary\"}>\n              <path d={status === \"sent\" ? \"M5 12.5l4.5 4.5L19 7.5\" : \"M2 12.5l4.5 4.5L16 7.5M9 15l2 2 9.5-9.5\"} />\n            </svg>\n          ) : null}\n          {words[status]}\n          {status === \"failed\" && onRetry ? (\n            <button type=\"button\" onClick={onRetry} className=\"ml-1 font-semibold text-fg underline underline-offset-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\">\n              {labels?.retry ?? \"Retry\"}\n            </button>\n          ) : null}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport type TypingIndicatorProps = {\n  /** What is read and shown beside the dots (“Elena is typing”) — passed translated. */\n  label: string;\n  /** Show the words beside the dots. */\n  showLabel?: boolean;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Three dots that breathe while the other person types, announced politely; still under reduced motion. */\nexport function TypingIndicator({ label, showLabel, className }: TypingIndicatorProps) {\n  const s = chat();\n  return (\n    <div role=\"status\" className={[\"flex items-center gap-2\", className].filter(Boolean).join(\" \")}>\n      <style href=\"krizaka-typing\" precedence=\"default\">{\"@keyframes kz-typing{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}\"}</style>\n      <span className={s.typing()} aria-hidden>\n        {[0, 1, 2].map((i) => (\n          <span key={i} className={s.dot()} style={{ animationDelay: `${i * 0.18}s` }} />\n        ))}\n      </span>\n      <span className={showLabel ? \"text-xs text-fg-secondary\" : \"sr-only\"}>{label}</span>\n    </div>\n  );\n}\n\nexport type MessageComposerProps = {\n  /** The draft (controlled). */\n  value: string;\n  /** Called on every key. */\n  onValueChange: (text: string) => void;\n  /** Sends the draft (Enter, or the button); Shift+Enter adds a line. */\n  onSend: () => void;\n  /** The input's name and placeholder (“Message”). */\n  placeholder: string;\n  /** The send button's name (“Send”). */\n  sendLabel: string;\n  /** Before the input: an attach button. */\n  leading?: React.ReactNode;\n  /** Cannot write: the reason in its place. */\n  disabledReason?: string;\n  /** The longest message. Default 4000. */\n  maxLength?: number;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Where a message is written: a growing textarea (Enter sends, Shift+Enter a new line), an attach slot, a send button. */\nexport function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength = 4000, className }: MessageComposerProps) {\n  const s = chat();\n  const ready = value.trim().length > 0;\n  return (\n    <form\n      className={s.composer({ className })}\n      onSubmit={(e) => {\n        e.preventDefault();\n        if (ready) onSend();\n      }}\n    >\n      {disabledReason ? (\n        <p className=\"m-0 flex-1 py-2 text-sm text-fg-secondary\">{disabledReason}</p>\n      ) : (\n        <>\n          {leading}\n          <textarea\n            aria-label={placeholder}\n            placeholder={placeholder}\n            rows={1}\n            maxLength={maxLength}\n            value={value}\n            onChange={(e) => onValueChange(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n                e.preventDefault();\n                if (ready) onSend();\n              }\n            }}\n            className={s.input()}\n            style={{ fieldSizing: \"content\" } as React.CSSProperties}\n          />\n          <button type=\"submit\" aria-label={sendLabel} disabled={!ready} className={s.send()}>\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n              <path d=\"M4 12l16-8-6 16-2.5-6.5L4 12z\" />\n            </svg>\n          </button>\n        </>\n      )}\n    </form>\n  );\n}\n\nexport type ConversationItemProps = {\n  /** The other person's name. */\n  name: string;\n  /** Their avatar's URL. */\n  avatar?: string | null;\n  /** The last message, or “typing…”. */\n  preview: string;\n  /** The preview is the typing signal: in the accent. */\n  typing?: boolean;\n  /** When (“14:02”, “Mon”). */\n  time?: string;\n  /** Unread messages: a count, the name in bold. */\n  unread?: number;\n  /** The unread count in words (“3 unread”). */\n  unreadLabel?: string;\n  /** Before the name: a presence dot (online). */\n  online?: boolean;\n  /** The presence in words (“online”). */\n  onlineLabel?: string;\n  /** Opens the conversation (a link). */\n  href?: string;\n  /** Opens the conversation (a button). */\n  onSelect?: () => void;\n  /** Classes merged on the row. */\n  className?: string;\n};\n\n/** A conversation in the list: avatar, name, the last message or typing, the time, the unread count. */\nexport function ConversationItem({ name, avatar, preview, typing, time, unread = 0, unreadLabel, online, onlineLabel, href, onSelect, className }: ConversationItemProps) {\n  const s = chat();\n  const body = (\n    <>\n      <span className=\"relative shrink-0\">\n        <Avatar src={avatar ?? null} alt=\"\" fallback={name.charAt(0)} size=\"lg\" />\n        {online ? <span aria-hidden className=\"absolute bottom-0 right-0 h-3 w-3 rounded-full bg-success ring-2 ring-surface-0\" /> : null}\n      </span>\n      <span className=\"flex min-w-0 flex-1 flex-col\">\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-sm text-fg\", unread > 0 ? \"font-extrabold\" : \"font-semibold\"].join(\" \")}>\n            {name}\n            {online && onlineLabel ? <span className=\"sr-only\">{`, ${onlineLabel}`}</span> : null}\n          </span>\n          {time ? <span className={[\"shrink-0 text-xs tabular-nums\", unread > 0 ? \"text-fg-accent\" : \"text-fg-secondary\"].join(\" \")}>{time}</span> : null}\n        </span>\n        <span className=\"flex items-center gap-2\">\n          <span className={[\"min-w-0 flex-1 truncate text-xs\", typing ? \"text-fg-accent\" : unread > 0 ? \"text-fg\" : \"text-fg-secondary\"].join(\" \")}>{preview}</span>\n          {unread > 0 ? (\n            <span className={s.count()}>\n              <span aria-hidden>{unread > 99 ? \"99+\" : unread}</span>\n              <span className=\"sr-only\">{unreadLabel ?? String(unread)}</span>\n            </span>\n          ) : null}\n        </span>\n      </span>\n    </>\n  );\n  return href ? (\n    <a href={href} className={s.item({ className })}>\n      {body}\n    </a>\n  ) : (\n    <button type=\"button\" onClick={onSelect} className={s.item({ className })}>\n      {body}\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-3GODX3D6.js

@@ -0,0 +1,25 @@
+"use client";
+
+// src/skip-link/skip-link.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var skipLink = tv({
+  base: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-surface-1 focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-fg focus:no-underline focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring"
+});
+function SkipLink({ href = "#content", className, onClick, children, ...props }) {
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    const target = document.getElementById(decodeURIComponent(href.slice(1)));
+    if (!target) return;
+    if (!target.hasAttribute("tabindex") && !target.matches("a[href], button, input, select, textarea, [contenteditable]")) target.setAttribute("tabindex", "-1");
+    target.focus();
+  };
+  return /* @__PURE__ */ jsx("a", { href, className: skipLink({ className }), onClick: handleClick, ...props, children });
+}
+
+export {
+  skipLink,
+  SkipLink
+};
+//# sourceMappingURL=chunk-3GODX3D6.js.map

package/dist/chunk-3GODX3D6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skip-link/skip-link.tsx"],"sourcesContent":["// Client (it moves focus). WCAG 2.4.1 Bypass Blocks: the first tab stop of a page, a link that skips the navigation and\n// lands on the content. Visually hidden until focused, then a pill above everything in the brand ring. The label is\n// passed translated; the target needs an `id` (and is made focusable, so focus really moves, router or not).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const skipLink = tv({\n  base:\n    \"sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-surface-1 focus:px-4 focus:py-2 \" +\n    \"focus:text-sm focus:font-semibold focus:text-fg focus:no-underline focus:shadow-lg focus:outline-hidden focus:ring-2 focus:ring-ring\",\n});\n\nexport type SkipLinkProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  /**\n   * The content to land on: `#` and its `id`. The element becomes focusable (`tabindex=\"-1\"`) when it is not.\n   * @default \"#content\"\n   */\n  href?: `#${string}`;\n};\n\n/** A \"skip to content\" link: the first tab stop, hidden until focused; Enter moves focus to the target. */\nexport function SkipLink({ href = \"#content\", className, onClick, children, ...props }: SkipLinkProps) {\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    const target = document.getElementById(decodeURIComponent(href.slice(1)));\n    if (!target) return;\n    if (!target.hasAttribute(\"tabindex\") && !target.matches(\"a[href], button, input, select, textarea, [contenteditable]\")) target.setAttribute(\"tabindex\", \"-1\");\n    target.focus();\n  };\n  return (\n    <a href={href} className={skipLink({ className })} onClick={handleClick} {...props}>\n      {children}\n    </a>\n  );\n}\n"],"mappings":";;;AAIA,SAAS,UAAU;AA2Bf;AAzBG,IAAM,WAAW,GAAG;AAAA,EACzB,MACE;AAEJ,CAAC;AAWM,SAAS,SAAS,EAAE,OAAO,YAAY,WAAW,SAAS,UAAU,GAAG,MAAM,GAAkB;AACrG,QAAM,cAAc,CAAC,UAA+C;AAClE,cAAU,KAAK;AACf,QAAI,MAAM,iBAAkB;AAC5B,UAAM,SAAS,SAAS,eAAe,mBAAmB,KAAK,MAAM,CAAC,CAAC,CAAC;AACxE,QAAI,CAAC,OAAQ;AACb,QAAI,CAAC,OAAO,aAAa,UAAU,KAAK,CAAC,OAAO,QAAQ,6DAA6D,EAAG,QAAO,aAAa,YAAY,IAAI;AAC5J,WAAO,MAAM;AAAA,EACf;AACA,SACE,oBAAC,OAAE,MAAY,WAAW,SAAS,EAAE,UAAU,CAAC,GAAG,SAAS,aAAc,GAAG,OAC1E,UACH;AAEJ;","names":[]}

package/dist/{chunk-F2GKFIYK.js → chunk-CURW36FI.js}

@@ -44,4 +44,4 @@ var Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });
 export {
   Avatar
 };
-//# sourceMappingURL=chunk-F2GKFIYK.js.map
+//# sourceMappingURL=chunk-CURW36FI.js.map

package/dist/chunk-JXLDUDTD.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-JXLDUDTD.js.map

package/dist/chunk-JXLDUDTD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-R6SDS7JM.js → chunk-ND3L5VHT.js}

@@ -6,6 +6,25 @@ import {
 // src/dialog/dialog.tsx
 import { Dialog as DialogPrimitive } from "radix-ui";
 import { tv } from "tailwind-variants";
+
+// src/dialog/return-focus.ts
+import * as React from "react";
+function useReturnFocus(onCloseAutoFocus) {
+  const [opener] = React.useState(() => typeof document === "undefined" ? null : document.activeElement);
+  return React.useCallback(
+    (event) => {
+      onCloseAutoFocus?.(event);
+      if (event.defaultPrevented) return;
+      if (opener instanceof HTMLElement && opener !== document.body && opener.isConnected) {
+        event.preventDefault();
+        opener.focus();
+      }
+    },
+    [opener, onCloseAutoFocus]
+  );
+}
+
+// src/dialog/dialog.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var dialog = tv({
   slots: {
@@ -38,6 +57,9 @@ function CloseIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 var prevent = (event) => event.preventDefault();
+function ReturnFocusContent({ onCloseAutoFocus, ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Content, { onCloseAutoFocus: useReturnFocus(onCloseAutoFocus), ...props });
+}
 function DialogContent({
   placement,
   size,
@@ -56,7 +78,7 @@ function DialogContent({
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container, children: [
     /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: v.overlay() }),
     /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+      ReturnFocusContent,
       {
         "data-placement": placement ?? "center",
         "data-dismissible": dismissible ? void 0 : "false",
@@ -110,6 +132,7 @@ function Sheet(props) {
 }
 
 export {
+  useReturnFocus,
   dialog,
   DialogContent,
   DialogHeader,
@@ -120,4 +143,4 @@ export {
   Dialog,
   Sheet
 };
-//# sourceMappingURL=chunk-R6SDS7JM.js.map
+//# sourceMappingURL=chunk-ND3L5VHT.js.map

package/dist/chunk-ND3L5VHT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog/dialog.tsx","../src/dialog/return-focus.ts"],"sourcesContent":["// Client (a portal). Radix does the focus trap, the scroll lock, Escape, the outside click, aria-modal, the\n// aria-labelledby / aria-describedby wiring and the focus return: this file only holds the shape.\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { IconButton } from \"../button/button\";\nimport { useReturnFocus } from \"./return-focus\";\n\nexport const dialog = tv({\n  slots: {\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    content:\n      \"kz-dialog fixed z-50 flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg shadow-lg focus:outline-hidden\",\n    close: \"absolute right-3 top-3 h-9 w-9\",\n    header: \"flex flex-col gap-1 px-5 pb-2 pr-14 pt-5\",\n    title: \"text-base font-bold text-fg\",\n    description: \"text-sm text-fg-secondary\",\n    body: \"min-h-0 flex-1 overflow-y-auto px-5 pb-5\",\n    footer:\n      \"flex flex-wrap items-center justify-end gap-2 border-t border-border-subtle px-5 py-4 pb-[max(1rem,env(safe-area-inset-bottom))]\",\n  },\n  variants: {\n    placement: {\n      center: { content: \"left-1/2 top-1/2 max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl\" },\n      /* A sheet: anchored at the bottom on a phone, centred from `sm` up. */\n      bottom: {\n        content:\n          \"inset-x-0 bottom-0 max-h-[92dvh] rounded-t-[1.75rem] sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:w-full \" +\n          \"sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[1.75rem]\",\n      },\n      right: { content: \"inset-y-0 right-0 h-full w-full max-w-md rounded-none border-y-0 border-r-0\" },\n      /* A navigation drawer: full height, from the left, clear of the notch. */\n      left: { content: \"inset-y-0 left-0 h-full w-full max-w-md rounded-none border-y-0 border-l-0 pl-[env(safe-area-inset-left)]\" },\n    },\n    size: { sm: { content: \"sm:max-w-sm\" }, md: { content: \"sm:max-w-md\" }, lg: { content: \"sm:max-w-2xl\" } },\n  },\n  defaultVariants: { placement: \"center\", size: \"md\" },\n});\nconst s = dialog();\n\nexport type DialogVariants = VariantProps<typeof dialog>;\n\nfunction CloseIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype CloseButtonProps =\n  | {\n      /** The accessible name of the close button — passed translated. */\n      closeLabel: string;\n      /** Leaves the close button out (the content brings its own way out, or none: see `dismissible`). */\n      hideClose?: false;\n    }\n  | { closeLabel?: string; hideClose: true };\n\nexport type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> &\n  DialogVariants &\n  CloseButtonProps & {\n    /**\n     * center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height) · left (a\n     * navigation drawer, full height).\n     * @default \"center\"\n     */\n    placement?: DialogVariants[\"placement\"];\n    /**\n     * sm · md · lg: the width of the dialog.\n     * @default \"md\"\n     */\n    size?: DialogVariants[\"size\"];\n    /**\n     * `false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\n     * through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.\n     */\n    dismissible?: boolean;\n    /** The element the portal renders into (default: document.body). */\n    container?: HTMLElement | null;\n  };\n\nconst prevent = (event: Event) => event.preventDefault();\n\n/** Radix's content, mounted only while open: it remembers the opener then and gives focus back on close (WCAG 2.4.3). */\nfunction ReturnFocusContent({ onCloseAutoFocus, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return <DialogPrimitive.Content onCloseAutoFocus={useReturnFocus(onCloseAutoFocus)} {...props} />;\n}\n\n/** The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`. */\nexport function DialogContent({\n  placement,\n  size,\n  closeLabel,\n  hideClose,\n  dismissible = true,\n  container,\n  className,\n  children,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onInteractOutside,\n  ...props\n}: DialogContentProps) {\n  const v = dialog({ placement, size });\n  return (\n    <DialogPrimitive.Portal container={container}>\n      <DialogPrimitive.Overlay className={v.overlay()} />\n      <ReturnFocusContent\n        data-placement={placement ?? \"center\"}\n        data-dismissible={dismissible ? undefined : \"false\"}\n        className={v.content({ className })}\n        onEscapeKeyDown={dismissible ? onEscapeKeyDown : chain(onEscapeKeyDown, prevent)}\n        onPointerDownOutside={dismissible ? onPointerDownOutside : chain(onPointerDownOutside, prevent)}\n        onInteractOutside={dismissible ? onInteractOutside : chain(onInteractOutside, prevent)}\n        {...props}\n      >\n        {children}\n        {!hideClose && (\n          <DialogPrimitive.Close asChild>\n            <IconButton label={closeLabel as string} variant=\"ghost\" shape=\"pill\" className={v.close()}>\n              <CloseIcon />\n            </IconButton>\n          </DialogPrimitive.Close>\n        )}\n      </ReturnFocusContent>\n    </DialogPrimitive.Portal>\n  );\n}\n\nfunction chain<E extends Event>(handler: ((event: E) => void) | undefined, then: (event: E) => void) {\n  return (event: E) => {\n    handler?.(event);\n    then(event);\n  };\n}\n\nexport function DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.header({ className })} {...props} />;\n}\n\nexport function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return <DialogPrimitive.Title className={s.title({ className })} {...props} />;\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description className={s.description({ className })} {...props} />;\n}\n\nexport function DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.footer({ className })} {...props} />;\n}\n\n/** `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const Dialog = {\n  Root: DialogPrimitive.Root,\n  Trigger: DialogPrimitive.Trigger,\n  Close: DialogPrimitive.Close,\n  Content: DialogContent,\n  Header: DialogHeader,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Body: DialogBody,\n  Footer: DialogFooter,\n};\n\n/** `Omit` that keeps the close-button union (`closeLabel` required unless `hideClose`). */\ntype DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;\n\nexport type SheetProps = DistributiveOmit<DialogContentProps, \"placement\">;\n\n/** A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement=\"bottom\"`. */\nexport function Sheet(props: SheetProps) {\n  return <DialogContent placement=\"bottom\" {...props} />;\n}\n","// Client. WCAG 2.4.3: when a dialog closes, focus goes back to what opened it. Radix only does it for `Dialog.Trigger`;\n// most app dialogs are controlled (`open` / `onOpenChange`) and opened by a plain button, so on Escape focus fell to\n// <body>. The content remembers the focused element when it mounts (it is still the opener: Radix moves focus in an\n// effect) and gives it back on close, unless the consumer's `onCloseAutoFocus` prevented the default.\nimport * as React from \"react\";\n\n/** The handler for `onCloseAutoFocus`: yours first, then focus back on the opener if it is still on the page. */\nexport function useReturnFocus(onCloseAutoFocus?: (event: Event) => void) {\n  const [opener] = React.useState<Element | null>(() => (typeof document === \"undefined\" ? null : document.activeElement));\n  return React.useCallback(\n    (event: Event) => {\n      onCloseAutoFocus?.(event);\n      if (event.defaultPrevented) return;\n      if (opener instanceof HTMLElement && opener !== document.body && opener.isConnected) {\n        event.preventDefault();\n        opener.focus();\n      }\n    },\n    [opener, onCloseAutoFocus],\n  );\n}\n"],"mappings":";;;;;;AAEA,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAA6B;;;ACAtC,YAAY,WAAW;AAGhB,SAAS,eAAe,kBAA2C;AACxE,QAAM,CAAC,MAAM,IAAU,eAAyB,MAAO,OAAO,aAAa,cAAc,OAAO,SAAS,aAAc;AACvH,SAAa;AAAA,IACX,CAAC,UAAiB;AAChB,yBAAmB,KAAK;AACxB,UAAI,MAAM,iBAAkB;AAC5B,UAAI,kBAAkB,eAAe,WAAW,SAAS,QAAQ,OAAO,aAAa;AACnF,cAAM,eAAe;AACrB,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,gBAAgB;AAAA,EAC3B;AACF;;;AD0BM,cA+DA,YA/DA;AArCC,IAAM,SAAS,GAAG;AAAA,EACvB,OAAO;AAAA,IACL,SAAS;AAAA,IACT,SACE;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QACE;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ,EAAE,SAAS,kGAAkG;AAAA;AAAA,MAErH,QAAQ;AAAA,QACN,SACE;AAAA,MAEJ;AAAA,MACA,OAAO,EAAE,SAAS,8EAA8E;AAAA;AAAA,MAEhG,MAAM,EAAE,SAAS,4GAA4G;AAAA,IAC/H;AAAA,IACA,MAAM,EAAE,IAAI,EAAE,SAAS,cAAc,GAAG,IAAI,EAAE,SAAS,cAAc,GAAG,IAAI,EAAE,SAAS,eAAe,EAAE;AAAA,EAC1G;AAAA,EACA,iBAAiB,EAAE,WAAW,UAAU,MAAM,KAAK;AACrD,CAAC;AACD,IAAM,IAAI,OAAO;AAIjB,SAAS,YAAY;AACnB,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAC9H,8BAAC,UAAK,GAAE,wBAAuB,GACjC;AAEJ;AAkCA,IAAM,UAAU,CAAC,UAAiB,MAAM,eAAe;AAGvD,SAAS,mBAAmB,EAAE,kBAAkB,GAAG,MAAM,GAAyD;AAChH,SAAO,oBAAC,gBAAgB,SAAhB,EAAwB,kBAAkB,eAAe,gBAAgB,GAAI,GAAG,OAAO;AACjG;AAGO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,IAAI,OAAO,EAAE,WAAW,KAAK,CAAC;AACpC,SACE,qBAAC,gBAAgB,QAAhB,EAAuB,WACtB;AAAA,wBAAC,gBAAgB,SAAhB,EAAwB,WAAW,EAAE,QAAQ,GAAG;AAAA,IACjD;AAAA,MAAC;AAAA;AAAA,QACC,kBAAgB,aAAa;AAAA,QAC7B,oBAAkB,cAAc,SAAY;AAAA,QAC5C,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC;AAAA,QAClC,iBAAiB,cAAc,kBAAkB,MAAM,iBAAiB,OAAO;AAAA,QAC/E,sBAAsB,cAAc,uBAAuB,MAAM,sBAAsB,OAAO;AAAA,QAC9F,mBAAmB,cAAc,oBAAoB,MAAM,mBAAmB,OAAO;AAAA,QACpF,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,CAAC,aACA,oBAAC,gBAAgB,OAAhB,EAAsB,SAAO,MAC5B,8BAAC,cAAW,OAAO,YAAsB,SAAQ,SAAQ,OAAM,QAAO,WAAW,EAAE,MAAM,GACvF,8BAAC,aAAU,GACb,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,SAAS,MAAuB,SAA2C,MAA0B;AACnG,SAAO,CAAC,UAAa;AACnB,cAAU,KAAK;AACf,SAAK,KAAK;AAAA,EACZ;AACF;AAEO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AACjF,SAAO,oBAAC,SAAI,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7D;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC9E;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA6D;AACnH,SAAO,oBAAC,gBAAgB,aAAhB,EAA4B,WAAW,EAAE,YAAY,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC1F;AAEO,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC/E,SAAO,oBAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3D;AAEO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AACjF,SAAO,oBAAC,SAAI,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7D;AAGO,IAAM,SAAS;AAAA,EACpB,MAAM,gBAAgB;AAAA,EACtB,SAAS,gBAAgB;AAAA,EACzB,OAAO,gBAAgB;AAAA,EACvB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,MAAM;AAAA,EACN,QAAQ;AACV;AAQO,SAAS,MAAM,OAAmB;AACvC,SAAO,oBAAC,iBAAc,WAAU,UAAU,GAAG,OAAO;AACtD;","names":[]}

package/dist/chunk-NPF3OHE2.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-NPF3OHE2.js.map

package/dist/chunk-NPF3OHE2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-ECSCA3CN.js → chunk-UOMP6VOZ.js}

@@ -125,4 +125,4 @@ export {
   Button,
   IconButton
 };
-//# sourceMappingURL=chunk-ECSCA3CN.js.map
+//# sourceMappingURL=chunk-UOMP6VOZ.js.map

package/dist/command.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   DialogContent
-} from "./chunk-R6SDS7JM.js";
+} from "./chunk-ND3L5VHT.js";
 import "./chunk-RUPNPMP3.js";
 import "./chunk-WEVYKZIF.js";
 import {

package/dist/data-table.js

@@ -1,7 +1,8 @@
 "use client";
+import "./chunk-JXLDUDTD.js";
 import {
   Button
-} from "./chunk-ECSCA3CN.js";
+} from "./chunk-UOMP6VOZ.js";
 import {
   Checkbox
 } from "./chunk-7Z4KHPFC.js";