npm - @customafk/lunas-ui - Versions diffs - 0.2.74 → 0.2.76 - Mend

@customafk/lunas-ui 0.2.74 → 0.2.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (806) hide show

package/dist/ui/status.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status.mjs","names":[],"sources":["../../packages/components/ui/status.variants.ts","../../packages/components/ui/status.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const statusVariants = cva('inline-flex w-fit items-center font-medium transition-colors duration-150', {\n variants: {\n variant: {\n dot: 'rounded border bg-background',\n solid: 'rounded text-white shadow-btn',\n soft: 'rounded',\n bar: 'gap-2 rounded-none border-l-4 pl-2',\n },\n color: {\n none: '',\n slate: '',\n gray: '',\n zinc: '',\n neutral: '',\n stone: '',\n red: '',\n orange: '',\n amber: '',\n yellow: '',\n lime: '',\n green: '',\n emerald: '',\n teal: '',\n cyan: '',\n sky: '',\n blue: '',\n indigo: '',\n violet: '',\n purple: '',\n fuchsia: '',\n pink: '',\n rose: '',\n },\n size: {\n sm: 'gap-1 px-1.5 py-0.5 text-[11px]',\n md: 'gap-1 px-2 py-0.5 text-xs',\n lg: 'gap-1.5 px-2.5 py-1 text-sm',\n },\n },\n defaultVariants: { variant: 'dot', color: 'gray', size: 'md' },\n compoundVariants: [\n // dot — outlined pill, colored dot + colored text\n { variant: 'dot', color: 'none', className: 'border-dashed border-gray-300 text-gray-400' },\n { variant: 'dot', color: 'slate', className: 'border-slate-300 text-slate-700' },\n { variant: 'dot', color: 'gray', className: 'border-gray-300 text-gray-700' },\n { variant: 'dot', color: 'zinc', className: 'border-zinc-300 text-zinc-700' },\n { variant: 'dot', color: 'neutral', className: 'border-neutral-300 text-neutral-700' },\n { variant: 'dot', color: 'stone', className: 'border-stone-300 text-stone-700' },\n { variant: 'dot', color: 'red', className: 'border-red-300 text-red-700' },\n { variant: 'dot', color: 'orange', className: 'border-orange-300 text-orange-700' },\n { variant: 'dot', color: 'amber', className: 'border-amber-300 text-amber-700' },\n { variant: 'dot', color: 'yellow', className: 'border-yellow-300 text-yellow-700' },\n { variant: 'dot', color: 'lime', className: 'border-lime-300 text-lime-700' },\n { variant: 'dot', color: 'green', className: 'border-green-300 text-green-700' },\n { variant: 'dot', color: 'emerald', className: 'border-emerald-300 text-emerald-700' },\n { variant: 'dot', color: 'teal', className: 'border-teal-300 text-teal-700' },\n { variant: 'dot', color: 'cyan', className: 'border-cyan-300 text-cyan-700' },\n { variant: 'dot', color: 'sky', className: 'border-sky-300 text-sky-700' },\n { variant: 'dot', color: 'blue', className: 'border-blue-300 text-blue-700' },\n { variant: 'dot', color: 'indigo', className: 'border-indigo-300 text-indigo-700' },\n { variant: 'dot', color: 'violet', className: 'border-violet-300 text-violet-700' },\n { variant: 'dot', color: 'purple', className: 'border-purple-300 text-purple-700' },\n { variant: 'dot', color: 'fuchsia', className: 'border-fuchsia-300 text-fuchsia-700' },\n { variant: 'dot', color: 'pink', className: 'border-pink-300 text-pink-700' },\n { variant: 'dot', color: 'rose', className: 'border-rose-300 text-rose-700' },\n // solid — filled pill, white text\n {\n variant: 'solid',\n color: 'none',\n className: 'border border-dashed border-gray-300 bg-transparent text-gray-400',\n },\n { variant: 'solid', color: 'slate', className: 'bg-slate-500' },\n { variant: 'solid', color: 'gray', className: 'bg-gray-500' },\n { variant: 'solid', color: 'zinc', className: 'bg-zinc-500' },\n { variant: 'solid', color: 'neutral', className: 'bg-neutral-500' },\n { variant: 'solid', color: 'stone', className: 'bg-stone-500' },\n { variant: 'solid', color: 'red', className: 'bg-red-500' },\n { variant: 'solid', color: 'orange', className: 'bg-orange-500' },\n { variant: 'solid', color: 'amber', className: 'bg-amber-500' },\n { variant: 'solid', color: 'yellow', className: 'bg-yellow-500' },\n { variant: 'solid', color: 'lime', className: 'bg-lime-500' },\n { variant: 'solid', color: 'green', className: 'bg-green-500' },\n { variant: 'solid', color: 'emerald', className: 'bg-emerald-500' },\n { variant: 'solid', color: 'teal', className: 'bg-teal-500' },\n { variant: 'solid', color: 'cyan', className: 'bg-cyan-500' },\n { variant: 'solid', color: 'sky', className: 'bg-sky-500' },\n { variant: 'solid', color: 'blue', className: 'bg-blue-500' },\n { variant: 'solid', color: 'indigo', className: 'bg-indigo-500' },\n { variant: 'solid', color: 'violet', className: 'bg-violet-500' },\n { variant: 'solid', color: 'purple', className: 'bg-purple-500' },\n { variant: 'solid', color: 'fuchsia', className: 'bg-fuchsia-500' },\n { variant: 'solid', color: 'pink', className: 'bg-pink-500' },\n { variant: 'solid', color: 'rose', className: 'bg-rose-500' },\n // soft — tinted background, bold colored text, no dot\n { variant: 'soft', color: 'none', className: 'bg-gray-50 text-gray-400' },\n { variant: 'soft', color: 'slate', className: 'bg-slate-100 text-slate-700' },\n { variant: 'soft', color: 'gray', className: 'bg-gray-100 text-gray-700' },\n { variant: 'soft', color: 'zinc', className: 'bg-zinc-100 text-zinc-700' },\n { variant: 'soft', color: 'neutral', className: 'bg-neutral-100 text-neutral-700' },\n { variant: 'soft', color: 'stone', className: 'bg-stone-100 text-stone-700' },\n { variant: 'soft', color: 'red', className: 'bg-red-100 text-red-700' },\n { variant: 'soft', color: 'orange', className: 'bg-orange-100 text-orange-700' },\n { variant: 'soft', color: 'amber', className: 'bg-amber-100 text-amber-700' },\n { variant: 'soft', color: 'yellow', className: 'bg-yellow-100 text-yellow-700' },\n { variant: 'soft', color: 'lime', className: 'bg-lime-100 text-lime-700' },\n { variant: 'soft', color: 'green', className: 'bg-green-100 text-green-700' },\n { variant: 'soft', color: 'emerald', className: 'bg-emerald-100 text-emerald-700' },\n { variant: 'soft', color: 'teal', className: 'bg-teal-100 text-teal-700' },\n { variant: 'soft', color: 'cyan', className: 'bg-cyan-100 text-cyan-700' },\n { variant: 'soft', color: 'sky', className: 'bg-sky-100 text-sky-700' },\n { variant: 'soft', color: 'blue', className: 'bg-blue-100 text-blue-700' },\n { variant: 'soft', color: 'indigo', className: 'bg-indigo-100 text-indigo-700' },\n { variant: 'soft', color: 'violet', className: 'bg-violet-100 text-violet-700' },\n { variant: 'soft', color: 'purple', className: 'bg-purple-100 text-purple-700' },\n { variant: 'soft', color: 'fuchsia', className: 'bg-fuchsia-100 text-fuchsia-700' },\n { variant: 'soft', color: 'pink', className: 'bg-pink-100 text-pink-700' },\n { variant: 'soft', color: 'rose', className: 'bg-rose-100 text-rose-700' },\n // bar — plain text with a colored left accent bar, for lists/timelines\n { variant: 'bar', color: 'none', className: 'border-gray-300 border-dashed text-gray-400' },\n { variant: 'bar', color: 'slate', className: 'border-slate-500 text-slate-700' },\n { variant: 'bar', color: 'gray', className: 'border-gray-500 text-gray-700' },\n { variant: 'bar', color: 'zinc', className: 'border-zinc-500 text-zinc-700' },\n { variant: 'bar', color: 'neutral', className: 'border-neutral-500 text-neutral-700' },\n { variant: 'bar', color: 'stone', className: 'border-stone-500 text-stone-700' },\n { variant: 'bar', color: 'red', className: 'border-red-500 text-red-700' },\n { variant: 'bar', color: 'orange', className: 'border-orange-500 text-orange-700' },\n { variant: 'bar', color: 'amber', className: 'border-amber-500 text-amber-700' },\n { variant: 'bar', color: 'yellow', className: 'border-yellow-500 text-yellow-700' },\n { variant: 'bar', color: 'lime', className: 'border-lime-500 text-lime-700' },\n { variant: 'bar', color: 'green', className: 'border-green-500 text-green-700' },\n { variant: 'bar', color: 'emerald', className: 'border-emerald-500 text-emerald-700' },\n { variant: 'bar', color: 'teal', className: 'border-teal-500 text-teal-700' },\n { variant: 'bar', color: 'cyan', className: 'border-cyan-500 text-cyan-700' },\n { variant: 'bar', color: 'sky', className: 'border-sky-500 text-sky-700' },\n { variant: 'bar', color: 'blue', className: 'border-blue-500 text-blue-700' },\n { variant: 'bar', color: 'indigo', className: 'border-indigo-500 text-indigo-700' },\n { variant: 'bar', color: 'violet', className: 'border-violet-500 text-violet-700' },\n { variant: 'bar', color: 'purple', className: 'border-purple-500 text-purple-700' },\n { variant: 'bar', color: 'fuchsia', className: 'border-fuchsia-500 text-fuchsia-700' },\n { variant: 'bar', color: 'pink', className: 'border-pink-500 text-pink-700' },\n { variant: 'bar', color: 'rose', className: 'border-rose-500 text-rose-700' },\n ],\n});\n\nexport type StatusVariants = VariantProps<typeof statusVariants>;\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type StatusVariants, statusVariants } from './status.variants';\n\nconst dotColorMap: Record<NonNullable<StatusVariants['color']>, string> = {\n none: 'border border-dashed border-gray-300 bg-transparent',\n slate: 'bg-slate-500',\n gray: 'bg-gray-500',\n zinc: 'bg-zinc-500',\n neutral: 'bg-neutral-500',\n stone: 'bg-stone-500',\n red: 'bg-red-500',\n orange: 'bg-orange-500',\n amber: 'bg-amber-500',\n yellow: 'bg-yellow-500',\n lime: 'bg-lime-500',\n green: 'bg-green-500',\n emerald: 'bg-emerald-500',\n teal: 'bg-teal-500',\n cyan: 'bg-cyan-500',\n sky: 'bg-sky-500',\n blue: 'bg-blue-500',\n indigo: 'bg-indigo-500',\n violet: 'bg-violet-500',\n purple: 'bg-purple-500',\n fuchsia: 'bg-fuchsia-500',\n pink: 'bg-pink-500',\n rose: 'bg-rose-500',\n};\n\nconst solidDotColorMap: Record<NonNullable<StatusVariants['color']>, string> = {\n none: 'border border-dashed border-gray-300 bg-transparent',\n slate: 'bg-slate-300',\n gray: 'bg-gray-300',\n zinc: 'bg-zinc-300',\n neutral: 'bg-neutral-300',\n stone: 'bg-stone-300',\n red: 'bg-red-300',\n orange: 'bg-orange-300',\n amber: 'bg-amber-300',\n yellow: 'bg-yellow-300',\n lime: 'bg-lime-300',\n green: 'bg-green-300',\n emerald: 'bg-emerald-300',\n teal: 'bg-teal-300',\n cyan: 'bg-cyan-300',\n sky: 'bg-sky-300',\n blue: 'bg-blue-300',\n indigo: 'bg-indigo-300',\n violet: 'bg-violet-300',\n purple: 'bg-purple-300',\n fuchsia: 'bg-fuchsia-300',\n pink: 'bg-pink-300',\n rose: 'bg-rose-300',\n};\n\n/*\n Props for the `Status` component.\n \n @property variant - Visual style — `'dot'` (outlined pill with a colored dot, default), `'solid'`\n * (filled pill with a colored dot), `'soft'` (tinted pill, no dot), or `'bar'` (plain text with a\n * colored left accent bar, for lists/timelines).\n * @property color - Full Tailwind color family, e.g. `'red'` \| `'orange'` \| `'green'` \| `'cyan'` \|\n * `'blue'` \| `'pink'` \| ... , or `'none'` for an unset/dashed neutral state. Defaults to `'gray'`.\n * @property size - `'sm'` \| `'md'` (default) \| `'lg'`.\n /\nexport type StatusProps = StatusVariants & React.ComponentPropsWithoutRef<'span'>;\n\n/\n Color-coded status indicator for pipeline/lifecycle states (e.g. lead, deal, order status).\n \n @example\n * ```tsx\n * import { Status } from '@customafk/lunas-ui/ui/status';\n \n <Status color=\"orange\">Đang tư vấn</Status>\n * <Status variant=\"soft\" color=\"green\">Đang đàm phán</Status>\n * <Status variant=\"bar\" color=\"pink\">Hoàn tất giao dịch</Status>\n * ```\n */\nfunction Status({ className, variant = 'dot', color = 'gray', size, children, ...props }: StatusProps) {\n const resolvedColor = color ?? 'gray';\n const showDot = variant === 'dot' \|\| variant === 'solid';\n\n return (\n <span className={cn(statusVariants({ variant, color, size }), className)} {...props}>\n {showDot && (\n <span\n aria-hidden\n className={cn('inline-block size-1.5 shrink-0 rounded-full', variant === 'solid' ? solidDotColorMap[resolvedColor] : dotColorMap[resolvedColor])}\n />\n )}\n {children}\n </span>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Status, statusVariants };\n"],"mappings":"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"}
1	+ {"version":3,"file":"status.mjs","names":[],"sources":["../../packages/components/ui/status.variants.ts","../../packages/components/ui/status.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const statusVariants = cva('inline-flex w-fit items-center font-medium transition-colors duration-150', {\n variants: {\n variant: {\n dot: 'rounded border bg-background',\n solid: 'rounded text-white shadow-btn',\n soft: 'rounded',\n bar: 'gap-2 rounded-none border-l-4 pl-2',\n },\n color: {\n none: '',\n slate: '',\n gray: '',\n zinc: '',\n neutral: '',\n stone: '',\n red: '',\n orange: '',\n amber: '',\n yellow: '',\n lime: '',\n green: '',\n emerald: '',\n teal: '',\n cyan: '',\n sky: '',\n blue: '',\n indigo: '',\n violet: '',\n purple: '',\n fuchsia: '',\n pink: '',\n rose: '',\n },\n size: {\n sm: 'gap-1 px-1.5 py-0.5 text-[11px]',\n md: 'gap-1 px-2 py-0.5 text-xs',\n lg: 'gap-1.5 px-2.5 py-1 text-sm',\n },\n },\n defaultVariants: { variant: 'dot', color: 'gray', size: 'md' },\n compoundVariants: [\n // dot — outlined pill, colored dot + colored text\n { variant: 'dot', color: 'none', className: 'border-dashed border-gray-300 text-gray-400' },\n { variant: 'dot', color: 'slate', className: 'border-slate-300 text-slate-700' },\n { variant: 'dot', color: 'gray', className: 'border-gray-300 text-gray-700' },\n { variant: 'dot', color: 'zinc', className: 'border-zinc-300 text-zinc-700' },\n { variant: 'dot', color: 'neutral', className: 'border-neutral-300 text-neutral-700' },\n { variant: 'dot', color: 'stone', className: 'border-stone-300 text-stone-700' },\n { variant: 'dot', color: 'red', className: 'border-red-300 text-red-700' },\n { variant: 'dot', color: 'orange', className: 'border-orange-300 text-orange-700' },\n { variant: 'dot', color: 'amber', className: 'border-amber-300 text-amber-700' },\n { variant: 'dot', color: 'yellow', className: 'border-yellow-300 text-yellow-700' },\n { variant: 'dot', color: 'lime', className: 'border-lime-300 text-lime-700' },\n { variant: 'dot', color: 'green', className: 'border-green-300 text-green-700' },\n { variant: 'dot', color: 'emerald', className: 'border-emerald-300 text-emerald-700' },\n { variant: 'dot', color: 'teal', className: 'border-teal-300 text-teal-700' },\n { variant: 'dot', color: 'cyan', className: 'border-cyan-300 text-cyan-700' },\n { variant: 'dot', color: 'sky', className: 'border-sky-300 text-sky-700' },\n { variant: 'dot', color: 'blue', className: 'border-blue-300 text-blue-700' },\n { variant: 'dot', color: 'indigo', className: 'border-indigo-300 text-indigo-700' },\n { variant: 'dot', color: 'violet', className: 'border-violet-300 text-violet-700' },\n { variant: 'dot', color: 'purple', className: 'border-purple-300 text-purple-700' },\n { variant: 'dot', color: 'fuchsia', className: 'border-fuchsia-300 text-fuchsia-700' },\n { variant: 'dot', color: 'pink', className: 'border-pink-300 text-pink-700' },\n { variant: 'dot', color: 'rose', className: 'border-rose-300 text-rose-700' },\n // solid — filled pill, white text\n {\n variant: 'solid',\n color: 'none',\n className: 'border border-dashed border-gray-300 bg-transparent text-gray-400',\n },\n { variant: 'solid', color: 'slate', className: 'bg-slate-500' },\n { variant: 'solid', color: 'gray', className: 'bg-gray-500' },\n { variant: 'solid', color: 'zinc', className: 'bg-zinc-500' },\n { variant: 'solid', color: 'neutral', className: 'bg-neutral-500' },\n { variant: 'solid', color: 'stone', className: 'bg-stone-500' },\n { variant: 'solid', color: 'red', className: 'bg-red-500' },\n { variant: 'solid', color: 'orange', className: 'bg-orange-500' },\n { variant: 'solid', color: 'amber', className: 'bg-amber-500' },\n { variant: 'solid', color: 'yellow', className: 'bg-yellow-500' },\n { variant: 'solid', color: 'lime', className: 'bg-lime-500' },\n { variant: 'solid', color: 'green', className: 'bg-green-500' },\n { variant: 'solid', color: 'emerald', className: 'bg-emerald-500' },\n { variant: 'solid', color: 'teal', className: 'bg-teal-500' },\n { variant: 'solid', color: 'cyan', className: 'bg-cyan-500' },\n { variant: 'solid', color: 'sky', className: 'bg-sky-500' },\n { variant: 'solid', color: 'blue', className: 'bg-blue-500' },\n { variant: 'solid', color: 'indigo', className: 'bg-indigo-500' },\n { variant: 'solid', color: 'violet', className: 'bg-violet-500' },\n { variant: 'solid', color: 'purple', className: 'bg-purple-500' },\n { variant: 'solid', color: 'fuchsia', className: 'bg-fuchsia-500' },\n { variant: 'solid', color: 'pink', className: 'bg-pink-500' },\n { variant: 'solid', color: 'rose', className: 'bg-rose-500' },\n // soft — tinted background, bold colored text, no dot\n { variant: 'soft', color: 'none', className: 'bg-gray-50 text-gray-400' },\n { variant: 'soft', color: 'slate', className: 'bg-slate-100 text-slate-700' },\n { variant: 'soft', color: 'gray', className: 'bg-gray-100 text-gray-700' },\n { variant: 'soft', color: 'zinc', className: 'bg-zinc-100 text-zinc-700' },\n { variant: 'soft', color: 'neutral', className: 'bg-neutral-100 text-neutral-700' },\n { variant: 'soft', color: 'stone', className: 'bg-stone-100 text-stone-700' },\n { variant: 'soft', color: 'red', className: 'bg-red-100 text-red-700' },\n { variant: 'soft', color: 'orange', className: 'bg-orange-100 text-orange-700' },\n { variant: 'soft', color: 'amber', className: 'bg-amber-100 text-amber-700' },\n { variant: 'soft', color: 'yellow', className: 'bg-yellow-100 text-yellow-700' },\n { variant: 'soft', color: 'lime', className: 'bg-lime-100 text-lime-700' },\n { variant: 'soft', color: 'green', className: 'bg-green-100 text-green-700' },\n { variant: 'soft', color: 'emerald', className: 'bg-emerald-100 text-emerald-700' },\n { variant: 'soft', color: 'teal', className: 'bg-teal-100 text-teal-700' },\n { variant: 'soft', color: 'cyan', className: 'bg-cyan-100 text-cyan-700' },\n { variant: 'soft', color: 'sky', className: 'bg-sky-100 text-sky-700' },\n { variant: 'soft', color: 'blue', className: 'bg-blue-100 text-blue-700' },\n { variant: 'soft', color: 'indigo', className: 'bg-indigo-100 text-indigo-700' },\n { variant: 'soft', color: 'violet', className: 'bg-violet-100 text-violet-700' },\n { variant: 'soft', color: 'purple', className: 'bg-purple-100 text-purple-700' },\n { variant: 'soft', color: 'fuchsia', className: 'bg-fuchsia-100 text-fuchsia-700' },\n { variant: 'soft', color: 'pink', className: 'bg-pink-100 text-pink-700' },\n { variant: 'soft', color: 'rose', className: 'bg-rose-100 text-rose-700' },\n // bar — plain text with a colored left accent bar, for lists/timelines\n { variant: 'bar', color: 'none', className: 'border-gray-300 border-dashed text-gray-400' },\n { variant: 'bar', color: 'slate', className: 'border-slate-500 text-slate-700' },\n { variant: 'bar', color: 'gray', className: 'border-gray-500 text-gray-700' },\n { variant: 'bar', color: 'zinc', className: 'border-zinc-500 text-zinc-700' },\n { variant: 'bar', color: 'neutral', className: 'border-neutral-500 text-neutral-700' },\n { variant: 'bar', color: 'stone', className: 'border-stone-500 text-stone-700' },\n { variant: 'bar', color: 'red', className: 'border-red-500 text-red-700' },\n { variant: 'bar', color: 'orange', className: 'border-orange-500 text-orange-700' },\n { variant: 'bar', color: 'amber', className: 'border-amber-500 text-amber-700' },\n { variant: 'bar', color: 'yellow', className: 'border-yellow-500 text-yellow-700' },\n { variant: 'bar', color: 'lime', className: 'border-lime-500 text-lime-700' },\n { variant: 'bar', color: 'green', className: 'border-green-500 text-green-700' },\n { variant: 'bar', color: 'emerald', className: 'border-emerald-500 text-emerald-700' },\n { variant: 'bar', color: 'teal', className: 'border-teal-500 text-teal-700' },\n { variant: 'bar', color: 'cyan', className: 'border-cyan-500 text-cyan-700' },\n { variant: 'bar', color: 'sky', className: 'border-sky-500 text-sky-700' },\n { variant: 'bar', color: 'blue', className: 'border-blue-500 text-blue-700' },\n { variant: 'bar', color: 'indigo', className: 'border-indigo-500 text-indigo-700' },\n { variant: 'bar', color: 'violet', className: 'border-violet-500 text-violet-700' },\n { variant: 'bar', color: 'purple', className: 'border-purple-500 text-purple-700' },\n { variant: 'bar', color: 'fuchsia', className: 'border-fuchsia-500 text-fuchsia-700' },\n { variant: 'bar', color: 'pink', className: 'border-pink-500 text-pink-700' },\n { variant: 'bar', color: 'rose', className: 'border-rose-500 text-rose-700' },\n ],\n});\n\nexport type StatusVariants = VariantProps<typeof statusVariants>;\n","'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type StatusVariants, statusVariants } from './status.variants';\n\nconst dotColorMap: Record<NonNullable<StatusVariants['color']>, string> = {\n none: 'border border-dashed border-gray-300 bg-transparent',\n slate: 'bg-slate-500',\n gray: 'bg-gray-500',\n zinc: 'bg-zinc-500',\n neutral: 'bg-neutral-500',\n stone: 'bg-stone-500',\n red: 'bg-red-500',\n orange: 'bg-orange-500',\n amber: 'bg-amber-500',\n yellow: 'bg-yellow-500',\n lime: 'bg-lime-500',\n green: 'bg-green-500',\n emerald: 'bg-emerald-500',\n teal: 'bg-teal-500',\n cyan: 'bg-cyan-500',\n sky: 'bg-sky-500',\n blue: 'bg-blue-500',\n indigo: 'bg-indigo-500',\n violet: 'bg-violet-500',\n purple: 'bg-purple-500',\n fuchsia: 'bg-fuchsia-500',\n pink: 'bg-pink-500',\n rose: 'bg-rose-500',\n};\n\nconst solidDotColorMap: Record<NonNullable<StatusVariants['color']>, string> = {\n none: 'border border-dashed border-gray-300 bg-transparent',\n slate: 'bg-slate-300',\n gray: 'bg-gray-300',\n zinc: 'bg-zinc-300',\n neutral: 'bg-neutral-300',\n stone: 'bg-stone-300',\n red: 'bg-red-300',\n orange: 'bg-orange-300',\n amber: 'bg-amber-300',\n yellow: 'bg-yellow-300',\n lime: 'bg-lime-300',\n green: 'bg-green-300',\n emerald: 'bg-emerald-300',\n teal: 'bg-teal-300',\n cyan: 'bg-cyan-300',\n sky: 'bg-sky-300',\n blue: 'bg-blue-300',\n indigo: 'bg-indigo-300',\n violet: 'bg-violet-300',\n purple: 'bg-purple-300',\n fuchsia: 'bg-fuchsia-300',\n pink: 'bg-pink-300',\n rose: 'bg-rose-300',\n};\n\n/*\n Props for the `Status` component.\n \n @property variant - Visual style — `'dot'` (outlined pill with a colored dot, default), `'solid'`\n * (filled pill with a colored dot), `'soft'` (tinted pill, no dot), or `'bar'` (plain text with a\n * colored left accent bar, for lists/timelines).\n * @property color - Full Tailwind color family, e.g. `'red'` \| `'orange'` \| `'green'` \| `'cyan'` \|\n * `'blue'` \| `'pink'` \| ... , or `'none'` for an unset/dashed neutral state. Defaults to `'gray'`.\n * @property size - `'sm'` \| `'md'` (default) \| `'lg'`.\n /\nexport type StatusProps = StatusVariants & React.ComponentPropsWithoutRef<'span'>;\n\n/\n Color-coded status indicator for pipeline/lifecycle states (e.g. lead, deal, order status).\n \n @example\n * ```tsx\n * import { Status } from '@customafk/lunas-ui/ui/status';\n \n <Status color=\"orange\">Đang tư vấn</Status>\n * <Status variant=\"soft\" color=\"green\">Đang đàm phán</Status>\n * <Status variant=\"bar\" color=\"pink\">Hoàn tất giao dịch</Status>\n * ```\n */\nfunction Status({ className, variant = 'dot', color = 'gray', size, children, ...props }: StatusProps) {\n const resolvedColor = color ?? 'gray';\n const showDot = variant === 'dot' \|\| variant === 'solid';\n\n return (\n <span className={cn(statusVariants({ variant, color, size }), className)} {...props}>\n {showDot && (\n <span\n aria-hidden\n className={cn('inline-block size-1.5 shrink-0 rounded-full', variant === 'solid' ? solidDotColorMap[resolvedColor] : dotColorMap[resolvedColor])}\n />\n )}\n {children}\n </span>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Status, statusVariants };\n"],"mappings":"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"}

package/dist/ui/switch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.cjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.\n \n @example\n * ```tsx\n * import { Switch } from '@customafk/lunas-ui/ui/switch';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n \n <div className=\"flex items-center gap-2\">\n * <Switch id=\"notifications\" />\n * <Label htmlFor=\"notifications\">Enable notifications</Label>\n * </div>\n * ```\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n 'inline-flex h-5',\n 'data-[state=checked]:bg-primary',\n 'data-[state=unchecked]:bg-border-muted',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'data-[state=unchecked]:border-border-weak',\n 'data-[state=unchecked]:[&_span]:bg-background',\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:shadow-none',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'bg-background',\n 'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n"],"mappings":"qLAoBA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,KAAjB,CACE,YAAU,SACV,WAAA,EAAA,EAAA,GAAA,CACE,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,gDACA,yCACA,kDACA,8CACA,uDACA,CACF,EACA,GAAI,~~YAEJ~~,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,MAAjB,CACE,YAAU,eACV,WAAA,EAAA,EAAA,GAAA,CACE,gBACA,4EACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B"}
1	+ {"version":3,"file":"switch.cjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.\n \n @example\n * ```tsx\n * import { Switch } from '@customafk/lunas-ui/ui/switch';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n \n <div className=\"flex items-center gap-2\">\n * <Switch id=\"notifications\" />\n * <Label htmlFor=\"notifications\">Enable notifications</Label>\n * </div>\n * ```\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n 'inline-flex h-5',\n 'data-[state=checked]:bg-primary',\n 'data-[state=unchecked]:bg-border-muted',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'data-[state=unchecked]:border-border-weak',\n 'data-[state=unchecked]:[&_span]:bg-background',\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:shadow-none',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'bg-background',\n 'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n"],"mappings":"qLAoBA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,KAAjB,CACE,YAAU,SACV,WAAA,EAAA,EAAA,GAAA,CACE,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,gDACA,yCACA,kDACA,8CACA,uDACA,CACF,EACA,GAAI,EAEJ,UAAA,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAgB,MAAjB,CACE,YAAU,eACV,WAAA,EAAA,EAAA,GAAA,CACE,gBACA,4EACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B"}

package/dist/ui/switch.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Switch } from "../switch-9v4AYqJb.cjs";
+import { t as Switch } from "../switch-Ce5Pre2e.cjs";
 export { Switch };

package/dist/ui/switch.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Switch } from "../switch-9v4AYqJb.mjs";
+import { t as Switch } from "../switch-Ce5Pre2e.mjs";
 export { Switch };

