@umituz/web-design-system 2.8.0 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "2.8.0",
+  "version": "2.9.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

@@ -10,12 +10,14 @@
  */
 
 import type { SizeVariant, Breakpoint } from '../types';
+import { SPACING_SCALE } from '../../infrastructure/constants/spacing.constants';
+import { TEXT_SIZES } from '../../infrastructure/constants/typography.constants';
 
 /**
  * Spacing scale values for padding, margin, and gap
  * Format: Tailwind spacing unit numbers (as strings for easier concatenation)
  */
-export type SpacingScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '12' | '14' | '16' | '20' | '24';
+export type SpacingScale = keyof typeof SPACING_SCALE;
 
 /**
  * Responsive spacing mapping by size variant and breakpoint
@@ -25,44 +27,44 @@ export const RESPONSIVE_SPACING: Record<
   Partial<Record<Breakpoint, SpacingScale>>
 > = {
   xs: {
-    xs: '2',
-    sm: '3',
-    md: '3',
-    lg: '4',
-    xl: '4',
-    '2xl': '5',
+    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: '3',
-    sm: '4',
-    md: '4',
-    lg: '5',
-    xl: '6',
-    '2xl': '8',
+    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: '4',
-    sm: '5',
-    md: '5',
-    lg: '6',
-    xl: '8',
-    '2xl': '10',
+    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: '5',
-    sm: '6',
-    md: '6',
-    lg: '8',
-    xl: '10',
-    '2xl': '12',
+    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: '6',
-    sm: '8',
-    md: '8',
-    lg: '10',
-    xl: '12',
-    '2xl': '16',
+    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;
 
@@ -74,44 +76,44 @@ export const RESPONSIVE_ICON_SIZE: Record<
   Partial<Record<Breakpoint, SpacingScale>>
 > = {
   xs: {
-    xs: '3',
-    sm: '4',
-    md: '5',
-    lg: '5',
-    xl: '6',
-    '2xl': '7',
+    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: '4',
-    sm: '5',
-    md: '6',
-    lg: '6',
-    xl: '8',
-    '2xl': '8',
+    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: '5',
-    sm: '6',
-    md: '7',
-    lg: '8',
-    xl: '9',
-    '2xl': '10',
+    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: '6',
-    sm: '7',
-    md: '8',
-    lg: '9',
-    xl: '10',
-    '2xl': '12',
+    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: '8',
-    sm: '9',
-    md: '10',
-    lg: '12',
-    xl: '14',
-    '2xl': '16',
+    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;
 
@@ -123,44 +125,44 @@ export const RESPONSIVE_CONTAINER_SIZE: Record<
   Partial<Record<Breakpoint, SpacingScale>>
 > = {
   xs: {
-    xs: '6',
-    sm: '8',
-    md: '8',
-    lg: '10',
-    xl: '10',
-    '2xl': '12',
+    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: '8',
-    sm: '10',
-    md: '10',
-    lg: '12',
-    xl: '12',
-    '2xl': '14',
+    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: '10',
-    sm: '12',
-    md: '12',
-    lg: '14',
-    xl: '14',
-    '2xl': '16',
+    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: '12',
-    sm: '14',
-    md: '14',
-    lg: '16',
-    xl: '16',
-    '2xl': '20',
+    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: '14',
-    sm: '16',
-    md: '16',
-    lg: '20',
-    xl: '20',
-    '2xl': '24',
+    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;
 
@@ -172,24 +174,24 @@ export const RESPONSIVE_TEXT_SIZE: Record<
   Partial<Record<'mobile' | 'tablet', string>>
 > = {
   xs: {
-    mobile: 'text-xs',
-    tablet: 'sm:text-xs',
+    mobile: TEXT_SIZES.xs,
+    tablet: `sm:${TEXT_SIZES.xs}`,
   },
   sm: {
-    mobile: 'text-xs',
-    tablet: 'sm:text-sm',
+    mobile: TEXT_SIZES.xs,
+    tablet: `sm:${TEXT_SIZES.sm}`,
   },
   md: {
-    mobile: 'text-sm',
-    tablet: 'sm:text-base',
+    mobile: TEXT_SIZES.sm,
+    tablet: `sm:${TEXT_SIZES.base}`,
   },
   lg: {
-    mobile: 'text-base',
-    tablet: 'sm:text-lg',
+    mobile: TEXT_SIZES.base,
+    tablet: `sm:${TEXT_SIZES.lg}`,
   },
   xl: {
-    mobile: 'text-lg',
-    tablet: 'sm:text-xl',
+    mobile: TEXT_SIZES.lg,
+    tablet: `sm:${TEXT_SIZES.xl}`,
   },
 } as const;
 
@@ -201,43 +203,43 @@ export const RESPONSIVE_GAP: Record<
   Partial<Record<Breakpoint, SpacingScale>>
 > = {
   xs: {
-    xs: '1',
-    sm: '2',
-    md: '2',
-    lg: '3',
-    xl: '3',
-    '2xl': '4',
+    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: '2',
-    sm: '3',
-    md: '3',
-    lg: '4',
-    xl: '4',
-    '2xl': '5',
+    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: '3',
-    sm: '4',
-    md: '4',
-    lg: '5',
-    xl: '5',
-    '2xl': '6',
+    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: '4',
-    sm: '5',
-    md: '5',
-    lg: '6',
-    xl: '6',
-    '2xl': '8',
+    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: '5',
-    sm: '6',
-    md: '6',
-    lg: '8',
-    xl: '8',
-    '2xl': '10',
+    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;

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

@@ -4,8 +4,9 @@
  */
 
 import type { ReactNode } from 'react';
