@customafk/lunas-ui 0.2.74 → 0.2.76

package/dist/{number-field-C7iEv5GJ.cjs.map → number-field-DKZz-27X.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"number-field-C7iEv5GJ.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","NumberInput","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\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 { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\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 _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"yRA+CA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,MAAA,CAAgB,EAEhB,EAAQA,EAAAA,EAAuC,EAE/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,eAAc,WAA/C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAI,gBAAe,WAAxC,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2BAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,WAAA,EAAA,EAAA,GAAA,CAAc,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,IAChD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,0GACb,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAU,CAAA,CACP,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gEACZ,GAAY,GAAmB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAAI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,KACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}
+{"version":3,"file":"number-field-DKZz-27X.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","NumberInput","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\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 { NumberFieldProps } from '../../types';\n\n/**\n * A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n *\n * @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"quantity\">\n *   {() => (\n *     <NumberField\n *       label=\"Quantity\"\n *       placeholder=\"0\"\n *       unit=\"pcs\"\n *       decimalPlaces={2}\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n  ({\n    label,\n    description,\n    placeholder,\n    tooltip,\n    helperText,\n    orientation = 'responsive',\n    showErrorMessage = true,\n    rounding,\n    decimalPlaces,\n    precision,\n    unit,\n    required = false,\n    disabled = false,\n    allowNegative,\n  }) => {\n    const id = useId();\n    const errorId = useId();\n\n    const field = useTanStackFieldContext<number | null>();\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 _invalid = _touched && !field.state.meta.isValid;\n    const _isEmpty = required && field.state.value === null;\n    const _hasErrors = !!field.state.meta.errors.length;\n\n    const onValueChange = useCallback(\n      (value: number | null) => {\n        if (isDisabled) return;\n        field.handleChange(value);\n      },\n      [isDisabled, field.handleChange]\n    );\n\n    return (\n      <FieldGroup className=\"gap-y-4 px-4\">\n        <Field orientation={orientation} data-invalid={_invalid}>\n          <FieldContent>\n            <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n              {label}\n              {tooltip && <FieldTooltip tooltip={tooltip} />}\n            </FieldLabel>\n            <FieldDescription>{description}</FieldDescription>\n          </FieldContent>\n\n          <FieldContentMain>\n            <div className=\"relative w-full\">\n              <NumberInput\n                id={id}\n                value={field.state.value}\n                aria-invalid={_invalid}\n                aria-describedby={errorId}\n                placeholder={placeholder}\n                disabled={isDisabled}\n                roundingRule={rounding}\n                numberAfterDecimalPoint={decimalPlaces}\n                precision={precision}\n                unitText={unit}\n                allowNegative={allowNegative}\n                className={cn(isDisabled && 'pointer-events-none opacity-60')}\n                onBlur={field.handleBlur}\n                onValueChange={onValueChange}\n              />\n              {isSubmitting && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n                  <Loader2Icon className=\"animate-spin text-primary-strong\" />\n                </div>\n              )}\n              {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n                <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n                  <BanIcon />\n                </div>\n              )}\n              <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n                {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n              </div>\n            </div>\n            <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n          </FieldContentMain>\n        </Field>\n        <FieldSeparator />\n      </FieldGroup>\n    );\n  }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"yRA+CA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,MAAA,CAAgB,EAEhB,EAAQA,EAAAA,EAAuC,EAE/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,WAAA,EAAA,EAAA,GAAA,CAAc,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,4EACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,IAChD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAU,CAAA,CACP,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,GAAmB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAAI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}

package/dist/number-input-CAr3JaA-.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/input.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime");const i=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,a=e=>Number(e).toLocaleString(),o=(e,t,n)=>{if(n===`none`)return e;let r=10**t,i=e*r;switch(n){case`up`:return Math.ceil(i)/r;case`down`:return Math.floor(i)/r;case`nearest`:return i%1<.1?Math.floor(i)/r:i%1>=.59?Math.ceil(i)/r:(Math.floor(i)+.5)/r;default:return e}},s=({disabled:s=!1,readOnly:c=!1,allowNegative:l=!1,numberAfterDecimalPoint:u=2,roundingRule:d=`none`,value:f=null,unitText:p,decimal:m,placeholder:h,precision:g,wrapperClassName:_,className:v,onChange:y,onValueChange:b,onFocus:x,onBlur:S,...C})=>{let w=(0,t.useRef)(null),T=(0,t.useRef)(null),[E,D]=(0,t.useState)(f?.toString()??null),O=(0,t.useMemo)(()=>m?.[1]??u,[m,u]),k=(0,t.useMemo)(()=>m&&m[0]-m[1],[m]),A=(0,t.useMemo)(()=>i(l),[l]),j=(0,t.useCallback)(e=>{if(!O||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length;return n.length<=O&&r<=(k??1/0)},[O,k]),M=(0,t.useCallback)(e=>{if(e===`0`)return`0`;if(!Number(e))return null;let t=parseFloat(e),n=Math.min(O-1,g||0),[r,i=``]=o(t,n,d).toString().split(`.`),s=a(r);return i?`${s}.${i}`:s},[O,g,d]),N=(0,t.useCallback)(e=>{let t=e===`0`,n=e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e);if(t){b?.(0),D(e);return}if(n){D(()=>(b?.(0),e));return}},[b]),P=(0,t.useCallback)(e=>{y?.(e);let{value:t}=e.target;if(t===``||t===void 0){b?.(null),D(null);return}N(t),!(!A.test(t)||!j(t))&&(b?.(parseFloat(t)||0),D(t))},[j,y,b,N,A]),F=(0,t.useCallback)(e=>{c||(x?.(e),D(e=>typeof e==`string`?e.replace(/,/g,``):null))},[c,x]),I=(0,t.useCallback)(e=>{c||(S?.(e),D(e=>e===null?null:e===`0`||e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e)?`0`:typeof e==`string`?M(e):null))},[c,M,S]);return(0,t.useEffect)(()=>{let e=document.activeElement===T.current;if(f==null||!A.test(f.toString())||!j(f.toString())){D(null);return}D(t=>e?t:M(f.toString()))},[M,f,j,A]),(0,t.useEffect)(()=>{if(!w.current||!T.current||!p)return;let e=w.current.offsetWidth;T.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[p]),(0,r.jsxs)(`div`,{className:(0,n.cn)(`relative`,_),children:[(0,r.jsx)(e.Input,{...C,ref:T,value:E||(c?`0`:``),placeholder:h,disabled:s,readOnly:c,className:(0,n.cn)(`text-end font-number text-sm slashed-zero lining-nums tabular-nums`,c&&`bg-muted text-muted-foreground`,v),onChange:P,onFocus:F,onBlur:I}),p&&(0,r.jsx)(`span`,{ref:w,className:`-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm`,children:p})]})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
+//# sourceMappingURL=number-input-CAr3JaA-.cjs.map

