@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/menu/menubar.d.ts

@@ -0,0 +1,31 @@
+import * as Primitive from '@radix-ui/react-menubar';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+/**
+ * Desktop application menu bar (File, Edit, View) for editor-like products (workflow builder).
+ * Not for site navigation. Hide it on mobile and expose the same actions through a DropdownMenu.
+ */
+export declare function Menubar({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Root>): import("react").JSX.Element;
+export declare const MenubarMenu: typeof Primitive.Menu;
+export declare function MenubarTrigger({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Trigger>): import("react").JSX.Element;
+export declare function MenubarContent({ className, sideOffset, align, collisionPadding, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Content>): import("react").JSX.Element;
+interface ItemExtras {
+    icon?: IconName;
+    /** Keyboard shortcut hint, e.g. `⌘D`. */
+    shortcut?: string;
+    tone?: 'default' | 'danger';
+    children: ReactNode;
+}
+export declare function MenubarItem({ icon, shortcut, tone, className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Item> & ItemExtras): import("react").JSX.Element;
+export declare function MenubarCheckboxItem({ className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>): import("react").JSX.Element;
+export declare const MenubarRadioGroup: import("react").ForwardRefExoticComponent<Primitive.MenubarRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function MenubarRadioItem({ className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.RadioItem>): import("react").JSX.Element;
+export declare function MenubarLabel({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Label>): import("react").JSX.Element;
+export declare function MenubarSeparator({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Separator>): import("react").JSX.Element;
+export declare const MenubarGroup: import("react").ForwardRefExoticComponent<Primitive.MenubarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarSub: import("react").FC<Primitive.MenubarSubProps>;
+export declare function MenubarSubTrigger({ icon, className, children, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubTrigger> & {
+    icon?: IconName;
+}): import("react").JSX.Element;
+export declare function MenubarSubContent({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubContent>): import("react").JSX.Element;
+export {};

package/dist/menu/menubar.js

@@ -0,0 +1,125 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Glyph as n } from "../lib/glyphs.js";
+import { menuContent as r, menuIndicatorSlot as i, menuItem as a, menuLabel as o, menuSeparator as s } from "./menu-styles.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-menubar";
+//#region src/menu/menubar.tsx
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Root, {
+		className: e("flex gap-0.5 rounded-md border border-border bg-surface p-1 font-sans", t),
+		...n
+	});
+}
+var f = u.Menu;
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Trigger, {
+		className: e("cursor-pointer rounded-sm border-0 bg-transparent px-3 py-1.5 font-sans text-sm font-medium text-fg outline-none", "data-[highlighted]:bg-surface-muted data-[state=open]:bg-surface-muted focus-visible:outline-3 focus-visible:outline-focus", t),
+		...n
+	});
+}
+function m({ className: t, sideOffset: n = 6, align: i = "start", collisionPadding: a = 16, ...o }) {
+	return /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.Content, {
+		sideOffset: n,
+		align: i,
+		collisionPadding: a,
+		className: e(r, "[--kf-menu-max-h:var(--radix-menubar-content-available-height)]", t),
+		...o
+	}) });
+}
+function h({ icon: n, shortcut: r, tone: i = "default", className: o, children: s, ...d }) {
+	return /* @__PURE__ */ l(u.Item, {
+		className: e(a, i === "danger" && "text-danger-fg data-[highlighted]:bg-danger-surface", o),
+		...d,
+		children: [
+			n && /* @__PURE__ */ c(t, {
+				name: n,
+				size: 20,
+				className: "shrink-0"
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: s
+			}),
+			r && /* @__PURE__ */ c("span", {
+				className: "ml-auto pl-4 font-mono text-xs text-fg-muted",
+				children: r
+			})
+		]
+	});
+}
+function g({ className: t, children: r, ...o }) {
+	return /* @__PURE__ */ l(u.CheckboxItem, {
+		className: e(a, i, t),
+		...o,
+		children: [/* @__PURE__ */ c(u.ItemIndicator, {
+			className: "absolute left-2.5 inline-flex text-link",
+			children: /* @__PURE__ */ c(n, {
+				name: "check",
+				size: 16
+			})
+		}), r]
+	});
+}
+var _ = u.RadioGroup;
+function v({ className: t, children: r, ...o }) {
+	return /* @__PURE__ */ l(u.RadioItem, {
+		className: e(a, i, t),
+		...o,
+		children: [/* @__PURE__ */ c(u.ItemIndicator, {
+			className: "absolute left-3 inline-flex text-link",
+			children: /* @__PURE__ */ c(n, {
+				name: "dot",
+				size: 14
+			})
+		}), r]
+	});
+}
+function y({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Label, {
+		className: e(o, t),
+		...n
+	});
+}
+function b({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Separator, {
+		className: e(s, t),
+		...n
+	});
+}
+var x = u.Group, S = u.Sub;
+function C({ icon: r, className: i, children: o, ...s }) {
+	return /* @__PURE__ */ l(u.SubTrigger, {
+		className: e(a, i),
+		...s,
+		children: [
+			r && /* @__PURE__ */ c(t, {
+				name: r,
+				size: 20,
+				className: "shrink-0"
+			}),
+			/* @__PURE__ */ c("span", {
+				className: "flex-1",
+				children: o
+			}),
+			/* @__PURE__ */ c(n, {
+				name: "chevron-right",
+				size: 16,
+				className: "text-fg-muted"
+			})
+		]
+	});
+}
+function w({ className: t, ...n }) {
+	return /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.SubContent, {
+		sideOffset: 4,
+		collisionPadding: 16,
+		className: e(r, t),
+		...n
+	}) });
+}
+//#endregion
+export { d as Menubar, g as MenubarCheckboxItem, m as MenubarContent, x as MenubarGroup, h as MenubarItem, y as MenubarLabel, f as MenubarMenu, _ as MenubarRadioGroup, v as MenubarRadioItem, b as MenubarSeparator, S as MenubarSub, w as MenubarSubContent, C as MenubarSubTrigger, p as MenubarTrigger };
+
+//# sourceMappingURL=menubar.js.map

