@ratio-ui/core 0.1.1 → 0.2.0

package/dist/components/definition/index.js

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

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, JSX } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+/**
+ * The root of a dialog. 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.
+ */
+declare function Dialog$1(props: Dialog.Root.Props): JSX.Element;
+/** Props of DialogTrigger. */
+export type DialogTriggerProps = Omit<Dialog.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the dialog. */
+export declare function DialogTrigger(props: DialogTriggerProps): JSX.Element;
+/** Props of DialogClose. */
+export type DialogCloseProps = Omit<Dialog.Close.Props, 'className' | 'style'>;
+/** A button that closes the dialog, such as Cancel in the footer. */
+export declare function DialogClose(props: DialogCloseProps): JSX.Element;
+/** Props of DialogContent. */
+export interface DialogContentProps extends Omit<Dialog.Popup.Props, 'className' | 'style'> {
+  /** 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: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put DialogHeader,
+ * the form and DialogFooter inside.
+ */
+export declare function DialogContent({ children, showCloseButton, closeLabel, ...props }: DialogContentProps): JSX.Element;
+/** Props of DialogHeader. */
+export type DialogHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked. */
+export declare function DialogHeader(props: DialogHeaderProps): JSX.Element;
+/** Props of DialogFooter. */
+export type DialogFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The row of actions at the bottom, aligned to the end. */
+export declare function DialogFooter(props: DialogFooterProps): JSX.Element;
+/** Props of DialogTitle. */
+export type DialogTitleProps = Omit<Dialog.Title.Props, 'className' | 'style'>;
+/** The dialog's name, in the b4 style. It names the dialog for assistive technology. */
+export declare function DialogTitle(props: DialogTitleProps): JSX.Element;
+/** Props of DialogDescription. */
+export type DialogDescriptionProps = Omit<Dialog.Description.Props, 'className' | 'style'>;
+/** One line that says what the dialog is for, in subdued body text. */
+export declare function DialogDescription(props: DialogDescriptionProps): JSX.Element;
+export { Dialog$1 as Dialog };

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,79 @@
+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/dialog/Dialog.tsx
+/**
+* The root of a dialog. 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 Dialog$1(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+/** The button that opens the dialog. */
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+/** A button that closes the dialog, such as Cancel in the footer. */
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+/**
+* The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put DialogHeader,
+* the form and DialogFooter inside.
+*/
+function DialogContent({ children, showCloseButton = true, closeLabel = "Close", ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: "rt:fixed rt:inset-0 rt:z-50 rt:m-auto rt:flex rt:h-fit rt:max-h-full rt:w-120 rt:max-w-full rt:overflow-y-auto rt:flex-col rt:gap-6 rt:rounded-lg rt:bg-popover rt:p-6 rt:text-b3 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline rt:focus-visible:focus-ring",
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			"data-slot": "dialog-close",
+			"aria-label": closeLabel,
+			className: "rt:absolute rt:top-4 rt:right-4 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. */
+function DialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: "rt:flex rt:flex-col rt:gap-1",
+		...props
+	});
+}
+/** The row of actions at the bottom, aligned to the end. */
+function DialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: "rt:flex rt:items-center rt:justify-end rt:gap-2",
+		...props
+	});
+}
+/** The dialog's name, in the b4 style. It names the dialog for assistive technology. */
+function DialogTitle(props) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("rt:text-b4 rt:text-foreground-strong"),
+		...props
+	});
+}
+/** One line that says what the dialog is for, in subdued body text. */
+function DialogDescription(props) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

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

