@ratio-ui/core 0.3.0 → 0.5.0

package/dist/components/separator/Separator.d.ts

@@ -0,0 +1,15 @@
+import { JSX, Ref } from "react";
+/** The props of Separator. */
+export type SeparatorProps = {
+  /** The direction of the line. Defaults to horizontal. */
+  orientation?: 'horizontal' | 'vertical';
+  /** True, the default, hides the line from assistive technology; false makes it a semantic separator. */
+  decorative?: boolean;
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * A 1px hairline in the divider grey, horizontal or vertical. A horizontal line fills its row and shrinks to share it, so
+ * two lines and a word between them in an Inline make the "or" divider; a vertical line keeps its 1px.
+ */
+export declare function Separator({ orientation, decorative, ref }: SeparatorProps): JSX.Element;

package/dist/components/separator/Separator.js

@@ -0,0 +1,25 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+// src/components/separator/Separator.tsx
+/**
+* A 1px hairline in the divider grey, horizontal or vertical. A horizontal line fills its row and shrinks to share it, so
+* two lines and a word between them in an Inline make the "or" divider; a vertical line keeps its 1px.
+*/
+function Separator$1({ orientation = "horizontal", decorative = true, ref }) {
+	const classes = cn("rt:bg-divider rt:data-horizontal:h-px rt:data-horizontal:min-h-px rt:data-horizontal:w-full rt:data-vertical:w-px rt:data-vertical:shrink-0 rt:data-vertical:self-stretch");
+	if (decorative) return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "none",
+		"data-slot": "separator",
+		"data-orientation": orientation,
+		className: classes
+	});
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
+		"data-slot": "separator",
+		orientation,
+		className: classes
+	});
+}
+export { Separator$1 as Separator };

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

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

package/dist/components/separator/index.js

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

package/dist/components/sheet/Sheet.d.ts

@@ -0,0 +1,52 @@
+import { ComponentProps, JSX } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+/**
+ * The root of a sheet. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to control it,
+ * or `defaultOpen` to leave it uncontrolled. The page behind is inert while it is open, with no scrim over it.
+ */
+export declare function Sheet(props: Dialog.Root.Props): JSX.Element;
+/** Props of SheetTrigger. */
+export type SheetTriggerProps = Omit<Dialog.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the sheet. */
+export declare function SheetTrigger(props: SheetTriggerProps): JSX.Element;
+/** Props of SheetClose. */
+export type SheetCloseProps = Omit<Dialog.Close.Props, 'className' | 'style'>;
+/** A button that closes the sheet, such as Done in the footer. */
+export declare function SheetClose(props: SheetCloseProps): JSX.Element;
+/** The edge a sheet sits on. */
+export type SheetSide = 'right' | 'left' | 'bottom';
+/** Props of SheetContent. */
+export interface SheetContentProps extends Omit<Dialog.Popup.Props, 'className' | 'style'> {
+  /** The edge the sheet sits on: a full-height side sheet, or a bottom sheet with 24px top corners. Defaults to right. */
+  side?: SheetSide;
+  /** Whether the corner close button shows. Defaults to true. */
+  showCloseButton?: boolean;
+  /** The accessible name of the corner close button. Defaults to Close. */
+  closeLabel?: string;
+}
+/**
+ * The panel, white with a hairline on its inner edge. A side sheet is full height and three quarters of a phone screen,
+ * 384px from the small breakpoint up; a bottom sheet spans the screen, sizes to its content and has 24px top corners.
+ * It appears without sliding and with no scrim, blur or shadow. Put SheetHeader, SheetBody and SheetFooter inside.
+ */
+export declare function SheetContent({ children, side, showCloseButton, closeLabel, ...props }: SheetContentProps): JSX.Element;
+/** Props of SheetHeader. */
+export type SheetHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked, with room on the right for the close button. */
+export declare function SheetHeader(props: SheetHeaderProps): JSX.Element;
+/** Props of SheetBody. */
+export type SheetBodyProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The content between header and footer. It takes the free height and scrolls when the content is taller. */
+export declare function SheetBody(props: SheetBodyProps): JSX.Element;
+/** Props of SheetFooter. */
+export type SheetFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The row of actions at the bottom of the sheet, aligned to the end. */
+export declare function SheetFooter(props: SheetFooterProps): JSX.Element;
+/** Props of SheetTitle. */
+export type SheetTitleProps = Omit<Dialog.Title.Props, 'className' | 'style'>;
+/** The sheet's name, in the b4 style. It names the sheet for assistive technology. */
+export declare function SheetTitle(props: SheetTitleProps): JSX.Element;
+/** Props of SheetDescription. */
+export type SheetDescriptionProps = Omit<Dialog.Description.Props, 'className' | 'style'>;
+/** One line that says what the sheet is for, in subdued body text. */
+export declare function SheetDescription(props: SheetDescriptionProps): JSX.Element;

