@customafk/lunas-ui 0.2.4 → 0.2.6

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

@@ -1,23 +1,39 @@
 import { toggleVariants } from "./toggle.mjs";
+import * as react_jsx_runtime201 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as react_jsx_runtime200 from "react/jsx-runtime";
 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>): react_jsx_runtime200.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime201.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>): react_jsx_runtime200.JSX.Element;
+}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime201.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.mts.map

package/dist/ui/toggle-group.mjs

@@ -1,2 +1,2 @@
-"use client";import{toggleVariants as e}from"./toggle.mjs";import{cn as t}from"@customafk/react-toolkit/utils";import{createContext as n,use as r}from"react";import{jsx as i}from"react/jsx-runtime";import{ToggleGroup as a}from"radix-ui";const o=n({size:`default`,variant:`default`});function s({className:e,variant:n,size:r,children:s,...c}){return i(a.Root,{"data-slot":`toggle-group`,"data-variant":n,"data-size":r,className:t(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:i(o.Provider,{value:{variant:n,size:r},children:s})})}function c({className:n,children:s,variant:c,size:l,...u}){let d=r(o);return i(a.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:t(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`,n),...u,children:s})}export{s as ToggleGroup,c as ToggleGroupItem};
+"use client";import{toggleVariants as e}from"./toggle.mjs";import{createContext as t,use as n}from"react";import{jsx as r}from"react/jsx-runtime";import{cn as i}from"@customafk/react-toolkit/utils";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 r(a.Root,{"data-slot":`toggle-group`,"data-variant":t,"data-size":n,className:i(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:r(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 r(a.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:i(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.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.mjs","names":["ToggleGroupPrimitive"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n  size: 'default',\n  variant: 'default',\n});\n\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\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n  const context = use(ToggleGroupContext);\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"6OASA,MAAM,EAAqB,EAAmD,CAC5E,KAAM,UACN,QAAS,UACV,CAAC,CAEF,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,CAIhC,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"}
+{"version":3,"file":"toggle-group.mjs","names":["ToggleGroupPrimitive"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["'use client';\nimport { createContext, use } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({\n  size: 'default',\n  variant: 'default',\n});\n\n/**\n * A group of connected Toggle buttons where one or multiple items can be active at a time.\n *\n * @example\n * ```tsx\n * import { ToggleGroup, ToggleGroupItem } from '@customafk/lunas-ui/ui/toggle-group';\n *\n * <ToggleGroup type=\"single\" variant=\"outline\">\n *   <ToggleGroupItem value=\"left\">Left</ToggleGroupItem>\n *   <ToggleGroupItem value=\"center\">Center</ToggleGroupItem>\n *   <ToggleGroupItem value=\"right\">Right</ToggleGroupItem>\n * </ToggleGroup>\n * ```\n */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn('group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs', className)}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n}\n\n/** A single item/button within a ToggleGroup that inherits the group's variant and size. */\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {\n  const context = use(ToggleGroupContext);\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"mappings":"6OASA,MAAM,EAAqB,EAAmD,CAC5E,KAAM,UACN,QAAS,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-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`@customafk/react-toolkit/utils`),r=require(`class-variance-authority`),i=require(`radix-ui`);const a=(0,r.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:r,size:o,...s}){return(0,t.jsx)(i.Toggle.Root,{"data-slot":`toggle`,className:(0,n.cn)(a({variant:r,size:o,className:e})),...s})}exports.Toggle=o,exports.toggleVariants=a;
 //# sourceMappingURL=toggle.cjs.map

package/dist/ui/toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.cjs","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\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":"iMAMA,MAAM,GAAA,EAAA,EAAA,KACJ,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,EAAA,EAAA,KAACA,EAAAA,OAAgB,KAAA,CAAK,YAAU,SAAS,WAAA,EAAA,EAAA,IAAc,EAAe,CAAE,UAAS,OAAM,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS"}
+{"version":3,"file":"toggle.cjs","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":"iMAMA,MAAM,GAAA,EAAA,EAAA,KACJ,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,EAAA,EAAA,KAACA,EAAAA,OAAgB,KAAA,CAAK,YAAU,SAAS,WAAA,EAAA,EAAA,IAAc,EAAe,CAAE,UAAS,OAAM,YAAW,CAAC,CAAC,CAAE,GAAI,GAAS"}

package/dist/ui/toggle.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime285 from "react/jsx-runtime";
+import * as react_jsx_runtime252 from "react/jsx-runtime";
 import * as class_variance_authority_types11 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "radix-ui";
@@ -8,12 +8,25 @@ 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>): react_jsx_runtime285.JSX.Element;
+}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime252.JSX.Element;
 //#endregion
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.cts.map

