@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, JSX } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+/** The props of Tabs: Base UI's tabs root without className and style. */
+export type TabsProps = Omit<ComponentProps<typeof Tabs.Root>, 'className' | 'style'>;
+/** The props of TabsList: Base UI's tab list without className and style. */
+export type TabsListProps = Omit<ComponentProps<typeof Tabs.List>, 'className' | 'style'>;
+/** The props of TabsTrigger: Base UI's tab without className and style. Its value ties it to the TabsContent with the same value. */
+export type TabsTriggerProps = Omit<ComponentProps<typeof Tabs.Tab>, 'className' | 'style'>;
+/** The props of TabsContent: Base UI's tab panel without className and style. Its value ties it to the TabsTrigger with the same value. */
+export type TabsContentProps = Omit<ComponentProps<typeof Tabs.Panel>, 'className' | 'style'>;
+/**
+ * Sections of one page, switched by an underlined row of tabs: ABC analysis, the sections of a settings page. Holds the
+ * selected value, uncontrolled with defaultValue or controlled with value and onValueChange. To filter a list use
+ * FilterTabs, which looks like the design system's chip tab.
+ */
+declare function Tabs$1(props: TabsProps): JSX.Element;
+/** The row of tabs, with a hairline under it. Give it an aria-label that names the sections. */
+export declare function TabsList(props: TabsListProps): JSX.Element;
+/** One tab: 36px tall, with a 2px blue underline and a blue semibold label when selected. A disabled tab is at 50%. */
+export declare function TabsTrigger(props: TabsTriggerProps): JSX.Element;
+/** The panel of the tab with the same value; only the selected one is shown. */
+export declare function TabsContent(props: TabsContentProps): JSX.Element;
+export { Tabs$1 as Tabs };

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,41 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+// src/components/tabs/Tabs.tsx
+/**
+* Sections of one page, switched by an underlined row of tabs: ABC analysis, the sections of a settings page. Holds the
+* selected value, uncontrolled with defaultValue or controlled with value and onValueChange. To filter a list use
+* FilterTabs, which looks like the design system's chip tab.
+*/
+function Tabs$1(props) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		className: cn("rt:flex rt:flex-col rt:gap-3"),
+		...props
+	});
+}
+/** The row of tabs, with a hairline under it. Give it an aria-label that names the sections. */
+function TabsList(props) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: cn("rt:flex rt:items-center rt:gap-6 rt:border-b rt:border-border"),
+		...props
+	});
+}
+/** One tab: 36px tall, with a 2px blue underline and a blue semibold label when selected. A disabled tab is at 50%. */
+function TabsTrigger(props) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "tabs-trigger",
+		className: cn("rt:relative rt:inline-flex rt:h-9 rt:cursor-pointer rt:items-center rt:justify-center rt:gap-2 rt:whitespace-nowrap", "rt:text-b3 rt:text-tab-inactive rt:transition-colors rt:hover:text-foreground", "rt:data-active:font-semibold rt:data-active:text-primary", "rt:focus-visible:focus-ring rt:data-disabled:cursor-default rt:data-disabled:opacity-50", "rt:after:absolute rt:after:inset-x-0 rt:after:-bottom-px rt:after:h-0.5 rt:after:bg-primary rt:after:opacity-0", "rt:data-active:after:opacity-100 rt:svg:text-icon"),
+		...props
+	});
+}
+/** The panel of the tab with the same value; only the selected one is shown. */
+function TabsContent(props) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		"data-slot": "tabs-content",
+		className: cn("rt:flex-1 rt:text-b3 rt:focus-visible:focus-ring"),
+		...props
+	});
+}
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,2 @@
+import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./Tabs.js";
+export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps };

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";

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/toaster/Toaster.d.ts

