@aurora-ds/components 0.19.2 → 0.20.0

package/dist/cjs/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/cjs/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/cjs/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/cjs/index.js

@@ -2371,7 +2371,7 @@ const Modal = ({ isOpen, onClose, label, children, isForm, action }) => {
         }
     };
     // body of the modal
-    const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsxRuntime.jsx(Text, { variant: 'h3', children: label }), !action && (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxRuntime.jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsxRuntime.jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsxRuntime.jsx(Button, { ...action, type: isForm ? 'submit' : 'button' })] }))] }));
+    const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsxRuntime.jsx(Text, { variant: 'h3', children: label }), !action && (jsxRuntime.jsx(IconButton, { icon: jsxRuntime.jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxRuntime.jsxs(Stack, { justify: 'flex-end', width: '100%', children: [jsxRuntime.jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsxRuntime.jsx(Button, { ...action, type: isForm ? 'submit' : 'button', onClick: isForm ? undefined : action.onClick })] }))] }));
     return reactDom.createPortal(jsxRuntime.jsx(React.Fragment, { children: isVisible ? (jsxRuntime.jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsxRuntime.jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: isForm ? (jsxRuntime.jsx(Form$1, { onSubmit: (e) => { e.preventDefault(); safeInvokeAction(); }, children: body })) : (jsxRuntime.jsx(React.Fragment, { children: body })) }) })) : null }), document.body);
 };
 Modal.displayName = 'Modal';
@@ -2973,6 +2973,239 @@ const useAlert = () => {
     return context;
 };
 
+/**
+ * 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: theme.colors.slate[25],
+    surface: theme.colors.white,
+    surfaceHover: theme.colors.slate[100],
+    surfaceActive: theme.colors.slate[200],
+    // Text colors
+    text: theme.colors.slate[800],
+    textSecondary: theme.colors.slate[500],
+    textTertiary: theme.colors.slate[400],
+    // Primary colors (Indigo)
+    primary: theme.colors.indigo[600],
+    primaryHover: theme.colors.indigo[700],
+    primaryActive: theme.colors.indigo[800],
+    primarySubtle: theme.colors.indigo[50],
+    primaryDisabled: theme.colors.indigo[300],
+    onPrimary: theme.colors.white,
+    // Secondary colors (Slate)
+    secondary: theme.colors.slate[100],
+    secondaryHover: theme.colors.slate[200],
+    secondaryActive: theme.colors.slate[300],
+    secondarySubtle: theme.colors.slate[50],
+    secondaryDisabled: theme.colors.slate[200],
+    onSecondary: theme.colors.slate[700],
+    // Border colors
+    border: theme.colors.slate[200],
+    // Disabled state
+    disabledText: theme.colors.slate[400],
+    disabled: theme.colors.slate[300],
+    // Semantic colors - Success (Emerald)
+    success: theme.colors.emerald[600],
+    successSubtle: theme.colors.emerald[50],
+    // Semantic colors - Warning (Amber)
+    warning: theme.colors.amber[500],
+    warningSubtle: theme.colors.amber[50],
+    // Semantic colors - Error (Red)
+    error: theme.colors.red[600],
+    errorHover: theme.colors.red[700],
+    errorSubtle: theme.colors.red[50],
+    onError: theme.colors.white,
+    // Semantic colors - Info (Blue)
+    info: theme.colors.blue[600],
+    infoSubtle: theme.colors.blue[50],
+    // Semantic colors - Highlight (Orange)
+    highlight: theme.colors.orange[500],
+    highlightSubtle: theme.colors.orange[100],
+    // Semantic colors - Accent (Purple)
+    accent: theme.colors.purple[500],
+    accentSubtle: theme.colors.purple[100],
+    // Link colors (Indigo)
+    link: theme.colors.indigo[600],
+    linkHover: theme.colors.indigo[700],
+    linkActive: theme.colors.indigo[800],
+    linkDisabled: theme.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,
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AlertProvider = AlertProvider;
@@ -3008,6 +3241,7 @@ exports.TabItem = TabItem;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea_default;
+exports.defaultTheme = defaultTheme;
 exports.useAlert = useAlert;
 exports.useAnchorPosition = useAnchorPosition;
 exports.useClickOutside = useClickOutside;