/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { Minus, Plus } from "../../icons/index.js";
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
import clsx$1 from "clsx";
import { Button, FieldError, Group, Input, Label, NumberField, Text } from "react-aria-components";
//#region src/forms/NumberField/NumberField.tsx
var styles = {
	wrapper: "flex flex-col gap-1",
	label: "text-sm font-medium text-(--text) cursor-default",
	description: "text-sm text-(--text-muted)",
	error: "text-sm text-error-text",
	separatedGroup: "flex items-center gap-2",
	separatedButton: [
		"flex items-center justify-center",
		"rounded-lg",
		"border border-border-1",
		"text-(--text-muted)",
		"hover:bg-card-hover",
		"focus:outline-none focus:ring-2 focus:ring-(--focus-ring)",
		"disabled:opacity-50 disabled:cursor-not-allowed",
		"transition-colors"
	].join(" "),
	separatedInput: [
		"box-border w-16 text-center",
		"rounded-lg",
		"border border-border-1",
		"text-(--text)",
		"focus:outline-none focus:ring-2 focus:ring-(--focus-ring)",
		"disabled:opacity-50 disabled:cursor-not-allowed"
	].join(" "),
	segmentedGroup: [
		"inline-flex items-stretch",
		"overflow-hidden rounded-lg",
		"border border-border-1"
	].join(" "),
	segmentedButton: [
		"flex items-center justify-center",
		"bg-transparent",
		"text-(--text-muted)",
		"hover:bg-card-hover",
		"focus:outline-none focus:ring-2 focus:ring-(--focus-ring)",
		"disabled:opacity-50 disabled:cursor-not-allowed",
		"transition-colors"
	].join(" "),
	segmentedInput: [
		"box-border w-16 text-center",
		"border-x border-border-1",
		"text-(--text)",
		"font-semibold",
		"focus:outline-none"
	].join(" ")
};
var sizeConfig = {
	sm: {
		separatedButton: "h-8 w-8",
		separatedInput: "h-8 text-sm",
		segmentedButton: "h-8 w-10",
		segmentedInput: "h-8 w-12 text-sm",
		icon: "h-4 w-4"
	},
	md: {
		separatedButton: "h-9 w-9",
		separatedInput: "h-9 text-sm",
		segmentedButton: "h-9 w-11",
		segmentedInput: "h-9 w-14 text-sm",
		icon: "h-5 w-5"
	},
	lg: {
		separatedButton: "h-10 w-10",
		separatedInput: "h-10 text-base",
		segmentedButton: "h-10 w-12",
		segmentedInput: "h-10 w-16 text-base",
		icon: "h-5 w-5"
	}
};
/**
* NumberField wrapper built on React Aria Components.
*
* API is aligned with React Aria's NumberField where possible (e.g. `minValue`, `maxValue`, `step`,
* `formatOptions`, `value`/`defaultValue`, `onChange`, `decrementAriaLabel`, `incrementAriaLabel`).
*/
function NumberField$1({ label, description, errorMessage, variant = "separated", size = "sm", className, testId, ...props }) {
	const groupClassName = variant === "segmented" ? styles.segmentedGroup : styles.separatedGroup;
	const buttonClassName = variant === "segmented" ? styles.segmentedButton : styles.separatedButton;
	const inputClassName = variant === "segmented" ? styles.segmentedInput : styles.separatedInput;
	return /* @__PURE__ */ jsxs(NumberField, {
		...props,
		className: clsx$1(styles.wrapper, className),
		"data-testid": testId,
		children: [
			label && /* @__PURE__ */ jsx(Label, {
				className: styles.label,
				children: label
			}),
			/* @__PURE__ */ jsxs(Group, {
				className: groupClassName,
				children: [
					/* @__PURE__ */ jsx(Button, {
						slot: "decrement",
						className: clsx$1(buttonClassName, variant === "segmented" ? sizeConfig[size].segmentedButton : sizeConfig[size].separatedButton),
						"data-testid": testId ? `${testId}-decrement` : void 0,
						children: /* @__PURE__ */ jsx(Minus, {
							className: sizeConfig[size].icon,
							"aria-hidden": "true"
						})
					}),
					/* @__PURE__ */ jsx(Input, {
						className: clsx$1(inputClassName, variant === "segmented" ? sizeConfig[size].segmentedInput : sizeConfig[size].separatedInput),
						"data-testid": testId ? `${testId}-input` : void 0
					}),
					/* @__PURE__ */ jsx(Button, {
						slot: "increment",
						className: clsx$1(buttonClassName, variant === "segmented" ? sizeConfig[size].segmentedButton : sizeConfig[size].separatedButton),
						"data-testid": testId ? `${testId}-increment` : void 0,
						children: /* @__PURE__ */ jsx(Plus, {
							className: sizeConfig[size].icon,
							"aria-hidden": "true"
						})
					})
				]
			}),
			description && /* @__PURE__ */ jsx(Text, {
				slot: "description",
				className: styles.description,
				children: description
			}),
			errorMessage && /* @__PURE__ */ jsx(FieldError, {
				className: styles.error,
				children: errorMessage
			})
		]
	});
}
//#endregion
export { NumberField$1 as NumberField };

//# sourceMappingURL=NumberField.js.map