@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/avatar-name-display-BrpnTqa_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-name-display-BrpnTqa_.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/avatar-name-display.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\n\n/** Props for the {@link UITableAvatarNameDisplay} component. */\ntype Props = {\n  /** Display name shown beside the avatar. */\n  name: string;\n  /** Optional image URL for the avatar. Falls back to a color-hashed icon when absent. */\n  avatarUrl?: string;\n  /** Seed for deterministic avatar background color generation. Defaults to `name`. */\n  uuid?: string;\n};\n\n/**\n * Renders a circular avatar paired with a name in a compact horizontal row.\n * When no `avatarUrl` is provided the fallback uses a deterministic background\n * color derived from `uuid` (or `name`) via `colorHashLight`, matching the\n * style of `UserDataDisplay`.\n *\n * @example\n * import { UITableAvatarNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableAvatarNameDisplay name=\"Jane Smith\" uuid=\"user-42\" avatarUrl=\"/avatars/jane.png\" />\n */\nexport const UITableAvatarNameDisplay: React.FC<Props> = ({ name, avatarUrl, uuid }) => {\n  const bgColor = colorHashLight.hex(uuid ?? name);\n  return (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      <Avatar className=\"size-8 shrink-0\">\n        <AvatarImage src={avatarUrl} alt={name} />\n        <AvatarFallback style={{ backgroundColor: bgColor }}>\n          <UserRoundIcon size={18} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <span className=\"truncate text-sm font-medium\">{name}</span>\n    </div>\n  );\n};\n"],"mappings":"kPA6BA,MAAa,GAA6C,CAAE,OAAM,YAAW,UAAW,CACtF,IAAM,EAAU,EAAe,IAAI,GAAQ,CAAI,EAC/C,OACE,EAAC,MAAD,CAAK,UAAU,2CAAf,CACE,EAAC,EAAD,CAAQ,UAAU,2BAAlB,CACE,EAAC,EAAD,CAAa,IAAK,EAAW,IAAK,CAAO,CAAA,EACzC,EAAC,EAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAQ,WAChD,EAAC,EAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,IACR,EAAC,OAAD,CAAM,UAAU,wCAAgC,CAAW,CAAA,CACxD,GAET"}

package/dist/avatar-name-display-CLi1DJUs.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/avatar.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime"),r=require("@customafk/react-toolkit/color-hash");const i=({name:i,avatarUrl:a,uuid:o})=>{let s=r.colorHashLight.hex(o??i);return(0,n.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,n.jsxs)(e.Avatar,{className:`size-8 shrink-0`,children:[(0,n.jsx)(e.AvatarImage,{src:a,alt:i}),(0,n.jsx)(e.AvatarFallback,{style:{backgroundColor:s},children:(0,n.jsx)(t.UserRoundIcon,{size:18,className:`text-white`})})]}),(0,n.jsx)(`span`,{className:`truncate text-sm font-medium`,children:i})]})};exports.UITableAvatarNameDisplay=i;
+//# sourceMappingURL=avatar-name-display-CLi1DJUs.cjs.map

package/dist/avatar-name-display-CLi1DJUs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-name-display-CLi1DJUs.cjs","names":["colorHashLight","Avatar","AvatarImage","AvatarFallback","UserRoundIcon"],"sources":["../packages/components/features/tables/components/atoms/avatar-name-display.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\n\n/** Props for the {@link UITableAvatarNameDisplay} component. */\ntype Props = {\n  /** Display name shown beside the avatar. */\n  name: string;\n  /** Optional image URL for the avatar. Falls back to a color-hashed icon when absent. */\n  avatarUrl?: string;\n  /** Seed for deterministic avatar background color generation. Defaults to `name`. */\n  uuid?: string;\n};\n\n/**\n * Renders a circular avatar paired with a name in a compact horizontal row.\n * When no `avatarUrl` is provided the fallback uses a deterministic background\n * color derived from `uuid` (or `name`) via `colorHashLight`, matching the\n * style of `UserDataDisplay`.\n *\n * @example\n * import { UITableAvatarNameDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableAvatarNameDisplay name=\"Jane Smith\" uuid=\"user-42\" avatarUrl=\"/avatars/jane.png\" />\n */\nexport const UITableAvatarNameDisplay: React.FC<Props> = ({ name, avatarUrl, uuid }) => {\n  const bgColor = colorHashLight.hex(uuid ?? name);\n  return (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      <Avatar className=\"size-8 shrink-0\">\n        <AvatarImage src={avatarUrl} alt={name} />\n        <AvatarFallback style={{ backgroundColor: bgColor }}>\n          <UserRoundIcon size={18} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <span className=\"truncate text-sm font-medium\">{name}</span>\n    </div>\n  );\n};\n"],"mappings":"iJA6BA,MAAa,GAA6C,CAAE,OAAM,YAAW,UAAW,CACtF,IAAM,EAAUA,EAAAA,eAAe,IAAI,GAAQ,CAAI,EAC/C,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,OAAD,CAAQ,UAAU,2BAAlB,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,IAAK,EAAW,IAAK,CAAO,CAAA,GACzC,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAO,CAAE,gBAAiB,CAAQ,YAChD,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,GAAI,UAAU,YAAc,CAAA,CACnC,CAAA,CACV,KACR,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wCAAgC,CAAW,CAAA,CACxD,GAET"}

package/dist/{badge-D0InQSvM.d.cts → badge-MRT40pxM.d.cts}

