@codefast/ui 0.3.9 → 0.3.10

package/dist/primitives/input-number.js

@@ -1 +1,381 @@
-import{jsx as e}from"react/jsx-runtime";import{useCallback as t,useEffect as r,useMemo as n,useRef as a}from"react";import{Field as u,Root as l,createInputScope as o}from"./input.js";import{composeEventHandlers as i}from"@radix-ui/primitive";import{createContextScope as c}from"@radix-ui/react-context";import{useControllableState as m}from"@radix-ui/react-use-controllable-state";let s="InputNumber",[p,d]=c(s,[o]),f=o(),[v,b]=p(s);function N(r){let{__scopeInputNumber:u,ariaDecrementLabel:o,ariaIncrementLabel:i,defaultValue:c,formatOptions:s={minimumFractionDigits:0,style:"decimal"},id:p,locale:d,max:b,min:N,onChange:y,step:D=1,value:w,...I}=r,x=f(u),E=a(null),[h,k]=m({defaultProp:c,onChange:y,prop:w}),{decimalSeparator:P,thousandSeparator:A}=n(()=>(function(e){let t=new Intl.NumberFormat(e).formatToParts(12345.6),r="",n="";for(let e of t)if("group"===e.type&&(r=e.value),"decimal"===e.type&&(n=e.value),r&&n)break;return{decimalSeparator:n,thousandSeparator:r}})(d),[d]),B=t(e=>void 0===e||Number.isNaN(e)?"":new Intl.NumberFormat(d,s).format(e),[s,d]),F=t(e=>{var t,r,n;if("number"==typeof e)return g(e,N,b);if("string"!=typeof e)return NaN;let a=e.trim().replaceAll(/[^\d.,\-()]/g,"");if(""===a)return NaN;let u=Number.parseFloat((t=a,r=A,n=P,t.replaceAll(RegExp(`\\${r}`,"g"),"").replace(RegExp(`\\${n}`),".").replaceAll(/[()]/g,"-")));return"percent"===s.style&&(u/=100),Number.isNaN(u)?0:g(u,N,b)},[P,s.style,b,N,A]),L=t(e=>{let t=E.current;if(!t||I.disabled||I.readOnly)return;let r=g(e(F(t.value)||0),N,b);t.value=B(r),k(r)},[I.disabled,B,b,N,F,I.readOnly,k]),T=t(()=>{L(e=>e+D)},[L,D]),K=t(()=>{L(e=>e-D)},[L,D]),M=t(()=>{L(e=>b??e+D)},[L,b,D]),O=t(()=>{L(e=>N??e-D)},[L,N,D]);return e(v,{ariaDecrementLabel:o,ariaIncrementLabel:i,defaultValue:c,disabled:I.disabled,formatOptions:s,formatValue:B,id:p,inputRef:E,max:b,min:N,parseValue:F,readOnly:I.readOnly,scope:u,value:h,onChange:k,onDecrement:K,onDecrementToMin:O,onIncrement:T,onIncrementToMax:M,children:e(l,{...x,...I})})}function y({__scopeInputNumber:n,onBlur:a,onKeyDown:l,...o}){let c=f(n),{defaultValue:m,disabled:s,formatValue:p,id:d,inputRef:v,max:N,min:y,onChange:D,onDecrement:w,onDecrementToMin:I,onIncrement:g,onIncrementToMax:x,parseValue:E,readOnly:h,step:k,value:P}=b("InputNumberField",n),A=t(e=>{let t=E(e.target.value),r=p(t);r!==e.target.value&&(e.target.value=r),D(t)},[p,D,E]),B=t(e=>{switch(e.key){case"ArrowUp":g(),e.preventDefault();break;case"PageUp":x(),e.preventDefault();break;case"ArrowDown":w(),e.preventDefault();break;case"PageDown":I(),e.preventDefault()}},[g,x,w,I]),F=t(e=>{switch(e.key){case"ArrowUp":case"ArrowDown":case"ArrowLeft":case"ArrowRight":case"PageUp":case"PageDown":case"Tab":case"Escape":case"Enter":case"Backspace":case"Delete":case"Home":case"End":case".":case",":case"-":case"%":return;default:var t,r;if(!Number.isNaN(Number(e.key))||(t=e).ctrlKey||t.altKey||t.metaKey||t.shiftKey||(r=e.key).startsWith("F")&&r.length>1)return;e.preventDefault()}},[]),L=t(e=>{let t=v.current;if("Enter"!==e.key||!t)return;let r=E(t.value),n=p(r);n!==t.value&&(t.value=n),D(r)},[p,v,D,E]),T=t(e=>{i(l,function(...e){return(...t)=>{for(let r of e)r(...t)}}(F,B,L))(e)},[l,B,L,F]);return r(()=>{let e=e=>{let t=v.current;!t||s||h||document.activeElement!==t||(e.preventDefault(),e.deltaY>0?g():w())},t=v.current;return t?.addEventListener("wheel",e),()=>{t?.removeEventListener("wheel",e)}},[g,w,v,s,h]),r(()=>{let e=v.current;e&&e!==document.activeElement&&(e.value=p(P))},[p,v,P]),r(()=>{let e=v.current;if(!e)return;let t=()=>{D(E(m))},r=e.form;return r?.addEventListener("reset",t),()=>{r?.removeEventListener("reset",t)}},[m,v,D,E]),e(u,{ref:v,defaultValue:p(P),disabled:s,id:d,inputMode:"decimal",max:N,min:y,readOnly:h,step:k,onBlur:i(a,A),onKeyDown:T,...c,...o})}function D({__scopeInputNumber:r,operation:u,...l}){let{ariaDecrementLabel:o,ariaIncrementLabel:i,disabled:c,id:m,max:s,min:p,onDecrement:d,onIncrement:f,value:v}=b("NumberStepperButton",r),N=n(()=>{let e=void 0!==p&&void 0!==v&&v<=p,t=void 0!==s&&void 0!==v&&v>=s;return(c??e)||t},[p,s,v,c]),y=a(null),D=t(e=>{let t=()=>{e(),y.current=setTimeout(t,100)};e(),y.current=setTimeout(t,200)},[]),w=t(()=>{y.current&&(clearTimeout(y.current),y.current=null)},[]),I=t(()=>{D("increment"===u?f:d)},[d,f,u,D]),g=t(e=>{e.preventDefault()},[]),x=t(e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),("increment"===u?f:d)())},[d,f,u]);return e("button",{"aria-controls":m,"aria-label":"increment"===u?i:o,"aria-live":"polite",disabled:N,type:"button",onContextMenu:g,onKeyDown:x,onPointerCancel:w,onPointerDown:I,onPointerLeave:w,onPointerUp:w,...l})}function w(t){return e(D,{operation:"increment",...t})}function I(t){return e(D,{operation:"decrement",...t})}function g(e,t=-1/0,r=1/0){return Math.min(Math.max(e,t),r)}export{I as DecrementButton,y as Field,w as IncrementButton,N as InputNumber,I as InputNumberDecrementButton,y as InputNumberField,w as InputNumberIncrementButton,N as Root,d as createInputNumberScope};
+import { jsx } from "react/jsx-runtime";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { createContextScope } from "@radix-ui/react-context";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Field, Root, createInputScope } from "./input.js";
+const NUMBER_INPUT_NAME = 'InputNumber';
+const [createInputNumberContext, createInputNumberScope] = createContextScope(NUMBER_INPUT_NAME, [
+    createInputScope
+]);
+const useInputScope = createInputScope();
+const [InputNumberContextProvider, useInputNumberContext] = createInputNumberContext(NUMBER_INPUT_NAME);
+function InputNumber(numberInputProps) {
+    const { __scopeInputNumber, ariaDecrementLabel, ariaIncrementLabel, defaultValue, formatOptions = {
+        minimumFractionDigits: 0,
+        style: 'decimal'
+    }, id, locale, max, min, onChange, step = 1, value: valueProperty, ...props } = numberInputProps;
+    const inputScope = useInputScope(__scopeInputNumber);
+    const inputRef = useRef(null);
+    const [value, setValue] = useControllableState({
+        defaultProp: defaultValue,
+        onChange,
+        prop: valueProperty
+    });
+    const { decimalSeparator, thousandSeparator } = useMemo(()=>getNumberFormatSeparators(locale), [
+        locale
+    ]);
+    const formatValue = useCallback((inputValue)=>{
+        if (void 0 === inputValue || Number.isNaN(inputValue)) return '';
+        return new Intl.NumberFormat(locale, formatOptions).format(inputValue);
+    }, [
+        formatOptions,
+        locale
+    ]);
+    const parseValue = useCallback((inputValue)=>{
+        if ('number' == typeof inputValue) return clamp(inputValue, min, max);
+        if ('string' != typeof inputValue) return NaN;
+        const cleanedValue = inputValue.trim().replaceAll(/[^\d.,\-()]/g, '');
+        if ('' === cleanedValue) return NaN;
+        const normalizedValue = normalizeInputValue(cleanedValue, thousandSeparator, decimalSeparator);
+        let parsedValue = Number.parseFloat(normalizedValue);
+        if ('percent' === formatOptions.style) parsedValue /= 100;
+        return Number.isNaN(parsedValue) ? 0 : clamp(parsedValue, min, max);
+    }, [
+        decimalSeparator,
+        formatOptions.style,
+        max,
+        min,
+        thousandSeparator
+    ]);
+    const changeNumberValue = useCallback((operation)=>{
+        const inputElement = inputRef.current;
+        if (!inputElement || props.disabled || props.readOnly) return;
+        const currentValue = parseValue(inputElement.value) || 0;
+        const newValue = clamp(operation(currentValue), min, max);
+        inputElement.value = formatValue(newValue);
+        setValue(newValue);
+    }, [
+        props.disabled,
+        formatValue,
+        max,
+        min,
+        parseValue,
+        props.readOnly,
+        setValue
+    ]);
+    const handleIncrement = useCallback(()=>{
+        changeNumberValue((number)=>number + step);
+    }, [
+        changeNumberValue,
+        step
+    ]);
+    const handleDecrement = useCallback(()=>{
+        changeNumberValue((number)=>number - step);
+    }, [
+        changeNumberValue,
+        step
+    ]);
+    const handleIncrementToMax = useCallback(()=>{
+        changeNumberValue((number)=>max ?? number + step);
+    }, [
+        changeNumberValue,
+        max,
+        step
+    ]);
+    const handleDecrementToMin = useCallback(()=>{
+        changeNumberValue((number)=>min ?? number - step);
+    }, [
+        changeNumberValue,
+        min,
+        step
+    ]);
+    return /*#__PURE__*/ jsx(InputNumberContextProvider, {
+        ariaDecrementLabel: ariaDecrementLabel,
+        ariaIncrementLabel: ariaIncrementLabel,
+        defaultValue: defaultValue,
+        disabled: props.disabled,
+        formatOptions: formatOptions,
+        formatValue: formatValue,
+        id: id,
+        inputRef: inputRef,
+        max: max,
+        min: min,
+        parseValue: parseValue,
+        readOnly: props.readOnly,
+        scope: __scopeInputNumber,
+        value: value,
+        onChange: setValue,
+        onDecrement: handleDecrement,
+        onDecrementToMin: handleDecrementToMin,
+        onIncrement: handleIncrement,
+        onIncrementToMax: handleIncrementToMax,
+        children: /*#__PURE__*/ jsx(Root, {
+            ...inputScope,
+            ...props
+        })
+    });
+}
+const NUMBER_INPUT_FIELD_NAME = 'InputNumberField';
+function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
+    const inputScope = useInputScope(__scopeInputNumber);
+    const { defaultValue, disabled, formatValue, id, inputRef, max, min, onChange, onDecrement, onDecrementToMin, onIncrement, onIncrementToMax, parseValue, readOnly, step, value } = useInputNumberContext(NUMBER_INPUT_FIELD_NAME, __scopeInputNumber);
+    const handleBlur = useCallback((event)=>{
+        const numericValue = parseValue(event.target.value);
+        const formattedValue = formatValue(numericValue);
+        if (formattedValue !== event.target.value) event.target.value = formattedValue;
+        onChange(numericValue);
+    }, [
+        formatValue,
+        onChange,
+        parseValue
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        switch(event.key){
+            case 'ArrowUp':
+                onIncrement();
+                event.preventDefault();
+                break;
+            case 'PageUp':
+                onIncrementToMax();
+                event.preventDefault();
+                break;
+            case 'ArrowDown':
+                onDecrement();
+                event.preventDefault();
+                break;
+            case 'PageDown':
+                onDecrementToMin();
+                event.preventDefault();
+                break;
+            default:
+                break;
+        }
+    }, [
+        onIncrement,
+        onIncrementToMax,
+        onDecrement,
+        onDecrementToMin
+    ]);
+    const handleKeyDownPrevent = useCallback((event)=>{
+        switch(event.key){
+            case 'ArrowUp':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowRight':
+            case 'PageUp':
+            case 'PageDown':
+            case 'Tab':
+            case 'Escape':
+            case 'Enter':
+            case 'Backspace':
+            case 'Delete':
+            case 'Home':
+            case 'End':
+            case '.':
+            case ',':
+            case '-':
+            case '%':
+                return;
+            default:
+                if (isNumberKey(event.key) || isModifierKey(event) || isFunctionKey(event.key)) return;
+                event.preventDefault();
+        }
+    }, []);
+    const handleKeyDownEnter = useCallback((event)=>{
+        const inputElement = inputRef.current;
+        if ('Enter' !== event.key || !inputElement) return;
+        const numericValue = parseValue(inputElement.value);
+        const formattedValue = formatValue(numericValue);
+        if (formattedValue !== inputElement.value) inputElement.value = formattedValue;
+        onChange(numericValue);
+    }, [
+        formatValue,
+        inputRef,
+        onChange,
+        parseValue
+    ]);
+    const combinedKeyDownHandler = useCallback((event)=>{
+        composeEventHandlers(onKeyDown, chain(handleKeyDownPrevent, handleKeyDown, handleKeyDownEnter))(event);
+    }, [
+        onKeyDown,
+        handleKeyDown,
+        handleKeyDownEnter,
+        handleKeyDownPrevent
+    ]);
+    useEffect(()=>{
+        const handleWheel = (event)=>{
+            const inputElement = inputRef.current;
+            if (!inputElement || disabled || readOnly || document.activeElement !== inputElement) return;
+            event.preventDefault();
+            if (event.deltaY > 0) onIncrement();
+            else onDecrement();
+        };
+        const inputElement = inputRef.current;
+        inputElement?.addEventListener('wheel', handleWheel);
+        return ()=>{
+            inputElement?.removeEventListener('wheel', handleWheel);
+        };
+    }, [
+        onIncrement,
+        onDecrement,
+        inputRef,
+        disabled,
+        readOnly
+    ]);
+    useEffect(()=>{
+        const inputElement = inputRef.current;
+        if (inputElement && inputElement !== document.activeElement) inputElement.value = formatValue(value);
+    }, [
+        formatValue,
+        inputRef,
+        value
+    ]);
+    useEffect(()=>{
+        const inputElement = inputRef.current;
+        if (!inputElement) return;
+        const handleReset = ()=>{
+            onChange(parseValue(defaultValue));
+        };
+        const form = inputElement.form;
+        form?.addEventListener('reset', handleReset);
+        return ()=>{
+            form?.removeEventListener('reset', handleReset);
+        };
+    }, [
+        defaultValue,
+        inputRef,
+        onChange,
+        parseValue
+    ]);
+    return /*#__PURE__*/ jsx(Field, {
+        ref: inputRef,
+        defaultValue: formatValue(value),
+        disabled: disabled,
+        id: id,
+        inputMode: "decimal",
+        max: max,
+        min: min,
+        readOnly: readOnly,
+        step: step,
+        onBlur: composeEventHandlers(onBlur, handleBlur),
+        onKeyDown: combinedKeyDownHandler,
+        ...inputScope,
+        ...props
+    });
+}
+const NUMBER_STEPPER_BUTTON_NAME = 'NumberStepperButton';
+function NumberStepperButton({ __scopeInputNumber, operation, ...props }) {
+    const { ariaDecrementLabel, ariaIncrementLabel, disabled, id, max, min, onDecrement, onIncrement, value } = useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
+    const isDisabled = useMemo(()=>{
+        const atMin = void 0 !== min && void 0 !== value && value <= min;
+        const atMax = void 0 !== max && void 0 !== value && value >= max;
+        return (disabled ?? atMin) || atMax;
+    }, [
+        min,
+        max,
+        value,
+        disabled
+    ]);
+    const timeoutIdRef = useRef(null);
+    const startActionInterval = useCallback((callback)=>{
+        const interval = 100;
+        const repeatAction = ()=>{
+            callback();
+            timeoutIdRef.current = setTimeout(repeatAction, interval);
+        };
+        callback();
+        timeoutIdRef.current = setTimeout(repeatAction, 2 * interval);
+    }, []);
+    const clearActionInterval = useCallback(()=>{
+        if (timeoutIdRef.current) {
+            clearTimeout(timeoutIdRef.current);
+            timeoutIdRef.current = null;
+        }
+    }, []);
+    const handlePointerDown = useCallback(()=>{
+        const action = 'increment' === operation ? onIncrement : onDecrement;
+        startActionInterval(action);
+    }, [
+        onDecrement,
+        onIncrement,
+        operation,
+        startActionInterval
+    ]);
+    const handleContextMenu = useCallback((event)=>{
+        event.preventDefault();
+    }, []);
+    const handleKeyDown = useCallback((event)=>{
+        if ('Enter' === event.key || ' ' === event.key) {
+            event.preventDefault();
+            const action = 'increment' === operation ? onIncrement : onDecrement;
+            action();
+        }
+    }, [
+        onDecrement,
+        onIncrement,
+        operation
+    ]);
+    return /*#__PURE__*/ jsx("button", {
+        "aria-controls": id,
+        "aria-label": 'increment' === operation ? ariaIncrementLabel : ariaDecrementLabel,
+        "aria-live": "polite",
+        disabled: isDisabled,
+        type: "button",
+        onContextMenu: handleContextMenu,
+        onKeyDown: handleKeyDown,
+        onPointerCancel: clearActionInterval,
+        onPointerDown: handlePointerDown,
+        onPointerLeave: clearActionInterval,
+        onPointerUp: clearActionInterval,
+        ...props
+    });
+}
+function InputNumberIncrementButton(props) {
+    return /*#__PURE__*/ jsx(NumberStepperButton, {
+        operation: "increment",
+        ...props
+    });
+}
+function InputNumberDecrementButton(props) {
+    return /*#__PURE__*/ jsx(NumberStepperButton, {
+        operation: "decrement",
+        ...props
+    });
+}
+function chain(...callbacks) {
+    return (...args)=>{
+        for (const callback of callbacks)callback(...args);
+    };
+}
+function getNumberFormatSeparators(locale) {
+    const numberFormat = new Intl.NumberFormat(locale);
+    const parts = numberFormat.formatToParts(12345.6);
+    let thousandSeparator = '';
+    let decimalSeparator = '';
+    for (const part of parts){
+        if ('group' === part.type) thousandSeparator = part.value;
+        if ('decimal' === part.type) decimalSeparator = part.value;
+        if (thousandSeparator && decimalSeparator) break;
+    }
+    return {
+        decimalSeparator,
+        thousandSeparator
+    };
+}
+function normalizeInputValue(value, thousandSeparator, decimalSeparator) {
+    return value.replaceAll(new RegExp(`\\${thousandSeparator}`, 'g'), '').replace(new RegExp(`\\${decimalSeparator}`), '.').replaceAll(/[()]/g, '-');
+}
+function isModifierKey(event) {
+    return event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+}
+function isFunctionKey(key) {
+    return key.startsWith('F') && key.length > 1;
+}
+function isNumberKey(key) {
+    return !Number.isNaN(Number(key));
+}
+function clamp(value, min = -1 / 0, max = 1 / 0) {
+    return Math.min(Math.max(value, min), max);
+}
+export { InputNumberDecrementButton as DecrementButton, InputNumberField as Field, InputNumberIncrementButton as IncrementButton, InputNumber, InputNumberDecrementButton, InputNumberField, InputNumberIncrementButton, InputNumber as Root, createInputNumberScope };

