@duestel/ui 0.1.0

package/dist/components/number-field/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/components/number-field/NumberField.tsx"],"sourcesContent":["import { NumberField as BaseNumberField } from '@base-ui/react/number-field'\nimport { Minus, MoveHorizontal, Plus } from 'lucide-react'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * NumberField — Material 3 styled wrapper over Base UI's headless Number Field.\n * Behaviour/accessibility (spinbutton semantics, locale-aware parsing/formatting,\n * pointer scrubbing, wheel + keyboard stepping): Base UI\n * (https://base-ui.com/react/components/number-field).\n * Visuals: M3 outlined text field anatomy — 56px field box, extra-small corner,\n * outline border (primary on focus), body-large input text, on-surface-variant\n * stepper icons with state layers.\n * Design ref: port/core/ui/components/text-field (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <NumberField.Root defaultValue={100}>\n *     <NumberField.ScrubArea>\n *       <label>Amount</label>\n *       <NumberField.ScrubAreaCursor />\n *     </NumberField.ScrubArea>\n *     <NumberField.Group>\n *       <NumberField.Decrement />\n *       <NumberField.Input />\n *       <NumberField.Increment />\n *     </NumberField.Group>\n *   </NumberField.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseNumberField.Root>) {\n  return (\n    <BaseNumberField.Root\n      className={cn('flex flex-col items-start gap-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * The visual field box (M3 outlined text field container): outline border,\n * extra-small corner, primary border + ring while the input inside has focus.\n */\nfunction Group({ className, ...props }: ComponentProps<typeof BaseNumberField.Group>) {\n  return (\n    <BaseNumberField.Group\n      className={cn(\n        'flex h-14 items-stretch overflow-hidden rounded-extra-small border border-outline bg-surface',\n        'transition-colors hover:border-on-surface',\n        'focus-within:border-primary focus-within:ring-1 focus-within:ring-primary focus-within:hover:border-primary',\n        'data-[disabled]:pointer-events-none data-[disabled]:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Stepper button that decreases the value; renders a minus icon by default. */\nfunction Decrement({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseNumberField.Decrement>) {\n  return (\n    <BaseNumberField.Decrement\n      className={cn(\n        'flex w-12 shrink-0 cursor-pointer items-center justify-center',\n        'border-r border-outline-variant text-on-surface-variant transition-colors',\n        'hover:bg-on-surface/[0.08] active:bg-on-surface/[0.12]',\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:hover:bg-transparent',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <Minus aria-hidden className=\"size-5\" />}\n    </BaseNumberField.Decrement>\n  )\n}\n\n/** Stepper button that increases the value; renders a plus icon by default. */\nfunction Increment({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseNumberField.Increment>) {\n  return (\n    <BaseNumberField.Increment\n      className={cn(\n        'flex w-12 shrink-0 cursor-pointer items-center justify-center',\n        'border-l border-outline-variant text-on-surface-variant transition-colors',\n        'hover:bg-on-surface/[0.08] active:bg-on-surface/[0.12]',\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n        'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:hover:bg-transparent',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <Plus aria-hidden className=\"size-5\" />}\n    </BaseNumberField.Increment>\n  )\n}\n\nfunction Input({ className, ...props }: ComponentProps<typeof BaseNumberField.Input>) {\n  return (\n    <BaseNumberField.Input\n      className={cn(\n        'h-full w-full min-w-0 bg-transparent px-3 text-center text-body-large tabular-nums',\n        'text-on-surface placeholder:text-on-surface-variant focus:outline-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Click-and-drag area (usually wrapping the label) that scrubs the value\n * horizontally, like a video-editing slider.\n */\nfunction ScrubArea({ className, ...props }: ComponentProps<typeof BaseNumberField.ScrubArea>) {\n  return (\n    <BaseNumberField.ScrubArea\n      className={cn(\n        'cursor-ew-resize select-none text-label-medium text-on-surface-variant',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Virtual cursor shown while scrubbing; renders a horizontal-move icon by default. */\nfunction ScrubAreaCursor({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof BaseNumberField.ScrubAreaCursor>) {\n  return (\n    <BaseNumberField.ScrubAreaCursor\n      className={cn('text-on-surface drop-shadow-sm', className)}\n      {...props}\n    >\n      {children ?? <MoveHorizontal aria-hidden className=\"size-5\" />}\n    </BaseNumberField.ScrubAreaCursor>\n  )\n}\n\nexport const NumberField = {\n  Root,\n  Group,\n  Decrement,\n  Input,\n  Increment,\n  ScrubArea,\n  ScrubAreaCursor,\n}\nexport { Root, Group, Decrement, Input, Increment, ScrubArea, ScrubAreaCursor }\n"],"mappings":";;;;;AA8BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAsD;CAClF,OACE,kBAAC,EAAgB,MAAjB;EACE,WAAW,EAAG,mDAAmD,CAAS;EAC1E,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAuD;CACpF,OACE,kBAAC,EAAgB,OAAjB;EACE,WAAW,EACT,gGACA,6CACA,+GACA,sEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAU,EACjB,cACA,aACA,GAAG,KACgD;CACnD,OACE,kBAAC,EAAgB,WAAjB;EACE,WAAW,EACT,iEACA,6EACA,0DACA,yFACA,qFACA,CACF;EACA,GAAI;YAEH,KAAY,kBAAC,GAAD;GAAO,eAAA;GAAY,WAAU;EAAU,CAAA;CAC3B,CAAA;AAE/B;AAGA,SAAS,EAAU,EACjB,cACA,aACA,GAAG,KACgD;CACnD,OACE,kBAAC,EAAgB,WAAjB;EACE,WAAW,EACT,iEACA,6EACA,0DACA,yFACA,qFACA,CACF;EACA,GAAI;YAEH,KAAY,kBAAC,GAAD;GAAM,eAAA;GAAY,WAAU;EAAU,CAAA;CAC1B,CAAA;AAE/B;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAuD;CACpF,OACE,kBAAC,EAAgB,OAAjB;EACE,WAAW,EACT,sFACA,0EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,EAAU,EAAE,cAAW,GAAG,KAA2D;CAC5F,OACE,kBAAC,EAAgB,WAAjB;EACE,WAAW,EACT,0EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAgB,EACvB,cACA,aACA,GAAG,KACsD;CACzD,OACE,kBAAC,EAAgB,iBAAjB;EACE,WAAW,EAAG,kCAAkC,CAAS;EACzD,GAAI;YAEH,KAAY,kBAAC,GAAD;GAAgB,eAAA;GAAY,WAAU;EAAU,CAAA;CAC9B,CAAA;AAErC;AAEA,IAAa,IAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/number-field/index.d.ts

@@ -0,0 +1 @@
+export { NumberField, Root, Group, Decrement, Input, Increment, ScrubArea, ScrubAreaCursor, } from './NumberField';

package/dist/components/number-field/index.js

@@ -0,0 +1,2 @@
+import { Decrement as e, Group as t, Increment as n, Input as r, NumberField as i, Root as a, ScrubArea as o, ScrubAreaCursor as s } from "./NumberField.js";
+export { e as Decrement, t as Group, n as Increment, r as Input, i as NumberField, a as Root, o as ScrubArea, s as ScrubAreaCursor };

package/dist/components/otp-field/OtpField.d.ts

@@ -0,0 +1,33 @@
+import { OTPFieldPreview as BaseOtpField } from '@base-ui/react/otp-field';
+import { ComponentProps } from 'react';
+/**
+ * OtpField — Material 3 styled wrapper over Base UI's headless OTP Field.
+ * Behaviour/accessibility (per-slot inputs, paste distribution, keyboard
+ * navigation, hidden validation input, autofill via `one-time-code`):
+ * Base UI (https://base-ui.com/react/components/otp-field).
+ * Visuals: each slot is a compact M3 outlined text field — extra-small corner,
+ * outline border, primary focus indicator, error role when invalid,
+ * title-large centered digit. Design ref: port/core/ui/components/text-field
+ * (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <OtpField.Root length={6}>
+ *     <OtpField.Input />
+ *     <OtpField.Input />
+ *     <OtpField.Input />
+ *     <OtpField.Separator />
+ *     <OtpField.Input />
+ *     <OtpField.Input />
+ *     <OtpField.Input />
+ *   </OtpField.Root>
+ */
+declare function Root({ className, ...props }: ComponentProps<typeof BaseOtpField.Root>): import("react").JSX.Element;
+declare function Input({ className, ...props }: ComponentProps<typeof BaseOtpField.Input>): import("react").JSX.Element;
+/** Dash between slot groups (e.g. 123-456); accessible separator role. */
+declare function Separator({ className, ...props }: ComponentProps<typeof BaseOtpField.Separator>): import("react").JSX.Element;
+export declare const OtpField: {
+    Root: typeof Root;
+    Input: typeof Input;
+    Separator: typeof Separator;
+};
+export { Root, Input, Separator };

package/dist/components/otp-field/OtpField.js

@@ -0,0 +1,31 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { OTPFieldPreview as n } from "@base-ui/react/otp-field";
+//#region src/components/otp-field/OtpField.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Root, {
+		className: e("flex items-center gap-2 text-on-surface", r),
+		...i
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Input, {
+		className: e("h-14 w-11 rounded-extra-small border border-outline bg-transparent", "text-center text-title-large text-on-surface caret-primary", "transition-colors selection:bg-primary/[0.12]", "not-disabled:hover:border-on-surface", "focus:border-primary focus:outline-2 focus:-outline-offset-1 focus:outline-primary", "data-[invalid]:border-error data-[invalid]:caret-error", "data-[invalid]:not-disabled:hover:border-error", "data-[invalid]:focus:border-error data-[invalid]:focus:outline-error", "disabled:cursor-not-allowed disabled:opacity-[0.38]", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Separator, {
+		className: e("h-0.5 w-3 shrink-0 rounded-full bg-outline-variant", r),
+		...i
+	});
+}
+var o = {
+	Root: r,
+	Input: i,
+	Separator: a
+};
+//#endregion
+export { i as Input, o as OtpField, r as Root, a as Separator };
+
+//# sourceMappingURL=OtpField.js.map

package/dist/components/otp-field/OtpField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpField.js","names":[],"sources":["../../../src/components/otp-field/OtpField.tsx"],"sourcesContent":["import { OTPFieldPreview as BaseOtpField } from '@base-ui/react/otp-field'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * OtpField — Material 3 styled wrapper over Base UI's headless OTP Field.\n * Behaviour/accessibility (per-slot inputs, paste distribution, keyboard\n * navigation, hidden validation input, autofill via `one-time-code`):\n * Base UI (https://base-ui.com/react/components/otp-field).\n * Visuals: each slot is a compact M3 outlined text field — extra-small corner,\n * outline border, primary focus indicator, error role when invalid,\n * title-large centered digit. Design ref: port/core/ui/components/text-field\n * (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <OtpField.Root length={6}>\n *     <OtpField.Input />\n *     <OtpField.Input />\n *     <OtpField.Input />\n *     <OtpField.Separator />\n *     <OtpField.Input />\n *     <OtpField.Input />\n *     <OtpField.Input />\n *   </OtpField.Root>\n */\n\nfunction Root({ className, ...props }: ComponentProps<typeof BaseOtpField.Root>) {\n  return (\n    <BaseOtpField.Root\n      className={cn('flex items-center gap-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Input({ className, ...props }: ComponentProps<typeof BaseOtpField.Input>) {\n  return (\n    <BaseOtpField.Input\n      className={cn(\n        // Slot box: compact M3 outlined text field.\n        'h-14 w-11 rounded-extra-small border border-outline bg-transparent',\n        'text-center text-title-large text-on-surface caret-primary',\n        'transition-colors selection:bg-primary/[0.12]',\n        // Hover (enabled): outline shifts to the on-surface role.\n        'not-disabled:hover:border-on-surface',\n        // Focused: 2px primary indicator hugging the border (no layout shift).\n        'focus:border-primary focus:outline-2 focus:-outline-offset-1 focus:outline-primary',\n        // Invalid: error role replaces outline/indicator/caret.\n        'data-[invalid]:border-error data-[invalid]:caret-error',\n        'data-[invalid]:not-disabled:hover:border-error',\n        'data-[invalid]:focus:border-error data-[invalid]:focus:outline-error',\n        // Disabled.\n        'disabled:cursor-not-allowed disabled:opacity-[0.38]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Dash between slot groups (e.g. 123-456); accessible separator role. */\nfunction Separator({ className, ...props }: ComponentProps<typeof BaseOtpField.Separator>) {\n  return (\n    <BaseOtpField.Separator\n      className={cn('h-0.5 w-3 shrink-0 rounded-full bg-outline-variant', className)}\n      {...props}\n    />\n  )\n}\n\nexport const OtpField = { Root, Input, Separator }\nexport { Root, Input, Separator }\n"],"mappings":";;;;AA2BA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAmD;CAC/E,OACE,kBAAC,EAAa,MAAd;EACE,WAAW,EAAG,2CAA2C,CAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAoD;CACjF,OACE,kBAAC,EAAa,OAAd;EACE,WAAW,EAET,sEACA,8DACA,iDAEA,wCAEA,sFAEA,0DACA,kDACA,wEAEA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAwD;CACzF,OACE,kBAAC,EAAa,WAAd;EACE,WAAW,EAAG,sDAAsD,CAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAW;CAAE;CAAM;CAAO;AAAU"}

package/dist/components/otp-field/index.d.ts

@@ -0,0 +1 @@
+export { OtpField, Root, Input, Separator } from './OtpField';

package/dist/components/otp-field/index.js

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

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+type PaginationProps = Omit<ComponentProps<'nav'>, 'onChange'> & {
+    /** Total number of pages (≥ 1). */
+    count: number;
+    /** Controlled current page (1-based). */
+    page?: number;
+    /** Uncontrolled initial page. @default 1 */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. @default 1 */
+    siblingCount?: number;
+    /** Show first/last-page chevrons. @default false */
+    showEdges?: boolean;
+    disabled?: boolean;
+};
+declare function Pagination({ count, page, defaultPage, onPageChange, siblingCount, showEdges, disabled, className, ...props }: PaginationProps): import("react").JSX.Element;
+export { Pagination };

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,75 @@
+import { cn as e } from "../../lib/cn.js";
+import { Button as t } from "../button/Button.js";
+import { ChevronLeft as n, ChevronRight as r, ChevronsLeft as i, ChevronsRight as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useState as c } from "react";
+//#region src/components/pagination/Pagination.tsx
+function l(e, t, n) {
+	if (t <= n * 2 + 5) return Array.from({ length: t }, (e, t) => t + 1);
+	let r = Math.max(Math.min(e - n, t - n * 2 - 2), 2), i = Math.min(Math.max(e + n, n * 2 + 3), t - 1);
+	return [
+		1,
+		...r > 2 ? ["ellipsis-start"] : [],
+		...Array.from({ length: i - r + 1 }, (e, t) => r + t),
+		...i < t - 1 ? ["ellipsis-end"] : [],
+		t
+	];
+}
+function u({ count: u, page: d, defaultPage: f = 1, onPageChange: p, siblingCount: m = 1, showEdges: h = !1, disabled: g, className: _, ...v }) {
+	let [y, b] = c(f), x = Math.min(Math.max(d ?? y, 1), u), S = (e) => {
+		let t = Math.min(Math.max(e, 1), u);
+		t !== x && (b(t), p?.(t));
+	};
+	return /* @__PURE__ */ s("nav", {
+		"aria-label": "Pagination",
+		className: e("flex items-center gap-1", _),
+		...v,
+		children: [
+			h && /* @__PURE__ */ o(t.Icon, {
+				variant: "standard",
+				"aria-label": "First page",
+				disabled: g || x === 1,
+				onClick: () => S(1),
+				children: /* @__PURE__ */ o(i, {})
+			}),
+			/* @__PURE__ */ o(t.Icon, {
+				variant: "standard",
+				"aria-label": "Previous page",
+				disabled: g || x === 1,
+				onClick: () => S(x - 1),
+				children: /* @__PURE__ */ o(n, {})
+			}),
+			l(x, u, m).map((t) => typeof t == "number" ? /* @__PURE__ */ o("button", {
+				type: "button",
+				disabled: g,
+				"aria-label": `Page ${t}`,
+				"aria-current": t === x ? "page" : void 0,
+				onClick: () => S(t),
+				className: e("flex size-10 cursor-pointer items-center justify-center rounded-full", "text-label-large text-on-surface transition-colors", "hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", "disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:hover:bg-transparent", t === x && "bg-primary text-on-primary hover:bg-primary-hover"),
+				children: t
+			}, t) : /* @__PURE__ */ o("span", {
+				"aria-hidden": !0,
+				className: "flex size-10 items-end justify-center pb-2 text-label-large text-on-surface-variant select-none",
+				children: "…"
+			}, t)),
+			/* @__PURE__ */ o(t.Icon, {
+				variant: "standard",
+				"aria-label": "Next page",
+				disabled: g || x === u,
+				onClick: () => S(x + 1),
+				children: /* @__PURE__ */ o(r, {})
+			}),
+			h && /* @__PURE__ */ o(t.Icon, {
+				variant: "standard",
+				"aria-label": "Last page",
+				disabled: g || x === u,
+				onClick: () => S(u),
+				children: /* @__PURE__ */ o(a, {})
+			})
+		]
+	});
+}
+//#endregion
+export { u as Pagination };
+
+//# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'\nimport { Button } from '#/components/button'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Pagination — M3-styled page navigation (no port/Base UI counterpart; built\n * from this catalog's conventions: 40px circular targets, primary selected\n * circle, on-surface/8% state layers, label-large type).\n *\n *   <Pagination count={20} defaultPage={1} onPageChange={(page) => …} />\n *\n * Controlled (`page`) or uncontrolled (`defaultPage`), 1-based. Long ranges\n * truncate with ellipses around a sibling window; `showEdges` adds\n * first/last-page chevrons.\n */\n\ntype PageItem = number | 'ellipsis-start' | 'ellipsis-end'\n\n/** First + last always visible; `siblingCount` pages around the current one. */\nfunction getPageItems(page: number, count: number, siblingCount: number): Array<PageItem> {\n  // Everything fits without ellipses: first + last + window + 2 ellipsis slots.\n  if (count <= siblingCount * 2 + 5) {\n    return Array.from({ length: count }, (_, i) => i + 1)\n  }\n\n  const windowStart = Math.max(Math.min(page - siblingCount, count - siblingCount * 2 - 2), 2)\n  const windowEnd = Math.min(Math.max(page + siblingCount, siblingCount * 2 + 3), count - 1)\n\n  return [\n    1,\n    ...(windowStart > 2 ? (['ellipsis-start'] as const) : []),\n    ...Array.from({ length: windowEnd - windowStart + 1 }, (_, i) => windowStart + i),\n    ...(windowEnd < count - 1 ? (['ellipsis-end'] as const) : []),\n    count,\n  ]\n}\n\ntype PaginationProps = Omit<ComponentProps<'nav'>, 'onChange'> & {\n  /** Total number of pages (≥ 1). */\n  count: number\n  /** Controlled current page (1-based). */\n  page?: number\n  /** Uncontrolled initial page. @default 1 */\n  defaultPage?: number\n  onPageChange?: (page: number) => void\n  /** Pages shown on each side of the current page. @default 1 */\n  siblingCount?: number\n  /** Show first/last-page chevrons. @default false */\n  showEdges?: boolean\n  disabled?: boolean\n}\n\nfunction Pagination({\n  count,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  showEdges = false,\n  disabled,\n  className,\n  ...props\n}: PaginationProps) {\n  const [internal, setInternal] = useState(defaultPage)\n  const current = Math.min(Math.max(page ?? internal, 1), count)\n\n  const goTo = (next: number) => {\n    const clamped = Math.min(Math.max(next, 1), count)\n    if (clamped === current) return\n    setInternal(clamped)\n    onPageChange?.(clamped)\n  }\n\n  return (\n    <nav aria-label=\"Pagination\" className={cn('flex items-center gap-1', className)} {...props}>\n      {showEdges && (\n        <Button.Icon\n          variant=\"standard\"\n          aria-label=\"First page\"\n          disabled={disabled || current === 1}\n          onClick={() => goTo(1)}\n        >\n          <ChevronsLeft />\n        </Button.Icon>\n      )}\n      <Button.Icon\n        variant=\"standard\"\n        aria-label=\"Previous page\"\n        disabled={disabled || current === 1}\n        onClick={() => goTo(current - 1)}\n      >\n        <ChevronLeft />\n      </Button.Icon>\n\n      {getPageItems(current, count, siblingCount).map((item) =>\n        typeof item !== 'number' ? (\n          <span\n            key={item}\n            aria-hidden\n            className=\"flex size-10 items-end justify-center pb-2 text-label-large text-on-surface-variant select-none\"\n          >\n            …\n          </span>\n        ) : (\n          <button\n            key={item}\n            type=\"button\"\n            disabled={disabled}\n            aria-label={`Page ${item}`}\n            aria-current={item === current ? 'page' : undefined}\n            onClick={() => goTo(item)}\n            className={cn(\n              'flex size-10 cursor-pointer items-center justify-center rounded-full',\n              'text-label-large text-on-surface transition-colors',\n              'hover:bg-on-surface/[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] disabled:hover:bg-transparent',\n              item === current && 'bg-primary text-on-primary hover:bg-primary-hover',\n            )}\n          >\n            {item}\n          </button>\n        ),\n      )}\n\n      <Button.Icon\n        variant=\"standard\"\n        aria-label=\"Next page\"\n        disabled={disabled || current === count}\n        onClick={() => goTo(current + 1)}\n      >\n        <ChevronRight />\n      </Button.Icon>\n      {showEdges && (\n        <Button.Icon\n          variant=\"standard\"\n          aria-label=\"Last page\"\n          disabled={disabled || current === count}\n          onClick={() => goTo(count)}\n        >\n          <ChevronsRight />\n        </Button.Icon>\n      )}\n    </nav>\n  )\n}\n\nexport { Pagination }\n"],"mappings":";;;;;;AAsBA,SAAS,EAAa,GAAc,GAAe,GAAuC;CAExF,IAAI,KAAS,IAAe,IAAI,GAC9B,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAAM,IAAI,CAAC;CAGtD,IAAM,IAAc,KAAK,IAAI,KAAK,IAAI,IAAO,GAAc,IAAQ,IAAe,IAAI,CAAC,GAAG,CAAC,GACrF,IAAY,KAAK,IAAI,KAAK,IAAI,IAAO,GAAc,IAAe,IAAI,CAAC,GAAG,IAAQ,CAAC;CAEzF,OAAO;EACL;EACA,GAAI,IAAc,IAAK,CAAC,gBAAgB,IAAc,CAAC;EACvD,GAAG,MAAM,KAAK,EAAE,QAAQ,IAAY,IAAc,EAAE,IAAI,GAAG,MAAM,IAAc,CAAC;EAChF,GAAI,IAAY,IAAQ,IAAK,CAAC,cAAc,IAAc,CAAC;EAC3D;CACF;AACF;AAiBA,SAAS,EAAW,EAClB,UACA,SACA,iBAAc,GACd,iBACA,kBAAe,GACf,eAAY,IACZ,aACA,cACA,GAAG,KACe;CAClB,IAAM,CAAC,GAAU,KAAe,EAAS,CAAW,GAC9C,IAAU,KAAK,IAAI,KAAK,IAAI,KAAQ,GAAU,CAAC,GAAG,CAAK,GAEvD,KAAQ,MAAiB;EAC7B,IAAM,IAAU,KAAK,IAAI,KAAK,IAAI,GAAM,CAAC,GAAG,CAAK;EAC7C,MAAY,MAChB,EAAY,CAAO,GACnB,IAAe,CAAO;CACxB;CAEA,OACE,kBAAC,OAAD;EAAK,cAAW;EAAa,WAAW,EAAG,2BAA2B,CAAS;EAAG,GAAI;YAAtF;GACG,KACC,kBAAC,EAAO,MAAR;IACE,SAAQ;IACR,cAAW;IACX,UAAU,KAAY,MAAY;IAClC,eAAe,EAAK,CAAC;cAErB,kBAAC,GAAD,CAAe,CAAA;GACJ,CAAA;GAEf,kBAAC,EAAO,MAAR;IACE,SAAQ;IACR,cAAW;IACX,UAAU,KAAY,MAAY;IAClC,eAAe,EAAK,IAAU,CAAC;cAE/B,kBAAC,GAAD,CAAc,CAAA;GACH,CAAA;GAEZ,EAAa,GAAS,GAAO,CAAY,EAAE,KAAK,MAC/C,OAAO,KAAS,WASd,kBAAC,UAAD;IAEE,MAAK;IACK;IACV,cAAY,QAAQ;IACpB,gBAAc,MAAS,IAAU,SAAS,KAAA;IAC1C,eAAe,EAAK,CAAI;IACxB,WAAW,EACT,wEACA,sDACA,8BACA,yFACA,qFACA,MAAS,KAAW,mDACtB;cAEC;GACK,GAhBD,CAgBC,IAzBR,kBAAC,QAAD;IAEE,eAAA;IACA,WAAU;cACX;GAEK,GALC,CAKD,CAqBV;GAEA,kBAAC,EAAO,MAAR;IACE,SAAQ;IACR,cAAW;IACX,UAAU,KAAY,MAAY;IAClC,eAAe,EAAK,IAAU,CAAC;cAE/B,kBAAC,GAAD,CAAe,CAAA;GACJ,CAAA;GACZ,KACC,kBAAC,EAAO,MAAR;IACE,SAAQ;IACR,cAAW;IACX,UAAU,KAAY,MAAY;IAClC,eAAe,EAAK,CAAK;cAEzB,kBAAC,GAAD,CAAgB,CAAA;GACL,CAAA;EAEZ;;AAET"}

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

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/dist/components/pagination/index.js

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

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,73 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { ComponentProps } from 'react';
+/**
+ * Popover — Material 3 styled wrapper over Base UI's headless Popover.
+ * Behaviour/accessibility (anchoring, focus management, dismiss on
+ * outside-press/Esc): Base UI (https://base-ui.com/react/components/popover).
+ * Visuals: M3 rich tooltip anatomy — surface-container, medium corner,
+ * level-2 elevation, title-small subhead, body-medium supporting text,
+ * text-button action — sized up to dialog-style content when needed.
+ * Design refs: port/core/ui/components/tooltips, port/core/ui/components/dialogs
+ * (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Popover.Root>
+ *     <Popover.Trigger>Open</Popover.Trigger>
+ *     <Popover.Portal>
+ *       <Popover.Positioner sideOffset={8}>
+ *         <Popover.Popup>
+ *           <Popover.Arrow />
+ *           <Popover.Title>Subhead</Popover.Title>
+ *           <Popover.Description>Supporting text.</Popover.Description>
+ *           <Popover.Actions>
+ *             <Popover.Close>Action</Popover.Close>
+ *           </Popover.Actions>
+ *         </Popover.Popup>
+ *       </Popover.Positioner>
+ *     </Popover.Portal>
+ *   </Popover.Root>
+ */
+declare const Root: typeof BasePopover.Root;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Handle: typeof BasePopover.Handle;
+declare const createHandle: typeof BasePopover.createHandle;
+declare function Trigger({ className, ...props }: ComponentProps<typeof BasePopover.Trigger>): import("react").JSX.Element;
+/**
+ * Optional overlay behind the popup. Transparent by default (M3 popovers do
+ * not dim the page) — add `bg-scrim` via className for a modal feel.
+ */
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BasePopover.Backdrop>): import("react").JSX.Element;
+declare function Positioner({ className, sideOffset, ...props }: ComponentProps<typeof BasePopover.Positioner>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BasePopover.Popup>): import("react").JSX.Element;
+/** Pointing arrow; renders an M3 surface-container triangle unless children are given. */
+declare function Arrow({ className, children, ...props }: ComponentProps<typeof BasePopover.Arrow>): import("react").JSX.Element;
+/** Subhead (M3 rich tooltip: title-small, on-surface-variant). */
+declare function Title({ className, ...props }: ComponentProps<typeof BasePopover.Title>): import("react").JSX.Element;
+/** Supporting text (M3 rich tooltip: body-medium, on-surface-variant). */
+declare function Description({ className, ...props }: ComponentProps<typeof BasePopover.Description>): import("react").JSX.Element;
+/** Trailing actions row (M3 rich tooltip: left-aligned text buttons). */
+declare function Actions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Closes the popover; styled as an M3 text button — pair inside <Actions>. */
+declare function Close({ className, ...props }: ComponentProps<typeof BasePopover.Close>): import("react").JSX.Element;
+/**
+ * Transition container for content that swaps between multiple triggers
+ * (only needed with shared popovers via `createHandle`).
+ */
+declare function Viewport({ className, ...props }: ComponentProps<typeof BasePopover.Viewport>): import("react").JSX.Element;
+export declare const Popover: {
+    Root: typeof BasePopover.Root;
+    Trigger: typeof Trigger;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Arrow: typeof Arrow;
+    Title: typeof Title;
+    Description: typeof Description;
+    Actions: typeof Actions;
+    Close: typeof Close;
+    Viewport: typeof Viewport;
+    Handle: typeof BasePopover.Handle;
+    createHandle: typeof BasePopover.createHandle;
+};
+export { Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Title, Description, Actions, Close, Viewport, Handle, createHandle, };

package/dist/components/popover/Popover.js

@@ -0,0 +1,97 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Popover as n } from "@base-ui/react/popover";
+//#region src/components/popover/Popover.tsx
+var r = n.Root, i = n.Portal, a = n.Handle, o = n.createHandle;
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		className: e(r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Backdrop, {
+		className: e("fixed inset-0 z-40 transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", r),
+		...i
+	});
+}
+function l({ className: r, sideOffset: i = 8, ...a }) {
+	return /* @__PURE__ */ t(n.Positioner, {
+		className: e("z-50 outline-none", r),
+		sideOffset: i,
+		...a
+	});
+}
+function u({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Popup, {
+		className: e("flex w-max max-w-[320px] flex-col gap-1", "rounded-medium bg-surface-container p-4 text-on-surface shadow-mm-2", "origin-(--transform-origin) transition-all duration-200 ease-out focus:outline-none", "data-[starting-style]:scale-90 data-[starting-style]:opacity-0", "data-[ending-style]:scale-90 data-[ending-style]:opacity-0", r),
+		...i
+	});
+}
+function d({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ t(n.Arrow, {
+		className: e("data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 data-[side=top]:rotate-180", "data-[side=left]:-right-[13px] data-[side=left]:rotate-90", "data-[side=right]:-left-[13px] data-[side=right]:-rotate-90", r),
+		...a,
+		children: i ?? /* @__PURE__ */ t("svg", {
+			width: "20",
+			height: "10",
+			viewBox: "0 0 20 10",
+			fill: "none",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ t("path", {
+				d: "M0 10 L10 0 L20 10 Z",
+				className: "fill-surface-container"
+			})
+		})
+	});
+}
+function f({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Title, {
+		className: e("m-0 text-title-small text-on-surface-variant", r),
+		...i
+	});
+}
+function p({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Description, {
+		className: e("m-0 text-body-medium text-on-surface-variant", r),
+		...i
+	});
+}
+function m({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("mt-2 -ml-3 flex items-center gap-2", n),
+		...r
+	});
+}
+function h({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Close, {
+		className: e("inline-flex h-10 cursor-pointer items-center justify-center rounded-full px-3", "text-label-large text-primary transition-colors", "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 g({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Viewport, {
+		className: e("relative", r),
+		...i
+	});
+}
+var _ = {
+	Root: r,
+	Trigger: s,
+	Portal: i,
+	Backdrop: c,
+	Positioner: l,
+	Popup: u,
+	Arrow: d,
+	Title: f,
+	Description: p,
+	Actions: m,
+	Close: h,
+	Viewport: g,
+	Handle: a,
+	createHandle: o
+};
+//#endregion
+export { m as Actions, d as Arrow, c as Backdrop, h as Close, p as Description, a as Handle, _ as Popover, u as Popup, i as Portal, l as Positioner, r as Root, f as Title, s as Trigger, g as Viewport, o as createHandle };
+
+//# sourceMappingURL=Popover.js.map

package/dist/components/popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Popover as BasePopover } from '@base-ui/react/popover'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Popover — Material 3 styled wrapper over Base UI's headless Popover.\n * Behaviour/accessibility (anchoring, focus management, dismiss on\n * outside-press/Esc): Base UI (https://base-ui.com/react/components/popover).\n * Visuals: M3 rich tooltip anatomy — surface-container, medium corner,\n * level-2 elevation, title-small subhead, body-medium supporting text,\n * text-button action — sized up to dialog-style content when needed.\n * Design refs: port/core/ui/components/tooltips, port/core/ui/components/dialogs\n * (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Popover.Root>\n *     <Popover.Trigger>Open</Popover.Trigger>\n *     <Popover.Portal>\n *       <Popover.Positioner sideOffset={8}>\n *         <Popover.Popup>\n *           <Popover.Arrow />\n *           <Popover.Title>Subhead</Popover.Title>\n *           <Popover.Description>Supporting text.</Popover.Description>\n *           <Popover.Actions>\n *             <Popover.Close>Action</Popover.Close>\n *           </Popover.Actions>\n *         </Popover.Popup>\n *       </Popover.Positioner>\n *     </Popover.Portal>\n *   </Popover.Root>\n */\n\nconst Root = BasePopover.Root\nconst Portal = BasePopover.Portal\nconst Handle = BasePopover.Handle\nconst createHandle = BasePopover.createHandle\n\nfunction Trigger({ className, ...props }: ComponentProps<typeof BasePopover.Trigger>) {\n  return <BasePopover.Trigger className={cn(className)} {...props} />\n}\n\n/**\n * Optional overlay behind the popup. Transparent by default (M3 popovers do\n * not dim the page) — add `bg-scrim` via className for a modal feel.\n */\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BasePopover.Backdrop>) {\n  return (\n    <BasePopover.Backdrop\n      className={cn(\n        'fixed inset-0 z-40 transition-opacity duration-200 ease-out',\n        'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 8,\n  ...props\n}: ComponentProps<typeof BasePopover.Positioner>) {\n  return (\n    <BasePopover.Positioner\n      className={cn('z-50 outline-none', className)}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction Popup({ className, ...props }: ComponentProps<typeof BasePopover.Popup>) {\n  return (\n    <BasePopover.Popup\n      className={cn(\n        'flex w-max max-w-[320px] flex-col gap-1',\n        'rounded-medium bg-surface-container p-4 text-on-surface shadow-mm-2',\n        'origin-(--transform-origin) transition-all duration-200 ease-out focus:outline-none',\n        'data-[starting-style]:scale-90 data-[starting-style]:opacity-0',\n        'data-[ending-style]:scale-90 data-[ending-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Pointing arrow; renders an M3 surface-container triangle unless children are given. */\nfunction Arrow({ className, children, ...props }: ComponentProps<typeof BasePopover.Arrow>) {\n  return (\n    <BasePopover.Arrow\n      className={cn(\n        'data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 data-[side=top]:rotate-180',\n        'data-[side=left]:-right-[13px] data-[side=left]:rotate-90',\n        'data-[side=right]:-left-[13px] data-[side=right]:-rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" aria-hidden>\n          <path d=\"M0 10 L10 0 L20 10 Z\" className=\"fill-surface-container\" />\n        </svg>\n      )}\n    </BasePopover.Arrow>\n  )\n}\n\n/** Subhead (M3 rich tooltip: title-small, on-surface-variant). */\nfunction Title({ className, ...props }: ComponentProps<typeof BasePopover.Title>) {\n  return (\n    <BasePopover.Title\n      className={cn('m-0 text-title-small text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Supporting text (M3 rich tooltip: body-medium, on-surface-variant). */\nfunction Description({ className, ...props }: ComponentProps<typeof BasePopover.Description>) {\n  return (\n    <BasePopover.Description\n      className={cn('m-0 text-body-medium text-on-surface-variant', className)}\n      {...props}\n    />\n  )\n}\n\n/** Trailing actions row (M3 rich tooltip: left-aligned text buttons). */\nfunction Actions({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cn('mt-2 -ml-3 flex items-center gap-2', className)} {...props} />\n}\n\n/** Closes the popover; styled as an M3 text button — pair inside <Actions>. */\nfunction Close({ className, ...props }: ComponentProps<typeof BasePopover.Close>) {\n  return (\n    <BasePopover.Close\n      className={cn(\n        'inline-flex h-10 cursor-pointer items-center justify-center rounded-full px-3',\n        'text-label-large text-primary transition-colors',\n        'hover:bg-primary/[0.08] 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 * Transition container for content that swaps between multiple triggers\n * (only needed with shared popovers via `createHandle`).\n */\nfunction Viewport({ className, ...props }: ComponentProps<typeof BasePopover.Viewport>) {\n  return <BasePopover.Viewport className={cn('relative', className)} {...props} />\n}\n\nexport const Popover = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Title,\n  Description,\n  Actions,\n  Close,\n  Viewport,\n  Handle,\n  createHandle,\n}\nexport {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Title,\n  Description,\n  Actions,\n  Close,\n  Viewport,\n  Handle,\n  createHandle,\n}\n"],"mappings":";;;;AAiCA,IAAM,IAAO,EAAY,MACnB,IAAS,EAAY,QACrB,IAAS,EAAY,QACrB,IAAe,EAAY;AAEjC,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAqD;CACpF,OAAO,kBAAC,EAAY,SAAb;EAAqB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACpE;AAMA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAsD;CACtF,OACE,kBAAC,EAAY,UAAb;EACE,WAAW,EACT,+DACA,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,cACA,gBAAa,GACb,GAAG,KAC6C;CAChD,OACE,kBAAC,EAAY,YAAb;EACE,WAAW,EAAG,qBAAqB,CAAS;EAChC;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAmD;CAChF,OACE,kBAAC,EAAY,OAAb;EACE,WAAW,EACT,2CACA,uEACA,uFACA,kEACA,8DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,aAAU,GAAG,KAAmD;CAC1F,OACE,kBAAC,EAAY,OAAb;EACE,WAAW,EACT,kFACA,6DACA,+DACA,CACF;EACA,GAAI;YAEH,KACC,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAA;aAC1D,kBAAC,QAAD;IAAM,GAAE;IAAuB,WAAU;GAA0B,CAAA;EAChE,CAAA;CAEU,CAAA;AAEvB;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAmD;CAChF,OACE,kBAAC,EAAY,OAAb;EACE,WAAW,EAAG,gDAAgD,CAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAyD;CAC5F,OACE,kBAAC,EAAY,aAAb;EACE,WAAW,EAAG,gDAAgD,CAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAgC;CAC/D,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,sCAAsC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC1F;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAmD;CAChF,OACE,kBAAC,EAAY,OAAb;EACE,WAAW,EACT,iFACA,mDACA,gHACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAsD;CACtF,OAAO,kBAAC,EAAY,UAAb;EAAsB,WAAW,EAAG,YAAY,CAAS;EAAG,GAAI;CAAQ,CAAA;AACjF;AAEA,IAAa,IAAU;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

@@ -0,0 +1 @@
+export { Popover, Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Title, Description, Actions, Close, Viewport, Handle, createHandle, } from './Popover';

package/dist/components/popover/index.js

@@ -0,0 +1,2 @@
+import { Actions as e, Arrow as t, Backdrop as n, Close as r, Description as i, Handle as a, Popover as o, Popup as s, Portal as c, Positioner as l, Root as u, Title as d, Trigger as f, Viewport as p, createHandle as m } from "./Popover.js";
+export { e as Actions, t as Arrow, n as Backdrop, r as Close, i as Description, a as Handle, o as Popover, s as Popup, c as Portal, l as Positioner, u as Root, d as Title, f as Trigger, p as Viewport, m as createHandle };

package/dist/components/preview-card/PreviewCard.d.ts

@@ -0,0 +1,60 @@
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { ComponentProps } from 'react';
+/**
+ * PreviewCard — Material 3 styled wrapper over Base UI's headless Preview Card.
+ * Behaviour/accessibility (hover/focus open with delays, anchor positioning,
+ * dismiss on Esc/outside press): Base UI
+ * (https://base-ui.com/react/components/preview-card).
+ * Visuals: M3 rich-tooltip/card anatomy — surface-container at elevation 2,
+ * medium (12px) corner, title-small subhead, body-medium supporting text;
+ * trigger styled as an M3 primary link.
+ * Design ref: port/core/ui/components/cards + tooltips (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <PreviewCard.Root>
+ *     <PreviewCard.Trigger href="…">@handle</PreviewCard.Trigger>
+ *     <PreviewCard.Portal>
+ *       <PreviewCard.Positioner>
+ *         <PreviewCard.Popup>
+ *           <PreviewCard.Arrow />
+ *           <PreviewCard.Title>Duestel</PreviewCard.Title>
+ *           <PreviewCard.Description>Supporting text…</PreviewCard.Description>
+ *         </PreviewCard.Popup>
+ *       </PreviewCard.Positioner>
+ *     </PreviewCard.Portal>
+ *   </PreviewCard.Root>
+ */
+declare const Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => import("react").JSX.Element;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').PreviewCardPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/** Imperative handle connecting a PreviewCard.Root with detached triggers. */
+declare const Handle: typeof BasePreviewCard.Handle;
+declare const createHandle: typeof BasePreviewCard.createHandle;
+/** Link that opens the preview card on hover/focus — M3 primary text link. */
+declare function Trigger({ className, ...props }: ComponentProps<typeof BasePreviewCard.Trigger>): import("react").JSX.Element;
+/** Invisible click-capture layer behind the card (preview cards use no scrim). */
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BasePreviewCard.Backdrop>): import("react").JSX.Element;
+declare function Positioner({ className, sideOffset, ...props }: ComponentProps<typeof BasePreviewCard.Positioner>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BasePreviewCard.Popup>): import("react").JSX.Element;
+/** Pointer toward the anchor — renders a surface-container chevron by default. */
+declare function Arrow({ className, children, ...props }: ComponentProps<typeof BasePreviewCard.Arrow>): import("react").JSX.Element;
+/** Transition container — only needed when one card is shared by several triggers. */
+declare function Viewport({ className, ...props }: ComponentProps<typeof BasePreviewCard.Viewport>): import("react").JSX.Element;
+/** M3 rich-tooltip subhead (title-small) — plain styled div, not a Base UI part. */
+declare function Title({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** M3 supporting text (body-medium) — plain styled div, not a Base UI part. */
+declare function Description({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare const PreviewCard: {
+    Root: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => import("react").JSX.Element;
+    Trigger: typeof Trigger;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').PreviewCardPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Positioner: typeof Positioner;
+    Popup: typeof Popup;
+    Arrow: typeof Arrow;
+    Viewport: typeof Viewport;
+    Title: typeof Title;
+    Description: typeof Description;
+    Handle: typeof BasePreviewCard.Handle;
+    createHandle: typeof BasePreviewCard.createHandle;
+};
+export { Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Viewport, Title, Description, Handle, createHandle, };

package/dist/components/preview-card/PreviewCard.js

@@ -0,0 +1,83 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { PreviewCard as n } from "@base-ui/react/preview-card";
+//#region src/components/preview-card/PreviewCard.tsx
+var r = n.Root, i = n.Portal, a = n.Handle, o = n.createHandle;
+function s({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		className: e("cursor-pointer rounded-extra-small text-primary underline decoration-1 underline-offset-2", "transition-colors hover:text-primary-hover", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", r),
+		...i
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Backdrop, {
+		className: e("fixed inset-0 z-40", r),
+		...i
+	});
+}
+function l({ className: r, sideOffset: i = 8, ...a }) {
+	return /* @__PURE__ */ t(n.Positioner, {
+		className: e("z-50 outline-none", r),
+		sideOffset: i,
+		...a
+	});
+}
+function u({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Popup, {
+		className: e("flex min-w-[200px] max-w-[320px] flex-col gap-2", "rounded-medium bg-surface-container p-4 text-on-surface shadow-mm-2", "origin-(--transform-origin) transition-[opacity,transform] duration-150 ease-out focus:outline-none", "data-[starting-style]:scale-95 data-[starting-style]:opacity-0", "data-[ending-style]:scale-95 data-[ending-style]:opacity-0", r),
+		...i
+	});
+}
+function d({ className: r, children: i, ...a }) {
+	return /* @__PURE__ */ t(n.Arrow, {
+		className: e("flex", "data-[side=top]:-bottom-2 data-[side=top]:rotate-180", "data-[side=bottom]:-top-2", "data-[side=left]:-right-[13px] data-[side=left]:-rotate-90", "data-[side=right]:-left-[13px] data-[side=right]:rotate-90", r),
+		...a,
+		children: i ?? /* @__PURE__ */ t("svg", {
+			width: "20",
+			height: "10",
+			viewBox: "0 0 20 10",
+			fill: "none",
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ t("path", {
+				d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+				className: "fill-surface-container"
+			})
+		})
+	});
+}
+function f({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Viewport, {
+		className: e("relative flex flex-col", r),
+		...i
+	});
+}
+function p({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("text-title-small text-on-surface", n),
+		...r
+	});
+}
+function m({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("text-body-medium text-on-surface-variant", n),
+		...r
+	});
+}
+var h = {
+	Root: r,
+	Trigger: s,
+	Portal: i,
+	Backdrop: c,
+	Positioner: l,
+	Popup: u,
+	Arrow: d,
+	Viewport: f,
+	Title: p,
+	Description: m,
+	Handle: a,
+	createHandle: o
+};
+//#endregion
+export { d as Arrow, c as Backdrop, m as Description, a as Handle, u as Popup, i as Portal, l as Positioner, h as PreviewCard, r as Root, p as Title, s as Trigger, f as Viewport, o as createHandle };
+
+//# sourceMappingURL=PreviewCard.js.map

package/dist/components/preview-card/PreviewCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCard.js","names":[],"sources":["../../../src/components/preview-card/PreviewCard.tsx"],"sourcesContent":["import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * PreviewCard — Material 3 styled wrapper over Base UI's headless Preview Card.\n * Behaviour/accessibility (hover/focus open with delays, anchor positioning,\n * dismiss on Esc/outside press): Base UI\n * (https://base-ui.com/react/components/preview-card).\n * Visuals: M3 rich-tooltip/card anatomy — surface-container at elevation 2,\n * medium (12px) corner, title-small subhead, body-medium supporting text;\n * trigger styled as an M3 primary link.\n * Design ref: port/core/ui/components/cards + tooltips (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <PreviewCard.Root>\n *     <PreviewCard.Trigger href=\"…\">@handle</PreviewCard.Trigger>\n *     <PreviewCard.Portal>\n *       <PreviewCard.Positioner>\n *         <PreviewCard.Popup>\n *           <PreviewCard.Arrow />\n *           <PreviewCard.Title>Duestel</PreviewCard.Title>\n *           <PreviewCard.Description>Supporting text…</PreviewCard.Description>\n *         </PreviewCard.Popup>\n *       </PreviewCard.Positioner>\n *     </PreviewCard.Portal>\n *   </PreviewCard.Root>\n */\n\nconst Root = BasePreviewCard.Root\nconst Portal = BasePreviewCard.Portal\n/** Imperative handle connecting a PreviewCard.Root with detached triggers. */\nconst Handle = BasePreviewCard.Handle\nconst createHandle = BasePreviewCard.createHandle\n\n/** Link that opens the preview card on hover/focus — M3 primary text link. */\nfunction Trigger({ className, ...props }: ComponentProps<typeof BasePreviewCard.Trigger>) {\n  return (\n    <BasePreviewCard.Trigger\n      className={cn(\n        'cursor-pointer rounded-extra-small text-primary underline decoration-1 underline-offset-2',\n        'transition-colors hover:text-primary-hover',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Invisible click-capture layer behind the card (preview cards use no scrim). */\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BasePreviewCard.Backdrop>) {\n  return <BasePreviewCard.Backdrop className={cn('fixed inset-0 z-40', className)} {...props} />\n}\n\nfunction Positioner({\n  className,\n  sideOffset = 8,\n  ...props\n}: ComponentProps<typeof BasePreviewCard.Positioner>) {\n  return (\n    <BasePreviewCard.Positioner\n      className={cn('z-50 outline-none', className)}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction Popup({ className, ...props }: ComponentProps<typeof BasePreviewCard.Popup>) {\n  return (\n    <BasePreviewCard.Popup\n      className={cn(\n        'flex min-w-[200px] max-w-[320px] flex-col gap-2',\n        'rounded-medium bg-surface-container p-4 text-on-surface shadow-mm-2',\n        'origin-(--transform-origin) transition-[opacity,transform] duration-150 ease-out focus:outline-none',\n        'data-[starting-style]:scale-95 data-[starting-style]:opacity-0',\n        'data-[ending-style]:scale-95 data-[ending-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Pointer toward the anchor — renders a surface-container chevron by default. */\nfunction Arrow({ className, children, ...props }: ComponentProps<typeof BasePreviewCard.Arrow>) {\n  return (\n    <BasePreviewCard.Arrow\n      className={cn(\n        'flex',\n        'data-[side=top]:-bottom-2 data-[side=top]:rotate-180',\n        'data-[side=bottom]:-top-2',\n        'data-[side=left]:-right-[13px] data-[side=left]:-rotate-90',\n        'data-[side=right]:-left-[13px] data-[side=right]:rotate-90',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" aria-hidden>\n          <path\n            d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n            className=\"fill-surface-container\"\n          />\n        </svg>\n      )}\n    </BasePreviewCard.Arrow>\n  )\n}\n\n/** Transition container — only needed when one card is shared by several triggers. */\nfunction Viewport({ className, ...props }: ComponentProps<typeof BasePreviewCard.Viewport>) {\n  return <BasePreviewCard.Viewport className={cn('relative flex flex-col', className)} {...props} />\n}\n\n/** M3 rich-tooltip subhead (title-small) — plain styled div, not a Base UI part. */\nfunction Title({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cn('text-title-small text-on-surface', className)} {...props} />\n}\n\n/** M3 supporting text (body-medium) — plain styled div, not a Base UI part. */\nfunction Description({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cn('text-body-medium text-on-surface-variant', className)} {...props} />\n}\n\nexport const PreviewCard = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Viewport,\n  Title,\n  Description,\n  Handle,\n  createHandle,\n}\nexport {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Positioner,\n  Popup,\n  Arrow,\n  Viewport,\n  Title,\n  Description,\n  Handle,\n  createHandle,\n}\n"],"mappings":";;;;AA8BA,IAAM,IAAO,EAAgB,MACvB,IAAS,EAAgB,QAEzB,IAAS,EAAgB,QACzB,IAAe,EAAgB;AAGrC,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAyD;CACxF,OACE,kBAAC,EAAgB,SAAjB;EACE,WAAW,EACT,6FACA,8CACA,wFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA0D;CAC1F,OAAO,kBAAC,EAAgB,UAAjB;EAA0B,WAAW,EAAG,sBAAsB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC/F;AAEA,SAAS,EAAW,EAClB,cACA,gBAAa,GACb,GAAG,KACiD;CACpD,OACE,kBAAC,EAAgB,YAAjB;EACE,WAAW,EAAG,qBAAqB,CAAS;EAChC;EACZ,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAuD;CACpF,OACE,kBAAC,EAAgB,OAAjB;EACE,WAAW,EACT,mDACA,uEACA,uGACA,kEACA,8DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAGA,SAAS,EAAM,EAAE,cAAW,aAAU,GAAG,KAAuD;CAC9F,OACE,kBAAC,EAAgB,OAAjB;EACE,WAAW,EACT,QACA,wDACA,6BACA,8DACA,8DACA,CACF;EACA,GAAI;YAEH,KACC,kBAAC,OAAD;GAAK,OAAM;GAAK,QAAO;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAA;aAC1D,kBAAC,QAAD;IACE,GAAE;IACF,WAAU;GACX,CAAA;EACE,CAAA;CAEc,CAAA;AAE3B;AAGA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA0D;CAC1F,OAAO,kBAAC,EAAgB,UAAjB;EAA0B,WAAW,EAAG,0BAA0B,CAAS;EAAG,GAAI;CAAQ,CAAA;AACnG;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAgC;CAC7D,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,oCAAoC,CAAS;EAAG,GAAI;CAAQ,CAAA;AACxF;AAGA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAgC;CACnE,OAAO,kBAAC,OAAD;EAAK,WAAW,EAAG,4CAA4C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChG;AAEA,IAAa,IAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/preview-card/index.d.ts

@@ -0,0 +1 @@
+export { PreviewCard, Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Viewport, Title, Description, Handle, createHandle, } from './PreviewCard';

package/dist/components/preview-card/index.js

@@ -0,0 +1,2 @@
+import { Arrow as e, Backdrop as t, Description as n, Handle as r, Popup as i, Portal as a, Positioner as o, PreviewCard as s, Root as c, Title as l, Trigger as u, Viewport as d, createHandle as f } from "./PreviewCard.js";
+export { e as Arrow, t as Backdrop, n as Description, r as Handle, i as Popup, a as Portal, o as Positioner, s as PreviewCard, c as Root, l as Title, u as Trigger, d as Viewport, f as createHandle };