@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/input/field-styles.js

@@ -0,0 +1,14 @@
+import { cx as e } from "../lib/cx.js";
+//#region src/input/field-styles.ts
+var t = {
+	sm: "min-h-9 text-base sm:text-sm",
+	md: "min-h-11 text-base sm:text-[15px]",
+	lg: "min-h-13 text-base sm:text-[17px]"
+};
+function n(n, r, i) {
+	return e("w-full rounded-sm border bg-bg font-sans text-fg transition-[border-color,box-shadow] duration-150", "placeholder:text-fg-muted/80", r ? "border-danger-border" : "border-border hover:border-fg-muted/50", "focus-within:border-primary focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)]", "has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-surface-muted has-[:disabled]:opacity-70", "aria-disabled:cursor-not-allowed aria-disabled:bg-surface-muted aria-disabled:opacity-70", t[n], i);
+}
+//#endregion
+export { t as CONTROL_SIZES, n as controlClasses };
+
+//# sourceMappingURL=field-styles.js.map

package/dist/input/field-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-styles.js","names":["CONTROL_SIZES","controlClasses","cx","invalid","size","extra"],"sources":["../../src/input/field-styles.ts"],"sourcesContent":["import { cx } from '../lib/cx';\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n/** Heights: 36 / 44 / 52px. Text is 16px below `sm` so iOS does not zoom on focus. */\nexport const CONTROL_SIZES: Record<ControlSize, string> = {\n  sm: 'min-h-9 text-base sm:text-sm',\n  md: 'min-h-11 text-base sm:text-[15px]',\n  lg: 'min-h-13 text-base sm:text-[17px]',\n};\n\n/** Shared look for text-like controls (Input wrapper, Textarea, Select trigger, Combobox). */\nexport function controlClasses(size: ControlSize, invalid?: boolean, extra?: string) {\n  return cx(\n    'w-full rounded-sm border bg-bg font-sans text-fg transition-[border-color,box-shadow] duration-150',\n    'placeholder:text-fg-muted/80',\n    invalid ? 'border-danger-border' : 'border-border hover:border-fg-muted/50',\n    'focus-within:border-primary focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)]',\n    'has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-surface-muted has-[:disabled]:opacity-70',\n    'aria-disabled:cursor-not-allowed aria-disabled:bg-surface-muted aria-disabled:opacity-70',\n    CONTROL_SIZES[size],\n    extra,\n  );\n}\n"],"mappings":";;AAKA,IAAaA,IAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAGA,SAAgBC,EAAe,GAAmB,GAAmB,GAAgB;CACnF,OAAOC,EACL,sGACA,gCACAC,IAAU,yBAAyB,0CACnC,sHACA,kGACA,4FACAH,EAAcI,IACdC,CACF;AACF"}

package/dist/input/input.d.ts

@@ -0,0 +1,50 @@
+import { type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from 'react';
+import { type IconName } from '../icon/icon';
+import { type ControlSize } from './field-styles';
+/** Props every field control accepts, merged with the surrounding FormField. */
+export declare function useFieldProps(props: {
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    'aria-describedby'?: string;
+}): {
+    id: string | undefined;
+    disabled: boolean | undefined;
+    required: boolean | undefined;
+    'aria-invalid': true | undefined;
+    'aria-describedby': string | undefined;
+    invalid: boolean;
+};
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    size?: ControlSize;
+    iconStart?: IconName;
+    iconEnd?: IconName;
+    /** Static text before the value ("https://", "$"). */
+    prefix?: ReactNode;
+    /** Static text after the value ("USD", "@acme.com") or a small button. */
+    suffix?: ReactNode;
+    /** Error styling without a FormField. */
+    invalid?: boolean;
+    /** Shows "12/80" when `maxLength` is set. */
+    showCount?: boolean;
+}
+/** Text input with optional icons, affixes and character count. Use inside `FormField`. */
+export declare function Input({ size, iconStart, iconEnd, prefix, suffix, invalid: invalidProp, showCount, className, onChange, ...rest }: InputProps): import("react").JSX.Element;
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+    showCount?: boolean;
+    /** Grow with the content (CSS `field-sizing`), between `rows` and `maxRows`. */
+    autoResize?: boolean;
+    maxRows?: number;
+}
+export declare function Textarea({ invalid: invalidProp, showCount, autoResize, maxRows, rows, className, onChange, style, ...rest }: TextareaProps): import("react").JSX.Element;
+export interface DateFieldProps extends Omit<InputProps, 'type' | 'iconStart' | 'prefix'> {
+    /** `date`, `datetime-local`, `time` or `month`. */
+    type?: 'date' | 'datetime-local' | 'time' | 'month';
+}
+/**
+ * Native date/time input styled like the other fields: the OS picker on phones, the browser
+ * picker on desktop. For rules, ranges and presets use DatePicker / DateRangePicker.
+ */
+export declare function DateField({ type, ...rest }: DateFieldProps): import("react").JSX.Element;

package/dist/input/input.js

