@customafk/lunas-ui 0.2.64 → 0.2.66

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

@@ -1,37 +1,2 @@
-import { toggleVariants } from "./toggle.cjs";
-import { VariantProps } from "class-variance-authority";
-import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
-
-//#region packages/components/ui/toggle-group.d.ts
-/**
- * A group of connected Toggle buttons where one or multiple items can be active at a time.
- *
- * @example
- * ```tsx
- * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';
- *
- * <ToggleGroup type="single" variant="outline">
- *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
- *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
- *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
- * </ToggleGroup>
- * ```
- */
-declare function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
-/** A single item/button within a ToggleGroup that inherits the group's variant and size. */
-declare function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
-//#endregion
-export { ToggleGroup, ToggleGroupItem };
-//# sourceMappingURL=toggle-group.d.cts.map
+import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-BpqkL1ds.cjs";
+export { ToggleGroup, ToggleGroupItem };

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

@@ -1,37 +1,2 @@
-import { toggleVariants } from "./toggle.mjs";
-import { VariantProps } from "class-variance-authority";
-import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
-
-//#region packages/components/ui/toggle-group.d.ts
-/**
- * A group of connected Toggle buttons where one or multiple items can be active at a time.
- *
- * @example
- * ```tsx
- * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';
- *
- * <ToggleGroup type="single" variant="outline">
- *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
- *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
- *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
- * </ToggleGroup>
- * ```
- */
-declare function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
-/** A single item/button within a ToggleGroup that inherits the group's variant and size. */
-declare function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
-//#endregion
-export { ToggleGroup, ToggleGroupItem };
-//# sourceMappingURL=toggle-group.d.mts.map
+import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-DzNE38v5.mjs";
+export { ToggleGroup, ToggleGroupItem };

package/dist/ui/toggle.d.cts

