@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/drawer/drawer.js

@@ -0,0 +1,72 @@
+"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/drawer/drawer.tsx
+var p = {
+	right: "kf-drawer--right touch-pan-y inset-y-0 right-0 h-dvh w-[88vw] rounded-l-xl pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",
+	left: "kf-drawer--left touch-pan-y inset-y-0 left-0 h-dvh w-[88vw] rounded-r-xl pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",
+	bottom: "kf-drawer--bottom inset-x-0 bottom-0 rounded-t-xl pb-[env(safe-area-inset-bottom)]"
+}, m = {
+	right: {
+		sm: "max-w-sm",
+		md: "max-w-md",
+		lg: "max-w-2xl"
+	},
+	left: {
+		sm: "max-w-sm",
+		md: "max-w-md",
+		lg: "max-w-2xl"
+	},
+	bottom: {
+		sm: "max-h-[40dvh]",
+		md: "max-h-[70dvh]",
+		lg: "max-h-[92dvh]"
+	}
+}, h = l(() => {});
+function g({ 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(h.Provider, {
+			value: () => c(!1),
+			children: r
+		})
+	});
+}
+var _ = f.Trigger, v = f.Close;
+function y({ title: l, description: d, side: g = "right", size: _ = "md", footer: v, hideTitle: y, hideClose: b, closeLabel: x = "Close", headerTone: S = "default", bodyClassName: C, className: w, children: T, ...E }) {
+	let D = u(h), O = g === "bottom", { panelRef: k, handlers: A } = o(O ? "down" : g, D, { touchOnly: !O });
+	return /* @__PURE__ */ c(f.Portal, { children: [/* @__PURE__ */ s(t, {}), /* @__PURE__ */ c(f.Content, {
+		ref: k,
+		...d ? {} : { "aria-describedby": void 0 },
+		className: e("kf-drawer fixed z-50 flex flex-col bg-surface font-sans text-fg shadow-overlay focus:outline-none", p[g], m[g][_], S === "brand" && "overflow-hidden", w),
+		...E,
+		...O ? {} : A,
+		children: [
+			O && /* @__PURE__ */ s(a, { ...A }),
+			/* @__PURE__ */ s(i, {
+				title: l,
+				description: d,
+				hideTitle: y,
+				hideClose: b,
+				closeLabel: x,
+				tone: S
+			}),
+			/* @__PURE__ */ s(n, {
+				className: C,
+				children: T
+			}),
+			v && /* @__PURE__ */ s(r, { children: v })
+		]
+	})] });
+}
+//#endregion
+export { g as Drawer, v as DrawerClose, y as DrawerContent, _ as DrawerTrigger };
+
+//# sourceMappingURL=drawer.js.map

