@customafk/lunas-ui 0.2.37 → 0.2.39

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

@@ -0,0 +1,39 @@
+import { toggleVariants } from "./toggle.js";
+import * as react291 from "react";
+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>): react291.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>): react291.JSX.Element;
+//#endregion
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/ui/toggle-group.js

@@ -0,0 +1,2 @@
+"use client";import{toggleVariants as e}from"./toggle.js";import{createContext as t,use as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";import{ToggleGroup as a}from"radix-ui";const o=t({size:`default`,variant:`default`});function s({className:e,variant:t,size:n,children:s,...c}){return i(a.Root,{"data-slot":`toggle-group`,"data-variant":t,"data-size":n,className:r(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:i(o.Provider,{value:{variant:t,size:n},children:s})})}function c({className:t,children:s,variant:c,size:l,...u}){let d=n(o);return i(a.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:r(e({variant:d.variant||c,size:d.size||l}),`min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l`,t),...u,children:s})}export{s as ToggleGroup,c as ToggleGroupItem};
+//# sourceMappingURL=toggle-group.js.map

package/dist/ui/toggle-group.js.map

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

package/dist/ui/toggle.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react/jsx-runtime`),i=require(`radix-ui`);const a=(0,n.cva)(`inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap`,{variants:{variant:{default:`bg-transparent`,outline:`border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground`},size:{default:`h-9 px-2 min-w-9`,sm:`h-8 px-1.5 min-w-8`,lg:`h-10 px-2.5 min-w-10`}},defaultVariants:{variant:`default`,size:`default`}});function o({className:e,variant:n,size:o,...s}){return(0,r.jsx)(i.Toggle.Root,{"data-slot":`toggle`,className:(0,t.cn)(a({variant:n,size:o,className:e})),...s})}exports.Toggle=o,exports.toggleVariants=a;
+"use client";const e=require(`../chunk-350yNsax.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react/jsx-runtime`),i=require(`radix-ui`);const a=(0,n.cva)(`inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap`,{variants:{variant:{default:`bg-transparent`,outline:`border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground`},size:{default:`h-9 px-2 min-w-9`,sm:`h-8 px-1.5 min-w-8`,lg:`h-10 px-2.5 min-w-10`}},defaultVariants:{variant:`default`,size:`default`}});function o({className:e,variant:n,size:o,...s}){return(0,r.jsx)(i.Toggle.Root,{"data-slot":`toggle`,className:(0,t.cn)(a({variant:n,size:o,className:e})),...s})}exports.Toggle=o,exports.toggleVariants=a;
 //# sourceMappingURL=toggle.cjs.map

package/dist/ui/toggle.d.cts

@@ -1,5 +1,5 @@
-import * as react234 from "react";
-import * as class_variance_authority_types9 from "class-variance-authority/types";
+import * as react219 from "react";
+import * as class_variance_authority_types8 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "radix-ui";
 
@@ -7,7 +7,7 @@ import { Toggle as Toggle$1 } from "radix-ui";
 declare const toggleVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "sm" | "lg" | "default" | null | undefined;
-} & class_variance_authority_types9.ClassProp) | undefined) => string;
+} & class_variance_authority_types8.ClassProp) | undefined) => string;
 /**
  * A two-state button that switches between pressed (`on`) and unpressed (`off`).
  *
@@ -26,7 +26,7 @@ declare function Toggle({
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react234.JSX.Element;
+}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react219.JSX.Element;
 //#endregion
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.cts.map

package/dist/ui/toggle.d.ts

@@ -0,0 +1,32 @@
+import * as react290 from "react";
+import { VariantProps } from "class-variance-authority";
+import { Toggle as Toggle$1 } from "radix-ui";
+import * as class_variance_authority_types11 from "class-variance-authority/types";
+
+//#region packages/components/ui/toggle.d.ts
+declare const toggleVariants: (props?: ({
+  variant?: "default" | "outline" | null | undefined;
+  size?: "sm" | "lg" | "default" | null | undefined;
+} & class_variance_authority_types11.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>): react290.JSX.Element;
+//#endregion
+export { Toggle, toggleVariants };
+//# sourceMappingURL=toggle.d.ts.map

package/dist/ui/toggle.js

@@ -0,0 +1,2 @@
+"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{cva as t}from"class-variance-authority";import{jsx as n}from"react/jsx-runtime";import{Toggle as r}from"radix-ui";const i=t(`inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap`,{variants:{variant:{default:`bg-transparent`,outline:`border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground`},size:{default:`h-9 px-2 min-w-9`,sm:`h-8 px-1.5 min-w-8`,lg:`h-10 px-2.5 min-w-10`}},defaultVariants:{variant:`default`,size:`default`}});function a({className:t,variant:a,size:o,...s}){return n(r.Root,{"data-slot":`toggle`,className:e(i({variant:a,size:o,className:t})),...s})}export{a as Toggle,i as toggleVariants};
+//# sourceMappingURL=toggle.js.map

package/dist/ui/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":["TogglePrimitive"],"sources":["../../packages/components/ui/toggle.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Toggle as TogglePrimitive } from 'radix-ui';\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n\n/**\n * A two-state button that switches between pressed (`on`) and unpressed (`off`).\n *\n * @example\n * ```tsx\n * import { Toggle } from '@customafk/lunas-ui/ui/toggle';\n * import { Bold } from 'lucide-react';\n *\n * <Toggle aria-label=\"Toggle bold\" variant=\"outline\">\n *   <Bold />\n * </Toggle>\n * ```\n */\nfunction Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return <TogglePrimitive.Root data-slot=\"toggle\" className={cn(toggleVariants({ variant, size, className }))} {...props} />;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Toggle, toggleVariants };\n"],"mappings":"0LAMA,MAAM,EAAiB,EACrB,gjBACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,iBACT,QAAS,4FACV,CACD,KAAM,CACJ,QAAS,mBACT,GAAI,qBACJ,GAAI,uBACL,CACF,CACD,gBAAiB,CACf,QAAS,UACT,KAAM,UACP,CACF,CACF,CAeD,SAAS,EAAO,CAAE,YAAW,UAAS,OAAM,GAAG,GAAkG,CAC/I,OAAO,EAACA,EAAgB,KAAA,CAAK,YAAU,SAAS,UAAW,EAAG,EAAe,CAAE,UAAS,OAAM,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS"}

