@customafk/lunas-ui 0.0.7 → 0.0.9

package/dist/ui/textarea.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../utils-BsjVK5EW.cjs`),n=e.__toESM(require(`react`)),r=e.__toESM(require(`react/jsx-runtime`));function i({className:e,onChange:i,onValueChange:a,...o}){let s=n.default.useCallback(e=>{i?.(e),a?.(e.target.value)},[i,a]);return(0,r.jsx)(`textarea`,{"data-slot":`textarea`,className:t.cn(`border-input caret-primary`,`flex`,`field-sizing-content`,`min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition outline-none`,`placeholder:text-muted-foreground`,`focus-visible:border-ring`,`focus-visible:ring-ring`,`focus-visible:ring-4`,`aria-invalid:ring-destructive/20`,`aria-invalid:border-destructive`,`dark:aria-invalid:ring-destructive/40`,`dark:bg-input/30`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,e),...o,onChange:s})}exports.Textarea=i;
-//# sourceMappingURL=textarea.cjs.map
+"use client";const e=require(`../chunk-hhQzssFb.cjs`);require(`../utils-DaJ1XZgX.cjs`);const t=require(`../textarea-Dz6npuI4.cjs`);exports.Textarea=t.Textarea;

package/dist/ui/textarea.d.cts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime204 from "react/jsx-runtime";
 import React from "react";
 
 //#region packages/components/ui/textarea.d.ts
@@ -8,7 +9,7 @@ declare function Textarea({
   ...props
 }: React.ComponentProps<"textarea"> & {
   onValueChange?: (value: string) => void;
-}): any;
+}): react_jsx_runtime204.JSX.Element;
 //#endregion
 export { Textarea };
 //# sourceMappingURL=textarea.d.cts.map

package/dist/ui/textarea.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import * as react_jsx_runtime207 from "react/jsx-runtime";
 
 //#region packages/components/ui/textarea.d.ts
 declare function Textarea({
@@ -8,7 +9,7 @@ declare function Textarea({
   ...props
 }: React.ComponentProps<"textarea"> & {
   onValueChange?: (value: string) => void;
-}): any;
+}): react_jsx_runtime207.JSX.Element;
 //#endregion
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

package/dist/ui/textarea.js

@@ -1,2 +1 @@
-"use client";import{cn as e}from"../utils-D9AH0PUV.js";import t from"react";import{jsx as n}from"react/jsx-runtime";function r({className:r,onChange:i,onValueChange:a,...o}){let s=t.useCallback(e=>{i?.(e),a?.(e.target.value)},[i,a]);return n(`textarea`,{"data-slot":`textarea`,className:e(`border-input caret-primary`,`flex`,`field-sizing-content`,`min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition outline-none`,`placeholder:text-muted-foreground`,`focus-visible:border-ring`,`focus-visible:ring-ring`,`focus-visible:ring-4`,`aria-invalid:ring-destructive/20`,`aria-invalid:border-destructive`,`dark:aria-invalid:ring-destructive/40`,`dark:bg-input/30`,`disabled:cursor-not-allowed`,`disabled:opacity-50`,r),...o,onChange:s})}export{r as Textarea};
-//# sourceMappingURL=textarea.js.map
+"use client";import"../utils-D9AH0PUV.js";import{Textarea as e}from"../textarea-dM1DYNfF.js";export{e as Textarea};

package/dist/ui/toggle-group.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-CUT6urMc.cjs`),t=require(`../utils-BsjVK5EW.cjs`),n=require(`../toggle-CfL3GVe2.cjs`),r=e.__toESM(require(`react`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`class-variance-authority`)),o=e.__toESM(require(`radix-ui`)),s=r.default.createContext({size:`default`,variant:`default`});function c({className:e,variant:n,size:r,children:a,...c}){return(0,i.jsx)(o.ToggleGroup.Root,{"data-slot":`toggle-group`,"data-variant":n,"data-size":r,className:t.cn(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:(0,i.jsx)(s.Provider,{value:{variant:n,size:r},children:a})})}function l({className:e,children:a,variant:c,size:l,...u}){let d=r.default.useContext(s);return(0,i.jsx)(o.ToggleGroup.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:t.cn(n.toggleVariants({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`,e),...u,children:a})}exports.ToggleGroup=c,exports.ToggleGroupItem=l;
+"use client";const e=require(`../chunk-hhQzssFb.cjs`),t=require(`../utils-DaJ1XZgX.cjs`),n=require(`../toggle-CzMYdDvC.cjs`),r=e.__toESM(require(`react`)),i=e.__toESM(require(`react/jsx-runtime`)),a=e.__toESM(require(`class-variance-authority`)),o=e.__toESM(require(`radix-ui`)),s=r.default.createContext({size:`default`,variant:`default`});function c({className:e,variant:n,size:r,children:a,...c}){return(0,i.jsx)(o.ToggleGroup.Root,{"data-slot":`toggle-group`,"data-variant":n,"data-size":r,className:t.cn(`group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs`,e),...c,children:(0,i.jsx)(s.Provider,{value:{variant:n,size:r},children:a})})}function l({className:e,children:a,variant:c,size:l,...u}){let d=r.default.useContext(s);return(0,i.jsx)(o.ToggleGroup.Item,{"data-slot":`toggle-group-item`,"data-variant":d.variant||c,"data-size":d.size||l,className:t.cn(n.toggleVariants({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`,e),...u,children:a})}exports.ToggleGroup=c,exports.ToggleGroupItem=l;
 //# sourceMappingURL=toggle-group.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.cjs","names":["React","ToggleGroupPrimitive","cn","toggleVariants"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { toggleVariants } from \"@/components/ui/toggle\";\nimport { cn } from \"@/lib/utils\";\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\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> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </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> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(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":"uRAQM,EAAqBA,EAAAA,QAAM,cAE/B,CACA,KAAM,UACN,QAAS,UACV,EAED,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,EAEgC,CAAE,CACrC,OACE,EAAA,EAAA,KAACC,EAAAA,YAAqB,KAAA,CACpB,YAAU,eACV,eAAc,EACd,YAAW,EACX,UAAWC,EAAAA,GACT,yFACA,GAEF,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAmB,SAAA,CAAS,MAAO,CAAE,UAAS,OAAM,CAClD,cAIR,CAED,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,EAEgC,CAAE,CACrC,IAAM,EAAUF,EAAAA,QAAM,WAAW,GAEjC,OACE,EAAA,EAAA,KAACC,EAAAA,YAAqB,KAAA,CACpB,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,UAAWC,EAAAA,GACTC,EAAAA,eAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,EACvB,EACD,8LACA,GAEF,GAAI,EAEH,YAGN"}
+{"version":3,"file":"toggle-group.cjs","names":["React","ToggleGroupPrimitive","cn","toggleVariants"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { toggleVariants } from \"@/components/ui/toggle\";\nimport { cn } from \"@/lib/utils\";\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\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> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </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> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(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":"uRAQM,EAAqBA,EAAAA,QAAM,cAE/B,CACA,KAAM,UACN,QAAS,YAGX,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAEkC,CACrC,OACE,EAAA,EAAA,KAACC,EAAAA,YAAqB,KAAA,CACpB,YAAU,eACV,eAAc,EACd,YAAW,EACX,UAAWC,EAAAA,GACT,yFACA,GAEF,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAmB,SAAA,CAAS,MAAO,CAAE,UAAS,QAC5C,eAMT,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAEkC,CACrC,IAAM,EAAUF,EAAAA,QAAM,WAAW,GAEjC,OACE,EAAA,EAAA,KAACC,EAAAA,YAAqB,KAAA,CACpB,YAAU,oBACV,eAAc,EAAQ,SAAW,EACjC,YAAW,EAAQ,MAAQ,EAC3B,UAAWC,EAAAA,GACTC,EAAAA,eAAe,CACb,QAAS,EAAQ,SAAW,EAC5B,KAAM,EAAQ,MAAQ,IAExB,8LACA,GAEF,GAAI,EAEH"}

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

@@ -1,4 +1,5 @@
-import { toggleVariants } from "../toggle-CW-ZnYMy.cjs";
+import { toggleVariants } from "../toggle-BCSHdzP0.cjs";
+import * as react_jsx_runtime205 from "react/jsx-runtime";
 import React from "react";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
@@ -10,14 +11,14 @@ declare function ToggleGroup({
   size,
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): any;
+}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime205.JSX.Element;
 declare function ToggleGroupItem({
   className,
   children,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): any;
+}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime205.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.cts.map

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

@@ -1,5 +1,6 @@
-import { toggleVariants } from "../toggle-BVkMTVAz.js";
+import { toggleVariants } from "../toggle-D42pqCTD.js";
 import React from "react";
+import * as react_jsx_runtime196 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 
@@ -10,14 +11,14 @@ declare function ToggleGroup({
   size,
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): any;
+}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime196.JSX.Element;
 declare function ToggleGroupItem({
   className,
   children,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): any;
+}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime196.JSX.Element;
 //#endregion
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/ui/toggle-group.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","names":["ToggleGroupPrimitive"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { toggleVariants } from \"@/components/ui/toggle\";\nimport { cn } from \"@/lib/utils\";\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\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> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </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> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(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":"mPAQA,MAAM,EAAqB,EAAM,cAE/B,CACA,KAAM,UACN,QAAS,UACV,EAED,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,EAEgC,CAAE,CACrC,OACE,EAACA,EAAqB,KAAA,CACpB,YAAU,eACV,eAAc,EACd,YAAW,EACX,UAAW,EACT,yFACA,GAEF,GAAI,WAEJ,EAAC,EAAmB,SAAA,CAAS,MAAO,CAAE,UAAS,OAAM,CAClD,cAIR,CAED,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,EAEgC,CAAE,CACrC,IAAM,EAAU,EAAM,WAAW,GAEjC,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,EACD,8LACA,GAEF,GAAI,EAEH,YAGN"}
+{"version":3,"file":"toggle-group.js","names":["ToggleGroupPrimitive"],"sources":["../../packages/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport { type VariantProps } from \"class-variance-authority\";\n\nimport { toggleVariants } from \"@/components/ui/toggle\";\nimport { cn } from \"@/lib/utils\";\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\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> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </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> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(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":"mPAQA,MAAM,EAAqB,EAAM,cAE/B,CACA,KAAM,UACN,QAAS,YAGX,SAAS,EAAY,CACnB,YACA,UACA,OACA,WACA,GAAG,GAEkC,CACrC,OACE,EAACA,EAAqB,KAAA,CACpB,YAAU,eACV,eAAc,EACd,YAAW,EACX,UAAW,EACT,yFACA,GAEF,GAAI,WAEJ,EAAC,EAAmB,SAAA,CAAS,MAAO,CAAE,UAAS,QAC5C,eAMT,SAAS,EAAgB,CACvB,YACA,WACA,UACA,OACA,GAAG,GAEkC,CACrC,IAAM,EAAU,EAAM,WAAW,GAEjC,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,IAExB,8LACA,GAEF,GAAI,EAEH"}

package/dist/ui/toggle.cjs

@@ -1 +1 @@
-"use client";require(`../utils-BsjVK5EW.cjs`);const e=require(`../toggle-CfL3GVe2.cjs`);exports.Toggle=e.Toggle,exports.toggleVariants=e.toggleVariants;
+"use client";const e=require(`../chunk-hhQzssFb.cjs`);require(`../utils-DaJ1XZgX.cjs`);const t=require(`../toggle-CzMYdDvC.cjs`);exports.Toggle=t.Toggle,exports.toggleVariants=t.toggleVariants;

package/dist/ui/toggle.d.cts

@@ -1,2 +1,2 @@
-import { Toggle, toggleVariants } from "../toggle-CW-ZnYMy.cjs";
+import { Toggle, toggleVariants } from "../toggle-BCSHdzP0.cjs";
 export { Toggle, toggleVariants };

package/dist/ui/toggle.d.ts

@@ -1,2 +1,2 @@
-import { Toggle, toggleVariants } from "../toggle-BVkMTVAz.js";
+import { Toggle, toggleVariants } from "../toggle-D42pqCTD.js";
 export { Toggle, toggleVariants };

package/dist/ui/toggle.js

@@ -1 +1 @@
-"use client";import"../utils-D9AH0PUV.js";import{Toggle as e,toggleVariants as t}from"../toggle-D_MDMruK.js";export{e as Toggle,t as toggleVariants};
+"use client";import"../utils-D9AH0PUV.js";import{Toggle as e,toggleVariants as t}from"../toggle-CHJ2edke.js";export{e as Toggle,t as toggleVariants};

package/dist/ui/tooltip.cjs

@@ -1 +1 @@
-"use client";require(`../utils-BsjVK5EW.cjs`);const e=require(`../tooltip-Beb-_EPp.cjs`);exports.Tooltip=e.Tooltip,exports.TooltipContent=e.TooltipContent,exports.TooltipProvider=e.TooltipProvider,exports.TooltipTrigger=e.TooltipTrigger;
+"use client";const e=require(`../chunk-hhQzssFb.cjs`);require(`../utils-DaJ1XZgX.cjs`);const t=require(`../tooltip-MgToVOzy.cjs`);exports.Tooltip=t.Tooltip,exports.TooltipContent=t.TooltipContent,exports.TooltipProvider=t.TooltipProvider,exports.TooltipTrigger=t.TooltipTrigger;

package/dist/ui/tooltip.d.cts

@@ -1,2 +1,2 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-Dk4HsZVR.cjs";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-Dn8AOhc4.cjs";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/ui/tooltip.d.ts

@@ -1,2 +1,2 @@
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-Cjuu_Ld4.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip-DZ2Shzgg.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/utils-D9AH0PUV.js

@@ -1,2 +1,2 @@
-import{clsx as e}from"clsx";import{twMerge as t}from"tailwind-merge";function n(e,t={}){let{decimals:n=0,sizeType:r=`normal`}=t,i=[`Bytes`,`KB`,`MB`,`GB`,`TB`],a=[`Bytes`,`KiB`,`MiB`,`GiB`,`TiB`];if(e===0)return`0 Byte`;let o=Math.floor(Math.log(e)/Math.log(1024));return`${(e/1024**o).toFixed(n)} ${r===`accurate`?a[o]??`Bytes`:i[o]??`Bytes`}`}function r(...n){return t(e(n))}export{r as cn,n as formatBytes};
+import{clsx as e}from"clsx";import{twMerge as t}from"tailwind-merge";function n(e,t={}){let{decimals:n=0,sizeType:r=`normal`}=t,i=[`Bytes`,`KB`,`MB`,`GB`,`TB`],a=[`Bytes`,`KiB`,`MiB`,`GiB`,`TiB`];if(e===0)return`0 Byte`;let o=Math.floor(Math.log(e)/Math.log(1024));return`${(e/Math.pow(1024,o)).toFixed(n)} ${r===`accurate`?a[o]??`Bytes`:i[o]??`Bytes`}`}function r(...n){return t(e(n))}export{r as cn,n as formatBytes};
 //# sourceMappingURL=utils-D9AH0PUV.js.map

package/dist/utils-D9AH0PUV.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils-D9AH0PUV.js","names":[],"sources":["../packages/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB\n\nexport function formatBytes(\n  bytes: number,\n  opts: {\n    decimals?: number;\n    sizeType?: \"accurate\" | \"normal\";\n  } = {},\n) {\n  const { decimals = 0, sizeType = \"normal\" } = opts;\n\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const accurateSizes = [\"Bytes\", \"KiB\", \"MiB\", \"GiB\", \"TiB\"];\n  if (bytes === 0) return \"0 Byte\";\n  const i = Math.floor(Math.log(bytes) / Math.log(1024));\n  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n    sizeType === \"accurate\"\n      ? (accurateSizes[i] ?? \"Bytes\")\n      : (sizes[i] ?? \"Bytes\")\n  }`;\n}\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"qEAKA,SAAgB,EACd,EACA,EAGI,EAAE,CACN,CACA,GAAM,CAAE,WAAW,EAAG,WAAW,SAAU,CAAG,EAExC,EAAQ,CAAC,QAAS,KAAM,KAAM,KAAM,KAAK,CACzC,EAAgB,CAAC,QAAS,MAAO,MAAO,MAAO,MAAM,CAC3D,GAAI,IAAU,EAAG,MAAO,SACxB,IAAM,EAAI,KAAK,MAAM,KAAK,IAAI,GAAS,KAAK,IAAI,OAChD,MAAO,IAAI,EAAiB,MAAM,GAAI,QAAQ,GAAU,GACtD,IAAa,WACR,EAAc,IAAM,QACpB,EAAM,IAAM,SAEpB,CAED,SAAgB,EAAG,GAAG,EAAsB,CAC1C,OAAO,EAAQ,EAAK,GACrB"}
+{"version":3,"file":"utils-D9AH0PUV.js","names":[],"sources":["../packages/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB\n\nexport function formatBytes(\n  bytes: number,\n  opts: {\n    decimals?: number;\n    sizeType?: \"accurate\" | \"normal\";\n  } = {},\n) {\n  const { decimals = 0, sizeType = \"normal\" } = opts;\n\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const accurateSizes = [\"Bytes\", \"KiB\", \"MiB\", \"GiB\", \"TiB\"];\n  if (bytes === 0) return \"0 Byte\";\n  const i = Math.floor(Math.log(bytes) / Math.log(1024));\n  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n    sizeType === \"accurate\"\n      ? (accurateSizes[i] ?? \"Bytes\")\n      : (sizes[i] ?? \"Bytes\")\n  }`;\n}\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"qEAKA,SAAgB,EACd,EACA,EAGI,GACJ,CACA,GAAM,CAAE,WAAW,EAAG,WAAW,UAAa,EAExC,EAAQ,CAAC,QAAS,KAAM,KAAM,KAAM,MACpC,EAAgB,CAAC,QAAS,MAAO,MAAO,MAAO,OACrD,GAAI,IAAU,EAAG,MAAO,SACxB,IAAM,EAAI,KAAK,MAAM,KAAK,IAAI,GAAS,KAAK,IAAI,OAChD,MAAO,IAAI,EAAQ,KAAK,IAAI,KAAM,IAAI,QAAQ,GAAU,GACtD,IAAa,WACR,EAAc,IAAM,QACpB,EAAM,IAAM,UAIrB,SAAgB,EAAG,GAAG,EAAsB,CAC1C,OAAO,EAAQ,EAAK"}

package/dist/utils-DaJ1XZgX.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-hhQzssFb.cjs`),t=e.__toESM(require(`clsx`)),n=e.__toESM(require(`tailwind-merge`)),r=5*1024*1024;function i(e,t={}){let{decimals:n=0,sizeType:r=`normal`}=t,i=[`Bytes`,`KB`,`MB`,`GB`,`TB`],a=[`Bytes`,`KiB`,`MiB`,`GiB`,`TiB`];if(e===0)return`0 Byte`;let o=Math.floor(Math.log(e)/Math.log(1024));return`${(e/Math.pow(1024,o)).toFixed(n)} ${r===`accurate`?a[o]??`Bytes`:i[o]??`Bytes`}`}function a(...e){return(0,n.twMerge)((0,t.clsx)(e))}Object.defineProperty(exports,`cn`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`formatBytes`,{enumerable:!0,get:function(){return i}});
+//# sourceMappingURL=utils-DaJ1XZgX.cjs.map

package/dist/{utils-BsjVK5EW.cjs.map → utils-DaJ1XZgX.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"utils-BsjVK5EW.cjs","names":[],"sources":["../packages/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB\n\nexport function formatBytes(\n  bytes: number,\n  opts: {\n    decimals?: number;\n    sizeType?: \"accurate\" | \"normal\";\n  } = {},\n) {\n  const { decimals = 0, sizeType = \"normal\" } = opts;\n\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const accurateSizes = [\"Bytes\", \"KiB\", \"MiB\", \"GiB\", \"TiB\"];\n  if (bytes === 0) return \"0 Byte\";\n  const i = Math.floor(Math.log(bytes) / Math.log(1024));\n  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n    sizeType === \"accurate\"\n      ? (accurateSizes[i] ?? \"Bytes\")\n      : (sizes[i] ?? \"Bytes\")\n  }`;\n}\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"4GAGa,EAAgB,EAAI,KAAO,KAExC,SAAgB,EACd,EACA,EAGI,EAAE,CACN,CACA,GAAM,CAAE,WAAW,EAAG,WAAW,SAAU,CAAG,EAExC,EAAQ,CAAC,QAAS,KAAM,KAAM,KAAM,KAAK,CACzC,EAAgB,CAAC,QAAS,MAAO,MAAO,MAAO,MAAM,CAC3D,GAAI,IAAU,EAAG,MAAO,SACxB,IAAM,EAAI,KAAK,MAAM,KAAK,IAAI,GAAS,KAAK,IAAI,OAChD,MAAO,IAAI,EAAiB,MAAM,GAAI,QAAQ,GAAU,GACtD,IAAa,WACR,EAAc,IAAM,QACpB,EAAM,IAAM,SAEpB,CAED,SAAgB,EAAG,GAAG,EAAsB,CAC1C,OAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAoB,GACrB"}
+{"version":3,"file":"utils-DaJ1XZgX.cjs","names":[],"sources":["../packages/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB\n\nexport function formatBytes(\n  bytes: number,\n  opts: {\n    decimals?: number;\n    sizeType?: \"accurate\" | \"normal\";\n  } = {},\n) {\n  const { decimals = 0, sizeType = \"normal\" } = opts;\n\n  const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const accurateSizes = [\"Bytes\", \"KiB\", \"MiB\", \"GiB\", \"TiB\"];\n  if (bytes === 0) return \"0 Byte\";\n  const i = Math.floor(Math.log(bytes) / Math.log(1024));\n  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${\n    sizeType === \"accurate\"\n      ? (accurateSizes[i] ?? \"Bytes\")\n      : (sizes[i] ?? \"Bytes\")\n  }`;\n}\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"4GAGa,EAAgB,EAAI,KAAO,KAExC,SAAgB,EACd,EACA,EAGI,GACJ,CACA,GAAM,CAAE,WAAW,EAAG,WAAW,UAAa,EAExC,EAAQ,CAAC,QAAS,KAAM,KAAM,KAAM,MACpC,EAAgB,CAAC,QAAS,MAAO,MAAO,MAAO,OACrD,GAAI,IAAU,EAAG,MAAO,SACxB,IAAM,EAAI,KAAK,MAAM,KAAK,IAAI,GAAS,KAAK,IAAI,OAChD,MAAO,IAAI,EAAQ,KAAK,IAAI,KAAM,IAAI,QAAQ,GAAU,GACtD,IAAa,WACR,EAAc,IAAM,QACpB,EAAM,IAAM,UAIrB,SAAgB,EAAG,GAAG,EAAsB,CAC1C,OAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAoB"}

package/package.json

@@ -1,18 +1,29 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
-  "author": "CustomAFK",
+  "author": {
+    "name": "CustomAFK",
+    "email": "quangpm220503vt@gmail.com"
+  },
   "license": "ISC",
-  "homepage": "https://github.com/author/library#readme",
+  "homepage": "https://github.com/QuangPhamvt/lunas-enterprise-ui-package#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/QuangPhamvt/lunas-enterprise-ui-package.git"
   },
   "files": [
-    "dist"
+    "dist",
+    "packages",
+    "README.md"
+  ],
+  "workspaces": [
+    "packages/*"
   ],
+  "engines": {
+    "node": ">= 22.0.0"
+  },
   "exports": {
     "./cards/simple-card": {
       "import": "./dist/cards/simple-card.js",
@@ -70,10 +81,46 @@
       "import": "./dist/dialogs/loading-dialog.js",
       "require": "./dist/dialogs/loading-dialog.cjs"
     },
+    "./forms/combobox-field": {
+      "import": "./dist/forms/combobox-field.js",
+      "require": "./dist/forms/combobox-field.cjs"
+    },
+    "./forms/date-field": {
+      "import": "./dist/forms/date-field.js",
+      "require": "./dist/forms/date-field.cjs"
+    },
     "./forms/form-wrapper": {
       "import": "./dist/forms/form-wrapper.js",
       "require": "./dist/forms/form-wrapper.cjs"
     },
+    "./forms/multi-select-field": {
+      "import": "./dist/forms/multi-select-field.js",
+      "require": "./dist/forms/multi-select-field.cjs"
+    },
+    "./forms/number-field": {
+      "import": "./dist/forms/number-field.js",
+      "require": "./dist/forms/number-field.cjs"
+    },
+    "./forms/password-field": {
+      "import": "./dist/forms/password-field.js",
+      "require": "./dist/forms/password-field.cjs"
+    },
+    "./forms/select-field": {
+      "import": "./dist/forms/select-field.js",
+      "require": "./dist/forms/select-field.cjs"
+    },
+    "./forms/switch-field": {
+      "import": "./dist/forms/switch-field.js",
+      "require": "./dist/forms/switch-field.cjs"
+    },
+    "./forms/text-field": {
+      "import": "./dist/forms/text-field.js",
+      "require": "./dist/forms/text-field.cjs"
+    },
+    "./forms/textarea-field": {
+      "import": "./dist/forms/textarea-field.js",
+      "require": "./dist/forms/textarea-field.cjs"
+    },
     "./layouts/flex": {
       "import": "./dist/layouts/flex.js",
       "require": "./dist/layouts/flex.cjs"

package/packages/components/cards/simple-card.tsx

@@ -0,0 +1,37 @@
+"use client";
+import React from "react";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+
+type Props = {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  footer?: React.ReactNode;
+};
+export const SimpleCard = ({
+  title,
+  description,
+  action,
+  footer,
+  children,
+}: React.PropsWithChildren<Props>) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+        {action && <CardAction>{action}</CardAction>}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+      {footer && <CardFooter>{footer}</CardFooter>}
+    </Card>
+  );
+};

package/packages/components/data-display/country.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import ReactCountryFlag from "react-country-flag";
+
+import { ECountry } from "@/types";
+
+import { Flex } from "../layouts/flex";
+import { Paragraph } from "../typography/paragraph";
+
+type Props = {
+  country?: ECountry | null;
+};
+export const CountryDisplay: React.FC<React.PropsWithChildren<Props>> = ({
+  country,
+}) => {
+  const code = React.useMemo(() => {
+    return {
+      [ECountry.VIETNAM]: "VN",
+      [ECountry.USA]: "US",
+      [ECountry.JAPAN]: "JP",
+      [ECountry.CHINA]: "CN",
+      [ECountry.KOREA]: "KR",
+      [ECountry.SINGAPORE]: "SG",
+      [ECountry.MALAYSIA]: "MY",
+      [ECountry.INDONESIA]: "ID",
+      [ECountry.TAIWAN]: "TW",
+      [ECountry.THAILAND]: "TH",
+    };
+  }, []);
+  if (!country) {
+    return (
+      <Flex padding="none" className="h-4 px-1">
+        <Paragraph variant="muted" className="line-clamp-1 text-xs">
+          No country
+        </Paragraph>
+      </Flex>
+    );
+  }
+  return (
+    <Flex padding="none" className="h-4 px-1">
+      <ReactCountryFlag
+        svg
+        countryCode={country ? code[country] : "VN"}
+        className="emojiFlag border"
+      />
+      <Paragraph variant="sm">
+        {country === ECountry.VIETNAM && "Vietnam"}
+        {country === ECountry.USA && "America"}
+        {country === ECountry.JAPAN && "Japan"}
+        {country === ECountry.CHINA && "China"}
+        {country === ECountry.KOREA && "Korea"}
+        {country === ECountry.SINGAPORE && "Singapore"}
+        {country === ECountry.MALAYSIA && "Malaysia"}
+        {country === ECountry.INDONESIA && "Indonesia"}
+        {country === ECountry.TAIWAN && "Taiwan"}
+        {country === ECountry.THAILAND && "Thailand"}
+      </Paragraph>
+    </Flex>
+  );
+};

package/packages/components/data-display/data-list.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { Flex } from "../layouts/flex";
+
+type DataListProps = {
+  title?: string;
+};
+export const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({
+  children,
+}) => {
+  return (
+    <Flex vertical padding="none" gap="md" width="full">
+      {children}
+    </Flex>
+  );
+};
+
+type DataListItemProps = {
+  label: string;
+  value: string | number | React.ReactNode;
+  minLabelWidth?: string;
+};
+
+export const DataListItem: React.FC<
+  React.PropsWithChildren<DataListItemProps>
+> = ({ label, value, minLabelWidth = "120px" }) => {
+  return (
+    <Flex align="center" justify="start" width="full" padding="none" gap="md">
+      <div
+        style={{ minWidth: minLabelWidth }}
+        className="text-muted-foreground text-sm"
+      >
+        {label}
+      </div>
+      <div className="text-secondary-foreground text-sm">{value}</div>
+    </Flex>
+  );
+};

package/packages/components/data-display/date.tsx

@@ -0,0 +1,215 @@
+import React from "react";
+import {
+  format,
+  isThisMonth,
+  isThisWeek,
+  isThisYear,
+  isToday,
+  isTomorrow,
+  isValid,
+  isYesterday,
+  parseISO,
+} from "date-fns";
+
+import {
+  TIME_IN_SECONDS,
+  vietnameseHolidays,
+  vietnameseLocale,
+} from "@/constants";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  date: Date | string | number;
+  format?:
+    | "short" // 15/03/24
+    | "medium" // 15/03/2024
+    | "long" // 15 tháng 3, 2024
+    | "full" // Thứ Sáu, ngày 15 tháng 3 năm 2024
+    | "relative" // 2 giờ trước
+    | "datetime" // 15/03/2024 14:30
+    | "time" // 14:30
+    | "smart"; // Tự động chọn format phù hợp
+  showHoliday?: boolean;
+  showTime?: boolean;
+  className?: string;
+  title?: string; // Tooltip khi hover
+}
+
+export const DateDisplay: React.FC<Props> = ({
+  date,
+  format: formatType = "medium",
+  showHoliday = false,
+  showTime = false,
+  className = "",
+  title,
+}) => {
+  const parsedDate = React.useMemo(() => {
+    try {
+      if (date instanceof Date) {
+        return isValid(date) ? date : null;
+      }
+      if (typeof date === "string") {
+        const parsed = parseISO(date);
+        return isValid(parsed) ? parsed : new Date(date);
+      }
+      if (typeof date === "number") {
+        const parsed = new Date(date);
+        return isValid(parsed) ? parsed : null;
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }, [date]);
+
+  // Format relative time in Vietnamese
+  const formatRelativeTime = React.useCallback((date: Date): string => {
+    const now = new Date();
+    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+    if (diffInSeconds < 60) return "Vừa xong";
+    if (diffInSeconds < 3600)
+      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.MINUTE)} phút trước`;
+    if (diffInSeconds < 86400)
+      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.HOUR)} giờ trước`;
+    if (diffInSeconds < 604800)
+      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.DAY)} ngày trước`;
+    if (diffInSeconds < 2592000)
+      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.WEEK)} tuần trước`;
+    if (diffInSeconds < 31536000)
+      return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.MONTH)} tháng trước`;
+    return `${Math.floor(diffInSeconds / TIME_IN_SECONDS.YEAR)} năm trước`;
+  }, []);
+
+  // Vietnamese weekday
+  const getVietnameseWeekday = React.useCallback(
+    (date: Date, short: boolean = false): string => {
+      const dayIndex = date.getDay();
+      return short
+        ? vietnameseLocale.weekdaysShort[dayIndex]
+        : vietnameseLocale.weekdays[dayIndex];
+    },
+    [],
+  );
+
+  // Vietnamese month
+  const getVietnameseMonth = React.useCallback(
+    (date: Date, short: boolean = false): string => {
+      const monthIndex = date.getMonth();
+      return short
+        ? vietnameseLocale.monthsShort[monthIndex]
+        : vietnameseLocale.months[monthIndex];
+    },
+    [],
+  );
+
+  // Check holiday
+  const getHoliday = React.useCallback((date: Date): string | null => {
+    const monthDay = format(date, "MM-dd") as keyof typeof vietnameseHolidays;
+    return vietnameseHolidays[monthDay] || null;
+  }, []);
+
+  // Smart format - choose appropriate format based on date
+  const getSmartFormat = React.useCallback(
+    (date: Date): string => {
+      if (isToday(date)) {
+        return showTime ? `Hôm nay ${format(date, "HH:mm")}` : "Hôm nay";
+      }
+      if (isYesterday(date)) {
+        return showTime ? `Hôm qua ${format(date, "HH:mm")}` : "Hôm qua";
+      }
+      if (isTomorrow(date)) {
+        return showTime ? `Ngày mai ${format(date, "HH:mm")}` : "Ngày mai";
+      }
+      if (isThisWeek(date)) {
+        const weekday = getVietnameseWeekday(date);
+        return showTime ? `${weekday} ${format(date, "HH:mm")}` : weekday;
+      }
+      if (isThisMonth(date)) {
+        const day = format(date, "d");
+        return showTime
+          ? `${day}/${format(date, "M")} ${format(date, "HH:mm")}`
+          : `${day}/${format(date, "M")}`;
+      }
+      if (isThisYear(date)) {
+        return showTime ? format(date, "d/M HH:mm") : format(date, "d/M");
+      }
+      return showTime
+        ? format(date, "d/M/yyyy HH:mm")
+        : format(date, "d/M/yyyy");
+    },
+    [getVietnameseWeekday, showTime],
+  );
+
+  // Main formatting function
+  const formatDate = React.useCallback(
+    (date: Date, type: string): string => {
+      const timeStr = showTime ? format(date, ", HH:mm") : "";
+
+      switch (type) {
+        case "short":
+          return format(date, "d/M/yy") + timeStr;
+
+        case "medium":
+          return format(date, "dd/MM/yyyy") + timeStr;
+
+        case "long":
+          return (
+            `${format(date, "d")} ${getVietnameseMonth(date)} ${format(date, "yyyy")}` +
+            timeStr
+          );
+
+        case "full": {
+          const data = `${getVietnameseWeekday(date)}, ngày ${format(date, "d")} ${getVietnameseMonth(date)} năm ${format(date, "yyyy")}`;
+          return data + timeStr;
+        }
+
+        case "relative":
+          return formatRelativeTime(date);
+
+        case "datetime":
+          return format(date, "d/M/yyyy HH:mm");
+
+        case "time":
+          return format(date, "HH:mm");
+
+        case "smart":
+          return getSmartFormat(date);
+
+        default:
+          return format(date, "d/M/yyyy") + timeStr;
+      }
+    },
+    [
+      getSmartFormat,
+      getVietnameseMonth,
+      getVietnameseWeekday,
+      formatRelativeTime,
+      showTime,
+    ],
+  );
+
+  if (!parsedDate) {
+    return (
+      <span className={cn("text-muted-foreground text-sm", className)}>
+        --/--/----
+      </span>
+    );
+  }
+
+  const formattedDate = formatDate(parsedDate, formatType);
+  const holiday = showHoliday ? getHoliday(parsedDate) : null;
+  const displayText = holiday ? `${formattedDate} (${holiday})` : formattedDate;
+  const tooltipTitle =
+    title || format(parsedDate, "EEEE, d MMMM yyyy HH:mm:ss");
+
+  return (
+    <time
+      dateTime={parsedDate.toISOString()}
+      className={cn("text-accent-foreground font-number text-sm", className)}
+      title={tooltipTitle}
+    >
+      {displayText}
+    </time>
+  );
+};