jaci-ui 0.3.0 → 0.4.0

package/dist/components/pin-input/pin-input.js

@@ -0,0 +1,258 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { pinInput } from "../../styled-system/recipes/pin-input.js";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pin-input/pin-input.tsx
+const PinInputContext = createContext(null);
+function digitKey(index) {
+	return `digit-${index}`;
+}
+function usePinInputContext() {
+	const context = useContext(PinInputContext);
+	if (!context) throw new Error("PinInput parts must be rendered inside PinInput.Root.");
+	return context;
+}
+const PinInputRoot = forwardRef(function PinInputRoot({ autoFocus = false, children, className, defaultValue = "", disabled = false, id: providedId, invalid = false, length, name, onValueChange, onComplete, otp = false, type = "text", value: controlledValue, ...props }, ref) {
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const styles = pinInput();
+	const safeLength = Math.max(1, Math.floor(length));
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue.slice(0, safeLength));
+	const value = (controlledValue ?? uncontrolledValue).slice(0, safeLength);
+	const inputRefs = useRef([]);
+	const composingRef = useRef(false);
+	const updateValue = useCallback((next) => {
+		const normalized = next.slice(0, safeLength);
+		if (controlledValue === void 0) setUncontrolledValue(normalized);
+		onValueChange?.(normalized);
+		if (normalized.length === safeLength) onComplete?.(normalized);
+	}, [
+		controlledValue,
+		onComplete,
+		onValueChange,
+		safeLength
+	]);
+	const normalize = useCallback((next) => {
+		const characters = Array.from(next);
+		return (otp ? characters.filter((character) => /[0-9]/u.test(character)) : characters).join("").slice(0, safeLength);
+	}, [otp, safeLength]);
+	const focusIndex = useCallback((index) => {
+		inputRefs.current[Math.max(0, Math.min(safeLength - 1, index))]?.focus();
+	}, [safeLength]);
+	const onInput = useCallback((index, nextCharacter) => {
+		if (composingRef.current) return;
+		const characters = Array.from(value);
+		const next = normalize(nextCharacter).slice(-1);
+		characters[index] = next;
+		const nextValue = characters.join("").slice(0, safeLength);
+		updateValue(nextValue);
+		if (next) focusIndex(index + 1);
+	}, [
+		focusIndex,
+		normalize,
+		safeLength,
+		updateValue,
+		value
+	]);
+	const onCompositionStart = useCallback(() => {
+		composingRef.current = true;
+	}, []);
+	const onCompositionEnd = useCallback((index, event) => {
+		composingRef.current = false;
+		onInput(index, event.currentTarget.value);
+	}, [onInput]);
+	const onPaste = useCallback((index, event) => {
+		event.preventDefault();
+		const pasted = normalize(event.clipboardData.getData("text"));
+		if (!pasted) return;
+		const characters = Array.from(value);
+		Array.from(pasted).forEach((character, offset) => {
+			if (index + offset < safeLength) characters[index + offset] = character;
+		});
+		const nextValue = characters.join("").slice(0, safeLength);
+		updateValue(nextValue);
+		focusIndex(Math.min(safeLength - 1, index + pasted.length));
+	}, [
+		focusIndex,
+		normalize,
+		safeLength,
+		updateValue,
+		value
+	]);
+	const context = {
+		disabled,
+		id,
+		invalid,
+		inputRefs,
+		length: safeLength,
+		onInput,
+		onCompositionEnd,
+		onCompositionStart,
+		onKeyDown: useCallback((index, event) => {
+			if (event.key === "Backspace" && !event.currentTarget.value && index > 0) {
+				event.preventDefault();
+				const characters = Array.from(value);
+				characters[index - 1] = "";
+				updateValue(characters.join(""));
+				focusIndex(index - 1);
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				focusIndex(index - 1);
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				focusIndex(index + 1);
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				focusIndex(0);
+			} else if (event.key === "End") {
+				event.preventDefault();
+				focusIndex(safeLength - 1);
+			}
+		}, [
+			focusIndex,
+			safeLength,
+			updateValue,
+			value
+		]),
+		onPaste,
+		otp,
+		styles,
+		type,
+		value
+	};
+	useEffect(() => {
+		if (autoFocus) inputRefs.current[0]?.focus();
+	}, [autoFocus]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx(styles.root, className),
+		"data-disabled": disabled || void 0,
+		"data-invalid": invalid || void 0,
+		"data-jaci-component": "pin-input",
+		"data-slot": "pin-input",
+		id,
+		ref,
+		children: [/* @__PURE__ */ jsx(PinInputContext.Provider, {
+			value: context,
+			children
+		}), name ? /* @__PURE__ */ jsx("input", {
+			"aria-hidden": "true",
+			className: styles.hiddenInput,
+			disabled,
+			name,
+			tabIndex: -1,
+			value,
+			readOnly: true
+		}) : null]
+	});
+});
+const PinInputLabel = forwardRef(function PinInputLabel({ className, ...props }, ref) {
+	const { id, styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("label", {
+		...props,
+		className: cx(styles.label, className),
+		"data-slot": "pin-input-label",
+		htmlFor: props.htmlFor ?? `${id}-0`,
+		ref
+	});
+});
+const PinInputControl = forwardRef(function PinInputControl({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(styles.control, className),
+		"data-slot": "pin-input-control",
+		ref
+	});
+});
+const PinInputInputs = forwardRef(function PinInputInputs({ className, ...props }, ref) {
+	const { length, styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(styles.inputs, className),
+		"data-slot": "pin-input-inputs",
+		ref,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(PinInputInput, { index }, digitKey(index)))
+	});
+});
+const PinInputInput = forwardRef(function PinInputInput({ className, index, id, onCompositionEnd: onInputCompositionEnd, onCompositionStart: onInputCompositionStart, ...props }, ref) {
+	const { disabled, id: rootId, inputRefs, invalid, length, onInput, onCompositionEnd, onCompositionStart, onKeyDown, onPaste, otp, styles, type, value } = usePinInputContext();
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		"aria-label": props["aria-label"] ?? `Digit ${index + 1} of ${length}`,
+		"aria-invalid": invalid || void 0,
+		autoComplete: otp ? "one-time-code" : props.autoComplete,
+		className: cx(styles.input, className),
+		"data-slot": "pin-input-input",
+		disabled: disabled || props.disabled,
+		id: id ?? `${rootId}-${index}`,
+		inputMode: otp ? "numeric" : props.inputMode,
+		maxLength: 1,
+		onChange: (event) => onInput(index, event.currentTarget.value),
+		onCompositionEnd: (event) => {
+			onCompositionEnd(index, event);
+			onInputCompositionEnd?.(event);
+		},
+		onCompositionStart: (event) => {
+			onCompositionStart();
+			onInputCompositionStart?.(event);
+		},
+		onKeyDown: (event) => onKeyDown(index, event),
+		onPaste: (event) => onPaste(index, event),
+		ref: (node) => {
+			inputRefs.current[index] = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		type,
+		value: Array.from(value)[index] ?? ""
+	});
+});
+const PinInputDescription = forwardRef(function PinInputDescription({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cx(styles.description, className),
+		"data-slot": "pin-input-description",
+		ref
+	});
+});
+const PinInputError = forwardRef(function PinInputError({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cx(styles.error, className),
+		"data-slot": "pin-input-error",
+		role: "alert",
+		ref
+	});
+});
+const PinInputHiddenInput = forwardRef(function PinInputHiddenInput(props, ref) {
+	const { disabled, styles, value } = usePinInputContext();
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		"aria-hidden": "true",
+		className: styles.hiddenInput,
+		disabled: disabled || props.disabled,
+		readOnly: true,
+		ref,
+		tabIndex: -1,
+		type: "hidden",
+		value
+	});
+});
+const PinInput = {
+	Root: PinInputRoot,
+	Label: PinInputLabel,
+	Control: PinInputControl,
+	Inputs: PinInputInputs,
+	Input: PinInputInput,
+	Description: PinInputDescription,
+	Error: PinInputError,
+	HiddenInput: PinInputHiddenInput
+};
+//#endregion
+export { PinInput, PinInputControl, PinInputDescription, PinInputError, PinInputHiddenInput, PinInputInput, PinInputInputs, PinInputLabel, PinInputRoot };
+
+//# sourceMappingURL=pin-input.js.map

