@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,59 @@
+import { Icon } from "../icon/Icon.js";
+import { formatCount } from "../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/pagination/Pagination.tsx
+const ARROW = "rt:inline-flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:bg-background rt:text-foreground-subdued rt:transition-colors rt:not-aria-disabled:cursor-pointer rt:not-aria-disabled:hover:bg-muted rt:focus-visible:focus-ring rt:aria-disabled:opacity-50";
+/**
+* One arrow. At the end of the list it stays focusable and is marked aria-disabled, so pressing Next onto the last page
+* leaves focus on it rather than dropping it to the page; a press on it then does nothing.
+*/
+function Arrow({ label, icon, disabled, onPress }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		"aria-disabled": disabled ? true : void 0,
+		className: ARROW,
+		onClick: disabled ? void 0 : onPress,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: 8
+		})
+	});
+}
+/**
+* The footer under a table: Previous and Next arrows and the range on show, written "1 – 20 of 84 results". An arrow is
+* dimmed to 50% and disabled (aria-disabled, still focusable) when there is no page that way. The parent owns the page: it passes `page` and updates it in
+* `onPageChange`.
+*/
+function Pagination({ page, pageSize, total, onPageChange, "aria-label": label = "Pagination", ...rest }) {
+	const size = Math.max(1, pageSize);
+	const lastPage = Math.max(1, Math.ceil(total / size));
+	const current = Math.min(Math.max(1, page), lastPage);
+	const from = (current - 1) * size + 1;
+	const to = Math.min(current * size, total);
+	const summary = total === 0 ? "0 results" : `${formatCount(from)} – ${formatCount(to)} of ${formatCount(total)} results`;
+	return /* @__PURE__ */ jsxs("nav", {
+		"aria-label": label,
+		className: "rt:flex rt:h-13 rt:items-center rt:gap-2 rt:bg-background rt:py-3",
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:w-14 rt:shrink-0",
+			children: [/* @__PURE__ */ jsx(Arrow, {
+				label: "Previous page",
+				icon: "chevron-left",
+				disabled: current <= 1,
+				onPress: () => onPageChange(current - 1)
+			}), /* @__PURE__ */ jsx(Arrow, {
+				label: "Next page",
+				icon: "chevron-right",
+				disabled: current >= lastPage,
+				onPress: () => onPageChange(current + 1)
+			})]
+		}), /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "rt:min-w-26 rt:px-2 rt:text-c1 rt:whitespace-nowrap rt:text-foreground-subdued",
+			children: summary
+		})]
+	});
+}
+export { Pagination };

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

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

package/dist/components/pagination/index.js

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

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps } from "react";
+import { Popover } from "@base-ui/react/popover";
+/** The props of Popover: Base UI's root props, such as open, defaultOpen and onOpenChange. */
+export type PopoverProps = Popover.Root.Props;
+/** A panel that opens from a trigger and holds more than text, such as a list of notifications. Put a PopoverTrigger and a PopoverContent inside it. */
+declare function Popover$1(props: PopoverProps): import("react").JSX.Element;
+/** The props of PopoverTrigger: Base UI's trigger props, except className and style. Use render to put the trigger on your own element. */
+export type PopoverTriggerProps = Omit<Popover.Trigger.Props, 'className' | 'style'>;
+/** The element that opens the popover on click or Enter. It renders a button unless render says otherwise. */
+export declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;
+/** The props of PopoverContent: the popup props plus where the popover sits. */
+export type PopoverContentProps = Omit<Popover.Popup.Props, 'className' | 'style'> & Pick<Popover.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/** The popover panel: a white panel with a 1px outline and no shadow, 288px wide. It opens below the trigger by default. */
+export declare function PopoverContent({ align, alignOffset, side, sideOffset, ...props }: PopoverContentProps): import("react").JSX.Element;
+/** The props of PopoverHeader: the attributes of a div, except className and style. */
+export type PopoverHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** Groups a title and a description at the top of the panel. */
+export declare function PopoverHeader(props: PopoverHeaderProps): import("react").JSX.Element;
+/** The props of PopoverTitle: Base UI's title props. */
+export type PopoverTitleProps = Omit<Popover.Title.Props, 'className' | 'style'>;
+/** The title of the panel; it names the dialog for screen readers. */
+export declare function PopoverTitle(props: PopoverTitleProps): import("react").JSX.Element;
+/** The props of PopoverDescription: Base UI's description props. */
+export type PopoverDescriptionProps = Omit<Popover.Description.Props, 'className' | 'style'>;
+/** The supporting text under the title, in the muted colour. */
+export declare function PopoverDescription(props: PopoverDescriptionProps): import("react").JSX.Element;
+export { Popover$1 as Popover };

