@aurora-ds/components 0.19.3 → 0.21.0

package/README.md

@@ -2,75 +2,219 @@
 
 > ⚠️ **Personal Project Notice**
 >
-> This library is designed for my personal projects and is not intended for public use. It is strongly discouraged to download or use this library as-is in your own projects. Feel free to use it as inspiration or reference, but no support or maintenance is guaranteed.
+> This library is designed for my personal projects and is not intended for public use. Feel free to use it as inspiration or reference, but no support or maintenance is guaranteed.
 
-A React component library for the Aurora Design System, built with TypeScript and Storybook.
+A React component library with **default theme included**. Ready to use in 3 lines of code.
+
+**Key Features:**
+- ✅ **Default theme included** - No configuration needed
+- ✅ **TypeScript autocomplete** - Full IntelliSense support
+- ✅ **Easy to customize** - Spread operator to override
+- ✅ **Built with `@aurora-ds/theme` v3** - Powerful theming system
 
 ## Installation
 
 ```bash
-yarn add @aurora-ds/components
+yarn add @aurora-ds/components @aurora-ds/theme react react-dom
 ```
 
-### Peer Dependencies
+## Quick Start
 
-```bash
-yarn add @aurora-ds/theme react react-dom
+```tsx
+import { ThemeProvider } from '@aurora-ds/theme'
+import { defaultTheme, Button } from '@aurora-ds/components'
+
+function App() {
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Button label="Click me" variant="contained" />
+    </ThemeProvider>
+  )
+}
 ```
 
-## Usage
+That's it! 🎉
+
+## 🎨 Customization
+
+### Use Case 1: Change Token Values
+
+You have two options to customize the theme:
 
-Wrap your application with the `ThemeProvider` from `@aurora-ds/theme`:
+#### Option A: Using spread operator (simple)
 
 ```tsx
-import { ThemeProvider } from '@aurora-ds/theme';
-import { Button, Text, Card, Stack } from '@aurora-ds/components';
+import { defaultTheme } from '@aurora-ds/components'
+import { colors } from '@aurora-ds/theme'
 
-function App() {
-  return (
-    <ThemeProvider>
-      <Card padding={'md'} gap={'sm'}>
-        <Text variant={'h2'}>Welcome</Text>
-        <Text variant={'p'}>This is a card with Aurora components.</Text>
-        <Stack direction={'row'} gap={'sm'}>
-          <Button variant={'contained'}>Primary</Button>
-          <Button variant={'outlined'}>Secondary</Button>
-        </Stack>
-      </Card>
-    </ThemeProvider>
-  );
+const myTheme = {
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    primary: colors.purple[600],     // Change primary color
+    success: colors.teal[600],       // Change success color
+  },
+  spacing: {
+    ...defaultTheme.spacing,
+    lg: '2rem',                       // Change large spacing
+  },
+  radius: {
+    ...defaultTheme.radius,
+    md: '1rem',                       // Change medium radius
+  }
 }
