@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/forms/input/number-input.js

@@ -0,0 +1,192 @@
+"use client";
+import "./input.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@puzzle-ui/icons";
+// src/components/forms/input/number-input.tsx
+const clamp = (value, min, max) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));
+const getPrecision = (value) => {
+	const valueString = String(value);
+	if (valueString.includes("e-")) return Number(valueString.split("e-")[1]) || 0;
+	return valueString.split(".")[1]?.length ?? 0;
+};
+const NumberInput = ({ value, initialValue = 0, onChange, min, max, step = 1, largeStep, fractionDigits = getPrecision(step), longPressDelay = 450, repeatInterval = 120, decrementLabel = "Decrease value", incrementLabel = "Increase value", disabled, readOnly, className, onBlur, onFocus, onKeyDown, ...inputProps }) => {
+	const isControlled = value !== void 0;
+	const digits = Math.min(12, Math.max(0, Math.trunc(fractionDigits)));
+	const factor = 10 ** digits;
+	const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+	const safeLargeStep = largeStep !== void 0 && Number.isFinite(largeStep) && largeStep > 0 ? largeStep : safeStep * 10;
+	const allowsNegative = min === void 0 || min < 0;
+	const [internalValue, setInternalValue] = useState(() => clamp(Number.isFinite(initialValue) ? initialValue : 0, min, max));
+	const currentValue = clamp(isControlled ? value : internalValue, min, max);
+	const [draft, setDraft] = useState(() => String(Number(currentValue.toFixed(digits))));
+	const currentValueRef = useRef(currentValue);
+	const focusedRef = useRef(false);
+	const holdTimerRef = useRef(null);
+	const repeatTimerRef = useRef(null);
+	const holdStartedAtRef = useRef(0);
+	const holdDirectionRef = useRef(1);
+	currentValueRef.current = currentValue;
+	useEffect(() => {
+		if (!focusedRef.current) setDraft(String(Number(currentValue.toFixed(digits))));
+	}, [currentValue, digits]);
+	const commit = useCallback((nextValue) => {
+		const rounded = Math.round(clamp(nextValue, min, max) * factor) / factor;
+		if (!Number.isFinite(rounded) || rounded === currentValueRef.current) return;
+		currentValueRef.current = rounded;
+		if (!isControlled) setInternalValue(rounded);
+		setDraft(String(rounded));
+		onChange?.(rounded);
+	}, [
+		factor,
+		isControlled,
+		max,
+		min,
+		onChange
+	]);
+	const changeBy = useCallback((direction, amount = safeStep) => {
+		const next = Math.round((currentValueRef.current + direction * amount) * factor) / factor;
+		commit(next);
+	}, [
+		commit,
+		factor,
+		safeStep
+	]);
+	const stopHold = useCallback(() => {
+		if (holdTimerRef.current) clearTimeout(holdTimerRef.current);
+		if (repeatTimerRef.current) clearTimeout(repeatTimerRef.current);
+		holdTimerRef.current = null;
+		repeatTimerRef.current = null;
+	}, []);
+	const scheduleRepeat = useCallback(() => {
+		const elapsed = Date.now() - holdStartedAtRef.current;
+		const interval = Math.max(45, repeatInterval - Math.floor(elapsed / 1800) * 20);
+		repeatTimerRef.current = setTimeout(() => {
+			changeBy(holdDirectionRef.current);
+			scheduleRepeat();
+		}, interval);
+	}, [changeBy, repeatInterval]);
+	const startHold = (direction) => (event) => {
+		if (disabled || readOnly || event.button !== 0) return;
+		event.preventDefault();
+		stopHold();
+		holdDirectionRef.current = direction;
+		holdStartedAtRef.current = Date.now();
+		changeBy(direction);
+		holdTimerRef.current = setTimeout(scheduleRepeat, longPressDelay);
+	};
+	const handleStepperKeyDown = (direction) => (event) => {
+		if (event.key !== " " && event.key !== "Enter") return;
+		event.preventDefault();
+		changeBy(direction);
+	};
+	const handleInputKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled || readOnly) return;
+		switch (event.key) {
+			case "ArrowUp":
+				changeBy(1);
+				break;
+			case "ArrowDown":
+				changeBy(-1);
+				break;
+			case "PageUp":
+				changeBy(1, safeLargeStep);
+				break;
+			case "PageDown":
+				changeBy(-1, safeLargeStep);
+				break;
+			case "Home":
+				if (min === void 0) return;
+				commit(min);
+				break;
+			case "End":
+				if (max === void 0) return;
+				commit(max);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	};
+	const handleInputChange = (event) => {
+		const nextDraft = event.target.value;
+		setDraft(nextDraft);
+		if (nextDraft.trim() === "" || nextDraft === "-" || nextDraft === "." || nextDraft === "-.") return;
+		const parsed = Number(nextDraft.replace(",", "."));
+		if (Number.isFinite(parsed)) commit(parsed);
+	};
+	const handleBlur = (event) => {
+		focusedRef.current = false;
+		const parsed = Number(draft.replace(",", "."));
+		const nextValue = draft.trim() !== "" && Number.isFinite(parsed) ? clamp(Math.round(parsed * factor) / factor, min, max) : currentValueRef.current;
+		commit(nextValue);
+		setDraft(String(Number(nextValue.toFixed(digits))));
+		onBlur?.(event);
+	};
+	useEffect(() => stopHold, [stopHold]);
+	const atMinimum = min !== void 0 && currentValue <= min;
+	const atMaximum = max !== void 0 && currentValue >= max;
+	const trimmedDraft = draft.trim();
+	const draftIsIncomplete = trimmedDraft === "" || trimmedDraft === "-" || trimmedDraft === "." || trimmedDraft === "-.";
+	const draftValue = Number(trimmedDraft.replace(",", "."));
+	const draftIsInvalid = !draftIsIncomplete && (!Number.isFinite(draftValue) || min !== void 0 && draftValue < min || max !== void 0 && draftValue > max);
+	const stepperDisabled = disabled || readOnly;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-input", "puzzle-input--number", className),
+		"data-disabled": disabled || void 0,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "puzzle-input__stepper",
+				"aria-label": decrementLabel,
+				tabIndex: -1,
+				disabled: stepperDisabled || atMinimum,
+				onPointerDown: startHold(-1),
+				onPointerUp: stopHold,
+				onPointerLeave: stopHold,
+				onPointerCancel: stopHold,
+				onKeyDown: handleStepperKeyDown(-1),
+				children: /* @__PURE__ */ jsx(Icon, { name: "lucide:minus" })
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				type: "text",
+				role: "spinbutton",
+				"aria-valuenow": currentValue,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-invalid": draftIsInvalid || inputProps["aria-invalid"],
+				inputMode: allowsNegative ? "text" : digits > 0 ? "decimal" : "numeric",
+				pattern: `${allowsNegative ? "-?" : ""}[0-9]*${digits > 0 ? "[.,]?[0-9]*" : ""}`,
+				disabled,
+				readOnly,
+				value: draft,
+				className: "puzzle-input__control",
+				onFocus: (event) => {
+					focusedRef.current = true;
+					onFocus?.(event);
+				},
+				onChange: handleInputChange,
+				onKeyDown: handleInputKeyDown,
+				onBlur: handleBlur
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "puzzle-input__stepper",
+				"aria-label": incrementLabel,
+				tabIndex: -1,
+				disabled: stepperDisabled || atMaximum,
+				onPointerDown: startHold(1),
+				onPointerUp: stopHold,
+				onPointerLeave: stopHold,
+				onPointerCancel: stopHold,
+				onKeyDown: handleStepperKeyDown(1),
+				children: /* @__PURE__ */ jsx(Icon, { name: "lucide:plus" })
+			})
+		]
+	});
+};
+export { NumberInput };
+
+//# sourceMappingURL=number-input.js.map

