@nizivo/react 0.0.0-stage → 0.2.0

package/dist/search-field/search-field.client.d.ts

@@ -0,0 +1,55 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/search-field/search-field.client.d.ts
+/** SearchField's own strings (§16.4): serialisable, English defaults. */
+export interface SearchFieldLabels {
+  /**
+   * The input's name when nothing else names it: no Field, `aria-label` or `aria-labelledby`. The
+   * placeholder is not a label. @default 'Search'
+   */
+  label: string;
+  /** The clear button's name. @default 'Clear search' */
+  clear: string;
+}
+export interface SearchFieldState {
+  size: ControlSize;
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  pending: boolean;
+  /** The input has a value, so the clear button shows. */
+  filled: boolean;
+}
+export interface SearchFieldProps extends Omit<ComponentPropsWithRef<"input">, "type" | "size" | "prefix" | "children"> {
+  /** 32 / 40 / 48 px, as Input, Button and Select (Figma's 42 is off the scale). @default 'md' */
+  size?: ControlSize;
+  /**
+   * An error message is presented for this field (§8.3). Inside a Field, the Field sets it; an
+   * explicit value here wins.
+   */
+  invalid?: boolean;
+  /**
+   * A keyboard shortcut such as `"mod+k"`, drawn at the end of the field with `Kbd` (⌘K on Apple
+   * platforms, Ctrl+K elsewhere) and announced through `aria-keyshortcuts`. The app binds the key
+   * itself (focus the field through its `ref`), as with IconButton's `shortcut`; hidden while the
+   * field has a value.
+   */
+  shortcut?: string;
+  /** Replaces the magnifier before the value (decorative, 16 px). */
+  icon?: ReactNode;
+  /**
+   * Results are on their way: the magnifier becomes a spinner and the root carries `data-pending`.
+   * Announce the outcome (the number of results) where the results are. @default false
+   */
+  pending?: boolean;
+  labels?: Partial<SearchFieldLabels>;
+  /**
+   * Composition of the root, the `<search>` box around the native `<input>`. `className` and
+   * `style` go on the root too; every other prop, `ref` included, goes on the `<input>`.
+   */
+  render?: RenderProp<SearchFieldState>;
+}
+export declare function SearchField({ size, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, shortcut, icon, pending, labels: labelsProp, render, className, style, ...rest }: SearchFieldProps): JSX.Element;
+//#endregion

package/dist/search-field/search-field.client.js

@@ -0,0 +1,136 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { CloseGlyph, SearchGlyph, SpinnerGlyph } from "../_internal/glyphs.js";
+import { stateAttrs } from "../contracts/state.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { ariaKeyShortcuts } from "../_internal/keys.js";
+import { Kbd } from "../kbd/kbd.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/search-field/search-field.client.tsx
+function hasText(value) {
+	return value != null && String(value) !== "";
+}
+/** The native value setter, so React sees the change, then the `input` event a user's edit fires. */
+function clearInput(input) {
+	Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, "");
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function SearchField({ size = "md", id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, shortcut, icon, pending = false, labels: labelsProp, render, className, style, ...rest }) {
+	const labels = useLabels("searchField", labelsProp);
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true" ? true : void 0),
+		"aria-describedby": describedBy
+	});
+	const input = useRef(null);
+	const [typed, setTyped] = useState(() => hasText(rest.defaultValue));
+	const filled = rest.value === void 0 ? typed : hasText(rest.value);
+	useEffect(() => {
+		const form = input.current?.form;
+		if (form == null) return void 0;
+		let timer;
+		const onReset = () => {
+			timer = setTimeout(() => setTyped((input.current?.value ?? "") !== ""), 0);
+		};
+		form.addEventListener("reset", onReset);
+		return () => {
+			form.removeEventListener("reset", onReset);
+			clearTimeout(timer);
+		};
+	}, []);
+	const unnamed = !field.inField && rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0;
+	const editable = !field.disabled && !field.readOnly;
+	const own = {
+		...field.controlProps,
+		ref: input,
+		"aria-label": unnamed ? labels?.label ?? "Search" : void 0,
+		"aria-keyshortcuts": shortcut === void 0 ? void 0 : ariaKeyShortcuts(shortcut),
+		onChange(event) {
+			setTyped(event.currentTarget.value !== "");
+		},
+		onKeyDown(event) {
+			const target = event.currentTarget;
+			if (event.key !== "Escape" || target.value === "" || target.readOnly) return;
+			event.preventDefault();
+			event.stopPropagation();
+			clearInput(target);
+		}
+	};
+	const state = {
+		size,
+		invalid: field.invalid,
+		disabled: field.disabled,
+		readOnly: field.readOnly,
+		pending,
+		filled
+	};
+	return renderElement("search", render, state, {
+		"data-slot": "search-field",
+		"data-size": size,
+		...stateAttrs({
+			invalid: state.invalid,
+			disabled: state.disabled,
+			readOnly: state.readOnly,
+			pending
+		}),
+		className: cx("nz-search-field", className),
+		style,
+		onMouseDown: focusInput,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-search-field-icon",
+				"data-slot": "search-field-icon",
+				"aria-hidden": "true",
+				children: pending ? /* @__PURE__ */ jsx(SpinnerGlyph, {}) : icon ?? /* @__PURE__ */ jsx(SearchGlyph, {})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(own, rest),
+				type: "search",
+				className: "nz-search-field-control",
+				"data-slot": "search-field-control"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "nz-search-field-clear",
+				"data-slot": "search-field-clear",
+				"aria-label": labels?.clear ?? "Clear search",
+				tabIndex: -1,
+				hidden: !filled || !editable,
+				onClick: clearAndFocus,
+				children: /* @__PURE__ */ jsx(CloseGlyph, {})
+			}),
+			shortcut !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "nz-search-field-shortcut",
+				"data-slot": "search-field-shortcut",
+				"aria-hidden": "true",
+				hidden: filled,
+				children: /* @__PURE__ */ jsx(Kbd, { keys: shortcut })
+			})
+		] })
+	});
+}
+function control(root) {
+	return root?.querySelector(":scope > .nz-search-field-control") ?? null;
+}
+function focusInput(event) {
+	const input = control(event.currentTarget);
+	if (input === null || event.target === input || input.disabled) return;
+	event.preventDefault();
+	input.focus();
+}
+function clearAndFocus(event) {
+	const input = control(event.currentTarget.parentElement);
+	if (input === null) return;
+	clearInput(input);
+	input.focus();
+}
+//#endregion
+export { SearchField };

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

