@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t as __exportAll };

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,44 @@
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import * as RadixCollapsible from '@radix-ui/react-collapsible';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+/**
+ * Stacked sections that expand and collapse: FAQs, filter groups, settings. Use `type="single"`
+ * (with `collapsible`) when only one section should be open, `type="multiple"` otherwise.
+ */
+export type AccordionAppearance = 'divided' | 'card';
+export type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root> & {
+    /** `divided` (default): rows split by lines (FAQs, filters). `card`: each section is a card (long edit forms). */
+    appearance?: AccordionAppearance;
+};
+export declare function Accordion({ appearance, className, ...rest }: AccordionProps): import("react").JSX.Element;
+export declare function AccordionItem({ className, ...rest }: ComponentPropsWithoutRef<typeof RadixAccordion.Item>): import("react").JSX.Element;
+export interface AccordionTriggerProps extends ComponentPropsWithoutRef<typeof RadixAccordion.Trigger> {
+    /** Heading level wrapping the trigger, to fit the page outline. */
+    headingLevel?: 2 | 3 | 4;
+    /** `md` (15px, settings and filters) or `lg` (17px, FAQs). Use this instead of a text size in `className`. */
+    size?: 'md' | 'lg';
+    /** A line under the title ("Name, photo and contact details"). */
+    description?: ReactNode;
+    children: ReactNode;
+}
+export declare function AccordionTrigger({ headingLevel, size, description, className, children, ...rest }: AccordionTriggerProps): import("react").JSX.Element;
+/**
+ * With `forceMount`, closed content stays in the DOM (hidden with `display: none`), so it is in the
+ * server HTML for search engines and in-page find. It opens with the animation and closes instantly.
+ */
+export declare function AccordionContent({ size, className, children, ...rest }: ComponentPropsWithoutRef<typeof RadixAccordion.Content> & {
+    size?: 'md' | 'lg';
+}): import("react").JSX.Element;
+/**
+ * Per-section actions at the end of an `AccordionContent` in a card accordion (Undo / Save).
+ * Spans the card's width with a top border; stacks full-width on mobile like dialog footers.
+ */
+export declare function AccordionFooter({ className, children }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A single show/hide region ("Show advanced settings"). */
+export declare const Collapsible: import("react").ForwardRefExoticComponent<RadixCollapsible.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Use `asChild` with a Button; it gets `aria-expanded` automatically. */
+export declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<RadixCollapsible.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function CollapsibleContent({ className, ...rest }: ComponentPropsWithoutRef<typeof RadixCollapsible.Content>): import("react").JSX.Element;

package/dist/accordion/accordion.js

@@ -0,0 +1,84 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createContext as i, useContext as a } from "react";
+import * as o from "@radix-ui/react-accordion";
+import * as s from "@radix-ui/react-collapsible";
+//#region src/accordion/accordion.tsx
+var c = i("divided");
+function l({ appearance: t = "divided", className: r, ...i }) {
+	return /* @__PURE__ */ n(c.Provider, {
+		value: t,
+		children: /* @__PURE__ */ n(o.Root, {
+			className: e("font-sans", t === "card" && "grid gap-3", r),
+			...i
+		})
+	});
+}
+function u({ className: t, ...r }) {
+	let i = a(c) === "card";
+	return /* @__PURE__ */ n(o.Item, {
+		className: e(i ? "overflow-hidden rounded-lg border border-border bg-surface" : "border-b border-border", t),
+		...r
+	});
+}
+var d = {
+	md: "text-[15px]",
+	lg: "text-[17px]"
+}, f = {
+	md: "text-[15px]",
+	lg: "text-base"
+};
+function p({ headingLevel: i = 3, size: s = "md", description: l, className: u, children: f, ...p }) {
+	let m = `h${i}`, h = a(c) === "card";
+	return /* @__PURE__ */ n(o.Header, {
+		asChild: !0,
+		children: /* @__PURE__ */ n(m, {
+			className: "m-0 flex",
+			children: /* @__PURE__ */ r(o.Trigger, {
+				className: e("group flex flex-1 cursor-pointer items-center justify-between gap-4 border-0 bg-transparent py-4 text-left font-sans font-semibold text-fg", d[s], h && "px-5 hover:bg-surface-muted/60", "hover:text-link focus-visible:outline-3 focus-visible:outline-focus", h ? "focus-visible:-outline-offset-3" : "focus-visible:outline-offset-2", u),
+				...p,
+				children: [l ? /* @__PURE__ */ r("span", {
+					className: "grid gap-0.5",
+					children: [f, /* @__PURE__ */ n("span", {
+						className: "text-sm font-normal text-fg-muted",
+						children: l
+					})]
+				}) : f, /* @__PURE__ */ n(t, {
+					name: "chevron-down",
+					size: 18,
+					className: "shrink-0 text-fg-muted transition-transform duration-200 ease-standard group-data-[state=open]:rotate-180 motion-reduce:transition-none"
+				})]
+			})
+		})
+	});
+}
+function m({ size: t = "md", className: r, children: i, ...s }) {
+	let l = a(c) === "card";
+	return /* @__PURE__ */ n(o.Content, {
+		className: e("kf-collapse overflow-hidden", s.forceMount && "data-[state=closed]:hidden"),
+		...s,
+		children: /* @__PURE__ */ n("div", {
+			className: e("pb-5 text-fg-muted", l && "border-t border-border px-5 pt-5", f[t], r),
+			children: i
+		})
+	});
+}
+function h({ className: t, children: r }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("-mx-5 mt-5 -mb-5 flex flex-col-reverse gap-2 border-t border-border px-5 py-3 *:w-full sm:flex-row sm:justify-end sm:*:w-auto", t),
+		children: r
+	});
+}
+var g = s.Root, _ = s.Trigger;
+function v({ className: t, ...r }) {
+	return /* @__PURE__ */ n(s.Content, {
+		className: e("kf-collapse overflow-hidden", t),
+		...r
+	});
+}
+//#endregion
+export { l as Accordion, m as AccordionContent, h as AccordionFooter, u as AccordionItem, p as AccordionTrigger, g as Collapsible, v as CollapsibleContent, _ as CollapsibleTrigger };
+
+//# sourceMappingURL=accordion.js.map