@@ -1,30 +1,2 @@
-import { VariantProps } from "class-variance-authority";
-import { Toggle as Toggle$1 } from "radix-ui";
-
-//#region packages/components/ui/toggle.d.ts
-declare const toggleVariants: (props?: ({
-  variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "lg" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * A two-state button that switches between pressed (`on`) and unpressed (`off`).
- *
- * @example
- * ```tsx
- * import { Toggle } from '@customafk/lunas-ui/ui/toggle';
- * import { Bold } from 'lucide-react';
- *
- * <Toggle aria-label="Toggle bold" variant="outline">
- *   <Bold />
- * </Toggle>
- * ```
- */
-declare function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
-//#endregion
-export { Toggle, toggleVariants };
-//# sourceMappingURL=toggle.d.cts.map
+import { n as toggleVariants, t as Toggle } from "../toggle-Bh4EazxT.cjs";
+export { Toggle, toggleVariants };

package/dist/ui/toggle.d.mts

@@ -1,30 +1,2 @@
-import { VariantProps } from "class-variance-authority";
-import { Toggle as Toggle$1 } from "radix-ui";
-
-//#region packages/components/ui/toggle.d.ts
-declare const toggleVariants: (props?: ({
-  variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "lg" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * A two-state button that switches between pressed (`on`) and unpressed (`off`).
- *
- * @example
- * ```tsx
- * import { Toggle } from '@customafk/lunas-ui/ui/toggle';
- * import { Bold } from 'lucide-react';
- *
- * <Toggle aria-label="Toggle bold" variant="outline">
- *   <Bold />
- * </Toggle>
- * ```
- */
-declare function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
-//#endregion
-export { Toggle, toggleVariants };
-//# sourceMappingURL=toggle.d.mts.map
+import { n as toggleVariants, t as Toggle } from "../toggle-Bh4EazxT.mjs";
+export { Toggle, toggleVariants };

package/dist/ui/tooltip.d.cts

@@ -1,53 +1,2 @@
-import { Tooltip as Tooltip$1 } from "radix-ui";
-
-//#region packages/components/ui/tooltip.d.ts
-/**
- * Context provider that controls the open delay for all child `Tooltip` components; defaults to `0` ms for instant display.
- *
- * @example
- * ```tsx
- * import { TooltipProvider } from '@customafk/lunas-ui/ui/tooltip';
- *
- * // Wrap at the app root to apply a shared delay:
- * <TooltipProvider delayDuration={300}>
- *   <App />
- * </TooltipProvider>
- * ```
- */
-declare function TooltipProvider({
-  delayDuration,
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Provider>): import("react").JSX.Element;
-/**
- * Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
- *
- * @example
- * ```tsx
- * import { Tooltip, TooltipTrigger, TooltipContent } from '@customafk/lunas-ui/ui/tooltip';
- * import { Button } from '@customafk/lunas-ui/ui/button';
- *
- * <Tooltip>
- *   <TooltipTrigger asChild>
- *     <Button variant="ghost" size="icon" aria-label="Settings">⚙</Button>
- *   </TooltipTrigger>
- *   <TooltipContent>Open settings</TooltipContent>
- * </Tooltip>
- * ```
- */
-declare function Tooltip({
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Root>): import("react").JSX.Element;
-/** Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. */
-declare function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Trigger>): import("react").JSX.Element;
-/** Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */
-declare function TooltipContent({
-  className,
-  sideOffset,
-  children,
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Content>): import("react").JSX.Element;
-//#endregion
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
-//# sourceMappingURL=tooltip.d.cts.map
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-D4U-RhIu.cjs";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tooltip.d.mts

@@ -1,53 +1,2 @@
-import { Tooltip as Tooltip$1 } from "radix-ui";
-
-//#region packages/components/ui/tooltip.d.ts
-/**
- * Context provider that controls the open delay for all child `Tooltip` components; defaults to `0` ms for instant display.
- *
- * @example
- * ```tsx
- * import { TooltipProvider } from '@customafk/lunas-ui/ui/tooltip';
- *
- * // Wrap at the app root to apply a shared delay:
- * <TooltipProvider delayDuration={300}>
- *   <App />
- * </TooltipProvider>
- * ```
- */
-declare function TooltipProvider({
-  delayDuration,
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Provider>): import("react").JSX.Element;
-/**
- * Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
- *
- * @example
- * ```tsx
- * import { Tooltip, TooltipTrigger, TooltipContent } from '@customafk/lunas-ui/ui/tooltip';
- * import { Button } from '@customafk/lunas-ui/ui/button';
- *
- * <Tooltip>
- *   <TooltipTrigger asChild>
- *     <Button variant="ghost" size="icon" aria-label="Settings">⚙</Button>
- *   </TooltipTrigger>
- *   <TooltipContent>Open settings</TooltipContent>
- * </Tooltip>
- * ```
- */
-declare function Tooltip({
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Root>): import("react").JSX.Element;
-/** Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. */
-declare function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Trigger>): import("react").JSX.Element;
-/** Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */
-declare function TooltipContent({
-  className,
-  sideOffset,
-  children,
-  ...props
-}: React.ComponentProps<typeof Tooltip$1.Content>): import("react").JSX.Element;
-//#endregion
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
-//# sourceMappingURL=tooltip.d.mts.map
+import { i as TooltipTrigger, n as TooltipContent, r as TooltipProvider, t as Tooltip } from "../tooltip-D4U-RhIu.mjs";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/upload-image-D4VZU3IA.d.cts

@@ -0,0 +1,23 @@
+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. */
+  onClick?: () => void;
+};
+/**
+ * A square outline button for triggering image upload flows, rendered with an upload icon and a configurable size.
+ *
+ * @example
+ * import { UploadImageBtn } from '@customafk/lunas-ui/ui/buttons/upload-image';
+ *
+ * <UploadImageBtn size={96} onClick={() => openFilePicker()} />
+ */
+declare const UploadImageBtn: React.FC<PropsWithChildren<Props>>;
+//#endregion
+export { UploadImageBtn as t };
+//# sourceMappingURL=upload-image-D4VZU3IA.d.cts.map

package/dist/upload-image-D4VZU3IA.d.mts

@@ -0,0 +1,23 @@
+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. */
+  onClick?: () => void;
+};
+/**
+ * A square outline button for triggering image upload flows, rendered with an upload icon and a configurable size.
+ *
+ * @example
+ * import { UploadImageBtn } from '@customafk/lunas-ui/ui/buttons/upload-image';
+ *
+ * <UploadImageBtn size={96} onClick={() => openFilePicker()} />
+ */
+declare const UploadImageBtn: React.FC<PropsWithChildren<Props>>;
+//#endregion
+export { UploadImageBtn as t };
+//# sourceMappingURL=upload-image-D4VZU3IA.d.mts.map

package/dist/user-BymzvsYp.mjs

@@ -0,0 +1,2 @@
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Flex as t}from"./layouts/flex.mjs";import{Avatar as n,AvatarFallback as r}from"./ui/avatar.mjs";import{UserRoundIcon as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{colorHashLight as s}from"@customafk/react-toolkit/color-hash";const c=({uuid:c,username:l,email:u})=>o(t,{wrap:!1,gap:`sm`,padding:`none`,children:[!c&&a(n,{className:`size-10 shadow-card`,children:a(r,{className:`bg-muted-weak`,children:a(i,{size:28,className:`text-text-negative`})})}),c&&a(n,{className:`size-10 shadow-card`,children:a(r,{style:{backgroundColor:s.hex(c)},children:a(i,{size:28,className:`text-white`})})}),o(t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[a(e,{className:`font-medium text-sm text-text-positive-weak`,children:l??`Unknown User`}),a(e,{variant:`sm`,className:`mt-0! text-text-positive-weak text-xs`,children:u})]})]});export{c as UITableUserDataDisplay};
+//# sourceMappingURL=user-BymzvsYp.mjs.map

package/dist/user-BymzvsYp.mjs.map

@@ -0,0 +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"}

package/dist/user-CvesQf42.d.cts

@@ -0,0 +1,20 @@
+//#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. */
+  email: string;
+};
+/**
+ * Displays a user identity card with a colour-hashed avatar, username, and email address.
+ *
+ * @example
+ * ```tsx
+ * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';
+ *
+ * <UserDataDisplay uuid="abc-123" username="Nguyễn Văn An" email="an@example.com" />
+ * ```
+ */
+declare const UserDataDisplay: React.FC<UserDataDisplayProps>;
+//#endregion
+export { UserDataDisplay as t };
+//# sourceMappingURL=user-CvesQf42.d.cts.map

package/dist/user-CvesQf42.d.mts

@@ -0,0 +1,20 @@
+//#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. */
+  email: string;
+};
+/**
+ * Displays a user identity card with a colour-hashed avatar, username, and email address.
+ *
+ * @example
+ * ```tsx
+ * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';
+ *
+ * <UserDataDisplay uuid="abc-123" username="Nguyễn Văn An" email="an@example.com" />
+ * ```
+ */
+declare const UserDataDisplay: React.FC<UserDataDisplayProps>;
+//#endregion
+export { UserDataDisplay as t };
+//# sourceMappingURL=user-CvesQf42.d.mts.map

package/dist/user-Dn53Fu5q.cjs

@@ -0,0 +1,2 @@
+const e=require("./typography/paragraph.cjs"),t=require("./layouts/flex.cjs"),n=require("./ui/avatar.cjs");let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("@customafk/react-toolkit/color-hash");const o=({uuid:o,username:s,email:c})=>(0,i.jsxs)(t.Flex,{wrap:!1,gap:`sm`,padding:`none`,children:[!o&&(0,i.jsx)(n.Avatar,{className:`size-10 shadow-card`,children:(0,i.jsx)(n.AvatarFallback,{className:`bg-muted-weak`,children:(0,i.jsx)(r.UserRoundIcon,{size:28,className:`text-text-negative`})})}),o&&(0,i.jsx)(n.Avatar,{className:`size-10 shadow-card`,children:(0,i.jsx)(n.AvatarFallback,{style:{backgroundColor:a.colorHashLight.hex(o)},children:(0,i.jsx)(r.UserRoundIcon,{size:28,className:`text-white`})})}),(0,i.jsxs)(t.Flex,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[(0,i.jsx)(e.Paragraph,{className:`font-medium text-sm text-text-positive-weak`,children:s??`Unknown User`}),(0,i.jsx)(e.Paragraph,{variant:`sm`,className:`mt-0! text-text-positive-weak text-xs`,children:c})]})]});exports.UITableUserDataDisplay=o;
+//# sourceMappingURL=user-Dn53Fu5q.cjs.map

package/dist/user-Dn53Fu5q.cjs.map

@@ -0,0 +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"}

package/dist/volume-bar-chart-BRpC_8-X.mjs

@@ -0,0 +1,2 @@
+import{formatCompactNumber as e,getDirectionColor as t,toDateLabel as n}from"./features/charts/index.mjs";import{ChartContainer as r,ChartTooltip as i,ChartTooltipContent as a}from"./ui/chart.mjs";import{useMemo as o}from"react";import{cn as s}from"@customafk/react-toolkit/utils";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{Bar as u,BarChart as d,CartesianGrid as f,Rectangle as p,XAxis as m,YAxis as h}from"recharts";const g=({data:g,label:_=`Volume`,upColor:v=`var(--success)`,downColor:y=`var(--danger)`,valueFormatter:b=e,dateFormatter:x=n,showGrid:S=!0,className:C,animate:w=!0,height:T})=>{let E=o(()=>({volume:{label:_,color:v}}),[_,v]),D=o(()=>g.map((e,t)=>({...e,previousClose:t>0?g[t-1]?.close:e.close})),[g]);return c(r,{"data-slot":`volume-bar-chart`,config:E,className:s(`w-full`,C),style:T===void 0?void 0:{height:T,aspectRatio:`auto`},children:l(d,{data:D,margin:{top:8,right:12,bottom:0,left:12},children:[S&&c(f,{vertical:!1}),c(m,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:x}),c(h,{tickLine:!1,axisLine:!1,tickMargin:8,width:56,tickFormatter:b}),c(i,{cursor:!1,content:c(a,{hideIndicator:!0,labelFormatter:(e,t)=>{let n=t?.[0]?.payload?.date;return n?x(n):null},formatter:e=>b(Number(e))})}),c(u,{dataKey:`volume`,isAnimationActive:w,shape:e=>{let n=e.payload,r=t(n?.close??0,n?.previousClose??0,{up:v,down:y});return c(p,{...e,fill:r})}})]})})};export{g as VolumeBarChart};
+//# sourceMappingURL=volume-bar-chart-BRpC_8-X.mjs.map

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

@@ -0,0 +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"}

package/dist/volume-bar-chart-CRxZPZIn.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,label:s=`Volume`,upColor:c=`var(--success)`,downColor:l=`var(--danger)`,valueFormatter:u=e.formatCompactNumber,dateFormatter:d=e.toDateLabel,showGrid:f=!0,className:p,animate:m=!0,height:h})=>{let g=(0,n.useMemo)(()=>({volume:{label:s,color:c}}),[s,c]),_=(0,n.useMemo)(()=>o.map((e,t)=>({...e,previousClose:t>0?o[t-1]?.close:e.close})),[o]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`volume-bar-chart`,config:g,className:(0,r.cn)(`w-full`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,i.jsxs)(a.BarChart,{data:_,margin:{top:8,right:12,bottom:0,left:12},children:[f&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`date`,tickLine:!1,axisLine:!1,tickMargin:8,tickFormatter:d}),(0,i.jsx)(a.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:56,tickFormatter:u}),(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?d(n):null},formatter:e=>u(Number(e))})}),(0,i.jsx)(a.Bar,{dataKey:`volume`,isAnimationActive:m,shape:t=>{let n=t.payload,r=e.getDirectionColor(n?.close??0,n?.previousClose??0,{up:c,down:l});return(0,i.jsx)(a.Rectangle,{...t,fill:r})}})]})})};exports.VolumeBarChart=o;
+//# sourceMappingURL=volume-bar-chart-CRxZPZIn.cjs.map

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