@@ -0,0 +1,2 @@
+import { Dialog, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./Dialog.js";
+export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps };

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./Dialog.js";

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,73 @@
+import { JSX, ReactNode } from "react";
+import { Menu } from "@base-ui/react/menu";
+/** Props of DropdownMenu, the root that holds the open state. It renders no element. */
+export type DropdownMenuProps = Menu.Root.Props;
+/** The root of a menu of actions that opens from a trigger. Compose it with DropdownMenuTrigger and DropdownMenuContent. */
+export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;
+/** Props of DropdownMenuTrigger. The trigger is a button; pass `render` to draw another element. */
+export type DropdownMenuTriggerProps = Omit<Menu.Trigger.Props, 'className' | 'style'>;
+/** The control that opens the menu. It is a button, and carries aria-expanded and aria-haspopup. */
+export declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): JSX.Element;
+/** Props of DropdownMenuContent. */
+export interface DropdownMenuContentProps extends Omit<Menu.Popup.Props, 'className' | 'style'> {
+  /** Which side of the trigger the menu opens on. Defaults to bottom. */
+  side?: Menu.Positioner.Props['side'];
+  /** How the menu lines up with the trigger along that side. Defaults to start. */
+  align?: Menu.Positioner.Props['align'];
+  /** The gap between the trigger and the menu in px. Defaults to 4. */
+  sideOffset?: number;
+  /** A shift along the side in px. Defaults to 0. */
+  alignOffset?: number;
+}
+/** The menu panel: a white popup with a hairline ring, 8px corners and no shadow. It opens in a portal. */
+export declare function DropdownMenuContent({ side, align, sideOffset, alignOffset, ...props }: DropdownMenuContentProps): JSX.Element;
+/** Props of DropdownMenuGroup: Base UI's group props, except className and style. */
+export type DropdownMenuGroupProps = Omit<Menu.Group.Props, 'className' | 'style'>;
+/** Groups items under one DropdownMenuLabel, so assistive technology announces the label with the group. */
+export declare function DropdownMenuGroup(props: DropdownMenuGroupProps): JSX.Element;
+/** Props of DropdownMenuLabel. */
+export type DropdownMenuLabelProps = Omit<Menu.GroupLabel.Props, 'className' | 'style'>;
+/** The caption of a group, in the design system's label style: 12px, uppercase, subdued. Place it inside DropdownMenuGroup. */
+export declare function DropdownMenuLabel(props: DropdownMenuLabelProps): JSX.Element;
+/** Props of DropdownMenuItem. */
+export interface DropdownMenuItemProps extends Omit<Menu.Item.Props, 'className' | 'style'> {
+  /** What the item means. destructive is drawn in the destructive token; a delete action also needs a confirm step. Defaults to default. */
+  variant?: 'default' | 'destructive';
+}
+/** One action in the menu. It runs onClick and closes the menu; disabled is drawn at half opacity and cannot be chosen. */
+export declare function DropdownMenuItem({ variant, ...props }: DropdownMenuItemProps): JSX.Element;
+/** Props of DropdownMenuShortcut. */
+export interface DropdownMenuShortcutProps {
+  /** The key hint, such as ⌘E. It is text only and does not bind a key. */
+  children: ReactNode;
+}
+/** A key hint pushed to the end of an item. It is a hint only: the host binds the key. */
+export declare function DropdownMenuShortcut({ children }: DropdownMenuShortcutProps): JSX.Element;
+/** Props of DropdownMenuSeparator. */
+export type DropdownMenuSeparatorProps = Omit<Menu.Separator.Props, 'className' | 'style'>;
+/** A hairline between groups of items. */
+export declare function DropdownMenuSeparator(props: DropdownMenuSeparatorProps): JSX.Element;
+/** Props of DropdownMenuSub, the root of a submenu. It renders no element. */
+export type DropdownMenuSubProps = Menu.SubmenuRoot.Props;
+/** The root of a nested menu. Hold a DropdownMenuSubTrigger and a DropdownMenuSubContent. */
+export declare function DropdownMenuSub(props: DropdownMenuSubProps): JSX.Element;
+/** Props of DropdownMenuSubTrigger. */
+export type DropdownMenuSubTriggerProps = Omit<Menu.SubmenuTrigger.Props, 'className' | 'style'>;
+/** The item that opens a submenu, on hover, click or ArrowRight. A chevron at its end marks it. */
+export declare function DropdownMenuSubTrigger({ children, ...props }: DropdownMenuSubTriggerProps): JSX.Element;
+/** Props of DropdownMenuSubContent. */
+export type DropdownMenuSubContentProps = DropdownMenuContentProps;
+/** The panel of a submenu. It opens to the side of its trigger. */
+export declare function DropdownMenuSubContent({ side, alignOffset, sideOffset, ...props }: DropdownMenuSubContentProps): JSX.Element;
+/** Props of DropdownMenuCheckboxItem. */
+export type DropdownMenuCheckboxItemProps = Omit<Menu.CheckboxItem.Props, 'className' | 'style'>;
+/** An item that toggles an option. A check shows at its start while it is on and keeps the menu open, so several options can be changed in one visit. */
+export declare function DropdownMenuCheckboxItem({ children, ...props }: DropdownMenuCheckboxItemProps): JSX.Element;
+/** Props of DropdownMenuRadioGroup: Base UI's radio group props, except className and style. */
+export type DropdownMenuRadioGroupProps = Omit<Menu.RadioGroup.Props, 'className' | 'style'>;
+/** Holds radio items and the one chosen value. */
+export declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): JSX.Element;
+/** Props of DropdownMenuRadioItem. */
+export type DropdownMenuRadioItemProps = Omit<Menu.RadioItem.Props, 'className' | 'style'>;
+/** One choice of a DropdownMenuRadioGroup. A dot shows at its start while it is the chosen value. */
+export declare function DropdownMenuRadioItem({ children, ...props }: DropdownMenuRadioItemProps): JSX.Element;

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,116 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+// src/components/dropdown-menu/DropdownMenu.tsx
+/** The root of a menu of actions that opens from a trigger. Compose it with DropdownMenuTrigger and DropdownMenuContent. */
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+/** The control that opens the menu. It is a button, and carries aria-expanded and aria-haspopup. */
+function DropdownMenuTrigger(props) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, { ...props });
+}
+const POPUP = "rt:z-50 rt:max-h-80 rt:min-w-40 rt:overflow-y-auto rt:rounded-lg rt:bg-popover rt:py-1.5 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline rt:outline-none";
+/** The menu panel: a white popup with a hairline ring, 8px corners and no shadow. It opens in a portal. */
+function DropdownMenuContent({ side = "bottom", align = "start", sideOffset = 4, alignOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "rt:isolate rt:z-50 rt:outline-none",
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			className: POPUP,
+			...props
+		})
+	}) });
+}
+/** Groups items under one DropdownMenuLabel, so assistive technology announces the label with the group. */
+function DropdownMenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.Group, { ...props });
+}
+/** The caption of a group, in the design system's label style: 12px, uppercase, subdued. Place it inside DropdownMenuGroup. */
+function DropdownMenuLabel(props) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: "rt:px-3 rt:py-1 rt:text-label rt:uppercase rt:text-foreground-subdued",
+		...props
+	});
+}
+const ROW = "rt:relative rt:flex rt:h-7 rt:cursor-default rt:items-center rt:gap-2 rt:px-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";
+/** One action in the menu. It runs onClick and closes the menu; disabled is drawn at half opacity and cannot be chosen. */
+function DropdownMenuItem({ variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-variant": variant,
+		className: cn(ROW, variant === "destructive" && "rt:text-destructive-foreground rt:data-highlighted:bg-destructive-hover rt:data-highlighted:text-destructive-foreground"),
+		...props
+	});
+}
+/** A key hint pushed to the end of an item. It is a hint only: the host binds the key. */
+function DropdownMenuShortcut({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "rt:ml-auto rt:text-c1 rt:text-foreground-subdued",
+		children
+	});
+}
+/** A hairline between groups of items. */
+function DropdownMenuSeparator(props) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		className: "rt:my-1.5 rt:h-px rt:bg-divider",
+		...props
+	});
+}
+/** The root of a nested menu. Hold a DropdownMenuSubTrigger and a DropdownMenuSubContent. */
+function DropdownMenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+/** The item that opens a submenu, on hover, click or ArrowRight. A chevron at its end marks it. */
+function DropdownMenuSubTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		className: cn(ROW, "rt:data-popup-open:bg-accent"),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "rt:ml-auto rt:flex",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "chevron-right",
+				size: 8
+			})
+		})]
+	});
+}
+/** The panel of a submenu. It opens to the side of its trigger. */
+function DropdownMenuSubContent({ side = "right", alignOffset = -6, sideOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		side,
+		alignOffset,
+		sideOffset,
+		...props
+	});
+}
+/** An item that toggles an option. A check shows at its start while it is on and keeps the menu open, so several options can be changed in one visit. */
+function DropdownMenuCheckboxItem({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		className: cn(ROW, "rt:pl-8"),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "rt:absolute rt:left-3 rt:flex",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { name: "check" }) })
+		}), children]
+	});
+}
+/** Holds radio items and the one chosen value. */
+function DropdownMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, { ...props });
+}
+/** One choice of a DropdownMenuRadioGroup. A dot shows at its start while it is the chosen value. */
+function DropdownMenuRadioItem({ children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		className: cn(ROW, "rt:pl-8"),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "rt:absolute rt:left-3 rt:flex",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx("span", { className: "rt:block rt:size-1.5 rt:rounded-3xl rt:bg-current" }) })
+		}), children]
+	});
+}
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,2 @@
+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 "./DropdownMenu.js";
+export { 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 };

