@customafk/lunas-ui 0.2.74 → 0.2.76

package/dist/{date-field-Ba6O0uV3.cjs.map → date-field-CYoPe74G.cjs.map}

@@ -1 +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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"}
+{"version":3,"file":"date-field-CYoPe74G.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-DUx13OiJ.mjs → date-field-D_qpBb-t.mjs}

@@ -1,2 +1,2 @@
-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
+import{Button as e}from"./ui/button.mjs";import{G as t}from"./tanstack-form-q9hDCc0Y.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-D_qpBb-t.mjs.map

package/dist/{date-field-DUx13OiJ.mjs.map → date-field-D_qpBb-t.mjs.map}

@@ -1 +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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"}
+{"version":3,"file":"date-field-D_qpBb-t.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/{date-tooltip-DptxGOj_.d.cts → date-tooltip-BZ4JiwfW.d.cts}

@@ -1,6 +1,7 @@
 //#region packages/components/data-display/date-tooltip.d.ts
 type DateTooltipProps = {
-  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */date: Date | string | number;
+  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */
+  date: Date | string | number;
 };
 /**
  * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.
@@ -15,4 +16,4 @@ type DateTooltipProps = {
 declare const DateTooltip: React.FC<DateTooltipProps>;
 //#endregion
 export { DateTooltip as t };
-//# sourceMappingURL=date-tooltip-DptxGOj_.d.cts.map
+//# sourceMappingURL=date-tooltip-BZ4JiwfW.d.cts.map

package/dist/{date-tooltip-DptxGOj_.d.mts → date-tooltip-BZ4JiwfW.d.mts}

@@ -1,6 +1,7 @@
 //#region packages/components/data-display/date-tooltip.d.ts
 type DateTooltipProps = {
-  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */date: Date | string | number;
+  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */
+  date: Date | string | number;
 };
 /**
  * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.
@@ -15,4 +16,4 @@ type DateTooltipProps = {
 declare const DateTooltip: React.FC<DateTooltipProps>;
 //#endregion
 export { DateTooltip as t };
-//# sourceMappingURL=date-tooltip-DptxGOj_.d.mts.map
+//# sourceMappingURL=date-tooltip-BZ4JiwfW.d.mts.map

package/dist/description-display-BR8nXqc_.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"description-display-BR8nXqc_.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAeA,MAAa,GAGP,CAAE,aACF,GAAqC,MAChC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAGtB,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,yCACtC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,GACX,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"description-display-BR8nXqc_.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kJAeA,MAAa,GAGP,CAAE,aACF,GAAqC,MAChC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAGtB,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,6CAC/B,SAAA,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,SAAA,CACQ,CAAA,GACX,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,CAChE,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA"}

package/dist/description-display-CW0g3aJa.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"description-display-CW0g3aJa.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAeA,MAAa,GAGP,CAAE,aACF,GAAqC,KAChC,EAAC,EAAD,CAAe,CAAA,EAGtB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,wCACtC,EAAC,MAAD,CAAK,UAAU,iCAAf,CACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,EACX,EAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"description-display-CW0g3aJa.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n  /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n  content: string | null | undefined | number;\n}> = ({ content }) => {\n  if (content === undefined || content === null) {\n    return <UITableEmpty />;\n  }\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n          {content}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n        <div className=\"flex flex-col gap-y-2\">\n          <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n            {content}\n          </Paragraph>\n          <p className=\"w-full text-end\">{content.toString().length} chars</p>\n        </div>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"sOAeA,MAAa,GAGP,CAAE,aACF,GAAqC,KAChC,EAAC,EAAD,CAAe,CAAA,EAGtB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,6CAC/B,SAAA,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,SAAA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,mEAC/B,SAAA,CACQ,CAAA,EACX,EAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,CAChE,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA"}

package/dist/detail-dialog-Ct0vAjFe.mjs

@@ -0,0 +1,2 @@
+import{Skeleton as e}from"./ui/skeleton.mjs";import{Flex as t}from"./layouts/flex.mjs";import{t as n}from"./date-Nsz0Pewe.mjs";import{TooltipProvider as r}from"./ui/tooltip.mjs";import{Title as i}from"./typography/title.mjs";import{_ as a,a as o,d as s,f as c,i as l,m as u,n as d,o as f,p,r as m,s as h,t as g}from"./sidebar-core-Bz_LtXZy.mjs";import{LunasLogo as _}from"./features/logo/index.mjs";import{CalendarIcon as v,XIcon as y}from"lucide-react";import{Suspense as b,useCallback as x}from"react";import{cn as S}from"@customafk/react-toolkit/utils";import{jsx as C,jsxs as w}from"react/jsx-runtime";import{Dialog as T}from"radix-ui";function E(){return C(t,{justify:`center`,className:`inset-shadow-sm min-h-0 bg-muted-muted`,children:C(`div`,{className:`loader`})})}function D({isLoading:e,children:t}){return C(`main`,{"data-slot":`detail-dialog-main`,className:`@container col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1`,children:e?C(E,{}):C(b,{fallback:C(E,{}),children:C(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm grid min-h-0 snap-y grid-cols-1 overflow-y-auto bg-white`,children:t})})})}function O(){return w(`div`,{"data-slot":`detail-dialog-header-skeleton`,className:`grid justify-items-start gap-1.5`,children:[C(e,{className:`h-5 w-40`}),C(e,{className:`h-3 w-24`})]})}function k({title:e,createdAt:t,headerComponent:r}){return w(`header`,{"data-slot":`detail-dialog-header`,className:`col-start-2 row-start-1 grid grid-cols-[auto_1fr] items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2`,children:[C(h,{}),C(`div`,{"data-slot":`detail-dialog-header-content`,className:`min-w-0 overflow-x-auto`,children:C(b,{fallback:C(O,{}),children:r??w(`div`,{className:`grid justify-items-start gap-0`,children:[C(i,{level:5,className:`line-clamp-1 truncate text-wrap`,children:e||`Detail Dialog`}),!!t&&w(`div`,{className:`relative grid grid-flow-col items-center gap-1 text-text-positive-weak`,children:[C(v,{size:12,className:`text-primary-strong`}),C(`p`,{className:`text-primary-strong text-xs`,children:`Ngày Tạo`}),C(n,{showHoliday:!0,date:t,format:`medium`})]})]})})})]})}function A({defaultOpen:e=!0,open:t,onOpenChange:n,className:i,style:o,children:l,...d}){let f=a({defaultOpen:e,open:t,onOpenChange:n});return C(u.Provider,{value:f,children:C(r,{delayDuration:0,children:C(`div`,{"data-slot":`detail-dialog-wrapper`,style:{"--sidebar-width":s,"--sidebar-width-icon":c,...o},className:S(`group/sidebar-wrapper size-full min-h-[85dvh]`,`grid grid-cols-[auto_1fr] grid-rows-[auto_1fr]`,i),...d,children:l})})})}function j({title:e,sidebarTitle:t,content:n,footer:r}){return C(`div`,{className:`col-start-1 row-span-2 row-start-1`,children:w(p,{children:[C(m,{children:C(l,{children:C(f,{children:w(o,{size:`lg`,tabIndex:-1,children:[C(_,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-h-8 min-w-8`}),w(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[C(`span`,{className:`truncate font-medium`,children:t||`Detail Dialog`}),C(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),C(g,{children:n}),C(d,{children:r})]})})}function M({open:e,onOpenChange:t,children:n}){let r=x(e=>{e.preventDefault(),e.stopPropagation()},[]);return C(T.Root,{"data-slot":`detail-dialog`,open:e,onOpenChange:t,children:C(T.Portal,{"data-slot":`detail-dialog-portal`,children:C(T.Overlay,{"data-slot":`detail-dialog-overlay`,className:`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 flex overflow-auto bg-black/50 p-4 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:backdrop-blur-xs`,children:w(T.Content,{"data-slot":`dialog-content`,className:S(`relative z-50 m-auto grid`,`gap-4 overflow-hidden rounded-sm border-none bg-background p-0 shadow-dialog outline-none duration-200`,`size-full max-h-dvh min-h-160 min-w-264 max-w-svw`,`data-[state=closed]:animate-out data-[state=open]:animate-in`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`),onInteractOutside:r,children:[n,C(T.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:C(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:C(y,{size:24})})})]})})})})}const N=({open:e,isLoading:t,title:n,createdAt:r,onOpenChange:i,sidebar:a,headerComponent:o,children:s})=>C(M,{open:e,onOpenChange:i,children:w(A,{children:[C(j,{title:a?.title,content:a?.content,footer:a?.footer}),C(k,{title:n,createdAt:r,headerComponent:o}),C(D,{isLoading:t,children:s})]})});export{N as t};
+//# sourceMappingURL=detail-dialog-Ct0vAjFe.mjs.map

package/dist/detail-dialog-Ct0vAjFe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-dialog-Ct0vAjFe.mjs","names":["DialogPrimitive"],"sources":["../packages/components/dialogs/detail-dialog/components/content.tsx","../packages/components/dialogs/detail-dialog/components/header.tsx","../packages/components/dialogs/detail-dialog/components/provider.tsx","../packages/components/dialogs/detail-dialog/components/sidebar-panel.tsx","../packages/components/dialogs/detail-dialog/components/wrapper.tsx","../packages/components/dialogs/detail-dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport { Suspense } from 'react';\n\nimport { Flex } from '@/components/layouts/flex';\n\nexport type DetailDialogContentProps = React.PropsWithChildren<{\n  /** When `true`, replaces the content with a centered loading spinner. */\n  isLoading?: boolean;\n}>;\n\nfunction DetailDialogLoader() {\n  return (\n    <Flex justify=\"center\" className=\"inset-shadow-sm min-h-0 bg-muted-muted\">\n      <div className=\"loader\" />\n    </Flex>\n  );\n}\n\nexport function DetailDialogContent({ isLoading, children }: DetailDialogContentProps) {\n  return (\n    <main data-slot=\"detail-dialog-main\" className=\"@container col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1\">\n      {isLoading ? (\n        <DetailDialogLoader />\n      ) : (\n        <Suspense fallback={<DetailDialogLoader />}>\n          <section data-slot=\"detail-dialog-body\" className=\"relative inset-shadow-sm grid min-h-0 snap-y grid-cols-1 overflow-y-auto bg-white\">\n            {children}\n          </section>\n        </Suspense>\n      )}\n    </main>\n  );\n}\n","'use client';\n\nimport { Suspense } from 'react';\n\nimport { CalendarIcon } from 'lucide-react';\n\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { Title } from '@/components/typography/title';\nimport { DetailDialogSidebarTrigger } from './sidebar-core';\n\nexport type DetailDialogHeaderProps = {\n  /** Primary title displayed in the dialog header. */\n  title?: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Custom content replacing the default title/date block, e.g. for consumer-specific headers. Suspense-wrapped. */\n  headerComponent?: React.ReactNode;\n};\n\nfunction DetailDialogHeaderSkeleton() {\n  return (\n    <div data-slot=\"detail-dialog-header-skeleton\" className=\"grid justify-items-start gap-1.5\">\n      <Skeleton className=\"h-5 w-40\" />\n      <Skeleton className=\"h-3 w-24\" />\n    </div>\n  );\n}\n\nexport function DetailDialogHeader({ title, createdAt, headerComponent }: DetailDialogHeaderProps) {\n  return (\n    <header\n      data-slot=\"detail-dialog-header\"\n      className=\"col-start-2 row-start-1 grid grid-cols-[auto_1fr] items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2\"\n    >\n      <DetailDialogSidebarTrigger />\n      <div data-slot=\"detail-dialog-header-content\" className=\"min-w-0 overflow-x-auto\">\n        <Suspense fallback={<DetailDialogHeaderSkeleton />}>\n          {headerComponent ?? (\n            <div className=\"grid justify-items-start gap-0\">\n              <Title level={5} className=\"line-clamp-1 truncate text-wrap\">\n                {title || 'Detail Dialog'}\n              </Title>\n              {!!createdAt && (\n                <div className=\"relative grid grid-flow-col items-center gap-1 text-text-positive-weak\">\n                  <CalendarIcon size={12} className=\"text-primary-strong\" />\n                  <p className=\"text-primary-strong text-xs\">Ngày Tạo</p>\n                  <DateDisplay showHoliday date={createdAt} format=\"medium\" />\n                </div>\n              )}\n            </div>\n          )}\n        </Suspense>\n      </div>\n    </header>\n  );\n}\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { TooltipProvider } from '@/components/ui/tooltip';\n\nimport { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SidebarContext, useSidebarState } from './sidebar-core';\n\n/**\n * Context provider for `DetailDialog`'s sidebar/header/content grid shell. Manages sidebar\n * open/collapsed state (persisted via a cookie, shared with `SidebarProvider` via\n * `useSidebarState`) and renders the 2x2 grid wrapper — sidebar spanning both rows in column 1,\n * header/content in column 2. DetailDialog-specific, not a standalone-reusable provider like\n * `./sidebar-core`'s `SidebarProvider`.\n */\nexport function DetailDialogProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  /** Whether the sidebar is open by default (uncontrolled). Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. When provided the component becomes controlled. */\n  open?: boolean;\n  /** Callback fired when the open state changes in controlled mode. */\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const contextValue = useSidebarState({ defaultOpen, open: openProp, onOpenChange: setOpenProp });\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"detail-dialog-wrapper\"\n          style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n          className={cn('group/sidebar-wrapper size-full min-h-[85dvh]', 'grid grid-cols-[auto_1fr] grid-rows-[auto_1fr]', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n","'use client';\n\nimport { LunasLogo } from '@/components/features/logo';\n\nimport {\n  DetailDialogSidebarContent,\n  DetailDialogSidebarFooter,\n  DetailDialogSidebarHeader,\n  DetailDialogSidebarMenu,\n  DetailDialogSidebarMenuButton,\n  DetailDialogSidebarMenuItem,\n  Sidebar,\n} from './sidebar-core';\n\nexport type DetailDialogSidebarPanelProps = {\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  title?: string;\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  sidebarTitle?: string;\n  /** Arbitrary content rendered inside the sidebar scrollable area. */\n  content?: React.ReactNode;\n  /** Arbitrary content rendered at the bottom of the sidebar footer. */\n  footer?: React.ReactNode;\n};\n\nexport function DetailDialogSidebarPanel({ title, sidebarTitle, content, footer }: DetailDialogSidebarPanelProps) {\n  return (\n    <div className=\"col-start-1 row-span-2 row-start-1\">\n      <Sidebar>\n        <DetailDialogSidebarHeader>\n          <DetailDialogSidebarMenu>\n            <DetailDialogSidebarMenuItem>\n              <DetailDialogSidebarMenuButton size=\"lg\" tabIndex={-1}>\n                <LunasLogo variant=\"icon\" iconStyle=\"solid\" size=\"md\" className=\"size-8 min-h-8 min-w-8\" />\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{sidebarTitle || 'Detail Dialog'}</span>\n                  <span className=\"truncate text-xs\">Lunas Enterprise</span>\n                </div>\n              </DetailDialogSidebarMenuButton>\n            </DetailDialogSidebarMenuItem>\n          </DetailDialogSidebarMenu>\n        </DetailDialogSidebarHeader>\n        <DetailDialogSidebarContent>{content}</DetailDialogSidebarContent>\n        <DetailDialogSidebarFooter>{footer}</DetailDialogSidebarFooter>\n      </Sidebar>\n    </div>\n  );\n}\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\n\nexport type DetailDialogWrapperProps = React.PropsWithChildren<{\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n}>;\n\n/**\n * Outer Radix Dialog scaffolding for `DetailDialog` — Root, Portal, Overlay (scrollable,\n * min-width/min-height-safe centering), Content (the dialog card), and the close button.\n * `children` render inside Content, alongside `DetailDialogProvider`'s grid shell.\n */\nexport function DetailDialogWrapper({ open, onOpenChange, children }: DetailDialogWrapperProps) {\n  const handleInteractOutside = useCallback<NonNullable<React.ComponentProps<typeof DialogPrimitive.Content>['onInteractOutside']>>(event => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <DialogPrimitive.Root data-slot=\"detail-dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"detail-dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"detail-dialog-overlay\"\n          className=\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 flex overflow-auto bg-black/50 p-4 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:backdrop-blur-xs\"\n        >\n          <DialogPrimitive.Content\n            data-slot=\"dialog-content\"\n            className={cn(\n              'relative z-50 m-auto grid',\n              'gap-4 overflow-hidden rounded-sm border-none bg-background p-0 shadow-dialog outline-none duration-200',\n              'size-full max-h-dvh min-h-160 min-w-264 max-w-svw',\n              'data-[state=closed]:animate-out data-[state=open]:animate-in',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80'\n            )}\n            onInteractOutside={handleInteractOutside}\n          >\n            {children}\n\n            <DialogPrimitive.Close data-slot=\"dialog-close\" tabIndex={-1} asChild className=\"absolute top-3 right-3\">\n              <button className=\"flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60\">\n                <XIcon size={24} />\n              </button>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Overlay>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n","'use client';\n\nimport { DetailDialogContent } from './components/content';\nimport { DetailDialogHeader } from './components/header';\nimport { DetailDialogProvider } from './components/provider';\nimport { DetailDialogSidebarPanel, type DetailDialogSidebarPanelProps } from './components/sidebar-panel';\nimport { DetailDialogWrapper } from './components/wrapper';\n\nexport type DetailDialogProps = {\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** When `true`, replaces the main content area with a centered loading spinner. */\n  isLoading?: boolean;\n  /** Primary title displayed in the dialog header. */\n  title?: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Optional sidebar configuration — title, body content, and footer content. */\n  sidebar?: DetailDialogSidebarPanelProps;\n  /** Custom content replacing the default title/date block in the header. Suspense-wrapped. */\n  headerComponent?: React.ReactNode;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.\n *\n * @example\n * ```tsx\n * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';\n *\n * <DetailDialog\n *   open={open}\n *   title=\"Order #1234\"\n *   createdAt=\"2024-01-15T09:00:00Z\"\n *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}\n *   onOpenChange={setOpen}\n * >\n *   <p>Detail content goes here.</p>\n * </DetailDialog>\n * ```\n */\nexport const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>> = ({\n  open,\n  isLoading,\n  title,\n  createdAt,\n  onOpenChange,\n  sidebar,\n  headerComponent,\n  children,\n}) => {\n  return (\n    <DetailDialogWrapper open={open} onOpenChange={onOpenChange}>\n      <DetailDialogProvider>\n        <DetailDialogSidebarPanel title={sidebar?.title} content={sidebar?.content} footer={sidebar?.footer} />\n        <DetailDialogHeader title={title} createdAt={createdAt} headerComponent={headerComponent} />\n        <DetailDialogContent isLoading={isLoading}>{children}</DetailDialogContent>\n      </DetailDialogProvider>\n    </DetailDialogWrapper>\n  );\n};\n"],"mappings":"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"}