package/dist/ui/toggle.d.mts

@@ -1,19 +1,32 @@
+import * as react_jsx_runtime84 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as react_jsx_runtime268 from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "radix-ui";
-import * as class_variance_authority_types9 from "class-variance-authority/types";
+import * as class_variance_authority_types6 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_types9.ClassProp) | undefined) => string;
+} & class_variance_authority_types6.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>): react_jsx_runtime268.JSX.Element;
+}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime84.JSX.Element;
 //#endregion
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.mts.map

package/dist/ui/toggle.mjs

@@ -1,2 +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};
+"use client";import{jsx as e}from"react/jsx-runtime";import{cn as t}from"@customafk/react-toolkit/utils";import{cva as n}from"class-variance-authority";import{Toggle as r}from"radix-ui";const i=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`,{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:n,variant:a,size:o,...s}){return e(r.Root,{"data-slot":`toggle`,className:t(i({variant:a,size:o,className:n})),...s})}export{a as Toggle,i as toggleVariants};
 //# sourceMappingURL=toggle.mjs.map

package/dist/ui/toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.mjs","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\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"}
+{"version":3,"file":"toggle.mjs","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-itUmYz9k.cjs`);exports.Tooltip=e.t,exports.TooltipContent=e.n,exports.TooltipProvider=e.r,exports.TooltipTrigger=e.i;

package/dist/ui/tooltip.d.cts

@@ -1,23 +1,55 @@
-import * as react_jsx_runtime244 from "react/jsx-runtime";
+import * as react_jsx_runtime283 from "react/jsx-runtime";
 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>): react_jsx_runtime244.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime283.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>): react_jsx_runtime244.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime283.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>): react_jsx_runtime244.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime283.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>): react_jsx_runtime244.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime283.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.d.cts.map

package/dist/ui/tooltip.d.mts

@@ -1,23 +1,55 @@
-import * as react_jsx_runtime114 from "react/jsx-runtime";
+import * as react_jsx_runtime165 from "react/jsx-runtime";
 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>): react_jsx_runtime114.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime165.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>): react_jsx_runtime114.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime165.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>): react_jsx_runtime114.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime165.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>): react_jsx_runtime114.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime165.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.d.mts.map

package/dist/ui/tooltip.mjs

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

package/dist/user-BEyYLDNK.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-Bmb41Sf3.cjs`),t=require(`./paragraph-DN85Huc4.cjs`),n=require(`./flex-BbbogTsZ.cjs`),r=require(`./avatar-CTS9-raY.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-BEyYLDNK.cjs.map

package/dist/user-BEyYLDNK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-BEyYLDNK.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/dist/user-DONsffqr.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./paragraph-Ch5TvEqL.mjs";import{t}from"./flex-BLMTj7Ev.mjs";import{n,t as r}from"./avatar-DbxqvCjT.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,{"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-DONsffqr.mjs.map

package/dist/user-DONsffqr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-DONsffqr.mjs","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":"gSA6BA,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {
@@ -16,12 +16,17 @@
   "files": [
     "dist",
     "styles",
-    "README.md"
+    "README.md",
+    "ai-docs.md"
   ],
   "engines": {
     "node": ">= 22.0.0"
   },
   "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
     "./styles/base": "./styles/base.css",
     "./styles/loader": "./styles/loader.css",
     "./styles/theme": "./styles/theme.css",
@@ -438,13 +443,14 @@
     "tailwind-merge": "^3.3.0",
     "tailwindcss": "^4.1.0",
     "tw-animate-css": "^1.3.0",
-    "zod": "^4.1.3",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "zod": "^4.1.3"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.7",
     "@storybook/addon-a11y": "^10.1.0",
     "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-onboarding": "^10.1.0",
     "@storybook/addon-themes": "^10.1.0",
     "@storybook/react-vite": "^10.1.0",
@@ -457,5 +463,8 @@
     "unplugin-lightningcss": "^0.4.2",
     "vite": "^6.3.5",
     "vitest": "^3.2.4"
-  }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts"
 }

