@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/forms/Radio/Radio.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Icon/Icon.cjs.js"),i=require("../Field/FieldContext.cjs.js"),a=require("./Radio.module.css.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c={sm:a.default.sm,md:a.default.md,lg:a.default.lg},l={neutral:a.default.toneNeutral,primary:a.default.tonePrimary,accent:a.default.toneAccent,success:a.default.toneSuccess,warning:a.default.toneWarning,danger:a.default.toneDanger,info:a.default.toneInfo},u={vertical:a.default.vertical,horizontal:a.default.horizontal},d=(0,o.createContext)(null);function f(){return(0,o.useContext)(d)}var p=(...e)=>e.filter(Boolean).join(` `)||void 0;function m({value:r,defaultValue:l,onValueChange:f,name:m,orientation:h=`vertical`,size:g,tone:_=`primary`,disabled:v,invalid:y,required:b,label:x,description:S,className:C,children:w,id:T,"aria-describedby":E,"aria-labelledby":D,...O}){let k=i.useFieldContext(),A=(0,o.useId)(),j=`${A}-label`,M=`${A}-description`,N=k!==null,P=!N&&x!=null,F=S!=null,I=i.useFieldControl({id:T,invalid:y,required:b,disabled:v,size:g,"aria-describedby":p(F&&M,E)}),[L,R]=e.useControllableState({value:r,defaultValue:l,onChange:f});t.useFormReset(()=>I.id?document.getElementById(I.id):null,()=>R(l),r===void 0);let z=I.size??`md`,B={name:m??`radio-${A}`,value:L,setValue:R,size:z,tone:_,disabled:I.disabled,invalid:I.invalid,required:I.required,inFieldset:!1},V=k?.isGroup===!0&&D===void 0;B.inFieldset=V,B.itemDescribedBy=V?p(F&&M,E):void 0;let H=D??(N?k.labelId:P?j:void 0),U=V?{"aria-describedby":p(F&&M,E)}:{role:`radiogroup`,"aria-labelledby":H,...I.ariaProps,"aria-disabled":I.disabled||void 0,"aria-required":I.required||void 0};return(0,s.jsx)(d.Provider,{value:B,children:(0,s.jsxs)(`div`,{id:I.id,...U,...O,"data-disabled":I.disabled||void 0,"data-invalid":I.invalid||void 0,className:n.cx(a.default.group,c[z],C),children:[(P||F)&&(0,s.jsxs)(`div`,{className:a.default.groupHeader,children:[P&&(0,s.jsxs)(`span`,{id:j,className:a.default.groupLabel,children:[x,I.required&&(0,s.jsxs)(`span`,{className:a.default.requiredMark,"aria-hidden":`true`,children:[` `,`*`]})]}),F&&(0,s.jsx)(`span`,{id:M,className:a.default.groupDescription,children:S})]}),(0,s.jsx)(`div`,{className:n.cx(a.default.items,u[h]),children:w})]})})}function h(e,t){let n=f(),{onChange:r,invalid:i,disabled:a,name:o,checked:s,required:c,...l}=t,u=!!(a||n?.disabled),d=i??n?.invalid??!1;return{inputProps:{...l,type:`radio`,value:e,name:o??n?.name,disabled:u,required:c??n?.required,"aria-invalid":l[`aria-invalid`]??(d&&(!n||n.inFieldset)?!0:void 0),"aria-describedby":p(l[`aria-describedby`],n?.itemDescribedBy),checked:n?n.value===e:s,onChange:t=>{r?.(t),!t.defaultPrevented&&t.target.checked&&n?.setValue(e)}},disabled:u,invalid:d,group:n}}function g({value:e,label:t,description:r,size:i,tone:u,className:d,style:f,id:m,"aria-describedby":g,..._}){let v=(0,o.useId)(),y=m??v,b=`${y}-description`,x=r!=null,{inputProps:S,disabled:C,invalid:w,group:T}=h(e,{..._,"aria-describedby":p(x&&b,g)}),E=i??T?.size??`md`,D=u??T?.tone??`primary`;return(0,s.jsxs)(`label`,{htmlFor:y,style:f,"data-disabled":C||void 0,"data-invalid":w||void 0,className:n.cx(a.default.radio,c[E],l[D],d),children:[(0,s.jsxs)(`span`,{className:a.default.controlWrap,children:[(0,s.jsx)(`input`,{id:y,className:a.default.input,...S}),(0,s.jsx)(`span`,{className:a.default.control,"aria-hidden":`true`,children:(0,s.jsx)(`span`,{className:a.default.dot})})]}),(t!==void 0||x)&&(0,s.jsxs)(`span`,{className:a.default.text,children:[t!==void 0&&(0,s.jsx)(`span`,{className:a.default.label,children:t}),x&&(0,s.jsx)(`span`,{id:b,className:a.default.description,children:r})]})]})}function _({value:e,title:t,description:i,icon:c,media:u,meta:d,children:f,tone:m,className:g,style:_,id:v,"aria-describedby":y,"aria-labelledby":b,...x}){let S=(0,o.useId)(),C=v??S,w=`${C}-title`,T=`${C}-description`,E=`${C}-meta`,D=i!=null,O=d!=null,{inputProps:k,disabled:A,invalid:j,group:M}=h(e,{...x,"aria-labelledby":b??w,"aria-describedby":p(D&&T,O&&E,y)}),N=m??M?.tone??`primary`;return(0,s.jsxs)(`label`,{htmlFor:C,style:_,"data-disabled":A||void 0,"data-invalid":j||void 0,className:n.cx(a.default.card,l[N],g),children:[u!=null&&(0,s.jsx)(`span`,{className:a.default.cardMedia,children:u}),(0,s.jsxs)(`span`,{className:a.default.cardHeader,children:[c!=null&&(0,s.jsx)(`span`,{className:a.default.cardIcon,"aria-hidden":`true`,children:c}),(0,s.jsxs)(`span`,{className:a.default.cardHeading,children:[(0,s.jsx)(`span`,{id:w,className:a.default.cardTitle,children:t}),D&&(0,s.jsx)(`span`,{id:T,className:a.default.cardDescription,children:i})]}),(0,s.jsxs)(`span`,{className:a.default.cardIndicator,children:[(0,s.jsx)(`input`,{id:C,className:a.default.input,...k}),(0,s.jsx)(`span`,{className:a.default.cardControl,"aria-hidden":`true`,children:(0,s.jsx)(r.Icon,{name:`check`,size:`sm`,strokeWidth:3,className:a.default.cardCheck})})]})]}),O&&(0,s.jsx)(`span`,{id:E,className:a.default.cardMeta,children:d}),f!=null&&(0,s.jsx)(`span`,{className:a.default.cardBody,children:f})]})}exports.Radio=g,exports.RadioCard=_,exports.RadioGroup=m,exports.useRadioGroupContext=f;

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

