@umituz/web-design-system 2.9.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "2.9.0",
+  "version": "3.1.0",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",

package/src/domain/tokens/responsive-map.tokens.ts

@@ -1,245 +1,228 @@
 /**
- * Responsive Design Tokens
- * @description Centralized mapping of size variants to Tailwind spacing scale values
+ * Responsive Design Tokens (Formula-Based)
+ * @description Centralized responsive scale generation using formulas
  *
- * Scale values align with Tailwind's default spacing scale:
- * 3=12px, 4=16px, 5=20px, 6=24px, 8=32px, 10=40px, 12=48px, 16=64px, 20=80px
+ * All responsive values are generated dynamically from base values and formulas.
+ * This provides ZERO code duplication and single source of truth.
  *
- * All responsive calculations are centralized here - components should NOT
- * define their own size styles or do any spacing calculations.
+ * To modify responsive behavior:
+ * 1. Change base values (BASE_* constants)
+ * 2. Modify formula functions (*Formula)
+ * 3. Entire system updates automatically
  */
 
 import type { SizeVariant, Breakpoint } from '../types';
 import { SPACING_SCALE } from '../../infrastructure/constants/spacing.constants';
-import { TEXT_SIZES } from '../../infrastructure/constants/typography.constants';
+import { TEXT_SIZES, type TextSizeKey } from '../../infrastructure/constants/typography.constants';
+import { BREAKPOINT_ORDER } from '../../infrastructure/constants/breakpoint.constants';
 
 /**
- * Spacing scale values for padding, margin, and gap
- * Format: Tailwind spacing unit numbers (as strings for easier concatenation)
+ * Type for scale generation formula
+ * Input: base value for size variant, current breakpoint
+ * Output: spacing scale index (as number, will be converted to string)
  */
