@ratio-ui/core 0.2.0 → 0.3.0

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

@@ -0,0 +1,33 @@
+import { CalendarProps } from "../calendar/Calendar.js";
+import "../calendar/index.js";
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/**
+ * The props of DatePicker: the HTML attributes of an input, except className, style, size and the ones the field sets itself,
+ * with the day as a Date in and out. Mark an invalid field with aria-invalid, which draws the error ring around the group.
+ */
+export type DatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+  /** The day, or null for an empty field. Pass it to control the field. */
+  value?: Date | null;
+  /** The starting day when the field is not controlled. Defaults to empty. */
+  defaultValue?: Date | null;
+  /** Called with the day when a typed date is complete or a day is picked, and with null when the text is cleared. */
+  onValueChange?: (value: Date | null) => void;
+  /** The days that cannot be picked in the calendar, for example { before: new Date() }. */
+  disabledDays?: CalendarProps['disabled'];
+  /** The first month the calendar can show. */
+  startMonth?: Date;
+  /** The last month the calendar can show. */
+  endMonth?: Date;
+  /** The height in px: 36 for forms, 32 for fields inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A field that shows a day as DD/MM/YYYY, reads a typed date through the format module and opens a calendar in a popover
+ * from the button at its end. Text that is not a date is marked invalid when the field loses focus, and reports nothing.
+ * Under a name, a form submits the day as YYYY-MM-DD (empty when there is none), never the text on screen.
+ */
+export declare function DatePicker({ value, defaultValue, onValueChange, disabledDays, startMonth, endMonth, size, placeholder, readOnly, disabled, onBlur, ref, name, 'aria-invalid': ariaInvalid, ...rest }: DatePickerProps): JSX.Element;

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

@@ -0,0 +1,104 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { FORMAT, formatDate, formatIsoDate, parseDate } from "../../lib/format.js";
+import { Calendar } from "../calendar/Calendar.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/Popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/date-picker/DatePicker.tsx
+/**
+* A field that shows a day as DD/MM/YYYY, reads a typed date through the format module and opens a calendar in a popover
+* from the button at its end. Text that is not a date is marked invalid when the field loses focus, and reports nothing.
+* Under a name, a form submits the day as YYYY-MM-DD (empty when there is none), never the text on screen.
+*/
+function DatePicker({ value, defaultValue = null, onValueChange, disabledDays, startMonth, endMonth, size = 36, placeholder = FORMAT.datePattern, readOnly, disabled, onBlur, ref, name, "aria-invalid": ariaInvalid, ...rest }) {
+	const controlled = value !== void 0;
+	const [inner, setInner] = useState(defaultValue);
+	const day = controlled ? value : inner;
+	const [text, setText] = useState(() => day === null ? "" : formatDate(day));
+	const [seen, setSeen] = useState(day);
+	const [malformed, setMalformed] = useState(false);
+	const [open, setOpen] = useState(false);
+	if ((seen?.getTime() ?? null) !== (day?.getTime() ?? null)) {
+		setSeen(day);
+		if ((day?.getTime() ?? null) !== (parseDate(text)?.getTime() ?? null)) setText(day === null ? "" : formatDate(day));
+		setMalformed(false);
+	}
+	const commit = (next) => {
+		setSeen(next);
+		if (!controlled) setInner(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(InputGroup, {
+		size,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			...rest,
+			ref,
+			type: "text",
+			autoComplete: "off",
+			placeholder,
+			readOnly,
+			disabled,
+			"aria-invalid": ariaInvalid ?? (malformed ? true : void 0),
+			value: text,
+			onChange: (event) => {
+				const next = event.target.value;
+				setText(next);
+				setMalformed(false);
+				if (next.trim() === "") return commit(null);
+				const parsed = parseDate(next);
+				if (parsed !== null) commit(parsed);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				const parsed = parseDate(text);
+				if (text.trim() === "") setMalformed(false);
+				else if (parsed === null) setMalformed(true);
+				else setText(formatDate(parsed));
+			}
+		}), readOnly ? null : /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "end",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					disabled,
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						iconOnly: true,
+						"aria-label": "Open calendar",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "calendar",
+							size: 12
+						})
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "end",
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						required: true,
+						selected: day ?? void 0,
+						defaultMonth: day ?? void 0,
+						onSelect: (picked) => {
+							setText(formatDate(picked));
+							setMalformed(false);
+							commit(picked);
+							setOpen(false);
+						},
+						disabled: disabledDays,
+						startMonth,
+						endMonth
+					})
+				})]
+			})
+		})]
+	}), name !== void 0 && /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		form: rest.form,
+		value: day === null ? "" : formatIsoDate(day),
+		disabled
+	})] });
+}
+export { DatePicker };

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

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerProps } from "./DatePicker.js";
+export { DatePicker, type DatePickerProps };

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