package/styles/theme.css

@@ -1,23 +1,25 @@
 :root {
   /* Color Palette */
-  --background: #ffffff; /* --color-zinc-50 */
-  --foreground: oklch(14% 0 0); /* --color-zinc-950 */
+  --background: oklch(0.99 0 0); /* --color-zinc-50 */
+  --foreground: oklch(0.14 0 0); /* --color-zinc-950 */
 
-  --card: #ffffff; /* --color-zinc-50 */
-  --card-foreground: oklch(14% 0 286); /* --color-zinc-950 */
+  --card: var(--background);
+  --card-foreground: var(--foreground);
 
-  --popover: #ffffff; /* --color-zinc-50 */
-  --popover-foreground: oklch(14% 0 286); /* --color-zinc-950 */
+  --popover: var(--background);
+  --popover-foreground: var(--foreground);
 
   --primary: oklch(0.61 0.22 293); /* --color-violet-500 */
-  --primary-muted: oklch(0.94 0.03 295); /* --color-violte-100 */
+  --primary-foreground: oklch(0.99 0 0);
+  --primary-muted: oklch(0.94 0.03 295); /* --color-violet-100 */
   --primary-weak: oklch(0.81 0.1 294); /* --color-violet-300 */
   --primary-strong: oklch(0.49 0.24 293); /* --color-violet-700 */
   --primary-intense: oklch(0.38 0.18 294); /* --color-violet-900 */
   --primary-bg-subtle: oklch(0.97 0.02 294); /* --color-violet-50 */
-  --primary-border-subtle: oklch(0.81 0.10 294); /* --color-zinc-300 */
+  --primary-border-subtle: oklch(0.81 0.10 294); /* --color-violet-300 */
 
   --secondary: oklch(0.55 0.02 264); /* --color-gray-500 */
+  --secondary-foreground: oklch(0.99 0 0);
   --secondary-muted: oklch(0.97 0 265); /* --color-gray-100 */
   --secondary-weak: oklch(0.87 0.01 258); /* --color-gray-300 */
   --secondary-strong: oklch(0.37 0.03 260); /* --color-gray-700 */
@@ -26,6 +28,7 @@
   --secondary-border-subtle: oklch(0.87 0.01 258); /* --color-gray-300 */
 
   --muted: oklch(0.55 0.01 286); /* --color-zinc-500 */
+  --muted-foreground: oklch(0.55 0.01 286);
   --muted-muted: oklch(0.97 0.00 286); /* --color-zinc-100 */
   --muted-weak: oklch(0.87 0.01 286); /* --color-zinc-300 */
   --muted-strong: oklch(0.37 0.01 286); /* --color-zinc-700 */
@@ -34,6 +37,7 @@
   --muted-border-subtle: oklch(0.87 0.01 286); /* --color-zinc-300 */
 
   --accent: oklch(0.55 0.04 257); /* --color-slate-500 */
+  --accent-foreground: oklch(0.21 0.01 286);
   --accent-muted: oklch(0.97 0.01 248); /* --color-slate-100 */
   --accent-weak: oklch(0.87 0.02 253); /* --color-slate-300 */
   --accent-strong: oklch(0.37 0.04 257); /* --color-slate-700 */
@@ -42,6 +46,7 @@
   --accent-border-subtle: oklch(0.87 0.02 253); /* --color-slate-300 */
 
   --info: oklch(0.62 0.19 260); /* --color-blue-500 */
+  --info-foreground: oklch(0.99 0 0);
   --info-muted: oklch(0.93 0.03 256); /* --color-blue-100 */
   --info-weak: oklch(0.81 0.1 252); /* --color-blue-300 */
   --info-strong: oklch(0.49 0.22 264); /* --color-blue-700 */
@@ -50,6 +55,7 @@
   --info-border-subtle: oklch(0.81 0.10 252); /* --color-blue-300 */
 
   --success: oklch(0.72 0.19 150); /* --color-green-500 */
+  --success-foreground: oklch(0.99 0 0);
   --success-muted: oklch(0.96 0.04 157); /* --color-green-100 */
   --success-weak: oklch(0.87 0.14 154); /* --color-green-300 */
   --success-strong: oklch(0.53 0.14 150); /* --color-green-700 */
@@ -58,6 +64,7 @@
   --success-border-subtle: oklch(0.87 0.14 154); /* --color-green-300 */
 
   --warning: oklch(0.77 0.16 70); /* --color-amber-500 */
+  --warning-foreground: oklch(0.41 0.11 46); /* dark — amber needs contrast */
   --warning-muted: oklch(0.96 0.06 96); /* --color-amber-100 */
   --warning-weak: oklch(0.88 0.15 92); /* --color-amber-300 */
   --warning-strong: oklch(0.56 0.15 49); /* --color-amber-700 */
@@ -66,6 +73,7 @@
   --warning-border-subtle: oklch(0.88 0.15 92); /* --color-amber-300 */
 
   --danger: oklch(0.64 0.21 25); /* --color-red-500 */
+  --danger-foreground: oklch(0.99 0 0);
   --danger-muted: oklch(0.94 0.03 18); /* --color-red-100 */
   --danger-weak: oklch(0.81 0.10 20); /* --color-red-300 */
   --danger-strong: oklch(0.51 0.19 28); /* --color-red-700 */
@@ -77,14 +85,14 @@
   --text-positive-muted: oklch(0.87 0.01 286); /* --color-zinc-300 */
   --text-positive-weak: oklch(0.55 0.01 286); /* --color-zinc-500 */
   --text-positive-strong: oklch(0.21 0.01 286); /* --color-zinc-900 */
-  --text-positive-intense: oklch(0 0 0); /* --color-black */
+  --text-positive-intense: oklch(0.15 0 0); /* --color-zinc-950 */
   --text-positive-subtle: oklch(0.71 0.01 286); /* --color-zinc-400 */
 
   --text-negative: oklch(0.99 0 0); /* --color-zinc-50 */
   --text-negative-muted: oklch(0.55 0.01 286); /* --color-zinc-500 */
   --text-negative-weak: oklch(0.87 0.01 286); /* --color-zinc-300 */
-  --text-negative-strong: oklch(0.99 0 0); /* --color-zinc-50 */
-  --text-negative-intense: oklch(1 0 0); /* --color-black */
+  --text-negative-strong: var(--text-negative);
+  --text-negative-intense: var(--text-negative);
 
   --border: oklch(0.92 0 0); /* --color-neutral-200 */
   --border-muted: oklch(0.97 0 0); /* --color-neutral-100 */
@@ -92,6 +100,7 @@
   --border-strong: oklch(0.37 0 0); /* --color-neutral-700 */
   --border-intense: oklch(0.14 0 0); /* --color-neutral-900 */
   --border-subtle: oklch(0.99 0 0); /* --color-neutral-50 */
+  --border-subtle-strong: oklch(0.87 0 0); /* --color-neutral-300 */
   --border-emphasis: oklch(0.87 0.00 0); /* --color-slate-300 */
 
   --input: oklch(0.871 0.006 286.286); /* --color-zinc-300 */
@@ -108,20 +117,32 @@
   --sidebar-border: oklch(0.92 0.004 286.32); /* --color-zinc-200 */
   --sidebar-ring: oklch(0.871 0.006 286.286); /* --color-zinc-300 */
 
-  --sidebar-primary: oklch(0.61 0.22 293); /* --color-violet-500 */
-  --sidebar-primary-muted: oklch(0.94 0.03 295); /* --color-violte-100 */
-  --sidebar-primary-weak: oklch(0.81 0.1 294); /* --color-violet-300 */
-  --sidebar-primary-strong: oklch(0.49 0.24 293); /* --color-violet-700 */
-  --sidebar-primary-intense: oklch(0.38 0.18 294); /* --color-violet-900 */
-  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-muted: var(--primary-muted);
+  --sidebar-primary-weak: var(--primary-weak);
+  --sidebar-primary-strong: var(--primary-strong);
+  --sidebar-primary-intense: var(--primary-intense);
+  --sidebar-primary-foreground: var(--text-negative);
 
   --sidebar-accent: oklch(0.97 0 286); /* --color-zinc-100 */
   --sidebar-accent-foreground: oklch(0.21 0.01 286); /* --color-zinc-900 */
 
-  --shadow-btn: 0px 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-input: 0px 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-nav: 0 0 0 1px rgba(61, 70, 82, 0.04), 0 0 0.25rem rgba(61, 70, 82, 0.1), 0 0 1rem rgba(0, 0, 0, 0.06);
-  --shadow-card: 0 0 0 1px rgba(61, 70, 82, 0.04), 0 0 0.25rem rgba(61, 70, 82, 0.1), 0 0.25rem 1.5rem rgba(0, 0, 0, 0.06);
-  --shadow-dropdown: 0 0.25rem 1.5rem 0 rgba(0, 0, 0, 0.1), 0 0 0.25rem 0 rgba(61, 70, 82, 0.15);
-  --shadow-dialog: 0 0.25rem 1.5rem 0 rgba(0, 0, 0, 0.1), 0 0 0.25rem 0 rgba(61, 70, 82, 0.15);
+  /* Shadows */
+  --shadow-btn: 0px 1px 2px 0 rgb(0 0 0 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.06);
+  --shadow-input: 0px 1px 2px 0 rgb(0 0 0 / 0.04);
+  --shadow-nav: 0 0 0 1px rgba(61, 70, 82, 0.05), 0 2px 8px rgba(61, 70, 82, 0.08), 0 4px 16px rgba(0, 0, 0, 0.05);
+  --shadow-card: 0 0 0 1px rgba(61, 70, 82, 0.06), 0 2px 4px rgba(61, 70, 82, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
+  --shadow-dropdown: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.10);
+  --shadow-dialog: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.14);
+
+  /* Transitions */
+  --duration-instant: 50ms;
+  --duration-fast: 100ms;
+  --duration-base: 150ms;
+  --duration-slow: 250ms;
+  --duration-slower: 400ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }

package/dist/avatar-DReNH6rV.mjs

@@ -1,2 +0,0 @@
-import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";import{Avatar as n}from"radix-ui";function r({className:r,...i}){return t(n.Root,{"data-slot":`avatar`,className:e(`relative flex size-8 shrink-0 overflow-hidden rounded-full`,r),...i})}function i({className:r,...i}){return t(n.Image,{"data-slot":`avatar-image`,className:e(`aspect-square size-full`,r),...i})}function a({className:r,...i}){return t(n.Fallback,{"data-slot":`avatar-fallback`,className:e(`bg-muted flex size-full items-center justify-center rounded-full`,r),...i})}export{a as n,i as r,r as t};
-//# sourceMappingURL=avatar-DReNH6rV.mjs.map

package/dist/avatar-DReNH6rV.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar-DReNH6rV.mjs","names":["Avatar","AvatarPrimitive"],"sources":["../packages/components/ui/avatar.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Avatar as AvatarPrimitive } from 'radix-ui';\n\nfunction Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return <AvatarPrimitive.Root data-slot=\"avatar\" className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)} {...props} />;\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return <AvatarPrimitive.Image data-slot=\"avatar-image\" className={cn('aspect-square size-full', className)} {...props} />;\n}\n\nfunction AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":"8HAKA,SAASA,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OAAO,EAACC,EAAgB,KAAA,CAAK,YAAU,SAAS,UAAW,EAAG,6DAA8D,EAAU,CAAE,GAAI,GAAS,CAGvJ,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAO,EAACA,EAAgB,MAAA,CAAM,YAAU,eAAe,UAAW,EAAG,0BAA2B,EAAU,CAAE,GAAI,GAAS,CAG3H,SAAS,EAAe,CAAE,YAAW,GAAG,GAAgE,CACtG,OACE,EAACA,EAAgB,SAAA,CACf,YAAU,kBACV,UAAW,EAAG,mEAAoE,EAAU,CAC5F,GAAI,GACJ"}

