cortena-ui 1.3.0 → 1.4.0

package/dist/components/date-field.js

@@ -0,0 +1,235 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Calendar } from "./calendar.js";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/date-field.tsx
+/**
+* DateField.
+*
+* A form-friendly date input: our `<Input>` showing the formatted date, with
+* the DatePicker's calendar behind a trailing icon button. Typing a date the
+* parser accepts commits it (the default parser reads ISO `yyyy-mm-dd`, and
+* the English `15 Jan 2026` / `15 January 2026` shapes the formatters below
+* produce); picking a day from the calendar writes it back through
+* `formatDate`. Non-empty text the parser rejects, or a date outside
+* `min`/`max`, clears the value and marks the input invalid so a Field can
+* show the error.
+*
+* The date helpers are hand-written for `en-GB` (day month year, no library);
+* any other `locale` goes through the browser's `Intl`.
+*/
+const MONTHS_LONG = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+const MONTHS_SHORT = /* @__PURE__ */ MONTHS_LONG.map((m) => m.slice(0, 3));
+const pad = (n) => String(n).padStart(2, "0");
+const isEn = (locale) => /^en(-GB)?$/i.test(locale);
+/** `2026-01-05`. */
+function formatDateISO(date) {
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+/** `5 Jan 2026` for en-GB; other locales via `Intl.DateTimeFormat`. */
+function formatDateShort(date, locale = "en-GB") {
+	if (isEn(locale)) return `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;
+	return new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	}).format(date);
+}
+/** `5 January 2026` for en-GB; other locales via `Intl.DateTimeFormat`. */
+function formatDateLong(date, locale = "en-GB") {
+	if (isEn(locale)) return `${date.getDate()} ${MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;
+	return new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	}).format(date);
+}
+const DAY_MS = 864e5;
+function startOfDay(date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+/**
+* Calendar-day distance in words: `today`, `yesterday`, `tomorrow`, `3 days
+* ago`, `in 2 weeks`, `4 months ago`, `in 2 years`. Compares local calendar
+* days, so 23:59 to 00:01 is `tomorrow`. Other locales use
+* `Intl.RelativeTimeFormat`.
+*/
+function formatRelative(date, options = {}) {
+	const { now = /* @__PURE__ */ new Date(), locale = "en-GB" } = options;
+	const days = Math.round((startOfDay(date) - startOfDay(now)) / DAY_MS);
+	const abs = Math.abs(days);
+	let unit;
+	let count;
+	if (abs < 7) {
+		unit = "day";
+		count = days;
+	} else if (abs < 30) {
+		unit = "week";
+		count = Math.round(days / 7);
+	} else if (abs < 365) {
+		unit = "month";
+		count = Math.round(days / 30);
+	} else {
+		unit = "year";
+		count = Math.round(days / 365);
+	}
+	if (!isEn(locale)) return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(count, unit);
+	if (days === 0) return "today";
+	if (days === -1) return "yesterday";
+	if (days === 1) return "tomorrow";
+	const n = Math.abs(count);
+	const label = `${n} ${unit}${n === 1 ? "" : "s"}`;
+	return count < 0 ? `${label} ago` : `in ${label}`;
+}
+function makeDate(year, month, day) {
+	const date = new Date(year, month - 1, day);
+	if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) return;
+	return date;
+}
+/** Strict `yyyy-mm-dd`; rejects impossible days such as `2026-02-30`. */
+function parseDateISO(text) {
+	const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(text.trim());
+	if (!m) return void 0;
+	return makeDate(Number(m[1]), Number(m[2]), Number(m[3]));
+}
+/** ISO first, then the English `5 Jan 2026` / `5 January 2026` shapes. */
+function parseDateDefault(text) {
+	const iso = parseDateISO(text);
+	if (iso) return iso;
+	const m = /^(\d{1,2})\s+([a-z]+)\s+(\d{4})$/i.exec(text.trim());
+	if (!m) return void 0;
+	const name = (m[2] ?? "").toLowerCase();
+	const month = MONTHS_LONG.findIndex((full) => full.toLowerCase() === name || full.slice(0, 3).toLowerCase() === name);
+	if (month < 0) return void 0;
+	return makeDate(Number(m[3]), month + 1, Number(m[1]));
+}
+function sameDay(a, b) {
+	if (!a || !b) return a === b;
+	return startOfDay(a) === startOfDay(b);
+}
+function inRange(date, min, max) {
+	const t = startOfDay(date);
+	if (min && t < startOfDay(min)) return false;
+	if (max && t > startOfDay(max)) return false;
+	return true;
+}
+function DateField(props) {
+	const { value, defaultValue, onValueChange, placeholder = "yyyy-mm-dd", formatDate = formatDateISO, parseDate = parseDateDefault, min, max, disabled, invalid, calendarProps, wrapperClassName, className, onBlur, ...inputProps } = props;
+	const controlled = "value" in props;
+	const [inner, setInner] = React.useState(defaultValue);
+	const date = controlled ? value : inner;
+	const [text, setText] = React.useState(() => date ? formatDate(date) : "");
+	const [textInvalid, setTextInvalid] = React.useState(false);
+	const [open, setOpen] = React.useState(false);
+	const committed = React.useRef(date);
+	const commit = React.useCallback((next) => {
+		committed.current = next;
+		if (!controlled) setInner(next);
+		onValueChange?.(next);
+	}, [controlled, onValueChange]);
+	React.useEffect(() => {
+		if (sameDay(date, committed.current)) return;
+		committed.current = date;
+		setText(date ? formatDate(date) : "");
+		setTextInvalid(false);
+	}, [date, formatDate]);
+	const onChange = (event) => {
+		const next = event.target.value;
+		setText(next);
+		if (next.trim() === "") {
+			setTextInvalid(false);
+			if (date !== void 0) commit(void 0);
+			return;
+		}
+		const parsed = parseDate(next);
+		const ok = parsed !== void 0 && inRange(parsed, min, max);
+		setTextInvalid(!ok);
+		if (ok) {
+			if (!sameDay(parsed, date)) commit(parsed);
+		} else if (date !== void 0) commit(void 0);
+	};
+	const pick = (next) => {
+		setOpen(false);
+		setTextInvalid(false);
+		setText(next ? formatDate(next) : "");
+		if (!sameDay(next, date)) commit(next);
+	};
+	const matchers = [];
+	if (min) matchers.push({ before: min });
+	if (max) matchers.push({ after: max });
+	const isInvalid = invalid || textInvalid;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "date-field",
+		"data-invalid": isInvalid || void 0,
+		"data-disabled": disabled || void 0,
+		className: cn("relative w-60", wrapperClassName),
+		children: [/* @__PURE__ */ jsx(Input, {
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "off",
+			"data-slot": "date-field-input",
+			value: text,
+			placeholder,
+			disabled,
+			"aria-invalid": isInvalid || void 0,
+			onChange,
+			onBlur: (event) => {
+				if (date && !textInvalid) setText(formatDate(date));
+				onBlur?.(event);
+			},
+			className: cn("pr-10", className),
+			...inputProps
+		}), /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				"data-slot": "date-field-trigger",
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon-sm"
+				}),
+				"aria-label": "Open calendar",
+				disabled,
+				className: cn("absolute top-1/2 right-1 -translate-y-1/2", "text-[color:var(--ds-muted-foreground)] hover:text-[color:var(--ds-foreground)]"),
+				children: /* @__PURE__ */ jsx(CalendarIcon, {})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				"data-slot": "date-field-content",
+				align: "end",
+				className: "w-auto p-0",
+				children: /* @__PURE__ */ jsx(Calendar, {
+					...calendarProps,
+					mode: "single",
+					defaultMonth: calendarProps?.defaultMonth ?? date,
+					selected: date,
+					onSelect: pick,
+					disabled: matchers.length > 0 ? matchers : void 0,
+					startMonth: calendarProps?.startMonth ?? min,
+					endMonth: calendarProps?.endMonth ?? max
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { DateField, formatDateISO, formatDateLong, formatDateShort, formatRelative, parseDateDefault, parseDateISO };
+
+//# sourceMappingURL=date-field.js.map

package/dist/components/date-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.js","names":[],"sources":["../../src/components/date-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { Matcher } from \"react-day-picker\";\nimport { Button } from \"@/components/button\";\nimport { Calendar, type CalendarProps } from \"@/components/calendar\";\nimport { Input } from \"@/components/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DateField.\n *\n * A form-friendly date input: our `<Input>` showing the formatted date, with\n * the DatePicker's calendar behind a trailing icon button. Typing a date the\n * parser accepts commits it (the default parser reads ISO `yyyy-mm-dd`, and\n * the English `15 Jan 2026` / `15 January 2026` shapes the formatters below\n * produce); picking a day from the calendar writes it back through\n * `formatDate`. Non-empty text the parser rejects, or a date outside\n * `min`/`max`, clears the value and marks the input invalid so a Field can\n * show the error.\n *\n * The date helpers are hand-written for `en-GB` (day month year, no library);\n * any other `locale` goes through the browser's `Intl`.\n */\n\nconst MONTHS_LONG = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\",\n];\nconst MONTHS_SHORT = /* @__PURE__ */ MONTHS_LONG.map((m) => m.slice(0, 3));\n\nconst pad = (n: number) => String(n).padStart(2, \"0\");\n\nconst isEn = (locale: string) => /^en(-GB)?$/i.test(locale);\n\n/** `2026-01-05`. */\nfunction formatDateISO(date: Date): string {\n  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n}\n\n/** `5 Jan 2026` for en-GB; other locales via `Intl.DateTimeFormat`. */\nfunction formatDateShort(date: Date, locale = \"en-GB\"): string {\n  if (isEn(locale)) {\n    return `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]} ${date.getFullYear()}`;\n  }\n  return new Intl.DateTimeFormat(locale, { day: \"numeric\", month: \"short\", year: \"numeric\" }).format(\n    date,\n  );\n}\n\n/** `5 January 2026` for en-GB; other locales via `Intl.DateTimeFormat`. */\nfunction formatDateLong(date: Date, locale = \"en-GB\"): string {\n  if (isEn(locale)) {\n    return `${date.getDate()} ${MONTHS_LONG[date.getMonth()]} ${date.getFullYear()}`;\n  }\n  return new Intl.DateTimeFormat(locale, { day: \"numeric\", month: \"long\", year: \"numeric\" }).format(\n    date,\n  );\n}\n\nconst DAY_MS = 86_400_000;\n\nfunction startOfDay(date: Date): number {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();\n}\n\n/**\n * Calendar-day distance in words: `today`, `yesterday`, `tomorrow`, `3 days\n * ago`, `in 2 weeks`, `4 months ago`, `in 2 years`. Compares local calendar\n * days, so 23:59 to 00:01 is `tomorrow`. Other locales use\n * `Intl.RelativeTimeFormat`.\n */\nfunction formatRelative(date: Date, options: { now?: Date; locale?: string } = {}): string {\n  const { now = new Date(), locale = \"en-GB\" } = options;\n  const days = Math.round((startOfDay(date) - startOfDay(now)) / DAY_MS);\n  const abs = Math.abs(days);\n  let unit: \"day\" | \"week\" | \"month\" | \"year\";\n  let count: number;\n  if (abs < 7) {\n    unit = \"day\";\n    count = days;\n  } else if (abs < 30) {\n    unit = \"week\";\n    count = Math.round(days / 7);\n  } else if (abs < 365) {\n    unit = \"month\";\n    count = Math.round(days / 30);\n  } else {\n    unit = \"year\";\n    count = Math.round(days / 365);\n  }\n  if (!isEn(locale)) {\n    return new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" }).format(count, unit);\n  }\n  if (days === 0) return \"today\";\n  if (days === -1) return \"yesterday\";\n  if (days === 1) return \"tomorrow\";\n  const n = Math.abs(count);\n  const label = `${n} ${unit}${n === 1 ? \"\" : \"s\"}`;\n  return count < 0 ? `${label} ago` : `in ${label}`;\n}\n\nfunction makeDate(year: number, month: number, day: number): Date | undefined {\n  const date = new Date(year, month - 1, day);\n  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {\n    return undefined;\n  }\n  return date;\n}\n\n/** Strict `yyyy-mm-dd`; rejects impossible days such as `2026-02-30`. */\nfunction parseDateISO(text: string): Date | undefined {\n  const m = /^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/.exec(text.trim());\n  if (!m) return undefined;\n  return makeDate(Number(m[1]), Number(m[2]), Number(m[3]));\n}\n\n/** ISO first, then the English `5 Jan 2026` / `5 January 2026` shapes. */\nfunction parseDateDefault(text: string): Date | undefined {\n  const iso = parseDateISO(text);\n  if (iso) return iso;\n  const m = /^(\\d{1,2})\\s+([a-z]+)\\s+(\\d{4})$/i.exec(text.trim());\n  if (!m) return undefined;\n  const name = (m[2] ?? \"\").toLowerCase();\n  const month = MONTHS_LONG.findIndex(\n    (full) => full.toLowerCase() === name || full.slice(0, 3).toLowerCase() === name,\n  );\n  if (month < 0) return undefined;\n  return makeDate(Number(m[3]), month + 1, Number(m[1]));\n}\n\nfunction sameDay(a: Date | undefined, b: Date | undefined): boolean {\n  if (!a || !b) return a === b;\n  return startOfDay(a) === startOfDay(b);\n}\n\nfunction inRange(date: Date, min: Date | undefined, max: Date | undefined): boolean {\n  const t = startOfDay(date);\n  if (min && t < startOfDay(min)) return false;\n  if (max && t > startOfDay(max)) return false;\n  return true;\n}\n\ntype CalendarPassthrough = Omit<\n  CalendarProps,\n  \"mode\" | \"selected\" | \"onSelect\" | \"required\" | \"disabled\"\n>;\n\nexport interface DateFieldProps extends Omit<\n  React.ComponentProps<\"input\">,\n  \"value\" | \"defaultValue\" | \"onChange\" | \"min\" | \"max\" | \"type\"\n> {\n  /** The date (controlled). */\n  value?: Date | undefined;\n  /** The initial date (uncontrolled). */\n  defaultValue?: Date | undefined;\n  /** Called with the parsed or picked date, or `undefined` when the text is cleared or invalid. */\n  onValueChange?: (date: Date | undefined) => void;\n  /** Input placeholder; defaults to the ISO shape. */\n  placeholder?: string;\n  /** Formats the date into the input; defaults to ISO `yyyy-mm-dd`. */\n  formatDate?: (date: Date) => string;\n  /** Parses typed text; defaults to ISO plus the English day-month-year shapes. */\n  parseDate?: (text: string) => Date | undefined;\n  /** Earliest selectable day. */\n  min?: Date;\n  /** Latest selectable day. */\n  max?: Date;\n  disabled?: boolean;\n  /** Force the invalid look (e.g. from a form validator). */\n  invalid?: boolean;\n  /** Extra props for the Calendar (e.g. `captionLayout`, `today`). */\n  calendarProps?: CalendarPassthrough;\n  /** Class name for the wrapper; use `className` for the input itself. */\n  wrapperClassName?: string;\n}\n\nfunction DateField(props: DateFieldProps) {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder = \"yyyy-mm-dd\",\n    formatDate = formatDateISO,\n    parseDate = parseDateDefault,\n    min,\n    max,\n    disabled,\n    invalid,\n    calendarProps,\n    wrapperClassName,\n    className,\n    onBlur,\n    ...inputProps\n  } = props;\n  const controlled = \"value\" in props;\n  const [inner, setInner] = React.useState<Date | undefined>(defaultValue);\n  const date = controlled ? value : inner;\n\n  const [text, setText] = React.useState(() => (date ? formatDate(date) : \"\"));\n  const [textInvalid, setTextInvalid] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const committed = React.useRef<Date | undefined>(date);\n\n  const commit = React.useCallback(\n    (next: Date | undefined) => {\n      committed.current = next;\n      if (!controlled) setInner(next);\n      onValueChange?.(next);\n    },\n    [controlled, onValueChange],\n  );\n\n  // An external value change (form reset, server data) rewrites the text; a\n  // change this field committed itself leaves the user's text alone.\n  React.useEffect(() => {\n    if (sameDay(date, committed.current)) return;\n    committed.current = date;\n    setText(date ? formatDate(date) : \"\");\n    setTextInvalid(false);\n  }, [date, formatDate]);\n\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.value;\n    setText(next);\n    if (next.trim() === \"\") {\n      setTextInvalid(false);\n      if (date !== undefined) commit(undefined);\n      return;\n    }\n    const parsed = parseDate(next);\n    const ok = parsed !== undefined && inRange(parsed, min, max);\n    setTextInvalid(!ok);\n    if (ok) {\n      if (!sameDay(parsed, date)) commit(parsed);\n    } else if (date !== undefined) {\n      commit(undefined);\n    }\n  };\n\n  const pick = (next: Date | undefined) => {\n    setOpen(false);\n    setTextInvalid(false);\n    setText(next ? formatDate(next) : \"\");\n    if (!sameDay(next, date)) commit(next);\n  };\n\n  const matchers: Matcher[] = [];\n  if (min) matchers.push({ before: min });\n  if (max) matchers.push({ after: max });\n  const isInvalid = invalid || textInvalid;\n\n  return (\n    <div\n      data-slot=\"date-field\"\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n      className={cn(\"relative w-60\", wrapperClassName)}\n    >\n      <Input\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        data-slot=\"date-field-input\"\n        value={text}\n        placeholder={placeholder}\n        disabled={disabled}\n        aria-invalid={isInvalid || undefined}\n        onChange={onChange}\n        onBlur={(event) => {\n          if (date && !textInvalid) setText(formatDate(date));\n          onBlur?.(event);\n        }}\n        className={cn(\"pr-10\", className)}\n        {...inputProps}\n      />\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          data-slot=\"date-field-trigger\"\n          render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n          aria-label=\"Open calendar\"\n          disabled={disabled}\n          className={cn(\n            \"absolute top-1/2 right-1 -translate-y-1/2\",\n            \"text-[color:var(--ds-muted-foreground)] hover:text-[color:var(--ds-foreground)]\",\n          )}\n        >\n          <CalendarIcon />\n        </PopoverTrigger>\n        <PopoverContent data-slot=\"date-field-content\" align=\"end\" className=\"w-auto p-0\">\n          <Calendar\n            {...calendarProps}\n            mode=\"single\"\n            defaultMonth={calendarProps?.defaultMonth ?? date}\n            selected={date}\n            onSelect={pick}\n            disabled={matchers.length > 0 ? matchers : undefined}\n            startMonth={calendarProps?.startMonth ?? min}\n            endMonth={calendarProps?.endMonth ?? max}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nexport {\n  DateField,\n  formatDateISO,\n  formatDateShort,\n  formatDateLong,\n  formatRelative,\n  parseDateISO,\n  parseDateDefault,\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+"use client";
+import { CalendarProps } from "./calendar.js";
+import * as React from "react";
+import { DateRange } from "react-day-picker";
+//#region src/components/date-picker.d.ts
+/** en-GB order, no library: `15 January 2026`. */
+declare function formatDateDefault(date: Date): string;
+type CalendarPassthrough = Omit<CalendarProps, "mode" | "selected" | "onSelect" | "required" | "disabled">;
+export interface DatePickerProps {
+  /** The selected date (controlled). */
+  value?: Date | undefined;
+  /** The initial date (uncontrolled). */
+  defaultValue?: Date | undefined;
+  /** Called with the picked date, or `undefined` when the selected day is clicked again. */
+  onValueChange?: (date: Date | undefined) => void;
+  /** Trigger text while nothing is selected. */
+  placeholder?: string;
+  /** Formats the trigger text; defaults to `15 January 2026`. */
+  formatDate?: (date: Date) => string;
+  /** Disables the trigger. */
+  disabled?: boolean;
+  /** Class name for the trigger button. */
+  className?: string;
+  /** Extra props for the Calendar (e.g. `startMonth`, `captionLayout`, `disabled` matchers via `calendarProps.hidden`). */
+  calendarProps?: CalendarPassthrough & {
+    disabled?: CalendarProps["disabled"];
+  };
+  /** Accessible name for the trigger. */
+  "aria-label"?: string;
+}
+declare function DatePicker(props: DatePickerProps): React.JSX.Element;
+export interface DateRangePickerProps extends Omit<DatePickerProps, "value" | "defaultValue" | "onValueChange"> {
+  value?: DateRange | undefined;
+  defaultValue?: DateRange | undefined;
+  onValueChange?: (range: DateRange | undefined) => void;
+  /** Separator between the two ends; defaults to an en dash. */
+  separator?: string;
+}
+declare function DateRangePicker(props: DateRangePickerProps): React.JSX.Element;
+//#endregion
+export { DatePicker, DateRangePicker, formatDateDefault };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker.js

