@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/confirm-dialog-B8Vu0z8S.d.cts

@@ -0,0 +1,142 @@
+//#region packages/components/dialogs/confirm-dialog.d.ts
+/**
+ * Props for the {@link ConfirmDialog} component.
+ */
+type ConfirmDialogProps = {
+  /**
+   * Controls whether the dialog is currently open.
+   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.
+   */
+  open?: boolean;
+  /**
+   * When `true`, shows an animated spinner inside the confirm button and
+   * prevents double-submission. Typically bound to a mutation's pending state.
+   *
+   * @default false
+   */
+  isLoading?: boolean;
+  /**
+   * The dialog heading text. Keep it short and action-oriented,
+   * e.g. `"Delete user?"` or `"Unsaved changes"`.
+   */
+  title: string;
+  /**
+   * Body copy explaining what will happen if the user confirms.
+   * For irreversible actions, state explicitly that the action cannot be undone.
+   */
+  description: string;
+  /**
+   * Label for the cancel / dismiss button.
+   *
+   * @default "Cancel"
+   */
+  cancelText?: string;
+  /**
+   * Label for the confirm / submit button.
+   *
+   * @default "Confirm"
+   */
+  submitText?: string;
+  /**
+   * Additional class names applied to the `AlertDialogDescription` element.
+   * Useful for overriding text color or font size for specific contexts.
+   */
+  descriptionClassName?: string;
+  /**
+   * Callback fired when the dialog open state changes.
+   * Required to implement controlled open / close behavior.
+   *
+   * @param open - `true` when opening, `false` when closing.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Async-safe callback fired when the user clicks the confirm button.
+   * Supports both synchronous and `Promise`-returning functions.
+   *
+   * The dialog does **not** auto-close after `onConfirm` resolves — the caller
+   * is responsible for setting `open` to `false` once the operation completes.
+   *
+   * @example
+   * ```tsx
+   * onConfirm={async () => {
+   *   await deleteUser(userId);
+   *   setOpen(false);
+   * }}
+   * ```
+   */
+  onConfirm?: () => Promise<void> | void;
+};
+/**
+ * A controlled confirmation dialog for destructive or irreversible actions.
+ *
+ * Built on Radix UI's `AlertDialog` primitive. Renders a warning icon, title,
+ * description, and Cancel / Confirm buttons. The confirm button supports an
+ * async loading state to prevent double-submission.
+ *
+ * **Import:** `import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog'`
+ *
+ * @example Delete confirmation with React state
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';
+ *
+ * export function DeleteUserButton({ userId }: { userId: string }) {
+ *   const [open, setOpen] = useState(false);
+ *   const [isPending, setIsPending] = useState(false);
+ *
+ *   const handleDelete = async () => {
+ *     setIsPending(true);
+ *     try {
+ *       await deleteUser(userId);
+ *       setOpen(false);
+ *     } finally {
+ *       setIsPending(false);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <Button variant="outline" color="danger" onClick={() => setOpen(true)}>
+ *         Delete user
+ *       </Button>
+ *       <ConfirmDialog
+ *         open={open}
+ *         title="Delete user?"
+ *         description="This action is permanent and cannot be undone."
+ *         submitText="Yes, delete"
+ *         isLoading={isPending}
+ *         onOpenChange={setOpen}
+ *         onConfirm={handleDelete}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example With TanStack Query mutation
+ * ```tsx
+ * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';
+ * import { useMutation } from '@tanstack/react-query';
+ *
+ * export function ArchiveDialog({ open, onOpenChange, id }: Props) {
+ *   const { mutateAsync, isPending } = useMutation({ mutationFn: archiveItem });
+ *
+ *   return (
+ *     <ConfirmDialog
+ *       open={open}
+ *       title="Archive item?"
+ *       description="The item will be hidden but can be restored later."
+ *       submitText="Archive"
+ *       isLoading={isPending}
+ *       onOpenChange={onOpenChange}
+ *       onConfirm={() => mutateAsync(id).then(() => onOpenChange(false))}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+//#endregion
+export { ConfirmDialogProps as n, ConfirmDialog as t };
+//# sourceMappingURL=confirm-dialog-B8Vu0z8S.d.cts.map

package/dist/confirm-dialog-B8Vu0z8S.d.mts

@@ -0,0 +1,142 @@
+//#region packages/components/dialogs/confirm-dialog.d.ts
+/**
+ * Props for the {@link ConfirmDialog} component.
+ */
+type ConfirmDialogProps = {
+  /**
+   * Controls whether the dialog is currently open.
+   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.
+   */
+  open?: boolean;
+  /**
+   * When `true`, shows an animated spinner inside the confirm button and
+   * prevents double-submission. Typically bound to a mutation's pending state.
+   *
+   * @default false
+   */
+  isLoading?: boolean;
+  /**
+   * The dialog heading text. Keep it short and action-oriented,
+   * e.g. `"Delete user?"` or `"Unsaved changes"`.
+   */
+  title: string;
+  /**
+   * Body copy explaining what will happen if the user confirms.
+   * For irreversible actions, state explicitly that the action cannot be undone.
+   */
+  description: string;
+  /**
+   * Label for the cancel / dismiss button.
+   *
+   * @default "Cancel"
+   */
+  cancelText?: string;
+  /**
+   * Label for the confirm / submit button.
+   *
+   * @default "Confirm"
+   */
+  submitText?: string;
+  /**
+   * Additional class names applied to the `AlertDialogDescription` element.
+   * Useful for overriding text color or font size for specific contexts.
+   */
+  descriptionClassName?: string;
+  /**
+   * Callback fired when the dialog open state changes.
+   * Required to implement controlled open / close behavior.
+   *
+   * @param open - `true` when opening, `false` when closing.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Async-safe callback fired when the user clicks the confirm button.
+   * Supports both synchronous and `Promise`-returning functions.
+   *
+   * The dialog does **not** auto-close after `onConfirm` resolves — the caller
+   * is responsible for setting `open` to `false` once the operation completes.
+   *
+   * @example
+   * ```tsx
+   * onConfirm={async () => {
+   *   await deleteUser(userId);
+   *   setOpen(false);
+   * }}
+   * ```
+   */
+  onConfirm?: () => Promise<void> | void;
+};
+/**
+ * A controlled confirmation dialog for destructive or irreversible actions.
+ *
+ * Built on Radix UI's `AlertDialog` primitive. Renders a warning icon, title,
+ * description, and Cancel / Confirm buttons. The confirm button supports an
+ * async loading state to prevent double-submission.
+ *
+ * **Import:** `import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog'`
+ *
+ * @example Delete confirmation with React state
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';
+ *
+ * export function DeleteUserButton({ userId }: { userId: string }) {
+ *   const [open, setOpen] = useState(false);
+ *   const [isPending, setIsPending] = useState(false);
+ *
+ *   const handleDelete = async () => {
+ *     setIsPending(true);
+ *     try {
+ *       await deleteUser(userId);
+ *       setOpen(false);
+ *     } finally {
+ *       setIsPending(false);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <Button variant="outline" color="danger" onClick={() => setOpen(true)}>
+ *         Delete user
+ *       </Button>
+ *       <ConfirmDialog
+ *         open={open}
+ *         title="Delete user?"
+ *         description="This action is permanent and cannot be undone."
+ *         submitText="Yes, delete"
+ *         isLoading={isPending}
+ *         onOpenChange={setOpen}
+ *         onConfirm={handleDelete}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example With TanStack Query mutation
+ * ```tsx
+ * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';
+ * import { useMutation } from '@tanstack/react-query';
+ *
+ * export function ArchiveDialog({ open, onOpenChange, id }: Props) {
+ *   const { mutateAsync, isPending } = useMutation({ mutationFn: archiveItem });
+ *
+ *   return (
+ *     <ConfirmDialog
+ *       open={open}
+ *       title="Archive item?"
+ *       description="The item will be hidden but can be restored later."
+ *       submitText="Archive"
+ *       isLoading={isPending}
+ *       onOpenChange={onOpenChange}
+ *       onConfirm={() => mutateAsync(id).then(() => onOpenChange(false))}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+//#endregion
+export { ConfirmDialogProps as n, ConfirmDialog as t };
+//# sourceMappingURL=confirm-dialog-B8Vu0z8S.d.mts.map

package/dist/container-form-BdsEX0NH.mjs

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";const t=({children:t})=>e(`div`,{"data-slot":`section-form`,className:`flex flex-col space-y-4`,children:t});export{t as TanStackContainerForm};
+//# sourceMappingURL=container-form-BdsEX0NH.mjs.map

package/dist/container-form-BdsEX0NH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-form-BdsEX0NH.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/container-form.tsx"],"sourcesContent":["/**\n * Wraps a set of TanStack form sections in a vertically-stacked flex container.\n *\n * @example\n * import { TanStackContainerForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackContainerForm>\n *   <TanStackSectionForm title=\"Personal Info\">\n *     {/* fields *\\/}\n *   </TanStackSectionForm>\n * </TanStackContainerForm>\n */\nexport const TanStackContainerForm: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <div data-slot=\"section-form\" className=\"flex flex-col space-y-4\">\n      {children}\n    </div>\n  );\n};\n"],"mappings":"wCAYA,MAAa,GAA4D,CAAE,cAEvE,EAAC,MAAD,CAAK,YAAU,eAAe,UAAU,0BACrC,UACE,CAAA"}