package/dist/components/sheet/Sheet.js

@@ -0,0 +1,89 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/sheet/Sheet.tsx
+/**
+* The root of a sheet. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to control it,
+* or `defaultOpen` to leave it uncontrolled. The page behind is inert while it is open, with no scrim over it.
+*/
+function Sheet(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+/** The button that opens the sheet. */
+function SheetTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+/** A button that closes the sheet, such as Done in the footer. */
+function SheetClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+/**
+* The panel, white with a hairline on its inner edge. A side sheet is full height and three quarters of a phone screen,
+* 384px from the small breakpoint up; a bottom sheet spans the screen, sizes to its content and has 24px top corners.
+* It appears without sliding and with no scrim, blur or shadow. Put SheetHeader, SheetBody and SheetFooter inside.
+*/
+function SheetContent({ children, side = "right", showCloseButton = true, closeLabel = "Close", ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "sheet-content",
+		"data-side": side,
+		className: cn("rt:fixed rt:z-50 rt:flex rt:max-h-full rt:flex-col rt:overflow-y-auto rt:border-border rt:bg-popover rt:text-b3 rt:text-popover-foreground rt:focus-visible:focus-ring", "rt:side-right:inset-y-0 rt:side-right:right-0 rt:side-right:w-3/4 rt:side-right:border-l rt:side-right:sm:w-96", "rt:side-left:inset-y-0 rt:side-left:left-0 rt:side-left:w-3/4 rt:side-left:border-r rt:side-left:sm:w-96", "rt:side-bottom:inset-x-0 rt:side-bottom:bottom-0 rt:side-bottom:rounded-t-3xl rt:side-bottom:border-x rt:side-bottom:border-t"),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			"data-slot": "sheet-close",
+			"aria-label": closeLabel,
+			className: "rt:absolute rt:top-6 rt:right-6 rt:flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "x",
+				size: 12
+			})
+		})]
+	}) });
+}
+/** The title and description, stacked, with room on the right for the close button. */
+function SheetHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: "rt:flex rt:shrink-0 rt:flex-col rt:gap-1 rt:p-6 rt:pr-20",
+		...props
+	});
+}
+/** The content between header and footer. It takes the free height and scrolls when the content is taller. */
+function SheetBody(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-body",
+		className: "rt:flex rt:min-h-0 rt:flex-1 rt:flex-col rt:gap-3.5 rt:overflow-y-auto rt:px-6 rt:pb-6",
+		...props
+	});
+}
+/** The row of actions at the bottom of the sheet, aligned to the end. */
+function SheetFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: "rt:mt-auto rt:flex rt:shrink-0 rt:items-center rt:justify-end rt:gap-2 rt:px-6 rt:pb-6",
+		...props
+	});
+}
+/** The sheet's name, in the b4 style. It names the sheet for assistive technology. */
+function SheetTitle(props) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: "rt:text-b4 rt:text-foreground-strong",
+		...props
+	});
+}
+/** One line that says what the sheet is for, in subdued body text. */
+function SheetDescription(props) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

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

@@ -0,0 +1,2 @@
+import { Sheet, SheetBody, SheetBodyProps, SheetClose, SheetCloseProps, SheetContent, SheetContentProps, SheetDescription, SheetDescriptionProps, SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps, SheetSide, SheetTitle, SheetTitleProps, SheetTrigger, SheetTriggerProps } from "./Sheet.js";
+export { Sheet, SheetBody, type SheetBodyProps, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetSide, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps };

package/dist/components/sheet/index.js

@@ -0,0 +1 @@
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./Sheet.js";

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

@@ -28,17 +28,20 @@ function Row({ item, active, depth, onSelect }) {
 	const open = toggled && toggled.forActive === active ? toggled.open : containsActive(item, active);
 	const cls = cn(ROW, depth > 0 && "rt:pl-8", isActive && "rt:bg-muted rt:text-primary rt:font-medium");
 	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-		item.icon && /* @__PURE__ */ jsx(Icon, {
-			name: item.icon,
-			size: 16,
-			tone: isActive ? "primary" : "icon"
+		item.icon && /* @__PURE__ */ jsx("span", {
+			className: "rt:flex rt:size-6 rt:shrink-0 rt:items-center rt:justify-center",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: item.icon,
+				size: 16,
+				tone: isActive ? "primary" : "icon"
+			})
 		}),
 		/* @__PURE__ */ jsx("span", {
 			className: "rt:min-w-0 rt:flex-1 rt:truncate",
 			children: item.label
 		}),
 		item.count !== void 0 && /* @__PURE__ */ jsx("span", {
-			className: "rt:text-c1 rt:text-foreground-subdued",
+			className: "rt:text-badge rt:text-foreground-subdued",
 			children: item.count
 		}),
 		hasChildren && /* @__PURE__ */ jsx(Icon, {
@@ -107,13 +110,13 @@ function Section({ section, active, onSelect }) {
 		})]
 	});
 }
