@umituz/web-design-system 5.3.0 → 6.0.0

package/src/__tests__/styles.contract.test.ts

@@ -1,11 +1,3 @@
-/**
- * Styles contract — the precompiled stylesheet is a published artifact.
- *
- * These tests run AFTER `npm run build` (the npm `test` script builds
- * first), so `dist/styles.css` reflects the current source. They fail the
- * release if the compile step breaks, a theme variable goes missing, or a
- * semantic class stops being generated.
- */
 
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
@@ -34,15 +26,11 @@ describe('dist/styles.css contract', () => {
   });
 
   it('compiles component classes used by the source', () => {
-    // Button default variant hover state (compiled via color-mix)
     expect(css).toMatch(/hover\\:bg-primary\\\/90:hover\{background-color:color-mix/);
-    // Button sizes
     expect(css).toMatch(/\.h-10\{/);
     expect(css).toMatch(/\.h-9\{/);
-    // Radius scale
     expect(css).toMatch(/\.rounded-md\{border-radius:var\(--radius-md\)\}/);
     expect(css).toMatch(/\.rounded-lg\{border-radius:var\(--radius-lg\)\}/);
-    // Toaster viewport + kind accents
     expect(css).toMatch(/\.border-l-success\{[^}]*var\(--color-success\)/);
     expect(css).toMatch(/\.text-warning\{[^}]*var\(--color-warning\)/);
     expect(css).toMatch(/\.bg-popover\{[^}]*var\(--color-popover\)/);
@@ -102,7 +90,6 @@ describe('bridge.css contract (published as-is)', () => {
   });
 
   it('never touches radius or mono font (name-collision doctrine)', () => {
-    // Strip doc comments first — the header documents the doctrine by name.
     const declarations = bridge.replace(/\/\*[\s\S]*?\*\//g, '');
     expect(declarations).not.toContain('--radius-');
     expect(declarations).not.toContain('--font-mono');

package/src/domain/tokens/index.ts

@@ -1,10 +1,3 @@
-/**
- * Design Tokens
- * @description Responsive scale maps (functional utilities, not theming).
- * Theming lives in CSS: see `src/styles/theme.css` (@theme) — the
- * single source of truth for colors, radius, fonts and shadows.
- * Subpath: @umituz/web-design-system/tokens
- */
 
 export {
   RESPONSIVE_SPACING,

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

@@ -1,53 +1,23 @@
-/**
- * Responsive Design Tokens (Formula-Based)
- * @description Centralized responsive scale generation using formulas
- *
- * All responsive values are generated dynamically from base values and formulas.
- * This provides ZERO code duplication and single source of truth.
- *
- * 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, type TextSizeKey } from '../../infrastructure/constants/typography.constants';
 import { BREAKPOINT_ORDER } from '../../infrastructure/constants/breakpoint.constants';
 
-/**
- * Type for scale generation formula
- * Input: base value for size variant, current breakpoint
- * Output: spacing scale index (as number, will be converted to string)
- */
 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
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+  '2xl': 6,
 };
 
-/**
- * Base icon size values for each size variant
- */
 const ICON_BASES: Record<SizeVariant, number> = {
   xs: 4,
   sm: 5,
@@ -57,9 +27,6 @@ const ICON_BASES: Record<SizeVariant, number> = {
   '2xl': 12,
 };
 
-/**
- * Base container size values (for icon wrappers)
- */
 const CONTAINER_BASES: Record<SizeVariant, number> = {
   xs: 6,
   sm: 8,
@@ -69,9 +36,6 @@ const CONTAINER_BASES: Record<SizeVariant, number> = {
   '2xl': 16,
 };
 
-/**
- * Base gap/spacing values for layout
- */
 const GAP_BASES: Record<SizeVariant, number> = {
   xs: 1,
   sm: 2,
@@ -81,67 +45,40 @@ const GAP_BASES: Record<SizeVariant, number> = {
   '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
+  if (bpIndex <= 1) return base;
+  if (bpIndex <= 3) return base + 1;
+  if (bpIndex === 4) return base + 2;
+  return base + 3;
 };
 
-/**
- * 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
+  return base + 3;
 };
 
-/**
- * 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
+  if (bpIndex <= 3) return base + 2;
+  if (bpIndex === 4) return base + 2;
+  return base + 2;
 };
 
-/**
- * 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
+  if (bpIndex <= 1) return base;
+  if (bpIndex <= 3) return base + 1;
+  if (bpIndex === 4) return base + 1;
+  return base + 2;
 };
 
-// ============================================================================
-// GENERATORS - Create responsive scales dynamically
-// ============================================================================
 
-/**
- * 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
@@ -156,7 +93,6 @@ function generateResponsiveScale(
       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];
       }
@@ -166,10 +102,6 @@ function generateResponsiveScale(
   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' },
@@ -193,36 +125,15 @@ function generateResponsiveTextSizes() {
   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/breakpoint.types.ts

@@ -1,7 +1,3 @@
-/**
- * Responsive System Type Definitions
- * @description Centralized breakpoint types for responsive design
- */
 
 export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
@@ -22,15 +18,15 @@ export interface ResponsiveProps {
 }
 
 export interface ShowProps {
-  above?: Breakpoint;  // Show on larger screens (min-width)
-  below?: Breakpoint;  // Show on smaller screens (max-width)
-  at?: Breakpoint;     // Show only at this breakpoint
+  above?: Breakpoint;
+  below?: Breakpoint;
+  at?: Breakpoint;
 }
 
 export interface HideProps {
-  above?: Breakpoint;  // Hide on larger screens
-  below?: Breakpoint;  // Hide on smaller screens
-  at?: Breakpoint;     // Hide only at this breakpoint
+  above?: Breakpoint;
+  below?: Breakpoint;
+  at?: Breakpoint;
 }
 
 export interface BreakpointState {
@@ -41,9 +37,9 @@ export interface BreakpointState {
   isLg: boolean;
   isXl: boolean;
   is2Xl: boolean;
-  isMobile: boolean;    // xs, sm
-  isTablet: boolean;    // md, lg
-  isDesktop: boolean;   // xl, 2xl
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
 }
 
 export interface UseBreakpointReturn extends BreakpointState {

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

@@ -1,7 +1,3 @@
-/**
- * Component Types
- * @description Common component prop types
- */
 
 import type { ReactNode } from 'react';
 export type { SizeVariant } from '../../infrastructure/constants/size-variant.constants';

package/src/domain/types/index.ts

@@ -1,8 +1,3 @@
-/**
- * Domain Types
- * @description Central type exports
- * Subpath: @umituz/web-design-system/types
- */
 
 export type {
   SizeVariant,

package/src/global.d.ts

@@ -1,7 +1,3 @@
-/**
- * Global Type Declarations
- * @description Global type definitions for the design system
- */
 
 declare global {
   interface ImportMetaEnv {

package/src/index.ts

@@ -1,34 +1,20 @@
-/**
- * @umituz/web-design-system
- *
- * Web Design System - Atomic Design components (Atoms, Molecules, Organisms)
- * for React applications with Tailwind CSS.
- *
- * Apps MUST NOT use this root barrel.
- * Use subpath imports instead: "@umituz/web-design-system/atoms"
- *
- * @example
- * // CORRECT: Subpath import
- * import { Button, Input } from '@umituz/web-design-system/atoms';
- * import { Card } from '@umituz/web-design-system/organisms';
- *
- * // INCORRECT: Root barrel import
- * import { Button, Card } from '@umituz/web-design-system';
- */
-
-// Re-exports for consumers that prefer the single entry point.
-// Subpath imports are still recommended for better tree-shaking.
+// Core Tokens, Types, Constants, Hooks & Utils
 export * from './domain/tokens';
 export * from './domain/types';
 export * from './infrastructure/utils';
 export * from './infrastructure/constants';
-export * from './presentation/templates';
 export * from './presentation/hooks';
 
+// Templates
+export * from './presentation/templates';
+
+// Organisms
+export * from './presentation/organisms';
+
 // Atoms
 export type { ButtonProps } from './presentation/atoms/Button';
-export { Button } from './presentation/atoms/Button';
-export type { BadgeProps } from './presentation/atoms/Badge';
+export { Button, buttonVariants } from './presentation/atoms/Button';
+export type { BadgeProps, BadgeVariant } from './presentation/atoms/Badge';
 export { Badge } from './presentation/atoms/Badge';
 export type { InputProps } from './presentation/atoms/Input';
 export { Input } from './presentation/atoms/Input';
@@ -54,6 +40,8 @@ export type { TooltipProps } from './presentation/atoms/Tooltip';
 export { Tooltip } from './presentation/atoms/Tooltip';
 export type { ProgressProps } from './presentation/atoms/Progress';
 export { Progress } from './presentation/atoms/Progress';
+export type { ProgressRingProps } from './presentation/atoms/ProgressRing';
+export { ProgressRing } from './presentation/atoms/ProgressRing';
 export { Label } from './presentation/atoms/Label';
 export type { AspectRatioProps } from './presentation/atoms/AspectRatio';
 export { AspectRatio } from './presentation/atoms/AspectRatio';
@@ -61,19 +49,58 @@ export type { SwitchProps } from './presentation/atoms/Switch';
 export { Switch } from './presentation/atoms/Switch';
 export { Separator } from './presentation/atoms/Separator';
 export { Toggle as TogglePrimitive, toggleVariants } from './presentation/atoms/Toggle';
+export { Show } from './presentation/atoms/Show';
+export type { ShowComponentProps } from './presentation/atoms/Show';
+export { Hide } from './presentation/atoms/Hide';
+export type { HideComponentProps } from './presentation/atoms/Hide';
+export { IconButton } from './presentation/atoms/IconButton';
+export type { IconButtonProps } from './presentation/atoms/IconButton';
+export { Sparkline } from './presentation/atoms/Sparkline';
+export type { SparklineProps } from './presentation/atoms/Sparkline';
+export { HeatmapStrip } from './presentation/atoms/HeatmapStrip';
+export type { HeatmapStripProps, HeatmapCell } from './presentation/atoms/HeatmapStrip';
+export { NativeSelect } from './presentation/atoms/NativeSelect';
+export type { NativeSelectProps, NativeSelectOption } from './presentation/atoms/NativeSelect';
+export { BatteryPill } from './presentation/atoms/BatteryPill';
+export type { BatteryPillProps } from './presentation/atoms/BatteryPill';
+export { CodeChip } from './presentation/atoms/CodeChip';
+export type { CodeChipProps } from './presentation/atoms/CodeChip';
+export { Kbd } from './presentation/atoms/Kbd';
+export type { KbdProps } from './presentation/atoms/Kbd';
+export { Money } from './presentation/atoms/Money';
+export type { MoneyProps } from './presentation/atoms/Money';
+export { CopyButton } from './presentation/atoms/CopyButton';
+export type { CopyButtonProps } from './presentation/atoms/CopyButton';
+export { StatusDot } from './presentation/atoms/StatusDot';
+export type { StatusDotProps, StatusType } from './presentation/atoms/StatusDot';
 
 // Molecules
 export type { FormFieldProps } from './presentation/molecules/FormField';
 export { FormField } from './presentation/molecules/FormField';
 export type { SearchBoxProps } from './presentation/molecules/SearchBox';
 export { SearchBox } from './presentation/molecules/SearchBox';
-export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './presentation/molecules/Avatar';
+export type {
+  AvatarProps,
+  AvatarImageProps,
+  AvatarFallbackProps,
+} from './presentation/molecules/Avatar';
 export { Avatar, AvatarImage, AvatarFallback } from './presentation/molecules/Avatar';
 export type { ChipProps } from './presentation/molecules/Chip';
 export { Chip } from './presentation/molecules/Chip';
 export type { ToggleProps } from './presentation/molecules/Toggle';
 export { Toggle } from './presentation/molecules/Toggle';
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from './presentation/molecules/Select';
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './presentation/molecules/Select';
 export type { TextareaProps } from './presentation/molecules/Textarea';
 export { Textarea } from './presentation/molecules/Textarea';
 export type { RadioGroupProps, RadioOption } from './presentation/molecules/RadioGroup';
@@ -83,9 +110,35 @@ export { CheckboxGroup } from './presentation/molecules/CheckboxGroup';
 export type { InputGroupProps } from './presentation/molecules/InputGroup';
 export { InputGroup, GroupedInput } from './presentation/molecules/InputGroup';
 export { ScrollArea, ScrollBar } from './presentation/molecules/ScrollArea';
-export type { ListItemProps } from './presentation/molecules/ListItem';
-export { ListItem } from './presentation/molecules/ListItem';
+export type { ListItemProps as MoleculeListItemProps } from './presentation/molecules/ListItem';
+export { ListItem as MoleculeListItem } from './presentation/molecules/ListItem';
 export type { BookmarkButtonProps, BookmarkTone } from './presentation/molecules/BookmarkButton';
 export { BookmarkButton } from './presentation/molecules/BookmarkButton';
-
-export * from './presentation/organisms';
+export { PasswordInput } from './presentation/molecules/PasswordInput';
+export type { PasswordInputProps } from './presentation/molecules/PasswordInput';
+export { SearchInput } from './presentation/molecules/SearchInput';
+export type { SearchInputProps } from './presentation/molecules/SearchInput';
+export { ConfirmButton } from './presentation/molecules/ConfirmButton';
+export type { ConfirmButtonProps } from './presentation/molecules/ConfirmButton';
+export { Toolbar } from './presentation/molecules/Toolbar';
+export type { ToolbarProps } from './presentation/molecules/Toolbar';
+export { ActiveFilterTags } from './presentation/molecules/ActiveFilterTags';
+export type { ActiveFilterTagsProps } from './presentation/molecules/ActiveFilterTags';
+export { CodeBlock } from './presentation/molecules/CodeBlock';
+export type { CodeBlockProps } from './presentation/molecules/CodeBlock';
+export { OptionCard } from './presentation/molecules/OptionCard';
+export type { OptionCardProps } from './presentation/molecules/OptionCard';
+export { OptionTile } from './presentation/molecules/OptionTile';
+export type { OptionTileProps, OptionTileState } from './presentation/molecules/OptionTile';
+export { Field } from './presentation/molecules/Field';
+export type { FieldProps } from './presentation/molecules/Field';
+export { Segmented } from './presentation/molecules/Segmented';
+export type { SegmentedProps, SegmentedOption } from './presentation/molecules/Segmented';
+export { RatingStars } from './presentation/molecules/RatingStars';
+export type { RatingStarsProps } from './presentation/molecules/RatingStars';
+export { StatPill } from './presentation/molecules/StatPill';
+export type { StatPillProps, StatPillTone } from './presentation/molecules/StatPill';
+export { TagInput } from './presentation/molecules/TagInput';
+export type { TagInputProps } from './presentation/molecules/TagInput';
+export { MarkdownText } from './presentation/molecules/MarkdownText';
+export type { MarkdownTextProps } from './presentation/molecules/MarkdownText';

package/src/infrastructure/constants/breakpoint.constants.ts

@@ -1,14 +1,6 @@
-/**
- * Responsive System Constants
- * @description Centralized breakpoint values matching Tailwind CSS defaults
- */
 
 import type { Breakpoint, BreakpointValue } from '../../domain/types/breakpoint.types';
 
-/**
- * Breakpoint values matching Tailwind CSS default breakpoints
- * https://tailwindcss.com/docs/screens
- */
 export const BREAKPOINTS: Record<Breakpoint, BreakpointValue> = {
   xs: { min: 0 },
   sm: { min: 640 },
@@ -18,11 +10,6 @@ export const BREAKPOINTS: Record<Breakpoint, BreakpointValue> = {
   '2xl': { min: 1536 },
 };
 
-/**
- * Create a media query string for a given breakpoint
- * @param breakpoint - The breakpoint to create a query for
- * @returns CSS media query string (e.g., "(min-width: 640px)")
- */
 export const createMediaQuery = (breakpoint: Breakpoint): string => {
   const bp = BREAKPOINTS[breakpoint];
   if (bp.max) {
@@ -31,42 +18,24 @@ export const createMediaQuery = (breakpoint: Breakpoint): string => {
   return `(min-width: ${bp.min}px)`;
 };
 
-/**
- * Create a max-width media query
- * @param breakpoint - The breakpoint to create a max query for
- * @returns CSS media query string (e.g., "(max-width: 639px)")
- */
 export const createMaxMediaQuery = (breakpoint: Breakpoint): string => {
   const bp = BREAKPOINTS[breakpoint];
   const maxValue = bp.min - 1;
   return `(max-width: ${maxValue}px)`;
 };
 
-/**
- * Breakpoint order for comparison operations
- */
 export const BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
 
-/**
- * Compare two breakpoints
- * @returns -1 if a < b, 0 if a === b, 1 if a > b
- */
 export const compareBreakpoints = (a: Breakpoint, b: Breakpoint): number => {
   const indexA = BREAKPOINT_ORDER.indexOf(a);
   const indexB = BREAKPOINT_ORDER.indexOf(b);
   return indexA - indexB;
 };
 
-/**
- * Check if breakpoint A is greater than breakpoint B
- */
 export const isBreakpointGreaterThan = (a: Breakpoint, b: Breakpoint): boolean => {
   return compareBreakpoints(a, b) > 0;
 };
 
-/**
- * Check if breakpoint A is less than breakpoint B
- */
 export const isBreakpointLessThan = (a: Breakpoint, b: Breakpoint): boolean => {
   return compareBreakpoints(a, b) < 0;
 };

package/src/infrastructure/constants/component.constants.ts

@@ -1,7 +1,3 @@
-/**
- * Component Constants
- * @description Default component configuration values
- */
 
 export const DEFAULT_SIZE = 'md' as const;
 export const DEFAULT_VARIANT = 'primary' as const;

package/src/infrastructure/constants/index.ts

@@ -1,8 +1,3 @@
-/**
- * Infrastructure Constants
- * @description Constant exports
- * Subpath: @umituz/web-design-system/constants
- */
 
 export {
   DEFAULT_SIZE,

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

@@ -1,15 +1,4 @@
-/**
- * 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',
@@ -19,34 +8,18 @@ export const SIZE_VARIANTS = {
   '2xl': '2xl',
 } 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];
 
-/**
- * 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', '2xl'];
 
-/**
- * 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) {
@@ -55,9 +28,6 @@ export function getNextSizeVariant(current: SizeVariant): SizeVariant | null {
   return SIZE_VARIANT_ORDER[index + 1] ?? null;
 }
 
-/**
- * Get the next smaller size variant
- */
 export function getPrevSizeVariant(current: SizeVariant): SizeVariant | null {
   const index = SIZE_VARIANT_ORDER.indexOf(current);
   if (index <= 0) {
@@ -66,9 +36,6 @@ export function getPrevSizeVariant(current: SizeVariant): SizeVariant | null {
   return SIZE_VARIANT_ORDER[index - 1] ?? null;
 }
 
-/**
- * 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);
 }