package/dist/container-form-CxxUYctk.cjs

@@ -0,0 +1,2 @@
+let e=require("react/jsx-runtime");const t=({children:t})=>(0,e.jsx)(`div`,{"data-slot":`section-form`,className:`flex flex-col space-y-4`,children:t});exports.TanStackContainerForm=t;
+//# sourceMappingURL=container-form-CxxUYctk.cjs.map

package/dist/container-form-CxxUYctk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-form-CxxUYctk.cjs","names":[],"sources":["../packages/components/features/tanstack-form/components/forms/container-form.tsx"],"sourcesContent":["/**\n * Wraps a set of TanStack form sections in a vertically-stacked flex container.\n *\n * @example\n * import { TanStackContainerForm } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackContainerForm>\n *   <TanStackSectionForm title=\"Personal Info\">\n *     {/* fields *\\/}\n *   </TanStackSectionForm>\n * </TanStackContainerForm>\n */\nexport const TanStackContainerForm: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <div data-slot=\"section-form\" className=\"flex flex-col space-y-4\">\n      {children}\n    </div>\n  );\n};\n"],"mappings":"mCAYA,MAAa,GAA4D,CAAE,eAEvE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,YAAU,eAAe,UAAU,0BACrC,UACE,CAAA"}

package/dist/context-menu-BOlGSuep.d.cts