@@ -0,0 +1 @@
+export { DatePicker } from "./DatePicker.js";

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

@@ -0,0 +1,39 @@
+import { CalendarProps } from "../calendar/Calendar.js";
+import "../calendar/index.js";
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/** A complete range of days, the first day and the last day (the same day for a range of one). */
+export type DateRangeValue = {
+  from: Date;
+  to: Date;
+};
+/**
+ * The props of DateRangePicker: the HTML attributes of an input, except className, style, size and the ones the field sets
+ * itself, with the range as a first and a last day in and out. Mark an invalid field with aria-invalid.
+ */
+export type DateRangePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+  /** The range, or null for an empty field. Pass it to control the field. */
+  value?: DateRangeValue | null;
+  /** The starting range when the field is not controlled. Defaults to empty. */
+  defaultValue?: DateRangeValue | null;
+  /** Called with the range when a typed range is complete or two days are picked, and with null when the text is cleared. */
+  onValueChange?: (value: DateRangeValue | null) => void;
+  /** The days that cannot be picked in the calendar, for example { after: new Date() } for an analytics period. */
+  disabledDays?: CalendarProps['disabled'];
+  /** The first month the calendar can show. */
+  startMonth?: Date;
+  /** The last month the calendar can show. */
+  endMonth?: Date;
+  /** The height in px: 36 for forms, 32 for fields inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A field that shows a range as two DD/MM/YYYY days, reads a typed range through the format module and opens a calendar in
+ * a popover from the button at its end, for analytics periods. Pick the first day, then the last. Text that is not a range
+ * in order is marked invalid when the field loses focus, and reports nothing. Under a name, a form submits two fields,
+ * `name.from` and `name.to`, each as YYYY-MM-DD (empty when there is no range), never the text on screen.
+ */
+export declare function DateRangePicker({ value, defaultValue, onValueChange, disabledDays, startMonth, endMonth, size, placeholder, readOnly, disabled, onBlur, ref, name, 'aria-invalid': ariaInvalid, ...rest }: DateRangePickerProps): JSX.Element;

package/dist/components/date-range-picker/DateRangePicker.js

