@aurora-ds/components 0.19.2 → 0.20.0

package/dist/esm/components/actions/icon-button/IconButton.props.d.ts

@@ -1,6 +1,5 @@
-import { Theme } from '@aurora-ds/theme';
 import { MouseEvent, ReactNode } from 'react';
-import { IconButtonSizes, IconButtonVariants } from '@/interfaces';
+import { IconButtonSizes, IconButtonVariants, ThemeContract } from '@/interfaces';
 export type IconButtonProps = {
     /** IconButton icon */
     icon?: ReactNode;
@@ -15,13 +14,13 @@ export type IconButtonProps = {
     /** Disabled state */
     disabled?: boolean;
     /** Custom text/icon color (overrides variant color) */
-    textColor?: keyof Theme['colors'];
+    textColor?: keyof ThemeContract['colors'];
     /** Custom backgroundColor (overrides variant backgroundColor) */
-    backgroundColor?: keyof Theme['colors'];
+    backgroundColor?: keyof ThemeContract['colors'];
     /** Custom hover backgroundColor (overrides variant hover backgroundColor) */
-    hoverBackgroundColor?: keyof Theme['colors'];
+    hoverBackgroundColor?: keyof ThemeContract['colors'];
     /** Custom active backgroundColor (overrides variant active backgroundColor) */
-    activeBackgroundColor?: keyof Theme['colors'];
+    activeBackgroundColor?: keyof ThemeContract['colors'];
     /** Size of the icon button */
     size?: IconButtonSizes;
     /** Accessibility label for screen readers */
@@ -39,8 +38,8 @@ export type IconButtonStyleParams = {
     variant?: IconButtonVariants;
     active?: boolean;
     size?: IconButtonSizes;
-    textColor?: keyof Theme['colors'];
-    backgroundColor?: keyof Theme['colors'];
-    hoverBackgroundColor?: keyof Theme['colors'];
-    activeBackgroundColor?: keyof Theme['colors'];
+    textColor?: keyof ThemeContract['colors'];
+    backgroundColor?: keyof ThemeContract['colors'];
+    hoverBackgroundColor?: keyof ThemeContract['colors'];
+    activeBackgroundColor?: keyof ThemeContract['colors'];
 };

package/dist/esm/components/data-display/chip/Chip.props.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@aurora-ds/theme';
 import { ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
 import { ChipColor, ChipSize, ChipVariant } from '@interfaces/chip.types';
 export type ChipProps = {
     /** Text label to display */
@@ -13,9 +13,9 @@ export type ChipProps = {
     /** Chip size */
     size?: ChipSize;
     /** Gap between icon and text (theme spacing key) */
-    gap?: keyof Theme['spacing'];
+    gap?: keyof ThemeContract['spacing'];
     /** Border radius from theme */
-    radius?: keyof Theme['radius'];
+    radius?: keyof ThemeContract['radius'];
     /** Disabled state */
     disabled?: boolean;
     /** Accessibility label for screen readers */
@@ -35,6 +35,6 @@ export type ChipStyleParams = {
     size: ChipSize;
     isIconOnly: boolean;
     disabled: boolean;
-    gap?: keyof Theme['spacing'];
-    radius?: keyof Theme['radius'];
+    gap?: keyof ThemeContract['spacing'];
+    radius?: keyof ThemeContract['radius'];
 };

package/dist/esm/components/data-display/skeleton/Skeleton.props.d.ts

@@ -1,7 +1,7 @@
-import { Theme } from '@aurora-ds/theme';
 import { CSSProperties } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type SkeletonProps = {
     width: CSSProperties['width'];
     height: CSSProperties['height'];
-    borderRadius?: keyof Theme['radius'];
+    borderRadius?: keyof ThemeContract['radius'];
 };

package/dist/esm/components/data-display/skeleton/Skeleton.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const SKELETON_STYLES: {
-    root: (width?: import("csstype").Property.Width<string | number> | undefined, height?: import("csstype").Property.Height<string | number> | undefined, borderRadius?: keyof import("@aurora-ds/theme").BaseRadius | undefined) => string;
+    root: (width?: import("csstype").Property.Width<string | number> | undefined, height?: import("csstype").Property.Height<string | number> | undefined, borderRadius?: keyof import("@/interfaces").ThemeRadiusContract | undefined) => string;
 };

package/dist/esm/components/foundation/icon/Icon.props.d.ts

@@ -1,16 +1,16 @@
-import { Theme } from '@aurora-ds/theme';
 import { PropsWithChildren } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type IconProps = PropsWithChildren<{
     /** Icon size based on theme font sizes */
-    size?: keyof Theme['fontSize'];
+    size?: keyof ThemeContract['fontSize'];
     /** Icon stroke/line color from theme */
-    color?: keyof Theme['colors'];
+    color?: keyof ThemeContract['colors'];
     /** Background color from theme */
-    backgroundColor?: keyof Theme['colors'];
+    backgroundColor?: keyof ThemeContract['colors'];
     /** Padding from theme spacing */
-    padding?: keyof Theme['spacing'];
+    padding?: keyof ThemeContract['spacing'];
     /** Border radius from theme */
-    borderRadius?: keyof Theme['radius'];
+    borderRadius?: keyof ThemeContract['radius'];
     /** Accessibility label for screen readers */
     ariaLabel?: string;
     /** ID of element that labels this icon */

package/dist/esm/components/foundation/icon/Icon.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const ICON_STYLES: {
-    root: (size?: keyof import("@aurora-ds/theme").BaseFontSize | undefined, color?: keyof import("@aurora-ds/theme").BaseColors | undefined, backgroundColor?: keyof import("@aurora-ds/theme").BaseColors | undefined, padding?: keyof import("@aurora-ds/theme").BaseSpacing | undefined, borderRadius?: keyof import("@aurora-ds/theme").BaseRadius | undefined) => string;
+    root: (size?: keyof import("@/interfaces").ThemeFontSizeContract | undefined, color?: keyof import("@/interfaces").ThemeColorContract | undefined, backgroundColor?: keyof import("@/interfaces").ThemeColorContract | undefined, padding?: keyof import("@/interfaces").ThemeSpacingContract | undefined, borderRadius?: keyof import("@/interfaces").ThemeRadiusContract | undefined) => string;
 };

package/dist/esm/components/foundation/text/Text.props.d.ts

@@ -1,13 +1,13 @@
-import { Theme } from '@aurora-ds/theme';
 import { PropsWithChildren } from 'react';
+import { ThemeContract } from '@/interfaces';
 import { TextVariants } from '@interfaces/text.types.ts';
 export type TextProps = PropsWithChildren<{
     /** Text variant that determines the HTML tag and default styling */
     variant?: TextVariants;
     /** Text color from theme */
-    color?: keyof Theme['colors'];
+    color?: keyof ThemeContract['colors'];
     /** Font size from theme (overrides variant fontSize if provided) */
-    fontSize?: keyof Theme['fontSize'];
+    fontSize?: keyof ThemeContract['fontSize'];
     /** Font family override (CSS value) */
     fontFamily?: string;
     /** Maximum number of lines before truncation with ellipsis */
@@ -29,8 +29,8 @@ export type TextProps = PropsWithChildren<{
 }>;
 export type TextStyleParams = {
     variant?: TextVariants;
-    color?: keyof Theme['colors'];
-    fontSize?: keyof Theme['fontSize'];
+    color?: keyof ThemeContract['colors'];
+    fontSize?: keyof ThemeContract['fontSize'];
     fontFamily?: string;
     maxLines?: number;
     underline?: boolean;

package/dist/esm/components/layout/card/Card.props.d.ts

@@ -1,30 +1,30 @@
-import { Theme } from '@aurora-ds/theme';
 import { CSSProperties, ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type CardProps = {
     /** Card children elements */
     children: ReactNode;
     /** Flex direction of the card content */
     direction?: CSSProperties['flexDirection'];
     /** Padding inside the card (theme spacing key) */
-    padding?: keyof Theme['spacing'];
+    padding?: keyof ThemeContract['spacing'];
     /** Width of the card */
     width?: CSSProperties['width'];
     /** Height of the card */
     height?: CSSProperties['height'];
     /** Gap between children (theme spacing key) */
-    gap?: keyof Theme['spacing'];
+    gap?: keyof ThemeContract['spacing'];
     /** Border radius of the card */
-    radius?: keyof Theme['radius'];
+    radius?: keyof ThemeContract['radius'];
     /** Shadow depth of the card */
-    shadow?: keyof Theme['shadows'];
+    shadow?: keyof ThemeContract['shadows'];
     /** Alignment of items on the cross axis */
     align?: CSSProperties['alignItems'];
     /** Justification of items on the main axis */
     justify?: CSSProperties['justifyContent'];
     /** Background color of the card */
-    backgroundColor?: keyof Theme['colors'];
+    backgroundColor?: keyof ThemeContract['colors'];
     /** Border color of the card */
-    borderColor?: keyof Theme['colors'];
+    borderColor?: keyof ThemeContract['colors'];
     /** Accessibility label for screen readers */
     ariaLabel?: string;
     /** ID of element that labels this card */
@@ -38,14 +38,14 @@ export type CardProps = {
 };
 export type CardStyleParams = {
     direction: CSSProperties['flexDirection'];
-    padding?: keyof Theme['spacing'];
+    padding?: keyof ThemeContract['spacing'];
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
-    gap?: keyof Theme['spacing'];
-    radius: keyof Theme['radius'];
-    shadow: keyof Theme['shadows'];
+    gap?: keyof ThemeContract['spacing'];
+    radius: keyof ThemeContract['radius'];
+    shadow: keyof ThemeContract['shadows'];
     align?: CSSProperties['alignItems'];
     justify?: CSSProperties['justifyContent'];
-    backgroundColor: keyof Theme['colors'];
-    borderColor?: keyof Theme['colors'];
+    backgroundColor: keyof ThemeContract['colors'];
+    borderColor?: keyof ThemeContract['colors'];
 };

package/dist/esm/components/layout/grid/Grid.props.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@aurora-ds/theme';
 import { CSSProperties, ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type GridProps = {
     /** Grid children elements */
     children: ReactNode;
@@ -8,9 +8,9 @@ export type GridProps = {
     /** Number of rows. */
     rows?: number;
     /** Gap between columns (theme spacing key) */
-    columnGap?: keyof Theme['spacing'];
+    columnGap?: keyof ThemeContract['spacing'];
     /** Gap between rows (theme spacing key) */
-    rowGap?: keyof Theme['spacing'];
+    rowGap?: keyof ThemeContract['spacing'];
     /** Width of the grid container */
     width?: CSSProperties['width'];
     /** Height of the grid container */
@@ -26,7 +26,7 @@ export type GridProps = {
     /** Justification of the entire grid within its container (main axis) */
     justifyContent?: CSSProperties['justifyContent'];
     /** Padding inside the grid */
-    padding?: keyof Theme['spacing'];
+    padding?: keyof ThemeContract['spacing'];
     /** Minimum width for each grid child. Enables responsive auto-fill behavior. */
     minChildWidth?: CSSProperties['width'];
     /** Accessibility label for screen readers */
@@ -43,8 +43,8 @@ export type GridProps = {
 export type GridStyleParams = {
     columns?: number;
     rows?: number;
-    columnGap?: keyof Theme['spacing'];
-    rowGap?: keyof Theme['spacing'];
+    columnGap?: keyof ThemeContract['spacing'];
+    rowGap?: keyof ThemeContract['spacing'];
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     minHeight?: CSSProperties['minHeight'];
@@ -52,6 +52,6 @@ export type GridStyleParams = {
     justifyItems?: CSSProperties['justifyItems'];
     alignContent?: CSSProperties['alignContent'];
     justifyContent?: CSSProperties['justifyContent'];
-    padding?: keyof Theme['spacing'];
+    padding?: keyof ThemeContract['spacing'];
     minChildWidth?: CSSProperties['width'];
 };

package/dist/esm/components/layout/page-construction/page-section/PageSection.props.d.ts

@@ -1,12 +1,12 @@
-import { Theme } from '@aurora-ds/theme';
 import { CSSProperties, PropsWithChildren } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type PageSectionProps = PropsWithChildren<{
     /** Gap between child elements */
-    gap?: keyof Theme['spacing'];
+    gap?: keyof ThemeContract['spacing'];
     /** Horizontal padding around the section */
-    paddingHorizontal?: keyof Theme['spacing'];
+    paddingHorizontal?: keyof ThemeContract['spacing'];
     /** Vertical padding around the section */
-    paddingVertical?: keyof Theme['spacing'];
+    paddingVertical?: keyof ThemeContract['spacing'];
     /** Alignment of items within the section */
     alignItems?: CSSProperties['alignItems'];
     /** Maximum width of the section */
@@ -25,9 +25,9 @@ export type PageSectionProps = PropsWithChildren<{
     tabIndex?: number;
 }>;
 export type PageSectionStyleParams = {
-    gap?: keyof Theme['spacing'];
-    paddingHorizontal?: keyof Theme['spacing'];
-    paddingVertical?: keyof Theme['spacing'];
+    gap?: keyof ThemeContract['spacing'];
+    paddingHorizontal?: keyof ThemeContract['spacing'];
+    paddingVertical?: keyof ThemeContract['spacing'];
     alignItems?: CSSProperties['alignItems'];
     maxWidth?: CSSProperties['maxWidth'];
     minHeight?: CSSProperties['minHeight'];

package/dist/esm/components/layout/separator/Separator.props.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 export type SeparatorProps = {
     /** Direction of the separator */
     direction?: 'horizontal' | 'vertical';
@@ -7,11 +7,11 @@ export type SeparatorProps = {
     /** Custom height (overrides default) */
     height?: string | number;
     /** Custom color (overrides default) */
-    color?: keyof Theme['colors'];
+    color?: keyof ThemeContract['colors'];
 };
 export type SeparatorStyleParams = {
     direction?: 'horizontal' | 'vertical';
-    color?: keyof Theme['colors'];
+    color?: keyof ThemeContract['colors'];
     width?: string | number;
     height?: string | number;
 };

package/dist/esm/components/layout/stack/Stack.props.d.ts

@@ -1,12 +1,12 @@
-import { Theme } from '@aurora-ds/theme';
 import { CSSProperties, ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type StackProps = {
     /** Stack children elements */
     children: ReactNode;
     /** Flex direction of the stack */
     direction?: CSSProperties['flexDirection'];
     /** Gap between children (theme spacing or CSS value) */
-    gap?: keyof Theme['spacing'];
+    gap?: keyof ThemeContract['spacing'];
     /** Width of the stack container */
     width?: CSSProperties['width'];
     /** Height of the stack container */
@@ -18,7 +18,7 @@ export type StackProps = {
     /** Whether items should wrap */
     wrap?: CSSProperties['flexWrap'];
     /** Padding inside the stack */
-    padding?: keyof Theme['spacing'];
+    padding?: keyof ThemeContract['spacing'];
     /** Accessibility label for screen readers */
     ariaLabel?: string;
     /** ID of element that labels this stack */
@@ -32,11 +32,11 @@ export type StackProps = {
 };
 export type StackStyleParams = {
     direction: CSSProperties['flexDirection'];
-    gap?: keyof Theme['spacing'];
+    gap?: keyof ThemeContract['spacing'];
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
     align?: CSSProperties['alignItems'];
     justify?: CSSProperties['justifyContent'];
     wrap?: CSSProperties['flexWrap'];
-    padding?: keyof Theme['spacing'];
+    padding?: keyof ThemeContract['spacing'];
 };

package/dist/esm/components/overlay/accordion/Accordion.props.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@aurora-ds/theme';
 import { CSSProperties, ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type AccordionProps = {
     /** Title displayed in the accordion header */
     title: string;
@@ -16,7 +16,7 @@ export type AccordionProps = {
     /** Optional icon to display before title */
     icon?: ReactNode;
     /** Optional background color */
-    backgroundColor?: keyof Theme['colors'];
+    backgroundColor?: keyof ThemeContract['colors'];
     /** Optional width */
     width?: CSSProperties['width'];
     /** Padding for the accordion header */
@@ -40,7 +40,7 @@ export type AccordionStyleParams = {
 };
 export type AccordionHeaderStyleParams = {
     disabled: boolean;
-    backgroundColor?: keyof Theme['colors'];
+    backgroundColor?: keyof ThemeContract['colors'];
     headerPadding?: CSSProperties['padding'];
 };
 export type AccordionContentStyleParams = {

package/dist/esm/components/overlay/menu/MenuItem/MenuItem.props.d.ts

@@ -1,9 +1,9 @@
-import { Theme } from '@aurora-ds/theme';
 import { ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
 export type MenuItemProps = {
     label: string;
     icon?: ReactNode;
     onClick: () => void;
-    textColor?: keyof Theme['colors'];
-    iconColor?: keyof Theme['colors'];
+    textColor?: keyof ThemeContract['colors'];
+    iconColor?: keyof ThemeContract['colors'];
 };

package/dist/esm/index.d.ts

@@ -1,3 +1,6 @@
 export * from '@components/index';
 export * from '@hooks/index';
+export { defaultTheme } from '@/theme/defaultTheme';
+export type { Theme } from '@/theme/theme.types';
+export type { ThemeContract, ThemeColorContract, ThemeSpacingContract, ThemeRadiusContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeShadowsContract, ThemeTransitionContract, ThemeBreakpointsContract, ThemeZIndexContract, } from '@interfaces/theme.contracts';
 import '@styles/globals.css';

package/dist/esm/index.js

@@ -2369,7 +2369,7 @@ const Modal = ({ isOpen, onClose, label, children, isForm, action }) => {
         }
     };
     // body of the modal
-    const body = (jsxs(Fragment$1, { children: [jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsx(Text, { variant: 'h3', children: label }), !action && (jsx(IconButton, { icon: jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsx(Button, { ...action, type: isForm ? 'submit' : 'button' })] }))] }));
+    const body = (jsxs(Fragment$1, { children: [jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsx(Text, { variant: 'h3', children: label }), !action && (jsx(IconButton, { icon: jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsx(Button, { ...action, type: isForm ? 'submit' : 'button', onClick: isForm ? undefined : action.onClick })] }))] }));
     return createPortal(jsx(Fragment, { children: isVisible ? (jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: isForm ? (jsx(Form, { onSubmit: (e) => { e.preventDefault(); safeInvokeAction(); }, children: body })) : (jsx(Fragment, { children: body })) }) })) : null }), document.body);
 };
 Modal.displayName = 'Modal';
@@ -2971,5 +2971,238 @@ const useAlert = () => {
     return context;
 };
 
-export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DatePicker_default as DatePicker, DrawerItem, Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
+/**
+ * Default breakpoint tokens
+ */
+const themeBreakpoints = {
+    xs: '480px', // Extra small devices (phones in landscape)
+    sm: '640px', // Small devices (large phones, small tablets)
+    md: '768px', // Medium devices (tablets)
+    lg: '1024px', // Large devices (desktops)
+    xl: '1280px', // Extra large devices (large desktops)
+    '2xl': '1536px', // Extra extra large devices (wide screens)
+};
+
+/**
+ * Default color tokens
+ * Uses color scales from @aurora-ds/theme
+ */
+const themeColors = {
+    // Surface colors
+    background: colors.slate[25],
+    surface: colors.white,
+    surfaceHover: colors.slate[100],
+    surfaceActive: colors.slate[200],
+    // Text colors
+    text: colors.slate[800],
+    textSecondary: colors.slate[500],
+    textTertiary: colors.slate[400],
+    // Primary colors (Indigo)
+    primary: colors.indigo[600],
+    primaryHover: colors.indigo[700],
+    primaryActive: colors.indigo[800],
+    primarySubtle: colors.indigo[50],
+    primaryDisabled: colors.indigo[300],
+    onPrimary: colors.white,
+    // Secondary colors (Slate)
+    secondary: colors.slate[100],
+    secondaryHover: colors.slate[200],
+    secondaryActive: colors.slate[300],
+    secondarySubtle: colors.slate[50],
+    secondaryDisabled: colors.slate[200],
+    onSecondary: colors.slate[700],
+    // Border colors
+    border: colors.slate[200],
+    // Disabled state
+    disabledText: colors.slate[400],
+    disabled: colors.slate[300],
+    // Semantic colors - Success (Emerald)
+    success: colors.emerald[600],
+    successSubtle: colors.emerald[50],
+    // Semantic colors - Warning (Amber)
+    warning: colors.amber[500],
+    warningSubtle: colors.amber[50],
+    // Semantic colors - Error (Red)
+    error: colors.red[600],
+    errorHover: colors.red[700],
+    errorSubtle: colors.red[50],
+    onError: colors.white,
+    // Semantic colors - Info (Blue)
+    info: colors.blue[600],
+    infoSubtle: colors.blue[50],
+    // Semantic colors - Highlight (Orange)
+    highlight: colors.orange[500],
+    highlightSubtle: colors.orange[100],
+    // Semantic colors - Accent (Purple)
+    accent: colors.purple[500],
+    accentSubtle: colors.purple[100],
+    // Link colors (Indigo)
+    link: colors.indigo[600],
+    linkHover: colors.indigo[700],
+    linkActive: colors.indigo[800],
+    linkDisabled: colors.indigo[300],
+};
+
+/**
+ * Default font size tokens
+ */
+const themeFontSize = {
+    '2xs': '0.625rem', // 10px
+    xs: '0.75rem', // 12px
+    sm: '0.875rem', // 14px
+    md: '1rem', // 16px
+    lg: '1.25rem', // 20px
+    xl: '1.5rem', // 24px
+    '2xl': '2rem', // 32px
+    '3xl': '2.5rem', // 40px
+    '4xl': '3rem', // 48px
+    '5xl': '4rem', // 64px
+};
+
+/**
+ * Default font weight tokens
+ */
+const themeFontWeight = {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+};
+
+/**
+ * Default line height tokens
+ */
+const themeLineHeight = {
+    none: 1,
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75,
+    loose: 2,
+};
+
+/**
+ * Default opacity tokens
+ */
+const themeOpacity = {
+    none: 0,
+    lowest: 0.05,
+    low: 0.1,
+    medium: 0.25,
+    high: 0.5,
+    higher: 0.75,
+    full: 1,
+};
+
+/**
+ * Default border radius tokens
+ */
+const themeRadius = {
+    none: '0',
+    xs: '0.125rem', // 2px
+    sm: '0.25rem', // 4px
+    md: '0.375rem', // 6px
+    lg: '0.5rem', // 8px
+    xl: '0.75rem', // 12px
+    '2xl': '1rem', // 16px
+    full: '9999px',
+};
+
+/**
+ * Default shadow tokens
+ */
+const themeShadows = {
+    none: 'none',
+    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+    focus: '0 0 0 3px rgb(99 102 241 / 0.4)',
+};
+
+/**
+ * Default spacing tokens
+ */
+const themeSpacing = {
+    none: '0',
+    '2xs': '0.125rem', // 2px
+    xs: '0.25rem', // 4px
+    sm: '0.5rem', // 8px
+    md: '1rem', // 16px
+    lg: '1.5rem', // 24px
+    xl: '2rem', // 32px
+    '2xl': '3rem', // 48px
+    '3xl': '4rem', // 64px
+    '4xl': '6rem', // 96px
+    '5xl': '8rem', // 128px
+};
+
+/**
+ * Default transition tokens
+ */
+const themeTransition = {
+    fast: '150ms ease-out',
+    normal: '250ms ease-out',
+    slow: '350ms ease-out',
+};
+
+/**
+ * Default z-index tokens
+ */
+const themeZIndex = {
+    behind: -1,
+    base: 0,
+    dropdown: 1000,
+    sticky: 1100,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    tooltip: 1600,
+    toast: 1700,
+};
+
+/**
+ * Default theme for aurora-ds-components
+ *
+ * This theme is used by default if no custom theme is provided.
+ * You can override it by passing your own theme to ThemeProvider:
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from '@aurora-ds/theme'
+ * import { defaultTheme } from '@aurora-ds/components'
+ *
+ * // Use default theme
+ * <ThemeProvider theme={defaultTheme}>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * // Or extend/override it
+ * const myTheme = {
+ *   ...defaultTheme,
+ *   colors: {
+ *     ...defaultTheme.colors,
+ *     primary: '#FF0000', // Override primary color
+ *   }
+ * }
+ * ```
+ */
+const defaultTheme = {
+    colors: themeColors,
+    spacing: themeSpacing,
+    radius: themeRadius,
+    shadows: themeShadows,
+    fontSize: themeFontSize,
+    fontWeight: themeFontWeight,
+    lineHeight: themeLineHeight,
+    zIndex: themeZIndex,
+    transition: themeTransition,
+    opacity: themeOpacity,
+    breakpoints: themeBreakpoints,
+};
+
+export { Accordion, Alert, AlertProvider, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DatePicker_default as DatePicker, DrawerItem, Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Pagination, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, defaultTheme, useAlert, useAnchorPosition, useClickOutside, useTransitionRender };
 //# sourceMappingURL=index.js.map