@@ -0,0 +1,119 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Orientation, Size, Tone } from '../../../types/common';
+interface RadioGroupContextValue {
+    name: string;
+    value: string | undefined;
+    setValue: (value: string) => void;
+    size: Size;
+    tone: Tone;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    /**
+     * Inside a Fieldset the group has no role, so each radio carries the
+     * group's invalid state and own description instead.
+     */
+    inFieldset: boolean;
+    itemDescribedBy?: string;
+}
+/** Returns the surrounding RadioGroup's state, or null outside a group. */
+export declare function useRadioGroupContext(): RadioGroupContextValue | null;
+export interface RadioGroupProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "dir"> {
+    /** Selected value (controlled). Use with `onValueChange`. */
+    value?: string;
+    /** Initially selected value (uncontrolled). Leave unset for no initial selection. */
+    defaultValue?: string;
+    /** Called with the newly selected option's `value`. */
+    onValueChange?: (value: string) => void;
+    /** Shared `name` for the native radios (used in form submission). Generated with `useId` when omitted. */
+    name?: string;
+    /** Layout of the options. Horizontal options wrap onto new lines when space runs out. @default "vertical" */
+    orientation?: Orientation;
+    /** Size of every option. Falls back to a surrounding Field's size. @default "md" */
+    size?: Size;
+    /** Color of the checked ring and dot. @default "primary" */
+    tone?: Tone;
+    /** Disables every option. Falls back to a surrounding Field's state. */
+    disabled?: boolean;
+    /** Marks the group invalid: danger borders and `aria-invalid`. Falls back to a surrounding Field's state. */
+    invalid?: boolean;
+    /** A selection is required: sets native `required` on the radios and `aria-required` on the group. */
+    required?: boolean;
+    /**
+     * Visible group label, used when the group stands alone. Ignored inside a
+     * group `Field`/`Fieldset`, whose legend already names the group.
+     * Without a label, pass `aria-label` or `aria-labelledby`.
+     */
+    label?: ReactNode;
+    /** Help text below the group label, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /** `Radio` or `RadioCard` options. May be wrapped in layout (e.g. a Grid of RadioCards). */
+    children?: ReactNode;
+}
+/**
+ * A set of mutually exclusive options. Renders `role="radiogroup"` around
+ * real native `<input type="radio">` elements that share a `name`, so Tab
+ * lands on the checked (or first) option, arrow keys move and select, and
+ * the value submits with a form. Works standalone (with `label`) or inside a
+ * `Fieldset`/group `Field`, where it picks up the legend, hint, error,
+ * invalid, required, and disabled state.
+ */
+export declare function RadioGroup({ value: valueProp, defaultValue, onValueChange, name, orientation, size: sizeProp, tone, disabled: disabledProp, invalid: invalidProp, required: requiredProp, label, description, className, children, id: idProp, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...rest }: RadioGroupProps): import("react").JSX.Element;
+type NativeRadioProps = Omit<ComponentPropsWithRef<"input">, "type" | "size" | "value" | "children" | "title">;
+export interface RadioProps extends NativeRadioProps {
+    /** Value submitted with the form and reported by `RadioGroup`'s `onValueChange`. */
+    value: string;
+    /** Visible label. The whole label is clickable. Without one, pass `aria-label`. */
+    label?: ReactNode;
+    /** Supporting text under the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /** Disables this option (the group's `disabled` also applies). */
+    disabled?: boolean;
+    /** Size. Inherits the group's size. @default "md" */
+    size?: Size;
+    /** Checked color. Inherits the group's tone. @default "primary" */
+    tone?: Tone;
+    /** Invalid styling. Inherits the group's state. */
+    invalid?: boolean;
+    /** Class for the outer label element. The `ref` and other native props go to the input. */
+    className?: string;
+}
+/**
+ * A single option in a `RadioGroup`: a native radio (visually hidden but
+ * focusable) with a custom ring-and-dot indicator and a clickable label.
+ * `ref` points at the `<input>`. Outside a group it behaves like a plain
+ * native radio (`name`, `checked`/`defaultChecked`).
+ */
+export declare function Radio({ value, label, description, size: sizeProp, tone: toneProp, className, style, id: idProp, "aria-describedby": ariaDescribedBy, ...props }: RadioProps): import("react").JSX.Element;
+export interface RadioCardProps extends NativeRadioProps {
+    /** Value submitted with the form and reported by `RadioGroup`'s `onValueChange`. */
+    value: string;
+    /** Card title, in the display font. Becomes the radio's accessible name. */
+    title: ReactNode;
+    /** Supporting text under the title, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /** Decorative icon shown in a tinted tile at the start of the header (e.g. `<Icon name="star" />`). */
+    icon?: ReactNode;
+    /** Media (e.g. an `<img>`) shown full-bleed at the top of the card. Give images empty `alt` if decorative. */
+    media?: ReactNode;
+    /** Price or meta slot, shown prominently under the description (e.g. `"$29 / mo"`). Linked with `aria-describedby`. */
+    meta?: ReactNode;
+    /** Extra content at the bottom of the card (e.g. a feature list). Not part of the accessible name. */
+    children?: ReactNode;
+    /** Disables this option (the group's `disabled` also applies). */
+    disabled?: boolean;
+    /** Selected ring and indicator color. Inherits the group's tone. @default "primary" */
+    tone?: Tone;
+    /** Invalid styling. Inherits the group's state. */
+    invalid?: boolean;
+    /** Class for the card (label) element. The `ref` and other native props go to the input. */
+    className?: string;
+}
+/**
+ * A large, card-style radio option. The whole card is the `<label>`, with a
+ * native radio underneath, so keyboard, form, and screen reader behavior
+ * match `Radio`. When checked, the card shows a ring and the indicator turns
+ * into a filled check (shape, not color alone).
+ */
+export declare function RadioCard({ value, title, description, icon, media, meta, children, tone: toneProp, className, style, id: idProp, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...props }: RadioCardProps): import("react").JSX.Element;
+export {};

