@aurora-ds/components 0.6.7 → 0.10.0

package/README.md

@@ -48,7 +48,9 @@ function App() {
 |-----------|-------------|
 | **Accordion** | Collapsible container to show/hide content |
 | **Button** | Button with variants (contained, outlined, text), icons, and states |
+| **Breadcrumb** | Navigation component for hierarchical page structures |
 | **IconButton** | Icon-only button component |
+| **Input** | Input field component with controlled value and change handler |
 | **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 |

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 } 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?: () => 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 { ReactNode } from 'react';
+import { IconButtonSizes, IconButtonVariants } from '@/interfaces';
+export type IconButtonProps = {
+    /** IconButton icon */
+    icon?: ReactNode;
+    /** Click handler */
+    onClick?: () => 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/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,19 @@
-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/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/page-construction/page-section';
+export * from '@components/layout/page-construction/page';
+export * from '@components/overlay/accordion';
 export * from '@components/navigation/drawer-item';
+export * from '@components/navigation/breadcrumb';
 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/button/Button.props.d.ts

@@ -24,4 +24,5 @@ export type ButtonProps = {
 export type ButtonStyleParams = {
     variant?: ButtonVariants;
     active?: boolean;
+    textColor?: keyof Theme['colors'];
 };

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

@@ -23,4 +23,5 @@ export type IconButtonStyleParams = {
     variant?: ButtonVariants;
     active?: boolean;
     size?: IconButtonSizes;
+    textColor?: keyof Theme['colors'];
 };

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';

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

@@ -25,6 +25,16 @@ export type CardProps = {
     backgroundColor?: keyof Theme['colors'];
     /** Border color of the card */
     borderColor?: keyof Theme['colors'];
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this card */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this card */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
 };
 export type CardStyleParams = {
     direction: CSSProperties['flexDirection'];

package/dist/cjs/components/layout/grid/Grid.props.d.ts

@@ -29,6 +29,16 @@ export type GridProps = {
     padding?: keyof Theme['spacing'];
     /** Minimum width for auto-fill/auto-fit columns */
     minChildWidth?: CSSProperties['width'];
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this grid */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this grid */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
 };
 export type GridStyleParams = {
     columns?: number | string;

package/dist/cjs/components/layout/page-construction/page/Page.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { PageProps } from '@components/layout/page-construction/page/Page.props.ts';
+/**
+ * Page component
+ *
+ * A layout component that provides consistent page structure with optional footer.
+ * Supports customization of dimensions, background, and content constraints.
+ */
+declare const Page: FC<PageProps>;
+export default Page;

package/dist/cjs/components/layout/page-construction/page/Page.props.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties, ReactNode } from 'react';
+export type PageProps = {
+    /** Page content */
+    children: ReactNode;
+    /** Optional footer component */
+    footer?: ReactNode;
+    /** Maximum width of the page content (default: 100%) */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** Background color */
+    backgroundColor?: CSSProperties['backgroundColor'];
+    /** Padding around the page */
+    padding?: CSSProperties['padding'];
+    /** Custom className for additional styling */
+    className?: string;
+    /** Accessibility label for screen readers */
+    ariaLabel?: string;
+    /** ID of element that labels this page */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this page */
+    ariaDescribedBy?: string;
+    /** ARIA role */
+    role?: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+};
+export type PageStyleParams = {
+    maxWidth?: CSSProperties['maxWidth'];
+    backgroundColor?: CSSProperties['backgroundColor'];
+    padding?: CSSProperties['padding'];
+};

package/dist/cjs/components/layout/page-construction/page/Page.styles.d.ts

@@ -0,0 +1,5 @@
+import { PageStyleParams } from '@components/layout/page-construction/page/Page.props.ts';
+export declare const PAGE_STYLES: {
+    root: (args_0: PageStyleParams) => string;
+    children: (args_0: PageStyleParams) => string;
+};

package/dist/cjs/components/layout/page-construction/page/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Page } from '@components/layout/page-construction/page/Page';
+export type { PageProps } from '@components/layout/page-construction/page/Page.props';

package/dist/cjs/components/layout/page-construction/page-section/PageSection.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { PageSectionProps } from '@components/layout/page-construction/page-section/PageSection.props.ts';
+/**
+ * PageSection component
+ *
+ * A layout component that provides consistent spacing and alignment for page sections.
+ * Supports customization of gap, padding, alignment, min height and max width.
+ */
+declare const PageSection: FC<PageSectionProps>;
+export default PageSection;