npm - @customafk/lunas-ui - Versions diffs - 0.2.72 → 0.2.74 - Mend

@customafk/lunas-ui 0.2.72 → 0.2.74

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 (189) hide show

package/dist/{date-field-DLsJBYw8.cjs.map → date-field-Ba6O0uV3.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-field-DLsJBYw8.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Popover","PopoverTrigger","Button","CalendarDaysIcon","PopoverContent","Calendar","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/date-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { endOfToday, endOfTomorrow, endOfYesterday, format, lastDayOfMonth, startOfMonth, subDays } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { DateFieldProps as Props } from '../../types';\n\nexport const DateField = memo<Props>(\n ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n required = false,\n disabled = false,\n minDate,\n maxDate,\n }) => {\n const errorId = useId();\n const field = useTanStackFieldContext<Date \| null>();\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _isInvalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasError = _touched && field.state.meta.errors.length > 0;\n\n const handleSelect = (date: Date) => {\n field.handleChange(date);\n setPopoverOpen(false);\n };\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} data-invalid={_isInvalid}>\n <FieldContent>\n <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain className=\"flex flex-col space-y-1\">\n <div className=\"flex w-full flex-col\">\n <Popover\n open={popoverOpen}\n onOpenChange={open => {\n setPopoverOpen(open);\n if (!open) field.handleBlur();\n }}\n >\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n color=\"muted\"\n size=\"lg\"\n disabled={isDisabled}\n aria-invalid={_isInvalid ? true : undefined}\n aria-describedby={errorId}\n className={cn(\n 'flex items-center justify-between rounded font-normal outline-border',\n 'hover:bg-transparent',\n 'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n 'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n field.state.value === null && 'text-text-positive-muted',\n _isInvalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n )}\n >\n <p>{field.state.value === null ? (placeholder ?? 'Select date') : format(field.state.value, 'PPPP')}</p>\n <CalendarDaysIcon strokeWidth={1} />\n </Button>\n </PopoverTrigger>\n\n <PopoverContent align=\"start\" side=\"bottom\" className=\"flex w-fit min-w-0 overflow-y-auto rounded p-0\">\n <div className=\"flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm\">\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfToday())}>\n Hôm nay\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfTomorrow())}>\n Ngày mai\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfYesterday())}>\n Hôm qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 3))}>\n 3 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 7))}>\n 7 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 30))}>\n 30 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(startOfMonth(endOfToday()))}>\n Tháng này\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(lastDayOfMonth(endOfToday()))}>\n Tháng trước\n </Button>\n </div>\n <div className=\"flex flex-1 flex-col\">\n <div className=\"min-w-73 border-b border-b-border p-2\">\n <Calendar\n mode=\"single\"\n selected={field.state.value ?? undefined}\n hidden={{\n before: minDate ?? new Date(1900, 0, 1),\n after: maxDate ?? new Date(2100, 11, 31),\n }}\n onSelect={date => {\n if (!date) return;\n handleSelect(date);\n }}\n />\n </div>\n </div>\n </PopoverContent>\n </Popover>\n\n {_touched && showErrorMessage && _hasError && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </div>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nDateField.displayName = 'DateField';\n"],"mappings":"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"}
1	+ {"version":3,"file":"date-field-Ba6O0uV3.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Popover","PopoverTrigger","Button","CalendarDaysIcon","PopoverContent","Calendar","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/date-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { endOfToday, endOfTomorrow, endOfYesterday, format, lastDayOfMonth, startOfMonth, subDays } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { DateFieldProps as Props } from '../../types';\n\nexport const DateField = memo<Props>(\n ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n required = false,\n disabled = false,\n minDate,\n maxDate,\n }) => {\n const errorId = useId();\n const field = useTanStackFieldContext<Date \| null>();\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _isInvalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasError = _touched && field.state.meta.errors.length > 0;\n\n const handleSelect = (date: Date) => {\n field.handleChange(date);\n setPopoverOpen(false);\n };\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} data-invalid={_isInvalid}>\n <FieldContent>\n <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain className=\"flex flex-col space-y-1\">\n <div className=\"flex w-full flex-col\">\n <Popover\n open={popoverOpen}\n onOpenChange={open => {\n setPopoverOpen(open);\n if (!open) field.handleBlur();\n }}\n >\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n color=\"muted\"\n size=\"lg\"\n disabled={isDisabled}\n aria-invalid={_isInvalid ? true : undefined}\n aria-describedby={errorId}\n className={cn(\n 'flex items-center justify-between rounded font-normal outline-border',\n 'hover:bg-transparent',\n 'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n 'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n field.state.value === null && 'text-text-positive-muted',\n _isInvalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n )}\n >\n <p>{field.state.value === null ? (placeholder ?? 'Select date') : format(field.state.value, 'PPPP')}</p>\n <CalendarDaysIcon strokeWidth={1} />\n </Button>\n </PopoverTrigger>\n\n <PopoverContent align=\"start\" side=\"bottom\" className=\"flex w-fit min-w-0 overflow-y-auto rounded p-0\">\n <div className=\"flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm\">\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfToday())}>\n Hôm nay\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfTomorrow())}>\n Ngày mai\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfYesterday())}>\n Hôm qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 3))}>\n 3 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 7))}>\n 7 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 30))}>\n 30 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(startOfMonth(endOfToday()))}>\n Tháng này\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(lastDayOfMonth(endOfToday()))}>\n Tháng trước\n </Button>\n </div>\n <div className=\"flex flex-1 flex-col\">\n <div className=\"min-w-73 border-b border-b-border p-2\">\n <Calendar\n mode=\"single\"\n selected={field.state.value ?? undefined}\n hidden={{\n before: minDate ?? new Date(1900, 0, 1),\n after: maxDate ?? new Date(2100, 11, 31),\n }}\n onSelect={date => {\n if (!date) return;\n handleSelect(date);\n }}\n />\n </div>\n </div>\n </PopoverContent>\n </Popover>\n\n {_touched && showErrorMessage && _hasError && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </div>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nDateField.displayName = 'DateField';\n"],"mappings":"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"}

package/dist/{date-field-O67C78Kw.mjs → date-field-DUx13OiJ.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-CKAWexet.mjs";import{Popover as n,PopoverContent as r,PopoverTrigger as i}from"./ui/popover.mjs";import{Calendar as a}from"./ui/calendar.mjs";import{Field as o,FieldContent as s,FieldContentMain as c,FieldDescription as l,FieldError as u,FieldGroup as d,FieldLabel as f,FieldNote as p,FieldSeparator as m,FieldTooltip as h}from"./field-V2DoD8qL.mjs";import{CalendarDaysIcon as g}from"lucide-react";import{memo as _,useId as v,useState as y}from"react";import{cn as b}from"@customafk/react-toolkit/utils";import{jsx as x,jsxs as S}from"react/jsx-runtime";import{endOfToday as C,endOfTomorrow as w,endOfYesterday as T,format as E,lastDayOfMonth as D,startOfMonth as O,subDays as k}from"@customafk/react-toolkit/date-fns";import{useStore as A}from"@tanstack/react-form";const j=_(({label:_,description:j,placeholder:M,orientation:N=`responsive`,tooltip:P,helperText:F,showErrorMessage:I=!0,required:L=!1,disabled:R=!1,minDate:z,maxDate:B})=>{let V=v(),H=t(),[U,W]=y(!1),G=A(H.form.store,({isSubmitting:e})=>e),K=R||G,q=H.state.meta.isDirty||H.state.meta.isTouched,J=q&&!H.state.meta.isValid,Y=L&&H.state.value===null,X=q&&H.state.meta.errors.length>0,Z=e=>{H.handleChange(e),W(!1)};return S(d,{className:`px-4`,children:[S(o,{orientation:N,"data-invalid":J,children:[S(s,{children:[S(f,{htmlFor:H.name,"aria-required":Y,children:[_,P&&x(h,{tooltip:P})]}),x(l,{children:j})]}),x(c,{className:`flex flex-col space-y-1`,children:S(`div`,{className:`flex w-full flex-col`,children:[S(n,{open:U,onOpenChange:e=>{W(e),e||H.handleBlur()},children:[x(i,{asChild:!0,children:S(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":V,className:b(`flex items-center justify-between rounded font-normal outline-border`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,H.state.value===null&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),children:[x(`p`,{children:H.state.value===null?M??`Select date`:E(H.state.value,`PPPP`)}),x(g,{strokeWidth:1})]})}),S(r,{align:`start`,side:`bottom`,className:`flex w-fit min-w-0 overflow-y-auto rounded p-0`,children:[S(`div`,{className:`flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm`,children:[x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(C()),children:`Hôm nay`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(w()),children:`Ngày mai`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(T()),children:`Hôm qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),3)),children:`3 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),7)),children:`7 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),30)),children:`30 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(O(C())),children:`Tháng này`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(D(C())),children:`Tháng trước`})]}),x(`div`,{className:`flex flex-1 flex-col`,children:x(`div`,{className:`min-w-73 border-b border-b-border p-2`,children:x(a,{mode:`single`,selected:H.state.value??void 0,hidden:{before:z??new Date(1900,0,1),after:B??new Date(2100,11,31)},onSelect:e=>{e&&Z(e)}})})})]})]}),q&&I&&X&&x(u,{id:V,className:`mt-1`,errors:H.state.meta.errors}),x(p,{isShow:!!F,children:F})]})})]}),x(m,{})]})});j.displayName=`DateField`;export{j as DateField};
-//# sourceMappingURL=date-field-O67C78Kw.mjs.map
+import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-AGwPfwiM.mjs";import{Popover as n,PopoverContent as r,PopoverTrigger as i}from"./ui/popover.mjs";import{Calendar as a}from"./ui/calendar.mjs";import{Field as o,FieldContent as s,FieldContentMain as c,FieldDescription as l,FieldError as u,FieldGroup as d,FieldLabel as f,FieldNote as p,FieldSeparator as m,FieldTooltip as h}from"./field-V2DoD8qL.mjs";import{CalendarDaysIcon as g}from"lucide-react";import{memo as _,useId as v,useState as y}from"react";import{cn as b}from"@customafk/react-toolkit/utils";import{jsx as x,jsxs as S}from"react/jsx-runtime";import{endOfToday as C,endOfTomorrow as w,endOfYesterday as T,format as E,lastDayOfMonth as D,startOfMonth as O,subDays as k}from"@customafk/react-toolkit/date-fns";import{useStore as A}from"@tanstack/react-form";const j=_(({label:_,description:j,placeholder:M,orientation:N=`responsive`,tooltip:P,helperText:F,showErrorMessage:I=!0,required:L=!1,disabled:R=!1,minDate:z,maxDate:B})=>{let V=v(),H=t(),[U,W]=y(!1),G=A(H.form.store,({isSubmitting:e})=>e),K=R||G,q=H.state.meta.isDirty||H.state.meta.isTouched,J=q&&!H.state.meta.isValid,Y=L&&H.state.value===null,X=q&&H.state.meta.errors.length>0,Z=e=>{H.handleChange(e),W(!1)};return S(d,{className:`px-4`,children:[S(o,{orientation:N,"data-invalid":J,children:[S(s,{children:[S(f,{htmlFor:H.name,"aria-required":Y,children:[_,P&&x(h,{tooltip:P})]}),x(l,{children:j})]}),x(c,{className:`flex flex-col space-y-1`,children:S(`div`,{className:`flex w-full flex-col`,children:[S(n,{open:U,onOpenChange:e=>{W(e),e||H.handleBlur()},children:[x(i,{asChild:!0,children:S(e,{variant:`outline`,color:`muted`,size:`lg`,disabled:K,"aria-invalid":J?!0:void 0,"aria-describedby":V,className:b(`flex items-center justify-between rounded font-normal outline-border`,`hover:bg-transparent`,`focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak`,`data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak`,H.state.value===null&&`text-text-positive-muted`,J&&`outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak`),children:[x(`p`,{children:H.state.value===null?M??`Select date`:E(H.state.value,`PPPP`)}),x(g,{strokeWidth:1})]})}),S(r,{align:`start`,side:`bottom`,className:`flex w-fit min-w-0 overflow-y-auto rounded p-0`,children:[S(`div`,{className:`flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm`,children:[x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(C()),children:`Hôm nay`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(w()),children:`Ngày mai`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(T()),children:`Hôm qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),3)),children:`3 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),7)),children:`7 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(k(C(),30)),children:`30 ngày qua`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(O(C())),children:`Tháng này`}),x(e,{variant:`ghost`,color:`muted`,className:`w-32`,onClick:()=>Z(D(C())),children:`Tháng trước`})]}),x(`div`,{className:`flex flex-1 flex-col`,children:x(`div`,{className:`min-w-73 border-b border-b-border p-2`,children:x(a,{mode:`single`,selected:H.state.value??void 0,hidden:{before:z??new Date(1900,0,1),after:B??new Date(2100,11,31)},onSelect:e=>{e&&Z(e)}})})})]})]}),q&&I&&X&&x(u,{id:V,className:`mt-1`,errors:H.state.meta.errors}),x(p,{isShow:!!F,children:F})]})})]}),x(m,{})]})});j.displayName=`DateField`;export{j as DateField};
+//# sourceMappingURL=date-field-DUx13OiJ.mjs.map