@@ -0,0 +1,107 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { useFormField as n } from "../form-field/form-field.js";
+import { controlClasses as r } from "./field-styles.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useState as o } from "react";
+//#region src/input/input.tsx
+function s(e) {
+	let t = n(), r = e.invalid ?? t?.invalid ?? !1;
+	return {
+		id: e.id ?? t?.id,
+		disabled: e.disabled ?? t?.disabled,
+		required: e.required ?? t?.required,
+		"aria-invalid": r || void 0,
+		"aria-describedby": [t?.describedBy, e["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+		invalid: r
+	};
+}
+function c({ size: n = "md", iconStart: c, iconEnd: l, prefix: u, suffix: d, invalid: f, showCount: p, className: m, onChange: h, ...g }) {
+	let { invalid: _, ...v } = s({
+		...g,
+		invalid: f
+	}), [y, b] = o(String(g.value ?? g.defaultValue ?? "").length), x = p && g.maxLength !== void 0, S = "shrink-0 text-fg-muted select-none";
+	return /* @__PURE__ */ a("div", {
+		className: e("relative flex items-center gap-2 px-3", r(n, _), m),
+		children: [
+			c && /* @__PURE__ */ i(t, {
+				name: c,
+				size: 20,
+				className: S
+			}),
+			u && /* @__PURE__ */ i("span", {
+				className: S,
+				children: u
+			}),
+			/* @__PURE__ */ i("input", {
+				...g,
+				...v,
+				onChange: (e) => {
+					b(e.target.value.length), h?.(e);
+				},
+				className: "min-w-0 flex-1 self-stretch border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] text-fg outline-none placeholder:text-fg-muted/80 disabled:cursor-not-allowed"
+			}),
+			d && /* @__PURE__ */ i("span", {
+				className: S,
+				children: d
+			}),
+			l && /* @__PURE__ */ i(t, {
+				name: l,
+				size: 20,
+				className: S
+			}),
+			x && /* @__PURE__ */ a("span", {
+				className: e("shrink-0 text-xs tabular-nums", y >= g.maxLength ? "text-danger-fg" : "text-fg-muted"),
+				"aria-live": "polite",
+				children: [
+					y,
+					"/",
+					g.maxLength
+				]
+			})
+		]
+	});
+}
+function l({ invalid: t, showCount: n, autoResize: c, maxRows: l = 12, rows: u = 3, className: d, onChange: f, style: p, ...m }) {
+	let { invalid: h, ...g } = s({
+		...m,
+		invalid: t
+	}), [_, v] = o(String(m.value ?? m.defaultValue ?? "").length);
+	return /* @__PURE__ */ a("div", {
+		className: "grid gap-1",
+		children: [/* @__PURE__ */ i("textarea", {
+			rows: u,
+			...m,
+			...g,
+			onChange: (e) => {
+				v(e.target.value.length), f?.(e);
+			},
+			style: c ? {
+				minHeight: `${u * 1.5 + 1.25}em`,
+				maxHeight: `${l * 1.5 + 1.25}em`,
+				...p
+			} : p,
+			className: e(r("md", h), "block resize-y px-3 py-2.5 leading-normal outline-none focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)] disabled:cursor-not-allowed", c && "field-sizing-content resize-none", d)
+		}), n && m.maxLength !== void 0 && /* @__PURE__ */ a("span", {
+			className: e("justify-self-end text-xs tabular-nums", _ >= m.maxLength ? "text-danger-fg" : "text-fg-muted"),
+			"aria-live": "polite",
+			children: [
+				_,
+				"/",
+				m.maxLength
+			]
+		})]
+	});
+}
+function u({ type: e = "date", ...t }) {
+	return /* @__PURE__ */ i(c, {
+		type: e,
+		iconStart: e === "time" ? "time" : "c-calendar",
+		...t
+	});
+}
+//#endregion
+export { u as DateField, c as Input, l as Textarea, s as useFieldProps };
+
+//# sourceMappingURL=input.js.map

package/dist/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":["useFieldProps","field","useFormField","invalid","props","Input","invalidProp","rest","length","setLength","useState","count","showCount","affix","cx","controlClasses","size","className","iconStart","Icon","prefix","onChange","suffix","iconEnd","Textarea","autoResize","rows","maxRows","style","DateField","type"],"sources":["../../src/input/input.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\nimport { Icon, type IconName } from '../icon/icon';\nimport { useFormField } from '../form-field/form-field';\nimport { controlClasses, type ControlSize } from './field-styles';\n\n/** Props every field control accepts, merged with the surrounding FormField. */\nexport function useFieldProps(props: {\n  id?: string;\n  disabled?: boolean;\n  required?: boolean;\n  invalid?: boolean;\n  'aria-describedby'?: string;\n}) {\n  const field = useFormField();\n  const invalid = props.invalid ?? field?.invalid ?? false;\n  return {\n    id: props.id ?? field?.id,\n    disabled: props.disabled ?? field?.disabled,\n    required: props.required ?? field?.required,\n    'aria-invalid': invalid || undefined,\n    'aria-describedby': [field?.describedBy, props['aria-describedby']].filter(Boolean).join(' ') || undefined,\n    invalid,\n  };\n}\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {\n  size?: ControlSize;\n  iconStart?: IconName;\n  iconEnd?: IconName;\n  /** Static text before the value (\"https://\", \"$\"). */\n  prefix?: ReactNode;\n  /** Static text after the value (\"USD\", \"@acme.com\") or a small button. */\n  suffix?: ReactNode;\n  /** Error styling without a FormField. */\n  invalid?: boolean;\n  /** Shows \"12/80\" when `maxLength` is set. */\n  showCount?: boolean;\n}\n\n/** Text input with optional icons, affixes and character count. Use inside `FormField`. */\nexport function Input({\n  size = 'md',\n  iconStart,\n  iconEnd,\n  prefix,\n  suffix,\n  invalid: invalidProp,\n  showCount,\n  className,\n  onChange,\n  ...rest\n}: InputProps) {\n  const { invalid, ...field } = useFieldProps({ ...rest, invalid: invalidProp });\n  const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? '').length);\n  const count = showCount && rest.maxLength !== undefined;\n  const affix = 'shrink-0 text-fg-muted select-none';\n  return (\n    <div className={cx('relative flex items-center gap-2 px-3', controlClasses(size, invalid), className)}>\n      {iconStart && <Icon name={iconStart} size={20} className={affix} />}\n      {prefix && <span className={affix}>{prefix}</span>}\n      <input\n        {...rest}\n        {...field}\n        onChange={(e) => {\n          setLength(e.target.value.length);\n          onChange?.(e);\n        }}\n        className=\"min-w-0 flex-1 self-stretch border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] text-fg outline-none placeholder:text-fg-muted/80 disabled:cursor-not-allowed\"\n      />\n      {suffix && <span className={affix}>{suffix}</span>}\n      {iconEnd && <Icon name={iconEnd} size={20} className={affix} />}\n      {count && (\n        <span\n          className={cx(\n            'shrink-0 text-xs tabular-nums',\n            length >= rest.maxLength! ? 'text-danger-fg' : 'text-fg-muted',\n          )}\n          aria-live=\"polite\"\n        >\n          {length}/{rest.maxLength}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  invalid?: boolean;\n  showCount?: boolean;\n  /** Grow with the content (CSS `field-sizing`), between `rows` and `maxRows`. */\n  autoResize?: boolean;\n  maxRows?: number;\n}\n\nexport function Textarea({\n  invalid: invalidProp,\n  showCount,\n  autoResize,\n  maxRows = 12,\n  rows = 3,\n  className,\n  onChange,\n  style,\n  ...rest\n}: TextareaProps) {\n  const { invalid, ...field } = useFieldProps({ ...rest, invalid: invalidProp });\n  const [length, setLength] = useState(String(rest.value ?? rest.defaultValue ?? '').length);\n  return (\n    <div className=\"grid gap-1\">\n      <textarea\n        rows={rows}\n        {...rest}\n        {...field}\n        onChange={(e) => {\n          setLength(e.target.value.length);\n          onChange?.(e);\n        }}\n        style={\n          autoResize ? { minHeight: `${rows * 1.5 + 1.25}em`, maxHeight: `${maxRows * 1.5 + 1.25}em`, ...style } : style\n        }\n        className={cx(\n          controlClasses('md', invalid),\n          'block resize-y px-3 py-2.5 leading-normal outline-none focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)] disabled:cursor-not-allowed',\n          autoResize && 'field-sizing-content resize-none',\n          className,\n        )}\n      />\n      {showCount && rest.maxLength !== undefined && (\n        <span\n          className={cx(\n            'justify-self-end text-xs tabular-nums',\n            length >= rest.maxLength ? 'text-danger-fg' : 'text-fg-muted',\n          )}\n          aria-live=\"polite\"\n        >\n          {length}/{rest.maxLength}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport interface DateFieldProps extends Omit<InputProps, 'type' | 'iconStart' | 'prefix'> {\n  /** `date`, `datetime-local`, `time` or `month`. */\n  type?: 'date' | 'datetime-local' | 'time' | 'month';\n}\n\n/**\n * Native date/time input styled like the other fields: the OS picker on phones, the browser\n * picker on desktop. For rules, ranges and presets use DatePicker / DateRangePicker.\n */\nexport function DateField({ type = 'date', ...rest }: DateFieldProps) {\n  return <Input type={type} iconStart={type === 'time' ? 'time' : 'c-calendar'} {...rest} />;\n}\n"],"mappings":"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"}

