@duestel/ui 0.1.0

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,36 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress';
+import { ComponentProps } from 'react';
+/**
+ * Progress — Material 3 styled wrapper over Base UI's headless Progress.
+ * Behaviour/accessibility (role="progressbar", aria-valuenow/-min/-max,
+ * data-progressing/-complete/-indeterminate states, formatted value text):
+ * Base UI (https://base-ui.com/react/components/progress).
+ * Visuals: M3 linear progress-indicator anatomy — 4px rounded track in
+ * surface-container-high with a primary active indicator, label-large label
+ * and label-medium value text. The indeterminate state sweeps the indicator
+ * across the track using the ported keyframes.
+ * Design ref: port/core/ui/components/progress-bar + determinate/indeterminate
+ * keyframes in port/tailwind.config.ts (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Progress.Root value={65}>     // value={null} → indeterminate
+ *     <Progress.Label>Downloading…</Progress.Label>
+ *     <Progress.Value />
+ *     <Progress.Track>
+ *       <Progress.Indicator />
+ *     </Progress.Track>
+ *   </Progress.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseProgress.Root>): import("react").JSX.Element;
+declare function Label({ className, ...props }: ComponentProps<typeof BaseProgress.Label>): import("react").JSX.Element;
+declare function Value({ className, ...props }: ComponentProps<typeof BaseProgress.Value>): import("react").JSX.Element;
+declare function Track({ className, ...props }: ComponentProps<typeof BaseProgress.Track>): import("react").JSX.Element;
+declare function Indicator({ className, ...props }: ComponentProps<typeof BaseProgress.Indicator>): import("react").JSX.Element;
+export declare const Progress: {
+    Root: typeof Root;
+    Label: typeof Label;
+    Value: typeof Value;
+    Track: typeof Track;
+    Indicator: typeof Indicator;
+};
+export { Root, Label, Value, Track, Indicator };

package/dist/components/progress/Progress.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Progress as n } from "@base-ui/react/progress";
+//#region src/components/progress/Progress.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("flex w-full flex-col gap-2 text-on-surface", r),
+		...i
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Label, {
+		className: e("text-label-large text-on-surface", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Value, {
+		className: e("text-label-medium text-on-surface-variant tabular-nums", r),
+		...i
+	});
+}
+function o({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Track, {
+		className: e("relative h-1 w-full overflow-hidden rounded-full bg-surface-container-high", r),
+		...i
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Indicator, {
+		className: e("absolute top-0 left-0 h-full rounded-full bg-primary transition-[width] duration-500 ease-out", "data-[indeterminate]:w-full data-[indeterminate]:animate-[progress-indeterminate_2s_cubic-bezier(0.7,0.1,0.5,1)_infinite]", r),
+		...i
+	});
+}
+var c = {
+	Root: r,
+	Label: i,
+	Value: a,
+	Track: o,
+	Indicator: s
+};
+//#endregion
+export { s as Indicator, i as Label, c as Progress, r as Root, o as Track, a as Value };
+
+//# sourceMappingURL=Progress.js.map

package/dist/components/progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":[],"sources":["../../../src/components/progress/Progress.tsx"],"sourcesContent":["import { Progress as BaseProgress } from '@base-ui/react/progress'\nimport { cn } from '#/lib/cn'\n// Keyframes (progress-indeterminate) live in the shipped token layer (styles.css\n// / theme.css), consistent with how all other Tailwind styles are delivered.\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Progress — Material 3 styled wrapper over Base UI's headless Progress.\n * Behaviour/accessibility (role=\"progressbar\", aria-valuenow/-min/-max,\n * data-progressing/-complete/-indeterminate states, formatted value text):\n * Base UI (https://base-ui.com/react/components/progress).\n * Visuals: M3 linear progress-indicator anatomy — 4px rounded track in\n * surface-container-high with a primary active indicator, label-large label\n * and label-medium value text. The indeterminate state sweeps the indicator\n * across the track using the ported keyframes.\n * Design ref: port/core/ui/components/progress-bar + determinate/indeterminate\n * keyframes in port/tailwind.config.ts (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Progress.Root value={65}>     // value={null} → indeterminate\n *     <Progress.Label>Downloading…</Progress.Label>\n *     <Progress.Value />\n *     <Progress.Track>\n *       <Progress.Indicator />\n *     </Progress.Track>\n *   </Progress.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseProgress.Root>) {\n  return (\n    <BaseProgress.Root\n      className={cn('flex w-full flex-col gap-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Label({ className, ...props }: ComponentProps<typeof BaseProgress.Label>) {\n  return (\n    <BaseProgress.Label\n      className={cn('text-label-large text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Value({ className, ...props }: ComponentProps<typeof BaseProgress.Value>) {\n  return (\n    <BaseProgress.Value\n      className={cn('text-label-medium text-on-surface-variant tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Track({ className, ...props }: ComponentProps<typeof BaseProgress.Track>) {\n  return (\n    <BaseProgress.Track\n      className={cn(\n        'relative h-1 w-full overflow-hidden rounded-full bg-surface-container-high',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Indicator({ className, ...props }: ComponentProps<typeof BaseProgress.Indicator>) {\n  return (\n    <BaseProgress.Indicator\n      className={cn(\n        // Determinate: Base UI sets width/inset inline; animate width changes.\n        'absolute top-0 left-0 h-full rounded-full bg-primary transition-[width] duration-500 ease-out',\n        // Indeterminate (value=null): full-width bar sweeping across the track.\n        'data-[indeterminate]:w-full data-[indeterminate]:animate-[progress-indeterminate_2s_cubic-bezier(0.7,0.1,0.5,1)_infinite]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Progress = { Root, Label, Value, Track, Indicator }\nexport { Root, Label, Value, Track, Indicator }\n"],"mappings":";;;;AA6BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAmD;CAC/E,OACE,kBAAC,EAAa,MAAd;EACE,WAAW,EAAG,8CAA8C,CAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAoD;CACjF,OACE,kBAAC,EAAa,OAAd;EACE,WAAW,EAAG,oCAAoC,CAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAoD;CACjF,OACE,kBAAC,EAAa,OAAd;EACE,WAAW,EAAG,0DAA0D,CAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAoD;CACjF,OACE,kBAAC,EAAa,OAAd;EACE,WAAW,EACT,8EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAwD;CACzF,OACE,kBAAC,EAAa,WAAd;EACE,WAAW,EAET,iGAEA,6HACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAW;CAAE;CAAM;CAAO;CAAO;CAAO;AAAU"}

package/dist/components/progress/index.d.ts

@@ -0,0 +1 @@
+export { Progress, Root, Label, Value, Track, Indicator } from './Progress';

package/dist/components/progress/index.js

@@ -0,0 +1,2 @@
+import { Indicator as e, Label as t, Progress as n, Root as r, Track as i, Value as a } from "./Progress.js";
+export { e as Indicator, t as Label, n as Progress, r as Root, i as Track, a as Value };

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,39 @@
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { ComponentProps } from 'react';
+/**
+ * Radio — Material 3 styled wrapper over Base UI's headless Radio +
+ * Radio Group.
+ * Behaviour/accessibility (hidden input, role="radio"/"radiogroup",
+ * roving-tabindex arrow-key selection, form integration): Base UI
+ * (https://base-ui.com/react/components/radio and
+ * https://base-ui.com/react/components/radio-group).
+ * Visuals: M3 radio button anatomy — 20px circle with a 2px outline ring
+ * (on-surface-variant unselected, primary selected), 10px primary inner dot,
+ * 40px state layer, body-medium label.
+ * Design ref: port/core/ui/elements/common/Radio.tsx +
+ * port/pages/examples/selection (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Radio.Group defaultValue="tokyo" aria-label="City">
+ *     <Radio.Label>
+ *       <Radio.Root value="tokyo">
+ *         <Radio.Indicator />
+ *       </Radio.Root>
+ *       Tokyo
+ *     </Radio.Label>
+ *   </Radio.Group>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseRadio.Root>): import("react").JSX.Element;
+declare function Indicator({ className, ...props }: ComponentProps<typeof BaseRadio.Indicator>): import("react").JSX.Element;
+/** Shared single-selection state for a series of radio buttons. */
+declare function Group({ className, ...props }: ComponentProps<typeof BaseRadioGroup>): import("react").JSX.Element;
+/** Convenience `<label>` row pairing a radio circle with its M3 body-medium text. */
+declare function Label({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
+export declare const Radio: {
+    Root: typeof Root;
+    Indicator: typeof Indicator;
+    Group: typeof Group;
+    Label: typeof Label;
+};
+export { Root, Indicator, Group, Label };

package/dist/components/radio/Radio.js

@@ -0,0 +1,39 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Radio as n } from "@base-ui/react/radio";
+import { RadioGroup as r } from "@base-ui/react/radio-group";
+//#region src/components/radio/Radio.tsx
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("group relative flex size-5 shrink-0 cursor-pointer items-center justify-center", "rounded-full border-2 border-on-surface-variant transition-colors duration-150", "data-[checked]:border-primary", "before:absolute before:-inset-2.5 before:rounded-full before:transition-colors", "hover:before:bg-on-surface/[0.08] data-[checked]:hover:before:bg-primary/[0.08]", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]", "data-[readonly]:cursor-default", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Indicator, {
+		className: e("size-2.5 rounded-full bg-primary", "transition-all duration-150 ease-out", "data-[starting-style]:scale-0 data-[starting-style]:opacity-0", "data-[ending-style]:scale-0 data-[ending-style]:opacity-0", r),
+		...i
+	});
+}
+function o({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r, {
+		className: e("flex flex-col items-start gap-3", n),
+		...i
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("label", {
+		className: e("flex cursor-pointer items-center gap-3 text-body-medium text-on-surface", "has-data-[disabled]:cursor-not-allowed", n),
+		...r
+	});
+}
+var c = {
+	Root: i,
+	Indicator: a,
+	Group: o,
+	Label: s
+};
+//#endregion
+export { o as Group, a as Indicator, s as Label, c as Radio, i as Root };
+
+//# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { Radio as BaseRadio } from '@base-ui/react/radio'\nimport { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Radio — Material 3 styled wrapper over Base UI's headless Radio +\n * Radio Group.\n * Behaviour/accessibility (hidden input, role=\"radio\"/\"radiogroup\",\n * roving-tabindex arrow-key selection, form integration): Base UI\n * (https://base-ui.com/react/components/radio and\n * https://base-ui.com/react/components/radio-group).\n * Visuals: M3 radio button anatomy — 20px circle with a 2px outline ring\n * (on-surface-variant unselected, primary selected), 10px primary inner dot,\n * 40px state layer, body-medium label.\n * Design ref: port/core/ui/elements/common/Radio.tsx +\n * port/pages/examples/selection (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Radio.Group defaultValue=\"tokyo\" aria-label=\"City\">\n *     <Radio.Label>\n *       <Radio.Root value=\"tokyo\">\n *         <Radio.Indicator />\n *       </Radio.Root>\n *       Tokyo\n *     </Radio.Label>\n *   </Radio.Group>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseRadio.Root>) {\n  return (\n    <BaseRadio.Root\n      className={cn(\n        'group relative flex size-5 shrink-0 cursor-pointer items-center justify-center',\n        'rounded-full border-2 border-on-surface-variant transition-colors duration-150',\n        'data-[checked]:border-primary',\n        // 40px M3 state layer (radial hover ring around the 20px circle).\n        'before:absolute before:-inset-2.5 before:rounded-full before:transition-colors',\n        'hover:before:bg-on-surface/[0.08] data-[checked]:hover:before:bg-primary/[0.08]',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]',\n        'data-[readonly]:cursor-default',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Indicator({ className, ...props }: ComponentProps<typeof BaseRadio.Indicator>) {\n  return (\n    <BaseRadio.Indicator\n      className={cn(\n        'size-2.5 rounded-full bg-primary',\n        'transition-all duration-150 ease-out',\n        'data-[starting-style]:scale-0 data-[starting-style]:opacity-0',\n        'data-[ending-style]:scale-0 data-[ending-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Shared single-selection state for a series of radio buttons. */\nfunction Group({ className, ...props }: ComponentProps<typeof BaseRadioGroup>) {\n  return (\n    <BaseRadioGroup className={cn('flex flex-col items-start gap-3', className)} {...props} />\n  )\n}\n\n/** Convenience `<label>` row pairing a radio circle with its M3 body-medium text. */\nfunction Label({ className, ...props }: ComponentProps<'label'>) {\n  return (\n    <label\n      className={cn(\n        'flex cursor-pointer items-center gap-3 text-body-medium text-on-surface',\n        'has-data-[disabled]:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Radio = { Root, Indicator, Group, Label }\nexport { Root, Indicator, Group, Label }\n"],"mappings":";;;;;AA8BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAgD;CAC5E,OACE,kBAAC,EAAU,MAAX;EACE,WAAW,EACT,kFACA,kFACA,iCAEA,kFACA,mFACA,wFACA,qEACA,kCACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAqD;CACtF,OACE,kBAAC,EAAU,WAAX;EACE,WAAW,EACT,oCACA,wCACA,iEACA,6DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgD;CAC7E,OACE,kBAAC,GAAD;EAAgB,WAAW,EAAG,mCAAmC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAE7F;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkC;CAC/D,OACE,kBAAC,SAAD;EACE,WAAW,EACT,2EACA,0CACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAQ;CAAE;CAAM;CAAW;CAAO;AAAM"}

package/dist/components/radio/index.d.ts

@@ -0,0 +1 @@
+export { Radio, Root, Indicator, Group, Label } from './Radio';

package/dist/components/radio/index.js

@@ -0,0 +1,2 @@
+import { Group as e, Indicator as t, Label as n, Radio as r, Root as i } from "./Radio.js";
+export { e as Group, t as Indicator, n as Label, r as Radio, i as Root };

package/dist/components/resizable/Resizable.d.ts

@@ -0,0 +1,35 @@
+import { Group as BaseGroup, Panel as BasePanel, Separator as BaseSeparator } from 'react-resizable-panels';
+import { ComponentProps } from 'react';
+/**
+ * Resizable — Material 3 styled wrapper over react-resizable-panels v4
+ * (headless Group / Panel / Separator API).
+ * Behaviour/accessibility: react-resizable-panels (https://github.com/bvaughn/react-resizable-panels).
+ * Visuals: M3 surface, shape, and state layers (see CLAUDE.md).
+ *
+ * Compound API mirrors the library (Separator is exposed as Handle):
+ *   <Resizable.Group orientation="horizontal">
+ *     <Resizable.Panel defaultSize="60%" minSize="20%">Left</Resizable.Panel>
+ *     <Resizable.Handle />
+ *     <Resizable.Panel minSize="20%">Right</Resizable.Panel>
+ *   </Resizable.Group>
+ *
+ * Panel is intentionally unopinionated — give content its own surface
+ * (e.g. `bg-surface` / `bg-surface-container` + `rounded-medium`) where sensible.
+ */
+declare function Group({ className, ...props }: ComponentProps<typeof BaseGroup>): import("react").JSX.Element;
+declare function Panel({ className, ...props }: ComponentProps<typeof BasePanel>): import("react").JSX.Element;
+type HandleProps = Omit<ComponentProps<typeof BaseSeparator>, 'children'>;
+/**
+ * M3 drag handle: a thin outline-variant divider line with a centered grab
+ * pill (4x32px). The library renders the separator with `aria-orientation`
+ * opposite to the group axis (a vertical line splits a horizontal group), so
+ * both axes are styled off that attribute. State styling uses the
+ * `data-separator` attribute (`inactive | hover | active | focus | disabled`).
+ */
+declare function Handle({ className, ...props }: HandleProps): import("react").JSX.Element;
+export declare const Resizable: {
+    Group: typeof Group;
+    Panel: typeof Panel;
+    Handle: typeof Handle;
+};
+export { Group, Panel, Handle };

package/dist/components/resizable/Resizable.js

@@ -0,0 +1,38 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Group as r, Panel as i, Separator as a } from "react-resizable-panels";
+//#region src/components/resizable/Resizable.tsx
+function o({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r, {
+		className: e("h-full w-full", n),
+		...i
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t(i, {
+		className: e(n),
+		...r
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ n(a, {
+		className: e("group/handle relative flex shrink-0 items-center justify-center outline-none", "aria-[orientation=vertical]:w-3 aria-[orientation=horizontal]:h-3", "focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", r),
+		...i,
+		children: [/* @__PURE__ */ t("span", {
+			"aria-hidden": !0,
+			className: e("pointer-events-none absolute bg-outline-variant", "group-aria-[orientation=vertical]/handle:inset-y-0 group-aria-[orientation=vertical]/handle:left-1/2 group-aria-[orientation=vertical]/handle:w-px group-aria-[orientation=vertical]/handle:-translate-x-1/2", "group-aria-[orientation=horizontal]/handle:inset-x-0 group-aria-[orientation=horizontal]/handle:top-1/2 group-aria-[orientation=horizontal]/handle:h-px group-aria-[orientation=horizontal]/handle:-translate-y-1/2")
+		}), /* @__PURE__ */ t("span", {
+			"aria-hidden": !0,
+			className: e("pointer-events-none relative rounded-full bg-on-surface-variant/40 transition-colors duration-200 ease-out", "group-aria-[orientation=vertical]/handle:h-8 group-aria-[orientation=vertical]/handle:w-1", "group-aria-[orientation=horizontal]/handle:h-1 group-aria-[orientation=horizontal]/handle:w-8", "group-data-[separator=hover]/handle:bg-primary group-data-[separator=active]/handle:bg-primary", "group-data-[separator=disabled]/handle:bg-on-surface/[0.12]")
+		})]
+	});
+}
+var l = {
+	Group: o,
+	Panel: s,
+	Handle: c
+};
+//#endregion
+export { o as Group, c as Handle, s as Panel, l as Resizable };
+
+//# sourceMappingURL=Resizable.js.map

package/dist/components/resizable/Resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.js","names":[],"sources":["../../../src/components/resizable/Resizable.tsx"],"sourcesContent":["import {\n  Group as BaseGroup,\n  Panel as BasePanel,\n  Separator as BaseSeparator,\n} from 'react-resizable-panels'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Resizable — Material 3 styled wrapper over react-resizable-panels v4\n * (headless Group / Panel / Separator API).\n * Behaviour/accessibility: react-resizable-panels (https://github.com/bvaughn/react-resizable-panels).\n * Visuals: M3 surface, shape, and state layers (see CLAUDE.md).\n *\n * Compound API mirrors the library (Separator is exposed as Handle):\n *   <Resizable.Group orientation=\"horizontal\">\n *     <Resizable.Panel defaultSize=\"60%\" minSize=\"20%\">Left</Resizable.Panel>\n *     <Resizable.Handle />\n *     <Resizable.Panel minSize=\"20%\">Right</Resizable.Panel>\n *   </Resizable.Group>\n *\n * Panel is intentionally unopinionated — give content its own surface\n * (e.g. `bg-surface` / `bg-surface-container` + `rounded-medium`) where sensible.\n */\n\nfunction Group({ className, ...props }: ComponentProps<typeof BaseGroup>) {\n  return <BaseGroup className={cn('h-full w-full', className)} {...props} />\n}\n\nfunction Panel({ className, ...props }: ComponentProps<typeof BasePanel>) {\n  // Library applies `className` to the inner scrollable content div.\n  return <BasePanel className={cn(className)} {...props} />\n}\n\ntype HandleProps = Omit<ComponentProps<typeof BaseSeparator>, 'children'>\n\n/**\n * M3 drag handle: a thin outline-variant divider line with a centered grab\n * pill (4x32px). The library renders the separator with `aria-orientation`\n * opposite to the group axis (a vertical line splits a horizontal group), so\n * both axes are styled off that attribute. State styling uses the\n * `data-separator` attribute (`inactive | hover | active | focus | disabled`).\n */\nfunction Handle({ className, ...props }: HandleProps) {\n  return (\n    <BaseSeparator\n      className={cn(\n        'group/handle relative flex shrink-0 items-center justify-center outline-none',\n        'aria-[orientation=vertical]:w-3 aria-[orientation=horizontal]:h-3',\n        'focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary',\n        className,\n      )}\n      {...props}\n    >\n      {/* divider line */}\n      <span\n        aria-hidden\n        className={cn(\n          'pointer-events-none absolute bg-outline-variant',\n          'group-aria-[orientation=vertical]/handle:inset-y-0 group-aria-[orientation=vertical]/handle:left-1/2 group-aria-[orientation=vertical]/handle:w-px group-aria-[orientation=vertical]/handle:-translate-x-1/2',\n          'group-aria-[orientation=horizontal]/handle:inset-x-0 group-aria-[orientation=horizontal]/handle:top-1/2 group-aria-[orientation=horizontal]/handle:h-px group-aria-[orientation=horizontal]/handle:-translate-y-1/2',\n        )}\n      />\n      {/* grab pill */}\n      <span\n        aria-hidden\n        className={cn(\n          'pointer-events-none relative rounded-full bg-on-surface-variant/40 transition-colors duration-200 ease-out',\n          'group-aria-[orientation=vertical]/handle:h-8 group-aria-[orientation=vertical]/handle:w-1',\n          'group-aria-[orientation=horizontal]/handle:h-1 group-aria-[orientation=horizontal]/handle:w-8',\n          'group-data-[separator=hover]/handle:bg-primary group-data-[separator=active]/handle:bg-primary',\n          'group-data-[separator=disabled]/handle:bg-on-surface/[0.12]',\n        )}\n      />\n    </BaseSeparator>\n  )\n}\n\nexport const Resizable = { Group, Panel, Handle }\nexport { Group, Panel, Handle }\n"],"mappings":";;;;AA0BA,SAAS,EAAM,EAAE,cAAW,GAAG,KAA2C;CACxE,OAAO,kBAAC,GAAD;EAAW,WAAW,EAAG,iBAAiB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAA2C;CAExE,OAAO,kBAAC,GAAD;EAAW,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC1D;AAWA,SAAS,EAAO,EAAE,cAAW,GAAG,KAAsB;CACpD,OACE,kBAAC,GAAD;EACE,WAAW,EACT,gFACA,qEACA,yFACA,CACF;EACA,GAAI;YAPN,CAUE,kBAAC,QAAD;GACE,eAAA;GACA,WAAW,EACT,mDACA,gNACA,qNACF;EACD,CAAA,GAED,kBAAC,QAAD;GACE,eAAA;GACA,WAAW,EACT,8GACA,6FACA,iGACA,kGACA,6DACF;EACD,CAAA,CACY;;AAEnB;AAEA,IAAa,IAAY;CAAE,OAAA;CAAO,OAAA;CAAO;AAAO"}

package/dist/components/resizable/index.d.ts

@@ -0,0 +1 @@
+export { Resizable, Group, Panel, Handle } from './Resizable';

package/dist/components/resizable/index.js

@@ -0,0 +1,2 @@
+import { Group as e, Handle as t, Panel as n, Resizable as r } from "./Resizable.js";
+export { e as Group, t as Handle, n as Panel, r as Resizable };

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,37 @@
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import { ComponentProps } from 'react';
+/**
+ * ScrollArea — Material 3 styled wrapper over Base UI's headless Scroll Area.
+ * Behaviour/accessibility (native scrolling, thumb dragging, track paging,
+ * RTL support): Base UI (https://base-ui.com/react/components/scroll-area).
+ * Visuals: minimal M3 scrollbar — transparent track, outline-variant thumb
+ * with a full-round shape; the bar fades in while hovering or scrolling and
+ * fades back out when idle (Base UI `data-hovering` / `data-scrolling`).
+ * Design ref: none mapped — minimal scrollbar per CLAUDE.md M3 tokens.
+ *
+ * Compound API mirrors Base UI:
+ *   <ScrollArea.Root>
+ *     <ScrollArea.Viewport>
+ *       <ScrollArea.Content>…</ScrollArea.Content>
+ *     </ScrollArea.Viewport>
+ *     <ScrollArea.Scrollbar orientation="vertical">
+ *       <ScrollArea.Thumb />
+ *     </ScrollArea.Scrollbar>
+ *     <ScrollArea.Corner />
+ *   </ScrollArea.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseScrollArea.Root>): import("react").JSX.Element;
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseScrollArea.Viewport>): import("react").JSX.Element;
+declare function Content({ className, ...props }: ComponentProps<typeof BaseScrollArea.Content>): import("react").JSX.Element;
+declare function Scrollbar({ className, ...props }: ComponentProps<typeof BaseScrollArea.Scrollbar>): import("react").JSX.Element;
+declare function Thumb({ className, ...props }: ComponentProps<typeof BaseScrollArea.Thumb>): import("react").JSX.Element;
+declare function Corner({ className, ...props }: ComponentProps<typeof BaseScrollArea.Corner>): import("react").JSX.Element;
+export declare const ScrollArea: {
+    Root: typeof Root;
+    Viewport: typeof Viewport;
+    Content: typeof Content;
+    Scrollbar: typeof Scrollbar;
+    Thumb: typeof Thumb;
+    Corner: typeof Corner;
+};
+export { Root, Viewport, Content, Scrollbar, Thumb, Corner };

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,52 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { ScrollArea as n } from "@base-ui/react/scroll-area";
+//#region src/components/scroll-area/ScrollArea.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("text-on-surface", r),
+		...i
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Viewport, {
+		className: e("h-full w-full overscroll-contain rounded-[inherit]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Content, {
+		className: e(r),
+		...i
+	});
+}
+function o({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Scrollbar, {
+		className: e("flex bg-transparent p-px", "data-[orientation=vertical]:w-2 data-[orientation=vertical]:justify-center", "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-center", "opacity-0 transition-opacity duration-200 delay-300", "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-100", "data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-100", r),
+		...i
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Thumb, {
+		className: e("rounded-full bg-outline-variant transition-colors hover:bg-outline", "data-[orientation=vertical]:w-full data-[orientation=horizontal]:h-full", r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Corner, {
+		className: e("bg-transparent", r),
+		...i
+	});
+}
+var l = {
+	Root: r,
+	Viewport: i,
+	Content: a,
+	Scrollbar: o,
+	Thumb: s,
+	Corner: c
+};
+//#endregion
+export { a as Content, c as Corner, r as Root, l as ScrollArea, o as Scrollbar, s as Thumb, i as Viewport };
+
+//# sourceMappingURL=ScrollArea.js.map

package/dist/components/scroll-area/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","names":[],"sources":["../../../src/components/scroll-area/ScrollArea.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * ScrollArea — Material 3 styled wrapper over Base UI's headless Scroll Area.\n * Behaviour/accessibility (native scrolling, thumb dragging, track paging,\n * RTL support): Base UI (https://base-ui.com/react/components/scroll-area).\n * Visuals: minimal M3 scrollbar — transparent track, outline-variant thumb\n * with a full-round shape; the bar fades in while hovering or scrolling and\n * fades back out when idle (Base UI `data-hovering` / `data-scrolling`).\n * Design ref: none mapped — minimal scrollbar per CLAUDE.md M3 tokens.\n *\n * Compound API mirrors Base UI:\n *   <ScrollArea.Root>\n *     <ScrollArea.Viewport>\n *       <ScrollArea.Content>…</ScrollArea.Content>\n *     </ScrollArea.Viewport>\n *     <ScrollArea.Scrollbar orientation=\"vertical\">\n *       <ScrollArea.Thumb />\n *     </ScrollArea.Scrollbar>\n *     <ScrollArea.Corner />\n *   </ScrollArea.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseScrollArea.Root>) {\n  // Base UI applies `position: relative` and corner CSS vars inline.\n  return <BaseScrollArea.Root className={cn('text-on-surface', className)} {...props} />\n}\n\nfunction Viewport({ className, ...props }: ComponentProps<typeof BaseScrollArea.Viewport>) {\n  return (\n    <BaseScrollArea.Viewport\n      className={cn(\n        'h-full w-full overscroll-contain rounded-[inherit]',\n        // The viewport is keyboard-focusable when scrollable.\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Content({ className, ...props }: ComponentProps<typeof BaseScrollArea.Content>) {\n  return <BaseScrollArea.Content className={cn(className)} {...props} />\n}\n\nfunction Scrollbar({ className, ...props }: ComponentProps<typeof BaseScrollArea.Scrollbar>) {\n  // Base UI positions the bar absolutely along the matching edge inline;\n  // the track itself stays transparent (minimal M3 scrollbar).\n  return (\n    <BaseScrollArea.Scrollbar\n      className={cn(\n        'flex bg-transparent p-px',\n        'data-[orientation=vertical]:w-2 data-[orientation=vertical]:justify-center',\n        'data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-center',\n        // Fade in while hovering/scrolling, fade out after a short idle delay.\n        'opacity-0 transition-opacity duration-200 delay-300',\n        'data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-100',\n        'data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-100',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Thumb({ className, ...props }: ComponentProps<typeof BaseScrollArea.Thumb>) {\n  // Base UI sets the thumb's scroll-proportional length inline\n  // (--scroll-area-thumb-height / --scroll-area-thumb-width).\n  return (\n    <BaseScrollArea.Thumb\n      className={cn(\n        'rounded-full bg-outline-variant transition-colors hover:bg-outline',\n        'data-[orientation=vertical]:w-full data-[orientation=horizontal]:h-full',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Corner({ className, ...props }: ComponentProps<typeof BaseScrollArea.Corner>) {\n  return <BaseScrollArea.Corner className={cn('bg-transparent', className)} {...props} />\n}\n\nexport const ScrollArea = { Root, Viewport, Content, Scrollbar, Thumb, Corner }\nexport { Root, Viewport, Content, Scrollbar, Thumb, Corner }\n"],"mappings":";;;;AA0BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAqD;CAEjF,OAAO,kBAAC,EAAe,MAAhB;EAAqB,WAAW,EAAG,mBAAmB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACvF;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAyD;CACzF,OACE,kBAAC,EAAe,UAAhB;EACE,WAAW,EACT,sDAEA,yFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAwD;CACvF,OAAO,kBAAC,EAAe,SAAhB;EAAwB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,EAAU,EAAE,cAAW,GAAG,KAA0D;CAG3F,OACE,kBAAC,EAAe,WAAhB;EACE,WAAW,EACT,4BACA,8EACA,yHAEA,uDACA,oFACA,uFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAsD;CAGnF,OACE,kBAAC,EAAe,OAAhB;EACE,WAAW,EACT,sEACA,2EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAO,EAAE,cAAW,GAAG,KAAuD;CACrF,OAAO,kBAAC,EAAe,QAAhB;EAAuB,WAAW,EAAG,kBAAkB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;AAEA,IAAa,IAAa;CAAE;CAAM;CAAU;CAAS;CAAW;CAAO;AAAO"}

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1 @@
+export { ScrollArea, Root, Viewport, Content, Scrollbar, Thumb, Corner, } from './ScrollArea';

package/dist/components/scroll-area/index.js

@@ -0,0 +1,2 @@
+import { Content as e, Corner as t, Root as n, ScrollArea as r, Scrollbar as i, Thumb as a, Viewport as o } from "./ScrollArea.js";
+export { e as Content, t as Corner, n as Root, r as ScrollArea, i as Scrollbar, a as Thumb, o as Viewport };

package/dist/components/select/Select.d.ts

@@ -0,0 +1,94 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { ComponentProps } from 'react';
+/**
+ * Select — Material 3 styled wrapper over Base UI's headless Select.
+ * Behaviour/accessibility (listbox semantics, typeahead, keyboard navigation,
+ * form integration via hidden input): Base UI
+ * (https://base-ui.com/react/components/select).
+ * Visuals: M3 "exposed dropdown menu" anatomy — outlined text-field trigger
+ * (56px, extra-small corner, outline → primary while open/focused, trailing
+ * chevron), menu popup on surface-container with small corner + level-2
+ * elevation, 48px list items with state layers and a trailing selected check.
+ * Design refs: port/core/ui/components/dropdown, port/core/ui/components/text-field
+ * (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Select.Root>
+ *     <Select.Label>Fruit</Select.Label>
+ *     <Select.Trigger>
+ *       <Select.Value placeholder="Pick a fruit" />
+ *       <Select.Icon />
+ *     </Select.Trigger>
+ *     <Select.Portal>
+ *       <Select.Positioner>
+ *         <Select.Popup>
+ *           <Select.List>
+ *             <Select.Item value="apple">
+ *               <Select.ItemText>Apple</Select.ItemText>
+ *               <Select.ItemIndicator />
+ *             </Select.Item>
+ *           </Select.List>
+ *         </Select.Popup>
+ *       </Select.Positioner>
+ *     </Select.Portal>
+ *   </Select.Root>
+ */
+declare const Root: typeof BaseSelect.Root;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').SelectPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/** M3 label above the field (label-large, on-surface). */
+declare function Label({ className, ...props }: ComponentProps<typeof BaseSelect.Label>): import("react").JSX.Element;
+/**
+ * The M3 outlined text-field box (56px, extra-small corner): outline turns
+ * primary while focused or while the popup is open.
+ */
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseSelect.Trigger>): import("react").JSX.Element;
+/** Selected-item text; shows the on-surface-variant placeholder when empty. */
+declare function Value({ className, ...props }: ComponentProps<typeof BaseSelect.Value>): import("react").JSX.Element;
+/** Trailing chevron; flips while the popup is open (parent Trigger is `group`). */
+declare function Icon({ className, children, ...props }: ComponentProps<typeof BaseSelect.Icon>): import("react").JSX.Element;
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseSelect.Backdrop>): import("react").JSX.Element;
+/**
+ * Positions the popup as an M3 menu below the field (4px gap) instead of
+ * Base UI's native-like "align selected item with trigger" default.
+ */
+declare function Positioner({ className, ...props }: ComponentProps<typeof BaseSelect.Positioner>): import("react").JSX.Element;
+/** M3 menu container: surface-container, small corner, level-2 elevation. */
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseSelect.Popup>): import("react").JSX.Element;
+declare function Arrow({ className, ...props }: ComponentProps<typeof BaseSelect.Arrow>): import("react").JSX.Element;
+declare function List({ className, ...props }: ComponentProps<typeof BaseSelect.List>): import("react").JSX.Element;
+/** M3 menu item: 48px row, label-large, hover/highlight state layers. */
+declare function Item({ className, ...props }: ComponentProps<typeof BaseSelect.Item>): import("react").JSX.Element;
+/** The item's label text; mirrored into the trigger's Value when selected. */
+declare function ItemText({ className, ...props }: ComponentProps<typeof BaseSelect.ItemText>): import("react").JSX.Element;
+/** Trailing selected check (primary role); only mounted while selected. */
+declare function ItemIndicator({ className, children, ...props }: ComponentProps<typeof BaseSelect.ItemIndicator>): import("react").JSX.Element;
+/** Hover-to-scroll affordance pinned to the top of an overflowing popup. */
+declare function ScrollUpArrow({ className, children, ...props }: ComponentProps<typeof BaseSelect.ScrollUpArrow>): import("react").JSX.Element;
+/** Hover-to-scroll affordance pinned to the bottom of an overflowing popup. */
+declare function ScrollDownArrow({ className, children, ...props }: ComponentProps<typeof BaseSelect.ScrollDownArrow>): import("react").JSX.Element;
+declare function Group({ className, ...props }: ComponentProps<typeof BaseSelect.Group>): import("react").JSX.Element;
+/** M3 list subheader. */
+declare function GroupLabel({ className, ...props }: ComponentProps<typeof BaseSelect.GroupLabel>): import("react").JSX.Element;
+declare function Separator({ className, ...props }: ComponentProps<typeof BaseSelect.Separator>): import("react").JSX.Element;
+export declare const Select: {
+    Root: typeof BaseSelect.Root;
+    Label: typeof Label;
+    Trigger: typeof Trigger;
+    Value: typeof Value;
+    Icon: typeof Icon;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').SelectPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Arrow: typeof Arrow;
+    List: typeof List;
+    Item: typeof Item;
+    ItemText: typeof ItemText;
+    ItemIndicator: typeof ItemIndicator;
+    ScrollUpArrow: typeof ScrollUpArrow;
+    ScrollDownArrow: typeof ScrollDownArrow;
+    Group: typeof Group;
+    GroupLabel: typeof GroupLabel;
+    Separator: typeof Separator;
+};
+export { Root, Label, Trigger, Value, Icon, Portal, Backdrop, Positioner, Popup, Arrow, List, Item, ItemText, ItemIndicator, ScrollUpArrow, ScrollDownArrow, Group, GroupLabel, Separator, };