package/dist/detail-dialog-uN5mrCa7.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/skeleton.cjs"),t=require("./layouts/flex.cjs"),n=require("./date-B3cozmfV.cjs"),r=require("./ui/tooltip.cjs"),i=require("./typography/title.cjs"),a=require("./sidebar-core-DUdB9WCv.cjs"),o=require("./features/logo/index.cjs");let s=require("lucide-react"),c=require("react"),l=require("@customafk/react-toolkit/utils"),u=require("react/jsx-runtime"),d=require("radix-ui");function f(){return(0,u.jsx)(t.Flex,{justify:`center`,className:`inset-shadow-sm min-h-0 bg-muted-muted`,children:(0,u.jsx)(`div`,{className:`loader`})})}function p({isLoading:e,children:t}){return(0,u.jsx)(`main`,{"data-slot":`detail-dialog-main`,className:`@container col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1`,children:e?(0,u.jsx)(f,{}):(0,u.jsx)(c.Suspense,{fallback:(0,u.jsx)(f,{}),children:(0,u.jsx)(`section`,{"data-slot":`detail-dialog-body`,className:`relative inset-shadow-sm grid min-h-0 snap-y grid-cols-1 overflow-y-auto bg-white`,children:t})})})}function m(){return(0,u.jsxs)(`div`,{"data-slot":`detail-dialog-header-skeleton`,className:`grid justify-items-start gap-1.5`,children:[(0,u.jsx)(e.Skeleton,{className:`h-5 w-40`}),(0,u.jsx)(e.Skeleton,{className:`h-3 w-24`})]})}function h({title:e,createdAt:t,headerComponent:r}){return(0,u.jsxs)(`header`,{"data-slot":`detail-dialog-header`,className:`col-start-2 row-start-1 grid grid-cols-[auto_1fr] items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2`,children:[(0,u.jsx)(a.s,{}),(0,u.jsx)(`div`,{"data-slot":`detail-dialog-header-content`,className:`min-w-0 overflow-x-auto`,children:(0,u.jsx)(c.Suspense,{fallback:(0,u.jsx)(m,{}),children:r??(0,u.jsxs)(`div`,{className:`grid justify-items-start gap-0`,children:[(0,u.jsx)(i.Title,{level:5,className:`line-clamp-1 truncate text-wrap`,children:e||`Detail Dialog`}),!!t&&(0,u.jsxs)(`div`,{className:`relative grid grid-flow-col items-center gap-1 text-text-positive-weak`,children:[(0,u.jsx)(s.CalendarIcon,{size:12,className:`text-primary-strong`}),(0,u.jsx)(`p`,{className:`text-primary-strong text-xs`,children:`Ngày Tạo`}),(0,u.jsx)(n.t,{showHoliday:!0,date:t,format:`medium`})]})]})})})]})}function g({defaultOpen:e=!0,open:t,onOpenChange:n,className:i,style:o,children:s,...c}){let d=a._({defaultOpen:e,open:t,onOpenChange:n});return(0,u.jsx)(a.m.Provider,{value:d,children:(0,u.jsx)(r.TooltipProvider,{delayDuration:0,children:(0,u.jsx)(`div`,{"data-slot":`detail-dialog-wrapper`,style:{"--sidebar-width":a.d,"--sidebar-width-icon":a.f,...o},className:(0,l.cn)(`group/sidebar-wrapper size-full min-h-[85dvh]`,`grid grid-cols-[auto_1fr] grid-rows-[auto_1fr]`,i),...c,children:s})})})}function _({title:e,sidebarTitle:t,content:n,footer:r}){return(0,u.jsx)(`div`,{className:`col-start-1 row-span-2 row-start-1`,children:(0,u.jsxs)(a.p,{children:[(0,u.jsx)(a.r,{children:(0,u.jsx)(a.i,{children:(0,u.jsx)(a.o,{children:(0,u.jsxs)(a.a,{size:`lg`,tabIndex:-1,children:[(0,u.jsx)(o.LunasLogo,{variant:`icon`,iconStyle:`solid`,size:`md`,className:`size-8 min-h-8 min-w-8`}),(0,u.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,u.jsx)(`span`,{className:`truncate font-medium`,children:t||`Detail Dialog`}),(0,u.jsx)(`span`,{className:`truncate text-xs`,children:`Lunas Enterprise`})]})]})})})}),(0,u.jsx)(a.t,{children:n}),(0,u.jsx)(a.n,{children:r})]})})}function v({open:e,onOpenChange:t,children:n}){let r=(0,c.useCallback)(e=>{e.preventDefault(),e.stopPropagation()},[]);return(0,u.jsx)(d.Dialog.Root,{"data-slot":`detail-dialog`,open:e,onOpenChange:t,children:(0,u.jsx)(d.Dialog.Portal,{"data-slot":`detail-dialog-portal`,children:(0,u.jsx)(d.Dialog.Overlay,{"data-slot":`detail-dialog-overlay`,className:`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 flex overflow-auto bg-black/50 p-4 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:backdrop-blur-xs`,children:(0,u.jsxs)(d.Dialog.Content,{"data-slot":`dialog-content`,className:(0,l.cn)(`relative z-50 m-auto grid`,`gap-4 overflow-hidden rounded-sm border-none bg-background p-0 shadow-dialog outline-none duration-200`,`size-full max-h-dvh min-h-160 min-w-264 max-w-svw`,`data-[state=closed]:animate-out data-[state=open]:animate-in`,`data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0`,`data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80`),onInteractOutside:r,children:[n,(0,u.jsx)(d.Dialog.Close,{"data-slot":`dialog-close`,tabIndex:-1,asChild:!0,className:`absolute top-3 right-3`,children:(0,u.jsx)(`button`,{className:`flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60`,children:(0,u.jsx)(s.XIcon,{size:24})})})]})})})})}const y=({open:e,isLoading:t,title:n,createdAt:r,onOpenChange:i,sidebar:a,headerComponent:o,children:s})=>(0,u.jsx)(v,{open:e,onOpenChange:i,children:(0,u.jsxs)(g,{children:[(0,u.jsx)(_,{title:a?.title,content:a?.content,footer:a?.footer}),(0,u.jsx)(h,{title:n,createdAt:r,headerComponent:o}),(0,u.jsx)(p,{isLoading:t,children:s})]})});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return y}});
+//# sourceMappingURL=detail-dialog-uN5mrCa7.cjs.map

