jaci-ui 0.1.0

package/dist/components/number-field/index.d.cts

@@ -0,0 +1,2 @@
+import { NumberField, NumberFieldDecrement, NumberFieldDecrementProps, NumberFieldGroup, NumberFieldGroupProps, NumberFieldIncrement, NumberFieldIncrementProps, NumberFieldInput, NumberFieldInputProps, NumberFieldLabel, NumberFieldLabelProps, NumberFieldRoot, NumberFieldRootProps, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldScrubAreaCursorProps, NumberFieldScrubAreaProps, NumberFieldSize } from "./number-field.cjs";
+export { NumberField, NumberFieldDecrement, type NumberFieldDecrementProps, NumberFieldGroup, type NumberFieldGroupProps, NumberFieldIncrement, type NumberFieldIncrementProps, NumberFieldInput, type NumberFieldInputProps, NumberFieldLabel, type NumberFieldLabelProps, NumberFieldRoot, type NumberFieldRootProps, NumberFieldScrubArea, NumberFieldScrubAreaCursor, type NumberFieldScrubAreaCursorProps, type NumberFieldScrubAreaProps, type NumberFieldSize };

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+import { NumberField, NumberFieldDecrement, NumberFieldDecrementProps, NumberFieldGroup, NumberFieldGroupProps, NumberFieldIncrement, NumberFieldIncrementProps, NumberFieldInput, NumberFieldInputProps, NumberFieldLabel, NumberFieldLabelProps, NumberFieldRoot, NumberFieldRootProps, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldScrubAreaCursorProps, NumberFieldScrubAreaProps, NumberFieldSize } from "./number-field.js";
+export { NumberField, NumberFieldDecrement, type NumberFieldDecrementProps, NumberFieldGroup, type NumberFieldGroupProps, NumberFieldIncrement, type NumberFieldIncrementProps, NumberFieldInput, type NumberFieldInputProps, NumberFieldLabel, type NumberFieldLabelProps, NumberFieldRoot, type NumberFieldRootProps, NumberFieldScrubArea, NumberFieldScrubAreaCursor, type NumberFieldScrubAreaCursorProps, type NumberFieldScrubAreaProps, type NumberFieldSize };

package/dist/components/number-field/number-field.cjs

@@ -0,0 +1,124 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_base_ui = require("../base-ui.cjs");
+const require_number_field = require("../../styled-system/recipes/number-field.cjs");
+const require_field = require("../field/field.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_field = require("@base-ui/react/field");
+let _base_ui_react_number_field = require("@base-ui/react/number-field");
+//#region src/components/number-field/number-field.tsx
+const NumberFieldSizeContext = (0, react.createContext)("md");
+function useNumberFieldStyles() {
+	return require_number_field.numberField({ size: (0, react.useContext)(NumberFieldSizeContext) });
+}
+/**
+* A locale-aware numeric field with keyboard, wheel and button stepping.
+* It supports the controlled `value`/`onValueChange` and uncontrolled
+* `defaultValue` APIs while preserving native form submission.
+*/
+function NumberFieldRoot({ children, className, disabled, errors, invalid, name, size = "md", ...props }) {
+	const fieldProps = {
+		className: require_cx.cx(require_number_field.numberField({ size }).root, className),
+		...disabled === void 0 ? {} : { disabled },
+		...errors === void 0 ? {} : { errors },
+		...invalid === void 0 ? {} : { invalid },
+		...name === void 0 ? {} : { name }
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberFieldSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field.Field, {
+			...fieldProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Root, {
+				...props,
+				...disabled === void 0 ? {} : { disabled },
+				...name === void 0 ? {} : { name },
+				"data-jaci-component": "number-field",
+				"data-slot": "number-field",
+				children
+			})
+		})
+	});
+}
+const NumberFieldLabel = (0, react.forwardRef)(function NumberFieldLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Label, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(useNumberFieldStyles().label, className),
+		"data-slot": "number-field-label"
+	});
+});
+const NumberFieldGroup = (0, react.forwardRef)(function NumberFieldGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Group, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(useNumberFieldStyles().group, className),
+		"data-slot": "number-field-group"
+	});
+});
+const NumberFieldInput = (0, react.forwardRef)(function NumberFieldInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Input, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(useNumberFieldStyles().input, className),
+		"data-slot": "number-field-input"
+	});
+});
+const NumberFieldIncrement = (0, react.forwardRef)(function NumberFieldIncrement({ "aria-label": ariaLabel, children = "+", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Increment, {
+		...props,
+		ref,
+		"aria-label": ariaLabel ?? "Increase value",
+		className: require_base_ui.withRecipeClassName(useNumberFieldStyles().increment, className),
+		"data-slot": "number-field-increment",
+		children
+	});
+});
+const NumberFieldDecrement = (0, react.forwardRef)(function NumberFieldDecrement({ "aria-label": ariaLabel, children = "−", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.Decrement, {
+		...props,
+		ref,
+		"aria-label": ariaLabel ?? "Decrease value",
+		className: require_base_ui.withRecipeClassName(useNumberFieldStyles().decrement, className),
+		"data-slot": "number-field-decrement",
+		children
+	});
+});
+const NumberFieldScrubArea = (0, react.forwardRef)(function NumberFieldScrubArea({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.ScrubArea, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(useNumberFieldStyles().scrubArea, className),
+		"data-slot": "number-field-scrub-area"
+	});
+});
+const NumberFieldScrubAreaCursor = (0, react.forwardRef)(function NumberFieldScrubAreaCursor({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_number_field.NumberField.ScrubAreaCursor, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(useNumberFieldStyles().scrubAreaCursor, className),
+		"data-slot": "number-field-scrub-area-cursor"
+	});
+});
+const NumberField = {
+	Root: NumberFieldRoot,
+	Label: NumberFieldLabel,
+	Group: NumberFieldGroup,
+	Input: NumberFieldInput,
+	Increment: NumberFieldIncrement,
+	Decrement: NumberFieldDecrement,
+	ScrubArea: NumberFieldScrubArea,
+	ScrubAreaCursor: NumberFieldScrubAreaCursor
+};
+//#endregion
+exports.NumberField = NumberField;
+exports.NumberFieldDecrement = NumberFieldDecrement;
+exports.NumberFieldGroup = NumberFieldGroup;
+exports.NumberFieldIncrement = NumberFieldIncrement;
+exports.NumberFieldInput = NumberFieldInput;
+exports.NumberFieldLabel = NumberFieldLabel;
+exports.NumberFieldRoot = NumberFieldRoot;
+exports.NumberFieldScrubArea = NumberFieldScrubArea;
+exports.NumberFieldScrubAreaCursor = NumberFieldScrubAreaCursor;
+
+//# sourceMappingURL=number-field.cjs.map

