@jfrader/ui 0.3.0 → 0.5.0

package/dist/tree-view-C2liIxqy.js

@@ -0,0 +1,360 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./disclosure-caret-C5T3fcl6.js";
+import { t as r } from "./focus-ring-BK5W5_NY.js";
+import { n as i, r as a } from "./media-8yrN85VT.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { useEffect as c, useId as ee, useLayoutEffect as te, useMemo as ne, useRef as l, useState as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+//#region src/components/tree-view/tree-view.tsx
+var re = 500, ie = {
+	loading: (e) => `Loading ${e}…`,
+	error: (e) => `Could not load ${e}. Press Enter to retry.`,
+	empty: "No items"
+}, ae = e({
+	minInlineSize: 0,
+	background: d.color.surface,
+	color: d.color.text,
+	borderRadius: d.radius.md,
+	fontFamily: d.font.sans,
+	fontSize: d.textSize.sm,
+	lineHeight: d.lineHeight.base
+}), oe = e({
+	listStyle: "none",
+	margin: 0,
+	padding: d.space[1],
+	overflowX: "auto",
+	"&:focus-visible": r
+}), se = e({
+	outline: "none",
+	display: "flex",
+	alignItems: "center",
+	flex: 1,
+	minInlineSize: 0,
+	minBlockSize: d.space[8]
+}), ce = e({
+	display: "flex",
+	alignItems: "center",
+	gap: d.space[2],
+	minBlockSize: d.space[8],
+	paddingInline: d.space[2],
+	paddingInlineStart: `calc(var(--tree-level) * ${d.space[4]} + ${d.space[2]})`,
+	borderInlineStart: "2px solid transparent",
+	borderRadius: d.radius.sm,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: d.motion.duration.fast,
+	transitionTimingFunction: d.motion.easeStandard,
+	"&:hover": { background: d.color.surfaceHover },
+	"&:has(> [aria-selected=\"true\"])": {
+		borderInlineStartColor: d.color.accentText,
+		background: d.color.surfaceHover
+	},
+	"&:has(> [aria-disabled=\"true\"])": {
+		color: d.color.textMuted,
+		cursor: "default"
+	},
+	"&:has(> [role=\"treeitem\"]:focus-visible)": r,
+	[a]: { transitionDuration: "0s" },
+	[i]: {
+		borderInlineStartColor: "Canvas",
+		"&:has(> [aria-selected=\"true\"])": { borderInlineStartColor: "Highlight" }
+	}
+}), le = e({
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
+}), ue = e({
+	display: "inline-flex",
+	flexShrink: 0,
+	alignItems: "center",
+	justifyContent: "center"
+}), de = e({
+	display: "inline-flex",
+	flexShrink: 0,
+	inlineSize: d.space[8],
+	blockSize: d.space[8],
+	alignItems: "center",
+	justifyContent: "center",
+	color: "currentColor",
+	"&[data-branch=\"true\"]::after": {
+		...n,
+		transitionDuration: d.motion.duration.fast
+	},
+	"&[data-open=\"true\"]::after": { transform: "rotate(90deg)" },
+	"&:dir(rtl)[data-open=\"true\"]::after": { transform: "rotate(-90deg)" },
+	[a]: { "&[data-branch=\"true\"]::after": { transitionDuration: "0s" } }
+}), fe = e({
+	listStyle: "none",
+	margin: 0,
+	padding: 0,
+	position: "relative",
+	"&::before": {
+		content: "\"\"",
+		position: "absolute",
+		insetBlock: 0,
+		insetInlineStart: `calc(var(--tree-level) * ${d.space[4]})`,
+		borderInlineStart: `1px solid ${d.color.border}`,
+		pointerEvents: "none"
+	}
+}), m = e({
+	margin: 0,
+	paddingInline: d.space[2],
+	"&:empty": { padding: 0 }
+});
+function h({ nodes: e, value: n, defaultValue: r = null, onValueChange: i, open: a, defaultOpen: d = [], onOpenChange: h, loadChildren: g, onLoadError: pe, label: me = "Tree", messages: he, empty: _, treeRef: v, locale: y, slotProps: b, ref: ge, className: _e, sx: ve, onKeyDown: ye, onClick: be, onBlur: xe, "aria-label": Se, "aria-labelledby": x, "aria-describedby": Ce, ...we }) {
+	let S = ee(), C = l(null), w = l(/* @__PURE__ */ new Map()), T = l(null), E = l(/* @__PURE__ */ new Map()), D = l(/* @__PURE__ */ new Map()), [Te, Ee] = u(/* @__PURE__ */ new Map()), [O, k] = u(/* @__PURE__ */ new Set()), [A, j] = u(/* @__PURE__ */ new Set()), [M, De] = o(n, r, i), [N = [], P] = o(a, d, h), [F, I] = u(n ?? r), L = l({
+		text: "",
+		time: 0
+	}), R = ne(() => new Intl.Collator(y, {
+		usage: "search",
+		sensitivity: "base"
+	}), [y]), z = {
+		...ie,
+		...he
+	}, B = /* @__PURE__ */ new Map(), V = [], H = new Set(N), U = (e, t, n = 1, r = !0) => {
+		e.forEach((i, a) => {
+			let o = i.children ?? Te.get(i.id), s = {
+				node: i,
+				children: o,
+				parent: t,
+				level: n,
+				position: a + 1,
+				size: e.length,
+				branch: o === void 0 ? i.hasChildren === !0 : o.length > 0
+			};
+			B.set(i.id, s), r && V.push(s), o && U(o, i.id, n + 1, r && H.has(i.id));
+		});
+	};
+	U(e);
+	let W = V.filter((e) => !e.node.disabled), G = (e) => {
+		let t = /* @__PURE__ */ new Set();
+		for (; e != null && !t.has(e);) {
+			if (t.add(e), W.some((t) => t.node.id === e)) return e;
+			e = B.get(e)?.parent ?? E.current.get(e)?.parent;
+		}
+		return W[0]?.node.id ?? null;
+	}, K = G(F ?? M), q = (e) => {
+		I(e);
+		let t = e === null ? C.current : w.current.get(e);
+		t?.focus(), t?.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	};
+	te(() => {
+		if (F !== K) {
+			let e = T.current, t = C.current?.ownerDocument, n = e && t && (t.activeElement === e || !e.isConnected && t.activeElement === t.body);
+			I(K), n && q(K);
+		}
+		E.current = B;
+	}), c(() => () => {
+		for (let e of D.current.values()) e.controller.abort();
+		D.current.clear();
+	}, []), c(() => {
+		let e = new Map(V.filter((e) => H.has(e.node.id) && e.branch && !e.node.disabled && e.children === void 0).map((e) => [e.node.id, e.node]));
+		for (let [t, n] of D.current) (!e.has(t) || !g) && (n.controller.abort(), D.current.delete(t), j((e) => {
+			let n = new Set(e);
+			return n.delete(t), n;
+		}));
+		if (g) for (let [t, n] of e) {
+			if (D.current.has(t) || O.has(t)) continue;
+			let e = { controller: new AbortController() };
+			D.current.set(t, e), j((e) => new Set(e).add(t)), Promise.resolve().then(() => {
+				if (!e.controller.signal.aborted) return g(n, { signal: e.controller.signal });
+			}).then((n) => {
+				e.controller.signal.aborted || D.current.get(t) !== e || n === void 0 || (D.current.delete(t), Ee((e) => new Map(e).set(t, n)), j((e) => {
+					let n = new Set(e);
+					return n.delete(t), n;
+				}));
+			}, (r) => {
+				e.controller.signal.aborted || D.current.get(t) !== e || (D.current.delete(t), k((e) => new Set(e).add(t)), j((e) => {
+					let n = new Set(e);
+					return n.delete(t), n;
+				}), pe?.(r, n));
+			});
+		}
+	});
+	let J = (e) => k((t) => {
+		let n = new Set(t);
+		return n.delete(e), n;
+	}), Y = (e) => {
+		let t = e.node.id;
+		if (!e.branch || e.node.disabled) return;
+		if (H.has(t) && O.has(t)) {
+			J(t);
+			return;
+		}
+		let n = new Set(N);
+		n.has(t) ? n.delete(t) : n.add(t), (n.size !== H.size || [...n].some((e) => !H.has(e))) && P([...n]);
+	}, X = (e) => {
+		e.node.disabled || De(e.node.id);
+	}, Oe = (e, t) => {
+		if (t.node.disabled || e.defaultPrevented || e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
+		let n = t.node.id, r = W.findIndex((e) => e.node.id === n), i = {
+			ArrowDown: () => q(W[Math.min(r + 1, W.length - 1)]?.node.id ?? null),
+			ArrowUp: () => q(W[Math.max(r - 1, 0)]?.node.id ?? null),
+			Home: () => q(W[0]?.node.id ?? null),
+			End: () => q(W.at(-1)?.node.id ?? null),
+			ArrowRight: () => {
+				if (t.branch && !A.has(n)) {
+					if (!H.has(n)) Y(t);
+					else if (O.has(n)) J(n);
+					else {
+						let e = t.children?.find((e) => !e.disabled);
+						e && q(e.id);
+					}
+				}
+			},
+			ArrowLeft: () => {
+				t.branch && H.has(n) ? P([...H].filter((e) => e !== n)) : t.parent && q(G(t.parent));
+			},
+			Enter: () => H.has(n) && O.has(n) ? J(n) : X(t),
+			" ": () => X(t)
+		};
+		if (i[e.key]) {
+			e.preventDefault(), i[e.key]();
+			return;
+		}
+		if (e.key.length !== 1 || e.key === "*") return;
+		let a = Date.now(), o = a - L.current.time < re ? L.current.text + e.key : e.key;
+		L.current = {
+			text: o,
+			time: a
+		};
+		let s = [...o].every((e) => R.compare(e, o[0]) === 0) ? o[0] : o;
+		for (let t = +(s.length === 1); t < W.length + 1; t++) {
+			let n = W[(r + t) % W.length];
+			if (R.compare(n.node.label.slice(0, s.length), s) === 0) {
+				e.preventDefault(), q(n.node.id);
+				break;
+			}
+		}
+	}, Z = (e) => `${S}-${Array.from(e, (e) => e.codePointAt(0).toString(16)).join("-")}`, Q = (e) => e.map((e) => {
+		let t = B.get(e.id), n = `${Z(e.id)}-error`, r = `${Z(e.id)}-label`, i = t.branch && H.has(e.id);
+		return /* @__PURE__ */ p("li", {
+			role: "none",
+			children: [/* @__PURE__ */ p("div", {
+				"data-ui": "tree-view-row",
+				className: b?.row?.className,
+				css: [ce, b?.row?.css],
+				style: { "--tree-level": t.level - 1 },
+				children: [
+					/* @__PURE__ */ f("span", {
+						"data-ui": "tree-view-disclosure",
+						"aria-hidden": "true",
+						"data-branch": t.branch,
+						"data-open": i,
+						className: b?.disclosure?.className,
+						css: [de, b?.disclosure?.css]
+					}),
+					s(e.icon) && /* @__PURE__ */ f("span", {
+						"data-ui": "tree-view-icon",
+						"aria-hidden": "true",
+						className: b?.icon?.className,
+						css: [ue, b?.icon?.css],
+						children: e.icon
+					}),
+					/* @__PURE__ */ f("div", {
+						ref: (t) => {
+							t ? w.current.set(e.id, t) : w.current.delete(e.id);
+						},
+						role: "treeitem",
+						css: se,
+						tabIndex: !e.disabled && K === e.id ? 0 : -1,
+						"aria-labelledby": r,
+						"aria-level": t.level,
+						"aria-posinset": t.position,
+						"aria-setsize": t.size,
+						"aria-expanded": t.branch ? i : void 0,
+						"aria-selected": e.disabled ? void 0 : M === e.id,
+						"aria-disabled": e.disabled || void 0,
+						"aria-busy": A.has(e.id) || void 0,
+						"aria-describedby": O.has(e.id) && i ? n : void 0,
+						"aria-owns": i && t.children && t.children.length > 0 ? `${Z(e.id)}-group` : void 0,
+						onFocus: (t) => {
+							t.target === t.currentTarget && (T.current = t.currentTarget, I(e.id));
+						},
+						children: /* @__PURE__ */ f("span", {
+							id: r,
+							"data-ui": "tree-view-label",
+							className: b?.label?.className,
+							css: [le, b?.label?.css],
+							children: e.label
+						})
+					})
+				]
+			}), i && t.children && t.children.length > 0 && /* @__PURE__ */ f("ul", {
+				id: `${Z(e.id)}-group`,
+				role: "group",
+				"data-ui": "tree-view-group",
+				className: b?.group?.className,
+				css: [fe, b?.group?.css],
+				style: { "--tree-level": t.level },
+				children: Q(t.children)
+			})]
+		}, e.id);
+	}), $ = _ === void 0 ? z.empty : _;
+	return /* @__PURE__ */ f(t, {
+		className: _e,
+		styles: [ae],
+		sx: ve,
+		children: (t) => /* @__PURE__ */ p("div", {
+			...we,
+			ref: ge,
+			className: t,
+			"data-ui": "tree-view",
+			onClick: (e) => {
+				if (be?.(e), e.defaultPrevented) return;
+				let t = e.target, n = t.closest("[data-ui=\"tree-view-row\"]"), r = W.find((e) => w.current.get(e.node.id)?.parentElement === n);
+				r && (q(r.node.id), t.closest("[data-ui=\"tree-view-disclosure\"]") ? Y(r) : X(r));
+			},
+			onKeyDown: (e) => {
+				if (ye?.(e), e.defaultPrevented) return;
+				let t = W.find((t) => w.current.get(t.node.id) === e.target);
+				t && Oe(e, t);
+			},
+			onBlur: (e) => {
+				xe?.(e), e.currentTarget.contains(e.relatedTarget) || I(G(M));
+			},
+			children: [
+				/* @__PURE__ */ f("ul", {
+					role: "tree",
+					"data-ui": "tree-view-tree",
+					ref: (e) => {
+						if (C.current = e, typeof v == "function") return v(e);
+						v && (v.current = e);
+					},
+					className: b?.tree?.className,
+					css: [oe, b?.tree?.css],
+					tabIndex: W.length ? void 0 : 0,
+					"aria-label": Se ?? (x ? void 0 : me),
+					"aria-labelledby": x,
+					"aria-describedby": [Ce, W.length ? void 0 : `${S}-empty`].filter(Boolean).join(" ") || void 0,
+					children: Q(e)
+				}),
+				!W.length && /* @__PURE__ */ f("p", {
+					id: `${S}-empty`,
+					css: m,
+					children: e.length ? z.empty : s($) ? $ : null
+				}),
+				/* @__PURE__ */ f("div", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					"data-ui": "tree-view-status",
+					className: b?.status?.className,
+					css: [m, b?.status?.css],
+					children: V.filter((e) => H.has(e.node.id)).map(({ node: e }) => A.has(e.id) ? /* @__PURE__ */ f("p", { children: z.loading(e.label) }, e.id) : O.has(e.id) ? /* @__PURE__ */ f("p", {
+						id: `${Z(e.id)}-error`,
+						children: z.error(e.label)
+					}, e.id) : null)
+				})
+			]
+		})
+	});
+}
+h.displayName = "TreeView";
+//#endregion
+export { h as t };

