@aurora-ds/components 0.5.1 → 0.6.1

package/dist/esm/interfaces/card.types.d.ts

@@ -1,3 +1,3 @@
-import { StackDirection } from '@interfaces/stack.types';
-/** Card direction - reuses StackDirection */
-export type CardDirection = StackDirection;
+import { CSSProperties } from 'react';
+/** Card direction */
+export type CardDirection = CSSProperties['flexDirection'];

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

@@ -1,4 +1,3 @@
 export * from '@interfaces/button.types';
 export * from '@interfaces/text.types';
-export * from '@interfaces/stack.types';
-export * from '@interfaces/card.types';
+export * from '@interfaces/chip.types';

package/dist/index.d.ts

@@ -167,6 +167,8 @@ type ButtonProps = {
     active?: boolean;
     /** Disabled state */
     disabled?: boolean;
+    /** Custom text color (overrides variant color) */
+    textColor?: keyof Theme['colors'];
 };
 
 /**
@@ -179,17 +181,6 @@ type ButtonProps = {
  */
 declare const Button: FC<ButtonProps>;
 
-/** Stack wrap options */
-type StackWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-/** Stack justify options */
-type StackJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-/** Stack alignment options */
-type StackAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-type StackDirection = 'row' | 'column';
-
-/** Card direction - reuses StackDirection */
-type CardDirection = StackDirection;
-
 type IconButtonProps = {
     /** IconButton icon */
     icon?: ReactNode;
@@ -203,6 +194,8 @@ type IconButtonProps = {
     active?: boolean;
     /** Disabled state */
     disabled?: boolean;
+    /** Custom text/icon color (overrides variant color) */
+    textColor?: keyof Theme['colors'];
 };
 
 declare const IconButton: FC<IconButtonProps>;
@@ -211,7 +204,7 @@ type StackProps = {
     /** Stack children elements */
     children: ReactNode;
     /** Flex direction of the stack */
-    direction?: StackDirection;
+    direction?: CSSProperties['flexDirection'];
     /** Gap between children (theme spacing or CSS value) */
     gap?: keyof Theme['spacing'];
     /** Width of the stack container */
@@ -219,11 +212,11 @@ type StackProps = {
     /** Height of the stack container */
     height?: CSSProperties['height'];
     /** Alignment of items on the cross axis */
-    align?: StackAlign;
+    align?: CSSProperties['alignItems'];
     /** Justification of items on the main axis */
-    justify?: StackJustify;
+    justify?: CSSProperties['justifyContent'];
     /** Whether items should wrap */
-    wrap?: StackWrap;
+    wrap?: CSSProperties['flexWrap'];
     /** Padding inside the stack */
     padding?: keyof Theme['spacing'];
 };
@@ -243,7 +236,7 @@ type CardProps = {
     /** Card children elements */
     children: ReactNode;
     /** Flex direction of the card content */
-    direction?: CardDirection;
+    direction?: CSSProperties['flexDirection'];
     /** Padding inside the card (theme spacing key) */
     padding?: keyof Theme['spacing'];
     /** Width of the card */
@@ -257,9 +250,9 @@ type CardProps = {
     /** Shadow depth of the card */
     shadow?: keyof Theme['shadows'];
     /** Alignment of items on the cross axis */
-    align?: StackAlign;
+    align?: CSSProperties['alignItems'];
     /** Justification of items on the main axis */
-    justify?: StackJustify;
+    justify?: CSSProperties['justifyContent'];
     /** Background color of the card */
     backgroundColor?: keyof Theme['colors'];
     /** Border color of the card */
@@ -333,4 +326,4 @@ type DrawerItemProps = {
 declare const DrawerItem: FC<DrawerItemProps>;
 
 export { Accordion, Button, Card, Chip, DrawerItem, Icon, IconButton, Stack, Text };
-export type { AccordionProps, ButtonProps, ButtonVariantStyle, ButtonVariants, CardDirection, CardProps, ChipColor, ChipProps, ChipSize, ChipVariant, DrawerItemProps, IconButtonProps, IconProps, StackAlign, StackDirection, StackJustify, StackProps, StackWrap, TextProps, TextVariantStyle, TextVariants };
+export type { AccordionProps, ButtonProps, ButtonVariantStyle, ButtonVariants, CardProps, ChipColor, ChipProps, ChipSize, ChipVariant, DrawerItemProps, IconButtonProps, IconProps, StackProps, TextProps, TextVariantStyle, TextVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-ds/components",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "type": "module",
   "description": "Aurora Design System - React Components Library",
   "main": "dist/cjs/index.js",

package/dist/cjs/components/button/Button.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ButtonProps } from '@components/button/Button.props.ts';
-/**
- * Button component
- *
- * **Variants:**
- * - `contained`: Solid background button (default)
- * - `outlined`: Border only button
- * - `text`: Text only button without background
- */
-declare const Button: FC<ButtonProps>;
-export default Button;

package/dist/cjs/components/button/Button.props.d.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from 'react';
-import { ButtonVariants } from '@interfaces/button.types';
-export type ButtonProps = {
-    /** Button text label */
-    label: string;
-    /** Optional icon to display before label */
-    startIcon?: ReactNode;
-    /** Optional icon to display after label */
-    endIcon?: ReactNode;
-    /** Click handler */
-    onClick?: () => void;
-    /** Visual variant of the button */
-    variant?: ButtonVariants;
-    /** Button type attribute */
-    type?: 'button' | 'submit';
-    /** Active/pressed state */
-    active?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-};
-export type ButtonStyleParams = {
-    variant?: ButtonVariants;
-    active?: boolean;
-};

package/dist/cjs/components/button/Button.styles.d.ts

@@ -1,18 +0,0 @@
-import { ButtonStyleParams } from '@components/button/Button.props.ts';
-/**
- * Button styles using createStyles from @aurora-ds/theme
- *
- * Override via className with createStyles:
- * ```tsx
- * const myStyles = createStyles((theme) => ({
- *   custom: {
- *     backgroundColor: theme.colors.accent,
- *     ':hover': { backgroundColor: theme.colors.accentHover }
- *   }
- * }))
- * <Button className={myStyles.custom} label="Custom" />
- * ```
- */
-export declare const BUTTON_STYLES: {
-    root: (args_0: ButtonStyleParams) => string;
-};

package/dist/cjs/components/button/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Button } from '@components/button/Button';
-export type { ButtonProps } from '@components/button/Button.props';

package/dist/cjs/components/card/Card.d.ts

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import { CardProps } from '@components/card/Card.props';
-/**
- * Card component
- *
- * A container component with a background, border radius, and optional shadow.
- * Uses a Stack layout internally for organizing children.
- *
- * **Direction:**
- * - `column`: Vertical layout (default)
- * - `row`: Horizontal layout
- */
-declare const Card: FC<CardProps>;
-export default Card;

package/dist/cjs/components/card/Card.props.d.ts

@@ -1,37 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { CSSProperties, ReactNode } from 'react';
-import { CardDirection } from '@interfaces/card.types';
-import { StackAlign, StackJustify } from '@interfaces/stack.types';
-export type CardProps = {
-    /** Card children elements */
-    children: ReactNode;
-    /** Flex direction of the card content */
-    direction?: CardDirection;
-    /** Padding inside the card (theme spacing key) */
-    padding?: keyof Theme['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'];
-    /** Border radius of the card */
-    radius?: keyof Theme['radius'];
-    /** Shadow depth of the card */
-    shadow?: keyof Theme['shadows'];
-    /** Alignment of items on the cross axis */
-    align?: StackAlign;
-    /** Justification of items on the main axis */
-    justify?: StackJustify;
-};
-export type CardStyleParams = {
-    direction: CardDirection;
-    padding?: keyof Theme['spacing'];
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    gap?: keyof Theme['spacing'];
-    radius: keyof Theme['radius'];
-    shadow: keyof Theme['shadows'];
-    align?: StackAlign;
-    justify?: StackJustify;
-};

package/dist/cjs/components/card/Card.styles.d.ts

@@ -1,7 +0,0 @@
-import { CardStyleParams } from '@components/card/Card.props';
-/**
- * Card styles using createStyles from @aurora-ds/theme
- */
-export declare const CARD_STYLES: {
-    root: (args_0: CardStyleParams) => string;
-};

package/dist/cjs/components/card/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Card } from '@components/card/Card';
-export type { CardProps } from '@components/card/Card.props';

package/dist/cjs/components/icon/Icon.d.ts

@@ -1,35 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from '@components/icon/Icon.props';
-/**
- * Icon component - Wrapper for SVG icons with theme-aware styling
- *
- * **Features:**
- * - Theme-aware sizing via font sizes
- * - Color and fill support from theme
- * - Optional background with padding and border radius
- * - Transition animation on color changes
- *
- * **Usage:**
- * ```tsx
- * import { SomeIcon } from 'some-icon-library'
- *
- * <Icon size="md" color="primary">
- *   <SomeIcon />
- * </Icon>
- * ```
- *
- * **With background:**
- * ```tsx
- * <Icon
- *   size="lg"
- *   color="onPrimary"
- *   backgroundColor="primary"
- *   padding="sm"
- *   borderRadius="full"
- * >
- *   <SomeIcon />
- * </Icon>
- * ```
- */
-declare const Icon: FC<IconProps>;
-export default Icon;

package/dist/cjs/components/icon/Icon.props.d.ts

@@ -1,14 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { PropsWithChildren } from 'react';
-export type IconProps = PropsWithChildren<{
-    /** Icon size based on theme font sizes */
-    size?: keyof Theme['fontSize'];
-    /** Icon stroke/line color from theme */
-    color?: keyof Theme['colors'];
-    /** Background color from theme */
-    backgroundColor?: keyof Theme['colors'];
-    /** Padding from theme spacing */
-    padding?: keyof Theme['spacing'];
-    /** Border radius from theme */
-    borderRadius?: keyof Theme['radius'];
-}>;

package/dist/cjs/components/icon/Icon.styles.d.ts

@@ -1,3 +0,0 @@
-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;
-};

package/dist/cjs/components/icon/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Icon } from '@components/icon/Icon';
-export type { IconProps } from '@components/icon/Icon.props';

package/dist/cjs/components/icon-button/IconButton.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { IconButtonProps } from '@components/icon-button/IconButton.props.ts';
-declare const IconButton: FC<IconButtonProps>;
-export default IconButton;

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

@@ -1,20 +0,0 @@
-import { ReactNode } from 'react';
-import { ButtonVariants } from '@/interfaces';
-export type IconButtonProps = {
-    /** IconButton icon */
-    icon?: ReactNode;
-    /** Click handler */
-    onClick?: () => void;
-    /** Visual variant of the button */
-    variant?: ButtonVariants;
-    /** Button type attribute */
-    type?: 'button' | 'submit';
-    /** Active/pressed state */
-    active?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-};
-export type IconButtonStyleParams = {
-    variant?: ButtonVariants;
-    active?: boolean;
-};

package/dist/cjs/components/icon-button/IconButton.styles.d.ts

@@ -1,4 +0,0 @@
-import { IconButtonStyleParams } from '@components/icon-button/IconButton.props.ts';
-export declare const ICON_BUTTON_STYLES: {
-    root: (args_0: IconButtonStyleParams) => string;
-};

package/dist/cjs/components/icon-button/index.d.ts

@@ -1,2 +0,0 @@
-export { default as IconButton } from '@components/icon-button/IconButton';
-export type { IconButtonProps } from '@components/icon-button/IconButton.props';

package/dist/cjs/components/stack/Stack.d.ts

@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { StackProps } from '@components/stack/Stack.props';
-/**
- * Stack component
- *
- * A flexbox container for laying out children in a row or column.
- *
- * **Direction:**
- * - `row`: Horizontal layout (default)
- * - `column`: Vertical layout
- */
-declare const Stack: FC<StackProps>;
-export default Stack;

package/dist/cjs/components/stack/Stack.props.d.ts

@@ -1,33 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { CSSProperties, ReactNode } from 'react';
-import { StackAlign, StackDirection, StackJustify, StackWrap } from '@interfaces/stack.types';
-export type StackProps = {
-    /** Stack children elements */
-    children: ReactNode;
-    /** Flex direction of the stack */
-    direction?: StackDirection;
-    /** Gap between children (theme spacing or CSS value) */
-    gap?: keyof Theme['spacing'];
-    /** Width of the stack container */
-    width?: CSSProperties['width'];
-    /** Height of the stack container */
-    height?: CSSProperties['height'];
-    /** Alignment of items on the cross axis */
-    align?: StackAlign;
-    /** Justification of items on the main axis */
-    justify?: StackJustify;
-    /** Whether items should wrap */
-    wrap?: StackWrap;
-    /** Padding inside the stack */
-    padding?: keyof Theme['spacing'];
-};
-export type StackStyleParams = {
-    direction: StackDirection;
-    gap?: keyof Theme['spacing'];
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    align?: StackAlign;
-    justify?: StackJustify;
-    wrap?: StackWrap;
-    padding?: keyof Theme['spacing'];
-};

package/dist/cjs/components/stack/Stack.styles.d.ts

@@ -1,7 +0,0 @@
-import { StackStyleParams } from '@components/stack/Stack.props';
-/**
- * Stack styles using createStyles from @aurora-ds/theme
- */
-export declare const STACK_STYLES: {
-    root: (args_0: StackStyleParams) => string;
-};

package/dist/cjs/components/stack/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Stack } from '@components/stack/Stack';
-export type { StackProps } from '@components/stack/Stack.props';