package/dist/components/number-field/number-field.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.cjs","names":["numberField","cx","Field","BaseNumberField","BaseField","withRecipeClassName"],"sources":["../../../src/components/number-field/number-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NumberFieldRoot as BaseNumberFieldRoot } from \"@base-ui/react/number-field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { numberField } from \"../../styled-system/recipes\";\nimport { Field } from \"../field\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type NumberFieldSize = \"sm\" | \"md\" | \"lg\";\n\nconst NumberFieldSizeContext = createContext<NumberFieldSize>(\"md\");\n\nfunction useNumberFieldStyles() {\n  return numberField({ size: useContext(NumberFieldSizeContext) });\n}\n\nexport interface NumberFieldRootProps\n  extends Omit<BaseNumberFieldRoot.Props, \"children\" | \"className\"> {\n  /** Shared visual size for the input and stepper buttons. */\n  size?: NumberFieldSize;\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Direct error content rendered through the surrounding Field context. */\n  errors?: ReactNode | ReactNode[];\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * A locale-aware numeric field with keyboard, wheel and button stepping.\n * It supports the controlled `value`/`onValueChange` and uncontrolled\n * `defaultValue` APIs while preserving native form submission.\n */\nexport function NumberFieldRoot({\n  children,\n  className,\n  disabled,\n  errors,\n  invalid,\n  name,\n  size = \"md\",\n  ...props\n}: NumberFieldRootProps) {\n  const styles = numberField({ size });\n  const fieldProps = {\n    className: cx(styles.root, className),\n    ...(disabled === undefined ? {} : { disabled }),\n    ...(errors === undefined ? {} : { errors }),\n    ...(invalid === undefined ? {} : { invalid }),\n    ...(name === undefined ? {} : { name }),\n  };\n\n  return (\n    <NumberFieldSizeContext.Provider value={size}>\n      <Field {...fieldProps}>\n        <BaseNumberField.Root\n          {...props}\n          {...(disabled === undefined ? {} : { disabled })}\n          {...(name === undefined ? {} : { name })}\n          data-jaci-component=\"number-field\"\n          data-slot=\"number-field\"\n        >\n          {children}\n        </BaseNumberField.Root>\n      </Field>\n    </NumberFieldSizeContext.Provider>\n  );\n}\n\nexport type NumberFieldLabelProps = ComponentPropsWithoutRef<typeof BaseField.Label>;\n\nexport const NumberFieldLabel = forwardRef<HTMLElement, NumberFieldLabelProps>(\n  function NumberFieldLabel({ className, ...props }, ref) {\n    return (\n      <BaseField.Label\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().label, className)}\n        data-slot=\"number-field-label\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldGroupProps = ComponentPropsWithoutRef<typeof BaseNumberField.Group>;\n\nexport const NumberFieldGroup = forwardRef<HTMLDivElement, NumberFieldGroupProps>(\n  function NumberFieldGroup({ className, ...props }, ref) {\n    return (\n      <BaseNumberField.Group\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().group, className)}\n        data-slot=\"number-field-group\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldInputProps = ComponentPropsWithoutRef<typeof BaseNumberField.Input>;\n\nexport const NumberFieldInput = forwardRef<HTMLInputElement, NumberFieldInputProps>(\n  function NumberFieldInput({ className, ...props }, ref) {\n    return (\n      <BaseNumberField.Input\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().input, className)}\n        data-slot=\"number-field-input\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldIncrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Increment>;\n\nexport const NumberFieldIncrement = forwardRef<HTMLButtonElement, NumberFieldIncrementProps>(\n  function NumberFieldIncrement(\n    { \"aria-label\": ariaLabel, children = \"+\", className, ...props },\n    ref,\n  ) {\n    return (\n      <BaseNumberField.Increment\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel ?? \"Increase value\"}\n        className={withRecipeClassName(useNumberFieldStyles().increment, className)}\n        data-slot=\"number-field-increment\"\n      >\n        {children}\n      </BaseNumberField.Increment>\n    );\n  },\n);\n\nexport type NumberFieldDecrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Decrement>;\n\nexport const NumberFieldDecrement = forwardRef<HTMLButtonElement, NumberFieldDecrementProps>(\n  function NumberFieldDecrement(\n    { \"aria-label\": ariaLabel, children = \"−\", className, ...props },\n    ref,\n  ) {\n    return (\n      <BaseNumberField.Decrement\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel ?? \"Decrease value\"}\n        className={withRecipeClassName(useNumberFieldStyles().decrement, className)}\n        data-slot=\"number-field-decrement\"\n      >\n        {children}\n      </BaseNumberField.Decrement>\n    );\n  },\n);\n\nexport type NumberFieldScrubAreaProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubArea>;\n\nexport const NumberFieldScrubArea = forwardRef<HTMLSpanElement, NumberFieldScrubAreaProps>(\n  function NumberFieldScrubArea({ className, ...props }, ref) {\n    return (\n      <BaseNumberField.ScrubArea\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().scrubArea, className)}\n        data-slot=\"number-field-scrub-area\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldScrubAreaCursorProps = ComponentPropsWithoutRef<\n  typeof BaseNumberField.ScrubAreaCursor\n>;\n\nexport const NumberFieldScrubAreaCursor = forwardRef<\n  HTMLSpanElement,\n  NumberFieldScrubAreaCursorProps\n>(function NumberFieldScrubAreaCursor({ className, ...props }, ref) {\n  return (\n    <BaseNumberField.ScrubAreaCursor\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useNumberFieldStyles().scrubAreaCursor, className)}\n      data-slot=\"number-field-scrub-area-cursor\"\n    />\n  );\n});\n\nexport const NumberField = {\n  Root: NumberFieldRoot,\n  Label: NumberFieldLabel,\n  Group: NumberFieldGroup,\n  Input: NumberFieldInput,\n  Increment: NumberFieldIncrement,\n  Decrement: NumberFieldDecrement,\n  ScrubArea: NumberFieldScrubArea,\n  ScrubAreaCursor: NumberFieldScrubAreaCursor,\n};\n"],"mappings":"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"}

