@ratio-ui/core 0.2.0 → 0.3.0

package/dist/components/side-nav/SideNav.js

@@ -1,10 +1,10 @@
-import { ShellNavContext } from "../app-shell/context.js";
 import { cn } from "../../lib/cn.js";
-import { Avatar } from "../avatar/Avatar.js";
 import { Icon } from "../icon/Icon.js";
+import { ShellNavContext } from "../app-shell/context.js";
+import { Avatar } from "../avatar/Avatar.js";
 import { RatioLink } from "../link-provider/RatioLink.js";
-import { use, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { use, useState, useSyncExternalStore } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 // src/components/side-nav/SideNav.tsx
 const PHONE_QUERY = "(max-width: 767px)";

package/dist/components/summary-chips/SummaryChips.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, JSX, Ref } from "react";
+/** One chip: a label, with an optional value after it ("Includes GST" and "Yes"). */
+export interface SummaryChip {
+  /** The label, such as Cost price or HSN code. */
+  label: string;
+  /** The value, shown after the label in the foreground ink. Leave out for a chip that is only a name. */
+  value?: string;
+}
+/** The props of SummaryChips: the HTML attributes of a list, except className and style, with the chips. */
+export type SummaryChipsProps = Omit<HTMLAttributes<HTMLUListElement>, 'className' | 'style' | 'children'> & {
+  /** The chips, in order. Nothing is rendered when empty. */
+  items: readonly SummaryChip[];
+  /** Receives the rendered list. */
+  ref?: Ref<HTMLUListElement>;
+};
+/** A row of 20px chips that summarise values, such as the ones a collapsed section still shows. */
+export declare function SummaryChips({ items, ref, ...rest }: SummaryChipsProps): JSX.Element | null;

package/dist/components/summary-chips/SummaryChips.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/summary-chips/SummaryChips.tsx
+/** A row of 20px chips that summarise values, such as the ones a collapsed section still shows. */
+function SummaryChips({ items, ref, ...rest }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		ref,
+		className: "rt:m-0 rt:flex rt:list-none rt:flex-wrap rt:gap-1 rt:p-0",
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "rt:inline-flex rt:h-5 rt:items-center rt:gap-1 rt:rounded-sm rt:border rt:border-status-neutral-border rt:bg-status-neutral-background rt:px-2 rt:text-c1 rt:whitespace-nowrap rt:text-status-neutral-foreground",
+			children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.value !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "rt:text-c2 rt:text-foreground",
+				children: item.value
+			}) : null]
+		}, item.label))
+	});
+}
+export { SummaryChips };

package/dist/components/summary-chips/index.d.ts

@@ -0,0 +1,2 @@
+import { SummaryChip, SummaryChips, SummaryChipsProps } from "./SummaryChips.js";
+export { type SummaryChip, SummaryChips, type SummaryChipsProps };

package/dist/components/summary-chips/index.js

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

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from "react";
+import { Switch } from "@base-ui/react/switch";
+/** The props of Switch: Base UI's switch props, except className, style and render. Give it an aria-label or a label that points to it. */
+export type SwitchProps = Omit<Switch.Root.Props, 'className' | 'style' | 'render'>;
+/**
+ * An on/off switch, 32px by 18px. Off it is drawn with the control hairline; on it is filled in the primary colour.
+ * In forced-colours mode the thumb keeps a system-colour outline, and its side shows the state. The thumb jumps to the other end with no slide, and colours fade over 120ms.
+ */
+declare function Switch$1({ ...props }: SwitchProps): JSX.Element;
+export { Switch$1 as Switch };

package/dist/components/switch/Switch.js