@@ -0,0 +1,142 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { FORMAT, formatDate, formatIsoDate, parseDate } from "../../lib/format.js";
+import { Calendar } from "../calendar/Calendar.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/Popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/date-range-picker/DateRangePicker.tsx
+const SEPARATOR = " – ";
+const SPLIT = /\s+[-–—]\s+|\s*[–—]\s*/;
+const same = (a, b) => a === null || b === null ? a === b : a.from.getTime() === b.from.getTime() && a.to.getTime() === b.to.getTime();
+const write = (range) => range === null ? "" : `${formatDate(range.from)}${SEPARATOR}${formatDate(range.to)}`;
+/** Reads "28/10/2026 – 03/11/2026" (a dash, en dash or em dash between) as a range, or null when it is not a range in order. */
+function parseRange(text) {
+	const parts = text.trim().split(SPLIT);
+	if (parts.length !== 2) return null;
+	const from = parseDate(parts[0] ?? "");
+	const to = parseDate(parts[1] ?? "");
+	return from === null || to === null || to < from ? null : {
+		from,
+		to
+	};
+}
+/**
+* A field that shows a range as two DD/MM/YYYY days, reads a typed range through the format module and opens a calendar in
+* a popover from the button at its end, for analytics periods. Pick the first day, then the last. Text that is not a range
+* in order is marked invalid when the field loses focus, and reports nothing. Under a name, a form submits two fields,
+* `name.from` and `name.to`, each as YYYY-MM-DD (empty when there is no range), never the text on screen.
+*/
+function DateRangePicker({ value, defaultValue = null, onValueChange, disabledDays, startMonth, endMonth, size = 36, placeholder = `${FORMAT.datePattern}${SEPARATOR}${FORMAT.datePattern}`, readOnly, disabled, onBlur, ref, name, "aria-invalid": ariaInvalid, ...rest }) {
+	const controlled = value !== void 0;
+	const [inner, setInner] = useState(defaultValue);
+	const range = controlled ? value : inner;
+	const [text, setText] = useState(() => write(range));
+	const [seen, setSeen] = useState(range);
+	const [malformed, setMalformed] = useState(false);
+	const [open, setOpen] = useState(false);
+	const [draft, setDraft] = useState();
+	if (!same(seen, range)) {
+		setSeen(range);
+		if (!same(range, parseRange(text))) setText(write(range));
+		setMalformed(false);
+	}
+	const commit = (next) => {
+		setSeen(next);
+		if (!controlled) setInner(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(InputGroup, {
+		size,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			...rest,
+			ref,
+			type: "text",
+			autoComplete: "off",
+			placeholder,
+			readOnly,
+			disabled,
+			"aria-invalid": ariaInvalid ?? (malformed ? true : void 0),
+			value: text,
+			onChange: (event) => {
+				const next = event.target.value;
+				setText(next);
+				setMalformed(false);
+				if (next.trim() === "") return commit(null);
+				const parsed = parseRange(next);
+				if (parsed !== null) commit(parsed);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				const parsed = parseRange(text);
+				if (text.trim() === "") setMalformed(false);
+				else if (parsed === null) setMalformed(true);
+				else setText(write(parsed));
+			}
+		}), readOnly ? null : /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "end",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: (next) => {
+					setDraft(void 0);
+					setOpen(next);
+				},
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					disabled,
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						iconOnly: true,
+						"aria-label": "Open calendar",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "calendar",
+							size: 12
+						})
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "end",
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "range",
+						selected: draft ?? range ?? void 0,
+						defaultMonth: range?.from,
+						onSelect: (_picked, triggerDate) => {
+							if (draft?.from === void 0) {
+								setDraft({
+									from: triggerDate,
+									to: void 0
+								});
+								return;
+							}
+							const [from, to] = triggerDate < draft.from ? [triggerDate, draft.from] : [draft.from, triggerDate];
+							const next = {
+								from,
+								to
+							};
+							setText(write(next));
+							setMalformed(false);
+							commit(next);
+							setDraft(void 0);
+							setOpen(false);
+						},
+						disabled: disabledDays,
+						startMonth,
+						endMonth
+					})
+				})]
+			})
+		})]
+	}), name !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name: `${name}.from`,
+		form: rest.form,
+		value: range === null ? "" : formatIsoDate(range.from),
+		disabled
+	}), /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name: `${name}.to`,
+		form: rest.form,
+		value: range === null ? "" : formatIsoDate(range.to),
+		disabled
+	})] })] });
+}
+export { DateRangePicker };

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

@@ -0,0 +1,2 @@
+import { DateRangePicker, DateRangePickerProps, DateRangeValue } from "./DateRangePicker.js";
+export { DateRangePicker, type DateRangePickerProps, type DateRangeValue };

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

@@ -0,0 +1 @@
+export { DateRangePicker } from "./DateRangePicker.js";

package/dist/components/field/Field.d.ts

@@ -0,0 +1,35 @@
+import { JSX, ReactElement, ReactNode } from "react";
+/** The props of Field. */
+export type FieldProps = {
+  /** The label text. */
+  label: ReactNode;
+  /** Help text under the control. An error replaces it. */
+  hint?: ReactNode;
+  /** The error message. It shows under the control beside the alert glyph and marks the control invalid. */
+  error?: ReactNode;
+  /** An explanation of the field, opened from a small info icon beside the label by keyboard, touch or hover. */
+  info?: ReactNode;
+  /** Shows a star after the label and marks the control aria-required. */
+  required?: boolean;
+  /** Dims the label and disables the control. */
+  disabled?: boolean;
+  /**
+   * The control: one element, such as Input, which gets an id, aria-describedby, aria-invalid, aria-required and disabled.
+   * When the control sits inside a wrapper such as InputGroup, pass a function instead and spread the props it receives
+   * onto the input itself.
+   */
+  children: ReactElement<Record<string, unknown>> | ((props: FieldControlProps) => ReactNode);
+};
+/** The props Field hands to a function child, to spread onto the control. */
+export type FieldControlProps = {
+  id: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: true;
+  'aria-required'?: true;
+  disabled?: true;
+};
+/**
+ * A form row: label, control, hint and error. It wires the label to the control by id, links the hint and error with
+ * aria-describedby, and sets aria-invalid when there is an error. The control keeps an id it already has.
+ */
+export declare function Field({ label, hint, error, info, required, disabled, children }: FieldProps): JSX.Element;