package/dist/components/number-field/number-field.d.cts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Field } from "@base-ui/react/field";
+import { NumberField, NumberFieldRoot } from "@base-ui/react/number-field";
+//#region src/components/number-field/number-field.d.ts
+type NumberFieldSize = "sm" | "md" | "lg";
+interface NumberFieldRootProps extends Omit<NumberFieldRoot.Props, "children" | "className"> {
+  /** Shared visual size for the input and stepper buttons. */
+  size?: NumberFieldSize;
+  /** Marks the field invalid when an external validator owns its state. */
+  invalid?: boolean;
+  /** Direct error content rendered through the surrounding Field context. */
+  errors?: ReactNode | ReactNode[];
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * A locale-aware numeric field with keyboard, wheel and button stepping.
+ * It supports the controlled `value`/`onValueChange` and uncontrolled
+ * `defaultValue` APIs while preserving native form submission.
+ */
+declare function NumberFieldRoot$1({ children, className, disabled, errors, invalid, name, size, ...props }: NumberFieldRootProps): import("react").JSX.Element;
+type NumberFieldLabelProps = ComponentPropsWithoutRef<typeof Field.Label>;
+declare const NumberFieldLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type NumberFieldGroupProps = ComponentPropsWithoutRef<typeof NumberField.Group>;
+declare const NumberFieldGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NumberFieldInputProps = ComponentPropsWithoutRef<typeof NumberField.Input>;
+declare const NumberFieldInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+type NumberFieldIncrementProps = ComponentPropsWithoutRef<typeof NumberField.Increment>;
+declare const NumberFieldIncrement: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type NumberFieldDecrementProps = ComponentPropsWithoutRef<typeof NumberField.Decrement>;
+declare const NumberFieldDecrement: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type NumberFieldScrubAreaProps = ComponentPropsWithoutRef<typeof NumberField.ScrubArea>;
+declare const NumberFieldScrubArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type NumberFieldScrubAreaCursorProps = ComponentPropsWithoutRef<typeof NumberField.ScrubAreaCursor>;
+declare const NumberFieldScrubAreaCursor: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaCursorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const NumberField$1: {
+  Root: typeof NumberFieldRoot$1;
+  Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Increment: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Decrement: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  ScrubArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  ScrubAreaCursor: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaCursorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { NumberField$1 as NumberField, NumberFieldDecrement, NumberFieldDecrementProps, NumberFieldGroup, NumberFieldGroupProps, NumberFieldIncrement, NumberFieldIncrementProps, NumberFieldInput, NumberFieldInputProps, NumberFieldLabel, NumberFieldLabelProps, NumberFieldRoot$1 as NumberFieldRoot, NumberFieldRootProps, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldScrubAreaCursorProps, NumberFieldScrubAreaProps, NumberFieldSize };
+//# sourceMappingURL=number-field.d.cts.map

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Field } from "@base-ui/react/field";
+import { NumberField, NumberFieldRoot } from "@base-ui/react/number-field";
+//#region src/components/number-field/number-field.d.ts
+type NumberFieldSize = "sm" | "md" | "lg";
+interface NumberFieldRootProps extends Omit<NumberFieldRoot.Props, "children" | "className"> {
+  /** Shared visual size for the input and stepper buttons. */
+  size?: NumberFieldSize;
+  /** Marks the field invalid when an external validator owns its state. */
+  invalid?: boolean;
+  /** Direct error content rendered through the surrounding Field context. */
+  errors?: ReactNode | ReactNode[];
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * A locale-aware numeric field with keyboard, wheel and button stepping.
+ * It supports the controlled `value`/`onValueChange` and uncontrolled
+ * `defaultValue` APIs while preserving native form submission.
+ */
+declare function NumberFieldRoot$1({ children, className, disabled, errors, invalid, name, size, ...props }: NumberFieldRootProps): import("react").JSX.Element;
+type NumberFieldLabelProps = ComponentPropsWithoutRef<typeof Field.Label>;
+declare const NumberFieldLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type NumberFieldGroupProps = ComponentPropsWithoutRef<typeof NumberField.Group>;
+declare const NumberFieldGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type NumberFieldInputProps = ComponentPropsWithoutRef<typeof NumberField.Input>;
+declare const NumberFieldInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+type NumberFieldIncrementProps = ComponentPropsWithoutRef<typeof NumberField.Increment>;
+declare const NumberFieldIncrement: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type NumberFieldDecrementProps = ComponentPropsWithoutRef<typeof NumberField.Decrement>;
+declare const NumberFieldDecrement: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+type NumberFieldScrubAreaProps = ComponentPropsWithoutRef<typeof NumberField.ScrubArea>;
+declare const NumberFieldScrubArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type NumberFieldScrubAreaCursorProps = ComponentPropsWithoutRef<typeof NumberField.ScrubAreaCursor>;
+declare const NumberFieldScrubAreaCursor: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaCursorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const NumberField$1: {
+  Root: typeof NumberFieldRoot$1;
+  Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Increment: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldIncrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  Decrement: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldDecrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  ScrubArea: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  ScrubAreaCursor: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NumberFieldScrubAreaCursorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { NumberField$1 as NumberField, NumberFieldDecrement, NumberFieldDecrementProps, NumberFieldGroup, NumberFieldGroupProps, NumberFieldIncrement, NumberFieldIncrementProps, NumberFieldInput, NumberFieldInputProps, NumberFieldLabel, NumberFieldLabelProps, NumberFieldRoot$1 as NumberFieldRoot, NumberFieldRootProps, NumberFieldScrubArea, NumberFieldScrubAreaCursor, NumberFieldScrubAreaCursorProps, NumberFieldScrubAreaProps, NumberFieldSize };
+//# sourceMappingURL=number-field.d.ts.map

package/dist/components/number-field/number-field.js

@@ -0,0 +1,116 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { withRecipeClassName } from "../base-ui.js";
+import { numberField } from "../../styled-system/recipes/number-field.js";
+import { Field as Field$1 } from "../field/field.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/components/number-field/number-field.tsx
+const NumberFieldSizeContext = createContext("md");
+function useNumberFieldStyles() {
+	return numberField({ size: useContext(NumberFieldSizeContext) });
+}
+/**
+* A locale-aware numeric field with keyboard, wheel and button stepping.
+* It supports the controlled `value`/`onValueChange` and uncontrolled
+* `defaultValue` APIs while preserving native form submission.
+*/
+function NumberFieldRoot$1({ children, className, disabled, errors, invalid, name, size = "md", ...props }) {
+	const fieldProps = {
+		className: cx(numberField({ size }).root, className),
+		...disabled === void 0 ? {} : { disabled },
+		...errors === void 0 ? {} : { errors },
+		...invalid === void 0 ? {} : { invalid },
+		...name === void 0 ? {} : { name }
+	};
+	return /* @__PURE__ */ jsx(NumberFieldSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ jsx(Field$1, {
+			...fieldProps,
+			children: /* @__PURE__ */ jsx(NumberField.Root, {
+				...props,
+				...disabled === void 0 ? {} : { disabled },
+				...name === void 0 ? {} : { name },
+				"data-jaci-component": "number-field",
+				"data-slot": "number-field",
+				children
+			})
+		})
+	});
+}
+const NumberFieldLabel = forwardRef(function NumberFieldLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Field.Label, {
+		...props,
+		ref,
+		className: withRecipeClassName(useNumberFieldStyles().label, className),
+		"data-slot": "number-field-label"
+	});
+});
+const NumberFieldGroup = forwardRef(function NumberFieldGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberField.Group, {
+		...props,
+		ref,
+		className: withRecipeClassName(useNumberFieldStyles().group, className),
+		"data-slot": "number-field-group"
+	});
+});
+const NumberFieldInput = forwardRef(function NumberFieldInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberField.Input, {
+		...props,
+		ref,
+		className: withRecipeClassName(useNumberFieldStyles().input, className),
+		"data-slot": "number-field-input"
+	});
+});
+const NumberFieldIncrement = forwardRef(function NumberFieldIncrement({ "aria-label": ariaLabel, children = "+", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberField.Increment, {
+		...props,
+		ref,
+		"aria-label": ariaLabel ?? "Increase value",
+		className: withRecipeClassName(useNumberFieldStyles().increment, className),
+		"data-slot": "number-field-increment",
+		children
+	});
+});
+const NumberFieldDecrement = forwardRef(function NumberFieldDecrement({ "aria-label": ariaLabel, children = "−", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberField.Decrement, {
+		...props,
+		ref,
+		"aria-label": ariaLabel ?? "Decrease value",
+		className: withRecipeClassName(useNumberFieldStyles().decrement, className),
+		"data-slot": "number-field-decrement",
+		children
+	});
+});
+const NumberFieldScrubArea = forwardRef(function NumberFieldScrubArea({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberField.ScrubArea, {
+		...props,
+		ref,
+		className: withRecipeClassName(useNumberFieldStyles().scrubArea, className),
+		"data-slot": "number-field-scrub-area"
+	});
+});
+const NumberFieldScrubAreaCursor = forwardRef(function NumberFieldScrubAreaCursor({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(NumberField.ScrubAreaCursor, {
+		...props,
+		ref,
+		className: withRecipeClassName(useNumberFieldStyles().scrubAreaCursor, className),
+		"data-slot": "number-field-scrub-area-cursor"
+	});
+});
+const NumberField$1 = {
+	Root: NumberFieldRoot$1,
+	Label: NumberFieldLabel,
+	Group: NumberFieldGroup,
+	Input: NumberFieldInput,
+	Increment: NumberFieldIncrement,
+	Decrement: NumberFieldDecrement,
+	ScrubArea: NumberFieldScrubArea,
+	ScrubAreaCursor: NumberFieldScrubAreaCursor
+};
+//#endregion
+export { NumberField$1 as NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldLabel, NumberFieldRoot$1 as NumberFieldRoot, NumberFieldScrubArea, NumberFieldScrubAreaCursor };
+
+//# sourceMappingURL=number-field.js.map

package/dist/components/number-field/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","names":["NumberFieldRoot","Field","BaseNumberField","BaseField","NumberField"],"sources":["../../../src/components/number-field/number-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NumberFieldRoot as BaseNumberFieldRoot } from \"@base-ui/react/number-field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { numberField } from \"../../styled-system/recipes\";\nimport { Field } from \"../field\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type NumberFieldSize = \"sm\" | \"md\" | \"lg\";\n\nconst NumberFieldSizeContext = createContext<NumberFieldSize>(\"md\");\n\nfunction useNumberFieldStyles() {\n  return numberField({ size: useContext(NumberFieldSizeContext) });\n}\n\nexport interface NumberFieldRootProps\n  extends Omit<BaseNumberFieldRoot.Props, \"children\" | \"className\"> {\n  /** Shared visual size for the input and stepper buttons. */\n  size?: NumberFieldSize;\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Direct error content rendered through the surrounding Field context. */\n  errors?: ReactNode | ReactNode[];\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * A locale-aware numeric field with keyboard, wheel and button stepping.\n * It supports the controlled `value`/`onValueChange` and uncontrolled\n * `defaultValue` APIs while preserving native form submission.\n */\nexport function NumberFieldRoot({\n  children,\n  className,\n  disabled,\n  errors,\n  invalid,\n  name,\n  size = \"md\",\n  ...props\n}: NumberFieldRootProps) {\n  const styles = numberField({ size });\n  const fieldProps = {\n    className: cx(styles.root, className),\n    ...(disabled === undefined ? {} : { disabled }),\n    ...(errors === undefined ? {} : { errors }),\n    ...(invalid === undefined ? {} : { invalid }),\n    ...(name === undefined ? {} : { name }),\n  };\n\n  return (\n    <NumberFieldSizeContext.Provider value={size}>\n      <Field {...fieldProps}>\n        <BaseNumberField.Root\n          {...props}\n          {...(disabled === undefined ? {} : { disabled })}\n          {...(name === undefined ? {} : { name })}\n          data-jaci-component=\"number-field\"\n          data-slot=\"number-field\"\n        >\n          {children}\n        </BaseNumberField.Root>\n      </Field>\n    </NumberFieldSizeContext.Provider>\n  );\n}\n\nexport type NumberFieldLabelProps = ComponentPropsWithoutRef<typeof BaseField.Label>;\n\nexport const NumberFieldLabel = forwardRef<HTMLElement, NumberFieldLabelProps>(\n  function NumberFieldLabel({ className, ...props }, ref) {\n    return (\n      <BaseField.Label\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().label, className)}\n        data-slot=\"number-field-label\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldGroupProps = ComponentPropsWithoutRef<typeof BaseNumberField.Group>;\n\nexport const NumberFieldGroup = forwardRef<HTMLDivElement, NumberFieldGroupProps>(\n  function NumberFieldGroup({ className, ...props }, ref) {\n    return (\n      <BaseNumberField.Group\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().group, className)}\n        data-slot=\"number-field-group\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldInputProps = ComponentPropsWithoutRef<typeof BaseNumberField.Input>;\n\nexport const NumberFieldInput = forwardRef<HTMLInputElement, NumberFieldInputProps>(\n  function NumberFieldInput({ className, ...props }, ref) {\n    return (\n      <BaseNumberField.Input\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().input, className)}\n        data-slot=\"number-field-input\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldIncrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Increment>;\n\nexport const NumberFieldIncrement = forwardRef<HTMLButtonElement, NumberFieldIncrementProps>(\n  function NumberFieldIncrement(\n    { \"aria-label\": ariaLabel, children = \"+\", className, ...props },\n    ref,\n  ) {\n    return (\n      <BaseNumberField.Increment\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel ?? \"Increase value\"}\n        className={withRecipeClassName(useNumberFieldStyles().increment, className)}\n        data-slot=\"number-field-increment\"\n      >\n        {children}\n      </BaseNumberField.Increment>\n    );\n  },\n);\n\nexport type NumberFieldDecrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Decrement>;\n\nexport const NumberFieldDecrement = forwardRef<HTMLButtonElement, NumberFieldDecrementProps>(\n  function NumberFieldDecrement(\n    { \"aria-label\": ariaLabel, children = \"−\", className, ...props },\n    ref,\n  ) {\n    return (\n      <BaseNumberField.Decrement\n        {...props}\n        ref={ref}\n        aria-label={ariaLabel ?? \"Decrease value\"}\n        className={withRecipeClassName(useNumberFieldStyles().decrement, className)}\n        data-slot=\"number-field-decrement\"\n      >\n        {children}\n      </BaseNumberField.Decrement>\n    );\n  },\n);\n\nexport type NumberFieldScrubAreaProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubArea>;\n\nexport const NumberFieldScrubArea = forwardRef<HTMLSpanElement, NumberFieldScrubAreaProps>(\n  function NumberFieldScrubArea({ className, ...props }, ref) {\n    return (\n      <BaseNumberField.ScrubArea\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(useNumberFieldStyles().scrubArea, className)}\n        data-slot=\"number-field-scrub-area\"\n      />\n    );\n  },\n);\n\nexport type NumberFieldScrubAreaCursorProps = ComponentPropsWithoutRef<\n  typeof BaseNumberField.ScrubAreaCursor\n>;\n\nexport const NumberFieldScrubAreaCursor = forwardRef<\n  HTMLSpanElement,\n  NumberFieldScrubAreaCursorProps\n>(function NumberFieldScrubAreaCursor({ className, ...props }, ref) {\n  return (\n    <BaseNumberField.ScrubAreaCursor\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(useNumberFieldStyles().scrubAreaCursor, className)}\n      data-slot=\"number-field-scrub-area-cursor\"\n    />\n  );\n});\n\nexport const NumberField = {\n  Root: NumberFieldRoot,\n  Label: NumberFieldLabel,\n  Group: NumberFieldGroup,\n  Input: NumberFieldInput,\n  Increment: NumberFieldIncrement,\n  Decrement: NumberFieldDecrement,\n  ScrubArea: NumberFieldScrubArea,\n  ScrubAreaCursor: NumberFieldScrubAreaCursor,\n};\n"],"mappings":"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"}