package/dist/menu/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["Primitive","Menubar","rest","cx","className","MenubarMenu","MenubarTrigger","MenubarContent","menuContent","MenubarItem","menuItem","tone","icon","Icon","shortcut","MenubarCheckboxItem","menuIndicatorSlot","Glyph","children","MenubarRadioGroup","MenubarRadioItem","MenubarLabel","menuLabel","MenubarSeparator","menuSeparator","MenubarGroup","MenubarSub","MenubarSubTrigger","MenubarSubContent"],"sources":["../../src/menu/menubar.tsx"],"sourcesContent":["// Shares its item components' structure with the other menu files (dropdown-menu, context-menu, menubar): keep them in sync.\n'use client';\n\nimport * as Primitive from '@radix-ui/react-menubar';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Glyph } from '../lib/glyphs';\nimport {\n  menuContent,\n  menuIndicatorSlot,\n  menuItem,\n  menuItemDanger,\n  menuLabel,\n  menuSeparator,\n  menuShortcut,\n} from './menu-styles';\n\n/**\n * Desktop application menu bar (File, Edit, View) for editor-like products (workflow builder).\n * Not for site navigation. Hide it on mobile and expose the same actions through a DropdownMenu.\n */\nexport function Menubar({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Root>) {\n  return (\n    <Primitive.Root\n      className={cx('flex gap-0.5 rounded-md border border-border bg-surface p-1 font-sans', className)}\n      {...rest}\n    />\n  );\n}\n\nexport const MenubarMenu: typeof Primitive.Menu = Primitive.Menu;\n\nexport function MenubarTrigger({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Trigger>) {\n  return (\n    <Primitive.Trigger\n      className={cx(\n        'cursor-pointer rounded-sm border-0 bg-transparent px-3 py-1.5 font-sans text-sm font-medium text-fg outline-none',\n        'data-[highlighted]:bg-surface-muted data-[state=open]:bg-surface-muted focus-visible:outline-3 focus-visible:outline-focus',\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n\nexport function MenubarContent({\n  className,\n  sideOffset = 6,\n  align = 'start',\n  collisionPadding = 16,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.Content>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.Content\n        sideOffset={sideOffset}\n        align={align}\n        collisionPadding={collisionPadding}\n        className={cx(menuContent, '[--kf-menu-max-h:var(--radix-menubar-content-available-height)]', className)}\n        {...rest}\n      />\n    </Primitive.Portal>\n  );\n}\n\ninterface ItemExtras {\n  icon?: IconName;\n  /** Keyboard shortcut hint, e.g. `⌘D`. */\n  shortcut?: string;\n  tone?: 'default' | 'danger';\n  children: ReactNode;\n}\n\nexport function MenubarItem({\n  icon,\n  shortcut,\n  tone = 'default',\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.Item> & ItemExtras) {\n  return (\n    <Primitive.Item className={cx(menuItem, tone === 'danger' && menuItemDanger, className)} {...rest}>\n      {icon && <Icon name={icon} size={20} className=\"shrink-0\" />}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      {shortcut && <span className={menuShortcut}>{shortcut}</span>}\n    </Primitive.Item>\n  );\n}\n\nexport function MenubarCheckboxItem({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.CheckboxItem>) {\n  return (\n    <Primitive.CheckboxItem className={cx(menuItem, menuIndicatorSlot, className)} {...rest}>\n      <Primitive.ItemIndicator className=\"absolute left-2.5 inline-flex text-link\">\n        <Glyph name=\"check\" size={16} />\n      </Primitive.ItemIndicator>\n      {children}\n    </Primitive.CheckboxItem>\n  );\n}\n\nexport const MenubarRadioGroup = Primitive.RadioGroup;\n\nexport function MenubarRadioItem({\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.RadioItem>) {\n  return (\n    <Primitive.RadioItem className={cx(menuItem, menuIndicatorSlot, className)} {...rest}>\n      <Primitive.ItemIndicator className=\"absolute left-3 inline-flex text-link\">\n        <Glyph name=\"dot\" size={14} />\n      </Primitive.ItemIndicator>\n      {children}\n    </Primitive.RadioItem>\n  );\n}\n\nexport function MenubarLabel({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Label>) {\n  return <Primitive.Label className={cx(menuLabel, className)} {...rest} />;\n}\n\nexport function MenubarSeparator({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.Separator>) {\n  return <Primitive.Separator className={cx(menuSeparator, className)} {...rest} />;\n}\n\nexport const MenubarGroup = Primitive.Group;\nexport const MenubarSub = Primitive.Sub;\n\nexport function MenubarSubTrigger({\n  icon,\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof Primitive.SubTrigger> & { icon?: IconName }) {\n  return (\n    <Primitive.SubTrigger className={cx(menuItem, className)} {...rest}>\n      {icon && <Icon name={icon} size={20} className=\"shrink-0\" />}\n      <span className=\"flex-1\">{children}</span>\n      <Glyph name=\"chevron-right\" size={16} className=\"text-fg-muted\" />\n    </Primitive.SubTrigger>\n  );\n}\n\nexport function MenubarSubContent({ className, ...rest }: ComponentPropsWithoutRef<typeof Primitive.SubContent>) {\n  return (\n    <Primitive.Portal>\n      <Primitive.SubContent sideOffset={4} collisionPadding={16} className={cx(menuContent, className)} {...rest} />\n    </Primitive.Portal>\n  );\n}\n"],"mappings":"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"}

package/dist/modal/modal.d.ts

