@ratio-ui/core 0.2.0 → 0.3.0

package/dist/components/media-grid/MediaGrid.js

@@ -0,0 +1,303 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { formatCount } from "../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+import { Progress } from "@base-ui/react/progress";
+import { useDropzone } from "react-dropzone";
+// src/components/media-grid/MediaGrid.tsx
+const orderKey = (ids) => ids.join("\n");
+const IMAGES = { "image/*": [] };
+const INSTRUCTIONS = { draggable: "To move an image, press space or enter to pick it up, the arrow keys to move it, space or enter to drop it and escape to cancel. The Move left, Move right and Make cover buttons move it too" };
+function MediaTile({ item, index, last, disabled, onAction }) {
+	const { attributes, listeners, setNodeRef, isDragging } = useSortable({
+		id: item.id,
+		disabled
+	});
+	const id = useId();
+	const isCover = index === 0;
+	const uploading = item.progress !== void 0 && item.progress < 100 && !item.error;
+	const describedBy = [
+		attributes["aria-describedby"],
+		isCover ? `${id}-cover` : null,
+		item.error ? `${id}-error` : null
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "media-grid-item",
+		"data-media-id": item.id,
+		className: "rt:flex rt:w-24 rt:flex-col rt:gap-1",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "rt:relative rt:size-24",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						ref: setNodeRef,
+						...attributes,
+						...listeners,
+						"aria-describedby": describedBy,
+						"aria-invalid": item.error ? true : void 0,
+						"data-dragging": isDragging || void 0,
+						className: "rt:size-full rt:cursor-grab rt:overflow-hidden rt:rounded-lg rt:bg-muted rt:p-px rt:shadow-ring-subtle rt:forced-outline rt:select-none rt:transition-colors rt:focus-visible:focus-ring rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:aria-disabled:cursor-default rt:data-dragging:opacity-50",
+						children: /* @__PURE__ */ jsx("img", {
+							src: item.src,
+							alt: item.alt,
+							draggable: false,
+							className: "rt:size-full rt:rounded-md rt:object-cover"
+						})
+					}),
+					isCover ? /* @__PURE__ */ jsx("span", {
+						id: `${id}-cover`,
+						className: "rt:pointer-events-none rt:absolute rt:top-1 rt:left-1 rt:rounded-sm rt:bg-background rt:px-1.5 rt:text-c2 rt:text-foreground",
+						children: "Cover"
+					}) : null,
+					uploading ? /* @__PURE__ */ jsx(Progress.Root, {
+						value: item.progress ?? 0,
+						"aria-label": `Uploading ${item.alt}`,
+						className: "rt:pointer-events-none rt:absolute rt:inset-x-2 rt:bottom-2",
+						children: /* @__PURE__ */ jsx(Progress.Track, {
+							"data-slot": "media-grid-progress-track",
+							className: "rt:h-progress rt:overflow-hidden rt:bg-progress-track",
+							children: /* @__PURE__ */ jsx(Progress.Indicator, { className: "rt:h-full rt:bg-progress" })
+						})
+					}) : null
+				]
+			}),
+			item.error ? /* @__PURE__ */ jsxs("span", {
+				className: "rt:flex rt:items-start rt:gap-1 rt:text-error-icon",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "rt:mt-0.5 rt:flex",
+					children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle" })
+				}), /* @__PURE__ */ jsx("span", {
+					id: `${id}-error`,
+					className: "rt:text-c1 rt:text-error",
+					children: item.error
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": item.alt,
+				className: "rt:flex rt:flex-col rt:items-start",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "rt:flex rt:w-full rt:justify-between",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							iconOnly: true,
+							"aria-label": "Move left",
+							"data-media-action": "left",
+							disabled: disabled || isCover,
+							onClick: () => onAction("left", index),
+							children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							iconOnly: true,
+							"aria-label": "Move right",
+							"data-media-action": "right",
+							disabled: disabled || last,
+							onClick: () => onAction("right", index),
+							children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							iconOnly: true,
+							"aria-label": "Remove",
+							"data-media-action": "remove",
+							disabled,
+							onClick: () => onAction("remove", index),
+							children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+						})
+					]
+				}), isCover ? null : /* @__PURE__ */ jsx(Button, {
+					variant: "link",
+					"data-media-action": "cover",
+					disabled,
+					onClick: () => onAction("cover", index),
+					children: "Make cover"
+				})]
+			})
+		]
+	});
+}
+/**
+* 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.
+*/
+function MediaGrid({ items, onAdd, onReorder, onRemove, onMakeCover, accept = IMAGES, disabled = false, addLabel = "Add media", "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...rest }) {
+	const ids = items.map((i) => i.id);
+	const total = formatCount(items.length);
+	const [activeId, setActiveId] = useState(null);
+	const pendingRef = useRef(null);
+	const statusRef = useRef(null);
+	const { getRootProps, getInputProps, open, isDragActive, rootRef } = useDropzone({
+		accept,
+		disabled,
+		multiple: true,
+		noClick: true,
+		noKeyboard: true,
+		onDrop: (files) => {
+			if (files.length > 0) onAdd(files);
+		}
+	});
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 200,
+		tolerance: 6
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	useEffect(() => {
+		const want = pendingRef.current;
+		const root = rootRef.current;
+		if (!want || !root) return;
+		const now = orderKey(items.map((i) => i.id));
+		if (now === want.before) return;
+		pendingRef.current = null;
+		if (now !== want.expected) return;
+		if (statusRef.current) statusRef.current.textContent = want.message;
+		const focused = document.activeElement;
+		if (focused && focused !== document.body && !root.contains(focused)) return;
+		const tile = Array.from(root.querySelectorAll("[data-slot=\"media-grid-item\"]")).find((el) => el.dataset.mediaId === want.id);
+		for (const action of want.actions) {
+			const target = tile?.querySelector(`button[data-media-action="${action}"]`);
+			if (target && !target.disabled) {
+				target.focus();
+				return;
+			}
+		}
+		root.querySelector("button[data-media-action=\"add\"]")?.focus();
+	}, [items, rootRef]);
+	const altOf = (id) => items.find((i) => i.id === id)?.alt ?? "";
+	const positionOf = (id) => formatCount(ids.indexOf(String(id)) + 1);
+	const announcements = {
+		onDragStart: ({ active }) => `Picked up ${altOf(active.id)}, position ${positionOf(active.id)} of ${total}`,
+		onDragOver: ({ active, over }) => over ? `${altOf(active.id)} is over position ${positionOf(over.id)} of ${total}` : `${altOf(active.id)} is not over a position`,
+		onDragEnd: ({ active, over }) => over ? `${altOf(active.id)} dropped at position ${positionOf(over.id)} of ${total}` : `${altOf(active.id)} dropped`,
+		onDragCancel: ({ active }) => `Moving ${altOf(active.id)} cancelled`
+	};
+	const onAction = (action, index) => {
+		const item = items[index];
+		if (!item) return;
+		const before = orderKey(ids);
+		if (action === "remove") {
+			const next = ids.filter((id) => id !== item.id);
+			pendingRef.current = {
+				before,
+				expected: orderKey(next),
+				message: `${item.alt} removed`,
+				id: (items[index + 1] ?? items[index - 1])?.id ?? null,
+				actions: ["remove"]
+			};
+			onRemove(item.id);
+			return;
+		}
+		if (action === "cover") {
+			const next = arrayMove(ids, index, 0);
+			pendingRef.current = {
+				before,
+				expected: orderKey(next),
+				message: `${item.alt} is now the cover`,
+				id: item.id,
+				actions: ["right", "remove"]
+			};
+			onReorder(next);
+			onMakeCover?.(item.id);
+			return;
+		}
+		const to = action === "left" ? index - 1 : index + 1;
+		if (to < 0 || to >= items.length) return;
+		const next = arrayMove(ids, index, to);
+		pendingRef.current = {
+			before,
+			expected: orderKey(next),
+			message: `${item.alt} moved to position ${formatCount(to + 1)} of ${total}`,
+			id: item.id,
+			actions: action === "left" ? [
+				"left",
+				"right",
+				"remove"
+			] : [
+				"right",
+				"left",
+				"remove"
+			]
+		};
+		onReorder(next);
+	};
+	const onDragEnd = ({ active, over }) => {
+		setActiveId(null);
+		if (!over || active.id === over.id) return;
+		const from = ids.indexOf(String(active.id));
+		const to = ids.indexOf(String(over.id));
+		if (from < 0 || to < 0) return;
+		onReorder(arrayMove(ids, from, to));
+	};
+	const active = items.find((i) => i.id === activeId);
+	return /* @__PURE__ */ jsxs("div", {
+		...getRootProps({ role: "group" }),
+		...rest,
+		"aria-label": labelledBy ? ariaLabel : ariaLabel ?? "Media",
+		"aria-labelledby": labelledBy,
+		"data-slot": "media-grid",
+		className: "rt:flex rt:flex-col",
+		children: [
+			/* @__PURE__ */ jsx("input", { ...getInputProps() }),
+			/* @__PURE__ */ jsxs(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				accessibility: {
+					announcements,
+					screenReaderInstructions: INSTRUCTIONS
+				},
+				onDragStart: ({ active: dragged }) => setActiveId(String(dragged.id)),
+				onDragEnd,
+				onDragCancel: () => setActiveId(null),
+				children: [/* @__PURE__ */ jsx(SortableContext, {
+					items: ids,
+					strategy: rectSortingStrategy,
+					children: /* @__PURE__ */ jsxs("ul", {
+						className: "rt:flex rt:flex-wrap rt:gap-2",
+						children: [items.map((item, index) => /* @__PURE__ */ jsx(MediaTile, {
+							item,
+							index,
+							last: index === items.length - 1,
+							disabled,
+							onAction
+						}, item.id)), /* @__PURE__ */ jsx("li", {
+							className: "rt:flex",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": addLabel,
+								"data-media-action": "add",
+								"data-drag-active": isDragActive || void 0,
+								disabled,
+								onClick: () => open(),
+								className: "rt:flex rt:size-24 rt:cursor-pointer rt:items-center rt:justify-center rt:rounded-lg rt:border rt:border-dashed rt:border-border-strong rt:bg-background rt:text-icon rt:transition-colors rt:hover:bg-muted rt:focus-visible:focus-ring rt:data-drag-active:border-primary rt:data-drag-active:bg-primary-tint rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50",
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "plus",
+									size: 16
+								})
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsx(DragOverlay, {
+					dropAnimation: null,
+					children: active ? /* @__PURE__ */ jsx("img", {
+						src: active.src,
+						alt: "",
+						draggable: false,
+						className: "rt:size-24 rt:cursor-grabbing rt:rounded-lg rt:object-cover rt:shadow-ring-subtle"
+					}) : null
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: statusRef,
+				"data-slot": "media-grid-status",
+				role: "status",
+				className: "rt:sr-only"
+			})
+		]
+	});
+}
+export { MediaGrid };

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

@@ -0,0 +1,2 @@
+import { MediaGrid, MediaGridItem, MediaGridProps } from "./MediaGrid.js";
+export { MediaGrid, type MediaGridItem, type MediaGridProps };

package/dist/components/media-grid/index.js

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

package/dist/components/money-input/MoneyInput.d.ts

@@ -0,0 +1,30 @@
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/**
+ * The props of MoneyInput: the HTML attributes of an input, except className, style, size and the ones the field sets
+ * itself (type, inputMode, step, onChange), with the amount in integer paise in and out. Mark an invalid field with
+ * aria-invalid, which draws the error ring around the whole group.
+ */
+export type MoneyInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'inputMode' | 'step' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+  /** The amount in integer paise (12345650 is 1,23,456 rupees and 50 paise), or null for an empty field. Pass it to control the field. */
+  value?: number | null;
+  /** The starting amount in integer paise when the field is not controlled. Defaults to empty. */
+  defaultValue?: number | null;
+  /** Called with the amount in integer paise as it is typed, pasted or cleared (null when empty). */
+  onValueChange?: (paise: number | null) => void;
+  /** The smallest amount in integer paise; the field moves a smaller one up to it on blur. Leave it out to allow negatives. */
+  min?: number;
+  /** The largest amount in integer paise; the field moves a larger one down to it on blur. */
+  max?: number;
+  /** The height in px: 36 for forms, 32 for prices inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A money field: the currency symbol before the amount, inside one ring. It takes and gives integer paise, shows the
+ * amount grouped as India groups it with two decimals (1,23,456.50) once the field loses focus, and reads a pasted
+ * amount written with the currency symbol or with either grouping. Under a name, a form submits paise.
+ */
+export declare function MoneyInput({ value, defaultValue, onValueChange, min, max, size, id, name, disabled, readOnly, required, onPaste, 'aria-describedby': describedBy, ref, ...rest }: MoneyInputProps): JSX.Element;

package/dist/components/money-input/MoneyInput.js

@@ -0,0 +1,72 @@
+import { FORMAT, MONEY_NUMBER_FORMAT, amountToPaise, currencySymbol, formatPaiseForEditing, paiseToAmount, parseMoney } from "../../lib/format.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../input-group/InputGroup.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { NumberField } from "@base-ui/react/number-field";
+// src/components/money-input/MoneyInput.tsx
+const amountOf = (paise) => paise === void 0 ? void 0 : paiseToAmount(paise);
+/**
+* Writes text into the input the way typing does (the value setter React tracks, then an input event), so NumberField
+* reads it with its own change handler and keeps its text and value in step.
+*/
+function typeInto(input, text) {
+	Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, text);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+/**
+* A money field: the currency symbol before the amount, inside one ring. It takes and gives integer paise, shows the
+* amount grouped as India groups it with two decimals (1,23,456.50) once the field loses focus, and reads a pasted
+* amount written with the currency symbol or with either grouping. Under a name, a form submits paise.
+*/
+function MoneyInput({ value, defaultValue = null, onValueChange, min, max, size = 36, id, name, disabled, readOnly, required, onPaste, "aria-describedby": describedBy, ref, ...rest }) {
+	const [ownPaise, setOwnPaise] = useState(defaultValue);
+	const paise = value === void 0 ? ownPaise : value;
+	const symbolId = useId();
+	const change = (amount) => {
+		const next = amount === null ? null : amountToPaise(amount);
+		if (value === void 0) setOwnPaise(next);
+		onValueChange?.(next);
+	};
+	const paste = (event) => {
+		onPaste?.(event);
+		const input = event.currentTarget;
+		if (event.defaultPrevented || input.readOnly) return;
+		event.preventDefault();
+		const { value: text, selectionStart, selectionEnd } = input;
+		const pasted = event.clipboardData.getData("text/plain");
+		const next = parseMoney(text.slice(0, selectionStart ?? text.length) + pasted + text.slice(selectionEnd ?? text.length));
+		if (next !== null) typeInto(input, formatPaiseForEditing(next));
+	};
+	return /* @__PURE__ */ jsxs(NumberField.Root, {
+		id,
+		value: paise === null ? null : paiseToAmount(paise),
+		onValueChange: change,
+		locale: FORMAT.locale,
+		format: MONEY_NUMBER_FORMAT,
+		min: amountOf(min),
+		max: amountOf(max),
+		disabled,
+		readOnly,
+		required,
+		children: [/* @__PURE__ */ jsxs(InputGroup, {
+			size,
+			"aria-disabled": disabled || void 0,
+			children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(InputGroupText, {
+				id: symbolId,
+				children: currencySymbol()
+			}) }), /* @__PURE__ */ jsx(NumberField.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, {}),
+				ref,
+				"aria-describedby": describedBy === void 0 ? symbolId : `${symbolId} ${describedBy}`,
+				onPaste: paste,
+				...rest
+			})]
+		}), name !== void 0 && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: paise ?? "",
+			disabled
+		})]
+	});
+}
+export { MoneyInput };

package/dist/components/money-input/index.d.ts

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

package/dist/components/money-input/index.js

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

package/dist/components/page-header/PageHeader.js

@@ -1,5 +1,5 @@
-import { Button } from "../button/Button.js";
 import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
 import { RatioLink } from "../link-provider/RatioLink.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu/DropdownMenu.js";
 import { StatusPill } from "../status-pill/StatusPill.js";

package/dist/components/save-bar/SaveBar.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+/** The props of SaveBar: the HTML attributes of its div, except className, style, children and onSave. */
+export type SaveBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> & {
+  /** Whether the form has unsaved changes. The bar renders nothing when false. */
+  dirty: boolean;
+  /** True while the save is running: Save is disabled and reads the saving label. */
+  saving?: boolean;
+  /** Called by Save. */
+  onSave: () => void;
+  /** Called by Discard. The bar asks nothing itself: confirm in the caller if you need to. */
+  onDiscard: () => void;
+  /** The message. Defaults to "Unsaved changes". */
+  message?: ReactNode;
+  /** The Save label. Defaults to "Save". */
+  saveLabel?: ReactNode;
+  /** The Save label while saving. Defaults to "Saving…". */
+  savingLabel?: ReactNode;
+  /** The Discard label. Defaults to "Discard". */
+  discardLabel?: ReactNode;
+  /** Receives the rendered div. */
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * The bar that appears under the top bar when a form is dirty: a message, Discard and Save. It renders in flow, so the
+ * page (AppShell) decides where it sits. While saving, Save is disabled; Discard only calls onDiscard.
+ */
+export declare function SaveBar({ dirty, saving, onSave, onDiscard, message, saveLabel, savingLabel, discardLabel, ref, ...rest }: SaveBarProps): JSX.Element | null;

package/dist/components/save-bar/SaveBar.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/cn.js";
+import { Text } from "../text/Text.js";
+import { Button } from "../button/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/save-bar/SaveBar.tsx
+/**
+* The bar that appears under the top bar when a form is dirty: a message, Discard and Save. It renders in flow, so the
+* page (AppShell) decides where it sits. While saving, Save is disabled; Discard only calls onDiscard.
+*/
+function SaveBar({ dirty, saving = false, onSave, onDiscard, message = "Unsaved changes", saveLabel = "Save", savingLabel = "Saving…", discardLabel = "Discard", ref, ...rest }) {
+	if (!dirty) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"data-slot": "save-bar",
+		...rest,
+		ref,
+		"aria-busy": saving || void 0,
+		className: cn("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:justify-between rt:gap-3 rt:border-b rt:border-border rt:bg-background rt:px-3 rt:py-2"),
+		children: [/* @__PURE__ */ jsx(Text, {
+			variant: "b4",
+			children: message
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:shrink-0 rt:items-center rt:gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: onDiscard,
+				children: discardLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "main",
+				disabled: saving,
+				onClick: onSave,
+				children: saving ? savingLabel : saveLabel
+			})]
+		})]
+	});
+}
+export { SaveBar };