-export type SpacingScale = keyof typeof SPACING_SCALE;
+type ScaleFormula = (base: number, breakpoint: Breakpoint) => number;
+
+/**
+ * Type for generator result
+ */
+type ResponsiveScale = Record<SizeVariant, Partial<Record<Breakpoint, string>>>;
+
+// ============================================================================
+// BASE VALUES - Single source of truth for size variants
+// ============================================================================
+
+/**
+ * Base spacing values for each size variant
+ * Defines the starting point for responsive spacing calculation
+ */
+const SPACING_BASES: Record<SizeVariant, number> = {
+  xs: 1, // SPACING_SCALE['1'] = 4px
+  sm: 2, // SPACING_SCALE['2'] = 8px
+  md: 3, // SPACING_SCALE['3'] = 12px
+  lg: 4, // SPACING_SCALE['4'] = 16px
+  xl: 5, // SPACING_SCALE['5'] = 20px
+  '2xl': 6, // SPACING_SCALE['6'] = 24px
+};
+
+/**
+ * Base icon size values for each size variant
+ */
+const ICON_BASES: Record<SizeVariant, number> = {
+  xs: 4,
+  sm: 5,
+  md: 6,
+  lg: 8,
+  xl: 10,
+  '2xl': 12,
+};
+
+/**
+ * Base container size values (for icon wrappers)
+ */
+const CONTAINER_BASES: Record<SizeVariant, number> = {
+  xs: 6,
+  sm: 8,
+  md: 10,
+  lg: 12,
+  xl: 14,
+  '2xl': 16,
+};
+
+/**
+ * Base gap/spacing values for layout
+ */
+const GAP_BASES: Record<SizeVariant, number> = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+  '2xl': 6,
+};
+
+// ============================================================================
+// FORMULAS - Define responsive behavior for each token type
+// ============================================================================
+
+/**
+ * Spacing formula for padding, margin, gap
+ * Progression: xs/sm→base, md/lg→base+1, xl→base+2, 2xl→base+3
+ */
+const spacingFormula: ScaleFormula = (base, bp) => {
+  const bpIndex = BREAKPOINT_ORDER.indexOf(bp);
+  if (bpIndex <= 1) return base; // xs, sm
+  if (bpIndex <= 3) return base + 1; // md, lg
+  if (bpIndex === 4) return base + 2; // xl
+  return base + 3; // 2xl
+};
+
+/**
+ * Icon size formula
+ * Progression: More gradual increase across breakpoints
+ */
+const iconFormula: ScaleFormula = (base, bp) => {
+  if (bp === 'xs') return base - 1;
+  if (bp === 'sm') return base;
+  if (bp === 'md') return base + 1;
+  if (bp === 'lg') return base + 2;
+  if (bp === 'xl') return base + 3;
+  return base + 3; // 2xl
+};
+
+/**
+ * Container size formula (for icon wrappers)
+ * Consistent size increase
+ */
+const containerFormula: ScaleFormula = (base, bp) => {
+  const bpIndex = BREAKPOINT_ORDER.indexOf(bp);
+  if (bpIndex <= 3) return base + 2; // xs, sm, md, lg
+  if (bpIndex === 4) return base + 2; // xl
+  return base + 2; // 2xl
+};
+
+/**
+ * Gap formula for layout spacing
+ */
+const gapFormula: ScaleFormula = (base, bp) => {
+  const bpIndex = BREAKPOINT_ORDER.indexOf(bp);
+  if (bpIndex <= 1) return base; // xs, sm
+  if (bpIndex <= 3) return base + 1; // md, lg
+  if (bpIndex === 4) return base + 1; // xl
+  return base + 2; // 2xl
+};
+
+// ============================================================================
+// GENERATORS - Create responsive scales dynamically
+// ============================================================================
 
 /**
- * Responsive spacing mapping by size variant and breakpoint
- */
-export const RESPONSIVE_SPACING: Record<
-  SizeVariant,
-  Partial<Record<Breakpoint, SpacingScale>>
-> = {
-  xs: {
-    xs: SPACING_SCALE['2'],
-    sm: SPACING_SCALE['3'],
-    md: SPACING_SCALE['3'],
-    lg: SPACING_SCALE['4'],
-    xl: SPACING_SCALE['4'],
-    '2xl': SPACING_SCALE['5'],
-  },
-  sm: {
-    xs: SPACING_SCALE['3'],
-    sm: SPACING_SCALE['4'],
-    md: SPACING_SCALE['4'],
-    lg: SPACING_SCALE['5'],
-    xl: SPACING_SCALE['6'],
-    '2xl': SPACING_SCALE['8'],
-  },
-  md: {
-    xs: SPACING_SCALE['4'],
-    sm: SPACING_SCALE['5'],
-    md: SPACING_SCALE['5'],
-    lg: SPACING_SCALE['6'],
-    xl: SPACING_SCALE['8'],
-    '2xl': SPACING_SCALE['10'],
-  },
-  lg: {
-    xs: SPACING_SCALE['5'],
-    sm: SPACING_SCALE['6'],
-    md: SPACING_SCALE['6'],
-    lg: SPACING_SCALE['8'],
-    xl: SPACING_SCALE['10'],
-    '2xl': SPACING_SCALE['12'],
-  },
-  xl: {
-    xs: SPACING_SCALE['6'],
-    sm: SPACING_SCALE['8'],
-    md: SPACING_SCALE['8'],
-    lg: SPACING_SCALE['10'],
-    xl: SPACING_SCALE['12'],
-    '2xl': SPACING_SCALE['16'],
-  },
-} as const;
-
-/**
- * Icon size scale values (height/width)
- */
-export const RESPONSIVE_ICON_SIZE: Record<
-  SizeVariant,
-  Partial<Record<Breakpoint, SpacingScale>>
-> = {
-  xs: {
-    xs: SPACING_SCALE['3'],
-    sm: SPACING_SCALE['4'],
-    md: SPACING_SCALE['5'],
-    lg: SPACING_SCALE['5'],
-    xl: SPACING_SCALE['6'],
-    '2xl': SPACING_SCALE['7'],
-  },
-  sm: {
-    xs: SPACING_SCALE['4'],
-    sm: SPACING_SCALE['5'],
-    md: SPACING_SCALE['6'],
-    lg: SPACING_SCALE['6'],
-    xl: SPACING_SCALE['8'],
-    '2xl': SPACING_SCALE['8'],
-  },
-  md: {
-    xs: SPACING_SCALE['5'],
-    sm: SPACING_SCALE['6'],
-    md: SPACING_SCALE['7'],
-    lg: SPACING_SCALE['8'],
-    xl: SPACING_SCALE['9'],
-    '2xl': SPACING_SCALE['10'],
-  },
-  lg: {
-    xs: SPACING_SCALE['6'],
-    sm: SPACING_SCALE['7'],
-    md: SPACING_SCALE['8'],
-    lg: SPACING_SCALE['9'],
-    xl: SPACING_SCALE['10'],
-    '2xl': SPACING_SCALE['12'],
-  },
-  xl: {
-    xs: SPACING_SCALE['8'],
-    sm: SPACING_SCALE['9'],
-    md: SPACING_SCALE['10'],
-    lg: SPACING_SCALE['12'],
-    xl: SPACING_SCALE['14'],
-    '2xl': SPACING_SCALE['16'],
-  },
-} as const;
-
-/**
- * Container/icon wrapper size (for rounded containers that hold icons)
- */
-export const RESPONSIVE_CONTAINER_SIZE: Record<
-  SizeVariant,
-  Partial<Record<Breakpoint, SpacingScale>>
-> = {
-  xs: {
-    xs: SPACING_SCALE['6'],
-    sm: SPACING_SCALE['8'],
-    md: SPACING_SCALE['8'],
-    lg: SPACING_SCALE['10'],
-    xl: SPACING_SCALE['10'],
-    '2xl': SPACING_SCALE['12'],
-  },
-  sm: {
-    xs: SPACING_SCALE['8'],
-    sm: SPACING_SCALE['10'],
-    md: SPACING_SCALE['10'],
-    lg: SPACING_SCALE['12'],
-    xl: SPACING_SCALE['12'],
-    '2xl': SPACING_SCALE['14'],
-  },
-  md: {
-    xs: SPACING_SCALE['10'],
-    sm: SPACING_SCALE['12'],
-    md: SPACING_SCALE['12'],
-    lg: SPACING_SCALE['14'],
-    xl: SPACING_SCALE['14'],
-    '2xl': SPACING_SCALE['16'],
-  },
-  lg: {
-    xs: SPACING_SCALE['12'],
-    sm: SPACING_SCALE['14'],
-    md: SPACING_SCALE['14'],
-    lg: SPACING_SCALE['16'],
-    xl: SPACING_SCALE['16'],
-    '2xl': SPACING_SCALE['20'],
-  },
-  xl: {
-    xs: SPACING_SCALE['14'],
-    sm: SPACING_SCALE['16'],
-    md: SPACING_SCALE['16'],
-    lg: SPACING_SCALE['20'],
-    xl: SPACING_SCALE['20'],
-    '2xl': SPACING_SCALE['24'],
-  },
-} as const;
-
-/**
- * Text size scale (Tailwind text utilities)
- */
-export const RESPONSIVE_TEXT_SIZE: Record<
-  SizeVariant,
-  Partial<Record<'mobile' | 'tablet', string>>
-> = {
-  xs: {
-    mobile: TEXT_SIZES.xs,
-    tablet: `sm:${TEXT_SIZES.xs}`,
-  },
-  sm: {
-    mobile: TEXT_SIZES.xs,
-    tablet: `sm:${TEXT_SIZES.sm}`,
-  },
-  md: {
-    mobile: TEXT_SIZES.sm,
-    tablet: `sm:${TEXT_SIZES.base}`,
-  },
-  lg: {
-    mobile: TEXT_SIZES.base,
-    tablet: `sm:${TEXT_SIZES.lg}`,
-  },
-  xl: {
-    mobile: TEXT_SIZES.lg,
-    tablet: `sm:${TEXT_SIZES.xl}`,
-  },
-} as const;
-
-/**
- * Gap/Spacing between elements (space-y-*, space-x-*, gap-*)
- */
-export const RESPONSIVE_GAP: Record<
-  SizeVariant,
-  Partial<Record<Breakpoint, SpacingScale>>
-> = {
-  xs: {
-    xs: SPACING_SCALE['1'],
-    sm: SPACING_SCALE['2'],
-    md: SPACING_SCALE['2'],
-    lg: SPACING_SCALE['3'],
-    xl: SPACING_SCALE['3'],
-    '2xl': SPACING_SCALE['4'],
-  },
-  sm: {
-    xs: SPACING_SCALE['2'],
-    sm: SPACING_SCALE['3'],
-    md: SPACING_SCALE['3'],
-    lg: SPACING_SCALE['4'],
-    xl: SPACING_SCALE['4'],
-    '2xl': SPACING_SCALE['5'],
-  },
-  md: {
-    xs: SPACING_SCALE['3'],
-    sm: SPACING_SCALE['4'],
-    md: SPACING_SCALE['4'],
-    lg: SPACING_SCALE['5'],
-    xl: SPACING_SCALE['5'],
-    '2xl': SPACING_SCALE['6'],
-  },
-  lg: {
-    xs: SPACING_SCALE['4'],
-    sm: SPACING_SCALE['5'],
-    md: SPACING_SCALE['5'],
-    lg: SPACING_SCALE['6'],
-    xl: SPACING_SCALE['6'],
-    '2xl': SPACING_SCALE['8'],
-  },
-  xl: {
-    xs: SPACING_SCALE['5'],
-    sm: SPACING_SCALE['6'],
-    md: SPACING_SCALE['6'],
-    lg: SPACING_SCALE['8'],
-    xl: SPACING_SCALE['8'],
-    '2xl': SPACING_SCALE['10'],
-  },
-} as const;
+ * Generate responsive scale for any token type
+ * @param bases - Base values for each size variant
+ * @param formula - Formula to calculate value at each breakpoint
+ * @returns Complete responsive scale object
+ */
+function generateResponsiveScale(
+  bases: Record<SizeVariant, number>,
+  formula: ScaleFormula
+): ResponsiveScale {
+  const result: Partial<ResponsiveScale> = {};
+
+  for (const size of Object.keys(bases) as SizeVariant[]) {
+    const base = bases[size];
+    result[size] = {};
+
+    for (const bp of BREAKPOINT_ORDER) {
+      const scaleIndex = formula(base, bp);
+      const scaleKey = scaleIndex.toString() as keyof typeof SPACING_SCALE;
+
+      // Validate and get spacing scale value
+      if (scaleKey in SPACING_SCALE) {
+        result[size]![bp] = SPACING_SCALE[scaleKey];
+      }
+    }
+  }
+
+  return result as ResponsiveScale;
+}
+
+/**
+ * Generate responsive text sizes
+ * Text sizes use string literals, not spacing scale
+ */
+function generateResponsiveTextSizes() {
+  const textSizeKeys: Record<SizeVariant, { mobile: TextSizeKey; tablet: TextSizeKey }> = {
+    xs: { mobile: 'xs', tablet: 'xs' },
+    sm: { mobile: 'xs', tablet: 'sm' },
+    md: { mobile: 'sm', tablet: 'base' },
+    lg: { mobile: 'base', tablet: 'lg' },
+    xl: { mobile: 'lg', tablet: 'xl' },
+    '2xl': { mobile: 'xl', tablet: '2xl' },
+  };
+
+  const result: Partial<Record<SizeVariant, Partial<Record<'mobile' | 'tablet', string>>>> = {};
+
+  for (const size of Object.keys(textSizeKeys) as SizeVariant[]) {
+    const keys = textSizeKeys[size];
+    result[size] = {
+      mobile: TEXT_SIZES[keys.mobile],
+      tablet: `sm:${TEXT_SIZES[keys.tablet]}`,
+    };
+  }
+
+  return result as Record<SizeVariant, Partial<Record<'mobile' | 'tablet', string>>>;
+}
+
+// ============================================================================
+// EXPORTS - All responsive tokens (one line each!)
+// ============================================================================
+
+/**
+ * Responsive spacing scale for padding, margin, space-*, gap-*
+ */
+export const RESPONSIVE_SPACING = generateResponsiveScale(SPACING_BASES, spacingFormula);
+
+/**
+ * Responsive icon sizes (height/width)
+ */
+export const RESPONSIVE_ICON_SIZE = generateResponsiveScale(ICON_BASES, iconFormula);
+
+/**
+ * Responsive container sizes for icon wrappers
+ */
+export const RESPONSIVE_CONTAINER_SIZE = generateResponsiveScale(CONTAINER_BASES, containerFormula);
+
+/**
+ * Responsive gap/spacing for layouts
+ */
+export const RESPONSIVE_GAP = generateResponsiveScale(GAP_BASES, gapFormula);
+
+/**
+ * Responsive text sizes (mobile + tablet)
+ */
+export const RESPONSIVE_TEXT_SIZE = generateResponsiveTextSizes();
+
+/**
+ * Type exports
+ */
+export type SpacingScale = keyof typeof SPACING_SCALE;

