@nizivo/react 0.0.0-stage → 0.1.0

package/dist/progress-bar/progress-bar.d.ts

@@ -0,0 +1,34 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/progress-bar/progress-bar.d.ts
+/** Figma "Tone" (Brand, Warning, Critical) plus `success` and `neutral`. */
+export type ProgressBarTone = "brand" | "success" | "warning" | "critical" | "neutral";
+export interface ProgressBarState {
+  tone: ProgressBarTone;
+  /** The clamped value, or `null` while indeterminate. */
+  value: number | null;
+  max: number;
+  indeterminate: boolean;
+}
+export interface ProgressBarProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Clamped to `0…max`. @default 0 */
+  value?: number;
+  /** Must be above zero. @default 100 */
+  max?: number;
+  /** The visible name. Without it, name the bar with `aria-label` or `aria-labelledby`. */
+  label?: ReactNode;
+  /** Shows the value as a percentage beside the label (hidden from assistive technology, which reads the bar itself). @default true */
+  showValue?: boolean;
+  /** Work is under way but its amount is unknown: the bar has no value. @default false */
+  indeterminate?: boolean;
+  /** @default 'brand' */
+  tone?: ProgressBarTone;
+  /** BCP 47 tag for the percentage. @default 'en-US' */
+  locale?: string;
+  /** Replaces the shown percentage and is read instead of it, for example "3 of 5 steps". */
+  valueText?: string;
+  /** Composition of the root; the native `<progress>` inside keeps its semantics. */
+  render?: RenderProp<ProgressBarState>;
+}
+export declare function ProgressBar({ value, max, label, showValue, indeterminate, tone, locale, valueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, render, className, ...rest }: ProgressBarProps): ReactElement;
+//#endregion

package/dist/progress-bar/progress-bar.js

@@ -0,0 +1,55 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/progress-bar/progress-bar.tsx
+function ProgressBar({ value = 0, max = 100, label, showValue = true, indeterminate = false, tone = "brand", locale = "en-US", valueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, render, className, ...rest }) {
+	const labelId = useId();
+	const range = Number.isFinite(max) && max > 0 ? max : 100;
+	const current = indeterminate ? null : clamp(value, range);
+	const shown = current === null ? void 0 : valueText ?? new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}).format(current / range);
+	const hasLabel = label != null;
+	const hasValue = showValue && shown !== void 0;
+	return renderElement("div", render, {
+		tone,
+		value: current,
+		max: range,
+		indeterminate
+	}, {
+		"data-slot": "progress-bar",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-progress-bar", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [(hasLabel || hasValue) && /* @__PURE__ */ jsxs("div", {
+			className: "nz-progress-bar-header",
+			"data-slot": "progress-bar-header",
+			children: [hasLabel && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "nz-progress-bar-label",
+				"data-slot": "progress-bar-label",
+				children: label
+			}), hasValue && /* @__PURE__ */ jsx("span", {
+				className: "nz-progress-bar-value",
+				"data-slot": "progress-bar-value",
+				"aria-hidden": "true",
+				children: shown
+			})]
+		}), /* @__PURE__ */ jsx("progress", {
+			className: "nz-progress-bar-track",
+			"data-slot": "progress-bar-track",
+			max: range,
+			value: current ?? void 0,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy ?? (hasLabel ? labelId : void 0),
+			"aria-valuetext": current === null ? void 0 : valueText
+		})] })
+	});
+}
+function clamp(value, max) {
+	return Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
+}
+//#endregion
+export { ProgressBar };

package/dist/progress-ring/index.d.ts

@@ -0,0 +1,2 @@
+import { ProgressRing, ProgressRingProps, ProgressRingSize, ProgressRingState, ProgressRingTone } from "./progress-ring.js";
+export { ProgressRing, type ProgressRingProps, type ProgressRingSize, type ProgressRingState, type ProgressRingTone };

package/dist/progress-ring/index.js

@@ -0,0 +1 @@
+export { ProgressRing } from "./progress-ring.js";

package/dist/progress-ring/progress-ring.d.ts

@@ -0,0 +1,38 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/progress-ring/progress-ring.d.ts
+export type ProgressRingTone = "brand" | "success" | "warning" | "critical" | "neutral";
+/** 48 / 72 / 96 px; Figma draws only 72. */
+export type ProgressRingSize = "sm" | "md" | "lg";
+export interface ProgressRingState {
+  tone: ProgressRingTone;
+  size: ProgressRingSize;
+  /** The value clamped to `0…max`. */
+  value: number;
+  max: number;
+}
+export interface ProgressRingProps extends Omit<ComponentPropsWithRef<"div">, "role"> {
+  /** Figma "Value" (25 / 50 / 75 / 100 there). Clamped to `0…max`. */
+  value: number;
+  /** Must be above zero. @default 100 */
+  max?: number;
+  /** @default 'brand' */
+  tone?: ProgressRingTone;
+  /** @default 'md' */
+  size?: ProgressRingSize;
+  /**
+   * Exposes the ring as a `meter` (a measurement, such as a goal reached) instead of a `progressbar`
+   * (work under way). @default false
+   */
+  meter?: boolean;
+  /** BCP 47 tag for the percentage. @default 'en-US' */
+  locale?: string;
+  /** What assistive technology reads instead of the percentage. Set it whenever `children` shows something else. */
+  valueText?: string;
+  /** The centre, shown to sighted users only (the ring's children are presentational). @default the percentage */
+  children?: ReactNode;
+  /** Name the ring with `aria-label` or `aria-labelledby`. */
+  render?: RenderProp<ProgressRingState>;
+}
+export declare function ProgressRing({ value, max, tone, size, meter, locale, valueText, render, className, children, ...rest }: ProgressRingProps): ReactElement;
+//#endregion

package/dist/progress-ring/progress-ring.js

@@ -0,0 +1,67 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/progress-ring/progress-ring.tsx
+const CENTRE = 36;
+/** Figma's inner-radius ratio 0.8 at 72 px: a 7.2-unit ring on the 32.4 radius midline. */
+const STROKE = 7.2;
+const RADIUS = CENTRE - STROKE / 2;
+function ProgressRing({ value, max = 100, tone = "brand", size = "md", meter = false, locale = "en-US", valueText, render, className, children, ...rest }) {
+	const range = Number.isFinite(max) && max > 0 ? max : 100;
+	const current = Number.isFinite(value) ? Math.min(Math.max(value, 0), range) : 0;
+	const percent = new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}).format(current / range);
+	const arc = current / range * 100;
+	return renderElement("div", render, {
+		tone,
+		size,
+		value: current,
+		max: range
+	}, {
+		role: meter ? "meter" : "progressbar",
+		"aria-valuenow": current,
+		"aria-valuemin": 0,
+		"aria-valuemax": range,
+		"aria-valuetext": valueText ?? percent,
+		"data-slot": "progress-ring",
+		"data-tone": tone,
+		"data-size": size,
+		...rest,
+		className: cx("nz-progress-ring", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("svg", {
+			className: "nz-progress-ring-svg",
+			viewBox: `0 0 72 72`,
+			"aria-hidden": "true",
+			focusable: "false",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "nz-progress-ring-track",
+				"data-slot": "progress-ring-track",
+				cx: CENTRE,
+				cy: CENTRE,
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: STROKE
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "nz-progress-ring-fill",
+				"data-slot": "progress-ring-fill",
+				cx: CENTRE,
+				cy: CENTRE,
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: STROKE,
+				pathLength: 100,
+				strokeDasharray: `${arc} 100`,
+				transform: `rotate(-90 ${CENTRE} ${CENTRE})`
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "nz-progress-ring-label",
+			"data-slot": "progress-ring-label",
+			"aria-hidden": "true",
+			children: children ?? percent
+		})] })
+	});
+}
+//#endregion
+export { ProgressRing };

package/dist/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import { RadioGroup, RadioGroupChangeReason, RadioGroupProps } from "./radio-group.js";
+import { Radio, RadioProps, RadioState } from "./radio-group.client.js";
+export { Radio, RadioGroup, type RadioGroupChangeReason, type RadioGroupProps, type RadioProps, type RadioState };

package/dist/radio-group/index.js

@@ -0,0 +1,3 @@
+import { Radio } from "./radio-group.client.js";
+import { RadioGroup } from "./radio-group.js";
+export { Radio, RadioGroup };

package/dist/radio-group/radio-group.client.d.ts

@@ -0,0 +1,22 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/radio-group/radio-group.client.d.ts
+/** What a `render` function receives for the root `<label>`. */
+export interface RadioState {
+  disabled: boolean;
+}
+export interface RadioProps extends Omit<ComponentPropsWithRef<"input">, "type" | "value" | "name" | "checked" | "defaultChecked" | "required" | "readOnly" | "children" | "size"> {
+  /** Submitted under the group's name when this radio is checked. */
+  value: string;
+  /** Composition of the root `<label>`, the hit target. */
+  render?: RenderProp<RadioState>;
+  /** The label, after the circle. */
+  children?: ReactNode;
+}
+/**
+ * One option of a `RadioGroup`. `className` and `style` go on the root `<label>`; every other
+ * attribute, `ref` included, goes on the native `<input>`. Name, checked state and `required` come
+ * from the group.
+ */
+export declare function Radio({ value, disabled, render, className, style, children, ...rest }: RadioProps): ReactElement;
+//#endregion

package/dist/radio-group/radio-group.client.js

@@ -0,0 +1,70 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { presented } from "../_internal/field.js";
+import { createContext, use, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/radio-group/radio-group.client.tsx
+const RadioGroupContext = createContext(null);
+/** Internal: rendered only by `RadioGroup`. Every prop but `onValueChange` is serialisable. */
+function RadioGroupScope({ name, value, defaultValue, required, onValueChange, children }) {
+	const scope = useMemo(() => ({
+		name,
+		value,
+		defaultValue,
+		required,
+		onValueChange
+	}), [
+		name,
+		value,
+		defaultValue,
+		required,
+		onValueChange
+	]);
+	return /* @__PURE__ */ jsx(RadioGroupContext, {
+		value: scope,
+		children
+	});
+}
+/**
+* One option of a `RadioGroup`. `className` and `style` go on the root `<label>`; every other
+* attribute, `ref` included, goes on the native `<input>`. Name, checked state and `required` come
+* from the group.
+*/
+function Radio({ value, disabled, render, className, style, children, ...rest }) {
+	const group = use(RadioGroupContext);
+	const controlled = group !== null && group.value !== void 0;
+	const own = {
+		name: group?.name,
+		required: group?.required === true ? true : void 0,
+		disabled,
+		checked: controlled ? group.value === value : void 0,
+		defaultChecked: !controlled && group?.defaultValue !== void 0 ? group.defaultValue === value : void 0,
+		onChange(event) {
+			if (event.currentTarget.checked) group?.onValueChange?.(value, details("input", event.nativeEvent));
+		}
+	};
+	const state = { disabled: disabled === true };
+	return renderElement("label", render, state, {
+		"data-slot": "radio",
+		...stateAttrs(state),
+		className: cx("nz-radio nz-hit-target", className),
+		style,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+			...mergeProps(own, rest),
+			type: "radio",
+			value,
+			className: "nz-radio-input",
+			"data-slot": "radio-input"
+		}), presented(children) && /* @__PURE__ */ jsx("span", {
+			className: "nz-radio-label",
+			"data-slot": "radio-label",
+			children
+		})] })
+	});
+}
+//#endregion
+export { Radio, RadioGroupScope };

package/dist/radio-group/radio-group.d.ts

@@ -0,0 +1,28 @@
+import { ChangeDetails } from "../contracts/details.js";
+import { Orientation } from "../contracts/state.js";
+import { FieldsetProps } from "../fieldset/fieldset.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/radio-group/radio-group.d.ts
+/** Every change comes from the native `change` event of the radio that became checked. */
+export type RadioGroupChangeReason = "input";
+export interface RadioGroupProps extends Omit<FieldsetProps, "children" | "role" | "name" | "defaultValue" | "onChange"> {
+  /** The name every radio submits under. @default a generated name, unique per group */
+  name?: string;
+  /** Controlled: the checked radio's `value`, or `null` for none. */
+  value?: string | null;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Called with the newly checked radio's `value`, after that radio's own `onChange`. */
+  onValueChange?: (value: string, details: ChangeDetails<RadioGroupChangeReason>) => void;
+  /** Layout of the radios; native arrow keys move both ways either way. @default 'vertical' */
+  orientation?: Orientation;
+  /** `Radio` elements, possibly with other content between them. */
+  children?: ReactNode;
+}
+/**
+ * A native `<fieldset role="radiogroup">` with a `<legend>` (Fieldset), plus `aria-required` and
+ * `aria-invalid`, which role `group` does not allow but `radiogroup` does (FIELD-CONTRACT.md).
+ * `required` marks the legend and makes every radio `required`; `disabled` is the fieldset's own.
+ */
+export declare function RadioGroup({ name, value, defaultValue, onValueChange, orientation, required, className, children, ...rest }: RadioGroupProps): ReactElement;
+//#endregion

package/dist/radio-group/radio-group.js

