@choco-vanille/ui 1.1.0 → 1.1.2

package/dist/components/forms/text-field/TextField.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),H=require("../../actions/icon-button/IconButton.cjs");require("../../actions/icon-button/styles/IconButton.css.cjs");const F=require("./components/text-field-label/TextFieldLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                       */const I=require("./components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                                                */const m=require("./components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                */const K=require("./styles/TextField.css.cjs"),M=require("../_shared/components/helper-text/HelperText.cjs"),O=require("./constants/index.cjs"),U=require("./hooks/useTextfield.hook.cjs"),T=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const w=require("../../../constants/icons.cjs"),X=require("../../../utils/cn.cjs"),y=require("react"),r=y.memo(c=>{const{inputId:d,helperId:l,hasError:o,hasStartIcon:b,hasEndAction:a,handleMouseDown:v,handleFocus:g,handleBlur:j,resolvedType:S,isPassword:E,showPassword:i,setShowPassword:u}=U.useTextField(c),{disabled:h,startIcon:x,className:f,width:p,error:s,helperText:n,label:q,endAction:z,size:A,placeholder:P,value:D,onChange:_,onKeyDown:L,onKeyUp:R,ref:k,type:Y,...B}=c,t=A??"md",C=y.useCallback(()=>u(!i),[u,i]),N=E?e.jsx(H,{icon:i?w.IconRegistry.eyeOff:w.IconRegistry.eye,"aria-label":i?"Hide password":"Show password",variant:"ghost",color:"primary",size:O.fieldSizeToActionSize[t],type:"button",tabIndex:-1,onClick:C}):z;return e.jsxs(T,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:p!==void 0?{width:p}:void 0,children:[q&&e.jsx(F,{htmlFor:d,disabled:h,children:q}),e.jsxs(T,{position:"relative",width:"100%",gap:"none",children:[x&&e.jsx(I,{icon:x,size:t}),e.jsx("input",{ref:k,id:d,type:S,disabled:h,"aria-invalid":o||void 0,"aria-describedby":s||n?l:void 0,onMouseDown:v,onFocus:g,onBlur:j,className:X.cn(K.TEXT_FIELD_STYLES.recipe({size:t,hasError:o,hasStartIcon:b,hasEndAction:a}),f),placeholder:P,value:D,onChange:_,onKeyDown:L,onKeyUp:R,...B}),a&&e.jsx(m,{children:N})]}),(s||n)&&e.jsx(M,{id:l,hasError:o,children:s??n})]})});r.displayName="TextField";r.Label=F;r.StartIcon=I;r.EndAction=m;module.exports=r;
+//# sourceMappingURL=TextField.cjs.map

package/dist/components/forms/text-field/TextField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","TextFieldEndAction","HelperText"],"mappings":"0oCAqCMA,EAAYC,EAAAA,KAAsBC,GAAU,CAC9C,KAAM,CACF,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,CAAA,EACAC,EAAAA,aAAab,CAAK,EAEhB,CACF,SAAAc,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,KAAMC,EACN,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAMC,EACN,GAAGC,CAAA,EACH9B,EACE+B,EAAOT,GAAY,KAEnBU,EAAuBC,EAAAA,YACzB,IAAMrB,EAAgB,CAACD,CAAY,EACnC,CAACC,EAAiBD,CAAY,CAAA,EAG5BuB,EAAoBxB,EACtByB,EAAAA,IAACC,EAAA,CACG,KAAMzB,EAAe0B,EAAAA,aAAa,OAASA,EAAAA,aAAa,IACxD,aAAY1B,EAAe,gBAAkB,gBAC7C,QAAS,QACT,MAAO,UACP,KAAM2B,EAAAA,sBAAsBP,CAAI,EAChC,KAAM,SACN,SAAU,GACV,QAASC,CAAA,CAAA,EAGbX,EAGJ,OACIkB,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAOvB,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACGe,EAAAA,IAACM,EAAA,CACG,QAASxC,EACT,SAAAa,EAEC,SAAAM,CAAA,CAAA,EAITmB,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAAzB,GACGoB,EAAAA,IAACO,EAAA,CACG,KAAM3B,EACN,KAAAgB,CAAA,CAAA,EAIRI,EAAAA,IAAC,QAAA,CACG,IAAAP,EACA,GAAI3B,EAEJ,KAAMQ,EACN,SAAAK,EACA,eAAcX,GAAY,OAC1B,mBAAkBe,GAASC,EAAajB,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWmC,EAAAA,GACPC,EAAAA,kBAAkB,OAAO,CACrB,KAAAb,EACA,SAAA5B,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDW,CAAA,EAEJ,YAAAO,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACC,GAAGG,CAAA,CAAA,EAGPzB,GACG8B,EAAAA,IAACU,EAAA,CAAoB,SAAAX,CAAA,CAAkB,CAAA,CAAA,CAAA,GAI7ChB,GAASC,IACPgB,EAAAA,IAACW,EAAA,CACG,GAAI5C,EACJ,SAAAC,EAEC,SAAAe,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDrB,EAAU,YAAc,YACxBA,EAAU,MAAQ2C,EAClB3C,EAAU,UAAY4C,EACtB5C,EAAU,UAAY+C"}

package/dist/components/forms/text-field/TextField.d.ts

@@ -0,0 +1,23 @@
+import { TextFieldCompound } from './types';
+/**
+  * A styled text input built with a native `<input>` and `<label>`.
+  *
+  * - `startIcon` - Iconify icon name rendered on the left.
+  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.
+  * - `type="password"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).
+  * - `width` - overrides the default `100%` wrapper width.
+  *
+  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the
+  * input shows the primary border without the ring halo, detected via `onMouseDown`
+  * and a `data-mouse-focus` attribute.
+  *
+  * @example
+  * ```tsx
+  * <TextField label="Email" startIcon="lucide:mail" placeholder="you@example.com" />
+  * <TextField label="Password" type="password" />
+  * <TextField label="Search" endAction={<IconButton icon="lucide:search" aria-label="Search" variant="ghost" color="primary" />} />
+  * <TextField label="Amount" width="12rem" />
+  * ```
+  */
+declare const TextField: TextFieldCompound;
+export default TextField;

package/dist/components/forms/text-field/TextField.js

@@ -0,0 +1,152 @@
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import M from "../../actions/icon-button/IconButton.js";
+import "../../actions/icon-button/styles/IconButton.css.js";
+import T from "./components/text-field-label/TextFieldLabel.js";
+/* empty css                                         */
+/* empty css                                             */
+/* empty css                                                                     */
+import F from "./components/text-field-start-icon/TextFieldStartIcon.js";
+/* empty css                                                                              */
+import I from "./components/text-field-end-action/TextFieldEndAction.js";
+/* empty css                                                                              */
+import { TEXT_FIELD_STYLES as O } from "./styles/TextField.css.js";
+import R from "../_shared/components/helper-text/HelperText.js";
+import { fieldSizeToActionSize as U } from "./constants/index.js";
+import { useTextField as X } from "./hooks/useTextfield.hook.js";
+import x from "../../layout/flex/Flex.js";
+import "../../layout/flex/styles/Flex.css.js";
+import { IconRegistry as y } from "../../../constants/icons.js";
+import { cn as Y } from "../../../utils/cn.js";
+import { memo as q, useCallback as G } from "react";
+const r = q((a) => {
+  const {
+    inputId: d,
+    helperId: l,
+    hasError: i,
+    hasStartIcon: b,
+    hasEndAction: m,
+    handleMouseDown: v,
+    handleFocus: S,
+    handleBlur: g,
+    resolvedType: E,
+    isPassword: z,
+    showPassword: e,
+    setShowPassword: p
+  } = X(a), {
+    disabled: c,
+    startIcon: h,
+    className: A,
+    width: f,
+    error: t,
+    helperText: n,
+    label: u,
+    endAction: P,
+    size: D,
+    placeholder: L,
+    value: B,
+    onChange: C,
+    onKeyDown: N,
+    onKeyUp: _,
+    ref: j,
+    type: J,
+    ...k
+  } = a, s = D ?? "md", H = G(
+    () => p(!e),
+    [p, e]
+  ), K = z ? /* @__PURE__ */ o(
+    M,
+    {
+      icon: e ? y.eyeOff : y.eye,
+      "aria-label": e ? "Hide password" : "Show password",
+      variant: "ghost",
+      color: "primary",
+      size: U[s],
+      type: "button",
+      tabIndex: -1,
+      onClick: H
+    }
+  ) : P;
+  return /* @__PURE__ */ w(
+    x,
+    {
+      flexDirection: "column",
+      gap: "xs",
+      width: "100%",
+      alignItems: "start",
+      style: f !== void 0 ? { width: f } : void 0,
+      children: [
+        u && /* @__PURE__ */ o(
+          T,
+          {
+            htmlFor: d,
+            disabled: c,
+            children: u
+          }
+        ),
+        /* @__PURE__ */ w(
+          x,
+          {
+            position: "relative",
+            width: "100%",
+            gap: "none",
+            children: [
+              h && /* @__PURE__ */ o(
+                F,
+                {
+                  icon: h,
+                  size: s
+                }
+              ),
+              /* @__PURE__ */ o(
+                "input",
+                {
+                  ref: j,
+                  id: d,
+                  type: E,
+                  disabled: c,
+                  "aria-invalid": i || void 0,
+                  "aria-describedby": t || n ? l : void 0,
+                  onMouseDown: v,
+                  onFocus: S,
+                  onBlur: g,
+                  className: Y(
+                    O.recipe({
+                      size: s,
+                      hasError: i,
+                      hasStartIcon: b,
+                      hasEndAction: m
+                    }),
+                    A
+                  ),
+                  placeholder: L,
+                  value: B,
+                  onChange: C,
+                  onKeyDown: N,
+                  onKeyUp: _,
+                  ...k
+                }
+              ),
+              m && /* @__PURE__ */ o(I, { children: K })
+            ]
+          }
+        ),
+        (t || n) && /* @__PURE__ */ o(
+          R,
+          {
+            id: l,
+            hasError: i,
+            children: t ?? n
+          }
+        )
+      ]
+    }
+  );
+});
+r.displayName = "TextField";
+r.Label = T;
+r.StartIcon = F;
+r.EndAction = I;
+export {
+  r as default
+};
+//# sourceMappingURL=TextField.js.map

package/dist/components/forms/text-field/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","TextFieldEndAction","HelperText"],"mappings":"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"}

package/dist/components/forms/text-field/components/index.d.ts

@@ -0,0 +1,6 @@
+export { default as TextFieldLabel } from './text-field-label/TextFieldLabel.tsx';
+export { TEXT_FIELD_LABEL_STYLES } from './text-field-label/styles/TextFieldLabel.css.ts';
+export { default as TextFieldStartIcon } from './text-field-start-icon/TextFieldStartIcon.tsx';
+export { TEXT_FIELD_START_ICON_STYLES } from './text-field-start-icon/styles/TextFieldStartIcon.css.ts';
+export { default as TextFieldEndAction } from './text-field-end-action/TextFieldEndAction.tsx';
+export { TEXT_FIELD_END_ACTION_STYLES } from './text-field-end-action/styles/TextFieldEndAction.css.ts';

package/dist/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),i=require("react"),n=require("./styles/TextFieldEndAction.css.cjs"),e=i.memo(({children:t})=>s.jsx("span",{className:n.TEXT_FIELD_END_ACTION_STYLES.root,children:t}));e.displayName="TextField.EndAction";module.exports=e;
+//# sourceMappingURL=TextFieldEndAction.cjs.map

package/dist/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldEndAction.cjs","sources":["../../../../../../src/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.tsx"],"sourcesContent":["import { memo, type FC, type ReactNode } from 'react'\r\nimport { TEXT_FIELD_END_ACTION_STYLES } from '@components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.ts'\r\n\r\ntype TextFieldEndActionProps = {\r\n    children: ReactNode\r\n}\r\n\r\nconst TextFieldEndAction: FC<TextFieldEndActionProps> = memo(({ children }) => (\r\n    <span className={TEXT_FIELD_END_ACTION_STYLES.root}>\r\n        {children}\r\n    </span>\r\n))\r\n\r\nTextFieldEndAction.displayName = 'TextField.EndAction'\r\n\r\nexport default TextFieldEndAction\r\n"],"names":["TextFieldEndAction","memo","children","jsx","TEXT_FIELD_END_ACTION_STYLES"],"mappings":"sHAOMA,EAAkDC,EAAAA,KAAK,CAAC,CAAE,SAAAC,CAAA,IAC5DC,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,6BAA6B,KACzC,SAAAF,CAAA,CACL,CACH,EAEDF,EAAmB,YAAc"}

package/dist/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.d.ts

@@ -0,0 +1,6 @@
+import { FC, ReactNode } from 'react';
+type TextFieldEndActionProps = {
+    children: ReactNode;
+};
+declare const TextFieldEndAction: FC<TextFieldEndActionProps>;
+export default TextFieldEndAction;

package/dist/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { TEXT_FIELD_END_ACTION_STYLES as e } from "./styles/TextFieldEndAction.css.js";
+const i = m(({ children: o }) => /* @__PURE__ */ t("span", { className: e.root, children: o }));
+i.displayName = "TextField.EndAction";
+export {
+  i as default
+};
+//# sourceMappingURL=TextFieldEndAction.js.map

package/dist/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldEndAction.js","sources":["../../../../../../src/components/forms/text-field/components/text-field-end-action/TextFieldEndAction.tsx"],"sourcesContent":["import { memo, type FC, type ReactNode } from 'react'\r\nimport { TEXT_FIELD_END_ACTION_STYLES } from '@components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.ts'\r\n\r\ntype TextFieldEndActionProps = {\r\n    children: ReactNode\r\n}\r\n\r\nconst TextFieldEndAction: FC<TextFieldEndActionProps> = memo(({ children }) => (\r\n    <span className={TEXT_FIELD_END_ACTION_STYLES.root}>\r\n        {children}\r\n    </span>\r\n))\r\n\r\nTextFieldEndAction.displayName = 'TextField.EndAction'\r\n\r\nexport default TextFieldEndAction\r\n"],"names":["TextFieldEndAction","memo","children","jsx","TEXT_FIELD_END_ACTION_STYLES"],"mappings":";;;AAOA,MAAMA,IAAkDC,EAAK,CAAC,EAAE,UAAAC,EAAA,MAC5D,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAA6B,MACzC,UAAAF,EAAA,CACL,CACH;AAEDF,EAAmB,cAAc;"}

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                        */var e={root:"_14iivnx0"};exports.TEXT_FIELD_END_ACTION_STYLES=e;
+//# sourceMappingURL=TextFieldEndAction.css.cjs.map

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldEndAction.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.d.ts

@@ -0,0 +1,3 @@
+export declare const TEXT_FIELD_END_ACTION_STYLES: {
+    root: string;
+};

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.js

@@ -0,0 +1,6 @@
+/* empty css                                      */
+var o = { root: "_14iivnx0" };
+export {
+  o as TEXT_FIELD_END_ACTION_STYLES
+};
+//# sourceMappingURL=TextFieldEndAction.css.js.map

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldEndAction.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("react/jsx-runtime"),l=require("react"),o=require("./styles/TextFieldLabel.css.cjs"),e=l.memo(({htmlFor:s,disabled:t,children:a})=>i.jsx("label",{htmlFor:s,className:o.TEXT_FIELD_LABEL_STYLES.root,"data-disabled":t?"":void 0,children:a}));e.displayName="TextField.Label";module.exports=e;
+//# sourceMappingURL=TextFieldLabel.cjs.map

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldLabel.cjs","sources":["../../../../../../src/components/forms/text-field/components/text-field-label/TextFieldLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_LABEL_STYLES } from '@components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.ts'\r\nimport type {\r\n    TextFieldLabelProps\r\n} from '@components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.ts'\r\n\r\nconst TextFieldLabel: FC<TextFieldLabelProps> = memo(({ htmlFor, disabled, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_FIELD_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextFieldLabel.displayName = 'TextField.Label'\r\n\r\nexport default TextFieldLabel\r\n"],"names":["TextFieldLabel","memo","htmlFor","disabled","children","jsx","TEXT_FIELD_LABEL_STYLES"],"mappings":"kHAMMA,EAA0CC,EAAAA,KAAK,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,SAAAC,KACvEC,EAAAA,IAAC,QAAA,CACG,QAAAH,EACA,UAAWI,EAAAA,wBAAwB,KACnC,gBAAeH,EAAW,GAAK,OAE9B,SAAAC,CAAA,CACL,CACH,EAEDJ,EAAe,YAAc"}

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TextFieldLabelProps } from './types/TextFieldLabel.props.ts';
+declare const TextFieldLabel: FC<TextFieldLabelProps>;
+export default TextFieldLabel;

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.js

@@ -0,0 +1,17 @@
+import { jsx as l } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { TEXT_FIELD_LABEL_STYLES as t } from "./styles/TextFieldLabel.css.js";
+const d = m(({ htmlFor: e, disabled: a, children: o }) => /* @__PURE__ */ l(
+  "label",
+  {
+    htmlFor: e,
+    className: t.root,
+    "data-disabled": a ? "" : void 0,
+    children: o
+  }
+));
+d.displayName = "TextField.Label";
+export {
+  d as default
+};
+//# sourceMappingURL=TextFieldLabel.js.map

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldLabel.js","sources":["../../../../../../src/components/forms/text-field/components/text-field-label/TextFieldLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_FIELD_LABEL_STYLES } from '@components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.ts'\r\nimport type {\r\n    TextFieldLabelProps\r\n} from '@components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.ts'\r\n\r\nconst TextFieldLabel: FC<TextFieldLabelProps> = memo(({ htmlFor, disabled, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_FIELD_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextFieldLabel.displayName = 'TextField.Label'\r\n\r\nexport default TextFieldLabel\r\n"],"names":["TextFieldLabel","memo","htmlFor","disabled","children","jsx","TEXT_FIELD_LABEL_STYLES"],"mappings":";;;AAMA,MAAMA,IAA0CC,EAAK,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,UAAAC,QACvE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,SAAAH;AAAA,IACA,WAAWI,EAAwB;AAAA,IACnC,iBAAeH,IAAW,KAAK;AAAA,IAE9B,UAAAC;AAAA,EAAA;AACL,CACH;AAEDJ,EAAe,cAAc;"}

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                    */var e={root:"_1uvjcr80"};exports.TEXT_FIELD_LABEL_STYLES=e;
+//# sourceMappingURL=TextFieldLabel.css.cjs.map

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldLabel.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.d.ts

@@ -0,0 +1,3 @@
+export declare const TEXT_FIELD_LABEL_STYLES: {
+    root: string;
+};

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.js

@@ -0,0 +1,8 @@
+/* empty css                                                  */
+/* empty css                                                      */
+/* empty css                                  */
+var p = { root: "_1uvjcr80" };
+export {
+  p as TEXT_FIELD_LABEL_STYLES
+};
+//# sourceMappingURL=TextFieldLabel.css.js.map

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/forms/text-field/components/text-field-label/types/TextFieldLabel.props.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type TextFieldLabelProps = {
+    htmlFor?: string;
+    disabled?: boolean;
+    children: ReactNode;
+};

package/dist/components/forms/text-field/components/text-field-start-icon/TextFieldStartIcon.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),o=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const c=require("./styles/TextFieldStartIcon.css.cjs"),n=require("./types/TextFieldStartIcon.props.cjs"),t=i.memo(({icon:r,size:s})=>e.jsx("span",{className:c.TEXT_FIELD_START_ICON_STYLES.root,children:e.jsx(o,{icon:r,size:n.fieldSizeToIconSize[s]})}));t.displayName="TextField.StartIcon";module.exports=t;
+//# sourceMappingURL=TextFieldStartIcon.cjs.map

package/dist/components/forms/text-field/components/text-field-start-icon/TextFieldStartIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldStartIcon.cjs","sources":["../../../../../../src/components/forms/text-field/components/text-field-start-icon/TextFieldStartIcon.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { TEXT_FIELD_START_ICON_STYLES } from '@components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.ts'\r\nimport type {\r\n    TextFieldStartIconProps\r\n} from '@components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.types.ts'\r\nimport {\r\n    fieldSizeToIconSize\r\n} from '@components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.ts'\r\n\r\nconst TextFieldStartIcon: FC<TextFieldStartIconProps> = memo(({ icon, size }) => (\r\n    <span className={TEXT_FIELD_START_ICON_STYLES.root}>\r\n        <Icon\r\n            icon={icon}\r\n            size={fieldSizeToIconSize[size]}\r\n        />\r\n    </span>\r\n))\r\n\r\nTextFieldStartIcon.displayName = 'TextField.StartIcon'\r\n\r\nexport default TextFieldStartIcon\r\n"],"names":["TextFieldStartIcon","memo","icon","size","jsx","TEXT_FIELD_START_ICON_STYLES","Icon","fieldSizeToIconSize"],"mappings":"2RAWMA,EAAkDC,EAAAA,KAAK,CAAC,CAAE,KAAAC,EAAM,KAAAC,CAAA,IAClEC,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,6BAA6B,KAC1C,SAAAD,EAAAA,IAACE,EAAA,CACG,KAAAJ,EACA,KAAMK,EAAAA,oBAAoBJ,CAAI,CAAA,CAClC,EACJ,CACH,EAEDH,EAAmB,YAAc"}

package/dist/components/forms/text-field/components/text-field-start-icon/TextFieldStartIcon.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TextFieldStartIconProps } from './types/TextFieldStartIcon.types.ts';
+declare const TextFieldStartIcon: FC<TextFieldStartIconProps>;
+export default TextFieldStartIcon;

package/dist/components/forms/text-field/components/text-field-start-icon/TextFieldStartIcon.js

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as m } from "react";
+import e from "../../../../foundation/icon/Icon.js";
+import "../../../../foundation/icon/styles/Icon.css.js";
+import { TEXT_FIELD_START_ICON_STYLES as i } from "./styles/TextFieldStartIcon.css.js";
+import { fieldSizeToIconSize as a } from "./types/TextFieldStartIcon.props.js";
+const p = m(({ icon: r, size: t }) => /* @__PURE__ */ o("span", { className: i.root, children: /* @__PURE__ */ o(
+  e,
+  {
+    icon: r,
+    size: a[t]
+  }
+) }));
+p.displayName = "TextField.StartIcon";
+export {
+  p as default
+};
+//# sourceMappingURL=TextFieldStartIcon.js.map

package/dist/components/forms/text-field/components/text-field-start-icon/TextFieldStartIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldStartIcon.js","sources":["../../../../../../src/components/forms/text-field/components/text-field-start-icon/TextFieldStartIcon.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { TEXT_FIELD_START_ICON_STYLES } from '@components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.ts'\r\nimport type {\r\n    TextFieldStartIconProps\r\n} from '@components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.types.ts'\r\nimport {\r\n    fieldSizeToIconSize\r\n} from '@components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.ts'\r\n\r\nconst TextFieldStartIcon: FC<TextFieldStartIconProps> = memo(({ icon, size }) => (\r\n    <span className={TEXT_FIELD_START_ICON_STYLES.root}>\r\n        <Icon\r\n            icon={icon}\r\n            size={fieldSizeToIconSize[size]}\r\n        />\r\n    </span>\r\n))\r\n\r\nTextFieldStartIcon.displayName = 'TextField.StartIcon'\r\n\r\nexport default TextFieldStartIcon\r\n"],"names":["TextFieldStartIcon","memo","icon","size","jsx","TEXT_FIELD_START_ICON_STYLES","Icon","fieldSizeToIconSize"],"mappings":";;;;;;AAWA,MAAMA,IAAkDC,EAAK,CAAC,EAAE,MAAAC,GAAM,MAAAC,EAAA,MAClE,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAA6B,MAC1C,UAAA,gBAAAD;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,MAAAJ;AAAA,IACA,MAAMK,EAAoBJ,CAAI;AAAA,EAAA;AAClC,GACJ,CACH;AAEDH,EAAmB,cAAc;"}

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                        */var e={root:"_1hy9fia0"};exports.TEXT_FIELD_START_ICON_STYLES=e;
+//# sourceMappingURL=TextFieldStartIcon.css.cjs.map

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldStartIcon.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.d.ts

@@ -0,0 +1,3 @@
+export declare const TEXT_FIELD_START_ICON_STYLES: {
+    root: string;
+};

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.js

@@ -0,0 +1,8 @@
+/* empty css                                                  */
+/* empty css                                                      */
+/* empty css                                      */
+var T = { root: "_1hy9fia0" };
+export {
+  T as TEXT_FIELD_START_ICON_STYLES
+};
+//# sourceMappingURL=TextFieldStartIcon.css.js.map

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldStartIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={sm:"md",md:"md",lg:"md"};exports.fieldSizeToIconSize=e;
+//# sourceMappingURL=TextFieldStartIcon.props.cjs.map

package/dist/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldStartIcon.props.cjs","sources":["../../../../../../../src/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the Icon size rendered in the start slot. */\r\nexport const fieldSizeToIconSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'md',\r\n    md: 'md',\r\n    lg: 'md',\r\n}\r\n"],"names":["fieldSizeToIconSize"],"mappings":"gFAGO,MAAMA,EAAuE,CAChF,GAAI,KACJ,GAAI,KACJ,GAAI,IACR"}

