@duestel/ui 0.1.0

package/dist/components/data-table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/data-table/Table.tsx"],"sourcesContent":["import { cn } from '#/lib/cn'\n\nimport type { ComponentProps, ReactNode } from 'react'\n\n/**\n * Table — ported from port/core/ui/components/data-table (see CLAUDE.md):\n * auto-layout table in an overflow-auto shell, surface-container header\n * (body-medium, 500), zebra body rows (odd rows surface-container/50),\n * 16/12px cell padding, body-medium cells on body-small base.\n *\n * Compound API mirrors the port:\n *   <Table>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.HeaderCell>Name</Table.HeaderCell>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       <Table.Row>\n *         <Table.Cell>…</Table.Cell>\n *       </Table.Row>\n *     </Table.Body>\n *   </Table>\n *\n * <TextContainer width=\"w-[300px]\"> wraps long cell copy at a fixed width.\n * Cells accept `data` as an alternative to children (port API).\n */\n\nfunction TableRoot({ className, children, ...props }: ComponentProps<'table'>) {\n  return (\n    <div className=\"overflow-auto\">\n      <table\n        className={cn(\n          'w-full table-auto overflow-clip text-body-small text-on-surface',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </table>\n    </div>\n  )\n}\n\nfunction Head({ className, ...props }: ComponentProps<'thead'>) {\n  return (\n    <thead className={cn('bg-surface-container text-body-medium', className)} {...props} />\n  )\n}\n\nfunction Body({ className, ...props }: ComponentProps<'tbody'>) {\n  return <tbody className={cn('text-body-medium', className)} {...props} />\n}\n\nfunction Row({ className, ...props }: ComponentProps<'tr'>) {\n  return (\n    <tr className={cn('overflow-hidden odd:bg-surface-container/50', className)} {...props} />\n  )\n}\n\ntype CellProps = ComponentProps<'th'> & {\n  /** Cell content, port API alternative to children. */\n  data?: ReactNode\n}\n\nfunction HeaderCell({ className, children, data, ...props }: CellProps) {\n  return (\n    <th\n      className={cn('min-w-max overflow-hidden px-4 py-3 text-left font-medium', className)}\n      {...props}\n    >\n      <div className=\"flex h-full w-full min-w-max flex-wrap\">{children ?? data}</div>\n    </th>\n  )\n}\n\nfunction Cell({ className, children, data, ...props }: ComponentProps<'td'> & { data?: ReactNode }) {\n  return (\n    <td className={cn('min-w-max px-4 py-3 pr-8', className)} {...props}>\n      <span className=\"flex sm:min-w-max\">{children ?? data}</span>\n    </td>\n  )\n}\n\ntype TextContainerProps = ComponentProps<'div'> & {\n  /** Tailwind width class for the text column. @default 'w-[300px]' */\n  width?: string\n  data?: ReactNode\n}\n\n/** Fixed-width wrapper for long cell copy (port API). */\nfunction TextContainer({ className, children, data, width, ...props }: TextContainerProps) {\n  return (\n    <div className={cn('flex', width ?? 'w-[300px]', className)} {...props}>\n      {children ?? data}\n    </div>\n  )\n}\n\nexport const Table = Object.assign(TableRoot, {\n  Head,\n  Body,\n  Row,\n  HeaderCell,\n  Cell,\n})\nexport { TextContainer }\n"],"mappings":";;;AA4BA,SAAS,EAAU,EAAE,cAAW,aAAU,GAAG,KAAkC;CAC7E,OACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,SAAD;GACE,WAAW,EACT,mEACA,CACF;GACA,GAAI;GAEH;EACI,CAAA;CACJ,CAAA;AAET;AAEA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAkC;CAC9D,OACE,kBAAC,SAAD;EAAO,WAAW,EAAG,yCAAyC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAE1F;AAEA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAkC;CAC9D,OAAO,kBAAC,SAAD;EAAO,WAAW,EAAG,oBAAoB,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC1E;AAEA,SAAS,EAAI,EAAE,cAAW,GAAG,KAA+B;CAC1D,OACE,kBAAC,MAAD;EAAI,WAAW,EAAG,+CAA+C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAE7F;AAOA,SAAS,EAAW,EAAE,cAAW,aAAU,SAAM,GAAG,KAAoB;CACtE,OACE,kBAAC,MAAD;EACE,WAAW,EAAG,6DAA6D,CAAS;EACpF,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAU;aAA0C,KAAY;EAAU,CAAA;CAC7E,CAAA;AAER;AAEA,SAAS,EAAK,EAAE,cAAW,aAAU,SAAM,GAAG,KAAsD;CAClG,OACE,kBAAC,MAAD;EAAI,WAAW,EAAG,4BAA4B,CAAS;EAAG,GAAI;YAC5D,kBAAC,QAAD;GAAM,WAAU;aAAqB,KAAY;EAAW,CAAA;CAC1D,CAAA;AAER;AASA,SAAS,EAAc,EAAE,cAAW,aAAU,SAAM,UAAO,GAAG,KAA6B;CACzF,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,QAAQ,KAAS,aAAa,CAAS;EAAG,GAAI;YAC9D,KAAY;CACV,CAAA;AAET;AAEA,IAAa,IAAQ,OAAO,OAAO,GAAW;CAC5C;CACA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,3 @@
+export { Table, TextContainer } from './Table';
+export { DataTable } from './DataTable';
+export type { ColumnDef } from './DataTable';

package/dist/components/data-table/index.js

@@ -0,0 +1,3 @@
+import { Table as e, TextContainer as t } from "./Table.js";
+import { DataTable as n } from "./DataTable.js";
+export { n as DataTable, e as Table, t as TextContainer };

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,63 @@
+import { Input } from '../../../components/form/Input';
+import { ComponentProps, ReactNode } from 'react';
+type CalendarBounds = {
+    /** Earliest selectable day (inclusive). */
+    min?: Date;
+    /** Latest selectable day (inclusive). */
+    max?: Date;
+    /** Disable arbitrary days (e.g. weekends, booked dates). */
+    disabledDate?: (date: Date) => boolean;
+    locale?: string;
+};
+type CalendarProps = CalendarBounds & {
+    selected: Date | null;
+    onSelect: (date: Date) => void;
+};
+/** Single-date month grid — usable standalone (inline calendars, widgets). */
+declare function Calendar({ selected, onSelect, ...bounds }: CalendarProps): import("react").JSX.Element;
+type DateRange = {
+    from: Date | null;
+    to: Date | null;
+};
+type RangeCalendarProps = CalendarBounds & {
+    range: DateRange;
+    onPick: (date: Date) => void;
+};
+/** Range month grid: endpoint circles + secondary-container band between. */
+declare function RangeCalendar({ range, onPick, ...bounds }: RangeCalendarProps): import("react").JSX.Element;
+type PickerBaseProps = CalendarBounds & {
+    label?: ReactNode;
+    disabled?: boolean;
+    name?: string;
+    /** @default { year: 'numeric', month: 'short', day: 'numeric' } */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** Field variant, port skins. @default 'outlined' */
+    variant?: ComponentProps<typeof Input>['variant'];
+    className?: string;
+};
+type DatePickerProps = PickerBaseProps & {
+    /** Controlled selected date. */
+    value?: Date | null;
+    /** Uncontrolled initial date. */
+    defaultValue?: Date | null;
+    onChange?: (date: Date) => void;
+};
+declare function DatePicker({ value, defaultValue, onChange, label, disabled, name, locale, formatOptions, variant, className, ...bounds }: DatePickerProps): import("react").JSX.Element;
+type DateRangePickerProps = PickerBaseProps & {
+    /** Controlled range ({ from, to } — either side may be null mid-selection). */
+    value?: DateRange;
+    /** Uncontrolled initial range. */
+    defaultValue?: DateRange;
+    /** Fired once both ends are picked. */
+    onChange?: (range: {
+        from: Date;
+        to: Date;
+    }) => void;
+};
+/**
+ * Range variant: first click sets the start, second completes the range
+ * (swapping if picked backwards) and closes; a third starts over.
+ */
+declare function DateRangePicker({ value, defaultValue, onChange, label, disabled, name, locale, formatOptions, variant, className, ...bounds }: DateRangePickerProps): import("react").JSX.Element;
+export { DatePicker, DateRangePicker, Calendar, RangeCalendar };
+export type { DateRange };

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,247 @@
+import { cn as e } from "../../lib/cn.js";
+import { Button as t } from "../button/Button.js";
+import { Input as n } from "../form/Input.js";
+import { Popover as r } from "../popover/Popover.js";
+import { CalendarDays as i, ChevronDown as a, ChevronLeft as o, ChevronRight as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useMemo as u, useState as d } from "react";
+//#region src/components/date-picker/DatePicker.tsx
+function f(e) {
+	return new Date(e.getFullYear(), e.getMonth(), 1);
+}
+function p(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function m(e, t) {
+	return !!e && e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function h({ locale: n, min: r, max: i, disabledDate: h, initialMonth: g, dayState: _, onPick: v }) {
+	let [y, b] = d(() => f(g)), [x, S] = d("days"), C = /* @__PURE__ */ new Date(), w = y.getFullYear(), T = y.getMonth(), E = u(() => new Intl.DateTimeFormat(n, {
+		month: "long",
+		year: "numeric"
+	}).format(y), [n, y]), D = u(() => {
+		let e = new Intl.DateTimeFormat(n, { weekday: "narrow" });
+		return Array.from({ length: 7 }, (t, n) => e.format(new Date(2023, 0, 1 + n)));
+	}, [n]), O = r ? p(r) : null, k = i ? p(i) : null, A = (e) => O !== null && e < O || k !== null && e > k || !!h?.(e);
+	if (x === "years") {
+		let n = w - (w % 12 + 12) % 12, r = Array.from({ length: 12 }, (e, t) => n + t);
+		return /* @__PURE__ */ l("div", {
+			className: "flex w-[280px] flex-col gap-2",
+			children: [/* @__PURE__ */ l("div", {
+				className: "flex items-center justify-between",
+				children: [
+					/* @__PURE__ */ c(t.Icon, {
+						variant: "standard",
+						"aria-label": "Previous years",
+						disabled: O !== null && n - 1 < O.getFullYear(),
+						onClick: () => b(new Date(w - 12, T, 1)),
+						children: /* @__PURE__ */ c(o, {})
+					}),
+					/* @__PURE__ */ l("span", {
+						className: "text-title-small text-on-surface",
+						children: [
+							n,
+							" – ",
+							n + 11
+						]
+					}),
+					/* @__PURE__ */ c(t.Icon, {
+						variant: "standard",
+						"aria-label": "Next years",
+						disabled: k !== null && n + 12 > k.getFullYear(),
+						onClick: () => b(new Date(w + 12, T, 1)),
+						children: /* @__PURE__ */ c(s, {})
+					})
+				]
+			}), /* @__PURE__ */ c("div", {
+				className: "grid grid-cols-3 gap-1",
+				children: r.map((t) => /* @__PURE__ */ c("button", {
+					type: "button",
+					disabled: O !== null && t < O.getFullYear() || k !== null && t > k.getFullYear(),
+					onClick: () => {
+						b(new Date(t, T, 1)), S("days");
+					},
+					className: e("flex h-9 cursor-pointer items-center justify-center rounded-full", "text-body-small 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 === w && "bg-primary text-on-primary hover:bg-primary-hover"),
+					children: t
+				}, t))
+			})]
+		});
+	}
+	let j = new Date(w, T, 1).getDay(), M = new Date(w, T + 1, 0).getDate(), N = [...Array.from({ length: j }, () => null), ...Array.from({ length: M }, (e, t) => t + 1)], P = O !== null && new Date(w, T, 0) < O, F = k !== null && new Date(w, T + 1, 1) > k;
+	return /* @__PURE__ */ l("div", {
+		className: "flex w-[280px] flex-col gap-2",
+		children: [/* @__PURE__ */ l("div", {
+			className: "flex items-center justify-between",
+			children: [
+				/* @__PURE__ */ c(t.Icon, {
+					variant: "standard",
+					"aria-label": "Previous month",
+					disabled: P,
+					onClick: () => b(new Date(w, T - 1, 1)),
+					children: /* @__PURE__ */ c(o, {})
+				}),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: () => S("years"),
+					className: e("flex h-8 cursor-pointer items-center gap-1 rounded-full px-2", "text-title-small text-on-surface transition-colors hover:bg-on-surface/[0.08]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"),
+					children: [E, /* @__PURE__ */ c(a, {
+						"aria-hidden": !0,
+						className: "size-4 text-on-surface-variant"
+					})]
+				}),
+				/* @__PURE__ */ c(t.Icon, {
+					variant: "standard",
+					"aria-label": "Next month",
+					disabled: F,
+					onClick: () => b(new Date(w, T + 1, 1)),
+					children: /* @__PURE__ */ c(s, {})
+				})
+			]
+		}), /* @__PURE__ */ l("div", {
+			className: "grid grid-cols-7",
+			children: [D.map((e, t) => /* @__PURE__ */ c("span", {
+				className: "flex size-10 items-center justify-center text-body-small text-on-surface-variant",
+				children: e
+			}, t)), N.map((t, n) => {
+				if (t === null) return /* @__PURE__ */ c("span", {}, `pad-${n}`);
+				let r = new Date(w, T, t), { selected: i, inRange: a } = _(r);
+				return /* @__PURE__ */ c("button", {
+					type: "button",
+					disabled: A(r),
+					onClick: () => v(r),
+					className: e("flex size-10 cursor-pointer items-center justify-center rounded-full", "text-body-small 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", m(C, r) && !i && !a && "border border-outline text-primary", a && "rounded-none bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover", i && "rounded-full border-0 bg-primary text-on-primary hover:bg-primary-hover"),
+					children: t
+				}, t);
+			})]
+		})]
+	});
+}
+function g({ selected: e, onSelect: t, ...n }) {
+	return /* @__PURE__ */ c(h, {
+		...n,
+		initialMonth: e ?? /* @__PURE__ */ new Date(),
+		dayState: (t) => ({ selected: m(e, t) }),
+		onPick: t
+	});
+}
+function _({ range: e, onPick: t, ...n }) {
+	return /* @__PURE__ */ c(h, {
+		...n,
+		initialMonth: e.from ?? /* @__PURE__ */ new Date(),
+		dayState: (t) => ({
+			selected: m(e.from, t) || m(e.to, t),
+			inRange: !!e.from && !!e.to && t > p(e.from) && t < p(e.to)
+		}),
+		onPick: t
+	});
+}
+function v({ label: e, text: t, variant: r = "outlined", disabled: a, name: o }) {
+	return /* @__PURE__ */ c(n, {
+		variant: r,
+		label: e,
+		value: t,
+		readOnly: !0,
+		disabled: a,
+		name: o,
+		tabIndex: -1,
+		className: "pointer-events-none",
+		rightElement: /* @__PURE__ */ c(i, {
+			size: 24,
+			"aria-hidden": !0
+		})
+	});
+}
+function y(e, t) {
+	return u(() => new Intl.DateTimeFormat(e, t ?? {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}), [e, t]);
+}
+function b({ open: t, onOpenChange: n, field: i, disabled: a, className: o, children: s }) {
+	return /* @__PURE__ */ l(r.Root, {
+		open: t,
+		onOpenChange: n,
+		children: [/* @__PURE__ */ c(r.Trigger, {
+			disabled: a,
+			nativeButton: !1,
+			render: /* @__PURE__ */ c("div", { className: e("w-full cursor-pointer rounded-small text-left outline-none", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", o) }),
+			children: i
+		}), /* @__PURE__ */ c(r.Portal, { children: /* @__PURE__ */ c(r.Positioner, {
+			sideOffset: 4,
+			align: "start",
+			children: /* @__PURE__ */ c(r.Popup, {
+				className: "p-3",
+				children: s
+			})
+		}) })]
+	});
+}
+function x({ value: e, defaultValue: t, onChange: n, label: r, disabled: i, name: a, locale: o, formatOptions: s, variant: l, className: u, ...f }) {
+	let [p, m] = d(!1), [h, _] = d(t ?? null), x = e === void 0 ? h : e, S = y(o, s);
+	return /* @__PURE__ */ c(b, {
+		open: p,
+		onOpenChange: m,
+		disabled: i,
+		className: u,
+		field: /* @__PURE__ */ c(v, {
+			label: r,
+			text: x ? S.format(x) : "",
+			variant: l,
+			disabled: i,
+			name: a
+		}),
+		children: /* @__PURE__ */ c(g, {
+			selected: x,
+			locale: o,
+			...f,
+			onSelect: (e) => {
+				_(e), n?.(e), m(!1);
+			}
+		})
+	});
+}
+function S({ value: e, defaultValue: t, onChange: n, label: r, disabled: i, name: a, locale: o, formatOptions: s, variant: l, className: u, ...f }) {
+	let [p, m] = d(!1), [h, g] = d(t ?? {
+		from: null,
+		to: null
+	}), x = e === void 0 ? h : e, S = y(o, s), C = x.from && x.to ? S.formatRange(x.from, x.to) : x.from ? `${S.format(x.from)} – ` : "", w = (e) => {
+		let t;
+		t = !x.from || x.to ? {
+			from: e,
+			to: null
+		} : e < x.from ? {
+			from: e,
+			to: x.from
+		} : {
+			from: x.from,
+			to: e
+		}, g(t), t.from && t.to && (n?.({
+			from: t.from,
+			to: t.to
+		}), m(!1));
+	};
+	return /* @__PURE__ */ c(b, {
+		open: p,
+		onOpenChange: m,
+		disabled: i,
+		className: u,
+		field: /* @__PURE__ */ c(v, {
+			label: r,
+			text: C,
+			variant: l,
+			disabled: i,
+			name: a
+		}),
+		children: /* @__PURE__ */ c(_, {
+			range: x,
+			locale: o,
+			...f,
+			onPick: w
+		})
+	});
+}
+//#endregion
+export { g as Calendar, x as DatePicker, S as DateRangePicker, _ as RangeCalendar };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/date-picker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { CalendarDays, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'\nimport { Button } from '#/components/button'\nimport { Input } from '#/components/form/Input'\nimport { Popover } from '#/components/popover'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps, ReactNode } from 'react'\n\n/**\n * Date pickers — M3 docked date picker built on this catalog's primitives:\n * the port text field (Input) as the anchor and Popover for the calendar\n * overlay (https://m3.material.io/components/date-pickers — docked variant).\n *\n *   <DatePicker label=\"Date\" onChange={(date) => …} />\n *   <DateRangePicker label=\"Stay\" onChange={({ from, to }) => …} />\n *\n * Shared month view: 40px circular day targets, selected day = primary\n * circle, today = outlined, range days = secondary-container band, year-grid\n * navigation via the month label, min/max bounds + disabledDate predicate.\n * Calendar / RangeCalendar are exported standalone for inline use.\n */\n\nfunction startOfMonth(d: Date) {\n  return new Date(d.getFullYear(), d.getMonth(), 1)\n}\n\nfunction stripTime(d: Date) {\n  return new Date(d.getFullYear(), d.getMonth(), d.getDate())\n}\n\nfunction isSameDay(a: Date | null | undefined, b: Date) {\n  return (\n    !!a &&\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  )\n}\n\ntype CalendarBounds = {\n  /** Earliest selectable day (inclusive). */\n  min?: Date\n  /** Latest selectable day (inclusive). */\n  max?: Date\n  /** Disable arbitrary days (e.g. weekends, booked dates). */\n  disabledDate?: (date: Date) => boolean\n  locale?: string\n}\n\ntype MonthViewProps = CalendarBounds & {\n  initialMonth: Date\n  dayState: (date: Date) => { selected?: boolean; inRange?: boolean }\n  onPick: (date: Date) => void\n}\n\n/** Month grid + year-grid navigation shared by Calendar and RangeCalendar. */\nfunction MonthView({\n  locale,\n  min,\n  max,\n  disabledDate,\n  initialMonth,\n  dayState,\n  onPick,\n}: MonthViewProps) {\n  const [view, setView] = useState(() => startOfMonth(initialMonth))\n  const [mode, setMode] = useState<'days' | 'years'>('days')\n  const today = new Date()\n  const year = view.getFullYear()\n  const month = view.getMonth()\n\n  const monthLabel = useMemo(\n    () => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(view),\n    [locale, view],\n  )\n  const weekdays = useMemo(() => {\n    const fmt = new Intl.DateTimeFormat(locale, { weekday: 'narrow' })\n    // 2023-01-01 was a Sunday.\n    return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(2023, 0, 1 + i)))\n  }, [locale])\n\n  const minDay = min ? stripTime(min) : null\n  const maxDay = max ? stripTime(max) : null\n  const isDayDisabled = (t: Date) =>\n    (minDay !== null && t < minDay) || (maxDay !== null && t > maxDay) || !!disabledDate?.(t)\n\n  // Year-grid navigation (M3 docked: month label opens year selection).\n  if (mode === 'years') {\n    const base = year - ((year % 12) + 12) % 12\n    const years = Array.from({ length: 12 }, (_, i) => base + i)\n    return (\n      <div className=\"flex w-[280px] flex-col gap-2\">\n        <div className=\"flex items-center justify-between\">\n          <Button.Icon\n            variant=\"standard\"\n            aria-label=\"Previous years\"\n            disabled={minDay !== null && base - 1 < minDay.getFullYear()}\n            onClick={() => setView(new Date(year - 12, month, 1))}\n          >\n            <ChevronLeft />\n          </Button.Icon>\n          <span className=\"text-title-small text-on-surface\">\n            {base} – {base + 11}\n          </span>\n          <Button.Icon\n            variant=\"standard\"\n            aria-label=\"Next years\"\n            disabled={maxDay !== null && base + 12 > maxDay.getFullYear()}\n            onClick={() => setView(new Date(year + 12, month, 1))}\n          >\n            <ChevronRight />\n          </Button.Icon>\n        </div>\n        <div className=\"grid grid-cols-3 gap-1\">\n          {years.map((y) => {\n            const disabled =\n              (minDay !== null && y < minDay.getFullYear()) ||\n              (maxDay !== null && y > maxDay.getFullYear())\n            return (\n              <button\n                key={y}\n                type=\"button\"\n                disabled={disabled}\n                onClick={() => {\n                  setView(new Date(y, month, 1))\n                  setMode('days')\n                }}\n                className={cn(\n                  'flex h-9 cursor-pointer items-center justify-center rounded-full',\n                  'text-body-small text-on-surface transition-colors 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                  y === year && 'bg-primary text-on-primary hover:bg-primary-hover',\n                )}\n              >\n                {y}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n\n  const firstDow = new Date(year, month, 1).getDay()\n  const daysInMonth = new Date(year, month + 1, 0).getDate()\n  const cells: Array<number | null> = [\n    ...Array.from({ length: firstDow }, () => null),\n    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),\n  ]\n  const prevDisabled = minDay !== null && new Date(year, month, 0) < minDay\n  const nextDisabled = maxDay !== null && new Date(year, month + 1, 1) > maxDay\n\n  return (\n    <div className=\"flex w-[280px] flex-col gap-2\">\n      <div className=\"flex items-center justify-between\">\n        <Button.Icon\n          variant=\"standard\"\n          aria-label=\"Previous month\"\n          disabled={prevDisabled}\n          onClick={() => setView(new Date(year, month - 1, 1))}\n        >\n          <ChevronLeft />\n        </Button.Icon>\n        <button\n          type=\"button\"\n          onClick={() => setMode('years')}\n          className={cn(\n            'flex h-8 cursor-pointer items-center gap-1 rounded-full px-2',\n            'text-title-small text-on-surface transition-colors hover:bg-on-surface/[0.08]',\n            'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary',\n          )}\n        >\n          {monthLabel}\n          <ChevronDown aria-hidden className=\"size-4 text-on-surface-variant\" />\n        </button>\n        <Button.Icon\n          variant=\"standard\"\n          aria-label=\"Next month\"\n          disabled={nextDisabled}\n          onClick={() => setView(new Date(year, month + 1, 1))}\n        >\n          <ChevronRight />\n        </Button.Icon>\n      </div>\n\n      <div className=\"grid grid-cols-7\">\n        {weekdays.map((d, i) => (\n          <span\n            key={i}\n            className=\"flex size-10 items-center justify-center text-body-small text-on-surface-variant\"\n          >\n            {d}\n          </span>\n        ))}\n        {cells.map((day, i) => {\n          if (day === null) return <span key={`pad-${i}`} />\n          const t = new Date(year, month, day)\n          const { selected, inRange } = dayState(t)\n          const disabled = isDayDisabled(t)\n          return (\n            <button\n              key={day}\n              type=\"button\"\n              disabled={disabled}\n              onClick={() => onPick(t)}\n              className={cn(\n                'flex size-10 cursor-pointer items-center justify-center rounded-full',\n                'text-body-small 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                isSameDay(today, t) && !selected && !inRange && 'border border-outline text-primary',\n                inRange &&\n                  'rounded-none bg-secondary-container text-on-secondary-container hover:bg-secondary-container-hover',\n                selected && 'rounded-full border-0 bg-primary text-on-primary hover:bg-primary-hover',\n              )}\n            >\n              {day}\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\ntype CalendarProps = CalendarBounds & {\n  selected: Date | null\n  onSelect: (date: Date) => void\n}\n\n/** Single-date month grid — usable standalone (inline calendars, widgets). */\nfunction Calendar({ selected, onSelect, ...bounds }: CalendarProps) {\n  return (\n    <MonthView\n      {...bounds}\n      initialMonth={selected ?? new Date()}\n      dayState={(t) => ({ selected: isSameDay(selected, t) })}\n      onPick={onSelect}\n    />\n  )\n}\n\ntype DateRange = { from: Date | null; to: Date | null }\n\ntype RangeCalendarProps = CalendarBounds & {\n  range: DateRange\n  onPick: (date: Date) => void\n}\n\n/** Range month grid: endpoint circles + secondary-container band between. */\nfunction RangeCalendar({ range, onPick, ...bounds }: RangeCalendarProps) {\n  return (\n    <MonthView\n      {...bounds}\n      initialMonth={range.from ?? new Date()}\n      dayState={(t) => ({\n        selected: isSameDay(range.from, t) || isSameDay(range.to, t),\n        inRange:\n          !!range.from &&\n          !!range.to &&\n          t > stripTime(range.from) &&\n          t < stripTime(range.to),\n      })}\n      onPick={onPick}\n    />\n  )\n}\n\ntype PickerFieldProps = {\n  label?: ReactNode\n  text: string\n  variant?: ComponentProps<typeof Input>['variant']\n  disabled?: boolean\n  name?: string\n}\n\n/** Display-only port text field used as the popover anchor. */\nfunction PickerField({ label, text, variant = 'outlined', disabled, name }: PickerFieldProps) {\n  return (\n    <Input\n      variant={variant}\n      label={label}\n      value={text}\n      readOnly\n      disabled={disabled}\n      name={name}\n      tabIndex={-1}\n      className=\"pointer-events-none\"\n      rightElement={<CalendarDays size={24} aria-hidden />}\n    />\n  )\n}\n\ntype PickerBaseProps = CalendarBounds & {\n  label?: ReactNode\n  disabled?: boolean\n  name?: string\n  /** @default { year: 'numeric', month: 'short', day: 'numeric' } */\n  formatOptions?: Intl.DateTimeFormatOptions\n  /** Field variant, port skins. @default 'outlined' */\n  variant?: ComponentProps<typeof Input>['variant']\n  className?: string\n}\n\nfunction useDateFormatter(locale?: string, formatOptions?: Intl.DateTimeFormatOptions) {\n  return useMemo(\n    () =>\n      new Intl.DateTimeFormat(\n        locale,\n        formatOptions ?? { year: 'numeric', month: 'short', day: 'numeric' },\n      ),\n    [locale, formatOptions],\n  )\n}\n\ntype PickerShellProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  field: ReactNode\n  disabled?: boolean\n  className?: string\n  children: ReactNode\n}\n\n/** Popover wiring shared by both pickers. */\nfunction PickerShell({ open, onOpenChange, field, disabled, className, children }: PickerShellProps) {\n  return (\n    <Popover.Root open={open} onOpenChange={onOpenChange}>\n      <Popover.Trigger\n        disabled={disabled}\n        nativeButton={false}\n        render={\n          <div\n            className={cn(\n              // No UA focus ring (black); keyboard focus gets an M3 primary\n              // ring via focus-visible — mouse clicks show nothing extra.\n              'w-full cursor-pointer rounded-small text-left outline-none',\n              'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n              className,\n            )}\n          />\n        }\n      >\n        {field}\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner sideOffset={4} align=\"start\">\n          <Popover.Popup className=\"p-3\">{children}</Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\ntype DatePickerProps = PickerBaseProps & {\n  /** Controlled selected date. */\n  value?: Date | null\n  /** Uncontrolled initial date. */\n  defaultValue?: Date | null\n  onChange?: (date: Date) => void\n}\n\nfunction DatePicker({\n  value,\n  defaultValue,\n  onChange,\n  label,\n  disabled,\n  name,\n  locale,\n  formatOptions,\n  variant,\n  className,\n  ...bounds\n}: DatePickerProps) {\n  const [open, setOpen] = useState(false)\n  const [internal, setInternal] = useState<Date | null>(defaultValue ?? null)\n  const selected = value !== undefined ? value : internal\n  const formatter = useDateFormatter(locale, formatOptions)\n\n  return (\n    <PickerShell\n      open={open}\n      onOpenChange={setOpen}\n      disabled={disabled}\n      className={className}\n      field={\n        <PickerField\n          label={label}\n          text={selected ? formatter.format(selected) : ''}\n          variant={variant}\n          disabled={disabled}\n          name={name}\n        />\n      }\n    >\n      <Calendar\n        selected={selected}\n        locale={locale}\n        {...bounds}\n        onSelect={(date) => {\n          setInternal(date)\n          onChange?.(date)\n          setOpen(false)\n        }}\n      />\n    </PickerShell>\n  )\n}\n\ntype DateRangePickerProps = PickerBaseProps & {\n  /** Controlled range ({ from, to } — either side may be null mid-selection). */\n  value?: DateRange\n  /** Uncontrolled initial range. */\n  defaultValue?: DateRange\n  /** Fired once both ends are picked. */\n  onChange?: (range: { from: Date; to: Date }) => void\n}\n\n/**\n * Range variant: first click sets the start, second completes the range\n * (swapping if picked backwards) and closes; a third starts over.\n */\nfunction DateRangePicker({\n  value,\n  defaultValue,\n  onChange,\n  label,\n  disabled,\n  name,\n  locale,\n  formatOptions,\n  variant,\n  className,\n  ...bounds\n}: DateRangePickerProps) {\n  const [open, setOpen] = useState(false)\n  const [internal, setInternal] = useState<DateRange>(defaultValue ?? { from: null, to: null })\n  const range = value !== undefined ? value : internal\n  const formatter = useDateFormatter(locale, formatOptions)\n\n  const text =\n    range.from && range.to\n      ? formatter.formatRange(range.from, range.to)\n      : range.from\n        ? `${formatter.format(range.from)} – `\n        : ''\n\n  const handlePick = (date: Date) => {\n    let next: DateRange\n    if (!range.from || range.to) {\n      next = { from: date, to: null }\n    } else {\n      next =\n        date < range.from ? { from: date, to: range.from } : { from: range.from, to: date }\n    }\n    setInternal(next)\n    if (next.from && next.to) {\n      onChange?.({ from: next.from, to: next.to })\n      setOpen(false)\n    }\n  }\n\n  return (\n    <PickerShell\n      open={open}\n      onOpenChange={setOpen}\n      disabled={disabled}\n      className={className}\n      field={\n        <PickerField label={label} text={text} variant={variant} disabled={disabled} name={name} />\n      }\n    >\n      <RangeCalendar range={range} locale={locale} {...bounds} onPick={handlePick} />\n    </PickerShell>\n  )\n}\n\nexport { DatePicker, DateRangePicker, Calendar, RangeCalendar }\nexport type { DateRange }\n"],"mappings":"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"}

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker, DateRangePicker, Calendar, RangeCalendar } from './DatePicker';
+export type { DateRange } from './DatePicker';

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+import { Calendar as e, DatePicker as t, DateRangePicker as n, RangeCalendar as r } from "./DatePicker.js";
+export { e as Calendar, t as DatePicker, n as DateRangePicker, r as RangeCalendar };

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,59 @@
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { ComponentProps } from 'react';
+/**
+ * Dialog — Material 3 styled wrapper over Base UI's headless Dialog.
+ * Behaviour/accessibility (focus trap, role="dialog", dismiss on backdrop
+ * click/Esc): Base UI (https://base-ui.com/react/components/dialog).
+ * Visuals: M3 dialog anatomy — scrim, extra-large corner, surface-container,
+ * headline-small title, body-medium supporting text, text-button actions.
+ * Same anatomy as AlertDialog, but dismissible.
+ * Design ref: port/core/ui/components/dialogs (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Dialog.Root>
+ *     <Dialog.Trigger>Open</Dialog.Trigger>
+ *     <Dialog.Portal>
+ *       <Dialog.Backdrop />
+ *       <Dialog.Viewport>
+ *         <Dialog.Popup>
+ *           <Dialog.Title>Reset settings?</Dialog.Title>
+ *           <Dialog.Description>This will restore the defaults.</Dialog.Description>
+ *           <Dialog.Actions>
+ *             <Dialog.Close>Cancel</Dialog.Close>
+ *             <Dialog.Close>Reset</Dialog.Close>
+ *           </Dialog.Actions>
+ *         </Dialog.Popup>
+ *       </Dialog.Viewport>
+ *     </Dialog.Portal>
+ *   </Dialog.Root>
+ */
+declare const Root: typeof BaseDialog.Root;
+declare const Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/** Imperative handle for detached triggers — re-exported from Base UI. */
+declare const Handle: typeof BaseDialog.Handle;
+declare const createHandle: typeof BaseDialog.createHandle;
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseDialog.Trigger>): import("react").JSX.Element;
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseDialog.Backdrop>): import("react").JSX.Element;
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseDialog.Viewport>): import("react").JSX.Element;
+declare function Popup({ className, ...props }: ComponentProps<typeof BaseDialog.Popup>): import("react").JSX.Element;
+declare function Title({ className, ...props }: ComponentProps<typeof BaseDialog.Title>): import("react").JSX.Element;
+declare function Description({ className, ...props }: ComponentProps<typeof BaseDialog.Description>): import("react").JSX.Element;
+/** Trailing actions row (M3: right-aligned text buttons). */
+declare function Actions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Closes the dialog; styled as an M3 text button — pair inside <Actions>. */
+declare function Close({ className, ...props }: ComponentProps<typeof BaseDialog.Close>): import("react").JSX.Element;
+export declare const Dialog: {
+    Root: typeof BaseDialog.Root;
+    Trigger: typeof Trigger;
+    Portal: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').AlertDialogPortalProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof Backdrop;
+    Viewport: typeof Viewport;
+    Popup: typeof Popup;
+    Title: typeof Title;
+    Description: typeof Description;
+    Actions: typeof Actions;
+    Close: typeof Close;
+    Handle: typeof BaseDialog.Handle;
+    createHandle: typeof BaseDialog.createHandle;
+};
+export { Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Actions, Close, Handle, createHandle, };

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,71 @@
+import { cn as e } from "../../lib/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Dialog as n } from "@base-ui/react/dialog";
+//#region src/components/dialog/Dialog.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 bg-scrim transition-opacity duration-200 ease-out", "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0", r),
+		...i
+	});
+}
+function l({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Viewport, {
+		className: e("fixed inset-0 z-50 flex items-center justify-center p-4", r),
+		...i
+	});
+}
+function u({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Popup, {
+		className: e("flex w-full min-w-[280px] max-w-[560px] flex-col gap-4", "rounded-extra-large bg-surface-container p-6 text-on-surface shadow-mm-3", "transition-all duration-200 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, ...i }) {
+	return /* @__PURE__ */ t(n.Title, {
+		className: e("m-0 text-headline-small text-on-surface", r),
+		...i
+	});
+}
+function f({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Description, {
+		className: e("m-0 text-body-medium text-on-surface-variant", r),
+		...i
+	});
+}
+function p({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("mt-2 flex items-center justify-end gap-2", n),
+		...r
+	});
+}
+function m({ 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
+	});
+}
+var h = {
+	Root: r,
+	Trigger: s,
+	Portal: i,
+	Backdrop: c,
+	Viewport: l,
+	Popup: u,
+	Title: d,
+	Description: f,
+	Actions: p,
+	Close: m,
+	Handle: a,
+	createHandle: o
+};
+//#endregion
+export { p as Actions, c as Backdrop, m as Close, f as Description, h as Dialog, a as Handle, u as Popup, i as Portal, r as Root, d as Title, s as Trigger, l as Viewport, o as createHandle };
+
+//# sourceMappingURL=Dialog.js.map

package/dist/components/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cn } from '#/lib/cn'\n\nimport type { ComponentProps } from 'react'\n\n/**\n * Dialog — Material 3 styled wrapper over Base UI's headless Dialog.\n * Behaviour/accessibility (focus trap, role=\"dialog\", dismiss on backdrop\n * click/Esc): Base UI (https://base-ui.com/react/components/dialog).\n * Visuals: M3 dialog anatomy — scrim, extra-large corner, surface-container,\n * headline-small title, body-medium supporting text, text-button actions.\n * Same anatomy as AlertDialog, but dismissible.\n * Design ref: port/core/ui/components/dialogs (see CLAUDE.md).\n *\n * Compound API mirrors Base UI:\n *   <Dialog.Root>\n *     <Dialog.Trigger>Open</Dialog.Trigger>\n *     <Dialog.Portal>\n *       <Dialog.Backdrop />\n *       <Dialog.Viewport>\n *         <Dialog.Popup>\n *           <Dialog.Title>Reset settings?</Dialog.Title>\n *           <Dialog.Description>This will restore the defaults.</Dialog.Description>\n *           <Dialog.Actions>\n *             <Dialog.Close>Cancel</Dialog.Close>\n *             <Dialog.Close>Reset</Dialog.Close>\n *           </Dialog.Actions>\n *         </Dialog.Popup>\n *       </Dialog.Viewport>\n *     </Dialog.Portal>\n *   </Dialog.Root>\n */\n\nconst Root = BaseDialog.Root\nconst Portal = BaseDialog.Portal\n/** Imperative handle for detached triggers — re-exported from Base UI. */\nconst Handle = BaseDialog.Handle\nconst createHandle = BaseDialog.createHandle\n\nfunction Trigger({ className, ...props }: ComponentProps<typeof BaseDialog.Trigger>) {\n  return <BaseDialog.Trigger className={cn(className)} {...props} />\n}\n\nfunction Backdrop({ className, ...props }: ComponentProps<typeof BaseDialog.Backdrop>) {\n  return (\n    <BaseDialog.Backdrop\n      className={cn(\n        'fixed inset-0 z-40 bg-scrim 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 Viewport({ className, ...props }: ComponentProps<typeof BaseDialog.Viewport>) {\n  return (\n    <BaseDialog.Viewport\n      className={cn('fixed inset-0 z-50 flex items-center justify-center p-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Popup({ className, ...props }: ComponentProps<typeof BaseDialog.Popup>) {\n  return (\n    <BaseDialog.Popup\n      className={cn(\n        'flex w-full min-w-[280px] max-w-[560px] flex-col gap-4',\n        'rounded-extra-large bg-surface-container p-6 text-on-surface shadow-mm-3',\n        'transition-all duration-200 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\nfunction Title({ className, ...props }: ComponentProps<typeof BaseDialog.Title>) {\n  return (\n    <BaseDialog.Title\n      className={cn('m-0 text-headline-small text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nfunction Description({ className, ...props }: ComponentProps<typeof BaseDialog.Description>) {\n  return (\n    <BaseDialog.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: right-aligned text buttons). */\nfunction Actions({ className, ...props }: ComponentProps<'div'>) {\n  return <div className={cn('mt-2 flex items-center justify-end gap-2', className)} {...props} />\n}\n\n/** Closes the dialog; styled as an M3 text button — pair inside <Actions>. */\nfunction Close({ className, ...props }: ComponentProps<typeof BaseDialog.Close>) {\n  return (\n    <BaseDialog.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\nexport const Dialog = {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Viewport,\n  Popup,\n  Title,\n  Description,\n  Actions,\n  Close,\n  Handle,\n  createHandle,\n}\nexport {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Viewport,\n  Popup,\n  Title,\n  Description,\n  Actions,\n  Close,\n  Handle,\n  createHandle,\n}\n"],"mappings":";;;;AAiCA,IAAM,IAAO,EAAW,MAClB,IAAS,EAAW,QAEpB,IAAS,EAAW,QACpB,IAAe,EAAW;AAEhC,SAAS,EAAQ,EAAE,cAAW,GAAG,KAAoD;CACnF,OAAO,kBAAC,EAAW,SAAZ;EAAoB,WAAW,EAAG,CAAS;EAAG,GAAI;CAAQ,CAAA;AACnE;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAqD;CACrF,OACE,kBAAC,EAAW,UAAZ;EACE,WAAW,EACT,wEACA,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAAE,cAAW,GAAG,KAAqD;CACrF,OACE,kBAAC,EAAW,UAAZ;EACE,WAAW,EAAG,2DAA2D,CAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EACT,0DACA,4EACA,2DACA,kEACA,8DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EAAG,2CAA2C,CAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAwD;CAC3F,OACE,kBAAC,EAAW,aAAZ;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,4CAA4C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAChG;AAGA,SAAS,EAAM,EAAE,cAAW,GAAG,KAAkD;CAC/E,OACE,kBAAC,EAAW,OAAZ;EACE,WAAW,EACT,iFACA,mDACA,gHACA,uDACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,IAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

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

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

package/dist/components/dialog/index.js

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

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,93 @@
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+import { ComponentProps } from 'react';
+/**
+ * Drawer — Material 3 styled wrapper over Base UI's headless Drawer.
+ * Behaviour/accessibility (focus trap, scroll lock, swipe-to-dismiss, snap
+ * points): Base UI (https://base-ui.com/react/components/drawer).
+ * Visuals: M3 sheet anatomy — scrim, drag handle (32×4 on-surface-variant),
+ * surface-container panel, extra-large top corner for bottom sheets, large
+ * side corner for side sheets / modal navigation drawers, title-large header.
+ * Design refs: port/core/ui/components/sheets (BottomSheet, SideSheet) and
+ * port/core/ui/components/navigation-drawer (see CLAUDE.md).
+ *
+ * Compound API mirrors Base UI:
+ *   <Drawer.Root>                            // swipeDirection: 'down' (default) | 'left' | 'right' | 'up'
+ *     <Drawer.Trigger>Open</Drawer.Trigger>
+ *     <Drawer.Portal>
+ *       <Drawer.Backdrop />
+ *       <Drawer.Viewport>
+ *         <Drawer.Popup side="bottom">       // side: 'bottom' | 'left' | 'right'
+ *           <Drawer.DragHandle />            // bottom sheets only
+ *           <Drawer.Content>
+ *             <Drawer.Title>Title</Drawer.Title>
+ *             <Drawer.Description>Supporting text</Drawer.Description>
+ *             <Drawer.Close>Done</Drawer.Close>
+ *           </Drawer.Content>
+ *         </Drawer.Popup>
+ *       </Drawer.Viewport>
+ *     </Drawer.Portal>
+ *   </Drawer.Root>
+ *
+ * App-shell parts (optional): wrap the page in <Drawer.Provider> with
+ * <Drawer.IndentBackground /> + <Drawer.Indent> to scale the app behind an
+ * open drawer. <Drawer.SwipeArea> opens the drawer from a screen edge.
+ */
+declare const Root: typeof BaseDrawer.Root;
+declare const Portal: BaseDrawer.Portal;
+declare const Provider: typeof BaseDrawer.Provider;
+declare const Handle: typeof BaseDrawer.Handle;
+declare const createHandle: typeof BaseDrawer.createHandle;
+declare function Trigger({ className, ...props }: ComponentProps<typeof BaseDrawer.Trigger>): import("react").JSX.Element;
+declare function Backdrop({ className, ...props }: ComponentProps<typeof BaseDrawer.Backdrop>): import("react").JSX.Element;
+declare function Viewport({ className, ...props }: ComponentProps<typeof BaseDrawer.Viewport>): import("react").JSX.Element;
+/** Where the sheet rests: M3 bottom sheet, or side sheet / modal nav drawer. */
+type DrawerSide = 'bottom' | 'left' | 'right';
+type PopupProps = ComponentProps<typeof BaseDrawer.Popup> & {
+    /**
+     * Edge the sheet is docked to. Pair with the matching `swipeDirection` on
+     * `Drawer.Root` ('down' for bottom, 'left'/'right' for side sheets).
+     * @default 'bottom'
+     */
+    side?: DrawerSide;
+};
+declare function Popup({ className, side, ...props }: PopupProps): import("react").JSX.Element;
+/** Scrollable body of the sheet. */
+declare function Content({ className, ...props }: ComponentProps<typeof BaseDrawer.Content>): import("react").JSX.Element;
+declare function Title({ className, ...props }: ComponentProps<typeof BaseDrawer.Title>): import("react").JSX.Element;
+declare function Description({ className, ...props }: ComponentProps<typeof BaseDrawer.Description>): import("react").JSX.Element;
+/** Closes the drawer; styled as an M3 text button. */
+declare function Close({ className, ...props }: ComponentProps<typeof BaseDrawer.Close>): import("react").JSX.Element;
+/**
+ * M3 drag handle (32×4, on-surface-variant @ 40%) shown at the top of a
+ * bottom sheet to signal swipeability. Not a Base UI part — plain `<div>`.
+ */
+declare function DragHandle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Invisible screen-edge area that opens the drawer on swipe. */
+declare function SwipeArea({ className, ...props }: ComponentProps<typeof BaseDrawer.SwipeArea>): import("react").JSX.Element;
+/**
+ * Wraps the app's main UI inside `<Drawer.Provider>`; gets `data-active`
+ * while any drawer is open, scaling the page back behind the sheet.
+ */
+declare function Indent({ className, ...props }: ComponentProps<typeof BaseDrawer.Indent>): import("react").JSX.Element;
+/** Background layer revealed behind a scaled `<Drawer.Indent>`. */
+declare function IndentBackground({ className, ...props }: ComponentProps<typeof BaseDrawer.IndentBackground>): import("react").JSX.Element;
+export declare const Drawer: {
+    Root: typeof BaseDrawer.Root;
+    Trigger: typeof Trigger;
+    Portal: BaseDrawer.Portal;
+    Backdrop: typeof Backdrop;
+    Viewport: typeof Viewport;
+    Popup: typeof Popup;
+    Content: typeof Content;
+    Title: typeof Title;
+    Description: typeof Description;
+    Close: typeof Close;
+    DragHandle: typeof DragHandle;
+    SwipeArea: typeof SwipeArea;
+    Provider: typeof BaseDrawer.Provider;
+    Indent: typeof Indent;
+    IndentBackground: typeof IndentBackground;
+    Handle: typeof BaseDrawer.Handle;
+    createHandle: typeof BaseDrawer.createHandle;
+};
+export { Root, Trigger, Portal, Backdrop, Viewport, Popup, Content, Title, Description, Close, DragHandle, SwipeArea, Provider, Indent, IndentBackground, Handle, createHandle, };