@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/ui/table.d.mts

@@ -1,70 +1,2 @@
-//#region packages/components/ui/table.d.ts
-/**
- * Full-width semantic table with caption-bottom layout, intended to be composed with TableHeader, TableBody, and related sub-components.
- *
- * @example
- * ```tsx
- * import {
- *   Table, TableHeader, TableBody, TableRow,
- *   TableHead, TableCell, TableCaption,
- * } from '@customafk/lunas-ui/ui/table';
- *
- * <Table>
- *   <TableCaption>Invoice list</TableCaption>
- *   <TableHeader>
- *     <TableRow>
- *       <TableHead>Name</TableHead>
- *       <TableHead>Amount</TableHead>
- *     </TableRow>
- *   </TableHeader>
- *   <TableBody>
- *     <TableRow>
- *       <TableCell>Acme Corp</TableCell>
- *       <TableCell>$1,200</TableCell>
- *     </TableRow>
- *   </TableBody>
- * </Table>
- * ```
- */
-declare const Table: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"table">) => import("react").JSX.Element>;
-/** The `<thead>` element containing one or more header rows. */
-declare const TableHeader: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"thead">) => import("react").JSX.Element>;
-/** The `<tbody>` element containing data rows with hover and selection styling. */
-declare const TableBody: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"tbody">) => import("react").JSX.Element>;
-/** The `<tfoot>` element for summary or aggregate rows at the bottom of the table. */
-declare const TableFooter: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"tfoot">) => import("react").JSX.Element>;
-/** A single `<tr>` row used inside TableHeader, TableBody, or TableFooter. */
-declare const TableRow: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"tr">) => import("react").JSX.Element>;
-/** A `<th>` column header cell with medium-weight text and left alignment. */
-declare const TableHead: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"th">) => import("react").JSX.Element>;
-/** A standard `<td>` data cell used inside a TableRow. */
-declare const TableCell: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"td">) => import("react").JSX.Element>;
-/** An accessible `<caption>` element displayed below the table. */
-declare const TableCaption: import("react").MemoExoticComponent<({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) => import("react").JSX.Element>;
-//#endregion
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
-//# sourceMappingURL=table.d.mts.map
+import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../table-Dg2D0v87.mjs";
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/ui/tabs.d.cts

@@ -1,42 +1,2 @@
-import { Tabs as Tabs$1 } from "radix-ui";
-
-//#region packages/components/ui/tabs.d.ts
-/**
- * Keyboard-accessible tabbed panel built on Radix UI's Tabs primitives, composed from `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent`.
- *
- * @example
- * ```tsx
- * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@customafk/lunas-ui/ui/tabs';
- *
- * <Tabs defaultValue="overview">
- *   <TabsList>
- *     <TabsTrigger value="overview">Overview</TabsTrigger>
- *     <TabsTrigger value="settings">Settings</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="overview">Overview content here.</TabsContent>
- *   <TabsContent value="settings">Settings content here.</TabsContent>
- * </Tabs>
- * ```
- */
-declare function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.Root>): import("react").JSX.Element;
-/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */
-declare function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.List>): import("react").JSX.Element;
-/** Individual tab button that activates its associated `TabsContent` panel when clicked. */
-declare function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.Trigger>): import("react").JSX.Element;
-/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */
-declare function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.Content>): import("react").JSX.Element;
-//#endregion
-export { Tabs, TabsContent, TabsList, TabsTrigger };
-//# sourceMappingURL=tabs.d.cts.map
+import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "../tabs-CJ6qZcFU.cjs";
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/ui/tabs.d.mts

@@ -1,42 +1,2 @@
-import { Tabs as Tabs$1 } from "radix-ui";
-
-//#region packages/components/ui/tabs.d.ts
-/**
- * Keyboard-accessible tabbed panel built on Radix UI's Tabs primitives, composed from `Tabs`, `TabsList`, `TabsTrigger`, and `TabsContent`.
- *
- * @example
- * ```tsx
- * import { Tabs, TabsList, TabsTrigger, TabsContent } from '@customafk/lunas-ui/ui/tabs';
- *
- * <Tabs defaultValue="overview">
- *   <TabsList>
- *     <TabsTrigger value="overview">Overview</TabsTrigger>
- *     <TabsTrigger value="settings">Settings</TabsTrigger>
- *   </TabsList>
- *   <TabsContent value="overview">Overview content here.</TabsContent>
- *   <TabsContent value="settings">Settings content here.</TabsContent>
- * </Tabs>
- * ```
- */
-declare function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.Root>): import("react").JSX.Element;
-/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */
-declare function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.List>): import("react").JSX.Element;
-/** Individual tab button that activates its associated `TabsContent` panel when clicked. */
-declare function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.Trigger>): import("react").JSX.Element;
-/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */
-declare function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof Tabs$1.Content>): import("react").JSX.Element;
-//#endregion
-export { Tabs, TabsContent, TabsList, TabsTrigger };
-//# sourceMappingURL=tabs.d.mts.map
+import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "../tabs-CJ6qZcFU.mjs";
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/ui/textarea.d.cts

@@ -1,26 +1,2 @@
-//#region packages/components/ui/textarea.d.ts
-/**
- * Styled multi-line text area built on the native `<textarea>` element with resize, focus, and validation state styles.
- *
- * @example
- * ```tsx
- * import { Textarea } from '@customafk/lunas-ui/ui/textarea';
- *
- * <Textarea
- *   placeholder="Write a description…"
- *   rows={4}
- *   onValueChange={(value) => console.log(value)}
- * />
- * ```
- */
-declare function Textarea({
-  className,
-  onChange,
-  onValueChange,
-  ...props
-}: React.ComponentProps<'textarea'> & {
-  /** Convenience callback that receives the raw string value on every change, bypassing the synthetic event. */onValueChange?: (value: string) => void;
-}): import("react").JSX.Element;
-//#endregion
-export { Textarea };
-//# sourceMappingURL=textarea.d.cts.map
+import { t as Textarea } from "../textarea-C8ZIZh-y.cjs";
+export { Textarea };

package/dist/ui/textarea.d.mts

@@ -1,26 +1,2 @@
-//#region packages/components/ui/textarea.d.ts
-/**
- * Styled multi-line text area built on the native `<textarea>` element with resize, focus, and validation state styles.
- *
- * @example
- * ```tsx
- * import { Textarea } from '@customafk/lunas-ui/ui/textarea';
- *
- * <Textarea
- *   placeholder="Write a description…"
- *   rows={4}
- *   onValueChange={(value) => console.log(value)}
- * />
- * ```
- */
-declare function Textarea({
-  className,
-  onChange,
-  onValueChange,
-  ...props
-}: React.ComponentProps<'textarea'> & {
-  /** Convenience callback that receives the raw string value on every change, bypassing the synthetic event. */onValueChange?: (value: string) => void;
-}): import("react").JSX.Element;
-//#endregion
-export { Textarea };
-//# sourceMappingURL=textarea.d.mts.map
+import { t as Textarea } from "../textarea-C8ZIZh-y.mjs";
+export { Textarea };

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