package/dist/components/save-bar/index.d.ts

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

package/dist/components/save-bar/index.js

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

package/dist/components/search-field/SearchField.js

@@ -1,7 +1,7 @@
 import { Icon } from "../icon/Icon.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
-import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 // src/components/search-field/SearchField.tsx
 /**
 * The search field above a listing: a search icon, the input and a clear button that appears once there is text.

package/dist/components/select/Select.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from "react";
+import { Select } from "@base-ui/react/select";
+/** The props of Select: Base UI's root props, such as value, defaultValue, onValueChange, items, name and disabled. */
+export type SelectProps<Value = string> = Select.Root.Props<Value>;
+/** A choice from a fixed list. Pass items ({ label, value }[]) so the trigger shows the label of the chosen value. Put a SelectTrigger and a SelectContent inside it. */
+declare function Select$1<Value = string>(props: SelectProps<Value>): JSX.Element;
+/** The height of the trigger in px: 36 for forms, 32 for fields inside a table. */
+export type SelectSize = 36 | 32;
+/** The props of SelectTrigger: Base UI's trigger props except className and style, with the height. Mark an invalid field with aria-invalid. */
+export type SelectTriggerProps = Omit<Select.Trigger.Props, 'className' | 'style'> & {
+  /** The height in px: 36 for forms, 32 inside a table. Defaults to 36. */
+  size?: SelectSize;
+};
+/** The closed field: the chosen value (or the placeholder) and a chevron at the right. Put a SelectValue inside it. */
+export declare function SelectTrigger({ size, children, ...props }: SelectTriggerProps): JSX.Element;
+/** The props of SelectValue: Base UI's value props except className and style. */
+export type SelectValueProps = Omit<Select.Value.Props, 'className' | 'style'>;
+/** Shows the label of the chosen option inside the trigger, or the placeholder while nothing is chosen. */
+export declare function SelectValue(props: SelectValueProps): JSX.Element;
+/** The props of SelectContent: the popup props plus where the list sits. */
+export type SelectContentProps = Omit<Select.Popup.Props, 'className' | 'style'> & Pick<Select.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/** The list: the popover look (8px radius, outline, no shadow, 6px 0 padding), as wide as the trigger. It opens below the trigger. */
+export declare function SelectContent({ align, alignOffset, side, sideOffset, children, ...props }: SelectContentProps): JSX.Element;
+/** The props of SelectGroup: Base UI's group props except className and style. */
+export type SelectGroupProps = Omit<Select.Group.Props, 'className' | 'style'>;
+/** Groups related options under a SelectLabel. */
+export declare function SelectGroup(props: SelectGroupProps): JSX.Element;
+/** The props of SelectLabel: Base UI's group label props except className and style. */
+export type SelectLabelProps = Omit<Select.GroupLabel.Props, 'className' | 'style'>;
+/** The heading of a group, in the muted colour. */
+export declare function SelectLabel(props: SelectLabelProps): JSX.Element;
+/** The props of SelectItem: Base UI's item props except className and style. The value is the one the select reports. */
+export type SelectItemProps = Omit<Select.Item.Props, 'className' | 'style'>;
+/** One option. The highlighted one has the accent background, the chosen one a check at its end, a disabled one is dimmed and cannot be chosen. */
+export declare function SelectItem({ children, ...props }: SelectItemProps): JSX.Element;
+/** The props of SelectSeparator: Base UI's separator props except className and style. */
+export type SelectSeparatorProps = Omit<Select.Separator.Props, 'className' | 'style'>;
+/** A hairline between groups. */
+export declare function SelectSeparator(props: SelectSeparatorProps): JSX.Element;
+export { Select$1 as Select };

package/dist/components/select/Select.js

@@ -0,0 +1,84 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Select } from "@base-ui/react/select";
+// src/components/select/Select.tsx
+/** A choice from a fixed list. Pass items ({ label, value }[]) so the trigger shows the label of the chosen value. Put a SelectTrigger and a SelectContent inside it. */
+function Select$1(props) {
+	return /* @__PURE__ */ jsx(Select.Root, { ...props });
+}
+const triggerVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:justify-between rt:gap-2 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:whitespace-nowrap rt:shadow-ring-subtle rt:outline-none rt:select-none rt:transition-colors rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:data-placeholder:text-muted-foreground rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { size: {
+		36: "rt:h-9 rt:pr-8 rt:pl-3",
+		32: "rt:h-8 rt:pr-8 rt:pl-2.75"
+	} },
+	defaultVariants: { size: 36 }
+});
+/** The closed field: the chosen value (or the placeholder) and a chevron at the right. Put a SelectValue inside it. */
+function SelectTrigger({ size = 36, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		className: cn(triggerVariants({ size }), "rt:relative"),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			render: /* @__PURE__ */ jsx("span", { className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex rt:text-muted-foreground" }),
+			children: /* @__PURE__ */ jsx(Icon, { name: "nav-caret-down" })
+		})]
+	});
+}
+/** Shows the label of the chosen option inside the trigger, or the placeholder while nothing is chosen. */
+function SelectValue(props) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		className: "rt:min-w-0 rt:flex-1 rt:truncate rt:text-left",
+		...props
+	});
+}
+/** The list: the popover look (8px radius, outline, no shadow, 6px 0 padding), as wide as the trigger. It opens below the trigger. */
+function SelectContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, children, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		alignItemWithTrigger: false,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Select.Popup, {
+			className: "rt:max-h-available rt:min-w-anchor rt:overflow-y-auto rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:py-1.5 rt:text-b3 rt:text-popover-foreground rt:outline-hidden rt:transition-colors",
+			...props,
+			children: /* @__PURE__ */ jsx(Select.List, { children })
+		})
+	}) });
+}
+/** Groups related options under a SelectLabel. */
+function SelectGroup(props) {
+	return /* @__PURE__ */ jsx(Select.Group, { ...props });
+}
+/** The heading of a group, in the muted colour. */
+function SelectLabel(props) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		className: "rt:px-3 rt:py-1 rt:text-label rt:uppercase rt:text-foreground-subdued",
+		...props
+	});
+}
+/** One option. The highlighted one has the accent background, the chosen one a check at its end, a disabled one is dimmed and cannot be chosen. */
+function SelectItem({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		className: "rt:relative rt:flex rt:h-7 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",
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "rt:flex-1 rt:truncate",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex" }),
+			children: /* @__PURE__ */ jsx(Icon, { name: "check" })
+		})]
+	});
+}
+/** A hairline between groups. */
+function SelectSeparator(props) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		className: "rt:my-1.5 rt:h-px rt:bg-divider",
+		...props
+	});
+}
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };

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

@@ -0,0 +1,2 @@
+import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./Select.js";
+export { Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./Select.js";