@umituz/web-design-system 6.11.0 → 6.13.0

package/src/infrastructure/themes/midnight.theme.ts

@@ -0,0 +1,79 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const midnightTheme: ThemeConfig = {
+  name: 'midnight',
+  mode: 'dark',
+  colors: {
+    background: '#060a12',
+    foreground: '#e8edf8',
+    card: '#0d1422',
+    cardForeground: '#e8edf8',
+    popover: '#121b2c',
+    popoverForeground: '#e8edf8',
+    primary: '#4e8cff',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(78, 140, 255, 0.13)',
+    secondary: '#121b2c',
+    secondaryForeground: '#e8edf8',
+    muted: '#121b2c',
+    mutedForeground: '#9aa7c0',
+    accent: '#182338',
+    accentForeground: '#e8edf8',
+    border: '#27334a',
+    input: '#27334a',
+    destructive: '#f4585f',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(78, 140, 255, 0.45)',
+    success: '#3ddc97',
+    successForeground: '#ffffff',
+    warning: '#f5b04a',
+    warningForeground: '#060a12',
+    info: '#4e8cff',
+    infoForeground: '#ffffff',
+  },
+  typography: {
+    fontSans: "'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif",
+    fontMono: "'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace",
+  },
+  radii: {
+    xs: '3px',
+    sm: '5px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+  },
+  customVars: {
+    'bg-0': '#060a12',
+    'bg-1': '#090f1a',
+    'bg-2': '#0d1422',
+    'bg-3': '#121b2c',
+    'bg-4': '#182338',
+    'bg-inset': '#070c15',
+    'line-1': '#1b2536',
+    'line-2': '#27334a',
+    'line-3': '#35435f',
+    'ink-1': '#e8edf8',
+    'ink-2': '#9aa7c0',
+    'ink-3': '#5e6c88',
+    'ink-4': '#3d4a63',
+    'blue': '#4e8cff',
+    'blue-soft': 'rgba(78, 140, 255, 0.13)',
+    'blue-line': 'rgba(78, 140, 255, 0.35)',
+    'green': '#3ddc97',
+    'green-soft': 'rgba(61, 220, 151, 0.12)',
+    'green-line': 'rgba(61, 220, 151, 0.35)',
+    'amber': '#f5b04a',
+    'amber-soft': 'rgba(245, 176, 74, 0.13)',
+    'amber-line': 'rgba(245, 176, 74, 0.35)',
+    'red': '#f4585f',
+    'red-soft': 'rgba(244, 88, 95, 0.12)',
+    'red-line': 'rgba(244, 88, 95, 0.4)',
+    'idle': '#7683a0',
+    'idle-soft': 'rgba(118, 131, 160, 0.14)',
+    'shadow-1': '0 1px 2px rgba(2, 6, 14, 0.5)',
+    'shadow-2': '0 8px 28px rgba(2, 6, 14, 0.55)',
+    'shadow-3': '0 18px 60px rgba(1, 4, 10, 0.7)',
+    'sidebar-w': '250px',
+    'topbar-h': '56px',
+  },
+};

package/src/infrastructure/themes/ocean.theme.ts

@@ -0,0 +1,71 @@
+import type { ThemeConfig } from '../../domain/types';
+
+export const oceanTheme: ThemeConfig = {
+  name: 'ocean',
+  mode: 'light',
+  colors: {
+    background: '#f8fafc',
+    foreground: '#0f172a',
+    card: '#ffffff',
+    cardForeground: '#0f172a',
+    popover: '#ffffff',
+    popoverForeground: '#0f172a',
+    primary: '#0284c7',
+    primaryForeground: '#ffffff',
+    primarySoft: 'rgba(2, 132, 199, 0.1)',
+    secondary: '#0ea5e9',
+    secondaryForeground: '#ffffff',
+    muted: '#f0f9ff',
+    mutedForeground: '#64748b',
+    accent: '#e0f2fe',
+    accentForeground: '#0369a1',
+    border: '#e2e8f0',
+    input: '#e2e8f0',
+    destructive: '#ef4444',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(2, 132, 199, 0.45)',
+    success: '#10b981',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#ffffff',
+    info: '#0284c7',
+    infoForeground: '#ffffff',
+  },
+  darkColors: {
+    background: '#08111e',
+    foreground: '#f0f9ff',
+    card: '#0c1a2e',
+    cardForeground: '#f0f9ff',
+    popover: '#0c1a2e',
+    popoverForeground: '#f0f9ff',
+    primary: '#38bdf8',
+    primaryForeground: '#08111e',
+    secondary: '#0284c7',
+    secondaryForeground: '#ffffff',
+    muted: '#13233b',
+    mutedForeground: '#94a3b8',
+    accent: '#183052',
+    accentForeground: '#7dd3fc',
+    border: '#1b3252',
+    input: '#1b3252',
+    destructive: '#f87171',
+    destructiveForeground: '#ffffff',
+    ring: 'rgba(56, 189, 248, 0.5)',
+    success: '#34d399',
+    successForeground: '#ffffff',
+    warning: '#fbbf24',
+    warningForeground: '#ffffff',
+    info: '#38bdf8',
+    infoForeground: '#ffffff',
+  },
+  typography: {
+    fontSans: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    fontMono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  },
+  radii: {
+    sm: '6px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+  },
+};

package/src/infrastructure/themes/registry.ts

@@ -0,0 +1,28 @@
+import type { ThemeConfig } from '../../domain/types';
+import { defaultTheme } from './default.theme';
+import { oceanTheme } from './ocean.theme';
+import { midnightTheme } from './midnight.theme';
+import { editorialTheme } from './editorial.theme';
+
+const themeRegistry = new Map<string, ThemeConfig>([
+  ['default', defaultTheme],
+  ['ocean', oceanTheme],
+  ['midnight', midnightTheme],
+  ['editorial', editorialTheme],
+]);
+
+export function registerTheme(theme: ThemeConfig): void {
+  themeRegistry.set(theme.name, theme);
+}
+
+export function getTheme(name: string): ThemeConfig {
+  return themeRegistry.get(name) ?? defaultTheme;
+}
+
+export function hasTheme(name: string): boolean {
+  return themeRegistry.has(name);
+}
+
+export function listThemes(): string[] {
+  return Array.from(themeRegistry.keys());
+}

package/src/presentation/atoms/Grid.tsx

@@ -0,0 +1,129 @@
+import { forwardRef, type HTMLAttributes, type ElementType } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export type GridColsNumber = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+
+export interface ResponsiveGridCols {
+  base?: GridColsNumber;
+  sm?: GridColsNumber;
+  md?: GridColsNumber;
+  lg?: GridColsNumber;
+  xl?: GridColsNumber;
+}
+
+export type GridCols = GridColsNumber | ResponsiveGridCols;
+export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export interface GridProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  cols?: GridCols;
+  gap?: GridGap;
+  asChild?: boolean;
+  as?: ElementType;
+}
+
+const gapStyles: Record<GridGap, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+  '2xl': 'gap-12',
+};
+
+const baseColStyles: Record<GridColsNumber, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  12: 'grid-cols-12',
+};
+
+const smColStyles: Record<GridColsNumber, string> = {
+  1: 'sm:grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+  5: 'sm:grid-cols-5',
+  6: 'sm:grid-cols-6',
+  12: 'sm:grid-cols-12',
+};
+
+const mdColStyles: Record<GridColsNumber, string> = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+  12: 'md:grid-cols-12',
+};
+
+const lgColStyles: Record<GridColsNumber, string> = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+  12: 'lg:grid-cols-12',
+};
+
+const xlColStyles: Record<GridColsNumber, string> = {
+  1: 'xl:grid-cols-1',
+  2: 'xl:grid-cols-2',
+  3: 'xl:grid-cols-3',
+  4: 'xl:grid-cols-4',
+  5: 'xl:grid-cols-5',
+  6: 'xl:grid-cols-6',
+  12: 'xl:grid-cols-12',
+};
+
+function resolveColClasses(cols: GridCols): string {
+  if (typeof cols === 'number') {
+    return baseColStyles[cols] ?? 'grid-cols-1';
+  }
+
+  const classes: string[] = [];
+  if (cols.base) classes.push(baseColStyles[cols.base]);
+  if (cols.sm) classes.push(smColStyles[cols.sm]);
+  if (cols.md) classes.push(mdColStyles[cols.md]);
+  if (cols.lg) classes.push(lgColStyles[cols.lg]);
+  if (cols.xl) classes.push(xlColStyles[cols.xl]);
+
+  return classes.length > 0 ? classes.join(' ') : 'grid-cols-1';
+}
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
+  (
+    {
+      className,
+      cols = 1,
+      gap = 'md',
+      asChild = false,
+      as: Component = 'div',
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : Component;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          'grid w-full min-w-0',
+          resolveColClasses(cols),
+          gapStyles[gap],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Grid.displayName = 'Grid';

package/src/presentation/atoms/Row.tsx

@@ -0,0 +1,81 @@
+import { forwardRef, type HTMLAttributes, type ElementType } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export type RowGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type RowAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type RowJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+export interface RowProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  gap?: RowGap;
+  align?: RowAlign;
+  justify?: RowJustify;
+  wrap?: boolean;
+  inline?: boolean;
+  asChild?: boolean;
+  as?: ElementType;
+}
+
+const gapStyles: Record<RowGap, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+  '2xl': 'gap-12',
+};
+
+const alignStyles: Record<RowAlign, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+  baseline: 'items-baseline',
+};
+
+const justifyStyles: Record<RowJustify, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+  evenly: 'justify-evenly',
+};
+
+export const Row = forwardRef<HTMLDivElement, RowProps>(
+  (
+    {
+      className,
+      gap = 'sm',
+      align = 'center',
+      justify = 'start',
+      wrap = false,
+      inline = false,
+      asChild = false,
+      as: Component = 'div',
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : Component;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          inline ? 'inline-flex' : 'flex',
+          'flex-row min-w-0',
+          gapStyles[gap],
+          alignStyles[align],
+          justifyStyles[justify],
+          wrap ? 'flex-wrap' : 'flex-nowrap',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Row.displayName = 'Row';

package/src/presentation/atoms/Stack.tsx

@@ -0,0 +1,78 @@
+import { forwardRef, type HTMLAttributes, type ElementType } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+export interface StackProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  gap?: StackGap;
+  align?: StackAlign;
+  justify?: StackJustify;
+  wrap?: boolean;
+  asChild?: boolean;
+  as?: ElementType;
+}
+
+const gapStyles: Record<StackGap, string> = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+  '2xl': 'gap-12',
+};
+
+const alignStyles: Record<StackAlign, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+  baseline: 'items-baseline',
+};
+
+const justifyStyles: Record<StackJustify, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+  around: 'justify-around',
+  evenly: 'justify-evenly',
+};
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      className,
+      gap = 'md',
+      align = 'stretch',
+      justify = 'start',
+      wrap = false,
+      asChild = false,
+      as: Component = 'div',
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : Component;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          'flex flex-col min-w-0',
+          gapStyles[gap],
+          alignStyles[align],
+          justifyStyles[justify],
+          wrap && 'flex-wrap',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Stack.displayName = 'Stack';

