@aurora-ds/components 0.19.2 → 0.20.0

package/dist/cjs/interfaces/button.types.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 export type ButtonVariants = 'contained' | 'outlined' | 'text' | 'destructive' | 'link';
 export type IconButtonVariants = Exclude<ButtonVariants, 'link'>;
 export type IconButtonSizes = 'small' | 'medium' | 'large';
@@ -32,5 +32,5 @@ export type ButtonVariantStyle = {
         textDecoration?: string;
         textUnderlineOffset?: string;
     };
-    textColor: keyof Theme['colors'];
+    textColor: keyof ThemeContract['colors'];
 };

package/dist/cjs/interfaces/index.d.ts

@@ -4,3 +4,4 @@ export * from '@interfaces/text.types';
 export * from '@interfaces/chip.types';
 export * from '@interfaces/avatar.types';
 export * from '@interfaces/select.types';
+export type { ThemeContract, ThemeColorContract, ThemeSpacingContract, ThemeRadiusContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeShadowsContract, ThemeTransitionContract, ThemeBreakpointsContract, ThemeZIndexContract, } from '@interfaces/theme.contracts';

package/dist/cjs/interfaces/theme.contracts.d.ts

@@ -0,0 +1,235 @@
+/**
+ * Theme Contracts for aurora-ds-components
+ *
+ * These interfaces define the MINIMUM required theme structure.
+ * All projects using this library MUST provide these tokens.
+ *
+ * You can extend these contracts with your own custom tokens:
+ *
+ * @example
+ * ```typescript
+ * import type { ThemeColorContract } from 'aurora-ds-components'
+ *
+ * // Extend with custom tokens
+ * export interface ThemeColorTypes extends ThemeColorContract {
+ *     // Required tokens already included via extends
+ *
+ *     // Add your custom tokens
+ *     highlight: string
+ *     accent: string
+ * }
+ * ```
+ */
+/**
+ * Minimum color tokens required by aurora-ds-components
+ * Projects can extend this interface with additional tokens
+ */
+export interface ThemeColorContract {
+    background: string;
+    surface: string;
+    surfaceHover: string;
+    surfaceActive: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    primary: string;
+    primaryHover: string;
+    primaryActive: string;
+    primarySubtle: string;
+    primaryDisabled: string;
+    onPrimary: string;
+    secondary: string;
+    secondaryHover: string;
+    secondaryActive: string;
+    secondarySubtle: string;
+    secondaryDisabled: string;
+    onSecondary: string;
+    border: string;
+    disabledText: string;
+    disabled: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    error: string;
+    errorHover: string;
+    errorSubtle: string;
+    onError: string;
+    info: string;
+    infoSubtle: string;
+    highlight: string;
+    highlightSubtle: string;
+    accent: string;
+    accentSubtle: string;
+    link: string;
+    linkHover: string;
+    linkActive: string;
+    linkDisabled: string;
+}
+/**
+ * Minimum spacing tokens required by aurora-ds-components
+ */
+export interface ThemeSpacingContract {
+    none: string;
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+}
+/**
+ * Minimum border radius tokens required by aurora-ds-components
+ */
+export interface ThemeRadiusContract {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    full: string;
+}
+/**
+ * Minimum font size tokens required by aurora-ds-components
+ */
+export interface ThemeFontSizeContract {
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+}
+/**
+ * Minimum font weight tokens required by aurora-ds-components
+ */
+export interface ThemeFontWeightContract {
+    light: number;
+    regular: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+}
+/**
+ * Minimum line height tokens required by aurora-ds-components
+ */
+export interface ThemeLineHeightContract {
+    none: number;
+    tight: number;
+    normal: number;
+    relaxed: number;
+    loose: number;
+}
+/**
+ * Minimum opacity tokens required by aurora-ds-components
+ */
+export interface ThemeOpacityContract {
+    none: number;
+    lowest: number;
+    low: number;
+    medium: number;
+    high: number;
+    higher: number;
+    full: number;
+}
+/**
+ * Minimum shadow tokens required by aurora-ds-components
+ */
+export interface ThemeShadowsContract {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+    focus: string;
+}
+/**
+ * Minimum transition tokens required by aurora-ds-components
+ */
+export interface ThemeTransitionContract {
+    fast: string;
+    normal: string;
+    slow: string;
+}
+/**
+ * Minimum breakpoint tokens required by aurora-ds-components
+ */
+export interface ThemeBreakpointsContract {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+/**
+ * Minimum z-index tokens required by aurora-ds-components
+ */
+export interface ThemeZIndexContract {
+    behind: number;
+    base: number;
+    dropdown: number;
+    sticky: number;
+    overlay: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+    toast: number;
+}
+/**
+ * Complete theme contract required by aurora-ds-components
+ *
+ * Your theme MUST provide at minimum these tokens.
+ * You can add custom tokens by extending the sub-contracts.
+ *
+ * @example
+ * ```typescript
+ * import type {
+ *     ThemeColorContract,
+ *     ThemeSpacingContract
+ * } from 'aurora-ds-components'
+ *
+ * // Extend contracts with custom tokens
+ * interface MyColors extends ThemeColorContract {
+ *     highlight: string
+ *     accent: string
+ * }
+ *
+ * interface MySpacing extends ThemeSpacingContract {
+ *     '6xl': string
+ * }
+ *
+ * // Define your theme type
+ * interface MyTheme {
+ *     colors: MyColors
+ *     spacing: MySpacing
+ *     // ... other required properties
+ * }
+ * ```
+ */
+export interface ThemeContract {
+    colors: ThemeColorContract;
+    spacing: ThemeSpacingContract;
+    radius: ThemeRadiusContract;
+    shadows: ThemeShadowsContract;
+    fontSize: ThemeFontSizeContract;
+    fontWeight: ThemeFontWeightContract;
+    lineHeight: ThemeLineHeightContract;
+    zIndex: ThemeZIndexContract;
+    transition: ThemeTransitionContract;
+    opacity: ThemeOpacityContract;
+    breakpoints: ThemeBreakpointsContract;
+}

package/dist/cjs/theme/defaultTheme.d.ts

@@ -0,0 +1,29 @@
+import '@theme/theme.module';
+import type { Theme } from '@theme/theme.types';
+/**
+ * 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
+ *   }
+ * }
+ * ```
+ */
+export declare const defaultTheme: Theme;

package/dist/cjs/theme/theme.module.d.ts

@@ -0,0 +1,32 @@
+import type { Theme } from '@theme/theme.types';
+/**
+ * Default module augmentation for @aurora-ds/components
+ *
+ * This provides the base theme structure for the library.
+ * Projects can override this to add custom tokens:
+ *
+ * @example
+ * ```typescript
+ * // In your project: src/theme/theme.module.ts
+ * import type { Theme } from '@aurora-ds/components'
+ *
+ * // Extend the base Theme with your custom tokens
+ * interface MyTheme extends Theme {
+ *     colors: Theme['colors'] & {
+ *         link: string
+ *         linkHover: string
+ *     }
+ * }
+ *
+ * declare module '@aurora-ds/theme' {
+ *     interface ThemeRegistry {
+ *         theme: MyTheme  // Override with your extended theme
+ *     }
+ * }
+ * ```
+ */
+declare module '@aurora-ds/theme' {
+    interface ThemeRegistry {
+        theme: Theme;
+    }
+}

package/dist/cjs/theme/theme.types.d.ts

@@ -0,0 +1,17 @@
+import type { ThemeBreakpointsContract, ThemeColorContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeRadiusContract, ThemeShadowsContract, ThemeSpacingContract, ThemeTransitionContract, ThemeZIndexContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme type for aurora-ds-components
+ */
+export type Theme = {
+    colors: ThemeColorContract;
+    spacing: ThemeSpacingContract;
+    radius: ThemeRadiusContract;
+    shadows: ThemeShadowsContract;
+    fontSize: ThemeFontSizeContract;
+    fontWeight: ThemeFontWeightContract;
+    lineHeight: ThemeLineHeightContract;
+    zIndex: ThemeZIndexContract;
+    transition: ThemeTransitionContract;
+    opacity: ThemeOpacityContract;
+    breakpoints: ThemeBreakpointsContract;
+};

package/dist/cjs/theme/types/themeBreakpoints.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeBreakpointsContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme breakpoints - uses required contract
+ */
+export type ThemeBreakpointsTypes = ThemeBreakpointsContract;

package/dist/cjs/theme/types/themeColor.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeColorContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme colors type
+ */
+export type ThemeColorTypes = ThemeColorContract;

package/dist/cjs/theme/types/themeFontSize.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeFontSizeContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme font sizes - uses required contract
+ */
+export type ThemeFontSizeTypes = ThemeFontSizeContract;

package/dist/cjs/theme/types/themeFontWeight.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeFontWeightContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme font weights - uses required contract
+ */
+export type ThemeFontWeightTypes = ThemeFontWeightContract;

package/dist/cjs/theme/types/themeLineHeight.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeLineHeightContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme line heights - uses required contract
+ */
+export type ThemeLineHeightTypes = ThemeLineHeightContract;

package/dist/cjs/theme/types/themeOpacity.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeOpacityContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme opacity - uses required contract
+ */
+export type ThemeOpacityTypes = ThemeOpacityContract;

package/dist/cjs/theme/types/themeRadius.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeRadiusContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme radius - uses required contract
+ */
+export type ThemeRadiusTypes = ThemeRadiusContract;

package/dist/cjs/theme/types/themeShadows.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeShadowsContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme shadows - uses required contract
+ */
+export type ThemeShadowsTypes = ThemeShadowsContract;

package/dist/cjs/theme/types/themeSpacing.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeSpacingContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme spacing type
+ */
+export type ThemeSpacingTypes = ThemeSpacingContract;

package/dist/cjs/theme/types/themeTransition.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeTransitionContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme transitions - uses required contract
+ */
+export type ThemeTransitionTypes = ThemeTransitionContract;

package/dist/cjs/theme/types/themeZIndex.types.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeZIndexContract } from '@interfaces/theme.contracts';
+/**
+ * Default theme z-index - uses required contract
+ */
+export type ThemeZIndexTypes = ThemeZIndexContract;

package/dist/cjs/theme/values/themeBreakpoints.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeBreakpointsContract } from '@interfaces/theme.contracts';
+/**
+ * Default breakpoint tokens
+ */
+export declare const themeBreakpoints: ThemeBreakpointsContract;