package/dist/cjs/components/text/Text.d.ts

@@ -1,19 +0,0 @@
-import { FC } from 'react';
-import { TextProps } from '@components/text/Text.props';
-/**
- * Text component - Renders semantic HTML elements based on variant
- *
- * **Variants:**
- * - `h1-h6`: Heading elements with appropriate styling
- * - `p`: Paragraph element with relaxed line height
- * - `span`: Inline text element (default)
- * - `label`: Label element with medium font weight
- *
- * **Features:**
- * - Automatic HTML tag selection based on variant
- * - Theme-aware colors
- * - Text truncation with `maxLines`
- * - Underline support
- */
-declare const Text: FC<TextProps>;
-export default Text;

package/dist/cjs/components/text/Text.props.d.ts

@@ -1,19 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { PropsWithChildren } from 'react';
-import { TextVariants } from '@interfaces/text.types';
-export type TextProps = PropsWithChildren<{
-    /** Text variant that determines the HTML tag and default styling */
-    variant?: TextVariants;
-    /** Text color from theme */
-    color?: keyof Theme['colors'];
-    /** Maximum number of lines before truncation with ellipsis */
-    maxLines?: number;
-    /** Add underline text decoration */
-    underline?: boolean;
-}>;
-export type TextStyleParams = {
-    variant?: TextVariants;
-    color?: keyof Theme['colors'];
-    maxLines?: number;
-    underline?: boolean;
-};