package/dist/ui/tooltip.cjs

@@ -1 +1 @@
-"use client";const e=require(`../tooltip-DC6i1A25.cjs`);exports.Tooltip=e.t,exports.TooltipContent=e.n,exports.TooltipProvider=e.r,exports.TooltipTrigger=e.i;
+"use client";const e=require(`../tooltip-CBdoIzoM.cjs`);exports.Tooltip=e.t,exports.TooltipContent=e.n,exports.TooltipProvider=e.r,exports.TooltipTrigger=e.i;

package/dist/ui/tooltip.d.cts

@@ -1,4 +1,4 @@
-import * as react230 from "react";
+import * as react224 from "react";
 import { Tooltip as Tooltip$1 } from "radix-ui";
 
 //#region packages/components/ui/tooltip.d.ts
@@ -19,7 +19,7 @@ import { Tooltip as Tooltip$1 } from "radix-ui";
 declare function TooltipProvider({
   delayDuration,
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Provider>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Provider>): react224.JSX.Element;
 /**
  * Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
  *
@@ -38,18 +38,18 @@ declare function TooltipProvider({
  */
 declare function Tooltip({
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Root>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Root>): react224.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>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Trigger>): react224.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>): react230.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Content>): react224.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.d.cts.map

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,55 @@
+import * as react295 from "react";
+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>): react295.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>): react295.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>): react295.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>): react295.JSX.Element;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/ui/tooltip.js

@@ -0,0 +1 @@
+"use client";import{i as e,n as t,r as n,t as r}from"../tooltip-CVIl6Hln.js";export{r as Tooltip,t as TooltipContent,n as TooltipProvider,e as TooltipTrigger};

package/dist/user-BSpgswEC.js

