@customafk/lunas-ui 0.2.74 → 0.2.76

package/dist/{radio-group-field-DsUi8uCy.mjs.map → radio-group-field-DOJ4jVSr.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-group-field-DsUi8uCy.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"6dAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,gBAAtB,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,0BAA3C,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,sBACjF,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,WAEA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,0CAA1C,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,oBAAxB,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,mBAAW,EAAO,WAA8B,CAAA,CAChE,GACT,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,IACP,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"radio-group-field-DOJ4jVSr.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"6dAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQ,EAAuC,EAC/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAC,EAAD,CAAY,UAAU,OAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,EACZ,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,EACjD,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,GACX,EAAC,EAAD,CAEE,UAAW,EACT,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,SAAA,EAAC,EAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,CACE,EAAC,EAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,EAClE,EAAC,EAAD,CAAc,UAAU,WAAxB,SAAA,CACE,EAAC,EAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,EACtC,EAAC,EAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{radio-group-field-Bm2nkk1W.cjs → radio-group-field-kTgtvp1p.cjs}

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-Bae0TOEr.cjs"),t=require("./ui/radio-group.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,description:s,orientation:c,options:l,tooltip:u,helperText:d})=>{let f=e.G(),p=(0,a.useStore)(f.form.store,({isSubmitting:e})=>e);return(0,i.jsxs)(n.FieldGroup,{className:`px-4`,children:[(0,i.jsxs)(n.Field,{orientation:c,className:`flex-col gap-2`,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{children:[o,u&&(0,i.jsx)(n.FieldTooltip,{tooltip:u})]}),(0,i.jsx)(n.FieldDescription,{children:s}),(0,i.jsx)(n.FieldNote,{isShow:!!d,children:d})]}),(0,i.jsx)(n.FieldContentMain,{children:(0,i.jsx)(t.RadioGroup,{value:f.state.value??``,className:`w-full`,onValueChange:f.handleChange,children:l.map(e=>(0,i.jsx)(n.FieldLabel,{className:(0,r.cn)(`h-fit`,f.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,p&&`pointer-events-none bg-muted-muted opacity-60`,f.state.value===e.value&&p&&`border-border-strong!`),children:(0,i.jsxs)(n.Field,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[(0,i.jsx)(t.RadioGroupItem,{value:e.value,className:`mt-0.5 shrink-0`}),(0,i.jsxs)(n.FieldContent,{className:`gap-0.5!`,children:[(0,i.jsx)(n.FieldTitle,{children:e.label}),(0,i.jsx)(n.FieldDescription,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),(0,i.jsx)(n.FieldSeparator,{})]})};exports.RadioGroupField=o;
-//# sourceMappingURL=radio-group-field-Bm2nkk1W.cjs.map
+const e=require("./tanstack-form-BxqS40rB.cjs"),t=require("./ui/radio-group.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("@tanstack/react-form");const o=({label:o,description:s,orientation:c,options:l,tooltip:u,helperText:d})=>{let f=e.G(),p=(0,a.useStore)(f.form.store,({isSubmitting:e})=>e);return(0,i.jsxs)(n.FieldGroup,{className:`px-4`,children:[(0,i.jsxs)(n.Field,{orientation:c,className:`flex-col gap-2`,children:[(0,i.jsxs)(n.FieldContent,{children:[(0,i.jsxs)(n.FieldLabel,{children:[o,u&&(0,i.jsx)(n.FieldTooltip,{tooltip:u})]}),(0,i.jsx)(n.FieldDescription,{children:s}),(0,i.jsx)(n.FieldNote,{isShow:!!d,children:d})]}),(0,i.jsx)(n.FieldContentMain,{children:(0,i.jsx)(t.RadioGroup,{value:f.state.value??``,className:`w-full`,onValueChange:f.handleChange,children:l.map(e=>(0,i.jsx)(n.FieldLabel,{className:(0,r.cn)(`h-fit`,f.state.value===e.value&&`border-primary-weak! bg-primary-bg-subtle`,p&&`pointer-events-none bg-muted-muted opacity-60`,f.state.value===e.value&&p&&`border-border-strong!`),children:(0,i.jsxs)(n.Field,{orientation:`horizontal`,className:`items-start gap-3 rounded p-2!`,children:[(0,i.jsx)(t.RadioGroupItem,{value:e.value,className:`mt-0.5 shrink-0`}),(0,i.jsxs)(n.FieldContent,{className:`gap-0.5!`,children:[(0,i.jsx)(n.FieldTitle,{children:e.label}),(0,i.jsx)(n.FieldDescription,{className:`text-xs`,children:e.description})]})]})},e.value))})})]}),(0,i.jsx)(n.FieldSeparator,{})]})};exports.RadioGroupField=o;
+//# sourceMappingURL=radio-group-field-kTgtvp1p.cjs.map

package/dist/{radio-group-field-Bm2nkk1W.cjs.map → radio-group-field-kTgtvp1p.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-group-field-Bm2nkk1W.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"qOAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,EAAuC,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,gBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,UAAU,0BAA3C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,sBACjF,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,YAEA,EAAA,EAAA,KAAA,CAACF,EAAAA,MAAD,CAAO,YAAY,aAAa,UAAU,0CAA1C,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,aAAD,CAAc,UAAU,oBAAxB,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,WAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,iBAAD,CAAkB,UAAU,mBAAW,EAAO,WAA8B,CAAA,CAChE,GACT,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"radio-group-field-kTgtvp1p.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldNote","FieldContentMain","RadioGroup","RadioGroupItem","FieldTitle","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/radio-group-field.tsx"],"sourcesContent":["'use client';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n  FieldTitle,\n  FieldTooltip,\n} from '../ui/field';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\n\nimport type { RadioGroupFieldProps as Props } from '../../types';\n\nexport const RadioGroupField: React.FC<Props> = ({ label, description, orientation, options, tooltip, helperText }) => {\n  const field = useTanStackFieldContext<string | null>();\n  const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n\n  return (\n    <FieldGroup className=\"px-4\">\n      <Field orientation={orientation} className=\"flex-col gap-2\">\n        <FieldContent>\n          <FieldLabel>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContent>\n\n        <FieldContentMain>\n          <RadioGroup value={field.state.value ?? ''} className=\"w-full\" onValueChange={field.handleChange}>\n            {options.map(option => (\n              <FieldLabel\n                key={option.value}\n                className={cn(\n                  'h-fit',\n                  field.state.value === option.value && 'border-primary-weak! bg-primary-bg-subtle',\n                  isSubmitting && 'pointer-events-none bg-muted-muted opacity-60',\n                  field.state.value === option.value && isSubmitting && 'border-border-strong!'\n                )}\n              >\n                <Field orientation=\"horizontal\" className=\"items-start gap-3 rounded p-2!\">\n                  <RadioGroupItem value={option.value} className=\"mt-0.5 shrink-0\" />\n                  <FieldContent className=\"gap-0.5!\">\n                    <FieldTitle>{option.label}</FieldTitle>\n                    <FieldDescription className=\"text-xs\">{option.description}</FieldDescription>\n                  </FieldContent>\n                </Field>\n              </FieldLabel>\n            ))}\n          </RadioGroup>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"qOAuBA,MAAa,GAAoC,CAAE,QAAO,cAAa,cAAa,UAAS,UAAS,gBAAiB,CACrH,IAAM,EAAQA,EAAAA,EAAuC,EAC/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAElF,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,OAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,UAAU,iBAA3C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAA,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CAAA,CAAA,GACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,GACjD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CAC5C,CAAA,CAAA,GAEd,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,MAAO,EAAM,MAAM,OAAS,GAAI,UAAU,SAAS,cAAe,EAAM,aACjF,SAAA,EAAQ,IAAI,IACX,EAAA,EAAA,IAAA,CAACL,EAAAA,WAAD,CAEE,WAAA,EAAA,EAAA,GAAA,CACE,QACA,EAAM,MAAM,QAAU,EAAO,OAAS,4CACtC,GAAgB,gDAChB,EAAM,MAAM,QAAU,EAAO,OAAS,GAAgB,uBACxD,EAEA,UAAA,EAAA,EAAA,KAAA,CAACF,EAAAA,MAAD,CAAO,YAAY,aAAa,UAAU,iCAA1C,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,eAAD,CAAgB,MAAO,EAAO,MAAO,UAAU,iBAAmB,CAAA,GAClE,EAAA,EAAA,KAAA,CAACP,EAAAA,aAAD,CAAc,UAAU,WAAxB,SAAA,EACE,EAAA,EAAA,IAAA,CAACQ,EAAAA,WAAD,CAAA,SAAa,EAAO,KAAkB,CAAA,GACtC,EAAA,EAAA,IAAA,CAACL,EAAAA,iBAAD,CAAkB,UAAU,UAAW,SAAA,EAAO,WAA8B,CAAA,CAChE,CACT,CAAA,CAAA,GACG,EAfL,EAAO,KAeF,CACb,CACS,CAAA,CACI,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACM,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{refresh-BiyrZAXL.d.cts → refresh-CWvkHT0L.d.cts}

@@ -1,6 +1,7 @@
 //#region packages/components/ui/buttons/refresh.d.ts
 type Props = {
-  /** Callback invoked when the button is clicked. Defaults to a no-op. */onClick?: () => void;
+  /** Callback invoked when the button is clicked. Defaults to a no-op. */
+  onClick?: () => void;
 };
 /**
  * A toolbar button that triggers a refresh/reset action, displaying a rotating arrows icon alongside a "Reset" label that is hidden on small screens.
@@ -13,4 +14,4 @@ type Props = {
 declare const RefreshBtn: React.FC<React.PropsWithChildren<Props>>;
 //#endregion
 export { RefreshBtn as t };
-//# sourceMappingURL=refresh-BiyrZAXL.d.cts.map
+//# sourceMappingURL=refresh-CWvkHT0L.d.cts.map

package/dist/{refresh-BiyrZAXL.d.mts → refresh-CWvkHT0L.d.mts}

@@ -1,6 +1,7 @@
 //#region packages/components/ui/buttons/refresh.d.ts
 type Props = {
-  /** Callback invoked when the button is clicked. Defaults to a no-op. */onClick?: () => void;
+  /** Callback invoked when the button is clicked. Defaults to a no-op. */
+  onClick?: () => void;
 };
 /**
  * A toolbar button that triggers a refresh/reset action, displaying a rotating arrows icon alongside a "Reset" label that is hidden on small screens.
@@ -13,4 +14,4 @@ type Props = {
 declare const RefreshBtn: React.FC<React.PropsWithChildren<Props>>;
 //#endregion
 export { RefreshBtn as t };
-//# sourceMappingURL=refresh-BiyrZAXL.d.mts.map
+//# sourceMappingURL=refresh-CWvkHT0L.d.mts.map

package/dist/remove-button-B3qFw-M5.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"remove-button-B3qFw-M5.cjs","names":["Tooltip","TooltipTrigger","Button","Trash2Icon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/remove-button.tsx"],"sourcesContent":["'use client';\nimport { useCallback } from 'react';\n\nimport { Trash2Icon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost danger icon button with a trash icon that triggers an async removal\n * handler; displays a descriptive tooltip on hover to confirm the action intent.\n *\n * @example\n * import { UITableRemoveButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableRemoveButton\n *   title=\"Remove member from project\"\n *   onClick={async () => await deleteRow(rowId)}\n * />\n */\nexport const UITableRemoveButton: React.FC<{\n  /** Tooltip label describing what will be removed; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"danger\" size=\"icon\" onClick={handleClick}>\n          <Trash2Icon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Remove item from list table'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"iJAoBA,MAAa,GAKP,CAAE,QAAO,cAUX,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,SAAS,KAAK,OAAO,SAAA,EAAA,EAAA,YAAA,CAVrE,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKgF,YAClF,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,GAAS,6BAAiC,CAAA,CAChC,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"remove-button-B3qFw-M5.cjs","names":["Tooltip","TooltipTrigger","Button","Trash2Icon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/remove-button.tsx"],"sourcesContent":["'use client';\nimport { useCallback } from 'react';\n\nimport { Trash2Icon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost danger icon button with a trash icon that triggers an async removal\n * handler; displays a descriptive tooltip on hover to confirm the action intent.\n *\n * @example\n * import { UITableRemoveButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableRemoveButton\n *   title=\"Remove member from project\"\n *   onClick={async () => await deleteRow(rowId)}\n * />\n */\nexport const UITableRemoveButton: React.FC<{\n  /** Tooltip label describing what will be removed; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"danger\" size=\"icon\" onClick={handleClick}>\n          <Trash2Icon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Remove item from list table'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"iJAoBA,MAAa,GAKP,CAAE,QAAO,cAUX,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,SAAS,KAAK,OAAO,SAAA,EAAA,EAAA,YAAA,CAVrE,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKgF,EAClF,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,GAAS,6BAAiC,CAAA,CAChC,CAAA,CACT,CAAA,CAAA"}

package/dist/remove-button-Db5oSj4h.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"remove-button-Db5oSj4h.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/remove-button.tsx"],"sourcesContent":["'use client';\nimport { useCallback } from 'react';\n\nimport { Trash2Icon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost danger icon button with a trash icon that triggers an async removal\n * handler; displays a descriptive tooltip on hover to confirm the action intent.\n *\n * @example\n * import { UITableRemoveButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableRemoveButton\n *   title=\"Remove member from project\"\n *   onClick={async () => await deleteRow(rowId)}\n * />\n */\nexport const UITableRemoveButton: React.FC<{\n  /** Tooltip label describing what will be removed; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"danger\" size=\"icon\" onClick={handleClick}>\n          <Trash2Icon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Remove item from list table'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"4PAoBA,MAAa,GAKP,CAAE,QAAO,aAUX,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,SAAS,KAAK,OAAO,QAXnD,EAClB,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKgF,WAClF,EAAC,EAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SACE,EAAC,IAAD,CAAA,SAAI,GAAS,6BAAiC,CAAA,CAChC,CAAA,CACT,CAAA,CAAA"}
+{"version":3,"file":"remove-button-Db5oSj4h.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/remove-button.tsx"],"sourcesContent":["'use client';\nimport { useCallback } from 'react';\n\nimport { Trash2Icon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost danger icon button with a trash icon that triggers an async removal\n * handler; displays a descriptive tooltip on hover to confirm the action intent.\n *\n * @example\n * import { UITableRemoveButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableRemoveButton\n *   title=\"Remove member from project\"\n *   onClick={async () => await deleteRow(rowId)}\n * />\n */\nexport const UITableRemoveButton: React.FC<{\n  /** Tooltip label describing what will be removed; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"danger\" size=\"icon\" onClick={handleClick}>\n          <Trash2Icon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Remove item from list table'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"4PAoBA,MAAa,GAKP,CAAE,QAAO,aAUX,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,SAAS,KAAK,OAAO,QAXnD,EAClB,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKgF,EAClF,SAAA,EAAC,EAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SACE,EAAC,IAAD,CAAA,SAAI,GAAS,6BAAiC,CAAA,CAChC,CAAA,CACT,CAAA,CAAA"}

package/dist/{resizable-CAyWR1At.d.cts → resizable-D-Z8NJ7S.d.cts}

@@ -1,5 +1,4 @@
 import * as ResizablePrimitive from "react-resizable-panels";
-
 //#region node_modules/react-resizable-panels/dist/declarations/src/types.d.ts
 type Direction = "horizontal" | "vertical";
 //#endregion
@@ -36,7 +35,7 @@ declare const ResizablePanelGroup: import("react").NamedExoticComponent<Omit<imp
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
 /** An individual resizable panel within a ResizablePanelGroup. */
-declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLButtonElement | HTMLDivElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLButtonElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -61,4 +60,4 @@ declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("
 declare const ResizableHandle: import("react").NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizablePanel as n, ResizablePanelGroup as r, ResizableHandle as t };
-//# sourceMappingURL=resizable-CAyWR1At.d.cts.map
+//# sourceMappingURL=resizable-D-Z8NJ7S.d.cts.map

package/dist/{resizable-CAyWR1At.d.mts → resizable-D-Z8NJ7S.d.mts}

@@ -1,5 +1,4 @@
 import * as ResizablePrimitive from "react-resizable-panels";
-
 //#region node_modules/react-resizable-panels/dist/declarations/src/types.d.ts
 type Direction = "horizontal" | "vertical";
 //#endregion
@@ -36,7 +35,7 @@ declare const ResizablePanelGroup: import("react").NamedExoticComponent<Omit<imp
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<ResizablePrimitive.ImperativePanelGroupHandle>>;
 /** An individual resizable panel within a ResizablePanelGroup. */
-declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLButtonElement | HTMLDivElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("react").HTMLAttributes<HTMLInputElement | HTMLElement | HTMLParagraphElement | HTMLDivElement | HTMLButtonElement | HTMLFieldSetElement | HTMLLegendElement | HTMLLabelElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableRowElement | HTMLTableCellElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
   className?: string;
   collapsedSize?: number | undefined;
   collapsible?: boolean | undefined;
@@ -61,4 +60,4 @@ declare const ResizablePanel: import("react").NamedExoticComponent<Omit<import("
 declare const ResizableHandle: import("react").NamedExoticComponent<TResizableHandle>;
 //#endregion
 export { ResizablePanel as n, ResizablePanelGroup as r, ResizableHandle as t };
-//# sourceMappingURL=resizable-CAyWR1At.d.mts.map
+//# sourceMappingURL=resizable-D-Z8NJ7S.d.mts.map

package/dist/revenue-area-chart-BwzeTRzD.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"revenue-area-chart-BwzeTRzD.mjs","names":[],"sources":["../packages/components/features/charts/components/revenue-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, 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 { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, TimeSeriesPoint } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueAreaChartProps = BaseChartProps & {\n  data: TimeSeriesPoint[];\n  /** Series label. Defaults to `'Revenue'`. */\n  label?: string;\n  /** Comparison series label. Defaults to `'Previous period'`. */\n  comparisonLabel?: string;\n  /** Renders `previousValue` as a second, muted area series. */\n  showComparison?: boolean;\n  color?: string;\n  comparisonColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to compact currency. */\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `showComparison`. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A gradient area chart for revenue (or any currency metric) over time, with an optional\n * previous-period comparison series.\n *\n * @example\n * ```tsx\n * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueAreaChart\n *   data={[\n *     { date: '2026-06-01', value: 4200, previousValue: 3800 },\n *     { date: '2026-06-02', value: 5100, previousValue: 4300 },\n *   ]}\n *   showComparison\n * />\n * ```\n */\nexport const RevenueAreaChart = ({\n  data,\n  label = 'Revenue',\n  comparisonLabel = 'Previous period',\n  showComparison = false,\n  color = 'var(--chart-1)',\n  comparisonColor = 'var(--chart-8)',\n  valueFormatter = value => formatCurrency(value),\n  dateFormatter = toDateLabel,\n  showLegend = showComparison,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueAreaChartProps) => {\n  const gradientId = useId();\n\n  const config = useMemo<ChartConfig>(\n    () => ({\n      value: { label, color },\n      ...(showComparison ? { previousValue: { label: comparisonLabel, color: comparisonColor } } : {}),\n    }),\n    [label, color, showComparison, comparisonLabel, comparisonColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        <defs>\n          <linearGradient id={`${gradientId}-value`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={color} stopOpacity={0.6} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n          <linearGradient id={`${gradientId}-previous`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={comparisonColor} stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor={comparisonColor} stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\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={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">{valueFormatter(Number(value))}</span>\n                </>\n              )}\n            />\n          }\n        />\n        {showComparison && (\n          <Area\n            type=\"natural\"\n            dataKey=\"previousValue\"\n            stroke={comparisonColor}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            fill={`url(#${gradientId}-previous)`}\n            isAnimationActive={animate}\n          />\n        )}\n        <Area type=\"natural\" dataKey=\"value\" stroke={color} strokeWidth={2} fill={`url(#${gradientId}-value)`} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"ycA+CA,MAAa,GAAoB,CAC/B,OACA,QAAQ,UACR,kBAAkB,kBAClB,iBAAiB,GACjB,QAAQ,iBACR,kBAAkB,iBAClB,iBAAiB,GAAS,EAAe,CAAK,EAC9C,gBAAgB,EAChB,aAAa,EACb,WAAW,GACX,YACA,UAAU,GACV,YAC2B,CAC3B,IAAM,EAAa,EAAM,EAEnB,EAAS,OACN,CACL,MAAO,CAAE,QAAO,OAAM,EACtB,GAAI,EAAiB,CAAE,cAAe,CAAE,MAAO,EAAiB,MAAO,CAAgB,CAAE,EAAI,CAAC,CAChG,GACA,CAAC,EAAO,EAAO,EAAgB,EAAiB,CAAe,CACjE,EAEA,OACE,EAAC,EAAD,CACE,YAAU,qBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAAxE,CACE,EAAC,OAAD,CAAA,SAAA,CACE,EAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,QAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAnE,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAO,YAAa,EAAM,CAAA,EACvD,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAO,YAAa,GAAO,CAAA,CAC3C,IAChB,EAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,WAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,aAAtE,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAiB,YAAa,EAAM,CAAA,EACjE,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAiB,YAAa,GAAO,CAAA,CACrD,GACZ,CAAA,CAAA,EACL,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,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,IACvB,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAU,sBAAc,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,EACxE,EAAC,OAAD,CAAM,UAAU,kFAA0E,EAAe,OAAO,CAAK,CAAC,CAAQ,CAAA,CAC9H,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,EACA,GACC,EAAC,EAAD,CACE,KAAK,UACL,QAAQ,gBACR,OAAQ,EACR,YAAa,EACb,gBAAgB,MAChB,KAAM,QAAQ,EAAW,YACzB,kBAAmB,CACpB,CAAA,EAEH,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAO,YAAa,EAAG,KAAM,QAAQ,EAAW,SAAU,kBAAmB,CAAU,CAAA,EACnI,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA,CAEpB"}
+{"version":3,"file":"revenue-area-chart-BwzeTRzD.mjs","names":[],"sources":["../packages/components/features/charts/components/revenue-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, 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 { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, TimeSeriesPoint } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueAreaChartProps = BaseChartProps & {\n  data: TimeSeriesPoint[];\n  /** Series label. Defaults to `'Revenue'`. */\n  label?: string;\n  /** Comparison series label. Defaults to `'Previous period'`. */\n  comparisonLabel?: string;\n  /** Renders `previousValue` as a second, muted area series. */\n  showComparison?: boolean;\n  color?: string;\n  comparisonColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to compact currency. */\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `showComparison`. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A gradient area chart for revenue (or any currency metric) over time, with an optional\n * previous-period comparison series.\n *\n * @example\n * ```tsx\n * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueAreaChart\n *   data={[\n *     { date: '2026-06-01', value: 4200, previousValue: 3800 },\n *     { date: '2026-06-02', value: 5100, previousValue: 4300 },\n *   ]}\n *   showComparison\n * />\n * ```\n */\nexport const RevenueAreaChart = ({\n  data,\n  label = 'Revenue',\n  comparisonLabel = 'Previous period',\n  showComparison = false,\n  color = 'var(--chart-1)',\n  comparisonColor = 'var(--chart-8)',\n  valueFormatter = value => formatCurrency(value),\n  dateFormatter = toDateLabel,\n  showLegend = showComparison,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueAreaChartProps) => {\n  const gradientId = useId();\n\n  const config = useMemo<ChartConfig>(\n    () => ({\n      value: { label, color },\n      ...(showComparison ? { previousValue: { label: comparisonLabel, color: comparisonColor } } : {}),\n    }),\n    [label, color, showComparison, comparisonLabel, comparisonColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        <defs>\n          <linearGradient id={`${gradientId}-value`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={color} stopOpacity={0.6} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n          <linearGradient id={`${gradientId}-previous`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={comparisonColor} stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor={comparisonColor} stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\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={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">{valueFormatter(Number(value))}</span>\n                </>\n              )}\n            />\n          }\n        />\n        {showComparison && (\n          <Area\n            type=\"natural\"\n            dataKey=\"previousValue\"\n            stroke={comparisonColor}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            fill={`url(#${gradientId}-previous)`}\n            isAnimationActive={animate}\n          />\n        )}\n        <Area type=\"natural\" dataKey=\"value\" stroke={color} strokeWidth={2} fill={`url(#${gradientId}-value)`} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"ycA+CA,MAAa,GAAoB,CAC/B,OACA,QAAQ,UACR,kBAAkB,kBAClB,iBAAiB,GACjB,QAAQ,iBACR,kBAAkB,iBAClB,iBAAiB,GAAS,EAAe,CAAK,EAC9C,gBAAgB,EAChB,aAAa,EACb,WAAW,GACX,YACA,UAAU,GACV,YAC2B,CAC3B,IAAM,EAAa,EAAM,EAEnB,EAAS,OACN,CACL,MAAO,CAAE,QAAO,OAAM,EACtB,GAAI,EAAiB,CAAE,cAAe,CAAE,MAAO,EAAiB,MAAO,CAAgB,CAAE,EAAI,CAAC,CAChG,GACA,CAAC,EAAO,EAAO,EAAgB,EAAiB,CAAe,CACjE,EAEA,OACE,EAAC,EAAD,CACE,YAAU,qBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAxE,SAAA,CACE,EAAC,OAAD,CAAA,SAAA,CACE,EAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,QAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAnE,SAAA,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAO,YAAa,EAAM,CAAA,EACvD,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAO,YAAa,GAAO,CAAA,CAC3C,CAChB,CAAA,EAAA,EAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,WAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAtE,SAAA,CACE,EAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAiB,YAAa,EAAM,CAAA,EACjE,EAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAiB,YAAa,GAAO,CAAA,CACrD,CACZ,CAAA,CAAA,CAAA,CAAA,EACL,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,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,IACvB,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAU,aAAc,SAAA,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,EACxE,EAAC,OAAD,CAAM,UAAU,yEAA0E,SAAA,EAAe,OAAO,CAAK,CAAC,CAAQ,CAAA,CAC9H,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,EACA,GACC,EAAC,EAAD,CACE,KAAK,UACL,QAAQ,gBACR,OAAQ,EACR,YAAa,EACb,gBAAgB,MAChB,KAAM,QAAQ,EAAW,YACzB,kBAAmB,CACpB,CAAA,EAEH,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAO,YAAa,EAAG,KAAM,QAAQ,EAAW,SAAU,kBAAmB,CAAU,CAAA,EACnI,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA,CAEpB"}

package/dist/revenue-area-chart-w2FZCl_7.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"revenue-area-chart-w2FZCl_7.cjs","names":["formatCurrency","toDateLabel","ChartContainer","AreaChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Area","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/revenue-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, 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 { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, TimeSeriesPoint } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueAreaChartProps = BaseChartProps & {\n  data: TimeSeriesPoint[];\n  /** Series label. Defaults to `'Revenue'`. */\n  label?: string;\n  /** Comparison series label. Defaults to `'Previous period'`. */\n  comparisonLabel?: string;\n  /** Renders `previousValue` as a second, muted area series. */\n  showComparison?: boolean;\n  color?: string;\n  comparisonColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to compact currency. */\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `showComparison`. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A gradient area chart for revenue (or any currency metric) over time, with an optional\n * previous-period comparison series.\n *\n * @example\n * ```tsx\n * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueAreaChart\n *   data={[\n *     { date: '2026-06-01', value: 4200, previousValue: 3800 },\n *     { date: '2026-06-02', value: 5100, previousValue: 4300 },\n *   ]}\n *   showComparison\n * />\n * ```\n */\nexport const RevenueAreaChart = ({\n  data,\n  label = 'Revenue',\n  comparisonLabel = 'Previous period',\n  showComparison = false,\n  color = 'var(--chart-1)',\n  comparisonColor = 'var(--chart-8)',\n  valueFormatter = value => formatCurrency(value),\n  dateFormatter = toDateLabel,\n  showLegend = showComparison,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueAreaChartProps) => {\n  const gradientId = useId();\n\n  const config = useMemo<ChartConfig>(\n    () => ({\n      value: { label, color },\n      ...(showComparison ? { previousValue: { label: comparisonLabel, color: comparisonColor } } : {}),\n    }),\n    [label, color, showComparison, comparisonLabel, comparisonColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        <defs>\n          <linearGradient id={`${gradientId}-value`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={color} stopOpacity={0.6} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n          <linearGradient id={`${gradientId}-previous`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={comparisonColor} stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor={comparisonColor} stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\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={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">{valueFormatter(Number(value))}</span>\n                </>\n              )}\n            />\n          }\n        />\n        {showComparison && (\n          <Area\n            type=\"natural\"\n            dataKey=\"previousValue\"\n            stroke={comparisonColor}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            fill={`url(#${gradientId}-previous)`}\n            isAnimationActive={animate}\n          />\n        )}\n        <Area type=\"natural\" dataKey=\"value\" stroke={color} strokeWidth={2} fill={`url(#${gradientId}-value)`} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"revenue-area-chart-w2FZCl_7.cjs","names":["formatCurrency","toDateLabel","ChartContainer","AreaChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Area","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/revenue-area-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useId, 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 { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, TimeSeriesPoint } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueAreaChartProps = BaseChartProps & {\n  data: TimeSeriesPoint[];\n  /** Series label. Defaults to `'Revenue'`. */\n  label?: string;\n  /** Comparison series label. Defaults to `'Previous period'`. */\n  comparisonLabel?: string;\n  /** Renders `previousValue` as a second, muted area series. */\n  showComparison?: boolean;\n  color?: string;\n  comparisonColor?: string;\n  /** Formats tooltip and Y-axis values. Defaults to compact currency. */\n  valueFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  /** Defaults to `showComparison`. */\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A gradient area chart for revenue (or any currency metric) over time, with an optional\n * previous-period comparison series.\n *\n * @example\n * ```tsx\n * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueAreaChart\n *   data={[\n *     { date: '2026-06-01', value: 4200, previousValue: 3800 },\n *     { date: '2026-06-02', value: 5100, previousValue: 4300 },\n *   ]}\n *   showComparison\n * />\n * ```\n */\nexport const RevenueAreaChart = ({\n  data,\n  label = 'Revenue',\n  comparisonLabel = 'Previous period',\n  showComparison = false,\n  color = 'var(--chart-1)',\n  comparisonColor = 'var(--chart-8)',\n  valueFormatter = value => formatCurrency(value),\n  dateFormatter = toDateLabel,\n  showLegend = showComparison,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueAreaChartProps) => {\n  const gradientId = useId();\n\n  const config = useMemo<ChartConfig>(\n    () => ({\n      value: { label, color },\n      ...(showComparison ? { previousValue: { label: comparisonLabel, color: comparisonColor } } : {}),\n    }),\n    [label, color, showComparison, comparisonLabel, comparisonColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-area-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <AreaChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        <defs>\n          <linearGradient id={`${gradientId}-value`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={color} stopOpacity={0.6} />\n            <stop offset=\"95%\" stopColor={color} stopOpacity={0.05} />\n          </linearGradient>\n          <linearGradient id={`${gradientId}-previous`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor={comparisonColor} stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor={comparisonColor} stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\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={64} tickFormatter={valueFormatter} />\n        <ChartTooltip\n          cursor={false}\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">{valueFormatter(Number(value))}</span>\n                </>\n              )}\n            />\n          }\n        />\n        {showComparison && (\n          <Area\n            type=\"natural\"\n            dataKey=\"previousValue\"\n            stroke={comparisonColor}\n            strokeWidth={2}\n            strokeDasharray=\"4 4\"\n            fill={`url(#${gradientId}-previous)`}\n            isAnimationActive={animate}\n          />\n        )}\n        <Area type=\"natural\" dataKey=\"value\" stroke={color} strokeWidth={2} fill={`url(#${gradientId}-value)`} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </AreaChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA+CA,MAAa,GAAoB,CAC/B,OACA,QAAQ,UACR,kBAAkB,kBAClB,iBAAiB,GACjB,QAAQ,iBACR,kBAAkB,iBAClB,iBAAiB,GAASA,EAAAA,eAAe,CAAK,EAC9C,gBAAgBC,EAAAA,YAChB,aAAa,EACb,WAAW,GACX,YACA,UAAU,GACV,YAC2B,CAC3B,IAAM,GAAA,EAAA,EAAA,MAAA,CAAmB,EAEnB,GAAA,EAAA,EAAA,QAAA,MACG,CACL,MAAO,CAAE,QAAO,OAAM,EACtB,GAAI,EAAiB,CAAE,cAAe,CAAE,MAAO,EAAiB,MAAO,CAAgB,CAAE,EAAI,CAAC,CAChG,GACA,CAAC,EAAO,EAAO,EAAgB,EAAiB,CAAe,CACjE,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,qBACF,SACR,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,UAAD,CAAiB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAAxE,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,OAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,QAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAnE,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAO,YAAa,EAAM,CAAA,GACvD,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAO,YAAa,GAAO,CAAA,CAC3C,CAChB,CAAA,GAAA,EAAA,EAAA,KAAA,CAAC,iBAAD,CAAgB,GAAI,GAAG,EAAW,WAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAtE,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,KAAK,UAAW,EAAiB,YAAa,EAAM,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,OAAO,MAAM,UAAW,EAAiB,YAAa,GAAO,CAAA,CACrD,CACZ,CAAA,CAAA,CAAA,CAAA,EACL,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,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,GACR,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,EACA,WAAY,EAAO,EAAM,KACvB,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,GAC1F,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,aAAc,SAAA,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,GACxE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,yEAA0E,SAAA,EAAe,OAAO,CAAK,CAAC,CAAQ,CAAA,CAC9H,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CACE,KAAK,UACL,QAAQ,gBACR,OAAQ,EACR,YAAa,EACb,gBAAgB,MAChB,KAAM,QAAQ,EAAW,YACzB,kBAAmB,CACpB,CAAA,GAEH,EAAA,EAAA,IAAA,CAACA,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,QAAQ,OAAQ,EAAO,YAAa,EAAG,KAAM,QAAQ,EAAW,SAAU,kBAAmB,CAAU,CAAA,EACnI,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACrD,GACG,CAAA,CAEpB"}

package/dist/revenue-orders-composed-chart-BttOWYGt.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"revenue-orders-composed-chart-BttOWYGt.cjs","names":["formatCurrency","toDateLabel","ChartContainer","ComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","Line","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/revenue-orders-composed-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, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueOrdersPoint = {\n  date: string | Date;\n  revenue: number;\n  orders: number;\n};\n\nexport type RevenueOrdersComposedChartProps = BaseChartProps & {\n  data: RevenueOrdersPoint[];\n  revenueLabel?: string;\n  ordersLabel?: string;\n  revenueColor?: string;\n  ordersColor?: string;\n  /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */\n  revenueFormatter?: (value: number) => string;\n  /** Formats the right (orders) axis and tooltip values. */\n  ordersFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A dual-axis chart combining revenue bars (left axis, currency) with an orders line\n * (right axis, count) to correlate the two metrics per period.\n *\n * @example\n * ```tsx\n * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueOrdersComposedChart\n *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}\n * />\n * ```\n */\nexport const RevenueOrdersComposedChart = ({\n  data,\n  revenueLabel = 'Revenue',\n  ordersLabel = 'Orders',\n  revenueColor = 'var(--chart-1)',\n  ordersColor = 'var(--chart-4)',\n  revenueFormatter = value => formatCurrency(value),\n  ordersFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueOrdersComposedChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({\n      revenue: { label: revenueLabel, color: revenueColor },\n      orders: { label: ordersLabel, color: ordersColor },\n    }),\n    [revenueLabel, revenueColor, ordersLabel, ordersColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-orders-composed-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart 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 yAxisId=\"revenue\" tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={revenueFormatter} />\n        <YAxis\n          yAxisId=\"orders\"\n          orientation=\"right\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={48}\n          allowDecimals={false}\n          tickFormatter={ordersFormatter}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">\n                    {name === 'revenue' ? revenueFormatter(Number(value)) : ordersFormatter(Number(value))}\n                  </span>\n                </>\n              )}\n            />\n          }\n        />\n        <Bar dataKey=\"revenue\" yAxisId=\"revenue\" fill={revenueColor} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"orders\" yAxisId=\"orders\" stroke={ordersColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA8CA,MAAa,GAA8B,CACzC,OACA,eAAe,UACf,cAAc,SACd,eAAe,iBACf,cAAc,iBACd,mBAAmB,GAASA,EAAAA,eAAe,CAAK,EAChD,kBAAkB,GAAS,EAAM,eAAe,OAAO,EACvD,gBAAgBC,EAAAA,YAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YACqC,CACrC,IAAM,GAAA,EAAA,EAAA,QAAA,MACG,CACL,QAAS,CAAE,MAAO,EAAc,MAAO,CAAa,EACpD,OAAQ,CAAE,MAAO,EAAa,MAAO,CAAY,CACnD,GACA,CAAC,EAAc,EAAc,EAAa,CAAW,CACvD,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,gCACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,cAAD,CAAqB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA5E,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,QAAQ,UAAU,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAmB,CAAA,GACvH,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,CACE,QAAQ,SACR,YAAY,QACZ,SAAU,GACV,SAAU,GACV,WAAY,EACZ,MAAO,GACP,cAAe,GACf,cAAe,CAChB,CAAA,GACD,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,EACA,WAAY,EAAO,EAAM,KACvB,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,GAC1F,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,sBAAc,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,GACxE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kFACb,IAAS,UAAY,EAAiB,OAAO,CAAK,CAAC,EAAI,EAAgB,OAAO,CAAK,CAAC,CACjF,CAAA,CACN,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,QAAQ,UAAU,QAAQ,UAAU,KAAM,EAAc,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,GAChH,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,SAAS,QAAQ,SAAS,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,EACpI,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACjD,GACD,CAAA,CAEpB"}
+{"version":3,"file":"revenue-orders-composed-chart-BttOWYGt.cjs","names":["formatCurrency","toDateLabel","ChartContainer","ComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","Line","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/revenue-orders-composed-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, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueOrdersPoint = {\n  date: string | Date;\n  revenue: number;\n  orders: number;\n};\n\nexport type RevenueOrdersComposedChartProps = BaseChartProps & {\n  data: RevenueOrdersPoint[];\n  revenueLabel?: string;\n  ordersLabel?: string;\n  revenueColor?: string;\n  ordersColor?: string;\n  /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */\n  revenueFormatter?: (value: number) => string;\n  /** Formats the right (orders) axis and tooltip values. */\n  ordersFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A dual-axis chart combining revenue bars (left axis, currency) with an orders line\n * (right axis, count) to correlate the two metrics per period.\n *\n * @example\n * ```tsx\n * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueOrdersComposedChart\n *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}\n * />\n * ```\n */\nexport const RevenueOrdersComposedChart = ({\n  data,\n  revenueLabel = 'Revenue',\n  ordersLabel = 'Orders',\n  revenueColor = 'var(--chart-1)',\n  ordersColor = 'var(--chart-4)',\n  revenueFormatter = value => formatCurrency(value),\n  ordersFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueOrdersComposedChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({\n      revenue: { label: revenueLabel, color: revenueColor },\n      orders: { label: ordersLabel, color: ordersColor },\n    }),\n    [revenueLabel, revenueColor, ordersLabel, ordersColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-orders-composed-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart 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 yAxisId=\"revenue\" tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={revenueFormatter} />\n        <YAxis\n          yAxisId=\"orders\"\n          orientation=\"right\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={48}\n          allowDecimals={false}\n          tickFormatter={ordersFormatter}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">\n                    {name === 'revenue' ? revenueFormatter(Number(value)) : ordersFormatter(Number(value))}\n                  </span>\n                </>\n              )}\n            />\n          }\n        />\n        <Bar dataKey=\"revenue\" yAxisId=\"revenue\" fill={revenueColor} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"orders\" yAxisId=\"orders\" stroke={ordersColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA8CA,MAAa,GAA8B,CACzC,OACA,eAAe,UACf,cAAc,SACd,eAAe,iBACf,cAAc,iBACd,mBAAmB,GAASA,EAAAA,eAAe,CAAK,EAChD,kBAAkB,GAAS,EAAM,eAAe,OAAO,EACvD,gBAAgBC,EAAAA,YAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YACqC,CACrC,IAAM,GAAA,EAAA,EAAA,QAAA,MACG,CACL,QAAS,CAAE,MAAO,EAAc,MAAO,CAAa,EACpD,OAAQ,CAAE,MAAO,EAAa,MAAO,CAAY,CACnD,GACA,CAAC,EAAc,EAAc,EAAa,CAAW,CACvD,EAEA,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,gCACF,SACR,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,cAAD,CAAqB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA5E,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,QAAQ,UAAU,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAmB,CAAA,GACvH,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,CACE,QAAQ,SACR,YAAY,QACZ,SAAU,GACV,SAAU,GACV,WAAY,EACZ,MAAO,GACP,cAAe,GACf,cAAe,CAChB,CAAA,GACD,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,EACA,WAAY,EAAO,EAAM,KACvB,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,GAC1F,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,aAAc,SAAA,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,GACxE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,yEACb,SAAA,IAAS,UAAY,EAAiB,OAAO,CAAK,CAAC,EAAI,EAAgB,OAAO,CAAK,CAAC,CACjF,CAAA,CACN,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,QAAQ,UAAU,QAAQ,UAAU,KAAM,EAAc,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,GAChH,EAAA,EAAA,IAAA,CAACC,EAAAA,KAAD,CAAM,KAAK,UAAU,QAAQ,SAAS,QAAQ,SAAS,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,EACpI,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAqB,CAAA,CAAI,CAAA,CACjD,GACD,CAAA,CAEpB"}

package/dist/revenue-orders-composed-chart-DwkbWZSX.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"revenue-orders-composed-chart-DwkbWZSX.mjs","names":[],"sources":["../packages/components/features/charts/components/revenue-orders-composed-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, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueOrdersPoint = {\n  date: string | Date;\n  revenue: number;\n  orders: number;\n};\n\nexport type RevenueOrdersComposedChartProps = BaseChartProps & {\n  data: RevenueOrdersPoint[];\n  revenueLabel?: string;\n  ordersLabel?: string;\n  revenueColor?: string;\n  ordersColor?: string;\n  /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */\n  revenueFormatter?: (value: number) => string;\n  /** Formats the right (orders) axis and tooltip values. */\n  ordersFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A dual-axis chart combining revenue bars (left axis, currency) with an orders line\n * (right axis, count) to correlate the two metrics per period.\n *\n * @example\n * ```tsx\n * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueOrdersComposedChart\n *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}\n * />\n * ```\n */\nexport const RevenueOrdersComposedChart = ({\n  data,\n  revenueLabel = 'Revenue',\n  ordersLabel = 'Orders',\n  revenueColor = 'var(--chart-1)',\n  ordersColor = 'var(--chart-4)',\n  revenueFormatter = value => formatCurrency(value),\n  ordersFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueOrdersComposedChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({\n      revenue: { label: revenueLabel, color: revenueColor },\n      orders: { label: ordersLabel, color: ordersColor },\n    }),\n    [revenueLabel, revenueColor, ordersLabel, ordersColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-orders-composed-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart 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 yAxisId=\"revenue\" tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={revenueFormatter} />\n        <YAxis\n          yAxisId=\"orders\"\n          orientation=\"right\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={48}\n          allowDecimals={false}\n          tickFormatter={ordersFormatter}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">\n                    {name === 'revenue' ? revenueFormatter(Number(value)) : ordersFormatter(Number(value))}\n                  </span>\n                </>\n              )}\n            />\n          }\n        />\n        <Bar dataKey=\"revenue\" yAxisId=\"revenue\" fill={revenueColor} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"orders\" yAxisId=\"orders\" stroke={ordersColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"2cA8CA,MAAa,GAA8B,CACzC,OACA,eAAe,UACf,cAAc,SACd,eAAe,iBACf,cAAc,iBACd,mBAAmB,GAAS,EAAe,CAAK,EAChD,kBAAkB,GAAS,EAAM,eAAe,OAAO,EACvD,gBAAgB,EAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YACqC,CACrC,IAAM,EAAS,OACN,CACL,QAAS,CAAE,MAAO,EAAc,MAAO,CAAa,EACpD,OAAQ,CAAE,MAAO,EAAa,MAAO,CAAY,CACnD,GACA,CAAC,EAAc,EAAc,EAAa,CAAW,CACvD,EAEA,OACE,EAAC,EAAD,CACE,YAAU,gCACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAqB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA5E,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,QAAQ,UAAU,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAmB,CAAA,EACvH,EAAC,EAAD,CACE,QAAQ,SACR,YAAY,QACZ,SAAU,GACV,SAAU,GACV,WAAY,EACZ,MAAO,GACP,cAAe,GACf,cAAe,CAChB,CAAA,EACD,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,IACvB,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAU,sBAAc,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,EACxE,EAAC,OAAD,CAAM,UAAU,kFACb,IAAS,UAAY,EAAiB,OAAO,CAAK,CAAC,EAAI,EAAgB,OAAO,CAAK,CAAC,CACjF,CAAA,CACN,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAK,QAAQ,UAAU,QAAQ,UAAU,KAAM,EAAc,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAChH,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,SAAS,QAAQ,SAAS,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,EACpI,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACjD,GACD,CAAA,CAEpB"}
+{"version":3,"file":"revenue-orders-composed-chart-DwkbWZSX.mjs","names":[],"sources":["../packages/components/features/charts/components/revenue-orders-composed-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, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatCurrency, toDateLabel } from '../utils';\n\nexport type RevenueOrdersPoint = {\n  date: string | Date;\n  revenue: number;\n  orders: number;\n};\n\nexport type RevenueOrdersComposedChartProps = BaseChartProps & {\n  data: RevenueOrdersPoint[];\n  revenueLabel?: string;\n  ordersLabel?: string;\n  revenueColor?: string;\n  ordersColor?: string;\n  /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */\n  revenueFormatter?: (value: number) => string;\n  /** Formats the right (orders) axis and tooltip values. */\n  ordersFormatter?: (value: number) => string;\n  dateFormatter?: (date: string | Date) => string;\n  showLegend?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A dual-axis chart combining revenue bars (left axis, currency) with an orders line\n * (right axis, count) to correlate the two metrics per period.\n *\n * @example\n * ```tsx\n * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';\n *\n * <RevenueOrdersComposedChart\n *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}\n * />\n * ```\n */\nexport const RevenueOrdersComposedChart = ({\n  data,\n  revenueLabel = 'Revenue',\n  ordersLabel = 'Orders',\n  revenueColor = 'var(--chart-1)',\n  ordersColor = 'var(--chart-4)',\n  revenueFormatter = value => formatCurrency(value),\n  ordersFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showLegend = true,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: RevenueOrdersComposedChartProps) => {\n  const config = useMemo<ChartConfig>(\n    () => ({\n      revenue: { label: revenueLabel, color: revenueColor },\n      orders: { label: ordersLabel, color: ordersColor },\n    }),\n    [revenueLabel, revenueColor, ordersLabel, ordersColor]\n  );\n\n  return (\n    <ChartContainer\n      data-slot=\"revenue-orders-composed-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart 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 yAxisId=\"revenue\" tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={revenueFormatter} />\n        <YAxis\n          yAxisId=\"orders\"\n          orientation=\"right\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={48}\n          allowDecimals={false}\n          tickFormatter={ordersFormatter}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_, payload) => {\n                const date = payload?.[0]?.payload?.date;\n                return date ? dateFormatter(date) : null;\n              }}\n              formatter={(value, name, item) => (\n                <>\n                  <div className=\"size-2.5 shrink-0 rounded-[2px]\" style={{ backgroundColor: item.color }} />\n                  <span className=\"text-muted\">{config[String(name)]?.label || name}</span>\n                  <span className=\"text-text-positive-strong font-number ml-auto font-medium tabular-nums\">\n                    {name === 'revenue' ? revenueFormatter(Number(value)) : ordersFormatter(Number(value))}\n                  </span>\n                </>\n              )}\n            />\n          }\n        />\n        <Bar dataKey=\"revenue\" yAxisId=\"revenue\" fill={revenueColor} radius={[4, 4, 0, 0]} isAnimationActive={animate} />\n        <Line type=\"natural\" dataKey=\"orders\" yAxisId=\"orders\" stroke={ordersColor} strokeWidth={2} dot={false} isAnimationActive={animate} />\n        {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"2cA8CA,MAAa,GAA8B,CACzC,OACA,eAAe,UACf,cAAc,SACd,eAAe,iBACf,cAAc,iBACd,mBAAmB,GAAS,EAAe,CAAK,EAChD,kBAAkB,GAAS,EAAM,eAAe,OAAO,EACvD,gBAAgB,EAChB,aAAa,GACb,WAAW,GACX,YACA,UAAU,GACV,YACqC,CACrC,IAAM,EAAS,OACN,CACL,QAAS,CAAE,MAAO,EAAc,MAAO,CAAa,EACpD,OAAQ,CAAE,MAAO,EAAa,MAAO,CAAY,CACnD,GACA,CAAC,EAAc,EAAc,EAAa,CAAW,CACvD,EAEA,OACE,EAAC,EAAD,CACE,YAAU,gCACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAqB,OAAM,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA5E,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,QAAQ,UAAU,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAmB,CAAA,EACvH,EAAC,EAAD,CACE,QAAQ,SACR,YAAY,QACZ,SAAU,GACV,SAAU,GACV,WAAY,EACZ,MAAO,GACP,cAAe,GACf,cAAe,CAChB,CAAA,EACD,EAAC,EAAD,CACE,QACE,EAAC,EAAD,CACE,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,WAAY,EAAO,EAAM,IACvB,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kCAAkC,MAAO,CAAE,gBAAiB,EAAK,KAAM,CAAI,CAAA,EAC1F,EAAC,OAAD,CAAM,UAAU,aAAc,SAAA,EAAO,OAAO,CAAI,EAAE,EAAE,OAAS,CAAW,CAAA,EACxE,EAAC,OAAD,CAAM,UAAU,yEACb,SAAA,IAAS,UAAY,EAAiB,OAAO,CAAK,CAAC,EAAI,EAAgB,OAAO,CAAK,CAAC,CACjF,CAAA,CACN,CAAA,CAAA,CAEL,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAK,QAAQ,UAAU,QAAQ,UAAU,KAAM,EAAc,OAAQ,CAAC,EAAG,EAAG,EAAG,CAAC,EAAG,kBAAmB,CAAU,CAAA,EAChH,EAAC,EAAD,CAAM,KAAK,UAAU,QAAQ,SAAS,QAAQ,SAAS,OAAQ,EAAa,YAAa,EAAG,IAAK,GAAO,kBAAmB,CAAU,CAAA,EACpI,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAqB,CAAA,CAAI,CAAA,CACjD,GACD,CAAA,CAEpB"}

package/dist/{role-badge-IdZW0tsN.d.cts → role-badge-CojpT6hX.d.cts}

@@ -1,8 +1,8 @@
 import { r as ERole } from "./types-cKvPPVBe.cjs";
-
 //#region packages/components/data-display/role-badge.d.ts
 type RoleBadgeProps = {
-  /** The user role enum value that determines the badge label and colour. */status: ERole;
+  /** The user role enum value that determines the badge label and colour. */
+  status: ERole;
 };
 /**
  * Renders a colour-coded badge for a user role (e.g. Admin, Staff, User).
@@ -18,4 +18,4 @@ type RoleBadgeProps = {
 declare const RoleBadge: React.FC<RoleBadgeProps>;
 //#endregion
 export { RoleBadge as t };
-//# sourceMappingURL=role-badge-IdZW0tsN.d.cts.map
+//# sourceMappingURL=role-badge-CojpT6hX.d.cts.map

package/dist/{role-badge-Bl4Rimpk.d.mts → role-badge-NTpnTz8M.d.mts}

@@ -1,8 +1,8 @@
 import { r as ERole } from "./types-cKvPPVBe.mjs";
-
 //#region packages/components/data-display/role-badge.d.ts
 type RoleBadgeProps = {
-  /** The user role enum value that determines the badge label and colour. */status: ERole;
+  /** The user role enum value that determines the badge label and colour. */
+  status: ERole;
 };
 /**
  * Renders a colour-coded badge for a user role (e.g. Admin, Staff, User).
@@ -18,4 +18,4 @@ type RoleBadgeProps = {
 declare const RoleBadge: React.FC<RoleBadgeProps>;
 //#endregion
 export { RoleBadge as t };
-//# sourceMappingURL=role-badge-Bl4Rimpk.d.mts.map
+//# sourceMappingURL=role-badge-NTpnTz8M.d.mts.map

package/dist/sales-target-radial-chart-BFLxBT2m.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sales-target-radial-chart-BFLxBT2m.mjs","names":[],"sources":["../packages/components/features/charts/components/sales-target-radial-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nimport { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatPercent } from '../utils';\n\nexport type SalesTargetRadialChartProps = BaseChartProps & {\n  /** Current progress value, e.g. revenue to date. */\n  value: number;\n  /** The goal the value is measured against. */\n  target: number;\n  /** Text under the center figure. Defaults to `'Target'`. */\n  label?: string;\n  /** Formats the center figure. Defaults to percent-of-target. */\n  valueFormatter?: (value: number, target: number) => string;\n  color?: string;\n};\n\n/**\n * A radial gauge showing progress toward a sales target with the completion figure in the center.\n *\n * @example\n * ```tsx\n * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SalesTargetRadialChart value={65_000} target={100_000} label=\"Monthly target\" />\n * ```\n */\nexport const SalesTargetRadialChart = ({\n  value,\n  target,\n  label = 'Target',\n  valueFormatter = (current, goal) => formatPercent(goal === 0 ? 0 : current / goal),\n  color = 'var(--chart-1)',\n  className,\n  animate = true,\n  height,\n}: SalesTargetRadialChartProps) => {\n  const chartData = useMemo(() => [{ name: 'progress', value: Math.min(Math.max(value, 0), target), fill: color }], [value, target, color]);\n\n  const config = useMemo<ChartConfig>(() => ({ progress: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sales-target-radial-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius=\"75%\" outerRadius=\"100%\">\n        <PolarAngleAxis type=\"number\" domain={[0, target]} angleAxisId={0} tick={false} />\n        <RadialBar dataKey=\"value\" angleAxisId={0} background cornerRadius={10} isAnimationActive={animate} />\n        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n          <Label\n            content={({ viewBox }) => {\n              if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n              return (\n                <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                  <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-3xl font-bold\">\n                    {valueFormatter(value, target)}\n                  </tspan>\n                  <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-muted text-xs\">\n                    {label}\n                  </tspan>\n                </text>\n              );\n            }}\n          />\n        </PolarRadiusAxis>\n      </RadialBarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"+VAkCA,MAAa,GAA0B,CACrC,QACA,SACA,QAAQ,SACR,kBAAkB,EAAS,IAAS,EAAc,IAAS,EAAI,EAAI,EAAU,CAAI,EACjF,QAAQ,iBACR,YACA,UAAU,GACV,YACiC,CACjC,IAAM,EAAY,MAAc,CAAC,CAAE,KAAM,WAAY,MAAO,KAAK,IAAI,KAAK,IAAI,EAAO,CAAC,EAAG,CAAM,EAAG,KAAM,CAAM,CAAC,EAAG,CAAC,EAAO,EAAQ,CAAK,CAAC,EAIxI,OACE,EAAC,EAAD,CACE,YAAU,4BACV,OALW,OAA4B,CAAE,SAAU,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKxE,EACb,UAAW,EAAG,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAgB,KAAM,EAAW,WAAY,GAAI,SAAU,KAAM,YAAY,MAAM,YAAY,gBAA/F,CACE,EAAC,EAAD,CAAgB,KAAK,SAAS,OAAQ,CAAC,EAAG,CAAM,EAAG,YAAa,EAAG,KAAM,EAAQ,CAAA,EACjF,EAAC,EAAD,CAAW,QAAQ,QAAQ,YAAa,EAAG,WAAA,GAAW,aAAc,GAAI,kBAAmB,CAAU,CAAA,EACrG,EAAC,EAAD,CAAiB,KAAM,GAAO,SAAU,GAAO,SAAU,YACvD,EAAC,EAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,KAE/D,EAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,kBAAzE,CACE,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,oEAC5C,EAAe,EAAO,CAAM,CACxB,CAAA,EACP,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,8BACxD,CACI,CAAA,CACH,GAGX,CAAA,CACc,CAAA,CACH,GACF,CAAA,CAEpB"}
+{"version":3,"file":"sales-target-radial-chart-BFLxBT2m.mjs","names":[],"sources":["../packages/components/features/charts/components/sales-target-radial-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nimport { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatPercent } from '../utils';\n\nexport type SalesTargetRadialChartProps = BaseChartProps & {\n  /** Current progress value, e.g. revenue to date. */\n  value: number;\n  /** The goal the value is measured against. */\n  target: number;\n  /** Text under the center figure. Defaults to `'Target'`. */\n  label?: string;\n  /** Formats the center figure. Defaults to percent-of-target. */\n  valueFormatter?: (value: number, target: number) => string;\n  color?: string;\n};\n\n/**\n * A radial gauge showing progress toward a sales target with the completion figure in the center.\n *\n * @example\n * ```tsx\n * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SalesTargetRadialChart value={65_000} target={100_000} label=\"Monthly target\" />\n * ```\n */\nexport const SalesTargetRadialChart = ({\n  value,\n  target,\n  label = 'Target',\n  valueFormatter = (current, goal) => formatPercent(goal === 0 ? 0 : current / goal),\n  color = 'var(--chart-1)',\n  className,\n  animate = true,\n  height,\n}: SalesTargetRadialChartProps) => {\n  const chartData = useMemo(() => [{ name: 'progress', value: Math.min(Math.max(value, 0), target), fill: color }], [value, target, color]);\n\n  const config = useMemo<ChartConfig>(() => ({ progress: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sales-target-radial-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius=\"75%\" outerRadius=\"100%\">\n        <PolarAngleAxis type=\"number\" domain={[0, target]} angleAxisId={0} tick={false} />\n        <RadialBar dataKey=\"value\" angleAxisId={0} background cornerRadius={10} isAnimationActive={animate} />\n        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n          <Label\n            content={({ viewBox }) => {\n              if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n              return (\n                <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                  <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-3xl font-bold\">\n                    {valueFormatter(value, target)}\n                  </tspan>\n                  <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-muted text-xs\">\n                    {label}\n                  </tspan>\n                </text>\n              );\n            }}\n          />\n        </PolarRadiusAxis>\n      </RadialBarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"+VAkCA,MAAa,GAA0B,CACrC,QACA,SACA,QAAQ,SACR,kBAAkB,EAAS,IAAS,EAAc,IAAS,EAAI,EAAI,EAAU,CAAI,EACjF,QAAQ,iBACR,YACA,UAAU,GACV,YACiC,CACjC,IAAM,EAAY,MAAc,CAAC,CAAE,KAAM,WAAY,MAAO,KAAK,IAAI,KAAK,IAAI,EAAO,CAAC,EAAG,CAAM,EAAG,KAAM,CAAM,CAAC,EAAG,CAAC,EAAO,EAAQ,CAAK,CAAC,EAIxI,OACE,EAAC,EAAD,CACE,YAAU,4BACV,OALW,OAA4B,CAAE,SAAU,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKxE,EACb,UAAW,EAAG,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAgB,KAAM,EAAW,WAAY,GAAI,SAAU,KAAM,YAAY,MAAM,YAAY,OAA/F,SAAA,CACE,EAAC,EAAD,CAAgB,KAAK,SAAS,OAAQ,CAAC,EAAG,CAAM,EAAG,YAAa,EAAG,KAAM,EAAQ,CAAA,EACjF,EAAC,EAAD,CAAW,QAAQ,QAAQ,YAAa,EAAG,WAAA,GAAW,aAAc,GAAI,kBAAmB,CAAU,CAAA,EACrG,EAAC,EAAD,CAAiB,KAAM,GAAO,SAAU,GAAO,SAAU,GACvD,SAAA,EAAC,EAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,KAE/D,EAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,SAAzE,SAAA,CACE,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,2DAC5C,SAAA,EAAe,EAAO,CAAM,CACxB,CAAA,EACP,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,qBACxD,SAAA,CACI,CAAA,CACH,GAGX,CAAA,CACc,CAAA,CACH,GACF,CAAA,CAEpB"}

package/dist/sales-target-radial-chart-BoxSk7hW.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sales-target-radial-chart-BoxSk7hW.cjs","names":["formatPercent","ChartContainer","RadialBarChart","PolarAngleAxis","RadialBar","PolarRadiusAxis","Label"],"sources":["../packages/components/features/charts/components/sales-target-radial-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nimport { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatPercent } from '../utils';\n\nexport type SalesTargetRadialChartProps = BaseChartProps & {\n  /** Current progress value, e.g. revenue to date. */\n  value: number;\n  /** The goal the value is measured against. */\n  target: number;\n  /** Text under the center figure. Defaults to `'Target'`. */\n  label?: string;\n  /** Formats the center figure. Defaults to percent-of-target. */\n  valueFormatter?: (value: number, target: number) => string;\n  color?: string;\n};\n\n/**\n * A radial gauge showing progress toward a sales target with the completion figure in the center.\n *\n * @example\n * ```tsx\n * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SalesTargetRadialChart value={65_000} target={100_000} label=\"Monthly target\" />\n * ```\n */\nexport const SalesTargetRadialChart = ({\n  value,\n  target,\n  label = 'Target',\n  valueFormatter = (current, goal) => formatPercent(goal === 0 ? 0 : current / goal),\n  color = 'var(--chart-1)',\n  className,\n  animate = true,\n  height,\n}: SalesTargetRadialChartProps) => {\n  const chartData = useMemo(() => [{ name: 'progress', value: Math.min(Math.max(value, 0), target), fill: color }], [value, target, color]);\n\n  const config = useMemo<ChartConfig>(() => ({ progress: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sales-target-radial-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius=\"75%\" outerRadius=\"100%\">\n        <PolarAngleAxis type=\"number\" domain={[0, target]} angleAxisId={0} tick={false} />\n        <RadialBar dataKey=\"value\" angleAxisId={0} background cornerRadius={10} isAnimationActive={animate} />\n        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n          <Label\n            content={({ viewBox }) => {\n              if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n              return (\n                <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                  <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-3xl font-bold\">\n                    {valueFormatter(value, target)}\n                  </tspan>\n                  <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-muted text-xs\">\n                    {label}\n                  </tspan>\n                </text>\n              );\n            }}\n          />\n        </PolarRadiusAxis>\n      </RadialBarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAkCA,MAAa,GAA0B,CACrC,QACA,SACA,QAAQ,SACR,kBAAkB,EAAS,IAASA,EAAAA,cAAc,IAAS,EAAI,EAAI,EAAU,CAAI,EACjF,QAAQ,iBACR,YACA,UAAU,GACV,YACiC,CACjC,IAAM,GAAA,EAAA,EAAA,QAAA,KAA0B,CAAC,CAAE,KAAM,WAAY,MAAO,KAAK,IAAI,KAAK,IAAI,EAAO,CAAC,EAAG,CAAM,EAAG,KAAM,CAAM,CAAC,EAAG,CAAC,EAAO,EAAQ,CAAK,CAAC,EAIxI,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,4BACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,SAAU,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKxE,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,EAAW,WAAY,GAAI,SAAU,KAAM,YAAY,MAAM,YAAY,gBAA/F,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAK,SAAS,OAAQ,CAAC,EAAG,CAAM,EAAG,YAAa,EAAG,KAAM,EAAQ,CAAA,GACjF,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,QAAQ,YAAa,EAAG,WAAA,GAAW,aAAc,GAAI,kBAAmB,CAAU,CAAA,GACrG,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,KAAM,GAAO,SAAU,GAAO,SAAU,aACvD,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,MAE/D,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,kBAAzE,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,oEAC5C,EAAe,EAAO,CAAM,CACxB,CAAA,GACP,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,8BACxD,CACI,CAAA,CACH,GAGX,CAAA,CACc,CAAA,CACH,GACF,CAAA,CAEpB"}
+{"version":3,"file":"sales-target-radial-chart-BoxSk7hW.cjs","names":["formatPercent","ChartContainer","RadialBarChart","PolarAngleAxis","RadialBar","PolarRadiusAxis","Label"],"sources":["../packages/components/features/charts/components/sales-target-radial-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer } from '@/components/ui/chart';\n\nimport { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { formatPercent } from '../utils';\n\nexport type SalesTargetRadialChartProps = BaseChartProps & {\n  /** Current progress value, e.g. revenue to date. */\n  value: number;\n  /** The goal the value is measured against. */\n  target: number;\n  /** Text under the center figure. Defaults to `'Target'`. */\n  label?: string;\n  /** Formats the center figure. Defaults to percent-of-target. */\n  valueFormatter?: (value: number, target: number) => string;\n  color?: string;\n};\n\n/**\n * A radial gauge showing progress toward a sales target with the completion figure in the center.\n *\n * @example\n * ```tsx\n * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SalesTargetRadialChart value={65_000} target={100_000} label=\"Monthly target\" />\n * ```\n */\nexport const SalesTargetRadialChart = ({\n  value,\n  target,\n  label = 'Target',\n  valueFormatter = (current, goal) => formatPercent(goal === 0 ? 0 : current / goal),\n  color = 'var(--chart-1)',\n  className,\n  animate = true,\n  height,\n}: SalesTargetRadialChartProps) => {\n  const chartData = useMemo(() => [{ name: 'progress', value: Math.min(Math.max(value, 0), target), fill: color }], [value, target, color]);\n\n  const config = useMemo<ChartConfig>(() => ({ progress: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sales-target-radial-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <RadialBarChart data={chartData} startAngle={90} endAngle={-270} innerRadius=\"75%\" outerRadius=\"100%\">\n        <PolarAngleAxis type=\"number\" domain={[0, target]} angleAxisId={0} tick={false} />\n        <RadialBar dataKey=\"value\" angleAxisId={0} background cornerRadius={10} isAnimationActive={animate} />\n        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n          <Label\n            content={({ viewBox }) => {\n              if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n              return (\n                <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                  <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-3xl font-bold\">\n                    {valueFormatter(value, target)}\n                  </tspan>\n                  <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className=\"fill-muted text-xs\">\n                    {label}\n                  </tspan>\n                </text>\n              );\n            }}\n          />\n        </PolarRadiusAxis>\n      </RadialBarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAkCA,MAAa,GAA0B,CACrC,QACA,SACA,QAAQ,SACR,kBAAkB,EAAS,IAASA,EAAAA,cAAc,IAAS,EAAI,EAAI,EAAU,CAAI,EACjF,QAAQ,iBACR,YACA,UAAU,GACV,YACiC,CACjC,IAAM,GAAA,EAAA,EAAA,QAAA,KAA0B,CAAC,CAAE,KAAM,WAAY,MAAO,KAAK,IAAI,KAAK,IAAI,EAAO,CAAC,EAAG,CAAM,EAAG,KAAM,CAAM,CAAC,EAAG,CAAC,EAAO,EAAQ,CAAK,CAAC,EAIxI,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,4BACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,SAAU,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKxE,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,EAAW,WAAY,GAAI,SAAU,KAAM,YAAY,MAAM,YAAY,OAA/F,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAK,SAAS,OAAQ,CAAC,EAAG,CAAM,EAAG,YAAa,EAAG,KAAM,EAAQ,CAAA,GACjF,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,QAAQ,YAAa,EAAG,WAAA,GAAW,aAAc,GAAI,kBAAmB,CAAU,CAAA,GACrG,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,KAAM,GAAO,SAAU,GAAO,SAAU,GACvD,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,MAE/D,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,SAAzE,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,2DAC5C,SAAA,EAAe,EAAO,CAAM,CACxB,CAAA,GACP,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,qBACxD,SAAA,CACI,CAAA,CACH,GAGX,CAAA,CACc,CAAA,CACH,GACF,CAAA,CAEpB"}

package/dist/sankey-flow-chart-CDUqIRMZ.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-flow-chart-CDUqIRMZ.cjs","names":["getChartColor","ChartContainer","Sankey","Rectangle"],"sources":["../packages/components/features/charts/components/sankey-flow-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ChartContainer } from '@/components/ui/chart';\n\nimport type { SankeyLinkProps, SankeyNodeProps } from 'recharts';\nimport { Rectangle, Sankey } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type SankeyFlowNode = {\n  name: string;\n  color?: string;\n};\n\nexport type SankeyFlowLink = {\n  /** Node name, matching an entry in `nodes`. */\n  source: string;\n  /** Node name, matching an entry in `nodes`. */\n  target: string;\n  value: number;\n};\n\nexport type SankeyFlowChartProps = BaseChartProps & {\n  nodes: Array<SankeyFlowNode | string>;\n  links: SankeyFlowLink[];\n  valueFormatter?: (value: number) => string;\n  nodeWidth?: number;\n  nodePadding?: number;\n  /** Minimum horizontal space reserved for node labels outside the plot area; grows to fit the longest root/leaf label. Defaults to `170`. */\n  labelWidth?: number;\n};\n\n/**\n * A Sankey flow diagram — revenue/cost breakdowns, funnels with branching paths, budget\n * allocation — where band width is proportional to the flow value between named nodes.\n *\n * @example\n * ```tsx\n * import { SankeyFlowChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SankeyFlowChart\n *   height={500}\n *   nodes={['iPhone', 'Mac', 'Net Sales', 'Cost of Sales', 'Gross Profit']}\n *   links={[\n *     { source: 'iPhone', target: 'Net Sales', value: 205489 },\n *     { source: 'Mac', target: 'Net Sales', value: 40177 },\n *     { source: 'Net Sales', target: 'Cost of Sales', value: 223546 },\n *     { source: 'Net Sales', target: 'Gross Profit', value: 170782 },\n *   ]}\n * />\n * ```\n */\nconst estimateLabelWidth = (label: string): number => label.length * 5.6 + 14;\n\nexport const SankeyFlowChart = ({\n  nodes,\n  links,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  nodeWidth = 14,\n  nodePadding = 24,\n  labelWidth = 170,\n  className,\n  animate = true,\n  height,\n}: SankeyFlowChartProps) => {\n  const { data, colorByName, effectiveLabelWidth, rootNames, leafNames } = useMemo(() => {\n    const nodeList = nodes.map(node => (typeof node === 'string' ? { name: node } : node));\n    const nameToIndex = new Map(nodeList.map((node, index) => [node.name, index]));\n    const colors = new Map(nodeList.map((node, index) => [node.name, node.color || getChartColor(index)]));\n\n    const sankeyLinks = links\n      .map(link => ({ source: nameToIndex.get(link.source), target: nameToIndex.get(link.target), value: link.value }))\n      .filter((link): link is { source: number; target: number; value: number } => link.source !== undefined && link.target !== undefined);\n\n    // Computed from our own link list rather than trusting recharts' `payload.depth`/`sourceLinks`\n    // at render time — the latter don't reliably flag terminal (leaf) nodes as such.\n    const hasIncoming = new Set(sankeyLinks.map(link => link.target));\n    const hasOutgoing = new Set(sankeyLinks.map(link => link.source));\n    const roots = new Set(nodeList.filter((_, index) => !hasIncoming.has(index)).map(node => node.name));\n    const leaves = new Set(nodeList.filter((_, index) => !hasOutgoing.has(index)).map(node => node.name));\n\n    // Only root/leaf nodes get side labels using this margin; widen it to fit the longest one\n    // so long names don't clip past the SVG edge.\n    let maxWidth = labelWidth;\n    nodeList.forEach((node, index) => {\n      if (hasIncoming.has(index) && hasOutgoing.has(index)) return;\n      const relatedValue = sankeyLinks.filter(link => link.source === index || link.target === index).reduce((sum, link) => sum + link.value, 0);\n      maxWidth = Math.max(maxWidth, estimateLabelWidth(`${node.name}: ${valueFormatter(relatedValue)}`) + 16);\n    });\n\n    return { data: { nodes: nodeList, links: sankeyLinks }, colorByName: colors, effectiveLabelWidth: maxWidth, rootNames: roots, leafNames: leaves };\n  }, [nodes, links, labelWidth, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sankey-flow-chart\"\n      config={{}}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Sankey\n        data={data}\n        nodeWidth={nodeWidth}\n        nodePadding={nodePadding}\n        linkCurvature={0.45}\n        margin={{ top: 28, right: effectiveLabelWidth, bottom: 8, left: effectiveLabelWidth }}\n        node={(props: SankeyNodeProps) => {\n          const { x, y, width, height: nodeHeight, payload } = props;\n          const color = colorByName.get(payload.name) ?? 'var(--chart-1)';\n          const isRoot = rootNames.has(payload.name);\n          const isLeaf = leafNames.has(payload.name);\n          const label = `${payload.name}: ${valueFormatter(payload.value)}`;\n          const pillWidth = estimateLabelWidth(label);\n          const pillHeight = 18;\n\n          let textX: number;\n          let textY: number;\n          let textAnchor: 'start' | 'end' | 'middle';\n          let pillX: number;\n          let pillY: number;\n\n          if (isRoot || isLeaf) {\n            textAnchor = isRoot ? 'end' : 'start';\n            textY = y + nodeHeight / 2;\n            pillY = textY - pillHeight / 2;\n            pillX = isRoot ? x - 8 - pillWidth : x + width + 8;\n            textX = isRoot ? pillX + pillWidth - 6 : pillX + 6;\n          } else {\n            // Intermediate nodes label above the bar (not beside it) so chained, closely-spaced\n            // depth columns never collide sideways. Consecutive depths are additionally staggered\n            // to two alternating heights (zigzag) — when almost all of a node's value passes\n            // straight through to the next depth (e.g. Operating Income -> Profit before tax),\n            // both nodes land at nearly the same y, so same-height labels would still overlap.\n            textAnchor = 'middle';\n            textY = payload.depth % 2 === 0 ? y - 10 : y - 30;\n            pillY = textY - pillHeight + 4;\n            pillX = x + width / 2 - pillWidth / 2;\n            textX = x + width / 2;\n          }\n\n          return (\n            <g>\n              <Rectangle\n                className=\"recharts-sankey-node\"\n                x={x}\n                y={y}\n                width={width}\n                height={nodeHeight}\n                fill={color}\n                stroke=\"var(--background)\"\n                strokeWidth={1.5}\n                isAnimationActive={animate}\n              />\n              <rect x={pillX} y={pillY} width={pillWidth} height={pillHeight} rx={4} fill=\"var(--background)\" fillOpacity={0.92} />\n              <text x={textX} y={textY} textAnchor={textAnchor} dominantBaseline=\"middle\" className=\"fill-text-positive-strong text-[11px] font-medium\">\n                {label}\n              </text>\n            </g>\n          );\n        }}\n        link={(props: SankeyLinkProps) => {\n          const { sourceX, sourceY, sourceControlX, targetX, targetY, targetControlX, linkWidth, payload } = props;\n          const sourceColor = colorByName.get(payload.source.name) ?? 'var(--chart-1)';\n          const targetColor = colorByName.get(payload.target.name) ?? sourceColor;\n          // Blending toward the target's color (rather than a flat source-only fill) keeps sibling\n          // flows out of the same source visually distinct from each other wherever they run close\n          // together or cross — a flat single hue made e.g. Gross Profit's three outgoing flows\n          // (-> R&D, -> SG&A, -> Operating Income) indistinguishable from one another.\n          const color = `color-mix(in oklch, ${sourceColor} 60%, ${targetColor} 40%)`;\n          return (\n            <path\n              className=\"recharts-sankey-link\"\n              d={`M${sourceX},${sourceY} C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={linkWidth}\n              strokeOpacity={0.4}\n            />\n          );\n        }}\n      />\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAwDA,MAAM,EAAsB,GAA0B,EAAM,OAAS,IAAM,GAE9D,GAAmB,CAC9B,QACA,QACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,YAAY,GACZ,cAAc,GACd,aAAa,IACb,YACA,UAAU,GACV,YAC0B,CAC1B,GAAM,CAAE,OAAM,cAAa,sBAAqB,YAAW,cAAA,EAAA,EAAA,QAAA,KAA4B,CACrF,IAAM,EAAW,EAAM,IAAI,GAAS,OAAO,GAAS,SAAW,CAAE,KAAM,CAAK,EAAI,CAAK,EAC/E,EAAc,IAAI,IAAI,EAAS,KAAK,EAAM,IAAU,CAAC,EAAK,KAAM,CAAK,CAAC,CAAC,EACvE,EAAS,IAAI,IAAI,EAAS,KAAK,EAAM,IAAU,CAAC,EAAK,KAAM,EAAK,OAASA,EAAAA,cAAc,CAAK,CAAC,CAAC,CAAC,EAE/F,EAAc,EACjB,IAAI,IAAS,CAAE,OAAQ,EAAY,IAAI,EAAK,MAAM,EAAG,OAAQ,EAAY,IAAI,EAAK,MAAM,EAAG,MAAO,EAAK,KAAM,EAAE,CAAC,CAChH,OAAQ,GAAoE,EAAK,SAAW,IAAA,IAAa,EAAK,SAAW,IAAA,EAAS,EAI/H,EAAc,IAAI,IAAI,EAAY,IAAI,GAAQ,EAAK,MAAM,CAAC,EAC1D,EAAc,IAAI,IAAI,EAAY,IAAI,GAAQ,EAAK,MAAM,CAAC,EAC1D,EAAQ,IAAI,IAAI,EAAS,QAAQ,EAAG,IAAU,CAAC,EAAY,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,GAAQ,EAAK,IAAI,CAAC,EAC7F,EAAS,IAAI,IAAI,EAAS,QAAQ,EAAG,IAAU,CAAC,EAAY,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,GAAQ,EAAK,IAAI,CAAC,EAIhG,EAAW,EAOf,OANA,EAAS,SAAS,EAAM,IAAU,CAChC,GAAI,EAAY,IAAI,CAAK,GAAK,EAAY,IAAI,CAAK,EAAG,OACtD,IAAM,EAAe,EAAY,OAAO,GAAQ,EAAK,SAAW,GAAS,EAAK,SAAW,CAAK,CAAC,CAAC,QAAQ,EAAK,IAAS,EAAM,EAAK,MAAO,CAAC,EACzI,EAAW,KAAK,IAAI,EAAU,EAAmB,GAAG,EAAK,KAAK,IAAI,EAAe,CAAY,GAAG,EAAI,EAAE,CACxG,CAAC,EAEM,CAAE,KAAM,CAAE,MAAO,EAAU,MAAO,CAAY,EAAG,YAAa,EAAQ,oBAAqB,EAAU,UAAW,EAAO,UAAW,CAAO,CAClJ,EAAG,CAAC,EAAO,EAAO,EAAY,CAAc,CAAC,EAE7C,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,oBACV,OAAQ,CAAC,EACT,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACQ,OACK,YACE,cACb,cAAe,IACf,OAAQ,CAAE,IAAK,GAAI,MAAO,EAAqB,OAAQ,EAAG,KAAM,CAAoB,EACpF,KAAO,GAA2B,CAChC,GAAM,CAAE,IAAG,IAAG,QAAO,OAAQ,EAAY,WAAY,EAC/C,EAAQ,EAAY,IAAI,EAAQ,IAAI,GAAK,iBACzC,EAAS,EAAU,IAAI,EAAQ,IAAI,EACnC,EAAS,EAAU,IAAI,EAAQ,IAAI,EACnC,EAAQ,GAAG,EAAQ,KAAK,IAAI,EAAe,EAAQ,KAAK,IACxD,EAAY,EAAmB,CAAK,EAGtC,EACA,EACA,EACA,EACA,EAqBJ,OAnBI,GAAU,GACZ,EAAa,EAAS,MAAQ,QAC9B,EAAQ,EAAI,EAAa,EACzB,EAAQ,EAAQ,GAAa,EAC7B,EAAQ,EAAS,EAAI,EAAI,EAAY,EAAI,EAAQ,EACjD,EAAQ,EAAS,EAAQ,EAAY,EAAI,EAAQ,IAOjD,EAAa,SACb,EAAQ,EAAQ,MAAQ,GAAM,EAAI,EAAI,GAAK,EAAI,GAC/C,EAAQ,EAAQ,GAAa,EAC7B,EAAQ,EAAI,EAAQ,EAAI,EAAY,EACpC,EAAQ,EAAI,EAAQ,IAIpB,EAAA,EAAA,KAAA,CAAC,IAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CACE,UAAU,uBACP,IACA,IACI,QACP,OAAQ,EACR,KAAM,EACN,OAAO,oBACP,YAAa,IACb,kBAAmB,CACpB,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAG,EAAO,EAAG,EAAO,MAAO,EAAW,OAAQ,GAAY,GAAI,EAAG,KAAK,oBAAoB,YAAa,GAAO,CAAA,GACpH,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAG,EAAO,EAAG,EAAmB,aAAY,iBAAiB,SAAS,UAAU,6DACnF,CACG,CAAA,CACL,CAAA,CAAA,CAEP,EACA,KAAO,GAA2B,CAChC,GAAM,CAAE,UAAS,UAAS,iBAAgB,UAAS,UAAS,iBAAgB,YAAW,WAAY,EAC7F,EAAc,EAAY,IAAI,EAAQ,OAAO,IAAI,GAAK,iBAMtD,EAAQ,uBAAuB,EAAY,QAL7B,EAAY,IAAI,EAAQ,OAAO,IAAI,GAAK,EAKS,OACrE,OACE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,UAAU,uBACV,EAAG,IAAI,EAAQ,GAAG,EAAQ,IAAI,EAAe,GAAG,EAAQ,GAAG,EAAe,GAAG,EAAQ,GAAG,EAAQ,GAAG,IACnG,KAAK,OACL,OAAQ,EACR,YAAa,EACb,cAAe,EAChB,CAAA,CAEL,CACD,CAAA,CACa,CAAA,CAEpB"}
+{"version":3,"file":"sankey-flow-chart-CDUqIRMZ.cjs","names":["getChartColor","ChartContainer","Sankey","Rectangle"],"sources":["../packages/components/features/charts/components/sankey-flow-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ChartContainer } from '@/components/ui/chart';\n\nimport type { SankeyLinkProps, SankeyNodeProps } from 'recharts';\nimport { Rectangle, Sankey } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type SankeyFlowNode = {\n  name: string;\n  color?: string;\n};\n\nexport type SankeyFlowLink = {\n  /** Node name, matching an entry in `nodes`. */\n  source: string;\n  /** Node name, matching an entry in `nodes`. */\n  target: string;\n  value: number;\n};\n\nexport type SankeyFlowChartProps = BaseChartProps & {\n  nodes: Array<SankeyFlowNode | string>;\n  links: SankeyFlowLink[];\n  valueFormatter?: (value: number) => string;\n  nodeWidth?: number;\n  nodePadding?: number;\n  /** Minimum horizontal space reserved for node labels outside the plot area; grows to fit the longest root/leaf label. Defaults to `170`. */\n  labelWidth?: number;\n};\n\n/**\n * A Sankey flow diagram — revenue/cost breakdowns, funnels with branching paths, budget\n * allocation — where band width is proportional to the flow value between named nodes.\n *\n * @example\n * ```tsx\n * import { SankeyFlowChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SankeyFlowChart\n *   height={500}\n *   nodes={['iPhone', 'Mac', 'Net Sales', 'Cost of Sales', 'Gross Profit']}\n *   links={[\n *     { source: 'iPhone', target: 'Net Sales', value: 205489 },\n *     { source: 'Mac', target: 'Net Sales', value: 40177 },\n *     { source: 'Net Sales', target: 'Cost of Sales', value: 223546 },\n *     { source: 'Net Sales', target: 'Gross Profit', value: 170782 },\n *   ]}\n * />\n * ```\n */\nconst estimateLabelWidth = (label: string): number => label.length * 5.6 + 14;\n\nexport const SankeyFlowChart = ({\n  nodes,\n  links,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  nodeWidth = 14,\n  nodePadding = 24,\n  labelWidth = 170,\n  className,\n  animate = true,\n  height,\n}: SankeyFlowChartProps) => {\n  const { data, colorByName, effectiveLabelWidth, rootNames, leafNames } = useMemo(() => {\n    const nodeList = nodes.map(node => (typeof node === 'string' ? { name: node } : node));\n    const nameToIndex = new Map(nodeList.map((node, index) => [node.name, index]));\n    const colors = new Map(nodeList.map((node, index) => [node.name, node.color || getChartColor(index)]));\n\n    const sankeyLinks = links\n      .map(link => ({ source: nameToIndex.get(link.source), target: nameToIndex.get(link.target), value: link.value }))\n      .filter((link): link is { source: number; target: number; value: number } => link.source !== undefined && link.target !== undefined);\n\n    // Computed from our own link list rather than trusting recharts' `payload.depth`/`sourceLinks`\n    // at render time — the latter don't reliably flag terminal (leaf) nodes as such.\n    const hasIncoming = new Set(sankeyLinks.map(link => link.target));\n    const hasOutgoing = new Set(sankeyLinks.map(link => link.source));\n    const roots = new Set(nodeList.filter((_, index) => !hasIncoming.has(index)).map(node => node.name));\n    const leaves = new Set(nodeList.filter((_, index) => !hasOutgoing.has(index)).map(node => node.name));\n\n    // Only root/leaf nodes get side labels using this margin; widen it to fit the longest one\n    // so long names don't clip past the SVG edge.\n    let maxWidth = labelWidth;\n    nodeList.forEach((node, index) => {\n      if (hasIncoming.has(index) && hasOutgoing.has(index)) return;\n      const relatedValue = sankeyLinks.filter(link => link.source === index || link.target === index).reduce((sum, link) => sum + link.value, 0);\n      maxWidth = Math.max(maxWidth, estimateLabelWidth(`${node.name}: ${valueFormatter(relatedValue)}`) + 16);\n    });\n\n    return { data: { nodes: nodeList, links: sankeyLinks }, colorByName: colors, effectiveLabelWidth: maxWidth, rootNames: roots, leafNames: leaves };\n  }, [nodes, links, labelWidth, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sankey-flow-chart\"\n      config={{}}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Sankey\n        data={data}\n        nodeWidth={nodeWidth}\n        nodePadding={nodePadding}\n        linkCurvature={0.45}\n        margin={{ top: 28, right: effectiveLabelWidth, bottom: 8, left: effectiveLabelWidth }}\n        node={(props: SankeyNodeProps) => {\n          const { x, y, width, height: nodeHeight, payload } = props;\n          const color = colorByName.get(payload.name) ?? 'var(--chart-1)';\n          const isRoot = rootNames.has(payload.name);\n          const isLeaf = leafNames.has(payload.name);\n          const label = `${payload.name}: ${valueFormatter(payload.value)}`;\n          const pillWidth = estimateLabelWidth(label);\n          const pillHeight = 18;\n\n          let textX: number;\n          let textY: number;\n          let textAnchor: 'start' | 'end' | 'middle';\n          let pillX: number;\n          let pillY: number;\n\n          if (isRoot || isLeaf) {\n            textAnchor = isRoot ? 'end' : 'start';\n            textY = y + nodeHeight / 2;\n            pillY = textY - pillHeight / 2;\n            pillX = isRoot ? x - 8 - pillWidth : x + width + 8;\n            textX = isRoot ? pillX + pillWidth - 6 : pillX + 6;\n          } else {\n            // Intermediate nodes label above the bar (not beside it) so chained, closely-spaced\n            // depth columns never collide sideways. Consecutive depths are additionally staggered\n            // to two alternating heights (zigzag) — when almost all of a node's value passes\n            // straight through to the next depth (e.g. Operating Income -> Profit before tax),\n            // both nodes land at nearly the same y, so same-height labels would still overlap.\n            textAnchor = 'middle';\n            textY = payload.depth % 2 === 0 ? y - 10 : y - 30;\n            pillY = textY - pillHeight + 4;\n            pillX = x + width / 2 - pillWidth / 2;\n            textX = x + width / 2;\n          }\n\n          return (\n            <g>\n              <Rectangle\n                className=\"recharts-sankey-node\"\n                x={x}\n                y={y}\n                width={width}\n                height={nodeHeight}\n                fill={color}\n                stroke=\"var(--background)\"\n                strokeWidth={1.5}\n                isAnimationActive={animate}\n              />\n              <rect x={pillX} y={pillY} width={pillWidth} height={pillHeight} rx={4} fill=\"var(--background)\" fillOpacity={0.92} />\n              <text x={textX} y={textY} textAnchor={textAnchor} dominantBaseline=\"middle\" className=\"fill-text-positive-strong text-[11px] font-medium\">\n                {label}\n              </text>\n            </g>\n          );\n        }}\n        link={(props: SankeyLinkProps) => {\n          const { sourceX, sourceY, sourceControlX, targetX, targetY, targetControlX, linkWidth, payload } = props;\n          const sourceColor = colorByName.get(payload.source.name) ?? 'var(--chart-1)';\n          const targetColor = colorByName.get(payload.target.name) ?? sourceColor;\n          // Blending toward the target's color (rather than a flat source-only fill) keeps sibling\n          // flows out of the same source visually distinct from each other wherever they run close\n          // together or cross — a flat single hue made e.g. Gross Profit's three outgoing flows\n          // (-> R&D, -> SG&A, -> Operating Income) indistinguishable from one another.\n          const color = `color-mix(in oklch, ${sourceColor} 60%, ${targetColor} 40%)`;\n          return (\n            <path\n              className=\"recharts-sankey-link\"\n              d={`M${sourceX},${sourceY} C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={linkWidth}\n              strokeOpacity={0.4}\n            />\n          );\n        }}\n      />\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAwDA,MAAM,EAAsB,GAA0B,EAAM,OAAS,IAAM,GAE9D,GAAmB,CAC9B,QACA,QACA,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,YAAY,GACZ,cAAc,GACd,aAAa,IACb,YACA,UAAU,GACV,YAC0B,CAC1B,GAAM,CAAE,OAAM,cAAa,sBAAqB,YAAW,cAAA,EAAA,EAAA,QAAA,KAA4B,CACrF,IAAM,EAAW,EAAM,IAAI,GAAS,OAAO,GAAS,SAAW,CAAE,KAAM,CAAK,EAAI,CAAK,EAC/E,EAAc,IAAI,IAAI,EAAS,KAAK,EAAM,IAAU,CAAC,EAAK,KAAM,CAAK,CAAC,CAAC,EACvE,EAAS,IAAI,IAAI,EAAS,KAAK,EAAM,IAAU,CAAC,EAAK,KAAM,EAAK,OAASA,EAAAA,cAAc,CAAK,CAAC,CAAC,CAAC,EAE/F,EAAc,EACjB,IAAI,IAAS,CAAE,OAAQ,EAAY,IAAI,EAAK,MAAM,EAAG,OAAQ,EAAY,IAAI,EAAK,MAAM,EAAG,MAAO,EAAK,KAAM,EAAE,CAAC,CAChH,OAAQ,GAAoE,EAAK,SAAW,IAAA,IAAa,EAAK,SAAW,IAAA,EAAS,EAI/H,EAAc,IAAI,IAAI,EAAY,IAAI,GAAQ,EAAK,MAAM,CAAC,EAC1D,EAAc,IAAI,IAAI,EAAY,IAAI,GAAQ,EAAK,MAAM,CAAC,EAC1D,EAAQ,IAAI,IAAI,EAAS,QAAQ,EAAG,IAAU,CAAC,EAAY,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,GAAQ,EAAK,IAAI,CAAC,EAC7F,EAAS,IAAI,IAAI,EAAS,QAAQ,EAAG,IAAU,CAAC,EAAY,IAAI,CAAK,CAAC,CAAC,CAAC,IAAI,GAAQ,EAAK,IAAI,CAAC,EAIhG,EAAW,EAOf,OANA,EAAS,SAAS,EAAM,IAAU,CAChC,GAAI,EAAY,IAAI,CAAK,GAAK,EAAY,IAAI,CAAK,EAAG,OACtD,IAAM,EAAe,EAAY,OAAO,GAAQ,EAAK,SAAW,GAAS,EAAK,SAAW,CAAK,CAAC,CAAC,QAAQ,EAAK,IAAS,EAAM,EAAK,MAAO,CAAC,EACzI,EAAW,KAAK,IAAI,EAAU,EAAmB,GAAG,EAAK,KAAK,IAAI,EAAe,CAAY,GAAG,EAAI,EAAE,CACxG,CAAC,EAEM,CAAE,KAAM,CAAE,MAAO,EAAU,MAAO,CAAY,EAAG,YAAa,EAAQ,oBAAqB,EAAU,UAAW,EAAO,UAAW,CAAO,CAClJ,EAAG,CAAC,EAAO,EAAO,EAAY,CAAc,CAAC,EAE7C,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,oBACV,OAAQ,CAAC,EACT,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CACQ,OACK,YACE,cACb,cAAe,IACf,OAAQ,CAAE,IAAK,GAAI,MAAO,EAAqB,OAAQ,EAAG,KAAM,CAAoB,EACpF,KAAO,GAA2B,CAChC,GAAM,CAAE,IAAG,IAAG,QAAO,OAAQ,EAAY,WAAY,EAC/C,EAAQ,EAAY,IAAI,EAAQ,IAAI,GAAK,iBACzC,EAAS,EAAU,IAAI,EAAQ,IAAI,EACnC,EAAS,EAAU,IAAI,EAAQ,IAAI,EACnC,EAAQ,GAAG,EAAQ,KAAK,IAAI,EAAe,EAAQ,KAAK,IACxD,EAAY,EAAmB,CAAK,EAGtC,EACA,EACA,EACA,EACA,EAqBJ,OAnBI,GAAU,GACZ,EAAa,EAAS,MAAQ,QAC9B,EAAQ,EAAI,EAAa,EACzB,EAAQ,EAAQ,GAAa,EAC7B,EAAQ,EAAS,EAAI,EAAI,EAAY,EAAI,EAAQ,EACjD,EAAQ,EAAS,EAAQ,EAAY,EAAI,EAAQ,IAOjD,EAAa,SACb,EAAQ,EAAQ,MAAQ,GAAM,EAAI,EAAI,GAAK,EAAI,GAC/C,EAAQ,EAAQ,GAAa,EAC7B,EAAQ,EAAI,EAAQ,EAAI,EAAY,EACpC,EAAQ,EAAI,EAAQ,IAIpB,EAAA,EAAA,KAAA,CAAC,IAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CACE,UAAU,uBACP,IACA,IACI,QACP,OAAQ,EACR,KAAM,EACN,OAAO,oBACP,YAAa,IACb,kBAAmB,CACpB,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAG,EAAO,EAAG,EAAO,MAAO,EAAW,OAAQ,GAAY,GAAI,EAAG,KAAK,oBAAoB,YAAa,GAAO,CAAA,GACpH,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAG,EAAO,EAAG,EAAmB,aAAY,iBAAiB,SAAS,UAAU,oDACnF,SAAA,CACG,CAAA,CACL,CAAA,CAAA,CAEP,EACA,KAAO,GAA2B,CAChC,GAAM,CAAE,UAAS,UAAS,iBAAgB,UAAS,UAAS,iBAAgB,YAAW,WAAY,EAC7F,EAAc,EAAY,IAAI,EAAQ,OAAO,IAAI,GAAK,iBAMtD,EAAQ,uBAAuB,EAAY,QAL7B,EAAY,IAAI,EAAQ,OAAO,IAAI,GAAK,EAKS,OACrE,OACE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,UAAU,uBACV,EAAG,IAAI,EAAQ,GAAG,EAAQ,IAAI,EAAe,GAAG,EAAQ,GAAG,EAAe,GAAG,EAAQ,GAAG,EAAQ,GAAG,IACnG,KAAK,OACL,OAAQ,EACR,YAAa,EACb,cAAe,EAChB,CAAA,CAEL,CACD,CAAA,CACa,CAAA,CAEpB"}

package/dist/sankey-flow-chart-bQ3Dffet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-flow-chart-bQ3Dffet.mjs","names":[],"sources":["../packages/components/features/charts/components/sankey-flow-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ChartContainer } from '@/components/ui/chart';\n\nimport type { SankeyLinkProps, SankeyNodeProps } from 'recharts';\nimport { Rectangle, Sankey } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type SankeyFlowNode = {\n  name: string;\n  color?: string;\n};\n\nexport type SankeyFlowLink = {\n  /** Node name, matching an entry in `nodes`. */\n  source: string;\n  /** Node name, matching an entry in `nodes`. */\n  target: string;\n  value: number;\n};\n\nexport type SankeyFlowChartProps = BaseChartProps & {\n  nodes: Array<SankeyFlowNode | string>;\n  links: SankeyFlowLink[];\n  valueFormatter?: (value: number) => string;\n  nodeWidth?: number;\n  nodePadding?: number;\n  /** Minimum horizontal space reserved for node labels outside the plot area; grows to fit the longest root/leaf label. Defaults to `170`. */\n  labelWidth?: number;\n};\n\n/**\n * A Sankey flow diagram — revenue/cost breakdowns, funnels with branching paths, budget\n * allocation — where band width is proportional to the flow value between named nodes.\n *\n * @example\n * ```tsx\n * import { SankeyFlowChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SankeyFlowChart\n *   height={500}\n *   nodes={['iPhone', 'Mac', 'Net Sales', 'Cost of Sales', 'Gross Profit']}\n *   links={[\n *     { source: 'iPhone', target: 'Net Sales', value: 205489 },\n *     { source: 'Mac', target: 'Net Sales', value: 40177 },\n *     { source: 'Net Sales', target: 'Cost of Sales', value: 223546 },\n *     { source: 'Net Sales', target: 'Gross Profit', value: 170782 },\n *   ]}\n * />\n * ```\n */\nconst estimateLabelWidth = (label: string): number => label.length * 5.6 + 14;\n\nexport const SankeyFlowChart = ({\n  nodes,\n  links,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  nodeWidth = 14,\n  nodePadding = 24,\n  labelWidth = 170,\n  className,\n  animate = true,\n  height,\n}: SankeyFlowChartProps) => {\n  const { data, colorByName, effectiveLabelWidth, rootNames, leafNames } = useMemo(() => {\n    const nodeList = nodes.map(node => (typeof node === 'string' ? { name: node } : node));\n    const nameToIndex = new Map(nodeList.map((node, index) => [node.name, index]));\n    const colors = new Map(nodeList.map((node, index) => [node.name, node.color || getChartColor(index)]));\n\n    const sankeyLinks = links\n      .map(link => ({ source: nameToIndex.get(link.source), target: nameToIndex.get(link.target), value: link.value }))\n      .filter((link): link is { source: number; target: number; value: number } => link.source !== undefined && link.target !== undefined);\n\n    // Computed from our own link list rather than trusting recharts' `payload.depth`/`sourceLinks`\n    // at render time — the latter don't reliably flag terminal (leaf) nodes as such.\n    const hasIncoming = new Set(sankeyLinks.map(link => link.target));\n    const hasOutgoing = new Set(sankeyLinks.map(link => link.source));\n    const roots = new Set(nodeList.filter((_, index) => !hasIncoming.has(index)).map(node => node.name));\n    const leaves = new Set(nodeList.filter((_, index) => !hasOutgoing.has(index)).map(node => node.name));\n\n    // Only root/leaf nodes get side labels using this margin; widen it to fit the longest one\n    // so long names don't clip past the SVG edge.\n    let maxWidth = labelWidth;\n    nodeList.forEach((node, index) => {\n      if (hasIncoming.has(index) && hasOutgoing.has(index)) return;\n      const relatedValue = sankeyLinks.filter(link => link.source === index || link.target === index).reduce((sum, link) => sum + link.value, 0);\n      maxWidth = Math.max(maxWidth, estimateLabelWidth(`${node.name}: ${valueFormatter(relatedValue)}`) + 16);\n    });\n\n    return { data: { nodes: nodeList, links: sankeyLinks }, colorByName: colors, effectiveLabelWidth: maxWidth, rootNames: roots, leafNames: leaves };\n  }, [nodes, links, labelWidth, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sankey-flow-chart\"\n      config={{}}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Sankey\n        data={data}\n        nodeWidth={nodeWidth}\n        nodePadding={nodePadding}\n        linkCurvature={0.45}\n        margin={{ top: 28, right: effectiveLabelWidth, bottom: 8, left: effectiveLabelWidth }}\n        node={(props: SankeyNodeProps) => {\n          const { x, y, width, height: nodeHeight, payload } = props;\n          const color = colorByName.get(payload.name) ?? 'var(--chart-1)';\n          const isRoot = rootNames.has(payload.name);\n          const isLeaf = leafNames.has(payload.name);\n          const label = `${payload.name}: ${valueFormatter(payload.value)}`;\n          const pillWidth = estimateLabelWidth(label);\n          const pillHeight = 18;\n\n          let textX: number;\n          let textY: number;\n          let textAnchor: 'start' | 'end' | 'middle';\n          let pillX: number;\n          let pillY: number;\n\n          if (isRoot || isLeaf) {\n            textAnchor = isRoot ? 'end' : 'start';\n            textY = y + nodeHeight / 2;\n            pillY = textY - pillHeight / 2;\n            pillX = isRoot ? x - 8 - pillWidth : x + width + 8;\n            textX = isRoot ? pillX + pillWidth - 6 : pillX + 6;\n          } else {\n            // Intermediate nodes label above the bar (not beside it) so chained, closely-spaced\n            // depth columns never collide sideways. Consecutive depths are additionally staggered\n            // to two alternating heights (zigzag) — when almost all of a node's value passes\n            // straight through to the next depth (e.g. Operating Income -> Profit before tax),\n            // both nodes land at nearly the same y, so same-height labels would still overlap.\n            textAnchor = 'middle';\n            textY = payload.depth % 2 === 0 ? y - 10 : y - 30;\n            pillY = textY - pillHeight + 4;\n            pillX = x + width / 2 - pillWidth / 2;\n            textX = x + width / 2;\n          }\n\n          return (\n            <g>\n              <Rectangle\n                className=\"recharts-sankey-node\"\n                x={x}\n                y={y}\n                width={width}\n                height={nodeHeight}\n                fill={color}\n                stroke=\"var(--background)\"\n                strokeWidth={1.5}\n                isAnimationActive={animate}\n              />\n              <rect x={pillX} y={pillY} width={pillWidth} height={pillHeight} rx={4} fill=\"var(--background)\" fillOpacity={0.92} />\n              <text x={textX} y={textY} textAnchor={textAnchor} dominantBaseline=\"middle\" className=\"fill-text-positive-strong text-[11px] font-medium\">\n                {label}\n              </text>\n            </g>\n          );\n        }}\n        link={(props: SankeyLinkProps) => {\n          const { sourceX, sourceY, sourceControlX, targetX, targetY, targetControlX, linkWidth, payload } = props;\n          const sourceColor = colorByName.get(payload.source.name) ?? 'var(--chart-1)';\n          const targetColor = colorByName.get(payload.target.name) ?? sourceColor;\n          // Blending toward the target's color (rather than a flat source-only fill) keeps sibling\n          // flows out of the same source visually distinct from each other wherever they run close\n          // together or cross — a flat single hue made e.g. Gross Profit's three outgoing flows\n          // (-> R&D, -> SG&A, -> Operating Income) indistinguishable from one another.\n          const color = `color-mix(in oklch, ${sourceColor} 60%, ${targetColor} 40%)`;\n          return (\n            <path\n              className=\"recharts-sankey-link\"\n              d={`M${sourceX},${sourceY} C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={linkWidth}\n              strokeOpacity={0.4}\n            />\n          );\n        }}\n      />\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"sankey-flow-chart-bQ3Dffet.mjs","names":[],"sources":["../packages/components/features/charts/components/sankey-flow-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { ChartContainer } from '@/components/ui/chart';\n\nimport type { SankeyLinkProps, SankeyNodeProps } from 'recharts';\nimport { Rectangle, Sankey } from 'recharts';\nimport type { BaseChartProps } from '../types';\nimport { getChartColor } from '../utils';\n\nexport type SankeyFlowNode = {\n  name: string;\n  color?: string;\n};\n\nexport type SankeyFlowLink = {\n  /** Node name, matching an entry in `nodes`. */\n  source: string;\n  /** Node name, matching an entry in `nodes`. */\n  target: string;\n  value: number;\n};\n\nexport type SankeyFlowChartProps = BaseChartProps & {\n  nodes: Array<SankeyFlowNode | string>;\n  links: SankeyFlowLink[];\n  valueFormatter?: (value: number) => string;\n  nodeWidth?: number;\n  nodePadding?: number;\n  /** Minimum horizontal space reserved for node labels outside the plot area; grows to fit the longest root/leaf label. Defaults to `170`. */\n  labelWidth?: number;\n};\n\n/**\n * A Sankey flow diagram — revenue/cost breakdowns, funnels with branching paths, budget\n * allocation — where band width is proportional to the flow value between named nodes.\n *\n * @example\n * ```tsx\n * import { SankeyFlowChart } from '@customafk/lunas-ui/features/charts';\n *\n * <SankeyFlowChart\n *   height={500}\n *   nodes={['iPhone', 'Mac', 'Net Sales', 'Cost of Sales', 'Gross Profit']}\n *   links={[\n *     { source: 'iPhone', target: 'Net Sales', value: 205489 },\n *     { source: 'Mac', target: 'Net Sales', value: 40177 },\n *     { source: 'Net Sales', target: 'Cost of Sales', value: 223546 },\n *     { source: 'Net Sales', target: 'Gross Profit', value: 170782 },\n *   ]}\n * />\n * ```\n */\nconst estimateLabelWidth = (label: string): number => label.length * 5.6 + 14;\n\nexport const SankeyFlowChart = ({\n  nodes,\n  links,\n  valueFormatter = value => value.toLocaleString('en-US'),\n  nodeWidth = 14,\n  nodePadding = 24,\n  labelWidth = 170,\n  className,\n  animate = true,\n  height,\n}: SankeyFlowChartProps) => {\n  const { data, colorByName, effectiveLabelWidth, rootNames, leafNames } = useMemo(() => {\n    const nodeList = nodes.map(node => (typeof node === 'string' ? { name: node } : node));\n    const nameToIndex = new Map(nodeList.map((node, index) => [node.name, index]));\n    const colors = new Map(nodeList.map((node, index) => [node.name, node.color || getChartColor(index)]));\n\n    const sankeyLinks = links\n      .map(link => ({ source: nameToIndex.get(link.source), target: nameToIndex.get(link.target), value: link.value }))\n      .filter((link): link is { source: number; target: number; value: number } => link.source !== undefined && link.target !== undefined);\n\n    // Computed from our own link list rather than trusting recharts' `payload.depth`/`sourceLinks`\n    // at render time — the latter don't reliably flag terminal (leaf) nodes as such.\n    const hasIncoming = new Set(sankeyLinks.map(link => link.target));\n    const hasOutgoing = new Set(sankeyLinks.map(link => link.source));\n    const roots = new Set(nodeList.filter((_, index) => !hasIncoming.has(index)).map(node => node.name));\n    const leaves = new Set(nodeList.filter((_, index) => !hasOutgoing.has(index)).map(node => node.name));\n\n    // Only root/leaf nodes get side labels using this margin; widen it to fit the longest one\n    // so long names don't clip past the SVG edge.\n    let maxWidth = labelWidth;\n    nodeList.forEach((node, index) => {\n      if (hasIncoming.has(index) && hasOutgoing.has(index)) return;\n      const relatedValue = sankeyLinks.filter(link => link.source === index || link.target === index).reduce((sum, link) => sum + link.value, 0);\n      maxWidth = Math.max(maxWidth, estimateLabelWidth(`${node.name}: ${valueFormatter(relatedValue)}`) + 16);\n    });\n\n    return { data: { nodes: nodeList, links: sankeyLinks }, colorByName: colors, effectiveLabelWidth: maxWidth, rootNames: roots, leafNames: leaves };\n  }, [nodes, links, labelWidth, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"sankey-flow-chart\"\n      config={{}}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <Sankey\n        data={data}\n        nodeWidth={nodeWidth}\n        nodePadding={nodePadding}\n        linkCurvature={0.45}\n        margin={{ top: 28, right: effectiveLabelWidth, bottom: 8, left: effectiveLabelWidth }}\n        node={(props: SankeyNodeProps) => {\n          const { x, y, width, height: nodeHeight, payload } = props;\n          const color = colorByName.get(payload.name) ?? 'var(--chart-1)';\n          const isRoot = rootNames.has(payload.name);\n          const isLeaf = leafNames.has(payload.name);\n          const label = `${payload.name}: ${valueFormatter(payload.value)}`;\n          const pillWidth = estimateLabelWidth(label);\n          const pillHeight = 18;\n\n          let textX: number;\n          let textY: number;\n          let textAnchor: 'start' | 'end' | 'middle';\n          let pillX: number;\n          let pillY: number;\n\n          if (isRoot || isLeaf) {\n            textAnchor = isRoot ? 'end' : 'start';\n            textY = y + nodeHeight / 2;\n            pillY = textY - pillHeight / 2;\n            pillX = isRoot ? x - 8 - pillWidth : x + width + 8;\n            textX = isRoot ? pillX + pillWidth - 6 : pillX + 6;\n          } else {\n            // Intermediate nodes label above the bar (not beside it) so chained, closely-spaced\n            // depth columns never collide sideways. Consecutive depths are additionally staggered\n            // to two alternating heights (zigzag) — when almost all of a node's value passes\n            // straight through to the next depth (e.g. Operating Income -> Profit before tax),\n            // both nodes land at nearly the same y, so same-height labels would still overlap.\n            textAnchor = 'middle';\n            textY = payload.depth % 2 === 0 ? y - 10 : y - 30;\n            pillY = textY - pillHeight + 4;\n            pillX = x + width / 2 - pillWidth / 2;\n            textX = x + width / 2;\n          }\n\n          return (\n            <g>\n              <Rectangle\n                className=\"recharts-sankey-node\"\n                x={x}\n                y={y}\n                width={width}\n                height={nodeHeight}\n                fill={color}\n                stroke=\"var(--background)\"\n                strokeWidth={1.5}\n                isAnimationActive={animate}\n              />\n              <rect x={pillX} y={pillY} width={pillWidth} height={pillHeight} rx={4} fill=\"var(--background)\" fillOpacity={0.92} />\n              <text x={textX} y={textY} textAnchor={textAnchor} dominantBaseline=\"middle\" className=\"fill-text-positive-strong text-[11px] font-medium\">\n                {label}\n              </text>\n            </g>\n          );\n        }}\n        link={(props: SankeyLinkProps) => {\n          const { sourceX, sourceY, sourceControlX, targetX, targetY, targetControlX, linkWidth, payload } = props;\n          const sourceColor = colorByName.get(payload.source.name) ?? 'var(--chart-1)';\n          const targetColor = colorByName.get(payload.target.name) ?? sourceColor;\n          // Blending toward the target's color (rather than a flat source-only fill) keeps sibling\n          // flows out of the same source visually distinct from each other wherever they run close\n          // together or cross — a flat single hue made e.g. Gross Profit's three outgoing flows\n          // (-> R&D, -> SG&A, -> Operating Income) indistinguishable from one another.\n          const color = `color-mix(in oklch, ${sourceColor} 60%, ${targetColor} 40%)`;\n          return (\n            <path\n              className=\"recharts-sankey-link\"\n              d={`M${sourceX},${sourceY} C${sourceControlX},${sourceY} ${targetControlX},${targetY} ${targetX},${targetY}`}\n              fill=\"none\"\n              stroke={color}\n              strokeWidth={linkWidth}\n              strokeOpacity={0.4}\n            />\n          );\n        }}\n      />\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/{scroll-area-PbkqIAaH.d.cts → scroll-area-BpSwutyr.d.cts}

@@ -1,5 +1,4 @@
 import { ScrollArea } from "radix-ui";
-
 //#region packages/components/ui/scroll-area.d.ts
 /**
  * A scrollable container with a styled, custom scrollbar that overlays the content.
@@ -13,23 +12,13 @@ import { ScrollArea } from "radix-ui";
  * </ScrollArea>
  * ```
  */
-declare const ScrollArea$1: import("react").MemoExoticComponent<({
-  className,
-  children,
-  ref,
-  onScroll,
-  ...props
-}: React.ComponentProps<typeof ScrollArea.Root>) => import("react").JSX.Element>;
+declare const ScrollArea$1: import("react").MemoExoticComponent<({ className, children, ref, onScroll, ...props }: React.ComponentProps<typeof ScrollArea.Root>) => import("react").JSX.Element>;
 /**
  * The styled scrollbar track and thumb rendered inside a ScrollArea.
  *
  * @param orientation - Direction of the scrollbar: `'vertical'` (default) or `'horizontal'`.
  */
-declare const ScrollBar: import("react").MemoExoticComponent<({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<typeof ScrollArea.ScrollAreaScrollbar>) => import("react").JSX.Element>;
+declare const ScrollBar: import("react").MemoExoticComponent<({ className, orientation, ...props }: React.ComponentProps<typeof ScrollArea.ScrollAreaScrollbar>) => import("react").JSX.Element>;
 //#endregion
 export { ScrollBar as n, ScrollArea$1 as t };
-//# sourceMappingURL=scroll-area-PbkqIAaH.d.cts.map
+//# sourceMappingURL=scroll-area-BpSwutyr.d.cts.map