@aurora-ds/components 0.6.8 → 0.14.0

package/README.md

@@ -47,13 +47,26 @@ function App() {
 | Component | Description |
 |-----------|-------------|
 | **Accordion** | Collapsible container to show/hide content |
+| **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 |
-| **IconButton** | Icon-only button component |
-| **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 |
+| **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 |
+| **Separator** | Visual separator component |
+| **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 |
 
 ## License
 

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

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

@@ -0,0 +1,41 @@
+import { Theme } from '@aurora-ds/theme';
+import { ReactNode, MouseEvent } from 'react';
+import { ButtonVariants, IconButtonSizes } 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?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    /** Visual variant of the button */
+    variant?: ButtonVariants;
+    /** Button type attribute */
+    type?: 'button' | 'submit';
+    /** Active/pressed state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom text color (overrides variant color) */
+    textColor?: keyof Theme['colors'];
+    /** Size of the button */
+    size?: IconButtonSizes;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this button */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this button */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+};
+export type ButtonStyleParams = {
+    variant?: ButtonVariants;
+    active?: boolean;
+    textColor?: keyof Theme['colors'];
+    size?: IconButtonSizes;
+};

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { Theme } from '@aurora-ds/theme';
+import { MouseEvent, ReactNode } from 'react';
+import { IconButtonSizes, IconButtonVariants } from '@/interfaces';
+export type IconButtonProps = {
+    /** IconButton icon */
+    icon?: ReactNode;
+    /** Click handler */
+    onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    /** Visual variant of the button */
+    variant?: IconButtonVariants;
+    /** Button type attribute */
+    type?: 'button' | 'submit';
+    /** Active/pressed state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom text/icon color (overrides variant color) */
+    textColor?: keyof Theme['colors'];
+    /** Size of the icon button */
+    size?: IconButtonSizes;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this button */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this button */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+};
+export type IconButtonStyleParams = {
+    variant?: IconButtonVariants;
+    active?: boolean;
+    size?: IconButtonSizes;
+    textColor?: keyof Theme['colors'];
+};

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

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

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

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

package/dist/cjs/components/data-display/avatar/Avatar.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AvatarProps } from '@components/data-display/avatar/Avatar.props.ts';
+/**
+ * Avatar component
+ *
+ * Displays a user's avatar with optional image or fallback text.
+ */
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/dist/cjs/components/data-display/avatar/Avatar.props.d.ts

@@ -0,0 +1,25 @@
+import { MouseEvent } from 'react';
+import { AvatarSize } from '@interfaces/avatar.types.ts';
+export type AvatarProps = {
+    /** Image source URL */
+    image?: string;
+    /** Fallback text to display when no image */
+    label?: string;
+    /** Click handler */
+    onClick?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    /** Size of the avatar */
+    size?: AvatarSize;
+    /** Text color for the label */
+    color?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Background color */
+    backgroundColor?: string;
+};
+export type AvatarStyleParams = {
+    hasImage?: boolean;
+    size?: AvatarSize;
+    color?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+};

package/dist/cjs/components/data-display/avatar/Avatar.styles.d.ts

@@ -0,0 +1,10 @@
+import { AvatarStyleParams } from '@components/data-display/avatar/Avatar.props.ts';
+/**
+ * Avatar styles using createStyles from @aurora-ds/theme
+ */
+export declare const AVATAR_STYLES: {
+    root: (args_0: AvatarStyleParams & {
+        clickable?: boolean;
+    }) => string;
+    image: string;
+};

package/dist/cjs/components/data-display/avatar/AvatarGroup.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AvatarGroupProps } from '@components/data-display/avatar/Avatar.props.ts';
+/**
+ * AvatarGroup component
+ *
+ * Groups multiple avatars with optional compact overlapping and limit.
+ */
+declare const AvatarGroup: FC<AvatarGroupProps>;
+export default AvatarGroup;

package/dist/cjs/components/data-display/avatar/avatar-group/AvatarGroup.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AvatarGroupProps } from '@/components';
+/**
+ * AvatarGroup component
+ *
+ * Groups multiple avatars with overlapping display and optional limit.
+ */
+declare const AvatarGroup: FC<AvatarGroupProps>;
+export default AvatarGroup;

package/dist/cjs/components/data-display/avatar/avatar-group/AvatarGroup.props.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { AvatarSize } from '@/interfaces';
+export type AvatarGroupProps = {
+    /** Avatar children */
+    children: ReactNode;
+    /** Maximum number of avatars to display */
+    limit?: number;
+    /** Size of the avatars in the group */
+    size?: AvatarSize;
+};