@@ -0,0 +1,2 @@
+import{t as e}from"./paragraph-Cc13ZI4d.js";import{t}from"./flex-CinRrgEy.js";import{n,t as r}from"./avatar-Hpj8lmux.js";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,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[a(r,{className:`size-10 shadow-card`,children:a(n,{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:`text-sm font-medium text-text-positive`,children:l}),a(e,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:u})]})]});export{c as t};
+//# sourceMappingURL=user-BSpgswEC.js.map

package/dist/user-BSpgswEC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-BSpgswEC.js","names":["UserDataDisplay: React.FC<UserDataDisplayProps>"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\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      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"6RA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,WAE9E,EAAC,EAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,iBAC3D,EAAC,EAAA,CAAO,UAAU,+BAChB,EAAC,EAAA,CAAe,MAAO,CAAE,gBAAiB,EAAe,IAAI,EAAK,CAAE,UAClE,EAAC,EAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,CACT,EAAC,EAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,kBAC7C,EAAC,EAAA,CAAU,UAAU,kDAA0C,GAAqB,CACpF,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}

package/dist/user-ii4FBhO1.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./paragraph-DvTZvbzw.cjs`),n=require(`./flex-DmWmOBn5.cjs`),r=require(`./avatar-TyOphzGo.cjs`);let i=require(`lucide-react`),a=require(`react/jsx-runtime`),o=require(`@customafk/react-toolkit/color-hash`);const s=({uuid:e,username:s,email:c})=>(0,a.jsxs)(n.t,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[(0,a.jsx)(r.t,{className:`size-10 shadow-card`,children:(0,a.jsx)(r.n,{style:{backgroundColor:o.colorHashLight.hex(e)},children:(0,a.jsx)(i.UserRoundIcon,{size:28,className:`text-white`})})}),(0,a.jsxs)(n.t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[(0,a.jsx)(t.t,{className:`text-sm font-medium text-text-positive`,children:s}),(0,a.jsx)(t.t,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:c})]})]});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
+//# sourceMappingURL=user-ii4FBhO1.cjs.map

package/dist/user-ii4FBhO1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-ii4FBhO1.cjs","names":["UserDataDisplay: React.FC<UserDataDisplayProps>","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\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      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"gQA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,YAE9E,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,kBAC3D,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAO,UAAU,gCAChB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,MAAO,CAAE,gBAAiBC,EAAAA,eAAe,IAAI,EAAK,CAAE,WAClE,EAAA,EAAA,KAACC,EAAAA,cAAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,EACT,EAAA,EAAA,MAACJ,EAAAA,EAAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,mBAC7C,EAAA,EAAA,KAACK,EAAAA,EAAAA,CAAU,UAAU,kDAA0C,GAAqB,EACpF,EAAA,EAAA,KAACA,EAAAA,EAAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.2.37",
+  "version": "0.2.39",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {
@@ -423,7 +423,11 @@
     "format": "npx @biomejs/biome format",
     "format:fix": "npx @biomejs/biome format --write",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:storybook": "vitest --config vitest.storybook.config.ts"
   },
   "peerDependencies": {
     "@customafk/react-toolkit": "0.0.19",
@@ -459,7 +463,7 @@
     "lucide-react": "^0.545.0",
     "nanoid": "^5.1.6",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.0",
+    "radix-ui": "^1.6.0",
     "react": "^19.2.0",
     "react-country-flag": "^3.1.0",
     "react-day-picker": "^9.9.0",
@@ -481,15 +485,26 @@
     "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-onboarding": "^10.1.0",
     "@storybook/addon-themes": "^10.1.0",
+    "@storybook/addon-vitest": "^10.4.6",
     "@storybook/react-vite": "^10.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.0.0",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser": "^4.1.9",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "jsdom": "^26.1.0",
+    "playwright": "^1.61.0",
     "tsdown": "^0.18.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.30.1",
     "unplugin-lightningcss": "^0.4.2",
-    "vite": "^6.3.5",
+    "vite": "^8.0.16",
     "vitest": "^4.1.8"
   },
   "main": "./dist/index.cjs",

package/styles/spacing.css

@@ -0,0 +1,186 @@
+/**
+ * spacing.css — Three-scale responsive spacing system
+ *
+ * ─────────────────────────────────────────────────────────────
+ * THE THREE SCALES
+ * ─────────────────────────────────────────────────────────────
+ *
+ * Pick the scale based on what sits on either side of the gap:
+ *
+ *   layout    — gaps between large page regions (sections, page gutters,
+ *               hero-to-content, sidebar-to-main). The things on either
+ *               side are full-width zones.
+ *
+ *   section   — gaps inside a section (header-to-body, card stacks,
+ *               grouped rows, list items). The things on either side are
+ *               content blocks within a zone.
+ *
+ *   component — internal padding and gaps of a single UI component
+ *               (button, chip, input, badge, tag). The things on either
+ *               side are parts of one atomic element.
+ *
+ * Rule of thumb: the bigger the things on either side, the higher the
+ * scale. A gap between two full sections is `layout`. A gap between two
+ * lines of text inside a card is `component`.
+ *
+ * ─────────────────────────────────────────────────────────────
+ * BREAKPOINTS (mobile-first)
+ * ─────────────────────────────────────────────────────────────
+ *
+ *   mobile   — default (no media query), < 768px
+ *   tablet   — @media (min-width: 768px)   → Tailwind `md:`
+ *   desktop  — @media (min-width: 1024px)  → Tailwind `lg:`
+ *
+ * ─────────────────────────────────────────────────────────────
+ * NAMING CONVENTION
+ * ─────────────────────────────────────────────────────────────
+ *
+ *   --spacing-{scale}-{size}
+ *
+ *   Scales : layout | section | component
+ *   Sizes  : xl | lg | md | sm | xs | none
+ *
+ * ─────────────────────────────────────────────────────────────
+ * HOW TO USE
+ * ─────────────────────────────────────────────────────────────
+ *
+ * In CSS / inline styles:
+ *
+ *   gap: var(--spacing-layout-md);
+ *   padding: var(--spacing-section-lg);
+ *   padding-inline: var(--spacing-component-sm);
+ *
+ * In Tailwind (via arbitrary value):
+ *
+ *   class="gap-[var(--spacing-layout-md)]"
+ *   class="p-[var(--spacing-section-lg)]"
+ *
+ * The CSS variable automatically resolves to the correct pixel value
+ * for the current viewport, so no responsive prefix is needed.
+ *
+ * ─────────────────────────────────────────────────────────────
+ * IMPORT ORDER (for consumers)
+ * ─────────────────────────────────────────────────────────────
+ *
+ *   @import 'styles/base.css';
+ *   @import 'styles/theme.css';
+ *   @import 'styles/spacing.css';   ← here
+ *   @import 'styles/typography.css'; (optional)
+ */
+
+/* ─────────────────────────────────────────────────────────────
+   BASE VALUES — mobile (< 768px)
+   ───────────────────────────────────────────────────────────── */
+:root {
+  /* ── Layout scale ──────────────────────────────────────────
+   * Page-level spacing: gaps between sections, page gutters.
+   * Use when spacing two full-width page regions apart.
+   *
+   * Token              Mobile   Tablet   Desktop
+   * --spacing-layout-xl   48px    64px    128px
+   * --spacing-layout-lg   32px    48px     96px
+   * --spacing-layout-md   16px    32px     64px
+   * --spacing-layout-sm   12px    24px     48px
+   * --spacing-layout-xs    8px    16px     32px
+   * --spacing-layout-none   0       0        0
+   */
+  --spacing-layout-xl: 48px;
+  --spacing-layout-lg: 32px;
+  --spacing-layout-md: 16px;
+  --spacing-layout-sm: 12px;
+  --spacing-layout-xs: 8px;
+  --spacing-layout-none: 0;
+
+  /* ── Section scale ─────────────────────────────────────────
+   * Section-level spacing: header-to-body, card stacks,
+   * grouped rows, list items within a section.
+   *
+   * Token                Mobile   Tablet   Desktop
+   * --spacing-section-xl   20px    32px     48px
+   * --spacing-section-lg   16px    20px     32px
+   * --spacing-section-md   12px    16px     24px
+   * --spacing-section-sm   12px    16px     16px
+   * --spacing-section-xs    8px    12px     12px
+   * --spacing-section-none   0       0        0
+   */
+  --spacing-section-xl: 20px;
+  --spacing-section-lg: 16px;
+  --spacing-section-md: 12px;
+  --spacing-section-sm: 12px;
+  --spacing-section-xs: 8px;
+  --spacing-section-none: 0;
+
+  /* ── Component scale ───────────────────────────────────────
+   * Component-internal spacing: padding and gaps inside a
+   * single UI element (button, chip, input, badge).
+   *
+   * Token                  Mobile   Tablet   Desktop
+   * --spacing-component-xl   12px    16px     24px
+   * --spacing-component-lg   12px    16px     16px
+   * --spacing-component-md    8px    12px     12px
+   * --spacing-component-sm    8px    FLAT     FLAT   ← same at all sizes
+   * --spacing-component-xs    4px    FLAT     FLAT   ← same at all sizes
+   * --spacing-component-none   0       0        0
+   *
+   * Note: component-sm and component-xs are intentionally flat.
+   * Tight internal spacing reads the same across all viewports.
+   */
+  --spacing-component-xl: 12px;
+  --spacing-component-lg: 12px;
+  --spacing-component-md: 8px;
+  --spacing-component-sm: 8px;
+  --spacing-component-xs: 4px;
+  --spacing-component-none: 0;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   TABLET — 768px+ (Tailwind `md:`)
+   ───────────────────────────────────────────────────────────── */
+@media (min-width: 768px) {
+  :root {
+    /* Layout */
+    --spacing-layout-xl: 64px;
+    --spacing-layout-lg: 48px;
+    --spacing-layout-md: 32px;
+    --spacing-layout-sm: 24px;
+    --spacing-layout-xs: 16px;
+
+    /* Section */
+    --spacing-section-xl: 32px;
+    --spacing-section-lg: 20px;
+    --spacing-section-md: 16px;
+    --spacing-section-sm: 16px;
+    --spacing-section-xs: 12px;
+
+    /* Component (xl / lg / md scale up; sm and xs stay flat) */
+    --spacing-component-xl: 16px;
+    --spacing-component-lg: 16px;
+    --spacing-component-md: 12px;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   DESKTOP — 1024px+ (Tailwind `lg:`)
+   ───────────────────────────────────────────────────────────── */
+@media (min-width: 1024px) {
+  :root {
+    /* Layout */
+    --spacing-layout-xl: 128px;
+    --spacing-layout-lg: 96px;
+    --spacing-layout-md: 64px;
+    --spacing-layout-sm: 48px;
+    --spacing-layout-xs: 32px;
+
+    /* Section */
+    --spacing-section-xl: 48px;
+    --spacing-section-lg: 32px;
+    --spacing-section-md: 24px;
+    --spacing-section-sm: 16px;
+    --spacing-section-xs: 12px;
+
+    /* Component (xl / lg / md scale up; sm and xs stay flat) */
+    --spacing-component-xl: 24px;
+    --spacing-component-lg: 16px;
+    --spacing-component-md: 12px;
+  }
+}

package/dist/alert-BbvPwf2x.mjs

@@ -1,2 +0,0 @@
-import{AlertCircle as e,AlertTriangle as t,CheckCircle as n,Info as r,X as i}from"lucide-react";import{useMemo as a}from"react";import{cn as o}from"@customafk/react-toolkit/utils";import{cva as s}from"class-variance-authority";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=s([`relative grid w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm`,`grid-cols-[0_1fr]`,`has-[>svg]:grid-cols-[24px_1fr] has-[>svg]:gap-x-3`,`[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,`transition-colors duration-150`],{variants:{variant:{default:`bg-card text-text-positive-strong border-border`,destructive:`bg-danger-bg-subtle text-danger-intense border-danger-border-subtle [&>svg]:text-danger *:data-[slot=alert-description]:text-danger-strong`,warning:`bg-warning-bg-subtle text-warning-intense border-warning-border-subtle [&>svg]:text-warning *:data-[slot=alert-description]:text-warning-strong`,success:`bg-success-bg-subtle text-success-intense border-success-border-subtle [&>svg]:text-success *:data-[slot=alert-description]:text-success-strong`,info:`bg-info-bg-subtle text-info-intense border-info-border-subtle [&>svg]:text-info *:data-[slot=alert-description]:text-info-strong`}},defaultVariants:{variant:`default`}});function d({className:s,variant:d,children:f,icon:p,dismissible:m,onDismiss:h,...g}){let _=a(()=>{if(!p)switch(d){case`destructive`:return c(e,{});case`warning`:return c(t,{});case`success`:return c(n,{});case`info`:return c(r,{});default:return null}return p},[p,d]);return l(`div`,{"data-slot":`alert`,role:`alert`,"data-variant":d,className:o(u({variant:d}),s),...g,children:[_,f,m&&c(`button`,{type:`button`,onClick:h,"aria-label":`Close alert`,className:`absolute top-2 right-2 size-6 rounded-md p-1 opacity-70 transition-opacity duration-100 hover:opacity-100`,"data-slot":`alert-close`,children:c(i,{size:16})})]})}function f({className:e,...t}){return c(`div`,{"data-slot":`alert-title`,className:o(`col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight`,e),...t})}function p({className:e,...t}){return c(`div`,{"data-slot":`alert-description`,className:o(`text-text-positive-weak col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed`,e),...t})}export{p as n,f as r,d as t};
-//# sourceMappingURL=alert-BbvPwf2x.mjs.map