package/dist/components/forms/Radio/Radio.mjs

@@ -0,0 +1,220 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { Icon as r } from "../../primitives/Icon/Icon.mjs";
+import { useFieldContext as i, useFieldControl as a } from "../Field/FieldContext.mjs";
+import o from "./Radio.module.css.mjs";
+import { createContext as s, useContext as c, useId as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/forms/Radio/Radio.tsx
+var f = {
+	sm: o.sm,
+	md: o.md,
+	lg: o.lg
+}, p = {
+	neutral: o.toneNeutral,
+	primary: o.tonePrimary,
+	accent: o.toneAccent,
+	success: o.toneSuccess,
+	warning: o.toneWarning,
+	danger: o.toneDanger,
+	info: o.toneInfo
+}, m = {
+	vertical: o.vertical,
+	horizontal: o.horizontal
+}, h = s(null);
+function g() {
+	return c(h);
+}
+var _ = (...e) => e.filter(Boolean).join(" ") || void 0;
+function v({ value: r, defaultValue: s, onValueChange: c, name: p, orientation: g = "vertical", size: v, tone: y = "primary", disabled: b, invalid: x, required: S, label: C, description: w, className: T, children: E, id: D, "aria-describedby": O, "aria-labelledby": k, ...A }) {
+	let j = i(), M = l(), N = `${M}-label`, P = `${M}-description`, F = j !== null, I = !F && C != null, L = w != null, R = a({
+		id: D,
+		invalid: x,
+		required: S,
+		disabled: b,
+		size: v,
+		"aria-describedby": _(L && P, O)
+	}), [z, B] = e({
+		value: r,
+		defaultValue: s,
+		onChange: c
+	});
+	t(() => R.id ? document.getElementById(R.id) : null, () => B(s), r === void 0);
+	let V = R.size ?? "md", H = {
+		name: p ?? `radio-${M}`,
+		value: z,
+		setValue: B,
+		size: V,
+		tone: y,
+		disabled: R.disabled,
+		invalid: R.invalid,
+		required: R.required,
+		inFieldset: !1
+	}, U = j?.isGroup === !0 && k === void 0;
+	H.inFieldset = U, H.itemDescribedBy = U ? _(L && P, O) : void 0;
+	let W = k ?? (F ? j.labelId : I ? N : void 0), G = U ? { "aria-describedby": _(L && P, O) } : {
+		role: "radiogroup",
+		"aria-labelledby": W,
+		...R.ariaProps,
+		"aria-disabled": R.disabled || void 0,
+		"aria-required": R.required || void 0
+	};
+	return /* @__PURE__ */ u(h.Provider, {
+		value: H,
+		children: /* @__PURE__ */ d("div", {
+			id: R.id,
+			...G,
+			...A,
+			"data-disabled": R.disabled || void 0,
+			"data-invalid": R.invalid || void 0,
+			className: n(o.group, f[V], T),
+			children: [(I || L) && /* @__PURE__ */ d("div", {
+				className: o.groupHeader,
+				children: [I && /* @__PURE__ */ d("span", {
+					id: N,
+					className: o.groupLabel,
+					children: [C, R.required && /* @__PURE__ */ d("span", {
+						className: o.requiredMark,
+						"aria-hidden": "true",
+						children: [" ", "*"]
+					})]
+				}), L && /* @__PURE__ */ u("span", {
+					id: P,
+					className: o.groupDescription,
+					children: w
+				})]
+			}), /* @__PURE__ */ u("div", {
+				className: n(o.items, m[g]),
+				children: E
+			})]
+		})
+	});
+}
+function y(e, t) {
+	let n = g(), { onChange: r, invalid: i, disabled: a, name: o, checked: s, required: c, ...l } = t, u = !!(a || n?.disabled), d = i ?? n?.invalid ?? !1;
+	return {
+		inputProps: {
+			...l,
+			type: "radio",
+			value: e,
+			name: o ?? n?.name,
+			disabled: u,
+			required: c ?? n?.required,
+			"aria-invalid": l["aria-invalid"] ?? (d && (!n || n.inFieldset) ? !0 : void 0),
+			"aria-describedby": _(l["aria-describedby"], n?.itemDescribedBy),
+			checked: n ? n.value === e : s,
+			onChange: (t) => {
+				r?.(t), !t.defaultPrevented && t.target.checked && n?.setValue(e);
+			}
+		},
+		disabled: u,
+		invalid: d,
+		group: n
+	};
+}
+function b({ value: e, label: t, description: r, size: i, tone: a, className: s, style: c, id: m, "aria-describedby": h, ...g }) {
+	let v = l(), b = m ?? v, x = `${b}-description`, S = r != null, { inputProps: C, disabled: w, invalid: T, group: E } = y(e, {
+		...g,
+		"aria-describedby": _(S && x, h)
+	}), D = i ?? E?.size ?? "md", O = a ?? E?.tone ?? "primary";
+	return /* @__PURE__ */ d("label", {
+		htmlFor: b,
+		style: c,
+		"data-disabled": w || void 0,
+		"data-invalid": T || void 0,
+		className: n(o.radio, f[D], p[O], s),
+		children: [/* @__PURE__ */ d("span", {
+			className: o.controlWrap,
+			children: [/* @__PURE__ */ u("input", {
+				id: b,
+				className: o.input,
+				...C
+			}), /* @__PURE__ */ u("span", {
+				className: o.control,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ u("span", { className: o.dot })
+			})]
+		}), (t !== void 0 || S) && /* @__PURE__ */ d("span", {
+			className: o.text,
+			children: [t !== void 0 && /* @__PURE__ */ u("span", {
+				className: o.label,
+				children: t
+			}), S && /* @__PURE__ */ u("span", {
+				id: x,
+				className: o.description,
+				children: r
+			})]
+		})]
+	});
+}
+function x({ value: e, title: t, description: i, icon: a, media: s, meta: c, children: f, tone: m, className: h, style: g, id: v, "aria-describedby": b, "aria-labelledby": x, ...S }) {
+	let C = l(), w = v ?? C, T = `${w}-title`, E = `${w}-description`, D = `${w}-meta`, O = i != null, k = c != null, { inputProps: A, disabled: j, invalid: M, group: N } = y(e, {
+		...S,
+		"aria-labelledby": x ?? T,
+		"aria-describedby": _(O && E, k && D, b)
+	}), P = m ?? N?.tone ?? "primary";
+	return /* @__PURE__ */ d("label", {
+		htmlFor: w,
+		style: g,
+		"data-disabled": j || void 0,
+		"data-invalid": M || void 0,
+		className: n(o.card, p[P], h),
+		children: [
+			s != null && /* @__PURE__ */ u("span", {
+				className: o.cardMedia,
+				children: s
+			}),
+			/* @__PURE__ */ d("span", {
+				className: o.cardHeader,
+				children: [
+					a != null && /* @__PURE__ */ u("span", {
+						className: o.cardIcon,
+						"aria-hidden": "true",
+						children: a
+					}),
+					/* @__PURE__ */ d("span", {
+						className: o.cardHeading,
+						children: [/* @__PURE__ */ u("span", {
+							id: T,
+							className: o.cardTitle,
+							children: t
+						}), O && /* @__PURE__ */ u("span", {
+							id: E,
+							className: o.cardDescription,
+							children: i
+						})]
+					}),
+					/* @__PURE__ */ d("span", {
+						className: o.cardIndicator,
+						children: [/* @__PURE__ */ u("input", {
+							id: w,
+							className: o.input,
+							...A
+						}), /* @__PURE__ */ u("span", {
+							className: o.cardControl,
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ u(r, {
+								name: "check",
+								size: "sm",
+								strokeWidth: 3,
+								className: o.cardCheck
+							})
+						})]
+					})
+				]
+			}),
+			k && /* @__PURE__ */ u("span", {
+				id: D,
+				className: o.cardMeta,
+				children: c
+			}),
+			f != null && /* @__PURE__ */ u("span", {
+				className: o.cardBody,
+				children: f
+			})
+		]
+	});
+}
+//#endregion
+export { b as Radio, x as RadioCard, v as RadioGroup, g as useRadioGroupContext };

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

@@ -0,0 +1 @@
+var e=`_sm_1oena_33`,t=`_md_1oena_43`,n=`_lg_1oena_53`,r=`_tonePrimary_1oena_69`,i=`_toneNeutral_1oena_75`,a=`_toneAccent_1oena_81`,o=`_toneSuccess_1oena_87`,s=`_toneWarning_1oena_93`,c=`_toneDanger_1oena_99`,l=`_toneInfo_1oena_105`,u=`_group_1oena_121`,d=`_groupHeader_1oena_137`,f=`_groupLabel_1oena_149`,p=`_requiredMark_1oena_165`,m=`_groupDescription_1oena_173`,h=`_items_1oena_195`,g=`_vertical_1oena_205`,_=`_horizontal_1oena_215`,v=`_input_1oena_239`,y=`_radio_1oena_271`,b=`_controlWrap_1oena_297`,x=`_control_1oena_297`,S=`_dot_1oena_343`,C=`_text_1oena_361`,w=`_label_1oena_379`,T=`_description_1oena_391`,E=`_card_1oena_505`,D=`_cardIndicator_1oena_551`,O=`_cardMedia_1oena_591`,k=`_cardHeader_1oena_621`,A=`_cardIcon_1oena_633`,j=`_cardHeading_1oena_655`,M=`_cardTitle_1oena_671`,N=`_cardDescription_1oena_689`,P=`_cardMeta_1oena_701`,F=`_cardBody_1oena_721`,I=`_cardControl_1oena_737`,L=`_cardCheck_1oena_767`,R={sm:e,md:t,lg:n,tonePrimary:r,toneNeutral:i,toneAccent:a,toneSuccess:o,toneWarning:s,toneDanger:c,toneInfo:l,group:u,groupHeader:d,groupLabel:f,requiredMark:p,groupDescription:m,items:h,vertical:g,horizontal:_,input:v,radio:y,controlWrap:b,control:x,dot:S,text:C,label:w,description:T,card:E,cardIndicator:D,cardMedia:O,cardHeader:k,cardIcon:A,cardHeading:j,cardTitle:M,cardDescription:N,cardMeta:P,cardBody:F,cardControl:I,cardCheck:L};exports.card=E,exports.cardBody=F,exports.cardCheck=L,exports.cardControl=I,exports.cardDescription=N,exports.cardHeader=k,exports.cardHeading=j,exports.cardIcon=A,exports.cardIndicator=D,exports.cardMedia=O,exports.cardMeta=P,exports.cardTitle=M,exports.control=x,exports.controlWrap=b,exports.default=R,exports.description=T,exports.dot=S,exports.group=u,exports.groupDescription=m,exports.groupHeader=d,exports.groupLabel=f,exports.horizontal=_,exports.input=v,exports.items=h,exports.label=w,exports.lg=n,exports.md=t,exports.radio=y,exports.requiredMark=p,exports.sm=e,exports.text=C,exports.toneAccent=a,exports.toneDanger=c,exports.toneInfo=l,exports.toneNeutral=i,exports.tonePrimary=r,exports.toneSuccess=o,exports.toneWarning=s,exports.vertical=g;

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

@@ -0,0 +1,43 @@
+//#region src/components/forms/Radio/Radio.module.css
+var e = "_sm_1oena_33", t = "_md_1oena_43", n = "_lg_1oena_53", r = "_tonePrimary_1oena_69", i = "_toneNeutral_1oena_75", a = "_toneAccent_1oena_81", o = "_toneSuccess_1oena_87", s = "_toneWarning_1oena_93", c = "_toneDanger_1oena_99", l = "_toneInfo_1oena_105", u = "_group_1oena_121", d = "_groupHeader_1oena_137", f = "_groupLabel_1oena_149", p = "_requiredMark_1oena_165", m = "_groupDescription_1oena_173", h = "_items_1oena_195", g = "_vertical_1oena_205", _ = "_horizontal_1oena_215", v = "_input_1oena_239", y = "_radio_1oena_271", b = "_controlWrap_1oena_297", x = "_control_1oena_297", S = "_dot_1oena_343", C = "_text_1oena_361", w = "_label_1oena_379", T = "_description_1oena_391", E = "_card_1oena_505", D = "_cardIndicator_1oena_551", O = "_cardMedia_1oena_591", k = "_cardHeader_1oena_621", A = "_cardIcon_1oena_633", j = "_cardHeading_1oena_655", M = "_cardTitle_1oena_671", N = "_cardDescription_1oena_689", P = "_cardMeta_1oena_701", F = "_cardBody_1oena_721", I = "_cardControl_1oena_737", L = "_cardCheck_1oena_767", R = {
+	sm: e,
+	md: t,
+	lg: n,
+	tonePrimary: r,
+	toneNeutral: i,
+	toneAccent: a,
+	toneSuccess: o,
+	toneWarning: s,
+	toneDanger: c,
+	toneInfo: l,
+	group: u,
+	groupHeader: d,
+	groupLabel: f,
+	requiredMark: p,
+	groupDescription: m,
+	items: h,
+	vertical: g,
+	horizontal: _,
+	input: v,
+	radio: y,
+	controlWrap: b,
+	control: x,
+	dot: S,
+	text: C,
+	label: w,
+	description: T,
+	card: E,
+	cardIndicator: D,
+	cardMedia: O,
+	cardHeader: k,
+	cardIcon: A,
+	cardHeading: j,
+	cardTitle: M,
+	cardDescription: N,
+	cardMeta: P,
+	cardBody: F,
+	cardControl: I,
+	cardCheck: L
+};
+//#endregion
+export { E as card, F as cardBody, L as cardCheck, I as cardControl, N as cardDescription, k as cardHeader, j as cardHeading, A as cardIcon, D as cardIndicator, O as cardMedia, P as cardMeta, M as cardTitle, x as control, b as controlWrap, R as default, T as description, S as dot, u as group, m as groupDescription, d as groupHeader, f as groupLabel, _ as horizontal, v as input, h as items, w as label, n as lg, t as md, y as radio, p as requiredMark, e as sm, C as text, a as toneAccent, c as toneDanger, l as toneInfo, i as toneNeutral, r as tonePrimary, o as toneSuccess, s as toneWarning, g as vertical };

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

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

package/dist/components/forms/Rating/Rating.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../../hooks/useFormReset.cjs.js"),r=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),i=require("../../../utils/cx.cjs.js"),a=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),s=require("../Field/FieldContext.cjs.js"),c=require("./Rating.module.css.cjs.js");let l=require("react"),u=require("react/jsx-runtime");var d={sm:c.default.sm,md:c.default.md,lg:c.default.lg},f={sm:c.default.displaySm,md:c.default.displayMd,lg:c.default.displayLg},ee={neutral:c.default.toneNeutral,primary:c.default.tonePrimary,accent:c.default.toneAccent,success:c.default.toneSuccess,warning:c.default.toneWarning,danger:c.default.toneDanger,info:c.default.toneInfo},p=(...e)=>e.filter(Boolean).join(` `)||void 0,m=(e,t,n)=>Math.min(n,Math.max(t,e));function h(e,t){let n=Math.round(e*10)/10,r=+!Number.isInteger(n);return new Intl.NumberFormat(t,{minimumFractionDigits:r,maximumFractionDigits:r}).format(n)}var g=(t,n)=>e.en.rating.option(h(t,`en`),n),_=(t,n)=>e.en.rating.display(h(t,`en`),n),v=t=>e.en.rating.count(t);function y({fill:e,icon:t,emptyIcon:n}){let r=`${Math.round(m(e,0,1)*1e3)/10}%`;return(0,u.jsxs)(`span`,{className:c.default.icon,"aria-hidden":`true`,"data-fill":e>=1?`full`:e>0?`partial`:`empty`,style:{"--rating-fill":r},children:[(0,u.jsx)(`span`,{className:c.default.empty,children:n}),(0,u.jsx)(`span`,{className:c.default.filled,children:t})]})}var te=(0,u.jsx)(o.StarFilledIcon,{}),ne=(0,u.jsx)(o.StarIcon,{});function b({value:e,max:t=5,size:n,tone:a=`warning`,icon:o=te,emptyIcon:l=ne,showValue:d=!1,count:p,formatCount:g,getLabel:_,className:v,"aria-label":b,...x}){let{messages:S,locale:C}=r.useLocale(),w=g??S.rating.count,T=_??((e,t)=>S.rating.display(h(e,C),t)),E=s.useFieldContext(),D=n??E?.size??`md`,O=Math.max(1,Math.round(t)),k=m(Number.isFinite(e)?e:0,0,O);return(0,u.jsxs)(`span`,{...x,className:i.cx(c.default.display,f[D],ee[a],v),children:[(0,u.jsx)(`span`,{role:`img`,"aria-label":b??T(k,O),className:c.default.icons,children:Array.from({length:O},(e,t)=>(0,u.jsx)(`span`,{className:c.default.displayCell,children:(0,u.jsx)(y,{fill:k-t,icon:o,emptyIcon:l})},t))}),d&&(0,u.jsxs)(`span`,{className:c.default.valueText,"aria-hidden":`true`,children:[h(k,C),` / `,O]}),p!==void 0&&(0,u.jsx)(`span`,{className:c.default.count,children:w(p)})]})}function x({value:e,defaultValue:o=null,onValueChange:f,max:g=5,precision:_=1,allowZero:v=!1,allowClear:x=!1,clearHint:S,hoverPreview:C=!0,size:w,tone:T=`warning`,icon:E=te,emptyIcon:D=ne,showValue:O=!1,disabled:k,readOnly:re,invalid:ie,required:ae,name:A,getLabel:oe,getReadOnlyLabel:se,unratedLabel:ce,label:le,description:j,className:ue,id:de,onKeyDown:fe,onPointerLeave:pe,"aria-describedby":M,"aria-labelledby":N,...me}){let{messages:P,locale:F}=r.useLocale(),he=S??P.rating.clearHint,ge=oe??((e,t)=>P.rating.option(h(e,F),t)),_e=se??((e,t)=>P.rating.display(h(e,F),t)),ve=ce??P.rating.unrated,I=s.useFieldContext(),L=(0,l.useId)(),ye=`${L}-label`,R=`${L}-description`,be=`${L}-clear`,z=I!==null,B=!z&&le!=null,V=j!=null,H=s.useFieldControl({id:de,invalid:ie,required:ae,disabled:k,readOnly:re,size:w,"aria-describedby":p(V&&R,M)}),[U,W]=t.useControllableState({value:e,defaultValue:o,onChange:f});n.useFormReset(()=>H.id?document.getElementById(H.id):null,()=>W(o??null),e===void 0);let[G,K]=(0,l.useState)(null),q=H.size??`md`,J=Math.max(1,Math.round(g)),Y=_===.5?.5:1,xe=A??`rating-${L}`,Se=!H.disabled&&!H.readOnly,X=x&&Se,Z=U===null||!Number.isFinite(U)?null:U<Y/2?v?0:null:m(Math.round(U/Y)*Y,Y,J),Q=C&&Se&&G!==null,Ce=Q?G:Z??0,we=I?.isGroup===!0&&N===void 0,Te=N??(z?I.labelId:B?ye:void 0),Ee=H.readOnly?`group`:`radiogroup`,De=we?{"aria-describedby":p(V&&R,M)}:{role:Ee,"aria-labelledby":Te,...H.ariaProps,"aria-disabled":H.disabled||void 0,"aria-required":H.required&&!H.readOnly||void 0},Oe=e=>{fe?.(e),!e.defaultPrevented&&X&&(e.key===`Delete`||e.key===`Backspace`)&&e.target instanceof HTMLInputElement&&(e.preventDefault(),W(null))},ke=e=>{pe?.(e),K(null)},Ae=[];for(let e=Y;e<=J+1e-9;e+=Y)Ae.push(Math.round(e*10)/10);let $=(e,t)=>{let n=Z===e;return(0,u.jsxs)(`span`,{className:i.cx(c.default.hit,c.default[t]),children:[(0,u.jsx)(`input`,{type:`radio`,className:c.default.input,name:xe,value:String(e),checked:n,disabled:H.disabled,required:H.required,"aria-label":ge(e,J),"aria-describedby":X?be:void 0,"aria-invalid":we&&H.invalid?!0:void 0,onChange:t=>{t.target.checked&&W(e)},onClick:e=>{X&&n&&W(null)},onPointerEnter:t=>{C&&t.pointerType!==`touch`&&K(e)}}),(0,u.jsx)(`span`,{className:c.default.focusBox,"aria-hidden":`true`})]},e)},je=Q&&G!==null?Math.ceil(G)-1:-1;return(0,u.jsxs)(`div`,{id:H.id,...De,...me,"data-disabled":H.disabled||void 0,"data-invalid":H.invalid||void 0,"data-readonly":H.readOnly||void 0,"data-precision":Y===.5?`half`:`whole`,"data-previewing":Q||void 0,className:i.cx(c.default.rating,d[q],ee[T],ue),onKeyDown:Oe,onPointerLeave:ke,children:[(B||V)&&(0,u.jsxs)(`div`,{className:c.default.header,children:[B&&(0,u.jsxs)(`span`,{id:ye,className:c.default.label,children:[le,H.required&&!H.readOnly&&(0,u.jsxs)(`span`,{className:c.default.requiredMark,"aria-hidden":`true`,children:[` `,`*`]})]}),V&&(0,u.jsx)(`span`,{id:R,className:c.default.description,children:j})]}),(0,u.jsxs)(`div`,{className:c.default.row,children:[H.readOnly?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(b,{value:Z??0,max:J,size:q,tone:T,icon:E,emptyIcon:D,getLabel:_e,"aria-label":Z===null?ve:void 0}),A!==void 0&&Z!==null&&(0,u.jsx)(`input`,{type:`hidden`,name:A,value:String(Z)})]}):(0,u.jsxs)(`div`,{className:c.default.icons,children:[v&&(0,u.jsxs)(`span`,{className:i.cx(c.default.cell,c.default.zeroCell),"data-hovered":Q&&G===0?!0:void 0,children:[(0,u.jsx)(`span`,{className:c.default.zeroMark,"aria-hidden":`true`,children:`0`}),$(0,`whole`)]}),Array.from({length:J},(e,t)=>(0,u.jsxs)(`span`,{className:c.default.cell,"data-hovered":t===je||void 0,children:[(0,u.jsx)(y,{fill:Ce-t,icon:E,emptyIcon:D}),Y===.5?[$(t+.5,`start`),$(t+1,`end`)]:$(t+1,`whole`)]},t))]}),O&&(0,u.jsxs)(`span`,{className:c.default.valueText,"aria-hidden":`true`,children:[Z===null?`–`:h(Z,F),` / `,J]})]}),X&&(0,u.jsx)(a.VisuallyHidden,{id:be,children:he})]})}exports.Rating=x,exports.RatingDisplay=b,exports.defaultRatingCountText=v,exports.defaultRatingDisplayLabel=_,exports.defaultRatingOptionLabel=g,exports.formatRatingValue=h;

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

@@ -0,0 +1,128 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size, Tone } from '../../../types/common';
+/** Step between selectable values: whole icons, or halves. */
+export type RatingPrecision = 1 | 0.5;
+/** Formats a rating for display and labels: whole numbers as-is, otherwise one decimal. */
+export declare function formatRatingValue(value: number, locale?: string): string;
+/** Default accessible name for each option of an interactive `Rating`: "3 out of 5". */
+export declare const defaultRatingOptionLabel: (value: number, max: number) => string;
+/** Default accessible name for `RatingDisplay`: "Rated 4.5 out of 5". */
+export declare const defaultRatingDisplayLabel: (value: number, max: number) => string;
+/** Default review count text: "(128 reviews)", "(1 review)". */
+export declare const defaultRatingCountText: (count: number) => string;
+interface RatingVisualProps {
+    /** Number of icons (the highest value). @default 5 */
+    max?: number;
+    /**
+     * Icon size. `Rating`: sm 20px, md 24px, lg 32px icons (every hit target
+     * is still at least 24x24px). `RatingDisplay`: sm 16px, md 20px, lg 24px.
+     * Falls back to a surrounding Field's size. @default "md"
+     */
+    size?: Size;
+    /**
+     * Color of the filled icons. Uses each tone's verified `--color-{tone}-border`
+     * (3:1 on bg, surface, and raised surfaces in both themes). Empty icons are
+     * outlines in `--color-border-strong`, so filled vs empty differs by shape too.
+     * @default "warning"
+     */
+    tone?: Tone;
+    /**
+     * Filled icon (a filled shape, e.g. `<StarFilledIcon />`). It is sized to the
+     * icon box. Keep it visibly different in *shape* from `emptyIcon`
+     * (filled vs outline), not only in color. @default <StarFilledIcon />
+     */
+    icon?: ReactNode;
+    /** Empty icon (an outline of the same shape, e.g. `<StarIcon />`). @default <StarIcon /> */
+    emptyIcon?: ReactNode;
+    /** Show the numeric value next to the icons, e.g. "4.5 / 5". */
+    showValue?: boolean;
+}
+export interface RatingDisplayProps extends RatingVisualProps, Omit<ComponentPropsWithRef<"span">, "children"> {
+    /** The rating to show. Fractions are drawn exactly: 3.7 fills 70% of the 4th icon. Clamped to 0..`max`. */
+    value: number;
+    /** Number of reviews, shown after the icons as "(128 reviews)". */
+    count?: number;
+    /** Customizes (or localizes) the review count text. @default "(128 reviews)" */
+    formatCount?: (count: number) => ReactNode;
+    /**
+     * Accessible name of the icon row (`role="img"`). Localize it here.
+     * An explicit `aria-label` prop wins. @default "Rated 4.5 out of 5"
+     */
+    getLabel?: (value: number, max: number) => string;
+}
+/**
+ * A read-only rating: a row of icons with fractional fill, exposed to
+ * assistive tech as a single `role="img"` named "Rated 4.5 out of 5",
+ * optionally followed by the value ("4.5 / 5") and a review count.
+ * Not focusable. For an editable rating use `Rating`.
+ */
+export declare function RatingDisplay({ value, max, size: sizeProp, tone, icon, emptyIcon, showValue, count, formatCount: formatCountProp, getLabel: getLabelProp, className, "aria-label": ariaLabel, ...rest }: RatingDisplayProps): import("react").JSX.Element;
+export interface RatingProps extends RatingVisualProps, Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children"> {
+    /** Selected rating (controlled). `null` means no rating. Use with `onValueChange`. */
+    value?: number | null;
+    /** Initial rating (uncontrolled). @default null */
+    defaultValue?: number | null;
+    /** Called with the new rating, or `null` when cleared. */
+    onValueChange?: (value: number | null) => void;
+    /**
+     * Step between values. `0.5` renders two radios per icon (left and right
+     * halves). Each half hit area is kept at least 24px wide, so half-precision
+     * icons sit in 48px-wide cells at every size. @default 1
+     */
+    precision?: RatingPrecision;
+    /**
+     * Adds a "0" option before the first icon, so zero is a real rating
+     * ("0 out of 5"), distinct from no rating (`null`). It is the first radio,
+     * so ArrowLeft from the lowest icon reaches it. @default false
+     */
+    allowZero?: boolean;
+    /**
+     * Let the user remove their rating: clicking (or pressing Space on) the
+     * selected value again, or pressing Delete / Backspace, resets it to `null`.
+     */
+    allowClear?: boolean;
+    /**
+     * Instructions announced with each option when `allowClear` is on. Localize it here.
+     * @default "Press Space on the selected rating, or Delete, to clear it."
+     */
+    clearHint?: string;
+    /** Highlight icons up to the one under the mouse, with a springy pop. @default true */
+    hoverPreview?: boolean;
+    /** Disables every option. Falls back to a surrounding Field's state. */
+    disabled?: boolean;
+    /**
+     * Show the value without allowing changes. Renders the `RatingDisplay`
+     * look (a single `role="img"`, not focusable) plus a hidden input so the
+     * value still submits with a form when `name` is set.
+     */
+    readOnly?: boolean;
+    /** Marks the rating invalid: danger outlines and `aria-invalid`. Falls back to a surrounding Field's state. */
+    invalid?: boolean;
+    /** A rating is required: sets native `required` on the radios. Falls back to a surrounding Field's state. */
+    required?: boolean;
+    /** Shared `name` for the native radios (used in form submission). Generated with `useId` when omitted. */
+    name?: string;
+    /** Accessible name of each option. Localize it here. @default "3 out of 5" */
+    getLabel?: (value: number, max: number) => string;
+    /** Read-only: accessible name of the rating. Localize it here. @default "Rated 4.5 out of 5" */
+    getReadOnlyLabel?: (value: number, max: number) => string;
+    /** Read-only with no value: accessible name, so "unrated" isn't announced as zero. @default "Not rated" */
+    unratedLabel?: string;
+    /**
+     * Visible label, used when the rating stands alone. Ignored inside a
+     * `Field`/`Fieldset`, whose label or legend names it. Without a label,
+     * pass `aria-label` or `aria-labelledby`.
+     */
+    label?: ReactNode;
+    /** Help text under the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+}
+/**
+ * An editable star (or custom icon) rating, built on real native radios
+ * (visually hidden but focusable, sharing one `name`) inside
+ * `role="radiogroup"`. Tab lands on the selected value (or the first option),
+ * arrow keys move and select, and the value submits with a form. Supports
+ * half values, clearing, hover preview, and Field/Fieldset wiring.
+ */
+export declare function Rating({ value: valueProp, defaultValue, onValueChange, max, precision, allowZero, allowClear, clearHint: clearHintProp, hoverPreview, size: sizeProp, tone, icon, emptyIcon, showValue, disabled: disabledProp, readOnly: readOnlyProp, invalid: invalidProp, required: requiredProp, name, getLabel: getLabelProp, getReadOnlyLabel: getReadOnlyLabelProp, unratedLabel: unratedLabelProp, label, description, className, id: idProp, onKeyDown, onPointerLeave, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...rest }: RatingProps): import("react").JSX.Element;
+export {};