package/dist/components/dropdown-menu/index.js

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./DropdownMenu.js";

package/dist/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, JSX, ReactNode } from "react";
+/** The props of EmptyState: the HTML attributes of its div, except className, style, children and title. */
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'title'> & {
+  /** One clause that says why nothing is shown, in sentence case with no period. */
+  title: ReactNode;
+  /** An optional second clause that says what to do next. */
+  description?: ReactNode;
+  /** An optional action, usually one Button. */
+  action?: ReactNode;
+};
+/**
+ * What a list, table or panel shows when it has nothing to show: one clause and an optional action, centred in a
+ * hairline container.
+ */
+export declare function EmptyState({ title, description, action, ...rest }: EmptyStateProps): JSX.Element;

package/dist/components/empty-state/EmptyState.js

@@ -0,0 +1,30 @@
+import { Text } from "../text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/empty-state/EmptyState.tsx
+/**
+* What a list, table or panel shows when it has nothing to show: one clause and an optional action, centred in a
+* hairline container.
+*/
+function EmptyState({ title, description, action, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state",
+		...rest,
+		className: "rt:flex rt:w-full rt:min-w-0 rt:flex-col rt:items-center rt:justify-center rt:gap-6 rt:rounded-lg rt:border rt:border-border rt:bg-background rt:p-6 rt:text-center",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:flex-col rt:items-center rt:gap-1",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				variant: "b4",
+				children: title
+			}), description ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				tone: "subdued",
+				children: description
+			}) : null]
+		}), action ? /* @__PURE__ */ jsx("div", {
+			"data-slot": "empty-state-action",
+			children: action
+		}) : null]
+	});
+}
+export { EmptyState };

