npm - @customafk/lunas-ui - Versions diffs - 0.2.83 → 0.2.85 - Mend

@customafk/lunas-ui 0.2.83 → 0.2.85

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.

Files changed (262) hide show

package/dist/{simple-password-field-vsLRHDk4.mjs.map → simple-password-field-Cnj-hf5g.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-password-field-~~vsLRHDk4~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const [isVisible, setIsVisible] = useState(false);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <div className=\"relative\">\n <Input\n id={id}\n name={name}\n type={isVisible ? 'text' : 'password'}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n autoComplete=\"current-password\"\n placeholder={placeholder}\n disabled={disabled \|\| isSubmitting}\n className=\"pr-9\"\n onBlur={handleBlur}\n onChange={onChange}\n />\n <button\n type=\"button\"\n tabIndex={-1}\n aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n aria-pressed={isVisible}\n aria-controls={id}\n className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n disabled={disabled \|\| isSubmitting}\n onClick={toggleVisibility}\n >\n {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n </button>\n </div>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~uYAqBA~~,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-password-field-Cnj-hf5g.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n};\n\nexport const SimplePasswordField: React.FC<Props> = ({ label, placeholder, required, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const [isVisible, setIsVisible] = useState(false);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <div className=\"relative\">\n <Input\n id={id}\n name={name}\n type={isVisible ? 'text' : 'password'}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n autoComplete=\"current-password\"\n placeholder={placeholder}\n disabled={disabled \|\| isSubmitting}\n className=\"pr-9\"\n onBlur={handleBlur}\n onChange={onChange}\n />\n <button\n type=\"button\"\n tabIndex={-1}\n aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n aria-pressed={isVisible}\n aria-controls={id}\n className=\"absolute inset-y-0 right-0 flex size-9 items-center justify-center text-muted outline-none transition-colors hover:text-text-positive focus-visible:text-text-positive disabled:pointer-events-none disabled:opacity-50\"\n disabled={disabled \|\| isSubmitting}\n onClick={toggleVisibility}\n >\n {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n </button>\n </div>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"6VAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,cAAe,CAClG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAS,EAAK,EAE1C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,MAAD,CAAK,UAAU,WAAf,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WAC3B,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,mBACA,cACb,SAAU,GAAY,EACtB,UAAU,OACV,OAAQ,EACE,UACX,CAAA,EACD,EAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EACf,UAAU,0NACV,SAAU,GAAY,EACtB,QAAS,EAER,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,CACL,IACJ,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-radio-group-field-4-eWSXY7.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Y as e,rt as t}from"./tanstack-form-BhKAn9I0.mjs";import{Label as n}from"./ui/label.mjs";import{RadioGroup as r,RadioGroupItem as i}from"./ui/radio-group.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useStore as s}from"@tanstack/react-form";const c=({label:c,required:l,disabled:u,options:d,orientation:f=`vertical`})=>{let{form:p,name:m,state:h,handleBlur:g,handleChange:_}=t(),v=s(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=u\|\|v;return o(`div`,{className:`flex flex-col gap-1.5`,children:[c&&o(n,{children:[c,l&&a(`span`,{className:`text-danger-strong`,children:`*`})]}),a(r,{name:m,value:h.value??``,disabled:b,"aria-invalid":y,className:f===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:_,onBlur:g,children:d.map(e=>o(`div`,{className:`flex items-center gap-2`,children:[a(i,{id:`${m}-${e.value}`,value:e.value}),a(n,{htmlFor:`${m}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),y&&a(e,{errors:h.meta.errors})]})};export{c as SimpleRadioGroupField};
2	+ //# sourceMappingURL=simple-radio-group-field-4-eWSXY7.mjs.map