@@ -0,0 +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"}

package/dist/waterfall-chart-CTB2f5eh.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,totalColor:s=`var(--chart-1)`,upColor:c=`var(--success)`,downColor:l=`var(--danger)`,valueFormatter:u=e=>e.toLocaleString(`en-US`),showGrid:d=!0,className:f,animate:p=!0,height:m})=>{let h=(0,n.useMemo)(()=>({size:{label:`Amount`,color:s}}),[s]),g=(0,n.useMemo)(()=>{let t=0;return o.map(n=>{if(n.isTotal)return t=n.value,{...n,base:0,size:n.value,color:s,runningTotal:t};let r=t;t+=n.value;let i=Math.min(r,t);return{...n,base:i,size:Math.abs(n.value),color:e.getDirectionColor(n.value,0,{up:c,down:l}),runningTotal:t}})},[o,s,c,l]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`waterfall-chart`,config:h,className:(0,r.cn)(`w-full`,f),style:m===void 0?void 0:{height:m,aspectRatio:`auto`},children:(0,i.jsxs)(a.BarChart,{data:g,margin:{top:8,right:12,bottom:0,left:12},children:[d&&(0,i.jsx)(a.CartesianGrid,{vertical:!1}),(0,i.jsx)(a.XAxis,{dataKey:`label`,tickLine:!1,axisLine:!1,tickMargin:8}),(0,i.jsx)(a.YAxis,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:u}),(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{hideIndicator:!0,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:[r.isTotal?`Total`:r.value>=0?`Increase`:`Decrease`,` `,(0,i.jsx)(`span`,{className:`font-medium font-number text-text-positive-strong`,children:u(r.value)})]}),(0,i.jsxs)(`span`,{className:`text-[11px] text-muted`,children:[`Running total `,u(r.runningTotal)]})]})}})}),(0,i.jsx)(a.Bar,{dataKey:`base`,stackId:`waterfall`,fill:`transparent`,isAnimationActive:!1}),(0,i.jsx)(a.Bar,{dataKey:`size`,stackId:`waterfall`,isAnimationActive:p,shape:e=>(0,i.jsx)(a.Rectangle,{...e,fill:e.payload.color,radius:2})})]})})};exports.WaterfallChart=o;
+//# sourceMappingURL=waterfall-chart-CTB2f5eh.cjs.map

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

