@api7/ui-components 0.6.0 → 0.8.0

package/dist/components/relative-date-range-picker/relative-date-range-picker.js

@@ -0,0 +1,245 @@
+"use client";
+import { describeRelativeDateRange, normalizeRelativeTime, parseRelativeTime, resolveRelativeDateRange } from "./relative-date-range.js";
+import { Button } from "../button/button.js";
+import { Calendar } from "../calendar/calendar.js";
+import { InputGroup, InputGroupAddon } from "../input-group/input-group.js";
+import { Input } from "../input/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { useMessages } from "../../config/config-provider.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon, SearchIcon, XIcon } from "lucide-react";
+// src/components/relative-date-range-picker/relative-date-range-picker.tsx
+const CALENDAR_YEARS = 5;
+const pad = (n) => String(n).padStart(2, "0");
+const localText = (seconds) => {
+	const d = /* @__PURE__ */ new Date(seconds * 1e3);
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+};
+const zoneName = () => new Intl.DateTimeFormat().resolvedOptions().timeZone;
+const zoneOffset = () => {
+	const minutes = -(/* @__PURE__ */ new Date()).getTimezoneOffset();
+	return `UTC${minutes < 0 ? "-" : "+"}${pad(Math.floor(Math.abs(minutes) / 60))}:${pad(Math.abs(minutes) % 60)}`;
+};
+const typed = (end) => {
+	const read = parseRelativeTime(end);
+	return "error" in read || read.kind === "now" ? end : localText(read.seconds);
+};
+function RelativeDateRangePicker({ value, onChange, presets, maxSpanSeconds, now, className }) {
+	const t = useMessages().relativeDateRangePicker;
+	const [open, setOpen] = useState(false);
+	const [from, setFrom] = useState(value.from);
+	const [to, setTo] = useState(value.to);
+	const [problem, setProblem] = useState(null);
+	const [calendarOpen, setCalendarOpen] = useState(false);
+	const [anchor, setAnchor] = useState(null);
+	const [query, setQuery] = useState("");
+	const apply = (range) => {
+		const resolved = resolveRelativeDateRange(range, now(), maxSpanSeconds, t);
+		if ("error" in resolved) {
+			setProblem(resolved.error);
+			return;
+		}
+		onChange({
+			from: normalizeRelativeTime(range.from),
+			to: normalizeRelativeTime(range.to)
+		});
+		setOpen(false);
+	};
+	const show = (next) => {
+		if (next) {
+			setFrom(typed(value.from));
+			setTo(typed(value.to));
+			setProblem(null);
+			setCalendarOpen(false);
+			setAnchor(null);
+			setQuery("");
+		}
+		setOpen(next);
+	};
+	const edit = (end, text) => {
+		(end === "start" ? setFrom : setTo)(text);
+		setProblem(null);
+	};
+	const day = (text) => {
+		const read = parseRelativeTime(text);
+		if ("error" in read) return void 0;
+		return /* @__PURE__ */ new Date((read.kind === "now" ? now() - read.offsetSeconds : read.seconds) * 1e3);
+	};
+	const onDay = (end, date) => {
+		const read = parseRelativeTime(end === "start" ? from : to);
+		const clock = "error" in read || read.kind !== "absolute" ? null : /* @__PURE__ */ new Date(read.seconds * 1e3);
+		const edge = new Date(date);
+		const [h, m, sec] = clock ? [
+			clock.getHours(),
+			clock.getMinutes(),
+			clock.getSeconds()
+		] : end === "start" ? [
+			0,
+			0,
+			0
+		] : [
+			23,
+			59,
+			59
+		];
+		edge.setHours(h, m, sec, 0);
+		return end === "end" && edge.getTime() / 1e3 > now() ? "now" : localText(edge.getTime() / 1e3);
+	};
+	const pickDay = (date) => {
+		const [first, last] = anchor && anchor.getTime() < date.getTime() ? [anchor, date] : anchor ? [date, anchor] : [date, date];
+		setFrom(onDay("start", first));
+		setTo(onDay("end", last));
+		setProblem(null);
+		setAnchor(anchor ? null : date);
+	};
+	const shown = presets.filter((preset) => preset.label.toLowerCase().includes(query.trim().toLowerCase()));
+	const current = {
+		from: normalizeRelativeTime(value.from),
+		to: normalizeRelativeTime(value.to)
+	};
+	const field = (end, label) => /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: `relative-date-range-${end}`,
+			className: "text-sm text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(Input, {
+			id: `relative-date-range-${end}`,
+			"aria-label": label,
+			value: end === "start" ? from : to,
+			placeholder: end === "start" ? "now-5m" : "now",
+			onValueChange: (text) => edit(end, text)
+		}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			"aria-label": calendarOpen ? t.closeCalendarFor({ label }) : t.openCalendarFor({ label }),
+			"aria-expanded": calendarOpen,
+			onClick: () => setCalendarOpen(!calendarOpen),
+			children: /* @__PURE__ */ jsx(CalendarIcon, {
+				"aria-hidden": true,
+				className: "size-4"
+			})
+		}) })] })]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: show,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				className
+			}),
+			children: [/* @__PURE__ */ jsx(CalendarIcon, {
+				"aria-hidden": true,
+				className: "size-4 shrink-0 text-muted-foreground"
+			}), describeRelativeDateRange(value, localText, t)]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "end",
+			className: "w-auto",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-3",
+				children: [
+					calendarOpen && /* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 flex-col gap-2 border-r border-border pr-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium",
+								children: t.calendar
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon",
+								"aria-label": t.closeCalendar,
+								onClick: () => setCalendarOpen(false),
+								children: /* @__PURE__ */ jsx(XIcon, {
+									"aria-hidden": true,
+									className: "size-4"
+								})
+							})]
+						}), /* @__PURE__ */ jsx(Calendar, {
+							mode: "range",
+							selected: {
+								from: day(from),
+								to: day(to)
+							},
+							onDayClick: pickDay,
+							disabled: { after: /* @__PURE__ */ new Date(now() * 1e3) },
+							defaultMonth: day(to),
+							captionLayout: "dropdown",
+							startMonth: new Date((/* @__PURE__ */ new Date(now() * 1e3)).getFullYear() - CALENDAR_YEARS, 0),
+							endMonth: /* @__PURE__ */ new Date(now() * 1e3),
+							classNames: { caption_label: "[&_svg]:hidden" }
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex w-72 shrink-0 flex-col gap-3",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium",
+								children: t.absolute
+							}),
+							field("start", t.from),
+							field("end", t.to),
+							problem && /* @__PURE__ */ jsx("p", {
+								role: "alert",
+								className: "text-sm text-destructive",
+								children: problem
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								className: "self-start",
+								onClick: () => apply({
+									from,
+									to
+								}),
+								children: t.apply
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex w-56 shrink-0 flex-col gap-2 border-l border-border pl-3",
+						children: [/* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {
+							"aria-hidden": true,
+							className: "size-4"
+						}) }), /* @__PURE__ */ jsx(Input, {
+							"aria-label": t.search,
+							placeholder: t.search,
+							value: query,
+							onValueChange: setQuery
+						})] }), /* @__PURE__ */ jsxs("ul", {
+							"aria-label": t.presets,
+							className: "flex max-h-64 flex-col gap-1 overflow-y-auto",
+							children: [shown.map((preset) => {
+								const selected = current.from === normalizeRelativeTime(preset.from) && current.to === normalizeRelativeTime(preset.to);
+								return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-pressed": selected,
+									onClick: () => apply(preset),
+									className: `h-8 w-full rounded-sm px-3 text-left text-sm whitespace-nowrap outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/40 ${selected ? "bg-accent font-medium text-primary-text" : "text-foreground"}`,
+									children: preset.label
+								}) }, preset.label);
+							}), shown.length === 0 && /* @__PURE__ */ jsx("li", {
+								className: "px-3 py-2 text-sm text-muted-foreground",
+								children: t.none
+							})]
+						})]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center justify-between gap-3 border-t border-border pt-3 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					t.browserTime,
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "ml-1",
+						children: zoneName()
+					})
+				] }), /* @__PURE__ */ jsx("span", {
+					className: "rounded-sm bg-muted px-2 py-1",
+					children: zoneOffset()
+				})]
+			})]
+		})]
+	});
+}
+export { RelativeDateRangePicker };