package/dist/components/option-selector/index.d.cts

@@ -0,0 +1,2 @@
+import { OptionSelector, OptionSelectorOption, OptionSelectorProps, OptionSelectorValue } from "./option-selector.cjs";
+export { OptionSelector, OptionSelectorOption, OptionSelectorProps, OptionSelectorValue };

package/dist/components/option-selector/index.d.ts

@@ -0,0 +1,2 @@
+import { OptionSelector, OptionSelectorOption, OptionSelectorProps, OptionSelectorValue } from "./option-selector.js";
+export { OptionSelector, OptionSelectorOption, OptionSelectorProps, OptionSelectorValue };

package/dist/components/option-selector/option-selector.cjs

@@ -0,0 +1,105 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_option_selector = require("../../styled-system/recipes/option-selector.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/option-selector/option-selector.tsx
+function getMultipleValues(value) {
+	if (Array.isArray(value)) return value;
+	return value === void 0 ? [] : [value];
+}
+function getSingleValue(value) {
+	return Array.isArray(value) ? value[0] : value;
+}
+function isSelected(value, selected, multiple) {
+	return multiple ? getMultipleValues(selected).includes(value) : getSingleValue(selected) === value;
+}
+const OptionSelector = (0, react.forwardRef)(function OptionSelector({ children, className, columns = 1, defaultValue, description, disabled = false, icon, id, label, multiple = false, name, onChange, onValueChange, options = [], orientation = "horizontal", value: controlledValue, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const baseId = id ?? generatedId;
+	const descriptionId = description ? `${baseId}-description` : void 0;
+	const inputName = name ?? `${baseId}-options`;
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(() => multiple ? getMultipleValues(defaultValue) : getSingleValue(defaultValue) ?? "");
+	const selectedValue = controlledValue === void 0 ? uncontrolledValue : controlledValue;
+	const styles = require_option_selector.optionSelector({
+		orientation,
+		columns: String(columns)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("fieldset", {
+		...props,
+		ref,
+		"aria-describedby": props["aria-describedby"] ?? descriptionId,
+		className: require_cx.cx(styles.root, className),
+		"data-disabled": disabled || void 0,
+		"data-jaci-component": "option-selector",
+		"data-slot": "option-selector",
+		disabled,
+		id,
+		children: [
+			label || icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("legend", {
+				className: styles.legend,
+				"data-slot": "option-selector-legend",
+				children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					className: styles.icon,
+					"data-slot": "option-selector-icon",
+					children: icon
+				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: styles.label,
+					"data-slot": "option-selector-label",
+					children: label
+				})]
+			}) : null,
+			description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: styles.description,
+				"data-slot": "option-selector-description",
+				id: descriptionId,
+				children: description
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: styles.options,
+				"data-slot": "option-selector-options",
+				children: [options.map((option, index) => {
+					const optionDisabled = disabled || Boolean(option.disabled);
+					const selected = isSelected(option.value, selectedValue, multiple);
+					const optionId = option.id ?? `${baseId}-option-${index}`;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: styles.option,
+						"data-disabled": optionDisabled || void 0,
+						"data-selected": selected || void 0,
+						"data-slot": "option-selector-option",
+						htmlFor: optionId,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							"aria-label": typeof option.label === "string" ? option.label : void 0,
+							checked: selected,
+							className: styles.input,
+							"data-slot": "option-selector-input",
+							disabled: optionDisabled,
+							id: optionId,
+							name: inputName,
+							onChange: (event) => {
+								const nextValue = multiple ? event.currentTarget.checked ? [...getMultipleValues(selectedValue), option.value] : getMultipleValues(selectedValue).filter((current) => current !== option.value) : option.value;
+								setUncontrolledValue(nextValue);
+								onValueChange?.(nextValue);
+								onChange?.(event);
+							},
+							type: multiple ? "checkbox" : "radio",
+							value: option.value
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: styles.content,
+							children: [option.children, option.label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: styles.optionLabel,
+								"data-slot": "option-selector-option-label",
+								children: option.label
+							}) : null]
+						})]
+					}, option.value);
+				}), children]
+			})
+		]
+	});
+});
+//#endregion
+exports.OptionSelector = OptionSelector;
+
+//# sourceMappingURL=option-selector.cjs.map