package/dist/ui/switch.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.mjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.\n \n @example\n * ```tsx\n * import { Switch } from '@customafk/lunas-ui/ui/switch';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n \n <div className=\"flex items-center gap-2\">\n * <Switch id=\"notifications\" />\n * <Label htmlFor=\"notifications\">Enable notifications</Label>\n * </div>\n * ```\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n 'inline-flex h-5',\n 'data-[state=checked]:bg-primary',\n 'data-[state=unchecked]:bg-border-muted',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'data-[state=unchecked]:border-border-weak',\n 'data-[state=unchecked]:[&_span]:bg-background',\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:shadow-none',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'bg-background',\n 'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n"],"mappings":"2IAoBA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACA,EAAgB,KAAjB,CACE,YAAU,SACV,UAAW,EACT,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,gDACA,yCACA,kDACA,8CACA,uDACA,CACF,EACA,GAAI,~~WAEJ~~,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,gBACA,4EACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B"}
1	+ {"version":3,"file":"switch.mjs","names":["SwitchPrimitive"],"sources":["../../packages/components/ui/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Switch as SwitchPrimitive } from 'radix-ui';\n\n/*\n Accessible toggle switch built on Radix UI's Switch primitive, with animated thumb and primary/muted color states.\n \n @example\n * ```tsx\n * import { Switch } from '@customafk/lunas-ui/ui/switch';\n * import { Label } from '@customafk/lunas-ui/ui/label';\n \n <div className=\"flex items-center gap-2\">\n * <Switch id=\"notifications\" />\n * <Label htmlFor=\"notifications\">Enable notifications</Label>\n * </div>\n * ```\n */\nfunction Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root\n data-slot=\"switch\"\n className={cn(\n 'peer',\n 'w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs outline-none transition-all',\n 'inline-flex h-5',\n 'data-[state=checked]:bg-primary',\n 'data-[state=unchecked]:bg-border-muted',\n 'focus-visible:border-primary-strong',\n 'focus-visible:ring-primary-weak',\n 'focus-visible:ring-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-50',\n 'data-[state=unchecked]:border-border-weak',\n 'data-[state=unchecked]:[&_span]:bg-background',\n 'data-[state=unchecked]:[&_span]:size-4',\n 'data-[state=unchecked]:[&_span]:translate-x-0.5',\n 'data-[state=unchecked]:[&_span]:shadow-none',\n 'data-[state=unchecked]:[&_span]:rtl:-translate-x-0.5',\n className\n )}\n {...props}\n >\n <SwitchPrimitive.Thumb\n data-slot=\"switch-thumb\"\n className={cn(\n 'bg-background',\n 'pointer-events-none block size-4 rounded-full ring-0 transition-transform',\n 'data-[state=checked]:translate-x-[calc(100%-3px)]',\n 'data-[state=unchecked]:translate-x-0'\n )}\n />\n </SwitchPrimitive.Root>\n );\n}\n\nexport { Switch };\n"],"mappings":"2IAoBA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OACE,EAACA,EAAgB,KAAjB,CACE,YAAU,SACV,UAAW,EACT,OACA,wHACA,kBACA,kCACA,yCACA,sCACA,kCACA,uBACA,8BACA,sBACA,4CACA,gDACA,yCACA,kDACA,8CACA,uDACA,CACF,EACA,GAAI,EAEJ,SAAA,EAACA,EAAgB,MAAjB,CACE,YAAU,eACV,UAAW,EACT,gBACA,4EACA,oDACA,sCACF,CACD,CAAA,CACmB,CAAA,CAE1B"}