@@ -0,0 +1,34 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface ModalProps {
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * Dialog that interrupts the current task. Centered on desktop; a bottom sheet with a drag
+ * handle below 640px. Built on Radix Dialog: focus trap, Escape, scroll lock, focus return.
+ */
+export declare function Modal({ open: openProp, defaultOpen, onOpenChange, children }: ModalProps): import("react").JSX.Element;
+/** Element that opens the modal. Use `asChild` to render your own Button. */
+export declare const ModalTrigger: import("react").ForwardRefExoticComponent<Dialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** Closes the modal. Use `asChild` to wrap a Button (e.g. "Cancel"). */
+export declare const ModalClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ModalContentProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Content>, 'title' | 'asChild'> {
+    /** Required for screen readers; hide it visually with `hideTitle`. */
+    title: ReactNode;
+    description?: ReactNode;
+    size?: ModalSize;
+    /** Actions row. Buttons stack full-width on mobile; put the primary action last. */
+    footer?: ReactNode;
+    hideTitle?: boolean;
+    hideClose?: boolean;
+    /** Accessible label of the close button (translate it for other locales). */
+    closeLabel?: string;
+    /** Extra classes for the scrollable body. To override its padding use the important modifier (`px-0!`). */
+    bodyClassName?: string;
+}
+export declare function ModalContent({ title, description, size, footer, hideTitle, hideClose, closeLabel, bodyClassName, className, children, ...rest }: ModalContentProps): import("react").JSX.Element;

package/dist/modal/modal.js

@@ -0,0 +1,58 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { OverlayBackdrop as t, PanelBody as n, PanelFooter as r, PanelHeader as i, SheetHandle as a, useSwipeDismiss as o } from "../overlay/overlay.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createContext as l, useContext as u, useState as d } from "react";
+import * as f from "@radix-ui/react-dialog";
+//#region src/modal/modal.tsx
+var p = {
+	sm: "sm:max-w-md",
+	md: "sm:max-w-xl",
+	lg: "sm:max-w-3xl",
+	xl: "sm:max-w-5xl"
+}, m = l(() => {});
+function h({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
+	let [i, a] = d(t), o = e ?? i, c = (t) => {
+		e === void 0 && a(t), n?.(t);
+	};
+	return /* @__PURE__ */ s(f.Root, {
+		open: o,
+		onOpenChange: c,
+		children: /* @__PURE__ */ s(m.Provider, {
+			value: () => c(!1),
+			children: r
+		})
+	});
+}
+var g = f.Trigger, _ = f.Close;
+function v({ title: l, description: d, size: h = "md", footer: g, hideTitle: _, hideClose: v, closeLabel: y = "Close", bodyClassName: b, className: x, children: S, ...C }) {
+	let w = u(m), { panelRef: T, handlers: E } = o("down", w);
+	return /* @__PURE__ */ c(f.Portal, { children: [/* @__PURE__ */ s(t, {}), /* @__PURE__ */ c(f.Content, {
+		ref: T,
+		...d ? {} : { "aria-describedby": void 0 },
+		className: e("kf-modal fixed inset-x-0 bottom-0 z-50 flex max-h-[92dvh] flex-col rounded-t-xl bg-surface font-sans text-fg shadow-overlay", "pb-[env(safe-area-inset-bottom)] focus:outline-none", "sm:inset-0 sm:m-auto sm:h-fit sm:max-h-[min(90dvh,56rem)] sm:w-[calc(100%-2rem)] sm:rounded-xl sm:pb-0", p[h], x),
+		...C,
+		children: [
+			/* @__PURE__ */ s(a, {
+				className: "sm:hidden",
+				...E
+			}),
+			/* @__PURE__ */ s(i, {
+				title: l,
+				description: d,
+				hideTitle: _,
+				hideClose: v,
+				closeLabel: y
+			}),
+			/* @__PURE__ */ s(n, {
+				className: b,
+				children: S
+			}),
+			g && /* @__PURE__ */ s(r, { children: g })
+		]
+	})] });
+}
+//#endregion
+export { h as Modal, _ as ModalClose, v as ModalContent, g as ModalTrigger };
+
+//# sourceMappingURL=modal.js.map

package/dist/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","names":["Dialog","SIZES","CloseContext","createContext","Modal","openProp","uncontrolled","setUncontrolled","useState","defaultOpen","open","setOpen","next","onOpenChange","ModalTrigger","ModalClose","ModalContent","rest","close","useContext","useSwipeDismiss","OverlayBackdrop","panelRef","description","cx","size","className","SheetHandle","handlers","PanelHeader","PanelBody","bodyClassName","footer","PanelFooter"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["'use client';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { createContext, useContext, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { OverlayBackdrop, PanelBody, PanelFooter, PanelHeader, SheetHandle, useSwipeDismiss } from '../overlay/overlay';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl';\n\nconst SIZES: Record<ModalSize, string> = {\n  sm: 'sm:max-w-md',\n  md: 'sm:max-w-xl',\n  lg: 'sm:max-w-3xl',\n  xl: 'sm:max-w-5xl',\n};\n\nconst CloseContext = createContext<() => void>(() => {});\n\nexport interface ModalProps {\n  /** Controlled open state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}\n\n/**\n * Dialog that interrupts the current task. Centered on desktop; a bottom sheet with a drag\n * handle below 640px. Built on Radix Dialog: focus trap, Escape, scroll lock, focus return.\n */\nexport function Modal({ open: openProp, defaultOpen = false, onOpenChange, children }: ModalProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setUncontrolled(next);\n    onOpenChange?.(next);\n  };\n  return (\n    <Dialog.Root open={open} onOpenChange={setOpen}>\n      <CloseContext.Provider value={() => setOpen(false)}>{children}</CloseContext.Provider>\n    </Dialog.Root>\n  );\n}\n\n/** Element that opens the modal. Use `asChild` to render your own Button. */\nexport const ModalTrigger = Dialog.Trigger;\n/** Closes the modal. Use `asChild` to wrap a Button (e.g. \"Cancel\"). */\nexport const ModalClose = Dialog.Close;\n\nexport interface ModalContentProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Content>, 'title' | 'asChild'> {\n  /** Required for screen readers; hide it visually with `hideTitle`. */\n  title: ReactNode;\n  description?: ReactNode;\n  size?: ModalSize;\n  /** Actions row. Buttons stack full-width on mobile; put the primary action last. */\n  footer?: ReactNode;\n  hideTitle?: boolean;\n  hideClose?: boolean;\n  /** Accessible label of the close button (translate it for other locales). */\n  closeLabel?: string;\n  /** Extra classes for the scrollable body. To override its padding use the important modifier (`px-0!`). */\n  bodyClassName?: string;\n}\n\nexport function ModalContent({\n  title,\n  description,\n  size = 'md',\n  footer,\n  hideTitle,\n  hideClose,\n  closeLabel = 'Close',\n  bodyClassName,\n  className,\n  children,\n  ...rest\n}: ModalContentProps) {\n  const close = useContext(CloseContext);\n  const { panelRef, handlers } = useSwipeDismiss('down', close);\n  return (\n    <Dialog.Portal>\n      <OverlayBackdrop />\n      <Dialog.Content\n        ref={panelRef}\n        {...(description ? {} : { 'aria-describedby': undefined })}\n        className={cx(\n          'kf-modal fixed inset-x-0 bottom-0 z-50 flex max-h-[92dvh] flex-col rounded-t-xl bg-surface font-sans text-fg shadow-overlay',\n          'pb-[env(safe-area-inset-bottom)] focus:outline-none',\n          'sm:inset-0 sm:m-auto sm:h-fit sm:max-h-[min(90dvh,56rem)] sm:w-[calc(100%-2rem)] sm:rounded-xl sm:pb-0',\n          SIZES[size],\n          className,\n        )}\n        {...rest}\n      >\n        <SheetHandle className=\"sm:hidden\" {...handlers} />\n        <PanelHeader title={title} description={description} hideTitle={hideTitle} hideClose={hideClose} closeLabel={closeLabel} />\n        <PanelBody className={bodyClassName}>{children}</PanelBody>\n        {footer && <PanelFooter>{footer}</PanelFooter>}\n      </Dialog.Content>\n    </Dialog.Portal>\n  );\n}\n"],"mappings":";;;;;;;AASA,IAAMC,IAAmC;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEMC,IAAeC,QAAgC,CAAC,CAAC;AAcvD,SAAgBC,EAAM,EAAE,MAAMC,GAAU,iBAAc,IAAO,iBAAc,eAAwB;CACjG,IAAM,CAACC,GAAcC,KAAmBC,EAASC,CAAW,GACtDC,IAAOL,KAAYC,GACnBK,KAAW,MAAkB;EAEjC,AADIN,MAAa,KAAA,KAAWE,EAAgBK,CAAI,GAChDC,IAAeD,CAAI;CACrB;CACA,OACE,kBAACZ,EAAO,MAAR;EAAmB;EAAM,cAAcW;EACrC,UAAA,kBAACT,EAAa,UAAd;GAAuB,aAAaS,EAAQ,EAAK;GAAI;EAAgC,CAAA;CAC1E,CAAA;AAEjB;AAGA,IAAaG,IAAed,EAAO,SAEtBe,IAAaf,EAAO;AAiBjC,SAAgBgB,EAAa,EAC3B,UACA,gBACA,UAAO,MACP,WACA,cACA,cACA,gBAAa,SACb,kBACA,cACA,aACA,GAAGC,KACiB;CACpB,IAAMC,IAAQC,EAAWjB,CAAY,GAC/B,EAAE,aAAU,gBAAakB,EAAgB,QAAQF,CAAK;CAC5D,OACE,kBAAClB,EAAO,QAAR,EAAA,UAAA,CACE,kBAACqB,GAAD,CAAkB,CAAA,GAClB,kBAACrB,EAAO,SAAR;EACE,KAAKsB;EACL,GAAKC,IAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;EACxD,WAAWC,EACT,+HACA,uDACA,0GACAvB,EAAMwB,IACNC,CACF;EACA,GAAIT;EAVN,UAAA;GAYE,kBAACU,GAAD;IAAa,WAAU;IAAY,GAAIC;GAAW,CAAA;GAClD,kBAACC,GAAD;IAAoB;IAAoB;IAAwB;IAAsB;IAAuB;GAAa,CAAA;GAC1H,kBAACC,GAAD;IAAW,WAAWC;IAAgB;GAAoB,CAAA;GACzDC,KAAU,kBAACC,GAAD,EAAA,UAAcD,EAAoB,CAAA;EAC/B;CACH,CAAA,CAAA,EAAA,CAAA;AAEnB"}

package/dist/notification-center/notification-center.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+export type NotificationVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export interface NotificationItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** When it happened; shown as relative time ("5 min ago"). */
+    time: Date | string | number;
+    read?: boolean;
+    variant?: NotificationVariant;
+    /** Overrides the variant icon. */
+    icon?: IconName;
+}
+export interface NotificationCenterProps {
+    notifications: NotificationItem[];
+    /** Called when the user opens an item. Mark it read here and navigate if needed. */
+    onSelect?: (item: NotificationItem) => void;
+    onMarkAllRead?: () => void;
+    /** Footer content, e.g. a "View all" link or notification settings. */
+    footer?: ReactNode;
+    /** Shows a skeleton list while the first page loads. */
+    loading?: boolean;
+    /** Locale for relative times (e.g. 'es'). */
+    locale?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Translatable strings. */
+    labels?: Partial<typeof DEFAULT_LABELS>;
+    className?: string;
+}
+declare const DEFAULT_LABELS: {
+    title: string;
+    /** `{count}` is replaced by the number of unread items. */
+    unreadCount: string;
+    filter: string;
+    all: string;
+    unread: string;
+    markAllRead: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    emptyUnreadTitle: string;
+};
+/**
+ * Bell button with an unread badge that opens the notification list: a popover on desktop,
+ * a bottom drawer on mobile. Data and read state stay in your app (pass `notifications`).
+ */
+export declare function NotificationCenter({ notifications, onSelect, onMarkAllRead, footer, loading, locale, open: openProp, onOpenChange, labels: labelOverrides, className, }: NotificationCenterProps): import("react").JSX.Element;
+/** "5 minutes ago", "yesterday", "just now" — in the given locale. */
+export declare function formatRelative(date: Date, locale?: string, now?: number): string;
+export {};

package/dist/notification-center/notification-center.js

@@ -0,0 +1,244 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Drawer as n, DrawerContent as r, DrawerTrigger as i } from "../drawer/drawer.js";
+import { DESKTOP_QUERY as a, useMediaQuery as o } from "../lib/use-media-query.js";
+import { Skeleton as s } from "../skeleton/skeleton.js";
+import { EmptyState as c } from "../empty-state/empty-state.js";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useState as d } from "react";
+import * as f from "@radix-ui/react-popover";
+//#region src/notification-center/notification-center.tsx
+var p = {
+	neutral: {
+		name: "notify",
+		className: "bg-surface-muted text-fg-muted"
+	},
+	success: {
+		name: "accept",
+		className: "bg-success-surface text-success-icon"
+	},
+	warning: {
+		name: "warning",
+		className: "bg-warning-surface text-warning-icon"
+	},
+	danger: {
+		name: "error",
+		className: "bg-danger-surface text-danger-icon"
+	},
+	info: {
+		name: "info",
+		className: "bg-info-surface text-info-icon"
+	}
+}, m = {
+	title: "Notifications",
+	unreadCount: "{count} unread",
+	filter: "Filter",
+	all: "All",
+	unread: "Unread",
+	markAllRead: "Mark all as read",
+	emptyTitle: "You’re all caught up",
+	emptyDescription: "New activity from your workflows will show up here.",
+	emptyUnreadTitle: "No unread notifications"
+};
+function h({ notifications: s, onSelect: c, onMarkAllRead: p, footer: h, loading: _ = !1, locale: v, open: y, onOpenChange: b, labels: x, className: S }) {
+	let C = {
+		...m,
+		...x
+	}, w = o(a), [T, E] = d(!1), D = y ?? T, O = (e) => {
+		y === void 0 && E(e), b?.(e);
+	}, k = s.filter((e) => !e.read).length, A = k > 0 ? `${C.title}, ${C.unreadCount.replace("{count}", String(k))}` : C.title, j = /* @__PURE__ */ u("button", {
+		type: "button",
+		"aria-label": A,
+		className: e("relative grid size-11 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg", "transition-colors hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", S),
+		children: [/* @__PURE__ */ l(t, {
+			name: "notify",
+			size: 26
+		}), k > 0 && /* @__PURE__ */ l("span", {
+			"aria-hidden": "true",
+			className: "absolute top-1 right-0.5 grid h-5 min-w-5 place-items-center rounded-full bg-danger-solid px-1 font-sans text-[11px] leading-none font-bold text-on-danger-solid ring-2 ring-bg",
+			children: k > 99 ? "99+" : k
+		})]
+	}), M = /* @__PURE__ */ l(g, {
+		notifications: s,
+		unread: k,
+		onSelect: c,
+		onMarkAllRead: p,
+		footer: h,
+		loading: _,
+		locale: v,
+		labels: C,
+		showTitle: w
+	});
+	return w ? /* @__PURE__ */ u(f.Root, {
+		open: D,
+		onOpenChange: O,
+		children: [/* @__PURE__ */ l(f.Trigger, {
+			asChild: !0,
+			children: j
+		}), /* @__PURE__ */ l(f.Portal, { children: /* @__PURE__ */ l(f.Content, {
+			align: "end",
+			sideOffset: 8,
+			collisionPadding: 16,
+			"aria-label": C.title,
+			className: "kf-popover z-50 flex max-h-[min(36rem,var(--radix-popover-content-available-height))] w-[24rem] flex-col overflow-hidden rounded-lg border border-border bg-surface font-sans text-fg shadow-overlay focus:outline-none",
+			children: M
+		}) })]
+	}) : /* @__PURE__ */ u(n, {
+		open: D,
+		onOpenChange: O,
+		children: [/* @__PURE__ */ l(i, {
+			asChild: !0,
+			children: j
+		}), /* @__PURE__ */ l(r, {
+			side: "bottom",
+			size: "lg",
+			title: C.title,
+			bodyClassName: "flex flex-col px-0! pb-0!",
+			children: M
+		})]
+	});
+}
+function g({ notifications: e, unread: t, onSelect: n, onMarkAllRead: r, footer: i, loading: a, locale: o, labels: f, showTitle: p }) {
+	let [m, h] = d("all"), g = m === "unread" ? e.filter((e) => !e.read) : e, v = r && t > 0 && /* @__PURE__ */ l("button", {
+		type: "button",
+		onClick: r,
+		className: "ml-auto cursor-pointer rounded-xs border-0 bg-transparent px-1 font-sans text-[13px] font-semibold whitespace-nowrap text-link hover:underline focus-visible:outline-3 focus-visible:outline-focus",
+		children: f.markAllRead
+	});
+	return /* @__PURE__ */ u("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: "grid gap-2 border-b border-border px-4 pt-3 pb-2.5",
+				children: [p && /* @__PURE__ */ u("div", {
+					className: "flex items-center justify-between gap-3",
+					children: [/* @__PURE__ */ l("h2", {
+						className: "m-0 font-display text-base font-bold",
+						children: f.title
+					}), v]
+				}), /* @__PURE__ */ u("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ l("div", {
+						role: "group",
+						"aria-label": f.filter,
+						className: "-ml-1 flex gap-1",
+						children: ["all", "unread"].map((e) => /* @__PURE__ */ l("button", {
+							type: "button",
+							"aria-pressed": m === e,
+							onClick: () => h(e),
+							className: "cursor-pointer rounded-full border-0 bg-transparent px-3 py-1 font-sans text-[13px] font-semibold whitespace-nowrap text-fg-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-focus aria-pressed:bg-surface-muted aria-pressed:text-fg",
+							children: e === "all" ? f.all : `${f.unread}${t ? ` (${t})` : ""}`
+						}, e))
+					}), !p && v]
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+				"aria-busy": a || void 0,
+				children: a ? /* @__PURE__ */ l("ul", {
+					className: "m-0 list-none p-0",
+					"aria-hidden": "true",
+					children: [
+						0,
+						1,
+						2
+					].map((e) => /* @__PURE__ */ u("li", {
+						className: "flex gap-3 px-4 py-3.5",
+						children: [/* @__PURE__ */ l(s, {
+							shape: "circle",
+							className: "size-9 shrink-0"
+						}), /* @__PURE__ */ l(s, {
+							shape: "text",
+							lines: 2,
+							className: "pt-1"
+						})]
+					}, e))
+				}) : g.length === 0 ? /* @__PURE__ */ l(c, {
+					size: "sm",
+					mascot: "happy",
+					headingLevel: 3,
+					title: m === "unread" && e.length ? f.emptyUnreadTitle : f.emptyTitle,
+					description: f.emptyDescription
+				}) : /* @__PURE__ */ l("ul", {
+					className: "m-0 list-none p-0",
+					children: g.map((e) => /* @__PURE__ */ l("li", {
+						className: "border-b border-border last:border-b-0",
+						children: /* @__PURE__ */ l(_, {
+							item: e,
+							locale: o,
+							unreadLabel: f.unread,
+							onSelect: n
+						})
+					}, e.id))
+				})
+			}),
+			i && /* @__PURE__ */ l("div", {
+				className: "border-t border-border px-4 py-3 text-sm",
+				children: i
+			})
+		]
+	});
+}
+function _({ item: n, locale: r, unreadLabel: i, onSelect: a }) {
+	let o = p[n.variant ?? "neutral"], s = new Date(n.time);
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		onClick: () => a?.(n),
+		className: e("flex w-full cursor-pointer gap-3 border-0 px-4 py-3.5 text-left font-sans text-fg", "hover:bg-surface-muted focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus", n.read ? "bg-transparent" : "bg-info-surface/40"),
+		children: [
+			/* @__PURE__ */ l("span", {
+				className: e("grid size-9 shrink-0 place-items-center rounded-full", o.className),
+				children: /* @__PURE__ */ l(t, {
+					name: n.icon ?? o.name,
+					size: 20
+				})
+			}),
+			/* @__PURE__ */ u("span", {
+				className: "grid min-w-0 flex-1 gap-0.5",
+				children: [
+					/* @__PURE__ */ u("span", {
+						className: e("text-sm leading-snug", n.read ? "font-medium" : "font-semibold"),
+						children: [!n.read && /* @__PURE__ */ u("span", {
+							className: "sr-only",
+							children: [i, ": "]
+						}), n.title]
+					}),
+					n.description && /* @__PURE__ */ l("span", {
+						className: "line-clamp-2 text-[13px] text-fg-muted",
+						children: n.description
+					}),
+					/* @__PURE__ */ l("time", {
+						dateTime: s.toISOString(),
+						className: "text-xs text-fg-muted",
+						children: y(s, r)
+					})
+				]
+			}),
+			!n.read && /* @__PURE__ */ l("span", {
+				"aria-hidden": "true",
+				className: "mt-1.5 size-2.5 shrink-0 rounded-full bg-link"
+			})
+		]
+	});
+}
+var v = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["week", 604800],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+function y(e, t, n = Date.now()) {
+	let r = Math.round((e.getTime() - n) / 1e3), i = new Intl.RelativeTimeFormat(t, {
+		numeric: "auto",
+		style: "short"
+	});
+	for (let [e, t] of v) if (Math.abs(r) >= t) return i.format(Math.round(r / t), e);
+	return i.format(0, "second");
+}
+//#endregion
+export { h as NotificationCenter, y as formatRelative };
+
+//# sourceMappingURL=notification-center.js.map

package/dist/notification-center/notification-center.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center.js","names":["Popover","ICONS","DEFAULT_LABELS","NotificationCenter","openProp","labelOverrides","labels","desktop","useMediaQuery","DESKTOP_QUERY","uncontrolled","setUncontrolled","useState","open","setOpen","next","onOpenChange","unread","notifications","n","bellLabel","bell","cx","className","Icon","panel","NotificationPanel","Drawer","DrawerTrigger","DrawerContent","filter","setFilter","items","markAll","onMarkAllRead","showTitle","f","loading","Skeleton","i","EmptyState","NotificationRow","footer","variant","item","date","onSelect","unreadLabel","formatRelative","locale","UNITS","seconds","now","rtf","unit","size"],"sources":["../../src/notification-center/notification-center.tsx"],"sourcesContent":["'use client';\n\nimport * as Popover from '@radix-ui/react-popover';\nimport { useState, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { DESKTOP_QUERY, useMediaQuery } from '../lib/use-media-query';\nimport { Icon, type IconName } from '../icon/icon';\nimport { Skeleton } from '../skeleton/skeleton';\nimport { EmptyState } from '../empty-state/empty-state';\nimport { Drawer, DrawerContent, DrawerTrigger } from '../drawer/drawer';\n\nexport type NotificationVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info';\n\nexport interface NotificationItem {\n  id: string;\n  title: ReactNode;\n  description?: ReactNode;\n  /** When it happened; shown as relative time (\"5 min ago\"). */\n  time: Date | string | number;\n  read?: boolean;\n  variant?: NotificationVariant;\n  /** Overrides the variant icon. */\n  icon?: IconName;\n}\n\nconst ICONS: Record<NotificationVariant, { name: IconName; className: string }> = {\n  neutral: { name: 'notify', className: 'bg-surface-muted text-fg-muted' },\n  success: { name: 'accept', className: 'bg-success-surface text-success-icon' },\n  warning: { name: 'warning', className: 'bg-warning-surface text-warning-icon' },\n  danger: { name: 'error', className: 'bg-danger-surface text-danger-icon' },\n  info: { name: 'info', className: 'bg-info-surface text-info-icon' },\n};\n\nexport interface NotificationCenterProps {\n  notifications: NotificationItem[];\n  /** Called when the user opens an item. Mark it read here and navigate if needed. */\n  onSelect?: (item: NotificationItem) => void;\n  onMarkAllRead?: () => void;\n  /** Footer content, e.g. a \"View all\" link or notification settings. */\n  footer?: ReactNode;\n  /** Shows a skeleton list while the first page loads. */\n  loading?: boolean;\n  /** Locale for relative times (e.g. 'es'). */\n  locale?: string;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Translatable strings. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n  className?: string;\n}\n\nconst DEFAULT_LABELS = {\n  title: 'Notifications',\n  /** `{count}` is replaced by the number of unread items. */\n  unreadCount: '{count} unread',\n  filter: 'Filter',\n  all: 'All',\n  unread: 'Unread',\n  markAllRead: 'Mark all as read',\n  emptyTitle: 'You’re all caught up',\n  emptyDescription: 'New activity from your workflows will show up here.',\n  emptyUnreadTitle: 'No unread notifications',\n};\n\ntype Labels = typeof DEFAULT_LABELS;\n\n/**\n * Bell button with an unread badge that opens the notification list: a popover on desktop,\n * a bottom drawer on mobile. Data and read state stay in your app (pass `notifications`).\n */\nexport function NotificationCenter({\n  notifications,\n  onSelect,\n  onMarkAllRead,\n  footer,\n  loading = false,\n  locale,\n  open: openProp,\n  onOpenChange,\n  labels: labelOverrides,\n  className,\n}: NotificationCenterProps) {\n  const labels: Labels = { ...DEFAULT_LABELS, ...labelOverrides };\n  const desktop = useMediaQuery(DESKTOP_QUERY);\n  const [uncontrolled, setUncontrolled] = useState(false);\n  const open = openProp ?? uncontrolled;\n  const setOpen = (next: boolean) => {\n    if (openProp === undefined) setUncontrolled(next);\n    onOpenChange?.(next);\n  };\n\n  const unread = notifications.filter((n) => !n.read).length;\n  const bellLabel = unread > 0 ? `${labels.title}, ${labels.unreadCount.replace('{count}', String(unread))}` : labels.title;\n\n  const bell = (\n    <button\n      type=\"button\"\n      aria-label={bellLabel}\n      className={cx(\n        'relative grid size-11 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg',\n        'transition-colors hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n        className,\n      )}\n    >\n      <Icon name=\"notify\" size={26} />\n      {unread > 0 && (\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute top-1 right-0.5 grid h-5 min-w-5 place-items-center rounded-full bg-danger-solid px-1 font-sans text-[11px] leading-none font-bold text-on-danger-solid ring-2 ring-bg\"\n        >\n          {unread > 99 ? '99+' : unread}\n        </span>\n      )}\n    </button>\n  );\n\n  const panel = (\n    <NotificationPanel\n      notifications={notifications}\n      unread={unread}\n      onSelect={onSelect}\n      onMarkAllRead={onMarkAllRead}\n      footer={footer}\n      loading={loading}\n      locale={locale}\n      labels={labels}\n      showTitle={desktop}\n    />\n  );\n\n  if (!desktop) {\n    return (\n        <Drawer open={open} onOpenChange={setOpen}>\n          <DrawerTrigger asChild>{bell}</DrawerTrigger>\n          <DrawerContent side=\"bottom\" size=\"lg\" title={labels.title} bodyClassName=\"flex flex-col px-0! pb-0!\">\n            {panel}\n          </DrawerContent>\n        </Drawer>\n    );\n  }\n\n  return (\n    <Popover.Root open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>{bell}</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          align=\"end\"\n          sideOffset={8}\n          collisionPadding={16}\n          aria-label={labels.title}\n          className=\"kf-popover z-50 flex max-h-[min(36rem,var(--radix-popover-content-available-height))] w-[24rem] flex-col overflow-hidden rounded-lg border border-border bg-surface font-sans text-fg shadow-overlay focus:outline-none\"\n        >\n          {panel}\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n\ninterface PanelProps {\n  notifications: NotificationItem[];\n  unread: number;\n  onSelect?: (item: NotificationItem) => void;\n  onMarkAllRead?: () => void;\n  footer?: ReactNode;\n  loading: boolean;\n  locale?: string;\n  labels: Labels;\n  showTitle: boolean;\n}\n\nfunction NotificationPanel({ notifications, unread, onSelect, onMarkAllRead, footer, loading, locale, labels, showTitle }: PanelProps) {\n  const [filter, setFilter] = useState<'all' | 'unread'>('all');\n  const items = filter === 'unread' ? notifications.filter((n) => !n.read) : notifications;\n  const markAll = onMarkAllRead && unread > 0 && (\n    <button\n      type=\"button\"\n      onClick={onMarkAllRead}\n      className=\"ml-auto cursor-pointer rounded-xs border-0 bg-transparent px-1 font-sans text-[13px] font-semibold whitespace-nowrap text-link hover:underline focus-visible:outline-3 focus-visible:outline-focus\"\n    >\n      {labels.markAllRead}\n    </button>\n  );\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      <div className=\"grid gap-2 border-b border-border px-4 pt-3 pb-2.5\">\n        {showTitle && (\n          <div className=\"flex items-center justify-between gap-3\">\n            <h2 className=\"m-0 font-display text-base font-bold\">{labels.title}</h2>\n            {markAll}\n          </div>\n        )}\n        <div className=\"flex items-center gap-3\">\n          <div role=\"group\" aria-label={labels.filter} className=\"-ml-1 flex gap-1\">\n            {(['all', 'unread'] as const).map((f) => (\n              <button\n                key={f}\n                type=\"button\"\n                aria-pressed={filter === f}\n                onClick={() => setFilter(f)}\n                className=\"cursor-pointer rounded-full border-0 bg-transparent px-3 py-1 font-sans text-[13px] font-semibold whitespace-nowrap text-fg-muted hover:text-fg focus-visible:outline-3 focus-visible:outline-focus aria-pressed:bg-surface-muted aria-pressed:text-fg\"\n              >\n                {f === 'all' ? labels.all : `${labels.unread}${unread ? ` (${unread})` : ''}`}\n              </button>\n            ))}\n          </div>\n          {!showTitle && markAll}\n        </div>\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\" aria-busy={loading || undefined}>\n        {loading ? (\n          <ul className=\"m-0 list-none p-0\" aria-hidden=\"true\">\n            {[0, 1, 2].map((i) => (\n              <li key={i} className=\"flex gap-3 px-4 py-3.5\">\n                <Skeleton shape=\"circle\" className=\"size-9 shrink-0\" />\n                <Skeleton shape=\"text\" lines={2} className=\"pt-1\" />\n              </li>\n            ))}\n          </ul>\n        ) : items.length === 0 ? (\n          <EmptyState\n            size=\"sm\"\n            mascot=\"happy\"\n            headingLevel={3}\n            title={filter === 'unread' && notifications.length ? labels.emptyUnreadTitle : labels.emptyTitle}\n            description={labels.emptyDescription}\n          />\n        ) : (\n          <ul className=\"m-0 list-none p-0\">\n            {items.map((n) => (\n              <li key={n.id} className=\"border-b border-border last:border-b-0\">\n                <NotificationRow item={n} locale={locale} unreadLabel={labels.unread} onSelect={onSelect} />\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {footer && <div className=\"border-t border-border px-4 py-3 text-sm\">{footer}</div>}\n    </div>\n  );\n}\n\nfunction NotificationRow({\n  item,\n  locale,\n  unreadLabel,\n  onSelect,\n}: {\n  item: NotificationItem;\n  locale?: string;\n  unreadLabel: string;\n  onSelect?: (item: NotificationItem) => void;\n}) {\n  const variant = ICONS[item.variant ?? 'neutral'];\n  const date = new Date(item.time);\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onSelect?.(item)}\n      className={cx(\n        'flex w-full cursor-pointer gap-3 border-0 px-4 py-3.5 text-left font-sans text-fg',\n        'hover:bg-surface-muted focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus',\n        item.read ? 'bg-transparent' : 'bg-info-surface/40',\n      )}\n    >\n      <span className={cx('grid size-9 shrink-0 place-items-center rounded-full', variant.className)}>\n        <Icon name={item.icon ?? variant.name} size={20} />\n      </span>\n      <span className=\"grid min-w-0 flex-1 gap-0.5\">\n        <span className={cx('text-sm leading-snug', item.read ? 'font-medium' : 'font-semibold')}>\n          {!item.read && <span className=\"sr-only\">{unreadLabel}: </span>}\n          {item.title}\n        </span>\n        {item.description && <span className=\"line-clamp-2 text-[13px] text-fg-muted\">{item.description}</span>}\n        <time dateTime={date.toISOString()} className=\"text-xs text-fg-muted\">\n          {formatRelative(date, locale)}\n        </time>\n      </span>\n      {!item.read && <span aria-hidden=\"true\" className=\"mt-1.5 size-2.5 shrink-0 rounded-full bg-link\" />}\n    </button>\n  );\n}\n\nconst UNITS: [Intl.RelativeTimeFormatUnit, number][] = [\n  ['year', 31_536_000],\n  ['month', 2_592_000],\n  ['week', 604_800],\n  ['day', 86_400],\n  ['hour', 3_600],\n  ['minute', 60],\n];\n\n/** \"5 minutes ago\", \"yesterday\", \"just now\" — in the given locale. */\nexport function formatRelative(date: Date, locale?: string, now = Date.now()) {\n  const seconds = Math.round((date.getTime() - now) / 1000);\n  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'short' });\n  for (const [unit, size] of UNITS) {\n    if (Math.abs(seconds) >= size) return rtf.format(Math.round(seconds / size), unit);\n  }\n  return rtf.format(0, 'second');\n}\n"],"mappings":"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"}

package/dist/otp-input/otp-input.d.ts

@@ -0,0 +1,23 @@
+export interface OtpInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Called once all digits are filled (e.g. submit automatically). */
+    onComplete?: (value: string) => void;
+    length?: number;
+    /** Allow letters as well as digits. */
+    alphanumeric?: boolean;
+    id?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Accessible name pattern for each box; `{n}` and `{count}` are replaced. */
+    digitLabel?: string;
+    /** Visual gap after this many boxes (e.g. 3 → "123 456"). */
+    groupSize?: number;
+    className?: string;
+}
+/**
+ * One-time code entry (2FA, email verification). Typing advances, Backspace goes back,
+ * pasting a full code fills every box, and `autocomplete="one-time-code"` lets phones suggest
+ * the code from SMS.
+ */
+export declare function OtpInput({ value, onChange, onComplete, length, alphanumeric, digitLabel, groupSize, className, ...rest }: OtpInputProps): import("react").JSX.Element;