package/dist/components/forms/input/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","names":[],"sources":["../../../../src/components/forms/input/number-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type PointerEvent as ReactPointerEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ChangeEvent,\n  type FocusEvent,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport \"./input.css\";\n\ntype NumberInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"step\" | \"min\" | \"max\"\n> & {\n  value?: number;\n  initialValue?: number;\n\n  onChange?: (value: number) => void;\n\n  min?: number;\n  max?: number;\n  step?: number;\n\n  /** Amount applied by PageUp and PageDown. Defaults to ten times `step`. */\n  largeStep?: number;\n\n  fractionDigits?: number;\n\n  longPressDelay?: number;\n  repeatInterval?: number;\n\n  /** Accessible label of the decrement button. */\n  decrementLabel?: string;\n\n  /** Accessible label of the increment button. */\n  incrementLabel?: string;\n};\n\ntype Direction = -1 | 1;\n\nconst clamp = (value: number, min?: number, max?: number) =>\n  Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));\n\nconst getPrecision = (value: number) => {\n  const valueString = String(value);\n\n  if (valueString.includes(\"e-\")) {\n    return Number(valueString.split(\"e-\")[1]) || 0;\n  }\n\n  return valueString.split(\".\")[1]?.length ?? 0;\n};\n\nconst NumberInput = ({\n  value,\n  initialValue = 0,\n  onChange,\n\n  min,\n  max,\n  step = 1,\n  largeStep,\n\n  fractionDigits = getPrecision(step),\n\n  longPressDelay = 450,\n  repeatInterval = 120,\n\n  decrementLabel = \"Decrease value\",\n  incrementLabel = \"Increase value\",\n\n  disabled,\n  readOnly,\n  className,\n\n  onBlur,\n  onFocus,\n  onKeyDown,\n\n  ...inputProps\n}: NumberInputProps) => {\n  const isControlled = value !== undefined;\n\n  const digits = Math.min(12, Math.max(0, Math.trunc(fractionDigits)));\n\n  const factor = 10 ** digits;\n\n  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;\n\n  const safeLargeStep =\n    largeStep !== undefined && Number.isFinite(largeStep) && largeStep > 0\n      ? largeStep\n      : safeStep * 10;\n\n  const allowsNegative = min === undefined || min < 0;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    clamp(Number.isFinite(initialValue) ? initialValue : 0, min, max),\n  );\n\n  const currentValue = clamp(isControlled ? value : internalValue, min, max);\n\n  const [draft, setDraft] = useState(() =>\n    String(Number(currentValue.toFixed(digits))),\n  );\n\n  const currentValueRef = useRef(currentValue);\n  const focusedRef = useRef(false);\n\n  const holdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const repeatTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const holdStartedAtRef = useRef(0);\n  const holdDirectionRef = useRef<Direction>(1);\n\n  currentValueRef.current = currentValue;\n\n  useEffect(() => {\n    if (!focusedRef.current) {\n      setDraft(String(Number(currentValue.toFixed(digits))));\n    }\n  }, [currentValue, digits]);\n\n  const commit = useCallback(\n    (nextValue: number) => {\n      const rounded = Math.round(clamp(nextValue, min, max) * factor) / factor;\n\n      if (!Number.isFinite(rounded) || rounded === currentValueRef.current) {\n        return;\n      }\n\n      currentValueRef.current = rounded;\n\n      if (!isControlled) {\n        setInternalValue(rounded);\n      }\n\n      setDraft(String(rounded));\n\n      onChange?.(rounded);\n    },\n    [factor, isControlled, max, min, onChange],\n  );\n\n  const changeBy = useCallback(\n    (direction: Direction, amount = safeStep) => {\n      const next =\n        Math.round((currentValueRef.current + direction * amount) * factor) /\n        factor;\n\n      commit(next);\n    },\n    [commit, factor, safeStep],\n  );\n\n  const stopHold = useCallback(() => {\n    if (holdTimerRef.current) {\n      clearTimeout(holdTimerRef.current);\n    }\n\n    if (repeatTimerRef.current) {\n      clearTimeout(repeatTimerRef.current);\n    }\n\n    holdTimerRef.current = null;\n    repeatTimerRef.current = null;\n  }, []);\n\n  const scheduleRepeat = useCallback(() => {\n    const elapsed = Date.now() - holdStartedAtRef.current;\n\n    const interval = Math.max(\n      45,\n      repeatInterval - Math.floor(elapsed / 1800) * 20,\n    );\n\n    repeatTimerRef.current = setTimeout(() => {\n      changeBy(holdDirectionRef.current);\n      scheduleRepeat();\n    }, interval);\n  }, [changeBy, repeatInterval]);\n\n  const startHold =\n    (direction: Direction) => (event: ReactPointerEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly || event.button !== 0) {\n        return;\n      }\n\n      event.preventDefault();\n\n      stopHold();\n\n      holdDirectionRef.current = direction;\n      holdStartedAtRef.current = Date.now();\n\n      changeBy(direction);\n\n      holdTimerRef.current = setTimeout(scheduleRepeat, longPressDelay);\n    };\n\n  const handleStepperKeyDown =\n    (direction: Direction) =>\n    (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n      if (event.key !== \" \" && event.key !== \"Enter\") {\n        return;\n      }\n\n      event.preventDefault();\n      changeBy(direction);\n    };\n\n  const handleInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled || readOnly) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowUp\":\n        changeBy(1);\n        break;\n      case \"ArrowDown\":\n        changeBy(-1);\n        break;\n      case \"PageUp\":\n        changeBy(1, safeLargeStep);\n        break;\n      case \"PageDown\":\n        changeBy(-1, safeLargeStep);\n        break;\n      case \"Home\":\n        if (min === undefined) return;\n        commit(min);\n        break;\n      case \"End\":\n        if (max === undefined) return;\n        commit(max);\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n  };\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextDraft = event.target.value;\n\n    setDraft(nextDraft);\n\n    if (\n      nextDraft.trim() === \"\" ||\n      nextDraft === \"-\" ||\n      nextDraft === \".\" ||\n      nextDraft === \"-.\"\n    ) {\n      return;\n    }\n\n    const parsed = Number(nextDraft.replace(\",\", \".\"));\n\n    if (Number.isFinite(parsed)) {\n      commit(parsed);\n    }\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    focusedRef.current = false;\n\n    const parsed = Number(draft.replace(\",\", \".\"));\n\n    const nextValue =\n      draft.trim() !== \"\" && Number.isFinite(parsed)\n        ? clamp(Math.round(parsed * factor) / factor, min, max)\n        : currentValueRef.current;\n\n    commit(nextValue);\n\n    setDraft(String(Number(nextValue.toFixed(digits))));\n\n    onBlur?.(event);\n  };\n\n  useEffect(() => stopHold, [stopHold]);\n\n  const atMinimum = min !== undefined && currentValue <= min;\n\n  const atMaximum = max !== undefined && currentValue >= max;\n\n  const trimmedDraft = draft.trim();\n  const draftIsIncomplete =\n    trimmedDraft === \"\" ||\n    trimmedDraft === \"-\" ||\n    trimmedDraft === \".\" ||\n    trimmedDraft === \"-.\";\n  const draftValue = Number(trimmedDraft.replace(\",\", \".\"));\n\n  const draftIsInvalid =\n    !draftIsIncomplete &&\n    (!Number.isFinite(draftValue) ||\n      (min !== undefined && draftValue < min) ||\n      (max !== undefined && draftValue > max));\n\n  const stepperDisabled = disabled || readOnly;\n\n  return (\n    <div\n      className={cn(\"puzzle-input\", \"puzzle-input--number\", className)}\n      data-disabled={disabled || undefined}\n    >\n      <button\n        type=\"button\"\n        className=\"puzzle-input__stepper\"\n        aria-label={decrementLabel}\n        tabIndex={-1}\n        disabled={stepperDisabled || atMinimum}\n        onPointerDown={startHold(-1)}\n        onPointerUp={stopHold}\n        onPointerLeave={stopHold}\n        onPointerCancel={stopHold}\n        onKeyDown={handleStepperKeyDown(-1)}\n      >\n        <Icon name=\"lucide:minus\" />\n      </button>\n\n      <input\n        {...inputProps}\n        type=\"text\"\n        role=\"spinbutton\"\n        aria-valuenow={currentValue}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-invalid={draftIsInvalid || inputProps[\"aria-invalid\"]}\n        inputMode={allowsNegative ? \"text\" : digits > 0 ? \"decimal\" : \"numeric\"}\n        pattern={`${allowsNegative ? \"-?\" : \"\"}[0-9]*${digits > 0 ? \"[.,]?[0-9]*\" : \"\"}`}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={draft}\n        className=\"puzzle-input__control\"\n        onFocus={(event) => {\n          focusedRef.current = true;\n          onFocus?.(event);\n        }}\n        onChange={handleInputChange}\n        onKeyDown={handleInputKeyDown}\n        onBlur={handleBlur}\n      />\n\n      <button\n        type=\"button\"\n        className=\"puzzle-input__stepper\"\n        aria-label={incrementLabel}\n        tabIndex={-1}\n        disabled={stepperDisabled || atMaximum}\n        onPointerDown={startHold(1)}\n        onPointerUp={stopHold}\n        onPointerLeave={stopHold}\n        onPointerCancel={stopHold}\n        onKeyDown={handleStepperKeyDown(1)}\n      >\n        <Icon name=\"lucide:plus\" />\n      </button>\n    </div>\n  );\n};\n\nexport { NumberInput, type NumberInputProps };\n"],"mappings":"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"}