@@ -0,0 +1,123 @@
+import { ContextMenu } from "radix-ui";
+
+//#region packages/components/ui/context-menu.d.ts
+/**
+ * Root provider for the ContextMenu — revealed on right-click (or long-press) of the trigger area.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   ContextMenu, ContextMenuTrigger, ContextMenuContent,
+ *   ContextMenuItem, ContextMenuLabel, ContextMenuSeparator,
+ * } from '@customafk/lunas-ui/ui/context-menu';
+ *
+ * <ContextMenu>
+ *   <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuLabel>Actions</ContextMenuLabel>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem>Copy</ContextMenuItem>
+ *     <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
+declare function ContextMenu$1({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Root>): import("react").JSX.Element;
+/** The area that listens for right-click to open the ContextMenu. */
+declare function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Trigger>): import("react").JSX.Element;
+/** Groups related ContextMenuItems under a shared logical section. */
+declare function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Group>): import("react").JSX.Element;
+/** Portals ContextMenu content outside the current DOM hierarchy. */
+declare function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Portal>): import("react").JSX.Element;
+/** Root container for a nested sub-menu inside a ContextMenu. */
+declare function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Sub>): import("react").JSX.Element;
+/** Groups ContextMenuRadioItems so only one can be selected at a time. */
+declare function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.RadioGroup>): import("react").JSX.Element;
+/**
+ * Menu item that reveals a nested ContextMenuSubContent on hover or activation.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.SubTrigger> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Floating panel that contains the items of a nested ContextMenu sub-menu. */
+declare function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.SubContent>): import("react").JSX.Element;
+/** Animated floating panel that contains the context menu items. */
+declare function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Content>): import("react").JSX.Element;
+/**
+ * A single clickable row inside a ContextMenuContent.
+ *
+ * @param inset - When true, adds left padding to align with items that have icons.
+ * @param variant - Visual style: `'default'` or `'destructive'`.
+ */
+declare function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react").JSX.Element;
+/** A checkable context menu item that displays a checkmark when selected. */
+declare function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
+/** A radio-button context menu item; shows a filled circle when selected. */
+declare function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
+/**
+ * Non-interactive label used to describe a group of context menu items.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal dividing line between groups of context menu items. */
+declare function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Separator>): import("react").JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a context menu item. */
+declare function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { ContextMenuItem as a, ContextMenuRadioGroup as c, ContextMenuShortcut as d, ContextMenuSub as f, ContextMenuTrigger as h, ContextMenuGroup as i, ContextMenuRadioItem as l, ContextMenuSubTrigger as m, ContextMenuCheckboxItem as n, ContextMenuLabel as o, ContextMenuSubContent as p, ContextMenuContent as r, ContextMenuPortal as s, ContextMenu$1 as t, ContextMenuSeparator as u };
+//# sourceMappingURL=context-menu-BOlGSuep.d.cts.map

package/dist/context-menu-BOlGSuep.d.mts

@@ -0,0 +1,123 @@
+import { ContextMenu } from "radix-ui";
+
+//#region packages/components/ui/context-menu.d.ts
+/**
+ * Root provider for the ContextMenu — revealed on right-click (or long-press) of the trigger area.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   ContextMenu, ContextMenuTrigger, ContextMenuContent,
+ *   ContextMenuItem, ContextMenuLabel, ContextMenuSeparator,
+ * } from '@customafk/lunas-ui/ui/context-menu';
+ *
+ * <ContextMenu>
+ *   <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuLabel>Actions</ContextMenuLabel>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem>Copy</ContextMenuItem>
+ *     <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
+declare function ContextMenu$1({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Root>): import("react").JSX.Element;
+/** The area that listens for right-click to open the ContextMenu. */
+declare function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Trigger>): import("react").JSX.Element;
+/** Groups related ContextMenuItems under a shared logical section. */
+declare function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Group>): import("react").JSX.Element;
+/** Portals ContextMenu content outside the current DOM hierarchy. */
+declare function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Portal>): import("react").JSX.Element;
+/** Root container for a nested sub-menu inside a ContextMenu. */
+declare function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Sub>): import("react").JSX.Element;
+/** Groups ContextMenuRadioItems so only one can be selected at a time. */
+declare function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenu.RadioGroup>): import("react").JSX.Element;
+/**
+ * Menu item that reveals a nested ContextMenuSubContent on hover or activation.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.SubTrigger> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Floating panel that contains the items of a nested ContextMenu sub-menu. */
+declare function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.SubContent>): import("react").JSX.Element;
+/** Animated floating panel that contains the context menu items. */
+declare function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Content>): import("react").JSX.Element;
+/**
+ * A single clickable row inside a ContextMenuContent.
+ *
+ * @param inset - When true, adds left padding to align with items that have icons.
+ * @param variant - Visual style: `'default'` or `'destructive'`.
+ */
+declare function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react").JSX.Element;
+/** A checkable context menu item that displays a checkmark when selected. */
+declare function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
+/** A radio-button context menu item; shows a filled circle when selected. */
+declare function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
+/**
+ * Non-interactive label used to describe a group of context menu items.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal dividing line between groups of context menu items. */
+declare function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenu.Separator>): import("react").JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a context menu item. */
+declare function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { ContextMenuItem as a, ContextMenuRadioGroup as c, ContextMenuShortcut as d, ContextMenuSub as f, ContextMenuTrigger as h, ContextMenuGroup as i, ContextMenuRadioItem as l, ContextMenuSubTrigger as m, ContextMenuCheckboxItem as n, ContextMenuLabel as o, ContextMenuSubContent as p, ContextMenuContent as r, ContextMenuPortal as s, ContextMenu$1 as t, ContextMenuSeparator as u };
+//# sourceMappingURL=context-menu-BOlGSuep.d.mts.map