package/dist/primitives/input.cjs

@@ -1 +1,99 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,t)=>{for(var _ in t)__webpack_require__.o(t,_)&&!__webpack_require__.o(e,_)&&Object.defineProperty(e,_,{enumerable:!0,get:t[_]})},__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{InputField:()=>InputField,Input:()=>Input,Field:()=>InputField,createInputScope:()=>createInputScope,Root:()=>Input});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_react_namespaceObject=require("react"),react_compose_refs_namespaceObject=require("@radix-ui/react-compose-refs"),react_context_namespaceObject=require("@radix-ui/react-context"),INPUT_NAME="Input",[createInputContext,createInputScope]=(0,react_context_namespaceObject.createContextScope)(INPUT_NAME),[InputContextProvider,useInputContext]=createInputContext(INPUT_NAME);function Input(e){let{__scopeInput:t,children:_,disabled:r,loaderPosition:n="prefix",loading:p,prefix:c,readOnly:a,spinner:o,suffix:u,...i}=e,s=(0,external_react_namespaceObject.useRef)(null);return(0,jsx_runtime_namespaceObject.jsx)(InputContextProvider,{disabled:r,inputRef:s,readOnly:a,scope:t,children:(0,jsx_runtime_namespaceObject.jsxs)("div",{"data-disabled":r,"data-readonly":a,role:"presentation",onPointerDown:e=>{let t=e.target;if("input"===t.tagName.toLowerCase()||t.closest("input, a, button"))return void e.stopPropagation();let _=s.current;if(_){if(document.activeElement===_)return void e.preventDefault();requestAnimationFrame(()=>{"file"===_.type?_.click():document.activeElement!==_&&_.focus()})}},...i,children:[p&&"prefix"===n?o:c,_,p&&"suffix"===n?o:u]})})}const INPUT_FIELD_NAME="InputField";function InputField({__scopeInput:e,...t}){let{disabled:_,inputRef:r,readOnly:n}=useInputContext("InputField",e),p=(0,react_compose_refs_namespaceObject.useComposedRefs)(r);return(0,jsx_runtime_namespaceObject.jsx)("input",{ref:p,disabled:_,readOnly:n,type:"text",...t})}for(var __webpack_i__ in exports.Field=__webpack_exports__.Field,exports.Input=__webpack_exports__.Input,exports.InputField=__webpack_exports__.InputField,exports.Root=__webpack_exports__.Root,exports.createInputScope=__webpack_exports__.createInputScope,__webpack_exports__)-1===["Field","Input","InputField","Root","createInputScope"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    InputField: ()=>InputField,
+    Input: ()=>Input,
+    Field: ()=>InputField,
+    createInputScope: ()=>createInputScope,
+    Root: ()=>Input
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_compose_refs_namespaceObject = require("@radix-ui/react-compose-refs");
+const react_context_namespaceObject = require("@radix-ui/react-context");
+const external_react_namespaceObject = require("react");
+const INPUT_NAME = 'Input';
+const [createInputContext, createInputScope] = (0, react_context_namespaceObject.createContextScope)(INPUT_NAME);
+const [InputContextProvider, useInputContext] = createInputContext(INPUT_NAME);
+function Input(inputProps) {
+    const { __scopeInput, children, disabled, loaderPosition = 'prefix', loading, prefix, readOnly, spinner, suffix, ...props } = inputProps;
+    const inputRef = (0, external_react_namespaceObject.useRef)(null);
+    const handlePointerDown = (event)=>{
+        const target = event.target;
+        if ('input' === target.tagName.toLowerCase() || target.closest('input, a, button')) return void event.stopPropagation();
+        const inputElement = inputRef.current;
+        if (!inputElement) return;
+        if (document.activeElement === inputElement) return void event.preventDefault();
+        requestAnimationFrame(()=>{
+            if ('file' === inputElement.type) return void inputElement.click();
+            if (document.activeElement !== inputElement) inputElement.focus();
+        });
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InputContextProvider, {
+        disabled: disabled,
+        inputRef: inputRef,
+        readOnly: readOnly,
+        scope: __scopeInput,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            "data-disabled": disabled,
+            "data-readonly": readOnly,
+            role: "presentation",
+            onPointerDown: handlePointerDown,
+            ...props,
+            children: [
+                loading && 'prefix' === loaderPosition ? spinner : prefix,
+                children,
+                loading && 'suffix' === loaderPosition ? spinner : suffix
+            ]
+        })
+    });
+}
+const INPUT_FIELD_NAME = 'InputField';
+function InputField({ __scopeInput, ...props }) {
+    const { disabled, inputRef, readOnly } = useInputContext(INPUT_FIELD_NAME, __scopeInput);
+    const composedInputRef = (0, react_compose_refs_namespaceObject.useComposedRefs)(inputRef);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+        ref: composedInputRef,
+        disabled: disabled,
+        readOnly: readOnly,
+        type: "text",
+        ...props
+    });
+}
+exports.Field = __webpack_exports__.Field;
+exports.Input = __webpack_exports__.Input;
+exports.InputField = __webpack_exports__.InputField;
+exports.Root = __webpack_exports__.Root;
+exports.createInputScope = __webpack_exports__.createInputScope;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Field",
+    "Input",
+    "InputField",
+    "Root",
+    "createInputScope"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/primitives/input.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX, PropsWithChildren, ReactNode } from "react";
-import type { Scope } from "@radix-ui/react-context";
+import type { Scope } from '@radix-ui/react-context';
+import type { ComponentProps, JSX, PropsWithChildren, ReactNode } from 'react';
 /**
  * Type for adding scope to component props
  */