package/src/domain/types/component.types.ts

@@ -4,9 +4,8 @@
  */
 
 import type { ReactNode } from 'react';
-import type { SizeVariant } from '../../infrastructure/constants/size-variant.constants';
+export type { SizeVariant } from '../../infrastructure/constants/size-variant.constants';
 
-export { type SizeVariant } from '../../infrastructure/constants/size-variant.constants';
 export type ColorVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'destructive';
 export type ColorScheme = 'light' | 'dark';
 

package/src/infrastructure/constants/index.ts

@@ -38,6 +38,11 @@ export {
   getPrevSizeVariant,
   type SizeVariantKey,
   type SizeVariant,
+  type SmallSizes,
+  type MediumSizes,
+  type RegularSizes,
+  type ExtendedSizes,
+  type AllSizes,
   isValidSizeVariant,
 } from './size-variant.constants';
 

package/src/infrastructure/constants/size-variant.constants.ts

@@ -16,6 +16,7 @@ export const SIZE_VARIANTS = {
   md: 'md',
   lg: 'lg',
   xl: 'xl',
+  '2xl': '2xl',
 } as const;
 
 /**
@@ -28,10 +29,20 @@ export type SizeVariantKey = keyof typeof SIZE_VARIANTS;
  */
 export type SizeVariant = typeof SIZE_VARIANTS[SizeVariantKey];
 