package/dist/conversion-funnel-chart-CW_zDfKS.mjs

@@ -0,0 +1,2 @@
+import{formatCompactNumber as e,formatPercent as t,getChartColor as n}from"./features/charts/index.mjs";import{ChartContainer as r,ChartTooltip as i,ChartTooltipContent as a}from"./ui/chart.mjs";import{useMemo as o}from"react";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{Funnel as u,FunnelChart as d,LabelList as f}from"recharts";const p=({data:p,showConversionRates:m=!0,valueFormatter:h=e,className:g,animate:_=!0,height:v})=>{let{chartData:y,config:b}=o(()=>{let e=p[0]?.value??0,r=p.map((r,i)=>{let a=e===0?0:r.value/e,o=m?`${h(r.value)} (${t(a)})`:h(r.value);return{...r,key:r.key||r.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),fill:r.color||n(i),valueLabel:o}});return{chartData:r,config:Object.fromEntries(r.map(e=>[e.key,{label:e.name,color:e.fill}]))}},[p,m,h]);return c(r,{"data-slot":`conversion-funnel-chart`,config:b,className:s(`w-full`,g),style:v===void 0?void 0:{height:v,aspectRatio:`auto`},children:l(d,{margin:{top:8,right:120,bottom:8,left:120},children:[c(i,{content:c(a,{nameKey:`key`,hideLabel:!0})}),l(u,{dataKey:`value`,data:y,isAnimationActive:_,children:[c(f,{dataKey:`name`,position:`left`,offset:12,className:`fill-muted-strong`,fontSize:12}),c(f,{dataKey:`valueLabel`,position:`right`,offset:12,className:`fill-text-positive-strong font-number`,fontSize:12})]})]})})};export{p as ConversionFunnelChart};
+//# sourceMappingURL=conversion-funnel-chart-CW_zDfKS.mjs.map