package/dist/components/relative-date-range-picker/relative-date-range.d.ts

@@ -0,0 +1,26 @@
+import { Messages } from "../../config/messages.js";
+export type RelativeDateRangeMessages = Messages['relativeDateRangePicker'];
+export type RelativeDateRangeValue = {
+  from: string;
+  to: string;
+};
+export type ParsedRelativeTime = {
+  kind: 'now';
+  offsetSeconds: number;
+} | {
+  kind: 'absolute';
+  seconds: number;
+};
+export declare function parseRelativeTime(text: string, messages?: RelativeDateRangeMessages): ParsedRelativeTime | {
+  error: string;
+};
+export declare function normalizeRelativeTime(text: string, messages?: RelativeDateRangeMessages): string | {
+  error: string;
+};
+export declare function resolveRelativeDateRange(value: RelativeDateRangeValue, nowSeconds: number, maxSpanSeconds: number, messages?: RelativeDateRangeMessages): {
+  start: number;
+  end: number;
+} | {
+  error: string;
+};
+export declare function describeRelativeDateRange(value: RelativeDateRangeValue, formatMoment: (seconds: number) => string, messages?: RelativeDateRangeMessages): string;

package/dist/components/relative-date-range-picker/relative-date-range.js

@@ -0,0 +1,109 @@
+import { enUS } from "../../config/messages.js";
+// src/components/relative-date-range-picker/relative-date-range.ts
+const MIN_YEAR = 1970;
+const UNIT_SECONDS = {
+	m: 60,
+	h: 3600,
+	d: 86400,
+	w: 604800
+};
+const FUTURE_SLACK_SECONDS = 60;
+const NOW = /^now(?:\s*-\s*(\d+)\s*([mhdw]))?$/i;
+const WITH_ZONE = /^(\d{4})-(\d\d)-(\d\d)T(\d\d):(\d\d)(?::(\d\d))?(Z|[+-](?:[01]\d|2[0-3]):[0-5]\d)$/i;
+const LOCAL = /^(\d{4})-(\d\d)-(\d\d)(?:[ T](\d\d):(\d\d)(?::(\d\d))?)?$/;
+function parseRelativeTime(text, messages = enUS.relativeDateRangePicker) {
+	const fail = () => ({ error: messages.understood });
+	const value = text.trim();
+	const now = NOW.exec(value);
+	if (now) {
+		if (now[1] === void 0) return {
+			kind: "now",
+			offsetSeconds: 0
+		};
+		const count = Number(now[1]);
+		return count > 0 ? {
+			kind: "now",
+			offsetSeconds: count * UNIT_SECONDS[now[2].toLowerCase()]
+		} : fail();
+	}
+	const zoned = WITH_ZONE.exec(value);
+	if (zoned) {
+		const [, y, mo, d, h, mi, s, zone] = zoned;
+		if (Number(y) < MIN_YEAR) return fail();
+		const calendar = Date.UTC(Number(y), Number(mo) - 1, Number(d), Number(h), Number(mi), Number(s ?? 0));
+		const check = new Date(calendar);
+		if (check.getUTCMonth() !== Number(mo) - 1 || check.getUTCDate() !== Number(d) || Number(h) > 23 || Number(mi) > 59 || Number(s ?? 0) > 59) return fail();
+		return {
+			kind: "absolute",
+			seconds: (calendar - (zone.toUpperCase() === "Z" ? 0 : (zone[0] === "-" ? -1 : 1) * (Number(zone.slice(1, 3)) * 60 + Number(zone.slice(4, 6))) * 6e4)) / 1e3
+		};
+	}
+	const local = LOCAL.exec(value);
+	if (local) {
+		const [, y, mo, d, h = "0", mi = "0", s = "0"] = local;
+		if (Number(y) < MIN_YEAR) return fail();
+		const date = new Date(Number(y), Number(mo) - 1, Number(d), Number(h), Number(mi), Number(s));
+		if (date.getMonth() !== Number(mo) - 1 || date.getDate() !== Number(d) || Number(h) > 23 || Number(mi) > 59 || Number(s) > 59) return fail();
+		return {
+			kind: "absolute",
+			seconds: date.getTime() / 1e3
+		};
+	}
+	return fail();
+}
+function offsetText(seconds) {
+	const unit = [
+		"w",
+		"d",
+		"h",
+		"m"
+	].find((one) => seconds % UNIT_SECONDS[one] === 0);
+	return `${seconds / UNIT_SECONDS[unit]}${unit}`;
+}
+const isoUtc = (seconds) => (/* @__PURE__ */ new Date(seconds * 1e3)).toISOString().replace(".000Z", "Z");
+function normalizeRelativeTime(text, messages = enUS.relativeDateRangePicker) {
+	const read = parseRelativeTime(text, messages);
+	if ("error" in read) return read;
+	if (read.kind === "now") return read.offsetSeconds === 0 ? "now" : `now-${offsetText(read.offsetSeconds)}`;
+	return isoUtc(read.seconds);
+}
+function resolveRelativeDateRange(value, nowSeconds, maxSpanSeconds, messages = enUS.relativeDateRangePicker) {
+	const from = parseRelativeTime(value.from, messages);
+	if ("error" in from) return { error: messages.endError({
+		label: messages.from,
+		reason: from.error
+	}) };
+	const to = parseRelativeTime(value.to, messages);
+	if ("error" in to) return { error: messages.endError({
+		label: messages.to,
+		reason: to.error
+	}) };
+	const at = (time) => time.kind === "now" ? nowSeconds - time.offsetSeconds : time.seconds;
+	const start = at(from);
+	const end = at(to);
+	if (end > nowSeconds + FUTURE_SLACK_SECONDS) return { error: messages.future };
+	if (end <= start) return { error: messages.endBeforeStart };
+	if (end - start > maxSpanSeconds) return { error: messages.tooLong({ days: String(maxSpanSeconds / 86400) }) };
+	return {
+		start,
+		end
+	};
+}
+function describeRelativeDateRange(value, formatMoment, messages = enUS.relativeDateRangePicker) {
+	const from = normalizeRelativeTime(value.from, messages);
+	const to = normalizeRelativeTime(value.to, messages);
+	if (typeof from === "string" && typeof to === "string" && to === "now" && from.startsWith("now-")) {
+		const text = offsetText(parseRelativeTime(from, messages).offsetSeconds);
+		return messages.last({
+			count: text.slice(0, -1),
+			unit: text.slice(-1)
+		});
+	}
+	const show = (end, original) => {
+		if (typeof end !== "string") return original;
+		const read = parseRelativeTime(end, messages);
+		return "error" in read || read.kind === "now" ? end : formatMoment(read.seconds);
+	};
+	return `${show(from, value.from)} ~ ${show(to, value.to)}`;
+}
+export { describeRelativeDateRange, normalizeRelativeTime, parseRelativeTime, resolveRelativeDateRange };