package/dist/alert-BbvPwf2x.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert-BbvPwf2x.mjs","names":[],"sources":["../packages/components/ui/alert-variants.ts","../packages/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n/**\n * Alert component variants for styling using class-variance-authority\n */\nexport const alertVariants = cva(\n  [\n    'relative grid w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm',\n    'grid-cols-[0_1fr]',\n    'has-[>svg]:grid-cols-[24px_1fr] has-[>svg]:gap-x-3',\n    '[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n    'transition-colors duration-150',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-card text-text-positive-strong border-border',\n        destructive:\n          'bg-danger-bg-subtle text-danger-intense border-danger-border-subtle [&>svg]:text-danger *:data-[slot=alert-description]:text-danger-strong',\n        warning:\n          'bg-warning-bg-subtle text-warning-intense border-warning-border-subtle [&>svg]:text-warning *:data-[slot=alert-description]:text-warning-strong',\n        success:\n          'bg-success-bg-subtle text-success-intense border-success-border-subtle [&>svg]:text-success *:data-[slot=alert-description]:text-success-strong',\n        info: 'bg-info-bg-subtle text-info-intense border-info-border-subtle [&>svg]:text-info *:data-[slot=alert-description]:text-info-strong',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport type AlertVariantProps = VariantProps<typeof alertVariants>;\n","'use client';\n\nimport { useMemo } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';\n\nimport { type AlertVariantProps, alertVariants } from './alert-variants';\n\n/**\n * Props for the Alert component.\n */\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, Omit<AlertVariantProps, 'className'> {\n  /**\n   * Optional icon to display in the alert; defaults to a variant-appropriate icon when omitted.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Whether the alert can be dismissed by the user.\n   */\n  dismissible?: boolean;\n  /**\n   * Callback invoked when the dismiss button is clicked.\n   */\n  onDismiss?: () => void;\n}\n\n/**\n * Displays a contextual feedback message with optional icon, title, description, and dismiss button.\n *\n * @example\n * ```tsx\n * import { Alert, AlertTitle, AlertDescription } from '@customafk/lunas-ui/ui/alert';\n *\n * <Alert variant=\"success\" dismissible onDismiss={() => setOpen(false)}>\n *   <AlertTitle>Saved successfully</AlertTitle>\n *   <AlertDescription>Your changes have been saved.</AlertDescription>\n * </Alert>\n * ```\n */\nfunction Alert({ className, variant, children, icon, dismissible, onDismiss, ...props }: AlertProps) {\n  // Default icons based on variant\n  const defaultIcon = useMemo(() => {\n    if (!icon) {\n      switch (variant) {\n        case 'destructive':\n          return <AlertCircle />;\n        case 'warning':\n          return <AlertTriangle />;\n        case 'success':\n          return <CheckCircle />;\n        case 'info':\n          return <Info />;\n        default:\n          return null;\n      }\n    }\n    return icon;\n  }, [icon, variant]);\n\n  return (\n    <div data-slot=\"alert\" role=\"alert\" data-variant={variant} className={cn(alertVariants({ variant }), className)} {...props}>\n      {defaultIcon}\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Close alert\"\n          className=\"absolute top-2 right-2 size-6 rounded-md p-1 opacity-70 transition-opacity duration-100 hover:opacity-100\"\n          data-slot=\"alert-close\"\n        >\n          <X size={16} />\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Props for the AlertTitle component.\n */\nexport interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Title text or elements to display.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Renders the bold title line inside an Alert.\n */\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return <div data-slot=\"alert-title\" className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)} {...props} />;\n}\n\n/**\n * Props for the AlertDescription component.\n */\nexport interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Descriptive text or elements displayed below the title.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Renders the supporting body text inside an Alert.\n */\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn('text-text-positive-weak col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle };\n"],"mappings":"qRAKA,MAAa,EAAgB,EAC3B,CACE,iFACA,oBACA,qDACA,8DACA,iCACD,CACD,CACE,SAAU,CACR,QAAS,CACP,QAAS,kDACT,YACE,6IACF,QACE,kJACF,QACE,kJACF,KAAM,mIACP,CACF,CACD,gBAAiB,CACf,QAAS,UACV,CACF,CACF,CCUD,SAAS,EAAM,CAAE,YAAW,UAAS,WAAU,OAAM,cAAa,YAAW,GAAG,GAAqB,CAEnG,IAAM,EAAc,MAAc,CAChC,GAAI,CAAC,EACH,OAAQ,EAAR,CACE,IAAK,cACH,OAAO,EAAC,EAAA,EAAA,CAAc,CACxB,IAAK,UACH,OAAO,EAAC,EAAA,EAAA,CAAgB,CAC1B,IAAK,UACH,OAAO,EAAC,EAAA,EAAA,CAAc,CACxB,IAAK,OACH,OAAO,EAAC,EAAA,EAAA,CAAO,CACjB,QACE,OAAO,KAGb,OAAO,GACN,CAAC,EAAM,EAAQ,CAAC,CAEnB,OACE,EAAC,MAAA,CAAI,YAAU,QAAQ,KAAK,QAAQ,eAAc,EAAS,UAAW,EAAG,EAAc,CAAE,UAAS,CAAC,CAAE,EAAU,CAAE,GAAI,YAClH,EACA,EACA,GACC,EAAC,SAAA,CACC,KAAK,SACL,QAAS,EACT,aAAW,cACX,UAAU,4GACV,YAAU,uBAEV,EAAC,EAAA,CAAE,KAAM,GAAA,CAAM,EACR,GAEP,CAiBV,SAAS,EAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OAAO,EAAC,MAAA,CAAI,YAAU,cAAc,UAAW,EAAG,8DAA+D,EAAU,CAAE,GAAI,GAAS,CAgB5I,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAgC,CACxE,OACE,EAAC,MAAA,CACC,YAAU,oBACV,UAAW,EAAG,mGAAoG,EAAU,CAC5H,GAAI,GACJ"}

package/dist/alert-CT7oAzCC.d.mts

@@ -1,88 +0,0 @@
-import * as react155 from "react";
-import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types12 from "class-variance-authority/types";
-
-//#region packages/components/ui/alert-variants.d.ts
-/**
- * Alert component variants for styling using class-variance-authority
- */
-declare const alertVariants: (props?: ({
-  variant?: "default" | "info" | "success" | "warning" | "destructive" | null | undefined;
-} & class_variance_authority_types12.ClassProp) | undefined) => string;
-type AlertVariantProps = VariantProps<typeof alertVariants>;
-//#endregion
-//#region packages/components/ui/alert.d.ts
-/**
- * Props for the Alert component.
- */
-interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, Omit<AlertVariantProps, 'className'> {
-  /**
-   * Optional icon to display in the alert; defaults to a variant-appropriate icon when omitted.
-   */
-  icon?: React.ReactNode;
-  /**
-   * Whether the alert can be dismissed by the user.
-   */
-  dismissible?: boolean;
-  /**
-   * Callback invoked when the dismiss button is clicked.
-   */
-  onDismiss?: () => void;
-}
-/**
- * Displays a contextual feedback message with optional icon, title, description, and dismiss button.
- *
- * @example
- * ```tsx
- * import { Alert, AlertTitle, AlertDescription } from '@customafk/lunas-ui/ui/alert';
- *
- * <Alert variant="success" dismissible onDismiss={() => setOpen(false)}>
- *   <AlertTitle>Saved successfully</AlertTitle>
- *   <AlertDescription>Your changes have been saved.</AlertDescription>
- * </Alert>
- * ```
- */
-declare function Alert({
-  className,
-  variant,
-  children,
-  icon,
-  dismissible,
-  onDismiss,
-  ...props
-}: AlertProps): react155.JSX.Element;
-/**
- * Props for the AlertTitle component.
- */
-interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Title text or elements to display.
-   */
-  children: React.ReactNode;
-}
-/**
- * Renders the bold title line inside an Alert.
- */
-declare function AlertTitle({
-  className,
-  ...props
-}: AlertTitleProps): react155.JSX.Element;
-/**
- * Props for the AlertDescription component.
- */
-interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Descriptive text or elements displayed below the title.
-   */
-  children: React.ReactNode;
-}
-/**
- * Renders the supporting body text inside an Alert.
- */
-declare function AlertDescription({
-  className,
-  ...props
-}: AlertDescriptionProps): react155.JSX.Element;
-//#endregion
-export { AlertTitle as a, AlertProps as i, AlertDescription as n, AlertTitleProps as o, AlertDescriptionProps as r, Alert as t };
-//# sourceMappingURL=alert-CT7oAzCC.d.mts.map