package/dist/detail-dialog-uN5mrCa7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-dialog-uN5mrCa7.cjs","names":["Flex","Suspense","Skeleton","DetailDialogSidebarTrigger","Suspense","Title","CalendarIcon","DateDisplay","useSidebarState","SidebarContext","TooltipProvider","SIDEBAR_WIDTH","SIDEBAR_WIDTH_ICON","Sidebar","DetailDialogSidebarHeader","DetailDialogSidebarMenu","DetailDialogSidebarMenuItem","DetailDialogSidebarMenuButton","LunasLogo","DetailDialogSidebarContent","DetailDialogSidebarFooter","DialogPrimitive","XIcon"],"sources":["../packages/components/dialogs/detail-dialog/components/content.tsx","../packages/components/dialogs/detail-dialog/components/header.tsx","../packages/components/dialogs/detail-dialog/components/provider.tsx","../packages/components/dialogs/detail-dialog/components/sidebar-panel.tsx","../packages/components/dialogs/detail-dialog/components/wrapper.tsx","../packages/components/dialogs/detail-dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport { Suspense } from 'react';\n\nimport { Flex } from '@/components/layouts/flex';\n\nexport type DetailDialogContentProps = React.PropsWithChildren<{\n  /** When `true`, replaces the content with a centered loading spinner. */\n  isLoading?: boolean;\n}>;\n\nfunction DetailDialogLoader() {\n  return (\n    <Flex justify=\"center\" className=\"inset-shadow-sm min-h-0 bg-muted-muted\">\n      <div className=\"loader\" />\n    </Flex>\n  );\n}\n\nexport function DetailDialogContent({ isLoading, children }: DetailDialogContentProps) {\n  return (\n    <main data-slot=\"detail-dialog-main\" className=\"@container col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1\">\n      {isLoading ? (\n        <DetailDialogLoader />\n      ) : (\n        <Suspense fallback={<DetailDialogLoader />}>\n          <section data-slot=\"detail-dialog-body\" className=\"relative inset-shadow-sm grid min-h-0 snap-y grid-cols-1 overflow-y-auto bg-white\">\n            {children}\n          </section>\n        </Suspense>\n      )}\n    </main>\n  );\n}\n","'use client';\n\nimport { Suspense } from 'react';\n\nimport { CalendarIcon } from 'lucide-react';\n\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { Title } from '@/components/typography/title';\nimport { DetailDialogSidebarTrigger } from './sidebar-core';\n\nexport type DetailDialogHeaderProps = {\n  /** Primary title displayed in the dialog header. */\n  title?: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Custom content replacing the default title/date block, e.g. for consumer-specific headers. Suspense-wrapped. */\n  headerComponent?: React.ReactNode;\n};\n\nfunction DetailDialogHeaderSkeleton() {\n  return (\n    <div data-slot=\"detail-dialog-header-skeleton\" className=\"grid justify-items-start gap-1.5\">\n      <Skeleton className=\"h-5 w-40\" />\n      <Skeleton className=\"h-3 w-24\" />\n    </div>\n  );\n}\n\nexport function DetailDialogHeader({ title, createdAt, headerComponent }: DetailDialogHeaderProps) {\n  return (\n    <header\n      data-slot=\"detail-dialog-header\"\n      className=\"col-start-2 row-start-1 grid grid-cols-[auto_1fr] items-start gap-x-2.5 border-border-weak border-b bg-card py-2.5 pr-12 pl-2\"\n    >\n      <DetailDialogSidebarTrigger />\n      <div data-slot=\"detail-dialog-header-content\" className=\"min-w-0 overflow-x-auto\">\n        <Suspense fallback={<DetailDialogHeaderSkeleton />}>\n          {headerComponent ?? (\n            <div className=\"grid justify-items-start gap-0\">\n              <Title level={5} className=\"line-clamp-1 truncate text-wrap\">\n                {title || 'Detail Dialog'}\n              </Title>\n              {!!createdAt && (\n                <div className=\"relative grid grid-flow-col items-center gap-1 text-text-positive-weak\">\n                  <CalendarIcon size={12} className=\"text-primary-strong\" />\n                  <p className=\"text-primary-strong text-xs\">Ngày Tạo</p>\n                  <DateDisplay showHoliday date={createdAt} format=\"medium\" />\n                </div>\n              )}\n            </div>\n          )}\n        </Suspense>\n      </div>\n    </header>\n  );\n}\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { TooltipProvider } from '@/components/ui/tooltip';\n\nimport { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SidebarContext, useSidebarState } from './sidebar-core';\n\n/**\n * Context provider for `DetailDialog`'s sidebar/header/content grid shell. Manages sidebar\n * open/collapsed state (persisted via a cookie, shared with `SidebarProvider` via\n * `useSidebarState`) and renders the 2x2 grid wrapper — sidebar spanning both rows in column 1,\n * header/content in column 2. DetailDialog-specific, not a standalone-reusable provider like\n * `./sidebar-core`'s `SidebarProvider`.\n */\nexport function DetailDialogProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  /** Whether the sidebar is open by default (uncontrolled). Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. When provided the component becomes controlled. */\n  open?: boolean;\n  /** Callback fired when the open state changes in controlled mode. */\n  onOpenChange?: (open: boolean) => void;\n}) {\n  const contextValue = useSidebarState({ defaultOpen, open: openProp, onOpenChange: setOpenProp });\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"detail-dialog-wrapper\"\n          style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n          className={cn('group/sidebar-wrapper size-full min-h-[85dvh]', 'grid grid-cols-[auto_1fr] grid-rows-[auto_1fr]', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  );\n}\n","'use client';\n\nimport { LunasLogo } from '@/components/features/logo';\n\nimport {\n  DetailDialogSidebarContent,\n  DetailDialogSidebarFooter,\n  DetailDialogSidebarHeader,\n  DetailDialogSidebarMenu,\n  DetailDialogSidebarMenuButton,\n  DetailDialogSidebarMenuItem,\n  Sidebar,\n} from './sidebar-core';\n\nexport type DetailDialogSidebarPanelProps = {\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  title?: string;\n  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */\n  sidebarTitle?: string;\n  /** Arbitrary content rendered inside the sidebar scrollable area. */\n  content?: React.ReactNode;\n  /** Arbitrary content rendered at the bottom of the sidebar footer. */\n  footer?: React.ReactNode;\n};\n\nexport function DetailDialogSidebarPanel({ title, sidebarTitle, content, footer }: DetailDialogSidebarPanelProps) {\n  return (\n    <div className=\"col-start-1 row-span-2 row-start-1\">\n      <Sidebar>\n        <DetailDialogSidebarHeader>\n          <DetailDialogSidebarMenu>\n            <DetailDialogSidebarMenuItem>\n              <DetailDialogSidebarMenuButton size=\"lg\" tabIndex={-1}>\n                <LunasLogo variant=\"icon\" iconStyle=\"solid\" size=\"md\" className=\"size-8 min-h-8 min-w-8\" />\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{sidebarTitle || 'Detail Dialog'}</span>\n                  <span className=\"truncate text-xs\">Lunas Enterprise</span>\n                </div>\n              </DetailDialogSidebarMenuButton>\n            </DetailDialogSidebarMenuItem>\n          </DetailDialogSidebarMenu>\n        </DetailDialogSidebarHeader>\n        <DetailDialogSidebarContent>{content}</DetailDialogSidebarContent>\n        <DetailDialogSidebarFooter>{footer}</DetailDialogSidebarFooter>\n      </Sidebar>\n    </div>\n  );\n}\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Dialog as DialogPrimitive } from 'radix-ui';\n\nexport type DetailDialogWrapperProps = React.PropsWithChildren<{\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n}>;\n\n/**\n * Outer Radix Dialog scaffolding for `DetailDialog` — Root, Portal, Overlay (scrollable,\n * min-width/min-height-safe centering), Content (the dialog card), and the close button.\n * `children` render inside Content, alongside `DetailDialogProvider`'s grid shell.\n */\nexport function DetailDialogWrapper({ open, onOpenChange, children }: DetailDialogWrapperProps) {\n  const handleInteractOutside = useCallback<NonNullable<React.ComponentProps<typeof DialogPrimitive.Content>['onInteractOutside']>>(event => {\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <DialogPrimitive.Root data-slot=\"detail-dialog\" open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal data-slot=\"detail-dialog-portal\">\n        <DialogPrimitive.Overlay\n          data-slot=\"detail-dialog-overlay\"\n          className=\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 flex overflow-auto bg-black/50 p-4 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:backdrop-blur-xs\"\n        >\n          <DialogPrimitive.Content\n            data-slot=\"dialog-content\"\n            className={cn(\n              'relative z-50 m-auto grid',\n              'gap-4 overflow-hidden rounded-sm border-none bg-background p-0 shadow-dialog outline-none duration-200',\n              'size-full max-h-dvh min-h-160 min-w-264 max-w-svw',\n              'data-[state=closed]:animate-out data-[state=open]:animate-in',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-80 data-[state=open]:zoom-in-80'\n            )}\n            onInteractOutside={handleInteractOutside}\n          >\n            {children}\n\n            <DialogPrimitive.Close data-slot=\"dialog-close\" tabIndex={-1} asChild className=\"absolute top-3 right-3\">\n              <button className=\"flex cursor-pointer items-center justify-center rounded-full p-2 text-text-positive-weak transition-colors hover:bg-muted-muted hover:text-text-positive active:bg-muted-weak active:text-text-positive-strong disabled:pointer-events-none disabled:opacity-60\">\n                <XIcon size={24} />\n              </button>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Overlay>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n","'use client';\n\nimport { DetailDialogContent } from './components/content';\nimport { DetailDialogHeader } from './components/header';\nimport { DetailDialogProvider } from './components/provider';\nimport { DetailDialogSidebarPanel, type DetailDialogSidebarPanelProps } from './components/sidebar-panel';\nimport { DetailDialogWrapper } from './components/wrapper';\n\nexport type DetailDialogProps = {\n  /** Controls whether the dialog is open. */\n  open?: boolean;\n  /** When `true`, replaces the main content area with a centered loading spinner. */\n  isLoading?: boolean;\n  /** Primary title displayed in the dialog header. */\n  title?: string;\n  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */\n  createdAt?: string | Date | number | null;\n  /** Optional sidebar configuration — title, body content, and footer content. */\n  sidebar?: DetailDialogSidebarPanelProps;\n  /** Custom content replacing the default title/date block in the header. Suspense-wrapped. */\n  headerComponent?: React.ReactNode;\n  /** Callback invoked when the dialog open state changes. */\n  onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.\n *\n * @example\n * ```tsx\n * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';\n *\n * <DetailDialog\n *   open={open}\n *   title=\"Order #1234\"\n *   createdAt=\"2024-01-15T09:00:00Z\"\n *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}\n *   onOpenChange={setOpen}\n * >\n *   <p>Detail content goes here.</p>\n * </DetailDialog>\n * ```\n */\nexport const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>> = ({\n  open,\n  isLoading,\n  title,\n  createdAt,\n  onOpenChange,\n  sidebar,\n  headerComponent,\n  children,\n}) => {\n  return (\n    <DetailDialogWrapper open={open} onOpenChange={onOpenChange}>\n      <DetailDialogProvider>\n        <DetailDialogSidebarPanel title={sidebar?.title} content={sidebar?.content} footer={sidebar?.footer} />\n        <DetailDialogHeader title={title} createdAt={createdAt} headerComponent={headerComponent} />\n        <DetailDialogContent isLoading={isLoading}>{children}</DetailDialogContent>\n      </DetailDialogProvider>\n    </DetailDialogWrapper>\n  );\n};\n"],"mappings":"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"}