@@ -0,0 +1,20 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/components/switch/Switch.tsx
+/**
+* An on/off switch, 32px by 18px. Off it is drawn with the control hairline; on it is filled in the primary colour.
+* In forced-colours mode the thumb keeps a system-colour outline, and its side shows the state. The thumb jumps to the other end with no slide, and colours fade over 120ms.
+*/
+function Switch$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		className: cn("rt:peer rt:relative rt:inline-flex rt:h-4.5 rt:w-8 rt:shrink-0 rt:cursor-pointer rt:items-center rt:justify-start rt:rounded-3xl rt:bg-background rt:shadow-ring-hairline rt:transition-colors rt:outline-none", "rt:after:absolute rt:after:-inset-x-1.5 rt:after:-inset-y-1.5", "rt:data-checked:justify-end rt:data-checked:bg-primary rt:data-checked:shadow-none", "rt:focus-visible:focus-ring rt:forced-outline", "rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid", "rt:data-disabled:cursor-not-allowed rt:data-disabled:opacity-50"),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "rt:pointer-events-none rt:mx-0.5 rt:block rt:size-3.5 rt:rounded-3xl rt:forced-outline rt:bg-control rt:transition-colors rt:data-checked:bg-primary-foreground"
+		})
+	});
+}
+export { Switch$1 as Switch };

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

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

package/dist/components/switch/index.js

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

package/dist/components/table/Table.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
-import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
 // src/components/table/Table.tsx
 const SectionContext = createContext("body");
 const BoxContext = createContext(false);

package/dist/components/tag-input/TagInput.d.ts