package/dist/cjs/components/data-display/avatar/avatar-group/AvatarGroup.styles.d.ts

@@ -0,0 +1,14 @@
+import { AvatarSize } from '@/interfaces';
+/**
+ * AvatarGroup styles using createStyles from @aurora-ds/theme
+ */
+export declare const AVATAR_GROUP_STYLES: {
+    root: string;
+    child: (args_0: {
+        size?: AvatarSize;
+    }) => string;
+    firstChild: string;
+    more: (args_0: {
+        size?: AvatarSize;
+    }) => string;
+};

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

@@ -0,0 +1,4 @@
+export { default as Avatar } from '@components/data-display/avatar/Avatar.tsx';
+export { default as AvatarGroup } from '@components/data-display/avatar/avatar-group/AvatarGroup.tsx';
+export type { AvatarProps } from '@components/data-display/avatar/Avatar.props.ts';
+export type { AvatarGroupProps } from '@components/data-display/avatar/avatar-group/AvatarGroup.props.ts';

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

@@ -18,6 +18,16 @@ export type ChipProps = {
     radius?: keyof Theme['radius'];
     /** Disabled state */
     disabled?: boolean;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this chip */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this chip */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
 };
 export type ChipStyleParams = {
     variant: ChipVariant;

package/dist/cjs/components/forms/form/Form.d.ts

@@ -0,0 +1,3 @@
+import { FormProps } from '@components/forms/form/Form.props';
+declare const _default: import("react").NamedExoticComponent<FormProps>;
+export default _default;

package/dist/cjs/components/forms/form/Form.props.d.ts

@@ -0,0 +1,9 @@
+import { FormEvent, ReactNode } from 'react';
+export type FormProps = {
+    /** Form content (inputs, buttons, etc.) */
+    children: ReactNode;
+    /** Callback fired when the form is submitted (preventDefault is called automatically) */
+    onSubmit?: (e: FormEvent) => void;
+    /** Accessibility label for the form */
+    ariaLabel?: string;
+};

package/dist/cjs/components/forms/form/Form.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const FORM_STYLES: {
+    root: string;
+};

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

@@ -0,0 +1,2 @@
+export { default as Form } from '@components/forms/form/Form';
+export type { FormProps } from '@components/forms/form/Form.props';

package/dist/cjs/components/forms/input/Input.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from '@components/forms/input/Input.props.ts';
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>>;
+export default _default;

package/dist/cjs/components/forms/input/Input.props.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties, ReactNode } from 'react';
+export type InputProps = {
+    /** The value of the input */
+    value: string;
+    /** Callback fired when the value changes */
+    onChange: (value: string) => void;
+    /** Label displayed above the input */
+    label?: string;
+    /** Whether the field is mandatory (displays an asterisk next to the label) */
+    mandatory?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Input type */
+    type?: 'text' | 'password' | 'email' | 'number';
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Icon to display before the input */
+    startIcon?: ReactNode;
+    /** Icon to display after the input */
+    endIcon?: ReactNode;
+    /** Custom width for the input */
+    width?: CSSProperties['width'];
+};
+export type InputStyleParams = {
+    disabled?: boolean;
+    hasStartIcon?: boolean;
+    hasEndIcon?: boolean;
+    hasPasswordToggle?: boolean;
+    width?: CSSProperties['width'];
+};

package/dist/cjs/components/forms/input/Input.styles.d.ts

@@ -0,0 +1,15 @@
+import { InputStyleParams } from '@components/forms/input/Input.props.ts';
+import type { CSSProperties } from 'react';
+/**
+ * Input styles using createStyles from @aurora-ds/theme
+ */
+export declare const INPUT_STYLES: {
+    container: (args_0: {
+        width?: CSSProperties["width"];
+    }) => string;
+    startIcon: string;
+    endIcon: string;
+    endIconShifted: string;
+    passwordToggle: string;
+    root: (args_0: InputStyleParams) => string;
+};

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

@@ -0,0 +1,2 @@
+export { default as Input } from '@components/forms/input/Input.tsx';
+export type { InputProps } from '@components/forms/input/Input.props.ts';

package/dist/cjs/components/forms/textarea/TextArea.d.ts

@@ -0,0 +1,3 @@
+import { TextAreaProps } from '@components/forms/textarea/TextArea.props.ts';
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>>;
+export default _default;

