@spear-ai/spectral 1.13.1 → 1.14.1

package/dist/Input.js

@@ -1,155 +1,201 @@
-'use client'
-import './styles/main.css'
-import { CheckCircleIcon as e } from "./Icons/CheckCircleIcon.js";
-import { CloseCircleIcon as t } from "./Icons/CloseCircleIcon.js";
-import { ErrorIcon as ee } from "./Icons/ErrorIcon.js";
-import { EyeClosedIcon as te } from "./Icons/EyeClosedIcon.js";
-import { EyeOpenIcon as ne } from "./Icons/EyeOpenIcon.js";
-import { LoaderIcon as re } from "./Icons/LoaderIcon.js";
-import { WarningIcon as ie } from "./Icons/WarningIcon.js";
-import { t as n } from "./twUtils-BpqlKSeB.js";
-import { ErrorMessage as r, WarningMessage as i } from "./FormFieldMessage.js";
-import { getAriaProps as a, getFormFieldCSSProperties as o, getInputClasses as s, useFormFieldId as c, useFormFieldState as l } from "./utils/formFieldUtils.js";
-import { useUncontrolledState as u } from "./hooks/useUncontrolledState.js";
-import { Label as d } from "./Label.js";
-import { useClearOnFocus as f, usePasswordVisibility as p, usePrefixWidth as ae } from "./Input/InputUtils.js";
-import { useCallback as m, useRef as oe } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
+'use client';
+import { CheckCircleIcon } from "./Icons/CheckCircleIcon.js";
+import { CloseCircleIcon } from "./Icons/CloseCircleIcon.js";
+import { ErrorIcon } from "./Icons/ErrorIcon.js";
+import { EyeClosedIcon } from "./Icons/EyeClosedIcon.js";
+import { EyeOpenIcon } from "./Icons/EyeOpenIcon.js";
+import { LoaderIcon } from "./Icons/LoaderIcon.js";
+import { WarningIcon } from "./Icons/WarningIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
+import { getAriaProps, getFormFieldCSSProperties, getInputClasses, useFormFieldId, useFormFieldState } from "./utils/formFieldUtils.js";
+import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
+import { Label } from "./Label.js";
+import { useClearOnFocus, usePasswordVisibility, usePrefixWidth } from "./Input/InputUtils.js";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/Input/Input.tsx
-var se = (...e) => (t) => {
-	e.forEach((e) => {
-		e && (typeof e == "function" ? e(t) : e.current = t);
+const mergeRefs = (...refs) => {
+	return (value) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") ref(value);
+			else ref.current = value;
+		});
+	};
+};
+const getAutoCompleteValue = (type) => {
+	return {
+		date: "off",
+		email: "email",
+		number: "off",
+		password: "current-password",
+		tel: "tel",
+		text: "off",
+		url: "url",
+		"datetime-local": "off"
+	}[type] || "off";
+};
+const Input = (allProps) => {
+	const { className, clearOnFocus = false, defaultValue, disabled, endIcon, errorMessage, id, label, labelClassName, name, onBlur, onChange, onFocus, placeholder, prefix, ref, required, showClearButton = false, showStateIcon = true, startIcon, state = "default", suppressHydrationWarning = true, type = "text", value: valueProp, warningMessage, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props } = allProps;
+	const inputId = useFormFieldId(id, name);
+	const errorMessageId = `${inputId}-error`;
+	const warningMessageId = `${inputId}-warning`;
+	const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state);
+	const ariaProps = getAriaProps(state, ariaDescribedBy, required, state === "error" ? errorMessageId : state === "warning" && warningMessage ? warningMessageId : void 0);
+	const [value, setValue] = useUncontrolledState({
+		value: valueProp,
+		defaultValue: typeof defaultValue === "string" ? defaultValue : defaultValue !== void 0 && defaultValue !== null ? String(defaultValue) : "",
+		onChange
 	});