package/dist/ui/table.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../table-Dg2D0v87.cjs";
+import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../table-D354-TpC.cjs";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/ui/table.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../table-Dg2D0v87.mjs";
+import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../table-D354-TpC.mjs";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/ui/tabs.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "../tabs-CJ6qZcFU.cjs";
+import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "../tabs-DLEtBGOr.cjs";
 export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/ui/tabs.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "../tabs-CJ6qZcFU.mjs";
+import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "../tabs-DLEtBGOr.mjs";
 export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/ui/textarea.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Textarea } from "../textarea-C8ZIZh-y.cjs";
+import { t as Textarea } from "../textarea-D1diQohb.cjs";
 export { Textarea };

package/dist/ui/textarea.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as Textarea } from "../textarea-C8ZIZh-y.mjs";
+import { t as Textarea } from "../textarea-D1diQohb.mjs";
 export { Textarea };

package/dist/ui/toggle-group.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-group.cjs","names":["ToggleGroupPrimitive","toggleVariants"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n size: 'default',\n variant: 'default',\n});\n\n/*\n A group of connected Toggle buttons where one or multiple items can be active at a time.\n \n @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';\n \n <ToggleGroup type=\"single\" variant=\"outline\">\n * <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n * <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n * <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n * ```\n /\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n );\n}\n\n/* A single item/button within a ToggleGroup that inherits the group's variant and size. */\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n const context = use(ToggleGroupContext);\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant \|\| variant}\n data-size={context.size \|\| size}\n className={cn(\n toggleVariants({\n variant: context.variant \|\| variant,\n size: context.size \|\| size,\n }),\n 'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"wOASA,MAAM,GAAA,EAAA,EAAA,cAAA,CAAwE,CAC5E,KAAM,UACN,QAAS,SACX,CAAC,EAgBD,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAC4F,CAC/F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAqB,KAAtB,CACE,YAAU,eACV,eAAc,EACd,YAAW,EACX,WAAA,EAAA,EAAA,GAAA,CAAc,yFAA0F,CAAS,EACjH,GAAI,~~YAEJ~~,EAAA,EAAA,IAAA,CAAC,EAAmB,SAApB,CAA6B,MAAO,CAAE,UAAS,MAAK,EAAI,UAAsC,CAAA,CACrE,CAAA,CAE/B,CAGA,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAC4F,CAC/F,IAAM,GAAA,EAAA,EAAA,IAAA,CAAc,CAAkB,EAEtC,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAqB,KAAtB,CACE,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,WAAA,EAAA,EAAA,GAAA,CACEC,EAAAA,eAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,CACxB,CAAC,EACD,8LACA,CACF,EACA,GAAI,EAEH,UACwB,CAAA,CAE/B"}
1	+ {"version":3,"file":"toggle-group.cjs","names":["ToggleGroupPrimitive","toggleVariants"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n size: 'default',\n variant: 'default',\n});\n\n/*\n A group of connected Toggle buttons where one or multiple items can be active at a time.\n \n @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';\n \n <ToggleGroup type=\"single\" variant=\"outline\">\n * <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n * <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n * <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n * ```\n /\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n );\n}\n\n/* A single item/button within a ToggleGroup that inherits the group's variant and size. */\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n const context = use(ToggleGroupContext);\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant \|\| variant}\n data-size={context.size \|\| size}\n className={cn(\n toggleVariants({\n variant: context.variant \|\| variant,\n size: context.size \|\| size,\n }),\n 'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"wOASA,MAAM,GAAA,EAAA,EAAA,cAAA,CAAwE,CAC5E,KAAM,UACN,QAAS,SACX,CAAC,EAgBD,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAC4F,CAC/F,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAqB,KAAtB,CACE,YAAU,eACV,eAAc,EACd,YAAW,EACX,WAAA,EAAA,EAAA,GAAA,CAAc,yFAA0F,CAAS,EACjH,GAAI,EAEJ,UAAA,EAAA,EAAA,IAAA,CAAC,EAAmB,SAApB,CAA6B,MAAO,CAAE,UAAS,MAAK,EAAI,UAAsC,CAAA,CACrE,CAAA,CAE/B,CAGA,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAC4F,CAC/F,IAAM,GAAA,EAAA,EAAA,IAAA,CAAc,CAAkB,EAEtC,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAqB,KAAtB,CACE,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,WAAA,EAAA,EAAA,GAAA,CACEC,EAAAA,eAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,CACxB,CAAC,EACD,8LACA,CACF,EACA,GAAI,EAEH,UACwB,CAAA,CAE/B"}

package/dist/ui/toggle-group.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-B0pu4YV-.cjs";
+import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group--bJylFDV.cjs";
 export { ToggleGroup, ToggleGroupItem };

package/dist/ui/toggle-group.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-7ZP2e-K1.mjs";
+import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-l_Mi7NRg.mjs";
 export { ToggleGroup, ToggleGroupItem };

package/dist/ui/toggle-group.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-group.mjs","names":["ToggleGroupPrimitive"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n size: 'default',\n variant: 'default',\n});\n\n/*\n A group of connected Toggle buttons where one or multiple items can be active at a time.\n \n @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';\n \n <ToggleGroup type=\"single\" variant=\"outline\">\n * <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n * <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n * <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n * ```\n /\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n );\n}\n\n/* A single item/button within a ToggleGroup that inherits the group's variant and size. */\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n const context = use(ToggleGroupContext);\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant \|\| variant}\n data-size={context.size \|\| size}\n className={cn(\n toggleVariants({\n variant: context.variant \|\| variant,\n size: context.size \|\| size,\n }),\n 'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"6OASA,MAAM,EAAqB,EAAmD,CAC5E,KAAM,UACN,QAAS,SACX,CAAC,EAgBD,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAC4F,CAC/F,OACE,EAACA,EAAqB,KAAtB,CACE,YAAU,eACV,eAAc,EACd,YAAW,EACX,UAAW,EAAG,yFAA0F,CAAS,EACjH,GAAI,~~WAEJ~~,EAAC,EAAmB,SAApB,CAA6B,MAAO,CAAE,UAAS,MAAK,EAAI,UAAsC,CAAA,CACrE,CAAA,CAE/B,CAGA,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAC4F,CAC/F,IAAM,EAAU,EAAI,CAAkB,EAEtC,OACE,EAACA,EAAqB,KAAtB,CACE,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,UAAW,EACT,EAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,CACxB,CAAC,EACD,8LACA,CACF,EACA,GAAI,EAEH,UACwB,CAAA,CAE/B"}
1	+ {"version":3,"file":"toggle-group.mjs","names":["ToggleGroupPrimitive"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n size: 'default',\n variant: 'default',\n});\n\n/*\n A group of connected Toggle buttons where one or multiple items can be active at a time.\n \n @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';\n \n <ToggleGroup type=\"single\" variant=\"outline\">\n * <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n * <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n * <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n * ```\n /\nfunction ToggleGroup({\n className,\n variant,\n size,\n children,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {\n return (\n <ToggleGroupPrimitive.Root\n data-slot=\"toggle-group\"\n data-variant={variant}\n data-size={size}\n className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n );\n}\n\n/* A single item/button within a ToggleGroup that inherits the group's variant and size. */\nfunction ToggleGroupItem({\n className,\n children,\n variant,\n size,\n ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n const context = use(ToggleGroupContext);\n\n return (\n <ToggleGroupPrimitive.Item\n data-slot=\"toggle-group-item\"\n data-variant={context.variant \|\| variant}\n data-size={context.size \|\| size}\n className={cn(\n toggleVariants({\n variant: context.variant \|\| variant,\n size: context.size \|\| size,\n }),\n 'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"6OASA,MAAM,EAAqB,EAAmD,CAC5E,KAAM,UACN,QAAS,SACX,CAAC,EAgBD,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAC4F,CAC/F,OACE,EAACA,EAAqB,KAAtB,CACE,YAAU,eACV,eAAc,EACd,YAAW,EACX,UAAW,EAAG,yFAA0F,CAAS,EACjH,GAAI,EAEJ,SAAA,EAAC,EAAmB,SAApB,CAA6B,MAAO,CAAE,UAAS,MAAK,EAAI,UAAsC,CAAA,CACrE,CAAA,CAE/B,CAGA,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAC4F,CAC/F,IAAM,EAAU,EAAI,CAAkB,EAEtC,OACE,EAACA,EAAqB,KAAtB,CACE,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,UAAW,EACT,EAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,CACxB,CAAC,EACD,8LACA,CACF,EACA,GAAI,EAEH,UACwB,CAAA,CAE/B"}

package/dist/ui/toggle.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as toggleVariants, t as Toggle } from "../toggle-Bk5Lvs5n.cjs";
+import { n as toggleVariants, t as Toggle } from "../toggle-CqTmiPDi.cjs";
 export { Toggle, toggleVariants };

package/dist/ui/toggle.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as toggleVariants, t as Toggle } from "../toggle-Bk5Lvs5n.mjs";
+import { n as toggleVariants, t as Toggle } from "../toggle-CqTmiPDi.mjs";
 export { Toggle, toggleVariants };

package/dist/ui/tooltip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive"],"sources":["../../packages/components/ui/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tooltip as TooltipPrimitive } from 'radix-ui';\n\n/*\n Context provider that controls the open delay for all child `Tooltip` components; defaults to `0` ms for instant display.\n \n @example\n * ```tsx\n * import { TooltipProvider } from '@customafk/lunas-ui/ui/tooltip';\n \n // Wrap at the app root to apply a shared delay:\n * <TooltipProvider delayDuration={300}>\n * <App />\n * </TooltipProvider>\n * ```\n /\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />;\n}\n\n/\n Floating label that reveals supplementary text when the user hovers or focuses its trigger element.\n \n @example\n * ```tsx\n * import { Tooltip, TooltipTrigger, TooltipContent } from '@customafk/lunas-ui/ui/tooltip';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n \n <Tooltip>\n * <TooltipTrigger asChild>\n * <Button variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">⚙</Button>\n * </TooltipTrigger>\n * <TooltipContent>Open settings</TooltipContent>\n * </Tooltip>\n * ```\n /\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\n/* Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. /\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\n/* Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */\nfunction TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-secondary-strong text-text-negative-weak shadow-dropdown outline-none',\n 'fade-in-0 zoom-in-95 animate-in',\n 'data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0',\n 'data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n 'z-50 w-fit',\n 'origin-(--radix-tooltip-content-transform-origin)',\n 'text-balance rounded-sm px-3 py-1.5 text-xs',\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-secondary-strong fill-secondary-strong\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"],"mappings":"qLAmBA,SAAS,EAAgB,CAAE,gBAAgB,EAAG,GAAG,GAAiE,CAChH,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,SAAlB,CAA2B,YAAU,mBAAkC,gBAAe,GAAI,CAAQ,CAAA,CAC3G,CAkBA,SAAS,EAAQ,CAAE,GAAG,GAA6D,CACjF,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CACxC,CAAA,CAErB,CAGA,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC3E,CAGA,SAAS,EAAe,CAAE,YAAW,aAAa,EAAG,WAAU,GAAG,GAAgE,CAChI,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,OAAlB,CAAA,UACE,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAiB,QAAlB,CACE,YAAU,kBACE,aACZ,WAAA,EAAA,EAAA,GAAA,CACE,2EACA,kCACA,kCACA,iCACA,kCACA,yCACA,yCACA,yCACA,yCACA,aACA,oDACA,8CACA,CACF,EACA,GAAI,~~WAlBN~~,CAoBG,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,MAAlB,CAAwB,UAAU,8GAAgH,CAAA,CAC1H,~~GACH~~,CAAA,CAE7B"}
1	+ {"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive"],"sources":["../../packages/components/ui/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tooltip as TooltipPrimitive } from 'radix-ui';\n\n/*\n Context provider that controls the open delay for all child `Tooltip` components; defaults to `0` ms for instant display.\n \n @example\n * ```tsx\n * import { TooltipProvider } from '@customafk/lunas-ui/ui/tooltip';\n \n // Wrap at the app root to apply a shared delay:\n * <TooltipProvider delayDuration={300}>\n * <App />\n * </TooltipProvider>\n * ```\n /\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />;\n}\n\n/\n Floating label that reveals supplementary text when the user hovers or focuses its trigger element.\n \n @example\n * ```tsx\n * import { Tooltip, TooltipTrigger, TooltipContent } from '@customafk/lunas-ui/ui/tooltip';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n \n <Tooltip>\n * <TooltipTrigger asChild>\n * <Button variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">⚙</Button>\n * </TooltipTrigger>\n * <TooltipContent>Open settings</TooltipContent>\n * </Tooltip>\n * ```\n /\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\n/* Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. /\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\n/* Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */\nfunction TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-secondary-strong text-text-negative-weak shadow-dropdown outline-none',\n 'fade-in-0 zoom-in-95 animate-in',\n 'data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0',\n 'data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n 'z-50 w-fit',\n 'origin-(--radix-tooltip-content-transform-origin)',\n 'text-balance rounded-sm px-3 py-1.5 text-xs',\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-secondary-strong fill-secondary-strong\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"],"mappings":"qLAmBA,SAAS,EAAgB,CAAE,gBAAgB,EAAG,GAAG,GAAiE,CAChH,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,SAAlB,CAA2B,YAAU,mBAAkC,gBAAe,GAAI,CAAQ,CAAA,CAC3G,CAkBA,SAAS,EAAQ,CAAE,GAAG,GAA6D,CACjF,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CACxC,CAAA,CAErB,CAGA,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC3E,CAGA,SAAS,EAAe,CAAE,YAAW,aAAa,EAAG,WAAU,GAAG,GAAgE,CAChI,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,OAAlB,CAAA,UACE,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAiB,QAAlB,CACE,YAAU,kBACE,aACZ,WAAA,EAAA,EAAA,GAAA,CACE,2EACA,kCACA,kCACA,iCACA,kCACA,yCACA,yCACA,yCACA,yCACA,aACA,oDACA,8CACA,CACF,EACA,GAAI,EAlBN,SAAA,CAoBG,GACD,EAAA,EAAA,IAAA,CAACA,EAAAA,QAAiB,MAAlB,CAAwB,UAAU,8GAAgH,CAAA,CAC1H,CACH,CAAA,CAAA,CAAA,CAE7B"}

package/dist/ui/tooltip.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-D4U-RhIu.cjs";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-BVYKhsC2.cjs";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tooltip.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-D4U-RhIu.mjs";
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-BVYKhsC2.mjs";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tooltip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.mjs","names":["TooltipPrimitive"],"sources":["../../packages/components/ui/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tooltip as TooltipPrimitive } from 'radix-ui';\n\n/*\n Context provider that controls the open delay for all child `Tooltip` components; defaults to `0` ms for instant display.\n \n @example\n * ```tsx\n * import { TooltipProvider } from '@customafk/lunas-ui/ui/tooltip';\n \n // Wrap at the app root to apply a shared delay:\n * <TooltipProvider delayDuration={300}>\n * <App />\n * </TooltipProvider>\n * ```\n /\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />;\n}\n\n/\n Floating label that reveals supplementary text when the user hovers or focuses its trigger element.\n \n @example\n * ```tsx\n * import { Tooltip, TooltipTrigger, TooltipContent } from '@customafk/lunas-ui/ui/tooltip';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n \n <Tooltip>\n * <TooltipTrigger asChild>\n * <Button variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">⚙</Button>\n * </TooltipTrigger>\n * <TooltipContent>Open settings</TooltipContent>\n * </Tooltip>\n * ```\n /\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\n/* Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. /\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\n/* Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */\nfunction TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-secondary-strong text-text-negative-weak shadow-dropdown outline-none',\n 'fade-in-0 zoom-in-95 animate-in',\n 'data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0',\n 'data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n 'z-50 w-fit',\n 'origin-(--radix-tooltip-content-transform-origin)',\n 'text-balance rounded-sm px-3 py-1.5 text-xs',\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-secondary-strong fill-secondary-strong\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"],"mappings":"sJAmBA,SAAS,EAAgB,CAAE,gBAAgB,EAAG,GAAG,GAAiE,CAChH,OAAO,EAACA,EAAiB,SAAlB,CAA2B,YAAU,mBAAkC,gBAAe,GAAI,CAAQ,CAAA,CAC3G,CAkBA,SAAS,EAAQ,CAAE,GAAG,GAA6D,CACjF,OACE,EAAC,EAAD,CAAA,SACE,EAACA,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CACxC,CAAA,CAErB,CAGA,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAACA,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC3E,CAGA,SAAS,EAAe,CAAE,YAAW,aAAa,EAAG,WAAU,GAAG,GAAgE,CAChI,OACE,EAACA,EAAiB,OAAlB,CAAA,SACE,EAACA,EAAiB,QAAlB,CACE,YAAU,kBACE,aACZ,UAAW,EACT,2EACA,kCACA,kCACA,iCACA,kCACA,yCACA,yCACA,yCACA,yCACA,aACA,oDACA,8CACA,CACF,EACA,GAAI,~~WAlBN~~,CAoBG,EACD,EAACA,EAAiB,MAAlB,CAAwB,UAAU,8GAAgH,CAAA,CAC1H,~~GACH~~,CAAA,CAE7B"}
1	+ {"version":3,"file":"tooltip.mjs","names":["TooltipPrimitive"],"sources":["../../packages/components/ui/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Tooltip as TooltipPrimitive } from 'radix-ui';\n\n/*\n Context provider that controls the open delay for all child `Tooltip` components; defaults to `0` ms for instant display.\n \n @example\n * ```tsx\n * import { TooltipProvider } from '@customafk/lunas-ui/ui/tooltip';\n \n // Wrap at the app root to apply a shared delay:\n * <TooltipProvider delayDuration={300}>\n * <App />\n * </TooltipProvider>\n * ```\n /\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />;\n}\n\n/\n Floating label that reveals supplementary text when the user hovers or focuses its trigger element.\n \n @example\n * ```tsx\n * import { Tooltip, TooltipTrigger, TooltipContent } from '@customafk/lunas-ui/ui/tooltip';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n \n <Tooltip>\n * <TooltipTrigger asChild>\n * <Button variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">⚙</Button>\n * </TooltipTrigger>\n * <TooltipContent>Open settings</TooltipContent>\n * </Tooltip>\n * ```\n /\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\n/* Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. /\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\n/* Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */\nfunction TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-secondary-strong text-text-negative-weak shadow-dropdown outline-none',\n 'fade-in-0 zoom-in-95 animate-in',\n 'data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0',\n 'data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n 'z-50 w-fit',\n 'origin-(--radix-tooltip-content-transform-origin)',\n 'text-balance rounded-sm px-3 py-1.5 text-xs',\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-secondary-strong fill-secondary-strong\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"],"mappings":"sJAmBA,SAAS,EAAgB,CAAE,gBAAgB,EAAG,GAAG,GAAiE,CAChH,OAAO,EAACA,EAAiB,SAAlB,CAA2B,YAAU,mBAAkC,gBAAe,GAAI,CAAQ,CAAA,CAC3G,CAkBA,SAAS,EAAQ,CAAE,GAAG,GAA6D,CACjF,OACE,EAAC,EAAD,CAAA,SACE,EAACA,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CACxC,CAAA,CAErB,CAGA,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAACA,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC3E,CAGA,SAAS,EAAe,CAAE,YAAW,aAAa,EAAG,WAAU,GAAG,GAAgE,CAChI,OACE,EAACA,EAAiB,OAAlB,CAAA,SACE,EAACA,EAAiB,QAAlB,CACE,YAAU,kBACE,aACZ,UAAW,EACT,2EACA,kCACA,kCACA,iCACA,kCACA,yCACA,yCACA,yCACA,yCACA,aACA,oDACA,8CACA,CACF,EACA,GAAI,EAlBN,SAAA,CAoBG,EACD,EAACA,EAAiB,MAAlB,CAAwB,UAAU,8GAAgH,CAAA,CAC1H,CACH,CAAA,CAAA,CAAA,CAE7B"}

package/dist/{upload-image-D4VZU3IA.d.cts → upload-image-DM-tkZuR.d.cts} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { PropsWithChildren } from "react";
 //#region packages/components/ui/buttons/upload-image.d.ts
 type Props = {
   /**
    * Numeric pixel value applied to both the `width` and `height` of the button via inline styles.
    * @default '5rem'
    */
-  size?: number; /** Callback invoked when the button is clicked. */
+  size?: number;
+  /** Callback invoked when the button is clicked. */
   onClick?: () => void;
 };
 /**
@@ -20,4 +20,4 @@ type Props = {
 declare const UploadImageBtn: React.FC<PropsWithChildren<Props>>;
 //#endregion
 export { UploadImageBtn as t };
-//# sourceMappingURL=upload-image-D4VZU3IA.d.cts.map
+//# sourceMappingURL=upload-image-DM-tkZuR.d.cts.map

package/dist/{upload-image-D4VZU3IA.d.mts → upload-image-DM-tkZuR.d.mts} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { PropsWithChildren } from "react";
 //#region packages/components/ui/buttons/upload-image.d.ts
 type Props = {
   /**
    * Numeric pixel value applied to both the `width` and `height` of the button via inline styles.
    * @default '5rem'
    */
-  size?: number; /** Callback invoked when the button is clicked. */
+  size?: number;
+  /** Callback invoked when the button is clicked. */
   onClick?: () => void;
 };
 /**
@@ -20,4 +20,4 @@ type Props = {
 declare const UploadImageBtn: React.FC<PropsWithChildren<Props>>;
 //#endregion
 export { UploadImageBtn as t };
-//# sourceMappingURL=upload-image-D4VZU3IA.d.mts.map
+//# sourceMappingURL=upload-image-DM-tkZuR.d.mts.map

package/dist/user-BymzvsYp.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"user-BymzvsYp.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/user.tsx"],"sourcesContent":["import { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/** Props for the {@link UITableUserDataDisplay} component. /\ntype Props = {\n /* Unique identifier used to deterministically generate the avatar background colour. /\n uuid?: string \| null \| undefined;\n /* Display name shown below the avatar; falls back to `'Unknown User'` when absent. /\n username?: string \| null \| undefined;\n /* Email address shown as secondary text beneath the username. /\n email?: string \| null \| undefined;\n};\n\n/\n Renders a user avatar paired with username and email for use in table cells;\n * derives a consistent avatar background colour from the user's `uuid` via a\n * colour-hash utility.\n \n @example\n * import { UITableUserDataDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableUserDataDisplay\n * uuid=\"a1b2c3d4-e5f6-7890-abcd-ef1234567890\"\n * username=\"Jane Smith\"\n * email=\"jane@example.com\"\n * />\n */\nexport const UITableUserDataDisplay: React.FC<Props> = ({ uuid, username, email }) => {\n return (\n <Flex wrap={false} gap=\"sm\" padding=\"none\">\n {!uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback className=\"bg-muted-weak\">\n <UserRoundIcon size={28} className=\"text-text-negative\" />\n </AvatarFallback>\n </Avatar>\n )}\n {uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n <UserRoundIcon size={28} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n )}\n <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n <Paragraph className=\"font-medium text-sm text-text-positive-weak\">{username ?? 'Unknown User'}</Paragraph>\n <Paragraph variant=\"sm\" className=\"mt-0! text-text-positive-weak text-xs\">\n {email}\n </Paragraph>\n </Flex>\n </Flex>\n );\n};\n"],"mappings":"kUAiCA,MAAa,GAA2C,CAAE,OAAM,WAAU,WAEtE,EAAC,EAAD,CAAM,KAAM,GAAO,IAAI,KAAK,QAAQ,~~gBAApC~~,CACG,CAAC,GACA,EAAC,EAAD,CAAQ,UAAU~~,+BAChB~~,EAAC,EAAD,CAAgB,UAAU,~~yBACxB~~,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,oBAAsB,CAAA,CAC3C,CAAA,CACV,CAAA,EAET,GACC,EAAC,EAAD,CAAQ,UAAU~~,+BAChB~~,EAAC,EAAD,CAAgB,MAAO,CAAE,gBAAiB,EAAe,IAAI,CAAI,CAAE,~~WACjE~~,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,CAAA,EAEV,EAAC,EAAD,CAAM,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,~~iBAA~~/C,CACE,EAAC,EAAD,CAAW,UAAU,~~uDAA~~+C,GAAY,cAA0B,CAAA,EAC1G,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,~~iDAC~~/B,CACQ,CAAA,CACP,GACF"}
1	+ {"version":3,"file":"user-BymzvsYp.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/user.tsx"],"sourcesContent":["import { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/** Props for the {@link UITableUserDataDisplay} component. /\ntype Props = {\n /* Unique identifier used to deterministically generate the avatar background colour. /\n uuid?: string \| null \| undefined;\n /* Display name shown below the avatar; falls back to `'Unknown User'` when absent. /\n username?: string \| null \| undefined;\n /* Email address shown as secondary text beneath the username. /\n email?: string \| null \| undefined;\n};\n\n/\n Renders a user avatar paired with username and email for use in table cells;\n * derives a consistent avatar background colour from the user's `uuid` via a\n * colour-hash utility.\n \n @example\n * import { UITableUserDataDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableUserDataDisplay\n * uuid=\"a1b2c3d4-e5f6-7890-abcd-ef1234567890\"\n * username=\"Jane Smith\"\n * email=\"jane@example.com\"\n * />\n */\nexport const UITableUserDataDisplay: React.FC<Props> = ({ uuid, username, email }) => {\n return (\n <Flex wrap={false} gap=\"sm\" padding=\"none\">\n {!uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback className=\"bg-muted-weak\">\n <UserRoundIcon size={28} className=\"text-text-negative\" />\n </AvatarFallback>\n </Avatar>\n )}\n {uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n <UserRoundIcon size={28} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n )}\n <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n <Paragraph className=\"font-medium text-sm text-text-positive-weak\">{username ?? 'Unknown User'}</Paragraph>\n <Paragraph variant=\"sm\" className=\"mt-0! text-text-positive-weak text-xs\">\n {email}\n </Paragraph>\n </Flex>\n </Flex>\n );\n};\n"],"mappings":"kUAiCA,MAAa,GAA2C,CAAE,OAAM,WAAU,WAEtE,EAAC,EAAD,CAAM,KAAM,GAAO,IAAI,KAAK,QAAQ,OAApC,SAAA,CACG,CAAC,GACA,EAAC,EAAD,CAAQ,UAAU,sBAChB,SAAA,EAAC,EAAD,CAAgB,UAAU,gBACxB,SAAA,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,oBAAsB,CAAA,CAC3C,CAAA,CACV,CAAA,EAET,GACC,EAAC,EAAD,CAAQ,UAAU,sBAChB,SAAA,EAAC,EAAD,CAAgB,MAAO,CAAE,gBAAiB,EAAe,IAAI,CAAI,CAAE,EACjE,SAAA,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,CAAA,EAEV,EAAC,EAAD,CAAM,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,QAA/C,SAAA,CACE,EAAC,EAAD,CAAW,UAAU,8CAA+C,SAAA,GAAY,cAA0B,CAAA,EAC1G,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,wCAC/B,SAAA,CACQ,CAAA,CACP,GACF"}

package/dist/{user-CvesQf42.d.cts → user-D46H2MOh.d.cts} RENAMED Viewed

@@ -1,7 +1,10 @@
 //#region packages/components/data-display/user.d.ts
 type UserDataDisplayProps = {
-  /** Unique identifier used to deterministically generate the avatar background colour. */uuid: string; /** Display name rendered as the primary line of the user card. */
-  username: string; /** Email address rendered as the secondary, muted line below the username. */
+  /** Unique identifier used to deterministically generate the avatar background colour. */
+  uuid: string;
+  /** Display name rendered as the primary line of the user card. */
+  username: string;
+  /** Email address rendered as the secondary, muted line below the username. */
   email: string;
 };
 /**
@@ -17,4 +20,4 @@ type UserDataDisplayProps = {
 declare const UserDataDisplay: React.FC<UserDataDisplayProps>;
 //#endregion
 export { UserDataDisplay as t };
-//# sourceMappingURL=user-CvesQf42.d.cts.map
+//# sourceMappingURL=user-D46H2MOh.d.cts.map

package/dist/{user-CvesQf42.d.mts → user-D46H2MOh.d.mts} RENAMED Viewed

@@ -1,7 +1,10 @@
 //#region packages/components/data-display/user.d.ts
 type UserDataDisplayProps = {
-  /** Unique identifier used to deterministically generate the avatar background colour. */uuid: string; /** Display name rendered as the primary line of the user card. */
-  username: string; /** Email address rendered as the secondary, muted line below the username. */
+  /** Unique identifier used to deterministically generate the avatar background colour. */
+  uuid: string;
+  /** Display name rendered as the primary line of the user card. */
+  username: string;
+  /** Email address rendered as the secondary, muted line below the username. */
   email: string;
 };
 /**
@@ -17,4 +20,4 @@ type UserDataDisplayProps = {
 declare const UserDataDisplay: React.FC<UserDataDisplayProps>;
 //#endregion
 export { UserDataDisplay as t };
-//# sourceMappingURL=user-CvesQf42.d.mts.map
+//# sourceMappingURL=user-D46H2MOh.d.mts.map

package/dist/user-Dn53Fu5q.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"user-Dn53Fu5q.cjs","names":["Flex","Avatar","AvatarFallback","UserRoundIcon","colorHashLight","Paragraph"],"sources":["../packages/components/features/tables/components/atoms/user.tsx"],"sourcesContent":["import { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/** Props for the {@link UITableUserDataDisplay} component. /\ntype Props = {\n /* Unique identifier used to deterministically generate the avatar background colour. /\n uuid?: string \| null \| undefined;\n /* Display name shown below the avatar; falls back to `'Unknown User'` when absent. /\n username?: string \| null \| undefined;\n /* Email address shown as secondary text beneath the username. /\n email?: string \| null \| undefined;\n};\n\n/\n Renders a user avatar paired with username and email for use in table cells;\n * derives a consistent avatar background colour from the user's `uuid` via a\n * colour-hash utility.\n \n @example\n * import { UITableUserDataDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableUserDataDisplay\n * uuid=\"a1b2c3d4-e5f6-7890-abcd-ef1234567890\"\n * username=\"Jane Smith\"\n * email=\"jane@example.com\"\n * />\n */\nexport const UITableUserDataDisplay: React.FC<Props> = ({ uuid, username, email }) => {\n return (\n <Flex wrap={false} gap=\"sm\" padding=\"none\">\n {!uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback className=\"bg-muted-weak\">\n <UserRoundIcon size={28} className=\"text-text-negative\" />\n </AvatarFallback>\n </Avatar>\n )}\n {uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n <UserRoundIcon size={28} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n )}\n <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n <Paragraph className=\"font-medium text-sm text-text-positive-weak\">{username ?? 'Unknown User'}</Paragraph>\n <Paragraph variant=\"sm\" className=\"mt-0! text-text-positive-weak text-xs\">\n {email}\n </Paragraph>\n </Flex>\n </Flex>\n );\n};\n"],"mappings":"yNAiCA,MAAa,GAA2C,CAAE,OAAM,WAAU,YAEtE,EAAA,EAAA,KAAA,CAACA,EAAAA,KAAD,CAAM,KAAM,GAAO,IAAI,KAAK,QAAQ,~~gBAApC~~,CACG,CAAC,IACA,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,UAAU,~~gCAChB~~,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,UAAU,~~0BACxB~~,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,oBAAsB,CAAA,CAC3C,CAAA,CACV,CAAA,EAET,IACC,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAD,CAAQ,UAAU,~~gCAChB~~,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiBE,EAAAA,eAAe,IAAI,CAAI,CAAE,~~YACjE~~,EAAA,EAAA,IAAA,CAACD,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,CAAA,GAEV,EAAA,EAAA,KAAA,CAACH,EAAAA,KAAD,CAAM,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,~~iBAA~~/C,EACE,EAAA,EAAA,IAAA,CAACK,EAAAA,UAAD,CAAW,UAAU,~~uDAA~~+C,GAAY,cAA0B,CAAA,GAC1G,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,~~iDAC~~/B,CACQ,CAAA,CACP,GACF"}
1	+ {"version":3,"file":"user-Dn53Fu5q.cjs","names":["Flex","Avatar","AvatarFallback","UserRoundIcon","colorHashLight","Paragraph"],"sources":["../packages/components/features/tables/components/atoms/user.tsx"],"sourcesContent":["import { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\n\nimport { Flex } from '@/components/layouts/flex';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/** Props for the {@link UITableUserDataDisplay} component. /\ntype Props = {\n /* Unique identifier used to deterministically generate the avatar background colour. /\n uuid?: string \| null \| undefined;\n /* Display name shown below the avatar; falls back to `'Unknown User'` when absent. /\n username?: string \| null \| undefined;\n /* Email address shown as secondary text beneath the username. /\n email?: string \| null \| undefined;\n};\n\n/\n Renders a user avatar paired with username and email for use in table cells;\n * derives a consistent avatar background colour from the user's `uuid` via a\n * colour-hash utility.\n \n @example\n * import { UITableUserDataDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableUserDataDisplay\n * uuid=\"a1b2c3d4-e5f6-7890-abcd-ef1234567890\"\n * username=\"Jane Smith\"\n * email=\"jane@example.com\"\n * />\n */\nexport const UITableUserDataDisplay: React.FC<Props> = ({ uuid, username, email }) => {\n return (\n <Flex wrap={false} gap=\"sm\" padding=\"none\">\n {!uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback className=\"bg-muted-weak\">\n <UserRoundIcon size={28} className=\"text-text-negative\" />\n </AvatarFallback>\n </Avatar>\n )}\n {uuid && (\n <Avatar className=\"size-10 shadow-card\">\n <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n <UserRoundIcon size={28} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n )}\n <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n <Paragraph className=\"font-medium text-sm text-text-positive-weak\">{username ?? 'Unknown User'}</Paragraph>\n <Paragraph variant=\"sm\" className=\"mt-0! text-text-positive-weak text-xs\">\n {email}\n </Paragraph>\n </Flex>\n </Flex>\n );\n};\n"],"mappings":"yNAiCA,MAAa,GAA2C,CAAE,OAAM,WAAU,YAEtE,EAAA,EAAA,KAAA,CAACA,EAAAA,KAAD,CAAM,KAAM,GAAO,IAAI,KAAK,QAAQ,OAApC,SAAA,CACG,CAAC,IACA,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,UAAU,sBAChB,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,UAAU,gBACxB,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,oBAAsB,CAAA,CAC3C,CAAA,CACV,CAAA,EAET,IACC,EAAA,EAAA,IAAA,CAACF,EAAAA,OAAD,CAAQ,UAAU,sBAChB,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiBE,EAAAA,eAAe,IAAI,CAAI,CAAE,EACjE,UAAA,EAAA,EAAA,IAAA,CAACD,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,CAAA,GAEV,EAAA,EAAA,KAAA,CAACH,EAAAA,KAAD,CAAM,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,QAA/C,SAAA,EACE,EAAA,EAAA,IAAA,CAACK,EAAAA,UAAD,CAAW,UAAU,8CAA+C,SAAA,GAAY,cAA0B,CAAA,GAC1G,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,wCAC/B,SAAA,CACQ,CAAA,CACP,GACF"}

package/dist/volume-bar-chart-BRpC_8-X.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-bar-chart-BRpC_8-X.mjs","names":[],"sources":["../packages/components/features/charts/components/volume-bar-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { formatCompactNumber, getDirectionColor, toDateLabel } from '../utils';\n\nexport type VolumeBarChartProps = BaseChartProps & {\n /** Only `date`, `close`, and `volume` are used; pass the same rows given to `CandlestickChart`. /\n data: Array<Pick<OHLCPoint, 'date' \| 'close' \| 'volume'>>;\n /* Series label. Defaults to `'Volume'`. /\n label?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n dateFormatter?: (date: string \| Date) => string;\n showGrid?: boolean;\n};\n\n/\n Volume bars colored by day direction (close vs. previous close), meant to sit under a\n * `CandlestickChart` on a shared time axis.\n \n @example\n * ```tsx\n * import { VolumeBarChart } from '@customafk/lunas-ui/features/charts';\n \n <VolumeBarChart\n * data={[\n * { date: '2026-06-01', close: 142.5, volume: 2_400_000 },\n * { date: '2026-06-02', close: 145.1, volume: 3_100_000 },\n * ]}\n * />\n * ```\n */\nexport const VolumeBarChart = ({\n data,\n label = 'Volume',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = formatCompactNumber,\n dateFormatter = toDateLabel,\n showGrid = true,\n className,\n animate = true,\n height,\n}: VolumeBarChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ volume: { label, color: upColor } }), [label, upColor]);\n\n const chartData = useMemo(() => data.map((point, index) => ({ ...point, previousClose: index > 0 ? data[index - 1]?.close : point.close })), [data]);\n\n return (\n <ChartContainer\n data-slot=\"volume-bar-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n labelFormatter={(_, payload) => {\n const date = payload?.[0]?.payload?.date;\n return date ? dateFormatter(date) : null;\n }}\n formatter={value => valueFormatter(Number(value))}\n />\n }\n />\n <Bar\n dataKey=\"volume\"\n isAnimationActive={animate}\n shape={props => {\n const point = props.payload as { close?: number; previousClose?: number } \| undefined;\n const color = getDirectionColor(point?.close ?? 0, point?.previousClose ?? 0, { up: upColor, down: downColor });\n return <Rectangle {...props} fill={color} />;\n }}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"gbAwCA,MAAa,GAAkB,CAC7B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,EAAS,OAA4B,CAAE,OAAQ,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAAC,EAE7F,EAAY,MAAc,EAAK,KAAK,EAAO,KAAW,CAAE,GAAG,EAAO,cAAe,EAAQ,EAAI,EAAK,EAAQ,EAAE,EAAE,MAAQ,EAAM,KAAM,EAAE,EAAG,CAAC,CAAI,CAAC,EAEnJ,OACE,EAAC,EAAD,CACE,YAAU,mBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,~~WAE5D~~,EAAC,EAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,~~WAA5E~~,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,cAAA,GACA,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CACE,QAAQ,SACR,kBAAmB,EACnB,MAAO,GAAS,CACd,IAAM,EAAQ,EAAM,QACd,EAAQ,EAAkB,GAAO,OAAS,EAAG,GAAO,eAAiB,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EAC9G,OAAO,EAAC,EAAD,CAAW,GAAI,EAAO,KAAM,CAAQ,CAAA,CAC7C,CACD,CAAA,CACO,GACI,CAAA,CAEpB"}
1	+ {"version":3,"file":"volume-bar-chart-BRpC_8-X.mjs","names":[],"sources":["../packages/components/features/charts/components/volume-bar-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { formatCompactNumber, getDirectionColor, toDateLabel } from '../utils';\n\nexport type VolumeBarChartProps = BaseChartProps & {\n /** Only `date`, `close`, and `volume` are used; pass the same rows given to `CandlestickChart`. /\n data: Array<Pick<OHLCPoint, 'date' \| 'close' \| 'volume'>>;\n /* Series label. Defaults to `'Volume'`. /\n label?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n dateFormatter?: (date: string \| Date) => string;\n showGrid?: boolean;\n};\n\n/\n Volume bars colored by day direction (close vs. previous close), meant to sit under a\n * `CandlestickChart` on a shared time axis.\n \n @example\n * ```tsx\n * import { VolumeBarChart } from '@customafk/lunas-ui/features/charts';\n \n <VolumeBarChart\n * data={[\n * { date: '2026-06-01', close: 142.5, volume: 2_400_000 },\n * { date: '2026-06-02', close: 145.1, volume: 3_100_000 },\n * ]}\n * />\n * ```\n */\nexport const VolumeBarChart = ({\n data,\n label = 'Volume',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = formatCompactNumber,\n dateFormatter = toDateLabel,\n showGrid = true,\n className,\n animate = true,\n height,\n}: VolumeBarChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ volume: { label, color: upColor } }), [label, upColor]);\n\n const chartData = useMemo(() => data.map((point, index) => ({ ...point, previousClose: index > 0 ? data[index - 1]?.close : point.close })), [data]);\n\n return (\n <ChartContainer\n data-slot=\"volume-bar-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n labelFormatter={(_, payload) => {\n const date = payload?.[0]?.payload?.date;\n return date ? dateFormatter(date) : null;\n }}\n formatter={value => valueFormatter(Number(value))}\n />\n }\n />\n <Bar\n dataKey=\"volume\"\n isAnimationActive={animate}\n shape={props => {\n const point = props.payload as { close?: number; previousClose?: number } \| undefined;\n const color = getDirectionColor(point?.close ?? 0, point?.previousClose ?? 0, { up: upColor, down: downColor });\n return <Rectangle {...props} fill={color} />;\n }}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"gbAwCA,MAAa,GAAkB,CAC7B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,EAAS,OAA4B,CAAE,OAAQ,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAAC,EAE7F,EAAY,MAAc,EAAK,KAAK,EAAO,KAAW,CAAE,GAAG,EAAO,cAAe,EAAQ,EAAI,EAAK,EAAQ,EAAE,EAAE,MAAQ,EAAM,KAAM,EAAE,EAAG,CAAC,CAAI,CAAC,EAEnJ,OACE,EAAC,EAAD,CACE,YAAU,mBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA5E,SAAA,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,EACtG,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,cAAA,GACA,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CACE,QAAQ,SACR,kBAAmB,EACnB,MAAO,GAAS,CACd,IAAM,EAAQ,EAAM,QACd,EAAQ,EAAkB,GAAO,OAAS,EAAG,GAAO,eAAiB,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EAC9G,OAAO,EAAC,EAAD,CAAW,GAAI,EAAO,KAAM,CAAQ,CAAA,CAC7C,CACD,CAAA,CACO,GACI,CAAA,CAEpB"}

package/dist/volume-bar-chart-CRxZPZIn.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-bar-chart-CRxZPZIn.cjs","names":["formatCompactNumber","toDateLabel","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","getDirectionColor","Rectangle"],"sources":["../packages/components/features/charts/components/volume-bar-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { formatCompactNumber, getDirectionColor, toDateLabel } from '../utils';\n\nexport type VolumeBarChartProps = BaseChartProps & {\n /** Only `date`, `close`, and `volume` are used; pass the same rows given to `CandlestickChart`. /\n data: Array<Pick<OHLCPoint, 'date' \| 'close' \| 'volume'>>;\n /* Series label. Defaults to `'Volume'`. /\n label?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n dateFormatter?: (date: string \| Date) => string;\n showGrid?: boolean;\n};\n\n/\n Volume bars colored by day direction (close vs. previous close), meant to sit under a\n * `CandlestickChart` on a shared time axis.\n \n @example\n * ```tsx\n * import { VolumeBarChart } from '@customafk/lunas-ui/features/charts';\n \n <VolumeBarChart\n * data={[\n * { date: '2026-06-01', close: 142.5, volume: 2_400_000 },\n * { date: '2026-06-02', close: 145.1, volume: 3_100_000 },\n * ]}\n * />\n * ```\n */\nexport const VolumeBarChart = ({\n data,\n label = 'Volume',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = formatCompactNumber,\n dateFormatter = toDateLabel,\n showGrid = true,\n className,\n animate = true,\n height,\n}: VolumeBarChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ volume: { label, color: upColor } }), [label, upColor]);\n\n const chartData = useMemo(() => data.map((point, index) => ({ ...point, previousClose: index > 0 ? data[index - 1]?.close : point.close })), [data]);\n\n return (\n <ChartContainer\n data-slot=\"volume-bar-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n labelFormatter={(_, payload) => {\n const date = payload?.[0]?.payload?.date;\n return date ? dateFormatter(date) : null;\n }}\n formatter={value => valueFormatter(Number(value))}\n />\n }\n />\n <Bar\n dataKey=\"volume\"\n isAnimationActive={animate}\n shape={props => {\n const point = props.payload as { close?: number; previousClose?: number } \| undefined;\n const color = getDirectionColor(point?.close ?? 0, point?.previousClose ?? 0, { up: upColor, down: downColor });\n return <Rectangle {...props} fill={color} />;\n }}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"mMAwCA,MAAa,GAAkB,CAC7B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiBA,EAAAA,oBACjB,gBAAgBC,EAAAA,YAChB,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,GAAA,EAAA,EAAA,QAAA,MAAqC,CAAE,OAAQ,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAAC,EAE7F,GAAA,EAAA,EAAA,QAAA,KAA0B,EAAK,KAAK,EAAO,KAAW,CAAE,GAAG,EAAO,cAAe,EAAQ,EAAI,EAAK,EAAQ,EAAE,EAAE,MAAQ,EAAM,KAAM,EAAE,EAAG,CAAC,CAAI,CAAC,EAEnJ,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,mBACF,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,SAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,~~WAA5E~~,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,GACR,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,cAAA,GACA,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CACE,QAAQ,SACR,kBAAmB,EACnB,MAAO,GAAS,CACd,IAAM,EAAQ,EAAM,QACd,EAAQC,EAAAA,kBAAkB,GAAO,OAAS,EAAG,GAAO,eAAiB,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EAC9G,OAAO,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,GAAI,EAAO,KAAM,CAAQ,CAAA,CAC7C,CACD,CAAA,CACO,GACI,CAAA,CAEpB"}
1	+ {"version":3,"file":"volume-bar-chart-CRxZPZIn.cjs","names":["formatCompactNumber","toDateLabel","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","getDirectionColor","Rectangle"],"sources":["../packages/components/features/charts/components/volume-bar-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { formatCompactNumber, getDirectionColor, toDateLabel } from '../utils';\n\nexport type VolumeBarChartProps = BaseChartProps & {\n /** Only `date`, `close`, and `volume` are used; pass the same rows given to `CandlestickChart`. /\n data: Array<Pick<OHLCPoint, 'date' \| 'close' \| 'volume'>>;\n /* Series label. Defaults to `'Volume'`. /\n label?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n dateFormatter?: (date: string \| Date) => string;\n showGrid?: boolean;\n};\n\n/\n Volume bars colored by day direction (close vs. previous close), meant to sit under a\n * `CandlestickChart` on a shared time axis.\n \n @example\n * ```tsx\n * import { VolumeBarChart } from '@customafk/lunas-ui/features/charts';\n \n <VolumeBarChart\n * data={[\n * { date: '2026-06-01', close: 142.5, volume: 2_400_000 },\n * { date: '2026-06-02', close: 145.1, volume: 3_100_000 },\n * ]}\n * />\n * ```\n */\nexport const VolumeBarChart = ({\n data,\n label = 'Volume',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = formatCompactNumber,\n dateFormatter = toDateLabel,\n showGrid = true,\n className,\n animate = true,\n height,\n}: VolumeBarChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ volume: { label, color: upColor } }), [label, upColor]);\n\n const chartData = useMemo(() => data.map((point, index) => ({ ...point, previousClose: index > 0 ? data[index - 1]?.close : point.close })), [data]);\n\n return (\n <ChartContainer\n data-slot=\"volume-bar-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={56} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n labelFormatter={(_, payload) => {\n const date = payload?.[0]?.payload?.date;\n return date ? dateFormatter(date) : null;\n }}\n formatter={value => valueFormatter(Number(value))}\n />\n }\n />\n <Bar\n dataKey=\"volume\"\n isAnimationActive={animate}\n shape={props => {\n const point = props.payload as { close?: number; previousClose?: number } \| undefined;\n const color = getDirectionColor(point?.close ?? 0, point?.previousClose ?? 0, { up: upColor, down: downColor });\n return <Rectangle {...props} fill={color} />;\n }}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"mMAwCA,MAAa,GAAkB,CAC7B,OACA,QAAQ,SACR,UAAU,iBACV,YAAY,gBACZ,iBAAiBA,EAAAA,oBACjB,gBAAgBC,EAAAA,YAChB,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,GAAA,EAAA,EAAA,QAAA,MAAqC,CAAE,OAAQ,CAAE,QAAO,MAAO,CAAQ,CAAE,GAAI,CAAC,EAAO,CAAO,CAAC,EAE7F,GAAA,EAAA,EAAA,QAAA,KAA0B,EAAK,KAAK,EAAO,KAAW,CAAE,GAAG,EAAO,cAAe,EAAQ,EAAI,EAAK,EAAQ,EAAE,EAAE,MAAQ,EAAM,KAAM,EAAE,EAAG,CAAC,CAAI,CAAC,EAEnJ,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,mBACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA5E,SAAA,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,cAAe,CAAgB,CAAA,GACtG,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,GACR,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,cAAA,GACA,gBAAiB,EAAG,IAAY,CAC9B,IAAM,EAAO,IAAU,EAAE,EAAE,SAAS,KACpC,OAAO,EAAO,EAAc,CAAI,EAAI,IACtC,EACA,UAAW,GAAS,EAAe,OAAO,CAAK,CAAC,CACjD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CACE,QAAQ,SACR,kBAAmB,EACnB,MAAO,GAAS,CACd,IAAM,EAAQ,EAAM,QACd,EAAQC,EAAAA,kBAAkB,GAAO,OAAS,EAAG,GAAO,eAAiB,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EAC9G,OAAO,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,GAAI,EAAO,KAAM,CAAQ,CAAA,CAC7C,CACD,CAAA,CACO,GACI,CAAA,CAEpB"}

package/dist/waterfall-chart-CTB2f5eh.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"waterfall-chart-CTB2f5eh.cjs","names":["getDirectionColor","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","Rectangle"],"sources":["../packages/components/features/charts/components/waterfall-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, WaterfallPoint } from '../types';\nimport { getDirectionColor } from '../utils';\n\nexport type WaterfallChartProps = BaseChartProps & {\n data: WaterfallPoint[];\n /** Color for `isTotal` bars. Defaults to `'var(--chart-1)'`. /\n totalColor?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n showGrid?: boolean;\n};\n\n/\n A waterfall/bridge chart — an incremental sequence of positive/negative steps between totals\n * (e.g. starting balance → revenue → costs → ending balance). Built as stacked bars: an\n * invisible \"base\" bar positions each floating step at its running total.\n \n @example\n * ```tsx\n * import { WaterfallChart } from '@customafk/lunas-ui/features/charts';\n \n <WaterfallChart\n * data={[\n * { label: 'Starting cash', value: 50000, isTotal: true },\n * { label: 'Revenue', value: 32000 },\n * { label: 'COGS', value: -18000 },\n * { label: 'Opex', value: -9000 },\n * { label: 'Ending cash', value: 55000, isTotal: true },\n * ]}\n * />\n * ```\n */\nexport const WaterfallChart = ({\n data,\n totalColor = 'var(--chart-1)',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = value => value.toLocaleString('en-US'),\n showGrid = true,\n className,\n animate = true,\n height,\n}: WaterfallChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ size: { label: 'Amount', color: totalColor } }), [totalColor]);\n\n const chartData = useMemo(() => {\n let cumulative = 0;\n return data.map(point => {\n if (point.isTotal) {\n const base = 0;\n cumulative = point.value;\n return { ...point, base, size: point.value, color: totalColor, runningTotal: cumulative };\n }\n const previous = cumulative;\n cumulative += point.value;\n const base = Math.min(previous, cumulative);\n return {\n ...point,\n base,\n size: Math.abs(point.value),\n color: getDirectionColor(point.value, 0, { up: upColor, down: downColor }),\n runningTotal: cumulative,\n };\n });\n }, [data, totalColor, upColor, downColor]);\n\n return (\n <ChartContainer\n data-slot=\"waterfall-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"label\" tickLine={false} axisLine={false} tickMargin={8} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n formatter={(_value, _name, item) => {\n const point = item.payload as (typeof chartData)[number];\n return (\n <div className=\"grid gap-0.5\">\n <span className=\"text-muted\">\n {point.isTotal ? 'Total' : point.value >= 0 ? 'Increase' : 'Decrease'}{' '}\n <span className=\"font-medium font-number text-text-positive-strong\">{valueFormatter(point.value)}</span>\n </span>\n <span className=\"text-[11px] text-muted\">Running total {valueFormatter(point.runningTotal)}</span>\n </div>\n );\n }}\n />\n }\n />\n <Bar dataKey=\"base\" stackId=\"waterfall\" fill=\"transparent\" isAnimationActive={false} />\n <Bar\n dataKey=\"size\"\n stackId=\"waterfall\"\n isAnimationActive={animate}\n shape={props => <Rectangle {...props} fill={(props.payload as { color: string }).color} radius={2} />}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"mMA0CA,MAAa,GAAkB,CAC7B,OACA,aAAa,iBACb,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,GAAA,EAAA,EAAA,QAAA,MAAqC,CAAE,KAAM,CAAE,MAAO,SAAU,MAAO,CAAW,CAAE,GAAI,CAAC,CAAU,CAAC,EAEpG,GAAA,EAAA,EAAA,QAAA,KAA0B,CAC9B,IAAI,EAAa,EACjB,OAAO,EAAK,IAAI,GAAS,CACvB,GAAI,EAAM,QAGR,MADA,GAAa,EAAM,MACZ,CAAE,GAAG,EAAO,OAAM,KAAM,EAAM,MAAO,MAAO,EAAY,aAAc,CAAW,EAE1F,IAAM,EAAW,EACjB,GAAc,EAAM,MACpB,IAAM,EAAO,KAAK,IAAI,EAAU,CAAU,EAC1C,MAAO,CACL,GAAG,EACH,OACA,KAAM,KAAK,IAAI,EAAM,KAAK,EAC1B,MAAOA,EAAAA,kBAAkB,EAAM,MAAO,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EACzE,aAAc,CAChB,CACF,CAAC,CACH,EAAG,CAAC,EAAM,EAAY,EAAS,CAAS,CAAC,EAEzC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,kBACF,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,SAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,~~WAA5E~~,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,QAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,GACzE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,GACR,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,cAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,~~wBAAf~~,EACE,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,~~sBAAhB~~,CACG,EAAM,QAAU,QAAU,EAAM,OAAS,EAAI,WAAa,WAAY,KACvE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,~~6DAAqD~~,EAAe,EAAM,KAAK,CAAQ,CAAA,CACnG,~~KACN~~,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,~~kCAAhB~~,CAAyC,iBAAe,EAAe,EAAM,YAAY,CAAQ,~~GAC9F~~,GAET,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,QAAQ,OAAO,QAAQ,YAAY,KAAK,cAAc,kBAAmB,EAAQ,CAAA,GACtF,EAAA,EAAA,IAAA,CAACA,EAAAA,IAAD,CACE,QAAQ,OACR,QAAQ,YACR,kBAAmB,EACnB,MAAO,IAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,GAAI,EAAO,KAAO,EAAM,QAA8B,MAAO,OAAQ,CAAI,CAAA,CACrG,CAAA,CACO,GACI,CAAA,CAEpB"}
1	+ {"version":3,"file":"waterfall-chart-CTB2f5eh.cjs","names":["getDirectionColor","ChartContainer","BarChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","Rectangle"],"sources":["../packages/components/features/charts/components/waterfall-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, WaterfallPoint } from '../types';\nimport { getDirectionColor } from '../utils';\n\nexport type WaterfallChartProps = BaseChartProps & {\n data: WaterfallPoint[];\n /** Color for `isTotal` bars. Defaults to `'var(--chart-1)'`. /\n totalColor?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n showGrid?: boolean;\n};\n\n/\n A waterfall/bridge chart — an incremental sequence of positive/negative steps between totals\n * (e.g. starting balance → revenue → costs → ending balance). Built as stacked bars: an\n * invisible \"base\" bar positions each floating step at its running total.\n \n @example\n * ```tsx\n * import { WaterfallChart } from '@customafk/lunas-ui/features/charts';\n \n <WaterfallChart\n * data={[\n * { label: 'Starting cash', value: 50000, isTotal: true },\n * { label: 'Revenue', value: 32000 },\n * { label: 'COGS', value: -18000 },\n * { label: 'Opex', value: -9000 },\n * { label: 'Ending cash', value: 55000, isTotal: true },\n * ]}\n * />\n * ```\n */\nexport const WaterfallChart = ({\n data,\n totalColor = 'var(--chart-1)',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = value => value.toLocaleString('en-US'),\n showGrid = true,\n className,\n animate = true,\n height,\n}: WaterfallChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ size: { label: 'Amount', color: totalColor } }), [totalColor]);\n\n const chartData = useMemo(() => {\n let cumulative = 0;\n return data.map(point => {\n if (point.isTotal) {\n const base = 0;\n cumulative = point.value;\n return { ...point, base, size: point.value, color: totalColor, runningTotal: cumulative };\n }\n const previous = cumulative;\n cumulative += point.value;\n const base = Math.min(previous, cumulative);\n return {\n ...point,\n base,\n size: Math.abs(point.value),\n color: getDirectionColor(point.value, 0, { up: upColor, down: downColor }),\n runningTotal: cumulative,\n };\n });\n }, [data, totalColor, upColor, downColor]);\n\n return (\n <ChartContainer\n data-slot=\"waterfall-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"label\" tickLine={false} axisLine={false} tickMargin={8} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n formatter={(_value, _name, item) => {\n const point = item.payload as (typeof chartData)[number];\n return (\n <div className=\"grid gap-0.5\">\n <span className=\"text-muted\">\n {point.isTotal ? 'Total' : point.value >= 0 ? 'Increase' : 'Decrease'}{' '}\n <span className=\"font-medium font-number text-text-positive-strong\">{valueFormatter(point.value)}</span>\n </span>\n <span className=\"text-[11px] text-muted\">Running total {valueFormatter(point.runningTotal)}</span>\n </div>\n );\n }}\n />\n }\n />\n <Bar dataKey=\"base\" stackId=\"waterfall\" fill=\"transparent\" isAnimationActive={false} />\n <Bar\n dataKey=\"size\"\n stackId=\"waterfall\"\n isAnimationActive={animate}\n shape={props => <Rectangle {...props} fill={(props.payload as { color: string }).color} radius={2} />}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"mMA0CA,MAAa,GAAkB,CAC7B,OACA,aAAa,iBACb,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,GAAA,EAAA,EAAA,QAAA,MAAqC,CAAE,KAAM,CAAE,MAAO,SAAU,MAAO,CAAW,CAAE,GAAI,CAAC,CAAU,CAAC,EAEpG,GAAA,EAAA,EAAA,QAAA,KAA0B,CAC9B,IAAI,EAAa,EACjB,OAAO,EAAK,IAAI,GAAS,CACvB,GAAI,EAAM,QAGR,MADA,GAAa,EAAM,MACZ,CAAE,GAAG,EAAO,OAAM,KAAM,EAAM,MAAO,MAAO,EAAY,aAAc,CAAW,EAE1F,IAAM,EAAW,EACjB,GAAc,EAAM,MACpB,IAAM,EAAO,KAAK,IAAI,EAAU,CAAU,EAC1C,MAAO,CACL,GAAG,EACH,OACA,KAAM,KAAK,IAAI,EAAM,KAAK,EAC1B,MAAOA,EAAAA,kBAAkB,EAAM,MAAO,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EACzE,aAAc,CAChB,CACF,CAAC,CACH,EAAG,CAAC,EAAM,EAAY,EAAS,CAAS,CAAC,EAEzC,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,kBACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA5E,SAAA,CACG,IAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,SAAU,EAAQ,CAAA,GAC9C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,QAAQ,QAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,GACzE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,GACnG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CACE,OAAQ,GACR,SACE,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CACE,cAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,eAAf,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,aAAhB,SAAA,CACG,EAAM,QAAU,QAAU,EAAM,OAAS,EAAI,WAAa,WAAY,KACvE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,oDAAqD,SAAA,EAAe,EAAM,KAAK,CAAQ,CAAA,CACnG,CACN,CAAA,GAAA,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,yBAAhB,SAAA,CAAyC,iBAAe,EAAe,EAAM,YAAY,CAAQ,CAC9F,CAAA,CAAA,GAET,CACD,CAAA,CAEJ,CAAA,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,QAAQ,OAAO,QAAQ,YAAY,KAAK,cAAc,kBAAmB,EAAQ,CAAA,GACtF,EAAA,EAAA,IAAA,CAACA,EAAAA,IAAD,CACE,QAAQ,OACR,QAAQ,YACR,kBAAmB,EACnB,MAAO,IAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,GAAI,EAAO,KAAO,EAAM,QAA8B,MAAO,OAAQ,CAAI,CAAA,CACrG,CAAA,CACO,GACI,CAAA,CAEpB"}

package/dist/waterfall-chart-DwetaJFJ.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"waterfall-chart-DwetaJFJ.mjs","names":[],"sources":["../packages/components/features/charts/components/waterfall-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, WaterfallPoint } from '../types';\nimport { getDirectionColor } from '../utils';\n\nexport type WaterfallChartProps = BaseChartProps & {\n data: WaterfallPoint[];\n /** Color for `isTotal` bars. Defaults to `'var(--chart-1)'`. /\n totalColor?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n showGrid?: boolean;\n};\n\n/\n A waterfall/bridge chart — an incremental sequence of positive/negative steps between totals\n * (e.g. starting balance → revenue → costs → ending balance). Built as stacked bars: an\n * invisible \"base\" bar positions each floating step at its running total.\n \n @example\n * ```tsx\n * import { WaterfallChart } from '@customafk/lunas-ui/features/charts';\n \n <WaterfallChart\n * data={[\n * { label: 'Starting cash', value: 50000, isTotal: true },\n * { label: 'Revenue', value: 32000 },\n * { label: 'COGS', value: -18000 },\n * { label: 'Opex', value: -9000 },\n * { label: 'Ending cash', value: 55000, isTotal: true },\n * ]}\n * />\n * ```\n */\nexport const WaterfallChart = ({\n data,\n totalColor = 'var(--chart-1)',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = value => value.toLocaleString('en-US'),\n showGrid = true,\n className,\n animate = true,\n height,\n}: WaterfallChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ size: { label: 'Amount', color: totalColor } }), [totalColor]);\n\n const chartData = useMemo(() => {\n let cumulative = 0;\n return data.map(point => {\n if (point.isTotal) {\n const base = 0;\n cumulative = point.value;\n return { ...point, base, size: point.value, color: totalColor, runningTotal: cumulative };\n }\n const previous = cumulative;\n cumulative += point.value;\n const base = Math.min(previous, cumulative);\n return {\n ...point,\n base,\n size: Math.abs(point.value),\n color: getDirectionColor(point.value, 0, { up: upColor, down: downColor }),\n runningTotal: cumulative,\n };\n });\n }, [data, totalColor, upColor, downColor]);\n\n return (\n <ChartContainer\n data-slot=\"waterfall-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"label\" tickLine={false} axisLine={false} tickMargin={8} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n formatter={(_value, _name, item) => {\n const point = item.payload as (typeof chartData)[number];\n return (\n <div className=\"grid gap-0.5\">\n <span className=\"text-muted\">\n {point.isTotal ? 'Total' : point.value >= 0 ? 'Increase' : 'Decrease'}{' '}\n <span className=\"font-medium font-number text-text-positive-strong\">{valueFormatter(point.value)}</span>\n </span>\n <span className=\"text-[11px] text-muted\">Running total {valueFormatter(point.runningTotal)}</span>\n </div>\n );\n }}\n />\n }\n />\n <Bar dataKey=\"base\" stackId=\"waterfall\" fill=\"transparent\" isAnimationActive={false} />\n <Bar\n dataKey=\"size\"\n stackId=\"waterfall\"\n isAnimationActive={animate}\n shape={props => <Rectangle {...props} fill={(props.payload as { color: string }).color} radius={2} />}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"sYA0CA,MAAa,GAAkB,CAC7B,OACA,aAAa,iBACb,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,EAAS,OAA4B,CAAE,KAAM,CAAE,MAAO,SAAU,MAAO,CAAW,CAAE,GAAI,CAAC,CAAU,CAAC,EAEpG,EAAY,MAAc,CAC9B,IAAI,EAAa,EACjB,OAAO,EAAK,IAAI,GAAS,CACvB,GAAI,EAAM,QAGR,MADA,GAAa,EAAM,MACZ,CAAE,GAAG,EAAO,OAAM,KAAM,EAAM,MAAO,MAAO,EAAY,aAAc,CAAW,EAE1F,IAAM,EAAW,EACjB,GAAc,EAAM,MACpB,IAAM,EAAO,KAAK,IAAI,EAAU,CAAU,EAC1C,MAAO,CACL,GAAG,EACH,OACA,KAAM,KAAK,IAAI,EAAM,KAAK,EAC1B,MAAO,EAAkB,EAAM,MAAO,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EACzE,aAAc,CAChB,CACF,CAAC,CACH,EAAG,CAAC,EAAM,EAAY,EAAS,CAAS,CAAC,EAEzC,OACE,EAAC,EAAD,CACE,YAAU,kBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,~~WAE5D~~,EAAC,EAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,~~WAA5E~~,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,QAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,EACzE,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,cAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAC,MAAD,CAAK,UAAU,~~wBAAf~~,CACE,EAAC,OAAD,CAAM,UAAU,~~sBAAhB~~,CACG,EAAM,QAAU,QAAU,EAAM,OAAS,EAAI,WAAa,WAAY,IACvE,EAAC,OAAD,CAAM,UAAU,~~6DAAqD~~,EAAe,EAAM,KAAK,CAAQ,CAAA,CACnG,~~IACN~~,EAAC,OAAD,CAAM,UAAU,~~kCAAhB~~,CAAyC,iBAAe,EAAe,EAAM,YAAY,CAAQ,~~GAC9F~~,GAET,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAK,QAAQ,OAAO,QAAQ,YAAY,KAAK,cAAc,kBAAmB,EAAQ,CAAA,EACtF,EAAC,EAAD,CACE,QAAQ,OACR,QAAQ,YACR,kBAAmB,EACnB,MAAO,GAAS,EAAC,EAAD,CAAW,GAAI,EAAO,KAAO,EAAM,QAA8B,MAAO,OAAQ,CAAI,CAAA,CACrG,CAAA,CACO,GACI,CAAA,CAEpB"}
1	+ {"version":3,"file":"waterfall-chart-DwetaJFJ.mjs","names":[],"sources":["../packages/components/features/charts/components/waterfall-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 { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, WaterfallPoint } from '../types';\nimport { getDirectionColor } from '../utils';\n\nexport type WaterfallChartProps = BaseChartProps & {\n data: WaterfallPoint[];\n /** Color for `isTotal` bars. Defaults to `'var(--chart-1)'`. /\n totalColor?: string;\n upColor?: string;\n downColor?: string;\n valueFormatter?: (value: number) => string;\n showGrid?: boolean;\n};\n\n/\n A waterfall/bridge chart — an incremental sequence of positive/negative steps between totals\n * (e.g. starting balance → revenue → costs → ending balance). Built as stacked bars: an\n * invisible \"base\" bar positions each floating step at its running total.\n \n @example\n * ```tsx\n * import { WaterfallChart } from '@customafk/lunas-ui/features/charts';\n \n <WaterfallChart\n * data={[\n * { label: 'Starting cash', value: 50000, isTotal: true },\n * { label: 'Revenue', value: 32000 },\n * { label: 'COGS', value: -18000 },\n * { label: 'Opex', value: -9000 },\n * { label: 'Ending cash', value: 55000, isTotal: true },\n * ]}\n * />\n * ```\n */\nexport const WaterfallChart = ({\n data,\n totalColor = 'var(--chart-1)',\n upColor = 'var(--success)',\n downColor = 'var(--danger)',\n valueFormatter = value => value.toLocaleString('en-US'),\n showGrid = true,\n className,\n animate = true,\n height,\n}: WaterfallChartProps) => {\n const config = useMemo<ChartConfig>(() => ({ size: { label: 'Amount', color: totalColor } }), [totalColor]);\n\n const chartData = useMemo(() => {\n let cumulative = 0;\n return data.map(point => {\n if (point.isTotal) {\n const base = 0;\n cumulative = point.value;\n return { ...point, base, size: point.value, color: totalColor, runningTotal: cumulative };\n }\n const previous = cumulative;\n cumulative += point.value;\n const base = Math.min(previous, cumulative);\n return {\n ...point,\n base,\n size: Math.abs(point.value),\n color: getDirectionColor(point.value, 0, { up: upColor, down: downColor }),\n runningTotal: cumulative,\n };\n });\n }, [data, totalColor, upColor, downColor]);\n\n return (\n <ChartContainer\n data-slot=\"waterfall-chart\"\n config={config}\n className={cn('w-full', className)}\n style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n >\n <BarChart data={chartData} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n {showGrid && <CartesianGrid vertical={false} />}\n <XAxis dataKey=\"label\" tickLine={false} axisLine={false} tickMargin={8} />\n <YAxis tickLine={false} axisLine={false} tickMargin={8} width={64} tickFormatter={valueFormatter} />\n <ChartTooltip\n cursor={false}\n content={\n <ChartTooltipContent\n hideIndicator\n formatter={(_value, _name, item) => {\n const point = item.payload as (typeof chartData)[number];\n return (\n <div className=\"grid gap-0.5\">\n <span className=\"text-muted\">\n {point.isTotal ? 'Total' : point.value >= 0 ? 'Increase' : 'Decrease'}{' '}\n <span className=\"font-medium font-number text-text-positive-strong\">{valueFormatter(point.value)}</span>\n </span>\n <span className=\"text-[11px] text-muted\">Running total {valueFormatter(point.runningTotal)}</span>\n </div>\n );\n }}\n />\n }\n />\n <Bar dataKey=\"base\" stackId=\"waterfall\" fill=\"transparent\" isAnimationActive={false} />\n <Bar\n dataKey=\"size\"\n stackId=\"waterfall\"\n isAnimationActive={animate}\n shape={props => <Rectangle {...props} fill={(props.payload as { color: string }).color} radius={2} />}\n />\n </BarChart>\n </ChartContainer>\n );\n};\n"],"mappings":"sYA0CA,MAAa,GAAkB,CAC7B,OACA,aAAa,iBACb,UAAU,iBACV,YAAY,gBACZ,iBAAiB,GAAS,EAAM,eAAe,OAAO,EACtD,WAAW,GACX,YACA,UAAU,GACV,YACyB,CACzB,IAAM,EAAS,OAA4B,CAAE,KAAM,CAAE,MAAO,SAAU,MAAO,CAAW,CAAE,GAAI,CAAC,CAAU,CAAC,EAEpG,EAAY,MAAc,CAC9B,IAAI,EAAa,EACjB,OAAO,EAAK,IAAI,GAAS,CACvB,GAAI,EAAM,QAGR,MADA,GAAa,EAAM,MACZ,CAAE,GAAG,EAAO,OAAM,KAAM,EAAM,MAAO,MAAO,EAAY,aAAc,CAAW,EAE1F,IAAM,EAAW,EACjB,GAAc,EAAM,MACpB,IAAM,EAAO,KAAK,IAAI,EAAU,CAAU,EAC1C,MAAO,CACL,GAAG,EACH,OACA,KAAM,KAAK,IAAI,EAAM,KAAK,EAC1B,MAAO,EAAkB,EAAM,MAAO,EAAG,CAAE,GAAI,EAAS,KAAM,CAAU,CAAC,EACzE,aAAc,CAChB,CACF,CAAC,CACH,EAAG,CAAC,EAAM,EAAY,EAAS,CAAS,CAAC,EAEzC,OACE,EAAC,EAAD,CACE,YAAU,kBACF,SACR,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,EAE5D,SAAA,EAAC,EAAD,CAAU,KAAM,EAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,GAAI,OAAQ,EAAG,KAAM,EAAG,EAA5E,SAAA,CACG,GAAY,EAAC,EAAD,CAAe,SAAU,EAAQ,CAAA,EAC9C,EAAC,EAAD,CAAO,QAAQ,QAAQ,SAAU,GAAO,SAAU,GAAO,WAAY,CAAI,CAAA,EACzE,EAAC,EAAD,CAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAI,cAAe,CAAiB,CAAA,EACnG,EAAC,EAAD,CACE,OAAQ,GACR,QACE,EAAC,EAAD,CACE,cAAA,GACA,WAAY,EAAQ,EAAO,IAAS,CAClC,IAAM,EAAQ,EAAK,QACnB,OACE,EAAC,MAAD,CAAK,UAAU,eAAf,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,aAAhB,SAAA,CACG,EAAM,QAAU,QAAU,EAAM,OAAS,EAAI,WAAa,WAAY,IACvE,EAAC,OAAD,CAAM,UAAU,oDAAqD,SAAA,EAAe,EAAM,KAAK,CAAQ,CAAA,CACnG,CACN,CAAA,EAAA,EAAC,OAAD,CAAM,UAAU,yBAAhB,SAAA,CAAyC,iBAAe,EAAe,EAAM,YAAY,CAAQ,CAC9F,CAAA,CAAA,GAET,CACD,CAAA,CAEJ,CAAA,EACD,EAAC,EAAD,CAAK,QAAQ,OAAO,QAAQ,YAAY,KAAK,cAAc,kBAAmB,EAAQ,CAAA,EACtF,EAAC,EAAD,CACE,QAAQ,OACR,QAAQ,YACR,kBAAmB,EACnB,MAAO,GAAS,EAAC,EAAD,CAAW,GAAI,EAAO,KAAO,EAAM,QAA8B,MAAO,OAAQ,CAAI,CAAA,CACrG,CAAA,CACO,GACI,CAAA,CAEpB"}