package/dist/{dialog-BASlxWF_.d.cts → dialog-c1vBnso8.d.cts}

@@ -1,5 +1,4 @@
 import { Dialog } from "radix-ui";
-
 //#region packages/components/ui/dialog.d.ts
 /**
  * Accessible modal dialog built on Radix UI's Dialog primitives with animated overlay, close button, and responsive sizing.
@@ -29,59 +28,32 @@ import { Dialog } from "radix-ui";
  * </Dialog>
  * ```
  */
-declare function Dialog$1({
-  ...props
-}: React.ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
+declare function Dialog$1({ ...props }: React.ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
 /** Element that opens the dialog when clicked; typically wrapped with `asChild` around a `Button`. */
-declare function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof Dialog.Trigger>): import("react").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog.Trigger>): import("react").JSX.Element;
 /** Renders dialog overlay and content into a portal outside the normal React tree. */
-declare function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof Dialog.Portal>): import("react").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog.Portal>): import("react").JSX.Element;
 /** Button that closes the dialog; can be composed with `asChild` to use a custom element. */
-declare function DialogClose({
-  ...props
-}: React.ComponentProps<typeof Dialog.Close>): import("react").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog.Close>): import("react").JSX.Element;
 /** Semi-transparent backdrop rendered behind the dialog panel with fade-in/out animation. */