+
+<ThemeProvider theme={myTheme}>
+  <App />
+</ThemeProvider>
+```
+
+#### Option B: Using `createTheme` (type-safe)
+
+```tsx
+import { createTheme, colors } from '@aurora-ds/theme'
+import { defaultTheme } from '@aurora-ds/components'
+
+const myTheme = createTheme({
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    primary: colors.purple[600],
+    success: colors.teal[600],
+  }
+})
+
+<ThemeProvider theme={myTheme}>
+  <App />
+</ThemeProvider>
 ```
 
-## Available Components
-
-| Component | Description |
-|-----------|-------------|
-| **Accordion** | Collapsible container to show/hide content |
-| **Alert** | Notification component with variants (default, info, warning, error, success) and auto-dismiss |
-| **Avatar** | User avatar display component with image or initials |
-| **AvatarGroup** | Group of avatars with overlapping display |
-| **Breadcrumb** | Navigation component for hierarchical page structures |
-| **Button** | Button with variants (contained, outlined, text), icons, and states |
-| **Card** | Container with background, border radius, and shadow |
-| **Chip** | Compact element for tags, labels, or status indicators |
-| **DrawerItem** | Item in a drawer navigation |
-| **Form** | Form container component |
-| **Grid** | Grid layout component |
-| **Icon** | Icon wrapper component |
-| **IconButton** | Icon-only button component |
-| **Input** | Input field component with controlled value and change handler |
-| **Menu** | Dropdown menu component positioned absolutely |
-| **Page** | Page layout component |
-| **PageSection** | Section within a page |
-| **Pagination** | Pagination component for navigating between pages |
-| **Separator** | Visual separator component |
-| **Select** | Dropdown select component for single item selection |
-| **DatePicker** | Date picker component with calendar popup |
-| **Stack** | Flexbox container for horizontal/vertical layouts |
-| **Tabs** | Tab navigation component with multiple sections, used with `TabItem` |
-| **Text** | Typography component with semantic HTML tags (h1-h6, p, span, label) |
-| **TextArea** | Multi-line text input component |
+Both approaches work! `createTheme` provides additional type validation.
+
+### Use Case 2: Add Custom Tokens
+
+If you need tokens that don't exist in `defaultTheme` (for very specific use cases):
+
+**Step 1: Create your theme types**
+```typescript
+// src/theme/theme.types.ts
+import type { Theme as BaseTheme } from '@aurora-ds/components'
+
+export interface Theme extends BaseTheme {
+  colors: BaseTheme['colors'] & {
+    brand: string           // New custom token
+    custom: string          // New custom token
+  }
+  customSpacing: {          // Entirely new category
+    hero: string
+    section: string
+  }
+}
+```
+
+**Step 2: Create module augmentation**
+```typescript
+// src/theme/theme.module.ts
+import type { Theme } from './theme.types'
+
+declare module '@aurora-ds/theme' {
+  interface ThemeRegistry {
+    theme: Theme
+  }
+}
+```
+
+**Step 3: Create your theme with `createTheme`**
+```typescript
+// src/theme/theme.ts
+import './theme.module'
+import { createTheme, colors } from '@aurora-ds/theme'
+import { defaultTheme } from '@aurora-ds/components'
+
+export const myTheme = createTheme({
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    brand: colors.purple[600],      // Your custom token
+    custom: colors.pink[500],       // Your custom token
+  },
+  customSpacing: {                  // Your custom category
+    hero: '10rem',
+    section: '5rem',
+  }
+} as Theme)
+```
+
+**Step 4: Use it**
+```typescript
+// src/App.tsx
+import { myTheme } from './theme/theme'
+
+<ThemeProvider theme={myTheme}>
+  <App />
+</ThemeProvider>
+```
+
+Now you get autocomplete on your custom tokens! ✅
+
+> **Note:** Most projects won't need this. The default theme already includes common tokens like `highlight`, `accent`, and `link`.
+
+### Use Case 3: Multiple Themes (Light/Dark)
+
+Create multiple theme variants:
+
+```typescript
+import { createTheme, colors } from '@aurora-ds/theme'
+import { defaultTheme } from '@aurora-ds/components'
+
+// Light theme (use default)
+export const lightTheme = defaultTheme
+
+// Dark theme with createTheme
+export const darkTheme = createTheme({
+  ...defaultTheme,
+  colors: {
+    ...defaultTheme.colors,
+    background: colors.slate[950],
+    surface: colors.slate[900],
+    text: colors.slate[50],
+    primary: colors.indigo[400],
+    secondary: colors.slate[800],
+    border: colors.slate[800],
+    // ... other dark mode colors
+  }
+})
+
+// In your app
+const [isDark, setIsDark] = useState(false)
+
+<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+  <App />
+</ThemeProvider>
+```
+
+## 📦 Available Tokens
+
+The `defaultTheme` includes these token categories:
+
+- **colors**: `primary`, `secondary`, `error`, `success`, `warning`, `info`, `highlight`, `accent`, `link`, `text`, `background`, etc.
+- **spacing**: `none`, `2xs` (2px), `xs` (4px), `sm` (8px), `md` (16px), `lg` (24px), `xl` (32px), etc.
+- **radius**: `none`, `xs` (2px), `sm` (4px), `md` (6px), `lg` (8px), `xl` (12px), `2xl` (16px), `full`
+- **fontSize**: `2xs` (10px), `xs` (12px), `sm` (14px), `md` (16px), `lg` (20px), `xl` (24px), etc.
+- **fontWeight**: `light` (300), `regular` (400), `medium` (500), `semibold` (600), `bold` (700)
+- **shadows**, **transition**, **breakpoints**, **zIndex**, etc.
+
+💡 See all values in `src/theme/values/`
+
+## 🧩 Available Components
+
+**Buttons:** Button, IconButton  
+**Layout:** Card, Stack, Grid, Page, PageSection, Separator  
+**Typography:** Text  
+**Forms:** Input, TextArea, Select, DatePicker, Form  
+**Data Display:** Status, Avatar, AvatarGroup, Icon  
+**Navigation:** Breadcrumb, Tabs, DrawerItem, Menu, Pagination  
+**Feedback:** Alert, Accordion
 
 ## License
 

package/dist/cjs/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;
 };

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/data-display/status/Status.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { StatusProps } from '@components/data-display/status/Status.props';
+/**
+ * Status component
+ *
+ * A compact element for displaying status, tags, or information.
+ *
+ * **Variants:**
+ * - `filled`: Solid background (default)
+ * - `outlined`: Border only
+ *
+ * **Colors:**
+ * - `default`, `primary`, `success`, `warning`, `error`, `info`, `highlight`, `accent`, `new`, `rose`, `yellow`
+ */
+declare const Status: FC<StatusProps>;
+export default Status;

package/dist/cjs/components/data-display/status/Status.props.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { ThemeContract } from '@/interfaces';
+import { StatusColor, StatusSize, StatusVariant } from '@interfaces/status.types';
+export type StatusProps = {
+    /** Text label to display */
+    label?: string;
+    /** Icon to display before the label */
+    icon?: ReactNode;
+    /** Status variant style */
+    variant?: StatusVariant;
+    /** Status color from theme */
+    color?: StatusColor;
+    /** Status size */
+    size?: StatusSize;
+    /** Gap between icon and text (theme spacing key) */
+    gap?: keyof ThemeContract['spacing'];
+    /** Border radius from theme */
+    radius?: keyof ThemeContract['radius'];
+    /** Disabled state */
+    disabled?: boolean;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this status */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this status */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+};
+export type StatusStyleParams = {
+    variant: StatusVariant;
+    color: StatusColor;
+    size: StatusSize;
+    isIconOnly: boolean;
+    disabled: boolean;
+    gap?: keyof ThemeContract['spacing'];
+    radius?: keyof ThemeContract['radius'];
+};

package/dist/cjs/components/data-display/status/Status.styles.d.ts

@@ -0,0 +1,4 @@
+import { StatusStyleParams } from '@components/data-display/status/Status.props';
+export declare const STATUS_STYLES: {
+    root: (args_0: StatusStyleParams) => string;
+};

package/dist/cjs/components/data-display/status/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Status } from '@components/data-display/status/Status';
+export type { StatusProps } from '@components/data-display/status/Status.props';

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/index.d.ts

@@ -1,6 +1,6 @@
 export * from '@components/foundation/icon';
 export * from '@components/foundation/text';
-export * from '@components/data-display/chip';
+export * from '@components/data-display/status';
 export * from '@components/data-display/avatar';
 export * from '@components/data-display/skeleton';
 export * from '@components/actions/button';
@@ -27,5 +27,5 @@ export * from '@components/navigation/pagination';
 export type { AlertVariant, AlertPosition } from '@interfaces/alert.types';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
-export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';
+export type { StatusVariant, StatusColor, StatusSize } from '@interfaces/status.types';
 export type { SelectOption } from '@interfaces/select.types';

package/dist/cjs/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/cjs/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'];
 };