package/dist/components/pin-input/pin-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.js","names":[],"sources":["../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  ClipboardEvent,\n  CompositionEvent,\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MutableRefObject,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { pinInput } from \"../../styled-system/recipes\";\n\ninterface PinInputContextValue {\n  disabled: boolean;\n  id: string;\n  invalid: boolean;\n  inputRefs: MutableRefObject<Array<HTMLInputElement | null>>;\n  length: number;\n  onInput: (index: number, value: string) => void;\n  onCompositionEnd: (index: number, event: CompositionEvent<HTMLInputElement>) => void;\n  onCompositionStart: () => void;\n  onKeyDown: (index: number, event: KeyboardEvent<HTMLInputElement>) => void;\n  onPaste: (index: number, event: ClipboardEvent<HTMLInputElement>) => void;\n  otp: boolean;\n  styles: ReturnType<typeof pinInput>;\n  type: \"text\" | \"password\";\n  value: string;\n}\n\nconst PinInputContext = createContext<PinInputContextValue | null>(null);\n\nfunction digitKey(index: number) {\n  return `digit-${index}`;\n}\n\nfunction usePinInputContext() {\n  const context = useContext(PinInputContext);\n  if (!context) throw new Error(\"PinInput parts must be rendered inside PinInput.Root.\");\n  return context;\n}\n\nexport interface PinInputRootProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"defaultValue\"> {\n  length: number;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  type?: \"text\" | \"password\";\n  otp?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  invalid?: boolean;\n  name?: string;\n  children?: ReactNode;\n}\n\nexport const PinInputRoot = forwardRef<HTMLDivElement, PinInputRootProps>(function PinInputRoot(\n  {\n    autoFocus = false,\n    children,\n    className,\n    defaultValue = \"\",\n    disabled = false,\n    id: providedId,\n    invalid = false,\n    length,\n    name,\n    onValueChange,\n    onComplete,\n    otp = false,\n    type = \"text\",\n    value: controlledValue,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const styles = pinInput();\n  const safeLength = Math.max(1, Math.floor(length));\n  const [uncontrolledValue, setUncontrolledValue] = useState(() =>\n    defaultValue.slice(0, safeLength),\n  );\n  const value = (controlledValue ?? uncontrolledValue).slice(0, safeLength);\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const composingRef = useRef(false);\n  const updateValue = useCallback(\n    (next: string) => {\n      const normalized = next.slice(0, safeLength);\n      if (controlledValue === undefined) setUncontrolledValue(normalized);\n      onValueChange?.(normalized);\n      if (normalized.length === safeLength) onComplete?.(normalized);\n    },\n    [controlledValue, onComplete, onValueChange, safeLength],\n  );\n  const normalize = useCallback(\n    (next: string) => {\n      const characters = Array.from(next);\n      return (otp ? characters.filter((character) => /[0-9]/u.test(character)) : characters)\n        .join(\"\")\n        .slice(0, safeLength);\n    },\n    [otp, safeLength],\n  );\n  const focusIndex = useCallback(\n    (index: number) => {\n      inputRefs.current[Math.max(0, Math.min(safeLength - 1, index))]?.focus();\n    },\n    [safeLength],\n  );\n  const onInput = useCallback(\n    (index: number, nextCharacter: string) => {\n      if (composingRef.current) return;\n      const characters = Array.from(value);\n      const next = normalize(nextCharacter).slice(-1);\n      characters[index] = next;\n      const nextValue = characters.join(\"\").slice(0, safeLength);\n      updateValue(nextValue);\n      if (next) focusIndex(index + 1);\n    },\n    [focusIndex, normalize, safeLength, updateValue, value],\n  );\n  const onCompositionStart = useCallback(() => {\n    composingRef.current = true;\n  }, []);\n  const onCompositionEnd = useCallback(\n    (index: number, event: CompositionEvent<HTMLInputElement>) => {\n      composingRef.current = false;\n      onInput(index, event.currentTarget.value);\n    },\n    [onInput],\n  );\n  const onPaste = useCallback(\n    (index: number, event: ClipboardEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      const pasted = normalize(event.clipboardData.getData(\"text\"));\n      if (!pasted) return;\n      const characters = Array.from(value);\n      Array.from(pasted).forEach((character, offset) => {\n        if (index + offset < safeLength) characters[index + offset] = character;\n      });\n      const nextValue = characters.join(\"\").slice(0, safeLength);\n      updateValue(nextValue);\n      focusIndex(Math.min(safeLength - 1, index + pasted.length));\n    },\n    [focusIndex, normalize, safeLength, updateValue, value],\n  );\n  const onKeyDown = useCallback(\n    (index: number, event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Backspace\" && !event.currentTarget.value && index > 0) {\n        event.preventDefault();\n        const characters = Array.from(value);\n        characters[index - 1] = \"\";\n        updateValue(characters.join(\"\"));\n        focusIndex(index - 1);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        focusIndex(index - 1);\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        focusIndex(index + 1);\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        focusIndex(0);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        focusIndex(safeLength - 1);\n      }\n    },\n    [focusIndex, safeLength, updateValue, value],\n  );\n  const context: PinInputContextValue = {\n    disabled,\n    id,\n    invalid,\n    inputRefs,\n    length: safeLength,\n    onInput,\n    onCompositionEnd,\n    onCompositionStart,\n    onKeyDown,\n    onPaste,\n    otp,\n    styles,\n    type,\n    value,\n  };\n\n  useEffect(() => {\n    if (autoFocus) inputRefs.current[0]?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      {...props}\n      className={cx(styles.root, className)}\n      data-disabled={disabled || undefined}\n      data-invalid={invalid || undefined}\n      data-jaci-component=\"pin-input\"\n      data-slot=\"pin-input\"\n      id={id}\n      ref={ref}\n    >\n      <PinInputContext.Provider value={context}>{children}</PinInputContext.Provider>\n      {name ? (\n        <input\n          aria-hidden=\"true\"\n          className={styles.hiddenInput}\n          disabled={disabled}\n          name={name}\n          tabIndex={-1}\n          value={value}\n          readOnly\n        />\n      ) : null}\n    </div>\n  );\n});\n\nexport type PinInputLabelProps = ComponentPropsWithoutRef<\"label\">;\nexport const PinInputLabel = forwardRef<HTMLLabelElement, PinInputLabelProps>(\n  function PinInputLabel({ className, ...props }, ref) {\n    const { id, styles } = usePinInputContext();\n    return (\n      // biome-ignore lint/a11y/noLabelWithoutControl: the generated Inputs slot supplies the control.\n      <label\n        {...props}\n        className={cx(styles.label, className)}\n        data-slot=\"pin-input-label\"\n        htmlFor={props.htmlFor ?? `${id}-0`}\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type PinInputControlProps = ComponentPropsWithoutRef<\"div\">;\nexport const PinInputControl = forwardRef<HTMLDivElement, PinInputControlProps>(\n  function PinInputControl({ className, ...props }, ref) {\n    const { styles } = usePinInputContext();\n    return (\n      <div\n        {...props}\n        className={cx(styles.control, className)}\n        data-slot=\"pin-input-control\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type PinInputInputsProps = ComponentPropsWithoutRef<\"div\">;\nexport const PinInputInputs = forwardRef<HTMLDivElement, PinInputInputsProps>(\n  function PinInputInputs({ className, ...props }, ref) {\n    const { length, styles } = usePinInputContext();\n    return (\n      <div\n        {...props}\n        className={cx(styles.inputs, className)}\n        data-slot=\"pin-input-inputs\"\n        ref={ref}\n      >\n        {Array.from({ length }, (_, index) => (\n          <PinInputInput index={index} key={digitKey(index)} />\n        ))}\n      </div>\n    );\n  },\n);\n\nexport interface PinInputInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"defaultValue\" | \"onChange\" | \"onKeyDown\" | \"onPaste\" | \"type\" | \"value\"\n  > {\n  index: number;\n}\nexport const PinInputInput = forwardRef<HTMLInputElement, PinInputInputProps>(\n  function PinInputInput(\n    {\n      className,\n      index,\n      id,\n      onCompositionEnd: onInputCompositionEnd,\n      onCompositionStart: onInputCompositionStart,\n      ...props\n    },\n    ref,\n  ) {\n    const {\n      disabled,\n      id: rootId,\n      inputRefs,\n      invalid,\n      length,\n      onInput,\n      onCompositionEnd,\n      onCompositionStart,\n      onKeyDown,\n      onPaste,\n      otp,\n      styles,\n      type,\n      value,\n    } = usePinInputContext();\n    return (\n      <input\n        {...props}\n        aria-label={props[\"aria-label\"] ?? `Digit ${index + 1} of ${length}`}\n        aria-invalid={invalid || undefined}\n        autoComplete={otp ? \"one-time-code\" : props.autoComplete}\n        className={cx(styles.input, className)}\n        data-slot=\"pin-input-input\"\n        disabled={disabled || props.disabled}\n        id={id ?? `${rootId}-${index}`}\n        inputMode={otp ? \"numeric\" : props.inputMode}\n        maxLength={1}\n        onChange={(event) => onInput(index, event.currentTarget.value)}\n        onCompositionEnd={(event) => {\n          onCompositionEnd(index, event);\n          onInputCompositionEnd?.(event);\n        }}\n        onCompositionStart={(event) => {\n          onCompositionStart();\n          onInputCompositionStart?.(event);\n        }}\n        onKeyDown={(event) => onKeyDown(index, event)}\n        onPaste={(event) => onPaste(index, event)}\n        ref={(node) => {\n          inputRefs.current[index] = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type={type}\n        value={Array.from(value)[index] ?? \"\"}\n      />\n    );\n  },\n);\n\nexport type PinInputDescriptionProps = ComponentPropsWithoutRef<\"p\">;\nexport const PinInputDescription = forwardRef<HTMLParagraphElement, PinInputDescriptionProps>(\n  function PinInputDescription({ className, ...props }, ref) {\n    const { styles } = usePinInputContext();\n    return (\n      <p\n        {...props}\n        className={cx(styles.description, className)}\n        data-slot=\"pin-input-description\"\n        ref={ref}\n      />\n    );\n  },\n);\nexport type PinInputErrorProps = ComponentPropsWithoutRef<\"p\">;\nexport const PinInputError = forwardRef<HTMLParagraphElement, PinInputErrorProps>(\n  function PinInputError({ className, ...props }, ref) {\n    const { styles } = usePinInputContext();\n    return (\n      <p\n        {...props}\n        className={cx(styles.error, className)}\n        data-slot=\"pin-input-error\"\n        role=\"alert\"\n        ref={ref}\n      />\n    );\n  },\n);\nexport type PinInputHiddenInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"name\" | \"type\" | \"value\"\n>;\nexport const PinInputHiddenInput = forwardRef<HTMLInputElement, PinInputHiddenInputProps>(\n  function PinInputHiddenInput(props, ref) {\n    const { disabled, styles, value } = usePinInputContext();\n    return (\n      <input\n        {...props}\n        aria-hidden=\"true\"\n        className={styles.hiddenInput}\n        disabled={disabled || props.disabled}\n        readOnly\n        ref={ref}\n        tabIndex={-1}\n        type=\"hidden\"\n        value={value}\n      />\n    );\n  },\n);\n\nexport const PinInput = {\n  Root: PinInputRoot,\n  Label: PinInputLabel,\n  Control: PinInputControl,\n  Inputs: PinInputInputs,\n  Input: PinInputInput,\n  Description: PinInputDescription,\n  Error: PinInputError,\n  HiddenInput: PinInputHiddenInput,\n};\n"],"mappings":"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"}