@@ -0,0 +1,32 @@
+import { JSX, ReactNode } from "react";
+/** What a toast can carry besides its title. */
+export interface ToastOptions {
+  /** A second line under the title. */
+  description?: ReactNode;
+  /** How long it stays, in ms. Defaults to 5000; 0 keeps it until it is closed. */
+  timeout?: number;
+}
+/**
+ * Shows a message after an action. Call toast.success, toast.info or toast.error with the title, from anywhere; a Toaster
+ * must be mounted once in the app. Each is announced to screen readers through a polite live region.
+ */
+export declare const toast: {
+  /** Shows a success message and returns its id. */
+  success: (title: ReactNode, options?: ToastOptions) => string;
+  /** Shows an info message and returns its id. */
+  info: (title: ReactNode, options?: ToastOptions) => string;
+  /** Shows an error message and returns its id. */
+  error: (title: ReactNode, options?: ToastOptions) => string;
+  /** Closes one toast by id, or all when none is given. */
+  dismiss: (id?: string) => void;
+};
+/** Props of Toaster. */
+export interface ToasterProps {
+  /** The accessible name of each close button. Defaults to Close notification. */
+  closeLabel?: string;
+}
+/**
+ * Mounts the toast viewport, bottom right, once for the app. Messages from toast() appear in it as plain panels with the
+ * ring outline, stacked, with no entrance animation.
+ */
+export declare function Toaster({ closeLabel }: ToasterProps): JSX.Element;

package/dist/components/toaster/Toaster.js

@@ -0,0 +1,89 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+// src/components/toaster/Toaster.tsx
+const manager = Toast.createToastManager();
+function show(type, title, options = {}) {
+	return manager.add({
+		type,
+		title,
+		description: options.description,
+		timeout: options.timeout,
+		priority: "low"
+	});
+}
+/**
+* Shows a message after an action. Call toast.success, toast.info or toast.error with the title, from anywhere; a Toaster
+* must be mounted once in the app. Each is announced to screen readers through a polite live region.
+*/
+const toast = {
+	/** Shows a success message and returns its id. */
+	success: (title, options) => show("success", title, options),
+	/** Shows an info message and returns its id. */
+	info: (title, options) => show("info", title, options),
+	/** Shows an error message and returns its id. */
+	error: (title, options) => show("error", title, options),
+	/** Closes one toast by id, or all when none is given. */
+	dismiss: (id) => manager.close(id)
+};
+const ICONS = {
+	success: "check",
+	info: "info-circle",
+	error: "alert-triangle"
+};
+function ToastList({ closeLabel }) {
+	const { toasts } = Toast.useToastManager();
+	return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((item) => {
+		const kind = item.type ?? "info";
+		return /* @__PURE__ */ jsxs(Toast.Root, {
+			toast: item,
+			"data-slot": "toast",
+			className: "rt:pointer-events-auto rt:flex rt:w-full rt:items-start rt:gap-3 rt:rounded-lg rt:bg-popover rt:p-3 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "toast-icon",
+					className: cn("rt:flex rt:h-5 rt:items-center", kind === "error" ? "rt:text-error-icon" : "rt:text-icon"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: ICONS[kind],
+						size: 16
+					})
+				}),
+				/* @__PURE__ */ jsxs(Toast.Content, {
+					className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col rt:gap-1",
+					children: [/* @__PURE__ */ jsx(Toast.Title, {
+						"data-slot": "toast-title",
+						className: cn("rt:text-b4", kind === "error" ? "rt:text-error" : "rt:text-foreground-strong")
+					}), /* @__PURE__ */ jsx(Toast.Description, {
+						"data-slot": "toast-description",
+						className: "rt:text-b3 rt:text-foreground-subdued"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Toast.Close, {
+					"aria-label": closeLabel,
+					"data-slot": "toast-close",
+					className: "rt:flex rt:size-5 rt:shrink-0 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 12
+					})
+				})
+			]
+		}, item.id);
+	}) });
+}
+/**
+* Mounts the toast viewport, bottom right, once for the app. Messages from toast() appear in it as plain panels with the
+* ring outline, stacked, with no entrance animation.
+*/
+function Toaster({ closeLabel = "Close notification" }) {
+	return /* @__PURE__ */ jsx(Toast.Provider, {
+		toastManager: manager,
+		children: /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-slot": "toast-viewport",
+			className: "rt:pointer-events-none rt:fixed rt:right-4 rt:bottom-4 rt:z-50 rt:flex rt:w-90 rt:max-w-full rt:flex-col rt:gap-2",
+			children: /* @__PURE__ */ jsx(ToastList, { closeLabel })
+		}) })
+	});
+}
+export { Toaster, toast };

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

@@ -0,0 +1,2 @@
+import { ToastOptions, Toaster, ToasterProps, toast } from "./Toaster.js";
+export { type ToastOptions, Toaster, type ToasterProps, toast };

package/dist/components/toaster/index.js

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

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import { Tooltip } from "@base-ui/react/tooltip";
+/** The props of TooltipProvider: Base UI's provider props. */
+export type TooltipProviderProps = Tooltip.Provider.Props;
+/** Shares the open delay between the tooltips inside it. Wrap the app, or a group of tooltips, once. The delay defaults to 0 ms. */
+export declare function TooltipProvider({ delay, ...props }: TooltipProviderProps): import("react").JSX.Element;
+/** The props of Tooltip: Base UI's root props, such as open, defaultOpen and onOpenChange. */
+export type TooltipProps = Tooltip.Root.Props;
+/** A short hint for a control or term, shown on hover and keyboard focus. Put a TooltipTrigger and a TooltipContent inside it. */
+declare function Tooltip$1(props: TooltipProps): import("react").JSX.Element;
+/** The props of TooltipTrigger: Base UI's trigger props, except className and style. Use render to put the trigger on your own element. */
+export type TooltipTriggerProps = Omit<Tooltip.Trigger.Props, 'className' | 'style'>;
+/** The element that opens the tooltip on hover and focus. It renders a button unless render says otherwise. */
+export declare function TooltipTrigger(props: TooltipTriggerProps): import("react").JSX.Element;
+/** The props of TooltipContent: the popup props plus where the tooltip sits. */
+export type TooltipContentProps = Omit<Tooltip.Popup.Props, 'className' | 'style'> & Pick<Tooltip.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/** The tooltip text: a dark panel with light text, no shadow and no animation. It sits above the trigger by default. */
+export declare function TooltipContent({ side, sideOffset, align, alignOffset, children, ...props }: TooltipContentProps): import("react").JSX.Element;
+export { Tooltip$1 as Tooltip };

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,35 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+// src/components/tooltip/Tooltip.tsx
+/** Shares the open delay between the tooltips inside it. Wrap the app, or a group of tooltips, once. The delay defaults to 0 ms. */
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delay,
+		...props
+	});
+}
+/** A short hint for a control or term, shown on hover and keyboard focus. Put a TooltipTrigger and a TooltipContent inside it. */
+function Tooltip$1(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+}
+/** The element that opens the tooltip on hover and focus. It renders a button unless render says otherwise. */
+function TooltipTrigger(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, { ...props });
+}
+/** The tooltip text: a dark panel with light text, no shadow and no animation. It sits above the trigger by default. */
+function TooltipContent({ side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+			className: cn("rt:inline-flex rt:w-fit rt:max-w-72 rt:items-center rt:gap-1.5 rt:rounded-md rt:bg-foreground rt:px-3 rt:py-1.5 rt:text-b1 rt:text-background"),
+			...props,
+			children
+		})
+	}) });
+}
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

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

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./Tooltip.js";
+export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip.js";

package/dist/components/top-bar/StoreSwitcher.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from "react";
+/** One store the person can switch to. */
+export type StoreOption = {
+  /** The value passed to onStoreChange and compared with storeId. */
+  id: string;
+  /** The store name, shown in the bar and the menu. */
+  name: string;
+  /** The store's logo; without one the avatar shows its initials. */
+  src?: string;
+};
+/** The props of StoreSwitcher. */
+export type StoreSwitcherProps = {
+  /** The stores the person can switch between, as the app passes them. */
+  stores: StoreOption[];
+  /** The id of the current store. */
+  storeId: string;
+  /** Called with the id of the store chosen. */
+  onStoreChange?: (id: string) => void;
+  /** The caption of its menu. Defaults to Switch store. The button is named by the store name. */
+  label?: string;
+};
+/**
+ * The store switcher of TopBar: a square avatar, the store name and a chevron that open a menu of the stores the app
+ * passes. On a phone only the avatar shows. Pass it to TopBar's `storeSwitcher` slot.
+ */
+export declare function StoreSwitcher({ stores, storeId, onStoreChange, label }: StoreSwitcherProps): JSX.Element;

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

@@ -0,0 +1,48 @@
+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
+/**
+* The store switcher of TopBar: a square avatar, the store name and a chevron that open a menu of the stores the app
+* passes. On a phone only the avatar shows. Pass it to TopBar's `storeSwitcher` slot.
+*/
+function StoreSwitcher({ stores, storeId, onStoreChange, label = "Switch store" }) {
+	const current = stores.find((store) => store.id === storeId);
+	const name = current?.name ?? label;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "rt:flex rt:h-9 rt:items-center rt:gap-2 rt:rounded-lg rt:px-1.5 rt:text-b3 rt:text-foreground rt:hover:bg-muted rt:focus-visible:focus-ring"
+		}),
+		children: [
+			/* @__PURE__ */ jsx(Avatar, {
+				name,
+				src: current?.src,
+				shape: "square",
+				size: "sm"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "rt:hidden rt:max-w-40 rt:truncate rt:md:inline",
+				children: name
+			}),
+			/* @__PURE__ */ jsx(Icon, {
+				name: "nav-caret-down",
+				size: 8,
+				tone: "icon"
+			})
+		]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }), /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value: storeId,
+			onValueChange: (value) => onStoreChange?.(String(value)),
+			children: stores.map((store) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: store.id,
+				closeOnClick: true,
+				children: store.name
+			}, store.id))
+		})] })
+	})] });
+}
+export { StoreSwitcher };