@@ -2,8 +2,8 @@ import { VariantProps } from "class-variance-authority";
 
 //#region packages/components/ui/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "outline" | "solid" | "soft" | null | undefined;
-  color?: "muted" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "danger" | null | undefined;
+  variant?: "solid" | "soft" | "outline" | null | undefined;
+  color?: "primary" | "secondary" | "muted" | "accent" | "info" | "success" | "warning" | "danger" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
   pill?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -37,4 +37,4 @@ declare function Badge({
 }: BadgeProps): import("react").JSX.Element;
 //#endregion
 export { BadgeProps as n, badgeVariants as r, Badge as t };
-//# sourceMappingURL=badge-D0InQSvM.d.cts.map
+//# sourceMappingURL=badge-MRT40pxM.d.cts.map

package/dist/{badge-D0InQSvM.d.mts → badge-MRT40pxM.d.mts}

@@ -2,8 +2,8 @@ import { VariantProps } from "class-variance-authority";
 
 //#region packages/components/ui/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "outline" | "solid" | "soft" | null | undefined;
-  color?: "muted" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "danger" | null | undefined;
+  variant?: "solid" | "soft" | "outline" | null | undefined;
+  color?: "primary" | "secondary" | "muted" | "accent" | "info" | "success" | "warning" | "danger" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
   pill?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -37,4 +37,4 @@ declare function Badge({
 }: BadgeProps): import("react").JSX.Element;
 //#endregion
 export { BadgeProps as n, badgeVariants as r, Badge as t };
-//# sourceMappingURL=badge-D0InQSvM.d.mts.map
+//# sourceMappingURL=badge-MRT40pxM.d.mts.map

package/dist/badge-display-Bs0QeCJt.cjs

@@ -0,0 +1,2 @@
+const e=require("./tables-B1O9qy-m.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({label:r,onClick:i,onRemove:a})=>r?a?(0,n.jsxs)(`div`,{className:`flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs`,onClick:e=>{i?.(),e.stopPropagation(),e.preventDefault()},children:[r,(0,n.jsx)(`button`,{className:`cursor-pointer text-text-positive-weak hover:text-text-positive-strong`,onClick:e=>{a?.(),e.stopPropagation(),e.preventDefault()},children:(0,n.jsx)(t.XIcon,{size:12})})]}):(0,n.jsx)(`button`,{className:`w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs`,onClick:e=>{i?.(),e.stopPropagation(),e.preventDefault()},children:r}):(0,n.jsx)(e.Y,{});exports.UITableBadgeDisplay=r;
+//# sourceMappingURL=badge-display-Bs0QeCJt.cjs.map

package/dist/badge-display-Bs0QeCJt.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-display-Bs0QeCJt.cjs","names":["UITableEmpty","XIcon"],"sources":["../packages/components/features/tables/components/atoms/badge-display.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders a pill-shaped badge for a table cell that optionally supports a click\n * action and an inline remove button; falls back to {@link UITableEmpty} when\n * `label` is falsy.\n *\n * @example\n * import { UITableBadgeDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableBadgeDisplay\n *   label=\"Active\"\n *   onClick={() => console.log('badge clicked')}\n *   onRemove={() => console.log('remove clicked')}\n * />\n */\nexport const UITableBadgeDisplay: React.FC<{\n  /** The text or number to display inside the badge. */\n  label: string | number | null | undefined;\n  /** Optional callback fired when the badge itself is clicked. */\n  onClick?: () => void;\n  /** When provided, renders a remove (×) button and fires this callback on click. */\n  onRemove?: () => void;\n}> = ({ label, onClick, onRemove }) => {\n  if (!label) return <UITableEmpty />;\n  if (onRemove) {\n    return (\n      <div\n        className=\"flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs\"\n        onClick={e => {\n          onClick?.();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        {label}\n        <button\n          className=\"cursor-pointer text-text-positive-weak hover:text-text-positive-strong\"\n          onClick={e => {\n            onRemove?.();\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n        >\n          <XIcon size={12} />\n        </button>\n      </div>\n    );\n  }\n  return (\n    <button\n      className=\"w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs\"\n      onClick={e => {\n        onClick?.();\n        e.stopPropagation();\n        e.preventDefault();\n      }}\n    >\n      {label}\n    </button>\n  );\n};\n"],"mappings":"sGAkBA,MAAa,GAOP,CAAE,QAAO,UAAS,cACjB,EACD,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,UAAU,6GACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WANF,CAQG,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,yEACV,QAAS,GAAK,CACZ,IAAW,EACX,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,YAEA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACL,KAIP,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,yFACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WAEC,CACK,CAAA,GAnCS,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAe,CAAA"}

package/dist/badge-display-Dg5XM66P.mjs

@@ -0,0 +1,2 @@
+import{Y as e}from"./tables-9d53sH9E.mjs";import{XIcon as t}from"lucide-react";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({label:i,onClick:a,onRemove:o})=>i?o?r(`div`,{className:`flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs`,onClick:e=>{a?.(),e.stopPropagation(),e.preventDefault()},children:[i,n(`button`,{className:`cursor-pointer text-text-positive-weak hover:text-text-positive-strong`,onClick:e=>{o?.(),e.stopPropagation(),e.preventDefault()},children:n(t,{size:12})})]}):n(`button`,{className:`w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs`,onClick:e=>{a?.(),e.stopPropagation(),e.preventDefault()},children:i}):n(e,{});export{i as UITableBadgeDisplay};
+//# sourceMappingURL=badge-display-Dg5XM66P.mjs.map