package/dist/components/select/index.d.cts

@@ -1,2 +1,2 @@
-import { Select, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./select.cjs";
-export { Select, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectPopup, type SelectPopupProps, SelectPortal, SelectPositioner, type SelectPositionerProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };
+import { Select, SelectClear, SelectClearProps, SelectEmpty, SelectEmptyProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectLoading, SelectLoadingProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectStatus, SelectStatusProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./select.cjs";
+export { Select, SelectClear, type SelectClearProps, SelectEmpty, type SelectEmptyProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectLoading, type SelectLoadingProps, SelectPopup, type SelectPopupProps, SelectPortal, SelectPositioner, type SelectPositionerProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectStatus, type SelectStatusProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/components/select/index.d.ts

@@ -1,2 +1,2 @@
-import { Select, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./select.js";
-export { Select, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectPopup, type SelectPopupProps, SelectPortal, SelectPositioner, type SelectPositionerProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };
+import { Select, SelectClear, SelectClearProps, SelectEmpty, SelectEmptyProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectLoading, SelectLoadingProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectStatus, SelectStatusProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./select.js";
+export { Select, SelectClear, type SelectClearProps, SelectEmpty, type SelectEmptyProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectLoading, type SelectLoadingProps, SelectPopup, type SelectPopupProps, SelectPortal, SelectPositioner, type SelectPositionerProps, SelectRoot, type SelectRootProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectStatus, type SelectStatusProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/components/select/select.cjs

@@ -7,13 +7,37 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_select = require("@base-ui/react/select");
 //#region src/components/select/select.tsx
 const SelectSizeContext = (0, react.createContext)("md");
+const SelectAuxContext = (0, react.createContext)(null);
 function useSelectStyles() {
 	return require_select.select({ size: (0, react.useContext)(SelectSizeContext) });
 }
-function SelectRoot({ size = "md", ...props }) {
+function SelectRoot({ defaultValue, disabled = false, loading: _loading, multiple, onValueChange, size = "md", value: controlledValue, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue ?? (multiple ? [] : null));
+	const value = controlledValue === void 0 ? uncontrolledValue : controlledValue;
+	const clear = () => {
+		const nextValue = multiple ? [] : null;
+		if (controlledValue === void 0) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue, void 0);
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectSizeContext.Provider, {
 		value: size,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Root, { ...props })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectAuxContext.Provider, {
+			value: {
+				clear,
+				disabled
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Root, {
+				...props,
+				disabled,
+				defaultValue: void 0,
+				multiple,
+				onValueChange: (nextValue, details) => {
+					if (controlledValue === void 0) setUncontrolledValue(nextValue);
+					onValueChange?.(nextValue, details);
+				},
+				value
+			})
+		})
 	});
 }
 /** An accessible label that Base UI associates with the trigger automatically. */
@@ -133,6 +157,51 @@ const SelectSeparator = (0, react.forwardRef)(function SelectSeparator({ classNa
 		"data-slot": "select-separator"
 	});
 });
+const SelectClear = (0, react.forwardRef)(function SelectClear({ children = "×", className, ...props }, ref) {
+	const context = (0, react.useContext)(SelectAuxContext);
+	const styles = useSelectStyles();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		"aria-label": props["aria-label"] ?? "Clear selection",
+		className: require_cx.cx(styles.clear, className),
+		"data-slot": "select-clear",
+		disabled: props.disabled || context?.disabled,
+		onClick: (event) => {
+			context?.clear();
+			props.onClick?.(event);
+		},
+		ref,
+		type: "button",
+		children
+	});
+});
+const SelectEmpty = (0, react.forwardRef)(function SelectEmpty({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: require_cx.cx(useSelectStyles().empty, className),
+		"data-slot": "select-empty",
+		ref
+	});
+});
+const SelectLoading = (0, react.forwardRef)(function SelectLoading({ children = "Loading…", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		"aria-live": "polite",
+		className: require_cx.cx(useSelectStyles().loading, className),
+		"data-slot": "select-loading",
+		ref,
+		children
+	});
+});
+const SelectStatus = (0, react.forwardRef)(function SelectStatus({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		"aria-live": "polite",
+		className: require_cx.cx(useSelectStyles().status, className),
+		"data-slot": "select-status",
+		ref
+	});
+});
 const Select = {
 	Root: SelectRoot,
 	Label: SelectLabel,
@@ -148,10 +217,16 @@ const Select = {
 	ItemIndicator: SelectItemIndicator,
 	Group: SelectGroup,
 	GroupLabel: SelectGroupLabel,
-	Separator: SelectSeparator
+	Separator: SelectSeparator,
+	Clear: SelectClear,
+	Empty: SelectEmpty,
+	Loading: SelectLoading,
+	Status: SelectStatus
 };
 //#endregion
 exports.Select = Select;
+exports.SelectClear = SelectClear;
+exports.SelectEmpty = SelectEmpty;
 exports.SelectGroup = SelectGroup;
 exports.SelectGroupLabel = SelectGroupLabel;
 exports.SelectIcon = SelectIcon;
@@ -160,11 +235,13 @@ exports.SelectItemIndicator = SelectItemIndicator;
 exports.SelectItemText = SelectItemText;
 exports.SelectLabel = SelectLabel;
 exports.SelectList = SelectList;
+exports.SelectLoading = SelectLoading;
 exports.SelectPopup = SelectPopup;
 exports.SelectPortal = SelectPortal;
 exports.SelectPositioner = SelectPositioner;
 exports.SelectRoot = SelectRoot;
 exports.SelectSeparator = SelectSeparator;
+exports.SelectStatus = SelectStatus;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 

package/dist/components/select/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","names":["select","BaseSelect","withRecipeClassName","cx"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  size = \"md\",\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <BaseSelect.Root {...props} />\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const SelectPortal = BaseSelect.Portal;\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.cjs","names":["select","BaseSelect","withRecipeClassName","cx"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { createContext, forwardRef, useContext, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { SelectRoot as BaseSelectRoot } from \"@base-ui/react/select\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { select } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\nconst SelectAuxContext = createContext<{ clear: () => void; disabled: boolean } | null>(null);\n\nfunction useSelectStyles() {\n  return select({ size: useContext(SelectSizeContext) });\n}\n\n/**\n * Groups an accessible listbox select. Use `value`/`onValueChange` for a\n * controlled selection, or `defaultValue` for an uncontrolled selection.\n *\n * `size` is shared by all visual parts so the trigger stays aligned with the\n * library's `Input` component.\n */\nexport interface SelectRootProps<Value, Multiple extends boolean | undefined = false>\n  extends BaseSelectRoot.Props<Value, Multiple> {\n  size?: SelectSize;\n  loading?: boolean;\n}\n\nexport function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({\n  defaultValue,\n  disabled = false,\n  loading: _loading,\n  multiple,\n  onValueChange,\n  size = \"md\",\n  value: controlledValue,\n  ...props\n}: SelectRootProps<Value, Multiple>) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(\n    defaultValue ?? (multiple ? [] : null),\n  );\n  const value = controlledValue === undefined ? uncontrolledValue : controlledValue;\n  const clear = () => {\n    const nextValue = multiple ? [] : null;\n    if (controlledValue === undefined) setUncontrolledValue(nextValue);\n    onValueChange?.(nextValue as never, undefined as never);\n  };\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <SelectAuxContext.Provider value={{ clear, disabled }}>\n        <BaseSelect.Root\n          {...props}\n          disabled={disabled}\n          defaultValue={undefined}\n          multiple={multiple}\n          onValueChange={(nextValue, details) => {\n            if (controlledValue === undefined) setUncontrolledValue(nextValue);\n            onValueChange?.(nextValue, details);\n          }}\n          value={value as SelectRootProps<Value, Multiple>[\"value\"]}\n        />\n      </SelectAuxContext.Provider>\n    </SelectSizeContext.Provider>\n  );\n}\n\nexport type SelectLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.Label>;\n\n/** An accessible label that Base UI associates with the trigger automatically. */\nexport const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(function SelectLabel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Label\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().label, className)}\n      data-slot=\"select-label\"\n    />\n  );\n});\n\nexport type SelectTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;\n\n/** The button-shaped control that opens the select popup. */\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Trigger\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().trigger, className)}\n        data-jaci-component=\"select\"\n        data-slot=\"select-trigger\"\n      />\n    );\n  },\n);\n\nexport type SelectValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;\n\n/** Renders the selected item's label, or its placeholder when empty. */\nexport const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(function SelectValue(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Value\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().value, className)}\n      data-slot=\"select-value\"\n    />\n  );\n});\n\nexport type SelectIconProps = ComponentPropsWithoutRef<typeof BaseSelect.Icon>;\n\n/** A small chevron that rotates while the popup is open. */\nexport const SelectIcon = forwardRef<HTMLSpanElement, SelectIconProps>(function SelectIcon(\n  { children = \"⌄\", className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Icon\n      {...props}\n      aria-hidden=\"true\"\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().icon, className)}\n      data-slot=\"select-icon\"\n    >\n      {children}\n    </BaseSelect.Icon>\n  );\n});\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport const SelectPortal = BaseSelect.Portal;\n\nexport type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;\n\nexport const SelectPositioner = forwardRef<HTMLDivElement, SelectPositionerProps>(\n  function SelectPositioner({ className, ...props }, ref) {\n    return (\n      <BaseSelect.Positioner\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().positioner, className)}\n        data-slot=\"select-positioner\"\n      />\n    );\n  },\n);\n\nexport type SelectPopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;\n\nexport const SelectPopup = forwardRef<HTMLDivElement, SelectPopupProps>(function SelectPopup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Popup\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().popup, className)}\n      data-slot=\"select-popup\"\n    />\n  );\n});\n\nexport type SelectListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;\n\nexport const SelectList = forwardRef<HTMLDivElement, SelectListProps>(function SelectList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().list, className)}\n      data-slot=\"select-list\"\n    />\n  );\n});\n\nexport type SelectItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;\n\nexport const SelectItem = forwardRef<HTMLElement, SelectItemProps>(function SelectItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Item\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().item, className)}\n      data-slot=\"select-item\"\n    />\n  );\n});\n\nexport type SelectItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;\n\nexport const SelectItemText = forwardRef<HTMLDivElement, SelectItemTextProps>(\n  function SelectItemText({ className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemText\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemText, className)}\n        data-slot=\"select-item-text\"\n      />\n    );\n  },\n);\n\nexport type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;\n\nexport const SelectItemIndicator = forwardRef<HTMLSpanElement, SelectItemIndicatorProps>(\n  function SelectItemIndicator({ children = \"✓\", className, ...props }, ref) {\n    return (\n      <BaseSelect.ItemIndicator\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().itemIndicator, className)}\n        data-slot=\"select-item-indicator\"\n      >\n        {children}\n      </BaseSelect.ItemIndicator>\n    );\n  },\n);\n\nexport type SelectGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;\n\nexport const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(function SelectGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseSelect.Group\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useSelectStyles().group, className)}\n      data-slot=\"select-group\"\n    />\n  );\n});\n\nexport type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;\n\nexport const SelectGroupLabel = forwardRef<HTMLDivElement, SelectGroupLabelProps>(\n  function SelectGroupLabel({ className, ...props }, ref) {\n    return (\n      <BaseSelect.GroupLabel\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useSelectStyles().groupLabel, className)}\n        data-slot=\"select-group-label\"\n      />\n    );\n  },\n);\n\n/**\n * A visual separator for groups in a listbox. It is intentionally hidden from\n * assistive technology because ARIA listboxes may only contain options or\n * option groups, not semantic separators.\n */\nexport interface SelectSeparatorProps extends ComponentPropsWithoutRef<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(\n  function SelectSeparator({ className, orientation = \"horizontal\", ...props }, ref) {\n    return (\n      <div\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(useSelectStyles().separator, className)}\n        data-orientation={orientation}\n        data-slot=\"select-separator\"\n      />\n    );\n  },\n);\n\nexport interface SelectClearProps extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\nexport const SelectClear = forwardRef<HTMLButtonElement, SelectClearProps>(function SelectClear(\n  { children = \"×\", className, ...props },\n  ref,\n) {\n  const context = useContext(SelectAuxContext);\n  const styles = useSelectStyles();\n  return (\n    <button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      className={cx(styles.clear, className)}\n      data-slot=\"select-clear\"\n      disabled={props.disabled || context?.disabled}\n      onClick={(event) => {\n        context?.clear();\n        props.onClick?.(event);\n      }}\n      ref={ref}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nexport type SelectEmptyProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectEmpty = forwardRef<HTMLDivElement, SelectEmptyProps>(function SelectEmpty(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      className={cx(useSelectStyles().empty, className)}\n      data-slot=\"select-empty\"\n      ref={ref}\n    />\n  );\n});\nexport type SelectLoadingProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectLoading = forwardRef<HTMLDivElement, SelectLoadingProps>(function SelectLoading(\n  { children = \"Loading…\", className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().loading, className)}\n      data-slot=\"select-loading\"\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n});\nexport type SelectStatusProps = ComponentPropsWithoutRef<\"div\">;\nexport const SelectStatus = forwardRef<HTMLDivElement, SelectStatusProps>(function SelectStatus(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      {...props}\n      aria-live=\"polite\"\n      className={cx(useSelectStyles().status, className)}\n      data-slot=\"select-status\"\n      ref={ref}\n    />\n  );\n});\n\nexport const Select = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Portal: SelectPortal,\n  Positioner: SelectPositioner,\n  Popup: SelectPopup,\n  List: SelectList,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  Group: SelectGroup,\n  GroupLabel: SelectGroupLabel,\n  Separator: SelectSeparator,\n  Clear: SelectClear,\n  Empty: SelectEmpty,\n  Loading: SelectLoading,\n  Status: SelectStatus,\n};\n"],"mappings":"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"}

package/dist/components/select/select.d.cts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Select, SelectRoot } from "@base-ui/react/select";
 //#region src/components/select/select.d.ts
 type SelectSize = "sm" | "md" | "lg";
