@ratio-ui/core 0.2.0 → 0.4.0

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,92 @@
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+// src/components/combobox/Combobox.tsx
+const toOption = (item) => typeof item === "string" ? {
+	value: item,
+	label: item
+} : item;
+const ROOT_CLASSES = {
+	field: "rt:flex rt:h-9 rt:w-full rt:min-w-0 rt:items-center rt:gap-0.5 rt:rounded-lg rt:bg-background rt:pr-1.5 rt:shadow-ring-subtle rt:transition-colors rt:forced-outline rt:focus-within:shadow-ring-focus rt:has-aria-invalid:shadow-ring-invalid rt:has-aria-invalid:focus-within:shadow-ring-invalid rt:has-disabled:opacity-50",
+	input: "rt:h-full rt:min-w-0 rt:flex-1 rt:bg-transparent rt:pl-3 rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:outline-none rt:disabled:cursor-not-allowed",
+	button: "rt:flex rt:size-6 rt:items-center rt:justify-center rt:rounded-md rt:text-muted-foreground rt:outline-none rt:hover:text-foreground rt:focus-visible:focus-ring rt:disabled:pointer-events-none",
+	popup: "rt:group/combobox-content rt:max-h-available rt:w-anchor rt:max-w-available rt:overflow-hidden rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:text-b3 rt:text-popover-foreground rt:outline-hidden rt:transition-colors",
+	item: "rt:relative rt:flex rt:h-7 rt:w-full rt:cursor-default rt:items-center rt:gap-2 rt:pr-8 rt:pl-3 rt:text-b3 rt:text-foreground rt:outline-none rt:select-none rt:transition-colors rt:data-highlighted:bg-accent rt:data-highlighted:text-accent-foreground rt:data-disabled:pointer-events-none rt:data-disabled:opacity-50"
+};
+/**
+* A field to choose one option from a list, with a search: type to narrow the list, pick with the mouse or Enter.
+* The field looks like an Input and the list like a Popover panel. For several choices shown as chips, use TagInput.
+* Mark it invalid with aria-invalid; give the list an empty text with emptyText. Inside a Field, the label, hint, error
+* and required mark reach the input.
+*/
+function Combobox$1({ items, value, defaultValue, onValueChange, placeholder, emptyText = "No results found", "aria-invalid": ariaInvalid, invalid = false, clearable = true, disabled = false, name, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": ariaRequired }) {
+	const isInvalid = invalid || ariaInvalid === true || ariaInvalid === "true";
+	const options = items.map(toOption);
+	const key = JSON.stringify(options);
+	const labels = useMemo(() => new Map(JSON.parse(key).map((o) => [o.value, o.label])), [key]);
+	const root = {
+		items: useMemo(() => [...labels.keys()], [labels]),
+		disabled,
+		name,
+		itemToStringLabel: (v) => labels.get(v) ?? v,
+		onValueChange: (v, details) => onValueChange?.(v, details)
+	};
+	const controlled = value !== void 0 ? { value } : {};
+	const initial = defaultValue !== void 0 ? { defaultValue } : {};
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		...root,
+		...controlled,
+		...initial,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "combobox",
+			className: ROOT_CLASSES.field,
+			children: [/* @__PURE__ */ jsx(Combobox.Input, {
+				ref,
+				id,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-required": ariaRequired,
+				"aria-invalid": isInvalid || void 0,
+				placeholder,
+				className: ROOT_CLASSES.input
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:items-center rt:gap-0.5",
+				children: [clearable ? /* @__PURE__ */ jsx(Combobox.Clear, {
+					"aria-label": "Clear",
+					className: ROOT_CLASSES.button,
+					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+				}) : null, /* @__PURE__ */ jsx(Combobox.Trigger, {
+					"aria-label": "Show options",
+					className: ROOT_CLASSES.button,
+					children: /* @__PURE__ */ jsx(Icon, { name: "nav-caret-down" })
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			className: "rt:isolate rt:z-50",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				className: ROOT_CLASSES.popup,
+				children: [/* @__PURE__ */ jsx(Combobox.Empty, {
+					className: "rt:hidden rt:justify-center rt:py-3 rt:text-center rt:text-muted-foreground rt:group-data-empty/combobox-content:flex",
+					children: emptyText
+				}), /* @__PURE__ */ jsx(Combobox.List, {
+					className: "rt:max-h-72 rt:overflow-y-auto rt:overscroll-contain rt:py-1.5 rt:data-empty:py-0",
+					children: (v) => /* @__PURE__ */ jsxs(Combobox.Item, {
+						value: v,
+						className: ROOT_CLASSES.item,
+						children: [labels.get(v), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+							className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex",
+							children: /* @__PURE__ */ jsx(Icon, { name: "check" })
+						})]
+					}, v)
+				})]
+			})
+		}) })]
+	});
+}
+export { Combobox$1 as Combobox };

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxItem, ComboboxProps } from "./Combobox.js";
+export { Combobox, type ComboboxItem, type ComboboxProps };