package/src/presentation/atoms/index.ts

@@ -85,9 +85,18 @@ export type { KbdProps } from './Kbd';
 export { Money } from './Money';
 export type { MoneyProps } from './Money';
 
-// New Productivity Atoms
 export { CopyButton } from './CopyButton';
 export type { CopyButtonProps } from './CopyButton';
 
 export { StatusDot } from './StatusDot';
 export type { StatusDotProps, StatusType } from './StatusDot';
+
+export { Stack } from './Stack';
+export type { StackProps, StackGap, StackAlign, StackJustify } from './Stack';
+
+export { Row } from './Row';
+export type { RowProps, RowGap, RowAlign, RowJustify } from './Row';
+
+export { Grid } from './Grid';
+export type { GridProps, GridCols, GridColsNumber, ResponsiveGridCols, GridGap } from './Grid';
+

package/src/presentation/providers/DesignSystemProvider.tsx

@@ -0,0 +1,111 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import type { ThemeConfig, ThemeMode } from '../../domain/types';
+import { applyTheme, getTheme } from '../../infrastructure/themes';
+
+export interface DesignSystemContextValue {
+  theme: ThemeConfig;
+  mode: 'light' | 'dark';
+  setTheme: (theme: string | ThemeConfig) => void;
+  setMode: (mode: 'light' | 'dark') => void;
+  toggleMode: () => void;
+}
+
+const DesignSystemContext = createContext<DesignSystemContextValue | null>(null);
+
+export interface DesignSystemProviderProps {
+  children: ReactNode;
+  theme?: string | ThemeConfig;
+  mode?: ThemeMode;
+  storageKey?: string;
+}
+
+export function DesignSystemProvider({
+  children,
+  theme: initialTheme = 'default',
+  mode: initialMode = 'system',
+  storageKey = 'umituz-theme-mode',
+}: DesignSystemProviderProps) {
+  const [overrideTheme, setOverrideTheme] = useState<ThemeConfig | null>(null);
+
+  const currentTheme = useMemo(() => {
+    if (overrideTheme) return overrideTheme;
+    return typeof initialTheme === 'string' ? getTheme(initialTheme) : initialTheme;
+  }, [initialTheme, overrideTheme]);
+
+  const [activeMode, setActiveMode] = useState<'light' | 'dark'>(() => {
+    if (typeof window === 'undefined') {
+      return currentTheme.mode ?? 'light';
+    }
+
+    if (storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === 'light' || stored === 'dark') return stored;
+    }
+
+    if (initialMode === 'dark' || initialMode === 'light') {
+      return initialMode;
+    }
+
+    if (currentTheme.mode) {
+      return currentTheme.mode;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+  });
+
+  useEffect(() => {
+    applyTheme(currentTheme);
+
+    const doc = document.documentElement;
+    if (activeMode === 'dark') {
+      doc.classList.add('dark');
+      doc.setAttribute('data-theme', 'dark');
+    } else {
+      doc.classList.remove('dark');
+      doc.setAttribute('data-theme', 'light');
+    }
+
+    if (storageKey) {
+      localStorage.setItem(storageKey, activeMode);
+    }
+  }, [currentTheme, activeMode, storageKey]);
+
+  const value = useMemo<DesignSystemContextValue>(() => {
+    return {
+      theme: currentTheme,
+      mode: activeMode,
+      setTheme: (t: string | ThemeConfig) => {
+        setOverrideTheme(typeof t === 'string' ? getTheme(t) : t);
+      },
+      setMode: (m: 'light' | 'dark') => {
+        setActiveMode(m);
+      },
+      toggleMode: () => {
+        setActiveMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+      },
+    };
+  }, [currentTheme, activeMode]);
+
+  return (
+    <DesignSystemContext.Provider value={value}>
+      {children}
+    </DesignSystemContext.Provider>
+  );
+}
+
+export function useDesignSystem(): DesignSystemContextValue {
+  const ctx = useContext(DesignSystemContext);
+  if (!ctx) {
+    throw new Error('useDesignSystem must be used within a DesignSystemProvider');
+  }
+  return ctx;
+}

package/src/presentation/providers/index.ts

@@ -0,0 +1,5 @@
+export { DesignSystemProvider, useDesignSystem } from './DesignSystemProvider';
+export type {
+  DesignSystemProviderProps,
+  DesignSystemContextValue,
+} from './DesignSystemProvider';