@customafk/lunas-ui 0.0.25 → 0.0.27

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

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

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

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

package/dist/ui/toggle.d.cts

@@ -1,2 +1,2 @@
-import { Toggle, toggleVariants } from "../toggle-Cx9H5u3p.cjs";
+import { Toggle, toggleVariants } from "../toggle-DnGvFJh8.cjs";
 export { Toggle, toggleVariants };

package/dist/ui/toggle.d.ts

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

package/dist/ui/tooltip.d.cts

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

package/dist/ui/tooltip.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {
@@ -15,7 +15,7 @@
   },
   "files": [
     "dist",
-    "packages",
+    "styles",
     "README.md"
   ],
   "workspaces": [

package/styles/base.css

@@ -0,0 +1,29 @@
+:root {
+  body {
+    margin: 0;
+    min-width: 320px;
+    min-height: 100vh;
+
+    font-synthesis: none;
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+
+    letter-spacing: -0.015625rem;
+    overflow-wrap: break-word;
+    hyphens: auto;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  /* Custom scrollbar styling. Thanks @pranathiperii. */
+  ::-webkit-scrollbar {
+    width: 0.375rem;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 0.375rem;
+  }
+}

package/styles/loader.css

@@ -0,0 +1,113 @@
+:root {
+  /* Loader styles */
+  /* HTML: <div class="loader"></div> */
+  .loader {
+    width: 50px;
+    aspect-ratio: 1;
+    display: grid;
+    border: var(--border) solid;
+    border-radius: 50%;
+    border-right-color: var(--primary);
+    animation: l15 1s infinite linear;
+  }
+  .loader::before,
+  .loader::after {
+    content: '';
+    grid-area: 1/1;
+    margin: 2px;
+    border: inherit;
+    border-radius: 50%;
+    animation: l15 2s infinite;
+  }
+  .loader::after {
+    margin: 8px;
+    animation-duration: 3s;
+  }
+  @keyframes l15 {
+    100% {
+      transform: rotate(1turn);
+    }
+  }
+
+  /* HTML: <div class="loader-dots"></div> */
+  .loader-dots {
+    width: 8px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    animation: l5 1s infinite linear alternate;
+  }
+  @keyframes l5 {
+    0% {
+      box-shadow:
+        10px 0 var(--primary-foreground),
+        -10px 0 #0002;
+      background: var(--primary-foreground);
+    }
+    33% {
+      box-shadow:
+        10px 0 var(--primary-foreground),
+        -10px 0 #0002;
+      background: #0002;
+    }
+    66% {
+      box-shadow:
+        10px 0 #0002,
+        -10px 0 var(--primary-foreground);
+      background: #0002;
+    }
+    100% {
+      box-shadow:
+        10px 0 #0002,
+        -10px 0 var(--primary-foreground);
+      background: var(--primary-foreground);
+    }
+  }
+
+  /* HTML: <div class="loader-spinner"></div> */
+  .loader-spinner {
+    width: 16px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: 2.5px solid var(--primary-foreground);
+    animation:
+      l20-1 0.8s infinite linear alternate,
+      l20-2 1.6s infinite linear;
+  }
+  @keyframes l20-1 {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+    }
+    12.5% {
+      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+    }
+    25% {
+      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+    }
+    50% {
+      clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+    }
+    62.5% {
+      clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+    }
+    75% {
+      clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+    }
+    100% {
+      clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+    }
+  }
+  @keyframes l20-2 {
+    0% {
+      transform: scaleY(1) rotate(0deg);
+    }
+    49.99% {
+      transform: scaleY(1) rotate(135deg);
+    }
+    50% {
+      transform: scaleY(-1) rotate(0deg);
+    }
+    100% {
+      transform: scaleY(-1) rotate(-135deg);
+    }
+  }
+}

package/styles/theme.css

@@ -0,0 +1,104 @@
+:root {
+  /* Color Palette */
+  --background: #ffffff; /* --color-zinc-50 */
+  --foreground: oklch(14% 0 0); /* --color-zinc-950 */
+
+  --card: #ffffff; /* --color-zinc-50 */
+  --card-foreground: oklch(14% 0 286); /* --color-zinc-950 */
+
+  --popover: #ffffff; /* --color-zinc-50 */
+  --popover-foreground: oklch(14% 0 286); /* --color-zinc-950 */
+
+  --primary: oklch(0.61 0.22 293); /* --color-violet-500 */
+  --primary-muted: oklch(0.94 0.03 295); /* --color-violte-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 */
+
+  --secondary: oklch(0.55 0.02 264); /* --color-gray-500 */
+  --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.28 0.03 257); /* --color-gray-800 */
+  --secondary-intense: oklch(0.13 0.03 262); /* --color-gray-950 */
+
+  --muted: oklch(0.55 0.01 286); /* --color-zinc-500 */
+  --muted-muted: oklch(0.97 0 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 */
+  --muted-intense: oklch(0.21 0.01 286); /* --color-zinc-900 */
+
+  --accent: oklch(0.55 0.04 257); /* --color-slate-500 */
+  --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 */
+  --accent-intense: oklch(0.21 0.04 266); /* --color-slate-900 */
+
+  --info: oklch(0.62 0.19 260); /* --color-blue-500 */
+  --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 */
+  --info-intense: oklch(0.38 0.14 266); /* --color-blue-900 */
+
+  --success: oklch(0.72 0.19 150); /* --color-green-500 */
+  --success-muted: oklch(0.96 0.04 157); /* --color-green-100 */
+  --success-weak: oklch(0.8 0.18 152); /* --color-green-400 */
+  --success-strong: oklch(0.63 0.17 149); /* --color-green-600 */
+  --success-intense: oklch(0.53 0.14 150); /* --color-green-750 */
+
+  --warning: oklch(0.77 0.16 70); /* --color-amber-500 */
+  --warning-muted: oklch(0.96 0.06 96); /* --color-amber-100 */
+  --warning-weak: oklch(0.84 0.16 84); /* --color-amber-400 */
+  --warning-strong: oklch(0.67 0.16 58); /* --color-amber-600 */
+  --warning-intense: oklch(0.56 0.15 49); /* --color-amber-700 */
+
+  --danger: oklch(0.64 0.21 25); /* --color-red-500 */
+  --danger-muted: oklch(0.94 0.03 18); /* --color-red-100 */
+  --danger-weak: oklch(0.71 0.17 22); /* --color-red-400 */
+  --danger-strong: oklch(0.58 0.22 27); /* --color-red-600 */
+  --danger-intense: oklch(0.51 0.19 28); /* --color-red-700 */
+
+  --text-positive: oklch(0.37 0.01 286); /* --color-zinc-700 */
+  --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-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 */
+
+  --border: oklch(0.72 0 0); /* --color-neutral-400 */
+  --border-muted: oklch(0.99 0 0); /* --color-neutral-50 */
+  --border-weak: oklch(0.92 0 0); /* --color-neutral-200 */
+  --border-strong: oklch(0.37 0 0); /* --color-neutral-700 */
+  --border-intense: oklch(0.14 0 0); /* --color-neutral-900 */
+
+  --input: oklch(0.871 0.006 286.286); /* --color-zinc-300 */
+  --ring: oklch(0.81 0.1 294); /* --color-violet-300 */
+
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  --sidebar: oklch(0.97 0 286); /* --color-zinc-100 */
+  --sidebar-foreground: oklch(0.28 0.04 260.03);
+  --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.59 0.2 277.12);
+  --sidebar-primary-foreground: oklch(1 0 0);
+
+  --sidebar-accent: oklch(0.967 0.001 286.375); /* --color-zinc-100 */
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885); /* --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);
+}

package/styles/typography.css

@@ -0,0 +1,6 @@
+:root {
+  font-family:
+    Inter, ui-sans-serif, system-ui, Avenir, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  line-height: 1.5;
+  font-weight: 400;
+}

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

@@ -1,23 +0,0 @@
-'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

@@ -1,53 +0,0 @@
-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

@@ -1,29 +0,0 @@
-import { Flex } from '@/components/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-text-positive-weak text-sm">
-        {label}
-      </div>
-      <div className="text-text-positive text-sm">{value}</div>
-    </Flex>
-  )
-}

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

@@ -1,23 +0,0 @@
-import { DateDisplay } from './date'
-import { Badge } from '../ui/badge'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
-
-type Props = {
-  date: Date | string | number
-}
-export const DateTooltip: React.FC<Props> = ({ date }) => {
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Badge>
-            <DateDisplay date={date} format="medium" className="font-normal text-white" />
-          </Badge>
-        </TooltipTrigger>
-        <TooltipContent>
-          <DateDisplay date={date} format="full" showTime className="text-secondary !font-[Inter] font-medium" />
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  )
-}

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

@@ -1,157 +0,0 @@
-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

@@ -1,13 +0,0 @@
-'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="text-text-positive-muted size-full">
-      <PackageOpenIcon size={52} strokeWidth={1} />
-      <p className="text-sm">Không có dữ liệu nào để hiển thị.</p>
-    </Flex>
-  )
-}

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

@@ -1,23 +0,0 @@
-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 align="start" className="max-w-80 text-wrap break-keep whitespace-pre-line">
-        {name}
-      </TooltipContent>
-    </Tooltip>
-  )
-}