@@ -0,0 +1,35 @@
+import { cx } from "../_internal/cx.js";
+import { presented } from "../_internal/field.js";
+import { Fieldset } from "../fieldset/fieldset.js";
+import { RadioGroupScope } from "./radio-group.client.js";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/radio-group/radio-group.tsx
+/**
+* A native `<fieldset role="radiogroup">` with a `<legend>` (Fieldset), plus `aria-required` and
+* `aria-invalid`, which role `group` does not allow but `radiogroup` does (FIELD-CONTRACT.md).
+* `required` marks the legend and makes every radio `required`; `disabled` is the fieldset's own.
+*/
+function RadioGroup({ name, value, defaultValue, onValueChange, orientation = "vertical", required = false, className, children, ...rest }) {
+	const generated = useId();
+	return /* @__PURE__ */ jsx(Fieldset, {
+		...rest,
+		required,
+		role: "radiogroup",
+		"aria-required": required || void 0,
+		"aria-invalid": presented(rest.error) || void 0,
+		"data-slot": "radio-group",
+		"data-orientation": orientation,
+		className: cx("nz-radio-group", className),
+		children: /* @__PURE__ */ jsx(RadioGroupScope, {
+			name: name ?? `${generated}-radio`,
+			value,
+			defaultValue,
+			required,
+			onValueChange,
+			children
+		})
+	});
+}
+//#endregion
+export { RadioGroup };

package/dist/segmented-control/index.d.ts

@@ -0,0 +1,3 @@
+import { SegmentedControlChangeReason, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlItemState, SegmentedControlRoot, SegmentedControlRootProps, SegmentedControlRootState } from "./segmented-control.client.js";
+import { segmented_control_parts_d_exports } from "./segmented-control.parts.js";
+export { segmented_control_parts_d_exports as SegmentedControl, type SegmentedControlChangeReason, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlItemState, SegmentedControlRoot, type SegmentedControlRootProps, type SegmentedControlRootState };

package/dist/segmented-control/index.js

@@ -0,0 +1,3 @@
+import { SegmentedControlItem, SegmentedControlRoot } from "./segmented-control.client.js";
+import { segmented_control_parts_exports } from "./segmented-control.parts.js";
+export { segmented_control_parts_exports as SegmentedControl, SegmentedControlItem, SegmentedControlRoot };

package/dist/segmented-control/segmented-control.client.d.ts

@@ -0,0 +1,61 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/segmented-control/segmented-control.client.d.ts
+/** Why the value changed: the user checked a radio (a pointer or a key; the browser does not say). */
+export type SegmentedControlChangeReason = "input";
+export interface SegmentedControlRootState {
+  size: ControlSize;
+  disabled: boolean;
+  invalid: boolean;
+}
+export interface SegmentedControlRootProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "role"> {
+  /** Controlled: the selected item's `value`, or `null` for none. */
+  value?: string | null;
+  /** The item selected at first (uncontrolled; `form.reset()` returns to it). */
+  defaultValue?: string;
+  /**
+   * Called when the user selects an item. `details.reason` is `'input'` (as on RadioGroup and
+   * Checkbox); `details.event` is the native `change` event.
+   */
+  onValueChange?: (value: string, details: ChangeDetails<SegmentedControlChangeReason>) => void;
+  /**
+   * The radios' shared name, and the `FormData` key. Without one (and outside a named Field), a
+   * generated name groups the radios.
+   */
+  name?: string;
+  /** The `<form>` the radios belong to, when they are outside it. */
+  form?: string;
+  required?: boolean;
+  /** Disables every item. */
+  disabled?: boolean;
+  /** An error message is presented (set by a Field). */
+  invalid?: boolean;
+  /** 32 / 40 / 48 px track. @default 'md' */
+  size?: ControlSize;
+  /** Stretches the track to its container and shares the width equally between items. @default false */
+  fullWidth?: boolean;
+  render?: RenderProp<SegmentedControlRootState>;
+  children?: ReactNode;
+}
+export interface SegmentedControlItemState {
+  disabled: boolean;
+}
+export interface SegmentedControlItemProps extends Omit<ComponentPropsWithRef<"label">, "htmlFor" | "aria-label"> {
+  /** This item's value: what `onValueChange` receives and the form submits. */
+  value: string;
+  disabled?: boolean;
+  /** A decorative glyph before the text (16 px). */
+  icon?: ReactNode;
+  /**
+   * Names an icon-only item (no `children`): it goes on the radio, which is what assistive
+   * technology announces.
+   */
+  "aria-label"?: string;
+  render?: RenderProp<SegmentedControlItemState>;
+  children?: ReactNode;
+}
+export declare function SegmentedControlRoot({ value, defaultValue, onValueChange, name, form, required, disabled, invalid, size, fullWidth, "aria-describedby": describedBy, "aria-labelledby": labelledBy, render, className, children, ...rest }: SegmentedControlRootProps): JSX.Element;
+export declare function SegmentedControlItem({ value, disabled, icon, "aria-label": ariaLabel, render, className, children, ...rest }: SegmentedControlItemProps): JSX.Element;
+//#endregion