package/dist/{date-field-O67C78Kw.mjs.map → date-field-DUx13OiJ.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-field-~~O67C78Kw~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/date-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { endOfToday, endOfTomorrow, endOfYesterday, format, lastDayOfMonth, startOfMonth, subDays } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { DateFieldProps as Props } from '../../types';\n\nexport const DateField = memo<Props>(\n ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n required = false,\n disabled = false,\n minDate,\n maxDate,\n }) => {\n const errorId = useId();\n const field = useTanStackFieldContext<Date \| null>();\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _isInvalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasError = _touched && field.state.meta.errors.length > 0;\n\n const handleSelect = (date: Date) => {\n field.handleChange(date);\n setPopoverOpen(false);\n };\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} data-invalid={_isInvalid}>\n <FieldContent>\n <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain className=\"flex flex-col space-y-1\">\n <div className=\"flex w-full flex-col\">\n <Popover\n open={popoverOpen}\n onOpenChange={open => {\n setPopoverOpen(open);\n if (!open) field.handleBlur();\n }}\n >\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n color=\"muted\"\n size=\"lg\"\n disabled={isDisabled}\n aria-invalid={_isInvalid ? true : undefined}\n aria-describedby={errorId}\n className={cn(\n 'flex items-center justify-between rounded font-normal outline-border',\n 'hover:bg-transparent',\n 'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n 'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n field.state.value === null && 'text-text-positive-muted',\n _isInvalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n )}\n >\n <p>{field.state.value === null ? (placeholder ?? 'Select date') : format(field.state.value, 'PPPP')}</p>\n <CalendarDaysIcon strokeWidth={1} />\n </Button>\n </PopoverTrigger>\n\n <PopoverContent align=\"start\" side=\"bottom\" className=\"flex w-fit min-w-0 overflow-y-auto rounded p-0\">\n <div className=\"flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm\">\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfToday())}>\n Hôm nay\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfTomorrow())}>\n Ngày mai\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfYesterday())}>\n Hôm qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 3))}>\n 3 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 7))}>\n 7 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 30))}>\n 30 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(startOfMonth(endOfToday()))}>\n Tháng này\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(lastDayOfMonth(endOfToday()))}>\n Tháng trước\n </Button>\n </div>\n <div className=\"flex flex-1 flex-col\">\n <div className=\"min-w-73 border-b border-b-border p-2\">\n <Calendar\n mode=\"single\"\n selected={field.state.value ?? undefined}\n hidden={{\n before: minDate ?? new Date(1900, 0, 1),\n after: maxDate ?? new Date(2100, 11, 31),\n }}\n onSelect={date => {\n if (!date) return;\n handleSelect(date);\n }}\n />\n </div>\n </div>\n </PopoverContent>\n </Popover>\n\n {_touched && showErrorMessage && _hasError && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </div>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nDateField.displayName = 'DateField';\n"],"mappings":"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"}
1	+ {"version":3,"file":"date-field-DUx13OiJ.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/date-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { CalendarDaysIcon } from 'lucide-react';\n\nimport { endOfToday, endOfTomorrow, endOfYesterday, format, lastDayOfMonth, startOfMonth, subDays } from '@customafk/react-toolkit/date-fns';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Calendar } from '@/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { DateFieldProps as Props } from '../../types';\n\nexport const DateField = memo<Props>(\n ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n required = false,\n disabled = false,\n minDate,\n maxDate,\n }) => {\n const errorId = useId();\n const field = useTanStackFieldContext<Date \| null>();\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _isInvalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasError = _touched && field.state.meta.errors.length > 0;\n\n const handleSelect = (date: Date) => {\n field.handleChange(date);\n setPopoverOpen(false);\n };\n\n return (\n <FieldGroup className=\"px-4\">\n <Field orientation={orientation} data-invalid={_isInvalid}>\n <FieldContent>\n <FieldLabel htmlFor={field.name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain className=\"flex flex-col space-y-1\">\n <div className=\"flex w-full flex-col\">\n <Popover\n open={popoverOpen}\n onOpenChange={open => {\n setPopoverOpen(open);\n if (!open) field.handleBlur();\n }}\n >\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n color=\"muted\"\n size=\"lg\"\n disabled={isDisabled}\n aria-invalid={_isInvalid ? true : undefined}\n aria-describedby={errorId}\n className={cn(\n 'flex items-center justify-between rounded font-normal outline-border',\n 'hover:bg-transparent',\n 'focus:outline-1 focus:outline-primary-strong focus:ring-4 focus:ring-primary-weak',\n 'data-[state=open]:outline-1 data-[state=open]:outline-primary-strong data-[state=open]:ring-4 data-[state=open]:ring-primary-weak',\n field.state.value === null && 'text-text-positive-muted',\n _isInvalid && 'outline-danger bg-danger-bg-subtle ring-4 ring-danger-weak'\n )}\n >\n <p>{field.state.value === null ? (placeholder ?? 'Select date') : format(field.state.value, 'PPPP')}</p>\n <CalendarDaysIcon strokeWidth={1} />\n </Button>\n </PopoverTrigger>\n\n <PopoverContent align=\"start\" side=\"bottom\" className=\"flex w-fit min-w-0 overflow-y-auto rounded p-0\">\n <div className=\"flex h-full flex-col space-y-2 border-r border-r-border p-2 [&>button]:justify-start [&>button]:text-sm\">\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfToday())}>\n Hôm nay\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfTomorrow())}>\n Ngày mai\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(endOfYesterday())}>\n Hôm qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 3))}>\n 3 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 7))}>\n 7 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(subDays(endOfToday(), 30))}>\n 30 ngày qua\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(startOfMonth(endOfToday()))}>\n Tháng này\n </Button>\n <Button variant=\"ghost\" color=\"muted\" className=\"w-32\" onClick={() => handleSelect(lastDayOfMonth(endOfToday()))}>\n Tháng trước\n </Button>\n </div>\n <div className=\"flex flex-1 flex-col\">\n <div className=\"min-w-73 border-b border-b-border p-2\">\n <Calendar\n mode=\"single\"\n selected={field.state.value ?? undefined}\n hidden={{\n before: minDate ?? new Date(1900, 0, 1),\n after: maxDate ?? new Date(2100, 11, 31),\n }}\n onSelect={date => {\n if (!date) return;\n handleSelect(date);\n }}\n />\n </div>\n </div>\n </PopoverContent>\n </Popover>\n\n {_touched && showErrorMessage && _hasError && <FieldError id={errorId} className=\"mt-1\" errors={field.state.meta.errors} />}\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </div>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nDateField.displayName = 'DateField';\n"],"mappings":"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"}