-function Panel({ label, sections, active, onSelect, account, footer }) {
+function Panel({ label, sections, active, onSelect, account, footer, edge }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "side-nav",
-		className: "rt:flex rt:h-full rt:w-60 rt:shrink-0 rt:flex-col rt:bg-sidebar rt:text-sidebar-foreground",
+		className: cn("rt:flex rt:h-full rt:w-60 rt:shrink-0 rt:flex-col rt:bg-sidebar rt:text-sidebar-foreground", edge && "rt:border-r rt:border-border"),
 		children: [
 			account && /* @__PURE__ */ jsx("div", {
-				className: "rt:flex rt:shrink-0 rt:items-start rt:px-3.5 rt:pt-2",
+				className: "rt:flex rt:h-15 rt:shrink-0 rt:items-start rt:px-3.5 rt:pt-2",
 				children: /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: account.onClick,
@@ -121,7 +124,6 @@ function Panel({ label, sections, active, onSelect, account, footer }) {
 					children: [
 						/* @__PURE__ */ jsx(Avatar, {
 							name: account.name,
-							shape: "square",
 							size: "sm"
 						}),
 						/* @__PURE__ */ jsxs("span", {
@@ -166,7 +168,10 @@ function Panel({ label, sections, active, onSelect, account, footer }) {
 function SideNav(props) {
 	const phone = useIsPhone();
 	const shell = use(ShellNavContext);
-	if (!phone) return /* @__PURE__ */ jsx(Panel, { ...props });
+	if (!phone) return /* @__PURE__ */ jsx(Panel, {
+		...props,
+		edge: true
+	});
 	const open = props.open ?? shell?.open ?? false;
 	const onOpenChange = (next) => {
 		props.onOpenChange?.(next);

package/dist/components/status-pill/StatusPill.js

@@ -12,7 +12,7 @@ function StatusPill({ tone = "neutral", children, ref, ...rest }) {
 		...rest,
 		ref,
 		"data-tone": tone,
-		className: cn("rt:inline-flex rt:h-5 rt:w-fit rt:shrink-0 rt:items-center rt:justify-center rt:rounded-sm rt:border rt:px-2 rt:text-c2 rt:whitespace-nowrap", TONE_CLASSES[tone]),
+		className: cn("rt:inline-flex rt:h-5 rt:w-fit rt:shrink-0 rt:items-center rt:justify-center rt:rounded-sm rt:border rt:px-1.5 rt:text-b1 rt:whitespace-nowrap", TONE_CLASSES[tone]),
 		children
 	});
 }

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

@@ -8,7 +8,7 @@ function SummaryChips({ items, ref, ...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",
+			className: "rt:inline-flex rt:h-5 rt:items-center rt:gap-1 rt:rounded-sm rt:border rt:border-chip-border rt:bg-chip-background rt:px-2 rt:text-c1 rt:whitespace-nowrap rt:text-chip-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

package/dist/components/switch/Switch.js

@@ -9,11 +9,11 @@ import { Switch } from "@base-ui/react/switch";
 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"),
+		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-md 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"
+			className: "rt:pointer-events-none rt:mx-0.5 rt:block rt:size-3.5 rt:rounded-sm rt:forced-outline rt:bg-control rt:transition-colors rt:data-checked:bg-primary-foreground"
 		})
 	});
 }

package/dist/components/table/Table.d.ts

@@ -31,7 +31,7 @@ export type TableHeadProps = Omit<ComponentProps<'th'>, 'className' | 'style'> &
   /** Aligns the heading to the right, over a column of numbers. Defaults to false, which aligns it to the left. */
   numeric?: boolean;
 };
-/** A column heading: 12px uppercase text in the subdued colour. It is a column header unless `scope` says otherwise. */
+/** A column heading: 12px uppercase text in the muted foreground, the design system's colour for column headings. It is a column header unless `scope` says otherwise. */
 export declare function TableHead({ numeric, scope, ...rest }: TableHeadProps): JSX.Element;
 /** The props of TableCell: the attributes of a td element, except className and style, and the alignment of its column. */
 export type TableCellProps = Omit<ComponentProps<'td'>, 'className' | 'style'> & {

package/dist/components/table/Table.js

@@ -62,11 +62,11 @@ function TableRow({ selected = false, ...rest }) {
 		...rest
 	});
 }
-/** A column heading: 12px uppercase text in the subdued colour. It is a column header unless `scope` says otherwise. */
+/** A column heading: 12px uppercase text in the muted foreground, the design system's colour for column headings. It is a column header unless `scope` says otherwise. */
 function TableHead({ numeric = false, scope = "col", ...rest }) {
 	return /* @__PURE__ */ jsx("th", {
 		scope,
-		className: cn("rt:px-2 rt:align-middle rt:text-label rt:uppercase rt:whitespace-nowrap rt:text-foreground-subdued", numeric ? "rt:text-right" : "rt:text-left"),
+		className: cn("rt:px-2 rt:align-middle rt:text-label rt:uppercase rt:whitespace-nowrap rt:text-muted-foreground", numeric ? "rt:text-right" : "rt:text-left"),
 		...rest
 	});
 }
@@ -84,4 +84,25 @@ function TableCaption(props) {
 		...props
 	});
 }
-export { Table, TableBody, TableBox, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+/** The head cell of a selection column: 40px wide with its checkbox centred. For DataTable; not exported from the package. */
+function SelectionHead({ children }) {
+	return /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		className: "rt:w-10 rt:px-0 rt:align-middle",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rt:flex rt:justify-center",
+			children
+		})
+	});
+}
+/** The body cell of a selection column: 40px wide with its checkbox centred. For DataTable; not exported from the package. */
+function SelectionCell({ children }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: "rt:w-10 rt:px-0 rt:align-middle",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rt:flex rt:justify-center",
+			children
+		})
+	});
+}
+export { SelectionCell, SelectionHead, Table, TableBody, TableBox, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

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

@@ -43,7 +43,7 @@ function TagInput({ options, value, defaultValue, onValueChange, creatable = tru
 				"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",
+					className: "rt:inline-flex rt:h-5 rt:items-center rt:gap-1 rt:rounded-sm rt:border rt:border-chip-border rt:bg-chip-background rt:pr-0.5 rt:pl-2 rt:text-c1 rt:whitespace-nowrap rt:text-chip-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",

package/dist/components/text/Text.d.ts

@@ -1,10 +1,11 @@
 import { HTMLAttributes, JSX, Ref } from "react";
 /**
  * One of the design system's 13 text styles, named as in its type scale: display, the headings h1 and h5, the subtitles s1
- * and s2, the body styles b1 to b4, the captions c1 to c3, and the label, which is set in capitals. The design system's
+ * and s2, the body styles b1 to b4, the captions c1 to c3, and the label, which is set in capitals; and the two page 05 adds,
+ * section (a 16px section title) and badge (the 10px count badge). The design system's
  * two button styles are not among them: buttons take those.
  */
-export type TextVariant = 'display' | 'h1' | 'h5' | 's1' | 's2' | 'b1' | 'b2' | 'b3' | 'b4' | 'c1' | 'c2' | 'c3' | 'label';
+export type TextVariant = 'display' | 'h1' | 'h5' | 's1' | 's2' | 'b1' | 'b2' | 'b3' | 'b4' | 'c1' | 'c2' | 'c3' | 'label' | 'section' | 'badge';
 /**
  * The colour of the text. Default is the body colour for b3 and b4 and the strong colour for every other style, as in the
  * design system. Inherit sets no colour, so the text takes the colour of its parent.

package/dist/components/text/Text.js

@@ -14,7 +14,9 @@ const VARIANT_CLASSES = {
 	c1: "rt:text-c1",
 	c2: "rt:text-c2",
 	c3: "rt:text-c3",
-	label: "rt:text-label rt:uppercase"
+	label: "rt:text-label rt:uppercase",
+	section: "rt:text-section",
+	badge: "rt:text-badge"
 };
 const TONE_CLASSES = {
 	subdued: "rt:text-foreground-subdued",

package/dist/components/textarea/Textarea.js

@@ -2,7 +2,7 @@ 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", {
+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:ring-fade 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"

package/dist/components/toaster/Toaster.js

@@ -81,7 +81,7 @@ function Toaster({ closeLabel = "Close notification" }) {
 		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",
+			className: "rt:pointer-events-none rt:fixed rt:right-6 rt:bottom-6 rt:z-50 rt:flex rt:w-90 rt:max-w-full rt:flex-col rt:gap-2",
 			children: /* @__PURE__ */ jsx(ToastList, { closeLabel })
 		}) })
 	});

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