package/dist/components/combobox/index.js

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

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

@@ -1,9 +1,9 @@
-import { Checkbox } from "../checkbox/Checkbox.js";
 import { RatioLink } from "../link-provider/RatioLink.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
 import { Pagination } from "../pagination/Pagination.js";
 import { Table, TableBody, TableBox, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
-import { useMemo, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useSyncExternalStore } from "react";
 import { FlexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 // src/components/data-table/DataTable.tsx
 const features = tableFeatures({

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

@@ -0,0 +1,34 @@
+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 or is not a date. */
+  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 reports null (as soon as it is typed over a day, and when the field
+ * loses focus) and is marked invalid, aria-invalid, when the field loses focus; the app shows Field's error from the null.
+ * 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,108 @@
+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 reports null (as soon as it is typed over a day, and when the field
+* loses focus) and is marked invalid, aria-invalid, when the field loses focus; the app shows Field's error from the null.
+* 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);
+				else if (day !== null) commit(null);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				const parsed = parseDate(text);
+				if (text.trim() === "") setMalformed(false);
+				else if (parsed === null) {
+					setMalformed(true);
+					commit(null);
+				} 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,40 @@
+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 or is not a range. */
+  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 reports null (as soon as it is typed over a range, and when the field loses focus) and is marked invalid, aria-invalid,
+ * when the field loses focus. 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,146 @@
+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 reports null (as soon as it is typed over a range, and when the field loses focus) and is marked invalid, aria-invalid,
+* when the field loses focus. 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);
+				else if (range !== null) commit(null);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				const parsed = parseRange(text);
+				if (text.trim() === "") setMalformed(false);
+				else if (parsed === null) {
+					setMalformed(true);
+					commit(null);
+				} 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/drawer/Drawer.d.ts

@@ -0,0 +1,52 @@
+import { ComponentProps, JSX } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+/** Props of Drawer. */
+export interface DrawerProps extends Drawer.Root.Props {
+  /** Whether a short bar shows on the edge the drawer is swiped from, as a hint on phones. Defaults to false. */
+  showSwipeHandle?: boolean;
+}
+/**
+ * The root of a drawer: a panel people swipe away on a phone. It holds the open state and renders nothing itself.
+ * `swipeDirection` picks the edge it leaves by (down, the default, makes a bottom drawer). Pass `open` and
+ * `onOpenChange` to control it, or `defaultOpen`. The page behind is inert while it is open, with no scrim over it.
+ */
+declare function Drawer$1({ modal, showSwipeHandle, swipeDirection, ...props }: DrawerProps): JSX.Element;
+/** Props of DrawerTrigger. */
+export type DrawerTriggerProps = Omit<Drawer.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the drawer. */
+export declare function DrawerTrigger(props: DrawerTriggerProps): JSX.Element;
+/** Props of DrawerClose. */
+export type DrawerCloseProps = Omit<Drawer.Close.Props, 'className' | 'style'>;
+/** A button that closes the drawer, such as Done in the footer. */
+export declare function DrawerClose(props: DrawerCloseProps): JSX.Element;
+/** Props of DrawerContent. */
+export interface DrawerContentProps extends Omit<Drawer.Popup.Props, 'className' | 'style'> {
+  /** Whether the corner close button shows. It is the way to close without swiping. Defaults to true. */
+  showCloseButton?: boolean;
+  /** The accessible name of the corner close button. Defaults to Close. */
+  closeLabel?: string;
+}
+/**
+ * The panel, white with a hairline and 24px corners on its inner edge. A bottom drawer spans the screen and sizes to its
+ * content; a side drawer is full height and three quarters of a phone screen, 384px from the small breakpoint up. It
+ * follows the finger while it is swiped and otherwise does not move: no slide in or out, no scrim, blur or shadow.
+ * Put DrawerHeader, the content and DrawerFooter inside.
+ */
+export declare function DrawerContent({ children, showCloseButton, closeLabel, ...props }: DrawerContentProps): JSX.Element;
+/** Props of DrawerHeader. */
+export type DrawerHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked, with room on the right for the close button. */
+export declare function DrawerHeader(props: DrawerHeaderProps): JSX.Element;
+/** Props of DrawerFooter. */
+export type DrawerFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The actions at the bottom of the drawer, stacked full width for a thumb. */
+export declare function DrawerFooter(props: DrawerFooterProps): JSX.Element;
+/** Props of DrawerTitle. */
+export type DrawerTitleProps = Omit<Drawer.Title.Props, 'className' | 'style'>;
+/** The drawer's name, in the b4 style. It names the drawer for assistive technology. */
+export declare function DrawerTitle(props: DrawerTitleProps): JSX.Element;
+/** Props of DrawerDescription. */
+export type DrawerDescriptionProps = Omit<Drawer.Description.Props, 'className' | 'style'>;
+/** One line that says what the drawer is for, in subdued body text. */
+export declare function DrawerDescription(props: DrawerDescriptionProps): JSX.Element;
+export { Drawer$1 as Drawer };

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,120 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+// src/components/drawer/Drawer.tsx
+const DrawerContext = createContext({
+	modal: true,
+	showSwipeHandle: false
+});
+/**
+* The root of a drawer: a panel people swipe away on a phone. It holds the open state and renders nothing itself.
+* `swipeDirection` picks the edge it leaves by (down, the default, makes a bottom drawer). Pass `open` and
+* `onOpenChange` to control it, or `defaultOpen`. The page behind is inert while it is open, with no scrim over it.
+*/
+function Drawer$1({ modal = true, showSwipeHandle = false, swipeDirection = "down", ...props }) {
+	const value = useMemo(() => ({
+		modal,
+		showSwipeHandle
+	}), [modal, showSwipeHandle]);
+	return /* @__PURE__ */ jsx(DrawerContext, {
+		value,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			modal,
+			swipeDirection,
+			...props
+		})
+	});
+}
+/** The button that opens the drawer. */
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+/** A button that closes the drawer, such as Done in the footer. */
+function DrawerClose(props) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+/**
+* The panel, white with a hairline and 24px corners on its inner edge. A bottom drawer spans the screen and sizes to its
+* content; a side drawer is full height and three quarters of a phone screen, 384px from the small breakpoint up. It
+* follows the finger while it is swiped and otherwise does not move: no slide in or out, no scrim, blur or shadow.
+* Put DrawerHeader, the content and DrawerFooter inside.
+*/
+function DrawerContent({ children, showCloseButton = true, closeLabel = "Close", ...props }) {
+	const { modal, showSwipeHandle } = use(DrawerContext);
+	return /* @__PURE__ */ jsx(Drawer.Portal, { children: /* @__PURE__ */ jsx(Drawer.Viewport, {
+		"data-slot": "drawer-viewport",
+		className: cn("rt:pointer-events-none rt:fixed rt:inset-0 rt:z-50", modal === true && "rt:pointer-events-auto"),
+		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+			"data-slot": "drawer-popup",
+			className: cn("rt:group/drawer-popup rt:pointer-events-auto rt:fixed rt:z-50 rt:flex rt:max-h-full rt:min-h-0 rt:flex-col rt:border-border rt:bg-popover rt:text-b3 rt:text-popover-foreground rt:select-none rt:drawer-swipe rt:focus-visible:focus-ring", "rt:swipe-y:inset-x-0 rt:swipe-x:inset-y-0 rt:swipe-x:w-3/4 rt:swipe-x:flex-row rt:swipe-x:sm:w-96", "rt:swipe-down:bottom-0 rt:swipe-down:rounded-t-3xl rt:swipe-down:border-x rt:swipe-down:border-t", "rt:swipe-up:top-0 rt:swipe-up:rounded-b-3xl rt:swipe-up:border-x rt:swipe-up:border-b", "rt:swipe-left:left-0 rt:swipe-left:rounded-r-3xl rt:swipe-left:border-y rt:swipe-left:border-r", "rt:swipe-right:right-0 rt:swipe-right:rounded-l-3xl rt:swipe-right:border-y rt:swipe-right:border-l"),
+			...props,
+			children: [
+				showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}),
+				/* @__PURE__ */ jsx(Drawer.Content, {
+					"data-slot": "drawer-content",
+					className: "rt:flex rt:min-h-0 rt:flex-1 rt:flex-col rt:overflow-y-auto rt:overscroll-contain rt:select-text rt:group-data-swiping/drawer-popup:select-none",
+					children
+				}),
+				showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
+					"data-slot": "drawer-close",
+					"aria-label": closeLabel,
+					className: "rt:absolute rt:top-5 rt:right-5 rt:flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 12
+					})
+				})
+			]
+		})
+	}) });
+}
+/** A short bar on the edge the drawer is swiped from. It is decorative: the whole panel takes the swipe. */
+function DrawerSwipeHandle() {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: "rt:flex rt:shrink-0 rt:items-center rt:justify-center rt:cursor-grab rt:group-swipe-y/drawer-popup:h-5 rt:group-swipe-x/drawer-popup:w-5 rt:group-swipe-up/drawer-popup:order-last rt:group-swipe-left/drawer-popup:order-last rt:active:cursor-grabbing",
+		children: /* @__PURE__ */ jsx("span", { className: "rt:block rt:rounded-sm rt:bg-muted rt:group-swipe-y/drawer-popup:h-1 rt:group-swipe-y/drawer-popup:w-12 rt:group-swipe-x/drawer-popup:h-12 rt:group-swipe-x/drawer-popup:w-1" })
+	});
+}
+/** The title and description, stacked, with room on the right for the close button. */
+function DrawerHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: "rt:flex rt:shrink-0 rt:flex-col rt:gap-1 rt:p-6 rt:pr-20",
+		...props
+	});
+}
+/** The actions at the bottom of the drawer, stacked full width for a thumb. */
+function DrawerFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: "rt:mt-auto rt:flex rt:shrink-0 rt:flex-col rt:gap-2 rt:px-6 rt:pb-6",
+		...props
+	});
+}
+/** The drawer's name, in the b4 style. It names the drawer for assistive technology. */
+function DrawerTitle(props) {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: "rt:text-b4 rt:text-foreground-strong",
+		...props
+	});
+}
+/** One line that says what the drawer is for, in subdued body text. */
+function DrawerDescription(props) {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+export { Drawer$1 as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };

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

@@ -0,0 +1,2 @@
+import { Drawer, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from "./Drawer.js";
+export { Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps };

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./Drawer.js";