package/dist/components/popover/Popover.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+// src/components/popover/Popover.tsx
+/** A panel that opens from a trigger and holds more than text, such as a list of notifications. Put a PopoverTrigger and a PopoverContent inside it. */
+function Popover$1(props) {
+	return /* @__PURE__ */ jsx(Popover.Root, { ...props });
+}
+/** The element that opens the popover on click or Enter. It renders a button unless render says otherwise. */
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, { ...props });
+}
+/** The popover panel: a white panel with a 1px outline and no shadow, 288px wide. It opens below the trigger by default. */
+function PopoverContent({ align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: "rt:flex rt:w-72 rt:flex-col rt:gap-2 rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:p-3 rt:text-b3 rt:text-popover-foreground rt:outline-hidden",
+			...props
+		})
+	}) });
+}
+/** Groups a title and a description at the top of the panel. */
+function PopoverHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rt:flex rt:flex-col rt:gap-0.5",
+		...props
+	});
+}
+/** The title of the panel; it names the dialog for screen readers. */
+function PopoverTitle(props) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		className: "rt:text-b4",
+		...props
+	});
+}
+/** The supporting text under the title, in the muted colour. */
+function PopoverDescription(props) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		className: "rt:text-muted-foreground",
+		...props
+	});
+}
+export { Popover$1 as Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

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

@@ -0,0 +1,2 @@
+import { Popover, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./Popover.js";
+export { Popover, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps };

package/dist/components/popover/index.js

@@ -0,0 +1 @@
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "./Popover.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.d.ts

@@ -0,0 +1,23 @@
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/** The props of SearchField: the HTML attributes of an input, except className, style, size, type and onChange. */
+export type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+  /** The accessible name of the field, such as "Search products". Required because the field has no visible label. */
+  label: string;
+  /** The text in the field. Pass it with onValueChange to control the field. */
+  value?: string;
+  /** The starting text of an uncontrolled field. */
+  defaultValue?: string;
+  /** Called with the new text on every change and when the field is cleared. It is not debounced: debounce in the app. */
+  onValueChange?: (value: string) => void;
+  /** The height in px: 36 above a listing, 32 inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * The search field above a listing: a search icon, the input and a clear button that appears once there is text.
+ * Escape clears it too. The field reports every change; the debounce stays in the app.
+ */
+export declare function SearchField({ label, value, defaultValue, onValueChange, size, ref, onKeyDown, disabled, readOnly, ...rest }: SearchFieldProps): JSX.Element;

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

@@ -0,0 +1,66 @@
+import { Icon } from "../icon/Icon.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
+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.
+* Escape clears it too. The field reports every change; the debounce stays in the app.
+*/
+function SearchField({ label, value, defaultValue = "", onValueChange, size = 36, ref, onKeyDown, disabled, readOnly, ...rest }) {
+	const [inner, setInner] = useState(defaultValue);
+	const current = value ?? inner;
+	const inputRef = useRef(null);
+	const change = (next) => {
+		if (value === void 0) setInner(next);
+		onValueChange?.(next);
+	};
+	const clear = () => {
+		change("");
+		inputRef.current?.focus();
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Escape" && current !== "" && readOnly !== true && !event.defaultPrevented) {
+			event.preventDefault();
+			change("");
+		}
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		size,
+		children: [
+			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Icon, {
+				name: "search",
+				tone: "icon"
+			}) }),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				...rest,
+				ref: (node) => {
+					inputRef.current = node;
+					if (typeof ref === "function") ref(node);
+					else if (ref) ref.current = node;
+				},
+				disabled,
+				readOnly,
+				role: "searchbox",
+				inputMode: "search",
+				autoComplete: "off",
+				"aria-label": label,
+				value: current,
+				onChange: (event) => change(event.target.value),
+				onKeyDown: handleKeyDown
+			}),
+			current !== "" && disabled !== true && readOnly !== true ? /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "end",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Clear search",
+					onClick: clear,
+					className: "rt:inline-flex rt:size-5 rt:items-center rt:justify-center rt:rounded-sm rt:text-icon rt:outline-none rt:transition-colors rt:hover:bg-muted rt:focus-visible:shadow-ring-focus",
+					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+				})
+			}) : null
+		]
+	});
+}
+export { SearchField };

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

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

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

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

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";