package/dist/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":["RadixAccordion","RadixCollapsible","AppearanceContext","createContext","Accordion","rest","appearance","cx","className","AccordionItem","card","useContext","TRIGGER_SIZE","CONTENT_SIZE","AccordionTrigger","H","headingLevel","size","description","children","Glyph","AccordionContent","AccordionFooter","Collapsible","CollapsibleTrigger","CollapsibleContent"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport * as RadixCollapsible from '@radix-ui/react-collapsible';\nimport { createContext, useContext, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\n\n/**\n * Stacked sections that expand and collapse: FAQs, filter groups, settings. Use `type=\"single\"`\n * (with `collapsible`) when only one section should be open, `type=\"multiple\"` otherwise.\n */\nexport type AccordionAppearance = 'divided' | 'card';\nconst AppearanceContext = createContext<AccordionAppearance>('divided');\n\nexport type AccordionProps = ComponentPropsWithoutRef<typeof RadixAccordion.Root> & {\n  /** `divided` (default): rows split by lines (FAQs, filters). `card`: each section is a card (long edit forms). */\n  appearance?: AccordionAppearance;\n};\n\nexport function Accordion({ appearance = 'divided', className, ...rest }: AccordionProps) {\n  return (\n    <AppearanceContext.Provider value={appearance}>\n      <RadixAccordion.Root className={cx('font-sans', appearance === 'card' && 'grid gap-3', className)} {...rest} />\n    </AppearanceContext.Provider>\n  );\n}\n\nexport function AccordionItem({ className, ...rest }: ComponentPropsWithoutRef<typeof RadixAccordion.Item>) {\n  const card = useContext(AppearanceContext) === 'card';\n  return (\n    <RadixAccordion.Item\n      className={cx(card ? 'overflow-hidden rounded-lg border border-border bg-surface' : 'border-b border-border', className)}\n      {...rest}\n    />\n  );\n}\n\nexport interface AccordionTriggerProps extends ComponentPropsWithoutRef<typeof RadixAccordion.Trigger> {\n  /** Heading level wrapping the trigger, to fit the page outline. */\n  headingLevel?: 2 | 3 | 4;\n  /** `md` (15px, settings and filters) or `lg` (17px, FAQs). Use this instead of a text size in `className`. */\n  size?: 'md' | 'lg';\n  /** A line under the title (\"Name, photo and contact details\"). */\n  description?: ReactNode;\n  children: ReactNode;\n}\n\n/*\n * `cx` only joins classes, it doesn't resolve Tailwind conflicts: a `text-[17px]` in `className` next to\n * the default `text-[15px]` wins or loses by stylesheet order. Sizes are props so there is never a clash.\n */\nconst TRIGGER_SIZE = { md: 'text-[15px]', lg: 'text-[17px]' };\nconst CONTENT_SIZE = { md: 'text-[15px]', lg: 'text-base' };\n\nexport function AccordionTrigger({\n  headingLevel = 3,\n  size = 'md',\n  description,\n  className,\n  children,\n  ...rest\n}: AccordionTriggerProps) {\n  const H = `h${headingLevel}` as const;\n  const card = useContext(AppearanceContext) === 'card';\n  return (\n    <RadixAccordion.Header asChild>\n      <H className=\"m-0 flex\">\n        <RadixAccordion.Trigger\n          className={cx(\n            'group flex flex-1 cursor-pointer items-center justify-between gap-4 border-0 bg-transparent py-4 text-left font-sans font-semibold text-fg',\n            TRIGGER_SIZE[size],\n            card && 'px-5 hover:bg-surface-muted/60',\n            'hover:text-link focus-visible:outline-3 focus-visible:outline-focus',\n            // Inside a card (overflow hidden) the ring is drawn inward, or it would be clipped.\n            card ? 'focus-visible:-outline-offset-3' : 'focus-visible:outline-offset-2',\n            className,\n          )}\n          {...rest}\n        >\n          {description ? (\n            <span className=\"grid gap-0.5\">\n              {children}\n              <span className=\"text-sm font-normal text-fg-muted\">{description}</span>\n            </span>\n          ) : (\n            children\n          )}\n          <Glyph\n            name=\"chevron-down\"\n            size={18}\n            className=\"shrink-0 text-fg-muted transition-transform duration-200 ease-standard group-data-[state=open]:rotate-180 motion-reduce:transition-none\"\n          />\n        </RadixAccordion.Trigger>\n      </H>\n    </RadixAccordion.Header>\n  );\n}\n\n/**\n * With `forceMount`, closed content stays in the DOM (hidden with `display: none`), so it is in the\n * server HTML for search engines and in-page find. It opens with the animation and closes instantly.\n */\nexport function AccordionContent({\n  size = 'md',\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<typeof RadixAccordion.Content> & { size?: 'md' | 'lg' }) {\n  const card = useContext(AppearanceContext) === 'card';\n  return (\n    <RadixAccordion.Content\n      className={cx('kf-collapse overflow-hidden', rest.forceMount && 'data-[state=closed]:hidden')}\n      {...rest}\n    >\n      <div className={cx('pb-5 text-fg-muted', card && 'border-t border-border px-5 pt-5', CONTENT_SIZE[size], className)}>\n        {children}\n      </div>\n    </RadixAccordion.Content>\n  );\n}\n\n/**\n * Per-section actions at the end of an `AccordionContent` in a card accordion (Undo / Save).\n * Spans the card's width with a top border; stacks full-width on mobile like dialog footers.\n */\nexport function AccordionFooter({ className, children }: { className?: string; children: ReactNode }) {\n  return (\n    <div\n      className={cx(\n        '-mx-5 mt-5 -mb-5 flex flex-col-reverse gap-2 border-t border-border px-5 py-3 *:w-full sm:flex-row sm:justify-end sm:*:w-auto',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** A single show/hide region (\"Show advanced settings\"). */\nexport const Collapsible = RadixCollapsible.Root;\n/** Use `asChild` with a Button; it gets `aria-expanded` automatically. */\nexport const CollapsibleTrigger = RadixCollapsible.Trigger;\n\nexport function CollapsibleContent({ className, ...rest }: ComponentPropsWithoutRef<typeof RadixCollapsible.Content>) {\n  return <RadixCollapsible.Content className={cx('kf-collapse overflow-hidden', className)} {...rest} />;\n}\n"],"mappings":";;;;;;;;AAaA,IAAME,IAAoBC,EAAmC,SAAS;AAOtE,SAAgBC,EAAU,EAAE,gBAAa,WAAW,cAAW,GAAGC,KAAwB;CACxF,OACE,kBAACH,EAAkB,UAAnB;EAA4B,OAAOI;EACjC,UAAA,kBAACN,EAAe,MAAhB;GAAqB,WAAWO,EAAG,aAAaD,MAAe,UAAU,cAAcE,CAAS;GAAG,GAAIH;EAAO,CAAA;CACpF,CAAA;AAEhC;AAEA,SAAgBI,EAAc,EAAE,cAAW,GAAGJ,KAA8D;CAC1G,IAAMK,IAAOC,EAAWT,CAAiB,MAAM;CAC/C,OACE,kBAACF,EAAe,MAAhB;EACE,WAAWO,EAAGG,IAAO,+DAA+D,0BAA0BF,CAAS;EACvH,GAAIH;CACL,CAAA;AAEL;AAgBA,IAAMO,IAAe;CAAE,IAAI;CAAe,IAAI;AAAc,GACtDC,IAAe;CAAE,IAAI;CAAe,IAAI;AAAY;AAE1D,SAAgBC,EAAiB,EAC/B,kBAAe,GACf,UAAO,MACP,gBACA,cACA,aACA,GAAGT,KACqB;CACxB,IAAMU,IAAI,IAAIC,KACRN,IAAOC,EAAWT,CAAiB,MAAM;CAC/C,OACE,kBAACF,EAAe,QAAhB;EAAuB,SAAA;EACrB,UAAA,kBAACe,GAAD;GAAG,WAAU;GACX,UAAA,kBAACf,EAAe,SAAhB;IACE,WAAWO,EACT,8IACAK,EAAaK,IACbP,KAAQ,kCACR,uEAEAA,IAAO,oCAAoC,kCAC3CF,CACF;IACA,GAAIH;IAVN,UAAA,CAYGa,IACC,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACGC,GACD,kBAAC,QAAD;MAAM,WAAU;MAAqC,UAAAD;KAAkB,CAAA,CACnE;IAEN,CAAA,IAAAC,GAEF,kBAACC,GAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;IACX,CAAA,CACqB;;EACvB,CAAA;CACkB,CAAA;AAE3B;AAMA,SAAgBC,EAAiB,EAC/B,UAAO,MACP,cACA,aACA,GAAGhB,KACgF;CACnF,IAAMK,IAAOC,EAAWT,CAAiB,MAAM;CAC/C,OACE,kBAACF,EAAe,SAAhB;EACE,WAAWO,EAAG,+BAA+BF,EAAK,cAAc,4BAA4B;EAC5F,GAAIA;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAWE,EAAG,sBAAsBG,KAAQ,oCAAoCG,EAAaI,IAAOT,CAAS;GAC/G;EACE,CAAA;CACiB,CAAA;AAE5B;AAMA,SAAgBc,EAAgB,EAAE,cAAW,eAAyD;CACpG,OACE,kBAAC,OAAD;EACE,WAAWf,EACT,iIACAC,CACF;EAEC;CACE,CAAA;AAET;AAGA,IAAae,IAActB,EAAiB,MAE/BuB,IAAqBvB,EAAiB;AAEnD,SAAgBwB,EAAmB,EAAE,cAAW,GAAGpB,KAAmE;CACpH,OAAO,kBAACJ,EAAiB,SAAlB;EAA0B,WAAWM,EAAG,+BAA+BC,CAAS;EAAG,GAAIH;CAAO,CAAA;AACvG"}