package/dist/components/empty-state/index.d.ts

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

package/dist/components/empty-state/index.js

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

package/dist/components/filter-tabs/FilterTabs.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, JSX } from "react";
+/** One choice of FilterTabs. */
+export type FilterTabsItem = {
+  /** The value reported when the item is chosen. Unique in the list. */
+  value: string;
+  /** The text of the chip, one or two words in sentence case. */
+  label: string;
+  /** Stops the item being chosen and dims it to 50%. Defaults to false. */
+  disabled?: boolean;
+};
+/** The props of FilterTabs. */
+export type FilterTabsProps = Omit<ComponentProps<'div'>, 'className' | 'style' | 'children' | 'defaultValue' | 'onChange'> & {
+  /** The choices, in order. */
+  items: FilterTabsItem[];
+  /** The chosen value when controlled. */
+  value?: string;
+  /** The chosen value at the start when uncontrolled. Defaults to the first item. */
+  defaultValue?: string;
+  /** Called with the new value when another item is chosen. Choosing the chosen item again does nothing. */
+  onValueChange?: (value: string) => void;
+  /** Disables every item. Defaults to false. */
+  disabled?: boolean;
+};
+/**
+ * A single choice that filters a list, such as All, Active and Inactive above a table: the design system's Tab chips in a
+ * row with an 8px gap. One item is always chosen. For sections of a page use Tabs instead.
+ */
+export declare function FilterTabs({ items, value, defaultValue, onValueChange, disabled, ...rest }: FilterTabsProps): JSX.Element;

