@duestel/ui 0.1.0

package/dist/components/select/Select.js

@@ -0,0 +1,151 @@
+import { cn as e } from "../../lib/cn.js";
+import { Check as t, ChevronDown as n, ChevronUp as r } from "lucide-react";
+import { jsx as i } from "react/jsx-runtime";
+import { Select as a } from "@base-ui/react/select";
+//#region src/components/select/Select.tsx
+var o = a.Root, s = a.Portal;
+function c({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Label, {
+		className: e("mb-1.5 block text-label-large text-on-surface", t),
+		...n
+	});
+}
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Trigger, {
+		className: e("group flex h-14 min-w-48 cursor-pointer select-none items-center justify-between gap-3 pl-4 pr-3", "rounded-extra-small border border-outline bg-surface text-body-large text-on-surface", "transition-colors hover:bg-on-surface/[0.08]", "focus-visible:border-primary focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "data-[popup-open]:border-primary", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]", t),
+		...n
+	});
+}
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Value, {
+		className: e("truncate text-left data-[placeholder]:text-on-surface-variant", t),
+		...n
+	});
+}
+function d({ className: t, children: r, ...o }) {
+	return /* @__PURE__ */ i(a.Icon, {
+		className: e("flex shrink-0 text-on-surface-variant", "transition-transform duration-200 ease-out group-data-[popup-open]:rotate-180", t),
+		...o,
+		children: r ?? /* @__PURE__ */ i(n, {
+			"aria-hidden": !0,
+			className: "size-5"
+		})
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Backdrop, {
+		className: e("fixed inset-0 z-40", t),
+		...n
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Positioner, {
+		sideOffset: 4,
+		alignItemWithTrigger: !1,
+		className: e("z-50 outline-none", t),
+		...n
+	});
+}
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Popup, {
+		className: e("max-h-[min(24rem,var(--available-height))] w-(--anchor-width) overflow-y-auto overscroll-contain", "rounded-small bg-surface-container py-2 text-on-surface shadow-mm-2", "origin-(--transform-origin) transition-[transform,opacity] duration-150 ease-out", "outline-none data-[ending-style]:scale-95 data-[ending-style]:opacity-0", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", t),
+		...n
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Arrow, {
+		className: e("flex", t),
+		...n
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.List, {
+		className: e("outline-none", t),
+		...n
+	});
+}
+function _({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Item, {
+		className: e("grid min-h-12 cursor-pointer select-none grid-cols-[1fr_auto] items-center gap-3 px-4", "text-label-large text-on-surface outline-none transition-colors", "data-[highlighted]:bg-on-surface/[0.08]", "data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]", t),
+		...n
+	});
+}
+function v({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.ItemText, {
+		className: e("truncate", t),
+		...n
+	});
+}
+function y({ className: n, children: r, ...o }) {
+	return /* @__PURE__ */ i(a.ItemIndicator, {
+		className: e("col-start-2 flex shrink-0 items-center text-primary", n),
+		...o,
+		children: r ?? /* @__PURE__ */ i(t, {
+			"aria-hidden": !0,
+			className: "size-5"
+		})
+	});
+}
+function b({ className: t, children: n, ...o }) {
+	return /* @__PURE__ */ i(a.ScrollUpArrow, {
+		className: e("sticky top-0 z-10 flex w-full items-center justify-center py-1", "bg-surface-container text-on-surface-variant", t),
+		...o,
+		children: n ?? /* @__PURE__ */ i(r, {
+			"aria-hidden": !0,
+			className: "size-4"
+		})
+	});
+}
+function x({ className: t, children: r, ...o }) {
+	return /* @__PURE__ */ i(a.ScrollDownArrow, {
+		className: e("sticky bottom-0 z-10 flex w-full items-center justify-center py-1", "bg-surface-container text-on-surface-variant", t),
+		...o,
+		children: r ?? /* @__PURE__ */ i(n, {
+			"aria-hidden": !0,
+			className: "size-4"
+		})
+	});
+}
+function S({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Group, {
+		className: e(t),
+		...n
+	});
+}
+function C({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.GroupLabel, {
+		className: e("px-4 pb-1 pt-3 text-label-medium text-on-surface-variant", t),
+		...n
+	});
+}
+function w({ className: t, ...n }) {
+	return /* @__PURE__ */ i(a.Separator, {
+		className: e("mx-4 my-2 h-px bg-outline-variant", t),
+		...n
+	});
+}
+var T = {
+	Root: o,
+	Label: c,
+	Trigger: l,
+	Value: u,
+	Icon: d,
+	Portal: s,
+	Backdrop: f,
+	Positioner: p,
+	Popup: m,
+	Arrow: h,
+	List: g,
+	Item: _,
+	ItemText: v,
+	ItemIndicator: y,
+	ScrollUpArrow: b,
+	ScrollDownArrow: x,
+	Group: S,
+	GroupLabel: C,
+	Separator: w
+};
+//#endregion
+export { h as Arrow, f as Backdrop, S as Group, C as GroupLabel, d as Icon, _ as Item, y as ItemIndicator, v as ItemText, c as Label, g as List, m as Popup, s as Portal, p as Positioner, o as Root, x as ScrollDownArrow, b as ScrollUpArrow, T as Select, w as Separator, l as Trigger, u as Value };
+
+//# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import { Select as BaseSelect } from '@base-ui/react/select'\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Select — Material 3 styled wrapper over Base UI's headless Select.\n * Behaviour/accessibility (listbox semantics, typeahead, keyboard navigation,\n * form integration via hidden input): Base UI\n * (https://base-ui.com/react/components/select).\n * Visuals: M3 \"exposed dropdown menu\" anatomy — outlined text-field trigger\n * (56px, extra-small corner, outline → primary while open/focused, trailing\n * chevron), menu popup on surface-container with small corner + level-2\n * elevation, 48px list items with state layers and a trailing selected check.\n * Design refs: port/core/ui/components/dropdown, port/core/ui/components/text-field\n * (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Select.Root>\n *     <Select.Label>Fruit</Select.Label>\n *     <Select.Trigger>\n *       <Select.Value placeholder=\"Pick a fruit\" />\n *       <Select.Icon />\n *     </Select.Trigger>\n *     <Select.Portal>\n *       <Select.Positioner>\n *         <Select.Popup>\n *           <Select.List>\n *             <Select.Item value=\"apple\">\n *               <Select.ItemText>Apple</Select.ItemText>\n *               <Select.ItemIndicator />\n *             </Select.Item>\n *           </Select.List>\n *         </Select.Popup>\n *       </Select.Positioner>\n *     </Select.Portal>\n *   </Select.Root>\n */\n\n// These parts render no HTML element of their own, so there is nothing to\n// style — re-export them directly (preserves Root's value generics).\nconst Root = BaseSelect.Root\nconst Portal = BaseSelect.Portal\n\n/** M3 label above the field (label-large, on-surface). */\nfunction Label({ className, ...props }: ComponentProps<typeof BaseSelect.Label>) {\n  return (\n    <BaseSelect.Label\n      className={cn('mb-1.5 block text-label-large text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * The M3 outlined text-field box (56px, extra-small corner): outline turns\n * primary while focused or while the popup is open.\n */\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseSelect.Trigger>) {\n  return (\n    <BaseSelect.Trigger\n      className={cn(\n        'group flex h-14 min-w-48 cursor-pointer select-none items-center justify-between gap-3 pl-4 pr-3',\n        'rounded-extra-small border border-outline bg-surface text-body-large text-on-surface',\n        'transition-colors hover:bg-on-surface/[0.08]',\n        'focus-visible:border-primary focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'data-[popup-open]:border-primary',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Selected-item text; shows the on-surface-variant placeholder when empty. */\nfunction Value({ className, ...props }: ComponentProps<typeof BaseSelect.Value>) {\n  return (\n    <BaseSelect.Value\n      className={cn('truncate text-left data-[placeholder]:text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Trailing chevron; flips while the popup is open (parent Trigger is `group`). */\nfunction Icon({ className, children, ...props }: ComponentProps<typeof BaseSelect.Icon>) {\n  return (\n    <BaseSelect.Icon\n      className={cn(\n        'flex shrink-0 text-on-surface-variant',\n        'transition-transform duration-200 ease-out group-data-[popup-open]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <ChevronDown aria-hidden className=\"size-5\" />}\n    </BaseSelect.Icon>\n  )\n}\n\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseSelect.Backdrop>) {\n  return <BaseSelect.Backdrop className={cn('fixed inset-0 z-40', className)} {...props} />\n}\n\n/**\n * Positions the popup as an M3 menu below the field (4px gap) instead of\n * Base UI's native-like \"align selected item with trigger\" default.\n */\nfunction Positioner({ className, ...props }: ComponentProps<typeof BaseSelect.Positioner>) {\n  return (\n    <BaseSelect.Positioner\n      sideOffset={4}\n      alignItemWithTrigger={false}\n      className={cn('z-50 outline-none', className)}\n      {...props}\n    />\n  )\n}\n\n/** M3 menu container: surface-container, small corner, level-2 elevation. */\nfunction Popup({ className, ...props }: ComponentProps<typeof BaseSelect.Popup>) {\n  return (\n    <BaseSelect.Popup\n      className={cn(\n        'max-h-[min(24rem,var(--available-height))] w-(--anchor-width) overflow-y-auto overscroll-contain',\n        'rounded-small bg-surface-container py-2 text-on-surface shadow-mm-2',\n        'origin-(--transform-origin) transition-[transform,opacity] duration-150 ease-out',\n        'outline-none data-[ending-style]:scale-95 data-[ending-style]:opacity-0',\n        'data-[starting-style]:scale-95 data-[starting-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Arrow({ className, ...props }: ComponentProps<typeof BaseSelect.Arrow>) {\n  return <BaseSelect.Arrow className={cn('flex', className)} {...props} />\n}\n\nfunction List({ className, ...props }: ComponentProps<typeof BaseSelect.List>) {\n  return <BaseSelect.List className={cn('outline-none', className)} {...props} />\n}\n\n/** M3 menu item: 48px row, label-large, hover/highlight state layers. */\nfunction Item({ className, ...props }: ComponentProps<typeof BaseSelect.Item>) {\n  return (\n    <BaseSelect.Item\n      className={cn(\n        'grid min-h-12 cursor-pointer select-none grid-cols-[1fr_auto] items-center gap-3 px-4',\n        'text-label-large text-on-surface outline-none transition-colors',\n        'data-[highlighted]:bg-on-surface/[0.08]',\n        'data-[selected]:bg-secondary-container data-[selected]:text-on-secondary-container',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The item's label text; mirrored into the trigger's Value when selected. */\nfunction ItemText({ className, ...props }: ComponentProps<typeof BaseSelect.ItemText>) {\n  return <BaseSelect.ItemText className={cn('truncate', className)} {...props} />\n}\n\n/** Trailing selected check (primary role); only mounted while selected. */\nfunction ItemIndicator({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseSelect.ItemIndicator>) {\n  return (\n    <BaseSelect.ItemIndicator\n      className={cn('col-start-2 flex shrink-0 items-center text-primary', className)}\n      {...props}\n    >\n      {children ?? <Check aria-hidden className=\"size-5\" />}\n    </BaseSelect.ItemIndicator>\n  )\n}\n\n/** Hover-to-scroll affordance pinned to the top of an overflowing popup. */\nfunction ScrollUpArrow({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseSelect.ScrollUpArrow>) {\n  return (\n    <BaseSelect.ScrollUpArrow\n      className={cn(\n        'sticky top-0 z-10 flex w-full items-center justify-center py-1',\n        'bg-surface-container text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <ChevronUp aria-hidden className=\"size-4\" />}\n    </BaseSelect.ScrollUpArrow>\n  )\n}\n\n/** Hover-to-scroll affordance pinned to the bottom of an overflowing popup. */\nfunction ScrollDownArrow({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseSelect.ScrollDownArrow>) {\n  return (\n    <BaseSelect.ScrollDownArrow\n      className={cn(\n        'sticky bottom-0 z-10 flex w-full items-center justify-center py-1',\n        'bg-surface-container text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <ChevronDown aria-hidden className=\"size-4\" />}\n    </BaseSelect.ScrollDownArrow>\n  )\n}\n\nfunction Group({ className, ...props }: ComponentProps<typeof BaseSelect.Group>) {\n  return <BaseSelect.Group className={cn(className)} {...props} />\n}\n\n/** M3 list subheader. */\nfunction GroupLabel({ className, ...props }: ComponentProps<typeof BaseSelect.GroupLabel>) {\n  return (\n    <BaseSelect.GroupLabel\n      className={cn('px-4 pb-1 pt-3 text-label-medium text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Separator({ className, ...props }: ComponentProps<typeof BaseSelect.Separator>) {\n  return (\n    <BaseSelect.Separator\n      className={cn('mx-4 my-2 h-px bg-outline-variant', className)}\n      {...props}\n    />\n  )\n}\n\nexport const Select = {\n  Root,\n  Label,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  List,\n  Item,\n  ItemText,\n  ItemIndicator,\n  ScrollUpArrow,\n  ScrollDownArrow,\n  Group,\n  GroupLabel,\n  Separator,\n}\nexport {\n  Root,\n  Label,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  List,\n  Item,\n  ItemText,\n  ItemIndicator,\n  ScrollUpArrow,\n  ScrollDownArrow,\n  Group,\n  GroupLabel,\n  Separator,\n}\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { Select, Root, Label, Trigger, Value, Icon, Portal, Backdrop, Positioner, Popup, Arrow, List, Item, ItemText, ItemIndicator, ScrollUpArrow, ScrollDownArrow, Group, GroupLabel, Separator, } from './Select';

package/dist/components/select/index.js

@@ -0,0 +1,2 @@
+import { Arrow as e, Backdrop as t, Group as n, GroupLabel as r, Icon as i, Item as a, ItemIndicator as o, ItemText as s, Label as c, List as l, Popup as u, Portal as d, Positioner as f, Root as p, ScrollDownArrow as m, ScrollUpArrow as h, Select as g, Separator as _, Trigger as v, Value as y } from "./Select.js";
+export { e as Arrow, t as Backdrop, n as Group, r as GroupLabel, i as Icon, a as Item, o as ItemIndicator, s as ItemText, c as Label, l as List, u as Popup, d as Portal, f as Positioner, p as Root, m as ScrollDownArrow, h as ScrollUpArrow, g as Select, _ as Separator, v as Trigger, y as Value };

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,29 @@
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { ComponentProps } from 'react';
+/**
+ * Separator — Material 3 styled wrapper over Base UI's headless Separator.
+ * Behaviour/accessibility (role="separator", data-orientation): Base UI
+ * (https://base-ui.com/react/components/separator).
+ * Visuals: M3 divider anatomy — 1px hairline in the outline-variant role, with
+ * full-width, inset, and middle-inset variants (m3.material.io/components/divider).
+ * Design ref: port/core/ui/components/divider (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI (single part):
+ *   <Separator.Root />                          // full-width horizontal divider
+ *   <Separator.Root inset="middle" />           // middle-inset divider
+ *   <Separator.Root orientation="vertical" />   // vertical divider (stretches in flex rows)
+ */
+type RootProps = ComponentProps<typeof BaseSeparator> & {
+    /**
+     * M3 divider inset variant.
+     * - `'none'` (default): full-width / full-height.
+     * - `'inset'`: indented on the leading edge (e.g. to align with list text).
+     * - `'middle'`: indented on both edges.
+     */
+    inset?: 'none' | 'inset' | 'middle';
+};
+declare function Root({ className, inset, ...props }: RootProps): import("react").JSX.Element;
+export declare const Separator: {
+    Root: typeof Root;
+};
+export { Root };

package/dist/components/separator/Separator.js

@@ -0,0 +1,20 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Separator as n } from "@base-ui/react/separator";
+//#region src/components/separator/Separator.tsx
+var r = {
+	none: "",
+	inset: "data-[orientation=horizontal]:ml-4 data-[orientation=vertical]:mt-4",
+	middle: "data-[orientation=horizontal]:mx-4 data-[orientation=vertical]:my-4"
+};
+function i({ className: i, inset: a = "none", ...o }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("shrink-0 bg-outline-variant", "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", r[a], i),
+		...o
+	});
+}
+var a = { Root: i };
+//#endregion
+export { i as Root, a as Separator };
+
+//# sourceMappingURL=Separator.js.map

