@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/command-CHSJVU9o.d.cts

@@ -0,0 +1,87 @@
+import { t as Dialog } from "./dialog-BASlxWF_.cjs";
+import { Command } from "cmdk";
+
+//#region packages/components/ui/command.d.ts
+/**
+ * A cmdk-powered command palette for searching and executing commands.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Command, CommandInput, CommandList, CommandEmpty,
+ *   CommandGroup, CommandItem,
+ * } from '@customafk/lunas-ui/ui/command';
+ *
+ * <Command>
+ *   <CommandInput placeholder="Type a command…" />
+ *   <CommandList>
+ *     <CommandEmpty>No results found.</CommandEmpty>
+ *     <CommandGroup heading="Suggestions">
+ *       <CommandItem>Calendar</CommandItem>
+ *       <CommandItem>Search</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ * ```
+ */
+declare function Command$1({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command>): import("react").JSX.Element;
+/**
+ * A Command palette rendered inside a Dialog overlay.
+ *
+ * @param title - Accessible title for the dialog (screen-reader only).
+ * @param description - Accessible description for the dialog (screen-reader only).
+ * @param showCloseButton - Whether to show the built-in close button on the dialog.
+ */
+declare function CommandDialog({
+  title,
+  description,
+  children,
+  className,
+  showCloseButton,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}): import("react").JSX.Element;
+/** Search input with a leading search icon that filters CommandItems in real time. */
+declare function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Input>): import("react").JSX.Element;
+/** Scrollable list that renders filtered CommandGroups and CommandItems. */
+declare function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.List>): import("react").JSX.Element;
+/** Fallback message displayed when no CommandItems match the current search query. */
+declare function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof Command.Empty>): import("react").JSX.Element;
+/** Groups CommandItems under an optional heading label. */
+declare function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
+/** Horizontal dividing line between groups in a CommandList. */
+declare function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
+/** A selectable row inside a CommandGroup that is highlighted when active or hovered. */
+declare function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof Command.Item>): import("react").JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a CommandItem. */
+declare function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { CommandInput as a, CommandSeparator as c, CommandGroup as i, CommandShortcut as l, CommandDialog as n, CommandItem as o, CommandEmpty as r, CommandList as s, Command$1 as t };
+//# sourceMappingURL=command-CHSJVU9o.d.cts.map

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/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