+/**
+ * Common size combinations used by components
+ * These prevent repeating Extract<SizeVariant, '...'> in every component
+ */
+export type SmallSizes = Extract<SizeVariant, 'xs' | 'sm'>;
+export type MediumSizes = Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+export type RegularSizes = Extract<SizeVariant, 'sm' | 'md' | 'lg' | 'xl'>;
+export type ExtendedSizes = Extract<SizeVariant, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
+export type AllSizes = SizeVariant;
+
 /**
  * Size variant order (for sorting/comparison)
  */
-export const SIZE_VARIANT_ORDER: SizeVariant[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const SIZE_VARIANT_ORDER: SizeVariant[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
 
 /**
  * Get the next larger size variant

package/src/infrastructure/utils/responsive.utils.ts

@@ -11,7 +11,6 @@ import {
   RESPONSIVE_ICON_SIZE,
   RESPONSIVE_CONTAINER_SIZE,
   RESPONSIVE_TEXT_SIZE,
-  RESPONSIVE_GAP,
 } from '../../domain/tokens/responsive-map.tokens';
 
 /**

package/src/presentation/atoms/Badge.tsx

@@ -5,11 +5,12 @@
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, ColorVariant, SizeVariant } from '../../domain/types';
+import type { BaseProps, ColorVariant } from '../../domain/types';
+import type { MediumSizes } from '../../infrastructure/constants';
 
 export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   variant?: ColorVariant;
-  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+  size?: MediumSizes;
 }
 
 const variantStyles: Record<ColorVariant, string> = {
@@ -20,7 +21,7 @@ const variantStyles: Record<ColorVariant, string> = {
   destructive: 'bg-destructive text-destructive-foreground border-destructive',
 };
 
-const sizeStyles: Record<'sm' | 'md' | 'lg', string> = {
+const sizeStyles: Record<MediumSizes, string> = {
   sm: 'px-2 py-0.5 text-xs',
   md: 'px-2.5 py-1 text-sm',
   lg: 'px-3 py-1.5 text-base',

package/src/presentation/atoms/Hide.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useBreakpoint } from '../hooks/useMediaQuery';
-import type { Breakpoint, HideProps } from '../../domain/types/breakpoint.types';
+import type { HideProps } from '../../domain/types/breakpoint.types';
 import type { BaseProps } from '../../domain/types';
 
 export interface HideComponentProps extends BaseProps, HideProps {

package/src/presentation/atoms/Icon.tsx

@@ -5,18 +5,20 @@
 
 import { forwardRef, type SVGAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, SizeVariant } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
+import type { ExtendedSizes } from '../../infrastructure/constants';
 
 export interface IconProps extends SVGAttributes<SVGSVGElement>, BaseProps {
-  size?: Extract<SizeVariant, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+  size?: ExtendedSizes;
 }
 
-const sizeStyles: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string> = {
+const sizeStyles: Record<ExtendedSizes, string> = {
   xs: 'h-3 w-3',
   sm: 'h-4 w-4',
   md: 'h-5 w-5',
   lg: 'h-6 w-6',
   xl: 'h-8 w-8',
+  '2xl': 'h-10 w-10',
 };
 
 export const Icon = forwardRef<SVGSVGElement, IconProps>(

package/src/presentation/atoms/Input.tsx

@@ -5,14 +5,15 @@
 
 import { forwardRef, type InputHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, SizeVariant } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
+import type { MediumSizes } from '../../infrastructure/constants';
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
   error?: boolean;
-  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+  size?: MediumSizes;
 }
 
-const sizeStyles: Record<'sm' | 'md' | 'lg', string> = {
+const sizeStyles: Record<MediumSizes, string> = {
   sm: 'h-8 px-3 text-sm',
   md: 'h-9 px-3 text-sm',
   lg: 'h-10 px-4 text-base',

package/src/presentation/atoms/Show.tsx

@@ -4,7 +4,7 @@
  */
 
 import { useBreakpoint } from '../hooks/useMediaQuery';
-import type { Breakpoint, ShowProps } from '../../domain/types/breakpoint.types';
+import type { ShowProps } from '../../domain/types/breakpoint.types';
 import type { BaseProps } from '../../domain/types';
 
 export interface ShowComponentProps extends BaseProps, ShowProps {

package/src/presentation/atoms/Spinner.tsx

@@ -5,13 +5,14 @@
 
 import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, SizeVariant } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
+import type { RegularSizes } from '../../infrastructure/constants';
 
 export interface SpinnerProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg' | 'xl'>;
+  size?: RegularSizes;
 }
 
-const sizeStyles: Record<'sm' | 'md' | 'lg' | 'xl', string> = {
+const sizeStyles: Record<RegularSizes, string> = {
   sm: 'h-4 w-4 border-2',
   md: 'h-6 w-6 border-2',
   lg: 'h-8 w-8 border-3',

package/src/presentation/molecules/Avatar.tsx

@@ -5,13 +5,14 @@
 
 import { forwardRef, type HTMLAttributes, type ComponentPropsWithoutRef } from 'react';
 import { cn } from '../../infrastructure/utils';
-import type { BaseProps, SizeVariant } from '../../domain/types';
+import type { BaseProps } from '../../domain/types';
+import type { ExtendedSizes } from '../../infrastructure/constants';
 
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
-  size?: Extract<SizeVariant, 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>;
+  size?: ExtendedSizes;
 }
 
-const sizeStyles: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', string> = {
+const sizeStyles: Record<ExtendedSizes, string> = {
   xs: 'h-6 w-6 text-xs',
   sm: 'h-8 w-8 text-sm',
   md: 'h-10 w-10 text-base',

package/src/presentation/organisms/DataTable.tsx

@@ -18,6 +18,7 @@ import {
 import { Button } from '../atoms/Button';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import type { BaseProps, SizeVariant, ColorVariant } from '../../domain/types';
+import type { MediumSizes } from '../../infrastructure/constants';
 
 export interface Column<T> {
   id: string;
@@ -32,7 +33,7 @@ export interface DataTableProps<T> extends BaseProps {
   data: T[];
   columns: Column<T>[];
   caption?: string;
-  size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
+  size?: MediumSizes;
   variant?: ColorVariant;
   sortable?: boolean;
   paginated?: boolean;
@@ -110,13 +111,13 @@ export function DataTable<T extends Record<string, unknown>>({
     return value as React.ReactNode;
   };
 
-  const sizeStyles = {
+  const sizeStyles: Record<MediumSizes, string> = {
     sm: 'text-xs',
     md: 'text-sm',
     lg: 'text-base',
   };
 
-  const paddingStyles = {
+  const paddingStyles: Record<MediumSizes, string> = {
     sm: 'px-2 py-2',
     md: 'px-4 py-3',
     lg: 'px-6 py-4',

package/src/presentation/organisms/Grid.tsx

@@ -5,7 +5,6 @@
 
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
-import type { Breakpoint } from '../../domain/types/breakpoint.types';
 
 export interface GridProps extends BaseProps {
   children: React.ReactNode;