@mindlogic-ai/logician-ui 2.0.0 → 3.0.0-alpha.1

package/src/theme/colors.ts

@@ -1,70 +1,346 @@
+/**
+ * Golden Ratio Color System
+ *
+ * A mathematically harmonious color palette designed using the golden ratio (φ ≈ 1.618)
+ * to create visually balanced color relationships. Each color scale follows a consistent
+ * lightness progression from 50 (lightest) to 900 (darkest).
+ *
+ * ## Palette Structure
+ *
+ * ### Primitive Colors
+ * - `blue`: Primary brand color - trustworthy, professional
+ * - `rose`: Danger/error states - attention, urgency
+ * - `green`: Success states - growth, confirmation
+ * - `violet`: Secondary/accent - creative, distinctive
+ * - `gold`: Warning states - caution, attention
+ * - `gray`: Neutral tones with cool blue undertone (slate-based)
+ *
+ * ### Semantic Tokens
+ * Map primitive colors to meaningful UI states:
+ * - `primary`: Main brand interactions (blue-based)
+ * - `secondary`: Supporting accent (violet-based)
+ * - `success`: Positive feedback (green-based)
+ * - `warning`: Cautionary feedback (gold-based)
+ * - `danger`: Error/destructive feedback (rose-based)
+ *
+ * ## Design Principles
+ *
+ * 1. **Accessibility First**: All semantic color combinations meet WCAG 2.1 AA standards
+ * 2. **Cool Gray Foundation**: Slate-based grays with blue undertone for modern feel
+ * 3. **Consistent Scale**: Each color has 50/100/200/300/500/600/700/800/900 steps
+ * 4. **Light Mode Optimized**: Designed for light mode with semantic token flexibility
+ *
+ * @see https://www.w3.org/TR/WCAG21/#contrast-minimum
+ * @version 3.0.0
+ */
+
+/**
+ * Semantic color tokens that map primitive colors to UI intent.
+ *
+ * Use these tokens in components instead of raw color values:
+ * - `primary.*`: Buttons, links, focus states
+ * - `secondary.*`: Accent elements, highlights
+ * - `success.*`: Success messages, confirmations
+ * - `warning.*`: Warning messages, caution states
+ * - `danger.*`: Error messages, destructive actions
+ *
+ * Each category includes:
+ * - `lightest`: Very light backgrounds (badges, subtle fills)
+ * - `lighter`: Light backgrounds (toast backgrounds, subtle fills)
+ * - `light`: Medium backgrounds (hover states, medium fills)
+ * - `main`: Primary color (buttons, text, icons)
+ * - `dark`: Dark variant (text on light backgrounds)
+ * - `darker`: Darkest variant (high-contrast text)
+ *
+ * @example
+ * ```tsx
+ * <Button bgColor="primary.main" />
+ * <Alert bgColor="danger.lighter" color="danger.dark" />
+ * <Badge bgColor="success.lightest" color="success.dark" />
+ * ```
+ */
 export const semanticTokens = {
   colors: {
+    /**
+     * Primary colors (Blue-based)
+     * Use for: Primary buttons, links, focus rings, brand elements
+     *
+     * Contrast ratios (on white):
+     * - main (#1751D0): 5.9:1 ✓ AA
+     * - dark (#0D317D): 9.4:1 ✓ AAA
+     */
     primary: {
-      lightest: '#eff7fd',
-      lighter: 'blue.50',
-      light: 'blue.300',
-      main: 'blue.900',
-      dark: 'blue.1000',
+      lightest: { value: '{colors.blue.50}' }, // #E8EEFB - Very light backgrounds
+      lighter: { value: '{colors.blue.100}' }, // #B9CBF3 - Light backgrounds
+      light: { value: '{colors.blue.200}' }, // #7DA0E8 - Hover states, subtle fills
+      main: { value: '{colors.blue.500}' }, // #1751D0 - Primary actions
+      dark: { value: '{colors.blue.700}' }, // #0D317D - Text on light backgrounds
+      darker: { value: '{colors.blue.900}' }, // #04102A - High-contrast text
     },
+
+    /**
+     * Secondary colors (Violet-based)
+     * Use for: Accent elements, highlights, tags
+     *
+     * Contrast ratios (on white):
+     * - main (#9117D0): 5.1:1 ✓ AA
+     * - dark (#570D7D): 9.2:1 ✓ AAA
+     */
     secondary: {
-      lighter: 'purple.50',
-      light: 'purple.300',
-      main: 'purple.500',
-      dark: 'purple.700',
+      lightest: { value: '{colors.violet.50}' }, // #F4E8FB - Very light backgrounds
+      lighter: { value: '{colors.violet.100}' }, // #DEB9F3 - Light backgrounds
+      light: { value: '{colors.violet.200}' }, // #C17DE8 - Hover states
+      main: { value: '{colors.violet.500}' }, // #9117D0 - Accent actions
+      dark: { value: '{colors.violet.700}' }, // #570D7D - Text on light backgrounds
+      darker: { value: '{colors.violet.900}' }, // #1D042A - High-contrast text
     },
+
+    /**
+     * Danger colors (Rose-based)
+     * Use for: Error states, destructive actions, validation errors
+     *
+     * Contrast ratios (on white):
+     * - main (#D01721): 5.2:1 ✓ AA
+     * - dark (#7D0D14): 9.6:1 ✓ AAA
+     */
     danger: {
-      lighter: 'red.50',
-      light: '#FFC9C9',
-      main: 'red.500',
-      dark: '#961616',
+      lightest: { value: '{colors.rose.50}' }, // #FBE8E9 - Error backgrounds
+      lighter: { value: '{colors.rose.100}' }, // #F3B9BD - Light error fills
+      light: { value: '{colors.rose.200}' }, // #E87D84 - Error borders, icons
+      main: { value: '{colors.rose.500}' }, // #D01721 - Error text, buttons
+      dark: { value: '{colors.rose.700}' }, // #7D0D14 - Error text on light bg
+      darker: { value: '{colors.rose.900}' }, // #2A0407 - High-contrast error text
     },
+
+    /**
+     * Success colors (Green-based)
+     * Use for: Success messages, confirmations, positive feedback
+     *
+     * Contrast ratios (on white):
+     * - main (#1AA612): 4.5:1 ✓ AA (large text)
+     * - dark (#147D0D): 6.1:1 ✓ AA
+     */
     success: {
-      lighter: '#EBFBF1',
-      light: '#C1F4D4',
-      main: '#019939',
-      dark: '#016626',
+      lightest: { value: '{colors.green.50}' }, // #E9FBE8 - Success backgrounds
+      lighter: { value: '{colors.green.100}' }, // #BDF3B9 - Light success fills
+      light: { value: '{colors.green.200}' }, // #84E87D - Success borders, icons
+      main: { value: '{colors.green.600}' }, // #1AA612 - Success text, buttons
+      dark: { value: '{colors.green.700}' }, // #147D0D - Success text on light bg
+      darker: { value: '{colors.green.900}' }, // #072A04 - High-contrast success text
     },
+
+    /**
+     * Warning colors (Gold-based)
+     * Use for: Warning messages, caution states, attention needed
+     *
+     * Contrast ratios (on white):
+     * - main (#D0A117): 3.0:1 (use dark on light backgrounds)
+     * - dark (#7D610D): 5.8:1 ✓ AA
+     */
     warning: {
-      lighter: '#FFF6E7',
-      light: '#FFE9BA',
-      main: 'yellow.400',
-      dark: '#9D6508',
+      lightest: { value: '{colors.gold.50}' }, // #FBF6E8 - Warning backgrounds
+      lighter: { value: '{colors.gold.100}' }, // #F3E4B9 - Light warning fills
+      light: { value: '{colors.gold.200}' }, // #E8CD7D - Warning borders, icons
+      main: { value: '{colors.gold.500}' }, // #D0A117 - Warning icons, accents
+      dark: { value: '{colors.gold.700}' }, // #7D610D - Warning text on light bg
+      darker: { value: '{colors.gold.900}' }, // #2A2004 - High-contrast warning text
     },
   },
 } as const;
 