package/dist/components/field/Field.js

@@ -0,0 +1,67 @@
+import { Icon } from "../icon/Icon.js";
+import { Definition } from "../definition/Definition.js";
+import { Label } from "./Label.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, useId } from "react";
+// src/components/field/Field.tsx
+/**
+* A form row: label, control, hint and error. It wires the label to the control by id, links the hint and error with
+* aria-describedby, and sets aria-invalid when there is an error. The control keeps an id it already has.
+*/
+function Field({ label, hint, error, info, required, disabled, children }) {
+	const generatedId = useId();
+	const own = typeof children === "function" ? void 0 : children.props.id;
+	const id = typeof own === "string" && own !== "" ? own : generatedId;
+	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+	const hasHint = !hasError && hint !== void 0 && hint !== null && hint !== false && hint !== "";
+	const messageId = `${id}-message`;
+	const described = [typeof children === "function" ? void 0 : children.props["aria-describedby"], hasError || hasHint ? messageId : void 0].filter((part) => typeof part === "string" && part !== "").join(" ");
+	const wiring = {
+		id,
+		...described === "" ? {} : { "aria-describedby": described },
+		...hasError ? { "aria-invalid": true } : {},
+		...required === true ? { "aria-required": true } : {},
+		...disabled === true ? { disabled: true } : {}
+	};
+	const control = typeof children === "function" ? children(wiring) : cloneElement(children, { ...wiring });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		className: "rt:flex rt:w-full rt:flex-col rt:gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `rt:flex rt:items-center rt:gap-1.5${disabled === true ? " rt:opacity-50" : ""}`,
+				children: [/* @__PURE__ */ jsxs(Label, {
+					htmlFor: id,
+					children: [label, required === true ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "rt:text-foreground-subdued",
+						children: "*"
+					}) : null]
+				}), info === void 0 || info === null || info === false || info === "" ? null : /* @__PURE__ */ jsx(Definition, {
+					definition: info,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "info-circle",
+						tone: "subdued",
+						label: "More information"
+					})
+				})]
+			}),
+			control,
+			hasError ? /* @__PURE__ */ jsxs("p", {
+				id: messageId,
+				role: "alert",
+				className: "rt:flex rt:items-start rt:gap-1.5 rt:text-b1 rt:text-error",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "rt:mt-1 rt:text-error-icon",
+					children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle" })
+				}), /* @__PURE__ */ jsx("span", { children: error })]
+			}) : null,
+			hasHint ? /* @__PURE__ */ jsx("p", {
+				id: messageId,
+				className: "rt:text-b1 rt:text-foreground-subdued",
+				children: hint
+			}) : null
+		]
+	});
+}
+export { Field };

package/dist/components/field/Label.d.ts

@@ -0,0 +1,8 @@
+import { JSX, LabelHTMLAttributes, Ref } from "react";
+/** The props of Label: the HTML attributes of a label, except className and style. */
+export type LabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> & {
+  /** Receives the label element. */
+  ref?: Ref<HTMLLabelElement>;
+};
+/** The text that names a control, in the 12px medium label type. Point htmlFor at the control's id; Field does this for you. */
+export declare function Label({ htmlFor, ref, ...rest }: LabelProps): JSX.Element;

package/dist/components/field/Label.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/field/Label.tsx
+/** The text that names a control, in the 12px medium label type. Point htmlFor at the control's id; Field does this for you. */
+function Label({ htmlFor, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		htmlFor,
+		ref,
+		className: "rt:flex rt:w-fit rt:items-center rt:gap-1 rt:text-b2 rt:text-foreground rt:select-none",
+		...rest
+	});
+}
+export { Label };

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