@@ -0,0 +1,125 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Calendar } from "./calendar.js";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/components/date-picker.tsx
+/**
+* DatePicker.
+*
+* Our outline Button as the trigger, showing the formatted value or a muted
+* placeholder, opening a Popover that holds a single-select Calendar. Picking
+* a day commits the value and closes the popup. Controlled through `value` /
+* `onValueChange`, uncontrolled through `defaultValue`.
+*
+* `DateRangePicker` is the same shape over `mode="range"`. Its popup stays
+* open while both ends are chosen (react-day-picker's first click sets
+* `from === to`, the second widens it), so the user dismisses it.
+*/
+const MONTHS = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+/** en-GB order, no library: `15 January 2026`. */
+function formatDateDefault(date) {
+	return `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;
+}
+function useControllable(controlled, value, defaultValue, onChange) {
+	const [inner, setInner] = React.useState(defaultValue);
+	return [controlled ? value : inner, React.useCallback((next) => {
+		if (!controlled) setInner(next);
+		onChange?.(next);
+	}, [controlled, onChange])];
+}
+function PickerTrigger({ slot, placeholder, label, className, ...props }) {
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		"data-slot": slot,
+		"data-empty": label ? void 0 : true,
+		render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+		className: cn("w-60 justify-start font-normal", "data-[empty]:text-[color:var(--ds-muted-foreground)]", "[&_svg]:text-[color:var(--ds-muted-foreground)]", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(CalendarIcon, {}), /* @__PURE__ */ jsx("span", {
+			"data-slot": `${slot}-value`,
+			className: "truncate",
+			children: label ?? placeholder
+		})]
+	});
+}
+function DatePicker(props) {
+	const { value, defaultValue, onValueChange, placeholder = "Pick a date", formatDate = formatDateDefault, disabled, className, calendarProps, ...rest } = props;
+	const [date, setDate] = useControllable("value" in props, value, defaultValue, onValueChange);
+	const [open, setOpen] = React.useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PickerTrigger, {
+			slot: "date-picker-trigger",
+			placeholder,
+			label: date ? formatDate(date) : void 0,
+			disabled,
+			className,
+			...rest
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			"data-slot": "date-picker-content",
+			align: "start",
+			className: "w-auto p-0",
+			children: /* @__PURE__ */ jsx(Calendar, {
+				...calendarProps,
+				mode: "single",
+				defaultMonth: calendarProps?.defaultMonth ?? date,
+				selected: date,
+				onSelect: (next) => {
+					setDate(next);
+					setOpen(false);
+				}
+			})
+		})]
+	});
+}
+function formatRange(range, formatDate, separator) {
+	if (!range?.from) return void 0;
+	if (!range.to || range.to.getTime() === range.from.getTime()) return formatDate(range.from);
+	return `${formatDate(range.from)}${separator}${formatDate(range.to)}`;
+}
+function DateRangePicker(props) {
+	const { value, defaultValue, onValueChange, placeholder = "Pick a date range", formatDate = formatDateDefault, separator = " – ", disabled, className, calendarProps, ...rest } = props;
+	const [range, setRange] = useControllable("value" in props, value, defaultValue, onValueChange);
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PickerTrigger, {
+		slot: "date-range-picker-trigger",
+		placeholder,
+		label: formatRange(range, formatDate, separator),
+		disabled,
+		className: cn("w-72", className),
+		...rest
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		"data-slot": "date-range-picker-content",
+		align: "start",
+		className: "w-auto p-0",
+		children: /* @__PURE__ */ jsx(Calendar, {
+			numberOfMonths: 2,
+			...calendarProps,
+			mode: "range",
+			defaultMonth: calendarProps?.defaultMonth ?? range?.from,
+			selected: range,
+			onSelect: setRange
+		})
+	})] });
+}
+//#endregion
+export { DatePicker, DateRangePicker, formatDateDefault };
+
+//# sourceMappingURL=date-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\nimport { Button } from \"@/components/button\";\nimport { Calendar, type CalendarProps } from \"@/components/calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DatePicker.\n *\n * Our outline Button as the trigger, showing the formatted value or a muted\n * placeholder, opening a Popover that holds a single-select Calendar. Picking\n * a day commits the value and closes the popup. Controlled through `value` /\n * `onValueChange`, uncontrolled through `defaultValue`.\n *\n * `DateRangePicker` is the same shape over `mode=\"range\"`. Its popup stays\n * open while both ends are chosen (react-day-picker's first click sets\n * `from === to`, the second widens it), so the user dismisses it.\n */\n\nconst MONTHS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\",\n];\n\n/** en-GB order, no library: `15 January 2026`. */\nfunction formatDateDefault(date: Date): string {\n  return `${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`;\n}\n\nfunction useControllable<T>(\n  controlled: boolean,\n  value: T | undefined,\n  defaultValue: T | undefined,\n  onChange: ((next: T) => void) | undefined,\n): [T | undefined, (next: T) => void] {\n  const [inner, setInner] = React.useState<T | undefined>(defaultValue);\n  const current = controlled ? value : inner;\n  const set = React.useCallback(\n    (next: T) => {\n      if (!controlled) setInner(next);\n      onChange?.(next);\n    },\n    [controlled, onChange],\n  );\n  return [current, set];\n}\n\ntype CalendarPassthrough = Omit<\n  CalendarProps,\n  \"mode\" | \"selected\" | \"onSelect\" | \"required\" | \"disabled\"\n>;\n\ninterface PickerTriggerProps {\n  slot: string;\n  placeholder: string;\n  label: string | undefined;\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n  \"aria-label\"?: string | undefined;\n}\n\nfunction PickerTrigger({ slot, placeholder, label, className, ...props }: PickerTriggerProps) {\n  return (\n    <PopoverTrigger\n      data-slot={slot}\n      data-empty={label ? undefined : true}\n      render={<Button variant=\"outline\" />}\n      className={cn(\n        \"w-60 justify-start font-normal\",\n        \"data-[empty]:text-[color:var(--ds-muted-foreground)]\",\n        \"[&_svg]:text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    >\n      <CalendarIcon />\n      <span data-slot={`${slot}-value`} className=\"truncate\">\n        {label ?? placeholder}\n      </span>\n    </PopoverTrigger>\n  );\n}\n\nexport interface DatePickerProps {\n  /** The selected date (controlled). */\n  value?: Date | undefined;\n  /** The initial date (uncontrolled). */\n  defaultValue?: Date | undefined;\n  /** Called with the picked date, or `undefined` when the selected day is clicked again. */\n  onValueChange?: (date: Date | undefined) => void;\n  /** Trigger text while nothing is selected. */\n  placeholder?: string;\n  /** Formats the trigger text; defaults to `15 January 2026`. */\n  formatDate?: (date: Date) => string;\n  /** Disables the trigger. */\n  disabled?: boolean;\n  /** Class name for the trigger button. */\n  className?: string;\n  /** Extra props for the Calendar (e.g. `startMonth`, `captionLayout`, `disabled` matchers via `calendarProps.hidden`). */\n  calendarProps?: CalendarPassthrough & { disabled?: CalendarProps[\"disabled\"] };\n  /** Accessible name for the trigger. */\n  \"aria-label\"?: string;\n}\n\nfunction DatePicker(props: DatePickerProps) {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder = \"Pick a date\",\n    formatDate = formatDateDefault,\n    disabled,\n    className,\n    calendarProps,\n    ...rest\n  } = props;\n  const [date, setDate] = useControllable<Date | undefined>(\n    \"value\" in props,\n    value,\n    defaultValue,\n    onValueChange,\n  );\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PickerTrigger\n        slot=\"date-picker-trigger\"\n        placeholder={placeholder}\n        label={date ? formatDate(date) : undefined}\n        disabled={disabled}\n        className={className}\n        {...rest}\n      />\n      <PopoverContent data-slot=\"date-picker-content\" align=\"start\" className=\"w-auto p-0\">\n        <Calendar\n          {...calendarProps}\n          mode=\"single\"\n          defaultMonth={calendarProps?.defaultMonth ?? date}\n          selected={date}\n          onSelect={(next) => {\n            setDate(next);\n            setOpen(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface DateRangePickerProps extends Omit<\n  DatePickerProps,\n  \"value\" | \"defaultValue\" | \"onValueChange\"\n> {\n  value?: DateRange | undefined;\n  defaultValue?: DateRange | undefined;\n  onValueChange?: (range: DateRange | undefined) => void;\n  /** Separator between the two ends; defaults to an en dash. */\n  separator?: string;\n}\n\nfunction formatRange(\n  range: DateRange | undefined,\n  formatDate: (d: Date) => string,\n  separator: string,\n): string | undefined {\n  if (!range?.from) return undefined;\n  if (!range.to || range.to.getTime() === range.from.getTime()) return formatDate(range.from);\n  return `${formatDate(range.from)}${separator}${formatDate(range.to)}`;\n}\n\nfunction DateRangePicker(props: DateRangePickerProps) {\n  const {\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder = \"Pick a date range\",\n    formatDate = formatDateDefault,\n    separator = \" \\u2013 \",\n    disabled,\n    className,\n    calendarProps,\n    ...rest\n  } = props;\n  const [range, setRange] = useControllable<DateRange | undefined>(\n    \"value\" in props,\n    value,\n    defaultValue,\n    onValueChange,\n  );\n\n  return (\n    <Popover>\n      <PickerTrigger\n        slot=\"date-range-picker-trigger\"\n        placeholder={placeholder}\n        label={formatRange(range, formatDate, separator)}\n        disabled={disabled}\n        className={cn(\"w-72\", className)}\n        {...rest}\n      />\n      <PopoverContent data-slot=\"date-range-picker-content\" align=\"start\" className=\"w-auto p-0\">\n        <Calendar\n          numberOfMonths={2}\n          {...calendarProps}\n          mode=\"range\"\n          defaultMonth={calendarProps?.defaultMonth ?? range?.from}\n          selected={range}\n          onSelect={setRange}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { DatePicker, DateRangePicker, formatDateDefault };\n"],"mappings":"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"}