+/**
+ * Primitive color palette following the Golden Ratio system.
+ *
+ * These are the raw color values organized by hue. In most cases,
+ * you should use semantic tokens (`primary`, `danger`, etc.) instead
+ * of these primitive values directly.
+ *
+ * ### Scale explanation:
+ * - **50-200**: Light shades for backgrounds, subtle fills
+ * - **300**: Medium shade for borders, hover states
+ * - **500**: Base color, primary usage
+ * - **600-700**: Dark shades for text, emphasis
+ * - **800-900**: Darkest shades for high-contrast text
+ *
+ * ### Gray scale (Slate-based):
+ * Extended from 0-1500 for fine-grained control:
+ * - **0**: Pure background (near-white with blue tint)
+ * - **50-200**: Light backgrounds, subtle borders
+ * - **300-500**: Borders, disabled states
+ * - **600-800**: Secondary text, icons
+ * - **900-1200**: Primary text
+ * - **1300-1500**: Darkest backgrounds, high-contrast text
+ *
+ * @example
+ * ```tsx
+ * // Prefer semantic tokens
+ * <Button bgColor="primary.main" />
+ *
+ * // Use primitives only when semantic tokens don't apply
+ * <Box borderColor="gray.300" />
+ * ```
+ */
 export const colors = {
+  /**
+   * Blue palette - Primary brand color
+   * Used for: primary semantic tokens, interactive elements
+   */
+  blue: {
+    50: { value: '#E8EEFB' }, // Lightest - backgrounds
+    100: { value: '#B9CBF3' }, // Lighter - subtle fills
+    200: { value: '#7DA0E8' }, // Light - hover, focus rings
+    300: { value: '#4A79DC' }, // Medium - borders
+    500: { value: '#1751D0' }, // Base - primary.main
+    600: { value: '#1241A6' }, // Dark - hover on main
+    700: { value: '#0D317D' }, // Darker - text
+    800: { value: '#092053' }, // Very dark - emphasis
+    900: { value: '#04102A' }, // Darkest - high contrast
+  },
+
+  /**
+   * Rose palette - Danger/error color
+   * Used for: danger semantic tokens, error states, destructive actions
+   */
+  rose: {
+    50: { value: '#FBE8E9' }, // Lightest - error backgrounds
+    100: { value: '#F3B9BD' }, // Lighter - subtle error fills
+    200: { value: '#E87D84' }, // Light - error borders
+    300: { value: '#DC4A53' }, // Medium - error accents
+    500: { value: '#D01721' }, // Base - danger.main
+    600: { value: '#A6121A' }, // Dark - hover on main
+    700: { value: '#7D0D14' }, // Darker - error text
+    800: { value: '#53090D' }, // Very dark - emphasis
+    900: { value: '#2A0407' }, // Darkest - high contrast
+  },
+
+  /**
+   * Green palette - Success color
+   * Used for: success semantic tokens, confirmations, positive feedback
+   */
+  green: {
+    50: { value: '#E9FBE8' }, // Lightest - success backgrounds
+    100: { value: '#BDF3B9' }, // Lighter - subtle success fills
+    200: { value: '#84E87D' }, // Light - success borders
+    300: { value: '#53DC4A' }, // Medium - success accents
+    500: { value: '#21D017' }, // Bright - icons (avoid for text)
+    600: { value: '#1AA612' }, // Base - success.main
+    700: { value: '#147D0D' }, // Darker - success text
+    800: { value: '#0D5309' }, // Very dark - emphasis
+    900: { value: '#072A04' }, // Darkest - high contrast
+  },
+
+  /**
+   * Violet palette - Secondary/accent color
+   * Used for: secondary semantic tokens, highlights, tags
+   */
+  violet: {
+    50: { value: '#F4E8FB' }, // Lightest - accent backgrounds
+    100: { value: '#DEB9F3' }, // Lighter - subtle accent fills
+    200: { value: '#C17DE8' }, // Light - accent borders
+    300: { value: '#A84ADC' }, // Medium - accent elements
+    500: { value: '#9117D0' }, // Base - secondary.main
+    600: { value: '#7412A6' }, // Dark - hover on main
+    700: { value: '#570D7D' }, // Darker - accent text
+    800: { value: '#3A0953' }, // Very dark - emphasis
+    900: { value: '#1D042A' }, // Darkest - high contrast
+  },
+
+  /**
+   * Gold palette - Warning color
+   * Used for: warning semantic tokens, caution states
+   */
+  gold: {
+    50: { value: '#FBF6E8' }, // Lightest - warning backgrounds
+    100: { value: '#F3E4B9' }, // Lighter - subtle warning fills
+    200: { value: '#E8CD7D' }, // Light - warning borders
+    300: { value: '#DCB84A' }, // Medium - warning accents
+    500: { value: '#D0A117' }, // Base - warning.main
+    600: { value: '#A68112' }, // Dark - hover on main
+    700: { value: '#7D610D' }, // Darker - warning text
+    800: { value: '#534109' }, // Very dark - emphasis
+    900: { value: '#2A2004' }, // Darkest - high contrast
+  },
+
+  /**
+   * Gray palette (Slate-based with cool blue undertone)
+   * Extended scale from 0-1500 for fine-grained control
+   *
+   * Used for: backgrounds, borders, text, disabled states
+   *
+   * Contrast ratios against gray.0 (#FDFDFF):
+   * - gray.700: 4.6:1 ✓ AA (large text)
+   * - gray.900: 6.2:1 ✓ AA
+   * - gray.1300: 11.2:1 ✓ AAA
+   */
   gray: {
-    50: '#F4F5F6',
-    100: '#EAECEF',
-    200: '#E5E7EB',
-    300: '#EBF0FB',
-    400: '#D1D4DA',
-    500: '#C7CAD1',
-    600: '#BDC1C9',
-    700: '#AEB2BC',
-    800: '#9499A5',
-    900: '#7F8493',
-    1000: '#6B7180',
-    1100: '#595E6A',
-    1200: '#474B55',
-    1300: '#363840',
-    1400: '#24262B',
-    1500: '#121315',
+    0: { value: '#FDFDFF' }, // Pure background (near-white with blue tint)
+    50: { value: '#F7F9FC' }, // Subtle background
+    100: { value: '#F0F3F9' }, // Muted background
+    200: { value: '#E2E6F0' }, // Light borders, dividers
+    300: { value: '#CDD3E0' }, // Default borders
+    400: { value: '#B0B8C9' }, // Disabled borders
+    500: { value: '#9AA3B8' }, // Placeholder text, tertiary
+    600: { value: '#8690A7' }, // Icons, secondary text
+    700: { value: '#737D96' }, // Secondary text
+    800: { value: '#616B85' }, // Body text (light)
+    900: { value: '#505A74' }, // Body text (medium)
+    1000: { value: '#414A63' }, // Body text (strong)
+    1100: { value: '#343C52' }, // Headings (light)
+    1200: { value: '#2A3142' }, // Headings (medium)
+    1300: { value: '#1E2433' }, // Primary text, headings
+    1400: { value: '#141924' }, // Dark backgrounds
+    1500: { value: '#0B0E17' }, // Darkest background
   },
-  blue: {
-    100: '#FDFDFF',
-    200: '#FAFBFE',
-    300: '#EFF4FF',
-    400: '#D6E0F7',
-    500: '#94b0ec',
-    600: '#3182ce',
-    700: '#6c92e4',
-    800: '#4272dd',
-    900: '#1751D0',
-    1000: '#113B98',
+
+  /**
+   * Legacy purple palette (aliased to violet for backwards compatibility)
+   * @deprecated Use `violet` instead
+   */
+  purple: {
+    50: { value: '#F4E8FB' },
+    100: { value: '#DEB9F3' },
+    200: { value: '#C17DE8' },
+    300: { value: '#A84ADC' },
+    500: { value: '#9117D0' },
+    600: { value: '#7412A6' },
+    700: { value: '#570D7D' },
+    800: { value: '#3A0953' },
+    900: { value: '#1D042A' },
   },
-  white: '#FFFFFF',
-  black: '#121212',
+
+  /**
+   * Legacy red palette (aliased to rose for backwards compatibility)
+   * @deprecated Use `rose` instead
+   */
+  red: {
+    50: { value: '#FBE8E9' },
+    100: { value: '#F3B9BD' },
+    200: { value: '#E87D84' },
+    300: { value: '#DC4A53' },
+    500: { value: '#D01721' },
+    600: { value: '#A6121A' },
+    700: { value: '#7D0D14' },
+    800: { value: '#53090D' },
+    900: { value: '#2A0407' },
+  },
+
+  /**
+   * Legacy yellow palette (aliased to gold for backwards compatibility)
+   * @deprecated Use `gold` instead
+   */
+  yellow: {
+    50: { value: '#FBF6E8' },
+    100: { value: '#F3E4B9' },
+    200: { value: '#E8CD7D' },
+    300: { value: '#DCB84A' },
+    400: { value: '#D0A117' }, // For backwards compat (warning.main used yellow.400)
+    500: { value: '#D0A117' },
+    600: { value: '#A68112' },
+    700: { value: '#7D610D' },
+    800: { value: '#534109' },
+    900: { value: '#2A2004' },
+  },
+
+  white: { value: '#FFFFFF' },
+  black: { value: '#0B0E17' }, // Matches gray.1500
 };

package/src/theme/global.ts

@@ -1,14 +1,24 @@
+import { defineGlobalStyles } from '@chakra-ui/react';
+
 import { inter, noto, pretendard } from './font';
 
-export const global = {
+/**
+ * Global styles for the design system.
+ *
+ * Uses the Golden Ratio color system with cool slate-based grays.
+ * Primary text color is gray.1300 (#1E2433) for optimal readability.
+ *
+ * @see ./colors.ts for full color palette documentation
+ */
+export const globalCss = defineGlobalStyles({
   ':root': {
-    '--chakra-colors-chakra-body-text': '#121315', // gray.1500 hex value
-    '--chakra-colors-chakra-body-bg': '#FFFFFF',
+    '--chakra-colors-chakra-body-text': '#1E2433', // gray.1300 - Primary text
+    '--chakra-colors-chakra-body-bg': '#FDFDFF', // gray.0 - Background
   },
 
   html: {
     height: 'var(--chakra-vh)',
-    fontSize: 14,
+    fontSize: 16,
     fontFamily: [
       pretendard.style.fontFamily,
       inter.style.fontFamily,
@@ -18,7 +28,7 @@ export const global = {
   },
 
   'html, body': {
-    color: 'gray.1500', // Set the default body color
+    color: 'gray.1300', // Primary text color (Golden Ratio palette)
   },
 
   '#__next': {
@@ -27,4 +37,7 @@ export const global = {
   "body[data-lang='es']": {
     fontFamily: inter.style.fontFamily,
   },
-} as const;
+});
+
+// Legacy export for backwards compatibility
+export const global = globalCss;

package/src/theme/index.ts

@@ -1,61 +1,142 @@
 import {
-  extendTheme,
-  Theme as ChakraTheme,
-  ThemeOverride,
+  createSystem,
+  defaultConfig,
+  defineConfig,
+  defineTextStyles,
 } from '@chakra-ui/react';
 
 import { colors, semanticTokens } from './colors';
-import { global } from './global';
+import { globalCss } from './global';
 
-export const theme = {
-  colors,
-  styles: {
-    global,
+/**
+ * Text styles for consistent typography across the application
+ * Names match fontSize tokens for easy migration: fontStyle="h1" → textStyle="h1"
+ *
+ * Base font size: 16px (set in global.ts)
+ * Responsive scaling using rem units:
+ * - Mobile (base): Slightly smaller for better readability on small screens
+ * - Desktop (md+): Original design sizes
+ *
+ * NOTE: textStyles must be defined here in index.ts (theme entry point) to ensure
+ * proper integration with Chakra v3's type system and theme creation process.
+ * Moving to a separate file breaks the type inference and runtime style application.
+ */
+export const textStyles = defineTextStyles({
+  h1: {
+    description: 'Main page heading - responsive 33.6-42px',
+    value: {
+      fontFamily: 'heading',
+      fontSize: { base: '2.1rem', md: '2.625rem' }, // 33.6px → 42px
+      fontWeight: 'bold',
+      lineHeight: '1.2',
+      letterSpacing: '-0.02em',
+    },
+  },
+  h2: {
+    description: 'Section heading - responsive 28-35px',
+    value: {
+      fontFamily: 'heading',
+      fontSize: { base: '1.75rem', md: '2.1875rem' }, // 28px → 35px
+      fontWeight: 'bold',
+      lineHeight: '1.25',
+      letterSpacing: '-0.01em',
+    },
+  },
+  h3: {
+    description: 'Subsection heading - responsive 21-24.5px',
+    value: {
+      fontFamily: 'heading',
+      fontSize: { base: '1.3125rem', md: '1.531rem' }, // 21px → 24.5px
+      fontWeight: 'semibold',
+      lineHeight: '1.3',
+      letterSpacing: '-0.01em',
+    },
+  },
+  h4: {
+    description: 'Minor heading - responsive 17.5-20.16px',
+    value: {
+      fontFamily: 'heading',
+      fontSize: { base: '1.09375rem', md: '1.26rem' }, // 17.5px → 20.16px
+      fontWeight: 'semibold',
+      lineHeight: '1.35',
+    },
+  },
+  h5: {
+    description: 'Small heading - responsive 15.4-16.8px',
+    value: {
+      fontFamily: 'heading',
+      fontSize: { base: '0.9625rem', md: '1.05rem' }, // 15.4px → 16.8px
+      fontWeight: 'semibold',
+      lineHeight: '1.4',
+    },
+  },
+  p: {
+    description: 'Body text for paragraphs - 14px',
+    value: {
+      fontFamily: 'body',
+      fontSize: { base: '0.875rem', md: '0.875rem' }, // 14px
+      fontWeight: 'normal',
+      lineHeight: '1.6',
+    },
   },
+  subtitle: {
+    description: 'Subtitle text - 14px',
+    value: {
+      fontFamily: 'body',
+      fontSize: { base: '0.875rem', md: '0.875rem' }, // 14px
+      fontWeight: 'medium',
+      lineHeight: '1.5',
+    },
+  },
+  subtext: {
+    description: 'Small caption text - responsive 12.88-14px',
+    value: {
+      fontFamily: 'body',
+      fontSize: { base: '0.805rem', md: '0.875rem' }, // 12.88px → 14px
+      fontWeight: 'normal',
+      lineHeight: '1.4',
+    },
+  },
+});
 
-  components: {
-    Switch: {
-      baseStyle: {
-        track: {
-          _checked: {
-            bg: 'primary.main',
-          },
+/**
+ * Chakra UI v3 theme configuration for Logician UI
+ *
+ * Uses the Golden Ratio color system with cool slate-based grays.
+ */
+const config = defineConfig({
+  globalCss,
+  theme: {
+    tokens: {
+      colors,
+      fonts: {
+        body: {
+          value: '"Pretendard Variable", "Inter", "Noto Sans", sans-serif',
+        },
+        heading: {
+          value: '"Pretendard Variable", "Inter", "Noto Sans", sans-serif',
         },
       },
+      radii: {
+        none: { value: '0' },
+        xs: { value: '4px' },
+        sm: { value: '6px' },
+        md: { value: '8px' },
+        lg: { value: '12px' },
+        xl: { value: '32px' },
+        full: { value: '9999px' },
+      },
     },
+    semanticTokens: {
+      colors: semanticTokens.colors,
+    },
+    textStyles,
   },
+});
 
-  fonts: {
-    body: '"Pretendard Variable", "Inter", "Noto Sans", sans-serif',
-    heading: '"Pretendard Variable", "Inter", "Noto Sans", sans-serif',
-  },
-
-  // 반응형 폰트 사이즈 - 모바일에서는 더 작은 폰트 크기, 데스크톱에서는 기존 크기 유지
-  fontSizes: {
-    // 커스텀 폰트 크기 토큰 (em 단위 사용)
-    // xs: { base: '0.7em', md: '0.7em' },
-    subtitle: { base: '0.92em', md: '1em' },
-    subtext: { base: '0.92em', md: '1em' },
-    p: { base: '1em', md: '1em' },
-    h5: { base: '1.1em', md: '1.2em' },
-    h4: { base: '1.25em', md: '1.44em' },
-    h3: { base: '1.5em', md: '1.75em' },
-    h2: { base: '2em', md: '2.5em' },
-    h1: { base: '2.4em', md: '3em' },
-  },
-  semanticTokens,
-  radii: {
-    none: '0',
-    sm: '6px',
-    md: '8px',
-    lg: '12px',
-    xl: '32px',
-    full: '9999px',
-  },
-} satisfies Omit<ThemeOverride, 'semanticTokens'> & {
-  semanticTokens: typeof semanticTokens;
-};
-
-export type Theme = typeof theme & ChakraTheme;
-
-export default extendTheme(theme);
+export const system = createSystem(defaultConfig, config);
+// Re-export for backwards compatibility
+export const theme = system;
+// Export config for external use (e.g., extending in LogicianProvider)
+export const logicianConfig = config;
+export default system;

package/dist/components/Alert/Alert.d.ts

@@ -1,15 +0,0 @@
-import { AlertProps } from './Alert.types';
-/**
- * A reusable Alert component that displays status messages.
- *
- * @param children - The content to display inside the alert.
- * @param status - The status of the alert. Determines the visual style of the alert.
- *                 Options: `'error' | 'success' | 'warning' | 'info'`.
- *                 Default: `'error'`.
- * @param onClose - Callback function triggered when the close button is clicked.
- *                  If provided, a close button will be rendered in the alert.
- *                  The function receives no arguments.
- * @param rest - Additional props inherited from Chakra UI's `AlertProps`.
- */
-export declare const Alert: ({ children, status, onClose, ...rest }: AlertProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,GAAI,wCAKnB,UAAU,4CAiBZ,CAAC"}