@thangnqdev/ui 0.1.2 → 0.2.0

package/src/data-display/StatCard.tsx

@@ -1,60 +1,60 @@
-import React, { forwardRef } from 'react';
-import { ArrowUpRight, ArrowDownRight, Minus } from 'lucide-react';
-import { Card } from './Card';
-import { cn } from '../utils/cn';
-
-export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  label: string;
-  value: string | number;
-  change?: string | number;
-  trend?: 'up' | 'down' | 'neutral';
-  trendLabel?: string;
-  icon?: React.ReactNode;
-}
-
-export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(
-  ({ className, label, value, change, trend, trendLabel, icon, ...props }, ref) => {
-    return (
-      <Card ref={ref} className={cn('p-6', className)} {...props}>
-        <div className="flex items-center justify-between">
-          <span className="text-xs font-semibold uppercase tracking-wider text-[var(--ui-text-muted)]">
-            {label}
-          </span>
-          {icon && (
-            <div className="p-2 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-secondary)] text-[var(--ui-text-secondary)]">
-              {icon}
-            </div>
-          )}
-        </div>
-
-        <div className="mt-3 flex items-baseline gap-2">
-          <span className="text-2xl sm:text-3xl font-extrabold tracking-tight text-[var(--ui-text-primary)]">
-            {value}
-          </span>
-
-          {change !== undefined && (
-            <div
-              className={cn(
-                'inline-flex items-center gap-0.5 text-xs font-bold px-1.5 py-0.5 rounded-full',
-                trend === 'up' && 'text-[var(--ui-success)] bg-[var(--ui-success-subtle)]',
-                trend === 'down' && 'text-[var(--ui-error)] bg-[var(--ui-error-subtle)]',
-                trend === 'neutral' && 'text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
-              )}
-            >
-              {trend === 'up' && <ArrowUpRight className="w-3.5 h-3.5" />}
-              {trend === 'down' && <ArrowDownRight className="w-3.5 h-3.5" />}
-              {trend === 'neutral' && <Minus className="w-3.5 h-3.5" />}
-              <span>{change}</span>
-            </div>
-          )}
-        </div>
-
-        {trendLabel && (
-          <p className="mt-2 text-xs text-[var(--ui-text-muted)]">{trendLabel}</p>
-        )}
-      </Card>
-    );
-  }
-);
-
-StatCard.displayName = 'StatCard';
+import React, { forwardRef } from 'react';
+import { ArrowUpRight, ArrowDownRight, Minus } from 'lucide-react';
+import { Card } from './Card';
+import { cn } from '../utils/cn';
+
+export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  value: string | number;
+  change?: string | number;
+  trend?: 'up' | 'down' | 'neutral';
+  trendLabel?: string;
+  icon?: React.ReactNode;
+}
+
+export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(
+  ({ className, label, value, change, trend, trendLabel, icon, ...props }, ref) => {
+    return (
+      <Card ref={ref} className={cn('p-6', className)} {...props}>
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-semibold uppercase tracking-wider text-[var(--ui-text-muted)]">
+            {label}
+          </span>
+          {icon && (
+            <div className="p-2 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-secondary)] text-[var(--ui-text-secondary)]">
+              {icon}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-3 flex items-baseline gap-2">
+          <span className="text-2xl sm:text-3xl font-extrabold tracking-tight text-[var(--ui-text-primary)]">
+            {value}
+          </span>
+
+          {change !== undefined && (
+            <div
+              className={cn(
+                'inline-flex items-center gap-0.5 text-xs font-bold px-1.5 py-0.5 rounded-full',
+                trend === 'up' && 'text-[var(--ui-success)] bg-[var(--ui-success-subtle)]',
+                trend === 'down' && 'text-[var(--ui-error)] bg-[var(--ui-error-subtle)]',
+                trend === 'neutral' && 'text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
+              )}
+            >
+              {trend === 'up' && <ArrowUpRight className="w-3.5 h-3.5" />}
+              {trend === 'down' && <ArrowDownRight className="w-3.5 h-3.5" />}
+              {trend === 'neutral' && <Minus className="w-3.5 h-3.5" />}
+              <span>{change}</span>
+            </div>
+          )}
+        </div>
+
+        {trendLabel && (
+          <p className="mt-2 text-xs text-[var(--ui-text-muted)]">{trendLabel}</p>
+        )}
+      </Card>
+    );
+  }
+);
+
+StatCard.displayName = 'StatCard';

package/src/data-display/Table.tsx

@@ -1,74 +1,74 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export const Table = forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]">
-      <table ref={ref} className={cn('w-full caption-bottom text-sm text-left', className)} {...props} />
-    </div>
-  )
-);
-Table.displayName = 'Table';
-
-export const TableHeader = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <thead ref={ref} className={cn('bg-[var(--ui-bg-secondary)] border-b border-[var(--ui-border-default)]', className)} {...props} />
-  )
-);
-TableHeader.displayName = 'TableHeader';
-
-export const TableBody = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-  )
-);
-TableBody.displayName = 'TableBody';
-
-export const TableFooter = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tfoot ref={ref} className={cn('bg-[var(--ui-bg-secondary)] font-medium border-t border-[var(--ui-border-default)]', className)} {...props} />
-  )
-);
-TableFooter.displayName = 'TableFooter';
-
-export const TableRow = forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn(
-        'border-b border-[var(--ui-border-subtle)] transition-colors hover:bg-[var(--ui-bg-tertiary)]/50 data-[state=selected]:bg-[var(--ui-bg-tertiary)]',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-TableRow.displayName = 'TableRow';
-
-export const TableHead = forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <th
-      ref={ref}
-      className={cn(
-        'h-11 px-4 text-left align-middle font-semibold text-xs text-[var(--ui-text-muted)] uppercase tracking-wider',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-TableHead.displayName = 'TableHead';
-
-export const TableCell = forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td ref={ref} className={cn('p-4 align-middle text-sm text-[var(--ui-text-primary)]', className)} {...props} />
-  )
-);
-TableCell.displayName = 'TableCell';
-
-export const TableCaption = forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-  ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn('mt-4 text-xs text-[var(--ui-text-muted)]', className)} {...props} />
-  )
-);
-TableCaption.displayName = 'TableCaption';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export const Table = forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm text-left', className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = 'Table';
+
+export const TableHeader = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn('bg-[var(--ui-bg-secondary)] border-b border-[var(--ui-border-default)]', className)} {...props} />
+  )
+);
+TableHeader.displayName = 'TableHeader';
+
+export const TableBody = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+  )
+);
+TableBody.displayName = 'TableBody';
+
+export const TableFooter = forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn('bg-[var(--ui-bg-secondary)] font-medium border-t border-[var(--ui-border-default)]', className)} {...props} />
+  )
+);
+TableFooter.displayName = 'TableFooter';
+
+export const TableRow = forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        'border-b border-[var(--ui-border-subtle)] transition-colors hover:bg-[var(--ui-bg-tertiary)]/50 data-[state=selected]:bg-[var(--ui-bg-tertiary)]',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = 'TableRow';
+
+export const TableHead = forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        'h-11 px-4 text-left align-middle font-semibold text-xs text-[var(--ui-text-muted)] uppercase tracking-wider',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableHead.displayName = 'TableHead';
+
+export const TableCell = forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn('p-4 align-middle text-sm text-[var(--ui-text-primary)]', className)} {...props} />
+  )
+);
+TableCell.displayName = 'TableCell';
+
+export const TableCaption = forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn('mt-4 text-xs text-[var(--ui-text-muted)]', className)} {...props} />
+  )
+);
+TableCaption.displayName = 'TableCaption';