package/dist/components/forms/input/text-area-input.cjs

@@ -0,0 +1,47 @@
+"use client";
+;/* empty css            */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/input/text-area-input.tsx
+const TextAreaInput = ({ rows = 3, autoSize = true, resizable = false, className, value, defaultValue, onChange, ...props }) => {
+	const textareaRef = (0, react.useRef)(null);
+	const resize = (0, react.useCallback)(() => {
+		const element = textareaRef.current;
+		if (!element || !autoSize) return;
+		element.style.height = "auto";
+		const styles = (element.ownerDocument.defaultView ?? window).getComputedStyle(element);
+		const lineHeight = Number.parseFloat(styles.lineHeight) || 20;
+		const padding = (Number.parseFloat(styles.paddingTop) || 0) + (Number.parseFloat(styles.paddingBottom) || 0);
+		const border = (Number.parseFloat(styles.borderTopWidth) || 0) + (Number.parseFloat(styles.borderBottomWidth) || 0);
+		const minHeight = lineHeight * rows + padding + border;
+		element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;
+	}, [autoSize, rows]);
+	(0, react.useLayoutEffect)(() => {
+		resize();
+	}, [
+		resize,
+		value,
+		defaultValue
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+		...props,
+		ref: textareaRef,
+		rows,
+		value,
+		defaultValue,
+		onChange: (event) => {
+			onChange?.(event);
+			resize();
+		},
+		className: (0, _puzzle_ui_core.cn)("puzzle-input", "puzzle-input--textarea", className),
+		style: {
+			...props.style,
+			resize: resizable ? "vertical" : "none",
+			overflowY: autoSize ? "hidden" : "auto"
+		}
+	});
+};
+exports.TextAreaInput = TextAreaInput;
+
+//# sourceMappingURL=text-area-input.cjs.map