@@ -42,7 +42,7 @@ interface InputBehaviorProps {
     /**
      * Position of the loading spinner - either before or after the input
      */
-    loaderPosition?: "prefix" | "suffix";
+    loaderPosition?: 'prefix' | 'suffix';
     /**
      * Whether the input is in the loading state
      */
@@ -60,7 +60,7 @@ declare function Input(inputProps: ScopedProps<InputProps>): JSX.Element;
 /**
  * Props for the InputField component
  */
-type InputFieldProps = ComponentProps<"input">;
+type InputFieldProps = ComponentProps<'input'>;
 declare function InputField({ __scopeInput, ...props }: ScopedProps<InputFieldProps>): JSX.Element;
 export { createInputScope, InputField as Field, Input, InputField, Input as Root };
 export type { InputFieldProps, InputProps };

package/dist/primitives/input.js

@@ -1 +1,53 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r}from"react";import{useComposedRefs as i}from"@radix-ui/react-compose-refs";import{createContextScope as n}from"@radix-ui/react-context";let o="Input",[a,u]=n(o),[p,l]=a(o);function d(i){let{__scopeInput:n,children:o,disabled:a,loaderPosition:u="prefix",loading:l,prefix:d,readOnly:c,spinner:f,suffix:m,...s}=i,x=r(null);return e(p,{disabled:a,inputRef:x,readOnly:c,scope:n,children:t("div",{"data-disabled":a,"data-readonly":c,role:"presentation",onPointerDown:e=>{let t=e.target;if("input"===t.tagName.toLowerCase()||t.closest("input, a, button"))return void e.stopPropagation();let r=x.current;if(r){if(document.activeElement===r)return void e.preventDefault();requestAnimationFrame(()=>{"file"===r.type?r.click():document.activeElement!==r&&r.focus()})}},...s,children:[l&&"prefix"===u?f:d,o,l&&"suffix"===u?f:m]})})}function c({__scopeInput:t,...r}){let{disabled:n,inputRef:o,readOnly:a}=l("InputField",t);return e("input",{ref:i(o),disabled:n,readOnly:a,type:"text",...r})}export{c as Field,d as Input,c as InputField,d as Root,u as createInputScope};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { createContextScope } from "@radix-ui/react-context";
+import { useRef } from "react";
+const INPUT_NAME = 'Input';
+const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
+const [InputContextProvider, useInputContext] = createInputContext(INPUT_NAME);
+function Input(inputProps) {
+    const { __scopeInput, children, disabled, loaderPosition = 'prefix', loading, prefix, readOnly, spinner, suffix, ...props } = inputProps;
+    const inputRef = useRef(null);
+    const handlePointerDown = (event)=>{
+        const target = event.target;
+        if ('input' === target.tagName.toLowerCase() || target.closest('input, a, button')) return void event.stopPropagation();
+        const inputElement = inputRef.current;
+        if (!inputElement) return;
+        if (document.activeElement === inputElement) return void event.preventDefault();
+        requestAnimationFrame(()=>{
+            if ('file' === inputElement.type) return void inputElement.click();
+            if (document.activeElement !== inputElement) inputElement.focus();
+        });
+    };
+    return /*#__PURE__*/ jsx(InputContextProvider, {
+        disabled: disabled,
+        inputRef: inputRef,
+        readOnly: readOnly,
+        scope: __scopeInput,
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-disabled": disabled,
+            "data-readonly": readOnly,
+            role: "presentation",
+            onPointerDown: handlePointerDown,
+            ...props,
+            children: [
+                loading && 'prefix' === loaderPosition ? spinner : prefix,
+                children,
+                loading && 'suffix' === loaderPosition ? spinner : suffix
+            ]
+        })
+    });
+}
+const INPUT_FIELD_NAME = 'InputField';
+function InputField({ __scopeInput, ...props }) {
+    const { disabled, inputRef, readOnly } = useInputContext(INPUT_FIELD_NAME, __scopeInput);
+    const composedInputRef = useComposedRefs(inputRef);
+    return /*#__PURE__*/ jsx("input", {
+        ref: composedInputRef,
+        disabled: disabled,
+        readOnly: readOnly,
+        type: "text",
+        ...props
+    });
+}
+export { InputField as Field, Input, InputField, Input as Root, createInputScope };