package/dist/{dialog-form-ClTCyJDD.cjs → dialog-form-B_kgYxZg.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-CX3lC3mC.cjs"),n=require("./ui/separator.cjs"),r=require("./submit-button-CvINfld5.cjs");let i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime");const s=({title:s,submitText:c,width:l,maxWidth:u,className:d,open:f,onOpenChange:p,children:m})=>{let h=t.K(),g=(0,i.useCallback)(e=>{e||h.reset(),p?.(e)},[h.reset,p]);return(0,o.jsx)(e.Dialog,{open:f,onOpenChange:g,children:(0,o.jsxs)(e.DialogPortal,{"data-slot":`dialog-portal`,children:[(0,o.jsx)(e.DialogOverlay,{}),(0,o.jsxs)(e.DialogContent,{style:{"--width":l,"--max-width":u},className:(0,a.cn)(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,l&&`sm:w-(--width)`,u&&`sm:max-w-(--max-width)`,d),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[(0,o.jsx)(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:(0,o.jsx)(e.DialogTitle,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:s})}),(0,o.jsx)(n.Separator,{}),(0,o.jsx)(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:m}),(0,o.jsx)(n.Separator,{}),(0,o.jsxs)(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[(0,o.jsx)(h.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>(0,o.jsx)(r.n,{disabled:e,onClick:()=>{h.reset(),g(!1)}})}),(0,o.jsx)(h.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,o.jsx)(r.t,{isSubmitting:e,disabled:t,submitText:c,onClick:()=>h.handleSubmit()})})]})]})]})})};exports.TanStackDialogForm=s;
-//# sourceMappingURL=dialog-form-ClTCyJDD.cjs.map
+const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-Bae0TOEr.cjs"),n=require("./ui/separator.cjs"),r=require("./submit-button-CvINfld5.cjs");let i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime");const s=({title:s,submitText:c,width:l,maxWidth:u,className:d,open:f,onOpenChange:p,children:m})=>{let h=t.K(),g=(0,i.useCallback)(e=>{e||h.reset(),p?.(e)},[h.reset,p]);return(0,o.jsx)(e.Dialog,{open:f,onOpenChange:g,children:(0,o.jsxs)(e.DialogPortal,{"data-slot":`dialog-portal`,children:[(0,o.jsx)(e.DialogOverlay,{}),(0,o.jsxs)(e.DialogContent,{style:{"--width":l,"--max-width":u},className:(0,a.cn)(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,l&&`sm:w-(--width)`,u&&`sm:max-w-(--max-width)`,d),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[(0,o.jsx)(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:(0,o.jsx)(e.DialogTitle,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:s})}),(0,o.jsx)(n.Separator,{}),(0,o.jsx)(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:m}),(0,o.jsx)(n.Separator,{}),(0,o.jsxs)(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[(0,o.jsx)(h.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>(0,o.jsx)(r.n,{disabled:e,onClick:()=>{h.reset(),g(!1)}})}),(0,o.jsx)(h.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>(0,o.jsx)(r.t,{isSubmitting:e,disabled:t,submitText:c,onClick:()=>h.handleSubmit()})})]})]})]})})};exports.TanStackDialogForm=s;
+//# sourceMappingURL=dialog-form-B_kgYxZg.cjs.map

package/dist/{dialog-form-ClTCyJDD.cjs.map → dialog-form-B_kgYxZg.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog-form-~~ClTCyJDD~~.cjs","names":["useTanStackFormContext","Dialog","DialogPortal","DialogOverlay","DialogContent","DialogTitle","Separator","CancelButton","SubmitButton"],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n \n @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackDialogForm\n * title=\"Create User\"\n * submitText=\"Create\"\n * className=\"max-w-lg\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <NameField />\n * <EmailField />\n * </TanStackDialogForm>\n /\nexport const TanStackDialogForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the dialog title bar. /\n title: string;\n /* Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. /\n submitText?: string;\n /* Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. /\n width?: number \| string;\n /* Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. /\n maxWidth?: number \| string;\n /* Optional additional class name(s) to apply to the dialog content container. /\n className?: string;\n /* Controlled open state of the dialog. /\n open?: boolean;\n /* Callback fired when the dialog open state changes; the form is reset on close. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n if (!open) form.reset();\n onOpenChange?.(open);\n },\n [form.reset, onOpenChange]\n );\n\n return (\n <Dialog open={open} onOpenChange={handleOpenChange}>\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay />\n <DialogContent\n style={\n {\n '--width': width,\n '--max-width': maxWidth,\n } as React.CSSProperties\n }\n className={cn(\n 'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n width && `sm:w-(--width)`,\n maxWidth && `sm:max-w-(--max-width)`,\n className\n )}\n onOpenAutoFocus={event => {\n // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n event.preventDefault();\n }}\n onInteractOutside={event => {\n // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n event.preventDefault();\n }}\n >\n <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n {title}\n </DialogTitle>\n </div>\n <Separator />\n <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n {children}\n </div>\n <Separator />\n <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n <form.Subscribe\n selector={state => ({ disabled: state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n onClick={() => {\n form.reset();\n handleOpenChange(false);\n }}\n />\n )}\n />\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} submitText={submitText} onClick={() => form.handleSubmit()} />\n )}\n />\n </div>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n );\n};\n"],"mappings":"yPA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAOA,EAAAA,EAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAc,OAAM,aAAc,YAChC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,YAAU,yBAAxB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,GAChB,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,WAAA,EAAA,EAAA,GAAA,CACE,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,EAsBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,sFACvC,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,GACL,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}
1	+ {"version":3,"file":"dialog-form-B_kgYxZg.cjs","names":["useTanStackFormContext","Dialog","DialogPortal","DialogOverlay","DialogContent","DialogTitle","Separator","CancelButton","SubmitButton"],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n \n @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackDialogForm\n * title=\"Create User\"\n * submitText=\"Create\"\n * className=\"max-w-lg\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <NameField />\n * <EmailField />\n * </TanStackDialogForm>\n /\nexport const TanStackDialogForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the dialog title bar. /\n title: string;\n /* Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. /\n submitText?: string;\n /* Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. /\n width?: number \| string;\n /* Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. /\n maxWidth?: number \| string;\n /* Optional additional class name(s) to apply to the dialog content container. /\n className?: string;\n /* Controlled open state of the dialog. /\n open?: boolean;\n /* Callback fired when the dialog open state changes; the form is reset on close. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n if (!open) form.reset();\n onOpenChange?.(open);\n },\n [form.reset, onOpenChange]\n );\n\n return (\n <Dialog open={open} onOpenChange={handleOpenChange}>\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay />\n <DialogContent\n style={\n {\n '--width': width,\n '--max-width': maxWidth,\n } as React.CSSProperties\n }\n className={cn(\n 'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n width && `sm:w-(--width)`,\n maxWidth && `sm:max-w-(--max-width)`,\n className\n )}\n onOpenAutoFocus={event => {\n // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n event.preventDefault();\n }}\n onInteractOutside={event => {\n // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n event.preventDefault();\n }}\n >\n <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n {title}\n </DialogTitle>\n </div>\n <Separator />\n <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n {children}\n </div>\n <Separator />\n <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n <form.Subscribe\n selector={state => ({ disabled: state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n onClick={() => {\n form.reset();\n handleOpenChange(false);\n }}\n />\n )}\n />\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} submitText={submitText} onClick={() => form.handleSubmit()} />\n )}\n />\n </div>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n );\n};\n"],"mappings":"yPA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAOA,EAAAA,EAAuB,EAE9B,GAAA,EAAA,EAAA,YAAA,CACH,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAc,OAAM,aAAc,YAChC,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,YAAU,yBAAxB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,GAChB,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,WAAA,EAAA,EAAA,GAAA,CACE,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,EAsBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,sFACvC,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,GACL,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAY,CAAA,GACZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,EACE,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,eACX,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,eACzB,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAA4B,eAAwB,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}