package/dist/components/forms/input/text-area-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area-input.cjs","names":["useRef","useCallback","cn"],"sources":["../../../../src/components/forms/input/text-area-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  type ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./input.css\";\n\ntype TextAreaInputProps = Omit<ComponentPropsWithoutRef<\"textarea\">, \"rows\"> & {\n  rows?: number;\n  autoSize?: boolean;\n  resizable?: boolean;\n};\n\nconst TextAreaInput = ({\n  rows = 3,\n  autoSize = true,\n  resizable = false,\n  className,\n  value,\n  defaultValue,\n  onChange,\n  ...props\n}: TextAreaInputProps) => {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const resize = useCallback(() => {\n    const element = textareaRef.current;\n\n    if (!element || !autoSize) {\n      return;\n    }\n\n    element.style.height = \"auto\";\n\n    const styles = (element.ownerDocument.defaultView ?? window).getComputedStyle(\n      element,\n    );\n\n    const lineHeight = Number.parseFloat(styles.lineHeight) || 20;\n\n    const padding =\n      (Number.parseFloat(styles.paddingTop) || 0) +\n      (Number.parseFloat(styles.paddingBottom) || 0);\n\n    const border =\n      (Number.parseFloat(styles.borderTopWidth) || 0) +\n      (Number.parseFloat(styles.borderBottomWidth) || 0);\n\n    const minHeight = lineHeight * rows + padding + border;\n\n    element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;\n  }, [autoSize, rows]);\n\n  useLayoutEffect(() => {\n    resize();\n  }, [resize, value, defaultValue]);\n\n  return (\n    <textarea\n      {...props}\n      ref={textareaRef}\n      rows={rows}\n      value={value}\n      defaultValue={defaultValue}\n      onChange={(event) => {\n        onChange?.(event);\n        resize();\n      }}\n      className={cn(\"puzzle-input\", \"puzzle-input--textarea\", className)}\n      style={{\n        ...props.style,\n        resize: resizable ? \"vertical\" : \"none\",\n        overflowY: autoSize ? \"hidden\" : \"auto\",\n      }}\n    />\n  );\n};\n\nexport { TextAreaInput, type TextAreaInputProps };\n"],"mappings":";;;;;;AAmBA,MAAM,iBAAiB,EACrB,OAAO,GACP,WAAW,MACX,YAAY,OACZ,WACA,OACA,cACA,UACA,GAAG,YACqB;CACxB,MAAM,eAAA,GAAcA,MAAAA,OAAAA,CAA4B,IAAI;CAEpD,MAAM,UAAA,GAASC,MAAAA,YAAAA,OAAkB;EAC/B,MAAM,UAAU,YAAY;EAE5B,IAAI,CAAC,WAAW,CAAC,UACf;EAGF,QAAQ,MAAM,SAAS;EAEvB,MAAM,UAAU,QAAQ,cAAc,eAAe,OAAA,CAAQ,iBAC3D,OACF;EAEA,MAAM,aAAa,OAAO,WAAW,OAAO,UAAU,KAAK;EAE3D,MAAM,WACH,OAAO,WAAW,OAAO,UAAU,KAAK,MACxC,OAAO,WAAW,OAAO,aAAa,KAAK;EAE9C,MAAM,UACH,OAAO,WAAW,OAAO,cAAc,KAAK,MAC5C,OAAO,WAAW,OAAO,iBAAiB,KAAK;EAElD,MAAM,YAAY,aAAa,OAAO,UAAU;EAEhD,QAAQ,MAAM,SAAS,GAAG,KAAK,IAAI,WAAW,QAAQ,YAAY,EAAE;CACtE,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,CAAA,GAAA,MAAA,gBAAA,OAAsB;EACpB,OAAO;CACT,GAAG;EAAC;EAAQ;EAAO;CAAY,CAAC;CAEhC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;EACE,GAAI;EACJ,KAAK;EACC;EACC;EACO;EACd,WAAW,UAAU;GACnB,WAAW,KAAK;GAChB,OAAO;EACT;EACA,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,gBAAgB,0BAA0B,SAAS;EACjE,OAAO;GACL,GAAG,MAAM;GACT,QAAQ,YAAY,aAAa;GACjC,WAAW,WAAW,WAAW;EACnC;CACD,CAAA;AAEL"}

package/dist/components/forms/input/text-area-input.d.cts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from "react";
+type TextAreaInputProps = Omit<ComponentPropsWithoutRef<"textarea">, "rows"> & {
+  rows?: number;
+  autoSize?: boolean;
+  resizable?: boolean;
+};
+declare const TextAreaInput: ({ rows, autoSize, resizable, className, value, defaultValue, onChange, ...props }: TextAreaInputProps) => import("react").JSX.Element;
+export { TextAreaInput, type TextAreaInputProps };

package/dist/components/forms/input/text-area-input.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from "react";
+type TextAreaInputProps = Omit<ComponentPropsWithoutRef<"textarea">, "rows"> & {
+  rows?: number;
+  autoSize?: boolean;
+  resizable?: boolean;
+};
+declare const TextAreaInput: ({ rows, autoSize, resizable, className, value, defaultValue, onChange, ...props }: TextAreaInputProps) => import("react").JSX.Element;
+export { TextAreaInput, type TextAreaInputProps };