package/dist/avatar-aVxo69zP.cjs

@@ -1,2 +0,0 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react/jsx-runtime`),r=require(`radix-ui`);function i({className:e,...i}){return(0,n.jsx)(r.Avatar.Root,{"data-slot":`avatar`,className:(0,t.cn)(`relative flex size-8 shrink-0 overflow-hidden rounded-full`,e),...i})}function a({className:e,...i}){return(0,n.jsx)(r.Avatar.Image,{"data-slot":`avatar-image`,className:(0,t.cn)(`aspect-square size-full`,e),...i})}function o({className:e,...i}){return(0,n.jsx)(r.Avatar.Fallback,{"data-slot":`avatar-fallback`,className:(0,t.cn)(`bg-muted flex size-full items-center justify-center rounded-full`,e),...i})}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
-//# sourceMappingURL=avatar-aVxo69zP.cjs.map

package/dist/avatar-aVxo69zP.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar-aVxo69zP.cjs","names":["AvatarPrimitive"],"sources":["../packages/components/ui/avatar.tsx"],"sourcesContent":["'use client';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Avatar as AvatarPrimitive } from 'radix-ui';\n\nfunction Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return <AvatarPrimitive.Root data-slot=\"avatar\" className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)} {...props} />;\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return <AvatarPrimitive.Image data-slot=\"avatar-image\" className={cn('aspect-square size-full', className)} {...props} />;\n}\n\nfunction AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":"6IAKA,SAAS,EAAO,CAAE,YAAW,GAAG,GAA4D,CAC1F,OAAO,EAAA,EAAA,KAACA,EAAAA,OAAgB,KAAA,CAAK,YAAU,SAAS,WAAA,EAAA,EAAA,IAAc,6DAA8D,EAAU,CAAE,GAAI,GAAS,CAGvJ,SAAS,EAAY,CAAE,YAAW,GAAG,GAA6D,CAChG,OAAO,EAAA,EAAA,KAACA,EAAAA,OAAgB,MAAA,CAAM,YAAU,eAAe,WAAA,EAAA,EAAA,IAAc,0BAA2B,EAAU,CAAE,GAAI,GAAS,CAG3H,SAAS,EAAe,CAAE,YAAW,GAAG,GAAgE,CACtG,OACE,EAAA,EAAA,KAACA,EAAAA,OAAgB,SAAA,CACf,YAAU,kBACV,WAAA,EAAA,EAAA,IAAc,mEAAoE,EAAU,CAC5F,GAAI,GACJ"}

package/dist/badge-B4Fa7-J3.mjs

@@ -1,2 +0,0 @@
-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";const r=t(`rounded-sm inline-flex items-center justify-center font-semibold text-white shadow-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden focus:ring-ring forced-colors:outline`,{variants:{color:{red:`bg-red-500 text-white`,orange:`bg-orange-500 text-white`,amber:`bg-amber-500 text-white`,yellow:`bg-yellow-500 text-white`,lime:`bg-lime-500 text-white`,green:`bg-green-500 text-white`,emerald:`bg-emerald-500 text-white`,teal:`bg-teal-500 text-white`,cyan:`bg-cyan-500 text-white`,sky:`bg-sky-500 text-white`,blue:`bg-blue-500 text-white`,indigo:`bg-indigo-500 text-white`,violet:`bg-violet-500 text-white`,purple:`bg-purple-500 text-white`,fuchsia:`bg-fuchsia-500 text-white`,pink:`bg-pink-500 text-white`,rose:`bg-rose-500 text-white`,zinc:`bg-zinc-500 text-white`},size:{xs:`text-[10px]/3 px-1.5 py-0.5 gap-1`,sm:`text-xs px-2 py-0.5 gap-1`,md:`text-sm px-2.5 py-0.5 gap-1.5`,lg:`text-base px-3 py-1 gap-1.5`,xl:`text-lg px-3.5 py-1 gap-1.5`},pill:{true:`rounded-full`,false:`rounded-sm`}},defaultVariants:{color:`zinc`,size:`md`,pill:!0}});function i({className:t,color:i,size:a,pill:o,...s}){return n(`span`,{className:e(r({color:i,pill:o,size:a}),t),...s})}export{r as n,i as t};
-//# sourceMappingURL=badge-B4Fa7-J3.mjs.map

package/dist/badge-B4Fa7-J3.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge-B4Fa7-J3.mjs","names":[],"sources":["../packages/components/ui/badge.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst badgeVariants = cva(\n  'rounded-sm inline-flex items-center justify-center font-semibold text-white shadow-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden focus:ring-ring forced-colors:outline',\n  {\n    variants: {\n      color: {\n        red: 'bg-red-500 text-white',\n        orange: 'bg-orange-500 text-white',\n        amber: 'bg-amber-500 text-white',\n        yellow: 'bg-yellow-500 text-white',\n        lime: 'bg-lime-500 text-white',\n        green: 'bg-green-500 text-white',\n        emerald: 'bg-emerald-500 text-white',\n        teal: 'bg-teal-500 text-white',\n        cyan: 'bg-cyan-500 text-white',\n        sky: 'bg-sky-500 text-white',\n        blue: 'bg-blue-500 text-white',\n        indigo: 'bg-indigo-500 text-white',\n        violet: 'bg-violet-500 text-white',\n        purple: 'bg-purple-500 text-white',\n        fuchsia: 'bg-fuchsia-500 text-white',\n        pink: 'bg-pink-500 text-white',\n        rose: 'bg-rose-500 text-white',\n        zinc: 'bg-zinc-500 text-white',\n      },\n      size: {\n        // Lưu ý: text-[8px] là quá nhỏ so với mắt thường. Nếu đây là chủ đích design của bạn thì giữ nguyên.\n        xs: 'text-[10px]/3 px-1.5 py-0.5 gap-1',\n        sm: 'text-xs px-2 py-0.5 gap-1',\n        md: 'text-sm px-2.5 py-0.5 gap-1.5',\n        lg: 'text-base px-3 py-1 gap-1.5',\n        xl: 'text-lg px-3.5 py-1 gap-1.5',\n      },\n      pill: {\n        true: 'rounded-full',\n        false: 'rounded-sm', // Explicitly define false to handle the default shape safely\n      },\n    },\n    defaultVariants: {\n      color: 'zinc',\n      size: 'md',\n      pill: true,\n    },\n  }\n);\n\nexport type BadgeProps = VariantProps<typeof badgeVariants> & React.ComponentPropsWithoutRef<'span'>;\n\nfunction Badge({ className, color, size, pill, ...props }: BadgeProps) {\n  return <span className={cn(badgeVariants({ color, pill, size }), className)} {...props} />;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Badge, badgeVariants };\n"],"mappings":"2IAMA,MAAM,EAAgB,EACpB,sMACA,CACE,SAAU,CACR,MAAO,CACL,IAAK,wBACL,OAAQ,2BACR,MAAO,0BACP,OAAQ,2BACR,KAAM,yBACN,MAAO,0BACP,QAAS,4BACT,KAAM,yBACN,KAAM,yBACN,IAAK,wBACL,KAAM,yBACN,OAAQ,2BACR,OAAQ,2BACR,OAAQ,2BACR,QAAS,4BACT,KAAM,yBACN,KAAM,yBACN,KAAM,yBACP,CACD,KAAM,CAEJ,GAAI,oCACJ,GAAI,4BACJ,GAAI,gCACJ,GAAI,8BACJ,GAAI,8BACL,CACD,KAAM,CACJ,KAAM,eACN,MAAO,aACR,CACF,CACD,gBAAiB,CACf,MAAO,OACP,KAAM,KACN,KAAM,GACP,CACF,CACF,CAID,SAAS,EAAM,CAAE,YAAW,QAAO,OAAM,OAAM,GAAG,GAAqB,CACrE,OAAO,EAAC,OAAA,CAAK,UAAW,EAAG,EAAc,CAAE,QAAO,OAAM,OAAM,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS"}

package/dist/badge-cvLJyaCA.cjs

@@ -1,2 +0,0 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react/jsx-runtime`);const i=(0,n.cva)(`rounded-sm inline-flex items-center justify-center font-semibold text-white shadow-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden focus:ring-ring forced-colors:outline`,{variants:{color:{red:`bg-red-500 text-white`,orange:`bg-orange-500 text-white`,amber:`bg-amber-500 text-white`,yellow:`bg-yellow-500 text-white`,lime:`bg-lime-500 text-white`,green:`bg-green-500 text-white`,emerald:`bg-emerald-500 text-white`,teal:`bg-teal-500 text-white`,cyan:`bg-cyan-500 text-white`,sky:`bg-sky-500 text-white`,blue:`bg-blue-500 text-white`,indigo:`bg-indigo-500 text-white`,violet:`bg-violet-500 text-white`,purple:`bg-purple-500 text-white`,fuchsia:`bg-fuchsia-500 text-white`,pink:`bg-pink-500 text-white`,rose:`bg-rose-500 text-white`,zinc:`bg-zinc-500 text-white`},size:{xs:`text-[10px]/3 px-1.5 py-0.5 gap-1`,sm:`text-xs px-2 py-0.5 gap-1`,md:`text-sm px-2.5 py-0.5 gap-1.5`,lg:`text-base px-3 py-1 gap-1.5`,xl:`text-lg px-3.5 py-1 gap-1.5`},pill:{true:`rounded-full`,false:`rounded-sm`}},defaultVariants:{color:`zinc`,size:`md`,pill:!0}});function a({className:e,color:n,size:a,pill:o,...s}){return(0,r.jsx)(`span`,{className:(0,t.cn)(i({color:n,pill:o,size:a}),e),...s})}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
-//# sourceMappingURL=badge-cvLJyaCA.cjs.map