+import type { SizeVariant } from '../../infrastructure/constants/size-variant.constants';
 
-export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+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

@@ -21,3 +21,33 @@ export {
   isBreakpointGreaterThan,
   isBreakpointLessThan,
 } from './breakpoint.constants';
+
+export {
+  SPACING_SCALE,
+  COMMON_SPACING,
+  SIZE_SPACING,
+  type SpacingScaleKey,
+  type SpacingScale,
+  isValidSpacing,
+} from './spacing.constants';
+
+export {
+  SIZE_VARIANTS,
+  SIZE_VARIANT_ORDER,
+  getNextSizeVariant,
+  getPrevSizeVariant,
+  type SizeVariantKey,
+  type SizeVariant,
+  isValidSizeVariant,
+} from './size-variant.constants';
+
+export {
+  TEXT_SIZES,
+  FONT_WEIGHTS,
+  COMMON_TEXT_SIZES,
+  TEXT_SIZE_BY_VARIANT,
+  type TextSizeKey,
+  type TextSize,
+  type FontWeightKey,
+  type FontWeight,
+} from './typography.constants';

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

@@ -0,0 +1,63 @@
+/**
+ * Size Variant Constants
+ * @description Size variants used throughout the design system
+ *
+ * All size variant values are defined here to provide consistency
+ * and prevent hardcoded strings in components.
+ */
+
+/**
+ * Size variants available in the design system
+ * Ordered from smallest to largest
+ */
+export const SIZE_VARIANTS = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+} as const;
+
+/**
+ * Type for size variant keys
+ */
+export type SizeVariantKey = keyof typeof SIZE_VARIANTS;
+
+/**
+ * Type for size variant values
+ */
+export type SizeVariant = typeof SIZE_VARIANTS[SizeVariantKey];
+
+/**
+ * Size variant order (for sorting/comparison)
+ */
+export const SIZE_VARIANT_ORDER: SizeVariant[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/**
+ * Get the next larger size variant
+ */
+export function getNextSizeVariant(current: SizeVariant): SizeVariant | null {
+  const index = SIZE_VARIANT_ORDER.indexOf(current);
+  if (index === -1 || index === SIZE_VARIANT_ORDER.length - 1) {
+    return null;
+  }
+  return SIZE_VARIANT_ORDER[index + 1];
+}
+
+/**
+ * Get the next smaller size variant
+ */
+export function getPrevSizeVariant(current: SizeVariant): SizeVariant | null {
+  const index = SIZE_VARIANT_ORDER.indexOf(current);
+  if (index <= 0) {
+    return null;
+  }
+  return SIZE_VARIANT_ORDER[index - 1];
+}
+
+/**
+ * Validate if a value is a valid size variant
+ */
+export function isValidSizeVariant(value: string): value is SizeVariant {
+  return Object.values(SIZE_VARIANTS).includes(value as SizeVariant);
+}

package/src/infrastructure/constants/spacing.constants.ts

@@ -0,0 +1,92 @@
+/**
+ * Spacing Constants
+ * @description Tailwind CSS spacing scale values
+ * @see https://tailwindcss.com/docs/customizing-spacing
+ *
+ * All spacing values used in the design system are defined here.
+ * This provides a single source of truth for spacing scale.
+ */
+
+/**
+ * Tailwind CSS spacing scale
+ * Each value represents a spacing unit that maps to a specific pixel value
+ * Format: Key is the spacing class name, value is the unit number (as string for Tailwind class construction)
+ */
+export const SPACING_SCALE = {
+  '0': '0',   // 0px
+  '0.5': '0.5', // 2px
+  '1': '1',   // 4px
+  '1.5': '1.5', // 6px
+  '2': '2',   // 8px
+  '2.5': '2.5', // 10px
+  '3': '3',   // 12px
+  '3.5': '3.5', // 14px
+  '4': '4',   // 16px
+  '5': '5',   // 20px
+  '6': '6',   // 24px
+  '7': '7',   // 28px
+  '8': '8',   // 32px
+  '9': '9',   // 36px
+  '10': '10', // 40px
+  '11': '11', // 44px
+  '12': '12', // 48px
+  '14': '14', // 56px
+  '16': '16', // 64px
+  '20': '20', // 80px
+  '24': '24', // 96px
+  '28': '28', // 112px
+  '32': '32', // 128px
+  '36': '36', // 144px
+  '40': '40', // 160px
+  '44': '44', // 176px
+  '48': '48', // 192px
+  '52': '52', // 208px
+  '56': '56', // 224px
+  '60': '60', // 240px
+  '64': '64', // 256px
+  '72': '72', // 288px
+  '80': '80', // 320px
+  '96': '96', // 384px
+} as const;
+
+/**
+ * Type for spacing scale keys
+ */
+export type SpacingScaleKey = keyof typeof SPACING_SCALE;
+
+/**
+ * Type for spacing scale values (string format for Tailwind classes)
+ */
+export type SpacingScale = `${SpacingScaleKey}`;
+
+/**
+ * Common spacing values used throughout the design system
+ * These are frequently used spacing values
+ */
+export const COMMON_SPACING = {
+  xs: SPACING_SCALE['1'],
+  sm: SPACING_SCALE['2'],
+  md: SPACING_SCALE['4'],
+  lg: SPACING_SCALE['6'],
+  xl: SPACING_SCALE['8'],
+  '2xl': SPACING_SCALE['12'],
+} as const;
+
+/**
+ * Spacing scale for component sizing
+ */
+export const SIZE_SPACING = {
+  xs: SPACING_SCALE['3'],
+  sm: SPACING_SCALE['4'],
+  md: SPACING_SCALE['5'],
+  lg: SPACING_SCALE['6'],
+  xl: SPACING_SCALE['8'],
+  '2xl': SPACING_SCALE['10'],
+} as const;
+
+/**
+ * Validate if a value is a valid spacing scale
+ */
+export function isValidSpacing(value: string): value is SpacingScale {
+  return Object.keys(SPACING_SCALE).includes(value);
+}

package/src/infrastructure/constants/typography.constants.ts

@@ -0,0 +1,101 @@
+/**
+ * Typography Constants
+ * @description Typography scale values for the design system
+ *
+ * All font size and text utility values are defined here.
+ * This provides consistency with Tailwind's default typography scale.
+ */
+
+/**
+ * Text size utilities (Tailwind text classes)
+ */
+export const TEXT_SIZES = {
+  xs: 'text-xs',       // 0.75rem (12px)
+  sm: 'text-sm',       // 0.875rem (14px)
+  base: 'text-base',   // 1rem (16px)
+  lg: 'text-lg',       // 1.125rem (18px)
+  xl: 'text-xl',       // 1.25rem (20px)
+  '2xl': 'text-2xl',   // 1.5rem (24px)
+  '3xl': 'text-3xl',   // 1.875rem (30px)
+  '4xl': 'text-4xl',   // 2.25rem (36px)
+  '5xl': 'text-5xl',   // 3rem (48px)
+  '6xl': 'text-6xl',   // 3.75rem (60px)
+  '7xl': 'text-7xl',   // 4.5rem (72px)
+  '8xl': 'text-8xl',   // 6rem (96px)
+  '9xl': 'text-9xl',   // 8rem (128px)
+} as const;
+
+/**
+ * Type for text size keys
+ */
+export type TextSizeKey = keyof typeof TEXT_SIZES;
+
+/**
+ * Type for text size values
+ */
+export type TextSize = typeof TEXT_SIZES[TextSizeKey];
+
+/**
+ * Font weight utilities
+ */
+export const FONT_WEIGHTS = {
+  thin: 'font-thin',       // 100
+  extralight: 'font-extralight', // 200
+  light: 'font-light',     // 300
+  normal: 'font-normal',   // 400
+  medium: 'font-medium',   // 500
+  semibold: 'font-semibold', // 600
+  bold: 'font-bold',       // 700
+  extrabold: 'font-extrabold', // 800
+  black: 'font-black',     // 900
+} as const;
+
+/**
+ * Type for font weight keys
+ */
+export type FontWeightKey = keyof typeof FONT_WEIGHTS;
+
+/**
+ * Type for font weight values
+ */
+export type FontWeight = typeof FONT_WEIGHTS[FontWeightKey];
+
+/**
+ * Common text sizes for different element types
+ */
+export const COMMON_TEXT_SIZES = {
+  caption: TEXT_SIZES.xs,
+  small: TEXT_SIZES.sm,
+  body: TEXT_SIZES.base,
+  subtitle: TEXT_SIZES.lg,
+  title: TEXT_SIZES.xl,
+  heading: TEXT_SIZES['2xl'],
+  display: TEXT_SIZES['4xl'],
+} as const;
+
+/**
+ * Text sizes by size variant
+ * Maps size variants to appropriate text sizes
+ */
+export const TEXT_SIZE_BY_VARIANT = {
+  xs: {
+    mobile: TEXT_SIZES.xs,
+    tablet: TEXT_SIZES.xs,
+  },
+  sm: {
+    mobile: TEXT_SIZES.xs,
+    tablet: TEXT_SIZES.sm,
+  },
+  md: {
+    mobile: TEXT_SIZES.sm,
+    tablet: TEXT_SIZES.base,
+  },
+  lg: {
+    mobile: TEXT_SIZES.base,
+    tablet: TEXT_SIZES.lg,
+  },
+  xl: {
+    mobile: TEXT_SIZES.lg,
+    tablet: TEXT_SIZES.xl,
+  },
+} as const;