package/dist/components/forms/input/text-area-input.js

@@ -0,0 +1,47 @@
+"use client";
+import "./input.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/forms/input/text-area-input.tsx
+const TextAreaInput = ({ rows = 3, autoSize = true, resizable = false, className, value, defaultValue, onChange, ...props }) => {
+	const textareaRef = useRef(null);
+	const resize = useCallback(() => {
+		const element = textareaRef.current;
+		if (!element || !autoSize) return;
+		element.style.height = "auto";
+		const styles = (element.ownerDocument.defaultView ?? window).getComputedStyle(element);
+		const lineHeight = Number.parseFloat(styles.lineHeight) || 20;
+		const padding = (Number.parseFloat(styles.paddingTop) || 0) + (Number.parseFloat(styles.paddingBottom) || 0);
+		const border = (Number.parseFloat(styles.borderTopWidth) || 0) + (Number.parseFloat(styles.borderBottomWidth) || 0);
+		const minHeight = lineHeight * rows + padding + border;
+		element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;
+	}, [autoSize, rows]);
+	useLayoutEffect(() => {
+		resize();
+	}, [
+		resize,
+		value,
+		defaultValue
+	]);
+	return /* @__PURE__ */ jsx("textarea", {
+		...props,
+		ref: textareaRef,
+		rows,
+		value,
+		defaultValue,
+		onChange: (event) => {
+			onChange?.(event);
+			resize();
+		},
+		className: cn("puzzle-input", "puzzle-input--textarea", className),
+		style: {
+			...props.style,
+			resize: resizable ? "vertical" : "none",
+			overflowY: autoSize ? "hidden" : "auto"
+		}
+	});
+};
+export { TextAreaInput };
+
+//# sourceMappingURL=text-area-input.js.map

package/dist/components/forms/input/text-area-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area-input.js","names":[],"sources":["../../../../src/components/forms/input/text-area-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  type ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./input.css\";\n\ntype TextAreaInputProps = Omit<ComponentPropsWithoutRef<\"textarea\">, \"rows\"> & {\n  rows?: number;\n  autoSize?: boolean;\n  resizable?: boolean;\n};\n\nconst TextAreaInput = ({\n  rows = 3,\n  autoSize = true,\n  resizable = false,\n  className,\n  value,\n  defaultValue,\n  onChange,\n  ...props\n}: TextAreaInputProps) => {\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const resize = useCallback(() => {\n    const element = textareaRef.current;\n\n    if (!element || !autoSize) {\n      return;\n    }\n\n    element.style.height = \"auto\";\n\n    const styles = (element.ownerDocument.defaultView ?? window).getComputedStyle(\n      element,\n    );\n\n    const lineHeight = Number.parseFloat(styles.lineHeight) || 20;\n\n    const padding =\n      (Number.parseFloat(styles.paddingTop) || 0) +\n      (Number.parseFloat(styles.paddingBottom) || 0);\n\n    const border =\n      (Number.parseFloat(styles.borderTopWidth) || 0) +\n      (Number.parseFloat(styles.borderBottomWidth) || 0);\n\n    const minHeight = lineHeight * rows + padding + border;\n\n    element.style.height = `${Math.max(minHeight, element.scrollHeight)}px`;\n  }, [autoSize, rows]);\n\n  useLayoutEffect(() => {\n    resize();\n  }, [resize, value, defaultValue]);\n\n  return (\n    <textarea\n      {...props}\n      ref={textareaRef}\n      rows={rows}\n      value={value}\n      defaultValue={defaultValue}\n      onChange={(event) => {\n        onChange?.(event);\n        resize();\n      }}\n      className={cn(\"puzzle-input\", \"puzzle-input--textarea\", className)}\n      style={{\n        ...props.style,\n        resize: resizable ? \"vertical\" : \"none\",\n        overflowY: autoSize ? \"hidden\" : \"auto\",\n      }}\n    />\n  );\n};\n\nexport { TextAreaInput, type TextAreaInputProps };\n"],"mappings":";;;;;;AAmBA,MAAM,iBAAiB,EACrB,OAAO,GACP,WAAW,MACX,YAAY,OACZ,WACA,OACA,cACA,UACA,GAAG,YACqB;CACxB,MAAM,cAAc,OAA4B,IAAI;CAEpD,MAAM,SAAS,kBAAkB;EAC/B,MAAM,UAAU,YAAY;EAE5B,IAAI,CAAC,WAAW,CAAC,UACf;EAGF,QAAQ,MAAM,SAAS;EAEvB,MAAM,UAAU,QAAQ,cAAc,eAAe,OAAA,CAAQ,iBAC3D,OACF;EAEA,MAAM,aAAa,OAAO,WAAW,OAAO,UAAU,KAAK;EAE3D,MAAM,WACH,OAAO,WAAW,OAAO,UAAU,KAAK,MACxC,OAAO,WAAW,OAAO,aAAa,KAAK;EAE9C,MAAM,UACH,OAAO,WAAW,OAAO,cAAc,KAAK,MAC5C,OAAO,WAAW,OAAO,iBAAiB,KAAK;EAElD,MAAM,YAAY,aAAa,OAAO,UAAU;EAEhD,QAAQ,MAAM,SAAS,GAAG,KAAK,IAAI,WAAW,QAAQ,YAAY,EAAE;CACtE,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,sBAAsB;EACpB,OAAO;CACT,GAAG;EAAC;EAAQ;EAAO;CAAY,CAAC;CAEhC,OACE,oBAAC,YAAD;EACE,GAAI;EACJ,KAAK;EACC;EACC;EACO;EACd,WAAW,UAAU;GACnB,WAAW,KAAK;GAChB,OAAO;EACT;EACA,WAAW,GAAG,gBAAgB,0BAA0B,SAAS;EACjE,OAAO;GACL,GAAG,MAAM;GACT,QAAQ,YAAY,aAAa;GACjC,WAAW,WAAW,WAAW;EACnC;CACD,CAAA;AAEL"}

package/dist/components/forms/input/text-input.cjs

