@customafk/lunas-ui 0.0.7 → 0.0.8

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

@@ -1,4 +1,5 @@
-import { toggleVariants } from "../toggle-CW-ZnYMy.cjs";
+import { toggleVariants } from "../toggle-8wPArWPq.cjs";
+import * as react_jsx_runtime228 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,13 @@ 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_runtime228.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_runtime228.JSX.Element;
 //#endregion
-export { ToggleGroup, ToggleGroupItem };
-//# sourceMappingURL=toggle-group.d.cts.map
+export { ToggleGroup, ToggleGroupItem };

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

@@ -1,5 +1,6 @@
-import { toggleVariants } from "../toggle-BVkMTVAz.js";
+import { toggleVariants } from "../toggle-3yC7NgOb.js";
 import React from "react";
+import * as react_jsx_runtime108 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
 
@@ -10,14 +11,13 @@ 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_runtime108.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_runtime108.JSX.Element;
 //#endregion
-export { ToggleGroup, ToggleGroupItem };
-//# sourceMappingURL=toggle-group.d.ts.map
+export { ToggleGroup, ToggleGroupItem };

package/dist/ui/toggle-group.js

@@ -1,2 +1 @@
-"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};
-//# sourceMappingURL=toggle-group.js.map
+"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};

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-8wPArWPq.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-3yC7NgOb.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-JbjxxBNd.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-Bo9id3nz.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/utils-D9AH0PUV.js

@@ -1,2 +1 @@
-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};
-//# sourceMappingURL=utils-D9AH0PUV.js.map
+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};

package/dist/utils-DaJ1XZgX.cjs

@@ -0,0 +1 @@
+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}});

package/package.json

@@ -1,18 +1,29 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "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>
+  );
+};

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

@@ -0,0 +1,25 @@
+"use client";
+import { PackageOpenIcon } from "lucide-react";
+
+import { Flex } from "../layouts/flex";
+
+export const EmptyDisplay = () => {
+  return (
+    <Flex
+      vertical
+      justify="center"
+      align="center"
+      gap="sm"
+      className="size-full"
+    >
+      <PackageOpenIcon
+        size={52}
+        strokeWidth={1}
+        className="text-muted-foreground"
+      />
+      <p className="text-muted-foreground text-sm">
+        Không có dữ liệu nào để hiển thị.
+      </p>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Paragraph } from "../typography/paragraph";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+type NameDisplayProps = {
+  name: string;
+};
+
+export const NameDisplay: React.FC<
+  React.PropsWithChildren<NameDisplayProps>
+> = ({ name }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <Paragraph variant="sm" className="line-clamp-2 cursor-help">
+          {name}
+        </Paragraph>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-80 text-wrap break-keep whitespace-pre-line">
+        {name}
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/packages/components/data-display/phone-number.tsx

@@ -0,0 +1,22 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+export const PhoneNumberDisplay: React.FC<
+  React.PropsWithChildren<{ value: string }>
+> = ({ value }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <p className="font-number text-secondary-foreground text-sm">
+          {value.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3")}
+        </p>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          {value
+            .slice(1)
+            .replace(/(\d{2})(\d{3})(\d{4})/, "(00) (+84) ($1) $2-$3")}
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/packages/components/data-display/role-badge.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { ERole } from "@/types";
+
+import { Badge } from "../ui/badge";
+
+type Props = {
+  status: ERole;
+};
+export const RoleBadge: React.FC<React.PropsWithChildren<Props>> = ({
+  status,
+}) => {
+  const colors = React.useMemo<
+    Record<ERole, React.ComponentProps<typeof Badge>["color"]>
+  >(() => {
+    return {
+      [ERole.ADMIN]: "red",
+      [ERole.SUPER_ADMIN]: "purple",
+      [ERole.MODERATOR]: "indigo",
+      [ERole.STAFF]: "green",
+      [ERole.USER]: "blue",
+    };
+  }, []);
+  return (
+    <Badge color={colors[status]} className="min-w-24 justify-center">
+      {status === ERole.SUPER_ADMIN && "Super Admin"}
+      {status === ERole.ADMIN && "Admin"}
+      {status === ERole.MODERATOR && "Moderator"}
+      {status === ERole.STAFF && "Staff"}
+      {status === ERole.USER && "User"}
+    </Badge>
+  );
+};