package/dist/components/filter-tabs/FilterTabs.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/cn.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+// src/components/filter-tabs/FilterTabs.tsx
+/**
+* A single choice that filters a list, such as All, Active and Inactive above a table: the design system's Tab chips in a
+* row with an 8px gap. One item is always chosen. For sections of a page use Tabs instead.
+*/
+function FilterTabs({ items, value, defaultValue, onValueChange, disabled, ...rest }) {
+	const [inner, setInner] = useState(defaultValue ?? items[0]?.value);
+	const wanted = value ?? inner;
+	const chosen = items.some((item) => item.value === wanted) ? wanted : items[0]?.value;
+	const handle = (next) => {
+		const picked = next[0];
+		if (picked === void 0) return;
+		setInner(picked);
+		onValueChange?.(picked);
+	};
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		"data-slot": "filter-tabs",
+		className: cn("rt:flex rt:flex-wrap rt:items-center rt:gap-2"),
+		disabled,
+		value: chosen === void 0 ? [] : [chosen],
+		onValueChange: handle,
+		...rest,
+		children: items.map((item) => /* @__PURE__ */ jsx(Toggle, {
+			value: item.value,
+			disabled: item.disabled,
+			"data-slot": "filter-tabs-item",
+			className: cn("rt:inline-flex rt:h-9 rt:cursor-pointer rt:items-center rt:justify-center rt:rounded-lg rt:whitespace-nowrap", "rt:bg-background rt:text-b3 rt:transition-colors rt:forced-outline", "rt:border rt:border-border rt:px-3 rt:text-tab-inactive rt:hover:bg-primary-tint", "rt:data-pressed:border-0 rt:data-pressed:px-2.75 rt:data-pressed:font-semibold rt:data-pressed:text-primary", "rt:data-pressed:shadow-ring-accent-hairline", "rt:focus-visible:focus-ring rt:data-disabled:cursor-default rt:data-disabled:opacity-50"),
+			children: item.label
+		}, item.value))
+	});
+}
+export { FilterTabs };

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

@@ -0,0 +1,2 @@
+import { FilterTabs, FilterTabsItem, FilterTabsProps } from "./FilterTabs.js";
+export { FilterTabs, type FilterTabsItem, type FilterTabsProps };

package/dist/components/filter-tabs/index.js

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

package/dist/components/global-search/GlobalSearch.d.ts

@@ -0,0 +1,51 @@
+import { IconName } from "../icon/registry.js";
+import "../icon/index.js";
+import { JSX } from "react";
+/** One result row: what it is called, a line of detail and an optional icon. */
+export interface GlobalSearchResult {
+  /** A stable id, unique across all groups. */
+  id: string;
+  /** The name shown on the row. */
+  label: string;
+  /** A second line of detail, such as a SKU or an order status. */
+  description?: string;
+  /** An icon drawn before the label. */
+  icon?: IconName;
+}
+/** A group of results, such as Products or Orders. The app fills it. */
+export interface GlobalSearchGroup {
+  /** A stable id for the group. */
+  id: string;
+  /** The heading of the group. */
+  label: string;
+  /** The results to show, already limited by the app. */
+  items: GlobalSearchResult[];
+  /** How many results exist in all. When it is above items.length, a "+N more" row follows the items. */
+  total?: number;
+}
+/** The props of GlobalSearch. */
+export interface GlobalSearchProps {
+  /** The accessible name of the field, such as "Search the dashboard". */
+  label: string;
+  /** The text typed in the field. */
+  value: string;
+  /** Called on every change of the text. Debounce and fetch in the app. */
+  onValueChange: (value: string) => void;
+  /** The results for the current text, grouped. The app supplies them; nothing is filtered here. */
+  groups: GlobalSearchGroup[];
+  /** Recent items, shown under "Recent" while the field is empty. */
+  recent?: GlobalSearchResult[];
+  /** Called when a result is chosen by click or Enter. */
+  onSelect?: (result: GlobalSearchResult) => void;
+  /** Called when a "+N more" row is chosen, with its group. */
+  onShowMore?: (group: GlobalSearchGroup) => void;
+  /** The placeholder of the field. Defaults to "Search". */
+  placeholder?: string;
+  /** The copy when the text matches nothing. Defaults to "No results". */
+  emptyText?: string;
+}
+/**
+ * The search in the top bar. Typing opens a panel of grouped results that the app supplies, an empty field shows recent
+ * items, and the arrow keys, Enter and Escape work the list. Cmd+K or Ctrl+K focuses the field from anywhere.
+ */
+export declare function GlobalSearch({ label, value, onValueChange, groups, recent, onSelect, onShowMore, placeholder, emptyText }: GlobalSearchProps): JSX.Element;