package/dist/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldSize } from '../../../../..';
+/** Maps field size to the Icon size rendered in the start slot. */
+export declare const fieldSizeToIconSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'>;

package/dist/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.js

@@ -0,0 +1,9 @@
+const d = {
+  sm: "md",
+  md: "md",
+  lg: "md"
+};
+export {
+  d as fieldSizeToIconSize
+};
+//# sourceMappingURL=TextFieldStartIcon.props.js.map

package/dist/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldStartIcon.props.js","sources":["../../../../../../../src/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.props.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the Icon size rendered in the start slot. */\r\nexport const fieldSizeToIconSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'md',\r\n    md: 'md',\r\n    lg: 'md',\r\n}\r\n"],"names":["fieldSizeToIconSize"],"mappings":"AAGO,MAAMA,IAAuE;AAAA,EAChF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}

package/dist/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.types.d.ts

@@ -0,0 +1,5 @@
+import { TextFieldSize } from '../../../../..';
+export type TextFieldStartIconProps = {
+    icon: string;
+    size: NonNullable<TextFieldSize>;
+};

package/dist/components/forms/text-field/constants/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={sm:"sm",md:"sm",lg:"md"};exports.fieldSizeToActionSize=e;
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/text-field/constants/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n"],"names":["fieldSizeToActionSize"],"mappings":"gFAGO,MAAMA,EAAyE,CAClF,GAAI,KACJ,GAAI,KACJ,GAAI,IACR"}

package/dist/components/forms/text-field/constants/index.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldSize } from '../../..';
+/** Maps field size to the IconButton size used in the end-action slot. */
+export declare const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'>;

package/dist/components/forms/text-field/constants/index.js

@@ -0,0 +1,9 @@
+const m = {
+  sm: "sm",
+  md: "sm",
+  lg: "md"
+};
+export {
+  m as fieldSizeToActionSize
+};
+//# sourceMappingURL=index.js.map

package/dist/components/forms/text-field/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/forms/text-field/constants/index.ts"],"sourcesContent":["import type { TextFieldSize } from '@components'\r\n\r\n/** Maps field size to the IconButton size used in the end-action slot. */\r\nexport const fieldSizeToActionSize: Record<NonNullable<TextFieldSize>, 'sm' | 'md'> = {\r\n    sm: 'sm',\r\n    md: 'sm',\r\n    lg: 'md',\r\n}\r\n"],"names":["fieldSizeToActionSize"],"mappings":"AAGO,MAAMA,IAAyE;AAAA,EAClF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}

package/dist/components/forms/text-field/hooks/types/index.d.ts

@@ -0,0 +1,14 @@
+export type UseTextFieldReturn = {
+    inputId: string | undefined;
+    helperId: string;
+    hasError: boolean;
+    isPassword: boolean;
+    showPassword: boolean;
+    setShowPassword: (value: boolean) => void;
+    handleMouseDown: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    hasStartIcon: boolean;
+    hasEndAction: boolean;
+    resolvedType: string | undefined;
+};

package/dist/components/forms/text-field/hooks/useTextfield.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),A=d=>{const{label:i,error:h,startIcon:f,endAction:p,type:n,onMouseDown:r,onFocus:a,onBlur:c,id:w}=d,u=t.useId(),b=w??(i?u:void 0),I=`${u}-helper`,T=!!h,s=n==="password",[l,S]=t.useState(!1),o=t.useRef(!1),g=t.useCallback(e=>{o.current=!0,r?.(e)},[r]),v=t.useCallback(e=>{o.current&&(e.currentTarget.setAttribute("data-mouse-focus",""),o.current=!1),a?.(e)},[a]),y=t.useCallback(e=>{o.current=!1,e.currentTarget.removeAttribute("data-mouse-focus"),c?.(e)},[c]);return{inputId:b,helperId:I,hasError:T,isPassword:s,showPassword:l,setShowPassword:S,handleMouseDown:g,handleFocus:v,handleBlur:y,hasStartIcon:!!f,hasEndAction:s||!!p,resolvedType:s?l?"text":"password":n}};exports.useTextField=A;
+//# sourceMappingURL=useTextfield.hook.cjs.map

package/dist/components/forms/text-field/hooks/useTextfield.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextfield.hook.cjs","sources":["../../../../../src/components/forms/text-field/hooks/useTextfield.hook.tsx"],"sourcesContent":["import { type FocusEventHandler, type MouseEventHandler, useCallback, useId, useRef, useState } from 'react'\r\nimport type { TextFieldProps } from '@components/forms/text-field/types/TextField.props.ts'\r\nimport type { UseTextFieldReturn } from '@components/forms/text-field/hooks/types'\r\n\r\nexport const useTextField = (\r\n    props: TextFieldProps & {\r\n        type?: string\r\n        onMouseDown?: MouseEventHandler<HTMLInputElement>\r\n        onFocus?: FocusEventHandler<HTMLInputElement>\r\n        onBlur?: FocusEventHandler<HTMLInputElement>\r\n    }\r\n): UseTextFieldReturn => {\r\n    const {\r\n        label,\r\n        error,\r\n        startIcon,\r\n        endAction,\r\n        type,\r\n        onMouseDown,\r\n        onFocus,\r\n        onBlur,\r\n        id\r\n    } = props\r\n\r\n    const generatedId = useId()\r\n    const inputId = id ?? (label ? generatedId : undefined)\r\n    const helperId = `${generatedId}-helper`\r\n    const hasError = Boolean(error)\r\n    const isPassword = type === 'password'\r\n\r\n    const [showPassword, setShowPassword] = useState(false)\r\n    const pointerDownRef = useRef(false)\r\n\r\n    const handleMouseDown = useCallback(\r\n        (e: React.MouseEvent<HTMLInputElement>) => {\r\n            pointerDownRef.current = true\r\n            onMouseDown?.(e)\r\n        },\r\n        [onMouseDown],\r\n    )\r\n\r\n    const handleFocus = useCallback(\r\n        (e: React.FocusEvent<HTMLInputElement>) => {\r\n            if (pointerDownRef.current) {\r\n                e.currentTarget.setAttribute('data-mouse-focus', '')\r\n                pointerDownRef.current = false\r\n            }\r\n            onFocus?.(e)\r\n        },\r\n        [onFocus],\r\n    )\r\n\r\n    const handleBlur = useCallback(\r\n        (e: React.FocusEvent<HTMLInputElement>) => {\r\n            pointerDownRef.current = false\r\n            e.currentTarget.removeAttribute('data-mouse-focus')\r\n            onBlur?.(e)\r\n        },\r\n        [onBlur],\r\n    )\r\n\r\n    const hasStartIcon = Boolean(startIcon)\r\n    const hasEndAction = isPassword || Boolean(endAction)\r\n    const resolvedType = isPassword ? (showPassword ? 'text' : 'password') : type\r\n\r\n    return {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        resolvedType,\r\n    }\r\n}\r\n"],"names":["useTextField","props","label","error","startIcon","endAction","type","onMouseDown","onFocus","onBlur","id","generatedId","useId","inputId","helperId","hasError","isPassword","showPassword","setShowPassword","useState","pointerDownRef","useRef","handleMouseDown","useCallback","handleFocus","handleBlur"],"mappings":"yGAIaA,EACTC,GAMqB,CACrB,KAAM,CACF,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,KAAAC,EACA,YAAAC,EACA,QAAAC,EACA,OAAAC,EACA,GAAAC,CAAA,EACAT,EAEEU,EAAcC,EAAAA,MAAA,EACdC,EAAUH,IAAOR,EAAQS,EAAc,QACvCG,EAAW,GAAGH,CAAW,UACzBI,EAAW,EAAQZ,EACnBa,EAAaV,IAAS,WAEtB,CAACW,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAChDC,EAAiBC,EAAAA,OAAO,EAAK,EAE7BC,EAAkBC,EAAAA,YACnB,GAA0C,CACvCH,EAAe,QAAU,GACzBb,IAAc,CAAC,CACnB,EACA,CAACA,CAAW,CAAA,EAGViB,EAAcD,EAAAA,YACf,GAA0C,CACnCH,EAAe,UACf,EAAE,cAAc,aAAa,mBAAoB,EAAE,EACnDA,EAAe,QAAU,IAE7BZ,IAAU,CAAC,CACf,EACA,CAACA,CAAO,CAAA,EAGNiB,EAAaF,EAAAA,YACd,GAA0C,CACvCH,EAAe,QAAU,GACzB,EAAE,cAAc,gBAAgB,kBAAkB,EAClDX,IAAS,CAAC,CACd,EACA,CAACA,CAAM,CAAA,EAOX,MAAO,CACH,QAAAI,EACA,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,gBAAAI,EACA,YAAAE,EACA,WAAAC,EACA,aAdiB,EAAQrB,EAezB,aAdiBY,GAAc,EAAQX,EAevC,aAdiBW,EAAcC,EAAe,OAAS,WAAcX,CAcrE,CAER"}

package/dist/components/forms/text-field/hooks/useTextfield.hook.d.ts

@@ -0,0 +1,9 @@
+import { FocusEventHandler, MouseEventHandler } from 'react';
+import { TextFieldProps } from '../types/TextField.props.ts';
+import { UseTextFieldReturn } from './types';
+export declare const useTextField: (props: TextFieldProps & {
+    type?: string;
+    onMouseDown?: MouseEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+}) => UseTextFieldReturn;

package/dist/components/forms/text-field/hooks/useTextfield.hook.js

@@ -0,0 +1,47 @@
+import { useId as S, useState as g, useRef as x, useCallback as s } from "react";
+const P = (l) => {
+  const {
+    label: i,
+    error: h,
+    startIcon: p,
+    endAction: f,
+    type: n,
+    onMouseDown: r,
+    onFocus: a,
+    onBlur: c,
+    id: w
+  } = l, u = S(), I = w ?? (i ? u : void 0), m = `${u}-helper`, A = !!h, t = n === "password", [d, B] = g(!1), o = x(!1), T = s(
+    (e) => {
+      o.current = !0, r?.(e);
+    },
+    [r]
+  ), b = s(
+    (e) => {
+      o.current && (e.currentTarget.setAttribute("data-mouse-focus", ""), o.current = !1), a?.(e);
+    },
+    [a]
+  ), v = s(
+    (e) => {
+      o.current = !1, e.currentTarget.removeAttribute("data-mouse-focus"), c?.(e);
+    },
+    [c]
+  );
+  return {
+    inputId: I,
+    helperId: m,
+    hasError: A,
+    isPassword: t,
+    showPassword: d,
+    setShowPassword: B,
+    handleMouseDown: T,
+    handleFocus: b,
+    handleBlur: v,
+    hasStartIcon: !!p,
+    hasEndAction: t || !!f,
+    resolvedType: t ? d ? "text" : "password" : n
+  };
+};
+export {
+  P as useTextField
+};
+//# sourceMappingURL=useTextfield.hook.js.map