package/dist/{number-input-kTh9zzr7.cjs.map → number-input-CAr3JaA-.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"number-input-kTh9zzr7.cjs","names":["Input"],"sources":["../packages/components/ui/inputs/number-input.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\nconst customRoundedValue = (value: number, precision: number, roundingRule: 'up' | 'down' | 'nearest' | 'none') => {\n  if (roundingRule === 'none') return value;\n\n  const factor = 10 ** precision;\n  const scaledValue = value * factor;\n\n  switch (roundingRule) {\n    case 'up':\n      return Math.ceil(scaledValue) / factor;\n    case 'down':\n      return Math.floor(scaledValue) / factor;\n    case 'nearest': {\n      if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n      if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n      return (Math.floor(scaledValue) + 0.5) / factor;\n    }\n    default: {\n      return value;\n    }\n  }\n};\n\ntype TProps = React.HTMLAttributes<HTMLInputElement> & {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: number | null | undefined;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readOnly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   * - 'up': Round up\n   * - 'down': Round down\n   * - 'nearest': Round to nearest\n   * - 'none': No rounding\n   *\n   * E.g.\n   * - Value: 2.135, precision: 2\n   *   - 'up' => 2.14\n   *   - 'down' => 2.13\n   *   - 'nearest' => 2.13\n   *   - 'none' => 2.135\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  wrapperClassName?: string;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value: number | null) => void;\n  /**\n   * Description: Callback function for the blur event\n   * Usage: Callback function for the blur event\n   */\n  onBlur?: () => void;\n};\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<TProps> = ({\n  disabled = false,\n  readOnly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value = null,\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  wrapperClassName,\n  className,\n  onChange,\n  onValueChange,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [_value, _setValue] = useState<string | null>(value?.toString() ?? null);\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = useMemo(() => decimal?.[1] ?? numberAfterDecimalPoint, [decimal, numberAfterDecimalPoint]);\n  const maxIntegerLength = useMemo(() => decimal && decimal[0] - decimal[1], [decimal]);\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!maxDecimalPlaces || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.') as [string, string];\n      const integerPartLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const decimalPartLength = decimalPart.length;\n\n      return decimalPartLength <= maxDecimalPlaces && integerPartLength <= (maxIntegerLength ?? Infinity);\n    },\n    [maxDecimalPlaces, maxIntegerLength]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return null;\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision, roundingRule).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [maxDecimalPlaces, precision, roundingRule]\n  );\n\n  const handleZeroCase = useCallback(\n    (value: string) => {\n      // Check for zero\n      const isZero = value === '0';\n      // Check for negative zero patterns. E.g., '-0', '-0.0', '-0.000', '-0.'\n      const isNegativeZero = value === '-' || /^-0+(\\.0+)?$/.test(value) || /^-0*\\.$/.test(value);\n      if (isZero) {\n        onValueChange?.(0);\n        _setValue(value);\n        return;\n      }\n      if (isNegativeZero) {\n        _setValue(() => {\n          onValueChange?.(0);\n          return value;\n        });\n        return;\n      }\n    },\n    [onValueChange]\n  );\n  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    e => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (inputValue === '' || inputValue === undefined) {\n        onValueChange?.(null);\n        _setValue(null);\n        return;\n      }\n\n      // Handle zero and negative zero\n      handleZeroCase(inputValue);\n\n      // Validate input format\n      if (!validationRegex.test(inputValue) || !validateDecimalPoint(inputValue)) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      _setValue(inputValue);\n    },\n    [validateDecimalPoint, onChange, onValueChange, handleZeroCase, validationRegex]\n  );\n\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onFocus?.(e);\n      _setValue(prev => (typeof prev === 'string' ? prev.replace(/,/g, '') : null)); // Remove commas for easier editing\n    },\n    [readOnly, onFocus]\n  );\n\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onBlur?.(e);\n      _setValue(prev => {\n        if (prev === null) return null;\n        const isZero = prev === '0' || prev === '-' || /^-0+(\\.0+)?$/.test(prev) || /^-0*\\.$/.test(prev);\n        if (isZero) return '0';\n        return typeof prev === 'string' ? formattedValue(prev) : null;\n      });\n    },\n    [readOnly, formattedValue, onBlur]\n  );\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (value === undefined || value === null || !validationRegex.test(value.toString()) || !validateDecimalPoint(value.toString())) {\n      _setValue(null);\n      return;\n    }\n\n    _setValue(prev => (isFocused ? prev : formattedValue(value.toString())));\n  }, [formattedValue, value, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={_value || (readOnly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cn('text-end font-number text-sm slashed-zero lining-nums tabular-nums', readOnly && 'bg-muted text-muted-foreground', className)}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"number-input-CAr3JaA-.cjs","names":["Input"],"sources":["../packages/components/ui/inputs/number-input.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\nconst customRoundedValue = (value: number, precision: number, roundingRule: 'up' | 'down' | 'nearest' | 'none') => {\n  if (roundingRule === 'none') return value;\n\n  const factor = 10 ** precision;\n  const scaledValue = value * factor;\n\n  switch (roundingRule) {\n    case 'up':\n      return Math.ceil(scaledValue) / factor;\n    case 'down':\n      return Math.floor(scaledValue) / factor;\n    case 'nearest': {\n      if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n      if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n      return (Math.floor(scaledValue) + 0.5) / factor;\n    }\n    default: {\n      return value;\n    }\n  }\n};\n\ntype TProps = React.HTMLAttributes<HTMLInputElement> & {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: number | null | undefined;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readOnly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   * - 'up': Round up\n   * - 'down': Round down\n   * - 'nearest': Round to nearest\n   * - 'none': No rounding\n   *\n   * E.g.\n   * - Value: 2.135, precision: 2\n   *   - 'up' => 2.14\n   *   - 'down' => 2.13\n   *   - 'nearest' => 2.13\n   *   - 'none' => 2.135\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  wrapperClassName?: string;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value: number | null) => void;\n  /**\n   * Description: Callback function for the blur event\n   * Usage: Callback function for the blur event\n   */\n  onBlur?: () => void;\n};\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<TProps> = ({\n  disabled = false,\n  readOnly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value = null,\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  wrapperClassName,\n  className,\n  onChange,\n  onValueChange,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [_value, _setValue] = useState<string | null>(value?.toString() ?? null);\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = useMemo(() => decimal?.[1] ?? numberAfterDecimalPoint, [decimal, numberAfterDecimalPoint]);\n  const maxIntegerLength = useMemo(() => decimal && decimal[0] - decimal[1], [decimal]);\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!maxDecimalPlaces || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.') as [string, string];\n      const integerPartLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const decimalPartLength = decimalPart.length;\n\n      return decimalPartLength <= maxDecimalPlaces && integerPartLength <= (maxIntegerLength ?? Infinity);\n    },\n    [maxDecimalPlaces, maxIntegerLength]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return null;\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision, roundingRule).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [maxDecimalPlaces, precision, roundingRule]\n  );\n\n  const handleZeroCase = useCallback(\n    (value: string) => {\n      // Check for zero\n      const isZero = value === '0';\n      // Check for negative zero patterns. E.g., '-0', '-0.0', '-0.000', '-0.'\n      const isNegativeZero = value === '-' || /^-0+(\\.0+)?$/.test(value) || /^-0*\\.$/.test(value);\n      if (isZero) {\n        onValueChange?.(0);\n        _setValue(value);\n        return;\n      }\n      if (isNegativeZero) {\n        _setValue(() => {\n          onValueChange?.(0);\n          return value;\n        });\n        return;\n      }\n    },\n    [onValueChange]\n  );\n  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    e => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (inputValue === '' || inputValue === undefined) {\n        onValueChange?.(null);\n        _setValue(null);\n        return;\n      }\n\n      // Handle zero and negative zero\n      handleZeroCase(inputValue);\n\n      // Validate input format\n      if (!validationRegex.test(inputValue) || !validateDecimalPoint(inputValue)) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      _setValue(inputValue);\n    },\n    [validateDecimalPoint, onChange, onValueChange, handleZeroCase, validationRegex]\n  );\n\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onFocus?.(e);\n      _setValue(prev => (typeof prev === 'string' ? prev.replace(/,/g, '') : null)); // Remove commas for easier editing\n    },\n    [readOnly, onFocus]\n  );\n\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onBlur?.(e);\n      _setValue(prev => {\n        if (prev === null) return null;\n        const isZero = prev === '0' || prev === '-' || /^-0+(\\.0+)?$/.test(prev) || /^-0*\\.$/.test(prev);\n        if (isZero) return '0';\n        return typeof prev === 'string' ? formattedValue(prev) : null;\n      });\n    },\n    [readOnly, formattedValue, onBlur]\n  );\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (value === undefined || value === null || !validationRegex.test(value.toString()) || !validateDecimalPoint(value.toString())) {\n      _setValue(null);\n      return;\n    }\n\n    _setValue(prev => (isFocused ? prev : formattedValue(value.toString())));\n  }, [formattedValue, value, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={_value || (readOnly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cn('text-end font-number text-sm slashed-zero lining-nums tabular-nums', readOnly && 'bg-muted text-muted-foreground', className)}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/number-input-CJcEV9Cg.mjs

@@ -0,0 +1,2 @@
+import{Input as e}from"./ui/input.mjs";import{useCallback as t,useEffect as n,useMemo as r,useRef as i,useState as a}from"react";import{cn as o}from"@customafk/react-toolkit/utils";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=e=>e?/^-?\d*\.?\d*$/:/^\d*\.?\d*$/,u=e=>Number(e).toLocaleString(),d=(e,t,n)=>{if(n===`none`)return e;let r=10**t,i=e*r;switch(n){case`up`:return Math.ceil(i)/r;case`down`:return Math.floor(i)/r;case`nearest`:return i%1<.1?Math.floor(i)/r:i%1>=.59?Math.ceil(i)/r:(Math.floor(i)+.5)/r;default:return e}},f=({disabled:f=!1,readOnly:p=!1,allowNegative:m=!1,numberAfterDecimalPoint:h=2,roundingRule:g=`none`,value:_=null,unitText:v,decimal:y,placeholder:b,precision:x,wrapperClassName:S,className:C,onChange:w,onValueChange:T,onFocus:E,onBlur:D,...O})=>{let k=i(null),A=i(null),[j,M]=a(_?.toString()??null),N=r(()=>y?.[1]??h,[y,h]),P=r(()=>y&&y[0]-y[1],[y]),F=r(()=>l(m),[m]),I=t(e=>{if(!N||e===`-`)return!0;let[t,n=``]=e.split(`.`),r=t.startsWith(`-`)?t.length-1:t.length;return n.length<=N&&r<=(P??1/0)},[N,P]),L=t(e=>{if(e===`0`)return`0`;if(!Number(e))return null;let t=parseFloat(e),n=Math.min(N-1,x||0),[r,i=``]=d(t,n,g).toString().split(`.`),a=u(r);return i?`${a}.${i}`:a},[N,x,g]),R=t(e=>{let t=e===`0`,n=e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e);if(t){T?.(0),M(e);return}if(n){M(()=>(T?.(0),e));return}},[T]),z=t(e=>{w?.(e);let{value:t}=e.target;if(t===``||t===void 0){T?.(null),M(null);return}R(t),!(!F.test(t)||!I(t))&&(T?.(parseFloat(t)||0),M(t))},[I,w,T,R,F]),B=t(e=>{p||(E?.(e),M(e=>typeof e==`string`?e.replace(/,/g,``):null))},[p,E]),V=t(e=>{p||(D?.(e),M(e=>e===null?null:e===`0`||e===`-`||/^-0+(\.0+)?$/.test(e)||/^-0*\.$/.test(e)?`0`:typeof e==`string`?L(e):null))},[p,L,D]);return n(()=>{let e=document.activeElement===A.current;if(_==null||!F.test(_.toString())||!I(_.toString())){M(null);return}M(t=>e?t:L(_.toString()))},[L,_,I,F]),n(()=>{if(!k.current||!A.current||!v)return;let e=k.current.offsetWidth;A.current.style.setProperty(`padding-right`,`${(e+10)/16}rem`)},[v]),c(`div`,{className:o(`relative`,S),children:[s(e,{...O,ref:A,value:j||(p?`0`:``),placeholder:b,disabled:f,readOnly:p,className:o(`text-end font-number text-sm slashed-zero lining-nums tabular-nums`,p&&`bg-muted text-muted-foreground`,C),onChange:z,onFocus:B,onBlur:V}),v&&s(`span`,{ref:k,className:`-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm`,children:v})]})};export{f as t};
+//# sourceMappingURL=number-input-CJcEV9Cg.mjs.map

package/dist/{number-input-CqkegUWs.mjs.map → number-input-CJcEV9Cg.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"number-input-CqkegUWs.mjs","names":[],"sources":["../packages/components/ui/inputs/number-input.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\nconst customRoundedValue = (value: number, precision: number, roundingRule: 'up' | 'down' | 'nearest' | 'none') => {\n  if (roundingRule === 'none') return value;\n\n  const factor = 10 ** precision;\n  const scaledValue = value * factor;\n\n  switch (roundingRule) {\n    case 'up':\n      return Math.ceil(scaledValue) / factor;\n    case 'down':\n      return Math.floor(scaledValue) / factor;\n    case 'nearest': {\n      if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n      if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n      return (Math.floor(scaledValue) + 0.5) / factor;\n    }\n    default: {\n      return value;\n    }\n  }\n};\n\ntype TProps = React.HTMLAttributes<HTMLInputElement> & {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: number | null | undefined;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readOnly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   * - 'up': Round up\n   * - 'down': Round down\n   * - 'nearest': Round to nearest\n   * - 'none': No rounding\n   *\n   * E.g.\n   * - Value: 2.135, precision: 2\n   *   - 'up' => 2.14\n   *   - 'down' => 2.13\n   *   - 'nearest' => 2.13\n   *   - 'none' => 2.135\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  wrapperClassName?: string;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value: number | null) => void;\n  /**\n   * Description: Callback function for the blur event\n   * Usage: Callback function for the blur event\n   */\n  onBlur?: () => void;\n};\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<TProps> = ({\n  disabled = false,\n  readOnly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value = null,\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  wrapperClassName,\n  className,\n  onChange,\n  onValueChange,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [_value, _setValue] = useState<string | null>(value?.toString() ?? null);\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = useMemo(() => decimal?.[1] ?? numberAfterDecimalPoint, [decimal, numberAfterDecimalPoint]);\n  const maxIntegerLength = useMemo(() => decimal && decimal[0] - decimal[1], [decimal]);\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!maxDecimalPlaces || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.') as [string, string];\n      const integerPartLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const decimalPartLength = decimalPart.length;\n\n      return decimalPartLength <= maxDecimalPlaces && integerPartLength <= (maxIntegerLength ?? Infinity);\n    },\n    [maxDecimalPlaces, maxIntegerLength]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return null;\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision, roundingRule).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [maxDecimalPlaces, precision, roundingRule]\n  );\n\n  const handleZeroCase = useCallback(\n    (value: string) => {\n      // Check for zero\n      const isZero = value === '0';\n      // Check for negative zero patterns. E.g., '-0', '-0.0', '-0.000', '-0.'\n      const isNegativeZero = value === '-' || /^-0+(\\.0+)?$/.test(value) || /^-0*\\.$/.test(value);\n      if (isZero) {\n        onValueChange?.(0);\n        _setValue(value);\n        return;\n      }\n      if (isNegativeZero) {\n        _setValue(() => {\n          onValueChange?.(0);\n          return value;\n        });\n        return;\n      }\n    },\n    [onValueChange]\n  );\n  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    e => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (inputValue === '' || inputValue === undefined) {\n        onValueChange?.(null);\n        _setValue(null);\n        return;\n      }\n\n      // Handle zero and negative zero\n      handleZeroCase(inputValue);\n\n      // Validate input format\n      if (!validationRegex.test(inputValue) || !validateDecimalPoint(inputValue)) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      _setValue(inputValue);\n    },\n    [validateDecimalPoint, onChange, onValueChange, handleZeroCase, validationRegex]\n  );\n\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onFocus?.(e);\n      _setValue(prev => (typeof prev === 'string' ? prev.replace(/,/g, '') : null)); // Remove commas for easier editing\n    },\n    [readOnly, onFocus]\n  );\n\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onBlur?.(e);\n      _setValue(prev => {\n        if (prev === null) return null;\n        const isZero = prev === '0' || prev === '-' || /^-0+(\\.0+)?$/.test(prev) || /^-0*\\.$/.test(prev);\n        if (isZero) return '0';\n        return typeof prev === 'string' ? formattedValue(prev) : null;\n      });\n    },\n    [readOnly, formattedValue, onBlur]\n  );\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (value === undefined || value === null || !validationRegex.test(value.toString()) || !validateDecimalPoint(value.toString())) {\n      _setValue(null);\n      return;\n    }\n\n    _setValue(prev => (isFocused ? prev : formattedValue(value.toString())));\n  }, [formattedValue, value, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={_value || (readOnly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cn('text-end font-number text-sm slashed-zero lining-nums tabular-nums', readOnly && 'bg-muted text-muted-foreground', className)}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"number-input-CJcEV9Cg.mjs","names":[],"sources":["../packages/components/ui/inputs/number-input.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nconst createValidationRegex = (allowNegative: boolean): RegExp => {\n  return allowNegative ? /^-?\\d*\\.?\\d*$/ : /^\\d*\\.?\\d*$/;\n};\n\nconst formatNumberWithCommas = (num: number | string): string => {\n  return Number(num).toLocaleString();\n};\n\nconst customRoundedValue = (value: number, precision: number, roundingRule: 'up' | 'down' | 'nearest' | 'none') => {\n  if (roundingRule === 'none') return value;\n\n  const factor = 10 ** precision;\n  const scaledValue = value * factor;\n\n  switch (roundingRule) {\n    case 'up':\n      return Math.ceil(scaledValue) / factor;\n    case 'down':\n      return Math.floor(scaledValue) / factor;\n    case 'nearest': {\n      if (scaledValue % 1 < 0.1) return Math.floor(scaledValue) / factor;\n      if (scaledValue % 1 >= 0.59) return Math.ceil(scaledValue) / factor;\n      return (Math.floor(scaledValue) + 0.5) / factor;\n    }\n    default: {\n      return value;\n    }\n  }\n};\n\ntype TProps = React.HTMLAttributes<HTMLInputElement> & {\n  /**\n   * Description: Value for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Value for the text field\n   */\n  value?: number | null | undefined;\n  /**\n   * Description: Disabled state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Disabled state of the text field\n   *\n   * Note: If true, the text field will be disabled\n   */\n  disabled?: boolean;\n  /**\n   * Description: Readonly state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Readonly state of the text field\n   */\n  readOnly?: boolean;\n  /**\n   * Description: Allow negative value for the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Allow negative value for the text field\n   */\n  allowNegative?: boolean;\n  /**\n   * Description: Decimal point for the text field\n   *\n   * Default: `undefined`\n   *\n   * Usage: Ex: [12,3] => console.log(2323.23) // True\n   *\n   * Note: IF use this prop, `numberAfterDecimalPoint` will be ignored\n   */\n  decimal?: [number, number];\n  /**\n   * Description: Rounding rule for the text field\n   *\n   * Default: `nearest`\n   *\n   * Usage: Rounding rule for the text field\n   * - 'up': Round up\n   * - 'down': Round down\n   * - 'nearest': Round to nearest\n   * - 'none': No rounding\n   *\n   * E.g.\n   * - Value: 2.135, precision: 2\n   *   - 'up' => 2.14\n   *   - 'down' => 2.13\n   *   - 'nearest' => 2.13\n   *   - 'none' => 2.135\n   */\n  roundingRule?: 'up' | 'down' | 'nearest' | 'none';\n  /**\n   * Description: Number of digits after the decimal point\n   *\n   * Default: `2`\n   *\n   * Usage: Number of digits after the decimal point\n   */\n  numberAfterDecimalPoint?: number;\n  /**\n   * Description: Placeholder for the text field\n   *\n   * Default: ''\n   *\n   * Usage: Placeholder for the text field\n   */\n  placeholder?: string;\n  /**\n   * Description: Unit text for the text field\n   *\n   * Default: ''\n   *\n   * E.g. 'kg', 'm', 'USD'...\n   */\n  unitText?: string;\n  /**\n   * Description: Invalid state of the text field\n   *\n   * Default: `false`\n   *\n   * Usage: Invalid state of the text field\n   */\n  invalid?: boolean;\n  /**\n   * Description: Precision for the text field\n   *\n   * Default: `undefined`\n   * E.g.\n   * - 2.13 => 2.1 when precision is 1\n   * - 2.134 => 2.13 when precision is 2\n   */\n  precision?: number;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  wrapperClassName?: string;\n  /**\n   * Description: Callback function for the value change\n   * Usage: Callback function for the value change\n   */\n  onValueChange?: (value: number | null) => void;\n  /**\n   * Description: Callback function for the blur event\n   * Usage: Callback function for the blur event\n   */\n  onBlur?: () => void;\n};\n/**\n * ## Unit Text Field Component\n *\n * **Description**: This component is to display common text field with unit\n *\n * **Usage**: Text field with unit example: 1000 (kg), 100 (m), 1000 (USD)...\n */\nexport const NumberInput: React.FC<TProps> = ({\n  disabled = false,\n  readOnly = false,\n  allowNegative = false,\n  numberAfterDecimalPoint = 2,\n  roundingRule = 'none',\n  value = null,\n  unitText,\n  decimal,\n  placeholder,\n  precision,\n  wrapperClassName,\n  className,\n  onChange,\n  onValueChange,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const _unitRef = useRef<HTMLSpanElement>(null);\n  const _inputRef = useRef<HTMLInputElement>(null);\n\n  const [_value, _setValue] = useState<string | null>(value?.toString() ?? null);\n\n  // Memoized values for validation and formatting\n  const maxDecimalPlaces = useMemo(() => decimal?.[1] ?? numberAfterDecimalPoint, [decimal, numberAfterDecimalPoint]);\n  const maxIntegerLength = useMemo(() => decimal && decimal[0] - decimal[1], [decimal]);\n  const validationRegex = useMemo(() => createValidationRegex(allowNegative), [allowNegative]);\n\n  // Validate decimal point is less than or equal to the limit\n  const validateDecimalPoint = useCallback(\n    (value: string) => {\n      if (!maxDecimalPlaces || value === '-') return true;\n\n      const [integerPart, decimalPart = ''] = value.split('.') as [string, string];\n      const integerPartLength = integerPart.startsWith('-') ? integerPart.length - 1 : integerPart.length;\n      const decimalPartLength = decimalPart.length;\n\n      return decimalPartLength <= maxDecimalPlaces && integerPartLength <= (maxIntegerLength ?? Infinity);\n    },\n    [maxDecimalPlaces, maxIntegerLength]\n  );\n  const formattedValue = useCallback(\n    (val: string) => {\n      if (val === '0') return '0';\n      if (!Number(val)) return null;\n\n      const numValue = parseFloat(val);\n      const effectivePrecision = Math.min(maxDecimalPlaces - 1, precision || 0);\n      const roundedValue = customRoundedValue(numValue, effectivePrecision, roundingRule).toString();\n      const [integerPart, decimalPart = ''] = roundedValue.split('.');\n      const formattedInteger = formatNumberWithCommas(integerPart);\n      return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger;\n    },\n    [maxDecimalPlaces, precision, roundingRule]\n  );\n\n  const handleZeroCase = useCallback(\n    (value: string) => {\n      // Check for zero\n      const isZero = value === '0';\n      // Check for negative zero patterns. E.g., '-0', '-0.0', '-0.000', '-0.'\n      const isNegativeZero = value === '-' || /^-0+(\\.0+)?$/.test(value) || /^-0*\\.$/.test(value);\n      if (isZero) {\n        onValueChange?.(0);\n        _setValue(value);\n        return;\n      }\n      if (isNegativeZero) {\n        _setValue(() => {\n          onValueChange?.(0);\n          return value;\n        });\n        return;\n      }\n    },\n    [onValueChange]\n  );\n  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    e => {\n      // Don't prevent default behavior of input change\n      onChange?.(e);\n\n      // Custom event handler for value change\n      const { value: inputValue } = e.target;\n\n      // Handle empty input\n      if (inputValue === '' || inputValue === undefined) {\n        onValueChange?.(null);\n        _setValue(null);\n        return;\n      }\n\n      // Handle zero and negative zero\n      handleZeroCase(inputValue);\n\n      // Validate input format\n      if (!validationRegex.test(inputValue) || !validateDecimalPoint(inputValue)) return;\n\n      const numericValue = parseFloat(inputValue) || 0;\n      onValueChange?.(numericValue);\n      _setValue(inputValue);\n    },\n    [validateDecimalPoint, onChange, onValueChange, handleZeroCase, validationRegex]\n  );\n\n  const handleFocus = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onFocus?.(e);\n      _setValue(prev => (typeof prev === 'string' ? prev.replace(/,/g, '') : null)); // Remove commas for easier editing\n    },\n    [readOnly, onFocus]\n  );\n\n  const handleBlur = useCallback<React.FocusEventHandler<HTMLInputElement>>(\n    e => {\n      if (readOnly) return;\n      onBlur?.(e);\n      _setValue(prev => {\n        if (prev === null) return null;\n        const isZero = prev === '0' || prev === '-' || /^-0+(\\.0+)?$/.test(prev) || /^-0*\\.$/.test(prev);\n        if (isZero) return '0';\n        return typeof prev === 'string' ? formattedValue(prev) : null;\n      });\n    },\n    [readOnly, formattedValue, onBlur]\n  );\n\n  // Set initial value\n  useEffect(() => {\n    const isFocused = document.activeElement === _inputRef.current;\n\n    if (value === undefined || value === null || !validationRegex.test(value.toString()) || !validateDecimalPoint(value.toString())) {\n      _setValue(null);\n      return;\n    }\n\n    _setValue(prev => (isFocused ? prev : formattedValue(value.toString())));\n  }, [formattedValue, value, validateDecimalPoint, validationRegex]);\n\n  // Set padding right for the input field\n  useEffect(() => {\n    if (!_unitRef.current || !_inputRef.current || !unitText) return;\n    const unitWidth = _unitRef.current.offsetWidth;\n    _inputRef.current.style.setProperty('padding-right', `${(unitWidth + 10) / 16}rem`);\n  }, [unitText]);\n\n  return (\n    <div className={cn('relative', wrapperClassName)}>\n      <Input\n        {...props}\n        ref={_inputRef}\n        value={_value || (readOnly ? '0' : '')}\n        placeholder={placeholder}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cn('text-end font-number text-sm slashed-zero lining-nums tabular-nums', readOnly && 'bg-muted text-muted-foreground', className)}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      />\n      {unitText && (\n        <span ref={_unitRef} className=\"-translate-y-1/2 pointer-events-none absolute top-1/2 right-2 text-muted-foreground text-sm\">\n          {unitText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/orders-bar-chart-9RmtP6In.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"orders-bar-chart-9RmtP6In.cjs","names":["toDateLabel","ChartContainer","getChartColor","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/orders-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type OrdersBarChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */\n  dataKey?: string;\n  /** Series label in simple mode. Defaults to `'Orders'`. */\n  label?: string;\n  /** Stacked mode: one series per order status; each `key` indexes into the data rows. */\n  statuses?: ChartSeries[];\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `true` when `statuses` is provided. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A bar chart for order volume per period — a single series by default, or stacked by order\n * status when `statuses` is provided.\n *\n * @example\n * ```tsx\n * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <OrdersBarChart\n *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}\n *   statuses={[\n *     { key: 'completed', label: 'Completed' },\n *     { key: 'pending', label: 'Pending' },\n *     { key: 'cancelled', label: 'Cancelled' },\n *   ]}\n * />\n * ```\n */\nexport const OrdersBarChart = ({\n  data,\n  dataKey = 'orders',\n  label = 'Orders',\n  statuses,\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = !!statuses,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: OrdersBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => {\n    if (!statuses) return { [dataKey]: { label, color } };\n    return Object.fromEntries(statuses.map((status, index) => [status.key, { label: status.label, color: status.color || getChartColor(index) }]));\n  }, [statuses, dataKey, label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"orders-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} allowDecimals={false} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n            />\n          }\n        />\n        {statuses ? (\n          statuses.map((status, index) => (\n            <Bar\n              key={status.key}\n              dataKey={status.key}\n              stackId=\"orders\"\n              fill={status.color || getChartColor(index)}\n              radius={index === statuses.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n              isAnimationActive={animate}\n            />\n          ))\n        ) : (\n          <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        )}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA8CA,MAAa,GAAkB,CAC7B,OACA,UAAU,SACV,QAAQ,SACR,WACA,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgBA,EAAAA,YAChB,aAAa,CAAC,CAAC,EACf,WAAW,GACX,YACA,UAAU,GACV,aAQE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,mBACV,QAAA,EAAA,EAAA,QAAA,KAPG,EACE,OAAO,YAAY,EAAS,KAAK,EAAQ,IAAU,CAAC,EAAO,IAAK,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,OAASC,EAAAA,cAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EADvH,EAAG,GAAU,CAAE,QAAO,OAAM,CAAE,EAEnD,CAAC,EAAU,EAAS,EAAO,CAAK,CAKlB,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,GAAO,cAAe,CAAiB,CAAA,GACzH,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,CACD,CAAA,CAEJ,CAAA,EACA,EACC,EAAS,KAAK,EAAQ,KACpB,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAEE,QAAS,EAAO,IAChB,QAAQ,SACR,KAAM,EAAO,OAASP,EAAAA,cAAc,CAAK,EACzC,OAAQ,IAAU,EAAS,OAAS,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAClE,kBAAmB,CACpB,EANM,EAAO,GAMb,CACF,GAED,EAAA,EAAA,IAAA,CAACO,EAAAA,IAAD,CAAc,UAAS,KAAM,EAAO,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAExF,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA"}
+{"version":3,"file":"orders-bar-chart-9RmtP6In.cjs","names":["toDateLabel","ChartContainer","getChartColor","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/orders-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type OrdersBarChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */\n  dataKey?: string;\n  /** Series label in simple mode. Defaults to `'Orders'`. */\n  label?: string;\n  /** Stacked mode: one series per order status; each `key` indexes into the data rows. */\n  statuses?: ChartSeries[];\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `true` when `statuses` is provided. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A bar chart for order volume per period — a single series by default, or stacked by order\n * status when `statuses` is provided.\n *\n * @example\n * ```tsx\n * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <OrdersBarChart\n *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}\n *   statuses={[\n *     { key: 'completed', label: 'Completed' },\n *     { key: 'pending', label: 'Pending' },\n *     { key: 'cancelled', label: 'Cancelled' },\n *   ]}\n * />\n * ```\n */\nexport const OrdersBarChart = ({\n  data,\n  dataKey = 'orders',\n  label = 'Orders',\n  statuses,\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = !!statuses,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: OrdersBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => {\n    if (!statuses) return { [dataKey]: { label, color } };\n    return Object.fromEntries(statuses.map((status, index) => [status.key, { label: status.label, color: status.color || getChartColor(index) }]));\n  }, [statuses, dataKey, label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"orders-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} allowDecimals={false} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n            />\n          }\n        />\n        {statuses ? (\n          statuses.map((status, index) => (\n            <Bar\n              key={status.key}\n              dataKey={status.key}\n              stackId=\"orders\"\n              fill={status.color || getChartColor(index)}\n              radius={index === statuses.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n              isAnimationActive={animate}\n            />\n          ))\n        ) : (\n          <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        )}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA8CA,MAAa,GAAkB,CAC7B,OACA,UAAU,SACV,QAAQ,SACR,WACA,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgBA,EAAAA,YAChB,aAAa,CAAC,CAAC,EACf,WAAW,GACX,YACA,UAAU,GACV,aAQE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,mBACV,QAAA,EAAA,EAAA,QAAA,KAPG,EACE,OAAO,YAAY,EAAS,KAAK,EAAQ,IAAU,CAAC,EAAO,IAAK,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,OAASC,EAAAA,cAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EADvH,EAAG,GAAU,CAAE,QAAO,OAAM,CAAE,EAEnD,CAAC,EAAU,EAAS,EAAO,CAAK,CAKlB,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAvE,SAAA,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,GAAO,cAAe,CAAiB,CAAA,GACzH,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,CACD,CAAA,CAEJ,CAAA,EACA,EACC,EAAS,KAAK,EAAQ,KACpB,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAEE,QAAS,EAAO,IAChB,QAAQ,SACR,KAAM,EAAO,OAASP,EAAAA,cAAc,CAAK,EACzC,OAAQ,IAAU,EAAS,OAAS,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAClE,kBAAmB,CACpB,EANM,EAAO,GAMb,CACF,GAED,EAAA,EAAA,IAAA,CAACO,EAAAA,IAAD,CAAc,UAAS,KAAM,EAAO,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAExF,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA"}

package/dist/orders-bar-chart-DQhJGmwY.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"orders-bar-chart-DQhJGmwY.mjs","names":[],"sources":["../packages/components/features/charts/components/orders-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type OrdersBarChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */\n  dataKey?: string;\n  /** Series label in simple mode. Defaults to `'Orders'`. */\n  label?: string;\n  /** Stacked mode: one series per order status; each `key` indexes into the data rows. */\n  statuses?: ChartSeries[];\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `true` when `statuses` is provided. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A bar chart for order volume per period — a single series by default, or stacked by order\n * status when `statuses` is provided.\n *\n * @example\n * ```tsx\n * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <OrdersBarChart\n *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}\n *   statuses={[\n *     { key: 'completed', label: 'Completed' },\n *     { key: 'pending', label: 'Pending' },\n *     { key: 'cancelled', label: 'Cancelled' },\n *   ]}\n * />\n * ```\n */\nexport const OrdersBarChart = ({\n  data,\n  dataKey = 'orders',\n  label = 'Orders',\n  statuses,\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = !!statuses,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: OrdersBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => {\n    if (!statuses) return { [dataKey]: { label, color } };\n    return Object.fromEntries(statuses.map((status, index) => [status.key, { label: status.label, color: status.color || getChartColor(index) }]));\n  }, [statuses, dataKey, label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"orders-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} allowDecimals={false} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n            />\n          }\n        />\n        {statuses ? (\n          statuses.map((status, index) => (\n            <Bar\n              key={status.key}\n              dataKey={status.key}\n              stackId=\"orders\"\n              fill={status.color || getChartColor(index)}\n              radius={index === statuses.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n              isAnimationActive={animate}\n            />\n          ))\n        ) : (\n          <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        )}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"6aA8CA,MAAa,GAAkB,CAC7B,OACA,UAAU,SACV,QAAQ,SACR,WACA,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgB,EAChB,aAAa,CAAC,CAAC,EACf,WAAW,GACX,YACA,UAAU,GACV,YAQE,EAAC,EAAD,CACE,YAAU,mBACV,OARW,MACR,EACE,OAAO,YAAY,EAAS,KAAK,EAAQ,IAAU,CAAC,EAAO,IAAK,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,OAAS,EAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EADvH,EAAG,GAAU,CAAE,QAAO,OAAM,CAAE,EAEnD,CAAC,EAAU,EAAS,EAAO,CAAK,CAKlB,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAvE,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,GAAO,cAAe,CAAiB,CAAA,EACzH,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,CACD,CAAA,CAEJ,CAAA,EACA,EACC,EAAS,KAAK,EAAQ,IACpB,EAAC,EAAD,CAEE,QAAS,EAAO,IAChB,QAAQ,SACR,KAAM,EAAO,OAAS,EAAc,CAAK,EACzC,OAAQ,IAAU,EAAS,OAAS,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAClE,kBAAmB,CACpB,EANM,EAAO,GAMb,CACF,EAED,EAAC,EAAD,CAAc,UAAS,KAAM,EAAO,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAExF,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA"}
+{"version":3,"file":"orders-bar-chart-DQhJGmwY.mjs","names":[],"sources":["../packages/components/features/charts/components/orders-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, ChartSeries } from '../types';\nimport { getChartColor, toDateLabel } from '../utils';\n\nexport type OrdersBarChartProps = BaseChartProps & {\n  data: Array<{ date: string | Date } & Record<string, unknown>>;\n  /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */\n  dataKey?: string;\n  /** Series label in simple mode. Defaults to `'Orders'`. */\n  label?: string;\n  /** Stacked mode: one series per order status; each `key` indexes into the data rows. */\n  statuses?: ChartSeries[];\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `true` when `statuses` is provided. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A bar chart for order volume per period — a single series by default, or stacked by order\n * status when `statuses` is provided.\n *\n * @example\n * ```tsx\n * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <OrdersBarChart\n *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}\n *   statuses={[\n *     { key: 'completed', label: 'Completed' },\n *     { key: 'pending', label: 'Pending' },\n *     { key: 'cancelled', label: 'Cancelled' },\n *   ]}\n * />\n * ```\n */\nexport const OrdersBarChart = ({\n  data,\n  dataKey = 'orders',\n  label = 'Orders',\n  statuses,\n  color = 'var(--chart-1)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = !!statuses,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: OrdersBarChartProps) => {\n  const config = useMemo<ChartConfig>(() => {\n    if (!statuses) return { [dataKey]: { label, color } };\n    return Object.fromEntries(statuses.map((status, index) => [status.key, { label: status.label, color: status.color || getChartColor(index) }]));\n  }, [statuses, dataKey, label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"orders-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={48} allowDecimals={false} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n            />\n          }\n        />\n        {statuses ? (\n          statuses.map((status, index) => (\n            <Bar\n              key={status.key}\n              dataKey={status.key}\n              stackId=\"orders\"\n              fill={status.color || getChartColor(index)}\n              radius={index === statuses.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}\n              isAnimationActive={animate}\n            />\n          ))\n        ) : (\n          <Bar dataKey={dataKey} fill={color} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        )}\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"6aA8CA,MAAa,GAAkB,CAC7B,OACA,UAAU,SACV,QAAQ,SACR,WACA,QAAQ,iBACR,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,gBAAgB,EAChB,aAAa,CAAC,CAAC,EACf,WAAW,GACX,YACA,UAAU,GACV,YAQE,EAAC,EAAD,CACE,YAAU,mBACV,OARW,MACR,EACE,OAAO,YAAY,EAAS,KAAK,EAAQ,IAAU,CAAC,EAAO,IAAK,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,OAAS,EAAc,CAAK,CAAE,CAAC,CAAC,CAAC,EADvH,EAAG,GAAU,CAAE,QAAO,OAAM,CAAE,EAEnD,CAAC,EAAU,EAAS,EAAO,CAAK,CAKlB,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAgB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAvE,SAAA,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,GAAO,cAAe,CAAiB,CAAA,EACzH,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,CACD,CAAA,CAEJ,CAAA,EACA,EACC,EAAS,KAAK,EAAQ,IACpB,EAAC,EAAD,CAEE,QAAS,EAAO,IAChB,QAAQ,SACR,KAAM,EAAO,OAAS,EAAc,CAAK,EACzC,OAAQ,IAAU,EAAS,OAAS,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAAI,CAAC,EAAG,EAAG,EAAG,CAAC,EAClE,kBAAmB,CACpB,EANM,EAAO,GAMb,CACF,EAED,EAAC,EAAD,CAAc,UAAS,KAAM,EAAO,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAExF,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACtD,GACI,CAAA"}

package/dist/pages/FeatureDeveloping.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureDeveloping.cjs","names":["LunasLogo","Construction","Button"],"sources":["../../packages/components/pages/FeatureDeveloping.tsx"],"sourcesContent":["'use client';\n\nimport { Construction } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureDevelopingProps {\n  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Construction` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is still under active development.\n *\n * @example\n * ```tsx\n * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';\n *\n * <FeatureDeveloping\n *   title=\"Coming Soon\"\n *   subtitle=\"This feature is not ready yet.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureDeveloping = ({\n  title = 'Tính năng đang phát triển',\n  subtitle = 'Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureDevelopingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Construction className={cn('size-16 sm:size-24 text-yellow-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-yellow-500\">{/* This text shows the feature is in development */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureDeveloping;\n"],"mappings":"iSAuCA,MAAa,GAAqB,CAChC,QAAQ,4BACR,WAAW,kEACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,WAA3I,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAa,CAAI,CAAA,GACnF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gDAA2G,CAAA,CACvH,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}
+{"version":3,"file":"FeatureDeveloping.cjs","names":["LunasLogo","Construction","Button"],"sources":["../../packages/components/pages/FeatureDeveloping.tsx"],"sourcesContent":["'use client';\n\nimport { Construction } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureDevelopingProps {\n  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Construction` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is still under active development.\n *\n * @example\n * ```tsx\n * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';\n *\n * <FeatureDeveloping\n *   title=\"Coming Soon\"\n *   subtitle=\"This feature is not ready yet.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureDeveloping = ({\n  title = 'Tính năng đang phát triển',\n  subtitle = 'Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureDevelopingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Construction className={cn('size-16 sm:size-24 text-yellow-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-yellow-500\">{/* This text shows the feature is in development */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureDeveloping;\n"],"mappings":"iSAuCA,MAAa,GAAqB,CAChC,QAAQ,4BACR,WAAW,kEACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,EAA3I,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAa,CAAI,CAAA,GACnF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gDAA2G,CAAA,CACvH,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,yCAA0C,SAAA,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,KACrE,SAAA,CACK,CAAA,CACL"}

package/dist/pages/FeatureDeveloping.d.cts

@@ -1,2 +1,2 @@
-import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-zuTTDIh_.cjs";
+import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-DRmYHj91.cjs";
 export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };

package/dist/pages/FeatureDeveloping.d.mts

@@ -1,2 +1,2 @@
-import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-zuTTDIh_.mjs";
+import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-DRmYHj91.mjs";
 export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };

package/dist/pages/FeatureDeveloping.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureDeveloping.mjs","names":[],"sources":["../../packages/components/pages/FeatureDeveloping.tsx"],"sourcesContent":["'use client';\n\nimport { Construction } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureDevelopingProps {\n  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Construction` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is still under active development.\n *\n * @example\n * ```tsx\n * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';\n *\n * <FeatureDeveloping\n *   title=\"Coming Soon\"\n *   subtitle=\"This feature is not ready yet.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureDeveloping = ({\n  title = 'Tính năng đang phát triển',\n  subtitle = 'Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureDevelopingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Construction className={cn('size-16 sm:size-24 text-yellow-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-yellow-500\">{/* This text shows the feature is in development */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureDeveloping;\n"],"mappings":"gQAuCA,MAAa,GAAqB,CAChC,QAAQ,4BACR,WAAW,kEACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,WAA3I,CACE,EAAC,EAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,EACxC,EAAC,MAAD,CAAK,UAAU,4CAAf,CACE,EAAC,EAAD,CAAc,UAAW,EAAG,qCAAsC,CAAa,CAAI,CAAA,EACnF,EAAC,MAAD,CAAK,UAAU,gDAA2G,CAAA,CACvH,IAEL,EAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}
+{"version":3,"file":"FeatureDeveloping.mjs","names":[],"sources":["../../packages/components/pages/FeatureDeveloping.tsx"],"sourcesContent":["'use client';\n\nimport { Construction } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureDevelopingProps {\n  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Construction` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is still under active development.\n *\n * @example\n * ```tsx\n * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';\n *\n * <FeatureDeveloping\n *   title=\"Coming Soon\"\n *   subtitle=\"This feature is not ready yet.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureDeveloping = ({\n  title = 'Tính năng đang phát triển',\n  subtitle = 'Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureDevelopingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Construction className={cn('size-16 sm:size-24 text-yellow-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-yellow-500\">{/* This text shows the feature is in development */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureDeveloping;\n"],"mappings":"gQAuCA,MAAa,GAAqB,CAChC,QAAQ,4BACR,WAAW,kEACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,EAA3I,SAAA,CACE,EAAC,EAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,EACxC,EAAC,MAAD,CAAK,UAAU,mCAAf,SAAA,CACE,EAAC,EAAD,CAAc,UAAW,EAAG,qCAAsC,CAAa,CAAI,CAAA,EACnF,EAAC,MAAD,CAAK,UAAU,gDAA2G,CAAA,CACvH,IAEL,EAAC,KAAD,CAAI,UAAU,yCAA0C,SAAA,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,KACrE,SAAA,CACK,CAAA,CACL"}

package/dist/pages/FeatureFixing.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureFixing.cjs","names":["LunasLogo","Wrench","Button"],"sources":["../../packages/components/pages/FeatureFixing.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { Wrench } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureFixingProps {\n  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Wrench` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.\n *\n * @example\n * ```tsx\n * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';\n *\n * <FeatureFixing\n *   title=\"Under Maintenance\"\n *   subtitle=\"We are fixing an issue. Please check back later.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureFixing = ({\n  title = 'Tính năng đang bảo trì',\n  subtitle = 'Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureFixingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Wrench className={cn('size-16 sm:size-24 text-orange-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-orange-500\">{/* This text indicates the feature is being fixed */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureFixing;\n"],"mappings":"iSAqCA,MAAa,GAAiB,CAC5B,QAAQ,yBACR,WAAW,4EACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,WAA3I,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAa,CAAI,CAAA,GAC7E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gDAA4G,CAAA,CACxH,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}
+{"version":3,"file":"FeatureFixing.cjs","names":["LunasLogo","Wrench","Button"],"sources":["../../packages/components/pages/FeatureFixing.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { Wrench } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureFixingProps {\n  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Wrench` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.\n *\n * @example\n * ```tsx\n * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';\n *\n * <FeatureFixing\n *   title=\"Under Maintenance\"\n *   subtitle=\"We are fixing an issue. Please check back later.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureFixing = ({\n  title = 'Tính năng đang bảo trì',\n  subtitle = 'Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureFixingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Wrench className={cn('size-16 sm:size-24 text-orange-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-orange-500\">{/* This text indicates the feature is being fixed */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureFixing;\n"],"mappings":"iSAqCA,MAAa,GAAiB,CAC5B,QAAQ,yBACR,WAAW,4EACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,EAA3I,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAa,CAAI,CAAA,GAC7E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gDAA4G,CAAA,CACxH,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,yCAA0C,SAAA,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,KACrE,SAAA,CACK,CAAA,CACL"}

package/dist/pages/FeatureFixing.d.cts

@@ -1,2 +1,2 @@
-import { n as FeatureFixingProps, t as FeatureFixing } from "../FeatureFixing-DYQlgHPk.cjs";
+import { n as FeatureFixingProps, t as FeatureFixing } from "../FeatureFixing-BHHCDtAQ.cjs";
 export { FeatureFixing, FeatureFixing as default, FeatureFixingProps };

package/dist/pages/FeatureFixing.d.mts

@@ -1,2 +1,2 @@
-import { n as FeatureFixingProps, t as FeatureFixing } from "../FeatureFixing-DYQlgHPk.mjs";
+import { n as FeatureFixingProps, t as FeatureFixing } from "../FeatureFixing-BHHCDtAQ.mjs";
 export { FeatureFixing, FeatureFixing as default, FeatureFixingProps };

package/dist/pages/FeatureFixing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureFixing.mjs","names":[],"sources":["../../packages/components/pages/FeatureFixing.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { Wrench } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureFixingProps {\n  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Wrench` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.\n *\n * @example\n * ```tsx\n * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';\n *\n * <FeatureFixing\n *   title=\"Under Maintenance\"\n *   subtitle=\"We are fixing an issue. Please check back later.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureFixing = ({\n  title = 'Tính năng đang bảo trì',\n  subtitle = 'Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureFixingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Wrench className={cn('size-16 sm:size-24 text-orange-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-orange-500\">{/* This text indicates the feature is being fixed */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureFixing;\n"],"mappings":"0PAqCA,MAAa,GAAiB,CAC5B,QAAQ,yBACR,WAAW,4EACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,WAA3I,CACE,EAAC,EAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,EACxC,EAAC,MAAD,CAAK,UAAU,4CAAf,CACE,EAAC,EAAD,CAAQ,UAAW,EAAG,qCAAsC,CAAa,CAAI,CAAA,EAC7E,EAAC,MAAD,CAAK,UAAU,gDAA4G,CAAA,CACxH,IAEL,EAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}
+{"version":3,"file":"FeatureFixing.mjs","names":[],"sources":["../../packages/components/pages/FeatureFixing.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { Wrench } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface FeatureFixingProps {\n  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Wrench` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.\n *\n * @example\n * ```tsx\n * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';\n *\n * <FeatureFixing\n *   title=\"Under Maintenance\"\n *   subtitle=\"We are fixing an issue. Please check back later.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureFixing = ({\n  title = 'Tính năng đang bảo trì',\n  subtitle = 'Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureFixingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <Wrench className={cn('size-16 sm:size-24 text-orange-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-orange-500\">{/* This text indicates the feature is being fixed */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureFixing;\n"],"mappings":"0PAqCA,MAAa,GAAiB,CAC5B,QAAQ,yBACR,WAAW,4EACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,EAA3I,SAAA,CACE,EAAC,EAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,EACxC,EAAC,MAAD,CAAK,UAAU,mCAAf,SAAA,CACE,EAAC,EAAD,CAAQ,UAAW,EAAG,qCAAsC,CAAa,CAAI,CAAA,EAC7E,EAAC,MAAD,CAAK,UAAU,gDAA4G,CAAA,CACxH,IAEL,EAAC,KAAD,CAAI,UAAU,yCAA0C,SAAA,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,KACrE,SAAA,CACK,CAAA,CACL"}

package/dist/pages/LoginPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoginPage.cjs","names":["z","Dialog","DialogContent","DialogHeader","LunasLogo","DialogTitle","DialogDescription","Alert","AlertDescription","Label","Input","Button","EyeOff","Eye"],"sources":["../../packages/components/pages/LoginPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod/v4';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { LunasLogo } from '../features/logo';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface LoginPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits login credentials */\n  onLogin: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Quên mật khẩu?\" link is clicked */\n  onForgotPassword?: () => void;\n  /** Called when the \"Đăng ký\" link is clicked */\n  onRegister?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng nhập\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Nhập thông tin để tiếp tục\" */\n  subtitle?: string;\n}\n\nconst loginSchema = z.object({\n  email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\n/**\n * Modal login dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { LoginPage } from '@customafk/lunas-ui/pages/LoginPage';\n *\n * <LoginPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onLogin={async (email, password) => {\n *     await authService.login(email, password);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onForgotPassword,\n  onRegister,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng nhập',\n  subtitle = 'Nhập thông tin để tiếp tục',\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = loginSchema.safeParse({ email, password });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({ email: errors.email?.[0], password: errors.password?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    await onLogin(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <LunasLogo variant=\"horizontal\" size=\"sm\" className=\"mx-auto\" />\n          <div className=\"flex flex-col gap-0.5\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{subtitle}</DialogDescription>\n          </div>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor={passwordId}>Mật khẩu</Label>\n              {onForgotPassword && (\n                <Button type=\"button\" variant=\"link\" size=\"sm\" className=\"h-auto p-0 text-xs\" onClick={onForgotPassword}>\n                  Quên mật khẩu?\n                </Button>\n              )}\n            </div>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"current-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password && <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng nhập\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={() => onOpenChange(false)}>\n            Đóng hộp thoại\n          </Button>\n        </form>\n\n        {onRegister && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onRegister}>\n              Đăng ký\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"LoginPage.cjs","names":["z","Dialog","DialogContent","DialogHeader","LunasLogo","DialogTitle","DialogDescription","Alert","AlertDescription","Label","Input","Button","EyeOff","Eye"],"sources":["../../packages/components/pages/LoginPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod/v4';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { LunasLogo } from '../features/logo';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface LoginPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits login credentials */\n  onLogin: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Quên mật khẩu?\" link is clicked */\n  onForgotPassword?: () => void;\n  /** Called when the \"Đăng ký\" link is clicked */\n  onRegister?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng nhập\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Nhập thông tin để tiếp tục\" */\n  subtitle?: string;\n}\n\nconst loginSchema = z.object({\n  email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\n/**\n * Modal login dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { LoginPage } from '@customafk/lunas-ui/pages/LoginPage';\n *\n * <LoginPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onLogin={async (email, password) => {\n *     await authService.login(email, password);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onForgotPassword,\n  onRegister,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng nhập',\n  subtitle = 'Nhập thông tin để tiếp tục',\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = loginSchema.safeParse({ email, password });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({ email: errors.email?.[0], password: errors.password?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    await onLogin(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <LunasLogo variant=\"horizontal\" size=\"sm\" className=\"mx-auto\" />\n          <div className=\"flex flex-col gap-0.5\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{subtitle}</DialogDescription>\n          </div>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor={passwordId}>Mật khẩu</Label>\n              {onForgotPassword && (\n                <Button type=\"button\" variant=\"link\" size=\"sm\" className=\"h-auto p-0 text-xs\" onClick={onForgotPassword}>\n                  Quên mật khẩu?\n                </Button>\n              )}\n            </div>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"current-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password && <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng nhập\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={() => onOpenChange(false)}>\n            Đóng hộp thoại\n          </Button>\n        </form>\n\n        {onRegister && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onRegister}>\n              Đăng ký\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/LoginPage.d.cts

@@ -1,2 +1,2 @@
-import { n as LoginPageProps, t as LoginPage } from "../LoginPage-vMXvwtxf.cjs";
+import { n as LoginPageProps, t as LoginPage } from "../LoginPage-DDljzV6A.cjs";
 export { LoginPage, LoginPageProps };

package/dist/pages/LoginPage.d.mts

@@ -1,2 +1,2 @@
-import { n as LoginPageProps, t as LoginPage } from "../LoginPage-vMXvwtxf.mjs";
+import { n as LoginPageProps, t as LoginPage } from "../LoginPage-DDljzV6A.mjs";
 export { LoginPage, LoginPageProps };

package/dist/pages/LoginPage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoginPage.mjs","names":[],"sources":["../../packages/components/pages/LoginPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod/v4';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { LunasLogo } from '../features/logo';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface LoginPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits login credentials */\n  onLogin: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Quên mật khẩu?\" link is clicked */\n  onForgotPassword?: () => void;\n  /** Called when the \"Đăng ký\" link is clicked */\n  onRegister?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng nhập\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Nhập thông tin để tiếp tục\" */\n  subtitle?: string;\n}\n\nconst loginSchema = z.object({\n  email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\n/**\n * Modal login dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { LoginPage } from '@customafk/lunas-ui/pages/LoginPage';\n *\n * <LoginPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onLogin={async (email, password) => {\n *     await authService.login(email, password);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onForgotPassword,\n  onRegister,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng nhập',\n  subtitle = 'Nhập thông tin để tiếp tục',\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = loginSchema.safeParse({ email, password });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({ email: errors.email?.[0], password: errors.password?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    await onLogin(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <LunasLogo variant=\"horizontal\" size=\"sm\" className=\"mx-auto\" />\n          <div className=\"flex flex-col gap-0.5\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{subtitle}</DialogDescription>\n          </div>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor={passwordId}>Mật khẩu</Label>\n              {onForgotPassword && (\n                <Button type=\"button\" variant=\"link\" size=\"sm\" className=\"h-auto p-0 text-xs\" onClick={onForgotPassword}>\n                  Quên mật khẩu?\n                </Button>\n              )}\n            </div>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"current-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password && <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng nhập\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={() => onOpenChange(false)}>\n            Đóng hộp thoại\n          </Button>\n        </form>\n\n        {onRegister && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onRegister}>\n              Đăng ký\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"LoginPage.mjs","names":[],"sources":["../../packages/components/pages/LoginPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { z } from 'zod/v4';\n\nimport { Alert, AlertDescription } from '../ui/alert';\nimport { Button } from '../ui/button';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';\nimport { LunasLogo } from '../features/logo';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\nexport interface LoginPageProps {\n  /** Controls whether the dialog is open */\n  open: boolean;\n  /** Called when the dialog open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Called when the user submits login credentials */\n  onLogin: (email: string, password: string) => Promise<void> | void;\n  /** Called when the \"Quên mật khẩu?\" link is clicked */\n  onForgotPassword?: () => void;\n  /** Called when the \"Đăng ký\" link is clicked */\n  onRegister?: () => void;\n  /** Disables the form and shows a spinner on the submit button */\n  isLoading?: boolean;\n  /** Server-side error message rendered in a destructive Alert */\n  errorMessage?: string;\n  /** Dialog heading. Default: \"Đăng nhập\" */\n  title?: string;\n  /** Dialog subheading. Default: \"Nhập thông tin để tiếp tục\" */\n  subtitle?: string;\n}\n\nconst loginSchema = z.object({\n  email: z.string().min(1, 'Vui lòng nhập email').email('Email không hợp lệ'),\n  password: z.string().min(1, 'Vui lòng nhập mật khẩu'),\n});\n\n/**\n * Modal login dialog for the client authentication flow.\n *\n * @example\n * ```tsx\n * import { LoginPage } from '@customafk/lunas-ui/pages/LoginPage';\n *\n * <LoginPage\n *   open={open}\n *   onOpenChange={setOpen}\n *   onLogin={async (email, password) => {\n *     await authService.login(email, password);\n *     setOpen(false);\n *   }}\n *   onRegister={() => { setOpen(false); setRegisterOpen(true); }}\n * />\n * ```\n */\nexport const LoginPage = ({\n  open,\n  onOpenChange,\n  onLogin,\n  onForgotPassword,\n  onRegister,\n  isLoading = false,\n  errorMessage,\n  title = 'Đăng nhập',\n  subtitle = 'Nhập thông tin để tiếp tục',\n}: LoginPageProps) => {\n  const emailId = useId();\n  const passwordId = useId();\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [showPassword, setShowPassword] = useState(false);\n  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const result = loginSchema.safeParse({ email, password });\n    if (!result.success) {\n      const errors = result.error.flatten().fieldErrors;\n      setFieldErrors({ email: errors.email?.[0], password: errors.password?.[0] });\n      return;\n    }\n    setFieldErrors({});\n    await onLogin(email, password);\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm\">\n        <DialogHeader>\n          <LunasLogo variant=\"horizontal\" size=\"sm\" className=\"mx-auto\" />\n          <div className=\"flex flex-col gap-0.5\">\n            <DialogTitle>{title}</DialogTitle>\n            <DialogDescription>{subtitle}</DialogDescription>\n          </div>\n        </DialogHeader>\n\n        <form onSubmit={handleSubmit} noValidate className=\"flex flex-col gap-4\">\n          {errorMessage && (\n            <Alert variant=\"destructive\">\n              <AlertDescription>{errorMessage}</AlertDescription>\n            </Alert>\n          )}\n\n          <div className=\"flex flex-col gap-1.5\">\n            <Label htmlFor={emailId}>Email</Label>\n            <Input\n              id={emailId}\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              aria-invalid={!!fieldErrors.email}\n              disabled={isLoading}\n            />\n            {fieldErrors.email && <p className=\"text-destructive text-xs\">{fieldErrors.email}</p>}\n          </div>\n\n          <div className=\"flex flex-col gap-1.5\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor={passwordId}>Mật khẩu</Label>\n              {onForgotPassword && (\n                <Button type=\"button\" variant=\"link\" size=\"sm\" className=\"h-auto p-0 text-xs\" onClick={onForgotPassword}>\n                  Quên mật khẩu?\n                </Button>\n              )}\n            </div>\n            <div className=\"relative\">\n              <Input\n                id={passwordId}\n                type={showPassword ? 'text' : 'password'}\n                autoComplete=\"current-password\"\n                placeholder=\"••••••••\"\n                value={password}\n                onChange={e => setPassword(e.target.value)}\n                aria-invalid={!!fieldErrors.password}\n                disabled={isLoading}\n                className=\"pr-10\"\n              />\n              <button\n                type=\"button\"\n                className=\"absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground\"\n                onMouseDown={e => {\n                  e.preventDefault();\n                  setShowPassword(v => !v);\n                }}\n                aria-label={showPassword ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n              >\n                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}\n              </button>\n            </div>\n            {fieldErrors.password && <p className=\"text-destructive text-xs\">{fieldErrors.password}</p>}\n          </div>\n\n          <Button type=\"submit\" isLoading={isLoading} className=\"w-full\">\n            Đăng nhập\n          </Button>\n          <Button type=\"button\" variant=\"outline\" className=\"w-full\" disabled={isLoading} onClick={() => onOpenChange(false)}>\n            Đóng hộp thoại\n          </Button>\n        </form>\n\n        {onRegister && (\n          <div className=\"flex justify-center gap-1 text-muted-foreground text-sm\">\n            <span>Chưa có tài khoản?</span>\n            <Button variant=\"link\" size=\"sm\" className=\"h-auto p-0\" onClick={onRegister}>\n              Đăng ký\n            </Button>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"mappings":"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"}

package/dist/pages/NotAuthorized.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotAuthorized.cjs","names":["LunasLogo","ShieldAlert","Button"],"sources":["../../packages/components/pages/NotAuthorized.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { ShieldAlert } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface NotAuthorizedProps {\n  /** Main heading shown beneath the shield icon. Defaults to `'Quyền truy cập bị từ chối'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese access-denied message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `ShieldAlert` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page 403 error screen shown when the current user lacks permission to access a resource.\n *\n * @example\n * ```tsx\n * import { NotAuthorized } from '@customafk/lunas-ui/pages/NotAuthorized';\n *\n * <NotAuthorized\n *   title=\"Access Denied\"\n *   subtitle=\"You do not have permission to view this page.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.push('/')}\n * />\n * ```\n */\nexport const NotAuthorized = ({\n  title = 'Quyền truy cập bị từ chối',\n  subtitle = 'Xin lỗi, bạn không có quyền truy cập vào trang này.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: NotAuthorizedProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <ShieldAlert className={cn('size-16 sm:size-24 text-primary', iconClassName)} />\n        <div className=\"text-4xl sm:text-6xl font-bold text-primary\">403</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default NotAuthorized;\n"],"mappings":"iSAqCA,MAAa,GAAiB,CAC5B,QAAQ,4BACR,WAAW,sDACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,WAA3I,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,WAAA,EAAA,EAAA,GAAA,CAAc,kCAAmC,CAAa,CAAI,CAAA,GAC/E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDAA8C,KAAQ,CAAA,CAClE,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}
+{"version":3,"file":"NotAuthorized.cjs","names":["LunasLogo","ShieldAlert","Button"],"sources":["../../packages/components/pages/NotAuthorized.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { ShieldAlert } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface NotAuthorizedProps {\n  /** Main heading shown beneath the shield icon. Defaults to `'Quyền truy cập bị từ chối'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese access-denied message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `ShieldAlert` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page 403 error screen shown when the current user lacks permission to access a resource.\n *\n * @example\n * ```tsx\n * import { NotAuthorized } from '@customafk/lunas-ui/pages/NotAuthorized';\n *\n * <NotAuthorized\n *   title=\"Access Denied\"\n *   subtitle=\"You do not have permission to view this page.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.push('/')}\n * />\n * ```\n */\nexport const NotAuthorized = ({\n  title = 'Quyền truy cập bị từ chối',\n  subtitle = 'Xin lỗi, bạn không có quyền truy cập vào trang này.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: NotAuthorizedProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <ShieldAlert className={cn('size-16 sm:size-24 text-primary', iconClassName)} />\n        <div className=\"text-4xl sm:text-6xl font-bold text-primary\">403</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default NotAuthorized;\n"],"mappings":"iSAqCA,MAAa,GAAiB,CAC5B,QAAQ,4BACR,WAAW,sDACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,EAA3I,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,WAAA,EAAA,EAAA,GAAA,CAAc,kCAAmC,CAAa,CAAI,CAAA,GAC/E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8CAA8C,SAAA,KAAQ,CAAA,CAClE,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,yCAA0C,SAAA,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,KACrE,SAAA,CACK,CAAA,CACL"}

package/dist/pages/NotAuthorized.d.cts

@@ -1,2 +1,2 @@
-import { n as NotAuthorizedProps, t as NotAuthorized } from "../NotAuthorized-CZIQ6EaA.cjs";
+import { n as NotAuthorizedProps, t as NotAuthorized } from "../NotAuthorized-DTT57OHb.cjs";
 export { NotAuthorized, NotAuthorized as default, NotAuthorizedProps };

package/dist/pages/NotAuthorized.d.mts

@@ -1,2 +1,2 @@
-import { n as NotAuthorizedProps, t as NotAuthorized } from "../NotAuthorized-CZIQ6EaA.mjs";
+import { n as NotAuthorizedProps, t as NotAuthorized } from "../NotAuthorized-DTT57OHb.mjs";
 export { NotAuthorized, NotAuthorized as default, NotAuthorizedProps };

package/dist/pages/NotAuthorized.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotAuthorized.mjs","names":[],"sources":["../../packages/components/pages/NotAuthorized.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { ShieldAlert } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface NotAuthorizedProps {\n  /** Main heading shown beneath the shield icon. Defaults to `'Quyền truy cập bị từ chối'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese access-denied message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `ShieldAlert` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page 403 error screen shown when the current user lacks permission to access a resource.\n *\n * @example\n * ```tsx\n * import { NotAuthorized } from '@customafk/lunas-ui/pages/NotAuthorized';\n *\n * <NotAuthorized\n *   title=\"Access Denied\"\n *   subtitle=\"You do not have permission to view this page.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.push('/')}\n * />\n * ```\n */\nexport const NotAuthorized = ({\n  title = 'Quyền truy cập bị từ chối',\n  subtitle = 'Xin lỗi, bạn không có quyền truy cập vào trang này.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: NotAuthorizedProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <ShieldAlert className={cn('size-16 sm:size-24 text-primary', iconClassName)} />\n        <div className=\"text-4xl sm:text-6xl font-bold text-primary\">403</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default NotAuthorized;\n"],"mappings":"+PAqCA,MAAa,GAAiB,CAC5B,QAAQ,4BACR,WAAW,sDACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,WAA3I,CACE,EAAC,EAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,EACxC,EAAC,MAAD,CAAK,UAAU,4CAAf,CACE,EAAC,EAAD,CAAa,UAAW,EAAG,kCAAmC,CAAa,CAAI,CAAA,EAC/E,EAAC,MAAD,CAAK,UAAU,uDAA8C,KAAQ,CAAA,CAClE,IAEL,EAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}
+{"version":3,"file":"NotAuthorized.mjs","names":[],"sources":["../../packages/components/pages/NotAuthorized.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { ShieldAlert } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface NotAuthorizedProps {\n  /** Main heading shown beneath the shield icon. Defaults to `'Quyền truy cập bị từ chối'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese access-denied message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `ShieldAlert` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page 403 error screen shown when the current user lacks permission to access a resource.\n *\n * @example\n * ```tsx\n * import { NotAuthorized } from '@customafk/lunas-ui/pages/NotAuthorized';\n *\n * <NotAuthorized\n *   title=\"Access Denied\"\n *   subtitle=\"You do not have permission to view this page.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.push('/')}\n * />\n * ```\n */\nexport const NotAuthorized = ({\n  title = 'Quyền truy cập bị từ chối',\n  subtitle = 'Xin lỗi, bạn không có quyền truy cập vào trang này.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: NotAuthorizedProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <ShieldAlert className={cn('size-16 sm:size-24 text-primary', iconClassName)} />\n        <div className=\"text-4xl sm:text-6xl font-bold text-primary\">403</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default NotAuthorized;\n"],"mappings":"+PAqCA,MAAa,GAAiB,CAC5B,QAAQ,4BACR,WAAW,sDACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,EAA3I,SAAA,CACE,EAAC,EAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,EACxC,EAAC,MAAD,CAAK,UAAU,mCAAf,SAAA,CACE,EAAC,EAAD,CAAa,UAAW,EAAG,kCAAmC,CAAa,CAAI,CAAA,EAC/E,EAAC,MAAD,CAAK,UAAU,8CAA8C,SAAA,KAAQ,CAAA,CAClE,IAEL,EAAC,KAAD,CAAI,UAAU,yCAA0C,SAAA,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,KACrE,SAAA,CACK,CAAA,CACL"}

package/dist/pages/NotFound.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotFound.cjs","names":["LunasLogo","FileQuestion","Button"],"sources":["../../packages/components/pages/NotFound.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { FileQuestion } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface NotFoundProps {\n  /** Main heading shown beneath the file-question icon. Defaults to `'Không tìm thấy trang'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese 404 message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Trở về trang chủ'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `FileQuestion` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page 404 error screen displayed when a requested route or resource does not exist.\n *\n * @example\n * ```tsx\n * import { NotFound } from '@customafk/lunas-ui/pages/NotFound';\n *\n * <NotFound\n *   title=\"Page Not Found\"\n *   subtitle=\"The page you are looking for does not exist.\"\n *   buttonText=\"Go Home\"\n *   onButtonClick={() => router.push('/')}\n * />\n * ```\n */\nexport const NotFound = ({\n  title = 'Không tìm thấy trang',\n  subtitle = 'Xin lỗi, trang bạn đang tìm kiếm không tồn tại hoặc đã bị di chuyển.',\n  buttonText = 'Trở về trang chủ',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: NotFoundProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <FileQuestion className={cn('size-16 sm:size-24 text-primary', iconClassName)} />\n        <div className=\"text-4xl sm:text-6xl font-bold text-primary\">404</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default NotFound;\n"],"mappings":"iSAqCA,MAAa,GAAY,CACvB,QAAQ,uBACR,WAAW,uEACX,aAAa,mBACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,WAA3I,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,WAAA,EAAA,EAAA,GAAA,CAAc,kCAAmC,CAAa,CAAI,CAAA,GAChF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDAA8C,KAAQ,CAAA,CAClE,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}
+{"version":3,"file":"NotFound.cjs","names":["LunasLogo","FileQuestion","Button"],"sources":["../../packages/components/pages/NotFound.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { FileQuestion } from 'lucide-react';\nimport { LunasLogo } from '../features/logo';\n\nexport interface NotFoundProps {\n  /** Main heading shown beneath the file-question icon. Defaults to `'Không tìm thấy trang'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese 404 message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Trở về trang chủ'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `FileQuestion` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page 404 error screen displayed when a requested route or resource does not exist.\n *\n * @example\n * ```tsx\n * import { NotFound } from '@customafk/lunas-ui/pages/NotFound';\n *\n * <NotFound\n *   title=\"Page Not Found\"\n *   subtitle=\"The page you are looking for does not exist.\"\n *   buttonText=\"Go Home\"\n *   onButtonClick={() => router.push('/')}\n * />\n * ```\n */\nexport const NotFound = ({\n  title = 'Không tìm thấy trang',\n  subtitle = 'Xin lỗi, trang bạn đang tìm kiếm không tồn tại hoặc đã bị di chuyển.',\n  buttonText = 'Trở về trang chủ',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: NotFoundProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <LunasLogo variant=\"stacked\" size=\"sm\" />\n      <div className=\"flex flex-col items-center gap-2\">\n        <FileQuestion className={cn('size-16 sm:size-24 text-primary', iconClassName)} />\n        <div className=\"text-4xl sm:text-6xl font-bold text-primary\">404</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default NotFound;\n"],"mappings":"iSAqCA,MAAa,GAAY,CACvB,QAAQ,uBACR,WAAW,uEACX,aAAa,mBACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,EAA3I,SAAA,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,UAAU,KAAK,IAAM,CAAA,GACxC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,mCAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,WAAA,EAAA,EAAA,GAAA,CAAc,kCAAmC,CAAa,CAAI,CAAA,GAChF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8CAA8C,SAAA,KAAQ,CAAA,CAClE,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,yCAA0C,SAAA,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sDAAuD,SAAA,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,KACrE,SAAA,CACK,CAAA,CACL"}

package/dist/pages/NotFound.d.cts

@@ -1,2 +1,2 @@
-import { n as NotFoundProps, t as NotFound } from "../NotFound-CRSKxhV8.cjs";
+import { n as NotFoundProps, t as NotFound } from "../NotFound-BeUB1yus.cjs";
 export { NotFound, NotFound as default, NotFoundProps };