@aurora-ds/components 0.1.0 → 0.2.1

package/README.md

@@ -51,6 +51,7 @@ function App() {
 | **Text** | Typography component with semantic HTML tags (h1-h6, p, span, label) |
 | **Stack** | Flexbox container for horizontal/vertical layouts |
 | **Card** | Container with background, border radius, and shadow |
+| **Chip** | Compact element for tags, labels, or status indicators |
 | **Icon** | Icon wrapper component |
 
 ## License

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

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

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

@@ -0,0 +1,27 @@
+import { Theme } from '@aurora-ds/theme';
+import { ReactNode } from 'react';
+import { ChipColor, ChipSize, ChipVariant } from '@interfaces/chip.types';
+export type ChipProps = {
+    /** Text label to display */
+    label?: string;
+    /** Icon to display before the label */
+    icon?: ReactNode;
+    /** Chip variant style */
+    variant?: ChipVariant;
+    /** Chip color from theme */
+    color?: ChipColor;
+    /** Chip size */
+    size?: ChipSize;
+    /** Gap between icon and text (theme spacing key) */
+    gap?: keyof Theme['spacing'];
+    /** Border radius from theme */
+    radius?: keyof Theme['radius'];
+};
+export type ChipStyleParams = {
+    variant: ChipVariant;
+    color: ChipColor;
+    size: ChipSize;
+    isIconOnly: boolean;
+    gap?: keyof Theme['spacing'];
+    radius?: keyof Theme['radius'];
+};

package/dist/cjs/components/data-display/chip/Chip.styles.d.ts

@@ -0,0 +1,4 @@
+import { ChipStyleParams } from '@components/data-display/chip/Chip.props';
+export declare const CHIP_STYLES: {
+    root: (args_0: ChipStyleParams) => string;
+};

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

@@ -0,0 +1,2 @@
+export { default as Chip } from '@components/data-display/chip/Chip';
+export type { ChipProps } from '@components/data-display/chip/Chip.props';

package/dist/cjs/components/data-display/icon/Icon.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { IconProps } from '@components/data-display/icon/Icon.props.ts';
+/**
+ * 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/data-display/icon/Icon.props.d.ts

@@ -0,0 +1,14 @@
+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/data-display/icon/Icon.styles.d.ts

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

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

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

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

@@ -1,10 +1,12 @@
-export * from '@components/icon';
-export * from '@components/text';
-export * from '@components/button';
-export * from '@components/icon-button';
-export * from '@components/stack';
-export * from '@components/card';
+export * from '@components/data-display/icon';
+export * from '@components/data-display/chip';
+export * from '@components/layout/text';
+export * from '@components/inputs/button';
+export * from '@components/inputs/icon-button';
+export * from '@components/layout/stack';
+export * from '@components/layout/card';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 export type { StackDirection, StackAlign, StackJustify, StackWrap } from '@interfaces/stack.types';
 export type { CardDirection } from '@interfaces/card.types';
+export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { ButtonProps } from '@components/inputs/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/inputs/button/Button.props.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ButtonVariants } from '@interfaces/button.types.ts';
+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/inputs/button/Button.styles.d.ts

@@ -0,0 +1,18 @@
+import { ButtonStyleParams } from '@components/inputs/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/inputs/button/index.d.ts

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

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

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

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

@@ -0,0 +1,20 @@
+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/inputs/icon-button/IconButton.styles.d.ts

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

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

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

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

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { CardProps } from '@components/layout/card/Card.props.ts';
+/**
+ * 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/layout/card/Card.props.d.ts

@@ -0,0 +1,43 @@
+import { Theme } from '@aurora-ds/theme';
+import { CSSProperties, ReactNode } from 'react';
+import { CardDirection } from '@interfaces/card.types.ts';
+import { StackAlign, StackJustify } from '@interfaces/stack.types.ts';
+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;
+    /** Background color of the card */
+    backgroundColor?: keyof Theme['colors'];
+    /** Border color of the card */
+    borderColor?: keyof Theme['colors'];
+};
+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;
+    backgroundColor: keyof Theme['colors'];
+    borderColor?: keyof Theme['colors'];
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { StackProps } from '@components/layout/stack/Stack.props.ts';
+/**
+ * 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/layout/stack/Stack.props.d.ts

@@ -0,0 +1,33 @@
+import { Theme } from '@aurora-ds/theme';
+import { CSSProperties, ReactNode } from 'react';
+import { StackAlign, StackDirection, StackJustify, StackWrap } from '@interfaces/stack.types.ts';
+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/layout/stack/Stack.styles.d.ts

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

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

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

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { TextProps } from '@components/layout/text/Text.props.ts';
+/**
+ * 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/layout/text/Text.props.d.ts

@@ -0,0 +1,22 @@
+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'];
+    /** Font size from theme (overrides variant fontSize if provided) */
+    fontSize?: keyof Theme['fontSize'];
+    /** 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'];
+    fontSize?: keyof Theme['fontSize'];
+    maxLines?: number;
+    underline?: boolean;
+};

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

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

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

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