-}, ce = (e) => ({
-	date: "off",
-	email: "email",
-	number: "off",
-	password: "current-password",
-	tel: "tel",
-	text: "off",
-	url: "url",
-	"datetime-local": "off"
-})[e] || "off", _ = (_) => {
-	let { className: le, clearOnFocus: ue = !1, defaultValue: v, disabled: y, endIcon: b, errorMessage: x, id: S, label: C, labelClassName: w, name: T, onBlur: E, onChange: D, onFocus: O, placeholder: k, prefix: A, ref: j, required: M, showClearButton: N = !1, showStateIcon: P = !0, startIcon: F, state: I = "default", suppressHydrationWarning: L = !0, type: R = "text", value: z, warningMessage: B, "aria-label": V, "aria-describedby": H, ...de } = _, U = c(S, T), W = `${U}-error`, G = `${U}-warning`, { isDisabled: K, isLoading: fe, isInvalid: pe } = l(y, I), me = a(I, H, M, I === "error" ? W : I === "warning" && B ? G : void 0), [q, J] = u({
-		value: z,
-		defaultValue: typeof v == "string" ? v : v == null ? "" : String(v),
-		onChange: D
-	}), Y = oe(null), he = se(j, Y), { isVisible: X, toggleVisibility: ge, inputType: _e } = p(), { prefixWidth: ve, prefixRef: ye } = ae(A), { handleFocus: Z } = f(ue, (e) => J(e.target.value)), be = m((e) => {
-		E?.(e);
-	}, [E]), xe = m((e) => {
-		Z(e, O);
-	}, [Z, O]), Q = m((e) => {
-		let t = e.target.value;
-		J(t);
-	}, [J]), Se = m(() => {
-		let e = Y.current;
-		e && (J(""), e.focus());
-	}, [J]), $ = N && q.length > 0, Ce = () => {
-		let n = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", r = {
-			password: () => /* @__PURE__ */ h("button", {
-				"aria-controls": U,
-				"aria-label": X ? `Hide ${C ?? "password"}` : `Show ${C ?? "password"}`,
-				"aria-pressed": X,
-				className: n,
+	const internalRef = useRef(null);
+	const inputRef = mergeRefs(ref, internalRef);
+	const { isVisible, toggleVisibility, inputType } = usePasswordVisibility();
+	const { prefixWidth, prefixRef } = usePrefixWidth(prefix);
+	const { handleFocus: clearOnFocusHandler } = useClearOnFocus(clearOnFocus, (e) => setValue(e.target.value));
+	const handleBlur = useCallback((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	const handleFocus = useCallback((e) => {
+		clearOnFocusHandler(e, onFocus);
+	}, [clearOnFocusHandler, onFocus]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		setValue(newValue);
+	}, [setValue]);
+	const handleClear = useCallback(() => {
+		const element = internalRef.current;
+		if (element) {
+			setValue("");
+			element.focus();
+		}
+	}, [setValue]);
+	const showClearButtonNow = showClearButton && value.length > 0;
+	const getEndIcon = () => {
+		const iconClasses = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer";
+		const iconComponents = {
+			password: () => /* @__PURE__ */ jsx("button", {
+				"aria-controls": inputId,
+				"aria-label": isVisible ? `Hide ${label ?? "password"}` : `Show ${label ?? "password"}`,
+				"aria-pressed": isVisible,
+				className: iconClasses,
 				"data-testid": "spectral-input-password-toggle",
-				onClick: ge,
+				onClick: toggleVisibility,
 				type: "button",
-				children: h(X ? te : ne, { size: 22 })
+				children: isVisible ? /* @__PURE__ */ jsx(EyeClosedIcon, { size: 22 }) : /* @__PURE__ */ jsx(EyeOpenIcon, { size: 22 })
 			}),
-			clear: () => /* @__PURE__ */ h("button", {
-				"aria-label": String(`Clear ${C ?? "input"}`),
-				className: n,
+			clear: () => /* @__PURE__ */ jsx("button", {
+				"aria-label": String(`Clear ${label ?? "input"}`),
+				className: iconClasses,
 				"data-testid": "spectral-input-clear-button",
-				onClick: Se,
+				onClick: handleClear,
 				type: "button",
-				children: /* @__PURE__ */ h(t, { size: 24 })
+				children: /* @__PURE__ */ jsx(CloseCircleIcon, { size: 24 })
 			}),
-			loading: () => /* @__PURE__ */ h("div", {
+			loading: () => /* @__PURE__ */ jsx("div", {
 				className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
 				"data-testid": "spectral-input-loading-icon",
-				children: /* @__PURE__ */ h(re, { size: 24 })
+				children: /* @__PURE__ */ jsx(LoaderIcon, { size: 24 })
 			}),
-			error: () => /* @__PURE__ */ h("div", {
+			error: () => /* @__PURE__ */ jsx("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-danger-400",
 				"data-testid": "spectral-input-error-icon",
-				children: /* @__PURE__ */ h(ee, { size: 24 })
+				children: /* @__PURE__ */ jsx(ErrorIcon, { size: 24 })
 			}),
-			success: () => /* @__PURE__ */ h("div", {
+			success: () => /* @__PURE__ */ jsx("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-success-400",
 				"data-testid": "spectral-input-success-icon",
-				children: /* @__PURE__ */ h(e, { size: 24 })
+				children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 24 })
 			}),
-			warning: () => /* @__PURE__ */ h("div", {
+			warning: () => /* @__PURE__ */ jsx("div", {
 				className: "right-4 absolute top-1/2 -translate-y-1/2 text-warning-400",
 				"data-testid": "spectral-input-warning-icon",
-				children: /* @__PURE__ */ h(ie, { size: 24 })
+				children: /* @__PURE__ */ jsx(WarningIcon, { size: 24 })
 			})
 		};
-		return b ? /* @__PURE__ */ h("div", {
+		if (endIcon) return /* @__PURE__ */ jsx("div", {
 			className: "right-4 text-input-icon absolute top-1/2 -translate-y-1/2",
-			children: b
-		}) : R === "password" ? r.password() : $ ? r.clear() : fe ? r.loading() : !P && (I === "success" || I === "warning" || I === "error") ? null : I === "success" ? r.success() : I === "warning" ? r.warning() : I === "error" ? r.error() : null;
-	}, we = () => F || null, Te = R === "number" || R === "date" || R === "datetime-local", Ee = n(s(I, le), "[text-indent:var(--prefix-width)]", $ && "pr-10", Te && "tabular-nums"), De = n("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
-	return /* @__PURE__ */ g("div", {
+			children: endIcon
+		});
+		if (type === "password") return iconComponents.password();
+		if (showClearButtonNow) return iconComponents.clear();
+		if (isLoading) return iconComponents.loading();
+		if (!showStateIcon && (state === "success" || state === "warning" || state === "error")) return null;
+		if (state === "success") return iconComponents.success();
+		if (state === "warning") return iconComponents.warning();
+		if (state === "error") return iconComponents.error();
+		return null;
+	};
+	const getStartIcon = () => {
+		if (startIcon) return startIcon;
+		return null;
+	};
+	const usesTabularNumbers = type === "number" || type === "date" || type === "datetime-local";
+	const inputClasses = cn(getInputClasses(state, className), "[text-indent:var(--prefix-width)]", showClearButtonNow && "pr-10", usesTabularNumbers && "tabular-nums");
+	const prefixClasses = cn("inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50");
+	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-1.5 w-full",
 		"data-testid": "spectral-input-container",
-		children: [C && /* @__PURE__ */ h(d, {
-			className: n("mb-2 block", w, K && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
+		children: [label && /* @__PURE__ */ jsx(Label, {
+			className: cn("mb-2 block", labelClassName, isDisabled && "cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder"),
 			"data-testid": "spectral-input-label",
-			htmlFor: U,
-			children: C
-		}), /* @__PURE__ */ g("div", {
+			htmlFor: inputId,
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			"data-testid": "spectral-input-wrapper",
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ jsxs("div", {
 					className: "relative",
 					children: [
-						we(),
-						A && /* @__PURE__ */ h("span", {
-							ref: ye,
-							className: De,
-							children: A
+						getStartIcon(),
+						prefix && /* @__PURE__ */ jsx("span", {
+							ref: prefixRef,
+							className: prefixClasses,
+							children: prefix
 						}),
-						/* @__PURE__ */ h("input", {
-							"aria-label": V ?? C,
-							autoComplete: ce(R),
-							className: Ee,
-							"data-state": I,
+						/* @__PURE__ */ jsx("input", {
+							"aria-label": ariaLabel ?? label,
+							autoComplete: getAutoCompleteValue(type),
+							className: inputClasses,
+							"data-state": state,
 							"data-testid": "spectral-input",
-							disabled: K,
-							id: U,
-							name: T,
-							onBlur: be,
-							onChange: Q,
-							onFocus: xe,
-							placeholder: k ?? C,
-							ref: he,
-							required: M,
-							style: o({ "--prefix-width": A ? `${ve}px` : "0" }),
-							suppressHydrationWarning: L,
-							type: R === "password" ? _e : R,
-							value: q,
-							...me,
-							...de
+							disabled: isDisabled,
+							id: inputId,
+							name,
+							onBlur: handleBlur,
+							onChange: handleChange,
+							onFocus: handleFocus,
+							placeholder: placeholder ?? label,
+							ref: inputRef,
+							required,
+							style: getFormFieldCSSProperties({ "--prefix-width": prefix ? `${prefixWidth}px` : "0" }),
+							suppressHydrationWarning,
+							type: type === "password" ? inputType : type,
+							value,
+							...ariaProps,
+							...props
 						}),
-						Ce()
+						getEndIcon()
 					]
 				}),
-				/* @__PURE__ */ h(r, {
+				/* @__PURE__ */ jsx(ErrorMessage, {
 					dataTestId: "spectral-input-error-message",
-					id: W,
-					message: pe ? x ?? null : null
+					id: errorMessageId,
+					message: isInvalid ? errorMessage ?? null : null
 				}),
-				/* @__PURE__ */ h(i, {
+				/* @__PURE__ */ jsx(WarningMessage, {
 					dataTestId: "spectral-input-warning-message",
-					id: G,
-					message: I === "warning" ? B ?? null : null
+					id: warningMessageId,
+					message: state === "warning" ? warningMessage ?? null : null
 				})
 			]
 		})]
 	});
 };
-_.displayName = "Input";
+Input.displayName = "Input";
+
 //#endregion
-export { _ as Input };
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import { CheckCircleIcon, CloseCircleIcon, ErrorIcon, EyeClosedIcon, EyeOpenIcon, LoaderIcon, WarningIcon } from '@components/Icons'\nimport { Label } from '@components/Label/Label'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { ErrorMessage, WarningMessage, getAriaProps, getFormFieldCSSProperties, getInputClasses, useFormFieldId, useFormFieldState, type BaseFormFieldProps } from '@utils/formFieldUtils'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useRef, type ChangeEvent, type CSSProperties, type FocusEvent, type InputHTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { useClearOnFocus, usePasswordVisibility, usePrefixWidth } from './InputUtils'\n\nexport type InputType = 'text' | 'email' | 'url' | 'tel' | 'password' | 'number' | 'date' | 'datetime-local'\n\nexport type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'onChange'> &\n  BaseFormFieldProps & {\n    className?: string\n    clearOnFocus?: boolean\n    endIcon?: ReactElement\n    labelClassName?: string\n    onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n    onChange?: (value: string) => void\n    onFocus?: (e: FocusEvent<HTMLInputElement>) => void\n    placeholder?: string\n    prefix?: string\n    showClearButton?: boolean\n    showStateIcon?: boolean\n    startIcon?: ReactElement\n    suppressHydrationWarning?: boolean\n    type?: InputType\n    value?: string\n    warningMessage?: BaseFormFieldProps['errorMessage']\n  }\n\nconst mergeRefs = <T,>(...refs: (Ref<T> | undefined)[]): Ref<T> => {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return\n      if (typeof ref === 'function') {\n        ref(value)\n      } else {\n        ;(ref as { current: T | null }).current = value\n      }\n    })\n  }\n}\n\nconst getAutoCompleteValue = (type: InputType): string => {\n  const autoCompleteMap: Record<InputType, string> = {\n    date: 'off',\n    email: 'email',\n    number: 'off',\n    password: 'current-password',\n    tel: 'tel',\n    text: 'off',\n    url: 'url',\n    'datetime-local': 'off',\n  }\n  return autoCompleteMap[type] || 'off'\n}\n\nexport const Input = (\n  allProps: InputProps & {\n    ref?: Ref<HTMLInputElement>\n  },\n): ReactElement => {\n  const {\n    className,\n    clearOnFocus = false,\n    defaultValue,\n    disabled,\n    endIcon,\n    errorMessage,\n    id,\n    label,\n    labelClassName,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    prefix,\n    ref,\n    required,\n    showClearButton = false,\n    showStateIcon = true,\n    startIcon,\n    state = 'default',\n    suppressHydrationWarning = true,\n    type = 'text',\n    value: valueProp,\n    warningMessage,\n    'aria-label': ariaLabel,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n  } = allProps\n  const inputId = useFormFieldId(id, name)\n  const errorMessageId = `${inputId}-error`\n  const warningMessageId = `${inputId}-warning`\n  const { isDisabled, isLoading, isInvalid } = useFormFieldState(disabled, state)\n  const messageId = state === 'error' ? errorMessageId : state === 'warning' && warningMessage ? warningMessageId : undefined\n  const ariaProps = getAriaProps(state, ariaDescribedBy, required, messageId)\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n\n  const internalRef = useRef<HTMLInputElement>(null)\n  const inputRef = mergeRefs(ref, internalRef)\n\n  const { isVisible, toggleVisibility, inputType } = usePasswordVisibility()\n  const { prefixWidth, prefixRef } = usePrefixWidth(prefix)\n  const { handleFocus: clearOnFocusHandler } = useClearOnFocus(clearOnFocus, (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value))\n\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      onBlur?.(e)\n    },\n    [onBlur],\n  )\n\n  const handleFocus = useCallback(\n    (e: FocusEvent<HTMLInputElement>): void => {\n      clearOnFocusHandler(e, onFocus)\n    },\n    [clearOnFocusHandler, onFocus],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>): void => {\n      const newValue = e.target.value\n      setValue(newValue)\n    },\n    [setValue],\n  )\n\n  const handleClear = useCallback((): void => {\n    const element = internalRef.current\n    if (element) {\n      setValue('')\n      element.focus()\n    }\n  }, [setValue])\n\n  const showClearButtonNow = showClearButton && value.length > 0\n\n  const getEndIcon = (): ReactElement | null => {\n    const iconClasses = 'absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer'\n\n    const iconComponents = {\n      password: () => (\n        <button aria-controls={inputId} aria-label={isVisible ? `Hide ${label ?? 'password'}` : `Show ${label ?? 'password'}`} aria-pressed={isVisible} className={iconClasses} data-testid='spectral-input-password-toggle' onClick={toggleVisibility} type='button'>\n          {isVisible ? <EyeClosedIcon size={22} /> : <EyeOpenIcon size={22} />}\n        </button>\n      ),\n      clear: () => (\n        <button aria-label={String(`Clear ${label ?? 'input'}`)} className={iconClasses} data-testid='spectral-input-clear-button' onClick={handleClear} type='button'>\n          <CloseCircleIcon size={24} />\n        </button>\n      ),\n      loading: () => (\n        <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2' data-testid='spectral-input-loading-icon'>\n          <LoaderIcon size={24} />\n        </div>\n      ),\n      error: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-danger-400' data-testid='spectral-input-error-icon'>\n          <ErrorIcon size={24} />\n        </div>\n      ),\n      success: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-success-400' data-testid='spectral-input-success-icon'>\n          <CheckCircleIcon size={24} />\n        </div>\n      ),\n      warning: () => (\n        <div className='right-4 absolute top-1/2 -translate-y-1/2 text-warning-400' data-testid='spectral-input-warning-icon'>\n          <WarningIcon size={24} />\n        </div>\n      ),\n    }\n\n    if (endIcon) return <div className='right-4 text-input-icon absolute top-1/2 -translate-y-1/2'>{endIcon}</div>\n    if (type === 'password') return iconComponents.password()\n    if (showClearButtonNow) return iconComponents.clear()\n    if (isLoading) return iconComponents.loading()\n    if (!showStateIcon && (state === 'success' || state === 'warning' || state === 'error')) return null\n    if (state === 'success') return iconComponents.success()\n    if (state === 'warning') return iconComponents.warning()\n    if (state === 'error') return iconComponents.error()\n\n    return null\n  }\n\n  const getStartIcon = (): ReactElement | null => {\n    if (startIcon) return startIcon\n    return null\n  }\n\n  const usesTabularNumbers = type === 'number' || type === 'date' || type === 'datetime-local'\n  const inputClasses = cn(getInputClasses(state, className), '[text-indent:var(--prefix-width)]', showClearButtonNow && 'pr-10', usesTabularNumbers && 'tabular-nums')\n\n  const prefixClasses = cn('inset-y-0 left-4 text-base pointer-events-none absolute flex items-center text-input-text-prefix opacity-100 peer-disabled:opacity-50')\n\n  return (\n    <div className='space-y-1.5 w-full' data-testid='spectral-input-container'>\n      {label && (\n        <Label className={cn('mb-2 block', labelClassName, isDisabled && 'cursor-not-allowed text-input-text--disabled placeholder:text-input-text-placeholder')} data-testid='spectral-input-label' htmlFor={inputId}>\n          {label}\n        </Label>\n      )}\n      <div className='relative' data-testid='spectral-input-wrapper'>\n        <div className='relative'>\n          {getStartIcon()}\n          {prefix && (\n            <span ref={prefixRef} className={prefixClasses}>\n              {prefix}\n            </span>\n          )}\n          <input\n            aria-label={ariaLabel ?? label}\n            autoComplete={getAutoCompleteValue(type)}\n            className={inputClasses}\n            data-state={state}\n            data-testid='spectral-input'\n            disabled={isDisabled}\n            id={inputId}\n            name={name}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            placeholder={placeholder ?? label}\n            ref={inputRef}\n            required={required}\n            style={\n              getFormFieldCSSProperties({\n                '--prefix-width': prefix ? `${prefixWidth}px` : '0',\n              }) as CSSProperties\n            }\n            suppressHydrationWarning={suppressHydrationWarning}\n            type={type === 'password' ? inputType : type}\n            value={value}\n            {...ariaProps}\n            {...props}\n          />\n          {getEndIcon()}\n        </div>\n\n        <ErrorMessage dataTestId='spectral-input-error-message' id={errorMessageId} message={isInvalid ? (errorMessage ?? null) : null} />\n        <WarningMessage dataTestId='spectral-input-warning-message' id={warningMessageId} message={state === 'warning' ? (warningMessage ?? null) : null} />\n      </div>\n    </div>\n  )\n}\nInput.displayName = 'Input'\n"],"mappings":"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"}

package/dist/InputNumeric.d.ts

@@ -1,14 +1,33 @@
-import { InputProps } from '../Input/Input';
-import { ReactElement } from 'react';
-export type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pattern' | 'type'> & {
-    allowDecimal?: boolean;
-    allowNegative?: boolean;
-    locale?: string;
-    onChange?: (value: string) => void;
-    value?: string;
-};
-export declare const InputNumeric: {
-    ({ allowDecimal, allowNegative, className, defaultValue, locale, max, min, onChange, onKeyDown, onPaste, step, value: valueProp, ...props }: InputNumericProps): ReactElement;
-    displayName: string;
+'use client';
+import { InputProps } from "./Input.js";
+import { ReactElement } from "react";
+
+//#region src/components/InputNumeric/InputNumeric.d.ts
+type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pattern' | 'type'> & {
+  allowDecimal?: boolean;
+  allowNegative?: boolean;
+  locale?: string;
+  onChange?: (value: string) => void;
+  value?: string;
 };
+declare function InputNumeric({
+  allowDecimal,
+  allowNegative,
+  className,
+  defaultValue,
+  locale,
+  max,
+  min,
+  onChange,
+  onKeyDown,
+  onPaste,
+  step,
+  value: valueProp,
+  ...props
+}: InputNumericProps): ReactElement;
+declare namespace InputNumeric {
+  var displayName: string;
+}
+//#endregion
+export { InputNumeric, InputNumericProps };
 //# sourceMappingURL=InputNumeric.d.ts.map

package/dist/InputNumeric.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumeric.d.ts","names":[],"sources":["../src/components/InputNumeric/InputNumeric.tsx"],"mappings":";;;;;KA2FY,iBAAA,GAAoB,IAAA,CAAK,UAAA;EACnC,YAAA;EACA,aAAA;EACA,MAAA;EACA,QAAA,IAAY,KAAA;EACZ,KAAA;AAAA;AAAA;EAG6B,YAAA;EAAqB,aAAA;EAAuB,SAAA;EAAW,YAAA;EAAmB,MAAA;EAAQ,GAAA;EAAK,GAAA;EAAK,QAAA;EAAU,SAAA;EAAW,OAAA;EAAS,IAAA;EAAM,KAAA,EAAO,SAAA;EAAA,GAAc;AAAA,GAAS,iBAAA,GAAoB,YAAA;AAAA"}