@umituz/web-design-system 3.1.22 → 4.0.2

package/src/presentation/organisms/DataTable.tsx

@@ -4,6 +4,7 @@
  */
 
 import { useState, useMemo } from 'react';
+import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
 import {
   Table,
@@ -16,8 +17,12 @@ import {
   TableCaption,
 } from './Table';
 import { Button } from '../atoms/Button';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import type { BaseProps, ColorVariant } from '../../domain/types';
+import {
+  computeTotalPages,
+  clampPageNumber,
+  computePageBounds,
+} from '../../infrastructure/utils/calculation.utils';
+import type { BaseProps } from '../../domain/types';
 import type { MediumSizes } from '../../infrastructure/constants';
 
 export interface Column<T> {
@@ -34,7 +39,6 @@ export interface DataTableProps<T> extends BaseProps {
   columns: Column<T>[];
   caption?: string;
   size?: MediumSizes;
-  variant?: ColorVariant;
   sortable?: boolean;
   paginated?: boolean;
   pageSize?: number;
@@ -45,13 +49,12 @@ export interface DataTableProps<T> extends BaseProps {
   onRowClick?: (row: T) => void;
 }
 
-export function DataTable<T extends Record<string, unknown>>({
+export function DataTable<T>({
   className,
   data,
   columns,
   caption,
   size = 'md',
-  variant = 'primary',
   sortable = false,
   paginated = false,
   pageSize = 10,
@@ -100,7 +103,9 @@ export function DataTable<T extends Record<string, unknown>>({
     return sortedData.slice(start, end);
   }, [sortedData, currentPage, paginated, pageSize]);
 
-  const totalPages = Math.ceil(data.length / pageSize);
+  const totalPages = computeTotalPages(data.length, pageSize);
+  const safePage = clampPageNumber(currentPage, totalPages);
+  const pageBounds = computePageBounds(currentPage, pageSize, data.length);
 
   const renderCell = (row: T, column: Column<T>) => {
     if (column.cell) {
@@ -154,7 +159,13 @@ export function DataTable<T extends Record<string, unknown>>({
                 <div className="flex items-center gap-2">
                   {column.header}
                   {column.sortable && sortable && sortColumn === column.id && (
-                    <span className="text-xs">{sortDirection === 'asc' ? '↑' : '↓'}</span>
+                    <span className="text-xs">
+                      {sortDirection === 'asc' ? (
+                        <ArrowUp className="h-3 w-3" aria-hidden="true" />
+                      ) : (
+                        <ArrowDown className="h-3 w-3" aria-hidden="true" />
+                      )}
+                    </span>
                   )}
                 </div>
               </TableHead>
@@ -185,33 +196,33 @@ export function DataTable<T extends Record<string, unknown>>({
               <TableCell colSpan={columns.length}>
                 <div className="flex items-center justify-between">
                   <p className={cn('text-muted-foreground', sizeStyles[size])}>
-                    Showing {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, data.length)} of {data.length} results
+                    Showing {pageBounds.startIndex} to {pageBounds.endIndex} of {data.length} results
                   </p>
                   <div className="flex items-center gap-2">
                     <Button
                       size="sm"
                       variant="outline"
                       onClick={() => setCurrentPage(1)}
-                      disabled={currentPage === 1}
+                      disabled={safePage === 1}
                     >
                       <ChevronsLeft className="h-4 w-4" />
                     </Button>
                     <Button
                       size="sm"
                       variant="outline"
-                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                      disabled={currentPage === 1}
+                      onClick={() => setCurrentPage((p) => clampPageNumber(p - 1, totalPages))}
+                      disabled={safePage === 1}
                     >
                       <ChevronLeft className="h-4 w-4" />
                     </Button>
                     <span className={cn('text-sm font-medium', sizeStyles[size])}>
-                      Page {currentPage} of {totalPages}
+                      Page {safePage} of {totalPages}
                     </span>
                     <Button
                       size="sm"
                       variant="outline"
-                      onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-                      disabled={currentPage === totalPages}
+                      onClick={() => setCurrentPage((p) => clampPageNumber(p + 1, totalPages))}
+                      disabled={safePage === totalPages}
                     >
                       <ChevronRight className="h-4 w-4" />
                     </Button>
@@ -219,7 +230,7 @@ export function DataTable<T extends Record<string, unknown>>({
                       size="sm"
                       variant="outline"
                       onClick={() => setCurrentPage(totalPages)}
-                      disabled={currentPage === totalPages}
+                      disabled={safePage === totalPages}
                     >
                       <ChevronsRight className="h-4 w-4" />
                     </Button>

package/src/presentation/organisms/Dialog.tsx

@@ -40,7 +40,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}

package/src/presentation/organisms/DropdownMenu.tsx

@@ -49,7 +49,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
@@ -67,7 +67,7 @@ const DropdownMenuContent = React.forwardRef<
       collisionPadding={collisionPadding}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}

package/src/presentation/organisms/HoverCard.tsx

@@ -20,7 +20,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}

package/src/presentation/organisms/LoadingState.tsx

@@ -46,11 +46,7 @@ export const LoadingState = forwardRef<HTMLDivElement, LoadingStateProps>(
             {[0, 1, 2].map((i) => (
               <div
                 key={i}
-                className={cn(
-                  'w-2 h-2 bg-primary rounded-full animate-bounce',
-                  'w-1.5 h-1.5 sm:w-2 sm:h-2',
-                  'lg:w-2.5 h-2.5'
-                )}
+                className="h-1.5 w-1.5 animate-bounce rounded-full bg-primary sm:h-2 sm:w-2 lg:h-2.5 lg:w-2.5"
                 style={{ animationDelay: `${i * 0.15}s` }}
               />
             ))}

package/src/presentation/organisms/Popover.tsx

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}

package/src/presentation/organisms/StatCard.tsx

@@ -1,7 +1,6 @@
 /**
  * StatCard Component (Organism)
  * @description Enhanced metric card with progress bar and target tracking (Responsive)
- * Combines functionality of KPICard and StatsCard from main app
  */
 
 import { forwardRef, type ComponentType } from 'react';
@@ -9,6 +8,7 @@ import { cn, getSpacing, getIconSize, getContainerSize, getTextSize, getSpaceY,
 import { Card, CardContent } from './Card';
 import { Progress } from '../atoms';
 import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { formatTrendMagnitude } from '../../infrastructure/utils/calculation.utils';
 import type { BaseProps, SizeVariant } from '../../domain/types';
 
 export interface StatCardProps extends BaseProps {
@@ -44,7 +44,7 @@ export const StatCard = forwardRef<HTMLDivElement, StatCardProps>(
       target,
       size = 'md',
       variant = 'default',
-      trendValueFormatter = (v) => `${v > 0 ? '+' : ''}${Math.abs(v).toFixed(1)}%`,
+      trendValueFormatter = (v) => formatTrendMagnitude(v),
       onClick,
       changeLabel,
       responsiveLayout = true,

package/src/presentation/organisms/Table.tsx

@@ -3,7 +3,7 @@
  * @description Data table component
  */
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes, type TdHTMLAttributes } from 'react';
 import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
@@ -93,7 +93,7 @@ export const TableHead = React.memo(forwardRef<HTMLTableCellElement, HTMLAttribu
 
 TableHead.displayName = 'TableHead';
 
-export const TableCell = React.memo(forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement> & { colSpan?: number }>(
+export const TableCell = React.memo(forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
   ({ className, ...props }, ref) => (
     <td
       ref={ref}

package/src/presentation/organisms/index.ts

@@ -10,12 +10,6 @@ export type { CardProps } from './Card';
 export { Alert, AlertTitle, AlertDescription } from './Alert';
 export type { AlertProps } from './Alert';
 
-export { Modal, ModalHeader, ModalTitle, ModalDescription, ModalContent, ModalFooter } from './Modal';
-export type { ModalProps } from './Modal';
-
-export { Navbar, NavbarBrand, NavbarLinks, NavbarActions } from './Navbar';
-export type { NavbarProps } from './Navbar';
-
 export {
   Table,
   TableHeader,
@@ -68,15 +62,9 @@ export {
   SheetTrigger,
 } from './Sheet';
 
-export { Footer } from './Footer';
-export type { FooterProps } from './Footer';
-
 export { MetricCard } from './MetricCard';
 export type { MetricCardProps } from './MetricCard';
 
-export { QuickActionCard } from './QuickActionCard';
-export type { QuickActionCardProps } from './QuickActionCard';
-
 export { EmptyState } from './EmptyState';
 export type { EmptyStateProps } from './EmptyState';
 
@@ -89,32 +77,6 @@ export type { DataTableProps, Column } from './DataTable';
 export { StatCard } from './StatCard';
 export type { StatCardProps } from './StatCard';
 
-export { FormModal } from './FormModal';
-export type { FormModalProps } from './FormModal';
-
-export { Grid, GridItem } from './Grid';
-export type { GridProps, GridItemProps } from './Grid';
-
-export { ConfirmDialog } from './ConfirmDialog';
-export type { ConfirmDialogProps } from './ConfirmDialog';
-
-export { Calendar } from './Calendar';
-export type { CalendarProps } from './Calendar';
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from './AlertDialog';
-
 export {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -134,25 +96,3 @@ export {
 } from './DropdownMenu';
 
 export { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
-
-// NEW: Media & Content Components
-export { ImageLightbox } from './ImageLightbox';
-export type { ImageLightboxProps, ImageLightboxImage } from './ImageLightbox';
-
-// NEW: Content & Engagement Components
-export { NewsletterSignup } from './NewsletterSignup';
-export type { NewsletterSignupProps } from './NewsletterSignup';
-
-export { Comments } from './Comments';
-export type { CommentsProps, GiscusConfig } from './Comments';
-
-// NEW: Filter Components
-export { FilterBar } from './FilterBar';
-export type { FilterBarProps, Category, SortOption } from './FilterBar';
-
-export { FilterSidebar } from './FilterSidebar';
-export type { FilterSidebarProps } from './FilterSidebar';
-
-// NEW: Navigation Components
-export { MainNavbar } from './MainNavbar';
-export type { MainNavbarProps, NavItem, MainNavbarLanguage } from './MainNavbar';

package/src/styles/compile.css

@@ -0,0 +1,18 @@
+/**
+ * @umituz/web-design-system — Tailwind v4 compile entry
+ *
+ * Input for the build step (`npm run build`) that produces
+ * `dist/styles.css`: Tailwind + animations + the theme layer, with the
+ * component source scanned for utility classes.
+ *
+ * Vanilla hosts import the precompiled output:
+ *   @import "@umituz/web-design-system/styles.css";
+ *
+ * Tailwind v4 hosts compile this package's source themselves instead
+ * (see README) and must NOT also import the precompiled stylesheet.
+ */
+
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "./theme.css";
+@source "../src";

package/src/styles/theme.css

@@ -0,0 +1,131 @@
+/**
+ * @umituz/web-design-system — theme layer (Tailwind v4 `@theme`)
+ *
+ * Single source of truth for colors, radii, fonts and shadows. Component
+ * classes are semantic (`bg-primary`, `text-muted-foreground`, …) and bind
+ * to the `--color-*` variables defined here, so hosts restyle the whole
+ * package by overriding variables — no Tailwind rebuild required.
+ *
+ * The default palette mirrors @umituz/web-dashboard's tokens.css, so
+ * dashboard adoption is visually regression-free.
+ *
+ * Dark mode: add `data-theme="dark"` or `class="dark"` on any ancestor
+ * (typically <html>). The package never switches themes on its own.
+ *
+ * Tailwind v4 hosts that compile the package source themselves
+ * (`@source "../node_modules/@umituz/web-design-system/src"`) import this
+ * file; vanilla hosts import the precompiled `dist/styles.css`.
+ */
+
+@theme {
+  /* Surfaces & text */
+  --color-background: #f8fafc;
+  --color-foreground: #0f172a;
+  --color-card: #ffffff;
+  --color-card-foreground: #0f172a;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0f172a;
+
+  /* Brand */
+  --color-primary: #2563eb;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #8b5cf6;
+  --color-secondary-foreground: #ffffff;
+
+  /* Neutral */
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #64748b;
+  --color-accent: #f1f5f9;
+  --color-accent-foreground: #0f172a;
+  --color-border: #e2e8f0;
+  --color-input: #e2e8f0;
+
+  /* Semantic */
+  --color-destructive: #dc2626;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #16a34a;
+  --color-success-foreground: #ffffff;
+  --color-warning: #d97706;
+  --color-warning-foreground: #ffffff;
+  --color-info: #2563eb;
+  --color-info-foreground: #ffffff;
+
+  /* Focus */
+  --color-ring: rgba(37, 99, 235, 0.45);
+
+  /* Radii (dashboard scale) */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  /* Typography */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* Elevation (dashboard scale) */
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
+  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
+
+  /* Accordion (Radix --radix-accordion-content-height driven) */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+[data-theme="dark"],
+.dark {
+  --color-background: #0b1120;
+  --color-foreground: #f1f5f9;
+  --color-card: #111827;
+  --color-card-foreground: #f1f5f9;
+  --color-popover: #111827;
+  --color-popover-foreground: #f1f5f9;
+
+  --color-primary: #3b82f6;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #a78bfa;
+  --color-secondary-foreground: #ffffff;
+
+  --color-muted: #1e293b;
+  --color-muted-foreground: #94a3b8;
+  --color-accent: #1e293b;
+  --color-accent-foreground: #f1f5f9;
+  --color-border: #1f2a3c;
+  --color-input: #1f2a3c;
+
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #22c55e;
+  --color-success-foreground: #ffffff;
+  --color-warning: #f59e0b;
+  --color-warning-foreground: #ffffff;
+  --color-info: #3b82f6;
+  --color-info-foreground: #ffffff;
+
+  --color-ring: rgba(96, 165, 250, 0.5);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
+}

package/src/domain/tokens/animation.tokens.ts

@@ -1,87 +0,0 @@
-/**
- * Animation Tokens
- * @description Animation durations, easings, and keyframes
- */
-
-export type DurationToken =
-  | 'instant'
-  | 'fast'
-  | 'normal'
-  | 'slow'
-  | 'slower';
-
-export type EasingToken =
-  | 'linear'
-  | 'ease'
-  | 'easeIn'
-  | 'easeOut'
-  | 'easeInOut'
-  | 'bounce'
-  | 'elastic';
-
-export const durations: Record<DurationToken, string> = {
-  instant: '150ms',
-  fast: '200ms',
-  normal: '300ms',
-  slow: '500ms',
-  slower: '700ms',
-};
-
-export const easings: Record<EasingToken, string> = {
-  linear: 'linear',
-  ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
-  easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
-  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-  elastic: 'cubic-bezier(0.87, 0, 0.13, 1)',
-};
-
-export const animations = {
-  fade: 'fade 300ms ease-out',
-  slide: 'slide 300ms ease-out',
-  scale: 'scale 200ms ease-out',
-  spin: 'spin 1s linear infinite',
-  ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-  pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-  bounce: 'bounce 1s infinite',
-};
-
-export const keyframes = {
-  fade: {
-    from: { opacity: '0' },
-    to: { opacity: '1' },
-  },
-  slide: {
-    from: { transform: 'translateY(-10px)', opacity: '0' },
-    to: { transform: 'translateY(0)', opacity: '1' },
-  },
-  scale: {
-    from: { transform: 'scale(0.95)', opacity: '0' },
-    to: { transform: 'scale(1)', opacity: '1' },
-  },
-  spin: {
-    from: { transform: 'rotate(0deg)' },
-    to: { transform: 'rotate(360deg)' },
-  },
-  ping: {
-    '75%, 100%': {
-      transform: 'scale(2)',
-      opacity: '0',
-    },
-  },
-  pulse: {
-    '0%, 100%': { opacity: '1' },
-    '50%': { opacity: '0.5' },
-  },
-  bounce: {
-    '0%, 100%': {
-      transform: 'translateY(-25%)',
-      animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
-    },
-    '50%': {
-      transform: 'translateY(0)',
-      animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
-    },
-  },
-};

package/src/domain/tokens/color.tokens.ts

@@ -1,95 +0,0 @@
-/**
- * Color Tokens
- * @description Design system color tokens
- */
-
-export interface ColorTokens {
-  // Primary
-  primary: string;
-  primaryForeground: string;
-
-  // Secondary
-  secondary: string;
-  secondaryForeground: string;
-
-  // Background
-  background: string;
-  foreground: string;
-
-  // Surfaces
-  card: string;
-  cardForeground: string;
-  popover: string;
-  popoverForeground: string;
-
-  // Interactive
-  muted: string;
-  mutedForeground: string;
-  accent: string;
-  accentForeground: string;
-
-  // Status
-  destructive: string;
-  destructiveForeground: string;
-  success: string;
-  successForeground: string;
-  warning: string;
-  warningForeground: string;
-
-  // Borders
-  border: string;
-  input: string;
-  ring: string;
-}
-
-export const lightColorTokens: ColorTokens = {
-  primary: 'hsl(187 75% 38%)',
-  primaryForeground: 'hsl(0 0% 100%)',
-  secondary: 'hsl(215 20% 92%)',
-  secondaryForeground: 'hsl(220 20% 12%)',
-  background: 'hsl(210 20% 98%)',
-  foreground: 'hsl(220 20% 12%)',
-  card: 'hsl(0 0% 100%)',
-  cardForeground: 'hsl(220 20% 12%)',
-  popover: 'hsl(0 0% 100%)',
-  popoverForeground: 'hsl(220 20% 12%)',
-  muted: 'hsl(220 15% 94%)',
-  mutedForeground: 'hsl(215 15% 45%)',
-  accent: 'hsl(187 75% 38%)',
-  accentForeground: 'hsl(0 0% 100%)',
-  destructive: 'hsl(0 72% 51%)',
-  destructiveForeground: 'hsl(0 0% 100%)',
-  success: 'hsl(152 55% 40%)',
-  successForeground: 'hsl(0 0% 100%)',
-  warning: 'hsl(38 90% 48%)',
-  warningForeground: 'hsl(0 0% 100%)',
-  border: 'hsl(220 15% 88%)',
-  input: 'hsl(220 15% 88%)',
-  ring: 'hsl(187 75% 38%)',
-};
-
-export const darkColorTokens: ColorTokens = {
-  primary: 'hsl(187 85% 53%)',
-  primaryForeground: 'hsl(220 20% 7%)',
-  secondary: 'hsl(215 20% 20%)',
-  secondaryForeground: 'hsl(210 20% 98%)',
-  background: 'hsl(220 20% 7%)',
-  foreground: 'hsl(210 20% 92%)',
-  card: 'hsl(220 18% 11%)',
-  cardForeground: 'hsl(210 20% 92%)',
-  popover: 'hsl(220 18% 13%)',
-  popoverForeground: 'hsl(210 20% 92%)',
-  muted: 'hsl(220 15% 16%)',
-  mutedForeground: 'hsl(215 15% 55%)',
-  accent: 'hsl(187 85% 53%)',
-  accentForeground: 'hsl(220 20% 7%)',
-  destructive: 'hsl(0 72% 55%)',
-  destructiveForeground: 'hsl(0 0% 100%)',
-  success: 'hsl(152 60% 48%)',
-  successForeground: 'hsl(0 0% 100%)',
-  warning: 'hsl(38 92% 55%)',
-  warningForeground: 'hsl(220 20% 7%)',
-  border: 'hsl(220 15% 18%)',
-  input: 'hsl(220 15% 18%)',
-  ring: 'hsl(187 85% 53%)',
-};

package/src/domain/tokens/radius.tokens.ts

@@ -1,27 +0,0 @@
-/**
- * Radius Tokens
- * @description Border radius scale
- */
-
-export type RadiusToken =
-  | 'none'
-  | 'sm'
-  | 'default'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | 'full';
-
-export const radii: Record<RadiusToken, string> = {
-  'none': '0',
-  'sm': '0.125rem',
-  'default': '0.25rem',
-  'md': '0.375rem',
-  'lg': '0.5rem',
-  'xl': '0.75rem',
-  '2xl': '1rem',
-  '3xl': '1.5rem',
-  'full': '9999px',
-};