package/src/data-display/Timeline.tsx

@@ -1,62 +1,62 @@
-import React, { forwardRef } from 'react';
-import { cn } from '../utils/cn';
-
-export interface TimelineItem {
-  id: string | number;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  timestamp?: string;
-  icon?: React.ReactNode;
-  status?: 'completed' | 'active' | 'pending';
-}
-
-export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
-  items: TimelineItem[];
-}
-
-export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
-  ({ className, items, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('relative pl-6 space-y-6', className)} {...props}>
-        {/* Vertical track line */}
-        <div className="absolute left-[11px] top-2 bottom-2 w-0.5 bg-[var(--ui-border-subtle)]" />
-
-        {items.map((item) => {
-          const isCompleted = item.status === 'completed';
-          const isActive = item.status === 'active';
-
-          return (
-            <div key={item.id} className="relative flex items-start gap-4">
-              {/* Dot */}
-              <div
-                className={cn(
-                  'absolute -left-6 flex items-center justify-center w-6 h-6 rounded-full ring-4 ring-[var(--ui-bg-surface)] text-xs font-bold transition-all',
-                  isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
-                  isActive && 'bg-[var(--ui-bg-surface)] border-2 border-[var(--ui-primary)] text-[var(--ui-primary)]',
-                  (!item.status || item.status === 'pending') && 'bg-[var(--ui-bg-tertiary)] border border-[var(--ui-border-default)] text-[var(--ui-text-muted)]'
-                )}
-              >
-                {item.icon || <span className="w-1.5 h-1.5 rounded-full bg-current" />}
-              </div>
-
-              {/* Content */}
-              <div className="flex-1 space-y-1 pt-0.5">
-                <div className="flex items-center justify-between gap-2">
-                  <h4 className="text-sm font-semibold text-[var(--ui-text-primary)]">{item.title}</h4>
-                  {item.timestamp && (
-                    <span className="text-xs text-[var(--ui-text-muted)] font-mono">{item.timestamp}</span>
-                  )}
-                </div>
-                {item.description && (
-                  <p className="text-xs text-[var(--ui-text-secondary)] leading-relaxed">{item.description}</p>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-);
-
-Timeline.displayName = 'Timeline';
+import React, { forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+export interface TimelineItem {
+  id: string | number;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  timestamp?: string;
+  icon?: React.ReactNode;
+  status?: 'completed' | 'active' | 'pending';
+}
+
+export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: TimelineItem[];
+}
+
+export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
+  ({ className, items, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('relative pl-6 space-y-6', className)} {...props}>
+        {/* Vertical track line */}
+        <div className="absolute left-[11px] top-2 bottom-2 w-0.5 bg-[var(--ui-border-subtle)]" />
+
+        {items.map((item) => {
+          const isCompleted = item.status === 'completed';
+          const isActive = item.status === 'active';
+
+          return (
+            <div key={item.id} className="relative flex items-start gap-4">
+              {/* Dot */}
+              <div
+                className={cn(
+                  'absolute -left-6 flex items-center justify-center w-6 h-6 rounded-full ring-4 ring-[var(--ui-bg-surface)] text-xs font-bold transition-all',
+                  isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
+                  isActive && 'bg-[var(--ui-bg-surface)] border-2 border-[var(--ui-primary)] text-[var(--ui-primary)]',
+                  (!item.status || item.status === 'pending') && 'bg-[var(--ui-bg-tertiary)] border border-[var(--ui-border-default)] text-[var(--ui-text-muted)]'
+                )}
+              >
+                {item.icon || <span className="w-1.5 h-1.5 rounded-full bg-current" />}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 space-y-1 pt-0.5">
+                <div className="flex items-center justify-between gap-2">
+                  <h4 className="text-sm font-semibold text-[var(--ui-text-primary)]">{item.title}</h4>
+                  {item.timestamp && (
+                    <span className="text-xs text-[var(--ui-text-muted)] font-mono">{item.timestamp}</span>
+                  )}
+                </div>
+                {item.description && (
+                  <p className="text-xs text-[var(--ui-text-secondary)] leading-relaxed">{item.description}</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+Timeline.displayName = 'Timeline';