package/dist/components/select/select.js

@@ -1,8 +1,8 @@
 "use client";
 import { useMessages } from "../../config/config-provider.js";
 import { cn } from "../../lib/cn.js";
-import { listItemClassName, listboxClassName, popupLayerClassName } from "../../lib/popup.js";
 import { controlFocus, controlSurface } from "../../lib/control.js";
+import { listItemClassName, listboxClassName, popupLayerClassName } from "../../lib/popup.js";
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";

package/dist/components/sidebar/sidebar.js

@@ -1,7 +1,7 @@
 "use client";
-import { cn } from "../../lib/cn.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
 import { Separator } from "../separator/separator.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { cn } from "../../lib/cn.js";
 import { cloneElement, useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/components/sidebar/sidebar.tsx

package/dist/components/steps/steps.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, Key, ReactNode } from "react";
+export type StepsStatus = 'wait' | 'process' | 'finish' | 'error';
+export interface StepsItem {
+  key?: Key;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  status?: StepsStatus;
+  disabled?: boolean;
+}
+export interface StepsProps extends Omit<ComponentProps<'ol'>, 'children'> {
+  items: readonly StepsItem[];
+  /** Zero-based active step. Set to items.length to mark every step complete. */
+  current?: number;
+  /** Status of the current step. An item's status takes precedence. */
+  status?: StepsStatus;
+  orientation?: 'horizontal' | 'vertical';
+  /** Enables step buttons. The caller decides when to update current. */
+  onStepChange?: (index: number) => void;
+  disabled?: boolean;
+}
+declare function Steps({ items, current, status, orientation, onStepChange, disabled, className, ...props }: StepsProps): import("react").JSX.Element;
+export { Steps };