package/dist/cjs/theme/values/themeColors.d.ts

@@ -0,0 +1,6 @@
+import type { ThemeColorContract } from '@interfaces/theme.contracts';
+/**
+ * Default color tokens
+ * Uses color scales from @aurora-ds/theme
+ */
+export declare const themeColors: ThemeColorContract;

package/dist/cjs/theme/values/themeFontSize.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeFontSizeContract } from '@interfaces/theme.contracts';
+/**
+ * Default font size tokens
+ */
+export declare const themeFontSize: ThemeFontSizeContract;

package/dist/cjs/theme/values/themeFontWeight.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeFontWeightContract } from '@interfaces/theme.contracts';
+/**
+ * Default font weight tokens
+ */
+export declare const themeFontWeight: ThemeFontWeightContract;

package/dist/cjs/theme/values/themeLineHeight.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeLineHeightContract } from '@interfaces/theme.contracts';
+/**
+ * Default line height tokens
+ */
+export declare const themeLineHeight: ThemeLineHeightContract;

package/dist/cjs/theme/values/themeOpacity.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeOpacityContract } from '@interfaces/theme.contracts';
+/**
+ * Default opacity tokens
+ */
+export declare const themeOpacity: ThemeOpacityContract;

package/dist/cjs/theme/values/themeRadius.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeRadiusContract } from '@interfaces/theme.contracts';
+/**
+ * Default border radius tokens
+ */
+export declare const themeRadius: ThemeRadiusContract;

