@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,153 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Orientation, Radius, Size, Space, Tone } from '../../../types/common';
+import { ButtonVariant } from '../../primitives/Button';
+/**
+ * Visual style of a toggle button, using the `Button` variant names (`link`
+ * is left out, since a toggle needs a visible box to show its pressed state).
+ * The variant sets how the **pressed** state looks; every variant shares a
+ * quiet unpressed look.
+ */
+export type ToggleButtonVariant = Exclude<ButtonVariant, "link" | "inverse">;
+/** Styling props shared by `ToggleButton`, `ToggleGroup`, and `ToggleGroup.Item`. */
+export interface ToggleButtonStyleProps {
+    /** How the pressed state looks. Inherits from a surrounding `ToggleGroup`. @default "solid" */
+    variant?: ToggleButtonVariant;
+    /** Semantic color of the pressed state. Inherits from a surrounding `ToggleGroup`. @default "primary" */
+    tone?: Tone;
+    /** Control height, padding, and type size. Inherits from a surrounding `ToggleGroup`. @default "md" */
+    size?: Size;
+    /** Corner rounding. When omitted, uses `--control-radius` (pill). Inherits from a surrounding `ToggleGroup`. */
+    radius?: Radius;
+    /** Disables the control (native `disabled`). A disabled `ToggleGroup` disables every item. @default false */
+    disabled?: boolean;
+    /** Shows a check icon before the label while pressed, as an extra non-color cue. Not shown on icon-only buttons. Inherits from a surrounding `ToggleGroup`. @default false */
+    checkmark?: boolean;
+    /** Stretches the button to fill its container (in a group, items share the space equally). @default false */
+    fullWidth?: boolean;
+}
+/** Content: a visible label, or an icon alone (then `aria-label` is required). */
+type ToggleButtonContent = {
+    /** The visible label. Keep it the same whether pressed or not; `aria-pressed` announces the state. */
+    children: ReactNode;
+    /** Icon for icon-only mode. Use it instead of `children`, together with `aria-label`. */
+    icon?: undefined;
+} | {
+    children?: undefined;
+    /** Icon for icon-only mode. Hidden from assistive technology; `aria-label` names the button. */
+    icon: ReactNode;
+    /** Accessible name. Required in icon-only mode. Keep it constant (e.g. "Bold"), not "Bold on / Bold off". */
+    "aria-label": string;
+};
+interface ToggleButtonDecorProps {
+    /** Decorative icon before the label. Hidden from assistive technology. */
+    startIcon?: ReactNode;
+    /** Decorative icon (or count) after the label. Hidden from assistive technology. */
+    endIcon?: ReactNode;
+}
+type NativeButtonProps = Omit<ComponentPropsWithRef<"button">, "type" | "aria-pressed" | "children">;
+export interface ToggleButtonOwnProps extends ToggleButtonStyleProps, ToggleButtonDecorProps {
+    /** Controlled pressed state. */
+    pressed?: boolean;
+    /** Initial pressed state when uncontrolled. @default false */
+    defaultPressed?: boolean;
+    /** Called with the next pressed state when the user toggles the button. */
+    onPressedChange?: (pressed: boolean) => void;
+}
+export type ToggleButtonProps = ToggleButtonOwnProps & Omit<NativeButtonProps, keyof ToggleButtonOwnProps> & ToggleButtonContent;
+export interface ToggleGroupItemOwnProps extends ToggleButtonStyleProps, ToggleButtonDecorProps {
+    /** Value this item adds to (or sets as) the group's value when pressed. Must be unique in the group. */
+    value: string;
+}
+export type ToggleGroupItemProps = ToggleGroupItemOwnProps & Omit<NativeButtonProps, keyof ToggleGroupItemOwnProps | "value"> & ToggleButtonContent;
+/**
+ * A button that stays pressed or unpressed (`<button type="button"
+ * aria-pressed>`), for on/off options like Bold or "Show starters only".
+ * Pressed is shown by fill (or a tone border / indicator bar), a heavier
+ * label, and an optional check icon, never by color alone.
+ *
+ * Inside a `ToggleGroup`, use `ToggleGroup.Item` instead so the group can
+ * manage selection and roving focus.
+ */
+export declare const ToggleButton: ({ pressed: pressedProp, defaultPressed, onPressedChange, ...props }: ToggleButtonProps) => import("react").JSX.Element;
+/**
+ * One toggle in a `ToggleGroup`. Takes a `value` plus every `ToggleButton`
+ * prop except the pressed-state props, which the group controls.
+ */
+export declare const ToggleGroupItem: ({ value, onFocus, tabIndex, ...props }: ToggleGroupItemProps) => import("react").JSX.Element;
+interface ToggleGroupBaseProps extends ToggleButtonStyleProps, Omit<ComponentPropsWithRef<"div">, "defaultValue" | "role" | "children" | "aria-label" | "aria-labelledby"> {
+    /** Joins items edge to edge, sharing borders, with rounding on the outer corners only (like `ButtonGroup attached`). @default false */
+    attached?: boolean;
+    /** Layout direction. Also picks the arrow keys: Left/Right when horizontal, Up/Down when vertical. @default "horizontal" */
+    orientation?: Orientation;
+    /** Space between items (a `--space-*` step). Ignored when `attached`. @default 2 */
+    gap?: Space;
+    /**
+     * Toolbar-style roving tabindex: the group is one Tab stop, and Arrow keys,
+     * Home, and End move focus between items (wrapping). Turn off to make every
+     * item its own Tab stop. @default true
+     */
+    rovingFocus?: boolean;
+    /**
+     * ARIA role of the container. Use `"toolbar"` when the group is (or is the
+     * whole of) a formatting toolbar, such as Bold / Italic / Underline.
+     * @default "group"
+     */
+    role?: "group" | "toolbar";
+    /**
+     * Prevents unpressing the last pressed item: in `single` mode something is
+     * always selected; in `multiple` mode at least one item stays pressed.
+     * @default false
+     */
+    required?: boolean;
+    /** `ToggleGroup.Item` elements. Group style props are passed down; an item's own props win (except `disabled`, which either can set). */
+    children?: ReactNode;
+}
+/** The group needs an accessible name: `aria-label` or `aria-labelledby`. */
+type ToggleGroupName = {
+    /** Accessible name of the group. One of `aria-label` or `aria-labelledby` is required. */
+    "aria-label": string;
+    /** Id of a visible element that names the group. */
+    "aria-labelledby"?: string;
+} | {
+    "aria-label"?: string;
+    "aria-labelledby": string;
+};
+export interface ToggleGroupSingleProps {
+    /** `single`: at most one item pressed (value is a string or `null`). `multiple`: any number (value is a string array). */
+    type: "single";
+    /** Controlled value: the pressed item's value, or `null` for none. */
+    value?: string | null;
+    /** Initial value when uncontrolled. @default null */
+    defaultValue?: string | null;
+    /** Called with the next value (`null` when the pressed item is unpressed). */
+    onValueChange?: (value: string | null) => void;
+}
+export interface ToggleGroupMultipleProps {
+    /** `single`: at most one item pressed (value is a string or `null`). `multiple`: any number (value is a string array). */
+    type: "multiple";
+    /** Controlled value: the values of every pressed item. */
+    value?: string[];
+    /** Initial value when uncontrolled. @default [] */
+    defaultValue?: string[];
+    /** Called with the next array of pressed values. */
+    onValueChange?: (value: string[]) => void;
+}
+export type ToggleGroupProps = ToggleGroupBaseProps & ToggleGroupName & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
+/**
+ * A set of toggle buttons (`role="group"`, or `role="toolbar"`) sharing one
+ * value. `type="single"` allows at most one pressed item (unpressing is
+ * allowed unless `required`); `type="multiple"` allows any number.
+ *
+ * Each item is a `<button aria-pressed>`, so this is for on/off options like
+ * text formatting or filter chips. For choosing exactly one of several
+ * mutually exclusive views, use `SegmentedControl` (a radio group) or `Tabs`.
+ *
+ * Keyboard (with `rovingFocus`, the default): Tab enters and leaves the
+ * group at one item; Arrow keys move focus (wrapping); Home and End jump to
+ * the first and last item; Space and Enter toggle the focused item.
+ */
+export declare const ToggleGroup: (({ type, value: valueProp, defaultValue, onValueChange, required, attached, orientation, gap, rovingFocus, role, size, variant, tone, radius, disabled, checkmark, fullWidth, className, children, onKeyDown, ref, ...rest }: ToggleGroupProps) => import("react").JSX.Element) & {
+    /** One toggle in the group. See `ToggleGroupItem`. */
+    Item: ({ value, onFocus, tabIndex, ...props }: ToggleGroupItemProps) => import("react").JSX.Element;
+};
+export {};