package/dist/components/dialog.d.ts

@@ -0,0 +1,36 @@
+"use client";
+import * as React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/dialog.d.ts
+/**
+ * Dialog.
+ *
+ * `DialogContent` composes Base UI's Portal + Backdrop + Popup so consumers
+ * keep writing `<DialogContent>…</DialogContent>`. The Radix `Overlay` part is
+ * exported as `DialogOverlay` (a styled Backdrop) for anyone composing by hand.
+ *
+ * Radix users: `asChild` becomes `render={...}`; `onOpenChange` receives
+ * `(open, eventDetails)` rather than just `open`; the popup is only
+ * dismissable via pointer when `modal` is true (the default), and
+ * `disablePointerDismissal` replaces `onPointerDownOutside` preventDefault.
+ */
+declare function Dialog$1(props: Dialog.Root.Props): React.JSX.Element;
+declare function DialogTrigger(props: Dialog.Trigger.Props): React.JSX.Element;
+declare function DialogPortal(props: Dialog.Portal.Props): React.JSX.Element;
+declare function DialogClose(props: Dialog.Close.Props): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: Dialog.Backdrop.Props): React.JSX.Element;
+export interface DialogContentProps extends Dialog.Popup.Props {
+  /** Keep the dialog mounted in the DOM while hidden. */
+  keepMounted?: boolean;
+  /** Where to portal the dialog; defaults to `<body>`. */
+  container?: Dialog.Portal.Props["container"];
+}
+declare function DialogContent({ className, children, keepMounted, container, ...props }: DialogContentProps): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: Dialog.Title.Props): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: Dialog.Description.Props): React.JSX.Element;
+//#endregion
+export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog.js