package/dist/components/option-selector/option-selector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-selector.cjs","names":["optionSelector","cx"],"sources":["../../../src/components/option-selector/option-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { optionSelector } from \"../../styled-system/recipes\";\n\nexport interface OptionSelectorOption {\n  /** Stable value submitted by the option. */\n  value: string;\n  /** Optional visible text. Use `children` for a richer option body. */\n  label?: ReactNode;\n  /** Custom content such as an icon, preview or illustration. */\n  children?: ReactNode;\n  /** Disables only this option. */\n  disabled?: boolean;\n  /** Explicit id for the native input and its label. */\n  id?: string;\n}\n\nexport type OptionSelectorValue = string | string[];\n\nexport interface OptionSelectorProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"children\" | \"onChange\"> {\n  /** Optional icon displayed next to the legend. */\n  icon?: ReactNode;\n  /** Accessible and visible group label. */\n  label?: ReactNode;\n  /** Supporting text announced with the group. */\n  description?: ReactNode;\n  /** Options rendered as custom selectable cards. */\n  options?: OptionSelectorOption[];\n  /** Name used by the native radio/checkbox inputs and form submission. */\n  name?: string;\n  /** Select multiple options with checkboxes instead of one radio option. */\n  multiple?: boolean;\n  /** Controlled selection. A string is used for one option and an array for many. */\n  value?: OptionSelectorValue;\n  /** Initial selection for an uncontrolled selector. */\n  defaultValue?: OptionSelectorValue;\n  /** Called with the next selected value after an option changes. */\n  onValueChange?: (value: OptionSelectorValue) => void;\n  /** Native change event callback kept for compatibility with the legacy API. */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /** Layout of the option cards. Defaults to the horizontal legacy layout. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Responsive number of columns in the option grid. */\n  columns?: 1 | 2 | 3 | 4;\n  children?: ReactNode;\n}\n\nfunction getMultipleValues(value: OptionSelectorValue | undefined) {\n  if (Array.isArray(value)) {\n    return value;\n  }\n\n  return value === undefined ? [] : [value];\n}\n\nfunction getSingleValue(value: OptionSelectorValue | undefined) {\n  return Array.isArray(value) ? value[0] : value;\n}\n\nfunction isSelected(value: string, selected: OptionSelectorValue | undefined, multiple: boolean) {\n  return multiple\n    ? getMultipleValues(selected).includes(value)\n    : getSingleValue(selected) === value;\n}\n\nexport const OptionSelector = forwardRef<HTMLFieldSetElement, OptionSelectorProps>(\n  function OptionSelector(\n    {\n      children,\n      className,\n      columns = 1,\n      defaultValue,\n      description,\n      disabled = false,\n      icon,\n      id,\n      label,\n      multiple = false,\n      name,\n      onChange,\n      onValueChange,\n      options = [],\n      orientation = \"horizontal\",\n      value: controlledValue,\n      ...props\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const baseId = id ?? generatedId;\n    const descriptionId = description ? `${baseId}-description` : undefined;\n    const inputName = name ?? `${baseId}-options`;\n    const [uncontrolledValue, setUncontrolledValue] = useState<OptionSelectorValue>(() =>\n      multiple ? getMultipleValues(defaultValue) : (getSingleValue(defaultValue) ?? \"\"),\n    );\n    const selectedValue = controlledValue === undefined ? uncontrolledValue : controlledValue;\n    const styles = optionSelector({\n      orientation,\n      columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\",\n    });\n\n    return (\n      <fieldset\n        {...props}\n        ref={ref}\n        aria-describedby={props[\"aria-describedby\"] ?? descriptionId}\n        className={cx(styles.root, className)}\n        data-disabled={disabled || undefined}\n        data-jaci-component=\"option-selector\"\n        data-slot=\"option-selector\"\n        disabled={disabled}\n        id={id}\n      >\n        {label || icon ? (\n          <legend className={styles.legend} data-slot=\"option-selector-legend\">\n            {icon ? (\n              <span aria-hidden=\"true\" className={styles.icon} data-slot=\"option-selector-icon\">\n                {icon}\n              </span>\n            ) : null}\n            <span className={styles.label} data-slot=\"option-selector-label\">\n              {label}\n            </span>\n          </legend>\n        ) : null}\n        {description ? (\n          <p\n            className={styles.description}\n            data-slot=\"option-selector-description\"\n            id={descriptionId}\n          >\n            {description}\n          </p>\n        ) : null}\n        <div className={styles.options} data-slot=\"option-selector-options\">\n          {options.map((option, index) => {\n            const optionDisabled = disabled || Boolean(option.disabled);\n            const selected = isSelected(option.value, selectedValue, multiple);\n            const optionId = option.id ?? `${baseId}-option-${index}`;\n\n            return (\n              <label\n                className={styles.option}\n                data-disabled={optionDisabled || undefined}\n                data-selected={selected || undefined}\n                data-slot=\"option-selector-option\"\n                htmlFor={optionId}\n                key={option.value}\n              >\n                <input\n                  aria-label={typeof option.label === \"string\" ? option.label : undefined}\n                  checked={selected}\n                  className={styles.input}\n                  data-slot=\"option-selector-input\"\n                  disabled={optionDisabled}\n                  id={optionId}\n                  name={inputName}\n                  onChange={(event) => {\n                    const nextValue = multiple\n                      ? event.currentTarget.checked\n                        ? [...getMultipleValues(selectedValue), option.value]\n                        : getMultipleValues(selectedValue).filter(\n                            (current) => current !== option.value,\n                          )\n                      : option.value;\n\n                    setUncontrolledValue(nextValue);\n                    onValueChange?.(nextValue);\n                    onChange?.(event);\n                  }}\n                  type={multiple ? \"checkbox\" : \"radio\"}\n                  value={option.value}\n                />\n                <span className={styles.content}>\n                  {option.children}\n                  {option.label ? (\n                    <span className={styles.optionLabel} data-slot=\"option-selector-option-label\">\n                      {option.label}\n                    </span>\n                  ) : null}\n                </span>\n              </label>\n            );\n          })}\n          {children}\n        </div>\n      </fieldset>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/option-selector/option-selector.d.cts