package/dist/alert-DubR6Szk.cjs

@@ -1,2 +0,0 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`react`),r=require(`@customafk/react-toolkit/utils`),i=require(`class-variance-authority`),a=require(`react/jsx-runtime`);const o=(0,i.cva)([`relative grid w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm`,`grid-cols-[0_1fr]`,`has-[>svg]:grid-cols-[24px_1fr] has-[>svg]:gap-x-3`,`[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,`transition-colors duration-150`],{variants:{variant:{default:`bg-card text-text-positive-strong border-border`,destructive:`bg-danger-bg-subtle text-danger-intense border-danger-border-subtle [&>svg]:text-danger *:data-[slot=alert-description]:text-danger-strong`,warning:`bg-warning-bg-subtle text-warning-intense border-warning-border-subtle [&>svg]:text-warning *:data-[slot=alert-description]:text-warning-strong`,success:`bg-success-bg-subtle text-success-intense border-success-border-subtle [&>svg]:text-success *:data-[slot=alert-description]:text-success-strong`,info:`bg-info-bg-subtle text-info-intense border-info-border-subtle [&>svg]:text-info *:data-[slot=alert-description]:text-info-strong`}},defaultVariants:{variant:`default`}});function s({className:e,variant:i,children:s,icon:c,dismissible:l,onDismiss:u,...d}){let f=(0,n.useMemo)(()=>{if(!c)switch(i){case`destructive`:return(0,a.jsx)(t.AlertCircle,{});case`warning`:return(0,a.jsx)(t.AlertTriangle,{});case`success`:return(0,a.jsx)(t.CheckCircle,{});case`info`:return(0,a.jsx)(t.Info,{});default:return null}return c},[c,i]);return(0,a.jsxs)(`div`,{"data-slot":`alert`,role:`alert`,"data-variant":i,className:(0,r.cn)(o({variant:i}),e),...d,children:[f,s,l&&(0,a.jsx)(`button`,{type:`button`,onClick:u,"aria-label":`Close alert`,className:`absolute top-2 right-2 size-6 rounded-md p-1 opacity-70 transition-opacity duration-100 hover:opacity-100`,"data-slot":`alert-close`,children:(0,a.jsx)(t.X,{size:16})})]})}function c({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`alert-title`,className:(0,r.cn)(`col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight`,e),...t})}function l({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`alert-description`,className:(0,r.cn)(`text-text-positive-weak col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed`,e),...t})}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
-//# sourceMappingURL=alert-DubR6Szk.cjs.map