package/dist/badge-cvLJyaCA.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"badge-cvLJyaCA.cjs","names":[],"sources":["../packages/components/ui/badge.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst badgeVariants = cva(\n  'rounded-sm inline-flex items-center justify-center font-semibold text-white shadow-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden focus:ring-ring forced-colors:outline',\n  {\n    variants: {\n      color: {\n        red: 'bg-red-500 text-white',\n        orange: 'bg-orange-500 text-white',\n        amber: 'bg-amber-500 text-white',\n        yellow: 'bg-yellow-500 text-white',\n        lime: 'bg-lime-500 text-white',\n        green: 'bg-green-500 text-white',\n        emerald: 'bg-emerald-500 text-white',\n        teal: 'bg-teal-500 text-white',\n        cyan: 'bg-cyan-500 text-white',\n        sky: 'bg-sky-500 text-white',\n        blue: 'bg-blue-500 text-white',\n        indigo: 'bg-indigo-500 text-white',\n        violet: 'bg-violet-500 text-white',\n        purple: 'bg-purple-500 text-white',\n        fuchsia: 'bg-fuchsia-500 text-white',\n        pink: 'bg-pink-500 text-white',\n        rose: 'bg-rose-500 text-white',\n        zinc: 'bg-zinc-500 text-white',\n      },\n      size: {\n        // Lưu ý: text-[8px] là quá nhỏ so với mắt thường. Nếu đây là chủ đích design của bạn thì giữ nguyên.\n        xs: 'text-[10px]/3 px-1.5 py-0.5 gap-1',\n        sm: 'text-xs px-2 py-0.5 gap-1',\n        md: 'text-sm px-2.5 py-0.5 gap-1.5',\n        lg: 'text-base px-3 py-1 gap-1.5',\n        xl: 'text-lg px-3.5 py-1 gap-1.5',\n      },\n      pill: {\n        true: 'rounded-full',\n        false: 'rounded-sm', // Explicitly define false to handle the default shape safely\n      },\n    },\n    defaultVariants: {\n      color: 'zinc',\n      size: 'md',\n      pill: true,\n    },\n  }\n);\n\nexport type BadgeProps = VariantProps<typeof badgeVariants> & React.ComponentPropsWithoutRef<'span'>;\n\nfunction Badge({ className, color, size, pill, ...props }: BadgeProps) {\n  return <span className={cn(badgeVariants({ color, pill, size }), className)} {...props} />;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport { Badge, badgeVariants };\n"],"mappings":"6JAMA,MAAM,GAAA,EAAA,EAAA,KACJ,sMACA,CACE,SAAU,CACR,MAAO,CACL,IAAK,wBACL,OAAQ,2BACR,MAAO,0BACP,OAAQ,2BACR,KAAM,yBACN,MAAO,0BACP,QAAS,4BACT,KAAM,yBACN,KAAM,yBACN,IAAK,wBACL,KAAM,yBACN,OAAQ,2BACR,OAAQ,2BACR,OAAQ,2BACR,QAAS,4BACT,KAAM,yBACN,KAAM,yBACN,KAAM,yBACP,CACD,KAAM,CAEJ,GAAI,oCACJ,GAAI,4BACJ,GAAI,gCACJ,GAAI,8BACJ,GAAI,8BACL,CACD,KAAM,CACJ,KAAM,eACN,MAAO,aACR,CACF,CACD,gBAAiB,CACf,MAAO,OACP,KAAM,KACN,KAAM,GACP,CACF,CACF,CAID,SAAS,EAAM,CAAE,YAAW,QAAO,OAAM,OAAM,GAAG,GAAqB,CACrE,OAAO,EAAA,EAAA,KAAC,OAAA,CAAK,WAAA,EAAA,EAAA,IAAc,EAAc,CAAE,QAAO,OAAM,OAAM,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS"}