package/dist/components/top-bar/TopBar.d.ts

@@ -0,0 +1,24 @@
+import { JSX, ReactNode } from "react";
+/** The props of TopBar. */
+export type TopBarProps = {
+  /** The logo, usually an image. When it is left out the bar shows the text wordmark instead (--rt-wordmark). */
+  logo?: ReactNode;
+  /** The accessible name of the text wordmark, shown when there is no logo. Defaults to Ratio. */
+  wordmarkLabel?: string;
+  /** The accessible name of the phone menu button that opens the side navigation. Defaults to Open navigation menu. */
+  menuLabel?: string;
+  /** The global search, for example GlobalSearch. It takes the free space in the middle. */
+  search?: ReactNode;
+  /** The buttons at the right, such as help and notifications. */
+  actions?: ReactNode;
+  /** The store switcher, for example StoreSwitcher. It sits at the right, after the actions. */
+  storeSwitcher?: ReactNode;
+  /** The account at the far right, such as an Avatar or a menu of the signed-in person. */
+  account?: ReactNode;
+};
+/**
+ * The bar across the top of every page: logo, search, actions, the store switcher and the account. It is 60px high on a
+ * desktop and 52px on a phone, with a hairline under it. The parts are slots, so the bar does not depend on their
+ * components. Inside an AppShell with a side nav it shows a menu button on phones, which opens the side nav drawer.
+ */
+export declare function TopBar({ logo, wordmarkLabel, menuLabel, search, actions, storeSwitcher, account }: TopBarProps): JSX.Element;

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

@@ -0,0 +1,53 @@
+import { Icon } from "../icon/Icon.js";
+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
+* desktop and 52px on a phone, with a hairline under it. The parts are slots, so the bar does not depend on their
+* components. Inside an AppShell with a side nav it shows a menu button on phones, which opens the side nav drawer.
+*/
+function TopBar({ logo, wordmarkLabel = "Ratio", menuLabel = "Open navigation menu", search, actions, storeSwitcher, account }) {
+	const nav = use(ShellNavContext);
+	return /* @__PURE__ */ jsxs("header", {
+		className: "rt:flex rt:h-13 rt:md:h-15 rt:shrink-0 rt:items-center rt:gap-3 rt:border-b rt:border-border rt:bg-page rt:px-3 rt:md:px-6 rt:font-sans",
+		children: [
+			nav && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": menuLabel,
+				"aria-expanded": nav.open,
+				"aria-controls": nav.id,
+				onClick: () => nav.setOpen(!nav.open),
+				className: "rt:-ml-1.5 rt:flex rt:size-9 rt:shrink-0 rt:items-center rt:justify-center rt:rounded-lg rt:text-foreground rt:hover:bg-muted rt:focus-visible:focus-ring rt:md:hidden",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "menu",
+					size: 16,
+					tone: "icon"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "rt:flex rt:shrink-0 rt:items-center rt:text-b4 rt:text-foreground",
+				children: logo ?? /* @__PURE__ */ jsx("span", {
+					"data-slot": "wordmark",
+					role: "img",
+					"aria-label": wordmarkLabel,
+					className: "rt:wordmark"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "rt:flex rt:min-w-0 rt:flex-1 rt:justify-center",
+				children: search
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:shrink-0 rt:items-center rt:gap-2",
+				children: [
+					actions,
+					storeSwitcher,
+					account
+				]
+			})
+		]
+	});
+}
+export { TopBar };

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

@@ -0,0 +1,3 @@
+import { TopBar, TopBarProps } from "./TopBar.js";
+import { StoreOption, StoreSwitcher, StoreSwitcherProps } from "./StoreSwitcher.js";
+export { type StoreOption, StoreSwitcher, type StoreSwitcherProps, TopBar, type TopBarProps };

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

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