@grupor5/raya 0.1.5 → 0.2.1

package/README.md

@@ -168,12 +168,14 @@ Based on 4px base unit with carefully crafted multipliers:
 
 ### Instalación
 
-Para integrar Raya en tu proyecto, instala el paquete desde npm:
+Para integrar Raya en tu proyecto, instala los paquetes desde npm:
 
 ```bash
-npm install @grupor5/raya
+npm install @grupor5/raya @grupor5/raya-icons
 ```
 
+**Nota importante**: A partir de la versión 0.2.0, los iconos se han separado en un paquete independiente (`@grupor5/raya-icons`) para optimizar el bundle size y mejorar el tree-shaking.
+
 ### Configuración de Tailwind CSS
 
 Para configurar Tailwind CSS, modifica tu archivo `tailwind.config.js`:
@@ -197,6 +199,28 @@ Finalmente, importa los estilos base de Raya en tu archivo CSS principal (por ej
 
 Esto asegura que todas las variables CSS y estilos base del sistema de diseño estén disponibles en tu aplicación.
 
+### Uso de Iconos
+
+Los iconos ahora se importan desde el paquete separado `@grupor5/raya-icons`:
+
+```tsx
+// Importación individual (recomendado para tree-shaking óptimo)
+import { AddIcon } from '@grupor5/raya-icons/icons/AddIcon';
+import { EditIcon } from '@grupor5/raya-icons/icons/EditIcon';
+
+// Importación por barrel (solo iconos comunes)
+import { AddIcon, EditIcon, CheckIcon } from '@grupor5/raya-icons';
+
+function MyComponent() {
+  return (
+    <div>
+      <AddIcon size={24} color="blue" />
+      <EditIcon size={20} />
+    </div>
+  );
+}
+```
+
 ## 🧩 Components (Coming Soon)
 
 React components built on shadcn/ui foundation:
@@ -260,7 +284,131 @@ The documentation is organized into four main categories:
 - [Colors Validation Report](./docs/testing/colors-validation-report.md)
 - [Icons Testing Report](./docs/testing/icons-testing-report.md)
 
+## 🚀 Deployment
+
+### Publishing Packages
+
+Este proyecto consta de dos paquetes npm que deben ser publicados por separado:
+
+1. **@grupor5/raya-icons**: Biblioteca de iconos independiente
+2. **@grupor5/raya**: Sistema de diseño principal (depende de raya-icons)
+
+#### 1. Publicar Iconos (@grupor5/raya-icons)
+
+```bash
+# Navegar al directorio de iconos
+cd raya-icons
+
+# Verificar que todos los iconos estén compilados
+npm run build
+
+# Aumentar versión (patch, minor, o major)
+npm version patch
+
+# Publicar a npm
+npm publish
+```
+
+#### 2. Publicar Sistema de Diseño (@grupor5/raya)
+
+```bash
+# Navegar al directorio del sistema de diseño
+cd design_system
+
+# Actualizar la versión de dependencia de raya-icons en package.json si es necesario
+# "dependencies": {
+#   "@grupor5/raya-icons": "^X.X.X"
+# }
+
+# Compilar el paquete
+npm run build
+
+# Aumentar versión
+npm version patch
+
+# Publicar a npm
+npm publish
+```
+
+#### Script de Despliegue Automatizado
+
+Para facilitar el proceso, puedes usar el script `deploy.sh` desde la raíz del proyecto:
+
+```bash
+# Desde la raíz del proyecto
+./deploy.sh
+```
+
+Este script:
+1. Publica automáticamente `@grupor5/raya-icons` con versión patch
+2. Actualiza la dependencia en el sistema de diseño
+3. Publica `@grupor5/raya` con versión patch
+4. Confirma las publicaciones
+
+#### Versiones y Compatibilidad
+
+- **Versiones patch** (X.X.+1): Correcciones de bugs, nuevos iconos
+- **Versiones minor** (X.+1.0): Nuevas funcionalidades, componentes adicionales
+- **Versiones major** (+1.0.0): Cambios breaking, nueva arquitectura
+
+**Importante**: Siempre publicar primero `@grupor5/raya-icons` antes que `@grupor5/raya` para mantener la compatibilidad de dependencias.
+
 ## 🔧 Development
 
+### Prerequisites
+
+```bash
+# Instalar dependencias en ambos proyectos
+cd raya-icons && npm install
+cd ../design_system && npm install
+```
+
 ### Running Storybook
+
+```bash
+# Desde el directorio design_system
+npm run storybook
+```
+
+Esto iniciará Storybook en `http://localhost:6006` donde podrás ver todos los componentes, iconos y ejemplos de uso.
+
+### Building Packages
+
+#### Compilar Iconos
+```bash
+cd raya-icons
+npm run build
+```
+
+#### Compilar Sistema de Diseño
+```bash
+cd design_system
+npm run build
+```
+
+### Testing
+
+```bash
+# Tests en design_system
+cd design_system
+npm test
+
+# Verificar iconos
+cd ../raya-icons
+npm run test
+```
+
+### Estructura de Desarrollo
+
+```
+raya/
+├── raya-icons/              # Paquete de iconos independiente
+│   ├── src/icons/          # Componentes de iconos TSX
+│   ├── scripts/            # Scripts de generación
+│   └── package.json        # @grupor5/raya-icons
+├── design_system/          # Sistema de diseño principal
+│   ├── src/                # Componentes y tokens
+│   ├── stories/            # Historias de Storybook
+│   └── package.json        # @grupor5/raya
+└── deploy.sh              # Script de despliegue automatizado
 ```

package/dist/index.d.mts

@@ -10,8 +10,16 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Bar, Line } from 'recharts';
-export { i as Icons } from './index-nDOtSfV9.mjs';
+import * as recharts_types_util_useElementOffset from 'recharts/types/util/useElementOffset';
+import * as recharts_types_state_cartesianAxisSlice from 'recharts/types/state/cartesianAxisSlice';
+import * as recharts_types_chart_types from 'recharts/types/chart/types';
+import * as recharts_types_util_payload_getUniqPayload from 'recharts/types/util/payload/getUniqPayload';
+import * as recharts_types_state_tooltipSlice from 'recharts/types/state/tooltipSlice';
+import * as recharts_types_component_Cursor from 'recharts/types/component/Cursor';
+import * as recharts_types_component_Tooltip from 'recharts/types/component/Tooltip';
+import * as recharts_types_util_types from 'recharts/types/util/types';
+import * as recharts_types_component_DefaultTooltipContent from 'recharts/types/component/DefaultTooltipContent';
+import * as RechartsPrimitive from 'recharts';
 
 declare const colors: {
     primary: {
@@ -1227,46 +1235,71 @@ declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<Omit<Accordi
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const Accordion: React$1.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref">) & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const ChartContainer: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
-    chart: React.ReactElement;
-    legend?: React.ReactElement;
-} & React$1.RefAttributes<HTMLDivElement>>;
-interface ChartProps {
-    data: any[];
-    xAxisKey: string;
-    barKeys?: {
-        key: string;
-        color: string;
-        text: string;
-    }[] | {
-        key: string;
-        color: string;
-        text: string;
-    };
-    lineKeys?: {
-        key: string;
-        color: string;
-        text: string;
-    }[] | {
-        key: string;
-        color: string;
-        text: string;
-    };
-    areaKeys?: {
-        key: string;
-        color: string;
-        text: string;
-    }[] | {
-        key: string;
-        color: string;
-        text: string;
-    };
-    chartType: 'bar' | 'line' | 'area';
-    showCustomTick?: boolean;
-}
-declare const Chart: React.FC<ChartProps>;
-declare const ChartBar: typeof Bar;
-declare const ChartLine: typeof Line;
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React$1.ReactNode;
+        icon?: React$1.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare const ChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>, "viewBox" | "active" | "label" | "payload" | "coordinate" | "accessibilityLayer"> & {
+    active?: boolean;
+    includeHidden?: boolean | undefined;
+    allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
+    animationDuration?: recharts_types_util_types.AnimationDuration;
+    animationEasing?: recharts_types_util_types.AnimationTiming;
+    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
+    cursor?: recharts_types_component_Cursor.CursorDefinition;
+    filterNull?: boolean;
+    defaultIndex?: number | recharts_types_state_tooltipSlice.TooltipIndex;
+    isAnimationActive?: boolean;
+    offset?: number;
+    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
+    portal?: HTMLElement | null;
+    position?: Partial<recharts_types_util_types.Coordinate>;
+    reverseDirection?: recharts_types_util_types.AllowInDimension;
+    shared?: boolean;
+    trigger?: recharts_types_chart_types.TooltipTrigger;
+    useTranslate3d?: boolean;
+    wrapperStyle?: React$1.CSSProperties;
+    axisId?: recharts_types_state_cartesianAxisSlice.AxisId;
+} & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & Omit<RechartsPrimitive.DefaultLegendContentProps, "ref" | "payload"> & {
+    wrapperStyle?: React$1.CSSProperties;
+    width?: number;
+    height?: number;
+    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<RechartsPrimitive.LegendPayload>;
+    onBBoxUpdate?: (box: recharts_types_util_useElementOffset.ElementOffset | null) => void;
+    portal?: HTMLElement | null;
+} & {
+    hideIcon?: boolean;
+    nameKey?: string;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface ModalProps {
     open: boolean;
@@ -1287,5 +1320,9 @@ declare function useModal(initialOpen?: boolean): {
 };
 
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number | string;
+    color?: string;
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chart, ChartBar, ChartContainer, ChartLine, Checkbox, Dropdown, type DropdownProps, Form, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, Input, Label, Modal, Paragraph, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type Size, type SpacingToken, Step, StepContent, StepDescription, StepLabel, Stepper, type StepperAPI, type StrokeColorToken, type StrokeDirection, type StrokeToken, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, Title, Typography, type TypographyProps, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Dropdown, type DropdownProps, Form, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, type IconProps, Input, Label, Modal, Paragraph, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type Size, type SpacingToken, Step, StepContent, StepDescription, StepLabel, Stepper, type StepperAPI, type StrokeColorToken, type StrokeDirection, type StrokeToken, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, Title, Typography, type TypographyProps, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };

package/dist/index.d.ts

@@ -10,8 +10,16 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Bar, Line } from 'recharts';
-export { i as Icons } from './index-nDOtSfV9.js';
+import * as recharts_types_util_useElementOffset from 'recharts/types/util/useElementOffset';
+import * as recharts_types_state_cartesianAxisSlice from 'recharts/types/state/cartesianAxisSlice';
+import * as recharts_types_chart_types from 'recharts/types/chart/types';
+import * as recharts_types_util_payload_getUniqPayload from 'recharts/types/util/payload/getUniqPayload';
+import * as recharts_types_state_tooltipSlice from 'recharts/types/state/tooltipSlice';
+import * as recharts_types_component_Cursor from 'recharts/types/component/Cursor';
+import * as recharts_types_component_Tooltip from 'recharts/types/component/Tooltip';
+import * as recharts_types_util_types from 'recharts/types/util/types';
+import * as recharts_types_component_DefaultTooltipContent from 'recharts/types/component/DefaultTooltipContent';
+import * as RechartsPrimitive from 'recharts';
 
 declare const colors: {
     primary: {
@@ -1227,46 +1235,71 @@ declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<Omit<Accordi
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const Accordion: React$1.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref">) & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const ChartContainer: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
-    chart: React.ReactElement;
-    legend?: React.ReactElement;
-} & React$1.RefAttributes<HTMLDivElement>>;
-interface ChartProps {
-    data: any[];
-    xAxisKey: string;
-    barKeys?: {
-        key: string;
-        color: string;
-        text: string;
-    }[] | {
-        key: string;
-        color: string;
-        text: string;
-    };
-    lineKeys?: {
-        key: string;
-        color: string;
-        text: string;
-    }[] | {
-        key: string;
-        color: string;
-        text: string;
-    };
-    areaKeys?: {
-        key: string;
-        color: string;
-        text: string;
-    }[] | {
-        key: string;
-        color: string;
-        text: string;
-    };
-    chartType: 'bar' | 'line' | 'area';
-    showCustomTick?: boolean;
-}
-declare const Chart: React.FC<ChartProps>;
-declare const ChartBar: typeof Bar;
-declare const ChartLine: typeof Line;
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: React$1.ReactNode;
+        icon?: React$1.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare const ChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>, "viewBox" | "active" | "label" | "payload" | "coordinate" | "accessibilityLayer"> & {
+    active?: boolean;
+    includeHidden?: boolean | undefined;
+    allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
+    animationDuration?: recharts_types_util_types.AnimationDuration;
+    animationEasing?: recharts_types_util_types.AnimationTiming;
+    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
+    cursor?: recharts_types_component_Cursor.CursorDefinition;
+    filterNull?: boolean;
+    defaultIndex?: number | recharts_types_state_tooltipSlice.TooltipIndex;
+    isAnimationActive?: boolean;
+    offset?: number;
+    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
+    portal?: HTMLElement | null;
+    position?: Partial<recharts_types_util_types.Coordinate>;
+    reverseDirection?: recharts_types_util_types.AllowInDimension;
+    shared?: boolean;
+    trigger?: recharts_types_chart_types.TooltipTrigger;
+    useTranslate3d?: boolean;
+    wrapperStyle?: React$1.CSSProperties;
+    axisId?: recharts_types_state_cartesianAxisSlice.AxisId;
+} & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & Omit<RechartsPrimitive.DefaultLegendContentProps, "ref" | "payload"> & {
+    wrapperStyle?: React$1.CSSProperties;
+    width?: number;
+    height?: number;
+    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<RechartsPrimitive.LegendPayload>;
+    onBBoxUpdate?: (box: recharts_types_util_useElementOffset.ElementOffset | null) => void;
+    portal?: HTMLElement | null;
+} & {
+    hideIcon?: boolean;
+    nameKey?: string;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface ModalProps {
     open: boolean;
@@ -1287,5 +1320,9 @@ declare function useModal(initialOpen?: boolean): {
 };
 
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number | string;
+    color?: string;
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chart, ChartBar, ChartContainer, ChartLine, Checkbox, Dropdown, type DropdownProps, Form, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, Input, Label, Modal, Paragraph, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type Size, type SpacingToken, Step, StepContent, StepDescription, StepLabel, Stepper, type StepperAPI, type StrokeColorToken, type StrokeDirection, type StrokeToken, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, Title, Typography, type TypographyProps, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AuthLayout, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Dropdown, type DropdownProps, Form, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, type IconProps, Input, Label, Modal, Paragraph, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, type Size, type SpacingToken, Step, StepContent, StepDescription, StepLabel, Stepper, type StepperAPI, type StrokeColorToken, type StrokeDirection, type StrokeToken, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, Title, Typography, type TypographyProps, badgeTokens, badgeVariants, classNames, cn, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVariants, typographyVars, useModal, useStepper, useTheme };