@@ -0,0 +1,47 @@
+"use client";
+;/* empty css            */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_icons = require("@puzzle-ui/icons");
+// src/components/forms/input/text-input.tsx
+const TextInput = ({ type = "text", prefix, suffix, className, disabled, ref, ...props }) => {
+	const [passwordVisible, setPasswordVisible] = (0, react.useState)(false);
+	const isPassword = type === "password";
+	const resolvedType = isPassword ? passwordVisible ? "text" : "password" : type === "phone" ? "tel" : type;
+	const resolvedPrefix = prefix !== void 0 ? prefix : type === "email" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, { name: "lucide:mail" }) : type === "phone" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, { name: "lucide:phone" }) : null;
+	const resolvedSuffix = suffix !== void 0 ? suffix : isPassword ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		className: "puzzle-input__icon-button",
+		"aria-label": passwordVisible ? "Hide password" : "Show password",
+		"aria-pressed": passwordVisible,
+		disabled,
+		onClick: () => setPasswordVisible((visible) => !visible),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, { name: passwordVisible ? "lucide:eye-off" : "lucide:eye" })
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-input", "puzzle-input--text", className),
+		"data-disabled": disabled || void 0,
+		children: [
+			resolvedPrefix != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-input__affix puzzle-input__prefix",
+				"aria-hidden": "true",
+				children: resolvedPrefix
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				...props,
+				ref,
+				type: resolvedType,
+				disabled,
+				className: "puzzle-input__control"
+			}),
+			resolvedSuffix != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-input__affix puzzle-input__suffix",
+				children: resolvedSuffix
+			})
+		]
+	});
+};
+exports.TextInput = TextInput;
+
+//# sourceMappingURL=text-input.cjs.map

package/dist/components/forms/input/text-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.cjs","names":["useState","Icon","cn"],"sources":["../../../../src/components/forms/input/text-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport \"./input.css\";\n\ntype TextInputType = \"text\" | \"email\" | \"password\" | \"phone\";\n\ntype TextInputProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"type\" | \"prefix\"\n> & {\n  type?: TextInputType;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n};\n\nconst TextInput = ({\n  type = \"text\",\n  prefix,\n  suffix,\n  className,\n  disabled,\n  ref,\n  ...props\n}: TextInputProps) => {\n  const [passwordVisible, setPasswordVisible] = useState(false);\n\n  const isPassword = type === \"password\";\n\n  const resolvedType = isPassword\n    ? passwordVisible\n      ? \"text\"\n      : \"password\"\n    : type === \"phone\"\n      ? \"tel\"\n      : type;\n\n  const resolvedPrefix =\n    prefix !== undefined ? (\n      prefix\n    ) : type === \"email\" ? (\n      <Icon name=\"lucide:mail\" />\n    ) : type === \"phone\" ? (\n      <Icon name=\"lucide:phone\" />\n    ) : null;\n\n  const resolvedSuffix =\n    suffix !== undefined ? (\n      suffix\n    ) : isPassword ? (\n      <button\n        type=\"button\"\n        className=\"puzzle-input__icon-button\"\n        aria-label={passwordVisible ? \"Hide password\" : \"Show password\"}\n        aria-pressed={passwordVisible}\n        disabled={disabled}\n        onClick={() => setPasswordVisible((visible) => !visible)}\n      >\n        <Icon name={passwordVisible ? \"lucide:eye-off\" : \"lucide:eye\"} />\n      </button>\n    ) : null;\n\n  return (\n    <span\n      className={cn(\"puzzle-input\", \"puzzle-input--text\", className)}\n      data-disabled={disabled || undefined}\n    >\n      {resolvedPrefix != null && (\n        <span\n          className=\"puzzle-input__affix puzzle-input__prefix\"\n          aria-hidden=\"true\"\n        >\n          {resolvedPrefix}\n        </span>\n      )}\n\n      <input\n        {...props}\n        ref={ref}\n        type={resolvedType}\n        disabled={disabled}\n        className=\"puzzle-input__control\"\n      />\n\n      {resolvedSuffix != null && (\n        <span className=\"puzzle-input__affix puzzle-input__suffix\">\n          {resolvedSuffix}\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport { TextInput, type TextInputProps, type TextInputType };\n"],"mappings":";;;;;;;AAoBA,MAAM,aAAa,EACjB,OAAO,QACP,QACA,QACA,WACA,UACA,KACA,GAAG,YACiB;CACpB,MAAM,CAAC,iBAAiB,uBAAA,GAAsBA,MAAAA,SAAAA,CAAS,KAAK;CAE5D,MAAM,aAAa,SAAS;CAE5B,MAAM,eAAe,aACjB,kBACE,SACA,aACF,SAAS,UACP,QACA;CAEN,MAAM,iBACJ,WAAW,KAAA,IACT,SACE,SAAS,UACX,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,MAAD,EAAM,MAAK,cAAe,CAAA,IACxB,SAAS,UACX,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,MAAD,EAAM,MAAK,eAAgB,CAAA,IACzB;CAEN,MAAM,iBACJ,WAAW,KAAA,IACT,SACE,aACF,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,cAAY,kBAAkB,kBAAkB;EAChD,gBAAc;EACJ;EACV,eAAe,oBAAoB,YAAY,CAAC,OAAO;EAEvD,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,MAAD,EAAM,MAAM,kBAAkB,mBAAmB,aAAe,CAAA;CAC1D,CAAA,IACN;CAEN,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,gBAAgB,sBAAsB,SAAS;EAC7D,iBAAe,YAAY,KAAA;EAF7B,UAAA;GAIG,kBAAkB,QACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEX,UAAA;GACG,CAAA;GAGR,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IACE,GAAI;IACC;IACL,MAAM;IACI;IACV,WAAU;GACX,CAAA;GAEA,kBAAkB,QACjB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA;EAEJ;;AAEV"}

package/dist/components/forms/input/text-input.d.cts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+type TextInputType = "text" | "email" | "password" | "phone";
+type TextInputProps = Omit<ComponentPropsWithRef<"input">, "type" | "prefix"> & {
+  type?: TextInputType;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+};
+declare const TextInput: ({ type, prefix, suffix, className, disabled, ref, ...props }: TextInputProps) => import("react").JSX.Element;
+export { TextInput, type TextInputProps, type TextInputType };