package/dist/cjs/components/text/Text.styles.d.ts

@@ -1,4 +0,0 @@
-import { TextStyleParams } from '@components/text/Text.props';
-export declare const TEXT_STYLES: {
-    root: (args_0: TextStyleParams) => string;
-};

package/dist/cjs/components/text/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Text } from '@components/text/Text';
-export type { TextProps } from '@components/text/Text.props';

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

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { ButtonProps } from '@components/button/Button.props.ts';
-/**
- * Button component
- *
- * **Variants:**
- * - `contained`: Solid background button (default)
- * - `outlined`: Border only button
- * - `text`: Text only button without background
- */
-declare const Button: FC<ButtonProps>;
-export default Button;

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

@@ -1,24 +0,0 @@
-import { ReactNode } from 'react';
-import { ButtonVariants } from '@interfaces/button.types';
-export type ButtonProps = {
-    /** Button text label */
-    label: string;
-    /** Optional icon to display before label */
-    startIcon?: ReactNode;
-    /** Optional icon to display after label */
-    endIcon?: ReactNode;
-    /** Click handler */
-    onClick?: () => void;
-    /** Visual variant of the button */
-    variant?: ButtonVariants;
-    /** Button type attribute */
-    type?: 'button' | 'submit';
-    /** Active/pressed state */
-    active?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-};
-export type ButtonStyleParams = {
-    variant?: ButtonVariants;
-    active?: boolean;
-};

