@umituz/web-design-system 3.1.21 → 4.0.0

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',
-};

package/src/domain/tokens/shadow.tokens.ts

@@ -1,25 +0,0 @@
-/**
- * Shadow Tokens
- * @description Box shadow scale
- */
-
-export type ShadowToken =
-  | 'sm'
-  | 'default'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | 'inner'
-  | 'none';
-
-export const shadows: Record<ShadowToken, string> = {
-  'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-  'default': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-  'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-  'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-  'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-  'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-  'none': '0 0 #0000',
-};

package/src/domain/tokens/spacing.tokens.ts

@@ -1,65 +0,0 @@
-/**
- * Spacing Tokens
- * @description Consistent spacing scale
- */
-
-export type SpacingToken =
-  | '0'
-  | 'px'
-  | '0.5'
-  | '1'
-  | '1.5'
-  | '2'
-  | '2.5'
-  | '3'
-  | '3.5'
-  | '4'
-  | '5'
-  | '6'
-  | '7'
-  | '8'
-  | '9'
-  | '10'
-  | '12'
-  | '16'
-  | '20'
-  | '24'
-  | '32'
-  | '40'
-  | '48'
-  | '56'
-  | '64'
-  | '72'
-  | '80'
-  | '96';
-
-export const spacing: Record<SpacingToken, string> = {
-  '0': '0',
-  'px': '1px',
-  '0.5': '0.125rem',
-  '1': '0.25rem',
-  '1.5': '0.375rem',
-  '2': '0.5rem',
-  '2.5': '0.625rem',
-  '3': '0.75rem',
-  '3.5': '0.875rem',
-  '4': '1rem',
-  '5': '1.25rem',
-  '6': '1.5rem',
-  '7': '1.75rem',
-  '8': '2rem',
-  '9': '2.25rem',
-  '10': '2.5rem',
-  '12': '3rem',
-  '16': '4rem',
-  '20': '5rem',
-  '24': '6rem',
-  '32': '8rem',
-  '40': '10rem',
-  '48': '12rem',
-  '56': '14rem',
-  '64': '16rem',
-  '72': '18rem',
-  '80': '20rem',
-  '96': '24rem',
-};

package/src/domain/tokens/typography.tokens.ts

@@ -1,74 +0,0 @@
-/**
- * Typography Tokens
- * @description Font sizes, weights, and line heights
- */
-
-export type FontSizeToken =
-  | 'xs'
-  | 'sm'
-  | 'base'
-  | 'lg'
-  | 'xl'
-  | '2xl'
-  | '3xl'
-  | '4xl'
-  | '5xl'
-  | '6xl'
-  | '7xl'
-  | '8xl'
-  | '9xl';
-
-export type FontWeightToken =
-  | 'thin'
-  | 'extralight'
-  | 'light'
-  | 'normal'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black';
-
-export const fontSizes: Record<FontSizeToken, string> = {
-  'xs': '0.75rem',
-  'sm': '0.875rem',
-  'base': '1rem',
-  'lg': '1.125rem',
-  'xl': '1.25rem',
-  '2xl': '1.5rem',
-  '3xl': '1.875rem',
-  '4xl': '2.25rem',
-  '5xl': '3rem',
-  '6xl': '3.75rem',
-  '7xl': '4.5rem',
-  '8xl': '6rem',
-  '9xl': '8rem',
-};
-
-export const fontWeights: Record<FontWeightToken, string> = {
-  'thin': '100',
-  'extralight': '200',
-  'light': '300',
-  'normal': '400',
-  'medium': '500',
-  'semibold': '600',
-  'bold': '700',
-  'extrabold': '800',
-  'black': '900',
-};
-
-export const lineHeights: Record<FontSizeToken, string> = {
-  'xs': '1rem',
-  'sm': '1.25rem',
-  'base': '1.5rem',
-  'lg': '1.75rem',
-  'xl': '1.75rem',
-  '2xl': '2rem',
-  '3xl': '2.25rem',
-  '4xl': '2.5rem',
-  '5xl': '1',
-  '6xl': '1',
-  '7xl': '1',
-  '8xl': '1',
-  '9xl': '1',
-};