@@ -0,0 +1,46 @@
+import { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/option-selector/option-selector.d.ts
+interface OptionSelectorOption {
+  /** Stable value submitted by the option. */
+  value: string;
+  /** Optional visible text. Use `children` for a richer option body. */
+  label?: ReactNode;
+  /** Custom content such as an icon, preview or illustration. */
+  children?: ReactNode;
+  /** Disables only this option. */
+  disabled?: boolean;
+  /** Explicit id for the native input and its label. */
+  id?: string;
+}
+type OptionSelectorValue = string | string[];
+interface OptionSelectorProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "children" | "onChange"> {
+  /** Optional icon displayed next to the legend. */
+  icon?: ReactNode;
+  /** Accessible and visible group label. */
+  label?: ReactNode;
+  /** Supporting text announced with the group. */
+  description?: ReactNode;
+  /** Options rendered as custom selectable cards. */
+  options?: OptionSelectorOption[];
+  /** Name used by the native radio/checkbox inputs and form submission. */
+  name?: string;
+  /** Select multiple options with checkboxes instead of one radio option. */
+  multiple?: boolean;
+  /** Controlled selection. A string is used for one option and an array for many. */
+  value?: OptionSelectorValue;
+  /** Initial selection for an uncontrolled selector. */
+  defaultValue?: OptionSelectorValue;
+  /** Called with the next selected value after an option changes. */
+  onValueChange?: (value: OptionSelectorValue) => void;
+  /** Native change event callback kept for compatibility with the legacy API. */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /** Layout of the option cards. Defaults to the horizontal legacy layout. */
+  orientation?: "horizontal" | "vertical";
+  /** Responsive number of columns in the option grid. */
+  columns?: 1 | 2 | 3 | 4;
+  children?: ReactNode;
+}
+declare const OptionSelector: import("react").ForwardRefExoticComponent<OptionSelectorProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { OptionSelector, OptionSelectorOption, OptionSelectorProps, OptionSelectorValue };
+//# sourceMappingURL=option-selector.d.cts.map