-declare function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof Dialog.Overlay>): import("react").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog.Overlay>): import("react").JSX.Element;
 /**
  * Animated dialog panel centred on screen; includes `DialogOverlay` and an optional close button.
  *
  * @param showCloseButton - When `true` (default), renders a `CloseButton` in the top-right corner.
  */
-declare function DialogContent({
-  className,
-  children,
-  showCloseButton,
-  ...props
-}: React.ComponentProps<typeof Dialog.Content> & {
-  /** When `true` (default), renders an `×` close button fixed to the top-right corner of the panel. */showCloseButton?: boolean;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof Dialog.Content> & {
+  /** When `true` (default), renders an `×` close button fixed to the top-right corner of the panel. */
+  showCloseButton?: boolean;
 }): import("react").JSX.Element;
 /** Layout wrapper for the dialog title and description, stacked vertically with left alignment on wider screens. */
-declare function DialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 /** Layout wrapper for dialog action buttons, stacked on mobile and right-aligned in a row on wider screens. */
-declare function DialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 /** Accessible heading for the dialog panel, styled with the h3 heading variant and announced by screen readers. */
-declare function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof Dialog.Title>): import("react").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog.Title>): import("react").JSX.Element;
 /** Muted supporting text that describes the dialog's purpose; read by screen readers alongside the title. */