package/dist/{simple-radio-group-field-BURm_BSA.mjs.map → simple-radio-group-field-4-eWSXY7.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-radio-group-field-~~BURm_BSA~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n required?: boolean;\n disabled?: boolean;\n options: Array<{ value: string; label: string }>;\n orientation?: 'horizontal' \| 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const isDisabled = disabled \|\| isSubmitting;\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <RadioGroup\n name={name}\n value={state.value ?? ''}\n disabled={isDisabled}\n aria-invalid={_invalid}\n className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n onValueChange={handleChange}\n onBlur={handleBlur}\n >\n {options.map(option => (\n <div key={option.value} className=\"flex items-center gap-2\">\n <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n {option.label}\n </Label>\n </div>\n ))}\n </RadioGroup>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~kTAkBA~~,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-radio-group-field-4-eWSXY7.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n required?: boolean;\n disabled?: boolean;\n options: Array<{ value: string; label: string }>;\n orientation?: 'horizontal' \| 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const isDisabled = disabled \|\| isSubmitting;\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <RadioGroup\n name={name}\n value={state.value ?? ''}\n disabled={isDisabled}\n aria-invalid={_invalid}\n className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n onValueChange={handleChange}\n onBlur={handleBlur}\n >\n {options.map(option => (\n <div key={option.value} className=\"flex items-center gap-2\">\n <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n {option.label}\n </Label>\n </div>\n ))}\n </RadioGroup>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"wQAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,EAET,EAAC,EAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,GACX,EAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,CACE,EAAC,EAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,EACrE,EAAC,EAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-radio-group-field-CuA0Q-XI.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./tanstack-form-DCB2addt.cjs"),t=require("./ui/label.cjs"),n=require("./ui/radio-group.cjs");let r=require("react/jsx-runtime"),i=require("@tanstack/react-form");const a=({label:a,required:o,disabled:s,options:c,orientation:l=`vertical`})=>{let{form:u,name:d,state:f,handleBlur:p,handleChange:m}=e.rt(),h=(0,i.useStore)(u.store,({isSubmitting:e})=>e),g=f.meta.isTouched&&!f.meta.isValid,_=s\|\|h;return(0,r.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[a&&(0,r.jsxs)(t.Label,{children:[a,o&&(0,r.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,r.jsx)(n.RadioGroup,{name:d,value:f.value??``,disabled:_,"aria-invalid":g,className:l===`horizontal`?`flex flex-row flex-wrap gap-x-4 gap-y-2`:`flex flex-col gap-2`,onValueChange:m,onBlur:p,children:c.map(e=>(0,r.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,r.jsx)(n.RadioGroupItem,{id:`${d}-${e.value}`,value:e.value}),(0,r.jsx)(t.Label,{htmlFor:`${d}-${e.value}`,className:`cursor-pointer font-normal`,children:e.label})]},e.value))}),g&&(0,r.jsx)(e.Y,{errors:f.meta.errors})]})};exports.SimpleRadioGroupField=a;
2	+ //# sourceMappingURL=simple-radio-group-field-CuA0Q-XI.cjs.map

package/dist/{simple-radio-group-field-Wm8xB0fN.cjs.map → simple-radio-group-field-CuA0Q-XI.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-radio-group-field-~~Wm8xB0fN~~.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n required?: boolean;\n disabled?: boolean;\n options: Array<{ value: string; label: string }>;\n orientation?: 'horizontal' \| 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const isDisabled = disabled \|\| isSubmitting;\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <RadioGroup\n name={name}\n value={state.value ?? ''}\n disabled={isDisabled}\n aria-invalid={_invalid}\n className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n onValueChange={handleChange}\n onBlur={handleBlur}\n >\n {options.map(option => (\n <div key={option.value} className=\"flex items-center gap-2\">\n <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n {option.label}\n </Label>\n </div>\n ))}\n </RadioGroup>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~qNAkBA~~,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,~~EAAuC~~,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,~~WAAD~~,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-radio-group-field-CuA0Q-XI.cjs","names":["useTanStackFieldContext","Label","RadioGroup","RadioGroupItem","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '@/components/ui/label';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n required?: boolean;\n disabled?: boolean;\n options: Array<{ value: string; label: string }>;\n orientation?: 'horizontal' \| 'vertical';\n};\n\nexport const SimpleRadioGroupField: React.FC<Props> = ({ label, required, disabled, options, orientation = 'vertical' }) => {\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const isDisabled = disabled \|\| isSubmitting;\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <RadioGroup\n name={name}\n value={state.value ?? ''}\n disabled={isDisabled}\n aria-invalid={_invalid}\n className={orientation === 'horizontal' ? 'flex flex-row flex-wrap gap-x-4 gap-y-2' : 'flex flex-col gap-2'}\n onValueChange={handleChange}\n onBlur={handleBlur}\n >\n {options.map(option => (\n <div key={option.value} className=\"flex items-center gap-2\">\n <RadioGroupItem id={`${name}-${option.value}`} value={option.value} />\n <Label htmlFor={`${name}-${option.value}`} className=\"cursor-pointer font-normal\">\n {option.label}\n </Label>\n </div>\n ))}\n </RadioGroup>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"mLAkBA,MAAa,GAA0C,CAAE,QAAO,WAAU,WAAU,UAAS,cAAc,cAAiB,CAC1H,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAa,GAAY,EAE/B,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAA,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,CAAA,CAAA,GAET,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CACQ,OACN,MAAO,EAAM,OAAS,GACtB,SAAU,EACV,eAAc,EACd,UAAW,IAAgB,aAAe,0CAA4C,sBACtF,cAAe,EACf,OAAQ,EAEP,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAwB,UAAU,0BAAlC,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,GAAI,GAAG,EAAK,GAAG,EAAO,QAAS,MAAO,EAAO,KAAQ,CAAA,GACrE,EAAA,EAAA,IAAA,CAACF,EAAAA,MAAD,CAAO,QAAS,GAAG,EAAK,GAAG,EAAO,QAAS,UAAU,6BAClD,SAAA,EAAO,KACH,CAAA,CACJ,CALK,EAAA,EAAO,KAKZ,CACN,CACS,CAAA,EACX,IAAY,EAAA,EAAA,IAAA,CAACG,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-select-field-C0ecQx68.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Y as e,rt as t}from"./tanstack-form-BhKAn9I0.mjs";import{Button as n}from"./ui/button.mjs";import{Label as r}from"./ui/label.mjs";import{Select as i,SelectContent as a,SelectItem as o,SelectTrigger as s,SelectValue as c}from"./ui/select.mjs";import{Drawer as l,DrawerClose as u,DrawerContent as d,DrawerHeader as f,DrawerTitle as p}from"./ui/drawer.mjs";import{PackagePlusIcon as m}from"lucide-react";import{useId as h,useState as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useIsMobile as b}from"@customafk/react-toolkit/hooks/useMobile";const x=({label:x,placeholder:S,required:C,options:w})=>{let T=h(),{state:E,handleBlur:D,handleChange:O}=t(),k=b(),[A,j]=g(!1),M=E.meta.isTouched&&!E.meta.isValid,N=w.find(e=>e.value===E.value)?.label;return k?y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(r,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:``})]}),v(n,{id:T,type:`button`,variant:`outline`,color:`muted`,className:_(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!E.value&&`text-text-positive-muted`,M&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":M,onBlur:D,onClick:()=>j(!0),children:N??v(`span`,{className:`text-text-positive-muted`,children:S})}),v(l,{open:A,onOpenChange:j,direction:`bottom`,children:y(d,{children:[v(f,{children:v(p,{children:x??S??`Select an option`})}),v(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:w.length>0?w.map(e=>v(u,{asChild:!0,children:v(`button`,{type:`button`,className:_(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,E.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{O(e.value),j(!1)},children:e.label})},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]})}),M&&v(e,{errors:E.meta.errors})]}):y(`div`,{className:`flex flex-col gap-1.5`,children:[x&&y(r,{htmlFor:T,children:[x,C&&v(`span`,{className:`text-danger-strong`,children:``})]}),y(i,{value:E.value??``,onValueChange:O,children:[v(s,{id:T,"aria-invalid":M?`true`:void 0,onBlur:D,children:v(c,{placeholder:S})}),v(a,{children:w.length>0?w.map(e=>v(o,{value:e.value,children:e.label},e.value)):y(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[v(m,{strokeWidth:1}),`No options available`]})})]}),M&&v(e,{errors:E.meta.errors})]})};export{x as SimpleSelectField};
2	+ //# sourceMappingURL=simple-select-field-C0ecQx68.mjs.map

package/dist/{simple-select-field-8cY51U4d.mjs.map → simple-select-field-C0ecQx68.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-select-field-~~8cY51U4d~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n const id = useId();\n const { state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n const isMobile = useIsMobile();\n const [drawerOpen, setDrawerOpen] = useState(false);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n if (isMobile) {\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Button\n id={id}\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className={cn(\n 'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n !state.value && 'text-text-positive-muted',\n _invalid && 'outline-danger bg-danger-bg-subtle'\n )}\n aria-invalid={_invalid}\n onBlur={handleBlur}\n onClick={() => setDrawerOpen(true)}\n >\n {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n </Button>\n\n <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n </DrawerHeader>\n <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n {options.length > 0 ? (\n options.map(option => (\n <DrawerClose key={option.value} asChild>\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n 'hover:bg-muted-muted active:bg-muted-muted',\n state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n )}\n onClick={() => {\n handleChange(option.value);\n setDrawerOpen(false);\n }}\n >\n {option.label}\n </button>\n </DrawerClose>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </div>\n </DrawerContent>\n </Drawer>\n\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Select value={state.value ?? ''} onValueChange={handleChange}>\n <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options.length > 0 ? (\n options.map(option => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </SelectContent>\n </Select>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~2pBAwBA~~,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,GAC9B,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,SAAA,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-select-field-C0ecQx68.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n const id = useId();\n const { state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n const isMobile = useIsMobile();\n const [drawerOpen, setDrawerOpen] = useState(false);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n if (isMobile) {\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Button\n id={id}\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className={cn(\n 'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n !state.value && 'text-text-positive-muted',\n _invalid && 'outline-danger bg-danger-bg-subtle'\n )}\n aria-invalid={_invalid}\n onBlur={handleBlur}\n onClick={() => setDrawerOpen(true)}\n >\n {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n </Button>\n\n <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n </DrawerHeader>\n <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n {options.length > 0 ? (\n options.map(option => (\n <DrawerClose key={option.value} asChild>\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n 'hover:bg-muted-muted active:bg-muted-muted',\n state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n )}\n onClick={() => {\n handleChange(option.value);\n setDrawerOpen(false);\n }}\n >\n {option.label}\n </button>\n </DrawerClose>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </div>\n </DrawerContent>\n </Drawer>\n\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Select value={state.value ?? ''} onValueChange={handleChange}>\n <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options.length > 0 ? (\n options.map(option => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </SelectContent>\n </Select>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"inBAwBA,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,EAAK,EAAM,EACX,CAAE,QAAO,aAAY,gBAAiB,EAAuC,EAC7E,EAAW,EAAY,EACvB,CAAC,EAAY,GAAiB,EAAS,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,EAEA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,UAAW,EACT,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,GAAiB,EAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,EAER,EAAC,EAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,SAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,EACd,EAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAAgC,QAAA,GAC9B,SAAA,EAAC,SAAD,CACE,KAAK,SACL,UAAW,EACT,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,EAED,EAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,IAKP,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,CACE,EAAC,EAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,SAAA,EAAC,EAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,EACf,EAAC,EAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,GACV,EAAC,EAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,EAED,EAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,CACE,EAAC,EAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-select-field-CXYJcRY2.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./ui/button.cjs"),t=require("./tanstack-form-DCB2addt.cjs"),n=require("./ui/label.cjs"),r=require("./ui/select.cjs"),i=require("./ui/drawer.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("react/jsx-runtime"),l=require("@customafk/react-toolkit/hooks/useMobile");const u=({label:u,placeholder:d,required:f,options:p})=>{let m=(0,o.useId)(),{state:h,handleBlur:g,handleChange:_}=t.rt(),v=(0,l.useIsMobile)(),[y,b]=(0,o.useState)(!1),x=h.meta.isTouched&&!h.meta.isValid,S=p.find(e=>e.value===h.value)?.label;return v?(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[u&&(0,c.jsxs)(n.Label,{htmlFor:m,children:[u,f&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:``})]}),(0,c.jsx)(e.Button,{id:m,type:`button`,variant:`outline`,color:`muted`,className:(0,s.cn)(`w-full justify-start font-normal outline-1 outline-border -outline-offset-1`,!h.value&&`text-text-positive-muted`,x&&`outline-danger bg-danger-bg-subtle`),"aria-invalid":x,onBlur:g,onClick:()=>b(!0),children:S??(0,c.jsx)(`span`,{className:`text-text-positive-muted`,children:d})}),(0,c.jsx)(i.Drawer,{open:y,onOpenChange:b,direction:`bottom`,children:(0,c.jsxs)(i.DrawerContent,{children:[(0,c.jsx)(i.DrawerHeader,{children:(0,c.jsx)(i.DrawerTitle,{children:u??d??`Select an option`})}),(0,c.jsx)(`div`,{className:`flex flex-col overflow-y-auto pb-safe-bottom`,children:p.length>0?p.map(e=>(0,c.jsx)(i.DrawerClose,{asChild:!0,children:(0,c.jsx)(`button`,{type:`button`,className:(0,s.cn)(`flex w-full items-center px-4 py-3 text-left text-sm transition-colors`,`hover:bg-muted-muted active:bg-muted-muted`,h.value===e.value&&`bg-primary-bg-subtle font-medium text-primary`),onClick:()=>{_(e.value),b(!1)},children:e.label})},e.value)):(0,c.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak`,children:[(0,c.jsx)(a.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]})}),x&&(0,c.jsx)(t.Y,{errors:h.meta.errors})]}):(0,c.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[u&&(0,c.jsxs)(n.Label,{htmlFor:m,children:[u,f&&(0,c.jsx)(`span`,{className:`text-danger-strong`,children:``})]}),(0,c.jsxs)(r.Select,{value:h.value??``,onValueChange:_,children:[(0,c.jsx)(r.SelectTrigger,{id:m,"aria-invalid":x?`true`:void 0,onBlur:g,children:(0,c.jsx)(r.SelectValue,{placeholder:d})}),(0,c.jsx)(r.SelectContent,{children:p.length>0?p.map(e=>(0,c.jsx)(r.SelectItem,{value:e.value,children:e.label},e.value)):(0,c.jsxs)(`div`,{className:`flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak`,children:[(0,c.jsx)(a.PackagePlusIcon,{strokeWidth:1}),`No options available`]})})]}),x&&(0,c.jsx)(t.Y,{errors:h.meta.errors})]})};exports.SimpleSelectField=u;
2	+ //# sourceMappingURL=simple-select-field-CXYJcRY2.cjs.map

package/dist/{simple-select-field-QQ65caBf.cjs.map → simple-select-field-CXYJcRY2.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-select-field-~~QQ65caBf~~.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n const id = useId();\n const { state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n const isMobile = useIsMobile();\n const [drawerOpen, setDrawerOpen] = useState(false);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n if (isMobile) {\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Button\n id={id}\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className={cn(\n 'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n !state.value && 'text-text-positive-muted',\n _invalid && 'outline-danger bg-danger-bg-subtle'\n )}\n aria-invalid={_invalid}\n onBlur={handleBlur}\n onClick={() => setDrawerOpen(true)}\n >\n {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n </Button>\n\n <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n </DrawerHeader>\n <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n {options.length > 0 ? (\n options.map(option => (\n <DrawerClose key={option.value} asChild>\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n 'hover:bg-muted-muted active:bg-muted-muted',\n state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n )}\n onClick={() => {\n handleChange(option.value);\n setDrawerOpen(false);\n }}\n >\n {option.label}\n </button>\n </DrawerClose>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </div>\n </DrawerContent>\n </Drawer>\n\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Select value={state.value ?? ''} onValueChange={handleChange}>\n <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options.length > 0 ? (\n options.map(option => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </SelectContent>\n </Select>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~uXAwBA~~,MAAa,GAAsC,CAAE,QAAO,cAAa,WAAU,aAAc,CAC/F,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,QAAO,aAAY,gBAAiBA,EAAAA,~~EAAuC~~,EAC7E,GAAA,EAAA,EAAA,YAAA,CAAuB,EACvB,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAC/C,EAAgB,EAAQ,KAAK,GAAK,EAAE,QAAU,EAAM,KAAK,CAAC,EAAE,MAoElE,OAlEI,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACM,KACJ,KAAK,SACL,QAAQ,UACR,MAAM,QACN,WAAA,EAAA,EAAA,GAAA,CACE,8EACA,CAAC,EAAM,OAAS,2BAChB,GAAY,oCACd,EACA,eAAc,EACd,OAAQ,EACR,YAAe,EAAc,EAAI,EAEhC,SAAA,IAAiB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,2BAA4B,SAAA,CAAkB,CAAA,CAC1E,CAAA,GAER,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAM,EAAY,aAAc,EAAe,UAAU,SAC/D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAA,SAAc,GAAS,GAAe,kBAAgC,CAAA,CAC1D,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,+CACZ,SAAA,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAgC,QAAA,GAC9B,UAAA,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,yEACA,6CACA,EAAM,QAAU,EAAO,OAAS,+CAClC,EACA,YAAe,CACb,EAAa,EAAO,KAAK,EACzB,EAAc,EAAK,CACrB,EAEC,SAAA,EAAO,KACF,CAAA,CACG,EAfK,EAAO,KAeZ,CACd,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iGAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,GAEJ,CAAA,CACQ,CAAA,CAAA,CACT,CAAA,EAEP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,~~WAAD~~,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,KAKP,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACR,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,KAAA,CAACS,EAAAA,OAAD,CAAQ,MAAO,EAAM,OAAS,GAAI,cAAe,EAAjD,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAmB,KAAI,eAAc,EAAW,OAAS,IAAA,GAAW,OAAQ,EAC1E,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAA0B,aAAc,CAAA,CAC3B,CAAA,GACf,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAA,SACG,EAAQ,OAAS,EAChB,EAAQ,IAAI,IACV,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAA+B,MAAO,EAAO,MAC1C,SAAA,EAAO,KACE,EAFK,EAAO,KAEZ,CACb,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+IAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACN,EAAAA,gBAAD,CAAiB,YAAa,CAAI,CAAA,EAAC,sBAEhC,CAEM,CAAA,CAAA,CAAA,CACT,IACP,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,~~WAAD~~,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-select-field-CXYJcRY2.cjs","names":["useTanStackFieldContext","Label","Button","Drawer","DrawerContent","DrawerHeader","DrawerTitle","DrawerClose","PackagePlusIcon","FieldError","Select","SelectTrigger","SelectValue","SelectContent","SelectItem"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-select-field.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { PackagePlusIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';\nimport { Label } from '@/components/ui/label';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n options: Array<{ value: string; label: string }>;\n};\n\nexport const SimpleSelectField: React.FC<Props> = ({ label, placeholder, required, options }) => {\n const id = useId();\n const { state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n const isMobile = useIsMobile();\n const [drawerOpen, setDrawerOpen] = useState(false);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n const selectedLabel = options.find(o => o.value === state.value)?.label;\n\n if (isMobile) {\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Button\n id={id}\n type=\"button\"\n variant=\"outline\"\n color=\"muted\"\n className={cn(\n 'w-full justify-start font-normal outline-1 outline-border -outline-offset-1',\n !state.value && 'text-text-positive-muted',\n _invalid && 'outline-danger bg-danger-bg-subtle'\n )}\n aria-invalid={_invalid}\n onBlur={handleBlur}\n onClick={() => setDrawerOpen(true)}\n >\n {selectedLabel ?? <span className=\"text-text-positive-muted\">{placeholder}</span>}\n </Button>\n\n <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} direction=\"bottom\">\n <DrawerContent>\n <DrawerHeader>\n <DrawerTitle>{label ?? placeholder ?? 'Select an option'}</DrawerTitle>\n </DrawerHeader>\n <div className=\"flex flex-col overflow-y-auto pb-safe-bottom\">\n {options.length > 0 ? (\n options.map(option => (\n <DrawerClose key={option.value} asChild>\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center px-4 py-3 text-left text-sm transition-colors',\n 'hover:bg-muted-muted active:bg-muted-muted',\n state.value === option.value && 'bg-primary-bg-subtle font-medium text-primary'\n )}\n onClick={() => {\n handleChange(option.value);\n setDrawerOpen(false);\n }}\n >\n {option.label}\n </button>\n </DrawerClose>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 px-4 py-8 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </div>\n </DrawerContent>\n </Drawer>\n\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\"></span>}\n </Label>\n )}\n <Select value={state.value ?? ''} onValueChange={handleChange}>\n <SelectTrigger id={id} aria-invalid={_invalid ? 'true' : undefined} onBlur={handleBlur}>\n <SelectValue placeholder={placeholder} />\n </SelectTrigger>\n <SelectContent>\n {options.length > 0 ? (\n options.map(option => (\n <SelectItem key={option.value} value={option.value}>\n {option.label}\n </SelectItem>\n ))\n ) : (\n <div className=\"flex items-center justify-center gap-x-2 rounded border border-border bg-muted-muted px-4 py-6.5 text-center text-sm text-text-positive-weak\">\n <PackagePlusIcon strokeWidth={1} />\n No options available\n </div>\n )}\n </SelectContent>\n </Select>\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/simple-text-field-DJl5SIGn.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Y as e,rt as t}from"./tanstack-form-BhKAn9I0.mjs";import{Input as n}from"./ui/input.mjs";import{Label as r}from"./ui/label.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,disabled:p})=>{let m=a(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=t(),b=c(h.store,({isSubmitting:e})=>e),x=_.meta.isTouched&&!_.meta.isValid,S=i(({target:{value:e}})=>{b\|\|f&&e.length>f\|\|y(e\|\|null)},[b,f,y]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(r,{htmlFor:m,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(n,{id:m,name:g,value:_.value??``,"aria-invalid":x,placeholder:u,autoComplete:`off`,disabled:p\|\|b,onBlur:v,onChange:S}),x&&o(e,{errors:_.meta.errors})]})};export{l as SimpleTextField};
2	+ //# sourceMappingURL=simple-text-field-DJl5SIGn.mjs.map

package/dist/{simple-text-field-DK72_OA_.mjs.map → simple-text-field-DJl5SIGn.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-text-field-~~DK72_OA_~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Input\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n autoComplete=\"off\"\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~kUAcA~~,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-text-field-DJl5SIGn.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Input\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n autoComplete=\"off\"\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"wRAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-text-field-DPXqNCXh.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./ui/input.cjs"),t=require("./tanstack-form-DCB2addt.cjs"),n=require("./ui/label.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,placeholder:s,required:c,maxLength:l,disabled:u})=>{let d=(0,r.useId)(),{form:f,name:p,state:m,handleBlur:h,handleChange:g}=t.rt(),_=(0,a.useStore)(f.store,({isSubmitting:e})=>e),v=m.meta.isTouched&&!m.meta.isValid,y=(0,r.useCallback)(({target:{value:e}})=>{_\|\|l&&e.length>l\|\|g(e\|\|null)},[_,l,g]);return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(n.Label,{htmlFor:d,children:[o,c&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(e.Input,{id:d,name:p,value:m.value??``,"aria-invalid":v,placeholder:s,autoComplete:`off`,disabled:u\|\|_,onBlur:h,onChange:y}),v&&(0,i.jsx)(t.Y,{errors:m.meta.errors})]})};exports.SimpleTextField=o;
2	+ //# sourceMappingURL=simple-text-field-DPXqNCXh.cjs.map

package/dist/{simple-text-field-BHkCPiE5.cjs.map → simple-text-field-DPXqNCXh.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-text-field-~~BHkCPiE5~~.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Input\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n autoComplete=\"off\"\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~kOAcA~~,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,~~EAAuC~~,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,~~WAAD~~,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-text-field-DPXqNCXh.cjs","names":["useTanStackFieldContext","Label","Input","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-text-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\nimport type { SimpleTextFieldProps as Props } from '../../types';\n\nexport const SimpleTextField: React.FC<Props> = ({ label, placeholder, required, maxLength, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Input\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n autoComplete=\"off\"\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"gMAcA,MAAa,GAAoC,CAAE,QAAO,cAAa,WAAU,YAAW,cAAe,CACzG,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACb,aAAa,MACb,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-textarea-field-BcHdUMTK.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Y as e,rt as t}from"./tanstack-form-BhKAn9I0.mjs";import{Label as n}from"./ui/label.mjs";import{Textarea as r}from"./ui/textarea.mjs";import{useCallback as i,useId as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{useStore as c}from"@tanstack/react-form";const l=({label:l,placeholder:u,required:d,maxLength:f,rows:p,disabled:m})=>{let h=a(),{form:g,name:_,state:v,handleBlur:y,handleChange:b}=t(),x=c(g.store,({isSubmitting:e})=>e),S=v.meta.isTouched&&!v.meta.isValid,C=i(({target:{value:e}})=>{x\|\|f&&e.length>f\|\|b(e\|\|null)},[x,f,b]);return s(`div`,{className:`flex flex-col gap-1.5`,children:[l&&s(n,{htmlFor:h,children:[l,d&&o(`span`,{className:`text-danger-strong`,children:`*`})]}),o(r,{id:h,name:_,value:v.value??``,"aria-invalid":S,placeholder:u,rows:p,disabled:m\|\|x,onBlur:y,onChange:C}),S&&o(e,{errors:v.meta.errors})]})};export{l as SimpleTextareaField};
2	+ //# sourceMappingURL=simple-textarea-field-BcHdUMTK.mjs.map

package/dist/{simple-textarea-field-B72nNQHv.mjs.map → simple-textarea-field-BcHdUMTK.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-textarea-field-~~B72nNQHv~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n maxLength?: number;\n rows?: number;\n disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Textarea\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n rows={rows}\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~wUAqBA~~,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-textarea-field-BcHdUMTK.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n maxLength?: number;\n rows?: number;\n disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Textarea\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n rows={rows}\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"8RAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,GACC,EAAC,EAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,GAAY,EAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,IAET,EAAC,EAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,GAAY,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/simple-textarea-field-ZpXPwYz-.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./tanstack-form-DCB2addt.cjs"),t=require("./ui/label.cjs"),n=require("./ui/textarea.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,placeholder:s,required:c,maxLength:l,rows:u,disabled:d})=>{let f=(0,r.useId)(),{form:p,name:m,state:h,handleBlur:g,handleChange:_}=e.rt(),v=(0,a.useStore)(p.store,({isSubmitting:e})=>e),y=h.meta.isTouched&&!h.meta.isValid,b=(0,r.useCallback)(({target:{value:e}})=>{v\|\|l&&e.length>l\|\|_(e\|\|null)},[v,l,_]);return(0,i.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[o&&(0,i.jsxs)(t.Label,{htmlFor:f,children:[o,c&&(0,i.jsx)(`span`,{className:`text-danger-strong`,children:`*`})]}),(0,i.jsx)(n.Textarea,{id:f,name:m,value:h.value??``,"aria-invalid":y,placeholder:s,rows:u,disabled:d\|\|v,onBlur:g,onChange:b}),y&&(0,i.jsx)(e.Y,{errors:h.meta.errors})]})};exports.SimpleTextareaField=o;
2	+ //# sourceMappingURL=simple-textarea-field-ZpXPwYz-.cjs.map

package/dist/{simple-textarea-field-Bu5h7sfH.cjs.map → simple-textarea-field-ZpXPwYz-.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"simple-textarea-field-~~Bu5h7sfH.~~cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n maxLength?: number;\n rows?: number;\n disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Textarea\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n rows={rows}\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"~~qOAqBA~~,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,~~EAAuC~~,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,~~WAAD~~,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}
1	+ {"version":3,"file":"simple-textarea-field-ZpXPwYz-.cjs","names":["useTanStackFieldContext","Label","Textarea","FieldError"],"sources":["../packages/components/features/tanstack-form/components/atoms/simple-textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { Textarea } from '@/components/ui/textarea';\nimport { Label } from '@/components/ui/label';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { FieldError } from '../ui/field';\n\ntype Props = {\n label?: string;\n placeholder?: string;\n required?: boolean;\n maxLength?: number;\n rows?: number;\n disabled?: boolean;\n};\n\nexport const SimpleTextareaField: React.FC<Props> = ({ label, placeholder, required, maxLength, rows, disabled }) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isTouched && !state.meta.isValid;\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n if (maxLength && value.length > maxLength) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, maxLength, handleChange]\n );\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <Label htmlFor={id}>\n {label}\n {required && <span className=\"text-danger-strong\">*</span>}\n </Label>\n )}\n <Textarea\n id={id}\n name={name}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n placeholder={placeholder}\n rows={rows}\n disabled={disabled \|\| isSubmitting}\n onBlur={handleBlur}\n onChange={onChange}\n />\n {_invalid && <FieldError errors={state.meta.errors} />}\n </div>\n );\n};\n"],"mappings":"mMAqBA,MAAa,GAAwC,CAAE,QAAO,cAAa,WAAU,YAAW,OAAM,cAAe,CACnH,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,GAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAE/C,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEA,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACG,IACC,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,QAAS,EAAhB,SAAA,CACG,EACA,IAAY,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,SAAA,GAAO,CAAA,CACpD,KAET,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CACM,KACE,OACN,MAAO,EAAM,OAAS,GACtB,eAAc,EACD,cACP,OACN,SAAU,GAAY,EACtB,OAAQ,EACE,UACX,CAAA,EACA,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAClD,GAET"}

package/dist/switch-field-CCDuDdpf.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./tanstack-form-DCB2addt.cjs");let t=require("@customafk/react-toolkit/utils"),n=require("react/jsx-runtime"),r=require("radix-ui");function i({className:e,...i}){return(0,n.jsx)(r.Switch.Root,{"data-slot":`switch`,className:(0,t.cn)(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...i,children:(0,n.jsx)(r.Switch.Thumb,{"data-slot":`switch-thumb`,className:(0,t.cn)(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const a=({label:t,description:r,helperText:a})=>{let o=e.rt();return(0,n.jsxs)(e.X,{className:`gap-y-4 px-4`,children:[(0,n.jsxs)(e.G,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[(0,n.jsxs)(e.K,{children:[(0,n.jsx)(e.tt,{className:`cursor-pointer`,children:(0,n.jsx)(`label`,{htmlFor:o.name,children:t})}),(0,n.jsx)(e.J,{children:r}),(0,n.jsx)(i,{id:o.name,checked:o.state.value??!1,className:`absolute top-1 right-1`,onBlur:o.handleBlur,onCheckedChange:o.handleChange})]}),(0,n.jsx)(e.$,{isShow:!!a,children:a})]}),(0,n.jsx)(e.et,{})]})};exports.SwitchField=a;
2	+ //# sourceMappingURL=switch-field-CCDuDdpf.cjs.map

package/dist/{switch-field-eLVlQZSI.cjs.map → switch-field-CCDuDdpf.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch-field-~~eLVlQZSI~~.cjs","names":["SwitchPrimitive","useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldTitle","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n \n @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n \n <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n /\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n 'inline-flex h-5',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n\n '-outline-offset-1 inset-shadow-2xs outline-1',\n\n 'data-[state=checked]:bg-primary',\n 'data-[state=checked]:outline-primary-strong',\n\n 'data-[state=unchecked]:bg-muted-weak',\n 'data-[state=unchecked]:outline-border',\n\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'block size-4 bg-card shadow-xs',\n 'pointer-events-none rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/\n A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n \n @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"notifications\">\n * {() => (\n * <SwitchField\n * label=\"Enable notifications\"\n * description=\"Receive email alerts for important events\"\n * helperText=\"You can change this at any time\"\n * />\n * )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n const field = useTanStackFieldContext<boolean \| null>();\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n <FieldContent>\n <FieldTitle className=\"cursor-pointer\">\n <label htmlFor={field.name}>{label}</label>\n </FieldTitle>\n <FieldDescription>{description}</FieldDescription>\n <Switch\n id={field.name}\n checked={field.state.value ?? false}\n className=\"absolute top-1 right-1\"\n onBlur={field.handleBlur}\n onCheckedChange={field.handleChange}\n />\n </FieldContent>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"~~uLAcA~~,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,KAAjB,CACE,YAAU,SACV,WAAA,EAAA,EAAA,GAAA,CACE,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,MAAjB,CACE,YAAU,eACV,WAAA,EAAA,EAAA,GAAA,CACE,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQC,EAAAA,~~EAAwC~~,EAEtD,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,~~WAAD~~,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,~~MAAD~~,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,~~aAAD~~,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,~~WAAD~~,CAAY,UAAU,iBACpB,UAAA,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,~~iBAAD~~,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,~~UAAD~~,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,~~eAAD~~,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"switch-field-CCDuDdpf.cjs","names":["SwitchPrimitive","useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldTitle","FieldDescription","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n \n @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n \n <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n /\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n 'inline-flex h-5',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n\n '-outline-offset-1 inset-shadow-2xs outline-1',\n\n 'data-[state=checked]:bg-primary',\n 'data-[state=checked]:outline-primary-strong',\n\n 'data-[state=unchecked]:bg-muted-weak',\n 'data-[state=unchecked]:outline-border',\n\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'block size-4 bg-card shadow-xs',\n 'pointer-events-none rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/\n A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n \n @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"notifications\">\n * {() => (\n * <SwitchField\n * label=\"Enable notifications\"\n * description=\"Receive email alerts for important events\"\n * helperText=\"You can change this at any time\"\n * />\n * )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n const field = useTanStackFieldContext<boolean \| null>();\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n <FieldContent>\n <FieldTitle className=\"cursor-pointer\">\n <label htmlFor={field.name}>{label}</label>\n </FieldTitle>\n <FieldDescription>{description}</FieldDescription>\n <Switch\n id={field.name}\n checked={field.state.value ?? false}\n className=\"absolute top-1 right-1\"\n onBlur={field.handleBlur}\n onCheckedChange={field.handleChange}\n />\n </FieldContent>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"qJAcA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,KAAjB,CACE,YAAU,SACV,WAAA,EAAA,EAAA,GAAA,CACE,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,MAAjB,CACE,YAAU,eACV,WAAA,EAAA,EAAA,GAAA,CACE,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQC,EAAAA,GAAwC,EAEtD,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAY,UAAU,iBACpB,UAAA,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,GACd,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,GAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/switch-field-DBGFsmEZ.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{$ as e,G as t,J as n,K as r,X as i,et as a,rt as o,tt as s}from"./tanstack-form-BhKAn9I0.mjs";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{Switch as d}from"radix-ui";function f({className:e,...t}){return l(d.Root,{"data-slot":`switch`,className:c(`peer`,`w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all`,`inline-flex h-5`,`focus-visible:border-primary-strong`,`focus-visible:ring-primary-weak`,`focus-visible:ring-4`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,`-outline-offset-1 inset-shadow-2xs outline-1`,`data-[state=checked]:bg-primary`,`data-[state=checked]:outline-primary-strong`,`data-[state=unchecked]:bg-muted-weak`,`data-[state=unchecked]:outline-border`,`data-[state=unchecked]:[&_span]:size-4`,`data-[state=unchecked]:[&_span]:translate-x-0.5`,`data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5`,e),...t,children:l(d.Thumb,{"data-slot":`switch-thumb`,className:c(`block size-4 bg-card shadow-xs`,`pointer-events-none rounded-full ring-0 transition-transform`,`data-[state=checked]:translate-x-[calc(100%-3px)]`,`data-[state=unchecked]:translate-x-0`)})})}const p=({label:c,description:d,helperText:p})=>{let m=o();return u(i,{className:`gap-y-4 px-4`,children:[u(t,{orientation:`vertical`,className:`relative justify-between gap-y-1`,children:[u(r,{children:[l(s,{className:`cursor-pointer`,children:l(`label`,{htmlFor:m.name,children:c})}),l(n,{children:d}),l(f,{id:m.name,checked:m.state.value??!1,className:`absolute top-1 right-1`,onBlur:m.handleBlur,onCheckedChange:m.handleChange})]}),l(e,{isShow:!!p,children:p})]}),l(a,{})]})};export{p as SwitchField};
2	+ //# sourceMappingURL=switch-field-DBGFsmEZ.mjs.map

package/dist/{switch-field-DoPUWb9d.mjs.map → switch-field-DBGFsmEZ.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch-field-~~DoPUWb9d~~.mjs","names":["Switch","SwitchPrimitive","Switch"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n \n @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n \n <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n /\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n 'inline-flex h-5',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n\n '-outline-offset-1 inset-shadow-2xs outline-1',\n\n 'data-[state=checked]:bg-primary',\n 'data-[state=checked]:outline-primary-strong',\n\n 'data-[state=unchecked]:bg-muted-weak',\n 'data-[state=unchecked]:outline-border',\n\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'block size-4 bg-card shadow-xs',\n 'pointer-events-none rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/\n A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n \n @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"notifications\">\n * {() => (\n * <SwitchField\n * label=\"Enable notifications\"\n * description=\"Receive email alerts for important events\"\n * helperText=\"You can change this at any time\"\n * />\n * )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n const field = useTanStackFieldContext<boolean \| null>();\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n <FieldContent>\n <FieldTitle className=\"cursor-pointer\">\n <label htmlFor={field.name}>{label}</label>\n </FieldTitle>\n <FieldDescription>{description}</FieldDescription>\n <Switch\n id={field.name}\n checked={field.state.value ?? false}\n className=\"absolute top-1 right-1\"\n onBlur={field.handleBlur}\n onCheckedChange={field.handleChange}\n />\n </FieldContent>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"~~iVAcA~~,SAASA,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACC,EAAgB,KAAjB,CACE,YAAU,SACV,UAAW,EACT,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,SAAA,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQ,EAAwC,EAEtD,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,UAAU,iBACpB,SAAA,EAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAACC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"switch-field-DBGFsmEZ.mjs","names":["Switch","SwitchPrimitive","Switch"],"sources":["../packages/components/features/tanstack-form/components/ui/switch.tsx","../packages/components/features/tanstack-form/components/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI, styled with primary-color checked state and smooth thumb transition.\n \n @example\n * import { Switch } from '@customafk/lunas-ui/features/tanstack-form';\n \n <Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />\n /\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full shadow-xs transition-all',\n 'inline-flex h-5',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n\n '-outline-offset-1 inset-shadow-2xs outline-1',\n\n 'data-[state=checked]:bg-primary',\n 'data-[state=checked]:outline-primary-strong',\n\n 'data-[state=unchecked]:bg-muted-weak',\n 'data-[state=unchecked]:outline-border',\n\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'block size-4 bg-card shadow-xs',\n 'pointer-events-none rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n","'use client';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldGroup, FieldNote, FieldSeparator, FieldTitle } from '../ui/field';\nimport { Switch } from '../ui/switch';\n\nimport type { SwitchFieldProps as Props } from '../../types';\n\n/\n A TanStack Form-connected boolean toggle field rendered as a labelled switch,\n * positioned absolutely in the top-right corner of the field card.\n \n @example\n * import { SwitchField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"notifications\">\n * {() => (\n * <SwitchField\n * label=\"Enable notifications\"\n * description=\"Receive email alerts for important events\"\n * helperText=\"You can change this at any time\"\n * />\n * )}\n * </form.Field>\n */\nexport const SwitchField: React.FC<Props> = ({ label, description, helperText }) => {\n const field = useTanStackFieldContext<boolean \| null>();\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation=\"vertical\" className=\"relative justify-between gap-y-1\">\n <FieldContent>\n <FieldTitle className=\"cursor-pointer\">\n <label htmlFor={field.name}>{label}</label>\n </FieldTitle>\n <FieldDescription>{description}</FieldDescription>\n <Switch\n id={field.name}\n checked={field.state.value ?? false}\n className=\"absolute top-1 right-1\"\n onBlur={field.handleBlur}\n onCheckedChange={field.handleChange}\n />\n </FieldContent>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"6OAcA,SAASA,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACC,EAAgB,KAAjB,CACE,YAAU,SACV,UAAW,EACT,OACA,iFACA,kBACA,sCACA,kCACA,uBACA,8BACA,sBAEA,+CAEA,kCACA,8CAEA,uCACA,wCAEA,yCACA,kDACA,uDACA,CACF,EACA,GAAI,EAEJ,SAAA,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,iCACA,+DACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B,CC7BA,MAAa,GAAgC,CAAE,QAAO,cAAa,gBAAiB,CAClF,IAAM,EAAQ,EAAwC,EAEtD,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,YAAY,WAAW,UAAU,mCAAxC,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,UAAU,iBACpB,SAAA,EAAC,QAAD,CAAO,QAAS,EAAM,KAAO,SAAA,CAAa,CAAA,CAChC,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAACC,EAAD,CACE,GAAI,EAAM,KACV,QAAS,EAAM,MAAM,OAAS,GAC9B,UAAU,yBACV,OAAQ,EAAM,WACd,gBAAiB,EAAM,YACxB,CAAA,CACW,CAAA,CAAA,EACd,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACnD,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/tanstack-form-BhKAn9I0.mjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{Skeleton as e}from"./ui/skeleton.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{t as i}from"./text-editor-XBOAwJk-.mjs";import{Separator as a}from"./ui/separator.mjs";import{HelpCircleIcon as o,InfoIcon as ee}from"lucide-react";import{Suspense as s,lazy as c,memo as l,useCallback as te,useMemo as u}from"react";import{cn as d}from"@customafk/react-toolkit/utils";import{cva as f}from"class-variance-authority";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{Label as h}from"radix-ui";import{createFormHook as g,createFormHookContexts as _,useStore as ne}from"@tanstack/react-form";var v=Object.defineProperty,y=(e,t)=>{let n={};for(var r in e)v(n,r,{get:e[r],enumerable:!0});return t\|\|v(n,Symbol.toStringTag,{value:`Module`}),n};const{fieldContext:b,formContext:x,useFieldContext:S,useFormContext:C}=_();function w({className:e,children:t,...n}){return m(h.Root,{"data-slot":`label`,className:d(`text-text-positive`,`flex w-full items-center justify-between`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,`aria-required::data-[slot=required-indicator]:inline-block`,e),...n,children:[p(`span`,{className:`flex items-center gap-1`,children:t}),p(`span`,{"data-slot":`required-indicator`,className:`hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white`,children:`Bắt buộc`})]})}var T=y({Field:()=>A,FieldContent:()=>j,FieldContentMain:()=>M,FieldDescription:()=>F,FieldError:()=>z,FieldGroup:()=>k,FieldLabel:()=>N,FieldLegend:()=>O,FieldNote:()=>I,FieldSeparator:()=>R,FieldSet:()=>D,FieldTitle:()=>P,FieldTooltip:()=>L});const E=f(`group/field flex w-full gap-2 data-[invalid=true]:text-danger :data-[slot=field-content]:gap-0`,{variants:{orientation:{vertical:[`flex-col :w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center gap-4`,`:data-[slot=field-content]:basis-1/2`,`:data-[slot=field-content-main]:flex-1`,`:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col :w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:gap-4`,`@md/field-group::w-auto`,`@md/field-group::data-[slot=field-content]:basis-1/2`,`@md/field-group::data-[slot=field-content-main]:basis-1/2`,`@md/field-group::data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),D=l(({className:e,...t})=>p(`fieldset`,{"data-slot":`field-set`,className:d(`flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));D.displayName=`FieldSet`;const O=l(({className:e,variant:t=`legend`,...n})=>p(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:d(`mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base`,e),...n}));O.displayName=`FieldLegend`;const k=l(({className:e,...t})=>p(`div`,{"data-slot":`field-group`,className:d(`group/field-group @container/field-group`,`flex flex-col gap-7 pt-4`,`data-[slot=checkbox-group]:gap-3 :data-[slot=field-group]:gap-4`,e),...t}));k.displayName=`FieldGroup`;const A=l(({className:e,orientation:t=`vertical`,...n})=>p(`div`,{"data-slot":`field`,"data-orientation":t,className:d(E({orientation:t}),e),...n}));A.displayName=`Field`;const j=l(({className:e,...t})=>p(`div`,{"data-slot":`field-content`,className:d(`group/field-content flex flex-col gap-1.5 leading-snug`,e),...t}));j.displayName=`FieldContent`;const M=l(({className:e,...t})=>p(`div`,{"data-slot":`field-content-main`,className:d(`relative`,e),...t}));M.displayName=`FieldContentMain`;const N=l(({className:e,...t})=>p(w,{"data-slot":`field-label`,className:d(`group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`has-[>[data-slot=field]]:border-border`,`has-data-[state=checked]:border-primary`,`*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50`,e),...t}));N.displayName=`FieldLabel`;const P=l(({className:e,...t})=>p(`div`,{"data-slot":`field-label`,className:d(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));P.displayName=`FieldTitle`;const F=l(({className:e,...t})=>p(`p`,{"data-slot":`field-description`,className:d(`nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5`,e),...t}));F.displayName=`FieldDescription`;const I=l(({isShow:e=!0,className:t,children:n,...r})=>e===!1?null:m(`div`,{"data-slot":`field-note`,className:d(`flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs mt-1`,t),...r,children:[p(ee,{size:12,className:`mt-0.5 shrink-0 text-primary/70`}),p(`span`,{children:n})]}));I.displayName=`FieldNote`;const L=l(({tooltip:e})=>m(t,{children:[p(r,{asChild:!0,children:m(`button`,{type:`button`,tabIndex:-1,className:`inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none`,children:[p(o,{size:13,"aria-hidden":`true`}),p(`span`,{className:`sr-only`,children:`Thêm thông tin`})]})}),p(n,{side:`top`,className:`max-w-xs text-balance`,children:e})]}));L.displayName=`FieldTooltip`;const R=l(({children:e,className:t,...n})=>m(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:d(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,t),...n,children:[p(a,{className:`absolute inset-0 top-1/2`}),e&&p(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));R.displayName=`FieldSeparator`;const z=l(({className:e,children:t,errors:n,requiredMessage:r=`Trường này là bắt buộc`,...i})=>{let a=u(()=>{let e=e=>e.code===`invalid_type`?r:e.message;return t\|\|(n?n?.length===1&&n[0]?.message?p(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:p(`p`,{children:e(n[0])})}):p(`ul`,{className:`flex list-none flex-col`,children:n.map(t=>typeof t==`string`?p(`li`,{children:t},t):t?.message?p(`li`,{children:e(t)},t.code??t.message):null)}):null)},[t,n,r]);return a?p(`div`,{role:`alert`,"data-slot":`field-error`,className:d(`w-full font-medium text-danger-strong text-xs`,e),...i,children:a}):null});z.displayName=`FieldError`;const B=l(({label:e,description:t,placeholder:n,tooltip:r,helperText:a,showErrorMessage:o=!0,required:ee=!1,maxLength:s,showCharacterCount:c,enableLink:l,enableBubbleMenu:u,enableTaskList:d,enableHighlight:f,enableColor:h,enableImage:g,enableTable:_,enableSlashCommand:v,onImageUpload:y,variant:b,size:x})=>{let{form:C,state:w,handleChange:T}=S(),E=ne(C.store,({isSubmitting:e})=>e),D=w.meta.isDirty&&w.meta.isTouched&&!w.meta.isValid,O=ee&&w.value===null,M=te(e=>{E\|\|T(e\|\|null)},[E,T]);return m(k,{className:`gap-y-4 px-4`,children:[m(A,{orientation:`vertical`,"data-invalid":D,children:[m(j,{children:[m(N,{"aria-required":O,children:[e,r&&p(L,{tooltip:r})]}),p(F,{children:t})]}),p(i,{value:w.value??``,placeholder:n,readOnly:E,onChange:M,maxLength:s,showCharacterCount:c,enableLink:l,enableBubbleMenu:u,enableTaskList:d,enableHighlight:f,enableColor:h,enableImage:g,enableTable:_,enableSlashCommand:v,onImageUpload:y,variant:b,size:x}),w.meta.isDirty&&o&&!!w.meta.errors.length&&p(z,{errors:w.meta.errors}),p(I,{isShow:!!a,children:a})]}),p(R,{})]})});B.displayName=`TextEditorField`;function V(){return p(e,{"data-slot":`tanstack-field-skeleton`,className:`h-9 w-full rounded`})}function H(e){let t=c(e);return e=>p(s,{fallback:p(V,{}),children:p(t,{...e})})}const U=H(()=>import(`./text-field-Bx_vnc4O.mjs`).then(e=>({default:e.TextField}))),W=H(()=>import(`./textarea-field-Cim3l0y8.mjs`).then(e=>({default:e.TextareaField}))),G=H(()=>import(`./number-field-CVemIwIg.mjs`).then(e=>({default:e.NumberField}))),K=H(()=>import(`./email-field-BVl7u9pR.mjs`).then(e=>({default:e.EmailField}))),q=H(()=>import(`./password-field-BxYaT8lO.mjs`).then(e=>({default:e.PasswordField}))),J=H(()=>import(`./select-field-D7Ny2Qne.mjs`).then(e=>({default:e.SelectField}))),Y=H(()=>import(`./combobox-field-ebIvbhJn.mjs`).then(e=>({default:e.ComboboxField}))),X=H(()=>import(`./date-field-CNkxebta.mjs`).then(e=>({default:e.DateField}))),Z=H(()=>import(`./switch-field-DBGFsmEZ.mjs`).then(e=>({default:e.SwitchField}))),Q=H(()=>import(`./radio-group-field-DYqU_6hW.mjs`).then(e=>({default:e.RadioGroupField}))),$=H(()=>import(`./checkbox-field-DodKeFS_.mjs`).then(e=>({default:e.CheckboxField}))),re=H(()=>import(`./simple-text-field-DJl5SIGn.mjs`).then(e=>({default:e.SimpleTextField}))),ie=H(()=>import(`./simple-email-field-CKDQgzh5.mjs`).then(e=>({default:e.SimpleEmailField}))),ae=H(()=>import(`./simple-password-field-Cnj-hf5g.mjs`).then(e=>({default:e.SimplePasswordField}))),oe=H(()=>import(`./simple-textarea-field-BcHdUMTK.mjs`).then(e=>({default:e.SimpleTextareaField}))),se=H(()=>import(`./simple-number-field-SDbxL6L7.mjs`).then(e=>({default:e.SimpleNumberField}))),ce=H(()=>import(`./simple-select-field-C0ecQx68.mjs`).then(e=>({default:e.SimpleSelectField}))),le=c(()=>import(`./simple-array-field-DJXa_vST.mjs`).then(e=>({default:e.SimpleArrayField})));function ue(e){return p(s,{fallback:p(V,{}),children:p(le,{...e})})}const de=H(()=>import(`./simple-boolean-field-CVNT8NBk.mjs`).then(e=>({default:e.SimpleBooleanField}))),fe=H(()=>import(`./simple-combobox-field-BnAUDfQU.mjs`).then(e=>({default:e.SimpleComboboxField}))),pe=H(()=>import(`./simple-date-field-DIa6UBF2.mjs`).then(e=>({default:e.SimpleDateField}))),me=H(()=>import(`./simple-radio-group-field-4-eWSXY7.mjs`).then(e=>({default:e.SimpleRadioGroupField}))),he=H(()=>import(`./simple-array-field-DJXa_vST.mjs`).then(e=>({default:e.ArrayCol}))),ge=H(()=>import(`./simple-array-field-DJXa_vST.mjs`).then(e=>({default:e.ArrayHeaderRow}))),_e=H(()=>import(`./dialog-form-zK6Gk9Gk.mjs`).then(e=>({default:e.TanStackDialogForm}))),ve=H(()=>import(`./popover-form-C9mNInr2.mjs`).then(e=>({default:e.TanStackPopoverForm}))),ye=H(()=>import(`./container-form-BjiGIzwm.mjs`).then(e=>({default:e.TanStackContainerForm}))),be=H(()=>import(`./section-form-BJWWflUR.mjs`).then(e=>({default:e.TanStackSectionForm}))),xe=H(()=>import(`./card-form-D9fNO-6F.mjs`).then(e=>({default:e.TanStackCardForm}))),Se=H(()=>import(`./group-field-8nINgAeO.mjs`).then(e=>({default:e.TanStackFieldGroup}))),Ce=H(()=>import(`./title-field-2dABwspv.mjs`).then(e=>({default:e.TanStackTitleField}))),we=H(()=>import(`./actions-form-CB0lZlE6.mjs`).then(e=>({default:e.TanStackActionsForm}))),Te=H(()=>import(`./action-submit-DyNvI-F2.mjs`).then(e=>({default:e.TanStackActionSubmit}))),Ee=H(()=>Promise.resolve().then(()=>T).then(e=>({default:e.FieldGroup}))),De=H(()=>Promise.resolve().then(()=>T).then(e=>({default:e.Field}))),Oe=H(()=>Promise.resolve().then(()=>T).then(e=>({default:e.FieldContent}))),ke=H(()=>Promise.resolve().then(()=>T).then(e=>({default:e.FieldLabel}))),Ae=H(()=>Promise.resolve().then(()=>T).then(e=>({default:e.FieldContentMain}))),je=H(()=>Promise.resolve().then(()=>T).then(e=>({default:e.FieldSeparator}))),Me=H(()=>Promise.resolve().then(()=>T).then(e=>({default:e.FieldError}))),{useAppForm:Ne,withForm:Pe,withFieldGroup:Fe}=g({fieldContext:b,formContext:x,fieldComponents:{TextField:U,TextareaField:W,TextEditorField:B,NumberField:G,EmailField:K,PasswordField:q,SelectField:J,ComboboxField:Y,DateField:X,SwitchField:Z,RadioGroupField:Q,CheckboxField:$,SimpleTextField:re,SimpleEmailField:ie,SimplePasswordField:ae,SimpleTextareaField:oe,SimpleNumberField:se,SimpleSelectField:ce,SimpleArrayField:ue,SimpleBooleanField:de,SimpleComboboxField:fe,SimpleDateField:pe,SimpleRadioGroupField:me,FieldGroup:Ee,Field:De,FieldContent:Oe,FieldLabel:ke,FieldContentMain:Ae,FieldSeparator:je,FieldError:Me},formComponents:{TanStackDialogForm:_e,TanStackPopoverForm:ve,TanStackContainerForm:ye,TanStackSectionForm:be,TanStackCardForm:xe,TanStackFieldGroup:Se,TanStackTitleField:Ce,TanStackActionsForm:we,TanStackActionSubmit:Te,ArrayCol:he,ArrayHeaderRow:ge}});export{I as $,Te as A,W as B,se as C,re as D,ce as E,Se as F,A as G,Fe as H,ve as I,F as J,j as K,be as L,xe as M,ye as N,oe as O,_e as P,O as Q,Ce as R,ie as S,me as T,Pe as U,Ne as V,B as W,k as X,z as Y,N as Z,J as _,X as a,fe as b,Oe as c,Ee as d,R as et,ke as f,Q as g,q as h,Y as i,C as it,we as j,Z as k,Ae as l,G as m,ge as n,L as nt,K as o,je as p,M as q,$ as r,S as rt,De as s,he as t,P as tt,Me as u,ue as v,ae as w,pe as x,de as y,U as z};
2	+ //# sourceMappingURL=tanstack-form-BhKAn9I0.mjs.map

package/dist/tanstack-form-BhKAn9I0.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tanstack-form-BhKAn9I0.mjs","names":["Label","LabelPrimitive","FieldGroup","Field","FieldContent","FieldContentMain","FieldLabel","Label","Tooltip","FieldSeparator","Separator","FieldError","FieldGroup","Field","FieldContent","FieldLabel","FieldError","FieldSeparator","Impl"],"sources":["../packages/components/features/tanstack-form/components/form-context.ts","../packages/components/features/tanstack-form/components/ui/label.tsx","../packages/components/features/tanstack-form/components/ui/field.tsx","../packages/components/features/tanstack-form/components/fields/text-editor-field.tsx","../packages/components/features/tanstack-form/tanstack-form.tsx"],"sourcesContent":["'use client';\n\nimport { createFormHookContexts } from '@tanstack/react-form';\n\n/**\n * Shared field/form contexts, split out from `tanstack-form.tsx` so that field and form\n * components can depend on them directly instead of importing back through the file that\n * lazy-loads those same components (which would reintroduce a circular import).\n */\nexport const { fieldContext, formContext, useFieldContext: useTanStackFieldContext, useFormContext: useTanStackFormContext } = createFormHookContexts();\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Label as LabelPrimitive } from 'radix-ui';\n\n/**\n * Form field label that automatically renders a \"Required\" badge when the field is marked aria-required.\n *\n * @example\n * import { Label } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Label htmlFor=\"email\">Email address</Label>\n */\nfunction Label({ className, children, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n return (\n <LabelPrimitive.Root\n data-slot=\"label\"\n className={cn(\n 'text-text-positive',\n 'flex w-full items-center justify-between',\n 'select-none font-medium text-sm/6 leading-none',\n 'group-data-[disabled=true]:pointer-events-none',\n 'group-data-[disabled=true]:opacity-50',\n 'peer-disabled:cursor-not-allowed',\n 'peer-disabled:opacity-50',\n 'aria-required:*:data-[slot=required-indicator]:inline-block',\n className\n )}\n {...props}\n >\n <span className=\"flex items-center gap-1\">{children}</span>\n <span\n data-slot=\"required-indicator\"\n className=\"hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white\"\n >\n Bắt buộc\n </span>\n </LabelPrimitive.Root>\n );\n}\n\nexport { Label };\n","'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { HelpCircleIcon, InfoIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator } from '@/components/ui/separator';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Label } from './label';\n\nconst fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-danger *:data-[slot=field-content]:gap-0', {\n variants: {\n orientation: {\n vertical: ['flex-col *:w-full [&>.sr-only]:w-auto'],\n horizontal: [\n 'flex-row items-center gap-4',\n '*:data-[slot=field-content]:basis-1/2',\n '*:data-[slot=field-content-main]:flex-1',\n '*:data-[slot=field-label]:flex-auto',\n 'has-[>[data-slot=field-content]]:items-start',\n 'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n ],\n responsive: [\n 'flex-col *:w-full [&>.sr-only]:w-auto',\n '@md/field-group:flex-row',\n '@md/field-group:items-center',\n '@md/field-group:gap-4',\n '@md/field-group:*:w-auto',\n '@md/field-group:*:data-[slot=field-content]:basis-1/2',\n '@md/field-group:*:data-[slot=field-content-main]:basis-1/2',\n '@md/field-group:*:data-[slot=field-label]:flex-auto',\n '@md/field-group:has-[>[data-slot=field-content]]:items-start',\n '@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n ],\n },\n },\n defaultVariants: {\n orientation: 'vertical',\n },\n});\n\n/**\n * Outermost `<fieldset>` wrapper that stacks multiple `Field` rows with consistent vertical spacing.\n *\n * @example\n * import { FieldSet } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSet>\n * <Field><FieldLabel>Name</FieldLabel><FieldContent><input /></FieldContent></Field>\n * </FieldSet>\n */\nconst FieldSet = memo(({ className, ...props }: React.ComponentProps<'fieldset'>) => {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn('flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}\n {...props}\n />\n );\n});\nFieldSet.displayName = 'FieldSet';\n\n/**\n * Props for {@link FieldLegend}.\n */\ntype FieldLegendProps = React.ComponentProps<'legend'> & {\n /**\n * Visual weight of the legend text.\n * - `'legend'` — larger base-size text (section heading).\n * - `'label'` — smaller label-size text (matches field label weight).\n * @default 'legend'\n */\n variant?: 'legend' | 'label';\n};\n\n/**\n * `<legend>` element for a `<fieldset>`, styled as either a section heading or a compact label.\n *\n * @example\n * import { FieldSet, FieldLegend } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSet>\n * <FieldLegend variant=\"legend\">Personal details</FieldLegend>\n * </FieldSet>\n */\nconst FieldLegend = memo(({ className, variant = 'legend', ...props }: FieldLegendProps) => {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn('mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className)}\n {...props}\n />\n );\n});\nFieldLegend.displayName = 'FieldLegend';\n\n/**\n * Container `<div>` that groups a set of `Field` rows with container-query support for responsive layouts.\n *\n * @example\n * import { FieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldGroup>\n * <Field>…</Field>\n * <Field>…</Field>\n * </FieldGroup>\n */\nconst FieldGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(\n 'group/field-group @container/field-group',\n 'flex flex-col gap-7 pt-4',\n 'data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n className\n )}\n {...props}\n />\n );\n});\nFieldGroup.displayName = 'FieldGroup';\n\n/**\n * Single form field row that arranges label, input, and meta elements with configurable orientation.\n *\n * @example\n * import { Field } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <Field orientation=\"horizontal\">\n * <FieldLabel htmlFor=\"username\">Username</FieldLabel>\n * <FieldContent><input id=\"username\" /></FieldContent>\n * </Field>\n */\nconst Field = memo(({ className, orientation = 'vertical', ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) => {\n return <div data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />;\n});\nField.displayName = 'Field';\n\n/**\n * Flex column wrapper that houses the primary input control together with description and error slots.\n *\n * @example\n * import { FieldContent } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldContent>\n * <input type=\"text\" />\n * <FieldDescription>Enter your full name.</FieldDescription>\n * </FieldContent>\n */\nconst FieldContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"field-content\" className={cn('group/field-content flex flex-col gap-1.5 leading-snug', className)} {...props} />;\n});\nFieldContent.displayName = 'FieldContent';\n\n/**\n * Positioned wrapper for the main input element that enables absolutely-placed adornments (icons, spinners).\n *\n * @example\n * import { FieldContentMain } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldContentMain>\n * <input type=\"text\" className=\"pr-8\" />\n * <SearchIcon className=\"absolute right-2 top-2\" />\n * </FieldContentMain>\n */\nconst FieldContentMain = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"field-content-main\" className={cn('relative', className)} {...props} />;\n});\nFieldContentMain.displayName = 'FieldContentMain';\n\n/**\n * Styled `<label>` element for a `Field`, extending the base `Label` with field-group-aware spacing and border states.\n *\n * @example\n * import { FieldLabel } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldLabel htmlFor=\"email\" aria-required>Email</FieldLabel>\n */\nconst FieldLabel = memo(({ className, ...props }: React.ComponentProps<typeof Label>) => {\n return (\n <Label\n data-slot=\"field-label\"\n className={cn(\n 'group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug',\n 'has-[>[data-slot=field]]:w-full',\n 'has-[>[data-slot=field]]:flex-col',\n 'has-[>[data-slot=field]]:rounded-md',\n 'has-[>[data-slot=field]]:border',\n 'has-[>[data-slot=field]]:border-border',\n 'has-data-[state=checked]:border-primary',\n '*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50',\n className\n )}\n {...props}\n />\n );\n});\nFieldLabel.displayName = 'FieldLabel';\n\n/**\n * Inline title element (non-`<label>`) for fields whose label cannot be a native `<label>`, such as custom checkbox groups.\n *\n * @example\n * import { FieldTitle } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldTitle>Notification preferences</FieldTitle>\n */\nconst FieldTitle = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"field-label\"\n className={cn('flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50', className)}\n {...props}\n />\n );\n});\nFieldTitle.displayName = 'FieldTitle';\n\n/**\n * Supplementary hint text rendered below the input to guide the user, with support for inline anchor links.\n *\n * @example\n * import { FieldDescription } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldDescription>Must be at least 8 characters.</FieldDescription>\n */\nconst FieldDescription = memo(({ className, ...props }: React.ComponentProps<'p'>) => {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(\n // biome-ignore lint/security/noSecrets: true\n 'nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5',\n className\n )}\n {...props}\n />\n );\n});\nFieldDescription.displayName = 'FieldDescription';\n\n/**\n * Props for {@link FieldNote}.\n */\ntype FieldNoteProps = React.ComponentProps<'div'> & {\n /**\n * When `false` the note is not rendered at all; useful for conditional display without wrapper conditionals.\n * @default true\n */\n isShow?: boolean;\n};\n\n/**\n * Highlighted informational callout box with an info icon, shown below a field to surface contextual guidance.\n *\n * @example\n * import { FieldNote } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldNote isShow={isDraftMode}>Changes are saved automatically in draft mode.</FieldNote>\n */\nconst FieldNote = memo(({ isShow = true, className, children, ...props }: FieldNoteProps) => {\n if (isShow === false) return null;\n return (\n <div\n data-slot=\"field-note\"\n className={cn(\n 'flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs mt-1',\n className\n )}\n {...props}\n >\n <InfoIcon size={12} className=\"mt-0.5 shrink-0 text-primary/70\" />\n <span>{children}</span>\n </div>\n );\n});\nFieldNote.displayName = 'FieldNote';\n\n/**\n * Props for {@link FieldTooltip}.\n */\ntype FieldTooltipProps = {\n /** Text content displayed inside the tooltip when the help icon is hovered or focused. */\n tooltip: string;\n};\n\n/**\n * Small help-circle icon button that reveals a tooltip with additional field context on hover or focus.\n *\n * @example\n * import { FieldTooltip } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldLabel>\n * Password <FieldTooltip tooltip=\"Use at least one uppercase letter and one number.\" />\n * </FieldLabel>\n */\nconst FieldTooltip = memo(({ tooltip }: FieldTooltipProps) => {\n return (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n tabIndex={-1}\n className=\"inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none\"\n >\n <HelpCircleIcon size={13} aria-hidden=\"true\" />\n <span className=\"sr-only\">Thêm thông tin</span>\n </button>\n </TooltipTrigger>\n <TooltipContent side=\"top\" className=\"max-w-xs text-balance\">\n {tooltip}\n </TooltipContent>\n </Tooltip>\n );\n});\nFieldTooltip.displayName = 'FieldTooltip';\n\n/**\n * Visual divider row that optionally displays a centered text label, used to separate logical sections within a `FieldGroup`.\n *\n * @example\n * import { FieldSeparator } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <FieldSeparator>or</FieldSeparator>\n */\nconst FieldSeparator = memo(({ children, className, ...props }: React.PropsWithChildren<React.ComponentProps<'div'>>) => {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n {...props}\n >\n <Separator className=\"absolute inset-0 top-1/2\" />\n {children && (\n <span className=\"relative mx-auto block w-fit bg-background px-2 text-text-positive-weak\" data-slot=\"field-separator-content\">\n {children}\n </span>\n )}\n </div>\n );\n});\nFieldSeparator.displayName = 'FieldSeparator';\n\n/**\n * Props for {@link FieldError}.\n */\ntype FieldErrorProps = React.ComponentProps<'div'> & {\n errors?: Array<{ code?: string; message?: string } | undefined>;\n requiredMessage?: string;\n};\n\nconst FieldError = memo(({ className, children, errors, requiredMessage = 'Trường này là bắt buộc', ...props }: FieldErrorProps) => {\n const content = useMemo(() => {\n const resolve = (error: { code?: string; message?: string }) => (error.code === 'invalid_type' ? requiredMessage : error.message);\n\n if (children) {\n return children;\n }\n\n if (!errors) {\n return null;\n }\n\n if (errors?.length === 1 && errors[0]?.message) {\n return (\n <div className=\"flex flex-row items-center justify-start gap-x-0.5\">\n <p>{resolve(errors[0])}</p>\n </div>\n );\n }\n\n return (\n <ul className=\"flex list-none flex-col\">\n {errors.map(error => {\n if (typeof error === 'string') return <li key={error}>{error}</li>;\n if (!error?.message) return null;\n return <li key={error.code ?? error.message}>{resolve(error)}</li>;\n })}\n </ul>\n );\n }, [children, errors, requiredMessage]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div role=\"alert\" data-slot=\"field-error\" className={cn('w-full font-medium text-danger-strong text-xs', className)} {...props}>\n {content}\n </div>\n );\n});\nFieldError.displayName = 'FieldError';\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldNote,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldContentMain,\n FieldTitle,\n FieldTooltip,\n};\n","'use client';\n\nimport { memo, useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { TextEditor } from '@/components/features/text-editor';\n\nimport type { TextEditorFieldProps as Props } from '../../types';\nimport { useTanStackFieldContext } from '../form-context';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldNote, FieldSeparator, FieldTooltip } from '../ui/field';\n\nexport const TextEditorField: React.FC<Props> = memo(\n ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n showErrorMessage = true,\n required = false,\n maxLength,\n showCharacterCount,\n enableLink,\n enableBubbleMenu,\n enableTaskList,\n enableHighlight,\n enableColor,\n enableImage,\n enableTable,\n enableSlashCommand,\n onImageUpload,\n variant,\n size,\n }) => {\n const { form, state, handleChange } = useTanStackFieldContext<string | null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n const _isEmpty = required && state.value === null;\n\n const onChange = useCallback(\n (html: string) => {\n if (isSubmitting) return;\n handleChange(html || null);\n },\n [isSubmitting, handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation=\"vertical\" data-invalid={_invalid}>\n <FieldContent>\n <FieldLabel aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <TextEditor\n value={state.value ?? ''}\n placeholder={placeholder}\n readOnly={isSubmitting}\n onChange={onChange}\n maxLength={maxLength}\n showCharacterCount={showCharacterCount}\n enableLink={enableLink}\n enableBubbleMenu={enableBubbleMenu}\n enableTaskList={enableTaskList}\n enableHighlight={enableHighlight}\n enableColor={enableColor}\n enableImage={enableImage}\n enableTable={enableTable}\n enableSlashCommand={enableSlashCommand}\n onImageUpload={onImageUpload}\n variant={variant}\n size={size}\n />\n {state.meta.isDirty && showErrorMessage && !!state.meta.errors.length && <FieldError errors={state.meta.errors} />}\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\nTextEditorField.displayName = 'TextEditorField';\n","'use client';\n\nimport type { ComponentProps, ComponentType } from 'react';\nimport { lazy, Suspense } from 'react';\n\nimport { createFormHook } from '@tanstack/react-form';\n\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport type { ArrayCol as ArrayColType, ArrayHeaderRow as ArrayHeaderRowType, SimpleArrayFieldProps } from './components/atoms/simple-array-field';\nimport type { SimpleBooleanField as SimpleBooleanFieldType } from './components/atoms/simple-boolean-field';\nimport type { SimpleComboboxField as SimpleComboboxFieldType } from './components/atoms/simple-combobox-field';\nimport type { SimpleDateField as SimpleDateFieldType } from './components/atoms/simple-date-field';\nimport type { SimpleEmailField as SimpleEmailFieldType } from './components/atoms/simple-email-field';\nimport type { SimpleNumberField as SimpleNumberFieldType } from './components/atoms/simple-number-field';\nimport type { SimplePasswordField as SimplePasswordFieldType } from './components/atoms/simple-password-field';\nimport type { SimpleRadioGroupField as SimpleRadioGroupFieldType } from './components/atoms/simple-radio-group-field';\nimport type { SimpleSelectField as SimpleSelectFieldType } from './components/atoms/simple-select-field';\nimport type { SimpleTextField as SimpleTextFieldType } from './components/atoms/simple-text-field';\nimport type { SimpleTextareaField as SimpleTextareaFieldType } from './components/atoms/simple-textarea-field';\nimport type { CheckboxField as CheckboxFieldType } from './components/fields/checkbox-field';\nimport type { ComboboxField as ComboboxFieldType } from './components/fields/combobox-field';\nimport type { DateField as DateFieldType } from './components/fields/date-field';\nimport type { EmailField as EmailFieldType } from './components/fields/email-field';\nimport type { NumberField as NumberFieldType } from './components/fields/number-field';\nimport type { PasswordField as PasswordFieldType } from './components/fields/password-field';\nimport type { RadioGroupField as RadioGroupFieldType } from './components/fields/radio-group-field';\nimport type { SelectField as SelectFieldType } from './components/fields/select-field';\nimport type { SwitchField as SwitchFieldType } from './components/fields/switch-field';\nimport { TextEditorField } from './components/fields/text-editor-field';\nimport type { TextField as TextFieldType } from './components/fields/text-field';\nimport type { TextareaField as TextareaFieldType } from './components/fields/textarea-field';\nimport { fieldContext, formContext, useTanStackFieldContext, useTanStackFormContext } from './components/form-context';\nimport type { TanStackActionSubmit as TanStackActionSubmitType } from './components/forms/action-submit';\nimport type { TanStackActionsForm as TanStackActionsFormType } from './components/forms/actions-form';\nimport type { TanStackCardForm as TanStackCardFormType } from './components/forms/card-form';\nimport type { TanStackContainerForm as TanStackContainerFormType } from './components/forms/container-form';\nimport type { TanStackDialogForm as TanStackDialogFormType } from './components/forms/dialog-form';\nimport type { TanStackFieldGroup as TanStackFieldGroupType } from './components/forms/group-field';\nimport type { TanStackPopoverForm as TanStackPopoverFormType } from './components/forms/popover-form';\nimport type { TanStackSectionForm as TanStackSectionFormType } from './components/forms/section-form';\nimport type { TanStackTitleField as TanStackTitleFieldType } from './components/forms/title-field';\nimport type {\n FieldContentMain as FieldContentMainType,\n FieldContent as FieldContentType,\n FieldError as FieldErrorType,\n FieldGroup as FieldGroupType,\n FieldLabel as FieldLabelType,\n FieldSeparator as FieldSeparatorType,\n Field as FieldType,\n} from './components/ui/field';\n\n/** Input-shaped pulse placeholder shown while a lazy field/form chunk is still loading. */\nfunction FieldSkeleton() {\n return <Skeleton data-slot=\"tanstack-field-skeleton\" className=\"h-9 w-full rounded\" />;\n}\n\n/**\n * Wraps a `lazy()`-loaded component in its own `Suspense` boundary so it can be dropped\n * anywhere (inside or outside our own form containers) without callers needing to set up\n * Suspense themselves. Keeps this file itself small — the heavy per-field-type\n * implementations (Radix Select/Combobox/date-picker, the rich text editor, etc.) only load\n * when a form actually renders that field type.\n */\nfunction lazyField<P extends object>(loader: () => Promise<{ default: ComponentType<P> }>): ComponentType<P> {\n const LazyComponent = lazy(loader);\n return (props: P) => (\n <Suspense fallback={<FieldSkeleton />}>\n <LazyComponent {...props} />\n </Suspense>\n );\n}\n\n// ─── Rich field components (lazy) ─────────────────────────────────────────────\n\nconst TextField = lazyField<ComponentProps<typeof TextFieldType>>(() => import('./components/fields/text-field').then(m => ({ default: m.TextField })));\nconst TextareaField = lazyField<ComponentProps<typeof TextareaFieldType>>(() =>\n import('./components/fields/textarea-field').then(m => ({ default: m.TextareaField }))\n);\nconst NumberField = lazyField<ComponentProps<typeof NumberFieldType>>(() => import('./components/fields/number-field').then(m => ({ default: m.NumberField })));\nconst EmailField = lazyField<ComponentProps<typeof EmailFieldType>>(() => import('./components/fields/email-field').then(m => ({ default: m.EmailField })));\nconst PasswordField = lazyField<ComponentProps<typeof PasswordFieldType>>(() =>\n import('./components/fields/password-field').then(m => ({ default: m.PasswordField }))\n);\nconst SelectField = lazyField<ComponentProps<typeof SelectFieldType>>(() => import('./components/fields/select-field').then(m => ({ default: m.SelectField })));\nconst ComboboxField = lazyField<ComponentProps<typeof ComboboxFieldType>>(() =>\n import('./components/fields/combobox-field').then(m => ({ default: m.ComboboxField }))\n);\nconst DateField = lazyField<ComponentProps<typeof DateFieldType>>(() => import('./components/fields/date-field').then(m => ({ default: m.DateField })));\nconst SwitchField = lazyField<ComponentProps<typeof SwitchFieldType>>(() => import('./components/fields/switch-field').then(m => ({ default: m.SwitchField })));\nconst RadioGroupField = lazyField<ComponentProps<typeof RadioGroupFieldType>>(() =>\n import('./components/fields/radio-group-field').then(m => ({ default: m.RadioGroupField }))\n);\nconst CheckboxField = lazyField<ComponentProps<typeof CheckboxFieldType>>(() =>\n import('./components/fields/checkbox-field').then(m => ({ default: m.CheckboxField }))\n);\n\n// ─── Simple (minimal) field components (lazy) ─────────────────────────────────\n\nconst SimpleTextField = lazyField<ComponentProps<typeof SimpleTextFieldType>>(() =>\n import('./components/atoms/simple-text-field').then(m => ({ default: m.SimpleTextField }))\n);\nconst SimpleEmailField = lazyField<ComponentProps<typeof SimpleEmailFieldType>>(() =>\n import('./components/atoms/simple-email-field').then(m => ({ default: m.SimpleEmailField }))\n);\nconst SimplePasswordField = lazyField<ComponentProps<typeof SimplePasswordFieldType>>(() =>\n import('./components/atoms/simple-password-field').then(m => ({ default: m.SimplePasswordField }))\n);\nconst SimpleTextareaField = lazyField<ComponentProps<typeof SimpleTextareaFieldType>>(() =>\n import('./components/atoms/simple-textarea-field').then(m => ({ default: m.SimpleTextareaField }))\n);\nconst SimpleNumberField = lazyField<ComponentProps<typeof SimpleNumberFieldType>>(() =>\n import('./components/atoms/simple-number-field').then(m => ({ default: m.SimpleNumberField }))\n);\nconst SimpleSelectField = lazyField<ComponentProps<typeof SimpleSelectFieldType>>(() =>\n import('./components/atoms/simple-select-field').then(m => ({ default: m.SimpleSelectField }))\n);\nconst LazySimpleArrayField = lazy(() =>\n import('./components/atoms/simple-array-field').then(m => ({ default: m.SimpleArrayField as ComponentType<SimpleArrayFieldProps<unknown>> }))\n);\n\n/** Kept as its own generic wrapper (instead of `lazyField`) so callers can still write `<SimpleArrayField<Row> />`. */\nfunction SimpleArrayField<T>(props: SimpleArrayFieldProps<T>) {\n const Impl = LazySimpleArrayField as ComponentType<SimpleArrayFieldProps<T>>;\n return (\n <Suspense fallback={<FieldSkeleton />}>\n <Impl {...props} />\n </Suspense>\n );\n}\n\nconst SimpleBooleanField = lazyField<ComponentProps<typeof SimpleBooleanFieldType>>(() =>\n import('./components/atoms/simple-boolean-field').then(m => ({ default: m.SimpleBooleanField }))\n);\nconst SimpleComboboxField = lazyField<ComponentProps<typeof SimpleComboboxFieldType>>(() =>\n import('./components/atoms/simple-combobox-field').then(m => ({ default: m.SimpleComboboxField }))\n);\nconst SimpleDateField = lazyField<ComponentProps<typeof SimpleDateFieldType>>(() =>\n import('./components/atoms/simple-date-field').then(m => ({ default: m.SimpleDateField }))\n);\nconst SimpleRadioGroupField = lazyField<ComponentProps<typeof SimpleRadioGroupFieldType>>(() =>\n import('./components/atoms/simple-radio-group-field').then(m => ({ default: m.SimpleRadioGroupField }))\n);\n\n// ─── Array field layout helpers (lazy, co-located with SimpleArrayField) ──────\n\nconst ArrayCol = lazyField<ComponentProps<typeof ArrayColType>>(() => import('./components/atoms/simple-array-field').then(m => ({ default: m.ArrayCol })));\nconst ArrayHeaderRow = lazyField<ComponentProps<typeof ArrayHeaderRowType>>(() =>\n import('./components/atoms/simple-array-field').then(m => ({ default: m.ArrayHeaderRow }))\n);\n\n// ─── Form containers (lazy) ───────────────────────────────────────────────────\n\nconst TanStackDialogForm = lazyField<ComponentProps<typeof TanStackDialogFormType>>(() =>\n import('./components/forms/dialog-form').then(m => ({ default: m.TanStackDialogForm }))\n);\nconst TanStackPopoverForm = lazyField<ComponentProps<typeof TanStackPopoverFormType>>(() =>\n import('./components/forms/popover-form').then(m => ({ default: m.TanStackPopoverForm }))\n);\nconst TanStackContainerForm = lazyField<ComponentProps<typeof TanStackContainerFormType>>(() =>\n import('./components/forms/container-form').then(m => ({ default: m.TanStackContainerForm }))\n);\nconst TanStackSectionForm = lazyField<ComponentProps<typeof TanStackSectionFormType>>(() =>\n import('./components/forms/section-form').then(m => ({ default: m.TanStackSectionForm }))\n);\nconst TanStackCardForm = lazyField<ComponentProps<typeof TanStackCardFormType>>(() =>\n import('./components/forms/card-form').then(m => ({ default: m.TanStackCardForm }))\n);\nconst TanStackFieldGroup = lazyField<ComponentProps<typeof TanStackFieldGroupType>>(() =>\n import('./components/forms/group-field').then(m => ({ default: m.TanStackFieldGroup }))\n);\nconst TanStackTitleField = lazyField<ComponentProps<typeof TanStackTitleFieldType>>(() =>\n import('./components/forms/title-field').then(m => ({ default: m.TanStackTitleField }))\n);\nconst TanStackActionsForm = lazyField<ComponentProps<typeof TanStackActionsFormType>>(() =>\n import('./components/forms/actions-form').then(m => ({ default: m.TanStackActionsForm }))\n);\nconst TanStackActionSubmit = lazyField<ComponentProps<typeof TanStackActionSubmitType>>(() =>\n import('./components/forms/action-submit').then(m => ({ default: m.TanStackActionSubmit }))\n);\n\n// ─── Field UI primitives (lazy) ───────────────────────────────────────────────\n\nconst FieldGroup = lazyField<ComponentProps<typeof FieldGroupType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldGroup })));\nconst Field = lazyField<ComponentProps<typeof FieldType>>(() => import('./components/ui/field').then(m => ({ default: m.Field })));\nconst FieldContent = lazyField<ComponentProps<typeof FieldContentType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldContent })));\nconst FieldLabel = lazyField<ComponentProps<typeof FieldLabelType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldLabel })));\nconst FieldContentMain = lazyField<ComponentProps<typeof FieldContentMainType>>(() =>\n import('./components/ui/field').then(m => ({ default: m.FieldContentMain }))\n);\nconst FieldSeparator = lazyField<ComponentProps<typeof FieldSeparatorType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldSeparator })));\nconst FieldError = lazyField<ComponentProps<typeof FieldErrorType>>(() => import('./components/ui/field').then(m => ({ default: m.FieldError })));\n\n/**\n * Factory result from {@link createFormHook} pre-wired with all Lunas UI field and form components.\n *\n * ### `useTanStackForm`\n * Pre-configured TanStack Form hook that returns a type-safe form instance bound to all Lunas UI\n * field and form components.\n *\n * @example\n * import { useTanStackForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const form = useTanStackForm({\n * defaultValues: { name: '', email: '' },\n * onSubmit: async ({ value }) => console.log(value),\n * });\n *\n * return (\n * <form.Provider>\n * <form.AppForm>\n * <form.AppField name=\"name\" children={(field) => <field.TextField label=\"Name\" />} />\n * <form.Subscribe selector={(s) => s.canSubmit}>\n * {(canSubmit) => <form.TanStackActionSubmit disabled={!canSubmit} />}\n * </form.Subscribe>\n * </form.AppForm>\n * </form.Provider>\n * );\n *\n * ### `withTanStackForm`\n * Higher-order component that wraps a sub-form component with access to the parent\n * `useTanStackForm` form context, enabling isolated field groups that still participate in the\n * top-level form state.\n *\n * @example\n * import { withTanStackForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const AddressFields = withTanStackForm(\n * { street: '', city: '' } as const,\n * ({ form }) => (\n * <>\n * <form.AppField name=\"street\" children={(f) => <f.TextField label=\"Street\" />} />\n * <form.AppField name=\"city\" children={(f) => <f.TextField label=\"City\" />} />\n * </>\n * ),\n * );\n *\n * ### `withTanStackFieldGroup`\n * Higher-order component that creates a reusable field-group component sharing the enclosing\n * `useTanStackForm` context without requiring additional form providers.\n *\n * @example\n * import { withTanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * const ContactGroup = withTanStackFieldGroup(({ form }) => (\n * <form.AppField name=\"phone\" children={(f) => <f.TextField label=\"Phone\" />} />\n * ));\n */\nconst {\n useAppForm: useTanStackForm,\n withForm: withTanStackForm,\n withFieldGroup: withTanStackFieldGroup,\n} = createFormHook({\n fieldContext,\n formContext,\n\n fieldComponents: {\n TextField,\n TextareaField,\n TextEditorField,\n NumberField,\n EmailField,\n PasswordField,\n\n SelectField,\n ComboboxField,\n DateField,\n SwitchField,\n RadioGroupField,\n CheckboxField,\n\n SimpleTextField,\n SimpleEmailField,\n SimplePasswordField,\n SimpleTextareaField,\n SimpleNumberField,\n SimpleSelectField,\n SimpleArrayField,\n SimpleBooleanField,\n SimpleComboboxField,\n SimpleDateField,\n SimpleRadioGroupField,\n\n FieldGroup,\n Field,\n FieldContent,\n FieldLabel,\n FieldContentMain,\n FieldSeparator,\n FieldError,\n },\n formComponents: {\n TanStackDialogForm,\n TanStackPopoverForm,\n TanStackContainerForm,\n TanStackSectionForm,\n TanStackCardForm,\n TanStackFieldGroup,\n TanStackTitleField,\n\n TanStackActionsForm,\n TanStackActionSubmit,\n\n ArrayCol,\n ArrayHeaderRow,\n },\n});\n\nexport {\n // Array helpers\n ArrayCol,\n ArrayHeaderRow,\n CheckboxField,\n ComboboxField,\n DateField,\n EmailField,\n Field,\n FieldContent,\n FieldContentMain,\n FieldError,\n // Field UI primitives\n FieldGroup,\n FieldLabel,\n FieldSeparator,\n NumberField,\n PasswordField,\n RadioGroupField,\n SelectField,\n SimpleArrayField,\n SimpleBooleanField,\n SimpleComboboxField,\n SimpleDateField,\n SimpleEmailField,\n SimpleNumberField,\n SimplePasswordField,\n SimpleRadioGroupField,\n SimpleSelectField,\n SimpleTextareaField,\n // Simple (minimal) field components\n SimpleTextField,\n SwitchField,\n TanStackActionSubmit,\n // Form actions\n TanStackActionsForm,\n TanStackCardForm,\n TanStackContainerForm,\n // Form containers\n TanStackDialogForm,\n TanStackFieldGroup,\n TanStackPopoverForm,\n TanStackSectionForm,\n TanStackTitleField,\n TextareaField,\n TextEditorField,\n // Rich field components\n TextField,\n useTanStackFieldContext,\n // Hooks & HOCs\n useTanStackForm,\n useTanStackFormContext,\n withTanStackFieldGroup,\n withTanStackForm,\n};\n"],"mappings":"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"}

package/dist/tanstack-form-DCB2addt.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./rolldown-runtime-DWNI8pZO.cjs"),t=require("./ui/skeleton.cjs"),n=require("./ui/tooltip.cjs"),r=require("./text-editor-DWZf3yrW.cjs"),i=require("./ui/separator.cjs");let a=require("lucide-react"),o=require("react"),s=require("@customafk/react-toolkit/utils"),c=require("class-variance-authority"),l=require("react/jsx-runtime"),u=require("radix-ui"),d=require("@tanstack/react-form");const{fieldContext:f,formContext:p,useFieldContext:m,useFormContext:h}=(0,d.createFormHookContexts)();function g({className:e,children:t,...n}){return(0,l.jsxs)(u.Label.Root,{"data-slot":`label`,className:(0,s.cn)(`text-text-positive`,`flex w-full items-center justify-between`,`select-none font-medium text-sm/6 leading-none`,`group-data-[disabled=true]:pointer-events-none`,`group-data-[disabled=true]:opacity-50`,`peer-disabled:cursor-not-allowed`,`peer-disabled:opacity-50`,`aria-required::data-[slot=required-indicator]:inline-block`,e),...n,children:[(0,l.jsx)(`span`,{className:`flex items-center gap-1`,children:t}),(0,l.jsx)(`span`,{"data-slot":`required-indicator`,className:`hidden shrink-0 rounded-lg bg-danger-strong px-1.5 py-1 font-semibold text-[11px] leading-none text-white`,children:`Bắt buộc`})]})}var _=e.t({Field:()=>S,FieldContent:()=>C,FieldContentMain:()=>w,FieldDescription:()=>D,FieldError:()=>j,FieldGroup:()=>x,FieldLabel:()=>T,FieldLegend:()=>b,FieldNote:()=>O,FieldSeparator:()=>A,FieldSet:()=>y,FieldTitle:()=>E,FieldTooltip:()=>k});const v=(0,c.cva)(`group/field flex w-full gap-2 data-[invalid=true]:text-danger :data-[slot=field-content]:gap-0`,{variants:{orientation:{vertical:[`flex-col :w-full [&>.sr-only]:w-auto`],horizontal:[`flex-row items-center gap-4`,`:data-[slot=field-content]:basis-1/2`,`:data-[slot=field-content-main]:flex-1`,`:data-[slot=field-label]:flex-auto`,`has-[>[data-slot=field-content]]:items-start`,`has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`],responsive:[`flex-col :w-full [&>.sr-only]:w-auto`,`@md/field-group:flex-row`,`@md/field-group:items-center`,`@md/field-group:gap-4`,`@md/field-group::w-auto`,`@md/field-group::data-[slot=field-content]:basis-1/2`,`@md/field-group::data-[slot=field-content-main]:basis-1/2`,`@md/field-group::data-[slot=field-label]:flex-auto`,`@md/field-group:has-[>[data-slot=field-content]]:items-start`,`@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px`]}},defaultVariants:{orientation:`vertical`}}),y=(0,o.memo)(({className:e,...t})=>(0,l.jsx)(`fieldset`,{"data-slot":`field-set`,className:(0,s.cn)(`flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3`,e),...t}));y.displayName=`FieldSet`;const b=(0,o.memo)(({className:e,variant:t=`legend`,...n})=>(0,l.jsx)(`legend`,{"data-slot":`field-legend`,"data-variant":t,className:(0,s.cn)(`mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base`,e),...n}));b.displayName=`FieldLegend`;const x=(0,o.memo)(({className:e,...t})=>(0,l.jsx)(`div`,{"data-slot":`field-group`,className:(0,s.cn)(`group/field-group @container/field-group`,`flex flex-col gap-7 pt-4`,`data-[slot=checkbox-group]:gap-3 :data-[slot=field-group]:gap-4`,e),...t}));x.displayName=`FieldGroup`;const S=(0,o.memo)(({className:e,orientation:t=`vertical`,...n})=>(0,l.jsx)(`div`,{"data-slot":`field`,"data-orientation":t,className:(0,s.cn)(v({orientation:t}),e),...n}));S.displayName=`Field`;const C=(0,o.memo)(({className:e,...t})=>(0,l.jsx)(`div`,{"data-slot":`field-content`,className:(0,s.cn)(`group/field-content flex flex-col gap-1.5 leading-snug`,e),...t}));C.displayName=`FieldContent`;const w=(0,o.memo)(({className:e,...t})=>(0,l.jsx)(`div`,{"data-slot":`field-content-main`,className:(0,s.cn)(`relative`,e),...t}));w.displayName=`FieldContentMain`;const T=(0,o.memo)(({className:e,...t})=>(0,l.jsx)(g,{"data-slot":`field-label`,className:(0,s.cn)(`group/field-label peer/field-label min-h-6 gap-1 font-medium leading-snug`,`has-[>[data-slot=field]]:w-full`,`has-[>[data-slot=field]]:flex-col`,`has-[>[data-slot=field]]:rounded-md`,`has-[>[data-slot=field]]:border`,`has-[>[data-slot=field]]:border-border`,`has-data-[state=checked]:border-primary`,`*:data-[slot=field]:p-4 group-data-[disabled=true]/field:opacity-50`,e),...t}));T.displayName=`FieldLabel`;const E=(0,o.memo)(({className:e,...t})=>(0,l.jsx)(`div`,{"data-slot":`field-label`,className:(0,s.cn)(`flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50`,e),...t}));E.displayName=`FieldTitle`;const D=(0,o.memo)(({className:e,...t})=>(0,l.jsx)(`p`,{"data-slot":`field-description`,className:(0,s.cn)(`nth-last-2:-mt-1 font-normal text-text-positive-weak text-xs leading-normal last:mt-0 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-variant=legend]+&]:-mt-1.5`,e),...t}));D.displayName=`FieldDescription`;const O=(0,o.memo)(({isShow:e=!0,className:t,children:n,...r})=>e===!1?null:(0,l.jsxs)(`div`,{"data-slot":`field-note`,className:(0,s.cn)(`flex items-start gap-1.5 rounded border border-primary-muted/60 bg-primary-bg-subtle/80 px-2.5 py-2 text-text-positive-weak text-xs mt-1`,t),...r,children:[(0,l.jsx)(a.InfoIcon,{size:12,className:`mt-0.5 shrink-0 text-primary/70`}),(0,l.jsx)(`span`,{children:n})]}));O.displayName=`FieldNote`;const k=(0,o.memo)(({tooltip:e})=>(0,l.jsxs)(n.Tooltip,{children:[(0,l.jsx)(n.TooltipTrigger,{asChild:!0,children:(0,l.jsxs)(`button`,{type:`button`,tabIndex:-1,className:`inline-flex cursor-default items-center text-text-positive-weak/70 hover:text-text-positive focus:outline-none`,children:[(0,l.jsx)(a.HelpCircleIcon,{size:13,"aria-hidden":`true`}),(0,l.jsx)(`span`,{className:`sr-only`,children:`Thêm thông tin`})]})}),(0,l.jsx)(n.TooltipContent,{side:`top`,className:`max-w-xs text-balance`,children:e})]}));k.displayName=`FieldTooltip`;const A=(0,o.memo)(({children:e,className:t,...n})=>(0,l.jsxs)(`div`,{"data-slot":`field-separator`,"data-content":!!e,className:(0,s.cn)(`relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2`,t),...n,children:[(0,l.jsx)(i.Separator,{className:`absolute inset-0 top-1/2`}),e&&(0,l.jsx)(`span`,{className:`relative mx-auto block w-fit bg-background px-2 text-text-positive-weak`,"data-slot":`field-separator-content`,children:e})]}));A.displayName=`FieldSeparator`;const j=(0,o.memo)(({className:e,children:t,errors:n,requiredMessage:r=`Trường này là bắt buộc`,...i})=>{let a=(0,o.useMemo)(()=>{let e=e=>e.code===`invalid_type`?r:e.message;return t\|\|(n?n?.length===1&&n[0]?.message?(0,l.jsx)(`div`,{className:`flex flex-row items-center justify-start gap-x-0.5`,children:(0,l.jsx)(`p`,{children:e(n[0])})}):(0,l.jsx)(`ul`,{className:`flex list-none flex-col`,children:n.map(t=>typeof t==`string`?(0,l.jsx)(`li`,{children:t},t):t?.message?(0,l.jsx)(`li`,{children:e(t)},t.code??t.message):null)}):null)},[t,n,r]);return a?(0,l.jsx)(`div`,{role:`alert`,"data-slot":`field-error`,className:(0,s.cn)(`w-full font-medium text-danger-strong text-xs`,e),...i,children:a}):null});j.displayName=`FieldError`;const M=(0,o.memo)(({label:e,description:t,placeholder:n,tooltip:i,helperText:a,showErrorMessage:s=!0,required:c=!1,maxLength:u,showCharacterCount:f,enableLink:p,enableBubbleMenu:h,enableTaskList:g,enableHighlight:_,enableColor:v,enableImage:y,enableTable:b,enableSlashCommand:w,onImageUpload:E,variant:M,size:N})=>{let{form:P,state:F,handleChange:I}=m(),L=(0,d.useStore)(P.store,({isSubmitting:e})=>e),R=F.meta.isDirty&&F.meta.isTouched&&!F.meta.isValid,z=c&&F.value===null,B=(0,o.useCallback)(e=>{L\|\|I(e\|\|null)},[L,I]);return(0,l.jsxs)(x,{className:`gap-y-4 px-4`,children:[(0,l.jsxs)(S,{orientation:`vertical`,"data-invalid":R,children:[(0,l.jsxs)(C,{children:[(0,l.jsxs)(T,{"aria-required":z,children:[e,i&&(0,l.jsx)(k,{tooltip:i})]}),(0,l.jsx)(D,{children:t})]}),(0,l.jsx)(r.t,{value:F.value??``,placeholder:n,readOnly:L,onChange:B,maxLength:u,showCharacterCount:f,enableLink:p,enableBubbleMenu:h,enableTaskList:g,enableHighlight:_,enableColor:v,enableImage:y,enableTable:b,enableSlashCommand:w,onImageUpload:E,variant:M,size:N}),F.meta.isDirty&&s&&!!F.meta.errors.length&&(0,l.jsx)(j,{errors:F.meta.errors}),(0,l.jsx)(O,{isShow:!!a,children:a})]}),(0,l.jsx)(A,{})]})});M.displayName=`TextEditorField`;function N(){return(0,l.jsx)(t.Skeleton,{"data-slot":`tanstack-field-skeleton`,className:`h-9 w-full rounded`})}function P(e){let t=(0,o.lazy)(e);return e=>(0,l.jsx)(o.Suspense,{fallback:(0,l.jsx)(N,{}),children:(0,l.jsx)(t,{...e})})}const F=P(()=>Promise.resolve().then(()=>require("./text-field-DMZZ6CND.cjs")).then(e=>({default:e.TextField}))),I=P(()=>Promise.resolve().then(()=>require("./textarea-field-BmImMdg-.cjs")).then(e=>({default:e.TextareaField}))),L=P(()=>Promise.resolve().then(()=>require("./number-field-BjGl_IiN.cjs")).then(e=>({default:e.NumberField}))),R=P(()=>Promise.resolve().then(()=>require("./email-field-CqXXRG3w.cjs")).then(e=>({default:e.EmailField}))),z=P(()=>Promise.resolve().then(()=>require("./password-field-Be0Ltlxh.cjs")).then(e=>({default:e.PasswordField}))),B=P(()=>Promise.resolve().then(()=>require("./select-field-UWnBMAzL.cjs")).then(e=>({default:e.SelectField}))),V=P(()=>Promise.resolve().then(()=>require("./combobox-field-D7cZ8fhZ.cjs")).then(e=>({default:e.ComboboxField}))),H=P(()=>Promise.resolve().then(()=>require("./date-field-Dm367ro9.cjs")).then(e=>({default:e.DateField}))),U=P(()=>Promise.resolve().then(()=>require("./switch-field-CCDuDdpf.cjs")).then(e=>({default:e.SwitchField}))),W=P(()=>Promise.resolve().then(()=>require("./radio-group-field-BCJWamjd.cjs")).then(e=>({default:e.RadioGroupField}))),G=P(()=>Promise.resolve().then(()=>require("./checkbox-field-CFPHAcwN.cjs")).then(e=>({default:e.CheckboxField}))),K=P(()=>Promise.resolve().then(()=>require("./simple-text-field-DPXqNCXh.cjs")).then(e=>({default:e.SimpleTextField}))),q=P(()=>Promise.resolve().then(()=>require("./simple-email-field-2Abh3qZw.cjs")).then(e=>({default:e.SimpleEmailField}))),J=P(()=>Promise.resolve().then(()=>require("./simple-password-field-Cjp6yzWd.cjs")).then(e=>({default:e.SimplePasswordField}))),Y=P(()=>Promise.resolve().then(()=>require("./simple-textarea-field-ZpXPwYz-.cjs")).then(e=>({default:e.SimpleTextareaField}))),X=P(()=>Promise.resolve().then(()=>require("./simple-number-field-BjEYE54F.cjs")).then(e=>({default:e.SimpleNumberField}))),Z=P(()=>Promise.resolve().then(()=>require("./simple-select-field-CXYJcRY2.cjs")).then(e=>({default:e.SimpleSelectField}))),ee=(0,o.lazy)(()=>Promise.resolve().then(()=>require("./simple-array-field-BSMxRilE.cjs")).then(e=>({default:e.SimpleArrayField})));function Q(e){return(0,l.jsx)(o.Suspense,{fallback:(0,l.jsx)(N,{}),children:(0,l.jsx)(ee,{...e})})}const te=P(()=>Promise.resolve().then(()=>require("./simple-boolean-field-CxAyVQ1w.cjs")).then(e=>({default:e.SimpleBooleanField}))),$=P(()=>Promise.resolve().then(()=>require("./simple-combobox-field-BP4IeDkA.cjs")).then(e=>({default:e.SimpleComboboxField}))),ne=P(()=>Promise.resolve().then(()=>require("./simple-date-field-NSawlSff.cjs")).then(e=>({default:e.SimpleDateField}))),re=P(()=>Promise.resolve().then(()=>require("./simple-radio-group-field-CuA0Q-XI.cjs")).then(e=>({default:e.SimpleRadioGroupField}))),ie=P(()=>Promise.resolve().then(()=>require("./simple-array-field-BSMxRilE.cjs")).then(e=>({default:e.ArrayCol}))),ae=P(()=>Promise.resolve().then(()=>require("./simple-array-field-BSMxRilE.cjs")).then(e=>({default:e.ArrayHeaderRow}))),oe=P(()=>Promise.resolve().then(()=>require("./dialog-form-D9Bifsx6.cjs")).then(e=>({default:e.TanStackDialogForm}))),se=P(()=>Promise.resolve().then(()=>require("./popover-form-Ba_Nw79b.cjs")).then(e=>({default:e.TanStackPopoverForm}))),ce=P(()=>Promise.resolve().then(()=>require("./container-form-D8QNEn8M.cjs")).then(e=>({default:e.TanStackContainerForm}))),le=P(()=>Promise.resolve().then(()=>require("./section-form-C_pHiBEW.cjs")).then(e=>({default:e.TanStackSectionForm}))),ue=P(()=>Promise.resolve().then(()=>require("./card-form-BR5kDTzB.cjs")).then(e=>({default:e.TanStackCardForm}))),de=P(()=>Promise.resolve().then(()=>require("./group-field-DfGPDLyp.cjs")).then(e=>({default:e.TanStackFieldGroup}))),fe=P(()=>Promise.resolve().then(()=>require("./title-field-CFnSgTGH.cjs")).then(e=>({default:e.TanStackTitleField}))),pe=P(()=>Promise.resolve().then(()=>require("./actions-form-DnlpVrgF.cjs")).then(e=>({default:e.TanStackActionsForm}))),me=P(()=>Promise.resolve().then(()=>require("./action-submit-B2qFdfi6.cjs")).then(e=>({default:e.TanStackActionSubmit}))),he=P(()=>Promise.resolve().then(()=>_).then(e=>({default:e.FieldGroup}))),ge=P(()=>Promise.resolve().then(()=>_).then(e=>({default:e.Field}))),_e=P(()=>Promise.resolve().then(()=>_).then(e=>({default:e.FieldContent}))),ve=P(()=>Promise.resolve().then(()=>_).then(e=>({default:e.FieldLabel}))),ye=P(()=>Promise.resolve().then(()=>_).then(e=>({default:e.FieldContentMain}))),be=P(()=>Promise.resolve().then(()=>_).then(e=>({default:e.FieldSeparator}))),xe=P(()=>Promise.resolve().then(()=>_).then(e=>({default:e.FieldError}))),{useAppForm:Se,withForm:Ce,withFieldGroup:we}=(0,d.createFormHook)({fieldContext:f,formContext:p,fieldComponents:{TextField:F,TextareaField:I,TextEditorField:M,NumberField:L,EmailField:R,PasswordField:z,SelectField:B,ComboboxField:V,DateField:H,SwitchField:U,RadioGroupField:W,CheckboxField:G,SimpleTextField:K,SimpleEmailField:q,SimplePasswordField:J,SimpleTextareaField:Y,SimpleNumberField:X,SimpleSelectField:Z,SimpleArrayField:Q,SimpleBooleanField:te,SimpleComboboxField:$,SimpleDateField:ne,SimpleRadioGroupField:re,FieldGroup:he,Field:ge,FieldContent:_e,FieldLabel:ve,FieldContentMain:ye,FieldSeparator:be,FieldError:xe},formComponents:{TanStackDialogForm:oe,TanStackPopoverForm:se,TanStackContainerForm:ce,TanStackSectionForm:le,TanStackCardForm:ue,TanStackFieldGroup:de,TanStackTitleField:fe,TanStackActionsForm:pe,TanStackActionSubmit:me,ArrayCol:ie,ArrayHeaderRow:ae}});Object.defineProperty(exports,"$",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"A",{enumerable:!0,get:function(){return me}}),Object.defineProperty(exports,"B",{enumerable:!0,get:function(){return I}}),Object.defineProperty(exports,"C",{enumerable:!0,get:function(){return X}}),Object.defineProperty(exports,"D",{enumerable:!0,get:function(){return K}}),Object.defineProperty(exports,"E",{enumerable:!0,get:function(){return Z}}),Object.defineProperty(exports,"F",{enumerable:!0,get:function(){return de}}),Object.defineProperty(exports,"G",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"H",{enumerable:!0,get:function(){return we}}),Object.defineProperty(exports,"I",{enumerable:!0,get:function(){return se}}),Object.defineProperty(exports,"J",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"K",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"L",{enumerable:!0,get:function(){return le}}),Object.defineProperty(exports,"M",{enumerable:!0,get:function(){return ue}}),Object.defineProperty(exports,"N",{enumerable:!0,get:function(){return ce}}),Object.defineProperty(exports,"O",{enumerable:!0,get:function(){return Y}}),Object.defineProperty(exports,"P",{enumerable:!0,get:function(){return oe}}),Object.defineProperty(exports,"Q",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"R",{enumerable:!0,get:function(){return fe}}),Object.defineProperty(exports,"S",{enumerable:!0,get:function(){return q}}),Object.defineProperty(exports,"T",{enumerable:!0,get:function(){return re}}),Object.defineProperty(exports,"U",{enumerable:!0,get:function(){return Ce}}),Object.defineProperty(exports,"V",{enumerable:!0,get:function(){return Se}}),Object.defineProperty(exports,"W",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"X",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"Y",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"Z",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return B}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return H}}),Object.defineProperty(exports,"b",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return _e}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return he}}),Object.defineProperty(exports,"et",{enumerable:!0,get:function(){return A}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return ve}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return W}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return z}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return V}}),Object.defineProperty(exports,"it",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"j",{enumerable:!0,get:function(){return pe}}),Object.defineProperty(exports,"k",{enumerable:!0,get:function(){return U}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return ye}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return L}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return ae}}),Object.defineProperty(exports,"nt",{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return R}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return be}}),Object.defineProperty(exports,"q",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return G}}),Object.defineProperty(exports,"rt",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return ge}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return ie}}),Object.defineProperty(exports,"tt",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return xe}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return Q}}),Object.defineProperty(exports,"w",{enumerable:!0,get:function(){return J}}),Object.defineProperty(exports,"x",{enumerable:!0,get:function(){return ne}}),Object.defineProperty(exports,"y",{enumerable:!0,get:function(){return te}}),Object.defineProperty(exports,"z",{enumerable:!0,get:function(){return F}});
2	+ //# sourceMappingURL=tanstack-form-DCB2addt.cjs.map