package/dist/components/separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/separator/Separator.tsx"],"sourcesContent":["import { Separator as BaseSeparator } from '@base-ui/react/separator'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Separator — Material 3 styled wrapper over Base UI's headless Separator.\n * Behaviour/accessibility (role=\"separator\", data-orientation): Base UI\n * (https://base-ui.com/react/components/separator).\n * Visuals: M3 divider anatomy — 1px hairline in the outline-variant role, with\n * full-width, inset, and middle-inset variants (m3.material.io/components/divider).\n * Design ref: port/core/ui/components/divider (see CLAUDE.md).\n *\n * Compound API mirrors Base UI (single part):\n *   <Separator.Root />                          // full-width horizontal divider\n *   <Separator.Root inset=\"middle\" />           // middle-inset divider\n *   <Separator.Root orientation=\"vertical\" />   // vertical divider (stretches in flex rows)\n */\n\ntype RootProps = ComponentProps<typeof BaseSeparator> & {\n  /**\n   * M3 divider inset variant.\n   * - `'none'` (default): full-width / full-height.\n   * - `'inset'`: indented on the leading edge (e.g. to align with list text).\n   * - `'middle'`: indented on both edges.\n   */\n  inset?: 'none' | 'inset' | 'middle'\n}\n\nconst insetClasses: Record<NonNullable<RootProps['inset']>, string> = {\n  none: '',\n  inset: 'data-[orientation=horizontal]:ml-4 data-[orientation=vertical]:mt-4',\n  middle: 'data-[orientation=horizontal]:mx-4 data-[orientation=vertical]:my-4',\n}\n\nfunction Root({ className, inset = 'none', ...props }: RootProps) {\n  return (\n    <BaseSeparator\n      className={cn(\n        'shrink-0 bg-outline-variant',\n        'data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full',\n        'data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch',\n        insetClasses[inset],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Separator = { Root }\nexport { Root }\n"],"mappings":";;;;AA6BA,IAAM,IAAgE;CACpE,MAAM;CACN,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,EAAK,EAAE,cAAW,WAAQ,QAAQ,GAAG,KAAoB;CAChE,OACE,kBAAC,GAAD;EACE,WAAW,EACT,+BACA,2EACA,6EACA,EAAa,IACb,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAY,EAAE,QAAK"}

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