-declare function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof Dialog.Description>): import("react").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog.Description>): import("react").JSX.Element;
 //#endregion
 export { DialogFooter as a, DialogPortal as c, DialogDescription as i, DialogTitle as l, DialogClose as n, DialogHeader as o, DialogContent as r, DialogOverlay as s, Dialog$1 as t, DialogTrigger as u };
-//# sourceMappingURL=dialog-BASlxWF_.d.cts.map
+//# sourceMappingURL=dialog-c1vBnso8.d.cts.map

package/dist/{dialog-BASlxWF_.d.mts → dialog-c1vBnso8.d.mts}

@@ -1,5 +1,4 @@
 import { Dialog } from "radix-ui";
-
 //#region packages/components/ui/dialog.d.ts
 /**
  * Accessible modal dialog built on Radix UI's Dialog primitives with animated overlay, close button, and responsive sizing.
@@ -29,59 +28,32 @@ import { Dialog } from "radix-ui";
  * </Dialog>
  * ```
  */
-declare function Dialog$1({
-  ...props
-}: React.ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
+declare function Dialog$1({ ...props }: React.ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
 /** Element that opens the dialog when clicked; typically wrapped with `asChild` around a `Button`. */
-declare function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof Dialog.Trigger>): import("react").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog.Trigger>): import("react").JSX.Element;
 /** Renders dialog overlay and content into a portal outside the normal React tree. */