package/dist/components/side-nav/SideNav.d.ts

@@ -0,0 +1,64 @@
+import { IconName } from "../icon/registry.js";
+import "../icon/index.js";
+import { JSX, ReactNode } from "react";
+/** One row of the navigation. With `children` it is a group that opens and closes. */
+export type SideNavItem = {
+  /** The value passed to onSelect and compared with `active`. */
+  id: string;
+  /** The text of the row. */
+  label: string;
+  /** A glyph before the label. */
+  icon?: IconName;
+  /** A count shown at the end of the row, such as 12 or 10,001+. */
+  count?: string | number;
+  /** Makes the row a link to this address instead of a button. On a router, LinkProvider draws it with the app's own link. */
+  href?: string;
+  /** Nested rows. The row then opens and closes them. */
+  children?: SideNavItem[];
+};
+/** A block of rows, with an optional label that can collapse the block. */
+export type SideNavSection = {
+  /** Identifies the section. */
+  id: string;
+  /** The small label above the rows. Without one the rows sit unlabelled. */
+  label?: string;
+  /** Whether the label collapses the section. Needs a label. */
+  collapsible?: boolean;
+  /** Whether a collapsible section starts closed. Defaults to false. */
+  defaultCollapsed?: boolean;
+  /** The rows. */
+  items: SideNavItem[];
+};
+/** The account switcher at the top. */
+export type SideNavAccount = {
+  /** The store or person name. */
+  name: string;
+  /** The line under the name. */
+  role?: string;
+  /** Called when the switcher is pressed. */
+  onClick?: () => void;
+};
+/** The props of SideNav. */
+export type SideNavProps = {
+  /** The accessible name of the navigation landmark. */
+  label: string;
+  /** The blocks of rows, top to bottom. */
+  sections: SideNavSection[];
+  /** The id of the current row. It is marked and its group opens. */
+  active?: string;
+  /** Called with the id of the row pressed. */
+  onSelect?: (id: string) => void;
+  /** The account switcher shown above the rows. */
+  account?: SideNavAccount;
+  /** Content pinned at the bottom, such as Settings. */
+  footer?: ReactNode;
+  /** On a phone, whether the drawer is open. */
+  open?: boolean;
+  /** On a phone, called when the drawer asks to open or close. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * The 240px side navigation of the admin: an account switcher, blocks of rows with nested groups, counts and collapsible
+ * labels, and a footer pinned at the bottom. On a phone it becomes a drawer: inside AppShell the menu button in TopBar opens it and choosing a row closes it; used alone, the caller opens it with `open` and closes it in `onOpenChange`.
+ */
+export declare function SideNav(props: SideNavProps): JSX.Element | null;