package/dist/{dialog-form-BxlLrEeZ.mjs → dialog-form-SyBJUlDB.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Dialog as e,DialogContent as t,DialogOverlay as n,DialogPortal as r,DialogTitle as i}from"./ui/dialog.mjs";import{K as a}from"./tanstack-form-CKAWexet.mjs";import{Separator as o}from"./ui/separator.mjs";import{n as s,t as c}from"./submit-button-CGBaPzE9.mjs";import{useCallback as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({title:p,submitText:m,width:h,maxWidth:g,className:_,open:v,onOpenChange:y,children:b})=>{let x=a(),S=l(e=>{e||x.reset(),y?.(e)},[x.reset,y]);return d(e,{open:v,onOpenChange:S,children:f(r,{"data-slot":`dialog-portal`,children:[d(n,{}),f(t,{style:{"--width":h,"--max-width":g},className:u(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,h&&`sm:w-(--width)`,g&&`sm:max-w-(--max-width)`,_),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[d(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:d(i,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:p})}),d(o,{}),d(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:b}),d(o,{}),f(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[d(x.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>d(s,{disabled:e,onClick:()=>{x.reset(),S(!1)}})}),d(x.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>d(c,{isSubmitting:e,disabled:t,submitText:m,onClick:()=>x.handleSubmit()})})]})]})]})})};export{p as TanStackDialogForm};
-//# sourceMappingURL=dialog-form-BxlLrEeZ.mjs.map
+import{Dialog as e,DialogContent as t,DialogOverlay as n,DialogPortal as r,DialogTitle as i}from"./ui/dialog.mjs";import{K as a}from"./tanstack-form-AGwPfwiM.mjs";import{Separator as o}from"./ui/separator.mjs";import{n as s,t as c}from"./submit-button-CGBaPzE9.mjs";import{useCallback as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({title:p,submitText:m,width:h,maxWidth:g,className:_,open:v,onOpenChange:y,children:b})=>{let x=a(),S=l(e=>{e||x.reset(),y?.(e)},[x.reset,y]);return d(e,{open:v,onOpenChange:S,children:f(r,{"data-slot":`dialog-portal`,children:[d(n,{}),f(t,{style:{"--width":h,"--max-width":g},className:u(`flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md`,h&&`sm:w-(--width)`,g&&`sm:max-w-(--max-width)`,_),onOpenAutoFocus:e=>{e.preventDefault()},onInteractOutside:e=>{e.preventDefault()},children:[d(`div`,{"data-slot":`dialog-header`,className:`flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left`,children:d(i,{"data-slot":`dialog-title`,className:`font-semibold text-lg tracking-tight`,children:p})}),d(o,{}),d(`div`,{"data-slot":`dialog-content`,className:`relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4`,children:b}),d(o,{}),f(`div`,{"data-slot":`dialog-footer`,className:`flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full`,children:[d(x.Subscribe,{selector:e=>({disabled:e.isSubmitting}),children:({disabled:e})=>d(s,{disabled:e,onClick:()=>{x.reset(),S(!1)}})}),d(x.Subscribe,{selector:e=>({isSubmitting:e.isSubmitting,disabled:e.isPristine||!e.isValid||e.isValidating||e.isSubmitting||!e.canSubmit}),children:({isSubmitting:e,disabled:t})=>d(c,{isSubmitting:e,disabled:t,submitText:m,onClick:()=>x.handleSubmit()})})]})]})]})})};export{p as TanStackDialogForm};
+//# sourceMappingURL=dialog-form-SyBJUlDB.mjs.map

package/dist/{dialog-form-BxlLrEeZ.mjs.map → dialog-form-SyBJUlDB.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog-form-~~BxlLrEeZ~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n \n @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackDialogForm\n * title=\"Create User\"\n * submitText=\"Create\"\n * className=\"max-w-lg\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <NameField />\n * <EmailField />\n * </TanStackDialogForm>\n /\nexport const TanStackDialogForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the dialog title bar. /\n title: string;\n /* Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. /\n submitText?: string;\n /* Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. /\n width?: number \| string;\n /* Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. /\n maxWidth?: number \| string;\n /* Optional additional class name(s) to apply to the dialog content container. /\n className?: string;\n /* Controlled open state of the dialog. /\n open?: boolean;\n /* Callback fired when the dialog open state changes; the form is reset on close. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n if (!open) form.reset();\n onOpenChange?.(open);\n },\n [form.reset, onOpenChange]\n );\n\n return (\n <Dialog open={open} onOpenChange={handleOpenChange}>\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay />\n <DialogContent\n style={\n {\n '--width': width,\n '--max-width': maxWidth,\n } as React.CSSProperties\n }\n className={cn(\n 'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n width && `sm:w-(--width)`,\n maxWidth && `sm:max-w-(--max-width)`,\n className\n )}\n onOpenAutoFocus={event => {\n // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n event.preventDefault();\n }}\n onInteractOutside={event => {\n // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n event.preventDefault();\n }}\n >\n <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n {title}\n </DialogTitle>\n </div>\n <Separator />\n <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n {children}\n </div>\n <Separator />\n <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n <form.Subscribe\n selector={state => ({ disabled: state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n onClick={() => {\n form.reset();\n handleOpenChange(false);\n }}\n />\n )}\n />\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} submitText={submitText} onClick={() => form.handleSubmit()} />\n )}\n />\n </div>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n );\n};\n"],"mappings":"oZA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAO,EAAuB,EAE9B,EAAmB,EACtB,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAC,EAAD,CAAc,OAAM,aAAc,WAChC,EAAC,EAAD,CAAc,YAAU,yBAAxB,CACE,EAAC,EAAD,CAAgB,CAAA,EAChB,EAAC,EAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,UAAW,EACT,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,CAsBE,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,qFACvC,EAAC,EAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}
1	+ {"version":3,"file":"dialog-form-SyBJUlDB.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/dialog-form.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTitle } from '@/components/ui/dialog';\nimport { Separator } from '@/components/ui/separator';\n\nimport { useTanStackFormContext } from '../form-context';\nimport { CancelButton } from '../ui/cancel-button';\nimport { SubmitButton } from '../ui/submit-button';\n\n/*\n Renders a modal dialog that wraps a TanStack Form with a title, scrollable content area, and built-in submit/cancel actions.\n \n @example\n * import { TanStackDialogForm } from '@customafk/lunas-ui/features/tanstack-form';\n \n <TanStackDialogForm\n * title=\"Create User\"\n * submitText=\"Create\"\n * className=\"max-w-lg\"\n * open={isOpen}\n * onOpenChange={setIsOpen}\n * >\n * <NameField />\n * <EmailField />\n * </TanStackDialogForm>\n /\nexport const TanStackDialogForm: React.FC<\n React.PropsWithChildren<{\n /* Heading text displayed in the dialog title bar. /\n title: string;\n /* Custom label for the submit button. Defaults to the `SubmitButton` component's built-in label when omitted. /\n submitText?: string;\n /* Optional fixed width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content. /\n width?: number \| string;\n /* Optional fixed max-width for the dialog content area, as a pixel number (e.g. `600`) or any CSS string (e.g. `'50%'`, `'40rem'`). Omit to let the dialog size itself based on content and viewport. /\n maxWidth?: number \| string;\n /* Optional additional class name(s) to apply to the dialog content container. /\n className?: string;\n /* Controlled open state of the dialog. /\n open?: boolean;\n /* Callback fired when the dialog open state changes; the form is reset on close. */\n onOpenChange?: (open: boolean) => void;\n }>\n> = ({ title, submitText, width, maxWidth, className, open, onOpenChange, children }) => {\n const form = useTanStackFormContext();\n\n const handleOpenChange = useCallback(\n (open: boolean) => {\n if (!open) form.reset();\n onOpenChange?.(open);\n },\n [form.reset, onOpenChange]\n );\n\n return (\n <Dialog open={open} onOpenChange={handleOpenChange}>\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay />\n <DialogContent\n style={\n {\n '--width': width,\n '--max-width': maxWidth,\n } as React.CSSProperties\n }\n className={cn(\n 'flex size-full max-h-dvh max-w-dvw flex-col gap-0 overflow-y-auto rounded-none p-0 shadow-dialog sm:h-auto sm:max-h-[85dvh] sm:max-w-5xl sm:rounded-md',\n width && `sm:w-(--width)`,\n maxWidth && `sm:max-w-(--max-width)`,\n className\n )}\n onOpenAutoFocus={event => {\n // Prevents focus from shifting to the content when the dialog opens, which can cause layout shift if the content includes autofocusable elements.\n event.preventDefault();\n }}\n onInteractOutside={event => {\n // Prevents the dialog from closing when clicking outside, since the form may have unsaved changes.\n event.preventDefault();\n }}\n >\n <div data-slot=\"dialog-header\" className=\"flex items-center justify-center gap-2 px-6 py-5 text-center sm:text-left\">\n <DialogTitle data-slot=\"dialog-title\" className=\"font-semibold text-lg tracking-tight\">\n {title}\n </DialogTitle>\n </div>\n <Separator />\n <div data-slot=\"dialog-content\" className=\"relative flex flex-col overflow-y-auto p-0 pt-4 max-sm:flex-1 sm:p-4\">\n {children}\n </div>\n <Separator />\n <div data-slot=\"dialog-footer\" className=\"flex flex-col-reverse items-center justify-end gap-2 px-6 py-4 sm:flex-row max-sm:[&>button]:w-full\">\n <form.Subscribe\n selector={state => ({ disabled: state.isSubmitting })}\n children={({ disabled }) => (\n <CancelButton\n disabled={disabled}\n onClick={() => {\n form.reset();\n handleOpenChange(false);\n }}\n />\n )}\n />\n <form.Subscribe\n selector={state => ({\n isSubmitting: state.isSubmitting,\n disabled: state.isPristine \|\| !state.isValid \|\| state.isValidating \|\| state.isSubmitting \|\| !state.canSubmit,\n })}\n children={({ isSubmitting, disabled }) => (\n <SubmitButton isSubmitting={isSubmitting} disabled={disabled} submitText={submitText} onClick={() => form.handleSubmit()} />\n )}\n />\n </div>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n );\n};\n"],"mappings":"oZA8BA,MAAa,GAiBR,CAAE,QAAO,aAAY,QAAO,WAAU,YAAW,OAAM,eAAc,cAAe,CACvF,IAAM,EAAO,EAAuB,EAE9B,EAAmB,EACtB,GAAkB,CACZ,GAAM,EAAK,MAAM,EACtB,IAAe,CAAI,CACrB,EACA,CAAC,EAAK,MAAO,CAAY,CAC3B,EAEA,OACE,EAAC,EAAD,CAAc,OAAM,aAAc,WAChC,EAAC,EAAD,CAAc,YAAU,yBAAxB,CACE,EAAC,EAAD,CAAgB,CAAA,EAChB,EAAC,EAAD,CACE,MACE,CACE,UAAW,EACX,cAAe,CACjB,EAEF,UAAW,EACT,yJACA,GAAS,iBACT,GAAY,yBACZ,CACF,EACA,gBAAiB,GAAS,CAExB,EAAM,eAAe,CACvB,EACA,kBAAmB,GAAS,CAE1B,EAAM,eAAe,CACvB,WApBF,CAsBE,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,qFACvC,EAAC,EAAD,CAAa,YAAU,eAAe,UAAU,gDAC7C,CACU,CAAA,CACV,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,iBAAiB,UAAU,uEACvC,UACE,CAAA,EACL,EAAC,EAAD,CAAY,CAAA,EACZ,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,+GAAzC,CACE,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAAE,SAAU,EAAM,YAAa,GACnD,UAAW,CAAE,cACX,EAAC,EAAD,CACY,WACV,YAAe,CACb,EAAK,MAAM,EACX,EAAiB,EAAK,CACxB,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAK,UAAN,CACE,SAAU,IAAU,CAClB,aAAc,EAAM,aACpB,SAAU,EAAM,YAAc,CAAC,EAAM,SAAW,EAAM,cAAgB,EAAM,cAAgB,CAAC,EAAM,SACrG,GACA,UAAW,CAAE,eAAc,cACzB,EAAC,EAAD,CAA4B,eAAwB,WAAsB,aAAY,YAAe,EAAK,aAAa,CAAI,CAAA,CAE9H,CAAA,CACE,GACQ,GACH,GACR,CAAA,CAEZ"}

package/dist/dialogs/detail-dialog/components/sidebar.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as Button } from "../../../button-Bk4Y6_9I.cjs";
+import { t as Button } from "../../../button-CKRN3ZQT.cjs";
 import { n as TooltipContent } from "../../../tooltip-D4U-RhIu.cjs";
 import { t as Separator } from "../../../separator-D6_fMJtM.cjs";
 import { VariantProps } from "class-variance-authority";