-declare function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof Dialog.Portal>): import("react").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog.Portal>): import("react").JSX.Element;
 /** Button that closes the dialog; can be composed with `asChild` to use a custom element. */
-declare function DialogClose({
-  ...props
-}: React.ComponentProps<typeof Dialog.Close>): import("react").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog.Close>): import("react").JSX.Element;
 /** Semi-transparent backdrop rendered behind the dialog panel with fade-in/out animation. */
-declare function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof Dialog.Overlay>): import("react").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog.Overlay>): import("react").JSX.Element;
 /**
  * Animated dialog panel centred on screen; includes `DialogOverlay` and an optional close button.
  *
  * @param showCloseButton - When `true` (default), renders a `CloseButton` in the top-right corner.
  */
-declare function DialogContent({
-  className,
-  children,
-  showCloseButton,
-  ...props
-}: React.ComponentProps<typeof Dialog.Content> & {
-  /** When `true` (default), renders an `×` close button fixed to the top-right corner of the panel. */showCloseButton?: boolean;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof Dialog.Content> & {
+  /** When `true` (default), renders an `×` close button fixed to the top-right corner of the panel. */
+  showCloseButton?: boolean;
 }): import("react").JSX.Element;
 /** Layout wrapper for the dialog title and description, stacked vertically with left alignment on wider screens. */
-declare function DialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 /** Layout wrapper for dialog action buttons, stacked on mobile and right-aligned in a row on wider screens. */
-declare function DialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
 /** Accessible heading for the dialog panel, styled with the h3 heading variant and announced by screen readers. */
-declare function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof Dialog.Title>): import("react").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog.Title>): import("react").JSX.Element;
 /** Muted supporting text that describes the dialog's purpose; read by screen readers alongside the title. */