package/dist/conversion-funnel-chart-CW_zDfKS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversion-funnel-chart-CW_zDfKS.mjs","names":[],"sources":["../packages/components/features/charts/components/conversion-funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Funnel, FunnelChart, LabelList } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, formatPercent, getChartColor } from '../utils';\n\nexport type FunnelStage = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type ConversionFunnelChartProps = BaseChartProps & {\n  /** Funnel stages ordered top (widest) to bottom. */\n  data: FunnelStage[];\n  /** Appends each stage's percentage of the first stage. Defaults to `true`. */\n  showConversionRates?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,\n * checkouts, purchases — with per-stage conversion rates against the first stage.\n *\n * @example\n * ```tsx\n * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ConversionFunnelChart\n *   data={[\n *     { name: 'Sessions', value: 50000 },\n *     { name: 'Product views', value: 32000 },\n *     { name: 'Added to cart', value: 8400 },\n *     { name: 'Purchased', value: 2900 },\n *   ]}\n * />\n * ```\n */\nexport const ConversionFunnelChart = ({\n  data,\n  showConversionRates = true,\n  valueFormatter = formatCompactNumber,\n  className,\n  animate = true,\n  height,\n}: ConversionFunnelChartProps) => {\n  const { chartData, config } = useMemo(() => {\n    const first = data[0]?.value ?? 0;\n    const entries = data.map((stage, index) => {\n      const rate = first === 0 ? 0 : stage.value / first;\n      const valueLabel = showConversionRates ? `${valueFormatter(stage.value)} (${formatPercent(rate)})` : valueFormatter(stage.value);\n      return {\n        ...stage,\n        key: stage.key || stage.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),\n        fill: stage.color || getChartColor(index),\n        valueLabel,\n      };\n    });\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data, showConversionRates, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"conversion-funnel-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <FunnelChart margin={{ top: 8, right: 120, bottom: 8, left: 120 }}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Funnel dataKey=\"value\" data={chartData} isAnimationActive={animate}>\n          <LabelList dataKey=\"name\" position=\"left\" offset={12} className=\"fill-muted-strong\" fontSize={12} />\n          <LabelList dataKey=\"valueLabel\" position=\"right\" offset={12} className=\"fill-text-positive-strong font-number\" fontSize={12} />\n        </Funnel>\n      </FunnelChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"2YA4CA,MAAa,GAAyB,CACpC,OACA,sBAAsB,GACtB,iBAAiB,EACjB,YACA,UAAU,GACV,YACgC,CAChC,GAAM,CAAE,YAAW,UAAW,MAAc,CAC1C,IAAM,EAAQ,EAAK,EAAE,EAAE,OAAS,EAC1B,EAAU,EAAK,KAAK,EAAO,IAAU,CACzC,IAAM,EAAO,IAAU,EAAI,EAAI,EAAM,MAAQ,EACvC,EAAa,EAAsB,GAAG,EAAe,EAAM,KAAK,EAAE,IAAI,EAAc,CAAI,EAAE,GAAK,EAAe,EAAM,KAAK,EAC/H,MAAO,CACL,GAAG,EACH,IAAK,EAAM,KAAO,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EACrE,KAAM,EAAM,OAAS,EAAc,CAAK,EACxC,YACF,CACF,CAAC,EAED,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,EAAM,EAAqB,CAAc,CAAC,EAE9C,OACE,EAAC,EAAD,CACE,YAAU,0BACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAa,OAAQ,CAAE,IAAK,EAAG,MAAO,IAAK,OAAQ,EAAG,KAAM,GAAI,WAAhE,CACE,EAAC,EAAD,CAAc,QAAS,EAAC,EAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,EACzE,EAAC,EAAD,CAAQ,QAAQ,QAAQ,KAAM,EAAW,kBAAmB,WAA5D,CACE,EAAC,EAAD,CAAW,QAAQ,OAAO,SAAS,OAAO,OAAQ,GAAI,UAAU,oBAAoB,SAAU,EAAK,CAAA,EACnG,EAAC,EAAD,CAAW,QAAQ,aAAa,SAAS,QAAQ,OAAQ,GAAI,UAAU,wCAAwC,SAAU,EAAK,CAAA,CACxH,GACG,GACC,CAAA,CAEpB"}

package/dist/conversion-funnel-chart-r2m2QbiQ.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,showConversionRates:s=!0,valueFormatter:c=e.formatCompactNumber,className:l,animate:u=!0,height:d})=>{let{chartData:f,config:p}=(0,n.useMemo)(()=>{let t=o[0]?.value??0,n=o.map((n,r)=>{let i=t===0?0:n.value/t,a=s?`${c(n.value)} (${e.formatPercent(i)})`:c(n.value);return{...n,key:n.key||n.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),fill:n.color||e.getChartColor(r),valueLabel:a}});return{chartData:n,config:Object.fromEntries(n.map(e=>[e.key,{label:e.name,color:e.fill}]))}},[o,s,c]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`conversion-funnel-chart`,config:p,className:(0,r.cn)(`w-full`,l),style:d===void 0?void 0:{height:d,aspectRatio:`auto`},children:(0,i.jsxs)(a.FunnelChart,{margin:{top:8,right:120,bottom:8,left:120},children:[(0,i.jsx)(t.ChartTooltip,{content:(0,i.jsx)(t.ChartTooltipContent,{nameKey:`key`,hideLabel:!0})}),(0,i.jsxs)(a.Funnel,{dataKey:`value`,data:f,isAnimationActive:u,children:[(0,i.jsx)(a.LabelList,{dataKey:`name`,position:`left`,offset:12,className:`fill-muted-strong`,fontSize:12}),(0,i.jsx)(a.LabelList,{dataKey:`valueLabel`,position:`right`,offset:12,className:`fill-text-positive-strong font-number`,fontSize:12})]})]})})};exports.ConversionFunnelChart=o;
+//# sourceMappingURL=conversion-funnel-chart-r2m2QbiQ.cjs.map