package/dist/cjs/components/forms/textarea/TextArea.props.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+export type TextAreaProps = {
+    /** The value of the textarea */
+    value: string;
+    /** Callback fired when the value changes */
+    onChange: (value: string) => void;
+    /** Label displayed above the textarea */
+    label?: string;
+    /** Whether the field is mandatory (displays an asterisk next to the label) */
+    mandatory?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Custom width for the textarea */
+    width?: CSSProperties['width'];
+    /** Minimum number of visible text lines (auto-expands with content) */
+    minRows?: number;
+    /** Maximum number of visible text lines (adds scroll when exceeded) */
+    maxRows?: number;
+};
+export type TextAreaStyleParams = {
+    disabled?: boolean;
+    width?: CSSProperties['width'];
+};

package/dist/cjs/components/forms/textarea/TextArea.styles.d.ts

@@ -0,0 +1,11 @@
+import { TextAreaStyleParams } from '@components/forms/textarea/TextArea.props.ts';
+import type { CSSProperties } from 'react';
+/**
+ * TextArea styles using createStyles from @aurora-ds/theme
+ */
+export declare const TEXTAREA_STYLES: {
+    container: (args_0: {
+        width?: CSSProperties["width"];
+    }) => string;
+    root: (args_0: TextAreaStyleParams) => string;
+};

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

@@ -0,0 +1,2 @@
+export { default as TextArea } from '@components/forms/textarea/TextArea.tsx';
+export type { TextAreaProps } from '@components/forms/textarea/TextArea.props.ts';

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

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

@@ -0,0 +1,24 @@
+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'];
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this icon */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this icon */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+}>;

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

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

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { TextProps } from '@components/foundation/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
+ * - Preserve whitespace with `preserveWhitespace` prop
+ * - Bold text with **double asterisks** syntax
+ */
+declare const Text: FC<TextProps>;
+export default Text;

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

@@ -0,0 +1,38 @@
+import { Theme } from '@aurora-ds/theme';
+import { PropsWithChildren } from 'react';
+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'];
+    /** Font size from theme (overrides variant fontSize if provided) */
+    fontSize?: keyof Theme['fontSize'];
+    /** Font family override (CSS value) */
+    fontFamily?: string;
+    /** Maximum number of lines before truncation with ellipsis */
+    maxLines?: number;
+    /** Add underline text decoration */
+    underline?: boolean;
+    /** Preserve whitespace and line breaks */
+    preserveWhitespace?: boolean;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this text */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this text */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+}>;
+export type TextStyleParams = {
+    variant?: TextVariants;
+    color?: keyof Theme['colors'];
+    fontSize?: keyof Theme['fontSize'];
+    fontFamily?: string;
+    maxLines?: number;
+    underline?: boolean;
+    preserveWhitespace?: boolean;
+};

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

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

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

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

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

@@ -1,13 +1,23 @@
-export * from '@components/data-display/icon';
+export * from '@components/foundation/icon';
+export * from '@components/foundation/text';
 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/data-display/avatar';
+export * from '@components/actions/button';
+export * from '@components/actions/icon-button';
+export * from '@components/forms/form';
+export * from '@components/forms/input';
+export * from '@components/forms/textarea';
 export * from '@components/layout/stack';
 export * from '@components/layout/card';
 export * from '@components/layout/grid';
-export * from '@components/layout/accordion';
+export * from '@components/layout/separator';
+export * from '@components/layout/page-construction/page-section';
+export * from '@components/layout/page-construction/page';
+export * from '@components/overlay/accordion';
+export * from '@components/overlay/menu';
 export * from '@components/navigation/drawer-item';
+export * from '@components/navigation/breadcrumb';
+export * from '@components/navigation/tabs';
 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';

package/dist/cjs/components/inputs/input/Input.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from '@components/inputs/input/Input.props.ts';
+/**
+ * Input component
+ */
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/cjs/components/inputs/input/Input.props.d.ts

@@ -0,0 +1,17 @@
+export type InputProps = {
+    /** The value of the input */
+    value: string;
+    /** Callback fired when the value changes */
+    onChange: (value: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Input type */
+    type?: 'text' | 'password' | 'email' | 'number';
+    /** Accessibility label */
+    ariaLabel?: string;
+};
+export type InputStyleParams = {
+    disabled?: boolean;
+};

package/dist/cjs/components/inputs/input/Input.styles.d.ts

@@ -0,0 +1,7 @@
+import { InputStyleParams } from '@components/inputs/input/Input.props.ts';
+/**
+ * Input styles using createStyles from @aurora-ds/theme
+ */
+export declare const INPUT_STYLES: {
+    root: (args_0: InputStyleParams) => string;
+};

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

@@ -0,0 +1,2 @@
+export { default as Input } from '@components/inputs/input/Input.tsx';
+export type { InputProps } from '@components/inputs/input/Input.props.ts';