package/dist/esm/components/button/Button.styles.d.ts

@@ -1,18 +0,0 @@
-import { ButtonStyleParams } from '@components/button/Button.props.ts';
-/**
- * Button styles using createStyles from @aurora-ds/theme
- *
- * Override via className with createStyles:
- * ```tsx
- * const myStyles = createStyles((theme) => ({
- *   custom: {
- *     backgroundColor: theme.colors.accent,
- *     ':hover': { backgroundColor: theme.colors.accentHover }
- *   }
- * }))
- * <Button className={myStyles.custom} label="Custom" />
- * ```
- */
-export declare const BUTTON_STYLES: {
-    root: (args_0: ButtonStyleParams) => string;
-};

package/dist/esm/components/button/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Button } from '@components/button/Button';
-export type { ButtonProps } from '@components/button/Button.props';

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

@@ -1,14 +0,0 @@
-import { FC } from 'react';
-import { CardProps } from '@components/card/Card.props';
-/**
- * Card component
- *
- * A container component with a background, border radius, and optional shadow.
- * Uses a Stack layout internally for organizing children.
- *
- * **Direction:**
- * - `column`: Vertical layout (default)
- * - `row`: Horizontal layout
- */
-declare const Card: FC<CardProps>;
-export default Card;

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

@@ -1,37 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { CSSProperties, ReactNode } from 'react';
-import { CardDirection } from '@interfaces/card.types';
-import { StackAlign, StackJustify } from '@interfaces/stack.types';
-export type CardProps = {
-    /** Card children elements */
-    children: ReactNode;
-    /** Flex direction of the card content */
-    direction?: CardDirection;
-    /** Padding inside the card (theme spacing key) */
-    padding?: keyof Theme['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'];
-    /** Border radius of the card */
-    radius?: keyof Theme['radius'];
-    /** Shadow depth of the card */
-    shadow?: keyof Theme['shadows'];
-    /** Alignment of items on the cross axis */
-    align?: StackAlign;
-    /** Justification of items on the main axis */
-    justify?: StackJustify;
-};
-export type CardStyleParams = {
-    direction: CardDirection;
-    padding?: keyof Theme['spacing'];
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    gap?: keyof Theme['spacing'];
-    radius: keyof Theme['radius'];
-    shadow: keyof Theme['shadows'];
-    align?: StackAlign;
-    justify?: StackJustify;
-};