package/dist/conversion-funnel-chart-r2m2QbiQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversion-funnel-chart-r2m2QbiQ.cjs","names":["formatCompactNumber","formatPercent","getChartColor","ChartContainer","FunnelChart","ChartTooltip","ChartTooltipContent","Funnel","LabelList"],"sources":["../packages/components/features/charts/components/conversion-funnel-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Funnel, FunnelChart, LabelList } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, formatPercent, getChartColor } from '../utils';\n\nexport type FunnelStage = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type ConversionFunnelChartProps = BaseChartProps & {\n  /** Funnel stages ordered top (widest) to bottom. */\n  data: FunnelStage[];\n  /** Appends each stage's percentage of the first stage. Defaults to `true`. */\n  showConversionRates?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\n/**\n * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,\n * checkouts, purchases — with per-stage conversion rates against the first stage.\n *\n * @example\n * ```tsx\n * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';\n *\n * <ConversionFunnelChart\n *   data={[\n *     { name: 'Sessions', value: 50000 },\n *     { name: 'Product views', value: 32000 },\n *     { name: 'Added to cart', value: 8400 },\n *     { name: 'Purchased', value: 2900 },\n *   ]}\n * />\n * ```\n */\nexport const ConversionFunnelChart = ({\n  data,\n  showConversionRates = true,\n  valueFormatter = formatCompactNumber,\n  className,\n  animate = true,\n  height,\n}: ConversionFunnelChartProps) => {\n  const { chartData, config } = useMemo(() => {\n    const first = data[0]?.value ?? 0;\n    const entries = data.map((stage, index) => {\n      const rate = first === 0 ? 0 : stage.value / first;\n      const valueLabel = showConversionRates ? `${valueFormatter(stage.value)} (${formatPercent(rate)})` : valueFormatter(stage.value);\n      return {\n        ...stage,\n        key: stage.key || stage.name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),\n        fill: stage.color || getChartColor(index),\n        valueLabel,\n      };\n    });\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return { chartData: entries, config: chartConfig };\n  }, [data, showConversionRates, valueFormatter]);\n\n  return (\n    <ChartContainer\n      data-slot=\"conversion-funnel-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <FunnelChart margin={{ top: 8, right: 120, bottom: 8, left: 120 }}>\n        <ChartTooltip content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Funnel dataKey=\"value\" data={chartData} isAnimationActive={animate}>\n          <LabelList dataKey=\"name\" position=\"left\" offset={12} className=\"fill-muted-strong\" fontSize={12} />\n          <LabelList dataKey=\"valueLabel\" position=\"right\" offset={12} className=\"fill-text-positive-strong font-number\" fontSize={12} />\n        </Funnel>\n      </FunnelChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA4CA,MAAa,GAAyB,CACpC,OACA,sBAAsB,GACtB,iBAAiBA,EAAAA,oBACjB,YACA,UAAU,GACV,YACgC,CAChC,GAAM,CAAE,YAAW,WAAA,EAAA,EAAA,QAAA,KAAyB,CAC1C,IAAM,EAAQ,EAAK,EAAE,EAAE,OAAS,EAC1B,EAAU,EAAK,KAAK,EAAO,IAAU,CACzC,IAAM,EAAO,IAAU,EAAI,EAAI,EAAM,MAAQ,EACvC,EAAa,EAAsB,GAAG,EAAe,EAAM,KAAK,EAAE,IAAIC,EAAAA,cAAc,CAAI,EAAE,GAAK,EAAe,EAAM,KAAK,EAC/H,MAAO,CACL,GAAG,EACH,IAAK,EAAM,KAAO,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EACrE,KAAM,EAAM,OAASC,EAAAA,cAAc,CAAK,EACxC,YACF,CACF,CAAC,EAED,MAAO,CAAE,UAAW,EAAS,OADI,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAC/E,CAAE,CACnD,EAAG,CAAC,EAAM,EAAqB,CAAc,CAAC,EAE9C,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,0BACF,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,YAAD,CAAa,OAAQ,CAAE,IAAK,EAAG,MAAO,IAAK,OAAQ,EAAG,KAAM,GAAI,WAAhE,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,GACzE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,QAAQ,QAAQ,KAAM,EAAW,kBAAmB,WAA5D,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,OAAO,SAAS,OAAO,OAAQ,GAAI,UAAU,oBAAoB,SAAU,EAAK,CAAA,GACnG,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,aAAa,SAAS,QAAQ,OAAQ,GAAI,UAAU,wCAAwC,SAAU,EAAK,CAAA,CACxH,GACG,GACC,CAAA,CAEpB"}

package/dist/correlation-scatter-chart-Djtt7NU7.mjs

@@ -0,0 +1,2 @@
+import{ChartContainer as e,ChartTooltip as t,ChartTooltipContent as n}from"./ui/chart.mjs";import{useMemo as r}from"react";import{cn as i}from"@customafk/react-toolkit/utils";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{CartesianGrid as s,Scatter as c,ScatterChart as l,XAxis as u,YAxis as d,ZAxis as f}from"recharts";const p=({data:p,label:m=`Points`,color:h=`var(--chart-1)`,xLabel:g,yLabel:_,xFormatter:v=e=>e.toLocaleString(`en-US`),yFormatter:y=e=>e.toLocaleString(`en-US`),showBubbleSize:b=!1,showGrid:x=!0,className:S,animate:C=!0,height:w})=>a(e,{"data-slot":`correlation-scatter-chart`,config:r(()=>({y:{label:m,color:h}}),[m,h]),className:i(`w-full`,S),style:w===void 0?void 0:{height:w,aspectRatio:`auto`},children:o(l,{margin:{top:8,right:12,bottom:0,left:12},children:[x&&a(s,{}),a(u,{type:`number`,dataKey:`x`,name:g,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:v}),a(d,{type:`number`,dataKey:`y`,name:_,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:y}),b&&a(f,{type:`number`,dataKey:`z`,range:[64,400]}),a(t,{cursor:{strokeDasharray:`3 3`},content:a(n,{hideLabel:!0,formatter:(e,t,n)=>{let r=n.payload;return o(`div`,{className:`grid gap-0.5`,children:[r.name&&a(`span`,{className:`font-medium text-muted-strong`,children:r.name}),o(`span`,{className:`text-muted`,children:[g||`x`,`: `,a(`span`,{className:`font-medium font-number text-text-positive-strong`,children:v(r.x)})]}),o(`span`,{className:`text-muted`,children:[_||`y`,`: `,a(`span`,{className:`font-medium font-number text-text-positive-strong`,children:y(r.y)})]})]})}})}),a(c,{data:p,fill:h,isAnimationActive:C})]})});export{p as CorrelationScatterChart};
+//# sourceMappingURL=correlation-scatter-chart-Djtt7NU7.mjs.map

package/dist/correlation-scatter-chart-Djtt7NU7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"correlation-scatter-chart-Djtt7NU7.mjs","names":[],"sources":["../packages/components/features/charts/components/correlation-scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\nimport type { BaseChartProps, ScatterPoint } from '../types';\n\nexport type CorrelationScatterChartProps = BaseChartProps & {\n  data: ScatterPoint[];\n  /** Series label used in the theme config. Defaults to `'Points'`. */\n  label?: string;\n  color?: string;\n  xLabel?: string;\n  yLabel?: string;\n  xFormatter?: (value: number) => string;\n  yFormatter?: (value: number) => string;\n  /** Sizes each point from its `z` value. Defaults to `false`. */\n  showBubbleSize?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A scatter (or bubble, with `showBubbleSize`) chart for correlating two metrics, with an\n * optional third dimension mapped to point size.\n *\n * @example\n * ```tsx\n * import { CorrelationScatterChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CorrelationScatterChart\n *   data={[\n *     { x: 12, y: 4200, z: 40, name: 'Product A' },\n *     { x: 18, y: 5100, z: 65, name: 'Product B' },\n *   ]}\n *   xLabel=\"Price ($)\"\n *   yLabel=\"Units sold\"\n *   showBubbleSize\n * />\n * ```\n */\nexport const CorrelationScatterChart = ({\n  data,\n  label = 'Points',\n  color = 'var(--chart-1)',\n  xLabel,\n  yLabel,\n  xFormatter = value => value.toLocaleString('en-US'),\n  yFormatter = value => value.toLocaleString('en-US'),\n  showBubbleSize = false,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CorrelationScatterChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ y: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"correlation-scatter-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid />}\n        <XAxis type=\"number\" dataKey=\"x\" name={xLabel} tickLine={false} axisLine={false} tickMargin={8} tickFormatter={xFormatter} />\n        <YAxis type=\"number\" dataKey=\"y\" name={yLabel} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={yFormatter} />\n        {showBubbleSize && <ZAxis type=\"number\" dataKey=\"z\" range={[64, 400]} />}\n        <ChartTooltip\n          cursor={{ strokeDasharray: '3 3' }}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              formatter={(_value, _name, item) => {\n                const point = item.payload as ScatterPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    {point.name && <span className=\"font-medium text-muted-strong\">{point.name}</span>}\n                    <span className=\"text-muted\">\n                      {xLabel || 'x'}: <span className=\"font-medium font-number text-text-positive-strong\">{xFormatter(point.x)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      {yLabel || 'y'}: <span className=\"font-medium font-number text-text-positive-strong\">{yFormatter(point.y)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter data={data} fill={color} isAnimationActive={animate} />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"0UA4CA,MAAa,GAA2B,CACtC,OACA,QAAQ,SACR,QAAQ,iBACR,SACA,SACA,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,iBAAiB,GACjB,WAAW,GACX,YACA,UAAU,GACV,YAKE,EAAC,EAAD,CACE,YAAU,4BACV,OALW,OAA4B,CAAE,EAAG,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKjE,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAc,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA/D,CACG,GAAY,EAAC,EAAD,CAAgB,CAAA,EAC7B,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAa,CAAA,EAC5H,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAa,CAAA,EACtI,GAAkB,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,MAAO,CAAC,GAAI,GAAG,CAAI,CAAA,EACvE,EAAC,EAAD,CACE,OAAQ,CAAE,gBAAiB,KAAM,EACjC,QACE,EAAC,EAAD,CACE,UAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAC,MAAD,CAAK,UAAU,wBAAf,CACG,EAAM,MAAQ,EAAC,OAAD,CAAM,UAAU,yCAAiC,EAAM,IAAW,CAAA,EACjF,EAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,KAAE,EAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,IACN,EAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,KAAE,EAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,GACH,GAET,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAe,OAAM,KAAM,EAAO,kBAAmB,CAAU,CAAA,CACnD,GACA,CAAA"}

package/dist/correlation-scatter-chart-HF48YUIB.cjs

@@ -0,0 +1,2 @@
+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=({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})]})});exports.CorrelationScatterChart=a;
+//# sourceMappingURL=correlation-scatter-chart-HF48YUIB.cjs.map