package/dist/components/forms/input/text-input.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+type TextInputType = "text" | "email" | "password" | "phone";
+type TextInputProps = Omit<ComponentPropsWithRef<"input">, "type" | "prefix"> & {
+  type?: TextInputType;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+};
+declare const TextInput: ({ type, prefix, suffix, className, disabled, ref, ...props }: TextInputProps) => import("react").JSX.Element;
+export { TextInput, type TextInputProps, type TextInputType };

package/dist/components/forms/input/text-input.js

@@ -0,0 +1,47 @@
+"use client";
+import "./input.css";
+import { cn } from "@puzzle-ui/core";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@puzzle-ui/icons";
+// src/components/forms/input/text-input.tsx
+const TextInput = ({ type = "text", prefix, suffix, className, disabled, ref, ...props }) => {
+	const [passwordVisible, setPasswordVisible] = useState(false);
+	const isPassword = type === "password";
+	const resolvedType = isPassword ? passwordVisible ? "text" : "password" : type === "phone" ? "tel" : type;
+	const resolvedPrefix = prefix !== void 0 ? prefix : type === "email" ? /* @__PURE__ */ jsx(Icon, { name: "lucide:mail" }) : type === "phone" ? /* @__PURE__ */ jsx(Icon, { name: "lucide:phone" }) : null;
+	const resolvedSuffix = suffix !== void 0 ? suffix : isPassword ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "puzzle-input__icon-button",
+		"aria-label": passwordVisible ? "Hide password" : "Show password",
+		"aria-pressed": passwordVisible,
+		disabled,
+		onClick: () => setPasswordVisible((visible) => !visible),
+		children: /* @__PURE__ */ jsx(Icon, { name: passwordVisible ? "lucide:eye-off" : "lucide:eye" })
+	}) : null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("puzzle-input", "puzzle-input--text", className),
+		"data-disabled": disabled || void 0,
+		children: [
+			resolvedPrefix != null && /* @__PURE__ */ jsx("span", {
+				className: "puzzle-input__affix puzzle-input__prefix",
+				"aria-hidden": "true",
+				children: resolvedPrefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...props,
+				ref,
+				type: resolvedType,
+				disabled,
+				className: "puzzle-input__control"
+			}),
+			resolvedSuffix != null && /* @__PURE__ */ jsx("span", {
+				className: "puzzle-input__affix puzzle-input__suffix",
+				children: resolvedSuffix
+			})
+		]
+	});
+};
+export { TextInput };
+
+//# sourceMappingURL=text-input.js.map

package/dist/components/forms/input/text-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../../src/components/forms/input/text-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport \"./input.css\";\n\ntype TextInputType = \"text\" | \"email\" | \"password\" | \"phone\";\n\ntype TextInputProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"type\" | \"prefix\"\n> & {\n  type?: TextInputType;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n};\n\nconst TextInput = ({\n  type = \"text\",\n  prefix,\n  suffix,\n  className,\n  disabled,\n  ref,\n  ...props\n}: TextInputProps) => {\n  const [passwordVisible, setPasswordVisible] = useState(false);\n\n  const isPassword = type === \"password\";\n\n  const resolvedType = isPassword\n    ? passwordVisible\n      ? \"text\"\n      : \"password\"\n    : type === \"phone\"\n      ? \"tel\"\n      : type;\n\n  const resolvedPrefix =\n    prefix !== undefined ? (\n      prefix\n    ) : type === \"email\" ? (\n      <Icon name=\"lucide:mail\" />\n    ) : type === \"phone\" ? (\n      <Icon name=\"lucide:phone\" />\n    ) : null;\n\n  const resolvedSuffix =\n    suffix !== undefined ? (\n      suffix\n    ) : isPassword ? (\n      <button\n        type=\"button\"\n        className=\"puzzle-input__icon-button\"\n        aria-label={passwordVisible ? \"Hide password\" : \"Show password\"}\n        aria-pressed={passwordVisible}\n        disabled={disabled}\n        onClick={() => setPasswordVisible((visible) => !visible)}\n      >\n        <Icon name={passwordVisible ? \"lucide:eye-off\" : \"lucide:eye\"} />\n      </button>\n    ) : null;\n\n  return (\n    <span\n      className={cn(\"puzzle-input\", \"puzzle-input--text\", className)}\n      data-disabled={disabled || undefined}\n    >\n      {resolvedPrefix != null && (\n        <span\n          className=\"puzzle-input__affix puzzle-input__prefix\"\n          aria-hidden=\"true\"\n        >\n          {resolvedPrefix}\n        </span>\n      )}\n\n      <input\n        {...props}\n        ref={ref}\n        type={resolvedType}\n        disabled={disabled}\n        className=\"puzzle-input__control\"\n      />\n\n      {resolvedSuffix != null && (\n        <span className=\"puzzle-input__affix puzzle-input__suffix\">\n          {resolvedSuffix}\n        </span>\n      )}\n    </span>\n  );\n};\n\nexport { TextInput, type TextInputProps, type TextInputType };\n"],"mappings":";;;;;;;AAoBA,MAAM,aAAa,EACjB,OAAO,QACP,QACA,QACA,WACA,UACA,KACA,GAAG,YACiB;CACpB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,KAAK;CAE5D,MAAM,aAAa,SAAS;CAE5B,MAAM,eAAe,aACjB,kBACE,SACA,aACF,SAAS,UACP,QACA;CAEN,MAAM,iBACJ,WAAW,KAAA,IACT,SACE,SAAS,UACX,oBAAC,MAAD,EAAM,MAAK,cAAe,CAAA,IACxB,SAAS,UACX,oBAAC,MAAD,EAAM,MAAK,eAAgB,CAAA,IACzB;CAEN,MAAM,iBACJ,WAAW,KAAA,IACT,SACE,aACF,oBAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,cAAY,kBAAkB,kBAAkB;EAChD,gBAAc;EACJ;EACV,eAAe,oBAAoB,YAAY,CAAC,OAAO;EAEvD,UAAA,oBAAC,MAAD,EAAM,MAAM,kBAAkB,mBAAmB,aAAe,CAAA;CAC1D,CAAA,IACN;CAEN,OACE,qBAAC,QAAD;EACE,WAAW,GAAG,gBAAgB,sBAAsB,SAAS;EAC7D,iBAAe,YAAY,KAAA;EAF7B,UAAA;GAIG,kBAAkB,QACjB,oBAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEX,UAAA;GACG,CAAA;GAGR,oBAAC,SAAD;IACE,GAAI;IACC;IACL,MAAM;IACI;IACV,WAAU;GACX,CAAA;GAEA,kBAAkB,QACjB,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA;EAEJ;;AAEV"}