@@ -0,0 +1,44 @@
+import { JSX, Ref } from "react";
+/** The props of TagInput. Field's wiring (id, aria-describedby, aria-invalid, aria-required, disabled) lands on the picker. */
+export type TagInputProps = {
+  /** The existing values the picker offers, such as S, M, L, XL and XXL. */
+  options: readonly string[];
+  /** The chosen values, in order, when the owner holds the state. */
+  value?: readonly string[];
+  /** The values chosen at first, when the component holds the state. */
+  defaultValue?: readonly string[];
+  /** Called with every new list of values: after a pick, an added value or a removal. */
+  onValueChange?: (value: string[]) => void;
+  /** Shows a small field that adds a typed value on Enter. Defaults to true. */
+  creatable?: boolean;
+  /** The placeholder and accessible name of the small field. Defaults to "Add value". */
+  addLabel?: string;
+  /** The placeholder of the picker, shown while nothing is chosen. */
+  placeholder?: string;
+  /** The line the list shows when no value matches the typed text. Defaults to "No matching values". */
+  emptyText?: string;
+  /** The form field name: one hidden input per chosen value is submitted under it. */
+  name?: string;
+  /** Dims the component and stops every change. */
+  disabled?: boolean;
+  /** The id of the picker's input, which a label points to. */
+  id?: string;
+  /** The accessible name of the picker, when no label points to it. */
+  'aria-label'?: string;
+  /** The id of the element that names the picker. */
+  'aria-labelledby'?: string;
+  /** The ids of the hint or error that describe the component. */
+  'aria-describedby'?: string;
+  /** Marks the values as invalid, which draws the error ring. */
+  'aria-invalid'?: boolean | 'true' | 'false';
+  /** Marks the values as required. */
+  'aria-required'?: boolean | 'true' | 'false';
+  /** Receives the picker's input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * Several values as chips in one field in the input's look. The picker offers the existing values (typing filters them),
+ * a small field below adds a new one on Enter, and a chip goes with its remove button or with Backspace in the empty
+ * picker. Base UI's combobox cannot accept a value it does not list, which is why new values have their own field.
+ */
+export declare function TagInput({ options, value, defaultValue, onValueChange, creatable, addLabel, placeholder, emptyText, name, disabled, id, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired }: TagInputProps): JSX.Element;

package/dist/components/tag-input/TagInput.js

@@ -0,0 +1,102 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Input } from "../input/Input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+// src/components/tag-input/TagInput.tsx
+/**
+* Several values as chips in one field in the input's look. The picker offers the existing values (typing filters them),
+* a small field below adds a new one on Enter, and a chip goes with its remove button or with Backspace in the empty
+* picker. Base UI's combobox cannot accept a value it does not list, which is why new values have their own field.
+*/
+function TagInput({ options, value, defaultValue, onValueChange, creatable = true, addLabel = "Add value", placeholder, emptyText = "No matching values", name, disabled, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired }) {
+	const [own, setOwn] = useState(defaultValue ?? []);
+	const [draft, setDraft] = useState("");
+	const anchorRef = useRef(null);
+	const current = value ?? own;
+	const items = [...options, ...current.filter((item) => !options.includes(item))];
+	const change = (next) => {
+		if (value === void 0) setOwn(next);
+		onValueChange?.(next);
+	};
+	const add = (event) => {
+		if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		const text = draft.trim();
+		setDraft("");
+		const same = (item) => item.toLowerCase() === text.toLowerCase();
+		if (text === "" || current.some(same)) return;
+		change([...current, options.find(same) ?? text]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rt:flex rt:w-full rt:flex-col rt:gap-1.5",
+		children: [/* @__PURE__ */ jsxs(Combobox.Root, {
+			multiple: true,
+			items,
+			value: [...current],
+			onValueChange: change,
+			disabled,
+			name,
+			children: [/* @__PURE__ */ jsxs(Combobox.Chips, {
+				ref: anchorRef,
+				"data-slot": "tag-input-chips",
+				className: cn("rt:flex rt:min-h-9 rt:w-full rt:min-w-0 rt:flex-wrap rt:items-center rt:gap-1 rt:rounded-lg rt:bg-background rt:py-2 rt:pr-3 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", current.length > 0 ? "rt:pl-2" : "rt:pl-3"),
+				children: [current.map((item) => /* @__PURE__ */ jsxs(Combobox.Chip, {
+					className: "rt:inline-flex rt:h-5 rt:items-center rt:gap-1 rt:rounded-sm rt:border rt:border-status-neutral-border rt:bg-status-neutral-background rt:pr-0.5 rt:pl-2 rt:text-c1 rt:whitespace-nowrap rt:text-status-neutral-foreground rt:outline-none rt:focus-visible:focus-ring",
+					children: [item, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+						"aria-label": `Remove ${item}`,
+						className: "rt:flex rt:size-4 rt:items-center rt:justify-center rt:rounded-sm rt:text-muted-foreground rt:transition-colors rt:hover:text-foreground rt:focus-visible:focus-ring rt:disabled:pointer-events-none",
+						children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+					})]
+				}, item)), /* @__PURE__ */ jsx(Combobox.Input, {
+					ref,
+					id,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					"aria-required": ariaRequired,
+					placeholder: current.length === 0 ? placeholder : void 0,
+					className: "rt:h-5 rt:min-w-16 rt:flex-1 rt:bg-transparent rt:text-b3 rt:text-foreground rt:outline-none rt:placeholder:text-muted-foreground rt:disabled:cursor-not-allowed"
+				})]
+			}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				anchor: anchorRef,
+				side: "bottom",
+				sideOffset: 4,
+				align: "start",
+				className: "rt:isolate rt:z-50",
+				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+					className: "rt:max-h-available rt:w-anchor rt:max-w-available 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",
+					children: [/* @__PURE__ */ jsx(Combobox.Empty, {
+						className: "rt:px-3 rt:py-1 rt:text-b3 rt:text-muted-foreground rt:empty:hidden",
+						children: emptyText
+					}), /* @__PURE__ */ jsx(Combobox.List, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
+						value: 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",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "rt:flex-1 rt:truncate",
+							children: item
+						}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+							render: /* @__PURE__ */ jsx("span", { className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex" }),
+							children: /* @__PURE__ */ jsx(Icon, { name: "check" })
+						})]
+					}, item) })]
+				})
+			}) })]
+		}), creatable ? /* @__PURE__ */ jsx("div", {
+			className: "rt:w-40",
+			children: /* @__PURE__ */ jsx(Input, {
+				size: 32,
+				"aria-label": addLabel,
+				placeholder: addLabel,
+				"aria-describedby": ariaDescribedBy,
+				value: draft,
+				onChange: (event) => setDraft(event.target.value),
+				onKeyDown: add,
+				disabled
+			})
+		}) : null]
+	});
+}
+export { TagInput };

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

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

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

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

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,15 @@
+import { JSX, Ref, TextareaHTMLAttributes } from "react";
+/** The minimum height of the field in px: 88 for a description, 64 for a compact one. */
+export type TextareaSize = 88 | 64;
+/**
+ * The props of Textarea: the HTML attributes of a textarea, except className, style and the HTML size, with the height.
+ * Mark an invalid field with aria-invalid, which draws the error ring.
+ */
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'> & {
+  /** The height in px: 88 by default, 64 compact. The field can still be dragged taller. */
+  size?: TextareaSize;
+  /** Receives the textarea element. */
+  ref?: Ref<HTMLTextAreaElement>;
+};
+/** A multi-line text field in the input's look: 8px radius, 1px ring that turns blue on focus, 10px 12px padding, 88px tall (64px compact). */
+export declare function Textarea({ size, ref, ...rest }: TextareaProps): JSX.Element;

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/textarea/Textarea.tsx
+const textareaVariants = cva("rt:block rt:w-full rt:min-w-0 rt:resize-y rt:rounded-lg rt:bg-background rt:border-y-2 rt:border-transparent rt:px-3 rt:py-2 rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:shadow-ring-subtle rt:outline-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:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { size: {
+		88: "rt:min-h-22",
+		64: "rt:min-h-16"
+	} },
+	defaultVariants: { size: 88 }
+});
+/** A multi-line text field in the input's look: 8px radius, 1px ring that turns blue on focus, 10px 12px padding, 88px tall (64px compact). */
+function Textarea({ size = 88, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		ref,
+		className: cn(textareaVariants({ size })),
+		...rest
+	});
+}
+export { Textarea };

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