package/dist/select/select.client.js

@@ -0,0 +1,152 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { CheckGlyph, ChevronsUpDownGlyph } from "../_internal/glyphs.js";
+import { joinIds } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { Group, GroupLabel, Item, Popup, Root, Separator, Trigger, Value } from "../_engines/react-aria/select.client.js";
+import { createContext, use, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/select/select.client.tsx
+const Scope = createContext({
+	size: "md",
+	invalid: false
+});
+const renderRoot = toRenderFn(void 0, "div");
+const renderDiv = toRenderFn(void 0, "div");
+function SelectRoot({ size = "md", name, required, disabled, invalid, "aria-labelledby": labelledBy, className, ...props }) {
+	const field = useFieldControl({
+		name,
+		required,
+		disabled,
+		invalid,
+		labelBehavior: "focus"
+	});
+	const { id, describedBy } = field;
+	const named = labelledBy ?? field.labelledBy;
+	const scope = useMemo(() => ({
+		size,
+		invalid: field.invalid,
+		id,
+		describedBy
+	}), [
+		size,
+		field.invalid,
+		id,
+		describedBy
+	]);
+	return /* @__PURE__ */ jsx(Scope, {
+		value: scope,
+		children: /* @__PURE__ */ jsx(Root, {
+			...props,
+			...field.name !== void 0 && { name: field.name },
+			...named !== void 0 && { "aria-labelledby": named },
+			required: field.required,
+			disabled: field.disabled,
+			invalid: field.invalid,
+			className: cx("nz-select", className),
+			"data-slot": "select",
+			"data-size": size,
+			render: renderRoot
+		})
+	});
+}
+function SelectTrigger({ id, "aria-describedby": describedBy, className, leadingIcon, indicator, render, children, ...rest }) {
+	const { size, invalid, ...field } = use(Scope);
+	return /* @__PURE__ */ jsxs(Trigger, {
+		...rest,
+		id: id ?? field.id,
+		"aria-describedby": joinIds(field.describedBy, describedBy),
+		className: cx("nz-select-trigger nz-hit-target", className),
+		"data-slot": "select-trigger",
+		"data-size": size,
+		"data-invalid": invalid ? "" : void 0,
+		render: toRenderFn(render, "button"),
+		children: [
+			leadingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-select-icon",
+				"data-slot": "select-icon",
+				"aria-hidden": "true",
+				children: leadingIcon
+			}),
+			children ?? /* @__PURE__ */ jsx(SelectValue, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-select-chevron",
+				"data-slot": "select-chevron",
+				"aria-hidden": "true",
+				children: indicator ?? /* @__PURE__ */ jsx(ChevronsUpDownGlyph, {})
+			})
+		]
+	});
+}
+function SelectValue({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Value, {
+		...rest,
+		className: cx("nz-select-value", className),
+		"data-slot": "select-value",
+		render: toRenderFn(render, "span")
+	});
+}
+function SelectPopup({ side = "bottom", align = "start", sideOffset = 4, container, className, style, children }) {
+	return /* @__PURE__ */ jsx(Popup, {
+		side,
+		align,
+		sideOffset,
+		container,
+		className: cx("nz-select-popup", className),
+		style,
+		"data-slot": "select-popup",
+		render: renderDiv,
+		list: {
+			className: "nz-select-list",
+			"data-slot": "select-list"
+		},
+		children
+	});
+}
+function SelectItem({ className, textValue, indicator, render, children, ...rest }) {
+	const base = toRenderFn(render, "div");
+	const check = indicator !== null && /* @__PURE__ */ jsx("span", {
+		className: "nz-select-item-indicator",
+		"aria-hidden": "true",
+		children: indicator ?? /* @__PURE__ */ jsx(CheckGlyph, {})
+	});
+	return /* @__PURE__ */ jsx(Item, {
+		...rest,
+		textValue: textValue ?? (typeof children === "string" ? children : void 0),
+		className: cx("nz-select-item", className),
+		"data-slot": "select-item",
+		"data-focus-inset": "",
+		render: (props, state) => base({
+			...props,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [props["children"], check] })
+		}, state),
+		children
+	});
+}
+function SelectGroup({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Group, {
+		...rest,
+		className: cx("nz-select-group", className),
+		"data-slot": "select-group",
+		render: toRenderFn(render, "section")
+	});
+}
+function SelectGroupLabel({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(GroupLabel, {
+		...rest,
+		className: cx("nz-select-group-label", className),
+		"data-slot": "select-group-label",
+		render: toRenderFn(render, "header")
+	});
+}
+function SelectSeparator({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		...rest,
+		className: cx("nz-select-separator", className),
+		"data-slot": "select-separator",
+		render: toRenderFn(render, "div")
+	});
+}
+//#endregion
+export { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue };