@commercetools/nimbus 0.0.0-canary-20260202161702 → 0.0.0-canary-20260202163051
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{localized-field-BGZdWUsZ.es.js → localized-field-DV3nzKpz.es.js} +2 -2
- package/dist/chunks/{localized-field-BGZdWUsZ.es.js.map → localized-field-DV3nzKpz.es.js.map} +1 -1
- package/dist/chunks/{localized-field-BTDBtnK7.cjs.js → localized-field-DyucE16v.cjs.js} +2 -2
- package/dist/chunks/{localized-field-BTDBtnK7.cjs.js.map → localized-field-DyucE16v.cjs.js.map} +1 -1
- package/dist/chunks/{password-input-BVI6GvAN.cjs.js → password-input-J-Y0lk1M.cjs.js} +2 -2
- package/dist/chunks/{password-input-BVI6GvAN.cjs.js.map → password-input-J-Y0lk1M.cjs.js.map} +1 -1
- package/dist/chunks/{password-input-BxIBbkRh.es.js → password-input-UA-zLSLA.es.js} +2 -2
- package/dist/chunks/{password-input-BxIBbkRh.es.js.map → password-input-UA-zLSLA.es.js.map} +1 -1
- package/dist/chunks/{password-input-field-DdtPws7k.cjs.js → password-input-field-BFWRpbgq.cjs.js} +2 -2
- package/dist/chunks/{password-input-field-DdtPws7k.cjs.js.map → password-input-field-BFWRpbgq.cjs.js.map} +1 -1
- package/dist/chunks/{password-input-field-UuhEOVc7.es.js → password-input-field-BdA4Wbh7.es.js} +2 -2
- package/dist/chunks/{password-input-field-UuhEOVc7.es.js.map → password-input-field-BdA4Wbh7.es.js.map} +1 -1
- package/dist/chunks/{text-input-DzwmIuAk.es.js → text-input-0_e7m90A.es.js} +29 -29
- package/dist/chunks/{text-input-DzwmIuAk.es.js.map → text-input-0_e7m90A.es.js.map} +1 -1
- package/dist/chunks/text-input-DMdKhA4s.cjs.js +2 -0
- package/dist/chunks/{text-input-Dukgyb5K.cjs.js.map → text-input-DMdKhA4s.cjs.js.map} +1 -1
- package/dist/chunks/{text-input-field-D1bwFK7r.cjs.js → text-input-field-DyjFewe3.cjs.js} +2 -2
- package/dist/chunks/{text-input-field-D1bwFK7r.cjs.js.map → text-input-field-DyjFewe3.cjs.js.map} +1 -1
- package/dist/chunks/{text-input-field-XgUiAt5N.es.js → text-input-field-lCdJIMRn.es.js} +2 -2
- package/dist/chunks/{text-input-field-XgUiAt5N.es.js.map → text-input-field-lCdJIMRn.es.js.map} +1 -1
- package/dist/components/fields.cjs +1 -1
- package/dist/components/fields.es.js +2 -2
- package/dist/components/localized-field.cjs +1 -1
- package/dist/components/localized-field.es.js +1 -1
- package/dist/components/password-input-field.cjs +1 -1
- package/dist/components/password-input-field.es.js +1 -1
- package/dist/components/password-input.cjs +1 -1
- package/dist/components/password-input.es.js +1 -1
- package/dist/components/patterns.cjs +1 -1
- package/dist/components/patterns.es.js +2 -2
- package/dist/components/text-input-field.cjs +1 -1
- package/dist/components/text-input-field.es.js +1 -1
- package/dist/components/text-input.cjs +1 -1
- package/dist/components/text-input.es.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.es.js +5 -5
- package/package.json +5 -5
- package/dist/chunks/text-input-Dukgyb5K.cjs.js +0 -2
package/dist/chunks/{password-input-BVI6GvAN.cjs.js.map → password-input-J-Y0lk1M.cjs.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input-
|
|
1
|
+
{"version":3,"file":"password-input-J-Y0lk1M.cjs.js","sources":["../../src/components/password-input/intl/en.ts","../../src/components/password-input/intl/de.ts","../../src/components/password-input/intl/es.ts","../../src/components/password-input/intl/fr-FR.ts","../../src/components/password-input/intl/pt-BR.ts","../../src/components/password-input/password-input.messages.ts","../../src/components/password-input/password-input.tsx"],"sourcesContent":["/**\n * Pre-compiled en messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Hide password`, show: `Show password` };\n","/**\n * Pre-compiled de messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Passwort ausblenden`, show: `Passwort anzeigen` };\n","/**\n * Pre-compiled es messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Ocultar contraseña`, show: `Mostrar contraseña` };\n","/**\n * Pre-compiled fr-FR messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n hide: `Masquer le mot de passe`,\n show: `Afficher le mot de passe`,\n};\n","/**\n * Pre-compiled pt-BR messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Ocultar senha`, show: `Mostrar senha` };\n","/**\n * Pre-compiled localized messages for PasswordInput component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n type LocalizedString,\n type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport passwordInputMessages_en from \"./intl/en\";\nimport passwordInputMessages_de from \"./intl/de\";\nimport passwordInputMessages_es from \"./intl/es\";\nimport passwordInputMessages_fr from \"./intl/fr-FR\";\nimport passwordInputMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const passwordInputMessagesStrings: LocalizedStrings<\n string,\n LocalizedString\n> = {\n en: normalizeMessages(passwordInputMessages_en),\n de: normalizeMessages(passwordInputMessages_de),\n es: normalizeMessages(passwordInputMessages_es),\n \"fr-FR\": normalizeMessages(passwordInputMessages_fr),\n \"pt-BR\": normalizeMessages(passwordInputMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for PasswordInput component\n */\nexport type PasswordInputMessageKey = \"hide\" | \"show\";\n","import { useState } from \"react\";\nimport { IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { passwordInputMessagesStrings } from \"./password-input.messages\";\n\n/**\n * # PasswordInput\n *\n * A password input is a text field that hides entered characters for secure password entry.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/passwordinput}\n */\nexport const PasswordInput = (props: PasswordInputProps) => {\n const { ref, size = \"md\", isDisabled } = props;\n\n const msg = useLocalizedStringFormatter(passwordInputMessagesStrings);\n const [showPassword, setShowPassword] = useState(false);\n\n const toggleVisibility = () => setShowPassword(!showPassword);\n\n const currentLabel = msg.format(showPassword ? \"hide\" : \"show\");\n\n return (\n <TextInput\n ref={ref}\n {...props}\n trailingElement={\n <Tooltip.Root>\n <IconButton\n size={size === \"md\" ? \"xs\" : \"2xs\"}\n variant=\"ghost\"\n colorPalette=\"primary\"\n aria-label={currentLabel}\n onPress={toggleVisibility}\n isDisabled={isDisabled}\n >\n {showPassword ? <VisibilityOff /> : <Visibility />}\n </IconButton>\n <Tooltip.Content>{currentLabel}</Tooltip.Content>\n </Tooltip.Root>\n }\n type={showPassword ? \"text\" : \"password\"}\n />\n );\n};\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["passwordInputMessages_en","passwordInputMessages_de","passwordInputMessages_es","passwordInputMessages_fr","passwordInputMessages_pt","passwordInputMessagesStrings","normalizeMessages","PasswordInput","props","ref","size","isDisabled","msg","useLocalizedStringFormatter","showPassword","setShowPassword","useState","toggleVisibility","currentLabel","jsx","TextInput","jsxs","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":"4RAMAA,EAAe,CAAE,KAAM,gBAAiB,KAAM,eAAA,ECA9CC,EAAe,CAAE,KAAM,sBAAuB,KAAM,mBAAA,ECApDC,EAAe,CAAE,KAAM,qBAAsB,KAAM,oBAAA,ECAnDC,EAAe,CACb,KAAM,0BACN,KAAM,0BACR,ECHAC,EAAe,CAAE,KAAM,gBAAiB,KAAM,eAAA,ECiBjCC,EAGT,CACF,GAAIC,EAAAA,kBAAkBN,CAAwB,EAC9C,GAAIM,EAAAA,kBAAkBL,CAAwB,EAC9C,GAAIK,EAAAA,kBAAkBJ,CAAwB,EAC9C,QAASI,EAAAA,kBAAkBH,CAAwB,EACnD,QAASG,EAAAA,kBAAkBF,CAAwB,CACrD,ECjBaG,EAAiBC,GAA8B,CAC1D,KAAM,CAAE,IAAAC,EAAK,KAAAC,EAAO,KAAM,WAAAC,GAAeH,EAEnCI,EAAMC,EAAAA,4BAA4BR,CAA4B,EAC9D,CAACS,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAEhDC,EAAmB,IAAMF,EAAgB,CAACD,CAAY,EAEtDI,EAAeN,EAAI,OAAOE,EAAe,OAAS,MAAM,EAE9D,OACEK,EAAAA,IAACC,EAAAA,UAAA,CACC,IAAAX,EACC,GAAGD,EACJ,gBACEa,EAAAA,KAACC,EAAAA,QAAQ,KAAR,CACC,SAAA,CAAAH,EAAAA,IAACI,EAAAA,WAAA,CACC,KAAMb,IAAS,KAAO,KAAO,MAC7B,QAAQ,QACR,aAAa,UACb,aAAYQ,EACZ,QAASD,EACT,WAAAN,EAEC,SAAAG,EAAeK,MAACK,EAAAA,cAAA,CAAA,CAAc,QAAMC,EAAAA,WAAA,CAAA,CAAW,CAAA,CAAA,EAElDN,EAAAA,IAACG,EAAAA,QAAQ,QAAR,CAAiB,SAAAJ,CAAA,CAAa,CAAA,EACjC,EAEF,KAAMJ,EAAe,OAAS,UAAA,CAAA,CAGpC,EAEAP,EAAc,YAAc"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
2
2
|
import { useState as w } from "react";
|
|
3
|
-
import { T as h } from "./text-input-
|
|
3
|
+
import { T as h } from "./text-input-0_e7m90A.es.js";
|
|
4
4
|
import { VisibilityOff as u, Visibility as f } from "@commercetools/nimbus-icons";
|
|
5
5
|
import { n as e, u as g } from "./normalize-messages-BN9BAFXe.es.js";
|
|
6
6
|
import { T as a } from "./tooltip-QnXUuSf_.es.js";
|
|
@@ -44,4 +44,4 @@ S.displayName = "PasswordInput";
|
|
|
44
44
|
export {
|
|
45
45
|
S as P
|
|
46
46
|
};
|
|
47
|
-
//# sourceMappingURL=password-input-
|
|
47
|
+
//# sourceMappingURL=password-input-UA-zLSLA.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input-
|
|
1
|
+
{"version":3,"file":"password-input-UA-zLSLA.es.js","sources":["../../src/components/password-input/intl/en.ts","../../src/components/password-input/intl/de.ts","../../src/components/password-input/intl/es.ts","../../src/components/password-input/intl/fr-FR.ts","../../src/components/password-input/intl/pt-BR.ts","../../src/components/password-input/password-input.messages.ts","../../src/components/password-input/password-input.tsx"],"sourcesContent":["/**\n * Pre-compiled en messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Hide password`, show: `Show password` };\n","/**\n * Pre-compiled de messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Passwort ausblenden`, show: `Passwort anzeigen` };\n","/**\n * Pre-compiled es messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Ocultar contraseña`, show: `Mostrar contraseña` };\n","/**\n * Pre-compiled fr-FR messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n hide: `Masquer le mot de passe`,\n show: `Afficher le mot de passe`,\n};\n","/**\n * Pre-compiled pt-BR messages for PasswordInput\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { hide: `Ocultar senha`, show: `Mostrar senha` };\n","/**\n * Pre-compiled localized messages for PasswordInput component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n type LocalizedString,\n type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport passwordInputMessages_en from \"./intl/en\";\nimport passwordInputMessages_de from \"./intl/de\";\nimport passwordInputMessages_es from \"./intl/es\";\nimport passwordInputMessages_fr from \"./intl/fr-FR\";\nimport passwordInputMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const passwordInputMessagesStrings: LocalizedStrings<\n string,\n LocalizedString\n> = {\n en: normalizeMessages(passwordInputMessages_en),\n de: normalizeMessages(passwordInputMessages_de),\n es: normalizeMessages(passwordInputMessages_es),\n \"fr-FR\": normalizeMessages(passwordInputMessages_fr),\n \"pt-BR\": normalizeMessages(passwordInputMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for PasswordInput component\n */\nexport type PasswordInputMessageKey = \"hide\" | \"show\";\n","import { useState } from \"react\";\nimport { IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { passwordInputMessagesStrings } from \"./password-input.messages\";\n\n/**\n * # PasswordInput\n *\n * A password input is a text field that hides entered characters for secure password entry.\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/passwordinput}\n */\nexport const PasswordInput = (props: PasswordInputProps) => {\n const { ref, size = \"md\", isDisabled } = props;\n\n const msg = useLocalizedStringFormatter(passwordInputMessagesStrings);\n const [showPassword, setShowPassword] = useState(false);\n\n const toggleVisibility = () => setShowPassword(!showPassword);\n\n const currentLabel = msg.format(showPassword ? \"hide\" : \"show\");\n\n return (\n <TextInput\n ref={ref}\n {...props}\n trailingElement={\n <Tooltip.Root>\n <IconButton\n size={size === \"md\" ? \"xs\" : \"2xs\"}\n variant=\"ghost\"\n colorPalette=\"primary\"\n aria-label={currentLabel}\n onPress={toggleVisibility}\n isDisabled={isDisabled}\n >\n {showPassword ? <VisibilityOff /> : <Visibility />}\n </IconButton>\n <Tooltip.Content>{currentLabel}</Tooltip.Content>\n </Tooltip.Root>\n }\n type={showPassword ? \"text\" : \"password\"}\n />\n );\n};\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["passwordInputMessages_en","passwordInputMessages_de","passwordInputMessages_es","passwordInputMessages_fr","passwordInputMessages_pt","passwordInputMessagesStrings","normalizeMessages","PasswordInput","props","ref","size","isDisabled","msg","useLocalizedStringFormatter","showPassword","setShowPassword","useState","toggleVisibility","currentLabel","jsx","TextInput","jsxs","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":";;;;;;;AAMA,MAAAA,IAAe,EAAE,MAAM,iBAAiB,MAAM,gBAAA,GCA9CC,IAAe,EAAE,MAAM,uBAAuB,MAAM,oBAAA,GCApDC,IAAe,EAAE,MAAM,sBAAsB,MAAM,qBAAA,GCAnDC,IAAe;AAAA,EACb,MAAM;AAAA,EACN,MAAM;AACR,GCHAC,IAAe,EAAE,MAAM,iBAAiB,MAAM,gBAAA,GCiBjCC,IAGT;AAAA,EACF,IAAI,gBAAAC,EAAkBN,CAAwB;AAAA,EAC9C,IAAI,gBAAAM,EAAkBL,CAAwB;AAAA,EAC9C,IAAI,gBAAAK,EAAkBJ,CAAwB;AAAA,EAC9C,SAAS,gBAAAI,EAAkBH,CAAwB;AAAA,EACnD,SAAS,gBAAAG,EAAkBF,CAAwB;AACrD,GCjBaG,IAAgB,CAACC,MAA8B;AAC1D,QAAM,EAAE,KAAAC,GAAK,MAAAC,IAAO,MAAM,YAAAC,MAAeH,GAEnCI,IAAMC,EAA4BR,CAA4B,GAC9D,CAACS,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAEhDC,IAAmB,MAAMF,EAAgB,CAACD,CAAY,GAEtDI,IAAeN,EAAI,OAAOE,IAAe,SAAS,MAAM;AAE9D,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAX;AAAA,MACC,GAAGD;AAAA,MACJ,iBACE,gBAAAa,EAACC,EAAQ,MAAR,EACC,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAMb,MAAS,OAAO,OAAO;AAAA,YAC7B,SAAQ;AAAA,YACR,cAAa;AAAA,YACb,cAAYQ;AAAA,YACZ,SAASD;AAAA,YACT,YAAAN;AAAA,YAEC,UAAAG,IAAe,gBAAAK,EAACK,GAAA,CAAA,CAAc,sBAAMC,GAAA,CAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,QAElD,gBAAAN,EAACG,EAAQ,SAAR,EAAiB,UAAAJ,EAAA,CAAa;AAAA,MAAA,GACjC;AAAA,MAEF,MAAMJ,IAAe,SAAS;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAP,EAAc,cAAc;"}
|
package/dist/chunks/{password-input-field-DdtPws7k.cjs.js → password-input-field-BFWRpbgq.cjs.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const s=require("react/jsx-runtime"),w=require("./password-input-
|
|
2
|
-
//# sourceMappingURL=password-input-field-
|
|
1
|
+
"use strict";const s=require("react/jsx-runtime"),w=require("./password-input-J-Y0lk1M.cjs.js"),e=require("./form-field-Duc1Eb8n.cjs.js"),q=require("./field-errors-C8G94e3K.cjs.js"),n=({id:t,label:a,description:l,info:o,errors:r,onChange:F,renderError:c,touched:u=!1,isRequired:m=!1,isDisabled:j=!1,isReadOnly:x=!1,isInvalid:p=!1,size:d="md",value:I,placeholder:f,...h})=>{const i=u&&r&&Object.values(r).some(Boolean);return s.jsxs(e.FormField.Root,{id:t,size:d,isRequired:m,isDisabled:j,isReadOnly:x,isInvalid:i||p,children:[s.jsx(e.FormField.Label,{children:a}),s.jsx(e.FormField.Input,{children:s.jsx(w.PasswordInput,{...h,size:d,placeholder:f,onChange:F,value:I})}),l&&s.jsx(e.FormField.Description,{children:l}),i&&s.jsx(e.FormField.Error,{children:s.jsx(q.FieldErrors,{errors:r,renderError:c})}),o&&s.jsx(e.FormField.InfoBox,{children:o})]})};n.displayName="PasswordInputField";exports.PasswordInputField=n;
|
|
2
|
+
//# sourceMappingURL=password-input-field-BFWRpbgq.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input-field-
|
|
1
|
+
{"version":3,"file":"password-input-field-BFWRpbgq.cjs.js","sources":["../../src/patterns/fields/password-input-field/password-input-field.tsx"],"sourcesContent":["import { PasswordInput } from \"@/components/password-input/password-input\";\nimport type { PasswordInputFieldProps } from \"./password-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # PasswordInputField\n *\n * A pre-composed form field component that combines PasswordInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for password input use cases and serves\n * as a drop-in replacement for UI-Kit's PasswordField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <PasswordInputField\n * label=\"Password\"\n * description=\"Enter a secure password\"\n * placeholder=\"********\"\n * value={value}\n * onChange={setValue}\n * errors={{ missing: true }}\n * isRequired\n * />\n * ```\n */\n\nexport const PasswordInputField = ({\n id,\n label,\n description,\n info,\n errors,\n onChange,\n renderError,\n touched = false,\n isRequired = false,\n isDisabled = false,\n isReadOnly = false,\n isInvalid = false,\n size = \"md\",\n value,\n placeholder,\n ...rest\n}: PasswordInputFieldProps) => {\n // Determine if we should show errors\n const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n return (\n <FormField.Root\n id={id}\n size={size}\n isRequired={isRequired}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={hasErrors || isInvalid}\n >\n <FormField.Label>{label}</FormField.Label>\n <FormField.Input>\n <PasswordInput\n {...rest}\n size={size}\n placeholder={placeholder}\n onChange={onChange}\n value={value}\n />\n </FormField.Input>\n {description && (\n <FormField.Description>{description}</FormField.Description>\n )}\n {hasErrors && (\n <FormField.Error>\n <FieldErrors errors={errors} renderError={renderError} />\n </FormField.Error>\n )}\n {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n </FormField.Root>\n );\n};\n\nPasswordInputField.displayName = \"PasswordInputField\";\n"],"names":["PasswordInputField","id","label","description","info","errors","onChange","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","size","value","placeholder","rest","hasErrors","jsxs","FormField","jsx","PasswordInput","FieldErrors"],"mappings":"sLA4BaA,EAAqB,CAAC,CACjC,GAAAC,EACA,MAAAC,EACA,YAAAC,EACA,KAAAC,EACA,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,KAAAC,EAAO,KACP,MAAAC,EACA,YAAAC,EACA,GAAGC,CACL,IAA+B,CAE7B,MAAMC,EAAYT,GAAWH,GAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO,EAEzE,OACEa,EAAAA,KAACC,EAAAA,UAAU,KAAV,CACC,GAAAlB,EACA,KAAAY,EACA,WAAAJ,EACA,WAAAC,EACA,WAAAC,EACA,UAAWM,GAAaL,EAExB,SAAA,CAAAQ,EAAAA,IAACD,EAAAA,UAAU,MAAV,CAAiB,SAAAjB,CAAA,CAAM,EACxBkB,EAAAA,IAACD,EAAAA,UAAU,MAAV,CACC,SAAAC,EAAAA,IAACC,EAAAA,cAAA,CACE,GAAGL,EACJ,KAAAH,EACA,YAAAE,EACA,SAAAT,EACA,MAAAQ,CAAA,CAAA,EAEJ,EACCX,GACCiB,EAAAA,IAACD,EAAAA,UAAU,YAAV,CAAuB,SAAAhB,EAAY,EAErCc,SACEE,YAAU,MAAV,CACC,SAAAC,MAACE,EAAAA,YAAA,CAAY,OAAAjB,EAAgB,YAAAE,CAAA,CAA0B,CAAA,CACzD,EAEDH,GAAQgB,EAAAA,IAACD,EAAAA,UAAU,QAAV,CAAmB,SAAAf,CAAA,CAAK,CAAA,CAAA,CAAA,CAGxC,EAEAJ,EAAmB,YAAc"}
|
package/dist/chunks/{password-input-field-UuhEOVc7.es.js → password-input-field-BdA4Wbh7.es.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as x, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { P as j } from "./password-input-
|
|
2
|
+
import { P as j } from "./password-input-UA-zLSLA.es.js";
|
|
3
3
|
import { F as s } from "./form-field-BAaKrrLV.es.js";
|
|
4
4
|
import { a as w } from "./field-errors-DYvB-OZF.es.js";
|
|
5
5
|
const E = ({
|
|
@@ -53,4 +53,4 @@ E.displayName = "PasswordInputField";
|
|
|
53
53
|
export {
|
|
54
54
|
E as P
|
|
55
55
|
};
|
|
56
|
-
//# sourceMappingURL=password-input-field-
|
|
56
|
+
//# sourceMappingURL=password-input-field-BdA4Wbh7.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-input-field-
|
|
1
|
+
{"version":3,"file":"password-input-field-BdA4Wbh7.es.js","sources":["../../src/patterns/fields/password-input-field/password-input-field.tsx"],"sourcesContent":["import { PasswordInput } from \"@/components/password-input/password-input\";\nimport type { PasswordInputFieldProps } from \"./password-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # PasswordInputField\n *\n * A pre-composed form field component that combines PasswordInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for password input use cases and serves\n * as a drop-in replacement for UI-Kit's PasswordField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <PasswordInputField\n * label=\"Password\"\n * description=\"Enter a secure password\"\n * placeholder=\"********\"\n * value={value}\n * onChange={setValue}\n * errors={{ missing: true }}\n * isRequired\n * />\n * ```\n */\n\nexport const PasswordInputField = ({\n id,\n label,\n description,\n info,\n errors,\n onChange,\n renderError,\n touched = false,\n isRequired = false,\n isDisabled = false,\n isReadOnly = false,\n isInvalid = false,\n size = \"md\",\n value,\n placeholder,\n ...rest\n}: PasswordInputFieldProps) => {\n // Determine if we should show errors\n const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n return (\n <FormField.Root\n id={id}\n size={size}\n isRequired={isRequired}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={hasErrors || isInvalid}\n >\n <FormField.Label>{label}</FormField.Label>\n <FormField.Input>\n <PasswordInput\n {...rest}\n size={size}\n placeholder={placeholder}\n onChange={onChange}\n value={value}\n />\n </FormField.Input>\n {description && (\n <FormField.Description>{description}</FormField.Description>\n )}\n {hasErrors && (\n <FormField.Error>\n <FieldErrors errors={errors} renderError={renderError} />\n </FormField.Error>\n )}\n {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n </FormField.Root>\n );\n};\n\nPasswordInputField.displayName = \"PasswordInputField\";\n"],"names":["PasswordInputField","id","label","description","info","errors","onChange","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","size","value","placeholder","rest","hasErrors","jsxs","FormField","jsx","PasswordInput","FieldErrors"],"mappings":";;;;AA4BO,MAAMA,IAAqB,CAAC;AAAA,EACjC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAA+B;AAE7B,QAAMC,IAAYT,KAAWH,KAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO;AAEzE,SACE,gBAAAa;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,IAAAlB;AAAA,MACA,MAAAY;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,WAAWM,KAAaL;AAAA,MAExB,UAAA;AAAA,QAAA,gBAAAQ,EAACD,EAAU,OAAV,EAAiB,UAAAjB,EAAA,CAAM;AAAA,QACxB,gBAAAkB,EAACD,EAAU,OAAV,EACC,UAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGL;AAAA,YACJ,MAAAH;AAAA,YACA,aAAAE;AAAA,YACA,UAAAT;AAAA,YACA,OAAAQ;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACCX,KACC,gBAAAiB,EAACD,EAAU,aAAV,EAAuB,UAAAhB,GAAY;AAAA,QAErCc,uBACEE,EAAU,OAAV,EACC,UAAA,gBAAAC,EAACE,GAAA,EAAY,QAAAjB,GAAgB,aAAAE,EAAA,CAA0B,EAAA,CACzD;AAAA,QAEDH,KAAQ,gBAAAgB,EAACD,EAAU,SAAV,EAAmB,UAAAf,EAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxC;AAEAJ,EAAmB,cAAc;"}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsx as t, jsxs as E } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as u, useMemo as y, useEffect as C } from "react";
|
|
3
3
|
import { createSlotRecipeContext as S, mergeRefs as O } from "@chakra-ui/react";
|
|
4
4
|
import { useSlotRecipe as k } from "@chakra-ui/react/styled-system";
|
|
5
5
|
import { c as q } from "./utils-DtvkSiIX.es.js";
|
|
6
|
-
import { $ as
|
|
6
|
+
import { $ as n, a as j } from "./Input-CuunJByD.es.js";
|
|
7
7
|
import { e as w } from "./extract-style-props-jefkSR4f.es.js";
|
|
8
8
|
import { t as L } from "./index-M22cGCuy.es.js";
|
|
9
9
|
import { $ as N } from "./useObjectRef-CaJ5pgjX.es.js";
|
|
10
10
|
import { a as D } from "./mergeProps-CP2fi9RL.es.js";
|
|
11
11
|
import { $ as z } from "./useTextField-B1RNQAQX.es.js";
|
|
12
|
-
const { withProvider: F, withContext:
|
|
12
|
+
const { withProvider: F, withContext: a } = /* @__PURE__ */ S({
|
|
13
13
|
key: "nimbusTextInput"
|
|
14
|
-
}), M = /* @__PURE__ */ F("div", "root"), V = /* @__PURE__ */
|
|
14
|
+
}), M = /* @__PURE__ */ F("div", "root"), V = /* @__PURE__ */ a(
|
|
15
15
|
"div",
|
|
16
16
|
"leadingElement"
|
|
17
|
-
), A = /* @__PURE__ */
|
|
17
|
+
), A = /* @__PURE__ */ a("input", "input"), B = /* @__PURE__ */ a(
|
|
18
18
|
"div",
|
|
19
19
|
"trailingElement"
|
|
20
|
-
), m = (
|
|
20
|
+
), m = (s) => {
|
|
21
21
|
const {
|
|
22
|
-
leadingElement:
|
|
23
|
-
trailingElement:
|
|
22
|
+
leadingElement: d,
|
|
23
|
+
trailingElement: l,
|
|
24
24
|
ref: x,
|
|
25
|
-
|
|
26
|
-
} =
|
|
27
|
-
|
|
28
|
-
),
|
|
25
|
+
...v
|
|
26
|
+
} = s, $ = k({ recipe: L }), [b, R] = $.splitVariantProps(v), i = u(null), r = u(null), c = N(O(r, x)), [I, P] = w(R), e = q(
|
|
27
|
+
n
|
|
28
|
+
), g = y(
|
|
29
29
|
() => ({
|
|
30
30
|
...e,
|
|
31
31
|
isDisabled: e?.isDisabled ?? e?.disabled,
|
|
@@ -38,41 +38,41 @@ const { withProvider: F, withContext: n } = /* @__PURE__ */ S({
|
|
|
38
38
|
readOnly: void 0
|
|
39
39
|
}),
|
|
40
40
|
[e]
|
|
41
|
-
),
|
|
42
|
-
|
|
41
|
+
), h = D(g, P), { inputProps: o } = z(
|
|
42
|
+
h,
|
|
43
43
|
c
|
|
44
|
-
),
|
|
44
|
+
), T = {
|
|
45
45
|
"data-disabled": o.disabled ? "true" : void 0,
|
|
46
46
|
"data-invalid": o["aria-invalid"] ? "true" : "false"
|
|
47
47
|
};
|
|
48
48
|
return C(() => {
|
|
49
|
-
const
|
|
50
|
-
i.current && i.current.contains(
|
|
49
|
+
const p = (f) => {
|
|
50
|
+
i.current && i.current.contains(f.target) && r.current && f.target !== r.current && r.current.focus();
|
|
51
51
|
};
|
|
52
|
-
return document.addEventListener("click",
|
|
53
|
-
document.removeEventListener("click",
|
|
52
|
+
return document.addEventListener("click", p), () => {
|
|
53
|
+
document.removeEventListener("click", p);
|
|
54
54
|
};
|
|
55
|
-
}, []), /* @__PURE__ */ E(
|
|
55
|
+
}, []), /* @__PURE__ */ t(n.Provider, { value: null, children: /* @__PURE__ */ E(
|
|
56
56
|
M,
|
|
57
57
|
{
|
|
58
58
|
ref: i,
|
|
59
|
-
className:
|
|
59
|
+
className: s?.className,
|
|
60
60
|
...b,
|
|
61
61
|
...I,
|
|
62
|
-
...
|
|
62
|
+
...T,
|
|
63
63
|
children: [
|
|
64
|
-
|
|
65
|
-
/* @__PURE__ */
|
|
66
|
-
|
|
64
|
+
d && /* @__PURE__ */ t(V, { children: d }),
|
|
65
|
+
/* @__PURE__ */ t(A, { asChild: !0, children: /* @__PURE__ */ t(j, { ref: c, ...o }) }),
|
|
66
|
+
l && /* @__PURE__ */ t(B, { children: l })
|
|
67
67
|
]
|
|
68
68
|
}
|
|
69
|
-
);
|
|
69
|
+
) });
|
|
70
70
|
};
|
|
71
71
|
m.displayName = "TextInput";
|
|
72
72
|
const ee = /* @__PURE__ */ Object.assign(m, {
|
|
73
|
-
Context:
|
|
73
|
+
Context: n
|
|
74
74
|
});
|
|
75
75
|
export {
|
|
76
76
|
ee as T
|
|
77
77
|
};
|
|
78
|
-
//# sourceMappingURL=text-input-
|
|
78
|
+
//# sourceMappingURL=text-input-0_e7m90A.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-DzwmIuAk.es.js","sources":["../../src/components/text-input/text-input.slots.tsx","../../src/components/text-input/text-input.tsx"],"sourcesContent":["import { createSlotRecipeContext } from \"@chakra-ui/react\";\nimport type { SlotComponent } from \"@/type-utils\";\nimport type {\n TextInputRootSlotProps,\n TextInputLeadingElementSlotProps,\n TextInputInputSlotProps,\n TextInputTrailingElementSlotProps,\n} from \"./text-input.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusTextInput\",\n});\n\nexport const TextInputRootSlot: SlotComponent<\n HTMLDivElement,\n TextInputRootSlotProps\n> = withProvider<HTMLDivElement, TextInputRootSlotProps>(\"div\", \"root\");\n\nexport const TextInputLeadingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputLeadingElementSlotProps\n> = withContext<HTMLDivElement, TextInputLeadingElementSlotProps>(\n \"div\",\n \"leadingElement\"\n);\n\nexport const TextInputInputSlot: SlotComponent<\n HTMLInputElement,\n TextInputInputSlotProps\n> = withContext<HTMLInputElement, TextInputInputSlotProps>(\"input\", \"input\");\n\nexport const TextInputTrailingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputTrailingElementSlotProps\n> = withContext<HTMLDivElement, TextInputTrailingElementSlotProps>(\n \"div\",\n \"trailingElement\"\n);\n","import { useEffect, useMemo, useRef, type Context } from \"react\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport {\n useObjectRef,\n useTextField,\n type AriaTextFieldOptions,\n mergeProps,\n} from \"react-aria\";\nimport { Input, InputContext, useSlottedContext } from \"react-aria-components\";\nimport { extractStyleProps } from \"@/utils\";\nimport { textInputSlotRecipe } from \"./text-input.recipe\";\nimport {\n TextInputRootSlot,\n TextInputLeadingElementSlot,\n TextInputInputSlot,\n TextInputTrailingElementSlot,\n} from \"./text-input.slots\";\nimport type { TextInputProps, TextInputContextValue } from \"./text-input.types\";\n\nconst TextInputComponent = (props: TextInputProps) => {\n const {\n leadingElement,\n trailingElement,\n ref: forwardedRef,\n ...restProps\n } = props;\n\n const recipe = useSlotRecipe({ recipe: textInputSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(restProps);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const localRef = useRef<HTMLInputElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n /**\n * Consume InputContext to support TextInput as a child of React Aria components\n * (e.g., TextField, SearchField, Form). useSlottedContext respects the `slot`\n * prop for proper nesting. Context may contain either React Aria props or DOM\n * attributes depending on the parent component.\n *\n * Note: We use useSlottedContext (not useContextProps) to read context and\n * manually normalize DOM attributes → React Aria props, ensuring type safety\n * with TextInputContextValue and support for both prop styles from parents.\n */\n const inputContext = useSlottedContext(\n InputContext\n ) as TextInputContextValue | null;\n\n /**\n * Normalize context props: convert any DOM attributes (disabled, required)\n * to React Aria props (isDisabled, isRequired) since React Aria's useTextField\n * hook expects the latter. Remove DOM attributes to prevent React warnings.\n */\n const normalizedInputContext = useMemo(\n () => ({\n ...inputContext,\n isDisabled: inputContext?.isDisabled ?? inputContext?.disabled,\n isRequired: inputContext?.isRequired ?? inputContext?.required,\n isReadOnly: inputContext?.isReadOnly ?? inputContext?.readOnly,\n // Explicit boolean coercion for aria-invalid: \"false\" string is truthy!\n isInvalid:\n inputContext?.isInvalid ??\n (inputContext?.[\"aria-invalid\"] === true ||\n inputContext?.[\"aria-invalid\"] === \"true\"\n ? true\n : inputContext?.[\"aria-invalid\"] === false ||\n inputContext?.[\"aria-invalid\"] === \"false\"\n ? false\n : undefined),\n disabled: undefined,\n required: undefined,\n readOnly: undefined,\n }),\n [inputContext]\n );\n\n // Merge context with component props (component props take precedence)\n const inputFieldProps = mergeProps(normalizedInputContext, otherProps);\n\n /**\n * useTextField converts React Aria props to DOM attributes with proper ARIA\n * annotations (isDisabled → disabled, isRequired → aria-required, etc.)\n */\n const { inputProps } = useTextField(\n inputFieldProps as AriaTextFieldOptions<\"input\">,\n ref\n );\n\n const stateProps = {\n \"data-disabled\": inputProps.disabled ? \"true\" : undefined,\n \"data-invalid\": inputProps[\"aria-invalid\"] ? \"true\" : \"false\",\n };\n\n // Using a useEffect instead of \"onClick\" on the element, to preserve\n // the `onClick` prop for consumers.\n useEffect(() => {\n const handleRootClick = (event: MouseEvent) => {\n // Only focus if the click is inside the root element,\n // not on the input itself, and not on an interactive element\n if (\n rootRef.current &&\n rootRef.current.contains(event.target as Node) &&\n localRef.current &&\n event.target !== localRef.current\n ) {\n localRef.current.focus();\n }\n };\n document.addEventListener(\"click\", handleRootClick);\n return () => {\n document.removeEventListener(\"click\", handleRootClick);\n };\n }, []);\n\n return (\n <TextInputRootSlot\n ref={rootRef}\n className={props?.className as string}\n {...recipeProps}\n {...styleProps}\n {...stateProps}\n >\n {leadingElement && (\n <TextInputLeadingElementSlot>\n {leadingElement}\n </TextInputLeadingElementSlot>\n )}\n <TextInputInputSlot asChild>\n <Input ref={ref} {...inputProps} />\n </TextInputInputSlot>\n {trailingElement && (\n <TextInputTrailingElementSlot>\n {trailingElement}\n </TextInputTrailingElementSlot>\n )}\n </TextInputRootSlot>\n );\n};\n\nTextInputComponent.displayName = \"TextInput\";\n\n/**\n * ### TextInput\n *\n * An input component that takes in text as input\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/textinput}\n */\nexport const TextInput: typeof TextInputComponent & {\n // TypeScript can't properly name the internal React Aria types when inferring\n // TextInput.Context, so we explicitly type it using typeof and Object.assign\n /**\n * ### TextInput.Context\n *\n * Re-exports React-Aria's `InputContext` with extended type support\n *\n * Accepts both React Aria props (isDisabled, isRequired, etc.) and\n * DOM attributes (disabled, required, etc.) for maximum flexibility.\n *\n * For advanced use cases, **you generally will not need this**\n *\n * @see {@link https://react-spectrum.adobe.com/react-aria/advanced.html#contexts}\n * @see {@link https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children}\n */\n Context: Context<TextInputContextValue | null>;\n} = Object.assign(TextInputComponent, {\n Context: InputContext as Context<TextInputContextValue | null>,\n});\n"],"names":["withProvider","withContext","createSlotRecipeContext","TextInputRootSlot","TextInputLeadingElementSlot","TextInputInputSlot","TextInputTrailingElementSlot","TextInputComponent","props","leadingElement","trailingElement","forwardedRef","restProps","recipe","useSlotRecipe","textInputSlotRecipe","recipeProps","remainingProps","rootRef","useRef","localRef","ref","useObjectRef","mergeRefs","styleProps","otherProps","extractStyleProps","inputContext","useSlottedContext","InputContext","normalizedInputContext","useMemo","inputFieldProps","mergeProps","inputProps","useTextField","stateProps","useEffect","handleRootClick","event","jsxs","jsx","Input","TextInput"],"mappings":";;;;;;;;;;;AASA,MAAM,EAAE,cAAAA,GAAc,aAAAC,EAAA,IAAgB,gBAAAC,EAAwB;AAAA,EAC5D,KAAK;AACP,CAAC,GAEYC,IAGT,gBAAAH,EAAqD,OAAO,MAAM,GAEzDI,IAGT,gBAAAH;AAAA,EACF;AAAA,EACA;AACF,GAEaI,IAGT,gBAAAJ,EAAuD,SAAS,OAAO,GAE9DK,IAGT,gBAAAL;AAAA,EACF;AAAA,EACA;AACF,GCjBMM,IAAqB,CAACC,MAA0B;AACpD,QAAM;AAAA,IACJ,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,KAAKC;AAAA,IACL,GAAGC;AAAA,EAAA,IACDJ,GAEEK,IAASC,EAAc,EAAE,QAAQC,GAAqB,GACtD,CAACC,GAAaC,CAAc,IAAIJ,EAAO,kBAAkBD,CAAS,GAElEM,IAAUC,EAAuB,IAAI,GACrCC,IAAWD,EAAyB,IAAI,GACxCE,IAAMC,EAAaC,EAAUH,GAAUT,CAAY,CAAC,GAEpD,CAACa,GAAYC,CAAU,IAAIC,EAAkBT,CAAc,GAY3DU,IAAeC;AAAAA,IACnBC;AAAAA,EAAA,GAQIC,IAAyBC;AAAA,IAC7B,OAAO;AAAA,MACL,GAAGJ;AAAA,MACH,YAAYA,GAAc,cAAcA,GAAc;AAAA,MACtD,YAAYA,GAAc,cAAcA,GAAc;AAAA,MACtD,YAAYA,GAAc,cAAcA,GAAc;AAAA;AAAA,MAEtD,WACEA,GAAc,cACbA,IAAe,cAAc,MAAM,MACpCA,IAAe,cAAc,MAAM,SAC/B,KACAA,IAAe,cAAc,MAAM,MACjCA,IAAe,cAAc,MAAM,UACnC,KACA;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAY;AAAA,EAAA,GAITK,IAAkBC,EAAWH,GAAwBL,CAAU,GAM/D,EAAE,YAAAS,MAAeC;AAAAA,IACrBH;AAAA,IACAX;AAAA,EAAA,GAGIe,IAAa;AAAA,IACjB,iBAAiBF,EAAW,WAAW,SAAS;AAAA,IAChD,gBAAgBA,EAAW,cAAc,IAAI,SAAS;AAAA,EAAA;AAKxD,SAAAG,EAAU,MAAM;AACd,UAAMC,IAAkB,CAACC,MAAsB;AAG7C,MACErB,EAAQ,WACRA,EAAQ,QAAQ,SAASqB,EAAM,MAAc,KAC7CnB,EAAS,WACTmB,EAAM,WAAWnB,EAAS,WAE1BA,EAAS,QAAQ,MAAA;AAAA,IAErB;AACA,oBAAS,iBAAiB,SAASkB,CAAe,GAC3C,MAAM;AACX,eAAS,oBAAoB,SAASA,CAAe;AAAA,IACvD;AAAA,EACF,GAAG,CAAA,CAAE,GAGH,gBAAAE;AAAA,IAACrC;AAAA,IAAA;AAAA,MACC,KAAKe;AAAA,MACL,WAAWV,GAAO;AAAA,MACjB,GAAGQ;AAAA,MACH,GAAGQ;AAAA,MACH,GAAGY;AAAA,MAEH,UAAA;AAAA,QAAA3B,KACC,gBAAAgC,EAACrC,KACE,UAAAK,EAAA,CACH;AAAA,QAEF,gBAAAgC,EAACpC,KAAmB,SAAO,IACzB,4BAACqC,GAAA,EAAM,KAAArB,GAAW,GAAGa,EAAA,CAAY,EAAA,CACnC;AAAA,QACCxB,KACC,gBAAA+B,EAACnC,GAAA,EACE,UAAAI,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAH,EAAmB,cAAc;AAS1B,MAAMoC,KAiBT,uBAAO,OAAOpC,GAAoB;AAAA,EACpC,SAASsB;AACX,CAAC;"}
|
|
1
|
+
{"version":3,"file":"text-input-0_e7m90A.es.js","sources":["../../src/components/text-input/text-input.slots.tsx","../../src/components/text-input/text-input.tsx"],"sourcesContent":["import { createSlotRecipeContext } from \"@chakra-ui/react\";\nimport type { SlotComponent } from \"@/type-utils\";\nimport type {\n TextInputRootSlotProps,\n TextInputLeadingElementSlotProps,\n TextInputInputSlotProps,\n TextInputTrailingElementSlotProps,\n} from \"./text-input.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusTextInput\",\n});\n\nexport const TextInputRootSlot: SlotComponent<\n HTMLDivElement,\n TextInputRootSlotProps\n> = withProvider<HTMLDivElement, TextInputRootSlotProps>(\"div\", \"root\");\n\nexport const TextInputLeadingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputLeadingElementSlotProps\n> = withContext<HTMLDivElement, TextInputLeadingElementSlotProps>(\n \"div\",\n \"leadingElement\"\n);\n\nexport const TextInputInputSlot: SlotComponent<\n HTMLInputElement,\n TextInputInputSlotProps\n> = withContext<HTMLInputElement, TextInputInputSlotProps>(\"input\", \"input\");\n\nexport const TextInputTrailingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputTrailingElementSlotProps\n> = withContext<HTMLDivElement, TextInputTrailingElementSlotProps>(\n \"div\",\n \"trailingElement\"\n);\n","import { useEffect, useMemo, useRef, type Context } from \"react\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport {\n useObjectRef,\n useTextField,\n type AriaTextFieldOptions,\n mergeProps,\n} from \"react-aria\";\nimport { Input, InputContext, useSlottedContext } from \"react-aria-components\";\nimport { extractStyleProps } from \"@/utils\";\nimport { textInputSlotRecipe } from \"./text-input.recipe\";\nimport {\n TextInputRootSlot,\n TextInputLeadingElementSlot,\n TextInputInputSlot,\n TextInputTrailingElementSlot,\n} from \"./text-input.slots\";\nimport type { TextInputProps, TextInputContextValue } from \"./text-input.types\";\n\nconst TextInputComponent = (props: TextInputProps) => {\n const {\n leadingElement,\n trailingElement,\n ref: forwardedRef,\n ...restProps\n } = props;\n\n const recipe = useSlotRecipe({ recipe: textInputSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(restProps);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const localRef = useRef<HTMLInputElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n /**\n * Consume InputContext to support TextInput as a child of React Aria components\n * (e.g., TextField, SearchField, Form). useSlottedContext respects the `slot`\n * prop for proper nesting. Context may contain either React Aria props or DOM\n * attributes depending on the parent component.\n *\n * Note: We use useSlottedContext (not useContextProps) to read context and\n * manually normalize DOM attributes → React Aria props, ensuring type safety\n * with TextInputContextValue and support for both prop styles from parents.\n */\n const inputContext = useSlottedContext(\n InputContext\n ) as TextInputContextValue | null;\n\n /**\n * Normalize context props: convert any DOM attributes (disabled, required)\n * to React Aria props (isDisabled, isRequired) since React Aria's useTextField\n * hook expects the latter. Remove DOM attributes to prevent React warnings.\n */\n const normalizedInputContext = useMemo(\n () => ({\n ...inputContext,\n isDisabled: inputContext?.isDisabled ?? inputContext?.disabled,\n isRequired: inputContext?.isRequired ?? inputContext?.required,\n isReadOnly: inputContext?.isReadOnly ?? inputContext?.readOnly,\n // Explicit boolean coercion for aria-invalid: \"false\" string is truthy!\n isInvalid:\n inputContext?.isInvalid ??\n (inputContext?.[\"aria-invalid\"] === true ||\n inputContext?.[\"aria-invalid\"] === \"true\"\n ? true\n : inputContext?.[\"aria-invalid\"] === false ||\n inputContext?.[\"aria-invalid\"] === \"false\"\n ? false\n : undefined),\n disabled: undefined,\n required: undefined,\n readOnly: undefined,\n }),\n [inputContext]\n );\n\n // Merge context with component props (component props take precedence)\n const inputFieldProps = mergeProps(normalizedInputContext, otherProps);\n\n /**\n * useTextField converts React Aria props to DOM attributes with proper ARIA\n * annotations (isDisabled → disabled, isRequired → aria-required, etc.)\n */\n const { inputProps } = useTextField(\n inputFieldProps as AriaTextFieldOptions<\"input\">,\n ref\n );\n\n const stateProps = {\n \"data-disabled\": inputProps.disabled ? \"true\" : undefined,\n \"data-invalid\": inputProps[\"aria-invalid\"] ? \"true\" : \"false\",\n };\n\n // Using a useEffect instead of \"onClick\" on the element, to preserve\n // the `onClick` prop for consumers.\n useEffect(() => {\n const handleRootClick = (event: MouseEvent) => {\n // Only focus if the click is inside the root element,\n // not on the input itself, and not on an interactive element\n if (\n rootRef.current &&\n rootRef.current.contains(event.target as Node) &&\n localRef.current &&\n event.target !== localRef.current\n ) {\n localRef.current.focus();\n }\n };\n document.addEventListener(\"click\", handleRootClick);\n return () => {\n document.removeEventListener(\"click\", handleRootClick);\n };\n }, []);\n\n return (\n <InputContext.Provider value={null}>\n <TextInputRootSlot\n ref={rootRef}\n className={props?.className as string}\n {...recipeProps}\n {...styleProps}\n {...stateProps}\n >\n {leadingElement && (\n <TextInputLeadingElementSlot>\n {leadingElement}\n </TextInputLeadingElementSlot>\n )}\n <TextInputInputSlot asChild>\n <Input ref={ref} {...inputProps} />\n </TextInputInputSlot>\n {trailingElement && (\n <TextInputTrailingElementSlot>\n {trailingElement}\n </TextInputTrailingElementSlot>\n )}\n </TextInputRootSlot>\n </InputContext.Provider>\n );\n};\n\nTextInputComponent.displayName = \"TextInput\";\n\n/**\n * ### TextInput\n *\n * An input component that takes in text as input\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/textinput}\n */\nexport const TextInput: typeof TextInputComponent & {\n // TypeScript can't properly name the internal React Aria types when inferring\n // TextInput.Context, so we explicitly type it using typeof and Object.assign\n /**\n * ### TextInput.Context\n *\n * Re-exports React-Aria's `InputContext` with extended type support\n *\n * Accepts both React Aria props (isDisabled, isRequired, etc.) and\n * DOM attributes (disabled, required, etc.) for maximum flexibility.\n *\n * For advanced use cases, **you generally will not need this**\n *\n * @see {@link https://react-spectrum.adobe.com/react-aria/advanced.html#contexts}\n * @see {@link https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children}\n */\n Context: Context<TextInputContextValue | null>;\n} = Object.assign(TextInputComponent, {\n Context: InputContext as Context<TextInputContextValue | null>,\n});\n"],"names":["withProvider","withContext","createSlotRecipeContext","TextInputRootSlot","TextInputLeadingElementSlot","TextInputInputSlot","TextInputTrailingElementSlot","TextInputComponent","props","leadingElement","trailingElement","forwardedRef","restProps","recipe","useSlotRecipe","textInputSlotRecipe","recipeProps","remainingProps","rootRef","useRef","localRef","ref","useObjectRef","mergeRefs","styleProps","otherProps","extractStyleProps","inputContext","useSlottedContext","InputContext","normalizedInputContext","useMemo","inputFieldProps","mergeProps","inputProps","useTextField","stateProps","useEffect","handleRootClick","event","jsx","jsxs","Input","TextInput"],"mappings":";;;;;;;;;;;AASA,MAAM,EAAE,cAAAA,GAAc,aAAAC,EAAA,IAAgB,gBAAAC,EAAwB;AAAA,EAC5D,KAAK;AACP,CAAC,GAEYC,IAGT,gBAAAH,EAAqD,OAAO,MAAM,GAEzDI,IAGT,gBAAAH;AAAA,EACF;AAAA,EACA;AACF,GAEaI,IAGT,gBAAAJ,EAAuD,SAAS,OAAO,GAE9DK,IAGT,gBAAAL;AAAA,EACF;AAAA,EACA;AACF,GCjBMM,IAAqB,CAACC,MAA0B;AACpD,QAAM;AAAA,IACJ,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,KAAKC;AAAA,IACL,GAAGC;AAAA,EAAA,IACDJ,GAEEK,IAASC,EAAc,EAAE,QAAQC,GAAqB,GACtD,CAACC,GAAaC,CAAc,IAAIJ,EAAO,kBAAkBD,CAAS,GAElEM,IAAUC,EAAuB,IAAI,GACrCC,IAAWD,EAAyB,IAAI,GACxCE,IAAMC,EAAaC,EAAUH,GAAUT,CAAY,CAAC,GAEpD,CAACa,GAAYC,CAAU,IAAIC,EAAkBT,CAAc,GAY3DU,IAAeC;AAAAA,IACnBC;AAAAA,EAAA,GAQIC,IAAyBC;AAAA,IAC7B,OAAO;AAAA,MACL,GAAGJ;AAAA,MACH,YAAYA,GAAc,cAAcA,GAAc;AAAA,MACtD,YAAYA,GAAc,cAAcA,GAAc;AAAA,MACtD,YAAYA,GAAc,cAAcA,GAAc;AAAA;AAAA,MAEtD,WACEA,GAAc,cACbA,IAAe,cAAc,MAAM,MACpCA,IAAe,cAAc,MAAM,SAC/B,KACAA,IAAe,cAAc,MAAM,MACjCA,IAAe,cAAc,MAAM,UACnC,KACA;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAY;AAAA,EAAA,GAITK,IAAkBC,EAAWH,GAAwBL,CAAU,GAM/D,EAAE,YAAAS,MAAeC;AAAAA,IACrBH;AAAA,IACAX;AAAA,EAAA,GAGIe,IAAa;AAAA,IACjB,iBAAiBF,EAAW,WAAW,SAAS;AAAA,IAChD,gBAAgBA,EAAW,cAAc,IAAI,SAAS;AAAA,EAAA;AAKxD,SAAAG,EAAU,MAAM;AACd,UAAMC,IAAkB,CAACC,MAAsB;AAG7C,MACErB,EAAQ,WACRA,EAAQ,QAAQ,SAASqB,EAAM,MAAc,KAC7CnB,EAAS,WACTmB,EAAM,WAAWnB,EAAS,WAE1BA,EAAS,QAAQ,MAAA;AAAA,IAErB;AACA,oBAAS,iBAAiB,SAASkB,CAAe,GAC3C,MAAM;AACX,eAAS,oBAAoB,SAASA,CAAe;AAAA,IACvD;AAAA,EACF,GAAG,CAAA,CAAE,GAGH,gBAAAE,EAACX,EAAa,UAAb,EAAsB,OAAO,MAC5B,UAAA,gBAAAY;AAAA,IAACtC;AAAA,IAAA;AAAA,MACC,KAAKe;AAAA,MACL,WAAWV,GAAO;AAAA,MACjB,GAAGQ;AAAA,MACH,GAAGQ;AAAA,MACH,GAAGY;AAAA,MAEH,UAAA;AAAA,QAAA3B,KACC,gBAAA+B,EAACpC,KACE,UAAAK,EAAA,CACH;AAAA,QAEF,gBAAA+B,EAACnC,KAAmB,SAAO,IACzB,4BAACqC,GAAA,EAAM,KAAArB,GAAW,GAAGa,EAAA,CAAY,EAAA,CACnC;AAAA,QACCxB,KACC,gBAAA8B,EAAClC,GAAA,EACE,UAAAI,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;AAEAH,EAAmB,cAAc;AAS1B,MAAMoC,KAiBT,uBAAO,OAAOpC,GAAoB;AAAA,EACpC,SAASsB;AACX,CAAC;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const t=require("react/jsx-runtime"),n=require("react"),x=require("@chakra-ui/react"),T=require("@chakra-ui/react/styled-system"),h=require("./utils-BNYGVv6l.cjs.js"),i=require("./Input-vwFPIv-x.cjs.js"),j=require("./extract-style-props-Cgzzl5ll.cjs.js"),E=require("./index-ntBf0TCA.cjs.js"),C=require("./useObjectRef-4v2MxSjQ.cjs.js"),O=require("./mergeProps-DD8aR8go.cjs.js"),k=require("./useTextField-xUsOzG8r.cjs.js"),{withProvider:w,withContext:c}=x.createSlotRecipeContext({key:"nimbusTextInput"}),L=w("div","root"),N=c("div","leadingElement"),D=c("input","input"),F=c("div","trailingElement"),$=a=>{const{leadingElement:d,trailingElement:l,ref:b,...m}=a,v=T.useSlotRecipe({recipe:E.textInputSlotRecipe}),[R,q]=v.splitVariantProps(m),s=n.useRef(null),r=n.useRef(null),u=C.$df56164dff5785e2$export$4338b53315abf666(x.mergeRefs(r,b)),[I,P]=j.extractStyleProps(q),e=h.$64fa3d84918910a7$export$fabf2dc03a41866e(i.$3985021b0ad6602f$export$37fb8590cf2c088c),g=n.useMemo(()=>({...e,isDisabled:e?.isDisabled??e?.disabled,isRequired:e?.isRequired??e?.required,isReadOnly:e?.isReadOnly??e?.readOnly,isInvalid:e?.isInvalid??(e?.["aria-invalid"]===!0||e?.["aria-invalid"]==="true"?!0:e?.["aria-invalid"]===!1||e?.["aria-invalid"]==="false"?!1:void 0),disabled:void 0,required:void 0,readOnly:void 0}),[e]),y=O.$3ef42575df84b30b$export$9d1611c77c2fe928(g,P),{inputProps:o}=k.$2d73ec29415bd339$export$712718f7aec83d5(y,u),S={"data-disabled":o.disabled?"true":void 0,"data-invalid":o["aria-invalid"]?"true":"false"};return n.useEffect(()=>{const p=f=>{s.current&&s.current.contains(f.target)&&r.current&&f.target!==r.current&&r.current.focus()};return document.addEventListener("click",p),()=>{document.removeEventListener("click",p)}},[]),t.jsx(i.$3985021b0ad6602f$export$37fb8590cf2c088c.Provider,{value:null,children:t.jsxs(L,{ref:s,className:a?.className,...R,...I,...S,children:[d&&t.jsx(N,{children:d}),t.jsx(D,{asChild:!0,children:t.jsx(i.$3985021b0ad6602f$export$f5b8910cec6cf069,{ref:u,...o})}),l&&t.jsx(F,{children:l})]})})};$.displayName="TextInput";const z=Object.assign($,{Context:i.$3985021b0ad6602f$export$37fb8590cf2c088c});exports.TextInput=z;
|
|
2
|
+
//# sourceMappingURL=text-input-DMdKhA4s.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-Dukgyb5K.cjs.js","sources":["../../src/components/text-input/text-input.slots.tsx","../../src/components/text-input/text-input.tsx"],"sourcesContent":["import { createSlotRecipeContext } from \"@chakra-ui/react\";\nimport type { SlotComponent } from \"@/type-utils\";\nimport type {\n TextInputRootSlotProps,\n TextInputLeadingElementSlotProps,\n TextInputInputSlotProps,\n TextInputTrailingElementSlotProps,\n} from \"./text-input.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusTextInput\",\n});\n\nexport const TextInputRootSlot: SlotComponent<\n HTMLDivElement,\n TextInputRootSlotProps\n> = withProvider<HTMLDivElement, TextInputRootSlotProps>(\"div\", \"root\");\n\nexport const TextInputLeadingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputLeadingElementSlotProps\n> = withContext<HTMLDivElement, TextInputLeadingElementSlotProps>(\n \"div\",\n \"leadingElement\"\n);\n\nexport const TextInputInputSlot: SlotComponent<\n HTMLInputElement,\n TextInputInputSlotProps\n> = withContext<HTMLInputElement, TextInputInputSlotProps>(\"input\", \"input\");\n\nexport const TextInputTrailingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputTrailingElementSlotProps\n> = withContext<HTMLDivElement, TextInputTrailingElementSlotProps>(\n \"div\",\n \"trailingElement\"\n);\n","import { useEffect, useMemo, useRef, type Context } from \"react\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport {\n useObjectRef,\n useTextField,\n type AriaTextFieldOptions,\n mergeProps,\n} from \"react-aria\";\nimport { Input, InputContext, useSlottedContext } from \"react-aria-components\";\nimport { extractStyleProps } from \"@/utils\";\nimport { textInputSlotRecipe } from \"./text-input.recipe\";\nimport {\n TextInputRootSlot,\n TextInputLeadingElementSlot,\n TextInputInputSlot,\n TextInputTrailingElementSlot,\n} from \"./text-input.slots\";\nimport type { TextInputProps, TextInputContextValue } from \"./text-input.types\";\n\nconst TextInputComponent = (props: TextInputProps) => {\n const {\n leadingElement,\n trailingElement,\n ref: forwardedRef,\n ...restProps\n } = props;\n\n const recipe = useSlotRecipe({ recipe: textInputSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(restProps);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const localRef = useRef<HTMLInputElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n /**\n * Consume InputContext to support TextInput as a child of React Aria components\n * (e.g., TextField, SearchField, Form). useSlottedContext respects the `slot`\n * prop for proper nesting. Context may contain either React Aria props or DOM\n * attributes depending on the parent component.\n *\n * Note: We use useSlottedContext (not useContextProps) to read context and\n * manually normalize DOM attributes → React Aria props, ensuring type safety\n * with TextInputContextValue and support for both prop styles from parents.\n */\n const inputContext = useSlottedContext(\n InputContext\n ) as TextInputContextValue | null;\n\n /**\n * Normalize context props: convert any DOM attributes (disabled, required)\n * to React Aria props (isDisabled, isRequired) since React Aria's useTextField\n * hook expects the latter. Remove DOM attributes to prevent React warnings.\n */\n const normalizedInputContext = useMemo(\n () => ({\n ...inputContext,\n isDisabled: inputContext?.isDisabled ?? inputContext?.disabled,\n isRequired: inputContext?.isRequired ?? inputContext?.required,\n isReadOnly: inputContext?.isReadOnly ?? inputContext?.readOnly,\n // Explicit boolean coercion for aria-invalid: \"false\" string is truthy!\n isInvalid:\n inputContext?.isInvalid ??\n (inputContext?.[\"aria-invalid\"] === true ||\n inputContext?.[\"aria-invalid\"] === \"true\"\n ? true\n : inputContext?.[\"aria-invalid\"] === false ||\n inputContext?.[\"aria-invalid\"] === \"false\"\n ? false\n : undefined),\n disabled: undefined,\n required: undefined,\n readOnly: undefined,\n }),\n [inputContext]\n );\n\n // Merge context with component props (component props take precedence)\n const inputFieldProps = mergeProps(normalizedInputContext, otherProps);\n\n /**\n * useTextField converts React Aria props to DOM attributes with proper ARIA\n * annotations (isDisabled → disabled, isRequired → aria-required, etc.)\n */\n const { inputProps } = useTextField(\n inputFieldProps as AriaTextFieldOptions<\"input\">,\n ref\n );\n\n const stateProps = {\n \"data-disabled\": inputProps.disabled ? \"true\" : undefined,\n \"data-invalid\": inputProps[\"aria-invalid\"] ? \"true\" : \"false\",\n };\n\n // Using a useEffect instead of \"onClick\" on the element, to preserve\n // the `onClick` prop for consumers.\n useEffect(() => {\n const handleRootClick = (event: MouseEvent) => {\n // Only focus if the click is inside the root element,\n // not on the input itself, and not on an interactive element\n if (\n rootRef.current &&\n rootRef.current.contains(event.target as Node) &&\n localRef.current &&\n event.target !== localRef.current\n ) {\n localRef.current.focus();\n }\n };\n document.addEventListener(\"click\", handleRootClick);\n return () => {\n document.removeEventListener(\"click\", handleRootClick);\n };\n }, []);\n\n return (\n <TextInputRootSlot\n ref={rootRef}\n className={props?.className as string}\n {...recipeProps}\n {...styleProps}\n {...stateProps}\n >\n {leadingElement && (\n <TextInputLeadingElementSlot>\n {leadingElement}\n </TextInputLeadingElementSlot>\n )}\n <TextInputInputSlot asChild>\n <Input ref={ref} {...inputProps} />\n </TextInputInputSlot>\n {trailingElement && (\n <TextInputTrailingElementSlot>\n {trailingElement}\n </TextInputTrailingElementSlot>\n )}\n </TextInputRootSlot>\n );\n};\n\nTextInputComponent.displayName = \"TextInput\";\n\n/**\n * ### TextInput\n *\n * An input component that takes in text as input\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/textinput}\n */\nexport const TextInput: typeof TextInputComponent & {\n // TypeScript can't properly name the internal React Aria types when inferring\n // TextInput.Context, so we explicitly type it using typeof and Object.assign\n /**\n * ### TextInput.Context\n *\n * Re-exports React-Aria's `InputContext` with extended type support\n *\n * Accepts both React Aria props (isDisabled, isRequired, etc.) and\n * DOM attributes (disabled, required, etc.) for maximum flexibility.\n *\n * For advanced use cases, **you generally will not need this**\n *\n * @see {@link https://react-spectrum.adobe.com/react-aria/advanced.html#contexts}\n * @see {@link https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children}\n */\n Context: Context<TextInputContextValue | null>;\n} = Object.assign(TextInputComponent, {\n Context: InputContext as Context<TextInputContextValue | null>,\n});\n"],"names":["withProvider","withContext","createSlotRecipeContext","TextInputRootSlot","TextInputLeadingElementSlot","TextInputInputSlot","TextInputTrailingElementSlot","TextInputComponent","props","leadingElement","trailingElement","forwardedRef","restProps","recipe","useSlotRecipe","textInputSlotRecipe","recipeProps","remainingProps","rootRef","useRef","localRef","ref","useObjectRef","mergeRefs","styleProps","otherProps","extractStyleProps","inputContext","useSlottedContext","InputContext","normalizedInputContext","useMemo","inputFieldProps","mergeProps","inputProps","useTextField","stateProps","useEffect","handleRootClick","event","jsxs","jsx","Input","TextInput"],"mappings":"mbASM,CAAE,aAAAA,EAAc,YAAAC,CAAA,EAAgBC,0BAAwB,CAC5D,IAAK,iBACP,CAAC,EAEYC,EAGTH,EAAqD,MAAO,MAAM,EAEzDI,EAGTH,EACF,MACA,gBACF,EAEaI,EAGTJ,EAAuD,QAAS,OAAO,EAE9DK,EAGTL,EACF,MACA,iBACF,ECjBMM,EAAsBC,GAA0B,CACpD,KAAM,CACJ,eAAAC,EACA,gBAAAC,EACA,IAAKC,EACL,GAAGC,CAAA,EACDJ,EAEEK,EAASC,EAAAA,cAAc,CAAE,OAAQC,EAAAA,oBAAqB,EACtD,CAACC,EAAaC,CAAc,EAAIJ,EAAO,kBAAkBD,CAAS,EAElEM,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAWD,EAAAA,OAAyB,IAAI,EACxCE,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUH,EAAUT,CAAY,CAAC,EAEpD,CAACa,EAAYC,CAAU,EAAIC,EAAAA,kBAAkBT,CAAc,EAY3DU,EAAeC,EAAAA,0CACnBC,EAAAA,yCAAA,EAQIC,EAAyBC,EAAAA,QAC7B,KAAO,CACL,GAAGJ,EACH,WAAYA,GAAc,YAAcA,GAAc,SACtD,WAAYA,GAAc,YAAcA,GAAc,SACtD,WAAYA,GAAc,YAAcA,GAAc,SAEtD,UACEA,GAAc,YACbA,IAAe,cAAc,IAAM,IACpCA,IAAe,cAAc,IAAM,OAC/B,GACAA,IAAe,cAAc,IAAM,IACjCA,IAAe,cAAc,IAAM,QACnC,GACA,QACR,SAAU,OACV,SAAU,OACV,SAAU,MAAA,GAEZ,CAACA,CAAY,CAAA,EAITK,EAAkBC,EAAAA,0CAAWH,EAAwBL,CAAU,EAM/D,CAAE,WAAAS,GAAeC,EAAAA,yCACrBH,EACAX,CAAA,EAGIe,EAAa,CACjB,gBAAiBF,EAAW,SAAW,OAAS,OAChD,eAAgBA,EAAW,cAAc,EAAI,OAAS,OAAA,EAKxDG,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAmBC,GAAsB,CAI3CrB,EAAQ,SACRA,EAAQ,QAAQ,SAASqB,EAAM,MAAc,GAC7CnB,EAAS,SACTmB,EAAM,SAAWnB,EAAS,SAE1BA,EAAS,QAAQ,MAAA,CAErB,EACA,gBAAS,iBAAiB,QAASkB,CAAe,EAC3C,IAAM,CACX,SAAS,oBAAoB,QAASA,CAAe,CACvD,CACF,EAAG,CAAA,CAAE,EAGHE,EAAAA,KAACrC,EAAA,CACC,IAAKe,EACL,UAAWV,GAAO,UACjB,GAAGQ,EACH,GAAGQ,EACH,GAAGY,EAEH,SAAA,CAAA3B,GACCgC,EAAAA,IAACrC,GACE,SAAAK,CAAA,CACH,EAEFgC,EAAAA,IAACpC,GAAmB,QAAO,GACzB,eAACqC,EAAAA,0CAAA,CAAM,IAAArB,EAAW,GAAGa,CAAA,CAAY,CAAA,CACnC,EACCxB,GACC+B,EAAAA,IAACnC,EAAA,CACE,SAAAI,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,EAEAH,EAAmB,YAAc,YAS1B,MAAMoC,EAiBT,OAAO,OAAOpC,EAAoB,CACpC,QAASsB,EAAAA,yCACX,CAAC"}
|
|
1
|
+
{"version":3,"file":"text-input-DMdKhA4s.cjs.js","sources":["../../src/components/text-input/text-input.slots.tsx","../../src/components/text-input/text-input.tsx"],"sourcesContent":["import { createSlotRecipeContext } from \"@chakra-ui/react\";\nimport type { SlotComponent } from \"@/type-utils\";\nimport type {\n TextInputRootSlotProps,\n TextInputLeadingElementSlotProps,\n TextInputInputSlotProps,\n TextInputTrailingElementSlotProps,\n} from \"./text-input.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusTextInput\",\n});\n\nexport const TextInputRootSlot: SlotComponent<\n HTMLDivElement,\n TextInputRootSlotProps\n> = withProvider<HTMLDivElement, TextInputRootSlotProps>(\"div\", \"root\");\n\nexport const TextInputLeadingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputLeadingElementSlotProps\n> = withContext<HTMLDivElement, TextInputLeadingElementSlotProps>(\n \"div\",\n \"leadingElement\"\n);\n\nexport const TextInputInputSlot: SlotComponent<\n HTMLInputElement,\n TextInputInputSlotProps\n> = withContext<HTMLInputElement, TextInputInputSlotProps>(\"input\", \"input\");\n\nexport const TextInputTrailingElementSlot: SlotComponent<\n HTMLDivElement,\n TextInputTrailingElementSlotProps\n> = withContext<HTMLDivElement, TextInputTrailingElementSlotProps>(\n \"div\",\n \"trailingElement\"\n);\n","import { useEffect, useMemo, useRef, type Context } from \"react\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport { useSlotRecipe } from \"@chakra-ui/react/styled-system\";\nimport {\n useObjectRef,\n useTextField,\n type AriaTextFieldOptions,\n mergeProps,\n} from \"react-aria\";\nimport { Input, InputContext, useSlottedContext } from \"react-aria-components\";\nimport { extractStyleProps } from \"@/utils\";\nimport { textInputSlotRecipe } from \"./text-input.recipe\";\nimport {\n TextInputRootSlot,\n TextInputLeadingElementSlot,\n TextInputInputSlot,\n TextInputTrailingElementSlot,\n} from \"./text-input.slots\";\nimport type { TextInputProps, TextInputContextValue } from \"./text-input.types\";\n\nconst TextInputComponent = (props: TextInputProps) => {\n const {\n leadingElement,\n trailingElement,\n ref: forwardedRef,\n ...restProps\n } = props;\n\n const recipe = useSlotRecipe({ recipe: textInputSlotRecipe });\n const [recipeProps, remainingProps] = recipe.splitVariantProps(restProps);\n\n const rootRef = useRef<HTMLDivElement>(null);\n const localRef = useRef<HTMLInputElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n const [styleProps, otherProps] = extractStyleProps(remainingProps);\n\n /**\n * Consume InputContext to support TextInput as a child of React Aria components\n * (e.g., TextField, SearchField, Form). useSlottedContext respects the `slot`\n * prop for proper nesting. Context may contain either React Aria props or DOM\n * attributes depending on the parent component.\n *\n * Note: We use useSlottedContext (not useContextProps) to read context and\n * manually normalize DOM attributes → React Aria props, ensuring type safety\n * with TextInputContextValue and support for both prop styles from parents.\n */\n const inputContext = useSlottedContext(\n InputContext\n ) as TextInputContextValue | null;\n\n /**\n * Normalize context props: convert any DOM attributes (disabled, required)\n * to React Aria props (isDisabled, isRequired) since React Aria's useTextField\n * hook expects the latter. Remove DOM attributes to prevent React warnings.\n */\n const normalizedInputContext = useMemo(\n () => ({\n ...inputContext,\n isDisabled: inputContext?.isDisabled ?? inputContext?.disabled,\n isRequired: inputContext?.isRequired ?? inputContext?.required,\n isReadOnly: inputContext?.isReadOnly ?? inputContext?.readOnly,\n // Explicit boolean coercion for aria-invalid: \"false\" string is truthy!\n isInvalid:\n inputContext?.isInvalid ??\n (inputContext?.[\"aria-invalid\"] === true ||\n inputContext?.[\"aria-invalid\"] === \"true\"\n ? true\n : inputContext?.[\"aria-invalid\"] === false ||\n inputContext?.[\"aria-invalid\"] === \"false\"\n ? false\n : undefined),\n disabled: undefined,\n required: undefined,\n readOnly: undefined,\n }),\n [inputContext]\n );\n\n // Merge context with component props (component props take precedence)\n const inputFieldProps = mergeProps(normalizedInputContext, otherProps);\n\n /**\n * useTextField converts React Aria props to DOM attributes with proper ARIA\n * annotations (isDisabled → disabled, isRequired → aria-required, etc.)\n */\n const { inputProps } = useTextField(\n inputFieldProps as AriaTextFieldOptions<\"input\">,\n ref\n );\n\n const stateProps = {\n \"data-disabled\": inputProps.disabled ? \"true\" : undefined,\n \"data-invalid\": inputProps[\"aria-invalid\"] ? \"true\" : \"false\",\n };\n\n // Using a useEffect instead of \"onClick\" on the element, to preserve\n // the `onClick` prop for consumers.\n useEffect(() => {\n const handleRootClick = (event: MouseEvent) => {\n // Only focus if the click is inside the root element,\n // not on the input itself, and not on an interactive element\n if (\n rootRef.current &&\n rootRef.current.contains(event.target as Node) &&\n localRef.current &&\n event.target !== localRef.current\n ) {\n localRef.current.focus();\n }\n };\n document.addEventListener(\"click\", handleRootClick);\n return () => {\n document.removeEventListener(\"click\", handleRootClick);\n };\n }, []);\n\n return (\n <InputContext.Provider value={null}>\n <TextInputRootSlot\n ref={rootRef}\n className={props?.className as string}\n {...recipeProps}\n {...styleProps}\n {...stateProps}\n >\n {leadingElement && (\n <TextInputLeadingElementSlot>\n {leadingElement}\n </TextInputLeadingElementSlot>\n )}\n <TextInputInputSlot asChild>\n <Input ref={ref} {...inputProps} />\n </TextInputInputSlot>\n {trailingElement && (\n <TextInputTrailingElementSlot>\n {trailingElement}\n </TextInputTrailingElementSlot>\n )}\n </TextInputRootSlot>\n </InputContext.Provider>\n );\n};\n\nTextInputComponent.displayName = \"TextInput\";\n\n/**\n * ### TextInput\n *\n * An input component that takes in text as input\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/textinput}\n */\nexport const TextInput: typeof TextInputComponent & {\n // TypeScript can't properly name the internal React Aria types when inferring\n // TextInput.Context, so we explicitly type it using typeof and Object.assign\n /**\n * ### TextInput.Context\n *\n * Re-exports React-Aria's `InputContext` with extended type support\n *\n * Accepts both React Aria props (isDisabled, isRequired, etc.) and\n * DOM attributes (disabled, required, etc.) for maximum flexibility.\n *\n * For advanced use cases, **you generally will not need this**\n *\n * @see {@link https://react-spectrum.adobe.com/react-aria/advanced.html#contexts}\n * @see {@link https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children}\n */\n Context: Context<TextInputContextValue | null>;\n} = Object.assign(TextInputComponent, {\n Context: InputContext as Context<TextInputContextValue | null>,\n});\n"],"names":["withProvider","withContext","createSlotRecipeContext","TextInputRootSlot","TextInputLeadingElementSlot","TextInputInputSlot","TextInputTrailingElementSlot","TextInputComponent","props","leadingElement","trailingElement","forwardedRef","restProps","recipe","useSlotRecipe","textInputSlotRecipe","recipeProps","remainingProps","rootRef","useRef","localRef","ref","useObjectRef","mergeRefs","styleProps","otherProps","extractStyleProps","inputContext","useSlottedContext","InputContext","normalizedInputContext","useMemo","inputFieldProps","mergeProps","inputProps","useTextField","stateProps","useEffect","handleRootClick","event","jsx","jsxs","Input","TextInput"],"mappings":"mbASM,CAAE,aAAAA,EAAc,YAAAC,CAAA,EAAgBC,0BAAwB,CAC5D,IAAK,iBACP,CAAC,EAEYC,EAGTH,EAAqD,MAAO,MAAM,EAEzDI,EAGTH,EACF,MACA,gBACF,EAEaI,EAGTJ,EAAuD,QAAS,OAAO,EAE9DK,EAGTL,EACF,MACA,iBACF,ECjBMM,EAAsBC,GAA0B,CACpD,KAAM,CACJ,eAAAC,EACA,gBAAAC,EACA,IAAKC,EACL,GAAGC,CAAA,EACDJ,EAEEK,EAASC,EAAAA,cAAc,CAAE,OAAQC,EAAAA,oBAAqB,EACtD,CAACC,EAAaC,CAAc,EAAIJ,EAAO,kBAAkBD,CAAS,EAElEM,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAWD,EAAAA,OAAyB,IAAI,EACxCE,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUH,EAAUT,CAAY,CAAC,EAEpD,CAACa,EAAYC,CAAU,EAAIC,EAAAA,kBAAkBT,CAAc,EAY3DU,EAAeC,EAAAA,0CACnBC,EAAAA,yCAAA,EAQIC,EAAyBC,EAAAA,QAC7B,KAAO,CACL,GAAGJ,EACH,WAAYA,GAAc,YAAcA,GAAc,SACtD,WAAYA,GAAc,YAAcA,GAAc,SACtD,WAAYA,GAAc,YAAcA,GAAc,SAEtD,UACEA,GAAc,YACbA,IAAe,cAAc,IAAM,IACpCA,IAAe,cAAc,IAAM,OAC/B,GACAA,IAAe,cAAc,IAAM,IACjCA,IAAe,cAAc,IAAM,QACnC,GACA,QACR,SAAU,OACV,SAAU,OACV,SAAU,MAAA,GAEZ,CAACA,CAAY,CAAA,EAITK,EAAkBC,EAAAA,0CAAWH,EAAwBL,CAAU,EAM/D,CAAE,WAAAS,GAAeC,EAAAA,yCACrBH,EACAX,CAAA,EAGIe,EAAa,CACjB,gBAAiBF,EAAW,SAAW,OAAS,OAChD,eAAgBA,EAAW,cAAc,EAAI,OAAS,OAAA,EAKxDG,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAmBC,GAAsB,CAI3CrB,EAAQ,SACRA,EAAQ,QAAQ,SAASqB,EAAM,MAAc,GAC7CnB,EAAS,SACTmB,EAAM,SAAWnB,EAAS,SAE1BA,EAAS,QAAQ,MAAA,CAErB,EACA,gBAAS,iBAAiB,QAASkB,CAAe,EAC3C,IAAM,CACX,SAAS,oBAAoB,QAASA,CAAe,CACvD,CACF,EAAG,CAAA,CAAE,EAGHE,EAAAA,IAACX,EAAAA,0CAAa,SAAb,CAAsB,MAAO,KAC5B,SAAAY,EAAAA,KAACtC,EAAA,CACC,IAAKe,EACL,UAAWV,GAAO,UACjB,GAAGQ,EACH,GAAGQ,EACH,GAAGY,EAEH,SAAA,CAAA3B,GACC+B,EAAAA,IAACpC,GACE,SAAAK,CAAA,CACH,EAEF+B,EAAAA,IAACnC,GAAmB,QAAO,GACzB,eAACqC,EAAAA,0CAAA,CAAM,IAAArB,EAAW,GAAGa,CAAA,CAAY,CAAA,CACnC,EACCxB,GACC8B,EAAAA,IAAClC,EAAA,CACE,SAAAI,CAAA,CACH,CAAA,CAAA,CAAA,EAGN,CAEJ,EAEAH,EAAmB,YAAc,YAS1B,MAAMoC,EAiBT,OAAO,OAAOpC,EAAoB,CACpC,QAASsB,EAAAA,yCACX,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),E=require("./text-input-
|
|
2
|
-
//# sourceMappingURL=text-input-field-
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),E=require("./text-input-DMdKhA4s.cjs.js"),r=require("./form-field-Duc1Eb8n.cjs.js"),T=require("./field-errors-C8G94e3K.cjs.js"),o=({id:d,label:F,description:s,info:t,errors:l,onChange:x,renderError:c,touched:u=!1,isRequired:a=!1,isDisabled:m=!1,isReadOnly:j=!1,isInvalid:I=!1,size:i="md",value:f,placeholder:h,type:p="text",...q})=>{const n=u&&l&&Object.values(l).some(Boolean);return e.jsxs(r.FormField.Root,{id:d,size:i,isRequired:a,isDisabled:m,isReadOnly:j,isInvalid:n||I,children:[e.jsx(r.FormField.Label,{children:F}),e.jsx(r.FormField.Input,{children:e.jsx(E.TextInput,{...q,size:i,type:p,placeholder:h,onChange:x,value:f})}),s&&e.jsx(r.FormField.Description,{children:s}),n&&e.jsx(r.FormField.Error,{children:e.jsx(T.FieldErrors,{errors:l,renderError:c})}),t&&e.jsx(r.FormField.InfoBox,{children:t})]})};o.displayName="TextInputField";exports.TextInputField=o;
|
|
2
|
+
//# sourceMappingURL=text-input-field-DyjFewe3.cjs.js.map
|
package/dist/chunks/{text-input-field-D1bwFK7r.cjs.js.map → text-input-field-DyjFewe3.cjs.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-field-
|
|
1
|
+
{"version":3,"file":"text-input-field-DyjFewe3.cjs.js","sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n * label=\"Project name\"\n * description=\"Enter a descriptive name for your project\"\n * placeholder=\"My Awesome Project\"\n * value={value}\n * onChange={setValue}\n * errors={{ missing: true }}\n * isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n id,\n label,\n description,\n info,\n errors,\n onChange,\n renderError,\n touched = false,\n isRequired = false,\n isDisabled = false,\n isReadOnly = false,\n isInvalid = false,\n size = \"md\",\n value,\n placeholder,\n type = \"text\",\n ...rest\n}: TextInputFieldProps) => {\n // Determine if we should show errors\n const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n return (\n <FormField.Root\n id={id}\n size={size}\n isRequired={isRequired}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={hasErrors || isInvalid}\n >\n <FormField.Label>{label}</FormField.Label>\n <FormField.Input>\n <TextInput\n {...rest}\n size={size}\n type={type}\n placeholder={placeholder}\n onChange={onChange}\n value={value}\n />\n </FormField.Input>\n {description && (\n <FormField.Description>{description}</FormField.Description>\n )}\n {hasErrors && (\n <FormField.Error>\n <FieldErrors errors={errors} renderError={renderError} />\n </FormField.Error>\n )}\n {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n </FormField.Root>\n );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"names":["TextInputField","id","label","description","info","errors","onChange","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","size","value","placeholder","type","rest","hasErrors","jsxs","FormField","jsx","TextInput","FieldErrors"],"mappings":"kLA4BaA,EAAiB,CAAC,CAC7B,GAAAC,EACA,MAAAC,EACA,YAAAC,EACA,KAAAC,EACA,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,KAAAC,EAAO,KACP,MAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,OACP,GAAGC,CACL,IAA2B,CAEzB,MAAMC,EAAYV,GAAWH,GAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO,EAEzE,OACEc,EAAAA,KAACC,EAAAA,UAAU,KAAV,CACC,GAAAnB,EACA,KAAAY,EACA,WAAAJ,EACA,WAAAC,EACA,WAAAC,EACA,UAAWO,GAAaN,EAExB,SAAA,CAAAS,EAAAA,IAACD,EAAAA,UAAU,MAAV,CAAiB,SAAAlB,CAAA,CAAM,EACxBmB,EAAAA,IAACD,EAAAA,UAAU,MAAV,CACC,SAAAC,EAAAA,IAACC,EAAAA,UAAA,CACE,GAAGL,EACJ,KAAAJ,EACA,KAAAG,EACA,YAAAD,EACA,SAAAT,EACA,MAAAQ,CAAA,CAAA,EAEJ,EACCX,GACCkB,EAAAA,IAACD,EAAAA,UAAU,YAAV,CAAuB,SAAAjB,EAAY,EAErCe,SACEE,YAAU,MAAV,CACC,SAAAC,MAACE,EAAAA,YAAA,CAAY,OAAAlB,EAAgB,YAAAE,CAAA,CAA0B,CAAA,CACzD,EAEDH,GAAQiB,EAAAA,IAACD,EAAAA,UAAU,QAAV,CAAmB,SAAAhB,CAAA,CAAK,CAAA,CAAA,CAAA,CAGxC,EAEAJ,EAAe,YAAc"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as j, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { T as E } from "./text-input-
|
|
2
|
+
import { T as E } from "./text-input-0_e7m90A.es.js";
|
|
3
3
|
import { F as r } from "./form-field-BAaKrrLV.es.js";
|
|
4
4
|
import { a as b } from "./field-errors-DYvB-OZF.es.js";
|
|
5
5
|
const v = ({
|
|
@@ -55,4 +55,4 @@ v.displayName = "TextInputField";
|
|
|
55
55
|
export {
|
|
56
56
|
v as T
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=text-input-field-
|
|
58
|
+
//# sourceMappingURL=text-input-field-lCdJIMRn.es.js.map
|
package/dist/chunks/{text-input-field-XgUiAt5N.es.js.map → text-input-field-lCdJIMRn.es.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-field-
|
|
1
|
+
{"version":3,"file":"text-input-field-lCdJIMRn.es.js","sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n * label=\"Project name\"\n * description=\"Enter a descriptive name for your project\"\n * placeholder=\"My Awesome Project\"\n * value={value}\n * onChange={setValue}\n * errors={{ missing: true }}\n * isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n id,\n label,\n description,\n info,\n errors,\n onChange,\n renderError,\n touched = false,\n isRequired = false,\n isDisabled = false,\n isReadOnly = false,\n isInvalid = false,\n size = \"md\",\n value,\n placeholder,\n type = \"text\",\n ...rest\n}: TextInputFieldProps) => {\n // Determine if we should show errors\n const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n return (\n <FormField.Root\n id={id}\n size={size}\n isRequired={isRequired}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isInvalid={hasErrors || isInvalid}\n >\n <FormField.Label>{label}</FormField.Label>\n <FormField.Input>\n <TextInput\n {...rest}\n size={size}\n type={type}\n placeholder={placeholder}\n onChange={onChange}\n value={value}\n />\n </FormField.Input>\n {description && (\n <FormField.Description>{description}</FormField.Description>\n )}\n {hasErrors && (\n <FormField.Error>\n <FieldErrors errors={errors} renderError={renderError} />\n </FormField.Error>\n )}\n {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n </FormField.Root>\n );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"names":["TextInputField","id","label","description","info","errors","onChange","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","size","value","placeholder","type","rest","hasErrors","jsxs","FormField","jsx","TextInput","FieldErrors"],"mappings":";;;;AA4BO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MAA2B;AAEzB,QAAMC,IAAYV,KAAWH,KAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO;AAEzE,SACE,gBAAAc;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,IAAAnB;AAAA,MACA,MAAAY;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,WAAWO,KAAaN;AAAA,MAExB,UAAA;AAAA,QAAA,gBAAAS,EAACD,EAAU,OAAV,EAAiB,UAAAlB,EAAA,CAAM;AAAA,QACxB,gBAAAmB,EAACD,EAAU,OAAV,EACC,UAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGL;AAAA,YACJ,MAAAJ;AAAA,YACA,MAAAG;AAAA,YACA,aAAAD;AAAA,YACA,UAAAT;AAAA,YACA,OAAAQ;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACCX,KACC,gBAAAkB,EAACD,EAAU,aAAV,EAAuB,UAAAjB,GAAY;AAAA,QAErCe,uBACEE,EAAU,OAAV,EACC,UAAA,gBAAAC,EAACE,GAAA,EAAY,QAAAlB,GAAgB,aAAAE,EAAA,CAA0B,EAAA,CACzD;AAAA,QAEDH,KAAQ,gBAAAiB,EAACD,EAAU,SAAV,EAAmB,UAAAhB,EAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxC;AAEAJ,EAAe,cAAc;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("../chunks/date-range-picker-field-B_UuUZKz.cjs.js"),t=require("../chunks/money-input-field-B3lQft0S.cjs.js"),i=require("../chunks/multiline-text-input-field-BKZK_eKT.cjs.js"),n=require("../chunks/number-input-field-tE1vbQZK.cjs.js"),u=require("../chunks/search-input-field-BaLzJQCP.cjs.js"),l=require("../chunks/password-input-field-
|
|
1
|
+
"use strict";const e=require("../chunks/date-range-picker-field-B_UuUZKz.cjs.js"),t=require("../chunks/money-input-field-B3lQft0S.cjs.js"),i=require("../chunks/multiline-text-input-field-BKZK_eKT.cjs.js"),n=require("../chunks/number-input-field-tE1vbQZK.cjs.js"),u=require("../chunks/search-input-field-BaLzJQCP.cjs.js"),l=require("../chunks/password-input-field-BFWRpbgq.cjs.js"),r=require("../chunks/text-input-field-DyjFewe3.cjs.js");exports.DateRangePickerField=e.DateRangePickerField;exports.MoneyInputField=t.MoneyInputField;exports.MultilineTextInputField=i.MultilineTextInputField;exports.NumberInputField=n.NumberInputField;exports.SearchInputField=u.SearchInputField;exports.PasswordInputField=l.PasswordInputField;exports.TextInputField=r.TextInputField;
|
|
2
2
|
//# sourceMappingURL=fields.cjs.map
|
|
@@ -3,8 +3,8 @@ import { M as p } from "../chunks/money-input-field-C03ekDLk.es.js";
|
|
|
3
3
|
import { M as i } from "../chunks/multiline-text-input-field-CLK7gddi.es.js";
|
|
4
4
|
import { N as n } from "../chunks/number-input-field-Cn5sQkJU.es.js";
|
|
5
5
|
import { S as x } from "../chunks/search-input-field-ClrteUdq.es.js";
|
|
6
|
-
import { P as m } from "../chunks/password-input-field-
|
|
7
|
-
import { T as f } from "../chunks/text-input-field-
|
|
6
|
+
import { P as m } from "../chunks/password-input-field-BdA4Wbh7.es.js";
|
|
7
|
+
import { T as f } from "../chunks/text-input-field-lCdJIMRn.es.js";
|
|
8
8
|
export {
|
|
9
9
|
t as DateRangePickerField,
|
|
10
10
|
p as MoneyInputField,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("../chunks/localized-field-
|
|
1
|
+
"use strict";const e=require("../chunks/localized-field-DyucE16v.cjs.js");exports.LocalizedField=e.LocalizedField;
|
|
2
2
|
//# sourceMappingURL=localized-field.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("../chunks/password-input-field-
|
|
1
|
+
"use strict";const e=require("../chunks/password-input-field-BFWRpbgq.cjs.js");exports.PasswordInputField=e.PasswordInputField;
|
|
2
2
|
//# sourceMappingURL=password-input-field.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const t=require("../chunks/password-input-
|
|
1
|
+
"use strict";const t=require("../chunks/password-input-J-Y0lk1M.cjs.js");exports.PasswordInput=t.PasswordInput;
|
|
2
2
|
//# sourceMappingURL=password-input.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("../chunks/date-range-picker-field-B_UuUZKz.cjs.js"),t=require("../chunks/money-input-field-B3lQft0S.cjs.js"),i=require("../chunks/multiline-text-input-field-BKZK_eKT.cjs.js"),n=require("../chunks/number-input-field-tE1vbQZK.cjs.js"),u=require("../chunks/search-input-field-BaLzJQCP.cjs.js"),l=require("../chunks/password-input-field-
|
|
1
|
+
"use strict";const e=require("../chunks/date-range-picker-field-B_UuUZKz.cjs.js"),t=require("../chunks/money-input-field-B3lQft0S.cjs.js"),i=require("../chunks/multiline-text-input-field-BKZK_eKT.cjs.js"),n=require("../chunks/number-input-field-tE1vbQZK.cjs.js"),u=require("../chunks/search-input-field-BaLzJQCP.cjs.js"),l=require("../chunks/password-input-field-BFWRpbgq.cjs.js"),r=require("../chunks/text-input-field-DyjFewe3.cjs.js");exports.DateRangePickerField=e.DateRangePickerField;exports.MoneyInputField=t.MoneyInputField;exports.MultilineTextInputField=i.MultilineTextInputField;exports.NumberInputField=n.NumberInputField;exports.SearchInputField=u.SearchInputField;exports.PasswordInputField=l.PasswordInputField;exports.TextInputField=r.TextInputField;
|
|
2
2
|
//# sourceMappingURL=patterns.cjs.map
|
|
@@ -3,8 +3,8 @@ import { M as p } from "../chunks/money-input-field-C03ekDLk.es.js";
|
|
|
3
3
|
import { M as i } from "../chunks/multiline-text-input-field-CLK7gddi.es.js";
|
|
4
4
|
import { N as n } from "../chunks/number-input-field-Cn5sQkJU.es.js";
|
|
5
5
|
import { S as x } from "../chunks/search-input-field-ClrteUdq.es.js";
|
|
6
|
-
import { P as m } from "../chunks/password-input-field-
|
|
7
|
-
import { T as f } from "../chunks/text-input-field-
|
|
6
|
+
import { P as m } from "../chunks/password-input-field-BdA4Wbh7.es.js";
|
|
7
|
+
import { T as f } from "../chunks/text-input-field-lCdJIMRn.es.js";
|
|
8
8
|
export {
|
|
9
9
|
t as DateRangePickerField,
|
|
10
10
|
p as MoneyInputField,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("../chunks/text-input-field-
|
|
1
|
+
"use strict";const e=require("../chunks/text-input-field-DyjFewe3.cjs.js");exports.TextInputField=e.TextInputField;
|
|
2
2
|
//# sourceMappingURL=text-input-field.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const t=require("../chunks/text-input-
|
|
1
|
+
"use strict";const t=require("../chunks/text-input-DMdKhA4s.cjs.js");exports.TextInput=t.TextInput;
|
|
2
2
|
//# sourceMappingURL=text-input.cjs.map
|