package/dist/badge-display-Dg5XM66P.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-display-Dg5XM66P.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/badge-display.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders a pill-shaped badge for a table cell that optionally supports a click\n * action and an inline remove button; falls back to {@link UITableEmpty} when\n * `label` is falsy.\n *\n * @example\n * import { UITableBadgeDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableBadgeDisplay\n *   label=\"Active\"\n *   onClick={() => console.log('badge clicked')}\n *   onRemove={() => console.log('remove clicked')}\n * />\n */\nexport const UITableBadgeDisplay: React.FC<{\n  /** The text or number to display inside the badge. */\n  label: string | number | null | undefined;\n  /** Optional callback fired when the badge itself is clicked. */\n  onClick?: () => void;\n  /** When provided, renders a remove (×) button and fires this callback on click. */\n  onRemove?: () => void;\n}> = ({ label, onClick, onRemove }) => {\n  if (!label) return <UITableEmpty />;\n  if (onRemove) {\n    return (\n      <div\n        className=\"flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs\"\n        onClick={e => {\n          onClick?.();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        {label}\n        <button\n          className=\"cursor-pointer text-text-positive-weak hover:text-text-positive-strong\"\n          onClick={e => {\n            onRemove?.();\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n        >\n          <XIcon size={12} />\n        </button>\n      </div>\n    );\n  }\n  return (\n    <button\n      className=\"w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs\"\n      onClick={e => {\n        onClick?.();\n        e.stopPropagation();\n        e.preventDefault();\n      }}\n    >\n      {label}\n    </button>\n  );\n};\n"],"mappings":"iIAkBA,MAAa,GAOP,CAAE,QAAO,UAAS,cACjB,EACD,EAEA,EAAC,MAAD,CACE,UAAU,6GACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WANF,CAQG,EACD,EAAC,SAAD,CACE,UAAU,yEACV,QAAS,GAAK,CACZ,IAAW,EACX,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WAEA,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACL,IAIP,EAAC,SAAD,CACE,UAAU,yFACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WAEC,CACK,CAAA,EAnCS,EAAC,EAAD,CAAe,CAAA"}

package/dist/boolean-display-BnN32_Jd.cjs

@@ -0,0 +1,2 @@
+const e=require("./tables-B1O9qy-m.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({value:r})=>r==null?(0,n.jsx)(e.Y,{}):r===!1?(0,n.jsx)(t.XIcon,{size:14,strokeWidth:2,className:`text-danger-strong`}):(0,n.jsx)(t.CheckIcon,{size:14,strokeWidth:2,className:`text-success-strong`});exports.UITableBooleanDisplay=r;
+//# sourceMappingURL=boolean-display-BnN32_Jd.cjs.map

package/dist/boolean-display-BnN32_Jd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-display-BnN32_Jd.cjs","names":["UITableEmpty","XIcon","CheckIcon"],"sources":["../packages/components/features/tables/components/atoms/boolean-display.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\nexport const UITableBooleanDisplay: React.FC<{\n  value: boolean | null | undefined;\n}> = ({ value }) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n  if (value === false) {\n    return <XIcon size={14} strokeWidth={2} className=\"text-danger-strong\" />;\n  }\n  return <CheckIcon size={14} strokeWidth={2} className=\"text-success-strong\" />;\n};\n"],"mappings":"sGAIA,MAAa,GAEP,CAAE,WACF,GAAU,MAAoC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAC7D,IAAU,IACL,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,YAAa,EAAG,UAAU,oBAAsB,CAAA,GAEnE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,GAAI,YAAa,EAAG,UAAU,qBAAuB,CAAA"}

package/dist/boolean-display-DVn3UGuZ.mjs

@@ -0,0 +1,2 @@
+import{Y as e}from"./tables-9d53sH9E.mjs";import{CheckIcon as t,XIcon as n}from"lucide-react";import{jsx as r}from"react/jsx-runtime";const i=({value:i})=>i==null?r(e,{}):i===!1?r(n,{size:14,strokeWidth:2,className:`text-danger-strong`}):r(t,{size:14,strokeWidth:2,className:`text-success-strong`});export{i as UITableBooleanDisplay};
+//# sourceMappingURL=boolean-display-DVn3UGuZ.mjs.map

package/dist/boolean-display-DVn3UGuZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-display-DVn3UGuZ.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/boolean-display.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\nexport const UITableBooleanDisplay: React.FC<{\n  value: boolean | null | undefined;\n}> = ({ value }) => {\n  if (value === null || value === undefined) return <UITableEmpty />;\n  if (value === false) {\n    return <XIcon size={14} strokeWidth={2} className=\"text-danger-strong\" />;\n  }\n  return <CheckIcon size={14} strokeWidth={2} className=\"text-success-strong\" />;\n};\n"],"mappings":"sIAIA,MAAa,GAEP,CAAE,WACF,GAAU,KAAoC,EAAC,EAAD,CAAe,CAAA,EAC7D,IAAU,GACL,EAAC,EAAD,CAAO,KAAM,GAAI,YAAa,EAAG,UAAU,oBAAsB,CAAA,EAEnE,EAAC,EAAD,CAAW,KAAM,GAAI,YAAa,EAAG,UAAU,qBAAuB,CAAA"}

package/dist/breadcrumb-CSpScKZm.d.cts