package/dist/tree-view.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as TreeView } from "./tree-view-C2liIxqy.js";

package/dist/types/components/announcement-bar/announcement-bar.d.ts

@@ -0,0 +1,75 @@
+import { type ComponentPropsWithRef, type MouseEvent, type ReactNode, type RefObject } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type CountdownProps } from '../countdown';
+export interface Announcement {
+    id: string;
+    message: ReactNode;
+    action?: {
+        label: ReactNode;
+        href?: string;
+        onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    };
+    countdown?: Pick<CountdownProps, 'target' | 'label' | 'completeLabel' | 'units' | 'clock'>;
+}
+export type AnnouncementBarVariant = 'subtle' | 'inverted';
+export type AnnouncementBarTone = 'neutral' | 'info' | 'warning' | 'danger';
+export interface AnnouncementBarLabels {
+    previous: string;
+    next: string;
+    pause: string;
+    resume: string;
+    dismiss: string;
+    slide: string;
+    carousel: string;
+}
+type Slot<E extends 'section' | 'div' | 'span' | 'button' | 'a'> = Omit<ComponentPropsWithRef<E>, 'ref' | 'children' | 'dangerouslySetInnerHTML'> & {
+    css?: Interpolation<Theme>;
+};
+export interface AnnouncementBarProps extends Omit<ComponentPropsWithRef<'section'>, 'children' | 'dangerouslySetInnerHTML'>, SxProps {
+    messages: readonly Announcement[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    autoPlay?: boolean;
+    paused?: boolean;
+    defaultPaused?: boolean;
+    onPausedChange?: (paused: boolean) => void;
+    interval?: number;
+    controls?: boolean;
+    dismissible?: boolean;
+    variant?: AnnouncementBarVariant;
+    tone?: AnnouncementBarTone;
+    label?: string;
+    live?: 'off' | 'polite';
+    locale?: Intl.LocalesArgument;
+    labels?: Partial<AnnouncementBarLabels>;
+    getMessageLabel?: (index: number, total: number) => string;
+    onAction?: (announcement: Announcement) => void;
+    onCountdownEnd?: (announcement: Announcement) => void;
+    dismissFocusRef?: RefObject<HTMLElement | null>;
+    slotProps?: {
+        root?: Slot<'section'>;
+        content?: Slot<'div'>;
+        message?: Slot<'span'>;
+        action?: Omit<Slot<'a'> & Slot<'button'>, 'onClick'> & {
+            onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+        };
+        previous?: Slot<'button'>;
+        next?: Slot<'button'>;
+        rotation?: Slot<'button'>;
+        dismiss?: Slot<'button'>;
+        countdown?: Omit<Slot<'div'>, 'onClick'>;
+    };
+}
+/** APG basic carousel: native Tab/Enter/Space; focus stops rotation until Resume. No custom arrow/Escape keys.
+ * State modes must not change during an instance. The app owns persistence and keyboard dismissal destinations.
+ */
+export declare function AnnouncementBar({ ref, messages, open: openProp, defaultOpen, onOpenChange, value, defaultValue, onValueChange, autoPlay, paused: pausedProp, defaultPaused, onPausedChange, interval, controls, dismissible, variant, tone, label, live, locale, labels: labelsProp, getMessageLabel, onAction, onCountdownEnd, dismissFocusRef, slotProps, className, sx, ...rest }: AnnouncementBarProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare namespace AnnouncementBar {
+    var displayName: string;
+}
+export {};

package/dist/types/components/announcement-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { AnnouncementBar } from './announcement-bar';
+export type { Announcement, AnnouncementBarProps, AnnouncementBarVariant, AnnouncementBarTone, AnnouncementBarLabels, } from './announcement-bar';

package/dist/types/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,43 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type AvatarProps, type AvatarSize, type AvatarStatus } from '../avatar';
+export interface AvatarGroupMember {
+    id: string;
+    name: string;
+    src?: string;
+    status?: AvatarStatus;
+    statusLabel?: string;
+}
+export interface AvatarGroupPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface AvatarGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role'>, SxProps {
+    /** Stable display order of people; immutable input. */
+    members: readonly AvatarGroupMember[];
+    /** Maximum number of visible people; overflow does not consume a person slot. Defaults to 4. */
+    max?: number;
+    /** Size for avatars and the overflow count circle. Defaults to 'md'. */
+    size?: AvatarSize;
+    /** Fallback accessible name for the group landmark. Defaults to 'Team members'. */
+    label?: string;
+    /** Locale for formatting count numerals; pin for deterministic SSR. Defaults to ambient Intl locale. */
+    locale?: Intl.LocalesArgument;
+    /** Formats the accessible name of the overflow image. Defaults to English plural wording. */
+    getOverflowLabel?: (hidden: number, formatted: string) => string;
+    /** Formats the total count summary description. Defaults to English plural wording. */
+    getSummaryLabel?: (total: number, formatted: string) => string;
+    /** Style overrides for internal parts. */
+    slotProps?: {
+        member?: AvatarGroupPartProps;
+        overflow?: AvatarGroupPartProps;
+        summary?: AvatarGroupPartProps;
+    };
+    /** Shared styling overrides passed down to each child Avatar. Cannot override id/name/status. */
+    avatarProps?: Pick<AvatarProps, 'slotProps' | 'sx' | 'className'>;
+}
+export declare function AvatarGroup({ ref, members, max, size, label, locale, getOverflowLabel, getSummaryLabel, slotProps, avatarProps, className, sx, ...rest }: AvatarGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace AvatarGroup {
+    var displayName: string;
+}

package/dist/types/components/avatar-group/index.d.ts

@@ -0,0 +1,2 @@
+export { AvatarGroup } from './avatar-group';
+export type { AvatarGroupMember, AvatarGroupPartProps, AvatarGroupProps, } from './avatar-group';

package/dist/types/components/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+export interface BottomSheetProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Nonempty ascending unique fractions in (0, 1]. Numeric contents require remount to change. */
+    detents?: readonly number[];
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    locale?: Intl.LocalesArgument;
+    getValueText?: (fraction: number, index: number) => string;
+    children?: ReactNode;
+}
+export interface BottomSheetTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
+}
+export interface BottomSheetContentProps extends Omit<ComponentPropsWithRef<'dialog'>, 'open'>, SxProps {
+    withDescription?: boolean;
+}
+export interface BottomSheetPanelProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface BottomSheetHeaderProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface BottomSheetBodyProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface BottomSheetFooterProps extends ComponentPropsWithRef<'div'>, SxProps {
+}
+export interface BottomSheetTitleProps extends ComponentPropsWithRef<'h2'>, SxProps {
+}
+export interface BottomSheetDescriptionProps extends ComponentPropsWithRef<'p'>, SxProps {
+}
+export interface BottomSheetHandleProps extends ComponentPropsWithRef<'button'>, SxProps {
+}
+export interface BottomSheetCloseProps extends ComponentPropsWithRef<'button'>, SxProps {
+}
+declare function BottomSheetRoot(props: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetTrigger({ ref, onClick, className, sx, ...props }: BottomSheetTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetContent({ ref, sx, className, ...props }: BottomSheetContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetPanel({ ref, sx, className, autoFocus, ...props }: BottomSheetPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetHeader({ ref, sx, className, ...props }: BottomSheetHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetBody({ ref, sx, className, onKeyDown, onFocusCapture, ...props }: BottomSheetBodyProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetFooter({ ref, sx, className, ...props }: BottomSheetFooterProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetTitle({ ref, sx, className, children, ...props }: BottomSheetTitleProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function BottomSheetDescription({ ref, sx, className, children, ...props }: BottomSheetDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function BottomSheetHandle({ ref, sx, className, onClick, onKeyDown, 'aria-describedby': described, ...props }: BottomSheetHandleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheetClose({ ref, sx, className, onClick, ...props }: BottomSheetCloseProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BottomSheet: typeof BottomSheetRoot & {
+    Trigger: typeof BottomSheetTrigger;
+    Content: typeof BottomSheetContent;
+    Panel: typeof BottomSheetPanel;
+    Header: typeof BottomSheetHeader;
+    Body: typeof BottomSheetBody;
+    Footer: typeof BottomSheetFooter;
+    Title: typeof BottomSheetTitle;
+    Description: typeof BottomSheetDescription;
+    Handle: typeof BottomSheetHandle;
+    Close: typeof BottomSheetClose;
+};
+export {};

package/dist/types/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { BottomSheet } from './bottom-sheet';
+export type { BottomSheetProps, BottomSheetTriggerProps, BottomSheetContentProps, BottomSheetPanelProps, BottomSheetHeaderProps, BottomSheetBodyProps, BottomSheetFooterProps, BottomSheetTitleProps, BottomSheetDescriptionProps, BottomSheetHandleProps, BottomSheetCloseProps, } from './bottom-sheet';

package/dist/types/components/calendar/calendar.d.ts

@@ -2,6 +2,16 @@ import { type ComponentPropsWithRef } from 'react';
 import { type SxProps } from '../../styling/sx';
 /** Day of the week as counted by `Date#getUTCDay`: 0 is Sunday, 6 is Saturday. */
 export type CalendarWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** Inclusive interval of 'YYYY-MM-DD' dates, start ≤ end. */
+export interface CalendarRange {
+    start: string;
+    end: string;
+}
+/** Descriptions read on the first and last day of `selectionRange`. */
+export interface CalendarRangeLabels {
+    start: string;
+    end: string;
+}
 export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
     /** Selected date, 'YYYY-MM-DD'. */
     value?: string;
@@ -19,11 +29,25 @@ export interface CalendarProps extends Omit<ComponentPropsWithRef<'div'>, 'defau
     locale?: string;
     /** Defaults to the locale's week start. */
     firstDayOfWeek?: CalendarWeekday;
+    /** 'YYYY-MM-DD' marked as today. Defaults to the local civil date at render time. */
+    today?: string;
+    /** Range mode: the selected interval (null for none). Replaces `value` as the selection. */
+    selectionRange?: CalendarRange | null;
+    /** Tentative interval, decorated but not selected. */
+    previewRange?: CalendarRange | null;
+    /** Parent-owned roving tab stop; null or a date outside the shown month leaves no day tab stop. */
+    tabStopDate?: string | null;
+    /** Every native day activation (click, Enter, Space), including the selected day. */
+    onDayActivate?: (date: string) => void;
+    /** A day received focus, or a keyboard move chose its destination (possibly in another month). */
+    onFocusedDateChange?: (date: string) => void;
+    /** Range mode: endpoint descriptions for screen readers. */
+    rangeLabels?: CalendarRangeLabels;
 }
 /** The header renders its own month buttons and label. */
 export type CalendarHeaderProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & SxProps;
 export type CalendarGridProps = ComponentPropsWithRef<'table'> & SxProps;
-declare function CalendarRoot({ ref, value: valueProp, defaultValue, onValueChange, visibleMonth: visibleMonthProp, defaultVisibleMonth, onVisibleMonthChange, min: minProp, max: maxProp, locale: localeProp, firstDayOfWeek: firstDayOfWeekProp, className, sx, ...rest }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CalendarRoot({ ref, value: valueProp, defaultValue, onValueChange, visibleMonth: visibleMonthProp, defaultVisibleMonth, onVisibleMonthChange, min: minProp, max: maxProp, locale: localeProp, firstDayOfWeek: firstDayOfWeekProp, today: todayProp, selectionRange, previewRange, tabStopDate, onDayActivate: onDayActivateProp, onFocusedDateChange: onFocusedDateChangeProp, rangeLabels, className, sx, children, ...rest }: CalendarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CalendarHeader({ ref, className, sx, ...props }: CalendarHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CalendarGrid({ ref, onKeyDown, 'aria-labelledby': ariaLabelledByProp, 'aria-label': ariaLabelProp, className, sx, ...rest }: CalendarGridProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Calendar: typeof CalendarRoot & {

package/dist/types/components/calendar/index.d.ts

@@ -1,2 +1,2 @@
 export { Calendar } from './calendar';
-export type { CalendarGridProps, CalendarHeaderProps, CalendarProps, CalendarWeekday } from './calendar';
+export type { CalendarGridProps, CalendarHeaderProps, CalendarProps, CalendarRange, CalendarRangeLabels, CalendarWeekday, } from './calendar';