@@ -0,0 +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"}

package/dist/waterfall-chart-DwetaJFJ.mjs

@@ -0,0 +1,2 @@
+import{getDirectionColor as e}from"./features/charts/index.mjs";import{ChartContainer as t,ChartTooltip as n,ChartTooltipContent as r}from"./ui/chart.mjs";import{useMemo as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Bar as c,BarChart as l,CartesianGrid as u,Rectangle as d,XAxis as f,YAxis as p}from"recharts";const m=({data:m,totalColor:h=`var(--chart-1)`,upColor:g=`var(--success)`,downColor:_=`var(--danger)`,valueFormatter:v=e=>e.toLocaleString(`en-US`),showGrid:y=!0,className:b,animate:x=!0,height:S})=>{let C=i(()=>({size:{label:`Amount`,color:h}}),[h]),w=i(()=>{let t=0;return m.map(n=>{if(n.isTotal)return t=n.value,{...n,base:0,size:n.value,color:h,runningTotal:t};let r=t;t+=n.value;let i=Math.min(r,t);return{...n,base:i,size:Math.abs(n.value),color:e(n.value,0,{up:g,down:_}),runningTotal:t}})},[m,h,g,_]);return o(t,{"data-slot":`waterfall-chart`,config:C,className:a(`w-full`,b),style:S===void 0?void 0:{height:S,aspectRatio:`auto`},children:s(l,{data:w,margin:{top:8,right:12,bottom:0,left:12},children:[y&&o(u,{vertical:!1}),o(f,{dataKey:`label`,tickLine:!1,axisLine:!1,tickMargin:8}),o(p,{tickLine:!1,axisLine:!1,tickMargin:8,width:64,tickFormatter:v}),o(n,{cursor:!1,content:o(r,{hideIndicator:!0,formatter:(e,t,n)=>{let r=n.payload;return s(`div`,{className:`grid gap-0.5`,children:[s(`span`,{className:`text-muted`,children:[r.isTotal?`Total`:r.value>=0?`Increase`:`Decrease`,` `,o(`span`,{className:`font-medium font-number text-text-positive-strong`,children:v(r.value)})]}),s(`span`,{className:`text-[11px] text-muted`,children:[`Running total `,v(r.runningTotal)]})]})}})}),o(c,{dataKey:`base`,stackId:`waterfall`,fill:`transparent`,isAnimationActive:!1}),o(c,{dataKey:`size`,stackId:`waterfall`,isAnimationActive:x,shape:e=>o(d,{...e,fill:e.payload.color,radius:2})})]})})};export{m as WaterfallChart};
+//# sourceMappingURL=waterfall-chart-DwetaJFJ.mjs.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.2.64",
+  "version": "0.2.66",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {
@@ -443,10 +443,6 @@
   },
   "peerDependencies": {
     "@customafk/react-toolkit": "0.0.19",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/error-message": "^2.0.0",
     "@react-oauth/google": "^0.12.0",
     "@tailwindcss/vite": "^4.1.0",

package/dist/payment-layout-BLrXT-oc.cjs

@@ -1,2 +0,0 @@
-const e=require("./dist-DzA--RwW.cjs"),t=require("./ui/button.cjs"),n=require("./typography/paragraph.cjs");require("./ui/skeleton.cjs");const r=require("./layouts/flex.cjs"),i=require("./ui/tooltip.cjs"),a=require("./ui/avatar.cjs"),o=require("./features/logo/index.cjs");require("./ui/separator.cjs");const s=require("./ui/sheet.cjs"),c=require("./ui/dropdown-menu.cjs");require("./ui/input.cjs");let l=require("lucide-react"),u=require("react"),d=require("@customafk/react-toolkit/utils"),f=require("class-variance-authority"),p=require("react/jsx-runtime"),m=require("@customafk/react-toolkit/color-hash"),h=require("@customafk/react-toolkit/hooks/useMobile");const g=(0,u.createContext)(null);function _(){let e=(0,u.useContext)(g);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function v({defaultOpen:e=!0,open:t,onOpenChange:n,className:r,style:a,children:o,...s}){let c=(0,h.useIsMobile)(),[l,f]=(0,u.useState)(!1),[m,_]=(0,u.useState)(e),v=t??m,y=(0,u.useCallback)(e=>{let t=typeof e==`function`?e(v):e;n?n(t):_(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,v]),b=(0,u.useCallback)(()=>c?f(e=>!e):y(e=>!e),[c,y]);(0,u.useEffect)(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),b())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[b]);let x=v?`expanded`:`collapsed`,S=(0,u.useMemo)(()=>({state:x,open:v,setOpen:y,isMobile:c,openMobile:l,setOpenMobile:f,toggleSidebar:b}),[x,v,y,c,l,b]);return(0,p.jsx)(g.Provider,{value:S,children:(0,p.jsx)(i.TooltipProvider,{delayDuration:0,children:(0,p.jsx)(`div`,{"data-slot":`sidebar-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...a},className:(0,d.cn)(`group/sidebar-wrapper flex h-dvh w-full`,r),...s,children:o})})})}function y({side:e=`left`,variant:n=`sidebar`,collapsible:r=`offcanvas`,className:i,children:a,...o}){let{isMobile:c,state:u,openMobile:f,setOpenMobile:m,toggleSidebar:h}=_();return r===`none`?(0,p.jsx)(`aside`,{"data-slot":`sidebar`,className:(0,d.cn)(`flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground`,i),...o,children:a}):c?(0,p.jsx)(s.Sheet,{open:f,onOpenChange:m,...o,children:(0,p.jsxs)(s.SheetContent,{"data-sidebar":`sidebar`,"data-slot":`sidebar`,"data-mobile":`true`,className:`w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden`,style:{"--sidebar-width":`18rem`},side:e,children:[(0,p.jsxs)(s.SheetHeader,{className:`sr-only`,children:[(0,p.jsx)(s.SheetTitle,{children:`Sidebar`}),(0,p.jsx)(s.SheetDescription,{children:`Displays the mobile sidebar.`})]}),(0,p.jsxs)(`div`,{className:`flex size-full flex-col`,children:[(0,p.jsxs)(`div`,{className:`flex flex-0 items-center gap-x-2 border-border-weak border-b p-2 pr-4`,children:[(0,p.jsxs)(t.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:(0,d.cn)(`size-10 rounded-full`,i),onClick:e=>{h(),e.preventDefault(),e.stopPropagation()},children:[(0,p.jsx)(l.MenuIcon,{className:`size-6!`}),(0,p.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,p.jsx)(`div`,{className:`ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground`,children:(0,p.jsx)(l.ShoppingCartIcon,{size:20})}),(0,p.jsxs)(`div`,{className:`grid flex-1 text-left text-sm leading-tight`,children:[(0,p.jsx)(`span`,{className:`truncate font-medium`,children:`Lunas Store`}),(0,p.jsx)(`span`,{className:`truncate text-xs`,children:`Established 2023`})]})]}),(0,p.jsx)(`div`,{className:`flex flex-1 flex-col p-2`,children:a})]})]})}):(0,p.jsxs)(`aside`,{className:`group peer hidden bg-card text-sidebar-foreground md:block`,"data-state":u,"data-collapsible":u===`collapsed`?r:``,"data-variant":n,"data-side":e,"data-slot":`sidebar`,children:[(0,p.jsx)(`div`,{"data-slot":`sidebar-gap`,className:(0,d.cn)(`relative`,`bg-transparent`,`transition-[width] duration-200 ease-linear`,`h-(--header-height) w-(--sidebar-width)`,`sm:h-[calc(var(--header-height)+0.5rem)]`,`group-data-[collapsible=offcanvas]:w-0`,`group-data-[side=right]:rotate-180`,n===`floating`||n===`inset`?`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon)`)}),(0,p.jsx)(`div`,{"data-slot":`sidebar-container`,className:(0,d.cn)(`hidden md:flex`,`fixed inset-y-0 top-14 z-10 shadow-nav`,`h-[calc(100dvh-3.5rem)] w-(--sidebar-width)`,`transition-[left,right,width] duration-200 ease-linear`,e===`left`&&`left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]`,e===`right`&&`right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]`,n===`floating`||n===`inset`?`p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`:`group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l`,i),...o,children:(0,p.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:(0,d.cn)(`flex size-full flex-col`,`group-data-[variant=floating]:rounded-lg`,`group-data-[variant=floating]:border`,`group-data-[variant=floating]:border-sidebar-border`,`group-data-[variant=floating]:shadow-sm`),children:a})})]})}function b({className:e,children:t,...n}){return(0,p.jsxs)(`main`,{"data-slot":`sidebar-inset`,className:(0,d.cn)(`relative flex w-full flex-1 flex-col`,e),...n,children:[(0,p.jsx)(`div`,{className:`h-(--header-height) w-full sm:h-[calc(var(--header-height)+0.5rem)]`}),(0,p.jsx)(`div`,{className:`inset-shadow-sm flex-1`,children:t})]})}function x({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:(0,d.cn)(`flex flex-col gap-2 p-2`,e),...t})}function S({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:(0,d.cn)(`flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t})}function C({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:(0,d.cn)(`relative flex w-full min-w-0 flex-col`,e),...t})}function w({className:t,asChild:n=!1,...r}){return(0,p.jsx)(n?e.t:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:(0,d.cn)(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r})}function T({className:e,...t}){return(0,p.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:(0,d.cn)(`w-full text-sm`,e),...t})}function E({className:e,...t}){return(0,p.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:(0,d.cn)(`flex w-full min-w-0 flex-col gap-1`,e),...t})}function D({className:e,...t}){return(0,p.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:(0,d.cn)(`group/menu-item relative`,e),...t})}const O=(0,f.cva)([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,width,height,padding]`,`hover:bg-sidebar-accent`,`hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent`,`active:text-sidebar-accent-foreground`,`disabled:pointer-events-none`,`disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none`,`aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted`,`data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent`,`data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12!`,`group-data-[collapsible=icon]:p-3!`,`group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6`,`[&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground/80`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}});function k({asChild:t=!1,isActive:n=!1,variant:r=`default`,size:a=`default`,tooltip:o,className:s,...c}){let l=t?e.t:`button`,{isMobile:u,state:f}=_(),m=(0,p.jsx)(l,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":a,"data-active":n,className:(0,d.cn)(O({variant:r,size:a}),s),...c});return o?(typeof o==`string`&&(o={children:o}),(0,p.jsxs)(i.Tooltip,{children:[(0,p.jsx)(i.TooltipTrigger,{asChild:!0,children:m}),(0,p.jsx)(i.TooltipContent,{side:`right`,align:`center`,hidden:f!==`collapsed`||u,...o})]})):m}const A=({uuid:e,username:t,email:i})=>(0,p.jsxs)(r.Flex,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[(0,p.jsx)(a.Avatar,{className:`size-9 shadow-card`,children:(0,p.jsx)(a.AvatarFallback,{style:{backgroundColor:m.colorHashLight.hex(e)},children:(0,p.jsx)(l.UserRoundIcon,{size:28,className:`text-white`})})}),(0,p.jsxs)(r.Flex,{vertical:!0,padding:`none`,gap:`none`,align:`start`,className:`hidden sm:flex`,children:[(0,p.jsx)(n.Paragraph,{className:`text-sm font-medium text-text-positive`,children:t}),(0,p.jsx)(n.Paragraph,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:i})]})]}),j=({user:e,isLogin:n=!0,onLogin:r,onLogout:i,logo:a})=>{let{toggleSidebar:s}=_(),f=(0,u.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),s()},[s]),m=(0,u.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),i?.()},[i]),h=(0,u.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]);return(0,p.jsxs)(`header`,{"data-slot":`payment-layout-header`,className:(0,d.cn)(`bg-card`,`h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6`,`absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-2.5`,`flex items-center shadow-nav`,`transition-[width,height] ease-linear`),children:[n&&(0,p.jsxs)(t.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`hidden size-10 rounded-full transition-all hover:text-text-positive md:flex`,onClick:f,children:[(0,p.jsx)(l.MenuIcon,{className:`size-6!`}),(0,p.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,p.jsx)(`div`,{className:`flex flex-1 items-center sm:ml-2.5`,children:a??(0,p.jsx)(o.LunasLogo,{variant:`horizontal`,size:`xs`})}),e?(0,p.jsxs)(c.DropdownMenu,{children:[(0,p.jsx)(c.DropdownMenuTrigger,{asChild:!0,children:(0,p.jsx)(t.Button,{variant:`ghost`,color:`muted`,className:`gap-x-2 rounded-full px-2 transition-all hover:text-text-positive`,children:(0,p.jsx)(A,{uuid:e?.uuid??``,username:e.fullname,email:e.email})})}),(0,p.jsxs)(c.DropdownMenuContent,{align:`end`,className:`w-56`,children:[(0,p.jsxs)(c.DropdownMenuLabel,{className:`font-normal`,children:[(0,p.jsx)(`p`,{className:`font-medium`,children:e.fullname}),(0,p.jsx)(`p`,{className:`text-muted-foreground text-xs`,children:e.email})]}),(0,p.jsx)(c.DropdownMenuSeparator,{}),(0,p.jsx)(c.DropdownMenuGroup,{children:(0,p.jsxs)(c.DropdownMenuItem,{onClick:m,children:[(0,p.jsx)(l.LogOutIcon,{size:14}),`Đăng xuất`]})})]})]}):(0,p.jsx)(t.Button,{size:`sm`,onClick:h,children:`Đăng nhập`})]})},M=({items:e,activeNavItemId:t})=>{let{isMobile:n}=_();return!n||e.length===0?null:(0,p.jsx)(`nav`,{"data-slot":`mobile-bottom-nav`,className:`fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-border border-t bg-card md:hidden`,children:e.slice(0,5).map(e=>(0,p.jsxs)(`button`,{type:`button`,onClick:e.onClick,"data-active":e.id===t,className:(0,d.cn)(`flex flex-1 flex-col items-center justify-center gap-0.5`,`text-muted-foreground transition-colors`,`data-[active=true]:text-sidebar-primary`,`[&>svg]:size-5 [&>svg]:shrink-0`),children:[e.icon,(0,p.jsx)(`span`,{className:`max-w-16 truncate text-[10px] leading-3`,children:e.label})]},e.id))})},N=({activeNavItemId:e,sidebar:t,user:n,isLogin:r=!0,onLogin:i,onLogout:a,children:o})=>{let s=(0,u.useMemo)(()=>t?.groupcontent||[],[t]),c=(0,u.useMemo)(()=>s.flatMap(e=>e.items),[s]);return(0,p.jsxs)(v,{children:[(0,p.jsx)(j,{user:n,isLogin:r,onLogin:i,onLogout:a}),r&&(0,p.jsxs)(y,{variant:`inset`,collapsible:`icon`,children:[(0,p.jsx)(S,{children:s.map(t=>(0,p.jsxs)(C,{children:[(0,p.jsx)(w,{children:t.label}),(0,p.jsx)(T,{children:(0,p.jsx)(E,{children:t.items.map(t=>(0,p.jsx)(D,{children:(0,p.jsxs)(k,{isActive:t.id===e,onClick:e=>{t.onClick?.(),e.preventDefault(),e.stopPropagation()},children:[t.icon,t.label]})},t.id))})})]},t.id))}),(0,p.jsx)(x,{children:(0,p.jsx)(E,{children:(0,p.jsx)(D,{className:`mt-2 border-t border-t-border`,children:(0,p.jsx)(`p`,{className:`pt-2 text-center text-muted-foreground text-xs`,children:`Copyright © 2025, Lunas.`})})})})]}),(0,p.jsx)(b,{children:(0,p.jsx)(`section`,{className:`relative size-full`,children:(0,p.jsx)(`div`,{className:(0,d.cn)(`absolute inset-0 overflow-y-auto`,r&&`pb-16 md:pb-0`),children:o})})}),r&&(0,p.jsx)(M,{items:c,activeNavItemId:e})]})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return N}});
-//# sourceMappingURL=payment-layout-BLrXT-oc.cjs.map