package/dist/segmented-control/segmented-control.client.js

@@ -0,0 +1,156 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { createContext, use, useId, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/segmented-control/segmented-control.client.tsx
+const GroupContext = createContext(null);
+/**
+* True while a radio's keydown is being handled. An arrow key moves focus to the next radio as the
+* keydown's default action, in the same task, so a focus seen while this is set came from a key.
+*/
+let keyDown = false;
+function onKeyDown() {
+	keyDown = true;
+	setTimeout(() => {
+		keyDown = false;
+	}, 0);
+}
+/**
+* WebKit does not match :focus-visible on a radio reached with an arrow key, so the item marks a
+* keyboard focus itself (nz.base draws the outline for `[data-focus-visible]`). Written on the DOM,
+* not through state: re-rendering a focused radio makes React re-write its `name`, and Chromium then
+* stops treating an unchecked group as one Tab stop.
+*/
+function markFocus(event) {
+	const visible = event.currentTarget.matches(":focus-visible") || keyDown;
+	event.currentTarget.closest(".nz-segmented-control-item")?.toggleAttribute("data-focus-visible", visible);
+}
+function clearFocus(event) {
+	event.currentTarget.closest(".nz-segmented-control-item")?.removeAttribute("data-focus-visible");
+}
+function SegmentedControlRoot({ value, defaultValue, onValueChange, name, form, required, disabled, invalid, size = "md", fullWidth = false, "aria-describedby": describedBy, "aria-labelledby": labelledBy, render, className, children, ...rest }) {
+	const field = useFieldControl({
+		name,
+		required,
+		disabled,
+		invalid,
+		"aria-describedby": describedBy
+	});
+	const generated = useId();
+	const { required: radioRequired, onInvalid, onInput, onBlur } = field.controlProps;
+	const groupName = field.name ?? generated;
+	const group = useMemo(() => ({
+		name: groupName,
+		value,
+		defaultValue,
+		disabled: field.disabled,
+		radio: definedProps({
+			required: radioRequired,
+			form,
+			onInvalid,
+			onInput,
+			onBlur
+		}),
+		onValueChange
+	}), [
+		groupName,
+		value,
+		defaultValue,
+		field.disabled,
+		radioRequired,
+		form,
+		onInvalid,
+		onInput,
+		onBlur,
+		onValueChange
+	]);
+	return /* @__PURE__ */ jsx(GroupContext, {
+		value: group,
+		children: renderElement("div", render, {
+			size,
+			disabled: field.disabled,
+			invalid: field.invalid
+		}, {
+			"data-slot": "segmented-control",
+			"data-size": size,
+			"data-full-width": fullWidth ? "" : void 0,
+			...stateAttrs({
+				disabled: field.disabled,
+				invalid: field.invalid,
+				required: field.required
+			}),
+			...rest,
+			role: "radiogroup",
+			"aria-labelledby": labelledBy ?? field.labelledBy,
+			"aria-describedby": field.describedBy,
+			"aria-invalid": field.invalid ? true : void 0,
+			"aria-required": field.required ? true : void 0,
+			className: cx("nz-segmented-control", className),
+			children
+		})
+	});
+}
+/** Drops `undefined` values, so a spread never writes an empty attribute or handler. */
+function definedProps(props) {
+	const out = {};
+	for (const [key, value] of Object.entries(props)) if (value !== void 0) out[key] = value;
+	return out;
+}
+function SegmentedControlItem({ value, disabled, icon, "aria-label": ariaLabel, render, className, children, ...rest }) {
+	const group = use(GroupContext);
+	if (group === null) throw new Error("SegmentedControl.Item must be inside SegmentedControl.Root");
+	const off = disabled === true || group.disabled;
+	const checked = group.value === void 0 ? { defaultChecked: group.defaultValue === value } : { checked: group.value === value };
+	const onChange = (event) => {
+		if (event.currentTarget.checked) group.onValueChange?.(value, details("input", event.nativeEvent));
+	};
+	return renderElement("label", render, { disabled: off }, {
+		"data-slot": "segmented-control-item",
+		...stateAttrs({ disabled: off }),
+		...rest,
+		className: cx("nz-segmented-control-item", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(group.radio, {
+					onChange,
+					onFocus: markFocus,
+					onBlur: clearFocus,
+					onKeyDown
+				}),
+				...checked,
+				type: "radio",
+				className: "nz-segmented-control-input",
+				"data-slot": "segmented-control-input",
+				name: group.name,
+				value,
+				disabled: off || void 0,
+				"aria-label": ariaLabel
+			}),
+			icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-segmented-control-icon",
+				"data-slot": "segmented-control-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			children != null && /* @__PURE__ */ jsxs("span", {
+				className: "nz-segmented-control-label",
+				"data-slot": "segmented-control-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nz-segmented-control-text",
+					children
+				}), /* @__PURE__ */ jsx("span", {
+					className: "nz-segmented-control-sizer",
+					"aria-hidden": "true",
+					children
+				})]
+			})
+		] })
+	});
+}
+//#endregion
+export { SegmentedControlItem, SegmentedControlRoot };