@@ -0,0 +1,3 @@
+import { Field, FieldControlProps, FieldProps } from "./Field.js";
+import { Label, LabelProps } from "./Label.js";
+export { Field, type FieldControlProps, type FieldProps, Label, type LabelProps };

package/dist/components/field/index.js

@@ -0,0 +1,3 @@
+import { Label } from "./Label.js";
+import { Field } from "./Field.js";
+export { Field, Label };

package/dist/components/filter-tabs/FilterTabs.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
-import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 // src/components/filter-tabs/FilterTabs.tsx

package/dist/components/global-search/GlobalSearch.js

@@ -2,8 +2,8 @@ import { Icon } from "../icon/Icon.js";
 import { formatCount } from "../../lib/format.js";
 import { InputGroup, InputGroupAddon, InputGroupShortcut } from "../input-group/InputGroup.js";
 import { Kbd, KbdGroup } from "../kbd/Kbd.js";
-import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 // src/components/global-search/GlobalSearch.tsx
 /**

package/dist/components/icon/registry.d.ts

@@ -2,6 +2,6 @@ import "@tabler/icons-react";
 /**
  * The name of an icon. The design system's own glyphs come first (plus, search, export, the two pagination chevrons and
  * the five navigation glyphs); the rest are Tabler icons drawn with a 1.5px line: check, x, alert-triangle, info-circle,
- * the dashboard's navigation glyphs (nav-orders to nav-settings), import, more and menu (the phone menu button).
+ * the dashboard's navigation glyphs (nav-orders to nav-settings), import, more and menu (the phone menu button) and calendar (the date pickers' open button).
  */
-export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle' | 'nav-orders' | 'nav-customers' | 'nav-growth' | 'nav-discounts' | 'nav-content' | 'nav-markets' | 'nav-analytics' | 'nav-sales-channels' | 'nav-apps' | 'nav-settings' | 'import' | 'more' | 'menu';
+export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle' | 'nav-orders' | 'nav-customers' | 'nav-growth' | 'nav-discounts' | 'nav-content' | 'nav-markets' | 'nav-analytics' | 'nav-sales-channels' | 'nav-apps' | 'nav-settings' | 'import' | 'more' | 'menu' | 'calendar';

package/dist/components/icon/registry.js

@@ -1,5 +1,5 @@
 import { CHEVRON_LEFT, CHEVRON_RIGHT, EXPORT, NAV_CHEVRON, NAV_HOME, NAV_PRODUCT, NAV_PRODUCT_2, NAV_SHORTCUT, PLUS, SEARCH } from "./glyphs.js";
-import { IconAlertTriangle, IconApps, IconBuildingStore, IconChartBar, IconCheck, IconDiscount2, IconDots, IconFileImport, IconFileText, IconInfoCircle, IconMenu2, IconReceipt, IconSettings, IconTrendingUp, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconApps, IconBuildingStore, IconCalendar, IconChartBar, IconCheck, IconDiscount2, IconDots, IconFileImport, IconFileText, IconInfoCircle, IconMenu2, IconReceipt, IconSettings, IconTrendingUp, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
 // src/components/icon/registry.ts
 /**
 * Every icon by name. nav-chevron and nav-caret-down are one glyph under two names, as in the design system, whose
@@ -117,6 +117,10 @@ const ICONS = {
 	menu: {
 		kind: "tabler",
 		component: IconMenu2
+	},
+	calendar: {
+		kind: "tabler",
+		component: IconCalendar
 	}
 };
 export { ICONS };

package/dist/components/input-group/InputGroup.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
-import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { Input } from "@base-ui/react/input";
 // src/components/input-group/InputGroup.tsx

package/dist/components/link/Link.d.ts

@@ -0,0 +1,22 @@
+import { AnchorHTMLAttributes, JSX, ReactNode, Ref } from "react";
+/**
+ * The props of Link: the attributes of an anchor, except className and style, with the address and the two arrows.
+ */
+export type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style' | 'href' | 'children'> & {
+  /** Where the link goes. */
+  href: string;
+  /** The link text. */
+  children: ReactNode;
+  /** Shows a back arrow before the text, as in "← Products". Screen readers skip it. */
+  back?: boolean;
+  /** Shows a forward arrow after the text, as in "View all variants →". Screen readers skip it. */
+  forward?: boolean;
+  /** Receives the anchor element. */
+  ref?: Ref<HTMLAnchorElement>;
+};
+/**
+ * A text link to another page, such as "← Products" or "View all variants →". It is drawn by the app's LinkProvider, so a
+ * router navigates without a reload; without one it is a plain <a href>. The arrows are decoration and are hidden from
+ * screen readers.
+ */
+export declare function Link({ href, children, back, forward, ref, ...rest }: LinkProps): JSX.Element;