package/dist/components/steps/steps.js

@@ -0,0 +1,86 @@
+"use client";
+import { useMessages } from "../../config/config-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+// src/components/steps/steps.tsx
+function Steps({ items, current = 0, status = "process", orientation = "horizontal", onStepChange, disabled = false, className, ...props }) {
+	const messages = useMessages();
+	const id = useId();
+	const active = Number.isFinite(current) ? Math.min(items.length, Math.max(0, Math.floor(current))) : 0;
+	const vertical = orientation === "vertical";
+	return /* @__PURE__ */ jsx("ol", {
+		"aria-label": messages.steps.label,
+		role: "list",
+		className: cn("m-0 flex list-none p-1 text-sm", vertical && "flex-col", className),
+		...props,
+		"data-slot": "steps",
+		"data-orientation": orientation,
+		children: items.map((item, index) => {
+			const itemStatus = item.status ?? (index < active ? "finish" : index === active ? status : "wait");
+			const isCurrent = index === active;
+			const isDisabled = disabled || item.disabled;
+			const titleId = `${id}-${index}-title`;
+			const statusId = `${id}-${index}-status`;
+			const descriptionId = `${id}-${index}-description`;
+			const hasDescription = item.description != null;
+			const contentClassName = cn("relative flex min-w-0 gap-2", vertical ? "items-start text-start" : "flex-col items-center text-center", itemStatus === "process" ? "text-primary-text" : itemStatus === "error" ? "text-destructive-text" : itemStatus === "finish" ? "text-foreground" : "text-muted-foreground");
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("relative flex size-6 shrink-0 items-center justify-center rounded-full border-2 border-border bg-background text-muted-foreground [&>svg]:size-3.5", (itemStatus === "process" || itemStatus === "finish") && "border-primary-text bg-info-subtle text-primary-text", itemStatus === "process" && "ring-4 ring-info-subtle", itemStatus === "error" && "border-destructive-text bg-destructive-subtle text-destructive-text"),
+				"data-slot": "steps-indicator",
+				children: item.icon ?? (itemStatus === "finish" ? /* @__PURE__ */ jsx(Check, {}) : itemStatus === "error" ? /* @__PURE__ */ jsx(X, {}) : /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-current" }))
+			}), /* @__PURE__ */ jsxs("span", {
+				className: cn("min-w-0 break-words", vertical ? "pt-0.5" : "w-full px-2"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						id: titleId,
+						className: cn("block", isCurrent && "font-medium"),
+						"data-slot": "steps-title",
+						children: item.title
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: statusId,
+						className: "sr-only",
+						children: messages.steps[itemStatus]
+					}),
+					hasDescription && /* @__PURE__ */ jsx("span", {
+						id: descriptionId,
+						className: "mt-1 block text-xs text-muted-foreground",
+						"data-slot": "steps-description",
+						children: item.description
+					})
+				]
+			})] });
+			return /* @__PURE__ */ jsxs("li", {
+				className: cn("relative min-w-0", vertical ? "pb-6 last:pb-0" : "flex-1"),
+				"aria-current": !onStepChange && isCurrent ? "step" : void 0,
+				"data-slot": "steps-item",
+				"data-status": itemStatus,
+				"data-disabled": isDisabled || void 0,
+				children: [index < items.length - 1 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn("absolute bg-border", vertical ? "start-3 top-3 h-full w-0.5 -translate-x-1/2 rtl:translate-x-1/2" : "start-1/2 top-3 h-0.5 w-full -translate-y-1/2", itemStatus === "finish" && "bg-primary"),
+					"data-slot": "steps-separator"
+				}), onStepChange ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cn(contentClassName, "w-full rounded-md border-0 bg-transparent p-0 outline-none enabled:cursor-pointer enabled:hover:underline focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"),
+					disabled: isDisabled,
+					"aria-current": isCurrent ? "step" : void 0,
+					"aria-labelledby": titleId,
+					"aria-describedby": [statusId, hasDescription && descriptionId].filter(Boolean).join(" "),
+					onClick: () => {
+						if (!isCurrent) onStepChange(index);
+					},
+					"data-slot": "steps-trigger",
+					children: content
+				}) : /* @__PURE__ */ jsx("div", {
+					className: contentClassName,
+					children: content
+				})]
+			}, item.key ?? index);
+		})
+	});
+}
+export { Steps };

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