@@ -0,0 +1,69 @@
+//#region packages/components/ui/breadcrumb.d.ts
+/**
+ * Root breadcrumb navigation `<nav>` element with accessible aria-label.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Breadcrumb, BreadcrumbList, BreadcrumbItem,
+ *   BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage,
+ * } from '@customafk/lunas-ui/ui/breadcrumb';
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Settings</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ */
+declare function Breadcrumb({
+  className,
+  ...props
+}: React.ComponentProps<'nav'>): import("react").JSX.Element;
+/** Ordered list `<ol>` container that lays out breadcrumb items horizontally with wrapping. */
+declare function BreadcrumbList({
+  className,
+  ...props
+}: React.ComponentProps<'ol'>): import("react").JSX.Element;
+/** Individual `<li>` item wrapper inside a BreadcrumbList. */
+declare function BreadcrumbItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>): import("react").JSX.Element;
+/**
+ * Interactive anchor link for non-current breadcrumb segments; supports `asChild` for custom routing.
+ *
+ * @param asChild - When true, renders as the child element via Radix Slot instead of `<a>`.
+ */
+declare function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}): import("react").JSX.Element;
+/** Non-interactive span representing the current page; sets `aria-current="page"`. */
+declare function BreadcrumbPage({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+/** Visual separator `<li>` rendered between breadcrumb items; defaults to a right chevron icon. */
+declare function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>): import("react").JSX.Element;
+/** Button that represents collapsed breadcrumb segments with an ellipsis icon. */
+declare function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'button'>): import("react").JSX.Element;
+//#endregion
+export { BreadcrumbList as a, BreadcrumbLink as i, BreadcrumbEllipsis as n, BreadcrumbPage as o, BreadcrumbItem as r, BreadcrumbSeparator as s, Breadcrumb as t };
+//# sourceMappingURL=breadcrumb-CSpScKZm.d.cts.map

package/dist/breadcrumb-CSpScKZm.d.mts

@@ -0,0 +1,69 @@
+//#region packages/components/ui/breadcrumb.d.ts
+/**
+ * Root breadcrumb navigation `<nav>` element with accessible aria-label.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Breadcrumb, BreadcrumbList, BreadcrumbItem,
+ *   BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage,
+ * } from '@customafk/lunas-ui/ui/breadcrumb';
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Settings</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ */
+declare function Breadcrumb({
+  className,
+  ...props
+}: React.ComponentProps<'nav'>): import("react").JSX.Element;
+/** Ordered list `<ol>` container that lays out breadcrumb items horizontally with wrapping. */
+declare function BreadcrumbList({
+  className,
+  ...props
+}: React.ComponentProps<'ol'>): import("react").JSX.Element;
+/** Individual `<li>` item wrapper inside a BreadcrumbList. */
+declare function BreadcrumbItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>): import("react").JSX.Element;
+/**
+ * Interactive anchor link for non-current breadcrumb segments; supports `asChild` for custom routing.
+ *
+ * @param asChild - When true, renders as the child element via Radix Slot instead of `<a>`.
+ */
+declare function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}): import("react").JSX.Element;
+/** Non-interactive span representing the current page; sets `aria-current="page"`. */
+declare function BreadcrumbPage({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+/** Visual separator `<li>` rendered between breadcrumb items; defaults to a right chevron icon. */
+declare function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>): import("react").JSX.Element;
+/** Button that represents collapsed breadcrumb segments with an ellipsis icon. */
+declare function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'button'>): import("react").JSX.Element;
+//#endregion
+export { BreadcrumbList as a, BreadcrumbLink as i, BreadcrumbEllipsis as n, BreadcrumbPage as o, BreadcrumbItem as r, BreadcrumbSeparator as s, Breadcrumb as t };
+//# sourceMappingURL=breadcrumb-CSpScKZm.d.mts.map

package/dist/{button-DIqm3YRo.d.cts → button-Bk4Y6_9I.d.cts}