@@ -13,6 +13,6 @@ export type TooltipTriggerProps = Omit<Tooltip.Trigger.Props, 'className' | 'sty
 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. */
+/** The tooltip text: a white panel with a 1px line-100 border and ink-800 text, like a popover, 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

@@ -17,7 +17,7 @@ function Tooltip$1(props) {
 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. */
+/** The tooltip text: a white panel with a 1px line-100 border and ink-800 text, like a popover, 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,
@@ -26,7 +26,7 @@ function TooltipContent({ side = "top", sideOffset = 4, align = "center", alignO
 		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"),
+			className: cn("rt:inline-flex rt:w-fit rt:max-w-72 rt:items-center rt:gap-1.5 rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:px-3 rt:py-1.5 rt:text-b1 rt:text-popover-foreground"),
 			...props,
 			children
 		})

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

@@ -1,10 +1,8 @@
 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). */
+  /** The logo, usually the SVG the app gets from its designer. The bar draws no logo of its own: without one the slot is empty. */
   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. */
@@ -21,4 +19,4 @@ export type TopBarProps = {
  * 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;
+export declare function TopBar({ logo, menuLabel, search, actions, storeSwitcher, account }: TopBarProps): JSX.Element;

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

@@ -8,7 +8,7 @@ import { use } from "react";
 * 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 }) {
+function TopBar({ logo, 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",
@@ -28,12 +28,7 @@ function TopBar({ logo, wordmarkLabel = "Ratio", menuLabel = "Open navigation me
 			}),
 			/* @__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"
-				})
+				children: logo
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "rt:flex rt:min-w-0 rt:flex-1 rt:justify-center",

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, AccordionTriggerProps } from "./components/accordion/Accordion.js";
+import "./components/accordion/index.js";
 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";
@@ -8,10 +10,17 @@ 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 { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./components/breadcrumb/Breadcrumb.js";
+import "./components/breadcrumb/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 { IconName } from "./components/icon/registry.js";
+import { Icon, IconProps, IconSize, IconTone } from "./components/icon/Icon.js";
+import "./components/icon/index.js";
+import { Chart, ChartAspect, ChartColor, ChartConfig, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartLegendProps, ChartProps, ChartSeriesConfig, ChartTable, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, ChartTooltipProps, chartColor } from "./components/chart/Chart.js";
+import "./components/chart/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";
@@ -20,6 +29,8 @@ import { SummaryChip, SummaryChips, SummaryChipsProps } from "./components/summa
 import "./components/summary-chips/index.js";
 import { Collapsible, CollapsibleProps } from "./components/collapsible/Collapsible.js";
 import "./components/collapsible/index.js";
+import { Combobox, ComboboxItem, ComboboxProps } from "./components/combobox/Combobox.js";
+import "./components/combobox/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";
@@ -34,6 +45,8 @@ import { Definition, DefinitionProps } from "./components/definition/Definition.
 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";
 import "./components/dialog/index.js";
+import { Drawer, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from "./components/drawer/Drawer.js";
+import "./components/drawer/index.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./components/dropdown-menu/DropdownMenu.js";
 import "./components/dropdown-menu/index.js";
 import { EmptyState, EmptyStateProps } from "./components/empty-state/EmptyState.js";
@@ -43,18 +56,19 @@ 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";
-import { Icon, IconProps, IconSize, IconTone } from "./components/icon/Icon.js";
-import "./components/icon/index.js";
 import { GlobalSearch, GlobalSearchGroup, GlobalSearchProps, GlobalSearchResult } from "./components/global-search/GlobalSearch.js";
 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 { InputOtp, InputOtpProps } from "./components/input-otp/InputOtp.js";
+import "./components/input-otp/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 { KeyValueItem, KeyValueList, KeyValueListProps } from "./components/key-value-list/KeyValueList.js";
+import "./components/key-value-list/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";
@@ -73,12 +87,22 @@ 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 { Progress, ProgressProps } from "./components/progress/Progress.js";
+import "./components/progress/index.js";
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./components/radio-group/RadioGroup.js";
+import "./components/radio-group/index.js";
 import { SaveBar, SaveBarProps } from "./components/save-bar/SaveBar.js";
 import "./components/save-bar/index.js";
+import { ScrollArea, ScrollAreaProps } from "./components/scroll-area/ScrollArea.js";
+import "./components/scroll-area/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 { Separator, SeparatorProps } from "./components/separator/Separator.js";
+import "./components/separator/index.js";
+import { Sheet, SheetBody, SheetBodyProps, SheetClose, SheetCloseProps, SheetContent, SheetContentProps, SheetDescription, SheetDescriptionProps, SheetFooter, SheetFooterProps, SheetHeader, SheetHeaderProps, SheetSide, SheetTitle, SheetTitleProps, SheetTrigger, SheetTriggerProps } from "./components/sheet/Sheet.js";
+import "./components/sheet/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";
@@ -109,4 +133,4 @@ import "./components/top-bar/index.js";
 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 };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, 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, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, 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, Chart, type ChartAspect, type ChartColor, type ChartConfig, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartLegendProps, type ChartProps, type ChartSeriesConfig, type ChartTable, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProps, Checkbox, CheckboxList, type CheckboxListItem, type CheckboxListProps, type CheckboxProps, Collapsible, type CollapsibleProps, Combobox, type ComboboxItem, type ComboboxProps, 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, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, 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, InputOtp, type InputOtpProps, type InputProps, type InputSize, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KeyValueItem, KeyValueList, type KeyValueListProps, 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, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, SaveBar, type SaveBarProps, ScrollArea, type ScrollAreaProps, 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, Separator, type SeparatorProps, Sheet, SheetBody, type SheetBodyProps, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, type SheetDescriptionProps, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, type SheetSide, SheetTitle, type SheetTitleProps, SheetTrigger, type SheetTriggerProps, 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, chartColor, currencySymbol, formatCount, formatDate, formatIsoDate, formatMoney, formatPaise, formatPaiseForEditing, formatTime, getInitials, numberSeparators, paiseToAmount, parseDate, parseMoney, toast };