@@ -2,8 +2,9 @@ import { ComponentProps } from "react";
 export type TableProps = Omit<ComponentProps<'table'>, 'className'> & {
   className?: string;
   containerClassName?: string;
+  containerRef?: ComponentProps<'div'>['ref'];
 };
-declare function Table({ className, containerClassName, ...props }: TableProps): import("react").JSX.Element;
+declare function Table({ className, containerClassName, containerRef, ...props }: TableProps): import("react").JSX.Element;
 export type TableHeaderProps = Omit<ComponentProps<'thead'>, 'className'> & {
   className?: string;
 };

package/dist/components/table/table.js

@@ -1,8 +1,9 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 // src/components/table/table.tsx
-function Table({ className, containerClassName, ...props }) {
+function Table({ className, containerClassName, containerRef, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
 		"data-slot": "table-container",
 		className: cn("relative w-full overflow-x-auto", containerClassName),
 		children: /* @__PURE__ */ jsx("table", {

package/dist/components/toast/toast.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { CircleCheck } from "lucide-react";
+import "lucide-react";
 export type ToastActionOptions = React.ComponentPropsWithoutRef<'button'>;
 export interface ToastOptions {
   description?: ReactNode;

package/dist/components/toast/toast.js

@@ -1,7 +1,7 @@
 "use client";
+import { buttonVariants } from "../button/button.js";
 import { useMessages } from "../../config/config-provider.js";
 import { cn } from "../../lib/cn.js";
-import { buttonVariants } from "../button/button.js";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlert, CircleCheck, Info, LoaderCircle, TriangleAlert, X } from "lucide-react";

package/dist/config/config-provider.d.ts

@@ -1,4 +1,4 @@
-import { Locale, Messages, MessagesOverride } from "./messages.js";
+import { Locale, MessagesOverride, ResolvedMessages } from "./messages.js";
 import { ReactNode } from "react";
 export interface ConfigProviderProps {
   locale?: Locale;
@@ -8,5 +8,5 @@ export interface ConfigProviderProps {
 }
 /** Global configuration entry for the library; currently carries the locale and built-in message overrides used by components. */
 export declare function ConfigProvider({ locale, messages, children }: ConfigProviderProps): import("react").JSX.Element;
-export declare function useMessages(): Messages;
+export declare function useMessages(): ResolvedMessages;
 export declare function useLocale(): Locale;