package/dist/components/forms/label/index.cjs

@@ -0,0 +1,26 @@
+;/* empty css            */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/label/index.tsx
+const Label = ({ children, required = false, optional = false, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+	...props,
+	className: (0, _puzzle_ui_core.cn)("puzzle-label", className),
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-label__text",
+			children
+		}),
+		required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-label__required",
+			"aria-hidden": "true",
+			children: "*"
+		}),
+		optional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "puzzle-label__optional",
+			children: "Optional"
+		})
+	]
+});
+exports.Label = Label;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/label/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../../src/components/forms/label/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./label.css\";\n\ntype LabelProps = Omit<ComponentPropsWithoutRef<\"label\">, \"children\"> & {\n  children: ReactNode;\n  required?: boolean;\n  optional?: boolean;\n};\n\nconst Label = ({\n  children,\n  required = false,\n  optional = false,\n  className,\n  ...props\n}: LabelProps) => (\n  <label {...props} className={cn(\"puzzle-label\", className)}>\n    <span className=\"puzzle-label__text\">{children}</span>\n\n    {required && (\n      <span className=\"puzzle-label__required\" aria-hidden=\"true\">\n        *\n      </span>\n    )}\n\n    {optional && <span className=\"puzzle-label__optional\">Optional</span>}\n  </label>\n);\n\nexport { Label, type LabelProps };\n"],"mappings":";;;;AAUA,MAAM,SAAS,EACb,UACA,WAAW,OACX,WAAW,OACX,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;CAAO,GAAI;CAAO,YAAA,GAAWA,gBAAAA,GAAAA,CAAG,gBAAgB,SAAS;CAAzD,UAAA;EACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAsB;EAAe,CAAA;EAEpD,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;GAAO,UAAA;EAEtD,CAAA;EAGP,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAyB,UAAA;EAAc,CAAA;CAC/D"}

package/dist/components/forms/label/index.d.cts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type LabelProps = Omit<ComponentPropsWithoutRef<"label">, "children"> & {
+  children: ReactNode;
+  required?: boolean;
+  optional?: boolean;
+};
+declare const Label: ({ children, required, optional, className, ...props }: LabelProps) => import("react").JSX.Element;
+export { Label, type LabelProps };

package/dist/components/forms/label/index.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type LabelProps = Omit<ComponentPropsWithoutRef<"label">, "children"> & {
+  children: ReactNode;
+  required?: boolean;
+  optional?: boolean;
+};
+declare const Label: ({ children, required, optional, className, ...props }: LabelProps) => import("react").JSX.Element;
+export { Label, type LabelProps };

package/dist/components/forms/label/index.js

@@ -0,0 +1,26 @@
+import "./label.css";
+import { cn } from "@puzzle-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/label/index.tsx
+const Label = ({ children, required = false, optional = false, className, ...props }) => /* @__PURE__ */ jsxs("label", {
+	...props,
+	className: cn("puzzle-label", className),
+	children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "puzzle-label__text",
+			children
+		}),
+		required && /* @__PURE__ */ jsx("span", {
+			className: "puzzle-label__required",
+			"aria-hidden": "true",
+			children: "*"
+		}),
+		optional && /* @__PURE__ */ jsx("span", {
+			className: "puzzle-label__optional",
+			children: "Optional"
+		})
+	]
+});
+export { Label };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/label/index.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport \"./label.css\";\n\ntype LabelProps = Omit<ComponentPropsWithoutRef<\"label\">, \"children\"> & {\n  children: ReactNode;\n  required?: boolean;\n  optional?: boolean;\n};\n\nconst Label = ({\n  children,\n  required = false,\n  optional = false,\n  className,\n  ...props\n}: LabelProps) => (\n  <label {...props} className={cn(\"puzzle-label\", className)}>\n    <span className=\"puzzle-label__text\">{children}</span>\n\n    {required && (\n      <span className=\"puzzle-label__required\" aria-hidden=\"true\">\n        *\n      </span>\n    )}\n\n    {optional && <span className=\"puzzle-label__optional\">Optional</span>}\n  </label>\n);\n\nexport { Label, type LabelProps };\n"],"mappings":";;;;AAUA,MAAM,SAAS,EACb,UACA,WAAW,OACX,WAAW,OACX,WACA,GAAG,YAEH,qBAAC,SAAD;CAAO,GAAI;CAAO,WAAW,GAAG,gBAAgB,SAAS;CAAzD,UAAA;EACE,oBAAC,QAAD;GAAM,WAAU;GAAsB;EAAe,CAAA;EAEpD,YACC,oBAAC,QAAD;GAAM,WAAU;GAAyB,eAAY;GAAO,UAAA;EAEtD,CAAA;EAGP,YAAY,oBAAC,QAAD;GAAM,WAAU;GAAyB,UAAA;EAAc,CAAA;CAC/D"}

package/dist/components/forms/label/label.css

@@ -0,0 +1,22 @@
+.puzzle-label {
+  align-items: baseline;
+  gap: var(--puzzle-space-1, .25rem);
+  color: var(--puzzle-color-text);
+  font-family: var(--puzzle-font-family-label, inherit);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  cursor: pointer;
+  display: inline-flex;
+}
+
+.puzzle-label__required {
+  color: var(--puzzle-color-danger);
+}
+
+.puzzle-label__optional {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-normal, 400);
+  margin-inline-start: var(--puzzle-space-1, .25rem);
+}