@@ -0,0 +1,97 @@
+"use client";
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/dialog.tsx
+/**
+* Dialog.
+*
+* `DialogContent` composes Base UI's Portal + Backdrop + Popup so consumers
+* keep writing `<DialogContent>…</DialogContent>`. The Radix `Overlay` part is
+* exported as `DialogOverlay` (a styled Backdrop) for anyone composing by hand.
+*
+* Radix users: `asChild` becomes `render={...}`; `onOpenChange` receives
+* `(open, eventDetails)` rather than just `open`; the popup is only
+* dismissable via pointer when `modal` is true (the default), and
+* `disablePointerDismissal` replaces `onPointerDownOutside` preventDefault.
+*/
+function Dialog$1(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed inset-0 z-50 backdrop-blur-[2px]", "bg-[color-mix(in_oklab,var(--ds-ink-950)_70%,transparent)]", "open:animate-in open:fade-in-0 closed:animate-out closed:fade-out-0", "duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]", className),
+		...props
+	});
+}
+function DialogContent({ className, children, keepMounted, container, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		keepMounted,
+		container,
+		children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(Dialog.Popup, {
+			"data-slot": "dialog-content",
+			className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none", "rounded-[var(--ds-radius-xl)] border border-[var(--ds-border)]", "bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]", "open:animate-in open:fade-in-0 open:zoom-in-95", "closed:animate-out closed:fade-out-0 closed:zoom-out-95", "duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]", className),
+			...props,
+			children
+		})]
+	});
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-1.5 px-5 pb-1 pt-5 text-left", className),
+		...props
+	});
+}
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: cn("px-5 pb-5 pt-1", className),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex flex-col-reverse gap-2 border-t border-[var(--ds-border-subtle)] bg-[var(--ds-card)] px-5 py-3.5 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-[length:var(--ds-text-body-md)] font-semibold leading-none tracking-[-0.01em] text-[color:var(--ds-foreground)]", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Dialog.\n *\n * `DialogContent` composes Base UI's Portal + Backdrop + Popup so consumers\n * keep writing `<DialogContent>…</DialogContent>`. The Radix `Overlay` part is\n * exported as `DialogOverlay` (a styled Backdrop) for anyone composing by hand.\n *\n * Radix users: `asChild` becomes `render={...}`; `onOpenChange` receives\n * `(open, eventDetails)` rather than just `open`; the popup is only\n * dismissable via pointer when `modal` is true (the default), and\n * `disablePointerDismissal` replaces `onPointerDownOutside` preventDefault.\n */\nfunction Dialog(props: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root {...props} />;\n}\n\nfunction DialogTrigger(props: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal(props: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose(props: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 backdrop-blur-[2px]\",\n        \"bg-[color-mix(in_oklab,var(--ds-ink-950)_70%,transparent)]\",\n        \"open:animate-in open:fade-in-0 closed:animate-out closed:fade-out-0\",\n        \"duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps extends DialogPrimitive.Popup.Props {\n  /** Keep the dialog mounted in the DOM while hidden. */\n  keepMounted?: boolean;\n  /** Where to portal the dialog; defaults to `<body>`. */\n  container?: DialogPrimitive.Portal.Props[\"container\"];\n}\n\nfunction DialogContent({ className, children, keepMounted, container, ...props }: DialogContentProps) {\n  return (\n    <DialogPortal keepMounted={keepMounted} container={container}>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none\",\n          \"rounded-[var(--ds-radius-xl)] border border-[var(--ds-border)]\",\n          \"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]\",\n          \"open:animate-in open:fade-in-0 open:zoom-in-95\",\n          \"closed:animate-out closed:fade-out-0 closed:zoom-out-95\",\n          \"duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 px-5 pb-1 pt-5 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"dialog-body\" className={cn(\"px-5 pb-5 pt-1\", className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 border-t border-[var(--ds-border-subtle)] bg-[var(--ds-card)] px-5 py-3.5 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"text-[length:var(--ds-text-body-md)] font-semibold leading-none tracking-[-0.01em] text-[color:var(--ds-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAASA,SAAO,OAAmC;CACjD,OAAO,oBAACC,OAAgB,MAAjB,EAAsB,GAAI,MAAQ,CAAA;AAC3C;AAEA,SAAS,cAAc,OAAsC;CAC3D,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,OAAqC;CACzD,OAAO,oBAACA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YAAY,OAAoC;CACvD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAyC;CAC9E,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,0CACA,8DACA,uEACA,gEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAS,cAAc,EAAE,WAAW,UAAU,aAAa,WAAW,GAAG,SAA6B;CACpG,OACE,qBAAC,cAAD;EAA2B;EAAwB;EAAnD,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT,wHACA,kEACA,iGACA,kDACA,2DACA,gEACA,SACF;GACA,GAAI;GAEH;EACoB,CAAA,CACX;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,kBAAkB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9F;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,wHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAA4C;CACrF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}