@jfrader/ui 0.5.0 → 0.6.0

package/dist/tooltip-IajLwdUb.js

@@ -0,0 +1,129 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./sx-BJXJ2xJK.js";
+import { t as n } from "./use-controlled-state-DpeVQZNR.js";
+import { t as r } from "./trigger-style-CtOrdPk4.js";
+import { t as i } from "./overlay-layer-qEbpEtb8.js";
+import { t as a } from "./overlay-portal-C9igMHnC.js";
+import { t as o } from "./use-overlay-floating-Bx2jBKAA.js";
+import { createContext as s, useContext as c, useMemo as l, useState as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import { useDismiss as p, useFocus as m, useHover as h, useInteractions as g, useMergeRefs as _, useRole as v } from "@floating-ui/react";
+//#region src/components/tooltip/tooltip.tsx
+var y = 300, b = 100, x = s(null);
+function S(e) {
+	let t = c(x);
+	if (!t) throw Error(`Tooltip.${e} must be rendered inside <Tooltip>.`);
+	return t;
+}
+var C = e({
+	boxSizing: "border-box",
+	backgroundColor: d.color.bgSoft,
+	border: `1px solid ${d.color.border}`,
+	borderRadius: d.radius.sm,
+	boxShadow: d.shadow.raised,
+	padding: `${d.space[1]} ${d.space[2]}`,
+	maxInlineSize: `min(260px, calc(100vw - 2 * ${d.space[4]}))`,
+	overflowWrap: "anywhere",
+	color: d.color.text,
+	fontFamily: d.font.sans,
+	fontSize: d.textSize.sm,
+	lineHeight: d.lineHeight.base
+});
+function w(e, { enabled: t = !0, openDelay: n = y, closeDelay: r = b } = {}) {
+	let i = h(e, {
+		enabled: t,
+		delay: {
+			open: n,
+			close: r
+		},
+		move: !1
+	}), a = m(e, { enabled: t }), o = p(e, { escapeKey: !0 }), s = v(e, { role: "tooltip" });
+	return g([
+		i,
+		a,
+		o,
+		s
+	]);
+}
+function T({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: i = "top", openDelay: a = y, closeDelay: s = b, children: c }) {
+	let [u = !1, d] = n(e, t, r), { refs: p, floatingStyles: m, context: h } = o({
+		open: u,
+		placement: i,
+		onOpenChange: d
+	}), { getReferenceProps: g, getFloatingProps: _ } = w(h, {
+		openDelay: a,
+		closeDelay: s
+	}), v = l(() => ({
+		open: u,
+		refs: p,
+		floatingStyles: m,
+		getReferenceProps: g,
+		getFloatingProps: _
+	}), [
+		u,
+		p,
+		m,
+		g,
+		_
+	]);
+	return /* @__PURE__ */ f(x.Provider, {
+		value: v,
+		children: c
+	});
+}
+function E(e) {
+	return /* @__PURE__ */ f(i, { children: /* @__PURE__ */ f(T, { ...e }) });
+}
+E.displayName = "Tooltip";
+function D({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
+	let { refs: s, getReferenceProps: c } = S("Trigger"), l = _([s.setReference, e]), u = c(o), d = [n, u["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ f(t, {
+		className: i,
+		styles: r,
+		sx: a,
+		children: (e) => /* @__PURE__ */ f("button", {
+			type: "button",
+			...u,
+			ref: l,
+			"aria-describedby": d,
+			"data-ui": "tooltip-trigger",
+			className: e
+		})
+	});
+}
+D.displayName = "Tooltip.Trigger";
+function O({ ref: e, style: n, className: r, sx: i, dir: a, ...o }) {
+	let { refs: s, floatingStyles: c, getFloatingProps: l } = S("Content"), d = _([s.setFloating, e]), [p] = u(() => {
+		let e = s.domReference.current;
+		return e?.ownerDocument.defaultView?.getComputedStyle(e).direction;
+	}), { tabIndex: m, ...h } = l(o);
+	return /* @__PURE__ */ f(t, {
+		className: r,
+		styles: C,
+		sx: i,
+		children: (e) => /* @__PURE__ */ f("div", {
+			...h,
+			ref: d,
+			dir: a ?? p,
+			"data-ui": "tooltip",
+			style: {
+				...n,
+				...c
+			},
+			className: e
+		})
+	});
+}
+function k(e) {
+	let { open: t } = S("Content");
+	return t ? /* @__PURE__ */ f(a, { children: /* @__PURE__ */ f(O, { ...e }) }) : null;
+}
+k.displayName = "Tooltip.Content";
+var A = Object.assign(E, {
+	Trigger: D,
+	Content: k
+});
+//#endregion
+export { C as n, w as r, A as t };

package/dist/tooltip.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Tooltip } from "./tooltip-CkeiW9C1.js";
+export { t as Tooltip } from "./tooltip-IajLwdUb.js";

package/dist/{tree-view-C2liIxqy.js → tree-view-CoW4oJIZ.js}

@@ -1,8 +1,9 @@
 '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 { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./disclosure-caret-C5T3fcl6.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./sx-BJXJ2xJK.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";
@@ -26,7 +27,7 @@ var re = 500, ie = {
 	margin: 0,
 	padding: d.space[1],
 	overflowX: "auto",
-	"&:focus-visible": r
+	"&:focus-visible": n
 }), se = e({
 	outline: "none",
 	display: "flex",
@@ -56,9 +57,9 @@ var re = 500, ie = {
 		color: d.color.textMuted,
 		cursor: "default"
 	},
-	"&:has(> [role=\"treeitem\"]:focus-visible)": r,
-	[a]: { transitionDuration: "0s" },
-	[i]: {
+	"&:has(> [role=\"treeitem\"]:focus-visible)": n,
+	[i]: { transitionDuration: "0s" },
+	[r]: {
 		borderInlineStartColor: "Canvas",
 		"&:has(> [aria-selected=\"true\"])": { borderInlineStartColor: "Highlight" }
 	}
@@ -79,12 +80,16 @@ var re = 500, ie = {
 	justifyContent: "center",
 	color: "currentColor",
 	"&[data-branch=\"true\"]::after": {
-		...n,
+		...t,
 		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" } }
+	[i]: { "&[data-branch=\"true\"]::after": { transitionDuration: "0s" } },
+	[r]: { "&[data-branch=\"true\"]::after": {
+		forcedColorAdjust: "none",
+		color: "CanvasText"
+	} }
 }), fe = e({
 	listStyle: "none",
 	margin: 0,
@@ -103,8 +108,8 @@ var re = 500, ie = {
 	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({
+function h({ nodes: e, value: t, defaultValue: n = null, onValueChange: r, open: i, 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(t, n, r), [N = [], P] = o(i, d, h), [F, I] = u(t ?? n), L = l({
 		text: "",
 		time: 0
 	}), R = ne(() => new Intl.Collator(y, {
@@ -296,7 +301,7 @@ function h({ nodes: e, value: n, defaultValue: r = null, onValueChange: i, open:
 			})]
 		}, e.id);
 	}), $ = _ === void 0 ? z.empty : _;
-	return /* @__PURE__ */ f(t, {
+	return /* @__PURE__ */ f(a, {
 		className: _e,
 		styles: [ae],
 		sx: ve,

package/dist/tree-view.js

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

package/dist/{trigger-style-B1KVC8O1.js → trigger-style-CtOrdPk4.js}

@@ -1,5 +1,5 @@
 'use client';
-import { r as e } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/trigger-style.ts
 var n = e({

package/dist/types/components/activity-rings/activity-rings.d.ts

@@ -0,0 +1,115 @@
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export type ActivityTone = 'accent' | 'warning' | 'success' | 'info';
+export type ActivityRingsSize = 'sm' | 'md' | 'lg';
+export type ActivityValues = Readonly<Record<string, number | null>>;
+export interface ActivityMetric {
+    /** Stable, nonempty, unique identity. */
+    id: string;
+    label: string;
+    /** Positive target; nonpositive or nonfinite goals render the metric as unavailable. */
+    goal: number;
+    /** Sanctioned `Intl.NumberFormat` unit (`'kilometer'`, `'minute'`, `'hour'`, …); otherwise use `formatValue`. */
+    unit?: string;
+    tone?: ActivityTone;
+    /** Formats amounts for units Intl does not sanction; implement it with Intl. */
+    formatValue?: (value: number, locale: string | undefined) => string;
+}
+export interface ActivityDay {
+    id: string;
+    /** Civil date, `YYYY-MM-DD`. */
+    date: string;
+    values: ActivityValues;
+}
+/** `open` is below goal, `closed` at or above it; `unknown` has no finite value. */
+export type ActivityRingStatus = 'unknown' | 'unavailable' | 'open' | 'closed';
+export interface ActivityRingsLabels {
+    /** Region name when no consumer name is given. */
+    root: string;
+    /** Day picker group label. */
+    days: string;
+    legend: string;
+    unknown: string;
+    unavailable: string;
+    goalMet: string;
+    noSelection: string;
+    empty: string;
+    amount: (value: string, goal: string) => string;
+    summary: (met: string, total: string) => string;
+}
+type PartElement = 'svg' | 'ul' | 'button' | 'div' | 'fieldset' | 'label' | 'p';
+export type ActivityRingsPartProps<T extends PartElement> = Omit<ComponentPropsWithoutRef<T>, 'children'> & {
+    css?: Interpolation<Theme>;
+};
+type DataSource = {
+    /** Standalone values when there is no day picker. */
+    values?: ActivityValues;
+    days?: never;
+} | {
+    /** Days win over standalone values; supplying both is a type error. */
+    days: readonly ActivityDay[];
+    values?: never;
+};
+interface ActivityRingsSlotProps {
+    rings?: ActivityRingsPartProps<'svg'>;
+    legend?: ActivityRingsPartProps<'ul'>;
+    dayPicker?: ActivityRingsPartProps<'fieldset'>;
+    dayLabel?: ActivityRingsPartProps<'label'>;
+    summary?: ActivityRingsPartProps<'p'>;
+}
+/** Metric slot props shared by the toggle-button and plain-row legend elements. */
+export type ActivityRingsMetricProps = Pick<ActivityRingsPartProps<'button'> & ActivityRingsPartProps<'div'>, keyof ActivityRingsPartProps<'button'> & keyof ActivityRingsPartProps<'div'>>;
+/**
+ * The metric slot targets the element each legend row renders: a toggle button when
+ * `interactiveLegend` is `true`, a plain row when it is `false` or omitted, and only props shared by
+ * both when the flag is a runtime boolean.
+ */
+type LegendMode = {
+    /** Legend rows become toggle buttons that isolate one ring. */
+    interactiveLegend: true;
+    slotProps?: ActivityRingsSlotProps & {
+        metric?: ActivityRingsPartProps<'button'>;
+    };
+} | {
+    interactiveLegend?: false;
+    slotProps?: ActivityRingsSlotProps & {
+        metric?: ActivityRingsPartProps<'div'>;
+    };
+} | {
+    interactiveLegend?: boolean;
+    slotProps?: ActivityRingsSlotProps & {
+        metric?: ActivityRingsMetricProps;
+    };
+};
+export type ActivityRingsProps = Omit<ComponentPropsWithRef<'section'>, 'children' | 'defaultValue' | 'onChange'> & SxProps & DataSource & LegendMode & {
+    /** Rendered outside → inside. */
+    metrics: readonly ActivityMetric[];
+    /** Selected day id. A missing id renders the no-selection summary. */
+    value?: string | null;
+    /** Seeds the selected day once; defaults to the last day. */
+    defaultValue?: string | null;
+    onValueChange?: (dayId: string) => void;
+    focusedMetric?: string | null;
+    defaultFocusedMetric?: string | null;
+    onFocusedMetricChange?: (metricId: string | null) => void;
+    /** Fires once when a same-day value observed below its goal reaches it. */
+    onRingClose?: (metricId: string, dayId: string | null) => void;
+    size?: ActivityRingsSize;
+    locale?: string;
+    /** English defaults. */
+    labels?: Partial<ActivityRingsLabels>;
+    /** Keeps the legend for assistive tech while removing it visually. */
+    hideLegend?: boolean;
+};
+/**
+ * Concentric goal rings over the UsageMeter model: each ring is one metric's value against its
+ * goal. The SVG is decoration; the legend carries exact amounts, goals and percentages. Optional
+ * native radio day picker (arrows native, Home/End added) and opt-in toggle-button legend
+ * (Enter/Space isolate one ring).
+ */
+export declare function ActivityRings({ ref, metrics, values: valuesProp, days: daysProp, value, defaultValue, onValueChange, focusedMetric, defaultFocusedMetric, onFocusedMetricChange, interactiveLegend, onRingClose, size, locale, labels: labelsProp, hideLegend, slotProps, className, sx, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, ...rest }: ActivityRingsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ActivityRings {
+    var displayName: string;
+}
+export {};

package/dist/types/components/activity-rings/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityRings } from './activity-rings';
+export type { ActivityDay, ActivityMetric, ActivityRingStatus, ActivityRingsLabels, ActivityRingsMetricProps, ActivityRingsPartProps, ActivityRingsProps, ActivityRingsSize, ActivityTone, ActivityValues, } from './activity-rings';

package/dist/types/components/billing-toggle/billing-toggle.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type SegmentedControlItemProps } from '../segmented-control';
+export type BillingToggleSize = 'md' | 'lg';
+export type BillingToggleTone = 'neutral' | 'accent' | 'success';
+type SlotProps<Element extends 'span' | 'del'> = ComponentPropsWithoutRef<Element> & {
+    css?: Interpolation<Theme>;
+};
+export interface BillingToggleProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    size?: BillingToggleSize;
+    tone?: BillingToggleTone;
+    locale?: Intl.LocalesArgument;
+}
+export interface BillingToggleListProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
+}
+export interface BillingToggleLabelProps extends ComponentPropsWithRef<'span'>, SxProps {
+}
+export interface BillingToggleItemProps extends Omit<SegmentedControlItemProps, 'accessory'> {
+    badge?: ReactNode;
+    activeBadge?: ReactNode;
+    slotProps?: {
+        label?: SlotProps<'span'>;
+        badge?: SlotProps<'span'>;
+        selection?: SlotProps<'span'>;
+    };
+}
+export interface BillingTogglePriceProps extends Omit<ComponentPropsWithRef<'span'>, 'children'>, SxProps {
+    amount: number;
+    currency: string;
+    locale?: Intl.LocalesArgument;
+    formatOptions?: Omit<Intl.NumberFormatOptions, 'style' | 'currency'>;
+    was?: number;
+    period?: ReactNode;
+    previousLabel?: string;
+    slotProps?: {
+        amount?: SlotProps<'span'>;
+        previous?: SlotProps<'del'>;
+        period?: SlotProps<'span'>;
+    };
+}
+declare function BillingToggleRoot({ ref, value: valueProp, defaultValue, onValueChange, disabled, size, tone, locale, className, sx, children, ...rest }: BillingToggleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BillingToggleLabel({ ref, id: idProp, className, sx, children, ...rest }: BillingToggleLabelProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function BillingToggleList({ ref, className, sx, children, ...rest }: BillingToggleListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BillingToggleItem({ badge, activeBadge, slotProps, children, className, sx, ...rest }: BillingToggleItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function BillingTogglePrice({ ref, amount, currency, locale: localeProp, formatOptions, was, period, previousLabel, slotProps, className, sx, ...rest }: BillingTogglePriceProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BillingToggle: typeof BillingToggleRoot & {
+    List: typeof BillingToggleList;
+    Item: typeof BillingToggleItem;
+    Label: typeof BillingToggleLabel;
+    Price: typeof BillingTogglePrice;
+};
+export {};

package/dist/types/components/billing-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { BillingToggle } from './billing-toggle';
+export type { BillingToggleProps, BillingToggleListProps, BillingToggleItemProps, BillingToggleLabelProps, BillingTogglePriceProps, BillingToggleSize, BillingToggleTone, } from './billing-toggle';

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

@@ -0,0 +1,72 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type Placement } from '@floating-ui/react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant } from '../button';
+import { type MenuContentProps, type MenuItemProps, type MenuSeparatorProps, type MenuItemTone } from '../menu/menu';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+export interface ButtonGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'role'>, SxProps {
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    orientation?: ButtonGroupOrientation;
+    collapseLabels?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: Placement;
+}
+export interface ButtonGroupItemProps extends Omit<ButtonProps, 'render'> {
+    iconOnly?: boolean;
+    label?: string;
+    reserveLabels?: readonly string[];
+}
+export interface ButtonGroupLinkProps extends Omit<ComponentPropsWithRef<'a'>, 'color'>, SxProps {
+    href: string;
+    css?: Interpolation<Theme>;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    iconOnly?: boolean;
+    label?: string;
+    startIcon?: ReactNode;
+    reserveLabels?: readonly string[];
+}
+export interface ButtonGroupLabelProps extends Omit<ComponentPropsWithRef<'span'>, 'role' | 'tabIndex'>, SxProps {
+    css?: Interpolation<Theme>;
+}
+export type ButtonGroupTriggerProps = Omit<ButtonGroupItemProps, 'loading' | 'reserveLabels' | 'iconOnly'> & ({
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+});
+export interface ButtonGroupContentProps extends Omit<MenuContentProps, 'role'> {
+    css?: Interpolation<Theme>;
+}
+export interface ButtonGroupMenuItemProps extends MenuItemProps {
+    tone?: MenuItemTone;
+    css?: Interpolation<Theme>;
+}
+export interface ButtonGroupSeparatorProps extends MenuSeparatorProps {
+    css?: Interpolation<Theme>;
+}
+declare function ButtonGroupRoot({ ref, variant, tone, size, orientation, collapseLabels, disabled, open, defaultOpen, onOpenChange, placement, children, className, sx, onKeyDown, onPointerOver, onPointerLeave, onPointerCancel, onFocus, onBlur, ...rest }: ButtonGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ButtonGroupItem({ ref, variant, tone, size, disabled, iconOnly, label, reserveLabels, children, startIcon, endIcon, css: cssProp, sx, ...rest }: ButtonGroupItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ButtonGroupLink({ ref, href, disabled, variant, tone, size, iconOnly, label, startIcon, reserveLabels, children, className, css: cssProp, sx, onClick, onAuxClick, onKeyDown, ...rest }: ButtonGroupLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ButtonGroupLabel({ className, sx, ...props }: ButtonGroupLabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ButtonGroupTrigger({ ref, variant, tone, size, disabled, children, startIcon, endIcon, css: cssProp, sx, ...rest }: ButtonGroupTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ButtonGroupContent({ dir, 'aria-labelledby': labelledBy, ...props }: ButtonGroupContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ButtonGroupMenuItem({ tone, disabled, onClick, onSelect, ...props }: ButtonGroupMenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ButtonGroupSeparator(props: ButtonGroupSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ButtonGroup: typeof ButtonGroupRoot & {
+    Item: typeof ButtonGroupItem;
+    Link: typeof ButtonGroupLink;
+    Label: typeof ButtonGroupLabel;
+    Trigger: typeof ButtonGroupTrigger;
+    Content: typeof ButtonGroupContent;
+    MenuItem: typeof ButtonGroupMenuItem;
+    Separator: typeof ButtonGroupSeparator;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './button-group';
+export type { ButtonGroupProps, ButtonGroupOrientation, ButtonGroupItemProps, ButtonGroupLinkProps, ButtonGroupLabelProps, ButtonGroupTriggerProps, ButtonGroupContentProps, ButtonGroupMenuItemProps, ButtonGroupSeparatorProps, } from './button-group';

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

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SurfaceAppearance } from '../../styling/surface';
 import { type SxProps } from '../../styling/sx';
 export type CardVariant = 'flat' | 'raised';
 export type CardHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -17,6 +18,8 @@ export interface CardSlotProps {
 }
 export interface CardProps extends ComponentPropsWithRef<'div'>, SxProps {
     variant?: CardVariant;
+    /** `contrast` paints the dark theme's own palette for this card on any page theme. */
+    appearance?: SurfaceAppearance;
     slotProps?: CardSlotProps;
 }
 export type CardHeaderProps = ComponentPropsWithRef<'div'> & SxProps;
@@ -26,7 +29,7 @@ export interface CardTitleProps extends ComponentPropsWithRef<'h3'>, SxProps {
 export type CardDescriptionProps = ComponentPropsWithRef<'p'> & SxProps;
 export type CardContentProps = ComponentPropsWithRef<'div'> & SxProps;
 export type CardFooterProps = ComponentPropsWithRef<'div'> & SxProps;
-declare function CardRoot({ ref, variant, slotProps, className, sx, ...rest }: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CardRoot({ ref, variant, appearance, slotProps, className, style, sx, ...rest }: CardProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CardHeader({ ref, className, sx, ...rest }: CardHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CardTitle({ ref, level, className, sx, ...rest }: CardTitleProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CardDescription({ ref, className, sx, ...rest }: CardDescriptionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/chat-thread/chat-thread.d.ts

@@ -0,0 +1,130 @@
+import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
+import { type ThreadAuthor, type ThreadTimestamp } from '../thread/thread-core';
+import { type ThreadButtonProps, type ThreadPartProps, type ThreadReactionLabels, type ThreadSize, type ThreadTextareaProps } from '../thread/thread-parts';
+export type ChatParticipant = ThreadAuthor;
+export type ChatThreadSize = ThreadSize;
+export type ChatMessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+export interface ChatAttachment {
+    id: string;
+    name: string;
+    kind: 'image' | 'file';
+    url?: string;
+    size?: number;
+    width?: number;
+    height?: number;
+    alt?: string;
+}
+export interface ChatReaction {
+    emoji: string;
+    count: number;
+    mine?: boolean;
+}
+export interface ChatMessage {
+    id: string;
+    authorId: string;
+    text?: string;
+    createdAt: ThreadTimestamp;
+    attachments?: readonly ChatAttachment[];
+    reactions?: readonly ChatReaction[];
+    status?: ChatMessageStatus;
+}
+export interface ChatDraft {
+    text: string;
+    files: File[];
+}
+export type ChatThreadEvent = {
+    type: 'send';
+    message: ChatMessage;
+    draft: ChatDraft;
+} | {
+    type: 'react';
+    id: string;
+    emoji: string;
+    added: boolean;
+};
+export interface ChatThreadLabels extends ThreadReactionLabels {
+    conversation: string;
+    transcript: string;
+    composer: string;
+    placeholder: string;
+    send: string;
+    attach: string;
+    attachments: string;
+    sending: string;
+    sent: string;
+    delivered: string;
+    read: string;
+    failed: string;
+    retry: string;
+    jumpToLatest: string;
+    unknownAuthor: string;
+    empty: string;
+    invalidTime: string;
+    sendFailed: string;
+    removeFile: (name: string) => string;
+    readBy: (names: string) => string;
+    typing: (names: string) => string;
+    newMessages: (count: number) => string;
+    showAttachments: (count: number) => string;
+    fileRejected: (reason: 'type' | 'size' | 'count', name: string) => string;
+}
+type ChatThreadPart = 'viewport' | 'scroller' | 'log' | 'list' | 'message' | 'bubble' | 'time' | 'attachments' | 'receipt' | 'reaction';
+export type ChatThreadSlotProps = Partial<Record<ChatThreadPart, ThreadPartProps>> & {
+    jumpButton?: ThreadButtonProps;
+};
+export type ChatThreadComposerSlotProps = Partial<Record<'tray' | 'file' | 'error', ThreadPartProps>> & {
+    form?: ComponentPropsWithRef<'form'>;
+    textarea?: ThreadTextareaProps;
+    attachButton?: ThreadButtonProps;
+    fileInput?: Omit<ComponentPropsWithRef<'input'>, 'type' | 'multiple' | 'accept' | 'disabled'>;
+    removeButton?: ThreadButtonProps;
+    sendButton?: ThreadButtonProps;
+};
+export interface ChatThreadComposerProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    value?: ChatDraft;
+    defaultValue?: ChatDraft;
+    onValueChange?: (draft: ChatDraft) => void;
+    onSend: (draft: ChatDraft) => void | Promise<void>;
+    allowAttachments?: boolean;
+    accept?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string;
+    locale?: Intl.LocalesArgument;
+    size?: ChatThreadSize;
+    labels?: Partial<ChatThreadLabels>;
+    slotProps?: ChatThreadComposerSlotProps;
+}
+export interface ChatThreadProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange' | 'children'>, SxProps {
+    participants: readonly ChatParticipant[];
+    currentUserId: string;
+    value?: readonly ChatMessage[];
+    defaultValue?: readonly ChatMessage[];
+    onValueChange?: (next: ChatMessage[], event: ChatThreadEvent) => void;
+    now: number;
+    locale?: Intl.LocalesArgument;
+    timeZone?: string;
+    typing?: readonly string[];
+    readBy?: Readonly<Record<string, string>>;
+    onSend?: (draft: ChatDraft) => void | Promise<void>;
+    onReact?: (id: string, emoji: string) => void;
+    onRetry?: (id: string) => void | Promise<void>;
+    reactions?: readonly string[];
+    groupWindow?: number;
+    composer?: boolean;
+    disabled?: boolean;
+    composerProps?: Omit<ChatThreadComposerProps, 'onSend'>;
+    getNewId?: () => string;
+    size?: ChatThreadSize;
+    labels?: Partial<ChatThreadLabels>;
+    slotProps?: ChatThreadSlotProps;
+}
+declare function Composer(props: ChatThreadComposerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ChatThreadRoot({ ref, participants, currentUserId, value, defaultValue, onValueChange, now, locale, timeZone, typing, readBy, onSend, onReact, onRetry, reactions, groupWindow, composer, disabled, composerProps, getNewId, size, labels: labelProps, slotProps, className, sx, ...rest }: ChatThreadProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ChatThread: typeof ChatThreadRoot & {
+    Composer: typeof Composer;
+};
+export {};

package/dist/types/components/chat-thread/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatThread } from './chat-thread';
+export type { ChatAttachment, ChatDraft, ChatMessage, ChatMessageStatus, ChatParticipant, ChatReaction, ChatThreadComposerProps, ChatThreadComposerSlotProps, ChatThreadEvent, ChatThreadLabels, ChatThreadProps, ChatThreadSize, ChatThreadSlotProps, } from './chat-thread';

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

@@ -19,7 +19,7 @@ export interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, 'siz
         description?: CheckboxPartProps;
     };
 }
-export declare function Checkbox({ ref, label, description, indeterminate, size, onChange, onCheckedChange, slotProps, className, sx, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ ref, label, description, indeterminate, size, onChange, onCheckedChange, slotProps, className, sx, dir, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Checkbox {
     var displayName: string;
 }

package/dist/types/components/command-palette/command-palette.d.ts

@@ -42,7 +42,7 @@ declare function CommandPaletteInput({ ref, onChange, onKeyDown, className, sx,
 declare function CommandPaletteList({ ref, onMouseDown, children, className, sx, ...rest }: CommandPaletteListProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function CommandPaletteEmpty({ ref, children, className, sx, ...rest }: CommandPaletteEmptyProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 declare function CommandPaletteGroup({ ref, label, children, 'aria-labelledby': externalLabelledBy, className, sx, ...rest }: CommandPaletteGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function CommandPaletteItem({ ref, value, onSelect, keywords, onClick, children, className, sx, ...rest }: CommandPaletteItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function CommandPaletteItem({ ref, value, onSelect, keywords, 'aria-disabled': ariaDisabled, onClick, children, className, sx, ...rest }: CommandPaletteItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const CommandPalette: typeof CommandPaletteRoot & {
     Trigger: typeof CommandPaletteTrigger;
     Content: typeof CommandPaletteContent;