package/dist/alert/alert.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type AlertVariant = 'success' | 'warning' | 'danger' | 'info';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: AlertVariant;
+    /** Optional for `callout`, where one line of text is often enough. */
+    title?: ReactNode;
+    /** `box` (default): a bordered message. `callout`: a lighter note with a left bar, for hints inside pages. */
+    appearance?: 'box' | 'callout';
+    /** Optional action area (e.g. a Button) shown at the end. */
+    action?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Inline feedback message. `danger` is announced immediately (`role="alert"`);
+ * the others politely (`role="status"`).
+ */
+export declare function Alert({ variant, title, action, appearance, className, children, ...rest }: AlertProps): import("react").JSX.Element;

package/dist/alert/alert.js

@@ -0,0 +1,59 @@
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/alert/alert.tsx
+var i = {
+	success: {
+		className: "bg-success-surface border-success-border text-success-fg",
+		icon: "accept",
+		iconClass: "text-success-icon"
+	},
+	warning: {
+		className: "bg-warning-surface border-warning-border text-warning-fg",
+		icon: "warning",
+		iconClass: "text-warning-icon"
+	},
+	danger: {
+		className: "bg-danger-surface border-danger-border text-danger-fg",
+		icon: "error",
+		iconClass: "text-danger-icon"
+	},
+	info: {
+		className: "bg-info-surface border-info-border text-info-fg",
+		icon: "info",
+		iconClass: "text-info-icon"
+	}
+};
+function a({ variant: a = "info", title: o, action: s, appearance: c = "box", className: l, children: u, ...d }) {
+	let f = i[a], p = c === "callout";
+	return /* @__PURE__ */ r("div", {
+		role: a === "danger" ? "alert" : "status",
+		className: e("flex flex-wrap items-start font-sans", p ? "gap-3 rounded-sm border-l-4 px-4 py-3 [&_a]:font-semibold [&_a]:underline" : "gap-4 rounded-md border px-5 py-4", f.className, l),
+		...d,
+		children: [
+			/* @__PURE__ */ n(t, {
+				name: f.icon,
+				size: p ? 20 : 28,
+				className: e("shrink-0", p ? "mt-px" : "mt-0.5", f.iconClass)
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "min-w-[min(100%,12rem)] flex-1",
+				children: [o && /* @__PURE__ */ n("p", {
+					className: e("m-0 font-semibold", p && "text-sm"),
+					children: o
+				}), u && /* @__PURE__ */ n("div", {
+					className: e("text-sm", o ? "mt-0.5" : void 0),
+					children: u
+				})]
+			}),
+			s && /* @__PURE__ */ n("div", {
+				className: "shrink-0 self-center",
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { a as Alert };
+
+//# sourceMappingURL=alert.js.map

package/dist/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":["VARIANTS","Alert","rest","v","variant","callout","appearance","cx","className","Icon","title","children","action"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\n\nexport type AlertVariant = 'success' | 'warning' | 'danger' | 'info';\n\nconst VARIANTS: Record<AlertVariant, { className: string; icon: IconName; iconClass: string }> = {\n  success: { className: 'bg-success-surface border-success-border text-success-fg', icon: 'accept', iconClass: 'text-success-icon' },\n  warning: { className: 'bg-warning-surface border-warning-border text-warning-fg', icon: 'warning', iconClass: 'text-warning-icon' },\n  danger: { className: 'bg-danger-surface border-danger-border text-danger-fg', icon: 'error', iconClass: 'text-danger-icon' },\n  info: { className: 'bg-info-surface border-info-border text-info-fg', icon: 'info', iconClass: 'text-info-icon' },\n};\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: AlertVariant;\n  /** Optional for `callout`, where one line of text is often enough. */\n  title?: ReactNode;\n  /** `box` (default): a bordered message. `callout`: a lighter note with a left bar, for hints inside pages. */\n  appearance?: 'box' | 'callout';\n  /** Optional action area (e.g. a Button) shown at the end. */\n  action?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Inline feedback message. `danger` is announced immediately (`role=\"alert\"`);\n * the others politely (`role=\"status\"`).\n */\nexport function Alert({ variant = 'info', title, action, appearance = 'box', className, children, ...rest }: AlertProps) {\n  const v = VARIANTS[variant];\n  const callout = appearance === 'callout';\n  return (\n    <div\n      role={variant === 'danger' ? 'alert' : 'status'}\n      className={cx(\n        'flex flex-wrap items-start font-sans',\n        callout ? 'gap-3 rounded-sm border-l-4 px-4 py-3 [&_a]:font-semibold [&_a]:underline' : 'gap-4 rounded-md border px-5 py-4',\n        v.className,\n        className,\n      )}\n      {...rest}\n    >\n      <Icon name={v.icon} size={callout ? 20 : 28} className={cx('shrink-0', callout ? 'mt-px' : 'mt-0.5', v.iconClass)} />\n      <div className=\"min-w-[min(100%,12rem)] flex-1\">\n        {title && <p className={cx('m-0 font-semibold', callout && 'text-sm')}>{title}</p>}\n        {children && <div className={cx('text-sm', title ? 'mt-0.5' : undefined)}>{children}</div>}\n      </div>\n      {action && <div className=\"shrink-0 self-center\">{action}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAMA,IAA2F;CAC/F,SAAS;EAAE,WAAW;EAA4D,MAAM;EAAU,WAAW;CAAoB;CACjI,SAAS;EAAE,WAAW;EAA4D,MAAM;EAAW,WAAW;CAAoB;CAClI,QAAQ;EAAE,WAAW;EAAyD,MAAM;EAAS,WAAW;CAAmB;CAC3H,MAAM;EAAE,WAAW;EAAmD,MAAM;EAAQ,WAAW;CAAiB;AAClH;AAiBA,SAAgBC,EAAM,EAAE,aAAU,QAAQ,UAAO,WAAQ,gBAAa,OAAO,cAAW,aAAU,GAAGC,KAAoB;CACvH,IAAMC,IAAIH,EAASI,IACbC,IAAUC,MAAe;CAC/B,OACE,kBAAC,OAAD;EACE,MAAMF,MAAY,WAAW,UAAU;EACvC,WAAWG,EACT,wCACAF,IAAU,8EAA8E,qCACxFF,EAAE,WACFK,CACF;EACA,GAAIN;EARN,UAAA;GAUE,kBAACO,GAAD;IAAM,MAAMN,EAAE;IAAM,MAAME,IAAU,KAAK;IAAI,WAAWE,EAAG,YAAYF,IAAU,UAAU,UAAUF,EAAE,SAAS;GAAI,CAAA;GACpH,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACGO,KAAS,kBAAC,KAAD;KAAG,WAAWH,EAAG,qBAAqBF,KAAW,SAAS;KAAI,UAAAK;IAAS,CAAA,GAChFC,KAAY,kBAAC,OAAD;KAAK,WAAWJ,EAAG,WAAWG,IAAQ,WAAW,KAAA,CAAS;KAAI;IAAc,CAAA,CACtF;;GACJE,KAAU,kBAAC,OAAD;IAAK,WAAU;IAAwB,UAAAA;GAAY,CAAA;EAC3D;;AAET"}

package/dist/app-shell/app-footer.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface KodffeAttributionProps {
+    /** `logo` (recommended in footers): "By" + the Kodffe logo. `text`: "By Kodffe". */
+    variant?: 'logo' | 'text';
+    href?: string;
+    /** The word before the name ("By", "Por"). */
+    label?: string;
+    className?: string;
+}
+/** "By Kodffe" for the footers of Kodffe's products, as text or with the logo; inherits the text color. */
+export declare function KodffeAttribution({ variant, href, label, className, }: KodffeAttributionProps): import("react").JSX.Element;
+export interface AppFooterProps {
+    /** Product name ("Kudibot"). */
+    product: ReactNode;
+    /** Short line after the product ("People and recognition"). */
+    tagline?: ReactNode;
+    /** Small links in the middle (Help, Status, Terms). */
+    links?: {
+        label: string;
+        href: string;
+    }[];
+    attribution?: KodffeAttributionProps['variant'] | false;
+    className?: string;
+}
+/**
+ * The slim footer of admin pages: product · tagline on the left, "By Kodffe" on the right. Pass it to
+ * `AppShell`'s `footer` (which provides the `<footer>` landmark and the centred container).
+ */
+export declare function AppFooter({ product, tagline, links, attribution, className }: AppFooterProps): import("react").JSX.Element;

package/dist/app-shell/app-footer.js

@@ -0,0 +1,39 @@
+import { cx as e } from "../lib/cx.js";
+import { Logo as t } from "../logo/logo.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/app-shell/app-footer.tsx
+function a({ variant: n = "logo", href: a = "https://kodffe.com", label: o = "By", className: s }) {
+	return /* @__PURE__ */ i("a", {
+		href: a,
+		className: e("inline-flex items-center gap-1.5 rounded-xs text-sm text-fg-muted no-underline hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus", s),
+		children: [o, n === "logo" ? /* @__PURE__ */ r(t, { className: "text-[0.95rem] text-fg" }) : /* @__PURE__ */ r("span", {
+			className: "font-semibold text-fg",
+			children: "Kodffe"
+		})]
+	});
+}
+function o({ product: t, tagline: o, links: s = [], attribution: c = "logo", className: l }) {
+	return /* @__PURE__ */ i("div", {
+		className: e("flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2 font-sans text-sm text-fg-muted", l),
+		children: [
+			/* @__PURE__ */ i("span", { children: [/* @__PURE__ */ r("span", {
+				className: "font-semibold text-fg",
+				children: t
+			}), o && /* @__PURE__ */ i(n, { children: [" · ", o] })] }),
+			s.length > 0 && /* @__PURE__ */ r("nav", {
+				"aria-label": "Footer",
+				className: "flex flex-wrap gap-x-4 gap-y-1",
+				children: s.map((e) => /* @__PURE__ */ r("a", {
+					href: e.href,
+					className: "text-fg-muted no-underline hover:text-fg hover:underline",
+					children: e.label
+				}, e.href))
+			}),
+			c && /* @__PURE__ */ r(a, { variant: c })
+		]
+	});
+}
+//#endregion
+export { o as AppFooter, a as KodffeAttribution };
+
+//# sourceMappingURL=app-footer.js.map

package/dist/app-shell/app-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-footer.js","names":["_Fragment","KodffeAttribution","cx","className","label","variant","Logo","AppFooter","product","tagline","Fragment","links","l","attribution"],"sources":["../../src/app-shell/app-footer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { Logo } from '../logo/logo';\n\nexport interface KodffeAttributionProps {\n  /** `logo` (recommended in footers): \"By\" + the Kodffe logo. `text`: \"By Kodffe\". */\n  variant?: 'logo' | 'text';\n  href?: string;\n  /** The word before the name (\"By\", \"Por\"). */\n  label?: string;\n  className?: string;\n}\n\n/** \"By Kodffe\" for the footers of Kodffe's products, as text or with the logo; inherits the text color. */\nexport function KodffeAttribution({\n  variant = 'logo',\n  href = 'https://kodffe.com',\n  label = 'By',\n  className,\n}: KodffeAttributionProps) {\n  return (\n    <a\n      href={href}\n      className={cx(\n        'inline-flex items-center gap-1.5 rounded-xs text-sm text-fg-muted no-underline hover:text-fg focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus',\n        className,\n      )}\n    >\n      {label}\n      {variant === 'logo' ? (\n        <Logo className=\"text-[0.95rem] text-fg\" />\n      ) : (\n        <span className=\"font-semibold text-fg\">Kodffe</span>\n      )}\n    </a>\n  );\n}\n\nexport interface AppFooterProps {\n  /** Product name (\"Kudibot\"). */\n  product: ReactNode;\n  /** Short line after the product (\"People and recognition\"). */\n  tagline?: ReactNode;\n  /** Small links in the middle (Help, Status, Terms). */\n  links?: { label: string; href: string }[];\n  attribution?: KodffeAttributionProps['variant'] | false;\n  className?: string;\n}\n\n/**\n * The slim footer of admin pages: product · tagline on the left, \"By Kodffe\" on the right. Pass it to\n * `AppShell`'s `footer` (which provides the `<footer>` landmark and the centred container).\n */\nexport function AppFooter({ product, tagline, links = [], attribution = 'logo', className }: AppFooterProps) {\n  return (\n    <div\n      className={cx(\n        'flex w-full flex-wrap items-center justify-between gap-x-6 gap-y-2 font-sans text-sm text-fg-muted',\n        className,\n      )}\n    >\n      <span>\n        <span className=\"font-semibold text-fg\">{product}</span>\n        {tagline && <> · {tagline}</>}\n      </span>\n      {links.length > 0 && (\n        <nav aria-label=\"Footer\" className=\"flex flex-wrap gap-x-4 gap-y-1\">\n          {links.map((l) => (\n            <a key={l.href} href={l.href} className=\"text-fg-muted no-underline hover:text-fg hover:underline\">\n              {l.label}\n            </a>\n          ))}\n        </nav>\n      )}\n      {attribution && <KodffeAttribution variant={attribution} />}\n    </div>\n  );\n}\n"],"mappings":";;;;AAcA,SAAgBC,EAAkB,EAChC,aAAU,QACV,UAAO,sBACP,WAAQ,MACR,gBACyB;CACzB,OACE,kBAAC,KAAD;EACQ;EACN,WAAWC,EACT,mLACAC,CACF;EALF,UAAA,CAOGC,GACAC,MAAY,SACX,kBAACC,GAAD,EAAM,WAAU,yBAA0B,CAAA,IAE1C,kBAAC,QAAD;GAAM,WAAU;GAAwB,UAAA;EAAY,CAAA,CAErD;;AAEP;AAiBA,SAAgBC,EAAU,EAAE,YAAS,YAAS,WAAQ,CAAC,GAAG,iBAAc,QAAQ,gBAA6B;CAC3G,OACE,kBAAC,OAAD;EACE,WAAWL,EACT,sGACAC,CACF;EAJF,UAAA;GAME,kBAAC,QAAD,EAAA,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAyB,UAAAK;GAAc,CAAA,GACtDC,KAAW,kBAAAT,GAAA,EAAA,UAAA,CAAE,OAAIS,CAAU,EAAA,CAAA,CACxB,EAAA,CAAA;GACLE,EAAM,SAAS,KACd,kBAAC,OAAD;IAAK,cAAW;IAAS,WAAU;IAChC,UAAAA,EAAM,KAAK,MACV,kBAAC,KAAD;KAAgB,MAAMC,EAAE;KAAM,WAAU;KACrC,UAAAA,EAAE;IACF,GAFKA,EAAE,IAEP,CACJ;GACE,CAAA;GAENC,KAAe,kBAACZ,GAAD,EAAmB,SAASY,EAAc,CAAA;EACvD;;AAET"}

package/dist/app-shell/app-shell-context.d.ts

@@ -0,0 +1,10 @@
+export interface AppShellState {
+    /** Desktop sidebar shows icons only. */
+    collapsed: boolean;
+    /** Rendering inside the mobile drawer. */
+    inDrawer: boolean;
+    /** Closes the mobile drawer (call after navigating). */
+    closeDrawer: () => void;
+}
+export declare const AppShellContext: import("react").Context<AppShellState>;
+export declare const useAppShell: () => AppShellState;

package/dist/app-shell/app-shell-context.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/app-shell/app-shell-context.ts
+var n = e({
+	collapsed: !1,
+	inDrawer: !1,
+	closeDrawer: () => {}
+}), r = () => t(n);
+//#endregion
+export { n as AppShellContext, r as useAppShell };
+
+//# sourceMappingURL=app-shell-context.js.map

package/dist/app-shell/app-shell-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell-context.js","names":["AppShellContext","createContext","useAppShell","useContext"],"sources":["../../src/app-shell/app-shell-context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nexport interface AppShellState {\n  /** Desktop sidebar shows icons only. */\n  collapsed: boolean;\n  /** Rendering inside the mobile drawer. */\n  inDrawer: boolean;\n  /** Closes the mobile drawer (call after navigating). */\n  closeDrawer: () => void;\n}\n\nexport const AppShellContext = createContext<AppShellState>({\n  collapsed: false,\n  inDrawer: false,\n  closeDrawer: () => {},\n});\n\nexport const useAppShell = () => useContext(AppShellContext);\n"],"mappings":";;;AAaA,IAAaA,IAAkBC,EAA6B;CAC1D,WAAW;CACX,UAAU;CACV,mBAAmB,CAAC;AACtB,CAAC,GAEYC,UAAoBC,EAAWH,CAAe"}

package/dist/app-shell/app-shell.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+export interface AppShellProps {
+    /** Brand at the top of the sidebar and in the mobile top bar (e.g. `<Logo />` in a link). */
+    brand: ReactNode;
+    /** Brand for the collapsed 72px rail (e.g. `<Logo variant="mark" />` in a link). Defaults to `brand`. */
+    brandCompact?: ReactNode;
+    /** Navigation (usually `<SideNav />`). Rendered in the sidebar and in the mobile drawer. */
+    nav?: ReactNode;
+    /** Bottom of the sidebar: workspace switcher, user menu, help. Hidden in the collapsed rail. */
+    navFooter?: ReactNode;
+    /** Top-bar content: page title, search, notifications, user menu. */
+    header?: ReactNode;
+    /**
+     * `sidebar` (default): full-height collapsible sidebar beside the top bar. `topbar`: a full-width top bar
+     * (brand, header content), then the sidebar and the content side by side in a centred container, and a slim
+     * `footer` (admin dashboards).
+     */
+    layout?: 'sidebar' | 'topbar';
+    /** `topbar` only: slim footer under the content ("By Kodffe", version, links). */
+    footer?: ReactNode;
+    children: ReactNode;
+    /** Controlled collapsed state of the desktop sidebar. */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    labels?: Partial<typeof LABELS>;
+    className?: string;
+}
+declare const LABELS: {
+    skip: string;
+    openMenu: string;
+    menu: string;
+    collapse: string;
+    expand: string;
+};
+/**
+ * Product layout. `sidebar`: collapsible sidebar + top bar + content. `topbar`: full-width top bar, then
+ * sidebar and content in a centred container, and a slim footer. Below 960px the sidebar becomes a
+ * drawer opened from the top bar's menu button. Includes a skip link to the main content.
+ */
+export declare function AppShell({ brand, brandCompact, nav, navFooter, header, layout, footer, children, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, labels: overrides, className, }: AppShellProps): import("react").JSX.Element;
+export {};

package/dist/app-shell/app-shell.js

@@ -0,0 +1,191 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Drawer as t, DrawerContent as n, DrawerTrigger as r } from "../drawer/drawer.js";
+import { Tooltip as i } from "../tooltip/tooltip.js";
+import { Glyph as a } from "../lib/glyphs.js";
+import { AppShellContext as o } from "./app-shell-context.js";
+import { SkipLink as s } from "../lib/skip-link.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useState as u } from "react";
+//#region src/app-shell/app-shell.tsx
+var d = {
+	skip: "Skip to content",
+	openMenu: "Open menu",
+	menu: "Menu",
+	collapse: "Collapse sidebar",
+	expand: "Expand sidebar"
+};
+function f({ brand: f, brandCompact: p, nav: m, navFooter: h, header: g, layout: _ = "sidebar", footer: v, children: y, collapsed: b, defaultCollapsed: x = !1, onCollapsedChange: S, labels: C, className: w }) {
+	let T = {
+		...d,
+		...C
+	}, [E, D] = u(x), O = b ?? E, [k, A] = u(!1), j = () => {
+		b === void 0 && D(!O), S?.(!O);
+	}, M = () => A(!1), N = "grid size-10 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus", P = /* @__PURE__ */ c(s, { label: T.skip }), F = /* @__PURE__ */ l(t, {
+		open: k,
+		onOpenChange: A,
+		children: [/* @__PURE__ */ c(r, {
+			asChild: !0,
+			children: /* @__PURE__ */ c("button", {
+				type: "button",
+				"aria-label": T.openMenu,
+				className: e(N, "-ml-2 md:hidden"),
+				children: /* @__PURE__ */ c(a, {
+					name: "menu",
+					size: 22
+				})
+			})
+		}), /* @__PURE__ */ c(n, {
+			side: "left",
+			size: "sm",
+			title: T.menu,
+			hideTitle: !0,
+			bodyClassName: "px-3! flex flex-col gap-4",
+			children: /* @__PURE__ */ l(o.Provider, {
+				value: {
+					collapsed: !1,
+					inDrawer: !0,
+					closeDrawer: M
+				},
+				children: [
+					/* @__PURE__ */ c("div", {
+						className: "px-3",
+						children: f
+					}),
+					m,
+					h && /* @__PURE__ */ c("div", {
+						className: "mt-auto border-t border-border pt-3",
+						children: h
+					})
+				]
+			})
+		})]
+	});
+	return _ === "topbar" ? /* @__PURE__ */ l("div", {
+		className: e("flex min-h-dvh flex-col bg-bg font-sans text-fg", w),
+		children: [
+			P,
+			/* @__PURE__ */ c("header", {
+				className: "sticky top-0 z-40 h-appbar shrink-0 border-b border-border bg-surface/90 backdrop-blur-md",
+				children: /* @__PURE__ */ l("div", {
+					className: "mx-auto flex h-full max-w-app items-center gap-3 px-gutter",
+					children: [
+						m ? F : null,
+						/* @__PURE__ */ c("div", {
+							className: "shrink-0",
+							children: f
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "flex min-w-0 flex-1 items-center justify-end gap-2",
+							children: g
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "mx-auto flex w-full max-w-app flex-1 gap-8 px-gutter py-6",
+				children: [m && /* @__PURE__ */ c(o.Provider, {
+					value: {
+						collapsed: !1,
+						inDrawer: !1,
+						closeDrawer: M
+					},
+					children: /* @__PURE__ */ c("aside", {
+						className: "hidden w-sidebar shrink-0 md:block",
+						children: /* @__PURE__ */ l("div", {
+							className: "sticky top-[calc(var(--spacing-appbar)+1.5rem)] grid max-h-[calc(100dvh-var(--spacing-appbar)-3rem)] gap-4 overflow-y-auto",
+							children: [m, h && /* @__PURE__ */ c("div", {
+								className: "border-t border-border pt-3",
+								children: h
+							})]
+						})
+					})
+				}), /* @__PURE__ */ c("main", {
+					id: "kf-main",
+					tabIndex: -1,
+					className: "min-w-0 flex-1 focus:outline-none",
+					children: y
+				})]
+			}),
+			v && /* @__PURE__ */ c("footer", {
+				className: "border-t border-border",
+				children: /* @__PURE__ */ c("div", {
+					className: "mx-auto flex max-w-app flex-wrap items-center justify-between gap-x-6 gap-y-2 px-gutter py-4 text-sm text-fg-muted",
+					children: v
+				})
+			})
+		]
+	}) : /* @__PURE__ */ l("div", {
+		className: e("flex min-h-dvh bg-bg font-sans text-fg", w),
+		children: [
+			P,
+			/* @__PURE__ */ c(o.Provider, {
+				value: {
+					collapsed: O,
+					inDrawer: !1,
+					closeDrawer: M
+				},
+				children: /* @__PURE__ */ l("aside", {
+					className: e("sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border bg-surface transition-[width] duration-200 ease-standard motion-reduce:transition-none md:flex", O ? "w-[4.5rem]" : "w-64"),
+					children: [
+						/* @__PURE__ */ c("div", {
+							className: e("flex h-16 shrink-0 items-center overflow-hidden", O ? "justify-center px-2" : "px-5"),
+							children: O ? p ?? f : f
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-3 py-2",
+							children: m
+						}),
+						/* @__PURE__ */ l("div", {
+							className: e("flex shrink-0 items-center gap-2 border-t border-border p-3", O && "flex-col"),
+							children: [h && !O && /* @__PURE__ */ c("div", {
+								className: "min-w-0 flex-1",
+								children: h
+							}), /* @__PURE__ */ c(i, {
+								content: O ? T.expand : T.collapse,
+								side: "right",
+								children: /* @__PURE__ */ c("button", {
+									type: "button",
+									"aria-label": O ? T.expand : T.collapse,
+									"aria-expanded": !O,
+									onClick: j,
+									className: e(N, "text-fg-muted"),
+									children: /* @__PURE__ */ c(a, {
+										name: "sidebar",
+										size: 20
+									})
+								})
+							})]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ l("header", {
+					className: "sticky top-0 z-40 flex h-16 shrink-0 items-center gap-3 border-b border-border bg-bg/85 px-4 backdrop-blur-md sm:px-6",
+					children: [
+						F,
+						/* @__PURE__ */ c("div", {
+							className: "md:hidden",
+							children: f
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "flex min-w-0 flex-1 items-center justify-end gap-2 md:justify-between",
+							children: g
+						})
+					]
+				}), /* @__PURE__ */ c("main", {
+					id: "kf-main",
+					tabIndex: -1,
+					className: "min-w-0 flex-1 focus:outline-none",
+					children: y
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { f as AppShell };
+
+//# sourceMappingURL=app-shell.js.map

package/dist/app-shell/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","names":["LABELS","AppShell","collapsedProp","overrides","labels","uncontrolled","setUncontrolled","useState","defaultCollapsed","collapsed","drawerOpen","setDrawerOpen","toggle","onCollapsedChange","closeDrawer","iconButton","skipLink","SkipLink","mobileMenu","Drawer","DrawerTrigger","cx","Glyph","DrawerContent","AppShellContext","brand","nav","navFooter","layout","className","header","footer","brandCompact","Tooltip"],"sources":["../../src/app-shell/app-shell.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\nimport { SkipLink } from '../lib/skip-link';\nimport { Glyph } from '../lib/glyphs';\nimport { Drawer, DrawerContent, DrawerTrigger } from '../drawer/drawer';\nimport { Tooltip } from '../tooltip/tooltip';\nimport { AppShellContext } from './app-shell-context';\n\nexport interface AppShellProps {\n  /** Brand at the top of the sidebar and in the mobile top bar (e.g. `<Logo />` in a link). */\n  brand: ReactNode;\n  /** Brand for the collapsed 72px rail (e.g. `<Logo variant=\"mark\" />` in a link). Defaults to `brand`. */\n  brandCompact?: ReactNode;\n  /** Navigation (usually `<SideNav />`). Rendered in the sidebar and in the mobile drawer. */\n  nav?: ReactNode;\n  /** Bottom of the sidebar: workspace switcher, user menu, help. Hidden in the collapsed rail. */\n  navFooter?: ReactNode;\n  /** Top-bar content: page title, search, notifications, user menu. */\n  header?: ReactNode;\n  /**\n   * `sidebar` (default): full-height collapsible sidebar beside the top bar. `topbar`: a full-width top bar\n   * (brand, header content), then the sidebar and the content side by side in a centred container, and a slim\n   * `footer` (admin dashboards).\n   */\n  layout?: 'sidebar' | 'topbar';\n  /** `topbar` only: slim footer under the content (\"By Kodffe\", version, links). */\n  footer?: ReactNode;\n  children: ReactNode;\n  /** Controlled collapsed state of the desktop sidebar. */\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  labels?: Partial<typeof LABELS>;\n  className?: string;\n}\n\nconst LABELS = {\n  skip: 'Skip to content',\n  openMenu: 'Open menu',\n  menu: 'Menu',\n  collapse: 'Collapse sidebar',\n  expand: 'Expand sidebar',\n};\n\n/**\n * Product layout. `sidebar`: collapsible sidebar + top bar + content. `topbar`: full-width top bar, then\n * sidebar and content in a centred container, and a slim footer. Below 960px the sidebar becomes a\n * drawer opened from the top bar's menu button. Includes a skip link to the main content.\n */\nexport function AppShell({\n  brand,\n  brandCompact,\n  nav,\n  navFooter,\n  header,\n  layout = 'sidebar',\n  footer,\n  children,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  labels: overrides,\n  className,\n}: AppShellProps) {\n  const labels = { ...LABELS, ...overrides };\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const collapsed = collapsedProp ?? uncontrolled;\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const toggle = () => {\n    if (collapsedProp === undefined) setUncontrolled(!collapsed);\n    onCollapsedChange?.(!collapsed);\n  };\n  const closeDrawer = () => setDrawerOpen(false);\n  const iconButton =\n    'grid size-10 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-fg hover:bg-surface-muted focus-visible:outline-3 focus-visible:outline-offset-1 focus-visible:outline-focus';\n\n  const skipLink = <SkipLink label={labels.skip} />;\n\n  const mobileMenu = (\n    <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>\n      <DrawerTrigger asChild>\n        <button type=\"button\" aria-label={labels.openMenu} className={cx(iconButton, '-ml-2 md:hidden')}>\n          <Glyph name=\"menu\" size={22} />\n        </button>\n      </DrawerTrigger>\n      <DrawerContent side=\"left\" size=\"sm\" title={labels.menu} hideTitle bodyClassName=\"px-3! flex flex-col gap-4\">\n        <AppShellContext.Provider value={{ collapsed: false, inDrawer: true, closeDrawer }}>\n          <div className=\"px-3\">{brand}</div>\n          {nav}\n          {navFooter && <div className=\"mt-auto border-t border-border pt-3\">{navFooter}</div>}\n        </AppShellContext.Provider>\n      </DrawerContent>\n    </Drawer>\n  );\n\n  if (layout === 'topbar') {\n    return (\n      <div className={cx('flex min-h-dvh flex-col bg-bg font-sans text-fg', className)}>\n        {skipLink}\n        <header className=\"sticky top-0 z-40 h-appbar shrink-0 border-b border-border bg-surface/90 backdrop-blur-md\">\n          <div className=\"mx-auto flex h-full max-w-app items-center gap-3 px-gutter\">\n            {/* Pages without a sidebar (account settings) have no menu to open. */}\n            {nav ? mobileMenu : null}\n            <div className=\"shrink-0\">{brand}</div>\n            <div className=\"flex min-w-0 flex-1 items-center justify-end gap-2\">{header}</div>\n          </div>\n        </header>\n        <div className=\"mx-auto flex w-full max-w-app flex-1 gap-8 px-gutter py-6\">\n          {nav && (\n          <AppShellContext.Provider value={{ collapsed: false, inDrawer: false, closeDrawer }}>\n            <aside className=\"hidden w-sidebar shrink-0 md:block\">\n              {/* Sticks under the top bar; scrolls on its own when taller than the viewport. */}\n              <div className=\"sticky top-[calc(var(--spacing-appbar)+1.5rem)] grid max-h-[calc(100dvh-var(--spacing-appbar)-3rem)] gap-4 overflow-y-auto\">\n                {nav}\n                {navFooter && <div className=\"border-t border-border pt-3\">{navFooter}</div>}\n              </div>\n            </aside>\n          </AppShellContext.Provider>\n          )}\n          <main id=\"kf-main\" tabIndex={-1} className=\"min-w-0 flex-1 focus:outline-none\">\n            {children}\n          </main>\n        </div>\n        {footer && (\n          <footer className=\"border-t border-border\">\n            <div className=\"mx-auto flex max-w-app flex-wrap items-center justify-between gap-x-6 gap-y-2 px-gutter py-4 text-sm text-fg-muted\">\n              {footer}\n            </div>\n          </footer>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx('flex min-h-dvh bg-bg font-sans text-fg', className)}>\n      {skipLink}\n\n      <AppShellContext.Provider value={{ collapsed, inDrawer: false, closeDrawer }}>\n        <aside\n          className={cx(\n            'sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border bg-surface transition-[width] duration-200 ease-standard motion-reduce:transition-none md:flex',\n            collapsed ? 'w-[4.5rem]' : 'w-64',\n          )}\n        >\n          <div\n            className={cx(\n              'flex h-16 shrink-0 items-center overflow-hidden',\n              collapsed ? 'justify-center px-2' : 'px-5',\n            )}\n          >\n            {collapsed ? (brandCompact ?? brand) : brand}\n          </div>\n          <div className=\"min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-3 py-2\">{nav}</div>\n          <div className={cx('flex shrink-0 items-center gap-2 border-t border-border p-3', collapsed && 'flex-col')}>\n            {navFooter && !collapsed && <div className=\"min-w-0 flex-1\">{navFooter}</div>}\n            <Tooltip content={collapsed ? labels.expand : labels.collapse} side=\"right\">\n              <button\n                type=\"button\"\n                aria-label={collapsed ? labels.expand : labels.collapse}\n                aria-expanded={!collapsed}\n                onClick={toggle}\n                className={cx(iconButton, 'text-fg-muted')}\n              >\n                <Glyph name=\"sidebar\" size={20} />\n              </button>\n            </Tooltip>\n          </div>\n        </aside>\n      </AppShellContext.Provider>\n\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <header className=\"sticky top-0 z-40 flex h-16 shrink-0 items-center gap-3 border-b border-border bg-bg/85 px-4 backdrop-blur-md sm:px-6\">\n          {mobileMenu}\n          <div className=\"md:hidden\">{brand}</div>\n          <div className=\"flex min-w-0 flex-1 items-center justify-end gap-2 md:justify-between\">{header}</div>\n        </header>\n        <main id=\"kf-main\" tabIndex={-1} className=\"min-w-0 flex-1 focus:outline-none\">\n          {children}\n        </main>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsCA,IAAMA,IAAS;CACb,MAAM;CACN,UAAU;CACV,MAAM;CACN,UAAU;CACV,QAAQ;AACV;AAOA,SAAgBC,EAAS,EACvB,UACA,iBACA,QACA,cACA,WACA,YAAS,WACT,WACA,aACA,WAAWC,GACX,sBAAmB,IACnB,sBACA,QAAQC,GACR,gBACgB;CAChB,IAAMC,IAAS;EAAE,GAAGJ;EAAQ,GAAGG;CAAU,GACnC,CAACE,GAAcC,KAAmBC,EAASC,CAAgB,GAC3DC,IAAYP,KAAiBG,GAC7B,CAACK,GAAYC,KAAiBJ,EAAS,EAAK,GAC5CK,UAAe;EAEnB,AADIV,MAAkB,KAAA,KAAWI,EAAgB,CAACG,CAAS,GAC3DI,IAAoB,CAACJ,CAAS;CAChC,GACMK,UAAoBH,EAAc,EAAK,GACvCI,IACJ,kNAEIC,IAAW,kBAACC,GAAD,EAAU,OAAOb,EAAO,KAAO,CAAA,GAE1Cc,IACJ,kBAACC,GAAD;EAAQ,MAAMT;EAAY,cAAcC;EAAxC,UAAA,CACE,kBAACS,GAAD;GAAe,SAAA;GACb,UAAA,kBAAC,UAAD;IAAQ,MAAK;IAAS,cAAYhB,EAAO;IAAU,WAAWiB,EAAGN,GAAY,iBAAiB;IAC5F,UAAA,kBAACO,GAAD;KAAO,MAAK;KAAO,MAAM;IAAK,CAAA;GACxB,CAAA;EACK,CAAA,GACf,kBAACC,GAAD;GAAe,MAAK;GAAO,MAAK;GAAK,OAAOnB,EAAO;GAAM,WAAA;GAAU,eAAc;GAC/E,UAAA,kBAACoB,EAAgB,UAAjB;IAA0B,OAAO;KAAE,WAAW;KAAO,UAAU;KAAM;IAAY;IAAjF,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;MAAQ,UAAAC;KAAW,CAAA;KACjCC;KACAC,KAAa,kBAAC,OAAD;MAAK,WAAU;MAAuC,UAAAA;KAAe,CAAA;IAC3D;;EACb,CAAA,CACT;;CA0CV,OAvCIC,MAAW,WAEX,kBAAC,OAAD;EAAK,WAAWP,EAAG,mDAAmDQ,CAAS;EAA/E,UAAA;GACGb;GACD,kBAAC,UAAD;IAAQ,WAAU;IAChB,UAAA,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MAEGU,IAAMR,IAAa;MACpB,kBAAC,OAAD;OAAK,WAAU;OAAY,UAAAO;MAAW,CAAA;MACtC,kBAAC,OAAD;OAAK,WAAU;OAAsD,UAAAK;MAAY,CAAA;KAC9E;;GACC,CAAA;GACR,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACGJ,KACD,kBAACF,EAAgB,UAAjB;KAA0B,OAAO;MAAE,WAAW;MAAO,UAAU;MAAO;KAAY;KAChF,UAAA,kBAAC,SAAD;MAAO,WAAU;MAEf,UAAA,kBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACGE,GACAC,KAAa,kBAAC,OAAD;QAAK,WAAU;QAA+B,UAAAA;OAAe,CAAA,CACxE;;KACA,CAAA;IACiB,CAAA,GAE1B,kBAAC,QAAD;KAAM,IAAG;KAAU,UAAU;KAAI,WAAU;KACxC;IACG,CAAA,CACH;;GACJI,KACC,kBAAC,UAAD;IAAQ,WAAU;IAChB,UAAA,kBAAC,OAAD;KAAK,WAAU;KACZ,UAAAA;IACE,CAAA;GACC,CAAA;EAEP;C,KAKP,kBAAC,OAAD;EAAK,WAAWV,EAAG,0CAA0CQ,CAAS;EAAtE,UAAA;GACGb;GAED,kBAACQ,EAAgB,UAAjB;IAA0B,OAAO;KAAE;KAAW,UAAU;KAAO;IAAY;IACzE,UAAA,kBAAC,SAAD;KACE,WAAWH,EACT,qKACAZ,IAAY,eAAe,MAC7B;KAJF,UAAA;MAME,kBAAC,OAAD;OACE,WAAWY,EACT,mDACAZ,IAAY,wBAAwB,MACtC;OAEC,UAAAA,IAAauB,KAAgBP,IAASA;MACpC,CAAA;MACL,kBAAC,OAAD;OAAK,WAAU;OAA8D,UAAAC;MAAS,CAAA;MACtF,kBAAC,OAAD;OAAK,WAAWL,EAAG,+DAA+DZ,KAAa,UAAU;OAAzG,UAAA,CACGkB,KAAa,CAAClB,KAAa,kBAAC,OAAD;QAAK,WAAU;QAAkB,UAAAkB;OAAe,CAAA,GAC5E,kBAACM,GAAD;QAAS,SAASxB,IAAYL,EAAO,SAASA,EAAO;QAAU,MAAK;QAClE,UAAA,kBAAC,UAAD;SACE,MAAK;SACL,cAAYK,IAAYL,EAAO,SAASA,EAAO;SAC/C,iBAAe,CAACK;SAChB,SAASG;SACT,WAAWS,EAAGN,GAAY,eAAe;SAEzC,UAAA,kBAACO,GAAD;UAAO,MAAK;UAAU,MAAM;SAAK,CAAA;QAC3B,CAAA;OACD,CAAA,CACN;;KACA;;GACiB,CAAA;GAE1B,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,UAAD;KAAQ,WAAU;KAAlB,UAAA;MACGJ;MACD,kBAAC,OAAD;OAAK,WAAU;OAAa,UAAAO;MAAW,CAAA;MACvC,kBAAC,OAAD;OAAK,WAAU;OAAyE,UAAAK;MAAY,CAAA;KAC9F;IACR,CAAA,GAAA,kBAAC,QAAD;KAAM,IAAG;KAAU,UAAU;KAAI,WAAU;KACxC;IACG,CAAA,CACH;;EACF;;AAET"}

package/dist/app-shell/floating-actions.d.ts

@@ -0,0 +1,19 @@
+import { type IconName } from '../icon/icon';
+export interface FloatingAction {
+    label: string;
+    icon: IconName;
+    onClick: () => void;
+}
+/**
+ * The bottom-right floating button (the assistant) with optional secondary round buttons, plus "Back to top" after
+ * scrolling. Respects the safe area on phones.
+ */
+export declare function FloatingActions({ primary, secondary, scrollTop, labels, className, }: {
+    primary: FloatingAction;
+    secondary?: FloatingAction[];
+    scrollTop?: boolean;
+    labels?: {
+        top?: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;