package/dist/components/link/Link.js

@@ -0,0 +1,31 @@
+import { cn } from "../../lib/cn.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/link/Link.tsx
+const LINK = "rt:inline-flex rt:items-center rt:gap-1 rt:rounded-sm rt:text-primary rt:transition-colors rt:hover:underline rt:focus-visible:focus-ring rt:forced-outline";
+/**
+* A text link to another page, such as "← Products" or "View all variants →". It is drawn by the app's LinkProvider, so a
+* router navigates without a reload; without one it is a plain <a href>. The arrows are decoration and are hidden from
+* screen readers.
+*/
+function Link({ href, children, back = false, forward = false, ref, ...rest }) {
+	return /* @__PURE__ */ jsxs(RatioLink, {
+		...rest,
+		ref,
+		href,
+		"data-slot": "link",
+		className: cn(LINK),
+		children: [
+			back && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "←"
+			}),
+			children,
+			forward && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "→"
+			})
+		]
+	});
+}
+export { Link };

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

@@ -0,0 +1,2 @@
+import { Link, LinkProps } from "./Link.js";
+export { Link, type LinkProps };

package/dist/components/link/index.js

@@ -0,0 +1 @@
+export { Link } from "./Link.js";

package/dist/components/media-grid/MediaGrid.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from "react";
+import { Accept } from "react-dropzone";
+/** One image in a MediaGrid. */
+export type MediaGridItem = {
+  /** A stable id, reported back by onReorder, onRemove and onMakeCover. */
+  id: string;
+  /** The image URL, or an object URL while the file uploads. */
+  src: string;
+  /** The text alternative. It also names the item in the action group and the announcements. */
+  alt: string;
+  /** Upload progress from 0 to 100. A thin bar shows on the thumb while it is below 100. */
+  progress?: number;
+  /** Why the upload failed, shown under the thumb beside the warning glyph; the thumb takes the error ring. */
+  error?: string;
+};
+/** The props of MediaGrid. The app uploads the files and owns the list; the grid reports what the person did. */
+export type MediaGridProps = {
+  /** The images in order. The first one is the cover. */
+  items: MediaGridItem[];
+  /** Called with the files chosen in the add tile or dropped on the grid. */
+  onAdd: (files: File[]) => void;
+  /** Called with every id in the new order after a drag, Move left, Move right or Make cover. */
+  onReorder: (ids: string[]) => void;
+  /** Called with the id of the item to take off the grid. */
+  onRemove: (id: string) => void;
+  /** Called with the id after Make cover has moved it first through onReorder, for an app that saves the cover on its own. */
+  onMakeCover?: (id: string) => void;
+  /** The file types the add tile takes, as react-dropzone's accept map. Defaults to every image type. */
+  accept?: Accept;
+  /** Stops adding, dragging and every button. */
+  disabled?: boolean;
+  /** The accessible name of the add tile. Defaults to "Add media". */
+  addLabel?: string;
+  /** The id of the grid. */
+  id?: string;
+  /** The accessible name of the grid. Defaults to "Media" when there is no aria-labelledby. */
+  'aria-label'?: string;
+  /** The id of the visible label that names the grid, such as a Field label. */
+  'aria-labelledby'?: string;
+  /** The id of help text for the grid. */
+  'aria-describedby'?: string;
+};
+/**
+ * The media of a product: a row of square thumbs with an add tile that opens the file picker and takes dropped files.
+ * Thumbs reorder by drag (pointer, touch or keyboard) and by the Move left, Move right and Make cover buttons, so no
+ * drag is needed. The first image is the cover and carries a badge. Uploads show a thin progress bar and failures an
+ * error under the thumb. Every move, cover change and removal is announced to screen readers.
+ */
+export declare function MediaGrid({ items, onAdd, onReorder, onRemove, onMakeCover, accept, disabled, addLabel, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, ...rest }: MediaGridProps): JSX.Element;