package/dist/components/forms/ToggleGroup/ToggleGroup.mjs

@@ -0,0 +1,201 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { assignRef as t } from "../../../utils/refs.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { Icon as r } from "../../primitives/Icon/Icon.mjs";
+import i from "./ToggleGroup.module.css.mjs";
+import { createContext as a, useCallback as o, useContext as s, useLayoutEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/forms/ToggleGroup/ToggleGroup.tsx
+var h = {
+	solid: i.solid,
+	soft: i.soft,
+	outline: i.outline,
+	ghost: i.ghost
+}, g = {
+	neutral: i.neutral,
+	primary: i.primary,
+	accent: i.accent,
+	success: i.success,
+	warning: i.warning,
+	danger: i.danger,
+	info: i.info
+}, _ = {
+	sm: i.sm,
+	md: i.md,
+	lg: i.lg
+}, v = {
+	none: i.radiusNone,
+	xs: i.radiusXs,
+	sm: i.radiusSm,
+	md: i.radiusMd,
+	lg: i.radiusLg,
+	xl: i.radiusXl,
+	"2xl": i.radius2xl,
+	pill: i.radiusPill
+}, y = {
+	0: i.gap0,
+	1: i.gap1,
+	2: i.gap2,
+	3: i.gap3,
+	4: i.gap4,
+	5: i.gap5,
+	6: i.gap6,
+	8: i.gap8,
+	10: i.gap10,
+	12: i.gap12,
+	16: i.gap16,
+	20: i.gap20,
+	24: i.gap24
+}, b = a(null), x = "data-toggle-group-item", S = "data-toggle-group", C = ({ pressed: e, onToggle: t, variant: a, tone: o, size: c, radius: l, disabled: u, checkmark: d, fullWidth: y, startIcon: x, endIcon: S, icon: C, children: w, className: T, onClick: E, ...D }) => {
+	let O = s(b), k = a ?? O?.variant ?? "solid", A = o ?? O?.tone ?? "primary", j = c ?? O?.size ?? "md", M = l ?? O?.radius, N = !!(u || O?.disabled), P = w == null && C != null, F = !P && (y ?? O?.fullWidth ?? !1), I = e && !P && (d ?? O?.checkmark ?? !1), L = typeof w == "string" || typeof w == "number" ? String(w) : void 0, R = (e) => {
+		E?.(e), !(e.defaultPrevented || N) && t();
+	};
+	return /* @__PURE__ */ p("button", {
+		...D,
+		type: "button",
+		"aria-pressed": e,
+		disabled: N,
+		"data-state": e ? "on" : "off",
+		className: n(i.root, h[k], g[A], _[j], M ? v[M] : i.radiusDefault, e && i.pressed, P && i.iconOnly, F && i.fullWidth, !N && i.interactive, N && i.disabled, T),
+		onClick: R,
+		children: /* @__PURE__ */ m("span", {
+			className: i.content,
+			children: [I && /* @__PURE__ */ p("span", {
+				className: n(i.icon, i.check),
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ p(r, {
+					name: "check",
+					strokeWidth: 3
+				})
+			}), P ? /* @__PURE__ */ p("span", {
+				className: i.icon,
+				"aria-hidden": "true",
+				children: C
+			}) : /* @__PURE__ */ m(f, { children: [
+				x != null && /* @__PURE__ */ p("span", {
+					className: i.icon,
+					"aria-hidden": "true",
+					children: x
+				}),
+				w != null && /* @__PURE__ */ p("span", {
+					className: i.label,
+					"data-text": L,
+					children: w
+				}),
+				S != null && /* @__PURE__ */ p("span", {
+					className: i.icon,
+					"aria-hidden": "true",
+					children: S
+				})
+			] })]
+		})
+	});
+}, w = ({ pressed: t, defaultPressed: n = !1, onPressedChange: r, ...i }) => {
+	let [a, o] = e({
+		value: t,
+		defaultValue: n,
+		onChange: r
+	});
+	return /* @__PURE__ */ p(C, {
+		...i,
+		pressed: a,
+		onToggle: () => o((e) => !e)
+	});
+}, T = ({ value: e, onFocus: t, tabIndex: n, ...r }) => {
+	let i = s(b);
+	if (!i) throw Error("ToggleGroup.Item must be rendered inside a ToggleGroup.");
+	let a = (n) => {
+		t?.(n), i.setTabStop(e);
+	};
+	return /* @__PURE__ */ p(C, {
+		...r,
+		[x]: e,
+		pressed: i.isPressed(e),
+		onToggle: () => i.toggle(e),
+		onFocus: a,
+		tabIndex: i.rovingFocus ? i.tabStop === e ? 0 : -1 : n
+	});
+};
+function E(e) {
+	return Array.from(e.querySelectorAll(`[${x}]`)).filter((t) => !t.disabled && t.closest(`[${S}]`) === e);
+}
+var D = Object.assign(({ type: r, value: a, defaultValue: s, onValueChange: f, required: m = !1, attached: h = !1, orientation: g = "horizontal", gap: _ = 2, rovingFocus: v = !0, role: C = "group", size: w, variant: T, tone: D, radius: O, disabled: k, checkmark: A, fullWidth: j, className: M, children: N, onKeyDown: P, ref: F, ...I }) => {
+	let L = r === "multiple", [R, z] = e({
+		value: a,
+		defaultValue: s ?? (L ? [] : null),
+		onChange: f
+	}), B = u(null), V = o((e) => {
+		B.current = e, t(F, e);
+	}, [F]), [H, U] = d(null), W = l(() => Array.isArray(R) ? R : typeof R == "string" ? [R] : [], [R]), G = o((e) => W.includes(e), [W]), K = o((e) => {
+		z((t) => {
+			if (L) {
+				let n = Array.isArray(t) ? t : [];
+				return n.includes(e) ? m && n.length === 1 ? t : n.filter((t) => t !== e) : [...n, e];
+			}
+			return t === e ? m ? t : null : e;
+		});
+	}, [
+		L,
+		m,
+		z
+	]);
+	c(() => {
+		let e = B.current;
+		if (!v || !e) return;
+		let t = E(e).map((e) => e.getAttribute(x) ?? "");
+		if (H !== null && t.includes(H)) return;
+		let n = t.find((e) => W.includes(e)) ?? t[0] ?? null;
+		n !== H && U(n);
+	});
+	let q = (e) => {
+		P?.(e);
+		let t = B.current;
+		if (e.defaultPrevented || !v || !t || e.altKey || e.ctrlKey || e.metaKey) return;
+		let n = E(t), r = n.indexOf(e.target);
+		if (r === -1) return;
+		let i = g === "vertical", a = getComputedStyle(t).direction === "rtl", o = i ? "ArrowDown" : a ? "ArrowLeft" : "ArrowRight", s = i ? "ArrowUp" : a ? "ArrowRight" : "ArrowLeft", c = n.length, l = null;
+		e.key === o ? l = (r + 1) % c : e.key === s ? l = (r - 1 + c) % c : e.key === "Home" ? l = 0 : e.key === "End" && (l = c - 1), l !== null && (e.preventDefault(), n[l].focus());
+	}, J = l(() => ({
+		size: w,
+		variant: T,
+		tone: D,
+		radius: O,
+		disabled: k,
+		checkmark: A,
+		fullWidth: j,
+		isPressed: G,
+		toggle: K,
+		rovingFocus: v,
+		tabStop: H,
+		setTabStop: U
+	}), [
+		w,
+		T,
+		D,
+		O,
+		k,
+		A,
+		j,
+		G,
+		K,
+		v,
+		H
+	]), Y = g === "vertical";
+	return /* @__PURE__ */ p("div", {
+		...I,
+		[S]: "",
+		ref: V,
+		role: C,
+		"aria-orientation": C === "toolbar" ? g : void 0,
+		"aria-disabled": k ? !0 : void 0,
+		"data-orientation": g,
+		className: n(i.group, Y && i.groupVertical, h ? Y ? i.attachedVertical : i.attachedHorizontal : y[_], h && i.attached, j && i.groupFullWidth, M),
+		onKeyDown: q,
+		children: /* @__PURE__ */ p(b.Provider, {
+			value: J,
+			children: N
+		})
+	});
+}, { Item: T });
+//#endregion
+export { w as ToggleButton, D as ToggleGroup, T as ToggleGroupItem };

package/dist/components/forms/ToggleGroup/ToggleGroup.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1x950_51`,t=`_interactive_1x950_145`,n=`_content_1x950_153`,r=`_label_1x950_175`,i=`_icon_1x950_211`,a=`_check_1x950_237`,o=`_pop_1x950_1`,s=`_sm_1x950_269`,c=`_md_1x950_285`,l=`_lg_1x950_301`,u=`_radiusDefault_1x950_319`,d=`_radiusNone_1x950_325`,f=`_radiusXs_1x950_331`,p=`_radiusSm_1x950_337`,m=`_radiusMd_1x950_343`,h=`_radiusLg_1x950_349`,g=`_radiusXl_1x950_355`,_=`_radius2xl_1x950_361`,v=`_radiusPill_1x950_367`,y=`_primary_1x950_383`,b=`_neutral_1x950_405`,x=`_accent_1x950_427`,S=`_success_1x950_449`,C=`_warning_1x950_471`,w=`_danger_1x950_493`,T=`_info_1x950_515`,E=`_solid_1x950_539`,D=`_outline_1x950_541`,O=`_soft_1x950_549`,k=`_pressed_1x950_563`,A=`_ghost_1x950_557`,j=`_iconOnly_1x950_699`,M=`_fullWidth_1x950_713`,N=`_disabled_1x950_727`,P=`_group_1x950_801`,F=`_groupVertical_1x950_815`,I=`_groupFullWidth_1x950_827`,L=`_gap0_1x950_845`,R=`_gap1_1x950_851`,z=`_gap2_1x950_857`,B=`_gap3_1x950_863`,V=`_gap4_1x950_869`,H=`_gap5_1x950_875`,U=`_gap6_1x950_881`,W=`_gap8_1x950_887`,G=`_gap10_1x950_893`,K=`_gap12_1x950_899`,q=`_gap16_1x950_905`,J=`_gap20_1x950_911`,Y=`_gap24_1x950_917`,X=`_attached_1x950_927`,Z=`_attachedHorizontal_1x950_965`,Q=`_attachedVertical_1x950_1007`,$={root:e,interactive:t,content:n,label:r,icon:i,check:a,pop:o,sm:s,md:c,lg:l,radiusDefault:u,radiusNone:d,radiusXs:f,radiusSm:p,radiusMd:m,radiusLg:h,radiusXl:g,radius2xl:_,radiusPill:v,primary:y,neutral:b,accent:x,success:S,warning:C,danger:w,info:T,solid:E,outline:D,soft:O,pressed:k,ghost:A,iconOnly:j,fullWidth:M,disabled:N,group:P,groupVertical:F,groupFullWidth:I,gap0:L,gap1:R,gap2:z,gap3:B,gap4:V,gap5:H,gap6:U,gap8:W,gap10:G,gap12:K,gap16:q,gap20:J,gap24:Y,attached:X,attachedHorizontal:Z,attachedVertical:Q};exports.accent=x,exports.attached=X,exports.attachedHorizontal=Z,exports.attachedVertical=Q,exports.check=a,exports.content=n,exports.danger=w,exports.default=$,exports.disabled=N,exports.fullWidth=M,exports.gap0=L,exports.gap1=R,exports.gap10=G,exports.gap12=K,exports.gap16=q,exports.gap2=z,exports.gap20=J,exports.gap24=Y,exports.gap3=B,exports.gap4=V,exports.gap5=H,exports.gap6=U,exports.gap8=W,exports.ghost=A,exports.group=P,exports.groupFullWidth=I,exports.groupVertical=F,exports.icon=i,exports.iconOnly=j,exports.info=T,exports.interactive=t,exports.label=r,exports.lg=l,exports.md=c,exports.neutral=b,exports.outline=D,exports.pop=o,exports.pressed=k,exports.primary=y,exports.radius2xl=_,exports.radiusDefault=u,exports.radiusLg=h,exports.radiusMd=m,exports.radiusNone=d,exports.radiusPill=v,exports.radiusSm=p,exports.radiusXl=g,exports.radiusXs=f,exports.root=e,exports.sm=s,exports.soft=O,exports.solid=E,exports.success=S,exports.warning=C;

package/dist/components/forms/ToggleGroup/ToggleGroup.module.css.mjs

@@ -0,0 +1,58 @@
+//#region src/components/forms/ToggleGroup/ToggleGroup.module.css
+var e = "_root_1x950_51", t = "_interactive_1x950_145", n = "_content_1x950_153", r = "_label_1x950_175", i = "_icon_1x950_211", a = "_check_1x950_237", o = "_pop_1x950_1", s = "_sm_1x950_269", c = "_md_1x950_285", l = "_lg_1x950_301", u = "_radiusDefault_1x950_319", d = "_radiusNone_1x950_325", f = "_radiusXs_1x950_331", p = "_radiusSm_1x950_337", m = "_radiusMd_1x950_343", h = "_radiusLg_1x950_349", g = "_radiusXl_1x950_355", _ = "_radius2xl_1x950_361", v = "_radiusPill_1x950_367", y = "_primary_1x950_383", b = "_neutral_1x950_405", x = "_accent_1x950_427", S = "_success_1x950_449", C = "_warning_1x950_471", w = "_danger_1x950_493", T = "_info_1x950_515", E = "_solid_1x950_539", D = "_outline_1x950_541", O = "_soft_1x950_549", k = "_pressed_1x950_563", A = "_ghost_1x950_557", j = "_iconOnly_1x950_699", M = "_fullWidth_1x950_713", N = "_disabled_1x950_727", P = "_group_1x950_801", F = "_groupVertical_1x950_815", I = "_groupFullWidth_1x950_827", L = "_gap0_1x950_845", R = "_gap1_1x950_851", z = "_gap2_1x950_857", B = "_gap3_1x950_863", V = "_gap4_1x950_869", H = "_gap5_1x950_875", U = "_gap6_1x950_881", W = "_gap8_1x950_887", G = "_gap10_1x950_893", K = "_gap12_1x950_899", q = "_gap16_1x950_905", J = "_gap20_1x950_911", Y = "_gap24_1x950_917", X = "_attached_1x950_927", Z = "_attachedHorizontal_1x950_965", Q = "_attachedVertical_1x950_1007", $ = {
+	root: e,
+	interactive: t,
+	content: n,
+	label: r,
+	icon: i,
+	check: a,
+	pop: o,
+	sm: s,
+	md: c,
+	lg: l,
+	radiusDefault: u,
+	radiusNone: d,
+	radiusXs: f,
+	radiusSm: p,
+	radiusMd: m,
+	radiusLg: h,
+	radiusXl: g,
+	radius2xl: _,
+	radiusPill: v,
+	primary: y,
+	neutral: b,
+	accent: x,
+	success: S,
+	warning: C,
+	danger: w,
+	info: T,
+	solid: E,
+	outline: D,
+	soft: O,
+	pressed: k,
+	ghost: A,
+	iconOnly: j,
+	fullWidth: M,
+	disabled: N,
+	group: P,
+	groupVertical: F,
+	groupFullWidth: I,
+	gap0: L,
+	gap1: R,
+	gap2: z,
+	gap3: B,
+	gap4: V,
+	gap5: H,
+	gap6: U,
+	gap8: W,
+	gap10: G,
+	gap12: K,
+	gap16: q,
+	gap20: J,
+	gap24: Y,
+	attached: X,
+	attachedHorizontal: Z,
+	attachedVertical: Q
+};
+//#endregion
+export { x as accent, X as attached, Z as attachedHorizontal, Q as attachedVertical, a as check, n as content, w as danger, $ as default, N as disabled, M as fullWidth, L as gap0, R as gap1, G as gap10, K as gap12, q as gap16, z as gap2, J as gap20, Y as gap24, B as gap3, V as gap4, H as gap5, U as gap6, W as gap8, A as ghost, P as group, I as groupFullWidth, F as groupVertical, i as icon, j as iconOnly, T as info, t as interactive, r as label, l as lg, c as md, b as neutral, D as outline, o as pop, k as pressed, y as primary, _ as radius2xl, u as radiusDefault, h as radiusLg, m as radiusMd, d as radiusNone, v as radiusPill, p as radiusSm, g as radiusXl, f as radiusXs, e as root, s as sm, O as soft, E as solid, S as success, C as warning };

package/dist/components/forms/ToggleGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleGroup';

package/dist/components/layout/Box/Box.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("./Box.module.css.cjs.js");let n=require("react/jsx-runtime");var r={bg:t.default.surfaceBg,surface:t.default.surfaceSurface,raised:t.default.surfaceRaised,sunken:t.default.surfaceSunken},i={soft:{neutral:t.default.softNeutral,primary:t.default.softPrimary,accent:t.default.softAccent,success:t.default.softSuccess,warning:t.default.softWarning,danger:t.default.softDanger,info:t.default.softInfo},solid:{neutral:t.default.solidNeutral,primary:t.default.solidPrimary,accent:t.default.solidAccent,success:t.default.solidSuccess,warning:t.default.solidWarning,danger:t.default.solidDanger,info:t.default.solidInfo}},a={none:t.default.radiusNone,xs:t.default.radiusXs,sm:t.default.radiusSm,md:t.default.radiusMd,lg:t.default.radiusLg,xl:t.default.radiusXl,"2xl":t.default.radius2xl,pill:t.default.radiusPill},o={none:t.default.shadowNone,xs:t.default.shadowXs,sm:t.default.shadowSm,md:t.default.shadowMd,lg:t.default.shadowLg,xl:t.default.shadowXl},ee={default:t.default.borderDefault,strong:t.default.borderStrong},te={block:t.default.displayBlock,inline:t.default.displayInline,"inline-block":t.default.displayInlineBlock,flex:t.default.displayFlex,"inline-flex":t.default.displayInlineFlex,grid:t.default.displayGrid,"inline-grid":t.default.displayInlineGrid,contents:t.default.displayContents,none:t.default.displayNone},s={static:t.default.positionStatic,relative:t.default.positionRelative,absolute:t.default.positionAbsolute,fixed:t.default.positionFixed,sticky:t.default.positionSticky},c={visible:t.default.overflowVisible,hidden:t.default.overflowHidden,auto:t.default.overflowAuto,scroll:t.default.overflowScroll,clip:t.default.overflowClip},l={start:t.default.textStart,center:t.default.textCenter,end:t.default.textEnd,justify:t.default.textJustify};function u(e){return e===`auto`?`auto`:`var(--space-${e})`}function d(e){return typeof e==`number`?`${e}px`:e}var f=[`p`,`px`,`py`,`pt`,`pr`,`pb`,`pl`,`m`,`mx`,`my`,`mt`,`mr`,`mb`,`ml`],p=new Set([`img`,`video`,`canvas`,`svg`,`iframe`]),ne=[`width`,`height`,`minWidth`,`maxWidth`,`minHeight`,`maxHeight`];function m(m){let{as:h,surface:g,tone:_,variant:v=`soft`,radius:y,shadow:b,border:x,display:S,position:C,overflow:w,textAlign:T,p:E,px:D,py:O,pt:k,pr:A,pb:j,pl:M,m:N,mx:P,my:re,mt:F,mr:I,mb:L,ml:R,width:z,height:B,minWidth:V,maxWidth:H,minHeight:U,maxHeight:W,className:G,style:K,...q}=m,J=h??`div`,Y={p:E,px:D,py:O,pt:k,pr:A,pb:j,pl:M,m:N,mx:P,my:re,mt:F,mr:I,mb:L,ml:R},X={width:z,height:B,minWidth:V,maxWidth:H,minHeight:U,maxHeight:W},Z={},Q=[];for(let e of f){let n=Y[e];n!==void 0&&(Z[`--box-${e}`]=u(n),Q.push(t.default[e]))}for(let e of ne){let n=X[e];n!==void 0&&(Z[`--box-${e}`]=d(n),Q.push(t.default[e]))}let $=x===!0?`default`:x||void 0,ie=typeof J==`string`&&p.has(J)?{...typeof z==`number`?{width:z}:null,...typeof B==`number`?{height:B}:null}:null;return(0,n.jsx)(J,{className:e.cx(t.default.root,_?i[v][_]:g&&r[g],y&&a[y],b&&o[b],$&&ee[$],S&&te[S],C&&s[C],w&&c[w],T&&l[T],...Q,G),style:{...Z,...K},...ie,...q})}exports.Box=m,exports.sizeValue=d,exports.spaceVar=u;

package/dist/components/layout/Box/Box.d.ts

@@ -0,0 +1,120 @@
+import { ComponentPropsWithRef, ElementType } from 'react';
+import { Radius, Space, Tone } from '../../../types/common';
+/** A spacing step, mapped to `--space-{n}`. */
+export type SpaceValue = Space;
+/** A margin step, or `"auto"` (e.g. to center with `mx="auto"`). */
+export type MarginValue = Space | "auto";
+/** Padding and margin shorthands for Box. (Stack, Flex, and Grid don't take them; wrap in a Box or use `style`.) */
+export interface SpacingProps {
+    /** Padding on all sides (`--space-*` step). */
+    p?: SpaceValue;
+    /** Horizontal padding (inline start and end). Overrides `p`. */
+    px?: SpaceValue;
+    /** Vertical padding (block start and end). Overrides `p`. */
+    py?: SpaceValue;
+    /** Top padding. Overrides `p` and `py`. */
+    pt?: SpaceValue;
+    /** End padding (right in left-to-right, left in right-to-left). Overrides `p` and `px`. */
+    pr?: SpaceValue;
+    /** Bottom padding. Overrides `p` and `py`. */
+    pb?: SpaceValue;
+    /** Start padding (left in left-to-right, right in right-to-left). Overrides `p` and `px`. */
+    pl?: SpaceValue;
+    /** Margin on all sides (`--space-*` step or `"auto"`). */
+    m?: MarginValue;
+    /** Horizontal margin. Overrides `m`. */
+    mx?: MarginValue;
+    /** Vertical margin. Overrides `m`. */
+    my?: MarginValue;
+    /** Top margin. Overrides `m` and `my`. */
+    mt?: MarginValue;
+    /** End margin (right in left-to-right). Overrides `m` and `mx`. */
+    mr?: MarginValue;
+    /** Bottom margin. Overrides `m` and `my`. */
+    mb?: MarginValue;
+    /** Start margin (left in left-to-right). Overrides `m` and `mx`. */
+    ml?: MarginValue;
+}
+/** Any CSS length (`"20rem"`, `"100%"`, `"min(100%, 40rem)"`). Numbers are treated as px. */
+export type SizeValue = string | number;
+/** Width and height constraints. */
+export interface SizingProps {
+    /**
+     * CSS width. Numbers are px. On a media element (`as="img"`, `video`,
+     * `canvas`, `svg`, `iframe`) a number is also set as the HTML
+     * `width` attribute, so the browser can reserve its aspect ratio.
+     */
+    width?: SizeValue;
+    /** CSS height. Numbers are px. On a media element a number is also the HTML `height` attribute. */
+    height?: SizeValue;
+    /** CSS min-width. Numbers are px. */
+    minWidth?: SizeValue;
+    /** CSS max-width. Numbers are px. */
+    maxWidth?: SizeValue;
+    /** CSS min-height. Numbers are px. */
+    minHeight?: SizeValue;
+    /** CSS max-height. Numbers are px. */
+    maxHeight?: SizeValue;
+}
+export type BoxSurface = "bg" | "surface" | "raised" | "sunken";
+export type BoxVariant = "soft" | "solid";
+export type BoxShadow = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type BoxBorder = boolean | "default" | "strong";
+export type BoxDisplay = "block" | "inline" | "inline-block" | "flex" | "inline-flex" | "grid" | "inline-grid" | "contents" | "none";
+export type BoxPosition = "static" | "relative" | "absolute" | "fixed" | "sticky";
+export type BoxOverflow = "visible" | "hidden" | "auto" | "scroll" | "clip";
+export type BoxTextAlign = "start" | "center" | "end" | "justify";
+/** Box's own styling props (everything except `as` and native props). */
+export interface BoxStyleProps extends SpacingProps, SizingProps {
+    /** Neutral surface background, paired with `--color-text`. Ignored when `tone` is set. */
+    surface?: BoxSurface;
+    /**
+     * Semantic tint. `soft` uses `--color-{tone}-subtle` with `--color-{tone}-subtle-text`;
+     * `solid` uses `--color-{tone}` with `--color-on-{tone}`. `neutral` maps to the sunken
+     * surface (soft) or inverted text colors (solid).
+     */
+    tone?: Tone;
+    /** How `tone` is applied. Only used when `tone` is set. @default "soft" */
+    variant?: BoxVariant;
+    /** Corner rounding (`--radius-*`). */
+    radius?: Radius;
+    /** Soft drop shadow (`--shadow-*`). */
+    shadow?: BoxShadow;
+    /**
+     * Border. `true` or `"default"` uses `--color-border` (decorative, low contrast);
+     * `"strong"` uses `--color-border-strong`, which meets 3:1 for meaningful boundaries.
+     */
+    border?: BoxBorder;
+    /** CSS display. */
+    display?: BoxDisplay;
+    /** CSS position. */
+    position?: BoxPosition;
+    /** CSS overflow. */
+    overflow?: BoxOverflow;
+    /** Text alignment (logical: `start`/`end` follow writing direction). */
+    textAlign?: BoxTextAlign;
+}
+type BoxOwnProps<E extends ElementType> = BoxStyleProps & {
+    /** Element or component to render. @default "div" */
+    as?: E;
+};
+/**
+ * Box props for element `E`: Box's own props plus the native props of `E`
+ * (including `ref`). Box props win on name clashes (e.g. `width`, `height`,
+ * and `border` shadow the HTML attributes of the same name).
+ */
+export type BoxProps<E extends ElementType = "div"> = BoxOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof BoxOwnProps<E>>;
+/** Resolves a spacing step to its token: `4` -> `var(--space-4)`; `"auto"` passes through. */
+export declare function spaceVar(value: MarginValue): string;
+/** Resolves a size: numbers become px, strings pass through. */
+export declare function sizeValue(value: SizeValue): string;
+/**
+ * Box: the polymorphic base building block. Renders `as` (default `div`)
+ * with token-based spacing, surfaces, tints, radius, shadow, and border.
+ *
+ * Box adds no semantics. When rendering an interactive element
+ * (`as="a"` with `href`, `as="button"`), you own its accessible name,
+ * keyboard behavior, and states; prefer the dedicated components.
+ */
+export declare function Box<E extends ElementType = "div">(props: BoxProps<E>): import("react").JSX.Element;
+export {};