@ratio-ui/core 0.3.0 → 0.4.0

package/dist/components/link/Link.js

@@ -2,7 +2,7 @@ import { cn } from "../../lib/cn.js";
 import { RatioLink } from "../link-provider/RatioLink.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/link/Link.tsx
-const LINK = "rt:inline-flex rt:items-center rt:gap-1 rt:rounded-sm rt:text-primary rt:transition-colors rt:hover:underline rt:focus-visible:focus-ring rt:forced-outline";
+const LINK = "rt:inline-flex rt:items-center rt:gap-1 rt:rounded-sm rt:text-primary rt:transition-colors rt:hover:underline rt:focus-visible:focus-ring";
 /**
 * A text link to another page, such as "← Products" or "View all variants →". It is drawn by the app's LinkProvider, so a
 * router navigates without a reload; without one it is a plain <a href>. The arrows are decoration and are hidden from

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

@@ -1,7 +1,7 @@
 import { Icon } from "../icon/Icon.js";
 import { Button } from "../button/Button.js";
-import { RatioLink } from "../link-provider/RatioLink.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu/DropdownMenu.js";
+import { Link } from "../link/Link.js";
 import { StatusPill } from "../status-pill/StatusPill.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/page-header/PageHeader.tsx
@@ -13,13 +13,13 @@ function PageHeader({ title, icon, status, backHref, backLabel = "Back", actions
 	const hasMenu = menuItems !== void 0 && menuItems.length > 0;
 	return /* @__PURE__ */ jsxs("header", {
 		className: "rt:flex rt:flex-col rt:gap-2",
-		children: [backHref !== void 0 && /* @__PURE__ */ jsxs(RatioLink, {
-			href: backHref,
-			className: "rt:inline-flex rt:w-fit rt:items-center rt:gap-1 rt:rounded-sm rt:text-b1 rt:text-muted-foreground rt:transition-colors rt:hover:text-foreground rt:focus-visible:focus-ring",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				name: "chevron-left",
-				size: 8
-			}), backLabel]
+		children: [backHref !== void 0 && /* @__PURE__ */ jsx("div", {
+			className: "rt:flex rt:text-b1",
+			children: /* @__PURE__ */ jsx(Link, {
+				href: backHref,
+				back: true,
+				children: backLabel
+			})
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "rt:flex rt:flex-wrap rt:items-center rt:justify-between rt:gap-x-3 rt:gap-y-2",
 			children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from "react";
+/**
+ * The props of Progress: a value, or none for indeterminate, with an optional visible label and value.
+ * Without a visible label, pass aria-label so the bar has a name.
+ */
+export type ProgressProps = {
+  /** The current value; leave it out or pass null for an indeterminate bar. */
+  value?: number | null;
+  /** The value at which the bar is full. Defaults to 100; for steps, the number of steps. */
+  max?: number;
+  /** A visible label, which also names the bar for screen readers. */
+  label?: string;
+  /** Shows the value on the right: a percent, or "value/max" with steps. */
+  showValue?: boolean;
+  /** The step variant: counts completed steps out of max, such as 0/5 for the setup guide. Implies showValue. */
+  steps?: boolean;
+  /** The accessible name when there is no visible label. */
+  'aria-label'?: string;
+};
+/**
+ * The thin progress bar of question 5, 2px high, for page loads and refetches. Determinate with a value, indeterminate
+ * without one (a partial bar that moves only when the loading animation token names a motion, question 5). Base UI gives it the
+ * progressbar role, its label and its value text.
+ */
+export declare function Progress({ value, max, label, showValue, steps, ...rest }: ProgressProps): JSX.Element;

package/dist/components/progress/Progress.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+// src/components/progress/Progress.tsx
+/**
+* The thin progress bar of question 5, 2px high, for page loads and refetches. Determinate with a value, indeterminate
+* without one (a partial bar that moves only when the loading animation token names a motion, question 5). Base UI gives it the
+* progressbar role, its label and its value text.
+*/
+function Progress$1({ value = null, max = 100, label, showValue, steps, ...rest }) {
+	const withValue = showValue || steps;
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		"data-slot": "progress",
+		value,
+		max,
+		"aria-label": label ? void 0 : rest["aria-label"],
+		getAriaValueText: steps ? (_f, v) => v === null ? "In progress" : `${v} of ${max}` : void 0,
+		className: "rt:flex rt:flex-wrap rt:gap-2",
+		children: [
+			label ? /* @__PURE__ */ jsx(Progress.Label, {
+				className: "rt:text-b3 rt:text-foreground",
+				children: label
+			}) : null,
+			withValue ? /* @__PURE__ */ jsx(Progress.Value, {
+				className: "rt:ml-auto rt:text-b3 rt:text-muted-foreground rt:tabular-nums",
+				children: steps ? (_formatted, v) => v === null ? "" : `${v}/${max}` : void 0
+			}) : null,
+			/* @__PURE__ */ jsx(Progress.Track, {
+				"data-slot": "progress-track",
+				className: "rt:h-progress rt:w-full rt:overflow-hidden rt:bg-progress-track",
+				children: /* @__PURE__ */ jsx(Progress.Indicator, {
+					"data-slot": "progress-indicator",
+					className: "rt:h-full rt:bg-progress rt:data-indeterminate:w-1/3 rt:data-indeterminate:loading-motion"
+				})
+			})
+		]
+	});
+}
+export { Progress$1 as Progress };

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

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

package/dist/components/progress/index.js

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

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+/** The props of RadioGroup: Base UI's radio group props, except className, style and render. Give it an aria-label or a label that points to it. */
+export type RadioGroupProps = Omit<RadioGroup.Props, 'className' | 'style' | 'render'>;
+/** The props of RadioGroupItem: Base UI's radio props, except className, style and render. Give it an aria-label or a label that points to it. */
+export type RadioGroupItemProps = Omit<Radio.Root.Props, 'className' | 'style' | 'render'>;
+/**
+ * A column of radio buttons where exactly one can be on. The arrow keys move the choice. aria-invalid on the group, as
+ * Field sets it, draws the error ring on every item.
+ */
+declare function RadioGroup$1({ ...props }: RadioGroupProps): JSX.Element;
+/**
+ * One choice in a RadioGroup: a 14px round control like the checkbox, drawn with a hairline ring and filled in the
+ * primary colour with a white dot when chosen. An invisible 24px area around it takes the tap.
+ */
+export declare function RadioGroupItem({ ...props }: RadioGroupItemProps): JSX.Element;
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio-group/RadioGroup.js

@@ -0,0 +1,32 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+// src/components/radio-group/RadioGroup.tsx
+/**
+* A column of radio buttons where exactly one can be on. The arrow keys move the choice. aria-invalid on the group, as
+* Field sets it, draws the error ring on every item.
+*/
+function RadioGroup$1({ ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "radio-group",
+		className: "rt:group/radio-group rt:grid rt:w-full rt:gap-2",
+		...props
+	});
+}
+/**
+* One choice in a RadioGroup: a 14px round control like the checkbox, drawn with a hairline ring and filled in the
+* primary colour with a white dot when chosen. An invisible 24px area around it takes the tap.
+*/
+function RadioGroupItem({ ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: cn("rt:relative rt:flex rt:size-3.5 rt:shrink-0 rt:cursor-pointer rt:items-center rt:justify-center rt:rounded-3xl rt:bg-background rt:shadow-ring-hairline rt:transition-colors rt:outline-none", "rt:after:absolute rt:after:-inset-1.25", "rt:hover:bg-primary-tint rt:data-checked:bg-primary rt:data-checked:shadow-none rt:data-checked:hover:bg-primary-hover", "rt:focus-visible:focus-ring rt:forced-outline", "rt:aria-invalid:shadow-ring-invalid rt:group-aria-invalid/radio-group:shadow-ring-invalid", "rt:data-disabled:cursor-not-allowed rt:data-disabled:opacity-50"),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "rt:block rt:size-1.5 rt:rounded-3xl rt:bg-primary-foreground"
+		})
+	});
+}
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./RadioGroup.js";
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps };

package/dist/components/radio-group/index.js

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

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,12 @@
+import { JSX, ReactNode, Ref } from "react";
+/** The props of ScrollArea. */
+export type ScrollAreaProps = {
+  /** The scrolling content. */
+  children: ReactNode;
+  /** Which scrollbars to offer. Defaults to vertical. */
+  orientation?: 'vertical' | 'horizontal' | 'both';
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLDivElement>;
+};
+/** A scrolling region that fills its parent, which sets the height or width, with a thin scrollbar in the design system greys. */
+export declare function ScrollArea({ children, orientation, ref }: ScrollAreaProps): JSX.Element;

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,34 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+// src/components/scroll-area/ScrollArea.tsx
+function Bar({ orientation }) {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: cn("rt:flex rt:touch-none rt:p-px rt:select-none rt:data-horizontal:h-1.5 rt:data-horizontal:flex-col rt:data-vertical:h-full rt:data-vertical:w-1.5"),
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "rt:relative rt:flex-1 rt:rounded-sm rt:bg-border-strong rt:transition-colors rt:hover:bg-foreground-subdued"
+		})
+	});
+}
+/** A scrolling region that fills its parent, which sets the height or width, with a thin scrollbar in the design system greys. */
+function ScrollArea$1({ children, orientation = "vertical", ref }) {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		ref,
+		"data-slot": "scroll-area",
+		className: "rt:relative rt:size-full",
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "rt:size-full rt:outline-none rt:focus-visible:focus-ring",
+				children
+			}),
+			orientation !== "horizontal" && /* @__PURE__ */ jsx(Bar, { orientation: "vertical" }),
+			orientation !== "vertical" && /* @__PURE__ */ jsx(Bar, { orientation: "horizontal" }),
+			/* @__PURE__ */ jsx(ScrollArea.Corner, {})
+		]
+	});
+}
+export { ScrollArea$1 as ScrollArea };

package/dist/components/scroll-area/index.d.ts

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

package/dist/components/scroll-area/index.js

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

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-5 rt:right-5 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/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/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/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 };