package/dist/segmented-control/segmented-control.parts.d.ts

@@ -0,0 +1,6 @@
+import { SegmentedControlItem, SegmentedControlRoot } from "./segmented-control.client.js";
+declare namespace segmented_control_parts_d_exports {
+  export { SegmentedControlItem as Item, SegmentedControlRoot as Root };
+}
+//#endregion
+export { SegmentedControlItem as Item, SegmentedControlRoot as Root, segmented_control_parts_d_exports };

package/dist/segmented-control/segmented-control.parts.js

@@ -0,0 +1,9 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { SegmentedControlItem, SegmentedControlRoot } from "./segmented-control.client.js";
+//#region src/segmented-control/segmented-control.parts.ts
+var segmented_control_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => SegmentedControlItem,
+	Root: () => SegmentedControlRoot
+});
+//#endregion
+export { SegmentedControlItem as Item, SegmentedControlRoot as Root, segmented_control_parts_exports };

package/dist/select/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { SelectGroupLabelProps, SelectGroupProps, SelectItemProps, SelectItemState, SelectLabels, SelectPopupProps, SelectPopupState, SelectRootProps, SelectRootState, SelectSeparatorProps, SelectTriggerProps, SelectTriggerState, SelectValueProps, SelectValueReason, SelectValueState } from "./select.contract.js";
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select.client.js";
+import { select_parts_d_exports } from "./select.parts.js";
+export { type OpenReason, select_parts_d_exports as Select, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectItemState, type SelectLabels, SelectPopup, type SelectPopupProps, type SelectPopupState, SelectRoot, type SelectRootProps, type SelectRootState, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerState, SelectValue, type SelectValueProps, type SelectValueReason, type SelectValueState };

package/dist/select/index.js

@@ -0,0 +1,3 @@
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select.client.js";
+import { select_parts_exports } from "./select.parts.js";
+export { select_parts_exports as Select, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue };

package/dist/select/select.client.d.ts

@@ -0,0 +1,12 @@
+import { SelectGroupLabelProps, SelectGroupProps, SelectItemProps, SelectPopupProps, SelectRootProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps } from "./select.contract.js";
+import { JSX } from "react";
+//#region src/select/select.client.d.ts
+export declare function SelectRoot({ size, name, required, disabled, invalid, "aria-labelledby": labelledBy, className, ...props }: SelectRootProps): JSX.Element;
+export declare function SelectTrigger({ id, "aria-describedby": describedBy, className, leadingIcon, indicator, render, children, ...rest }: SelectTriggerProps): JSX.Element;
+export declare function SelectValue({ className, render, ...rest }: SelectValueProps): JSX.Element;
+export declare function SelectPopup({ side, align, sideOffset, container, className, style, children }: SelectPopupProps): JSX.Element;
+export declare function SelectItem({ className, textValue, indicator, render, children, ...rest }: SelectItemProps): JSX.Element;
+export declare function SelectGroup({ className, render, ...rest }: SelectGroupProps): JSX.Element;
+export declare function SelectGroupLabel({ className, render, ...rest }: SelectGroupLabelProps): JSX.Element;
+export declare function SelectSeparator({ className, render, ...rest }: SelectSeparatorProps): JSX.Element;
+//#endregion