@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/{email-field-DZNR_JbT.mjs → email-field-BtcdBWL4.mjs}

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

package/dist/{email-field-DZNR_JbT.mjs.map → email-field-BtcdBWL4.mjs.map}

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

package/dist/empty-CaNJjp05.d.cts

@@ -0,0 +1,65 @@
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/ui/empty.d.ts
+/**
+ * Full-page or section empty-state container with centred layout and dashed border, composed with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
+ * } from '@customafk/lunas-ui/ui/empty';
+ * import { SearchX } from 'lucide-react';
+ *
+ * <Empty>
+ *   <EmptyHeader>
+ *     <EmptyMedia variant="icon"><SearchX /></EmptyMedia>
+ *     <EmptyTitle>No results found</EmptyTitle>
+ *     <EmptyDescription>Try adjusting your search filters.</EmptyDescription>
+ *   </EmptyHeader>
+ *   <EmptyContent>
+ *     <button>Reset filters</button>
+ *   </EmptyContent>
+ * </Empty>
+ * ```
+ */
+declare function Empty({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Centred column container for the media, title, and description of an empty state. */
+declare function EmptyHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Container for the visual element (illustration, icon, or image) in an empty state.
+ *
+ * @param variant - `'default'` renders a transparent wrapper; `'icon'` renders a rounded muted square with the icon centred inside.
+ */
+declare function EmptyMedia({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+/** Prominent heading text for the empty state. */
+declare function EmptyTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Supporting body text that explains the empty state to the user. */
+declare function EmptyDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): import("react").JSX.Element;
+/** Action area below the header — typically holds buttons or links to help the user proceed. */
+declare function EmptyContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { EmptyMedia as a, EmptyHeader as i, EmptyContent as n, EmptyTitle as o, EmptyDescription as r, Empty as t };
+//# sourceMappingURL=empty-CaNJjp05.d.cts.map

package/dist/empty-CaNJjp05.d.mts

@@ -0,0 +1,65 @@
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/ui/empty.d.ts
+/**
+ * Full-page or section empty-state container with centred layout and dashed border, composed with EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, and EmptyContent.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
+ * } from '@customafk/lunas-ui/ui/empty';
+ * import { SearchX } from 'lucide-react';
+ *
+ * <Empty>
+ *   <EmptyHeader>
+ *     <EmptyMedia variant="icon"><SearchX /></EmptyMedia>
+ *     <EmptyTitle>No results found</EmptyTitle>
+ *     <EmptyDescription>Try adjusting your search filters.</EmptyDescription>
+ *   </EmptyHeader>
+ *   <EmptyContent>
+ *     <button>Reset filters</button>
+ *   </EmptyContent>
+ * </Empty>
+ * ```
+ */
+declare function Empty({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Centred column container for the media, title, and description of an empty state. */
+declare function EmptyHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Container for the visual element (illustration, icon, or image) in an empty state.
+ *
+ * @param variant - `'default'` renders a transparent wrapper; `'icon'` renders a rounded muted square with the icon centred inside.
+ */
+declare function EmptyMedia({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+/** Prominent heading text for the empty state. */
+declare function EmptyTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Supporting body text that explains the empty state to the user. */
+declare function EmptyDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): import("react").JSX.Element;
+/** Action area below the header — typically holds buttons or links to help the user proceed. */
+declare function EmptyContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { EmptyMedia as a, EmptyHeader as i, EmptyContent as n, EmptyTitle as o, EmptyDescription as r, Empty as t };
+//# sourceMappingURL=empty-CaNJjp05.d.mts.map

package/dist/empty-ClQptIZH.d.cts

@@ -0,0 +1,19 @@
+//#region packages/components/data-display/empty.d.ts
+type EmptyDisplayProps = {
+  /** Message shown below the empty-state icon. Defaults to `'No data to display.'`. */label?: string; /** Additional CSS classes applied to the wrapping container. */
+  className?: string;
+};
+/**
+ * A full-area empty-state placeholder with a package icon and a configurable message.
+ *
+ * @example
+ * ```tsx
+ * import { EmptyDisplay } from '@customafk/lunas-ui/data-display/empty';
+ *
+ * <EmptyDisplay label="No results found." />
+ * ```
+ */
+declare const EmptyDisplay: React.FC<EmptyDisplayProps>;
+//#endregion
+export { EmptyDisplay as t };
+//# sourceMappingURL=empty-ClQptIZH.d.cts.map

package/dist/empty-ClQptIZH.d.mts

@@ -0,0 +1,19 @@
+//#region packages/components/data-display/empty.d.ts
+type EmptyDisplayProps = {
+  /** Message shown below the empty-state icon. Defaults to `'No data to display.'`. */label?: string; /** Additional CSS classes applied to the wrapping container. */
+  className?: string;
+};
+/**
+ * A full-area empty-state placeholder with a package icon and a configurable message.
+ *
+ * @example
+ * ```tsx
+ * import { EmptyDisplay } from '@customafk/lunas-ui/data-display/empty';
+ *
+ * <EmptyDisplay label="No results found." />
+ * ```
+ */
+declare const EmptyDisplay: React.FC<EmptyDisplayProps>;
+//#endregion
+export { EmptyDisplay as t };
+//# sourceMappingURL=empty-ClQptIZH.d.mts.map

package/dist/error-dialog-D4jOPhmw.d.cts

@@ -0,0 +1,22 @@
+//#region packages/components/dialogs/error-dialog.d.ts
+type ErrorDialogProps = {
+  /** Controls whether the dialog is open. */open?: boolean; /** Title text displayed inside the dialog header. Defaults to `'An error occurred'`. */
+  title?: string; /** Callback invoked when the dialog open state changes. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Displays a modal alert dialog for communicating error states to the user.
+ *
+ * @example
+ * ```tsx
+ * import { ErrorDialog } from '@customafk/lunas-ui/dialogs/error-dialog';
+ *
+ * <ErrorDialog open={hasError} title="Something went wrong" onOpenChange={setHasError}>
+ *   <p>Please try again later.</p>
+ * </ErrorDialog>
+ * ```
+ */
+declare const ErrorDialog: React.FC<React.PropsWithChildren<ErrorDialogProps>>;
+//#endregion
+export { ErrorDialogProps as n, ErrorDialog as t };
+//# sourceMappingURL=error-dialog-D4jOPhmw.d.cts.map

package/dist/error-dialog-D4jOPhmw.d.mts

@@ -0,0 +1,22 @@
+//#region packages/components/dialogs/error-dialog.d.ts
+type ErrorDialogProps = {
+  /** Controls whether the dialog is open. */open?: boolean; /** Title text displayed inside the dialog header. Defaults to `'An error occurred'`. */
+  title?: string; /** Callback invoked when the dialog open state changes. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Displays a modal alert dialog for communicating error states to the user.
+ *
+ * @example
+ * ```tsx
+ * import { ErrorDialog } from '@customafk/lunas-ui/dialogs/error-dialog';
+ *
+ * <ErrorDialog open={hasError} title="Something went wrong" onOpenChange={setHasError}>
+ *   <p>Please try again later.</p>
+ * </ErrorDialog>
+ * ```
+ */
+declare const ErrorDialog: React.FC<React.PropsWithChildren<ErrorDialogProps>>;
+//#endregion
+export { ErrorDialogProps as n, ErrorDialog as t };
+//# sourceMappingURL=error-dialog-D4jOPhmw.d.mts.map

package/dist/features/charts/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../ui/chart.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime"),i=require("recharts");const a=e=>`var(--chart-${(e%8+8)%8+1})`,o=(e,t=`en-US`)=>new Intl.NumberFormat(t,{notation:`compact`,maximumFractionDigits:1}).format(e),s=(e,t=`USD`,n=`en-US`)=>new Intl.NumberFormat(n,{style:`currency`,currency:t,notation:Math.abs(e)>=1e4?`compact`:`standard`,maximumFractionDigits:+(Math.abs(e)>=1e4)}).format(e),c=(e,t=`en-US`)=>new Intl.NumberFormat(t,{style:`percent`,maximumFractionDigits:1}).format(e),l=(e,t=`en-US`)=>{let n=e instanceof Date?e:new Date(e);return Number.isNaN(n.getTime())?String(e):n.toLocaleDateString(t,{month:`short`,day:`numeric`})},u=(e,t,n)=>e>=t?n?.up??`var(--success)`:n?.down??`var(--danger)`,d=(e,t=`en-US`)=>new Intl.NumberFormat(t,{style:`percent`,maximumFractionDigits:1,signDisplay:`exceptZero`}).format(e),f=(e,t,n=100)=>{let r={};for(let n of t)r[n]=e.find(e=>typeof e[n]==`number`)?.[n];return e.map(e=>{let i={};for(let a of t){let t=e[a],o=r[a];i[a]=typeof t==`number`&&o?t/o*n:NaN}return{date:e.date,...i}})},p=[`S`,`M`,`T`,`W`,`T`,`F`,`S`],m=({data:a,label:o=`Activity`,color:s=`var(--chart-1)`,valueFormatter:c=e=>e.toLocaleString(`en-US`),className:u,height:d})=>{let f=(0,t.useMemo)(()=>({value:{label:o,color:s}}),[o,s]),{chartData:m,monthTicks:h,maxWeek:g,maxValue:_}=(0,t.useMemo)(()=>{let e=a.map(e=>({...e,parsedDate:e.date instanceof Date?e.date:new Date(e.date)})).sort((e,t)=>e.parsedDate.getTime()-t.parsedDate.getTime());if(e.length===0)return{chartData:[],monthTicks:new Map,maxWeek:0,maxValue:1};let t=e[0]?.parsedDate,n=new Date(t);n.setDate(n.getDate()-n.getDay());let r=new Map,i=-1,o=e.map(e=>{let t=e.parsedDate.getDay(),a=Math.floor((e.parsedDate.getTime()-n.getTime())/864e5/7),o=e.parsedDate.getMonth();return o!==i&&(r.set(a,e.parsedDate.toLocaleDateString(`en-US`,{month:`short`})),i=o),{x:a,y:t,value:e.value,date:e.date}});return{chartData:o,monthTicks:r,maxWeek:Math.max(...o.map(e=>e.x)),maxValue:Math.max(...o.map(e=>e.value),1)}},[a]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`activity-heatmap-chart`,config:f,className:(0,n.cn)(`w-full`,u),style:d===void 0?void 0:{height:d,aspectRatio:`auto`},children:(0,r.jsxs)(i.ScatterChart,{margin:{top:8,right:12,bottom:0,left:0},children:[(0,r.jsx)(i.XAxis,{type:`number`,dataKey:`x`,domain:[-.5,g+.5],ticks:Array.from(h.keys()),tickFormatter:e=>h.get(e)??``,tickLine:!1,axisLine:!1,tickMargin:8,interval:0}),(0,r.jsx)(i.YAxis,{type:`number`,dataKey:`y`,domain:[-.5,6.5],reversed:!0,ticks:[0,1,2,3,4,5,6],tickFormatter:e=>p[e]??``,tickLine:!1,axisLine:!1,width:20,interval:0}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{hideLabel:!0,hideIndicator:!0,formatter:(e,t,n)=>{let i=n.payload;return(0,r.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,r.jsx)(`span`,{className:`font-medium text-muted-strong`,children:l(i.date)}),(0,r.jsxs)(`span`,{className:`text-muted`,children:[c(i.value),` `,f.value?.label]})]})}})}),(0,r.jsx)(i.Scatter,{data:m,shape:e=>{let{cx:t,cy:n,payload:i}=e;if(t===void 0||n===void 0)return(0,r.jsx)(`g`,{});let a=Math.min(.12+.88*(i.value/_),1);return(0,r.jsx)(`rect`,{x:t-13/2,y:n-13/2,width:13,height:13,rx:3,fill:s,fillOpacity:a})}})]})})},h=({data:e,upColor:t,downColor:n})=>{let a=(0,i.useXAxisScale)(),o=(0,i.useYAxisScale)();return!a||!o?null:(0,r.jsx)(`g`,{children:e.map(e=>{let i=a(e.date,{position:`start`}),s=a(e.date,{position:`end`}),c=o(e.high),l=o(e.low),d=o(e.open),f=o(e.close);if(i===void 0||s===void 0||c===void 0||l===void 0||d===void 0||f===void 0)return null;let p=s-i,m=Math.max(p*.6,2),h=i+p/2,g=u(e.close,e.open,{up:t,down:n}),_=Math.min(d,f),v=Math.max(Math.abs(f-d),1);return(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`line`,{x1:h,x2:h,y1:c,y2:l,stroke:g,strokeWidth:1}),(0,r.jsx)(`rect`,{x:h-m/2,y:_,width:m,height:v,fill:g})]},`${e.date}`)})})},g=({data:a,label:o=`Price`,upColor:s=`var(--success)`,downColor:c=`var(--danger)`,valueFormatter:u=e=>e.toLocaleString(`en-US`),dateFormatter:d=l,showGrid:f=!0,className:p,animate:m=!0,height:g})=>{let _=(0,t.useMemo)(()=>({close:{label:o,color:s}}),[o,s]),v=(0,t.useMemo)(()=>{if(a.length===0)return[0,1];let e=Math.min(...a.map(e=>e.low)),t=Math.max(...a.map(e=>e.high)),n=(t-e)*.08||Math.max(t,1)*.08;return[e-n,t+n]},[a]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`candlestick-chart`,config:_,className:(0,n.cn)(`w-full`,p),style:g===void 0?void 0:{height:g,aspectRatio:`auto`},children:(0,r.jsxs)(i.ComposedChart,{data:a,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:d}),(0,r.jsx)(i.YAxis,{domain:v,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:u}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{hideIndicator:!0,labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?d(n):null},formatter:(e,t,n)=>{let i=n.payload;return(0,r.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,r.jsxs)(`span`,{className:`text-muted`,children:[`O `,(0,r.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:u(i.open)}),` H`,` `,(0,r.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:u(i.high)})]}),(0,r.jsxs)(`span`,{className:`text-muted`,children:[`L `,(0,r.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:u(i.low)}),` C`,` `,(0,r.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:u(i.close)})]})]})}})}),(0,r.jsx)(i.Bar,{dataKey:`close`,fill:`transparent`,isAnimationActive:m}),(0,r.jsx)(h,{data:a,upColor:s,downColor:c})]})})},_=({data:s,showConversionRates:l=!0,valueFormatter:u=o,className:d,animate:f=!0,height:p})=>{let{chartData:m,config:h}=(0,t.useMemo)(()=>{let e=s[0]?.value??0,t=s.map((t,n)=>{let r=e===0?0:t.value/e,i=l?`${u(t.value)} (${c(r)})`:u(t.value);return{...t,key:t.key||t.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),fill:t.color||a(n),valueLabel:i}});return{chartData:t,config:Object.fromEntries(t.map(e=>[e.key,{label:e.name,color:e.fill}]))}},[s,l,u]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`conversion-funnel-chart`,config:h,className:(0,n.cn)(`w-full`,d),style:p===void 0?void 0:{height:p,aspectRatio:`auto`},children:(0,r.jsxs)(i.FunnelChart,{margin:{top:8,right:120,bottom:8,left:120},children:[(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{nameKey:`key`,hideLabel:!0})}),(0,r.jsxs)(i.Funnel,{dataKey:`value`,data:m,isAnimationActive:f,children:[(0,r.jsx)(i.LabelList,{dataKey:`name`,position:`left`,offset:12,className:`fill-muted-strong`,fontSize:12}),(0,r.jsx)(i.LabelList,{dataKey:`valueLabel`,position:`right`,offset:12,className:`fill-text-positive-strong font-number`,fontSize:12})]})]})})},v=({data:a,label:o=`Points`,color:s=`var(--chart-1)`,xLabel:c,yLabel:l,xFormatter:u=e=>e.toLocaleString(`en-US`),yFormatter:d=e=>e.toLocaleString(`en-US`),showBubbleSize:f=!1,showGrid:p=!0,className:m,animate:h=!0,height:g})=>(0,r.jsx)(e.ChartContainer,{"data-slot":`correlation-scatter-chart`,config:(0,t.useMemo)(()=>({y:{label:o,color:s}}),[o,s]),className:(0,n.cn)(`w-full`,m),style:g===void 0?void 0:{height:g,aspectRatio:`auto`},children:(0,r.jsxs)(i.ScatterChart,{margin:{top:8,right:12,bottom:0,left:12},children:[p&&(0,r.jsx)(i.CartesianGrid,{}),(0,r.jsx)(i.XAxis,{type:`number`,dataKey:`x`,name:c,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:u}),(0,r.jsx)(i.YAxis,{type:`number`,dataKey:`y`,name:l,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:d}),f&&(0,r.jsx)(i.ZAxis,{type:`number`,dataKey:`z`,range:[64,400]}),(0,r.jsx)(e.ChartTooltip,{cursor:{strokeDasharray:`3 3`},content:(0,r.jsx)(e.ChartTooltipContent,{hideLabel:!0,formatter:(e,t,n)=>{let i=n.payload;return(0,r.jsxs)(`div`,{className:`grid gap-0.5`,children:[i.name&&(0,r.jsx)(`span`,{className:`font-medium text-muted-strong`,children:i.name}),(0,r.jsxs)(`span`,{className:`text-muted`,children:[c||`x`,`: `,(0,r.jsx)(`span`,{className:`font-medium font-number text-text-positive-strong`,children:u(i.x)})]}),(0,r.jsxs)(`span`,{className:`text-muted`,children:[l||`y`,`: `,(0,r.jsx)(`span`,{className:`font-medium font-number text-text-positive-strong`,children:d(i.y)})]})]})}})}),(0,r.jsx)(i.Scatter,{data:a,fill:s,isAnimationActive:h})]})}),y=e=>e.key||e.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),b=({data:s,centerLabel:c,centerValueFormatter:l=o,totalValue:u,showLegend:d=!0,showCenterTotal:f=!0,className:p,animate:m=!0,height:h})=>{let{chartData:g,config:_,total:v}=(0,t.useMemo)(()=>{let e=s.map((e,t)=>({...e,key:y(e),fill:e.color||a(t)}));return{chartData:e,config:Object.fromEntries(e.map(e=>[e.key,{label:e.name,color:e.fill}])),total:u??s.reduce((e,t)=>e+t.value,0)}},[s,u]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`donut-chart`,config:_,className:(0,n.cn)(`mx-auto`,h===void 0&&`aspect-square`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,r.jsxs)(i.PieChart,{children:[(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{nameKey:`key`,hideLabel:!0})}),(0,r.jsx)(i.Pie,{data:g,dataKey:`value`,nameKey:`key`,innerRadius:`60%`,strokeWidth:5,isAnimationActive:m,children:f&&(0,r.jsx)(i.Label,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:(0,r.jsxs)(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[(0,r.jsx)(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-2xl font-bold`,children:l(v)}),c&&(0,r.jsx)(`tspan`,{x:e.cx,y:(e.cy||0)+22,className:`fill-muted text-xs`,children:c})]})})}),d&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{nameKey:`key`})})]})})},x=({data:a,label:o=`Return`,upColor:s=`var(--success)`,downColor:c=`var(--danger)`,valueFormatter:l=e=>d(e),showGrid:f=!0,className:p,animate:m=!0,height:h})=>(0,r.jsx)(e.ChartContainer,{"data-slot":`gain-loss-bar-chart`,config:(0,t.useMemo)(()=>({value:{label:o,color:s}}),[o,s]),className:(0,n.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:a,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`name`,tickLine:!1,axisLine:!1,tickMargin:8}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:56,tickFormatter:l}),(0,r.jsx)(i.ReferenceLine,{y:0,stroke:`var(--border)`}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{hideIndicator:!0,formatter:e=>l(Number(e))})}),(0,r.jsx)(i.Bar,{dataKey:`value`,isAnimationActive:m,shape:e=>(0,r.jsx)(i.Rectangle,{...e,fill:u(Number(e.payload?.value??0),0,{up:s,down:c})})})]})}),S=({data:o,series:s,base:c=100,valueFormatter:u=(e,t)=>d(e/t-1),dateFormatter:p=l,showLegend:m=!0,showGrid:h=!0,className:g,animate:_=!0,height:v})=>{let y=(0,t.useMemo)(()=>s.map(e=>e.key),[s]),b=(0,t.useMemo)(()=>f(o,y,c),[o,y,c]),x=(0,t.useMemo)(()=>Object.fromEntries(s.map((e,t)=>[e.key,{label:e.label,color:e.color||a(t)}])),[s]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`indexed-performance-line-chart`,config:x,className:(0,n.cn)(`w-full`,g),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:(0,r.jsxs)(i.LineChart,{data:b,margin:{top:8,right:12,bottom:0,left:12},children:[h&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:p}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:56,domain:[`auto`,`auto`],tickFormatter:e=>u(Number(e),c)}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?p(n):null},formatter:(e,t,n)=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,r.jsx)(`span`,{className:`text-muted`,children:x[String(t)]?.label||t}),(0,r.jsx)(`span`,{className:`ml-auto font-medium font-number text-text-positive-strong tabular-nums`,children:u(Number(e),c)})]})})}),s.map((e,t)=>(0,r.jsx)(i.Line,{type:`natural`,dataKey:e.key,stroke:e.color||a(t),strokeWidth:2,dot:!1,isAnimationActive:_},e.key)),m&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})})},C=({data:o,series:s,valueFormatter:c=e=>e.toLocaleString(`en-US`),domain:l=[`auto`,`auto`],showLegend:u=!0,className:d,animate:f=!0,height:p})=>(0,r.jsx)(e.ChartContainer,{"data-slot":`metric-radar-chart`,config:(0,t.useMemo)(()=>Object.fromEntries(s.map((e,t)=>[e.key,{label:e.label,color:e.color||a(t)}])),[s]),className:(0,n.cn)(`mx-auto`,p===void 0&&`aspect-square`,d),style:p===void 0?void 0:{height:p,aspectRatio:`auto`},children:(0,r.jsxs)(i.RadarChart,{data:o,children:[(0,r.jsx)(i.PolarGrid,{}),(0,r.jsx)(i.PolarAngleAxis,{dataKey:`metric`,tick:{fontSize:12}}),(0,r.jsx)(i.PolarRadiusAxis,{domain:l,tick:!1,axisLine:!1}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{formatter:e=>c(Number(e))})}),s.map((e,t)=>{let n=e.color||a(t);return(0,r.jsx)(i.Radar,{dataKey:e.key,stroke:n,fill:n,fillOpacity:.25,isAnimationActive:f},e.key)}),u&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})}),w=({data:a,leftLabel:o=`Left`,rightLabel:s=`Right`,leftColor:c=`var(--chart-1)`,rightColor:l=`var(--chart-4)`,valueFormatter:u=e=>e.toLocaleString(`en-US`),showLegend:d=!0,showGrid:f=!0,className:p,animate:m=!0,height:h})=>{let g=(0,t.useMemo)(()=>({left:{label:o,color:c},right:{label:s,color:l}}),[o,c,s,l]),_=(0,t.useMemo)(()=>a.map(e=>({category:e.category,left:-e.left,right:e.right,originalLeft:e.left})),[a]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`mirrored-bar-chart`,config:g,className:(0,n.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:_,layout:`vertical`,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,r.jsx)(i.CartesianGrid,{horizontal:!1}),(0,r.jsx)(i.XAxis,{type:`number`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:e=>u(Math.abs(e))}),(0,r.jsx)(i.YAxis,{type:`category`,dataKey:`category`,tickLine:!1,axisLine:!1,tickMargin:8,width:64}),(0,r.jsx)(i.ReferenceLine,{x:0,stroke:`var(--border)`}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{formatter:(e,t,n)=>{let i=t===`left`,a=i?n.payload.originalLeft:Number(e);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,r.jsx)(`span`,{className:`text-muted`,children:i?o:s}),(0,r.jsx)(`span`,{className:`ml-auto font-medium font-number text-text-positive-strong tabular-nums`,children:u(a)})]})}})}),(0,r.jsx)(i.Bar,{dataKey:`left`,fill:c,radius:[4,0,0,4],isAnimationActive:m}),(0,r.jsx)(i.Bar,{dataKey:`right`,fill:l,radius:[0,4,4,0],isAnimationActive:m}),d&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})})},T=({data:o,dataKey:s=`orders`,label:c=`Orders`,statuses:u,color:d=`var(--chart-1)`,valueFormatter:f=e=>e.toLocaleString(`en-US`),dateFormatter:p=l,showLegend:m=!!u,showGrid:h=!0,className:g,animate:_=!0,height:v})=>(0,r.jsx)(e.ChartContainer,{"data-slot":`orders-bar-chart`,config:(0,t.useMemo)(()=>u?Object.fromEntries(u.map((e,t)=>[e.key,{label:e.label,color:e.color||a(t)}])):{[s]:{label:c,color:d}},[u,s,c,d]),className:(0,n.cn)(`w-full`,g),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:o,margin:{top:8,right:12,bottom:0,left:12},children:[h&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:p}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:f}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?p(n):null}})}),u?u.map((e,t)=>(0,r.jsx)(i.Bar,{dataKey:e.key,stackId:`orders`,fill:e.color||a(t),radius:t===u.length-1?[4,4,0,0]:[0,0,0,0],isAnimationActive:_},e.key)):(0,r.jsx)(i.Bar,{dataKey:s,fill:d,radius:[4,4,0,0],isAnimationActive:_}),m&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})}),E=e=>e.key||e.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),D=({data:s,valueFormatter:c=o,showLabels:l=!0,className:u,animate:d=!0,height:f})=>{let{chartData:p,config:m}=(0,t.useMemo)(()=>{let e=s.map((e,t)=>({...e,key:E(e),fill:e.color||a(t)}));return{chartData:e,config:Object.fromEntries(e.map(e=>[e.key,{label:e.name,color:e.fill}]))}},[s]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`portfolio-allocation-treemap`,config:m,className:(0,n.cn)(`w-full`,u),style:f===void 0?void 0:{height:f,aspectRatio:`auto`},children:(0,r.jsx)(i.Treemap,{data:p,dataKey:`value`,nameKey:`key`,isAnimationActive:d,content:e=>{if(e.depth!==1)return(0,r.jsx)(`g`,{});let t=p.find(t=>t.key===e.name),n=l&&e.width>=36&&e.height>=24;return(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`rect`,{x:e.x,y:e.y,width:e.width,height:e.height,fill:t?.fill,stroke:`var(--background)`}),n&&(0,r.jsx)(`text`,{x:e.x+6,y:e.y+16,className:`fill-white font-medium text-xs`,children:t?.name}),n&&e.height>40&&(0,r.jsx)(`text`,{x:e.x+6,y:e.y+32,className:`fill-white/80 font-number text-[11px]`,children:c(e.value)})]})},children:(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{nameKey:`key`,hideLabel:!0,formatter:e=>c(Number(e))})})})})},O=({data:a,label:o=`Close`,rangeLabel:s=`Range`,color:c=`var(--chart-1)`,valueFormatter:u=e=>e.toLocaleString(`en-US`),dateFormatter:d=l,showGrid:f=!0,className:p,animate:m=!0,height:h})=>{let g=(0,t.useMemo)(()=>({close:{label:o,color:c},rangeSpan:{label:s,color:c}}),[o,c,s]),_=(0,t.useMemo)(()=>a.map(e=>({...e,rangeSpan:e.high-e.low})),[a]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`price-range-area-chart`,config:g,className:(0,n.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,r.jsxs)(i.ComposedChart,{data:_,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:d}),(0,r.jsx)(i.YAxis,{domain:[`auto`,`auto`],tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:u}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?d(n):null},formatter:(e,t,n)=>{if(t!==`close`)return null;let i=n.payload;return(0,r.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,r.jsxs)(`span`,{className:`text-muted`,children:[g.close?.label,` `,(0,r.jsx)(`span`,{className:`font-medium font-number text-text-positive-strong`,children:u(Number(e))})]}),(0,r.jsxs)(`span`,{className:`text-[11px] text-muted`,children:[u(i.low),` – `,u(i.high)]})]})}})}),(0,r.jsx)(i.Area,{dataKey:`low`,stackId:`range`,stroke:`none`,fill:`transparent`,isAnimationActive:m}),(0,r.jsx)(i.Area,{dataKey:`rangeSpan`,stackId:`range`,stroke:`none`,fill:c,fillOpacity:.15,isAnimationActive:m}),(0,r.jsx)(i.Line,{type:`natural`,dataKey:`close`,stroke:c,strokeWidth:2,dot:!1,isAnimationActive:m})]})})},k=({data:a,label:o=`Revenue`,comparisonLabel:c=`Previous period`,showComparison:u=!1,color:d=`var(--chart-1)`,comparisonColor:f=`var(--chart-8)`,valueFormatter:p=e=>s(e),dateFormatter:m=l,showLegend:h=u,showGrid:g=!0,className:_,animate:v=!0,height:y})=>{let b=(0,t.useId)(),x=(0,t.useMemo)(()=>({value:{label:o,color:d},...u?{previousValue:{label:c,color:f}}:{}}),[o,d,u,c,f]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`revenue-area-chart`,config:x,className:(0,n.cn)(`w-full`,_),style:y===void 0?void 0:{height:y,aspectRatio:`auto`},children:(0,r.jsxs)(i.AreaChart,{data:a,margin:{top:8,right:12,bottom:0,left:12},children:[(0,r.jsxs)(`defs`,{children:[(0,r.jsxs)(`linearGradient`,{id:`${b}-value`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:d,stopOpacity:.6}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:d,stopOpacity:.05})]}),(0,r.jsxs)(`linearGradient`,{id:`${b}-previous`,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:f,stopOpacity:.3}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:f,stopOpacity:.02})]})]}),g&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:m}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:p}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?m(n):null},formatter:(e,t,n)=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,r.jsx)(`span`,{className:`text-muted`,children:x[String(t)]?.label||t}),(0,r.jsx)(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:p(Number(e))})]})})}),u&&(0,r.jsx)(i.Area,{type:`natural`,dataKey:`previousValue`,stroke:f,strokeWidth:2,strokeDasharray:`4 4`,fill:`url(#${b}-previous)`,isAnimationActive:v}),(0,r.jsx)(i.Area,{type:`natural`,dataKey:`value`,stroke:d,strokeWidth:2,fill:`url(#${b}-value)`,isAnimationActive:v}),h&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})})},A=({data:a,revenueLabel:o=`Revenue`,ordersLabel:c=`Orders`,revenueColor:u=`var(--chart-1)`,ordersColor:d=`var(--chart-4)`,revenueFormatter:f=e=>s(e),ordersFormatter:p=e=>e.toLocaleString(`en-US`),dateFormatter:m=l,showLegend:h=!0,showGrid:g=!0,className:_,animate:v=!0,height:y})=>{let b=(0,t.useMemo)(()=>({revenue:{label:o,color:u},orders:{label:c,color:d}}),[o,u,c,d]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`revenue-orders-composed-chart`,config:b,className:(0,n.cn)(`w-full`,_),style:y===void 0?void 0:{height:y,aspectRatio:`auto`},children:(0,r.jsxs)(i.ComposedChart,{data:a,margin:{top:8,right:12,bottom:0,left:12},children:[g&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:m}),(0,r.jsx)(i.YAxis,{yAxisId:`revenue`,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:f}),(0,r.jsx)(i.YAxis,{yAxisId:`orders`,orientation:`right`,tickLine:!1,axisLine:!1,tickMargin:8,width:48,allowDecimals:!1,tickFormatter:p}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?m(n):null},formatter:(e,t,n)=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`size-2.5 shrink-0 rounded-[2px]`,style:{backgroundColor:n.color}}),(0,r.jsx)(`span`,{className:`text-muted`,children:b[String(t)]?.label||t}),(0,r.jsx)(`span`,{className:`text-text-positive-strong font-number ml-auto font-medium tabular-nums`,children:t===`revenue`?f(Number(e)):p(Number(e))})]})})}),(0,r.jsx)(i.Bar,{dataKey:`revenue`,yAxisId:`revenue`,fill:u,radius:[4,4,0,0],isAnimationActive:v}),(0,r.jsx)(i.Line,{type:`natural`,dataKey:`orders`,yAxisId:`orders`,stroke:d,strokeWidth:2,dot:!1,isAnimationActive:v}),h&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})})},j=({value:a,target:o,label:s=`Target`,valueFormatter:l=(e,t)=>c(t===0?0:e/t),color:u=`var(--chart-1)`,className:d,animate:f=!0,height:p})=>{let m=(0,t.useMemo)(()=>[{name:`progress`,value:Math.min(Math.max(a,0),o),fill:u}],[a,o,u]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`sales-target-radial-chart`,config:(0,t.useMemo)(()=>({progress:{label:s,color:u}}),[s,u]),className:(0,n.cn)(`mx-auto`,p===void 0&&`aspect-square`,d),style:p===void 0?void 0:{height:p,aspectRatio:`auto`},children:(0,r.jsxs)(i.RadialBarChart,{data:m,startAngle:90,endAngle:-270,innerRadius:`75%`,outerRadius:`100%`,children:[(0,r.jsx)(i.PolarAngleAxis,{type:`number`,domain:[0,o],angleAxisId:0,tick:!1}),(0,r.jsx)(i.RadialBar,{dataKey:`value`,angleAxisId:0,background:!0,cornerRadius:10,isAnimationActive:f}),(0,r.jsx)(i.PolarRadiusAxis,{tick:!1,tickLine:!1,axisLine:!1,children:(0,r.jsx)(i.Label,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:(0,r.jsxs)(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[(0,r.jsx)(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-3xl font-bold`,children:l(a,o)}),(0,r.jsx)(`tspan`,{x:e.cx,y:(e.cy||0)+24,className:`fill-muted text-xs`,children:s})]})})})]})})},M=e=>e.length*5.6+14,N=({nodes:o,links:s,valueFormatter:c=e=>e.toLocaleString(`en-US`),nodeWidth:l=14,nodePadding:u=24,labelWidth:d=170,className:f,animate:p=!0,height:m})=>{let{data:h,colorByName:g,effectiveLabelWidth:_,rootNames:v,leafNames:y}=(0,t.useMemo)(()=>{let e=o.map(e=>typeof e==`string`?{name:e}:e),t=new Map(e.map((e,t)=>[e.name,t])),n=new Map(e.map((e,t)=>[e.name,e.color||a(t)])),r=s.map(e=>({source:t.get(e.source),target:t.get(e.target),value:e.value})).filter(e=>e.source!==void 0&&e.target!==void 0),i=new Set(r.map(e=>e.target)),l=new Set(r.map(e=>e.source)),u=new Set(e.filter((e,t)=>!i.has(t)).map(e=>e.name)),f=new Set(e.filter((e,t)=>!l.has(t)).map(e=>e.name)),p=d;return e.forEach((e,t)=>{if(i.has(t)&&l.has(t))return;let n=r.filter(e=>e.source===t||e.target===t).reduce((e,t)=>e+t.value,0);p=Math.max(p,M(`${e.name}: ${c(n)}`)+16)}),{data:{nodes:e,links:r},colorByName:n,effectiveLabelWidth:p,rootNames:u,leafNames:f}},[o,s,d,c]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`sankey-flow-chart`,config:{},className:(0,n.cn)(`w-full`,f),style:m===void 0?void 0:{height:m,aspectRatio:`auto`},children:(0,r.jsx)(i.Sankey,{data:h,nodeWidth:l,nodePadding:u,linkCurvature:.45,margin:{top:28,right:_,bottom:8,left:_},node:e=>{let{x:t,y:n,width:a,height:o,payload:s}=e,l=g.get(s.name)??`var(--chart-1)`,u=v.has(s.name),d=y.has(s.name),f=`${s.name}: ${c(s.value)}`,m=M(f),h,_,b,x,S;return u||d?(b=u?`end`:`start`,_=n+o/2,S=_-18/2,x=u?t-8-m:t+a+8,h=u?x+m-6:x+6):(b=`middle`,_=s.depth%2==0?n-10:n-30,S=_-18+4,x=t+a/2-m/2,h=t+a/2),(0,r.jsxs)(`g`,{children:[(0,r.jsx)(i.Rectangle,{className:`recharts-sankey-node`,x:t,y:n,width:a,height:o,fill:l,stroke:`var(--background)`,strokeWidth:1.5,isAnimationActive:p}),(0,r.jsx)(`rect`,{x,y:S,width:m,height:18,rx:4,fill:`var(--background)`,fillOpacity:.92}),(0,r.jsx)(`text`,{x:h,y:_,textAnchor:b,dominantBaseline:`middle`,className:`fill-text-positive-strong text-[11px] font-medium`,children:f})]})},link:e=>{let{sourceX:t,sourceY:n,sourceControlX:i,targetX:a,targetY:o,targetControlX:s,linkWidth:c,payload:l}=e,u=g.get(l.source.name)??`var(--chart-1)`,d=`color-mix(in oklch, ${u} 60%, ${g.get(l.target.name)??u} 40%)`;return(0,r.jsx)(`path`,{className:`recharts-sankey-link`,d:`M${t},${n} C${i},${n} ${s},${o} ${a},${o}`,fill:`none`,stroke:d,strokeWidth:c,strokeOpacity:.4})}})})},P={up:`var(--success)`,down:`var(--danger)`,neutral:`var(--chart-1)`},F=({data:e,type:a=`area`,trend:o=`neutral`,color:s,height:c=40,animate:l=!0,className:u})=>{let d=(0,t.useId)(),f=s||P[o],p=(0,t.useMemo)(()=>e.map(e=>typeof e==`number`?{value:e}:e),[e]),m={top:2,right:0,bottom:2,left:0};return(0,r.jsx)(`div`,{"data-slot":`sparkline-chart`,className:(0,n.cn)(`w-full`,u),style:{height:c},children:(0,r.jsx)(i.ResponsiveContainer,{children:a===`line`?(0,r.jsx)(i.LineChart,{data:p,margin:m,children:(0,r.jsx)(i.Line,{type:`natural`,dataKey:`value`,stroke:f,strokeWidth:2,dot:!1,isAnimationActive:l})}):(0,r.jsxs)(i.AreaChart,{data:p,margin:m,children:[(0,r.jsx)(`defs`,{children:(0,r.jsxs)(`linearGradient`,{id:d,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,r.jsx)(`stop`,{offset:`5%`,stopColor:f,stopOpacity:.4}),(0,r.jsx)(`stop`,{offset:`95%`,stopColor:f,stopOpacity:.05})]})}),(0,r.jsx)(i.Area,{type:`natural`,dataKey:`value`,stroke:f,strokeWidth:2,fill:`url(#${d})`,isAnimationActive:l})]})})})},I=({data:o,series:s,valueFormatter:c=e=>e.toLocaleString(`en-US`),dateFormatter:u=l,showLegend:d=!0,showGrid:f=!0,className:p,animate:m=!0,height:h})=>(0,r.jsx)(e.ChartContainer,{"data-slot":`stacked-area-chart`,config:(0,t.useMemo)(()=>Object.fromEntries(s.map((e,t)=>[e.key,{label:e.label,color:e.color||a(t)}])),[s]),className:(0,n.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,r.jsxs)(i.AreaChart,{data:o,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:u}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:c}),(0,r.jsx)(e.ChartTooltip,{content:(0,r.jsx)(e.ChartTooltipContent,{labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?u(n):null},formatter:e=>c(Number(e))})}),s.map((e,t)=>{let n=e.color||a(t);return(0,r.jsx)(i.Area,{type:`natural`,dataKey:e.key,stackId:`stack`,stroke:n,fill:n,fillOpacity:.35,isAnimationActive:m},e.key)}),d&&(0,r.jsx)(e.ChartLegend,{content:(0,r.jsx)(e.ChartLegendContent,{})})]})}),L=({data:a,label:s=`Sales`,maxItems:c=8,color:l=`var(--chart-1)`,valueFormatter:u=o,showValueLabels:d=!0,className:f,animate:p=!0,height:m})=>{let h=(0,t.useMemo)(()=>[...a].sort((e,t)=>t.value-e.value).slice(0,c),[a,c]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`top-products-bar-chart`,config:(0,t.useMemo)(()=>({value:{label:s,color:l}}),[s,l]),className:(0,n.cn)(`w-full`,f),style:m===void 0?void 0:{height:m,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:h,layout:`vertical`,margin:{top:0,right:d?48:12,bottom:0,left:12},children:[(0,r.jsx)(i.XAxis,{type:`number`,dataKey:`value`,hide:!0}),(0,r.jsx)(i.YAxis,{type:`category`,dataKey:`name`,tickLine:!1,axisLine:!1,tickMargin:8,width:120}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{hideLabel:!0})}),(0,r.jsx)(i.Bar,{dataKey:`value`,fill:l,radius:4,isAnimationActive:p,children:d&&(0,r.jsx)(i.LabelList,{dataKey:`value`,position:`right`,offset:8,className:`fill-muted-strong`,fontSize:12,formatter:e=>u(Number(e))})})]})})},R=({data:a,label:s=`Volume`,upColor:c=`var(--success)`,downColor:d=`var(--danger)`,valueFormatter:f=o,dateFormatter:p=l,showGrid:m=!0,className:h,animate:g=!0,height:_})=>{let v=(0,t.useMemo)(()=>({volume:{label:s,color:c}}),[s,c]),y=(0,t.useMemo)(()=>a.map((e,t)=>({...e,previousClose:t>0?a[t-1]?.close:e.close})),[a]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`volume-bar-chart`,config:v,className:(0,n.cn)(`w-full`,h),style:_===void 0?void 0:{height:_,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:y,margin:{top:8,right:12,bottom:0,left:12},children:[m&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:p}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:56,tickFormatter:f}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{hideIndicator:!0,labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?p(n):null},formatter:e=>f(Number(e))})}),(0,r.jsx)(i.Bar,{dataKey:`volume`,isAnimationActive:g,shape:e=>{let t=e.payload,n=u(t?.close??0,t?.previousClose??0,{up:c,down:d});return(0,r.jsx)(i.Rectangle,{...e,fill:n})}})]})})},z=({data:a,totalColor:o=`var(--chart-1)`,upColor:s=`var(--success)`,downColor:c=`var(--danger)`,valueFormatter:l=e=>e.toLocaleString(`en-US`),showGrid:d=!0,className:f,animate:p=!0,height:m})=>{let h=(0,t.useMemo)(()=>({size:{label:`Amount`,color:o}}),[o]),g=(0,t.useMemo)(()=>{let e=0;return a.map(t=>{if(t.isTotal)return e=t.value,{...t,base:0,size:t.value,color:o,runningTotal:e};let n=e;e+=t.value;let r=Math.min(n,e);return{...t,base:r,size:Math.abs(t.value),color:u(t.value,0,{up:s,down:c}),runningTotal:e}})},[a,o,s,c]);return(0,r.jsx)(e.ChartContainer,{"data-slot":`waterfall-chart`,config:h,className:(0,n.cn)(`w-full`,f),style:m===void 0?void 0:{height:m,aspectRatio:`auto`},children:(0,r.jsxs)(i.BarChart,{data:g,margin:{top:8,right:12,bottom:0,left:12},children:[d&&(0,r.jsx)(i.CartesianGrid,{vertical:!1}),(0,r.jsx)(i.XAxis,{dataKey:`label`,tickLine:!1,axisLine:!1,tickMargin:8}),(0,r.jsx)(i.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:l}),(0,r.jsx)(e.ChartTooltip,{cursor:!1,content:(0,r.jsx)(e.ChartTooltipContent,{hideIndicator:!0,formatter:(e,t,n)=>{let i=n.payload;return(0,r.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,r.jsxs)(`span`,{className:`text-muted`,children:[i.isTotal?`Total`:i.value>=0?`Increase`:`Decrease`,` `,(0,r.jsx)(`span`,{className:`font-medium font-number text-text-positive-strong`,children:l(i.value)})]}),(0,r.jsxs)(`span`,{className:`text-[11px] text-muted`,children:[`Running total `,l(i.runningTotal)]})]})}})}),(0,r.jsx)(i.Bar,{dataKey:`base`,stackId:`waterfall`,fill:`transparent`,isAnimationActive:!1}),(0,r.jsx)(i.Bar,{dataKey:`size`,stackId:`waterfall`,isAnimationActive:p,shape:e=>(0,r.jsx)(i.Rectangle,{...e,fill:e.payload.color,radius:2})})]})})};exports.ActivityHeatmapChart=m,exports.CandlestickChart=g,exports.ConversionFunnelChart=_,exports.CorrelationScatterChart=v,exports.DonutChart=b,exports.GainLossBarChart=x,exports.IndexedPerformanceLineChart=S,exports.MetricRadarChart=C,exports.MirroredBarChart=w,exports.OrdersBarChart=T,exports.PortfolioAllocationTreemap=D,exports.PriceRangeAreaChart=O,exports.RevenueAreaChart=k,exports.RevenueOrdersComposedChart=A,exports.SalesTargetRadialChart=j,exports.SankeyFlowChart=N,exports.SparklineChart=F,exports.StackedAreaChart=I,exports.TopProductsBarChart=L,exports.VolumeBarChart=R,exports.WaterfallChart=z,exports.computeIndexedSeries=f,exports.formatCompactNumber=o,exports.formatCurrency=s,exports.formatPercent=c,exports.formatSignedPercent=d,exports.getChartColor=a,exports.getDirectionColor=u,exports.toDateLabel=l;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../ui/skeleton.cjs");let t=require("react"),n=require("react/jsx-runtime");const r=e=>`var(--chart-${(e%8+8)%8+1})`,i=(e,t=`en-US`)=>new Intl.NumberFormat(t,{notation:`compact`,maximumFractionDigits:1}).format(e),a=(e,t=`USD`,n=`en-US`)=>new Intl.NumberFormat(n,{style:`currency`,currency:t,notation:Math.abs(e)>=1e4?`compact`:`standard`,maximumFractionDigits:+(Math.abs(e)>=1e4)}).format(e),o=(e,t=`en-US`)=>new Intl.NumberFormat(t,{style:`percent`,maximumFractionDigits:1}).format(e),s=(e,t=`en-US`)=>{let n=e instanceof Date?e:new Date(e);return Number.isNaN(n.getTime())?String(e):n.toLocaleDateString(t,{month:`short`,day:`numeric`})},c=(e,t,n)=>e>=t?n?.up??`var(--success)`:n?.down??`var(--danger)`,l=(e,t=`en-US`)=>new Intl.NumberFormat(t,{style:`percent`,maximumFractionDigits:1,signDisplay:`exceptZero`}).format(e),u=(e,t,n=100)=>{let r={};for(let n of t)r[n]=e.find(e=>typeof e[n]==`number`)?.[n];return e.map(e=>{let i={};for(let a of t){let t=e[a],o=r[a];i[a]=typeof t==`number`&&o?t/o*n:NaN}return{date:e.date,...i}})};function d(){return(0,n.jsx)(e.Skeleton,{"data-slot":`chart-skeleton`,className:`aspect-video w-full rounded`})}function f(e){let r=(0,t.lazy)(e);return e=>(0,n.jsx)(t.Suspense,{fallback:(0,n.jsx)(d,{}),children:(0,n.jsx)(r,{...e})})}const p=f(()=>Promise.resolve().then(()=>require("../../activity-heatmap-chart-gDcvIAK_.cjs")).then(e=>({default:e.ActivityHeatmapChart}))),m=f(()=>Promise.resolve().then(()=>require("../../candlestick-chart-CqmRkfXj.cjs")).then(e=>({default:e.CandlestickChart}))),h=f(()=>Promise.resolve().then(()=>require("../../conversion-funnel-chart-r2m2QbiQ.cjs")).then(e=>({default:e.ConversionFunnelChart}))),g=f(()=>Promise.resolve().then(()=>require("../../correlation-scatter-chart-HF48YUIB.cjs")).then(e=>({default:e.CorrelationScatterChart}))),_=f(()=>Promise.resolve().then(()=>require("../../donut-chart-CsPPKy0G.cjs")).then(e=>({default:e.DonutChart}))),v=f(()=>Promise.resolve().then(()=>require("../../gain-loss-bar-chart-FUzN7DxF.cjs")).then(e=>({default:e.GainLossBarChart}))),y=f(()=>Promise.resolve().then(()=>require("../../indexed-performance-line-chart-CT79KOM6.cjs")).then(e=>({default:e.IndexedPerformanceLineChart}))),b=f(()=>Promise.resolve().then(()=>require("../../metric-radar-chart-DwgbXgJX.cjs")).then(e=>({default:e.MetricRadarChart}))),x=f(()=>Promise.resolve().then(()=>require("../../mirrored-bar-chart-BwjtExjh.cjs")).then(e=>({default:e.MirroredBarChart}))),S=f(()=>Promise.resolve().then(()=>require("../../orders-bar-chart-9RmtP6In.cjs")).then(e=>({default:e.OrdersBarChart}))),C=f(()=>Promise.resolve().then(()=>require("../../portfolio-allocation-treemap-Bn0X4wb6.cjs")).then(e=>({default:e.PortfolioAllocationTreemap}))),w=f(()=>Promise.resolve().then(()=>require("../../price-range-area-chart-BW6RQb_9.cjs")).then(e=>({default:e.PriceRangeAreaChart}))),T=f(()=>Promise.resolve().then(()=>require("../../revenue-area-chart-w2FZCl_7.cjs")).then(e=>({default:e.RevenueAreaChart}))),E=f(()=>Promise.resolve().then(()=>require("../../revenue-orders-composed-chart-BttOWYGt.cjs")).then(e=>({default:e.RevenueOrdersComposedChart}))),D=f(()=>Promise.resolve().then(()=>require("../../sales-target-radial-chart-BoxSk7hW.cjs")).then(e=>({default:e.SalesTargetRadialChart}))),O=f(()=>Promise.resolve().then(()=>require("../../sankey-flow-chart-CDUqIRMZ.cjs")).then(e=>({default:e.SankeyFlowChart}))),k=f(()=>Promise.resolve().then(()=>require("../../sparkline-chart-sPqaJHep.cjs")).then(e=>({default:e.SparklineChart}))),A=f(()=>Promise.resolve().then(()=>require("../../stacked-area-chart-DyxY96_l.cjs")).then(e=>({default:e.StackedAreaChart}))),j=f(()=>Promise.resolve().then(()=>require("../../top-products-bar-chart-5EJFSkeo.cjs")).then(e=>({default:e.TopProductsBarChart}))),M=f(()=>Promise.resolve().then(()=>require("../../volume-bar-chart-CRxZPZIn.cjs")).then(e=>({default:e.VolumeBarChart}))),N=f(()=>Promise.resolve().then(()=>require("../../waterfall-chart-CTB2f5eh.cjs")).then(e=>({default:e.WaterfallChart})));exports.ActivityHeatmapChart=p,exports.CandlestickChart=m,exports.ConversionFunnelChart=h,exports.CorrelationScatterChart=g,exports.DonutChart=_,exports.GainLossBarChart=v,exports.IndexedPerformanceLineChart=y,exports.MetricRadarChart=b,exports.MirroredBarChart=x,exports.OrdersBarChart=S,exports.PortfolioAllocationTreemap=C,exports.PriceRangeAreaChart=w,exports.RevenueAreaChart=T,exports.RevenueOrdersComposedChart=E,exports.SalesTargetRadialChart=D,exports.SankeyFlowChart=O,exports.SparklineChart=k,exports.StackedAreaChart=A,exports.TopProductsBarChart=j,exports.VolumeBarChart=M,exports.WaterfallChart=N,exports.computeIndexedSeries=u,exports.formatCompactNumber=i,exports.formatCurrency=a,exports.formatPercent=o,exports.formatSignedPercent=l,exports.getChartColor=r,exports.getDirectionColor=c,exports.toDateLabel=s;
 //# sourceMappingURL=index.cjs.map