package/dist/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":["Dialog","SIDES","SIZES","CloseContext","createContext","Drawer","openProp","uncontrolled","setUncontrolled","useState","defaultOpen","open","setOpen","next","onOpenChange","DrawerTrigger","DrawerClose","DrawerContent","rest","close","useContext","isBottom","side","useSwipeDismiss","OverlayBackdrop","panelRef","description","cx","size","headerTone","className","handlers","SheetHandle","PanelHeader","PanelBody","bodyClassName","footer","PanelFooter"],"sources":["../../src/drawer/drawer.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 DrawerSide = 'left' | 'right' | 'bottom';\nexport type DrawerSize = 'sm' | 'md' | 'lg';\n\nconst SIDES: Record<DrawerSide, string> = {\n  right: 'kf-drawer--right touch-pan-y inset-y-0 right-0 h-dvh w-[88vw] rounded-l-xl pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]',\n  left: 'kf-drawer--left touch-pan-y inset-y-0 left-0 h-dvh w-[88vw] rounded-r-xl pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]',\n  bottom: 'kf-drawer--bottom inset-x-0 bottom-0 rounded-t-xl pb-[env(safe-area-inset-bottom)]',\n};\n\n/** Width for side drawers, height for bottom drawers. */\nconst SIZES: Record<DrawerSide, Record<DrawerSize, string>> = {\n  right: { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-2xl' },\n  left: { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-2xl' },\n  bottom: { sm: 'max-h-[40dvh]', md: 'max-h-[70dvh]', lg: 'max-h-[92dvh]' },\n};\n\nconst CloseContext = createContext<() => void>(() => {});\n\nexport interface DrawerProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}\n\n/**\n * Panel that slides in from an edge while keeping the page context: navigation on mobile,\n * filters, record details, settings. Swipe toward its edge to dismiss on touch screens.\n */\nexport function Drawer({ open: openProp, defaultOpen = false, onOpenChange, children }: DrawerProps) {\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\nexport const DrawerTrigger = Dialog.Trigger;\nexport const DrawerClose = Dialog.Close;\n\nexport interface DrawerContentProps extends Omit<ComponentPropsWithoutRef<typeof Dialog.Content>, 'title' | 'asChild'> {\n  title: ReactNode;\n  description?: ReactNode;\n  side?: DrawerSide;\n  size?: DrawerSize;\n  footer?: ReactNode;\n  hideTitle?: boolean;\n  hideClose?: boolean;\n  closeLabel?: string;\n  /** `brand`: the header is a solid brand band (record and edit drawers in product dashboards). */\n  headerTone?: 'default' | 'brand';\n  /** Extra classes for the scrollable body. To override its padding use the important modifier (`px-0!`). */\n  bodyClassName?: string;\n}\n\nexport function DrawerContent({\n  title,\n  description,\n  side = 'right',\n  size = 'md',\n  footer,\n  hideTitle,\n  hideClose,\n  closeLabel = 'Close',\n  headerTone = 'default',\n  bodyClassName,\n  className,\n  children,\n  ...rest\n}: DrawerContentProps) {\n  const close = useContext(CloseContext);\n  const isBottom = side === 'bottom';\n  const { panelRef, handlers } = useSwipeDismiss(isBottom ? 'down' : side, close, { touchOnly: !isBottom });\n  return (\n    <Dialog.Portal>\n      <OverlayBackdrop />\n      <Dialog.Content\n        ref={panelRef}\n        {...(description ? {} : { 'aria-describedby': undefined })}\n        className={cx(\n          'kf-drawer fixed z-50 flex flex-col bg-surface font-sans text-fg shadow-overlay focus:outline-none',\n          SIDES[side],\n          SIZES[side][size],\n          // The band reaches the panel's rounded corners.\n          headerTone === 'brand' && 'overflow-hidden',\n          className,\n        )}\n        {...rest}\n        {...(isBottom ? {} : handlers)}\n      >\n        {isBottom && <SheetHandle {...handlers} />}\n        <PanelHeader\n          title={title}\n          description={description}\n          hideTitle={hideTitle}\n          hideClose={hideClose}\n          closeLabel={closeLabel}\n          tone={headerTone}\n        />\n        <PanelBody className={bodyClassName}>{children}</PanelBody>\n        {footer && <PanelFooter>{footer}</PanelFooter>}\n      </Dialog.Content>\n    </Dialog.Portal>\n  );\n}\n"],"mappings":";;;;;;;AAUA,IAAMC,IAAoC;CACxC,OAAO;CACP,MAAM;CACN,QAAQ;AACV,GAGMC,IAAwD;CAC5D,OAAO;EAAE,IAAI;EAAY,IAAI;EAAY,IAAI;CAAY;CACzD,MAAM;EAAE,IAAI;EAAY,IAAI;EAAY,IAAI;CAAY;CACxD,QAAQ;EAAE,IAAI;EAAiB,IAAI;EAAiB,IAAI;CAAgB;AAC1E,GAEMC,IAAeC,QAAgC,CAAC,CAAC;AAavD,SAAgBC,EAAO,EAAE,MAAMC,GAAU,iBAAc,IAAO,iBAAc,eAAyB;CACnG,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,kBAACb,EAAO,MAAR;EAAmB;EAAM,cAAcY;EACrC,UAAA,kBAACT,EAAa,UAAd;GAAuB,aAAaS,EAAQ,EAAK;GAAI;EAAgC,CAAA;CAC1E,CAAA;AAEjB;AAEA,IAAaG,IAAgBf,EAAO,SACvBgB,IAAchB,EAAO;AAiBlC,SAAgBiB,EAAc,EAC5B,UACA,gBACA,UAAO,SACP,UAAO,MACP,WACA,cACA,cACA,gBAAa,SACb,gBAAa,WACb,kBACA,cACA,aACA,GAAGC,KACkB;CACrB,IAAMC,IAAQC,EAAWjB,CAAY,GAC/BkB,IAAWC,MAAS,UACpB,EAAE,aAAU,gBAAaC,EAAgBF,IAAW,SAASC,GAAMH,GAAO,EAAE,WAAW,CAACE,EAAS,CAAC;CACxG,OACE,kBAACrB,EAAO,QAAR,EAAA,UAAA,CACE,kBAACwB,GAAD,CAAkB,CAAA,GAClB,kBAACxB,EAAO,SAAR;EACE,KAAKyB;EACL,GAAKC,IAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;EACxD,WAAWC,EACT,qGACA1B,EAAMqB,IACNpB,EAAMoB,EAAK,CAACM,IAEZC,MAAe,WAAW,mBAC1BC,CACF;EACA,GAAIZ;EACJ,GAAKG,IAAW,CAAC,IAAIU;EAZvB,UAAA;GAcGV,KAAY,kBAACW,GAAD,EAAa,GAAID,EAAW,CAAA;GACzC,kBAACE,GAAD;IACS;IACM;IACF;IACA;IACC;IACZ,MAAMJ;GACP,CAAA;GACD,kBAACK,GAAD;IAAW,WAAWC;IAAgB;GAAoB,CAAA;GACzDC,KAAU,kBAACC,GAAD,EAAA,UAAcD,EAAoB,CAAA;EAC/B;CACH,CAAA,CAAA,EAAA,CAAA;AAEnB"}

package/dist/empty-state/empty-state.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type MascotStandingState } from '../mascot/mascot';
+import { type IconName } from '../icon/icon';
+/** `inline`: an icon and one line, no mascot, for empty tables and dashboard cards. */
+export type EmptyStateSize = 'inline' | 'sm' | 'md' | 'lg';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Mascot expression. `idle` for first use, `happy` for "all done", `lost` for no results, `sad` for errors. */
+    mascot?: MascotStandingState | false;
+    /** Primary and secondary actions (Buttons). */
+    actions?: ReactNode;
+    size?: EmptyStateSize;
+    /** Icon of the `inline` size (default `inbox`). */
+    icon?: IconName;
+    /** Heading level of the title, to fit the page outline. `1` when the state is the whole page (404). */
+    headingLevel?: 1 | 2 | 3 | 4;
+    /** Extra content below the actions (e.g. a help link or error details). */
+    children?: ReactNode;
+}
+/**
+ * What a view shows when there is nothing to show: first use, no results, all done.
+ * Always explain why and offer the next step.
+ */
+export declare function EmptyState({ title, description, mascot, actions, size, headingLevel, icon, className, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/empty-state/empty-state.js

@@ -0,0 +1,78 @@
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { Mascot as n } from "../mascot/mascot.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/empty-state/empty-state.tsx
+var a = {
+	sm: {
+		wrap: "gap-2 px-4 py-8",
+		mascot: 48,
+		title: "text-base"
+	},
+	md: {
+		wrap: "gap-3 px-6 py-12",
+		mascot: 72,
+		title: "text-xl"
+	},
+	lg: {
+		wrap: "gap-4 px-6 py-20",
+		mascot: 104,
+		title: "text-3xl"
+	}
+};
+function o({ title: o, description: s, mascot: c = "idle", actions: l, size: u = "md", headingLevel: d = 2, icon: f = "inbox", className: p, children: m, ...h }) {
+	if (u === "inline") return /* @__PURE__ */ i("div", {
+		className: e("grid justify-items-center gap-2 px-4 py-8 text-center font-sans", p),
+		...h,
+		children: [
+			/* @__PURE__ */ r(t, {
+				name: f,
+				size: 32,
+				className: "text-fg-muted"
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "m-0 text-[15px] text-fg",
+				children: o
+			}),
+			s && /* @__PURE__ */ r("p", {
+				className: "m-0 max-w-[28rem] text-sm text-pretty text-fg-muted",
+				children: s
+			}),
+			l && /* @__PURE__ */ r("div", {
+				className: "mt-1 flex flex-wrap justify-center gap-3",
+				children: l
+			}),
+			m
+		]
+	});
+	let g = a[u], _ = `h${d}`;
+	return /* @__PURE__ */ i("div", {
+		className: e("grid justify-items-center text-center font-sans", g.wrap, p),
+		...h,
+		children: [
+			c && /* @__PURE__ */ r(n, {
+				state: c,
+				size: g.mascot,
+				title: "",
+				className: "mb-1 text-primary"
+			}),
+			/* @__PURE__ */ r(_, {
+				className: e("m-0 font-display font-bold tracking-tight text-balance text-fg", g.title),
+				children: o
+			}),
+			s && /* @__PURE__ */ r("p", {
+				className: "m-0 max-w-[28rem] text-[15px] text-pretty text-fg-muted",
+				children: s
+			}),
+			l && /* @__PURE__ */ r("div", {
+				className: "mt-2 flex flex-wrap justify-center gap-3",
+				children: l
+			}),
+			m
+		]
+	});
+}
+//#endregion
+export { o as EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":["SIZES","EmptyState","rest","size","cx","className","Icon","icon","title","description","actions","children","s","Heading","headingLevel","mascot","Mascot"],"sources":["../../src/empty-state/empty-state.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Mascot, type MascotStandingState } from '../mascot/mascot';\nimport { Icon, type IconName } from '../icon/icon';\n\n/** `inline`: an icon and one line, no mascot, for empty tables and dashboard cards. */\nexport type EmptyStateSize = 'inline' | 'sm' | 'md' | 'lg';\n\nconst SIZES: Record<Exclude<EmptyStateSize, 'inline'>, { wrap: string; mascot: number; title: string }> = {\n  sm: { wrap: 'gap-2 px-4 py-8', mascot: 48, title: 'text-base' },\n  md: { wrap: 'gap-3 px-6 py-12', mascot: 72, title: 'text-xl' },\n  lg: { wrap: 'gap-4 px-6 py-20', mascot: 104, title: 'text-3xl' },\n};\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Mascot expression. `idle` for first use, `happy` for \"all done\", `lost` for no results, `sad` for errors. */\n  mascot?: MascotStandingState | false;\n  /** Primary and secondary actions (Buttons). */\n  actions?: ReactNode;\n  size?: EmptyStateSize;\n  /** Icon of the `inline` size (default `inbox`). */\n  icon?: IconName;\n  /** Heading level of the title, to fit the page outline. `1` when the state is the whole page (404). */\n  headingLevel?: 1 | 2 | 3 | 4;\n  /** Extra content below the actions (e.g. a help link or error details). */\n  children?: ReactNode;\n}\n\n/**\n * What a view shows when there is nothing to show: first use, no results, all done.\n * Always explain why and offer the next step.\n */\nexport function EmptyState({\n  title,\n  description,\n  mascot = 'idle',\n  actions,\n  size = 'md',\n  headingLevel = 2,\n  icon = 'inbox',\n  className,\n  children,\n  ...rest\n}: EmptyStateProps) {\n  if (size === 'inline') {\n    // A line of text, not a heading: inline states sit inside a card or table that already has one.\n    return (\n      <div className={cx('grid justify-items-center gap-2 px-4 py-8 text-center font-sans', className)} {...rest}>\n        <Icon name={icon} size={32} className=\"text-fg-muted\" />\n        <p className=\"m-0 text-[15px] text-fg\">{title}</p>\n        {description && <p className=\"m-0 max-w-[28rem] text-sm text-pretty text-fg-muted\">{description}</p>}\n        {actions && <div className=\"mt-1 flex flex-wrap justify-center gap-3\">{actions}</div>}\n        {children}\n      </div>\n    );\n  }\n  const s = SIZES[size];\n  const Heading = `h${headingLevel}` as const;\n  return (\n    <div className={cx('grid justify-items-center text-center font-sans', s.wrap, className)} {...rest}>\n      {mascot && <Mascot state={mascot} size={s.mascot} title=\"\" className=\"mb-1 text-primary\" />}\n      <Heading className={cx('m-0 font-display font-bold tracking-tight text-balance text-fg', s.title)}>\n        {title}\n      </Heading>\n      {description && <p className=\"m-0 max-w-[28rem] text-[15px] text-pretty text-fg-muted\">{description}</p>}\n      {actions && <div className=\"mt-2 flex flex-wrap justify-center gap-3\">{actions}</div>}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAQA,IAAMA,IAAoG;CACxG,IAAI;EAAE,MAAM;EAAmB,QAAQ;EAAI,OAAO;CAAY;CAC9D,IAAI;EAAE,MAAM;EAAoB,QAAQ;EAAI,OAAO;CAAU;CAC7D,IAAI;EAAE,MAAM;EAAoB,QAAQ;EAAK,OAAO;CAAW;AACjE;AAsBA,SAAgBC,EAAW,EACzB,UACA,gBACA,YAAS,QACT,YACA,UAAO,MACP,kBAAe,GACf,UAAO,SACP,cACA,aACA,GAAGC,KACe;CAClB,IAAIC,MAAS,UAEX,OACE,kBAAC,OAAD;EAAK,WAAWC,EAAG,mEAAmEC,CAAS;EAAG,GAAIH;EAAtG,UAAA;GACE,kBAACI,GAAD;IAAM,MAAMC;IAAM,MAAM;IAAI,WAAU;GAAiB,CAAA;GACvD,kBAAC,KAAD;IAAG,WAAU;IAA2B,UAAAC;GAAS,CAAA;GAChDC,KAAe,kBAAC,KAAD;IAAG,WAAU;IAAuD,UAAAA;GAAe,CAAA;GAClGC,KAAW,kBAAC,OAAD;IAAK,WAAU;IAA4C,UAAAA;GAAa,CAAA;GACnFC;EACE;;CAGT,IAAMC,IAAIZ,EAAMG,IACVU,IAAU,IAAIC;CACpB,OACE,kBAAC,OAAD;EAAK,WAAWV,EAAG,mDAAmDQ,EAAE,MAAMP,CAAS;EAAG,GAAIH;EAA9F,UAAA;GACGa,KAAU,kBAACC,GAAD;IAAQ,OAAOD;IAAQ,MAAMH,EAAE;IAAQ,OAAM;IAAG,WAAU;GAAqB,CAAA;GAC1F,kBAACC,GAAD;IAAS,WAAWT,EAAG,kEAAkEQ,EAAE,KAAK;IAC7F,UAAAJ;GACM,CAAA;GACRC,KAAe,kBAAC,KAAD;IAAG,WAAU;IAA2D,UAAAA;GAAe,CAAA;GACtGC,KAAW,kBAAC,OAAD;IAAK,WAAU;IAA4C,UAAAA;GAAa,CAAA;GACnFC;EACE;;AAET"}

package/dist/error-state/error-state.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { type EmptyStateProps } from '../empty-state/empty-state';
+export type ErrorKind = 'generic' | 'offline' | 'not-found' | 'forbidden';
+export interface ErrorStateProps extends Omit<EmptyStateProps, 'title' | 'mascot'> {
+    kind?: ErrorKind;
+    title?: ReactNode;
+    /** Shows a "Try again" button. Set `retrying` while the retry runs. */
+    onRetry?: () => void;
+    retryLabel?: string;
+    retrying?: boolean;
+    /** Technical details (error code, request id) for support, collapsed by default. */
+    details?: ReactNode;
+    detailsLabel?: string;
+}
+/**
+ * A view, section or page failed to load. Says what happened in plain words, offers a retry,
+ * and keeps technical details one click away. Announced to screen readers (`role="alert"`).
+ */
+export declare function ErrorState({ kind, title, description, onRetry, retryLabel, retrying, actions, details, detailsLabel, ...rest }: ErrorStateProps): import("react").JSX.Element;

package/dist/error-state/error-state.js

@@ -0,0 +1,56 @@
+import { Button as e } from "../button/button.js";
+import { EmptyState as t } from "../empty-state/empty-state.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/error-state/error-state.tsx
+var a = {
+	generic: {
+		mascot: "error",
+		title: "Something went wrong",
+		description: "We could not load this. Try again; if it keeps happening, contact support."
+	},
+	offline: {
+		mascot: "sad",
+		title: "You are offline",
+		description: "Check your connection. We will retry when you are back online."
+	},
+	"not-found": {
+		mascot: "lost",
+		title: "We could not find that",
+		description: "It may have been moved or deleted, or the link is incomplete."
+	},
+	forbidden: {
+		mascot: "sad",
+		title: "You do not have access",
+		description: "Ask a workspace admin to give you access."
+	}
+};
+function o({ kind: o = "generic", title: s, description: c, onRetry: l, retryLabel: u = "Try again", retrying: d = !1, actions: f, details: p, detailsLabel: m = "Technical details", ...h }) {
+	let g = a[o];
+	return /* @__PURE__ */ r(t, {
+		role: "alert",
+		mascot: g.mascot,
+		title: s ?? g.title,
+		description: c ?? g.description,
+		actions: (l || f) && /* @__PURE__ */ i(n, { children: [l && /* @__PURE__ */ r(e, {
+			iconStart: "sync",
+			loading: d,
+			onClick: l,
+			children: u
+		}), f] }),
+		...h,
+		children: p && /* @__PURE__ */ i("details", {
+			className: "mt-3 max-w-[28rem] text-left text-sm text-fg-muted",
+			children: [/* @__PURE__ */ r("summary", {
+				className: "cursor-pointer rounded-xs text-center font-medium focus-visible:outline-3 focus-visible:outline-focus",
+				children: m
+			}), /* @__PURE__ */ r("pre", {
+				className: "mt-2 overflow-x-auto rounded-sm bg-surface-muted p-3 font-mono text-xs whitespace-pre-wrap",
+				children: p
+			})]
+		})
+	});
+}
+//#endregion
+export { o as ErrorState };
+
+//# sourceMappingURL=error-state.js.map

package/dist/error-state/error-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-state.js","names":["_Fragment","PRESETS","ErrorState","rest","preset","kind","EmptyState","title","description","onRetry","actions","Fragment","Button","retrying","retryLabel","details","detailsLabel"],"sources":["../../src/error-state/error-state.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Button } from '../button/button';\nimport { EmptyState, type EmptyStateProps } from '../empty-state/empty-state';\n\nexport type ErrorKind = 'generic' | 'offline' | 'not-found' | 'forbidden';\n\nconst PRESETS: Record<ErrorKind, { mascot: 'error' | 'sad' | 'lost'; title: string; description: string }> = {\n  generic: { mascot: 'error', title: 'Something went wrong', description: 'We could not load this. Try again; if it keeps happening, contact support.' },\n  offline: { mascot: 'sad', title: 'You are offline', description: 'Check your connection. We will retry when you are back online.' },\n  'not-found': { mascot: 'lost', title: 'We could not find that', description: 'It may have been moved or deleted, or the link is incomplete.' },\n  forbidden: { mascot: 'sad', title: 'You do not have access', description: 'Ask a workspace admin to give you access.' },\n};\n\nexport interface ErrorStateProps extends Omit<EmptyStateProps, 'title' | 'mascot'> {\n  kind?: ErrorKind;\n  title?: ReactNode;\n  /** Shows a \"Try again\" button. Set `retrying` while the retry runs. */\n  onRetry?: () => void;\n  retryLabel?: string;\n  retrying?: boolean;\n  /** Technical details (error code, request id) for support, collapsed by default. */\n  details?: ReactNode;\n  detailsLabel?: string;\n}\n\n/**\n * A view, section or page failed to load. Says what happened in plain words, offers a retry,\n * and keeps technical details one click away. Announced to screen readers (`role=\"alert\"`).\n */\nexport function ErrorState({\n  kind = 'generic',\n  title,\n  description,\n  onRetry,\n  retryLabel = 'Try again',\n  retrying = false,\n  actions,\n  details,\n  detailsLabel = 'Technical details',\n  ...rest\n}: ErrorStateProps) {\n  const preset = PRESETS[kind];\n  return (\n    <EmptyState\n      role=\"alert\"\n      mascot={preset.mascot}\n      title={title ?? preset.title}\n      description={description ?? preset.description}\n      actions={\n        (onRetry || actions) && (\n          <>\n            {onRetry && (\n              <Button iconStart=\"sync\" loading={retrying} onClick={onRetry}>\n                {retryLabel}\n              </Button>\n            )}\n            {actions}\n          </>\n        )\n      }\n      {...rest}\n    >\n      {details && (\n        <details className=\"mt-3 max-w-[28rem] text-left text-sm text-fg-muted\">\n          <summary className=\"cursor-pointer rounded-xs text-center font-medium focus-visible:outline-3 focus-visible:outline-focus\">\n            {detailsLabel}\n          </summary>\n          <pre className=\"mt-2 overflow-x-auto rounded-sm bg-surface-muted p-3 font-mono text-xs whitespace-pre-wrap\">{details}</pre>\n        </details>\n      )}\n    </EmptyState>\n  );\n}\n"],"mappings":";;;;AAMA,IAAMC,IAAuG;CAC3G,SAAS;EAAE,QAAQ;EAAS,OAAO;EAAwB,aAAa;CAA6E;CACrJ,SAAS;EAAE,QAAQ;EAAO,OAAO;EAAmB,aAAa;CAAiE;CAClI,aAAa;EAAE,QAAQ;EAAQ,OAAO;EAA0B,aAAa;CAAgE;CAC7I,WAAW;EAAE,QAAQ;EAAO,OAAO;EAA0B,aAAa;CAA4C;AACxH;AAkBA,SAAgBC,EAAW,EACzB,UAAO,WACP,UACA,gBACA,YACA,gBAAa,aACb,cAAW,IACX,YACA,YACA,kBAAe,qBACf,GAAGC,KACe;CAClB,IAAMC,IAASH,EAAQI;CACvB,OACE,kBAACC,GAAD;EACE,MAAK;EACL,QAAQF,EAAO;EACf,OAAOG,KAASH,EAAO;EACvB,aAAaI,KAAeJ,EAAO;EACnC,UACGK,KAAWC,MACV,kBAAAV,GAAA,EAAA,UAAA,CACGS,KACC,kBAACG,GAAD;GAAQ,WAAU;GAAO,SAASC;GAAU,SAASJ;GAClD,UAAAK;EACK,CAAA,GAETJ,CACD,EAAA,CAAA;EAGN,GAAIP;EAEH,UAAAY,KACC,kBAAC,WAAD;GAAS,WAAU;GAAnB,UAAA,CACE,kBAAC,WAAD;IAAS,WAAU;IAChB,UAAAC;GACM,CAAA,GACT,kBAAC,OAAD;IAAK,WAAU;IAA8F,UAAAD;GAAa,CAAA,CACnH;;CAED,CAAA;AAEhB"}

package/dist/event-calendar/calendar-logic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/event-calendar/dates.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Calendar-day helpers (ADR-0016). Days are `YYYY-MM-DD` strings with no time zone and times are `HH:mm` wall-clock
+ * strings. Compare days as strings; do arithmetic on UTC midnight so the browser's time zone never shifts a day.
+ */
+/** A calendar day, `YYYY-MM-DD`. */
+export type IsoDate = string;
+/** ISO weekday: 1 = Monday … 7 = Sunday. */
+export type Weekday = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+export type CalendarView = 'day' | 'week' | 'month';
+export declare const toDate: (iso: IsoDate) => Date;
+export declare const isoOf: (date: Date) => IsoDate;
+export declare const addDays: (iso: IsoDate, n: number) => IsoDate;
+export declare const weekday: (iso: IsoDate) => Weekday;
+export declare const daysBetween: (from: IsoDate, to: IsoDate) => number;
+export declare const range: (from: IsoDate, count: number) => IsoDate[];
+/** The first day of the week that contains `iso`. */
+export declare const startOfWeek: (iso: IsoDate, weekStartsOn?: Weekday) => string;
+export declare const startOfMonth: (iso: IsoDate) => IsoDate;
+/** The first day of the month `n` months from `iso`'s month. */
+export declare function addMonths(iso: IsoDate, n: number): IsoDate;
+/** 42 days (6 weeks) from the start of the week that contains the first of the month. */
+export declare const monthGrid: (iso: IsoDate, weekStartsOn?: Weekday) => string[];
+export declare function visibleDays(view: CalendarView, anchor: IsoDate, weekStartsOn?: Weekday): IsoDate[];
+/** Moves the anchor one step: a day, a week or a month (to the 1st). */
+export declare function shiftAnchor(view: CalendarView, anchor: IsoDate, delta: number): IsoDate;
+/** `HH:mm` → minutes since midnight. */
+export declare const minutesOf: (time: string) => number;
+/** Minutes since midnight → `HH:mm` (24:00 for the end of the day). */
+export declare const timeOf: (minutes: number) => string;
+export declare const monthName: (iso: IsoDate, locale: string, month?: "long" | "short") => string;
+export declare const weekdayName: (iso: IsoDate, locale: string, style?: "long" | "short" | "narrow") => string;
+/** "Thursday, November 13" (long date without the year). */
+export declare const dayLabel: (iso: IsoDate, locale: string) => string;
+/** "Nov 13 – Nov 15" or a single day. */
+export declare function rangeLabel(start: IsoDate, end: IsoDate, locale: string): string;

package/dist/event-calendar/dates.js

@@ -0,0 +1,55 @@
+import { __exportAll as e } from "../_virtual/_rolldown/runtime.js";
+//#region src/event-calendar/dates.ts
+var t = /* @__PURE__ */ e({
+	addDays: () => a,
+	addMonths: () => d,
+	dayLabel: () => b,
+	daysBetween: () => s,
+	isoOf: () => i,
+	minutesOf: () => h,
+	monthGrid: () => f,
+	monthName: () => v,
+	range: () => c,
+	rangeLabel: () => x,
+	shiftAnchor: () => m,
+	startOfMonth: () => u,
+	startOfWeek: () => l,
+	timeOf: () => g,
+	toDate: () => r,
+	visibleDays: () => p,
+	weekday: () => o,
+	weekdayName: () => y
+}), n = 864e5, r = (e) => /* @__PURE__ */ new Date(`${e}T00:00:00Z`), i = (e) => e.toISOString().slice(0, 10), a = (e, t) => i(new Date(r(e).getTime() + t * n)), o = (e) => r(e).getUTCDay() || 7, s = (e, t) => Math.round((r(t).getTime() - r(e).getTime()) / n), c = (e, t) => Array.from({ length: t }, (t, n) => a(e, n)), l = (e, t = 1) => a(e, -((o(e) - t + 7) % 7)), u = (e) => `${e.slice(0, 7)}-01`;
+function d(e, t) {
+	let n = r(e);
+	return i(new Date(Date.UTC(n.getUTCFullYear(), n.getUTCMonth() + t, 1)));
+}
+var f = (e, t = 1) => c(l(u(e), t), 42);
+function p(e, t, n = 1) {
+	return e === "day" ? [t] : e === "week" ? c(l(t, n), 7) : f(t, n);
+}
+function m(e, t, n) {
+	return e === "day" ? a(t, n) : e === "week" ? a(t, 7 * n) : d(t, n);
+}
+var h = (e) => {
+	let [t = 0, n = 0] = e.split(":").map(Number);
+	return t * 60 + n;
+}, g = (e) => `${String(Math.floor(e / 60)).padStart(2, "0")}:${String(e % 60).padStart(2, "0")}`, _ = (e, t) => new Intl.DateTimeFormat(e, {
+	timeZone: "UTC",
+	...t
+}), v = (e, t, n = "long") => _(t, { month: n }).format(r(e)), y = (e, t, n = "short") => _(t, { weekday: n }).format(r(e)), b = (e, t) => _(t, {
+	weekday: "long",
+	month: "long",
+	day: "numeric"
+}).format(r(e));
+function x(e, t, n) {
+	let i = _(n, {
+		month: "short",
+		day: "numeric"
+	});
+	return e === t ? b(e, n) : `${i.format(r(e))} – ${i.format(r(t))}`;
+}
+//#endregion
+export { a as addDays, d as addMonths, t as dates_exports, b as dayLabel, s as daysBetween, i as isoOf, h as minutesOf, f as monthGrid, v as monthName, c as range, x as rangeLabel, m as shiftAnchor, u as startOfMonth, l as startOfWeek, g as timeOf, r as toDate, p as visibleDays, o as weekday, y as weekdayName };
+
+//# sourceMappingURL=dates.js.map

package/dist/event-calendar/dates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dates.js","names":["dates_exports","addDays","addMonths","dayLabel","daysBetween","isoOf","minutesOf","monthGrid","monthName","range","rangeLabel","shiftAnchor","startOfMonth","startOfWeek","timeOf","toDate","visibleDays","weekday","weekdayName","DAY_MS","iso","date","n","to","from","count","i","weekStartsOn","d","view","anchor","delta","h","m","time","minutes","fmt","locale","options","style","short","start","end"],"sources":["../../src/event-calendar/dates.ts"],"sourcesContent":["/**\n * Calendar-day helpers (ADR-0016). Days are `YYYY-MM-DD` strings with no time zone and times are `HH:mm` wall-clock\n * strings. Compare days as strings; do arithmetic on UTC midnight so the browser's time zone never shifts a day.\n */\n\n/** A calendar day, `YYYY-MM-DD`. */\nexport type IsoDate = string;\n/** ISO weekday: 1 = Monday … 7 = Sunday. */\nexport type Weekday = 1 | 2 | 3 | 4 | 5 | 6 | 7;\nexport type CalendarView = 'day' | 'week' | 'month';\n\nconst DAY_MS = 86_400_000;\n\nexport const toDate = (iso: IsoDate) => new Date(`${iso}T00:00:00Z`);\nexport const isoOf = (date: Date): IsoDate => date.toISOString().slice(0, 10);\nexport const addDays = (iso: IsoDate, n: number): IsoDate => isoOf(new Date(toDate(iso).getTime() + n * DAY_MS));\nexport const weekday = (iso: IsoDate): Weekday => (toDate(iso).getUTCDay() || 7) as Weekday;\nexport const daysBetween = (from: IsoDate, to: IsoDate) =>\n  Math.round((toDate(to).getTime() - toDate(from).getTime()) / DAY_MS);\nexport const range = (from: IsoDate, count: number): IsoDate[] =>\n  Array.from({ length: count }, (_, i) => addDays(from, i));\n\n/** The first day of the week that contains `iso`. */\nexport const startOfWeek = (iso: IsoDate, weekStartsOn: Weekday = 1) =>\n  addDays(iso, -((weekday(iso) - weekStartsOn + 7) % 7));\nexport const startOfMonth = (iso: IsoDate): IsoDate => `${iso.slice(0, 7)}-01`;\n\n/** The first day of the month `n` months from `iso`'s month. */\nexport function addMonths(iso: IsoDate, n: number): IsoDate {\n  const d = toDate(iso);\n  return isoOf(new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + n, 1)));\n}\n\n/** 42 days (6 weeks) from the start of the week that contains the first of the month. */\nexport const monthGrid = (iso: IsoDate, weekStartsOn: Weekday = 1) =>\n  range(startOfWeek(startOfMonth(iso), weekStartsOn), 42);\n\nexport function visibleDays(view: CalendarView, anchor: IsoDate, weekStartsOn: Weekday = 1): IsoDate[] {\n  if (view === 'day') return [anchor];\n  if (view === 'week') return range(startOfWeek(anchor, weekStartsOn), 7);\n  return monthGrid(anchor, weekStartsOn);\n}\n\n/** Moves the anchor one step: a day, a week or a month (to the 1st). */\nexport function shiftAnchor(view: CalendarView, anchor: IsoDate, delta: number): IsoDate {\n  if (view === 'day') return addDays(anchor, delta);\n  if (view === 'week') return addDays(anchor, 7 * delta);\n  return addMonths(anchor, delta);\n}\n\n/** `HH:mm` → minutes since midnight. */\nexport const minutesOf = (time: string) => {\n  const [h = 0, m = 0] = time.split(':').map(Number);\n  return h * 60 + m;\n};\n/** Minutes since midnight → `HH:mm` (24:00 for the end of the day). */\nexport const timeOf = (minutes: number) =>\n  `${String(Math.floor(minutes / 60)).padStart(2, '0')}:${String(minutes % 60).padStart(2, '0')}`;\n\nconst fmt = (locale: string, options: Intl.DateTimeFormatOptions) =>\n  new Intl.DateTimeFormat(locale, { timeZone: 'UTC', ...options });\n\nexport const monthName = (iso: IsoDate, locale: string, month: 'long' | 'short' = 'long') =>\n  fmt(locale, { month }).format(toDate(iso));\nexport const weekdayName = (iso: IsoDate, locale: string, style: 'long' | 'short' | 'narrow' = 'short') =>\n  fmt(locale, { weekday: style }).format(toDate(iso));\n/** \"Thursday, November 13\" (long date without the year). */\nexport const dayLabel = (iso: IsoDate, locale: string) =>\n  fmt(locale, { weekday: 'long', month: 'long', day: 'numeric' }).format(toDate(iso));\n/** \"Nov 13 – Nov 15\" or a single day. */\nexport function rangeLabel(start: IsoDate, end: IsoDate, locale: string) {\n  const short = fmt(locale, { month: 'short', day: 'numeric' });\n  return start === end ? dayLabel(start, locale) : `${short.format(toDate(start))} – ${short.format(toDate(end))}`;\n}\n"],"mappings":"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"}

package/dist/event-calendar/event-calendar.d.ts

@@ -0,0 +1,125 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '../icon/icon';
+import { type CalendarView, type IsoDate, type Weekday } from './dates';
+import { type LayoutItem } from './layout';
+export type { CalendarView, IsoDate, Weekday };
+export interface CalendarItem<M = unknown> extends LayoutItem {
+    /** Category color 1–12 (`--kf-category-N`). Defaults to the brand color. */
+    color?: number;
+    icon?: IconName;
+    /** `pending` is drawn with a dashed edge, in italics, and named "Pending". */
+    status?: 'confirmed' | 'pending';
+    /** Someone else's event shown only as busy time: neutral color and a lock. */
+    busy?: boolean;
+    location?: string;
+    /** Product data, passed back untouched in callbacks. */
+    meta?: M;
+}
+/** A selection: days (inclusive) and, from the hour grid, times. */
+export interface CalendarRange {
+    start: IsoDate;
+    end: IsoDate;
+    startTime?: string;
+    endTime?: string;
+}
+export interface CalendarQuickAction {
+    key: string;
+    label: string;
+    icon?: IconName;
+    /** Grey second line ("09:00 – 10:00", "Opens the form with this day"). */
+    hint?: string;
+    onSelect: () => void;
+}
+export interface EventCalendarLabels {
+    today: string;
+    previous: string;
+    next: string;
+    views: Record<CalendarView, string>;
+    viewsLabel: string;
+    allDay: string;
+    pending: string;
+    busy: string;
+    /** Visible text of the "+N more" button. */
+    more: (count: number) => string;
+    togglePanel: string;
+    /** Accessible name of the day grid. */
+    grid: string;
+    help: string;
+    helpTouch: string;
+    empty: string;
+    todaySuffix: string;
+}
+export declare const DEFAULT_CALENDAR_LABELS: EventCalendarLabels;
+export declare function itemColor(item: Pick<CalendarItem, 'busy' | 'color'>): string;
+export interface CalendarAgendaProps {
+    days: IsoDate[];
+    today: IsoDate;
+    items: CalendarItem[];
+    locale?: string;
+    labels?: Partial<EventCalendarLabels>;
+    onOpenItem?: (item: CalendarItem, el: HTMLElement) => void;
+    /** Double-tap (or double-click) on a day. */
+    onSelectRange?: (range: CalendarRange, rect: DOMRect) => void;
+    /** Days without items are hidden (except today). */
+    className?: string;
+}
+/**
+ * The calendar as a list of days that have something (today always shows). `EventCalendar` uses it below 768 px; on
+ * its own it is the read-only "Today" card of a dashboard (`days={[today]}`).
+ */
+export declare function CalendarAgenda({ days, today, items, locale, labels: labelsProp, onOpenItem, onSelectRange, className, }: CalendarAgendaProps): import("react").JSX.Element;
+export interface EventCalendarProps {
+    items: CalendarItem[];
+    /** Today in the organization's time zone (from the server). */
+    today: IsoDate;
+    /**
+     * Current time `HH:mm` for the time line. Omit it to use the browser's clock (set after mounting, refreshed every
+     * minute).
+     */
+    now?: string;
+    view?: CalendarView;
+    defaultView?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    /** The day the view is built around. Defaults to `today`. */
+    anchor?: IsoDate;
+    onAnchorChange?: (anchor: IsoDate) => void;
+    /** Working weekdays (others are shaded). Defaults to Monday–Friday. */
+    workDays?: readonly Weekday[];
+    /** 1 = Monday (default) … 7 = Sunday. */
+    weekStartsOn?: Weekday;
+    /** BCP 47 locale for day and month names. Defaults to `en-US`. */
+    locale?: string;
+    labels?: Partial<EventCalendarLabels>;
+    /** A range kept highlighted (e.g. while the product's create drawer is open). */
+    selection?: CalendarRange | null;
+    /** Keeps the current days on screen, dimmed, while the next range loads. */
+    loading?: boolean;
+    /** Called when the user selects days or times (drag, double-click, `Enter` on a day). */
+    onSelectRange?: (range: CalendarRange) => void;
+    /** Actions for a selection, shown as a menu next to it. Return `[]` to show nothing. */
+    quickActions?: (range: CalendarRange) => CalendarQuickAction[];
+    onOpenItem?: (item: CalendarItem) => void;
+    /** Content of the popover opened next to an item (usually `EventDetails`). */
+    renderItemPopover?: (item: CalendarItem, close: () => void) => ReactNode;
+    /** Extra toolbar actions (a "+" button, "Ask AI"). */
+    toolbarEnd?: ReactNode;
+    /** Side panel (mini calendar, upcoming, filters); shown at 1024 px and wider. */
+    aside?: ReactNode;
+    asideOpen?: boolean;
+    defaultAsideOpen?: boolean;
+    onAsideOpenChange?: (open: boolean) => void;
+    /** First hour shown in week and day views. Default 8. */
+    startHour?: number;
+    /** Lanes of bars per day in month view before "+N more". Default 3. */
+    monthLanes?: number;
+    /** Keyboard shortcuts while focus is inside the calendar. Default `true`. */
+    shortcuts?: boolean;
+    showHelp?: boolean;
+    headingLevel?: 2 | 3;
+    className?: string;
+}
+/**
+ * Day, week and month calendar (ADR-0016). Controlled and presentational: the product loads `items` for the visible
+ * range, expands recurring events, and decides what the quick actions and the item popover do.
+ */
+export declare function EventCalendar({ items, today, now: nowProp, view: viewProp, defaultView, onViewChange, anchor: anchorProp, onAnchorChange, workDays, weekStartsOn, locale, labels: labelsProp, selection, loading, onSelectRange, quickActions, onOpenItem, renderItemPopover, toolbarEnd, aside, asideOpen: asideOpenProp, defaultAsideOpen, onAsideOpenChange, startHour, monthLanes, shortcuts, showHelp, headingLevel, className, }: EventCalendarProps): import("react").JSX.Element;