package/dist/cjs/theme/values/themeShadows.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeShadowsContract } from '@interfaces/theme.contracts';
+/**
+ * Default shadow tokens
+ */
+export declare const themeShadows: ThemeShadowsContract;

package/dist/cjs/theme/values/themeSpacing.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeSpacingContract } from '@interfaces/theme.contracts';
+/**
+ * Default spacing tokens
+ */
+export declare const themeSpacing: ThemeSpacingContract;

package/dist/cjs/theme/values/themeTransition.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeTransitionContract } from '@interfaces/theme.contracts';
+/**
+ * Default transition tokens
+ */
+export declare const themeTransition: ThemeTransitionContract;

package/dist/cjs/theme/values/themeZIndex.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeZIndexContract } from '@interfaces/theme.contracts';
+/**
+ * Default z-index tokens
+ */
+export declare const themeZIndex: ThemeZIndexContract;

package/dist/cjs/utils/ui/components/actions/button/getButtonSizeStyles.utils.d.ts

@@ -1,12 +1,12 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 import { IconButtonSizes } from '@interfaces/button.types.ts';
 type ButtonSizeConfig = {
     height: number;
     padding: {
-        vertical: keyof Theme['spacing'];
-        horizontal: keyof Theme['spacing'];
+        vertical: keyof ThemeContract['spacing'];
+        horizontal: keyof ThemeContract['spacing'];
     };
-    fontSize: keyof Theme['fontSize'];
+    fontSize: keyof ThemeContract['fontSize'];
 };
 export declare const getButtonSizeStyles: () => Record<IconButtonSizes, ButtonSizeConfig>;
 export {};

package/dist/cjs/utils/ui/components/actions/icon-button/getIconButtonSizeStyles.utils.d.ts

