@ratio-ui/core 0.2.0 → 0.4.0

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/search-field/SearchField.js

@@ -1,7 +1,7 @@
 import { Icon } from "../icon/Icon.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
-import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 // src/components/search-field/SearchField.tsx
 /**
 * The search field above a listing: a search icon, the input and a clear button that appears once there is text.

package/dist/components/select/Select.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from "react";
+import { Select } from "@base-ui/react/select";
+/** The props of Select: Base UI's root props, such as value, defaultValue, onValueChange, items, name and disabled. */
+export type SelectProps<Value = string> = Select.Root.Props<Value>;
+/** A choice from a fixed list. Pass items ({ label, value }[]) so the trigger shows the label of the chosen value. Put a SelectTrigger and a SelectContent inside it. */
+declare function Select$1<Value = string>(props: SelectProps<Value>): JSX.Element;
+/** The height of the trigger in px: 36 for forms, 32 for fields inside a table. */
+export type SelectSize = 36 | 32;
+/** The props of SelectTrigger: Base UI's trigger props except className and style, with the height. Mark an invalid field with aria-invalid. */
+export type SelectTriggerProps = Omit<Select.Trigger.Props, 'className' | 'style'> & {
+  /** The height in px: 36 for forms, 32 inside a table. Defaults to 36. */
+  size?: SelectSize;
+};
+/** The closed field: the chosen value (or the placeholder) and a chevron at the right. Put a SelectValue inside it. */
+export declare function SelectTrigger({ size, children, ...props }: SelectTriggerProps): JSX.Element;
+/** The props of SelectValue: Base UI's value props except className and style. */
+export type SelectValueProps = Omit<Select.Value.Props, 'className' | 'style'>;
+/** Shows the label of the chosen option inside the trigger, or the placeholder while nothing is chosen. */
+export declare function SelectValue(props: SelectValueProps): JSX.Element;
+/** The props of SelectContent: the popup props plus where the list sits. */
+export type SelectContentProps = Omit<Select.Popup.Props, 'className' | 'style'> & Pick<Select.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
+/** The list: the popover look (8px radius, outline, no shadow, 6px 0 padding), as wide as the trigger. It opens below the trigger. */
+export declare function SelectContent({ align, alignOffset, side, sideOffset, children, ...props }: SelectContentProps): JSX.Element;
+/** The props of SelectGroup: Base UI's group props except className and style. */
+export type SelectGroupProps = Omit<Select.Group.Props, 'className' | 'style'>;
+/** Groups related options under a SelectLabel. */
+export declare function SelectGroup(props: SelectGroupProps): JSX.Element;
+/** The props of SelectLabel: Base UI's group label props except className and style. */
+export type SelectLabelProps = Omit<Select.GroupLabel.Props, 'className' | 'style'>;
+/** The heading of a group, in the muted colour. */
+export declare function SelectLabel(props: SelectLabelProps): JSX.Element;
+/** The props of SelectItem: Base UI's item props except className and style. The value is the one the select reports. */
+export type SelectItemProps = Omit<Select.Item.Props, 'className' | 'style'>;
+/** One option. The highlighted one has the accent background, the chosen one a check at its end, a disabled one is dimmed and cannot be chosen. */
+export declare function SelectItem({ children, ...props }: SelectItemProps): JSX.Element;
+/** The props of SelectSeparator: Base UI's separator props except className and style. */
+export type SelectSeparatorProps = Omit<Select.Separator.Props, 'className' | 'style'>;
+/** A hairline between groups. */
+export declare function SelectSeparator(props: SelectSeparatorProps): JSX.Element;
+export { Select$1 as Select };

package/dist/components/select/Select.js