package/dist/layout/layout.d.ts

@@ -0,0 +1,41 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;
+interface BoxProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render (e.g. `section`, `ul`, `main`). */
+    as?: ElementType;
+    children?: ReactNode;
+}
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface ContainerProps extends BoxProps {
+    /** sm 640 (reading), md 960 (forms, docs), lg 1200 (site default), xl 1440 (dashboards). */
+    size?: ContainerSize;
+}
+/** Centers content with responsive side padding (16px mobile, 24px from `sm`, 32px from `md`). */
+export declare function Container({ as: Tag, size, className, ...rest }: ContainerProps): import("react").JSX.Element;
+export interface StackProps extends BoxProps {
+    direction?: 'column' | 'row';
+    /** Switch from column to row at a breakpoint (`sm` 640, `md` 960). */
+    rowFrom?: 'sm' | 'md';
+    gap?: Space;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+}
+/** One-dimensional layout with consistent gaps. */
+export declare function Stack({ as: Tag, direction, rowFrom, gap, align, justify, wrap, className, ...rest }: StackProps): import("react").JSX.Element;
+export interface GridProps extends BoxProps {
+    /** Fixed columns from `md` (1 column on mobile, 2 from `sm` when cols ≥ 3). */
+    cols?: 1 | 2 | 3 | 4 | 6 | 12;
+    /** Responsive auto-fit instead: as many columns as fit, each at least this wide (e.g. `16rem`). */
+    minItemWidth?: string;
+    gap?: Space;
+}
+/** Two-dimensional layout. Children never overflow their track (`minmax(0, 1fr)`). */
+export declare function Grid({ as: Tag, cols, minItemWidth, gap, className, style, ...rest }: GridProps): import("react").JSX.Element;
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    /** Text in the middle ("or", a date). */
+    label?: ReactNode;
+}
+export declare function Divider({ orientation, label, className, ...rest }: DividerProps): import("react").JSX.Element;
+export {};

package/dist/layout/layout.js

@@ -0,0 +1,90 @@
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/layout/layout.tsx
+var r = {
+	0: "gap-0",
+	1: "gap-1",
+	2: "gap-2",
+	3: "gap-3",
+	4: "gap-4",
+	5: "gap-5",
+	6: "gap-6",
+	8: "gap-8",
+	10: "gap-10",
+	12: "gap-12",
+	16: "gap-16"
+}, i = {
+	sm: "max-w-[40rem]",
+	md: "max-w-[60rem]",
+	lg: "max-w-[75rem]",
+	xl: "max-w-[90rem]",
+	full: "max-w-none"
+};
+function a({ as: n = "div", size: r = "lg", className: a, ...o }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("mx-auto w-full px-gutter", i[r], a),
+		...o
+	});
+}
+var o = {
+	start: "items-start",
+	center: "items-center",
+	end: "items-end",
+	stretch: "items-stretch",
+	baseline: "items-baseline"
+}, s = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between"
+};
+function c({ as: n = "div", direction: i = "column", rowFrom: a, gap: c = 4, align: l, justify: u, wrap: d, className: f, ...p }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("flex", i === "row" ? "flex-row" : "flex-col", a === "sm" && "sm:flex-row", a === "md" && "md:flex-row", r[c], l && o[l], u && s[u], d && "flex-wrap", f),
+		...p
+	});
+}
+var l = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
+	4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-4",
+	6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-6",
+	12: "grid-cols-4 sm:grid-cols-6 md:grid-cols-12"
+};
+function u({ as: n = "div", cols: i = 3, minItemWidth: a, gap: o = 6, className: s, style: c, ...u }) {
+	let d = a ? { gridTemplateColumns: `repeat(auto-fit, minmax(min(${a}, 100%), 1fr))` } : void 0;
+	return /* @__PURE__ */ t(n, {
+		className: e("grid", !a && l[i], r[o], s),
+		style: {
+			...d,
+			...c
+		},
+		...u
+	});
+}
+function d({ orientation: r = "horizontal", label: i, className: a, ...o }) {
+	return r === "vertical" ? /* @__PURE__ */ t("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		className: e("w-px self-stretch bg-border", a),
+		...o
+	}) : i ? /* @__PURE__ */ n("div", {
+		role: "separator",
+		className: e("flex items-center gap-3 font-sans text-xs font-semibold tracking-wide text-fg-muted uppercase", a),
+		...o,
+		children: [
+			/* @__PURE__ */ t("span", { className: "h-px flex-1 bg-border" }),
+			i,
+			/* @__PURE__ */ t("span", { className: "h-px flex-1 bg-border" })
+		]
+	}) : /* @__PURE__ */ t("div", {
+		role: "separator",
+		className: e("h-px w-full bg-border", a),
+		...o
+	});
+}
+//#endregion
+export { a as Container, d as Divider, u as Grid, c as Stack };
+
+//# sourceMappingURL=layout.js.map