@@ -1,9 +1,9 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 import { IconButtonSizes } from '@interfaces/button.types.ts';
 type IconButtonSizeConfig = {
     size: number;
-    padding: keyof Theme['spacing'];
-    iconSize: keyof Theme['fontSize'];
+    padding: keyof ThemeContract['spacing'];
+    iconSize: keyof ThemeContract['fontSize'];
 };
 export declare const getIconButtonSizeStyles: () => Record<IconButtonSizes, IconButtonSizeConfig>;
 export {};

package/dist/cjs/utils/ui/components/data-display/avatar/getAvatarSizes.utils.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 import { AvatarSize } from '@interfaces/avatar.types.ts';
 /**
  * Get avatar sizes configuration based on the theme
@@ -6,6 +6,6 @@ import { AvatarSize } from '@interfaces/avatar.types.ts';
  */
 export declare const getAvatarSizes: (theme: Theme) => Record<AvatarSize, {
     size: number;
-    fontSize: keyof Theme["fontSize"];
+    fontSize: keyof ThemeContract["fontSize"];
     overlap: string;
 }>;

package/dist/cjs/utils/ui/components/data-display/chip/getChipColorStyles.utils.d.ts

@@ -1,6 +1,6 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 import { ChipStyleParams } from '@components/data-display/chip/Chip.props.ts';
-export declare const getChipColorStyles: (theme: Theme, color: ChipStyleParams["color"], variant: ChipStyleParams["variant"], disabled: ChipStyleParams["disabled"]) => {
+export declare const getChipColorStyles: (theme: ThemeContract, color: ChipStyleParams["color"], variant: ChipStyleParams["variant"], disabled: ChipStyleParams["disabled"]) => {
     backgroundColor: string;
     color: string;
     borderColor: string;

package/dist/cjs/utils/ui/components/data-display/chip/getChipSizeStyles.utils.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 import { ChipStyleParams } from '@components/data-display/chip/Chip.props.ts';
 /**
  * Get chip size styles based on the theme, size and icon-only state
@@ -6,7 +6,7 @@ import { ChipStyleParams } from '@components/data-display/chip/Chip.props.ts';
  * @param size - Chip size
  * @param isIconOnly - Whether the chip has only an icon (no label)
  */
-export declare const getChipSizeStyles: (theme: Theme, size: ChipStyleParams["size"], isIconOnly: ChipStyleParams["isIconOnly"]) => {
+export declare const getChipSizeStyles: (theme: ThemeContract, size: ChipStyleParams["size"], isIconOnly: ChipStyleParams["isIconOnly"]) => {
     padding: string;
     fontSize: string;
 };

package/dist/cjs/utils/ui/components/foundation/text/getTextVariantStyles.utils.d.ts

@@ -1,7 +1,7 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 import { TextVariants, TextVariantStyle } from '@interfaces/text.types.ts';
 /**
  * Get text variant styles based on the theme
  * @param theme
  */
-export declare const getTextVariantStyles: (theme: Theme) => Record<TextVariants, TextVariantStyle>;
+export declare const getTextVariantStyles: (theme: ThemeContract) => Record<TextVariants, TextVariantStyle>;

package/dist/cjs/utils/ui/components/overlay/alert/getAlertVariantColors.utils.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '@aurora-ds/theme';
+import { ThemeContract } from '@/interfaces';
 import { AlertVariant } from '@interfaces/alert.types';
 export interface AlertVariantColors {
     background: string;
@@ -11,4 +11,4 @@ export interface AlertVariantColors {
  * @param variant - Alert variant
  * @returns Colors for the variant
  */
-export declare const getAlertVariantColors: (theme: Theme, variant: AlertVariant) => AlertVariantColors;
+export declare const getAlertVariantColors: (theme: ThemeContract, variant: AlertVariant) => AlertVariantColors;

package/dist/esm/components/actions/button/Button.props.d.ts

@@ -1,5 +1,5 @@
-import { Theme } from '@aurora-ds/theme';
 import { ReactNode, MouseEvent } from 'react';
+import { ThemeContract } from '@/interfaces';
 import { ButtonVariants, IconButtonSizes } from '@interfaces/button.types.ts';
 export type ButtonProps = {
     /** Button text label */
@@ -19,13 +19,13 @@ export type ButtonProps = {
     /** Disabled state */
     disabled?: boolean;
     /** Custom text 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 button */
     size?: IconButtonSizes;
     /** Accessibility label for screen readers */
@@ -42,9 +42,9 @@ export type ButtonProps = {
 export type ButtonStyleParams = {
     variant?: ButtonVariants;
     active?: boolean;
-    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'];
     size?: IconButtonSizes;
 };