package/dist/correlation-scatter-chart-HF48YUIB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"correlation-scatter-chart-HF48YUIB.cjs","names":["ChartContainer","ScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","Scatter"],"sources":["../packages/components/features/charts/components/correlation-scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from 'recharts';\nimport type { BaseChartProps, ScatterPoint } from '../types';\n\nexport type CorrelationScatterChartProps = BaseChartProps & {\n  data: ScatterPoint[];\n  /** Series label used in the theme config. Defaults to `'Points'`. */\n  label?: string;\n  color?: string;\n  xLabel?: string;\n  yLabel?: string;\n  xFormatter?: (value: number) => string;\n  yFormatter?: (value: number) => string;\n  /** Sizes each point from its `z` value. Defaults to `false`. */\n  showBubbleSize?: boolean;\n  showGrid?: boolean;\n};\n\n/**\n * A scatter (or bubble, with `showBubbleSize`) chart for correlating two metrics, with an\n * optional third dimension mapped to point size.\n *\n * @example\n * ```tsx\n * import { CorrelationScatterChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CorrelationScatterChart\n *   data={[\n *     { x: 12, y: 4200, z: 40, name: 'Product A' },\n *     { x: 18, y: 5100, z: 65, name: 'Product B' },\n *   ]}\n *   xLabel=\"Price ($)\"\n *   yLabel=\"Units sold\"\n *   showBubbleSize\n * />\n * ```\n */\nexport const CorrelationScatterChart = ({\n  data,\n  label = 'Points',\n  color = 'var(--chart-1)',\n  xLabel,\n  yLabel,\n  xFormatter = value => value.toLocaleString('en-US'),\n  yFormatter = value => value.toLocaleString('en-US'),\n  showBubbleSize = false,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CorrelationScatterChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ y: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"correlation-scatter-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ScatterChart margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid />}\n        <XAxis type=\"number\" dataKey=\"x\" name={xLabel} tickLine={false} axisLine={false} tickMargin={8} tickFormatter={xFormatter} />\n        <YAxis type=\"number\" dataKey=\"y\" name={yLabel} tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={yFormatter} />\n        {showBubbleSize && <ZAxis type=\"number\" dataKey=\"z\" range={[64, 400]} />}\n        <ChartTooltip\n          cursor={{ strokeDasharray: '3 3' }}\n          content={\n            <ChartTooltipContent\n              hideLabel\n              formatter={(_value, _name, item) => {\n                const point = item.payload as ScatterPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    {point.name && <span className=\"font-medium text-muted-strong\">{point.name}</span>}\n                    <span className=\"text-muted\">\n                      {xLabel || 'x'}: <span className=\"font-medium font-number text-text-positive-strong\">{xFormatter(point.x)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      {yLabel || 'y'}: <span className=\"font-medium font-number text-text-positive-strong\">{yFormatter(point.y)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        <Scatter data={data} fill={color} isAnimationActive={animate} />\n      </ScatterChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"0JA4CA,MAAa,GAA2B,CACtC,OACA,QAAQ,SACR,QAAQ,iBACR,SACA,SACA,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,aAAa,GAAS,EAAM,eAAe,OAAO,EAClD,iBAAiB,GACjB,WAAW,GACX,YACA,UAAU,GACV,aAKE,EAAA,EAAA,IAAA,CAACA,EAAAA,eAAD,CACE,YAAU,4BACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,EAAG,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKjE,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,WAA/D,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,GAC7B,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAa,CAAA,GAC5H,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,KAAM,EAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAa,CAAA,EACtI,IAAkB,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,IAAI,MAAO,CAAC,GAAI,GAAG,CAAI,CAAA,GACvE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,CAAE,gBAAiB,KAAM,EACjC,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,UAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,CACG,EAAM,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,yCAAiC,EAAM,IAAW,CAAA,GACjF,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,MAAE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,KACN,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,sBAAhB,CACG,GAAU,IAAI,MAAE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,6DAAqD,EAAW,EAAM,CAAC,CAAQ,CAAA,CAC5G,GACH,GAET,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAe,OAAM,KAAM,EAAO,kBAAmB,CAAU,CAAA,CACnD,GACA,CAAA"}

package/dist/country-C8QijcHF.d.mts

@@ -0,0 +1,21 @@
+import { n as ECountry } from "./types-cKvPPVBe.mjs";
+
+//#region packages/components/data-display/country.d.ts
+type CountryDisplayProps = {
+  /** The country enum value to display; renders "No country" when `null` or `undefined`. */country?: ECountry | null;
+};
+/**
+ * Displays a country flag (SVG) alongside the country's English name, or a muted "No country" label when the value is absent.
+ *
+ * @example
+ * ```tsx
+ * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';
+ * import { ECountry } from '@customafk/lunas-ui/types';
+ *
+ * <CountryDisplay country={ECountry.VIETNAM} />
+ * ```
+ */
+declare const CountryDisplay: React.FC<CountryDisplayProps>;
+//#endregion
+export { CountryDisplay as t };
+//# sourceMappingURL=country-C8QijcHF.d.mts.map