-declare function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof Dialog.Description>): import("react").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog.Description>): import("react").JSX.Element;
 //#endregion
 export { DialogFooter as a, DialogPortal as c, DialogDescription as i, DialogTitle as l, DialogClose as n, DialogHeader as o, DialogContent as r, DialogOverlay as s, Dialog$1 as t, DialogTrigger as u };
-//# sourceMappingURL=dialog-BASlxWF_.d.mts.map
+//# sourceMappingURL=dialog-c1vBnso8.d.mts.map

package/dist/{dialog-form-B_kgYxZg.cjs → dialog-form-BTZZwz3T.cjs}

@@ -1,2 +1,2 @@
-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
+const e=require("./ui/dialog.cjs"),t=require("./tanstack-form-BxqS40rB.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-BTZZwz3T.cjs.map

package/dist/{dialog-form-B_kgYxZg.cjs.map → dialog-form-BTZZwz3T.cjs.map}

@@ -1 +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"}
+{"version":3,"file":"dialog-form-BTZZwz3T.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,EAChC,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,YAAU,gBAAxB,SAAA,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,EApBF,SAAA,EAsBE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,4EACvC,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,YAAU,eAAe,UAAU,uCAC7C,SAAA,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,sGAAzC,SAAA,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,CACH,CAAA,CAAA,GACR,CAAA,CAEZ"}

package/dist/{dialog-form-SyBJUlDB.mjs → dialog-form-CCIcht28.mjs}

@@ -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-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
+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-q9hDCc0Y.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-CCIcht28.mjs.map

package/dist/{dialog-form-SyBJUlDB.mjs.map → dialog-form-CCIcht28.mjs.map}

@@ -1 +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"}
+{"version":3,"file":"dialog-form-CCIcht28.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,EAChC,SAAA,EAAC,EAAD,CAAc,YAAU,gBAAxB,SAAA,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,EApBF,SAAA,CAsBE,EAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,4EACvC,SAAA,EAAC,EAAD,CAAa,YAAU,eAAe,UAAU,uCAC7C,SAAA,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,sGAAzC,SAAA,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,CACH,CAAA,CAAA,GACR,CAAA,CAEZ"}