@@ -0,0 +1,84 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Select } from "@base-ui/react/select";
+// src/components/select/Select.tsx
+/** A choice from a fixed list. Pass items ({ label, value }[]) so the trigger shows the label of the chosen value. Put a SelectTrigger and a SelectContent inside it. */
+function Select$1(props) {
+	return /* @__PURE__ */ jsx(Select.Root, { ...props });
+}
+const triggerVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:justify-between rt:gap-2 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:whitespace-nowrap rt:shadow-ring-subtle rt:outline-none rt:select-none rt:transition-colors rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:data-placeholder:text-muted-foreground rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { size: {
+		36: "rt:h-9 rt:pr-8 rt:pl-3",
+		32: "rt:h-8 rt:pr-8 rt:pl-2.75"
+	} },
+	defaultVariants: { size: 36 }
+});
+/** The closed field: the chosen value (or the placeholder) and a chevron at the right. Put a SelectValue inside it. */
+function SelectTrigger({ size = 36, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		className: cn(triggerVariants({ size }), "rt:relative"),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			render: /* @__PURE__ */ jsx("span", { className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex rt:text-muted-foreground" }),
+			children: /* @__PURE__ */ jsx(Icon, { name: "nav-caret-down" })
+		})]
+	});
+}
+/** Shows the label of the chosen option inside the trigger, or the placeholder while nothing is chosen. */
+function SelectValue(props) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		className: "rt:min-w-0 rt:flex-1 rt:truncate rt:text-left",
+		...props
+	});
+}
+/** The list: the popover look (8px radius, outline, no shadow, 6px 0 padding), as wide as the trigger. It opens below the trigger. */
+function SelectContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, children, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		alignItemWithTrigger: false,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Select.Popup, {
+			className: "rt:max-h-available rt:min-w-anchor rt:overflow-y-auto rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:py-1.5 rt:text-b3 rt:text-popover-foreground rt:outline-hidden rt:transition-colors",
+			...props,
+			children: /* @__PURE__ */ jsx(Select.List, { children })
+		})
+	}) });
+}
+/** Groups related options under a SelectLabel. */
+function SelectGroup(props) {
+	return /* @__PURE__ */ jsx(Select.Group, { ...props });
+}
+/** The heading of a group, in the muted colour. */
+function SelectLabel(props) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		className: "rt:px-3 rt:py-1 rt:text-label rt:uppercase rt:text-foreground-subdued",
+		...props
+	});
+}
+/** One option. The highlighted one has the accent background, the chosen one a check at its end, a disabled one is dimmed and cannot be chosen. */
+function SelectItem({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		className: "rt:relative rt:flex rt:h-7 rt:cursor-default rt:items-center rt:gap-2 rt:pr-8 rt:pl-3 rt:text-b3 rt:text-foreground rt:outline-none rt:select-none rt:transition-colors rt:data-highlighted:bg-accent rt:data-highlighted:text-accent-foreground rt:data-disabled:pointer-events-none rt:data-disabled:opacity-50",
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "rt:flex-1 rt:truncate",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex" }),
+			children: /* @__PURE__ */ jsx(Icon, { name: "check" })
+		})]
+	});
+}
+/** A hairline between groups. */
+function SelectSeparator(props) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		className: "rt:my-1.5 rt:h-px rt:bg-divider",
+		...props
+	});
+}
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };

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

@@ -0,0 +1,2 @@
+import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectLabel, SelectLabelProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./Select.js";
+export { Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/components/select/index.js

@@ -0,0 +1 @@
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./Select.js";

package/dist/components/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/side-nav/SideNav.js

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

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

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

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

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/summary-chips/SummaryChips.tsx
+/** A row of 20px chips that summarise values, such as the ones a collapsed section still shows. */
+function SummaryChips({ items, ref, ...rest }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		ref,
+		className: "rt:m-0 rt:flex rt:list-none rt:flex-wrap rt:gap-1 rt:p-0",
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "rt:inline-flex rt:h-5 rt:items-center rt:gap-1 rt:rounded-sm rt:border rt:border-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
+			}) : null]
+		}, item.label))
+	});
+}
+export { SummaryChips };

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

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

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

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

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

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

package/dist/components/switch/Switch.js

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

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

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

package/dist/components/switch/index.js

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

package/dist/components/table/Table.js

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

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

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