@api7/ui-components 0.7.0 → 0.8.1

package/dist/config/messages.d.ts

@@ -1,5 +1,39 @@
 export type Locale = 'en-US' | 'zh-CN';
 export interface Messages {
+  /** Cascader text. Omitted keys inherit the locale defaults. */
+  readonly cascader?: {
+    /** Placeholder when no path is selected. */
+    readonly placeholder: string;
+    /** Accessible name of the clear selection button. */
+    readonly clear: string;
+    /** Explains that search includes only supplied and already loaded options. */
+    readonly searchHint: string;
+    /** Accessible name of the search results listbox. */
+    readonly results: string;
+    /** Accessible description of an option that opens another level. */
+    readonly branch: string;
+    /** Empty state for a level or search with no options. */
+    readonly empty: string;
+    /** Status while root options or a branch's children are loading. */
+    readonly loading: string;
+    /** Generic status when loading a branch's children fails. */
+    readonly error: string;
+    /** Label of the button that retries a failed branch request. */
+    readonly retry: string;
+    /** Names a listbox using its one-based level and the parent label, or the root placeholder. */
+    readonly level: (args: {
+      level: number;
+      label: string;
+    }) => string;
+  };
+  readonly code: {
+    readonly copy: string;
+    readonly copied: string;
+    readonly copyError: string;
+  };
+  readonly breadcrumb?: {
+    readonly label: string;
+  };
   readonly button: {
     readonly loading: string;
   };
@@ -7,6 +41,13 @@ export interface Messages {
   readonly spinner: {
     readonly label: string;
   };
+  readonly steps: {
+    readonly label: string;
+    readonly wait: string;
+    readonly process: string;
+    readonly finish: string;
+    readonly error: string;
+  };
   readonly numberField: {
     readonly increment: string;
     readonly decrement: string;
@@ -25,15 +66,49 @@ export interface Messages {
     readonly clear: string;
     readonly toggle: string;
     readonly remove: string;
+    readonly loading?: string;
+    readonly error?: string;
+    readonly retry?: string;
+    readonly loadMore?: string;
   };
   readonly select: {
     readonly clear: string;
   };
+  readonly fileUpload?: {
+    readonly selectFile: string;
+    readonly selectFiles: string;
+    readonly selectedFiles: string;
+    readonly progress: string;
+    readonly remove: (args: {
+      name: string;
+    }) => string;
+    readonly invalidType: (args: {
+      name: string;
+      accept: string;
+    }) => string;
+    readonly tooLarge: (args: {
+      name: string;
+      maxSize: number;
+    }) => string;
+    readonly tooSmall: (args: {
+      name: string;
+      minSize: number;
+    }) => string;
+    readonly tooMany: (args: {
+      maxFiles: number;
+    }) => string;
+  };
   readonly form: {
     readonly optional: string;
     readonly moreInfo: string;
   };
   readonly dataTable: {
+    /** Visually hidden header for the leading expansion column. */
+    readonly rowDetails: string;
+    /** Accessible name of a collapsed row's expansion button. */
+    readonly expandRow: string;
+    /** Accessible name of an expanded row's collapse button. */
+    readonly collapseRow: string;
     readonly empty: string;
     /** Accessible name of the filter button in a column header, with the name of the column. */
     readonly filter: (args: {
@@ -77,5 +152,44 @@ export interface Messages {
     /** Accessible name of DateRangePicker's preset button group. */
     readonly presetsLabel: string;
   };
+  readonly relativeDateRangePicker: {
+    readonly absolute: string;
+    readonly from: string;
+    readonly to: string;
+    readonly apply: string;
+    readonly search: string;
+    readonly presets: string;
+    readonly none: string;
+    /** Label of the line that names the zone the fields are read and shown in. */
+    readonly browserTime: string;
+    readonly calendar: string;
+    readonly closeCalendar: string;
+    /** Accessible name of the button that opens the calendar for one end, with the label of that end. */
+    readonly openCalendarFor: (args: {
+      label: string;
+    }) => string;
+    /** The same for the button that closes it while it is open. */
+    readonly closeCalendarFor: (args: {
+      label: string;
+    }) => string;
+    /** Said under the fields for an end that cannot be read. */
+    readonly understood: string;
+    /** The reason of an end that cannot be read, with the label of the end in front. */
+    readonly endError: (args: {
+      label: string;
+      reason: string;
+    }) => string;
+    readonly future: string;
+    readonly endBeforeStart: string;
+    readonly tooLong: (args: {
+      days: string;
+    }) => string;
+    /** The words for a range that ends now, such as "Last 5 minutes". */
+    readonly last: (args: {
+      count: string;
+      unit: 'm' | 'h' | 'd' | 'w';
+    }) => string;
+  };
 }
-export type MessagesOverride = { [K in keyof Messages]?: Partial<Messages[K]>; };
+export type ResolvedMessages = { [K in keyof Messages]-?: Required<NonNullable<Messages[K]>>; };
+export type MessagesOverride = { [K in keyof ResolvedMessages]?: Partial<ResolvedMessages[K]>; };

package/dist/config/messages.js

@@ -4,8 +4,33 @@ function deepFreeze(value) {
 	return Object.freeze(value);
 }
 const enUS = deepFreeze({
+	cascader: {
+		placeholder: "Choose an option",
+		clear: "Clear selection",
+		searchHint: "Search includes loaded options only.",
+		results: "Search results",
+		branch: "Has child options",
+		empty: "No options",
+		loading: "Loading options",
+		error: "Could not load options.",
+		retry: "Retry",
+		level: ({ level, label }) => `${label}, level ${level}`
+	},
+	code: {
+		copy: "Copy code",
+		copied: "Copied",
+		copyError: "Copy failed. Try again."
+	},
+	breadcrumb: { label: "Breadcrumb" },
 	button: { loading: "Loading" },
 	spinner: { label: "Loading" },
+	steps: {
+		label: "Steps",
+		wait: "Not started",
+		process: "In progress",
+		finish: "Completed",
+		error: "Error"
+	},
 	numberField: {
 		increment: "Increase",
 		decrement: "Decrease"
@@ -17,14 +42,32 @@ const enUS = deepFreeze({
 		empty: "No results",
 		clear: "Clear",
 		toggle: "Show options",
-		remove: "Remove"
+		remove: "Remove",
+		loading: "Loading options",
+		error: "Could not load options.",
+		retry: "Retry",
+		loadMore: "Load more"
 	},
 	select: { clear: "Clear" },
+	fileUpload: {
+		selectFile: "Select file",
+		selectFiles: "Select files",
+		selectedFiles: "Selected files",
+		progress: "File upload progress",
+		remove: ({ name }) => `Remove ${name}`,
+		invalidType: ({ name, accept }) => `${name}: select a file matching ${accept}.`,
+		tooLarge: ({ name, maxSize }) => `${name}: the file must be ${maxSize} ${maxSize === 1 ? "byte" : "bytes"} or smaller.`,
+		tooSmall: ({ name, minSize }) => `${name}: the file must be at least ${minSize} ${minSize === 1 ? "byte" : "bytes"}.`,
+		tooMany: ({ maxFiles }) => `Select no more than ${maxFiles} files.`
+	},
 	form: {
 		optional: "Optional",
 		moreInfo: "More information"
 	},
 	dataTable: {
+		rowDetails: "Row details",
+		expandRow: "Expand row",
+		collapseRow: "Collapse row",
 		empty: "No Data",
 		filter: ({ label }) => `Filter ${label}`,
 		filterActive: ({ label, count }) => `Filter ${label}, ${count} selected`,
@@ -47,11 +90,63 @@ const enUS = deepFreeze({
 		startTime: "Start time",
 		endTime: "End time",
 		presetsLabel: "Quick ranges"
+	},
+	relativeDateRangePicker: {
+		absolute: "Absolute time range",
+		from: "From",
+		to: "To",
+		apply: "Apply",
+		search: "Search quick ranges",
+		presets: "Quick ranges",
+		none: "No quick range matches",
+		browserTime: "Browser time",
+		calendar: "Select time range",
+		closeCalendar: "Close the calendar",
+		openCalendarFor: ({ label }) => `Open the calendar, ${label}`,
+		closeCalendarFor: ({ label }) => `Close the calendar, ${label}`,
+		understood: "Write a time as now, now-5m (the units are m, h, d and w), or as a date such as 2026-10-01 08:30.",
+		endError: ({ label, reason }) => `${label}: ${reason}`,
+		future: "The range cannot end in the future.",
+		endBeforeStart: "The range must end after it begins.",
+		tooLong: ({ days }) => `The range cannot be longer than ${days} days.`,
+		last: ({ count, unit }) => {
+			return `Last ${count} ${{
+				m: "minute",
+				h: "hour",
+				d: "day",
+				w: "week"
+			}[unit]}${count === "1" ? "" : "s"}`;
+		}
 	}
 });
 const zhCN = deepFreeze({
+	cascader: {
+		placeholder: "请选择",
+		clear: "清除选择",
+		searchHint: "仅搜索已加载的选项。",
+		results: "搜索结果",
+		branch: "有子选项",
+		empty: "暂无选项",
+		loading: "正在加载选项",
+		error: "无法加载选项。",
+		retry: "重试",
+		level: ({ level, label }) => `${label}，第 ${level} 级`
+	},
+	code: {
+		copy: "复制代码",
+		copied: "已复制",
+		copyError: "复制失败，请重试。"
+	},
+	breadcrumb: { label: "面包屑导航" },
 	button: { loading: "加载中" },
 	spinner: { label: "加载中" },
+	steps: {
+		label: "步骤",
+		wait: "未开始",
+		process: "进行中",
+		finish: "已完成",
+		error: "错误"
+	},
 	numberField: {
 		increment: "增加",
 		decrement: "减少"
@@ -63,14 +158,32 @@ const zhCN = deepFreeze({
 		empty: "无匹配结果",
 		clear: "清除",
 		toggle: "显示选项",
-		remove: "移除"
+		remove: "移除",
+		loading: "正在加载选项",
+		error: "无法加载选项。",
+		retry: "重试",
+		loadMore: "加载更多"
 	},
 	select: { clear: "清除" },
+	fileUpload: {
+		selectFile: "选择文件",
+		selectFiles: "选择多个文件",
+		selectedFiles: "已选文件",
+		progress: "文件上传进度",
+		remove: ({ name }) => `移除 ${name}`,
+		invalidType: ({ name, accept }) => `${name}：请选择符合 ${accept} 的文件。`,
+		tooLarge: ({ name, maxSize }) => `${name}：文件不能超过 ${maxSize} 字节。`,
+		tooSmall: ({ name, minSize }) => `${name}：文件不能小于 ${minSize} 字节。`,
+		tooMany: ({ maxFiles }) => `最多选择 ${maxFiles} 个文件。`
+	},
 	form: {
 		optional: "可选",
 		moreInfo: "更多信息"
 	},
 	dataTable: {
+		rowDetails: "行详情",
+		expandRow: "展开行",
+		collapseRow: "收起行",
 		empty: "暂无数据",
 		filter: ({ label }) => `筛选${label}`,
 		filterActive: ({ label, count }) => `筛选${label}，已选 ${count} 项`,
@@ -93,6 +206,31 @@ const zhCN = deepFreeze({
 		startTime: "开始时间",
 		endTime: "结束时间",
 		presetsLabel: "快捷区间"
+	},
+	relativeDateRangePicker: {
+		absolute: "绝对时间范围",
+		from: "开始",
+		to: "结束",
+		apply: "应用",
+		search: "搜索快捷范围",
+		presets: "快捷范围",
+		none: "没有匹配的快捷范围",
+		browserTime: "浏览器时区",
+		calendar: "选择时间范围",
+		closeCalendar: "关闭日历",
+		openCalendarFor: ({ label }) => `打开日历，${label}`,
+		closeCalendarFor: ({ label }) => `关闭日历，${label}`,
+		understood: "时间可写作 now、now-5m（单位为 m、h、d、w），或日期，如 2026-10-01 08:30。",
+		endError: ({ label, reason }) => `${label}：${reason}`,
+		future: "时间范围不能结束于未来。",
+		endBeforeStart: "结束时间必须晚于开始时间。",
+		tooLong: ({ days }) => `时间范围不能超过 ${days} 天。`,
+		last: ({ count, unit }) => `最近 ${count} ${{
+			m: "分钟",
+			h: "小时",
+			d: "天",
+			w: "周"
+		}[unit]}`
 	}
 });
 const dictionaries = {

package/dist/hooks/use-clipboard.d.ts

@@ -0,0 +1,11 @@
+export type ClipboardStatus = 'idle' | 'copying' | 'copied' | 'error';
+export interface UseClipboardOptions {
+  /** How long successful copy feedback lasts, in milliseconds. */
+  timeout?: number;
+}
+export declare function useClipboard({ timeout }?: UseClipboardOptions): {
+  copy: (value: string) => Promise<boolean>;
+  reset: () => void;
+  status: ClipboardStatus;
+  error: Error | null;
+};

package/dist/hooks/use-clipboard.js

@@ -0,0 +1,75 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/hooks/use-clipboard.ts
+function copyWithSelection(value) {
+	const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+	const selection = document.getSelection();
+	const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i)) : [];
+	const input = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement ? active : null;
+	const start = input?.selectionStart;
+	const end = input?.selectionEnd;
+	const textarea = document.createElement("textarea");
+	textarea.value = value;
+	textarea.readOnly = true;
+	textarea.style.cssText = "position:fixed;inset:0;opacity:0;pointer-events:none;";
+	(active?.closest("[role=\"dialog\"], dialog") ?? document.body).append(textarea);
+	try {
+		textarea.select();
+		if (!document.execCommand("copy")) throw new Error("Unable to copy to the clipboard.");
+	} finally {
+		textarea.remove();
+		active?.focus({ preventScroll: true });
+		selection?.removeAllRanges();
+		ranges.forEach((range) => selection?.addRange(range));
+		if (input && start != null && end != null) input.setSelectionRange(start, end);
+	}
+}
+async function writeText(value) {
+	if (navigator.clipboard?.writeText) try {
+		await navigator.clipboard.writeText(value);
+		return;
+	} catch {}
+	copyWithSelection(value);
+}
+function useClipboard({ timeout = 2e3 } = {}) {
+	const [status, setStatus] = useState("idle");
+	const [error, setError] = useState(null);
+	const operation = useRef(0);
+	const timer = useRef(void 0);
+	const reset = useCallback(() => {
+		operation.current += 1;
+		clearTimeout(timer.current);
+		setStatus("idle");
+		setError(null);
+	}, []);
+	useEffect(() => () => {
+		operation.current += 1;
+		clearTimeout(timer.current);
+	}, []);
+	return {
+		copy: useCallback(async (value) => {
+			const current = ++operation.current;
+			clearTimeout(timer.current);
+			setStatus("copying");
+			setError(null);
+			try {
+				await writeText(value);
+			} catch (cause) {
+				if (current !== operation.current) return false;
+				setError(cause instanceof Error ? cause : /* @__PURE__ */ new Error("Unable to copy to the clipboard."));
+				setStatus("error");
+				return false;
+			}
+			if (current !== operation.current) return false;
+			setStatus("copied");
+			timer.current = setTimeout(() => {
+				if (current === operation.current) setStatus("idle");
+			}, timeout);
+			return true;
+		}, [timeout]),
+		reset,
+		status,
+		error
+	};
+}
+export { useClipboard };

package/dist/hooks/use-field-label-with-text.js

@@ -0,0 +1,32 @@
+"use client";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+// src/hooks/use-field-label-with-text.ts
+/**
+* Names a button that sits inside a field so that its accessible name is the field label followed by
+* the button's own visible text.
+*
+* Base UI's Field.Control labels its control with the field label alone, which is right for an input
+* but leaves the visible text of a button out of its accessible name, and WCAG 2.5.3 (Label in Name)
+* and axe's label-content-name-mismatch require that text to be part of it. The id of the label is
+* generated inside Base UI, so it is read back from the label element the browser associates with the
+* button. The label and the button mount in the same commit and the label id lasts as long as the
+* field, so one read is enough.
+*
+* Put `ref` on the button, `textId` on the element that wraps the visible text, and pass
+* `labelledBy` as the button's `aria-labelledby`. Outside a field `labelledBy` is `undefined` and the
+* button is named by its text. A `labelledBy` the caller supplies is returned untouched.
+*/
+function useFieldLabelWithText(ariaLabelledby) {
+	const ref = useRef(null);
+	const textId = useId();
+	const [labelId, setLabelId] = useState();
+	useLayoutEffect(() => {
+		setLabelId(ref.current?.labels?.[0]?.id || void 0);
+	}, []);
+	return {
+		ref,
+		textId,
+		labelledBy: ariaLabelledby ?? (labelId ? `${labelId} ${textId}` : void 0)
+	};
+}
+export { useFieldLabelWithText };

package/dist/index.d.ts

@@ -1,36 +1,49 @@
-import { LabeledField, LabeledFieldLayout, LabeledFieldProps } from "./components/field/labeled-field.js";
-import { NumberField, NumberFieldProps } from "./components/number-field/number-field.js";
-import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./components/select/select.js";
-import { Calendar, CalendarProps } from "./components/calendar/calendar.js";
-import { DatePicker, DatePickerProps, DateRange, DateRangePicker, DateRangePickerProps, DateRangePreset } from "./components/date-picker/date-picker.js";
-import { Button, ButtonProps, buttonVariants } from "./components/button/button.js";
-import { Input, InputProps } from "./components/input/input.js";
-import { Textarea, TextareaProps } from "./components/textarea/textarea.js";
-import { Checkbox, CheckboxProps } from "./components/checkbox/checkbox.js";
-import { Switch, SwitchProps } from "./components/switch/switch.js";
-import { Locale, Messages, MessagesOverride } from "./config/messages.js";
 import { ConfigProvider, ConfigProviderProps, useLocale, useMessages } from "./config/config-provider.js";
+import { Locale, Messages, MessagesOverride } from "./config/messages.js";
+import { Code, CodeProps } from "./components/code/code.js";
+import { CodeBlock, CodeBlockProps } from "./components/code-block/code-block.js";
+import { ClipboardStatus, UseClipboardOptions, useClipboard } from "./hooks/use-clipboard.js";
+import { Anchor, AnchorItem, AnchorProps } from "./components/anchor/anchor.js";
 import { Alert, AlertDescription, AlertDescriptionProps, AlertProps, AlertTitle, AlertTitleProps, alertVariants } from "./components/alert/alert.js";
 import { Avatar, AvatarProps, AvatarSize } from "./components/avatar/avatar.js";
 import { Badge, BadgeColor, BadgeProps, badgeVariants } from "./components/badge/badge.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps } from "./components/breadcrumb/breadcrumb.js";
+import { Button, ButtonProps, buttonVariants } from "./components/button/button.js";
+import { Calendar, CalendarProps } from "./components/calendar/calendar.js";
+import { Cascader, CascaderProps } from "./components/cascader/cascader.js";
+import { Checkbox, CheckboxProps } from "./components/checkbox/checkbox.js";
+import { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps } from "./components/collapsible/collapsible.js";
+import { DatePicker, DatePickerProps, DateRange, DateRangePicker, DateRangePickerProps, DateRangePreset } from "./components/date-picker/date-picker.js";
 import { Combobox, ComboboxChip, ComboboxChipProps, ComboboxChips, ComboboxChipsInput, ComboboxChipsInputProps, ComboboxChipsProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxProps, ComboboxValue, ComboboxValueProps } from "./components/combobox/combobox.js";
 import { DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListLabel, DescriptionListLabelProps, DescriptionListProps, DescriptionListValue, DescriptionListValueProps, descriptionListVariants } from "./components/description-list/description-list.js";
 import { Empty, EmptyContent, EmptyContentProps, EmptyDescription, EmptyDescriptionProps, EmptyHeader, EmptyHeaderProps, EmptyMedia, EmptyMediaProps, EmptyProps, EmptyTitle, EmptyTitleProps, emptyMediaVariants } from "./components/empty/empty.js";
 import { Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, Fieldset, FieldsetLegend, FieldsetLegendProps, FieldsetProps } from "./components/field/field.js";
+import { CascaderLoadRequest, CascaderLoader, CascaderOption, CascaderValue } from "./components/cascader/cascader-data.js";
+import { LabeledField, LabeledFieldLayout, LabeledFieldProps } from "./components/field/labeled-field.js";
+import { FileUpload, FileUploadProps, FileUploadRejection, FileUploadRejectionCode } from "./components/file-upload/file-upload.js";
 import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./components/dialog/dialog.js";
+import { ComboboxLoadRequest, ComboboxPage } from "./components/combobox/combobox-loading.js";
 import { Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from "./components/drawer/drawer.js";
+import { Input, InputProps } from "./components/input/input.js";
 import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps } from "./components/input-group/input-group.js";
 import { Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSub, MenuSubContent, MenuSubContentProps, MenuSubTrigger, MenuSubTriggerProps, MenuTrigger, MenuTriggerProps } from "./components/menu/menu.js";
-import { Pagination, PaginationProps, getPageItems } from "./components/pagination/pagination.js";
+import { NumberField, NumberFieldProps } from "./components/number-field/number-field.js";
+import { Pagination, PaginationByPositionProps, PaginationProps, getPageItems } from "./components/pagination/pagination.js";
 import { Popover, PopoverArrow, PopoverArrowProps, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/popover.js";
 import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./components/radio-group/radio-group.js";
+import { ParsedRelativeTime, RelativeDateRangeMessages, RelativeDateRangeValue, describeRelativeDateRange, normalizeRelativeTime, parseRelativeTime, resolveRelativeDateRange } from "./components/relative-date-range-picker/relative-date-range.js";
+import { RelativeDateRangePicker, RelativeDateRangePickerProps, RelativeDateRangePreset } from "./components/relative-date-range-picker/relative-date-range-picker.js";
+import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./components/select/select.js";
 import { Progress, ProgressProps } from "./components/progress/progress.js";
 import { Separator, SeparatorProps } from "./components/separator/separator.js";
 import { Sidebar, SidebarGroup, SidebarGroupProps, SidebarItem, SidebarItemProps, SidebarProps } from "./components/sidebar/sidebar.js";
 import { Skeleton, SkeletonProps } from "./components/skeleton/skeleton.js";
 import { Spinner, SpinnerProps, spinnerVariants } from "./components/spinner/spinner.js";
+import { Steps, StepsItem, StepsProps, StepsStatus } from "./components/steps/steps.js";
+import { Switch, SwitchProps } from "./components/switch/switch.js";
 import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./components/table/table.js";
 import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./components/tabs/tabs.js";
+import { Textarea, TextareaProps } from "./components/textarea/textarea.js";
 import { ToastActionOptions, ToastOptions, ToastPromiseMessage, Toaster, ToasterProps, toast } from "./components/toast/toast.js";
 import { Tooltip, TooltipContent, TooltipContentProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./components/tooltip/tooltip.js";
-export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, type ComboboxProps, ComboboxValue, type ComboboxValueProps, ConfigProvider, type ConfigProviderProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionList, DescriptionListItem, type DescriptionListItemProps, DescriptionListLabel, type DescriptionListLabelProps, type DescriptionListProps, DescriptionListValue, type DescriptionListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, LabeledField, type LabeledFieldLayout, type LabeledFieldProps, type Locale, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuSub, MenuSubContent, type MenuSubContentProps, MenuSubTrigger, type MenuSubTriggerProps, MenuTrigger, type MenuTriggerProps, type Messages, type MessagesOverride, NumberField, type NumberFieldProps, Pagination, type PaginationProps, Popover, PopoverArrow, type PopoverArrowProps, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastActionOptions, type ToastOptions, type ToastPromiseMessage, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };
+export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, Anchor, type AnchorItem, type AnchorProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Calendar, type CalendarProps, Cascader, type CascaderLoadRequest, type CascaderLoader, type CascaderOption, type CascaderProps, type CascaderValue, Checkbox, type CheckboxProps, type ClipboardStatus, Code, CodeBlock, type CodeBlockProps, type CodeProps, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, type ComboboxLoadRequest, type ComboboxPage, type ComboboxProps, ComboboxValue, type ComboboxValueProps, ConfigProvider, type ConfigProviderProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionList, DescriptionListItem, type DescriptionListItemProps, DescriptionListLabel, type DescriptionListLabelProps, type DescriptionListProps, DescriptionListValue, type DescriptionListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, FileUpload, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, LabeledField, type LabeledFieldLayout, type LabeledFieldProps, type Locale, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuSub, MenuSubContent, type MenuSubContentProps, MenuSubTrigger, type MenuSubTriggerProps, MenuTrigger, type MenuTriggerProps, type Messages, type MessagesOverride, NumberField, type NumberFieldProps, Pagination, type PaginationByPositionProps, type PaginationProps, type ParsedRelativeTime, Popover, PopoverArrow, type PopoverArrowProps, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RelativeDateRangeMessages, RelativeDateRangePicker, type RelativeDateRangePickerProps, type RelativeDateRangePreset, type RelativeDateRangeValue, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Steps, type StepsItem, type StepsProps, type StepsStatus, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastActionOptions, type ToastOptions, type ToastPromiseMessage, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, type UseClipboardOptions, alertVariants, badgeVariants, buttonVariants, describeRelativeDateRange, descriptionListVariants, emptyMediaVariants, getPageItems, normalizeRelativeTime, parseRelativeTime, resolveRelativeDateRange, spinnerVariants, toast, useClipboard, useLocale, useMessages };

package/dist/index.js

@@ -1,35 +1,46 @@
 import { ConfigProvider, useLocale, useMessages } from "./config/config-provider.js";
+import { Code } from "./components/code/code.js";
+import { CodeBlock } from "./components/code-block/code-block.js";
+import { useClipboard } from "./hooks/use-clipboard.js";
+import { Anchor } from "./components/anchor/anchor.js";
 import { Alert, AlertDescription, AlertTitle, alertVariants } from "./components/alert/alert.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { Badge, badgeVariants } from "./components/badge/badge.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb/breadcrumb.js";
 import { Button, buttonVariants } from "./components/button/button.js";
 import { Calendar } from "./components/calendar/calendar.js";
+import { Cascader } from "./components/cascader/cascader.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
-import { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/collapsible/collapsible.js";
 import { DatePicker, DateRangePicker } from "./components/date-picker/date-picker.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue } from "./components/combobox/combobox.js";
 import { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants } from "./components/description-list/description-list.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants } from "./components/empty/empty.js";
 import { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "./components/field/field.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
 import { LabeledField } from "./components/field/labeled-field.js";
+import { FileUpload } from "./components/file-upload/file-upload.js";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./components/dialog/dialog.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./components/drawer/drawer.js";
 import { Input } from "./components/input/input.js";
 import { InputGroup, InputGroupAddon } from "./components/input-group/input-group.js";
 import { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger } from "./components/menu/menu.js";
 import { NumberField } from "./components/number-field/number-field.js";
-import { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select/select.js";
 import { Pagination, getPageItems } from "./components/pagination/pagination.js";
+import { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
 import { RadioGroup, RadioGroupItem } from "./components/radio-group/radio-group.js";
+import { describeRelativeDateRange, normalizeRelativeTime, parseRelativeTime, resolveRelativeDateRange } from "./components/relative-date-range-picker/relative-date-range.js";
+import { RelativeDateRangePicker } from "./components/relative-date-range-picker/relative-date-range-picker.js";
+import { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from "./components/select/select.js";
 import { Progress } from "./components/progress/progress.js";
 import { Separator } from "./components/separator/separator.js";
 import { Sidebar, SidebarGroup, SidebarItem } from "./components/sidebar/sidebar.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Spinner, spinnerVariants } from "./components/spinner/spinner.js";
+import { Steps } from "./components/steps/steps.js";
 import { Switch } from "./components/switch/switch.js";
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./components/table/table.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs/tabs.js";
 import { Textarea } from "./components/textarea/textarea.js";
 import { Toaster, toast } from "./components/toast/toast.js";
-export { Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Calendar, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue, ConfigProvider, DatePicker, DateRangePicker, DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, Input, InputGroup, InputGroupAddon, LabeledField, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, NumberField, Pagination, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarGroup, SidebarItem, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
+export { Alert, AlertDescription, AlertTitle, Anchor, Avatar, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Cascader, Checkbox, Code, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue, ConfigProvider, DatePicker, DateRangePicker, DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, FileUpload, Input, InputGroup, InputGroupAddon, LabeledField, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, NumberField, Pagination, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RelativeDateRangePicker, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarGroup, SidebarItem, Skeleton, Spinner, Steps, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, describeRelativeDateRange, descriptionListVariants, emptyMediaVariants, getPageItems, normalizeRelativeTime, parseRelativeTime, resolveRelativeDateRange, spinnerVariants, toast, useClipboard, useLocale, useMessages };

package/dist/tokens/index.d.ts

@@ -1,5 +1,5 @@
 import { FAMILIES, STEPS } from "./types.js";
+import { AA, ContrastPair, badgePairs, semanticPairs } from "./contrast.js";
 import { palette } from "./palette.js";
 import { themes } from "./semantic.js";
-import { AA, ContrastPair, badgePairs, semanticPairs } from "./contrast.js";
 export { AA, type ContrastPair, FAMILIES, STEPS, badgePairs, palette, semanticPairs, themes };

package/dist/tokens/index.js

@@ -1,5 +1,5 @@
 import { FAMILIES, STEPS } from "./types.js";
+import { AA, badgePairs, semanticPairs } from "./contrast.js";
 import { palette } from "./palette.js";
 import { themes } from "./semantic.js";
-import { AA, badgePairs, semanticPairs } from "./contrast.js";
 export { AA, FAMILIES, STEPS, badgePairs, palette, semanticPairs, themes };