@@ -11,8 +11,9 @@ type SelectSize = "sm" | "md" | "lg";
  */
 interface SelectRootProps<Value, Multiple extends boolean | undefined = false> extends SelectRoot.Props<Value, Multiple> {
   size?: SelectSize;
+  loading?: boolean;
 }
-declare function SelectRoot$1<Value = unknown, Multiple extends boolean | undefined = false>({ size, ...props }: SelectRootProps<Value, Multiple>): import("react").JSX.Element;
+declare function SelectRoot$1<Value = unknown, Multiple extends boolean | undefined = false>({ defaultValue, disabled, loading: _loading, multiple, onValueChange, size, value: controlledValue, ...props }: SelectRootProps<Value, Multiple>): import("react").JSX.Element;
 type SelectLabelProps = ComponentPropsWithoutRef<typeof Select.Label>;
 /** An accessible label that Base UI associates with the trigger automatically. */
 declare const SelectLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -52,6 +53,16 @@ interface SelectSeparatorProps extends ComponentPropsWithoutRef<"div"> {
   orientation?: "horizontal" | "vertical";
 }
 declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+interface SelectClearProps extends ComponentPropsWithoutRef<"button"> {
+  children?: ReactNode;
+}
+declare const SelectClear: import("react").ForwardRefExoticComponent<SelectClearProps & import("react").RefAttributes<HTMLButtonElement>>;
+type SelectEmptyProps = ComponentPropsWithoutRef<"div">;
+declare const SelectEmpty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type SelectLoadingProps = ComponentPropsWithoutRef<"div">;
+declare const SelectLoading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type SelectStatusProps = ComponentPropsWithoutRef<"div">;
+declare const SelectStatus: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const Select$1: {
   Root: typeof SelectRoot$1;
   Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -68,7 +79,11 @@ declare const Select$1: {
   Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Separator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+  Clear: import("react").ForwardRefExoticComponent<SelectClearProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Empty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Loading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Select$1 as Select, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot$1 as SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps };
+export { Select$1 as Select, SelectClear, SelectClearProps, SelectEmpty, SelectEmptyProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectLoading, SelectLoadingProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot$1 as SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectStatus, SelectStatusProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps };
 //# sourceMappingURL=select.d.cts.map

package/dist/components/select/select.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 import { Select, SelectRoot } from "@base-ui/react/select";
 //#region src/components/select/select.d.ts
 type SelectSize = "sm" | "md" | "lg";
@@ -11,8 +11,9 @@ type SelectSize = "sm" | "md" | "lg";
  */
 interface SelectRootProps<Value, Multiple extends boolean | undefined = false> extends SelectRoot.Props<Value, Multiple> {
   size?: SelectSize;
+  loading?: boolean;
 }
-declare function SelectRoot$1<Value = unknown, Multiple extends boolean | undefined = false>({ size, ...props }: SelectRootProps<Value, Multiple>): import("react").JSX.Element;
+declare function SelectRoot$1<Value = unknown, Multiple extends boolean | undefined = false>({ defaultValue, disabled, loading: _loading, multiple, onValueChange, size, value: controlledValue, ...props }: SelectRootProps<Value, Multiple>): import("react").JSX.Element;
 type SelectLabelProps = ComponentPropsWithoutRef<typeof Select.Label>;
 /** An accessible label that Base UI associates with the trigger automatically. */
 declare const SelectLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -52,6 +53,16 @@ interface SelectSeparatorProps extends ComponentPropsWithoutRef<"div"> {
   orientation?: "horizontal" | "vertical";
 }
 declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+interface SelectClearProps extends ComponentPropsWithoutRef<"button"> {
+  children?: ReactNode;
+}
+declare const SelectClear: import("react").ForwardRefExoticComponent<SelectClearProps & import("react").RefAttributes<HTMLButtonElement>>;
+type SelectEmptyProps = ComponentPropsWithoutRef<"div">;
+declare const SelectEmpty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type SelectLoadingProps = ComponentPropsWithoutRef<"div">;
+declare const SelectLoading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type SelectStatusProps = ComponentPropsWithoutRef<"div">;
+declare const SelectStatus: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const Select$1: {
   Root: typeof SelectRoot$1;
   Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -68,7 +79,11 @@ declare const Select$1: {
   Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Separator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+  Clear: import("react").ForwardRefExoticComponent<SelectClearProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Empty: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Loading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Status: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { Select$1 as Select, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot$1 as SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps };
+export { Select$1 as Select, SelectClear, SelectClearProps, SelectEmpty, SelectEmptyProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectLoading, SelectLoadingProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPositioner, SelectPositionerProps, SelectRoot$1 as SelectRoot, SelectRootProps, SelectSeparator, SelectSeparatorProps, SelectSize, SelectStatus, SelectStatusProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps };
 //# sourceMappingURL=select.d.ts.map