@@ -0,0 +1,2 @@
+import { Textarea, TextareaProps, TextareaSize } from "./Textarea.js";
+export { Textarea, type TextareaProps, type TextareaSize };

package/dist/components/textarea/index.js

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

package/dist/components/top-bar/StoreSwitcher.js

@@ -1,5 +1,5 @@
-import { Avatar } from "../avatar/Avatar.js";
 import { Icon } from "../icon/Icon.js";
+import { Avatar } from "../avatar/Avatar.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../dropdown-menu/DropdownMenu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/top-bar/StoreSwitcher.tsx

package/dist/components/top-bar/TopBar.js

@@ -1,7 +1,7 @@
-import { ShellNavContext } from "../app-shell/context.js";
 import { Icon } from "../icon/Icon.js";
-import { use } from "react";
+import { ShellNavContext } from "../app-shell/context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { use } from "react";
 // src/components/top-bar/TopBar.tsx
 /**
 * The bar across the top of every page: logo, search, actions, the store switcher and the account. It is 60px high on a

package/dist/components/unit-input/UnitInput.d.ts

@@ -0,0 +1,33 @@
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/**
+ * The props of UnitInput: the HTML attributes of an input, except className, style, size and the ones the field sets
+ * itself (type, inputMode, step, onChange), with the unit and the number in and out. Mark an invalid field with
+ * aria-invalid, which draws the error ring around the whole group.
+ */
+export type UnitInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'inputMode' | 'step' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+  /** The unit after the number, such as kg or cm. Screen readers read it as the field's description. */
+  unit: string;
+  /** The number, or null for an empty field. Pass it to control the field. */
+  value?: number | null;
+  /** The starting number when the field is not controlled. Defaults to empty. */
+  defaultValue?: number | null;
+  /** Called with the number as it is typed or cleared (null when empty), and with the rounded number on blur. */
+  onValueChange?: (value: number | null) => void;
+  /** The most decimals the number keeps; the field rounds to them on blur. Defaults to 3 (grams in kg). */
+  decimals?: number;
+  /** The smallest number; the field moves a smaller one up to it on blur. */
+  min?: number;
+  /** The largest number; the field moves a larger one down to it on blur. */
+  max?: number;
+  /** 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 number field with its unit after it, inside one ring: a weight in kg, a length in cm. It takes and gives a number,
+ * written without thousands separators as counts are, and keeps at most `decimals` decimals.
+ */
+export declare function UnitInput({ unit, value, defaultValue, onValueChange, decimals, min, max, size, id, name, disabled, readOnly, required, 'aria-describedby': describedBy, ref, ...rest }: UnitInputProps): JSX.Element;

package/dist/components/unit-input/UnitInput.js

@@ -0,0 +1,47 @@
+import { FORMAT } from "../../lib/format.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../input-group/InputGroup.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { NumberField } from "@base-ui/react/number-field";
+// src/components/unit-input/UnitInput.tsx
+/**
+* A number field with its unit after it, inside one ring: a weight in kg, a length in cm. It takes and gives a number,
+* written without thousands separators as counts are, and keeps at most `decimals` decimals.
+*/
+function UnitInput({ unit, value, defaultValue, onValueChange, decimals = 3, min, max, size = 36, id, name, disabled, readOnly, required, "aria-describedby": describedBy, ref, ...rest }) {
+	const unitId = useId();
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		id,
+		name,
+		value,
+		defaultValue: defaultValue ?? void 0,
+		onValueChange: (next) => onValueChange?.(next),
+		locale: FORMAT.locale,
+		format: {
+			maximumFractionDigits: decimals,
+			useGrouping: false
+		},
+		min,
+		max,
+		disabled,
+		readOnly,
+		required,
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			size,
+			"aria-disabled": disabled || void 0,
+			children: [/* @__PURE__ */ jsx(NumberField.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, {}),
+				ref,
+				"aria-describedby": describedBy === void 0 ? unitId : `${unitId} ${describedBy}`,
+				...rest
+			}), /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "end",
+				children: /* @__PURE__ */ jsx(InputGroupText, {
+					id: unitId,
+					children: unit
+				})
+			})]
+		})
+	});
+}
+export { UnitInput };

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

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

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

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

package/dist/index.d.ts

@@ -1,17 +1,35 @@
+import { Button, ButtonProps, ButtonVariant } from "./components/button/Button.js";
+import "./components/button/index.js";
+import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps } from "./components/alert-dialog/AlertDialog.js";
+import "./components/alert-dialog/index.js";
+import { Alert, AlertProps, AlertTone } from "./components/alert/Alert.js";
+import "./components/alert/index.js";
 import { AppShell, AppShellProps } from "./components/app-shell/AppShell.js";
 import "./components/app-shell/index.js";
 import { Avatar, AvatarProps, AvatarShape, AvatarSize, getInitials } from "./components/avatar/Avatar.js";
 import "./components/avatar/index.js";
-import { Button, ButtonProps, ButtonVariant } from "./components/button/Button.js";
-import "./components/button/index.js";
+import { Calendar, CalendarProps } from "./components/calendar/Calendar.js";
+import "./components/calendar/index.js";
 import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps } from "./components/card/Card.js";
 import "./components/card/index.js";
+import { CheckboxList, CheckboxListItem, CheckboxListProps } from "./components/checkbox-list/CheckboxList.js";
+import "./components/checkbox-list/index.js";
 import { Checkbox, CheckboxProps } from "./components/checkbox/Checkbox.js";
 import "./components/checkbox/index.js";
+import { SummaryChip, SummaryChips, SummaryChipsProps } from "./components/summary-chips/SummaryChips.js";
+import "./components/summary-chips/index.js";
+import { Collapsible, CollapsibleProps } from "./components/collapsible/Collapsible.js";
+import "./components/collapsible/index.js";
 import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./components/table/Table.js";
 import "./components/table/index.js";
 import { DataTable, DataTableColumn, DataTableProps, DataTableSort } from "./components/data-table/DataTable.js";
 import "./components/data-table/index.js";