package/dist/esm/components/card/Card.styles.d.ts

@@ -1,7 +0,0 @@
-import { CardStyleParams } from '@components/card/Card.props';
-/**
- * Card styles using createStyles from @aurora-ds/theme
- */
-export declare const CARD_STYLES: {
-    root: (args_0: CardStyleParams) => string;
-};

package/dist/esm/components/card/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Card } from '@components/card/Card';
-export type { CardProps } from '@components/card/Card.props';

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

@@ -1,35 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from '@components/icon/Icon.props';
-/**
- * Icon component - Wrapper for SVG icons with theme-aware styling
- *
- * **Features:**
- * - Theme-aware sizing via font sizes
- * - Color and fill support from theme
- * - Optional background with padding and border radius
- * - Transition animation on color changes
- *
- * **Usage:**
- * ```tsx
- * import { SomeIcon } from 'some-icon-library'
- *
- * <Icon size="md" color="primary">
- *   <SomeIcon />
- * </Icon>
- * ```
- *
- * **With background:**
- * ```tsx
- * <Icon
- *   size="lg"
- *   color="onPrimary"
- *   backgroundColor="primary"
- *   padding="sm"
- *   borderRadius="full"
- * >
- *   <SomeIcon />
- * </Icon>
- * ```
- */
-declare const Icon: FC<IconProps>;
-export default Icon;

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

@@ -1,14 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { PropsWithChildren } from 'react';
-export type IconProps = PropsWithChildren<{
-    /** Icon size based on theme font sizes */
-    size?: keyof Theme['fontSize'];
-    /** Icon stroke/line color from theme */
-    color?: keyof Theme['colors'];
-    /** Background color from theme */
-    backgroundColor?: keyof Theme['colors'];
-    /** Padding from theme spacing */
-    padding?: keyof Theme['spacing'];
-    /** Border radius from theme */
-    borderRadius?: keyof Theme['radius'];
-}>;

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

@@ -1,3 +0,0 @@
-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;
-};

package/dist/esm/components/icon/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Icon } from '@components/icon/Icon';
-export type { IconProps } from '@components/icon/Icon.props';

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

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { IconButtonProps } from '@components/icon-button/IconButton.props.ts';
-declare const IconButton: FC<IconButtonProps>;
-export default IconButton;