@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
  * Button variants definition for styling using class-variance-authority
  */
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "outline" | "link" | "soft" | "ghost" | "subtle" | null | undefined;
-  color?: "muted" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
+  variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
+  color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
@@ -168,4 +168,4 @@ declare function Button({
 }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-DIqm3YRo.d.cts.map
+//# sourceMappingURL=button-Bk4Y6_9I.d.cts.map

package/dist/{button-DIqm3YRo.d.mts → button-Bk4Y6_9I.d.mts}

@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
  * Button variants definition for styling using class-variance-authority
  */
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "outline" | "link" | "soft" | "ghost" | "subtle" | null | undefined;
-  color?: "muted" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
+  variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
+  color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
@@ -168,4 +168,4 @@ declare function Button({
 }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-DIqm3YRo.d.mts.map
+//# sourceMappingURL=button-Bk4Y6_9I.d.mts.map

package/dist/button-group-Cd5m5G3p.d.mts

@@ -0,0 +1,48 @@
+import { t as Separator } from "./separator-D6_fMJtM.mjs";
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/ui/button-group.d.ts
+declare const buttonGroupVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Groups buttons (or inputs) into a visually connected row or column by removing the border radii on adjacent sides.
+ *
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupSeparator } from '@customafk/lunas-ui/ui/button-group';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <ButtonGroup orientation="horizontal">
+ *   <Button variant="outline">Left</Button>
+ *   <ButtonGroupSeparator />
+ *   <Button variant="outline">Right</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
+/**
+ * A static text or icon addon rendered inside a ButtonGroup with muted background styling.
+ *
+ * @param asChild - When true, renders as the child element via Radix Slot instead of `<div>`.
+ */
+declare function ButtonGroupText({
+  className,
+  asChild,
+  ...props
+}: React.ComponentProps<'div'> & {
+  asChild?: boolean;
+}): import("react").JSX.Element;
+/** A visual Separator rendered between items inside a ButtonGroup. */
+declare function ButtonGroupSeparator({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+//#endregion
+export { buttonGroupVariants as i, ButtonGroupSeparator as n, ButtonGroupText as r, ButtonGroup as t };
+//# sourceMappingURL=button-group-Cd5m5G3p.d.mts.map

package/dist/button-group-CiKhLVCg.d.cts

@@ -0,0 +1,48 @@
+import { t as Separator } from "./separator-D6_fMJtM.cjs";
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/ui/button-group.d.ts
+declare const buttonGroupVariants: (props?: ({
+  orientation?: "vertical" | "horizontal" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Groups buttons (or inputs) into a visually connected row or column by removing the border radii on adjacent sides.
+ *
+ * @example
+ * ```tsx
+ * import { ButtonGroup, ButtonGroupSeparator } from '@customafk/lunas-ui/ui/button-group';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <ButtonGroup orientation="horizontal">
+ *   <Button variant="outline">Left</Button>
+ *   <ButtonGroupSeparator />
+ *   <Button variant="outline">Right</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
+/**
+ * A static text or icon addon rendered inside a ButtonGroup with muted background styling.
+ *
+ * @param asChild - When true, renders as the child element via Radix Slot instead of `<div>`.
+ */
+declare function ButtonGroupText({
+  className,
+  asChild,
+  ...props
+}: React.ComponentProps<'div'> & {
+  asChild?: boolean;
+}): import("react").JSX.Element;
+/** A visual Separator rendered between items inside a ButtonGroup. */
+declare function ButtonGroupSeparator({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+//#endregion
+export { buttonGroupVariants as i, ButtonGroupSeparator as n, ButtonGroupText as r, ButtonGroup as t };
+//# sourceMappingURL=button-group-CiKhLVCg.d.cts.map

package/dist/calendar-DPKt7D3w.d.mts

@@ -0,0 +1,43 @@
+import { t as Button } from "./button-Bk4Y6_9I.mjs";
+import { DayButton, DayPicker } from "react-day-picker";
+
+//#region packages/components/ui/calendar.d.ts
+declare const CalendarDayButton: ({
+  className,
+  day,
+  modifiers,
+  color: _,
+  ...props
+}: React.ComponentProps<typeof DayButton>) => import("react").JSX.Element;
+/**
+ * A fully styled date-picker calendar built on top of react-day-picker, supporting single, range, and multiple selection modes.
+ *
+ * @example
+ * ```tsx
+ * import { Calendar } from '@customafk/lunas-ui/ui/calendar';
+ *
+ * const [date, setDate] = React.useState<Date>();
+ *
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   captionLayout="dropdown"
+ * />
+ * ```
+ */
+declare function Calendar({
+  className,
+  classNames,
+  showOutsideDays,
+  captionLayout,
+  buttonVariant,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  /** Variant applied to the previous/next navigation buttons. */buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): import("react").JSX.Element;
+//#endregion
+export { CalendarDayButton as n, Calendar as t };
+//# sourceMappingURL=calendar-DPKt7D3w.d.mts.map

package/dist/calendar-stv2bJv0.d.cts

@@ -0,0 +1,43 @@
+import { t as Button } from "./button-Bk4Y6_9I.cjs";
+import { DayButton, DayPicker } from "react-day-picker";
+
+//#region packages/components/ui/calendar.d.ts
+declare const CalendarDayButton: ({
+  className,
+  day,
+  modifiers,
+  color: _,
+  ...props
+}: React.ComponentProps<typeof DayButton>) => import("react").JSX.Element;
+/**
+ * A fully styled date-picker calendar built on top of react-day-picker, supporting single, range, and multiple selection modes.
+ *
+ * @example
+ * ```tsx
+ * import { Calendar } from '@customafk/lunas-ui/ui/calendar';
+ *
+ * const [date, setDate] = React.useState<Date>();
+ *
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   captionLayout="dropdown"
+ * />
+ * ```
+ */
+declare function Calendar({
+  className,
+  classNames,
+  showOutsideDays,
+  captionLayout,
+  buttonVariant,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  /** Variant applied to the previous/next navigation buttons. */buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): import("react").JSX.Element;
+//#endregion
+export { CalendarDayButton as n, Calendar as t };
+//# sourceMappingURL=calendar-stv2bJv0.d.cts.map

package/dist/candlestick-chart-CiBiCU3y.mjs

@@ -0,0 +1,2 @@
+import{getDirectionColor as e,toDateLabel as t}from"./features/charts/index.mjs";import{ChartContainer as n,ChartTooltip as r,ChartTooltipContent as i}from"./ui/chart.mjs";import{useMemo as a}from"react";import{cn as o}from"@customafk/react-toolkit/utils";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{Bar as l,CartesianGrid as u,ComposedChart as d,XAxis as f,YAxis as p,useXAxisScale as m,useYAxisScale as h}from"recharts";const g=({data:t,upColor:n,downColor:r})=>{let i=m(),a=h();return!i||!a?null:s(`g`,{children:t.map(t=>{let o=i(t.date,{position:`start`}),l=i(t.date,{position:`end`}),u=a(t.high),d=a(t.low),f=a(t.open),p=a(t.close);if(o===void 0||l===void 0||u===void 0||d===void 0||f===void 0||p===void 0)return null;let m=l-o,h=Math.max(m*.6,2),g=o+m/2,_=e(t.close,t.open,{up:n,down:r}),v=Math.min(f,p),y=Math.max(Math.abs(p-f),1);return c(`g`,{children:[s(`line`,{x1:g,x2:g,y1:u,y2:d,stroke:_,strokeWidth:1}),s(`rect`,{x:g-h/2,y:v,width:h,height:y,fill:_})]},`${t.date}`)})})},_=({data:e,label:m=`Price`,upColor:h=`var(--success)`,downColor:_=`var(--danger)`,valueFormatter:v=e=>e.toLocaleString(`en-US`),dateFormatter:y=t,showGrid:b=!0,className:x,animate:S=!0,height:C})=>{let w=a(()=>({close:{label:m,color:h}}),[m,h]),T=a(()=>{if(e.length===0)return[0,1];let t=Math.min(...e.map(e=>e.low)),n=Math.max(...e.map(e=>e.high)),r=(n-t)*.08||Math.max(n,1)*.08;return[t-r,n+r]},[e]);return s(n,{"data-slot":`candlestick-chart`,config:w,className:o(`w-full`,x),style:C===void 0?void 0:{height:C,aspectRatio:`auto`},children:c(d,{data:e,margin:{top:8,right:12,bottom:0,left:12},children:[b&&s(u,{vertical:!1}),s(f,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:y}),s(p,{domain:T,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:v}),s(r,{cursor:!1,content:s(i,{hideIndicator:!0,labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?y(n):null},formatter:(e,t,n)=>{let r=n.payload;return c(`div`,{className:`grid gap-0.5`,children:[c(`span`,{className:`text-muted`,children:[`O `,s(`span`,{className:`font-number text-text-positive-strong`,children:v(r.open)}),` H`,` `,s(`span`,{className:`font-number text-text-positive-strong`,children:v(r.high)})]}),c(`span`,{className:`text-muted`,children:[`L `,s(`span`,{className:`font-number text-text-positive-strong`,children:v(r.low)}),` C`,` `,s(`span`,{className:`font-number text-text-positive-strong`,children:v(r.close)})]})]})}})}),s(l,{dataKey:`close`,fill:`transparent`,isAnimationActive:S}),s(g,{data:e,upColor:h,downColor:_})]})})};export{_ as CandlestickChart};
+//# sourceMappingURL=candlestick-chart-CiBiCU3y.mjs.map

package/dist/candlestick-chart-CiBiCU3y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"candlestick-chart-CiBiCU3y.mjs","names":[],"sources":["../packages/components/features/charts/components/candlestick-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, CartesianGrid, ComposedChart, useXAxisScale, useYAxisScale, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { getDirectionColor, toDateLabel } from '../utils';\n\ntype CandlestickSeriesProps = {\n  data: OHLCPoint[];\n  upColor: string;\n  downColor: string;\n};\n\n/** Draws candle wicks + bodies directly against the chart's computed axis scales (recharts v3 pattern). */\nconst CandlestickSeries = ({ data, upColor, downColor }: CandlestickSeriesProps) => {\n  const xScale = useXAxisScale();\n  const yScale = useYAxisScale();\n\n  if (!xScale || !yScale) return null;\n\n  return (\n    <g>\n      {data.map(point => {\n        const xStart = xScale(point.date, { position: 'start' });\n        const xEnd = xScale(point.date, { position: 'end' });\n        const yHigh = yScale(point.high);\n        const yLow = yScale(point.low);\n        const yOpen = yScale(point.open);\n        const yClose = yScale(point.close);\n        if (xStart === undefined || xEnd === undefined || yHigh === undefined || yLow === undefined || yOpen === undefined || yClose === undefined) {\n          return null;\n        }\n\n        const bandWidth = xEnd - xStart;\n        const bodyWidth = Math.max(bandWidth * 0.6, 2);\n        const xCenter = xStart + bandWidth / 2;\n        const color = getDirectionColor(point.close, point.open, { up: upColor, down: downColor });\n        const bodyTop = Math.min(yOpen, yClose);\n        const bodyHeight = Math.max(Math.abs(yClose - yOpen), 1);\n\n        return (\n          <g key={`${point.date}`}>\n            <line x1={xCenter} x2={xCenter} y1={yHigh} y2={yLow} stroke={color} strokeWidth={1} />\n            <rect x={xCenter - bodyWidth / 2} y={bodyTop} width={bodyWidth} height={bodyHeight} fill={color} />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n\nexport type CandlestickChartProps = BaseChartProps & {\n  data: OHLCPoint[];\n  /** Series label used in the theme config. Defaults to `'Price'`. */\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 * A stock candlestick chart — open/high/low/close per period, green/red bodies, high-low wicks.\n * Recharts has no native candlestick type, so bodies and wicks are drawn against the chart's\n * computed axis scales via `useXAxisScale`/`useYAxisScale` (recharts v3).\n *\n * @example\n * ```tsx\n * import { CandlestickChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CandlestickChart\n *   data={[\n *     { date: '2026-06-01', open: 140, high: 146.2, low: 138.5, close: 144.9 },\n *     { date: '2026-06-02', open: 144.9, high: 145.6, low: 141.2, close: 142.1 },\n *   ]}\n * />\n * ```\n */\nexport const CandlestickChart = ({\n  data,\n  label = 'Price',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CandlestickChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ close: { label, color: upColor } }), [label, upColor]);\n\n  const yDomain = useMemo<[number, number]>(() => {\n    if (data.length === 0) return [0, 1];\n    const min = Math.min(...data.map(point => point.low));\n    const max = Math.max(...data.map(point => point.high));\n    const padding = (max - min) * 0.08 || Math.max(max, 1) * 0.08;\n    return [min - padding, max + padding];\n  }, [data]);\n\n  return (\n    <ChartContainer\n      data-slot=\"candlestick-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis domain={yDomain} tickLine={false} axisLine={false} tickMargin={8} width={64} 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, _name, item) => {\n                const point = item.payload as OHLCPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    <span className=\"text-muted\">\n                      O <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.open)}</span> H{' '}\n                      <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.high)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      L <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.low)}</span> C{' '}\n                      <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.close)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        {/* Invisible series so the Tooltip has a graphical item to attach to; payload still carries the full OHLC row. */}\n        <Bar dataKey=\"close\" fill=\"transparent\" isAnimationActive={animate} />\n        <CandlestickSeries data={data} upColor={upColor} downColor={downColor} />\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/candlestick-chart-CqmRkfXj.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:t,upColor:n,downColor:r})=>{let o=(0,a.useXAxisScale)(),s=(0,a.useYAxisScale)();return!o||!s?null:(0,i.jsx)(`g`,{children:t.map(t=>{let a=o(t.date,{position:`start`}),c=o(t.date,{position:`end`}),l=s(t.high),u=s(t.low),d=s(t.open),f=s(t.close);if(a===void 0||c===void 0||l===void 0||u===void 0||d===void 0||f===void 0)return null;let p=c-a,m=Math.max(p*.6,2),h=a+p/2,g=e.getDirectionColor(t.close,t.open,{up:n,down:r}),_=Math.min(d,f),v=Math.max(Math.abs(f-d),1);return(0,i.jsxs)(`g`,{children:[(0,i.jsx)(`line`,{x1:h,x2:h,y1:l,y2:u,stroke:g,strokeWidth:1}),(0,i.jsx)(`rect`,{x:h-m/2,y:_,width:m,height:v,fill:g})]},`${t.date}`)})})},s=({data:s,label:c=`Price`,upColor:l=`var(--success)`,downColor:u=`var(--danger)`,valueFormatter:d=e=>e.toLocaleString(`en-US`),dateFormatter:f=e.toDateLabel,showGrid:p=!0,className:m,animate:h=!0,height:g})=>{let _=(0,n.useMemo)(()=>({close:{label:c,color:l}}),[c,l]),v=(0,n.useMemo)(()=>{if(s.length===0)return[0,1];let e=Math.min(...s.map(e=>e.low)),t=Math.max(...s.map(e=>e.high)),n=(t-e)*.08||Math.max(t,1)*.08;return[e-n,t+n]},[s]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`candlestick-chart`,config:_,className:(0,r.cn)(`w-full`,m),style:g===void 0?void 0:{height:g,aspectRatio:`auto`},children:(0,i.jsxs)(a.ComposedChart,{data:s,margin:{top:8,right:12,bottom:0,left:12},children:[p&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:f}),(0,i.jsx)(a.YAxis,{domain:v,tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:d}),(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{hideIndicator:!0,labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?f(n):null},formatter:(e,t,n)=>{let r=n.payload;return(0,i.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,i.jsxs)(`span`,{className:`text-muted`,children:[`O `,(0,i.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:d(r.open)}),` H`,` `,(0,i.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:d(r.high)})]}),(0,i.jsxs)(`span`,{className:`text-muted`,children:[`L `,(0,i.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:d(r.low)}),` C`,` `,(0,i.jsx)(`span`,{className:`font-number text-text-positive-strong`,children:d(r.close)})]})]})}})}),(0,i.jsx)(a.Bar,{dataKey:`close`,fill:`transparent`,isAnimationActive:h}),(0,i.jsx)(o,{data:s,upColor:l,downColor:u})]})})};exports.CandlestickChart=s;
+//# sourceMappingURL=candlestick-chart-CqmRkfXj.cjs.map

package/dist/candlestick-chart-CqmRkfXj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"candlestick-chart-CqmRkfXj.cjs","names":["getDirectionColor","toDateLabel","ChartContainer","ComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar"],"sources":["../packages/components/features/charts/components/candlestick-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, CartesianGrid, ComposedChart, useXAxisScale, useYAxisScale, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, OHLCPoint } from '../types';\nimport { getDirectionColor, toDateLabel } from '../utils';\n\ntype CandlestickSeriesProps = {\n  data: OHLCPoint[];\n  upColor: string;\n  downColor: string;\n};\n\n/** Draws candle wicks + bodies directly against the chart's computed axis scales (recharts v3 pattern). */\nconst CandlestickSeries = ({ data, upColor, downColor }: CandlestickSeriesProps) => {\n  const xScale = useXAxisScale();\n  const yScale = useYAxisScale();\n\n  if (!xScale || !yScale) return null;\n\n  return (\n    <g>\n      {data.map(point => {\n        const xStart = xScale(point.date, { position: 'start' });\n        const xEnd = xScale(point.date, { position: 'end' });\n        const yHigh = yScale(point.high);\n        const yLow = yScale(point.low);\n        const yOpen = yScale(point.open);\n        const yClose = yScale(point.close);\n        if (xStart === undefined || xEnd === undefined || yHigh === undefined || yLow === undefined || yOpen === undefined || yClose === undefined) {\n          return null;\n        }\n\n        const bandWidth = xEnd - xStart;\n        const bodyWidth = Math.max(bandWidth * 0.6, 2);\n        const xCenter = xStart + bandWidth / 2;\n        const color = getDirectionColor(point.close, point.open, { up: upColor, down: downColor });\n        const bodyTop = Math.min(yOpen, yClose);\n        const bodyHeight = Math.max(Math.abs(yClose - yOpen), 1);\n\n        return (\n          <g key={`${point.date}`}>\n            <line x1={xCenter} x2={xCenter} y1={yHigh} y2={yLow} stroke={color} strokeWidth={1} />\n            <rect x={xCenter - bodyWidth / 2} y={bodyTop} width={bodyWidth} height={bodyHeight} fill={color} />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n\nexport type CandlestickChartProps = BaseChartProps & {\n  data: OHLCPoint[];\n  /** Series label used in the theme config. Defaults to `'Price'`. */\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 * A stock candlestick chart — open/high/low/close per period, green/red bodies, high-low wicks.\n * Recharts has no native candlestick type, so bodies and wicks are drawn against the chart's\n * computed axis scales via `useXAxisScale`/`useYAxisScale` (recharts v3).\n *\n * @example\n * ```tsx\n * import { CandlestickChart } from '@customafk/lunas-ui/features/charts';\n *\n * <CandlestickChart\n *   data={[\n *     { date: '2026-06-01', open: 140, high: 146.2, low: 138.5, close: 144.9 },\n *     { date: '2026-06-02', open: 144.9, high: 145.6, low: 141.2, close: 142.1 },\n *   ]}\n * />\n * ```\n */\nexport const CandlestickChart = ({\n  data,\n  label = 'Price',\n  upColor = 'var(--success)',\n  downColor = 'var(--danger)',\n  valueFormatter = value => value.toLocaleString('en-US'),\n  dateFormatter = toDateLabel,\n  showGrid = true,\n  className,\n  animate = true,\n  height,\n}: CandlestickChartProps) => {\n  const config = useMemo<ChartConfig>(() => ({ close: { label, color: upColor } }), [label, upColor]);\n\n  const yDomain = useMemo<[number, number]>(() => {\n    if (data.length === 0) return [0, 1];\n    const min = Math.min(...data.map(point => point.low));\n    const max = Math.max(...data.map(point => point.high));\n    const padding = (max - min) * 0.08 || Math.max(max, 1) * 0.08;\n    return [min - padding, max + padding];\n  }, [data]);\n\n  return (\n    <ChartContainer\n      data-slot=\"candlestick-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <ComposedChart data={data} margin={{ top: 8, right: 12, bottom: 0, left: 12 }}>\n        {showGrid && <CartesianGrid vertical={false} />}\n        <XAxis dataKey=\"date\" tickLine={false} axisLine={false} tickMargin={8} tickFormatter={dateFormatter} />\n        <YAxis domain={yDomain} tickLine={false} axisLine={false} tickMargin={8} width={64} 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, _name, item) => {\n                const point = item.payload as OHLCPoint;\n                return (\n                  <div className=\"grid gap-0.5\">\n                    <span className=\"text-muted\">\n                      O <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.open)}</span> H{' '}\n                      <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.high)}</span>\n                    </span>\n                    <span className=\"text-muted\">\n                      L <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.low)}</span> C{' '}\n                      <span className=\"font-number text-text-positive-strong\">{valueFormatter(point.close)}</span>\n                    </span>\n                  </div>\n                );\n              }}\n            />\n          }\n        />\n        {/* Invisible series so the Tooltip has a graphical item to attach to; payload still carries the full OHLC row. */}\n        <Bar dataKey=\"close\" fill=\"transparent\" isAnimationActive={animate} />\n        <CandlestickSeries data={data} upColor={upColor} downColor={downColor} />\n      </ComposedChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"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"}

package/dist/card-DOnx7RKz.d.cts

@@ -0,0 +1,60 @@
+//#region packages/components/ui/card.d.ts
+/**
+ * Surface container for grouping related content with a bordered, shadowed panel that supports optional interactive hover states.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Card, CardHeader, CardTitle, CardDescription,
+ *   CardContent, CardFooter, CardAction,
+ * } from '@customafk/lunas-ui/ui/card';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Plan overview</CardTitle>
+ *     <CardDescription>Your current subscription details.</CardDescription>
+ *     <CardAction><Button size="sm">Upgrade</Button></CardAction>
+ *   </CardHeader>
+ *   <CardContent>Monthly usage: 42 / 100 requests</CardContent>
+ *   <CardFooter>Renews on 1 Jun 2026</CardFooter>
+ * </Card>
+ * ```
+ */
+declare function Card({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Top section of the card that holds the title, description, and optional action slot. */
+declare function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Primary heading for the card, styled with the h3 heading variant. */
+declare function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Muted supporting text displayed beneath the card title. */
+declare function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Optional slot in the card header for a contextual action (e.g. a button or menu); positioned in the top-right grid cell. */
+declare function CardAction({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Main body area of the card with horizontal padding for content alignment. */
+declare function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Bottom section of the card, typically used for supplementary text or secondary actions. */
+declare function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { CardFooter as a, CardDescription as i, CardAction as n, CardHeader as o, CardContent as r, CardTitle as s, Card as t };
+//# sourceMappingURL=card-DOnx7RKz.d.cts.map