+import { InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupAddonProps, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupShortcut, InputGroupShortcutProps, InputGroupSize, InputGroupText, InputGroupTextProps } from "./components/input-group/InputGroup.js";
+import "./components/input-group/index.js";
+import { DatePicker, DatePickerProps } from "./components/date-picker/DatePicker.js";
+import "./components/date-picker/index.js";
+import { DateRangePicker, DateRangePickerProps, DateRangeValue } from "./components/date-range-picker/DateRangePicker.js";
+import "./components/date-range-picker/index.js";
 import { Definition, DefinitionProps } from "./components/definition/Definition.js";
 import "./components/definition/index.js";
 import { Dialog, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./components/dialog/Dialog.js";
@@ -20,6 +38,9 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps,
 import "./components/dropdown-menu/index.js";
 import { EmptyState, EmptyStateProps } from "./components/empty-state/EmptyState.js";
 import "./components/empty-state/index.js";
+import { Field, FieldControlProps, FieldProps } from "./components/field/Field.js";
+import { Label, LabelProps } from "./components/field/Label.js";
+import "./components/field/index.js";
 import { FilterTabs, FilterTabsItem, FilterTabsProps } from "./components/filter-tabs/FilterTabs.js";
 import "./components/filter-tabs/index.js";
 import { IconName } from "./components/icon/registry.js";
@@ -30,16 +51,20 @@ import "./components/global-search/index.js";
 import { Space } from "./lib/space.js";
 import { Inline, InlineProps } from "./components/inline/Inline.js";
 import "./components/inline/index.js";
-import { InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupAddonProps, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupShortcut, InputGroupShortcutProps, InputGroupSize, InputGroupText, InputGroupTextProps } from "./components/input-group/InputGroup.js";
-import "./components/input-group/index.js";
 import { Input, InputProps, InputSize } from "./components/input/Input.js";
 import "./components/input/index.js";
 import { Kbd, KbdGroup, KbdGroupProps, KbdProps } from "./components/kbd/Kbd.js";
 import "./components/kbd/index.js";
 import { LinkProvider, LinkProviderProps, LinkRender, LinkRenderProps } from "./components/link-provider/LinkProvider.js";
 import "./components/link-provider/index.js";
+import { Link, LinkProps } from "./components/link/Link.js";
+import "./components/link/index.js";
+import { MediaGrid, MediaGridItem, MediaGridProps } from "./components/media-grid/MediaGrid.js";
+import "./components/media-grid/index.js";
 import { MetricSegment, MetricStrip, MetricStripProps } from "./components/metric-strip/MetricStrip.js";
 import "./components/metric-strip/index.js";
+import { MoneyInput, MoneyInputProps } from "./components/money-input/MoneyInput.js";
+import "./components/money-input/index.js";
 import { StatusPill, StatusPillProps, StatusPillTone } from "./components/status-pill/StatusPill.js";
 import "./components/status-pill/index.js";
 import { PageHeader, PageHeaderMenuItem, PageHeaderProps } from "./components/page-header/PageHeader.js";
@@ -48,8 +73,12 @@ import { Pagination, PaginationProps } from "./components/pagination/Pagination.
 import "./components/pagination/index.js";
 import { Popover, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/Popover.js";
 import "./components/popover/index.js";
+import { SaveBar, SaveBarProps } from "./components/save-bar/SaveBar.js";
+import "./components/save-bar/index.js";
 import { SearchField, SearchFieldProps } from "./components/search-field/SearchField.js";
 import "./components/search-field/index.js";
+import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./components/select/Select.js";
+import "./components/select/index.js";
 import { SideNav, SideNavAccount, SideNavItem, SideNavProps, SideNavSection } from "./components/side-nav/SideNav.js";
 import "./components/side-nav/index.js";
 import { Skeleton, SkeletonProps, SkeletonShape } from "./components/skeleton/Skeleton.js";
@@ -58,12 +87,18 @@ import { Spinner, SpinnerProps } from "./components/spinner/Spinner.js";
 import "./components/spinner/index.js";
 import { Stack, StackProps } from "./components/stack/Stack.js";
 import "./components/stack/index.js";
+import { Switch, SwitchProps } from "./components/switch/Switch.js";
+import "./components/switch/index.js";
 import { TableLoader, TableLoaderColumn, TableLoaderProps } from "./components/table-loader/TableLoader.js";
 import "./components/table-loader/index.js";
 import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./components/tabs/Tabs.js";
 import "./components/tabs/index.js";
+import { TagInput, TagInputProps } from "./components/tag-input/TagInput.js";
+import "./components/tag-input/index.js";
 import { Text, TextProps, TextTone, TextVariant } from "./components/text/Text.js";
 import "./components/text/index.js";
+import { Textarea, TextareaProps, TextareaSize } from "./components/textarea/Textarea.js";
+import "./components/textarea/index.js";
 import { ToastOptions, Toaster, ToasterProps, toast } from "./components/toaster/Toaster.js";
 import "./components/toaster/index.js";
 import { Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./components/tooltip/Tooltip.js";
@@ -71,5 +106,7 @@ import "./components/tooltip/index.js";
 import { TopBar, TopBarProps } from "./components/top-bar/TopBar.js";
 import { StoreOption, StoreSwitcher, StoreSwitcherProps } from "./components/top-bar/StoreSwitcher.js";
 import "./components/top-bar/index.js";
-import { DateInput, FORMAT, formatCount, formatDate, formatMoney, formatTime } from "./lib/format.js";
-export { AppShell, type AppShellProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Button, type ButtonProps, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DateInput, Definition, type DefinitionProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, FORMAT, FilterTabs, type FilterTabsItem, type FilterTabsProps, GlobalSearch, type GlobalSearchGroup, type GlobalSearchProps, type GlobalSearchResult, Icon, type IconName, type IconProps, type IconSize, type IconTone, Inline, type InlineProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupShortcut, type InputGroupShortcutProps, type InputGroupSize, InputGroupText, type InputGroupTextProps, type InputProps, type InputSize, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, LinkProvider, type LinkProviderProps, type LinkRender, type LinkRenderProps, type MetricSegment, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderMenuItem, type PageHeaderProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, SearchField, type SearchFieldProps, SideNav, type SideNavAccount, type SideNavItem, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, type SkeletonShape, type Space, Spinner, type SpinnerProps, Stack, type StackProps, StatusPill, type StatusPillProps, type StatusPillTone, type StoreOption, StoreSwitcher, type StoreSwitcherProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoader, type TableLoaderColumn, type TableLoaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Text, type TextProps, type TextTone, type TextVariant, type ToastOptions, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TopBar, type TopBarProps, formatCount, formatDate, formatMoney, formatTime, getInitials, toast };
+import { UnitInput, UnitInputProps } from "./components/unit-input/UnitInput.js";
+import "./components/unit-input/index.js";
+import { DateInput, FORMAT, MONEY_NUMBER_FORMAT, amountToPaise, currencySymbol, formatCount, formatDate, formatIsoDate, formatMoney, formatPaise, formatPaiseForEditing, formatTime, numberSeparators, paiseToAmount, parseDate, parseMoney } from "./lib/format.js";
+export { Alert, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, CheckboxList, type CheckboxListItem, type CheckboxListProps, type CheckboxProps, Collapsible, type CollapsibleProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DateInput, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, type DateRangeValue, Definition, type DefinitionProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, FORMAT, Field, type FieldControlProps, type FieldProps, FilterTabs, type FilterTabsItem, type FilterTabsProps, GlobalSearch, type GlobalSearchGroup, type GlobalSearchProps, type GlobalSearchResult, Icon, type IconName, type IconProps, type IconSize, type IconTone, Inline, type InlineProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupShortcut, type InputGroupShortcutProps, type InputGroupSize, InputGroupText, type InputGroupTextProps, type InputProps, type InputSize, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps, Link, type LinkProps, LinkProvider, type LinkProviderProps, type LinkRender, type LinkRenderProps, MONEY_NUMBER_FORMAT, MediaGrid, type MediaGridItem, type MediaGridProps, type MetricSegment, MetricStrip, type MetricStripProps, MoneyInput, type MoneyInputProps, PageHeader, type PageHeaderMenuItem, type PageHeaderProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, SaveBar, type SaveBarProps, SearchField, type SearchFieldProps, 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, SideNav, type SideNavAccount, type SideNavItem, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, type SkeletonShape, type Space, Spinner, type SpinnerProps, Stack, type StackProps, StatusPill, type StatusPillProps, type StatusPillTone, type StoreOption, StoreSwitcher, type StoreSwitcherProps, type SummaryChip, SummaryChips, type SummaryChipsProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableLoader, type TableLoaderColumn, type TableLoaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TagInput, type TagInputProps, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type TextareaSize, type ToastOptions, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TopBar, type TopBarProps, UnitInput, type UnitInputProps, amountToPaise, currencySymbol, formatCount, formatDate, formatIsoDate, formatMoney, formatPaise, formatPaiseForEditing, formatTime, getInitials, numberSeparators, paiseToAmount, parseDate, parseMoney, toast };