@@ -0,0 +1 @@
+export * from './Separator';

package/dist/components/separator/index.js

@@ -0,0 +1,2 @@
+import { Root as e, Separator as t } from "./Separator.js";
+export { e as Root, t as Separator };

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,53 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import { ComponentProps } from 'react';
+/**
+ * Slider — Material 3 styled wrapper over Base UI's headless Slider.
+ * Behaviour/accessibility (pointer + keyboard dragging, hidden range inputs,
+ * aria-valuenow/-text, range support): Base UI
+ * (https://base-ui.com/react/components/slider).
+ * Visuals: M3 slider anatomy — 6px rounded inactive track in
+ * surface-container-high, primary active indicator, 20px primary handle with
+ * shadow and a 12px hover/focus/drag state-layer halo.
+ * Design ref: port/core/ui/components/sliders + the range-input thumb rules in
+ * port/styles/globals.css (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Slider.Root defaultValue={50}>
+ *     <Slider.Label>Volume</Slider.Label>
+ *     <Slider.Value />
+ *     <Slider.Control>
+ *       <Slider.Track>
+ *         <Slider.Indicator />
+ *         <Slider.Thumb />
+ *       </Slider.Track>
+ *     </Slider.Control>
+ *   </Slider.Root>
+ *
+ * Range sliders take an array value and one <Slider.Thumb index={n}> per value.
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseSlider.Root>): import("react").JSX.Element;
+declare function Label({ className, ...props }: ComponentProps<typeof BaseSlider.Label>): import("react").JSX.Element;
+declare function Value({ className, ...props }: ComponentProps<typeof BaseSlider.Value>): import("react").JSX.Element;
+declare function Control({ className, ...props }: ComponentProps<typeof BaseSlider.Control>): import("react").JSX.Element;
+declare function Track({ className, ...props }: ComponentProps<typeof BaseSlider.Track>): import("react").JSX.Element;
+declare function Indicator({ className, ...props }: ComponentProps<typeof BaseSlider.Indicator>): import("react").JSX.Element;
+declare function Thumb({ className, ...props }: ComponentProps<typeof BaseSlider.Thumb>): import("react").JSX.Element;
+/**
+ * Value bubble above the thumb, ported from port/core/ui/components/sliders:
+ * 32px surface-container-high pill with a caret pointing at the thumb,
+ * body-small on-surface text. Place inside <Slider.Thumb> — it rides along
+ * with the thumb, no position math needed (port computed `left` via refs).
+ * Put <Slider.Value /> (or any content) inside it.
+ */
+declare function Tooltip({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare const Slider: {
+    Root: typeof Root;
+    Label: typeof Label;
+    Value: typeof Value;
+    Control: typeof Control;
+    Track: typeof Track;
+    Indicator: typeof Indicator;
+    Thumb: typeof Thumb;
+    Tooltip: typeof Tooltip;
+};
+export { Root, Label, Value, Control, Track, Indicator, Thumb, Tooltip };

package/dist/components/slider/Slider.js

@@ -0,0 +1,70 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Slider as r } from "@base-ui/react/slider";
+//#region src/components/slider/Slider.tsx
+function i({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Root, {
+		className: e("flex w-full flex-col gap-1 text-on-surface", n),
+		...i
+	});
+}
+function a({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Label, {
+		className: e("text-label-large text-on-surface", n),
+		...i
+	});
+}
+function o({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Value, {
+		className: e("text-label-medium text-on-surface-variant tabular-nums", n),
+		...i
+	});
+}
+function s({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Control, {
+		className: e("relative flex h-6 w-full cursor-pointer touch-none items-center select-none", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]", n),
+		...i
+	});
+}
+function c({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Track, {
+		className: e("relative h-1.5 w-full rounded-full bg-surface-container-high select-none", n),
+		...i
+	});
+}
+function l({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Indicator, {
+		className: e("rounded-full bg-primary select-none", n),
+		...i
+	});
+}
+function u({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Thumb, {
+		className: e("size-5 rounded-full bg-primary shadow-mm-1 select-none", "transition-shadow duration-150 ease-out", "hover:ring-[12px] hover:ring-surface-container-highest/30", "has-[:focus-visible]:ring-[12px] has-[:focus-visible]:ring-surface-container-highest/30", "data-[dragging]:ring-[12px] data-[dragging]:ring-surface-container-highest/30", n),
+		...i
+	});
+}
+function d({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("pointer-events-none absolute -top-10 left-1/2 z-10 -translate-x-1/2", "flex h-8 min-w-8 max-w-24 items-center justify-center gap-0.5 rounded-full", "bg-surface-container-high px-1 text-body-small whitespace-nowrap text-on-surface select-none", r),
+		...a,
+		children: [i, /* @__PURE__ */ t("div", {
+			"aria-hidden": !0,
+			className: "absolute -bottom-[5px] left-1/2 -translate-x-1/2 border-l-[10px] border-r-[10px] border-t-[8.5px] border-l-transparent border-r-transparent border-t-surface-container-high"
+		})]
+	});
+}
+var f = {
+	Root: i,
+	Label: a,
+	Value: o,
+	Control: s,
+	Track: c,
+	Indicator: l,
+	Thumb: u,
+	Tooltip: d
+};
+//#endregion
+export { s as Control, l as Indicator, a as Label, i as Root, f as Slider, u as Thumb, d as Tooltip, c as Track, o as Value };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Slider — Material 3 styled wrapper over Base UI's headless Slider.\n * Behaviour/accessibility (pointer + keyboard dragging, hidden range inputs,\n * aria-valuenow/-text, range support): Base UI\n * (https://base-ui.com/react/components/slider).\n * Visuals: M3 slider anatomy — 6px rounded inactive track in\n * surface-container-high, primary active indicator, 20px primary handle with\n * shadow and a 12px hover/focus/drag state-layer halo.\n * Design ref: port/core/ui/components/sliders + the range-input thumb rules in\n * port/styles/globals.css (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Slider.Root defaultValue={50}>\n *     <Slider.Label>Volume</Slider.Label>\n *     <Slider.Value />\n *     <Slider.Control>\n *       <Slider.Track>\n *         <Slider.Indicator />\n *         <Slider.Thumb />\n *       </Slider.Track>\n *     </Slider.Control>\n *   </Slider.Root>\n *\n * Range sliders take an array value and one <Slider.Thumb index={n}> per value.\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseSlider.Root>) {\n  return (\n    <BaseSlider.Root\n      className={cn('flex w-full flex-col gap-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Label({ className, ...props }: ComponentProps<typeof BaseSlider.Label>) {\n  return (\n    <BaseSlider.Label className={cn('text-label-large text-on-surface', className)} {...props} />\n  )\n}\n\nfunction Value({ className, ...props }: ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      className={cn('text-label-medium text-on-surface-variant tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Control({ className, ...props }: ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      className={cn(\n        'relative flex h-6 w-full cursor-pointer touch-none items-center select-none',\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Track({ className, ...props }: ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      className={cn(\n        'relative h-1.5 w-full rounded-full bg-surface-container-high select-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Indicator({ className, ...props }: ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      className={cn('rounded-full bg-primary select-none', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Thumb({ className, ...props }: ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      className={cn(\n        'size-5 rounded-full bg-primary shadow-mm-1 select-none',\n        'transition-shadow duration-150 ease-out',\n        // 12px state-layer halo from the port range-thumb rules; held while dragging.\n        'hover:ring-[12px] hover:ring-surface-container-highest/30',\n        'has-[:focus-visible]:ring-[12px] has-[:focus-visible]:ring-surface-container-highest/30',\n        'data-[dragging]:ring-[12px] data-[dragging]:ring-surface-container-highest/30',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Value bubble above the thumb, ported from port/core/ui/components/sliders:\n * 32px surface-container-high pill with a caret pointing at the thumb,\n * body-small on-surface text. Place inside <Slider.Thumb> — it rides along\n * with the thumb, no position math needed (port computed `left` via refs).\n * Put <Slider.Value /> (or any content) inside it.\n */\nfunction Tooltip({ className, children, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'pointer-events-none absolute -top-10 left-1/2 z-10 -translate-x-1/2',\n        'flex h-8 min-w-8 max-w-24 items-center justify-center gap-0.5 rounded-full',\n        'bg-surface-container-high px-1 text-body-small whitespace-nowrap text-on-surface select-none',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <div\n        aria-hidden\n        className=\"absolute -bottom-[5px] left-1/2 -translate-x-1/2 border-l-[10px] border-r-[10px] border-t-[8.5px] border-l-transparent border-r-transparent border-t-surface-container-high\"\n      />\n    </div>\n  )\n}\n\nexport const Slider = { Root, Label, Value, Control, Track, Indicator, Thumb, Tooltip }\nexport { Root, Label, Value, Control, Track, Indicator, Thumb, Tooltip }\n"],"mappings":";;;;AA+BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAiD;CAC7E,OACE,kBAAC,EAAW,MAAZ;EACE,WAAW,EAAG,8CAA8C,CAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EAAkB,WAAW,EAAG,oCAAoC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAEhG;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EAAG,0DAA0D,CAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAoD;CACnF,OACE,kBAAC,EAAW,SAAZ;EACE,WAAW,EACT,+EACA,qEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EACT,4EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAsD;CACvF,OACE,kBAAC,EAAW,WAAZ;EACE,WAAW,EAAG,uCAAuC,CAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EACT,0DACA,2CAEA,6DACA,2FACA,iFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAS,EAAQ,EAAE,cAAW,aAAU,GAAG,KAAgC;CACzE,OACE,kBAAC,OAAD;EACE,WAAW,EACT,uEACA,8EACA,gGACA,CACF;EACA,GAAI;YAPN,CASG,GACD,kBAAC,OAAD;GACE,eAAA;GACA,WAAU;EACX,CAAA,CACE;;AAET;AAEA,IAAa,IAAS;CAAE;CAAM;CAAO;CAAO;CAAS;CAAO;CAAW;CAAO;AAAQ"}

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

@@ -0,0 +1 @@
+export { Slider, Root, Label, Value, Control, Track, Indicator, Thumb, Tooltip } from './Slider';

package/dist/components/slider/index.js

@@ -0,0 +1,2 @@
+import { Control as e, Indicator as t, Label as n, Root as r, Slider as i, Thumb as a, Tooltip as o, Track as s, Value as c } from "./Slider.js";
+export { e as Control, t as Indicator, n as Label, r as Root, i as Slider, a as Thumb, o as Tooltip, s as Track, c as Value };

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,28 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { ComponentProps } from 'react';
+/**
+ * Switch — Material 3 styled wrapper over Base UI's headless Switch.
+ * Behaviour/accessibility (role="switch", hidden input, keyboard toggling,
+ * form submission): Base UI (https://base-ui.com/react/components/switch).
+ * Visuals: M3 switch anatomy — 52x32 track (2px outline + surface-container-
+ * highest when off, primary fill when on); 16px outline-colored thumb that
+ * grows to a 24px on-primary thumb when checked, with a 40px hover state
+ * layer halo around the thumb.
+ * Design ref: port/core/ui/elements/common/Switch.tsx +
+ * port/pages/examples/selection (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Switch.Root defaultChecked>
+ *     <Switch.Thumb />
+ *   </Switch.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseSwitch.Root>): import("react").JSX.Element;
+declare function Thumb({ className, ...props }: ComponentProps<typeof BaseSwitch.Thumb>): import("react").JSX.Element;
+/** Convenience `<label>` row pairing the switch with its M3 body-medium text. */
+declare function Label({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
+export declare const Switch: {
+    Root: typeof Root;
+    Thumb: typeof Thumb;
+    Label: typeof Label;
+};
+export { Root, Thumb, Label };

package/dist/components/switch/Switch.js

@@ -0,0 +1,31 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Switch as n } from "@base-ui/react/switch";
+//#region src/components/switch/Switch.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("group relative inline-flex h-8 w-[52px] shrink-0 cursor-pointer rounded-full", "border-2 border-outline bg-surface-container-highest", "transition-colors duration-200 ease-out", "data-[checked]:border-primary data-[checked]:bg-primary", "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 i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Thumb, {
+		className: e("absolute top-1/2 left-0 size-4 -translate-y-1/2 translate-x-[6px]", "rounded-full bg-outline transition-all duration-200 ease-out", "ring-0 ring-on-surface/[0.08] group-hover:ring-8", "data-[checked]:size-6 data-[checked]:translate-x-[22px]", "data-[checked]:bg-on-primary data-[checked]:ring-primary/[0.08]", r),
+		...i
+	});
+}
+function a({ 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 o = {
+	Root: r,
+	Thumb: i,
+	Label: a
+};
+//#endregion
+export { a as Label, r as Root, o as Switch, i as Thumb };
+
+//# sourceMappingURL=Switch.js.map

package/dist/components/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Switch — Material 3 styled wrapper over Base UI's headless Switch.\n * Behaviour/accessibility (role=\"switch\", hidden input, keyboard toggling,\n * form submission): Base UI (https://base-ui.com/react/components/switch).\n * Visuals: M3 switch anatomy — 52x32 track (2px outline + surface-container-\n * highest when off, primary fill when on); 16px outline-colored thumb that\n * grows to a 24px on-primary thumb when checked, with a 40px hover state\n * layer halo around the thumb.\n * Design ref: port/core/ui/elements/common/Switch.tsx +\n * port/pages/examples/selection (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Switch.Root defaultChecked>\n *     <Switch.Thumb />\n *   </Switch.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseSwitch.Root>) {\n  return (\n    <BaseSwitch.Root\n      className={cn(\n        'group relative inline-flex h-8 w-[52px] shrink-0 cursor-pointer rounded-full',\n        'border-2 border-outline bg-surface-container-highest',\n        'transition-colors duration-200 ease-out',\n        'data-[checked]:border-primary data-[checked]:bg-primary',\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 Thumb({\n  className,\n  ...props\n}: ComponentProps<typeof BaseSwitch.Thumb>) {\n  return (\n    <BaseSwitch.Thumb\n      className={cn(\n        // Off: 16px thumb, centered 16px from the track's left edge\n        // (6px offset inside the 2px border).\n        'absolute top-1/2 left-0 size-4 -translate-y-1/2 translate-x-[6px]',\n        'rounded-full bg-outline transition-all duration-200 ease-out',\n        // 40px M3 state layer halo around the thumb on hover.\n        'ring-0 ring-on-surface/[0.08] group-hover:ring-8',\n        // On: thumb grows to 24px, on-primary, 4px shy of the right edge.\n        'data-[checked]:size-6 data-[checked]:translate-x-[22px]',\n        'data-[checked]:bg-on-primary data-[checked]:ring-primary/[0.08]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Convenience `<label>` row pairing the switch 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 Switch = { Root, Thumb, Label }\nexport { Root, Thumb, Label }\n"],"mappings":";;;;AAsBA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAiD;CAC7E,OACE,kBAAC,EAAW,MAAZ;EACE,WAAW,EACT,gFACA,wDACA,2CACA,2DACA,wFACA,qEACA,kCACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EACb,cACA,GAAG,KACuC;CAC1C,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EAGT,qEACA,gEAEA,oDAEA,2DACA,mEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;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,IAAS;CAAE;CAAM;CAAO;AAAM"}

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

@@ -0,0 +1 @@
+export { Switch, Root, Thumb, Label } from './Switch';

package/dist/components/switch/index.js

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

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,41 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { ComponentProps } from 'react';
+/**
+ * Tabs — Material 3 styled wrapper over Base UI's headless Tabs.
+ * Behaviour/accessibility (roving focus, arrow-key navigation, aria-selected
+ * wiring): Base UI (https://base-ui.com/react/components/tabs).
+ * Visuals: M3 primary tabs anatomy — 48px tab row over an outline-variant
+ * divider, label-large labels (on-surface-variant inactive / primary active),
+ * on-surface state layers, and a 3px primary active-indicator bar that slides
+ * between tabs via Base UI's --active-tab-left/--active-tab-width CSS vars.
+ * Design ref: port/core/ui/components/tabs (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Tabs.Root defaultValue="one">
+ *     <Tabs.List>
+ *       <Tabs.Tab value="one">One</Tabs.Tab>
+ *       <Tabs.Tab value="two">Two</Tabs.Tab>
+ *       <Tabs.Indicator />
+ *     </Tabs.List>
+ *     <Tabs.Panel value="one">…</Tabs.Panel>
+ *     <Tabs.Panel value="two">…</Tabs.Panel>
+ *   </Tabs.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseTabs.Root>): import("react").JSX.Element;
+declare function List({ className, ...props }: ComponentProps<typeof BaseTabs.List>): import("react").JSX.Element;
+declare function Tab({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>): import("react").JSX.Element;
+/**
+ * M3 primary active-indicator: a 3px primary bar with rounded top corners that
+ * slides under the active tab. Inset 12px per side to hug the label (the M3
+ * primary variant's content-width indicator) rather than span the full tab.
+ */
+declare function Indicator({ className, ...props }: ComponentProps<typeof BaseTabs.Indicator>): import("react").JSX.Element;
+declare function Panel({ className, ...props }: ComponentProps<typeof BaseTabs.Panel>): import("react").JSX.Element;
+export declare const Tabs: {
+    Root: typeof Root;
+    List: typeof List;
+    Tab: typeof Tab;
+    Indicator: typeof Indicator;
+    Panel: typeof Panel;
+};
+export { Root, List, Tab, Indicator, Panel };

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,45 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Tabs as n } from "@base-ui/react/tabs";
+//#region src/components/tabs/Tabs.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("flex w-full flex-col", r),
+		...i
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.List, {
+		className: e("relative flex flex-row items-end overflow-x-auto border-b border-outline-variant", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Tab, {
+		className: e("flex h-12 min-w-[80px] flex-auto cursor-pointer items-center justify-center gap-2", "whitespace-nowrap px-4 text-label-large text-on-surface-variant sm:min-w-max", "transition-colors hover:bg-on-surface/[0.08]", "data-[active]:text-primary data-[active]:hover:bg-primary/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+function o({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Indicator, {
+		className: e("absolute bottom-0 left-0 h-[3px] rounded-t-full bg-primary", "w-[calc(var(--active-tab-width)-24px)] translate-x-[calc(var(--active-tab-left)+12px)]", "transition-[translate,width] duration-200 ease-out", r),
+		...i
+	});
+}
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Panel, {
+		className: e("flex w-full flex-col gap-4 p-4 text-body-medium text-on-surface", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", r),
+		...i
+	});
+}
+var c = {
+	Root: r,
+	List: i,
+	Tab: a,
+	Indicator: o,
+	Panel: s
+};
+//#endregion
+export { o as Indicator, i as List, s as Panel, r as Root, a as Tab, c as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Tabs — Material 3 styled wrapper over Base UI's headless Tabs.\n * Behaviour/accessibility (roving focus, arrow-key navigation, aria-selected\n * wiring): Base UI (https://base-ui.com/react/components/tabs).\n * Visuals: M3 primary tabs anatomy — 48px tab row over an outline-variant\n * divider, label-large labels (on-surface-variant inactive / primary active),\n * on-surface state layers, and a 3px primary active-indicator bar that slides\n * between tabs via Base UI's --active-tab-left/--active-tab-width CSS vars.\n * Design ref: port/core/ui/components/tabs (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Tabs.Root defaultValue=\"one\">\n *     <Tabs.List>\n *       <Tabs.Tab value=\"one\">One</Tabs.Tab>\n *       <Tabs.Tab value=\"two\">Two</Tabs.Tab>\n *       <Tabs.Indicator />\n *     </Tabs.List>\n *     <Tabs.Panel value=\"one\">…</Tabs.Panel>\n *     <Tabs.Panel value=\"two\">…</Tabs.Panel>\n *   </Tabs.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseTabs.Root>) {\n  return <BaseTabs.Root className={cn('flex w-full flex-col', className)} {...props} />\n}\n\nfunction List({ className, ...props }: ComponentProps<typeof BaseTabs.List>) {\n  return (\n    <BaseTabs.List\n      className={cn(\n        'relative flex flex-row items-end overflow-x-auto border-b border-outline-variant',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Tab({ className, ...props }: ComponentProps<typeof BaseTabs.Tab>) {\n  return (\n    <BaseTabs.Tab\n      className={cn(\n        'flex h-12 min-w-[80px] flex-auto cursor-pointer items-center justify-center gap-2',\n        'whitespace-nowrap px-4 text-label-large text-on-surface-variant sm:min-w-max',\n        'transition-colors hover:bg-on-surface/[0.08]',\n        'data-[active]:text-primary data-[active]:hover:bg-primary/[0.08]',\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * M3 primary active-indicator: a 3px primary bar with rounded top corners that\n * slides under the active tab. Inset 12px per side to hug the label (the M3\n * primary variant's content-width indicator) rather than span the full tab.\n */\nfunction Indicator({ className, ...props }: ComponentProps<typeof BaseTabs.Indicator>) {\n  return (\n    <BaseTabs.Indicator\n      className={cn(\n        'absolute bottom-0 left-0 h-[3px] rounded-t-full bg-primary',\n        'w-[calc(var(--active-tab-width)-24px)] translate-x-[calc(var(--active-tab-left)+12px)]',\n        'transition-[translate,width] duration-200 ease-out',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Panel({ className, ...props }: ComponentProps<typeof BaseTabs.Panel>) {\n  return (\n    <BaseTabs.Panel\n      className={cn(\n        'flex w-full flex-col gap-4 p-4 text-body-medium text-on-surface',\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport const Tabs = { Root, List, Tab, Indicator, Panel }\nexport { Root, List, Tab, Indicator, Panel }\n"],"mappings":";;;;AA2BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAA+C;CAC3E,OAAO,kBAAC,EAAS,MAAV;EAAe,WAAW,EAAG,wBAAwB,CAAS;EAAG,GAAI;CAAQ,CAAA;AACtF;AAEA,SAAS,EAAK,EAAE,cAAW,GAAG,KAA+C;CAC3E,OACE,kBAAC,EAAS,MAAV;EACE,WAAW,EACT,oFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAI,EAAE,cAAW,GAAG,KAA8C;CACzE,OACE,kBAAC,EAAS,KAAV;EACE,WAAW,EACT,qFACA,gFACA,gDACA,oEACA,yFACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAoD;CACrF,OACE,kBAAC,EAAS,WAAV;EACE,WAAW,EACT,8DACA,0FACA,sDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgD;CAC7E,OACE,kBAAC,EAAS,OAAV;EACE,WAAW,EACT,mEACA,yFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAO;CAAE;CAAM;CAAM;CAAK;CAAW;AAAM"}

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

@@ -0,0 +1 @@
+export { Tabs, Root, List, Tab, Indicator, Panel } from './Tabs';

package/dist/components/tabs/index.js

@@ -0,0 +1,2 @@
+import { Indicator as e, List as t, Panel as n, Root as r, Tab as i, Tabs as a } from "./Tabs.js";
+export { e as Indicator, t as List, n as Panel, r as Root, i as Tab, a as Tabs };