package/dist/layout/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":["GAP","CONTAINER","Container","Tag","rest","cx","size","className","ALIGN","JUSTIFY","Stack","direction","rowFrom","gap","align","justify","wrap","COLS","Grid","autoFit","minItemWidth","cols","style","Divider","orientation","label"],"sources":["../../src/layout/layout.tsx"],"sourcesContent":["import type { CSSProperties, ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../lib/cx';\n\n/* Layout primitives on the 4px grid. Server-safe (no hooks). */\n\ntype Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;\nconst GAP: Record<Space, string> = {\n  0: 'gap-0',\n  1: 'gap-1',\n  2: 'gap-2',\n  3: 'gap-3',\n  4: 'gap-4',\n  5: 'gap-5',\n  6: 'gap-6',\n  8: 'gap-8',\n  10: 'gap-10',\n  12: 'gap-12',\n  16: 'gap-16',\n};\n\ninterface BoxProps extends HTMLAttributes<HTMLElement> {\n  /** Element to render (e.g. `section`, `ul`, `main`). */\n  as?: ElementType;\n  children?: ReactNode;\n}\n\nexport type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';\nconst CONTAINER: Record<ContainerSize, string> = {\n  sm: 'max-w-[40rem]',\n  md: 'max-w-[60rem]',\n  lg: 'max-w-[75rem]',\n  xl: 'max-w-[90rem]',\n  full: 'max-w-none',\n};\n\nexport interface ContainerProps extends BoxProps {\n  /** sm 640 (reading), md 960 (forms, docs), lg 1200 (site default), xl 1440 (dashboards). */\n  size?: ContainerSize;\n}\n\n/** Centers content with responsive side padding (16px mobile, 24px from `sm`, 32px from `md`). */\nexport function Container({ as: Tag = 'div', size = 'lg', className, ...rest }: ContainerProps) {\n  return <Tag className={cx('mx-auto w-full px-gutter', CONTAINER[size], className)} {...rest} />;\n}\n\nexport interface StackProps extends BoxProps {\n  direction?: 'column' | 'row';\n  /** Switch from column to row at a breakpoint (`sm` 640, `md` 960). */\n  rowFrom?: 'sm' | 'md';\n  gap?: Space;\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  justify?: 'start' | 'center' | 'end' | 'between';\n  wrap?: boolean;\n}\n\nconst ALIGN = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n};\nconst JUSTIFY = { start: 'justify-start', center: 'justify-center', end: 'justify-end', between: 'justify-between' };\n\n/** One-dimensional layout with consistent gaps. */\nexport function Stack({\n  as: Tag = 'div',\n  direction = 'column',\n  rowFrom,\n  gap = 4,\n  align,\n  justify,\n  wrap,\n  className,\n  ...rest\n}: StackProps) {\n  return (\n    <Tag\n      className={cx(\n        'flex',\n        direction === 'row' ? 'flex-row' : 'flex-col',\n        rowFrom === 'sm' && 'sm:flex-row',\n        rowFrom === 'md' && 'md:flex-row',\n        GAP[gap],\n        align && ALIGN[align],\n        justify && JUSTIFY[justify],\n        wrap && 'flex-wrap',\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n\nexport interface GridProps extends BoxProps {\n  /** Fixed columns from `md` (1 column on mobile, 2 from `sm` when cols ≥ 3). */\n  cols?: 1 | 2 | 3 | 4 | 6 | 12;\n  /** Responsive auto-fit instead: as many columns as fit, each at least this wide (e.g. `16rem`). */\n  minItemWidth?: string;\n  gap?: Space;\n}\n\nconst COLS = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-1 sm:grid-cols-2',\n  3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',\n  4: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-4',\n  6: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-6',\n  12: 'grid-cols-4 sm:grid-cols-6 md:grid-cols-12',\n};\n\n/** Two-dimensional layout. Children never overflow their track (`minmax(0, 1fr)`). */\nexport function Grid({ as: Tag = 'div', cols = 3, minItemWidth, gap = 6, className, style, ...rest }: GridProps) {\n  const autoFit: CSSProperties | undefined = minItemWidth\n    ? { gridTemplateColumns: `repeat(auto-fit, minmax(min(${minItemWidth}, 100%), 1fr))` }\n    : undefined;\n  return (\n    <Tag\n      className={cx('grid', !minItemWidth && COLS[cols], GAP[gap], className)}\n      style={{ ...autoFit, ...style }}\n      {...rest}\n    />\n  );\n}\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical';\n  /** Text in the middle (\"or\", a date). */\n  label?: ReactNode;\n}\n\nexport function Divider({ orientation = 'horizontal', label, className, ...rest }: DividerProps) {\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={cx('w-px self-stretch bg-border', className)}\n        {...rest}\n      />\n    );\n  }\n  if (label) {\n    return (\n      <div\n        role=\"separator\"\n        className={cx(\n          'flex items-center gap-3 font-sans text-xs font-semibold tracking-wide text-fg-muted uppercase',\n          className,\n        )}\n        {...rest}\n      >\n        <span className=\"h-px flex-1 bg-border\" />\n        {label}\n        <span className=\"h-px flex-1 bg-border\" />\n      </div>\n    );\n  }\n  return <div role=\"separator\" className={cx('h-px w-full bg-border', className)} {...rest} />;\n}\n"],"mappings":";;;AAMA,IAAMA,IAA6B;CACjC,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GASMC,IAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAQA,SAAgBC,EAAU,EAAE,IAAIC,IAAM,OAAO,UAAO,MAAM,cAAW,GAAGC,KAAwB;CAC9F,OAAO,kBAACD,GAAD;EAAK,WAAWE,EAAG,4BAA4BJ,EAAUK,IAAOC,CAAS;EAAG,GAAIH;CAAO,CAAA;AAChG;AAYA,IAAMI,IAAQ;CACZ,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;AACZ,GACMC,IAAU;CAAE,OAAO;CAAiB,QAAQ;CAAkB,KAAK;CAAe,SAAS;AAAkB;AAGnH,SAAgBC,EAAM,EACpB,IAAIP,IAAM,OACV,eAAY,UACZ,YACA,SAAM,GACN,UACA,YACA,SACA,cACA,GAAGC,KACU;CACb,OACE,kBAACD,GAAD;EACE,WAAWE,EACT,QACAM,MAAc,QAAQ,aAAa,YACnCC,MAAY,QAAQ,eACpBA,MAAY,QAAQ,eACpBZ,EAAIa,IACJC,KAASN,EAAMM,IACfC,KAAWN,EAAQM,IACnBC,KAAQ,aACRT,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAUA,IAAMa,IAAO;CACX,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,IAAI;AACN;AAGA,SAAgBC,EAAK,EAAE,IAAIf,IAAM,OAAO,UAAO,GAAG,iBAAc,SAAM,GAAG,cAAW,UAAO,GAAGC,KAAmB;CAC/G,IAAMe,IAAqCC,IACvC,EAAE,qBAAqB,+BAA+BA,EAAa,gBAAgB,IACnF,KAAA;CACJ,OACE,kBAACjB,GAAD;EACE,WAAWE,EAAG,QAAQ,CAACe,KAAgBH,EAAKI,IAAOrB,EAAIa,IAAMN,CAAS;EACtE,OAAO;GAAE,GAAGY;GAAS,GAAGG;EAAM;EAC9B,GAAIlB;CACL,CAAA;AAEL;AAQA,SAAgBmB,EAAQ,EAAE,iBAAc,cAAc,UAAO,cAAW,GAAGnB,KAAsB;CA2B/F,OA1BIoB,MAAgB,aAEhB,kBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,WAAWnB,EAAG,+BAA+BE,CAAS;EACtD,GAAIH;CACL,CAAA,IAGDqB,IAEA,kBAAC,OAAD;EACE,MAAK;EACL,WAAWpB,EACT,iGACAE,CACF;EACA,GAAIH;EANN,UAAA;GAQE,kBAAC,QAAD,EAAM,WAAU,wBAAyB,CAAA;GACxCqB;GACD,kBAAC,QAAD,EAAM,WAAU,wBAAyB,CAAA;EACtC;C,KAGF,kBAAC,OAAD;EAAK,MAAK;EAAY,WAAWpB,EAAG,yBAAyBE,CAAS;EAAG,GAAIH;CAAO,CAAA;AAC7F"}

package/dist/lib/control-styles.d.ts

@@ -0,0 +1,9 @@
+export declare const focusRing = "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus";
+/** Radix Checkbox root. `sm` (18 px, 20 px on touch) for tables; `md` (20 px) for forms. */
+export declare function checkboxBox({ size, tone, }?: {
+    size?: 'sm' | 'md';
+    tone?: 'primary' | 'danger';
+}): string;
+/** Radix Switch root and thumb. `md` (44×24) for forms; `sm` (36×20) for table cells and dense lists. */
+export declare function switchTrack(size?: 'sm' | 'md'): string;
+export declare function switchThumb(size?: 'sm' | 'md'): string;

package/dist/lib/control-styles.js

@@ -0,0 +1,16 @@
+import { cx as e } from "./cx.js";
+//#region src/lib/control-styles.ts
+var t = "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus";
+function n({ size: t = "md", tone: n = "primary" } = {}) {
+	return e("grid shrink-0 cursor-pointer place-items-center border-2 border-fg-muted/60 bg-bg text-on-primary transition-colors", "disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border", t === "sm" ? "size-[18px] rounded-[5px] pointer-coarse:size-5" : "size-5 rounded-[6px]", n === "danger" ? "data-[state=checked]:border-danger-solid data-[state=checked]:bg-danger-solid" : "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary");
+}
+function r(t = "md") {
+	return e("relative inline-flex shrink-0 cursor-pointer items-center rounded-full bg-fg-muted/35 transition-colors duration-150", "data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50", t === "sm" ? "h-5 w-9" : "h-6 w-11");
+}
+function i(t = "md") {
+	return e("block translate-x-0.5 rounded-full bg-white shadow-[0_1px_3px_rgb(0_0_0/0.25)] transition-transform duration-150 motion-reduce:transition-none", t === "sm" ? "size-4 data-[state=checked]:translate-x-[18px]" : "size-5 data-[state=checked]:translate-x-[22px]");
+}
+//#endregion
+export { n as checkboxBox, t as focusRing, i as switchThumb, r as switchTrack };
+
+//# sourceMappingURL=control-styles.js.map

package/dist/lib/control-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-styles.js","names":["focusRing","checkboxBox","cx","size","tone","switchTrack","switchThumb"],"sources":["../../src/lib/control-styles.ts"],"sourcesContent":["import { cx } from './cx';\n\n/*\n * Shared looks for small controls, so Checkbox, the table's row checkbox, PermissionMatrix, Switch and CellSwitch\n * stay identical. Each returns one class string; callers only add layout (margins) or focus handling.\n */\n\nexport const focusRing = 'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus';\n\n/** Radix Checkbox root. `sm` (18 px, 20 px on touch) for tables; `md` (20 px) for forms. */\nexport function checkboxBox({\n  size = 'md',\n  tone = 'primary',\n}: { size?: 'sm' | 'md'; tone?: 'primary' | 'danger' } = {}) {\n  return cx(\n    'grid shrink-0 cursor-pointer place-items-center border-2 border-fg-muted/60 bg-bg text-on-primary transition-colors',\n    'disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-border',\n    size === 'sm' ? 'size-[18px] rounded-[5px] pointer-coarse:size-5' : 'size-5 rounded-[6px]',\n    // One tone per checkbox: two checked colors on one element would conflict.\n    tone === 'danger'\n      ? 'data-[state=checked]:border-danger-solid data-[state=checked]:bg-danger-solid'\n      : 'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',\n  );\n}\n\n/** Radix Switch root and thumb. `md` (44×24) for forms; `sm` (36×20) for table cells and dense lists. */\nexport function switchTrack(size: 'sm' | 'md' = 'md') {\n  return cx(\n    'relative inline-flex shrink-0 cursor-pointer items-center rounded-full bg-fg-muted/35 transition-colors duration-150',\n    'data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50',\n    size === 'sm' ? 'h-5 w-9' : 'h-6 w-11',\n  );\n}\n\nexport function switchThumb(size: 'sm' | 'md' = 'md') {\n  return cx(\n    'block translate-x-0.5 rounded-full bg-white shadow-[0_1px_3px_rgb(0_0_0/0.25)] transition-transform duration-150 motion-reduce:transition-none',\n    size === 'sm' ? 'size-4 data-[state=checked]:translate-x-[18px]' : 'size-5 data-[state=checked]:translate-x-[22px]',\n  );\n}\n"],"mappings":";;AAOA,IAAaA,IAAY;AAGzB,SAAgBC,EAAY,EAC1B,UAAO,MACP,UAAO,cACgD,CAAC,GAAG;CAC3D,OAAOC,EACL,uHACA,qFACAC,MAAS,OAAO,oDAAoD,wBAEpEC,MAAS,WACL,kFACA,qJACN;AACF;AAGA,SAAgBC,EAAY,IAAoB,MAAM;CACpD,OAAOH,EACL,wHACA,mFACAC,MAAS,OAAO,YAAY,UAC9B;AACF;AAEA,SAAgBG,EAAY,IAAoB,MAAM;CACpD,OAAOJ,EACL,kJACAC,MAAS,OAAO,mDAAmD,gDACrE;AACF"}

package/dist/lib/cx.d.ts

@@ -0,0 +1,2 @@
+/** Joins class names, skipping falsy values. */
+export declare function cx(...classes: Array<string | false | null | undefined>): string;

package/dist/lib/cx.js

@@ -0,0 +1,8 @@
+//#region src/lib/cx.ts
+function e(...e) {
+	return e.filter(Boolean).join(" ");
+}
+//#endregion
+export { e as cx };
+
+//# sourceMappingURL=cx.js.map

package/dist/lib/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","names":["cx","classes"],"sources":["../../src/lib/cx.ts"],"sourcesContent":["/** Joins class names, skipping falsy values. */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AACA,SAAgBA,EAAG,GAAGC,GAA2D;CAC/E,OAAOA,EAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACzC"}

package/dist/lib/glyphs.d.ts

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+/**
+ * Small utility glyphs (chevrons, check, close, menu…) that the mascot icon set does not cover.
+ * Internal: 24×24, stroke 2.25, `currentColor`, always decorative.
+ */
+export type GlyphName = 'chevron-down' | 'chevron-up' | 'chevron-right' | 'chevron-left' | 'check' | 'close' | 'menu' | 'dot' | 'more' | 'search' | 'sidebar' | 'arrow-up' | 'arrow-down' | 'sort' | 'minus' | 'plus' | 'columns';
+export interface GlyphProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    name: GlyphName;
+    size?: number;
+}
+export declare function Glyph({ name, size, ...rest }: GlyphProps): import("react").JSX.Element;
+/** Shared focus ring. */
+export declare const focusRing = "focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus";

package/dist/lib/glyphs.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/lib/glyphs.tsx
+var n = {
+	"chevron-down": "M6 9l6 6 6-6",
+	"chevron-up": "M6 15l6-6 6 6",
+	"chevron-right": "M9 6l6 6-6 6",
+	"chevron-left": "M15 6l-6 6 6 6",
+	check: "M5 12.5l4.5 4.5L19 7.5",
+	close: "M6 6l12 12M18 6L6 18",
+	menu: "M4 7h16M4 12h16M4 17h16",
+	dot: "",
+	more: "",
+	search: "M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM15.5 15.5L20 20",
+	sidebar: "M4 5h16v14H4zM9.5 5v14",
+	"arrow-up": "M12 19V5M6 11l6-6 6 6",
+	"arrow-down": "M12 5v14M6 13l6 6 6-6",
+	sort: "M8 9l4-4 4 4M8 15l4 4 4-4",
+	minus: "M6 12h12",
+	plus: "M12 6v12M6 12h12",
+	columns: "M4 5h16v14H4zM10 5v14M15 5v14"
+};
+function r({ name: r, size: i = 16, ...a }) {
+	return /* @__PURE__ */ e("svg", {
+		viewBox: "0 0 24 24",
+		width: i,
+		height: i,
+		"aria-hidden": "true",
+		focusable: "false",
+		fill: "none",
+		...a,
+		children: r === "dot" ? /* @__PURE__ */ e("circle", {
+			cx: "12",
+			cy: "12",
+			r: "4",
+			fill: "currentColor"
+		}) : r === "more" ? /* @__PURE__ */ t("g", {
+			fill: "currentColor",
+			children: [
+				/* @__PURE__ */ e("circle", {
+					cx: "5.5",
+					cy: "12",
+					r: "1.9"
+				}),
+				/* @__PURE__ */ e("circle", {
+					cx: "12",
+					cy: "12",
+					r: "1.9"
+				}),
+				/* @__PURE__ */ e("circle", {
+					cx: "18.5",
+					cy: "12",
+					r: "1.9"
+				})
+			]
+		}) : /* @__PURE__ */ e("path", {
+			d: n[r],
+			stroke: "currentColor",
+			strokeWidth: "2.25",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+//#endregion
+export { r as Glyph };
+
+//# sourceMappingURL=glyphs.js.map

package/dist/lib/glyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.js","names":["PATHS","Glyph","rest","size","name"],"sources":["../../src/lib/glyphs.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\n\n/**\n * Small utility glyphs (chevrons, check, close, menu…) that the mascot icon set does not cover.\n * Internal: 24×24, stroke 2.25, `currentColor`, always decorative.\n */\nexport type GlyphName =\n  | 'chevron-down'\n  | 'chevron-up'\n  | 'chevron-right'\n  | 'chevron-left'\n  | 'check'\n  | 'close'\n  | 'menu'\n  | 'dot'\n  | 'more'\n  | 'search'\n  | 'sidebar'\n  | 'arrow-up'\n  | 'arrow-down'\n  | 'sort'\n  | 'minus'\n  | 'plus'\n  | 'columns';\n\nconst PATHS: Record<GlyphName, string> = {\n  'chevron-down': 'M6 9l6 6 6-6',\n  'chevron-up': 'M6 15l6-6 6 6',\n  'chevron-right': 'M9 6l6 6-6 6',\n  'chevron-left': 'M15 6l-6 6 6 6',\n  check: 'M5 12.5l4.5 4.5L19 7.5',\n  close: 'M6 6l12 12M18 6L6 18',\n  menu: 'M4 7h16M4 12h16M4 17h16',\n  dot: '',\n  more: '',\n  search: 'M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM15.5 15.5L20 20',\n  sidebar: 'M4 5h16v14H4zM9.5 5v14',\n  'arrow-up': 'M12 19V5M6 11l6-6 6 6',\n  'arrow-down': 'M12 5v14M6 13l6 6 6-6',\n  sort: 'M8 9l4-4 4 4M8 15l4 4 4-4',\n  minus: 'M6 12h12',\n  plus: 'M12 6v12M6 12h12',\n  columns: 'M4 5h16v14H4zM10 5v14M15 5v14',\n};\n\nexport interface GlyphProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {\n  name: GlyphName;\n  size?: number;\n}\n\nexport function Glyph({ name, size = 16, ...rest }: GlyphProps) {\n  return (\n    <svg viewBox=\"0 0 24 24\" width={size} height={size} aria-hidden=\"true\" focusable=\"false\" fill=\"none\" {...rest}>\n      {name === 'dot' ? (\n        <circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"currentColor\" />\n      ) : name === 'more' ? (\n        <g fill=\"currentColor\">\n          <circle cx=\"5.5\" cy=\"12\" r=\"1.9\" />\n          <circle cx=\"12\" cy=\"12\" r=\"1.9\" />\n          <circle cx=\"18.5\" cy=\"12\" r=\"1.9\" />\n        </g>\n      ) : (\n        <path d={PATHS[name]} stroke=\"currentColor\" strokeWidth=\"2.25\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      )}\n    </svg>\n  );\n}\n\n/** Shared focus ring. */\nexport const focusRing = 'focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-focus';\n"],"mappings":";;AAyBA,IAAMA,IAAmC;CACvC,gBAAgB;CAChB,cAAc;CACd,iBAAiB;CACjB,gBAAgB;CAChB,OAAO;CACP,OAAO;CACP,MAAM;CACN,KAAK;CACL,MAAM;CACN,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,cAAc;CACd,MAAM;CACN,OAAO;CACP,MAAM;CACN,SAAS;AACX;AAOA,SAAgBC,EAAM,EAAE,SAAM,UAAO,IAAI,GAAGC,KAAoB;CAC9D,OACE,kBAAC,OAAD;EAAK,SAAQ;EAAY,OAAOC;EAAM,QAAQA;EAAM,eAAY;EAAO,WAAU;EAAQ,MAAK;EAAO,GAAID;EACtG,UAAAE,MAAS,QACR,kBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAI,MAAK;EAAgB,CAAA,IACjDA,MAAS,SACX,kBAAC,KAAD;GAAG,MAAK;GAAR,UAAA;IACE,kBAAC,UAAD;KAAQ,IAAG;KAAM,IAAG;KAAK,GAAE;IAAO,CAAA;IAClC,kBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;IAAO,CAAA;IACjC,kBAAC,UAAD;KAAQ,IAAG;KAAO,IAAG;KAAK,GAAE;IAAO,CAAA;GAClC;EAEH,CAAA,IAAA,kBAAC,QAAD;GAAM,GAAGJ,EAAMI;GAAO,QAAO;GAAe,aAAY;GAAO,eAAc;GAAQ,gBAAe;EAAS,CAAA;CAE5G,CAAA;AAET"}

package/dist/lib/segmented-styles.d.ts

@@ -0,0 +1,8 @@
+export declare const SEGMENTED_TRACK: {
+    readonly default: "gap-0.5 rounded-sm border border-border bg-surface p-1";
+    readonly inverse: "gap-0.5 rounded-sm border border-white/25 bg-white/10 p-1";
+};
+export declare const SEGMENTED_ITEM: {
+    readonly default: string;
+    readonly inverse: string;
+};

package/dist/lib/segmented-styles.js

@@ -0,0 +1,12 @@
+//#region src/lib/segmented-styles.ts
+var e = {
+	default: "gap-0.5 rounded-sm border border-border bg-surface p-1",
+	inverse: "gap-0.5 rounded-sm border border-white/25 bg-white/10 p-1"
+}, t = {
+	default: "text-fg-muted hover:text-fg focus-visible:outline-focus data-[state=active]:bg-primary data-[state=active]:text-on-primary data-[state=active]:hover:text-on-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-primary data-[state=checked]:hover:text-on-primary",
+	inverse: "text-white hover:bg-white/15 focus-visible:outline-white data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:hover:text-primary data-[state=checked]:bg-white data-[state=checked]:text-primary data-[state=checked]:hover:text-primary"
+};
+//#endregion
+export { t as SEGMENTED_ITEM, e as SEGMENTED_TRACK };
+
+//# sourceMappingURL=segmented-styles.js.map

package/dist/lib/segmented-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-styles.js","names":["SEGMENTED_TRACK","SEGMENTED_ITEM"],"sources":["../../src/lib/segmented-styles.ts"],"sourcesContent":["/*\n * One look for every segmented control: `Tabs` (segmented, segmented-inverse) and `SegmentedControl`. Item colors\n * cover both Radix states (`active` for tabs, `checked` for radio items), so the two components stay identical.\n */\n\nexport const SEGMENTED_TRACK = {\n  default: 'gap-0.5 rounded-sm border border-border bg-surface p-1',\n  inverse: 'gap-0.5 rounded-sm border border-white/25 bg-white/10 p-1',\n} as const;\n\nexport const SEGMENTED_ITEM = {\n  default:\n    'text-fg-muted hover:text-fg focus-visible:outline-focus ' +\n    'data-[state=active]:bg-primary data-[state=active]:text-on-primary data-[state=active]:hover:text-on-primary ' +\n    'data-[state=checked]:bg-primary data-[state=checked]:text-on-primary data-[state=checked]:hover:text-on-primary',\n  inverse:\n    'text-white hover:bg-white/15 focus-visible:outline-white ' +\n    'data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:hover:text-primary ' +\n    'data-[state=checked]:bg-white data-[state=checked]:text-primary data-[state=checked]:hover:text-primary',\n} as const;\n"],"mappings":";AAKA,IAAaA,IAAkB;CAC7B,SAAS;CACT,SAAS;AACX,GAEaC,IAAiB;CAC5B,SACE;CAGF,SACE;AAGJ"}

package/dist/lib/select-on-arrow.d.ts

@@ -0,0 +1,7 @@
+import type { KeyboardEvent } from 'react';
+/**
+ * Radio groups (ARIA pattern): arrow keys move focus *and* select. Radix RadioGroup moves focus but, in our setup,
+ * does not always check the newly focused item, so the group's `onKeyDown` clicks it after the focus moves (Radix
+ * moves focus in a `setTimeout`; ours is queued after it).
+ */
+export declare function selectOnArrow(e: KeyboardEvent<HTMLElement>): void;

package/dist/lib/select-on-arrow.js

@@ -0,0 +1,21 @@
+//#region src/lib/select-on-arrow.ts
+var e = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End"
+]);
+function t(t) {
+	if (!e.has(t.key)) return;
+	let n = t.currentTarget;
+	setTimeout(() => {
+		let e = document.activeElement;
+		e && n.contains(e) && e.getAttribute("role") === "radio" && e.getAttribute("aria-checked") !== "true" && e.click();
+	});
+}
+//#endregion
+export { t as selectOnArrow };
+
+//# sourceMappingURL=select-on-arrow.js.map

package/dist/lib/select-on-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-on-arrow.js","names":["ARROWS","selectOnArrow","e","group","el"],"sources":["../../src/lib/select-on-arrow.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\n\nconst ARROWS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);\n\n/**\n * Radio groups (ARIA pattern): arrow keys move focus *and* select. Radix RadioGroup moves focus but, in our setup,\n * does not always check the newly focused item, so the group's `onKeyDown` clicks it after the focus moves (Radix\n * moves focus in a `setTimeout`; ours is queued after it).\n */\nexport function selectOnArrow(e: KeyboardEvent<HTMLElement>) {\n  if (!ARROWS.has(e.key)) return;\n  const group = e.currentTarget;\n  setTimeout(() => {\n    const el = document.activeElement as HTMLElement | null;\n    if (el && group.contains(el) && el.getAttribute('role') === 'radio' && el.getAttribute('aria-checked') !== 'true') {\n      el.click();\n    }\n  });\n}\n"],"mappings":";AAEA,IAAMA,oBAAS,IAAI,IAAI;CAAC;CAAW;CAAa;CAAa;CAAc;CAAQ;AAAK,CAAC;AAOzF,SAAgBC,EAAc,GAA+B;CAC3D,IAAI,CAACD,EAAO,IAAIE,EAAE,GAAG,GAAG;CACxB,IAAMC,IAAQD,EAAE;CAChB,iBAAiB;EACf,IAAME,IAAK,SAAS;EACpB,AAAIA,KAAMD,EAAM,SAASC,CAAE,KAAKA,EAAG,aAAa,MAAM,MAAM,WAAWA,EAAG,aAAa,cAAc,MAAM,UACzGA,EAAG,MAAM;CAEb,CAAC;AACH"}

package/dist/lib/skip-link.d.ts

@@ -0,0 +1,5 @@
+/** "Skip to content": the first focusable element, visible only on keyboard focus. Targets `<main id="kf-main">`. */
+export declare function SkipLink({ label, target }: {
+    label?: string;
+    target?: string;
+}): import("react").JSX.Element;

package/dist/lib/skip-link.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/lib/skip-link.tsx
+function t({ label: t = "Skip to content", target: n = "kf-main" }) {
+	return /* @__PURE__ */ e("a", {
+		href: `#${n}`,
+		className: "fixed top-2 left-2 z-[80] -translate-y-20 rounded-full bg-primary px-4 py-2 font-sans text-sm font-semibold text-on-primary focus:translate-y-0 focus-visible:outline-3 focus-visible:outline-focus",
+		children: t
+	});
+}
+//#endregion
+export { t as SkipLink };
+
+//# sourceMappingURL=skip-link.js.map

package/dist/lib/skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-link.js","names":["SkipLink","target","label"],"sources":["../../src/lib/skip-link.tsx"],"sourcesContent":["/** \"Skip to content\": the first focusable element, visible only on keyboard focus. Targets `<main id=\"kf-main\">`. */\nexport function SkipLink({ label = 'Skip to content', target = 'kf-main' }: { label?: string; target?: string }) {\n  return (\n    <a\n      href={`#${target}`}\n      className=\"fixed top-2 left-2 z-[80] -translate-y-20 rounded-full bg-primary px-4 py-2 font-sans text-sm font-semibold text-on-primary focus:translate-y-0 focus-visible:outline-3 focus-visible:outline-focus\"\n    >\n      {label}\n    </a>\n  );\n}\n"],"mappings":";;AACA,SAAgBA,EAAS,EAAE,WAAQ,mBAAmB,YAAS,aAAkD;CAC/G,OACE,kBAAC,KAAD;EACE,MAAM,IAAIC;EACV,WAAU;EAET,UAAAC;CACA,CAAA;AAEP"}

package/dist/lib/use-media-query.d.ts

@@ -0,0 +1,4 @@
+/** Matches the `sm` breakpoint (640px): below it, overlays switch to their mobile pattern. */
+export declare const DESKTOP_QUERY = "(min-width: 40rem)";
+/** `true` when the query matches. Returns `initial` on the server and on the first client render. */
+export declare function useMediaQuery(query: string, initial?: boolean): boolean;

package/dist/lib/use-media-query.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect as e, useState as t } from "react";
+//#region src/lib/use-media-query.ts
+var n = "(min-width: 40rem)";
+function r(n, r = !0) {
+	let [i, a] = t(r);
+	return e(() => {
+		let e = window.matchMedia(n), t = () => a(e.matches);
+		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, [n]), i;
+}
+//#endregion
+export { n as DESKTOP_QUERY, r as useMediaQuery };
+
+//# sourceMappingURL=use-media-query.js.map

package/dist/lib/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","names":["DESKTOP_QUERY","useMediaQuery","matches","setMatches","useState","initial","useEffect","mq","query","update"],"sources":["../../src/lib/use-media-query.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/** Matches the `sm` breakpoint (640px): below it, overlays switch to their mobile pattern. */\nexport const DESKTOP_QUERY = '(min-width: 40rem)';\n\n/** `true` when the query matches. Returns `initial` on the server and on the first client render. */\nexport function useMediaQuery(query: string, initial = true) {\n  const [matches, setMatches] = useState(initial);\n  useEffect(() => {\n    const mq = window.matchMedia(query);\n    const update = () => setMatches(mq.matches);\n    update();\n    mq.addEventListener('change', update);\n    return () => mq.removeEventListener('change', update);\n  }, [query]);\n  return matches;\n}\n"],"mappings":";;;AAKA,IAAaA,IAAgB;AAG7B,SAAgBC,EAAc,GAAe,IAAU,IAAM;CAC3D,IAAM,CAACC,GAASC,KAAcC,EAASC,CAAO;CAQ9C,OAPAC,QAAgB;EACd,IAAMC,IAAK,OAAO,WAAWC,CAAK,GAC5BC,UAAeN,EAAWI,EAAG,OAAO;EAG1C,OAFAE,EAAO,GACPF,EAAG,iBAAiB,UAAUE,CAAM,SACvBF,EAAG,oBAAoB,UAAUE,CAAM;CACtD,GAAG,CAACD,CAAK,CAAC,GACHN;AACT"}