@@ -105,7 +105,7 @@ declare function DetailDialogSidebarMenuItem({
 }: React.ComponentProps<'li'>): import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "lg" | "default" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function DetailDialogSidebarMenuButton({
   asChild,

package/dist/dialogs/detail-dialog/components/sidebar.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as Button } from "../../../button-Bk4Y6_9I.mjs";
+import { t as Button } from "../../../button-CKRN3ZQT.mjs";
 import { n as TooltipContent } from "../../../tooltip-D4U-RhIu.mjs";
 import { t as Separator } from "../../../separator-D6_fMJtM.mjs";
 import { VariantProps } from "class-variance-authority";
@@ -105,7 +105,7 @@ declare function DetailDialogSidebarMenuItem({
 }: React.ComponentProps<'li'>): import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "lg" | "default" | null | undefined;
+  size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function DetailDialogSidebarMenuButton({
   asChild,

package/dist/{email-field-DqEDxkp7.mjs → email-field-BGYZUVl0.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-CKAWexet.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{AtSignIcon as f,XIcon as p}from"lucide-react";import{useCallback as m}from"react";import{cn as h}from"@customafk/react-toolkit/utils";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useStore as v}from"@tanstack/react-form";const y=({label:y,description:b,placeholder:x,tooltip:S,helperText:C,orientation:w=`responsive`,showErrorMessage:T=!0,required:E=!1,maxLength:D})=>{let{form:O,name:k,state:A,handleBlur:j,handleChange:M}=e(),N=v(O.store,({isSubmitting:e})=>e),P=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,F=E&&A.value===null,I=!N&&!!A.value,L=m(({target:{value:e}})=>{N||D&&e.length>D||M(e||null)},[N,D,M]),R=m(()=>{N||M(null)},[N,M]);return _(s,{className:`gap-y-4 px-4`,children:[_(n,{"data-invalid":P,orientation:w,children:[_(r,{children:[_(c,{htmlFor:k,"aria-required":F,children:[y,S&&g(d,{tooltip:S})]}),g(a,{children:b})]}),_(i,{children:[g(t,{id:k,name:k,value:A.value===null?``:A.value,"aria-invalid":P,autoComplete:`email`,placeholder:x,className:h(`pl-9`,I&&`pr-9`,N&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:j,onChange:L}),g(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:g(f,{size:14})}),I&&g(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:R,children:g(p,{size:14,"aria-hidden":`true`})}),g(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:T&&A.meta.isDirty&&g(o,{errors:A.meta.errors})}),g(l,{isShow:!!C,children:C})]})]}),g(u,{})]})};export{y as EmailField};
-//# sourceMappingURL=email-field-DqEDxkp7.mjs.map
+import{G as e}from"./tanstack-form-AGwPfwiM.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{AtSignIcon as f,XIcon as p}from"lucide-react";import{useCallback as m}from"react";import{cn as h}from"@customafk/react-toolkit/utils";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{useStore as v}from"@tanstack/react-form";const y=({label:y,description:b,placeholder:x,tooltip:S,helperText:C,orientation:w=`responsive`,showErrorMessage:T=!0,required:E=!1,maxLength:D})=>{let{form:O,name:k,state:A,handleBlur:j,handleChange:M}=e(),N=v(O.store,({isSubmitting:e})=>e),P=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,F=E&&A.value===null,I=!N&&!!A.value,L=m(({target:{value:e}})=>{N||D&&e.length>D||M(e||null)},[N,D,M]),R=m(()=>{N||M(null)},[N,M]);return _(s,{className:`gap-y-4 px-4`,children:[_(n,{"data-invalid":P,orientation:w,children:[_(r,{children:[_(c,{htmlFor:k,"aria-required":F,children:[y,S&&g(d,{tooltip:S})]}),g(a,{children:b})]}),_(i,{children:[g(t,{id:k,name:k,value:A.value===null?``:A.value,"aria-invalid":P,autoComplete:`email`,placeholder:x,className:h(`pl-9`,I&&`pr-9`,N&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:j,onChange:L}),g(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:g(f,{size:14})}),I&&g(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:R,children:g(p,{size:14,"aria-hidden":`true`})}),g(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:T&&A.meta.isDirty&&g(o,{errors:A.meta.errors})}),g(l,{isShow:!!C,children:C})]})]}),g(u,{})]})};export{y as EmailField};
+//# sourceMappingURL=email-field-BGYZUVl0.mjs.map

package/dist/{email-field-DqEDxkp7.mjs.map → email-field-BGYZUVl0.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"email-field-~~DqEDxkp7~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n \n @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"email\">\n * {() => (\n * <EmailField\n * label=\"Email address\"\n * placeholder=\"you@example.com\"\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n required = false,\n maxLength,\n}) => {\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.isDirty && state.meta.isTouched && !state.meta.isValid;\n const _isEmpty = required && state.value === null;\n const _showClear = !isSubmitting && !!state.value;\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 const onClear = useCallback(() => {\n if (isSubmitting) return;\n handleChange(null);\n }, [isSubmitting, handleChange]);\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={name}\n name={name}\n value={state.value === null ? '' : state.value}\n aria-invalid={_invalid}\n autoComplete=\"email\"\n placeholder={placeholder}\n className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n onBlur={handleBlur}\n onChange={onChange}\n />\n <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n <AtSignIcon size={14} />\n </div>\n\n {_showClear && (\n <button\n type=\"button\"\n aria-label=\"Xóa\"\n className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n onClick={onClear}\n >\n <XIcon size={14} aria-hidden=\"true\" />\n </button>\n )}\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"uhBA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,EAAU,MAAkB,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,uBAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,UAAW,EAAG,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,oFACb,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,GACC,EAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,WAET,EAAC,EAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,EAGV,EAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"email-field-BGYZUVl0.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n \n @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"email\">\n * {() => (\n * <EmailField\n * label=\"Email address\"\n * placeholder=\"you@example.com\"\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n required = false,\n maxLength,\n}) => {\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.isDirty && state.meta.isTouched && !state.meta.isValid;\n const _isEmpty = required && state.value === null;\n const _showClear = !isSubmitting && !!state.value;\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 const onClear = useCallback(() => {\n if (isSubmitting) return;\n handleChange(null);\n }, [isSubmitting, handleChange]);\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={name}\n name={name}\n value={state.value === null ? '' : state.value}\n aria-invalid={_invalid}\n autoComplete=\"email\"\n placeholder={placeholder}\n className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n onBlur={handleBlur}\n onChange={onChange}\n />\n <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n <AtSignIcon size={14} />\n </div>\n\n {_showClear && (\n <button\n type=\"button\"\n aria-label=\"Xóa\"\n className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n onClick={onClear}\n >\n <XIcon size={14} aria-hidden=\"true\" />\n </button>\n )}\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"uhBA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,EAAU,MAAkB,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAC,EAAD,CAAY,UAAU,wBAAtB,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,uBAA5C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,IACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,UAAW,EAAG,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,EACD,EAAC,MAAD,CAAK,UAAU,oFACb,EAAC,EAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,GACC,EAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,WAET,EAAC,EAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,EAGV,EAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{email-field-DZzkfVj5.cjs → email-field-CO_BZHod.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-CX3lC3mC.cjs"),t=require("./ui/input.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,required:h=!1,maxLength:g})=>{let{form:_,name:v,state:y,handleBlur:b,handleChange:x}=e.G(),S=(0,s.useStore)(_.store,({isSubmitting:e})=>e),C=y.meta.isDirty&&y.meta.isTouched&&!y.meta.isValid,w=h&&y.value===null,T=!S&&!!y.value,E=(0,i.useCallback)(({target:{value:e}})=>{S||g&&e.length>g||x(e||null)},[S,g,x]),D=(0,i.useCallback)(()=>{S||x(null)},[S,x]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{"data-invalid":C,orientation:p,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{htmlFor:v,"aria-required":w,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Input,{id:v,name:v,value:y.value===null?``:y.value,"aria-invalid":C,autoComplete:`email`,placeholder:u,className:(0,a.cn)(`pl-9`,T&&`pr-9`,S&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:b,onChange:E}),(0,o.jsx)(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,o.jsx)(r.AtSignIcon,{size:14})}),T&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:D,children:(0,o.jsx)(r.XIcon,{size:14,"aria-hidden":`true`})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:m&&y.meta.isDirty&&(0,o.jsx)(n.FieldError,{errors:y.meta.errors})}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})};exports.EmailField=c;
-//# sourceMappingURL=email-field-DZzkfVj5.cjs.map
+const e=require("./tanstack-form-Bae0TOEr.cjs"),t=require("./ui/input.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,required:h=!1,maxLength:g})=>{let{form:_,name:v,state:y,handleBlur:b,handleChange:x}=e.G(),S=(0,s.useStore)(_.store,({isSubmitting:e})=>e),C=y.meta.isDirty&&y.meta.isTouched&&!y.meta.isValid,w=h&&y.value===null,T=!S&&!!y.value,E=(0,i.useCallback)(({target:{value:e}})=>{S||g&&e.length>g||x(e||null)},[S,g,x]),D=(0,i.useCallback)(()=>{S||x(null)},[S,x]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{"data-invalid":C,orientation:p,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{htmlFor:v,"aria-required":w,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Input,{id:v,name:v,value:y.value===null?``:y.value,"aria-invalid":C,autoComplete:`email`,placeholder:u,className:(0,a.cn)(`pl-9`,T&&`pr-9`,S&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:b,onChange:E}),(0,o.jsx)(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,o.jsx)(r.AtSignIcon,{size:14})}),T&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:D,children:(0,o.jsx)(r.XIcon,{size:14,"aria-hidden":`true`})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:m&&y.meta.isDirty&&(0,o.jsx)(n.FieldError,{errors:y.meta.errors})}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})};exports.EmailField=c;
+//# sourceMappingURL=email-field-CO_BZHod.cjs.map

package/dist/{email-field-DZzkfVj5.cjs.map → email-field-CO_BZHod.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"email-field-~~DZzkfVj5~~.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","AtSignIcon","XIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n \n @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"email\">\n * {() => (\n * <EmailField\n * label=\"Email address\"\n * placeholder=\"you@example.com\"\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n required = false,\n maxLength,\n}) => {\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.isDirty && state.meta.isTouched && !state.meta.isValid;\n const _isEmpty = required && state.value === null;\n const _showClear = !isSubmitting && !!state.value;\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 const onClear = useCallback(() => {\n if (isSubmitting) return;\n handleChange(null);\n }, [isSubmitting, handleChange]);\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={name}\n name={name}\n value={state.value === null ? '' : state.value}\n aria-invalid={_invalid}\n autoComplete=\"email\"\n placeholder={placeholder}\n className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n onBlur={handleBlur}\n onChange={onChange}\n />\n <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n <AtSignIcon size={14} />\n </div>\n\n {_showClear && (\n <button\n type=\"button\"\n aria-label=\"Xóa\"\n className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n onClick={onClear}\n >\n <XIcon size={14} aria-hidden=\"true\" />\n </button>\n )}\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"4QA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,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,EAEM,GAAA,EAAA,EAAA,YAAA,KAA4B,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,uBAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,WAAA,EAAA,EAAA,GAAA,CAAc,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,IACC,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,YAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,GAGV,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"email-field-CO_BZHod.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","AtSignIcon","XIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n \n @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"email\">\n * {() => (\n * <EmailField\n * label=\"Email address\"\n * placeholder=\"you@example.com\"\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n required = false,\n maxLength,\n}) => {\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.isDirty && state.meta.isTouched && !state.meta.isValid;\n const _isEmpty = required && state.value === null;\n const _showClear = !isSubmitting && !!state.value;\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 const onClear = useCallback(() => {\n if (isSubmitting) return;\n handleChange(null);\n }, [isSubmitting, handleChange]);\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={name}\n name={name}\n value={state.value === null ? '' : state.value}\n aria-invalid={_invalid}\n autoComplete=\"email\"\n placeholder={placeholder}\n className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n onBlur={handleBlur}\n onChange={onChange}\n />\n <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n <AtSignIcon size={14} />\n </div>\n\n {_showClear && (\n <button\n type=\"button\"\n aria-label=\"Xóa\"\n className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n onClick={onClear}\n >\n <XIcon size={14} aria-hidden=\"true\" />\n </button>\n )}\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"4QA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,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,EAEM,GAAA,EAAA,EAAA,YAAA,KAA4B,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,uBAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,WAAA,EAAA,EAAA,GAAA,CAAc,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,IACC,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,YAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,GAGV,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACZ,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/features/descriptions/index.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../typography/paragraph.cjs"),t=require("../../ui/image.cjs"),n=require("../../date-B3cozmfV.cjs"),r=require("../../ui/badge.cjs"),i=require("../../ui/tooltip.cjs"),a=require("../../data-display/user.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("class-variance-authority"),u=require("react/jsx-runtime");const d=()=>(0,u.jsx)(`span`,{"data-slot":`description-empty`,"aria-label":`Empty value`,className:`select-none font-medium text-sm text-text-positive-muted`,children:`—`}),f=({label:e,color:t=`secondary`,variant:n=`soft`,size:i=`sm`})=>e?(0,u.jsx)(r.Badge,{"data-slot":`description-badge`,color:t,variant:n,size:i,children:e}):(0,u.jsx)(d,{}),p=({value:e,trueLabel:t=`Yes`,falseLabel:n=`No`})=>e==null?(0,u.jsx)(d,{}):(0,u.jsx)(r.Badge,{"data-slot":`description-boolean`,variant:`soft`,color:e?`success`:`danger`,size:`sm`,children:e?t:n}),m=({value:e,truncate:t=!0})=>{let[n,r]=(0,s.useState)(!1),i=(0,s.useCallback)(async()=>{e&&(await navigator.clipboard.writeText(e),r(!0),setTimeout(()=>r(!1),1500))},[e]);return e?(0,u.jsxs)(`button`,{type:`button`,"data-slot":`description-copy`,onClick:i,className:(0,c.cn)(`group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-sm border border-border-weak bg-secondary-muted px-2 py-0.5 font-mono text-xs text-text-positive-weak transition-[border-color,color,box-shadow] hover:border-border hover:text-text-positive hover:shadow-xs`,t&&`min-w-0`),children:[(0,u.jsx)(`span`,{className:(0,c.cn)(`tabular-nums`,t&&`truncate`),children:e}),n?(0,u.jsx)(o.CheckIcon,{size:12,className:`shrink-0 text-success`}):(0,u.jsx)(o.CopyIcon,{size:12,className:`shrink-0 opacity-50 group-hover:opacity-100`})]}):(0,u.jsx)(d,{})},h=({date:e})=>e==null?(0,u.jsx)(d,{}):(0,u.jsx)(i.TooltipProvider,{children:(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,u.jsx)(n.t,{"data-slot":`description-date`,date:e,format:`medium`,className:`cursor-help`})}),(0,u.jsx)(i.TooltipContent,{children:(0,u.jsx)(n.t,{date:e,format:`full`,showTime:!0,className:`text-xs font-medium`})})]})}),g=({images:e})=>{if(!e?.length)return(0,u.jsx)(d,{});let n=e.length===1;return(0,u.jsx)(`div`,{"data-slot":`description-images`,className:`flex flex-wrap gap-4`,children:e.map(e=>(0,u.jsx)(`div`,{className:n?`group relative size-42 overflow-hidden rounded border border-border shadow-xs transition-shadow hover:shadow-card`:`group relative size-20 overflow-hidden rounded border border-border shadow-xs transition-shadow hover:shadow-card`,children:(0,u.jsx)(t.Image,{src:e.src,alt:e.alt,width:`100%`,height:`100%`,className:`transition-transform duration-200 group-hover:scale-105`})},e.id))})},_=({href:e,label:t,external:n=!0,className:r})=>e?(0,u.jsxs)(`a`,{"data-slot":`description-link`,href:e,target:n?`_blank`:void 0,rel:n?`noopener noreferrer`:void 0,className:(0,c.cn)(`inline-flex max-w-full items-center gap-1 text-sm text-primary underline decoration-dashed underline-offset-2 transition-colors hover:text-primary-strong hover:decoration-solid`,r),children:[!n&&(0,u.jsx)(o.LinkIcon,{size:12,className:`shrink-0 opacity-70`}),(0,u.jsx)(`span`,{className:`truncate`,children:t??e}),n&&(0,u.jsx)(o.ExternalLinkIcon,{size:12,className:`shrink-0 opacity-70`})]}):(0,u.jsx)(d,{}),v=({content:t})=>t==null?(0,u.jsx)(d,{}):(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,u.jsx)(e.Paragraph,{"data-slot":`description-longtext`,variant:`sm`,className:`line-clamp-2 cursor-pointer whitespace-pre-line break-all text-start text-sm hover:text-text-positive transition-colors`,children:t})}),(0,u.jsx)(i.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,u.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,u.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:t}),(0,u.jsxs)(`p`,{className:`w-full text-end text-text-positive-subtle`,children:[t.toString().length,` chars`]})]})})]}),y=({name:t})=>t?(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,u.jsx)(e.Paragraph,{"data-slot":`description-name`,variant:`sm`,className:`line-clamp-2 w-full cursor-pointer truncate hover:text-text-positive transition-colors`,children:t})}),(0,u.jsx)(i.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,u.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,u.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:t}),(0,u.jsxs)(`p`,{className:`w-full text-end text-text-positive-subtle`,children:[t.length,` chars`]})]})})]}):(0,u.jsx)(d,{}),b=({value:t})=>(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{"data-slot":`description-phone`,children:(0,u.jsx)(e.Paragraph,{variant:`sm`,className:`tabular-nums transition-colors`,children:t.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,u.jsx)(i.TooltipContent,{align:`start`,children:(0,u.jsx)(`p`,{className:`tabular-nums`,children:t.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]}),x=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},S=(0,l.cva)(`inline-flex items-center gap-1 font-number tabular-nums transition-colors`,{variants:{size:{xs:`text-xs`,sm:`text-sm`,md:`text-base`,lg:`text-lg`,xl:`text-xl`},trend:{neutral:`text-text-positive`,up:`text-success`,down:`text-danger`}},defaultVariants:{size:`sm`,trend:`neutral`}}),C=(0,s.memo)(({decimalSeparator:e=`.`,groupSeparator:t=`,`,prefix:n,suffix:r,precision:i,roundingMode:a=`round`,showTrailingZeros:o=!1,size:l=`sm`,trend:f=`neutral`,value:p=0,className:m})=>{let h=(0,s.useMemo)(()=>{let e={};return typeof i==`number`&&i>=0&&(o&&(e.minimumFractionDigits=i),e.maximumFractionDigits=i),e},[i,o]),g=(0,s.useCallback)(e=>{let t=e;return typeof i==`number`&&i>=0&&(t=x(e,i,a)),t.toLocaleString(`en-US`,h)},[a,h,i]),_=(0,s.useMemo)(()=>{if(typeof p==`number`)return Number.isNaN(p)||!Number.isFinite(p)?`N/A`:g(p);if(typeof p==`string`){let e=p.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:g(t)}return`N/A`},[p,g]),v=(0,s.useMemo)(()=>e===`.`&&t===`,`?_:_.replace(/,/g,t).replace(/\./g,e),[_,e,t]);return v===`0`||v===`N/A`||!v?(0,u.jsx)(d,{}):(0,u.jsxs)(`div`,{"data-slot":`description-statistic`,className:(0,c.cn)(S({size:l,trend:f}),m),children:[n&&(0,u.jsx)(`span`,{"data-slot":`description-statistic-prefix`,children:n}),(0,u.jsx)(`p`,{"data-slot":`description-statistic-value`,children:v}),r&&(0,u.jsx)(`span`,{"data-slot":`description-statistic-suffix`,children:r})]})});C.displayName=`DescriptionStatistic`;const w={primary:`bg-primary`,secondary:`bg-secondary`,muted:`bg-muted`,accent:`bg-accent`,info:`bg-info`,success:`bg-success`,warning:`bg-warning`,danger:`bg-danger`},T=({label:e,color:t=`info`,dot:n=!0})=>e?(0,u.jsxs)(r.Badge,{"data-slot":`description-status`,variant:`soft`,color:t,size:`sm`,className:`gap-1.5`,children:[n&&(0,u.jsx)(`span`,{className:(0,c.cn)(`inline-block size-1.5 shrink-0 rounded-full`,w[t])}),e]}):(0,u.jsx)(d,{}),E=({tags:e,max:t=5,color:n=`secondary`,variant:i=`soft`})=>{if(!e?.length)return(0,u.jsx)(d,{});let a=e.slice(0,t),o=e.length-a.length;return(0,u.jsxs)(`div`,{"data-slot":`description-tag-list`,className:`flex flex-wrap gap-1`,children:[a.map((e,t)=>(0,u.jsx)(r.Badge,{variant:i,color:n,size:`sm`,children:e},t)),o>0&&(0,u.jsxs)(r.Badge,{variant:`outline`,color:`muted`,size:`sm`,children:[`+`,o]})]})},D=({uuid:e,username:t,email:n})=>!e||!t||!n?(0,u.jsx)(d,{}):(0,u.jsx)(a.UserDataDisplay,{uuid:e,username:t,email:n}),O=(0,s.createContext)(!1),k=({label:e,labelColSpan:t=3,orientation:n=`horizontal`,action:r,children:i})=>n===`vertical`?(0,u.jsxs)(`div`,{"data-slot":`description-item`,className:`flex flex-col border-b border-b-border last:border-b-0`,children:[(0,u.jsxs)(`div`,{"data-slot":`description-item-label`,className:`flex items-center justify-between border-b border-b-border bg-secondary-muted py-2 pr-2 pl-4 text-sm font-medium text-text-positive-weak`,children:[(0,u.jsx)(`span`,{children:e}),r&&(0,u.jsx)(`div`,{className:`shrink-0`,children:r})]}),(0,u.jsx)(`div`,{"data-slot":`description-item-value`,className:`flex flex-wrap items-center gap-2 py-3 pr-2 pl-4 text-sm text-text-positive`,children:i})]}):(0,u.jsxs)(`div`,{"data-slot":`description-item`,style:{display:`grid`,gridTemplateColumns:`repeat(12, minmax(0, 1fr))`},className:`grid border-b border-b-border last:border-b-0`,children:[(0,u.jsxs)(`div`,{"data-slot":`description-item-label`,style:{gridColumn:`span ${t} / span ${t}`},className:`flex min-w-full items-center justify-between overflow-x-hidden text-wrap break-all border-r border-r-border bg-secondary-muted py-3 pr-2 pl-4 text-sm font-medium text-text-positive-weak tabular-nums`,children:[(0,u.jsx)(`span`,{children:e}),r&&(0,u.jsx)(`div`,{className:`shrink-0 pr-1`,children:r})]}),(0,u.jsx)(`div`,{"data-slot":`description-item-value`,style:{gridColumn:`span ${12-t} / span ${12-t}`},className:`flex flex-wrap items-center gap-2 py-3 pr-2 pl-4 text-sm text-text-positive`,children:i})]}),A=({title:e,description:t,extra:n,className:r})=>(0,u.jsxs)(`div`,{"data-slot":`description-header`,className:(0,c.cn)(`sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-b-border bg-card px-4 py-3`,r),children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-0.5`,children:[(0,u.jsx)(`p`,{className:`text-sm font-semibold text-text-positive`,children:e}),t&&(0,u.jsx)(`p`,{className:`text-xs text-text-positive-muted`,children:t})]}),n&&(0,u.jsx)(`div`,{className:`shrink-0`,children:n})]}),j=({title:e,className:t})=>(0,u.jsxs)(`div`,{"data-slot":`description-section`,className:(0,c.cn)(`flex items-center gap-3 border-b border-b-border px-4 py-2.5`,t),children:[e&&(0,u.jsx)(`p`,{className:`shrink-0 text-xs font-semibold uppercase tracking-widest text-text-positive-muted`,children:e}),(0,u.jsx)(`div`,{className:`h-px flex-1 bg-border`})]}),M=({rows:e})=>(0,u.jsxs)(`div`,{"data-slot":`description-loading`,className:`animate-pulse`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between border-b border-b-border px-4 py-3`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,u.jsx)(`div`,{className:`h-3.5 w-36 rounded bg-border`}),(0,u.jsx)(`div`,{className:`h-2.5 w-24 rounded bg-border-weak`})]}),(0,u.jsx)(`div`,{className:`h-5 w-16 rounded bg-border-weak`})]}),Array.from({length:e}).map((e,t)=>(0,u.jsxs)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(12, minmax(0, 1fr))`},className:`grid border-b border-b-border last:border-b-0`,children:[(0,u.jsx)(`div`,{style:{gridColumn:`span 3 / span 3`},className:`flex items-center border-r border-r-border bg-secondary-muted py-3 pl-4 pr-2`,children:(0,u.jsx)(`div`,{className:`h-3 w-20 rounded bg-border`})}),(0,u.jsx)(`div`,{style:{gridColumn:`span 9 / span 9`},className:`flex items-center py-3 pl-4 pr-2`,children:(0,u.jsx)(`div`,{className:`h-3 w-28 rounded bg-border-weak`})})]},t))]}),N=({children:e,className:t,nested:n=!1,loading:r=!1,loadingRows:i=4})=>(0,u.jsx)(`div`,{"data-slot":`description`,className:(0,c.cn)(`relative flex flex-col bg-card`,(0,s.useContext)(O)?`border-b border-b-border last:border-b-0`:n?`w-full overflow-hidden rounded-md border border-border`:`size-full overflow-y-auto rounded-lg border border-border shadow-card ring-1 ring-border-weak`,t),children:r?(0,u.jsx)(M,{rows:i}):e}),P=({children:e,className:t})=>(0,u.jsx)(O.Provider,{value:!0,children:(0,u.jsx)(`div`,{"data-slot":`description-group`,className:(0,c.cn)(`relative size-full overflow-y-auto rounded-lg border border-border bg-card shadow-card ring-1 ring-border-weak`,t),children:e})});exports.Description=N,exports.DescriptionBadge=f,exports.DescriptionBoolean=p,exports.DescriptionCopy=m,exports.DescriptionDate=h,exports.DescriptionEmpty=d,exports.DescriptionGroup=P,exports.DescriptionHeader=A,exports.DescriptionImages=g,exports.DescriptionItem=k,exports.DescriptionLink=_,exports.DescriptionLongText=v,exports.DescriptionName=y,exports.DescriptionNumberPhone=b,exports.DescriptionSection=j,exports.DescriptionStatistic=C,exports.DescriptionStatus=T,exports.DescriptionTagList=E,exports.DescriptionUser=D;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../typography/paragraph.cjs"),t=require("../../ui/image.cjs"),n=require("../../date-B3cozmfV.cjs"),r=require("../../ui/badge.cjs"),i=require("../../ui/tooltip.cjs"),a=require("../../data-display/user.cjs");let o=require("lucide-react"),s=require("react"),c=require("@customafk/react-toolkit/utils"),l=require("class-variance-authority"),u=require("react/jsx-runtime");const d=()=>(0,u.jsx)(`span`,{"data-slot":`description-empty`,"aria-label":`Empty value`,className:`select-none font-medium text-sm text-text-positive-muted`,children:`—`}),f=({label:e,color:t=`secondary`,variant:n=`soft`,size:i=`sm`})=>e?(0,u.jsx)(r.Badge,{"data-slot":`description-badge`,color:t,variant:n,size:i,children:e}):(0,u.jsx)(d,{}),p=({value:e,trueLabel:t=`Yes`,falseLabel:n=`No`})=>e==null?(0,u.jsx)(d,{}):(0,u.jsx)(r.Badge,{"data-slot":`description-boolean`,variant:`soft`,color:e?`success`:`danger`,size:`sm`,children:e?t:n}),m=({value:e,truncate:t=!0})=>{let[n,r]=(0,s.useState)(!1),i=(0,s.useCallback)(async()=>{e&&(await navigator.clipboard.writeText(e),r(!0),setTimeout(()=>r(!1),1500))},[e]);return e?(0,u.jsxs)(`button`,{type:`button`,"data-slot":`description-copy`,onClick:i,className:(0,c.cn)(`group inline-flex max-w-full cursor-pointer items-center gap-1.5 rounded-sm border border-border-weak bg-secondary-muted px-2 py-0.5 font-mono text-xs text-text-positive-weak transition-[border-color,color,box-shadow] hover:border-border hover:text-text-positive hover:shadow-xs`,t&&`min-w-0`),children:[(0,u.jsx)(`span`,{className:(0,c.cn)(`tabular-nums`,t&&`truncate`),children:e}),n?(0,u.jsx)(o.CheckIcon,{size:12,className:`shrink-0 text-success`}):(0,u.jsx)(o.CopyIcon,{size:12,className:`shrink-0 opacity-50 group-hover:opacity-100`})]}):(0,u.jsx)(d,{})},h=({date:e})=>e==null?(0,u.jsx)(d,{}):(0,u.jsx)(i.TooltipProvider,{children:(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,u.jsx)(n.t,{"data-slot":`description-date`,date:e,format:`medium`,className:`cursor-help`})}),(0,u.jsx)(i.TooltipContent,{children:(0,u.jsx)(n.t,{date:e,format:`full`,showTime:!0,className:`text-xs font-medium`})})]})}),g=({images:e})=>{if(!e?.length)return(0,u.jsx)(d,{});let n=e.length===1;return(0,u.jsx)(`div`,{"data-slot":`description-images`,className:`flex flex-wrap gap-4`,children:e.map(e=>(0,u.jsx)(`div`,{className:n?`group relative size-42 overflow-hidden rounded border border-border shadow-xs transition-shadow hover:shadow-card`:`group relative size-20 overflow-hidden rounded border border-border shadow-xs transition-shadow hover:shadow-card`,children:(0,u.jsx)(t.Image,{src:e.src,alt:e.alt,width:`100%`,height:`100%`,className:`transition-transform duration-200 group-hover:scale-105`})},e.id))})},_=({href:e,label:t,external:n=!0,className:r})=>e?(0,u.jsxs)(`a`,{"data-slot":`description-link`,href:e,target:n?`_blank`:void 0,rel:n?`noopener noreferrer`:void 0,className:(0,c.cn)(`inline-flex max-w-full items-center gap-1 text-sm text-primary underline decoration-dashed underline-offset-2 transition-colors hover:text-primary-strong hover:decoration-solid`,r),children:[!n&&(0,u.jsx)(o.LinkIcon,{size:12,className:`shrink-0 opacity-70`}),(0,u.jsx)(`span`,{className:`truncate`,children:t??e}),n&&(0,u.jsx)(o.ExternalLinkIcon,{size:12,className:`shrink-0 opacity-70`})]}):(0,u.jsx)(d,{}),v=({content:t})=>t==null?(0,u.jsx)(d,{}):(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,u.jsx)(e.Paragraph,{"data-slot":`description-longtext`,variant:`sm`,className:`line-clamp-2 cursor-pointer whitespace-pre-line break-all text-start text-sm hover:text-text-positive transition-colors`,children:t})}),(0,u.jsx)(i.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,u.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,u.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:t}),(0,u.jsxs)(`p`,{className:`w-full text-end text-text-positive-subtle`,children:[t.toString().length,` chars`]})]})})]}),y=({name:t})=>t?(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{asChild:!0,children:(0,u.jsx)(e.Paragraph,{"data-slot":`description-name`,variant:`sm`,className:`line-clamp-2 w-full cursor-pointer truncate hover:text-text-positive transition-colors`,children:t})}),(0,u.jsx)(i.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,u.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,u.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:t}),(0,u.jsxs)(`p`,{className:`w-full text-end text-text-positive-subtle`,children:[t.length,` chars`]})]})})]}):(0,u.jsx)(d,{}),b=({value:t})=>(0,u.jsxs)(i.Tooltip,{children:[(0,u.jsx)(i.TooltipTrigger,{"data-slot":`description-phone`,children:(0,u.jsx)(e.Paragraph,{variant:`sm`,className:`tabular-nums transition-colors`,children:t.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,u.jsx)(i.TooltipContent,{align:`start`,children:(0,u.jsx)(`p`,{className:`tabular-nums`,children:t.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]}),x=(e,t,n)=>{let r=10**t;switch(n){case`floor`:return Math.floor(e*r)/r;case`ceil`:return Math.ceil(e*r)/r;default:return Math.round(e*r)/r}},S=(0,l.cva)(`inline-flex items-center gap-1 font-number tabular-nums transition-colors`,{variants:{size:{xs:`text-xs`,sm:`text-sm`,md:`text-base`,lg:`text-lg`,xl:`text-xl`},trend:{neutral:`text-text-positive`,up:`text-success`,down:`text-danger`}},defaultVariants:{size:`sm`,trend:`neutral`}}),C=(0,s.memo)(({decimalSeparator:e=`.`,groupSeparator:t=`,`,prefix:n,suffix:r,precision:i,roundingMode:a=`round`,showTrailingZeros:o=!1,size:l=`sm`,trend:f=`neutral`,value:p=0,className:m})=>{let h=(0,s.useMemo)(()=>{let e={};return typeof i==`number`&&i>=0&&(o&&(e.minimumFractionDigits=i),e.maximumFractionDigits=i),e},[i,o]),g=(0,s.useCallback)(e=>{let t=e;return typeof i==`number`&&i>=0&&(t=x(e,i,a)),t.toLocaleString(`en-US`,h)},[a,h,i]),_=(0,s.useMemo)(()=>{if(typeof p==`number`)return Number.isNaN(p)||!Number.isFinite(p)?`N/A`:g(p);if(typeof p==`string`){let e=p.trim();if(!e)return`N/A`;let t=Number(e);return Number.isNaN(t)||!Number.isFinite(t)?`N/A`:g(t)}return`N/A`},[p,g]),v=(0,s.useMemo)(()=>e===`.`&&t===`,`?_:_.replace(/,/g,t).replace(/\./g,e),[_,e,t]);return v===`0`||v===`N/A`||!v?(0,u.jsx)(d,{}):(0,u.jsxs)(`div`,{"data-slot":`description-statistic`,className:(0,c.cn)(S({size:l,trend:f}),m),children:[n&&(0,u.jsx)(`span`,{"data-slot":`description-statistic-prefix`,children:n}),(0,u.jsx)(`p`,{"data-slot":`description-statistic-value`,children:v}),r&&(0,u.jsx)(`span`,{"data-slot":`description-statistic-suffix`,children:r})]})});C.displayName=`DescriptionStatistic`;const w={primary:`bg-primary`,secondary:`bg-secondary`,muted:`bg-muted`,accent:`bg-accent`,info:`bg-info`,success:`bg-success`,warning:`bg-warning`,danger:`bg-danger`},T=({label:e,color:t=`info`,dot:n=!0})=>e?(0,u.jsxs)(r.Badge,{"data-slot":`description-status`,variant:`soft`,color:t,size:`sm`,className:`gap-1.5`,children:[n&&(0,u.jsx)(`span`,{className:(0,c.cn)(`inline-block size-1.5 shrink-0 rounded-full`,w[t])}),e]}):(0,u.jsx)(d,{}),E=({tags:e,max:t=5,color:n=`secondary`,variant:i=`soft`})=>{if(!e?.length)return(0,u.jsx)(d,{});let a=e.slice(0,t),o=e.length-a.length;return(0,u.jsxs)(`div`,{"data-slot":`description-tag-list`,className:`flex flex-wrap gap-1`,children:[a.map((e,t)=>(0,u.jsx)(r.Badge,{variant:i,color:n,size:`sm`,children:e},t)),o>0&&(0,u.jsxs)(r.Badge,{variant:`outline`,color:`muted`,size:`sm`,children:[`+`,o]})]})},D=({uuid:e,username:t,email:n})=>!e||!t||!n?(0,u.jsx)(d,{}):(0,u.jsx)(a.UserDataDisplay,{uuid:e,username:t,email:n}),O=(0,s.createContext)(!1),k=({label:e,labelColSpan:t=3,orientation:n=`horizontal`,action:r,labelAlign:i=`start`,children:a})=>n===`vertical`?(0,u.jsxs)(`div`,{"data-slot":`description-item`,className:`flex flex-col border-b border-b-border last:border-b-0`,children:[(0,u.jsxs)(`div`,{"data-slot":`description-item-label`,className:(0,c.cn)(`flex items-center border-b border-b-border bg-secondary-muted py-2 pr-2 pl-4 font-medium text-sm text-text-positive-weak`,i===`end`?`justify-end`:`justify-between`),children:[(0,u.jsx)(`span`,{children:e}),r&&(0,u.jsx)(`div`,{className:`shrink-0`,children:r})]}),(0,u.jsx)(`div`,{"data-slot":`description-item-value`,className:`flex flex-wrap items-center gap-2 py-3 pr-2 pl-4 text-sm text-text-positive`,children:a})]}):(0,u.jsxs)(`div`,{"data-slot":`description-item`,style:{display:`grid`,gridTemplateColumns:`repeat(12, minmax(0, 1fr))`},className:`grid border-b border-b-border last:border-b-0`,children:[(0,u.jsxs)(`div`,{"data-slot":`description-item-label`,style:{gridColumn:`span ${t} / span ${t}`},className:(0,c.cn)(`flex min-w-full items-center overflow-x-hidden text-wrap break-all border-r border-r-border bg-secondary-muted py-3 pr-2 pl-4 font-medium text-sm text-text-positive-weak tabular-nums`,i===`end`?`justify-end`:`justify-between`),children:[(0,u.jsx)(`span`,{children:e}),r&&(0,u.jsx)(`div`,{className:`shrink-0 pr-1`,children:r})]}),(0,u.jsx)(`div`,{"data-slot":`description-item-value`,style:{gridColumn:`span ${12-t} / span ${12-t}`},className:`flex flex-wrap items-center gap-2 py-3 pr-2 pl-4 text-sm text-text-positive`,children:a})]}),A=({title:e,description:t,extra:n,className:r})=>(0,u.jsxs)(`div`,{"data-slot":`description-header`,className:(0,c.cn)(`sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-b-border bg-card px-4 py-3`,r),children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-0.5`,children:[(0,u.jsx)(`p`,{className:`text-sm font-semibold text-text-positive`,children:e}),t&&(0,u.jsx)(`p`,{className:`text-xs text-text-positive-muted`,children:t})]}),n&&(0,u.jsx)(`div`,{className:`shrink-0`,children:n})]}),j=({title:e,className:t})=>(0,u.jsxs)(`div`,{"data-slot":`description-section`,className:(0,c.cn)(`flex items-center gap-3 border-b border-b-border px-4 py-2.5`,t),children:[e&&(0,u.jsx)(`p`,{className:`shrink-0 text-xs font-semibold uppercase tracking-widest text-text-positive-muted`,children:e}),(0,u.jsx)(`div`,{className:`h-px flex-1 bg-border`})]}),M=({rows:e})=>(0,u.jsxs)(`div`,{"data-slot":`description-loading`,className:`animate-pulse`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between border-b border-b-border px-4 py-3`,children:[(0,u.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,u.jsx)(`div`,{className:`h-3.5 w-36 rounded bg-border`}),(0,u.jsx)(`div`,{className:`h-2.5 w-24 rounded bg-border-weak`})]}),(0,u.jsx)(`div`,{className:`h-5 w-16 rounded bg-border-weak`})]}),Array.from({length:e}).map((e,t)=>(0,u.jsxs)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(12, minmax(0, 1fr))`},className:`grid border-b border-b-border last:border-b-0`,children:[(0,u.jsx)(`div`,{style:{gridColumn:`span 3 / span 3`},className:`flex items-center border-r border-r-border bg-secondary-muted py-3 pl-4 pr-2`,children:(0,u.jsx)(`div`,{className:`h-3 w-20 rounded bg-border`})}),(0,u.jsx)(`div`,{style:{gridColumn:`span 9 / span 9`},className:`flex items-center py-3 pl-4 pr-2`,children:(0,u.jsx)(`div`,{className:`h-3 w-28 rounded bg-border-weak`})})]},t))]}),N=({children:e,className:t,nested:n=!1,loading:r=!1,loadingRows:i=4})=>(0,u.jsx)(`div`,{"data-slot":`description`,className:(0,c.cn)(`relative flex flex-col bg-card`,(0,s.useContext)(O)?`border-b border-b-border last:border-b-0`:n?`w-full overflow-hidden rounded-md border border-border`:`size-full overflow-y-auto rounded-lg border border-border shadow-card ring-1 ring-border-weak`,t),children:r?(0,u.jsx)(M,{rows:i}):e}),P=({children:e,className:t})=>(0,u.jsx)(O.Provider,{value:!0,children:(0,u.jsx)(`div`,{"data-slot":`description-group`,className:(0,c.cn)(`relative size-full overflow-y-auto rounded-lg border border-border bg-card shadow-card ring-1 ring-border-weak`,t),children:e})});exports.Description=N,exports.DescriptionBadge=f,exports.DescriptionBoolean=p,exports.DescriptionCopy=m,exports.DescriptionDate=h,exports.DescriptionEmpty=d,exports.DescriptionGroup=P,exports.DescriptionHeader=A,exports.DescriptionImages=g,exports.DescriptionItem=k,exports.DescriptionLink=_,exports.DescriptionLongText=v,exports.DescriptionName=y,exports.DescriptionNumberPhone=b,exports.DescriptionSection=j,exports.DescriptionStatistic=C,exports.DescriptionStatus=T,exports.DescriptionTagList=E,exports.DescriptionUser=D;
 //# sourceMappingURL=index.cjs.map