@aurora-ds/components 0.25.1 → 1.0.0

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

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

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

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

package/dist/esm/components/foundation/text/utils/getTextVariantStyles.utils.d.ts

@@ -1,7 +0,0 @@
-import { ThemeContract } from '@/interfaces';
-import { TextVariants, TextVariantStyle } from '@interfaces/text.types.ts';
-/**
- * Get text variant styles based on the theme
- * @param theme
- */
-export declare const getTextVariantStyles: (theme: ThemeContract) => Record<TextVariants, TextVariantStyle>;

package/dist/esm/components/foundation/text/utils/getTruncateTextStyles.utils.d.ts

@@ -1,21 +0,0 @@
-export declare const getTruncateTextStyles: (maxLines: number) => {
-    whiteSpace: "nowrap";
-    overflow: string;
-    textOverflow: string;
-    display?: undefined;
-    WebkitLineClamp?: undefined;
-    WebkitBoxOrient?: undefined;
-    overflowWrap?: undefined;
-    wordBreak?: undefined;
-    lineClamp?: undefined;
-} | {
-    overflow: string;
-    textOverflow: string;
-    display: string;
-    WebkitLineClamp: number;
-    WebkitBoxOrient: "vertical";
-    whiteSpace: "normal";
-    overflowWrap: "break-word";
-    wordBreak: "break-word";
-    lineClamp: number;
-};

package/dist/esm/components/foundation/text/utils/parseTextWithBold.utils.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * Parses text content and converts **bold** syntax to <strong> elements
- * @param children - The content to parse (string or ReactNode)
- * @returns Parsed content with bold text wrapped in <strong> elements
- */
-export declare const parseTextWithBold: (children: ReactNode) => ReactNode;

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

@@ -1,35 +0,0 @@
-export * from '@components/foundation/icon';
-export * from '@components/foundation/text';
-export * from '@components/data-display/status';
-export * from '@components/data-display/avatar';
-export * from '@components/data-display/skeleton';
-export * from '@components/actions/button';
-export * from '@components/actions/icon-button';
-export * from '@components/actions/button-toggle';
-export * from '@components/forms/form';
-export * from '@components/forms/input';
-export * from '@components/forms/textarea';
-export * from '@components/forms/select';
-export * from '@components/forms/date-picker';
-export * from '@components/forms/file-picker';
-export * from '@components/forms/image-picker';
-export * from '@components/layout/box';
-export * from '@components/layout/stack';
-export * from '@components/layout/card';
-export * from '@components/layout/grid';
-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/alert';
-export * from '@components/overlay/menu';
-export * from '@components/overlay/modal';
-export * from '@components/navigation/drawer-item';
-export * from '@components/navigation/breadcrumb';
-export * from '@components/navigation/tabs';
-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 { StatusVariant, StatusColor, StatusSize } from '@interfaces/status.types';
-export type { SelectOption } from '@interfaces/select.types';

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

@@ -1,12 +0,0 @@
-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/esm/components/inputs/button/Button.props.d.ts

@@ -1,28 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-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;
-    /** Custom text color (overrides variant color) */
-    textColor?: keyof Theme['colors'];
-};
-export type ButtonStyleParams = {
-    variant?: ButtonVariants;
-    active?: boolean;
-    textColor?: keyof Theme['colors'];
-};

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

@@ -1,18 +0,0 @@
-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/esm/components/inputs/button/index.d.ts

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

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

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

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

@@ -1,27 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { ReactNode } from 'react';
-import { ButtonVariants, IconButtonSizes } 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;
-    /** Custom text/icon color (overrides variant color) */
-    textColor?: keyof Theme['colors'];
-    /** Size of the icon button */
-    size?: IconButtonSizes;
-};
-export type IconButtonStyleParams = {
-    variant?: ButtonVariants;
-    active?: boolean;
-    size?: IconButtonSizes;
-    textColor?: keyof Theme['colors'];
-};

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

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

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

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

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

@@ -1,6 +0,0 @@
-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/esm/components/inputs/input/Input.props.d.ts

@@ -1,17 +0,0 @@
-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/esm/components/inputs/input/Input.styles.d.ts

@@ -1,7 +0,0 @@
-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/esm/components/inputs/input/index.d.ts

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

package/dist/esm/components/layout/accordion/Accordion.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { AccordionProps } from '@components/layout/accordion/Accordion.props.ts';
-/**
- * Accordion component
- *
- * A collapsible container that can show/hide content.
- * Supports controlled and uncontrolled modes.
- */
-declare const Accordion: FC<AccordionProps>;
-export default Accordion;

package/dist/esm/components/layout/accordion/Accordion.props.d.ts

@@ -1,36 +0,0 @@
-import { Theme } from '@aurora-ds/theme';
-import { CSSProperties, ReactNode } from 'react';
-export type AccordionProps = {
-    /** Title displayed in the accordion header */
-    title: string;
-    /** Content to show/hide when accordion is expanded */
-    children: ReactNode;
-    /** Whether the accordion is expanded */
-    expanded?: boolean;
-    /** Default expanded state (for uncontrolled mode) */
-    defaultExpanded?: boolean;
-    /** Callback fired when the accordion expands or collapses */
-    onChange?: (expanded: boolean) => void;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Optional icon to display before title */
-    icon?: ReactNode;
-    /** Optional background color */
-    backgroundColor?: keyof Theme['colors'];
-    /** Optional width */
-    width?: CSSProperties['width'];
-};
-export type AccordionStyleParams = {
-    disabled: boolean;
-    width?: CSSProperties['width'];
-};
-export type AccordionHeaderStyleParams = {
-    disabled: boolean;
-    backgroundColor?: keyof Theme['colors'];
-};
-export type AccordionContentStyleParams = {
-    expanded: boolean;
-};
-export type AccordionIconStyleParams = {
-    expanded: boolean;
-};

package/dist/esm/components/layout/accordion/Accordion.styles.d.ts

@@ -1,7 +0,0 @@
-import { AccordionContentStyleParams, AccordionHeaderStyleParams, AccordionIconStyleParams, AccordionStyleParams } from '@components/layout/accordion/Accordion.props.ts';
-export declare const ACCORDION_STYLES: {
-    root: (args_0: AccordionStyleParams) => string;
-    header: (args_0: AccordionHeaderStyleParams) => string;
-    expandIcon: (args_0: AccordionIconStyleParams) => string;
-    content: (args_0: AccordionContentStyleParams) => string;
-};

package/dist/esm/components/layout/accordion/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Accordion } from '@components/layout/accordion/Accordion.tsx';
-export type { AccordionProps } from '@components/layout/accordion/Accordion.props.ts';

package/dist/esm/components/layout/box/Box.d.ts

@@ -1,23 +0,0 @@
-import { FC } from 'react';
-import { BoxProps } from '@components/layout/box/Box.props';
-/**
- * Box component
- *
- * A versatile container component that acts as a flexible div with extensive styling props.
- * Perfect for layout composition, spacing control, and creating custom containers.
- *
- * **Common use cases:**
- * - Layout containers with specific dimensions
- * - Spacing and positioning elements
- * - Creating flexible layouts with flexbox
- * - Wrapping content with background colors or borders
- *
- * @example
- * ```tsx
- * <Box width="300px" height="200px" padding="md" backgroundColor="surface">
- *   Content here
- * </Box>
- * ```
- */
-declare const Box: FC<BoxProps>;
-export default Box;

package/dist/esm/components/layout/box/Box.props.d.ts

@@ -1,139 +0,0 @@
-import { CSSProperties, DragEvent, ReactNode } from 'react';
-import { ThemeContract } from '@/interfaces';
-export type BoxProps = {
-    /** Box children elements */
-    children?: ReactNode;
-    /** Width of the box */
-    width?: CSSProperties['width'];
-    /** Height of the box */
-    height?: CSSProperties['height'];
-    /** Minimum width */
-    minWidth?: CSSProperties['minWidth'];
-    /** Minimum height */
-    minHeight?: CSSProperties['minHeight'];
-    /** Maximum width */
-    maxWidth?: CSSProperties['maxWidth'];
-    /** Maximum height */
-    maxHeight?: CSSProperties['maxHeight'];
-    /** Padding inside the box (theme spacing key) */
-    padding?: keyof ThemeContract['spacing'];
-    /** Margin around the box (theme spacing key) */
-    margin?: keyof ThemeContract['spacing'];
-    /** Background color of the box */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Border radius of the box */
-    radius?: keyof ThemeContract['radius'];
-    /** Display type */
-    display?: CSSProperties['display'];
-    /** Position type */
-    position?: CSSProperties['position'];
-    /** Top position */
-    top?: CSSProperties['top'];
-    /** Right position */
-    right?: CSSProperties['right'];
-    /** Bottom position */
-    bottom?: CSSProperties['bottom'];
-    /** Left position */
-    left?: CSSProperties['left'];
-    /** Overflow behavior */
-    overflow?: CSSProperties['overflow'];
-    /** Overflow X behavior */
-    overflowX?: CSSProperties['overflowX'];
-    /** Overflow Y behavior */
-    overflowY?: CSSProperties['overflowY'];
-    /** Border color */
-    borderColor?: keyof ThemeContract['colors'];
-    /** Border width */
-    borderWidth?: string;
-    /** Flex direction (when display is flex) */
-    flexDirection?: CSSProperties['flexDirection'];
-    /** Align items (when display is flex) */
-    alignItems?: CSSProperties['alignItems'];
-    /** Justify content (when display is flex) */
-    justifyContent?: CSSProperties['justifyContent'];
-    /** Gap between children (theme spacing key) */
-    gap?: keyof ThemeContract['spacing'];
-    /** Flex wrap */
-    flexWrap?: CSSProperties['flexWrap'];
-    /** Flex grow */
-    flexGrow?: CSSProperties['flexGrow'];
-    /** Flex shrink */
-    flexShrink?: CSSProperties['flexShrink'];
-    /** Flex basis */
-    flexBasis?: CSSProperties['flexBasis'];
-    /** Z-index */
-    zIndex?: CSSProperties['zIndex'];
-    /** Opacity */
-    opacity?: CSSProperties['opacity'];
-    /** Cursor */
-    cursor?: CSSProperties['cursor'];
-    /** Box shadow */
-    shadow?: keyof ThemeContract['shadows'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this box */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this box */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-    /** HTML id attribute */
-    id?: string;
-    /** onClick handler */
-    onClick?: () => void;
-    /** onMouseEnter handler */
-    onMouseEnter?: () => void;
-    /** onMouseLeave handler */
-    onMouseLeave?: () => void;
-    /** Drag over event handler */
-    onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag leave event handler */
-    onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drop event handler */
-    onDrop?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag start event handler */
-    onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag end event handler */
-    onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag enter event handler */
-    onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Whether the element is draggable */
-    draggable?: boolean;
-};
-export type BoxStyleParams = {
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    minWidth?: CSSProperties['minWidth'];
-    minHeight?: CSSProperties['minHeight'];
-    maxWidth?: CSSProperties['maxWidth'];
-    maxHeight?: CSSProperties['maxHeight'];
-    padding?: keyof ThemeContract['spacing'];
-    margin?: keyof ThemeContract['spacing'];
-    backgroundColor?: keyof ThemeContract['colors'];
-    radius?: keyof ThemeContract['radius'];
-    display?: CSSProperties['display'];
-    position?: CSSProperties['position'];
-    top?: CSSProperties['top'];
-    right?: CSSProperties['right'];
-    bottom?: CSSProperties['bottom'];
-    left?: CSSProperties['left'];
-    overflow?: CSSProperties['overflow'];
-    overflowX?: CSSProperties['overflowX'];
-    overflowY?: CSSProperties['overflowY'];
-    borderColor?: keyof ThemeContract['colors'];
-    borderWidth?: string;
-    flexDirection?: CSSProperties['flexDirection'];
-    alignItems?: CSSProperties['alignItems'];
-    justifyContent?: CSSProperties['justifyContent'];
-    gap?: keyof ThemeContract['spacing'];
-    flexWrap?: CSSProperties['flexWrap'];
-    flexGrow?: CSSProperties['flexGrow'];
-    flexShrink?: CSSProperties['flexShrink'];
-    flexBasis?: CSSProperties['flexBasis'];
-    zIndex?: CSSProperties['zIndex'];
-    opacity?: CSSProperties['opacity'];
-    cursor?: CSSProperties['cursor'];
-    shadow?: keyof ThemeContract['shadows'];
-};

package/dist/esm/components/layout/box/Box.styles.d.ts

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

package/dist/esm/components/layout/box/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Box } from '@components/layout/box/Box';
-export type { BoxProps } from '@components/layout/box/Box.props';

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

@@ -1,14 +0,0 @@
-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/esm/components/layout/card/Card.props.d.ts

@@ -1,68 +0,0 @@
-import { CSSProperties, DragEvent, 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 ThemeContract['spacing'];
-    /** Width of the card */
-    width?: CSSProperties['width'];
-    /** Height of the card */
-    height?: CSSProperties['height'];
-    /** Maximum height of the card */
-    maxHeight?: CSSProperties['maxHeight'];
-    /** Gap between children (theme spacing key) */
-    gap?: keyof ThemeContract['spacing'];
-    /** Border radius of the card */
-    radius?: keyof ThemeContract['radius'];
-    /** Shadow depth of the card */
-    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 ThemeContract['colors'];
-    /** Border color of the card */
-    borderColor?: keyof ThemeContract['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;
-    /** Drag over event handler */
-    onDragOver?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag leave event handler */
-    onDragLeave?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drop event handler */
-    onDrop?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag start event handler */
-    onDragStart?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag end event handler */
-    onDragEnd?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Drag enter event handler */
-    onDragEnter?: (event: DragEvent<HTMLDivElement>) => void;
-    /** Whether the element is draggable */
-    draggable?: boolean;
-};
-export type CardStyleParams = {
-    direction: CSSProperties['flexDirection'];
-    padding?: keyof ThemeContract['spacing'];
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    maxHeight?: CSSProperties['maxHeight'];
-    gap?: keyof ThemeContract['spacing'];
-    radius: keyof ThemeContract['radius'];
-    shadow: keyof ThemeContract['shadows'];
-    align?: CSSProperties['alignItems'];
-    justify?: CSSProperties['justifyContent'];
-    backgroundColor: keyof ThemeContract['colors'];
-    borderColor?: keyof ThemeContract['colors'];
-};

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

@@ -1,7 +0,0 @@
-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/esm/components/layout/card/index.d.ts

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

package/dist/esm/components/layout/grid/Grid.d.ts

@@ -1,15 +0,0 @@
-import { FC } from 'react';
-import { GridProps } from '@components/layout/grid/Grid.props.ts';
-/**
- * Grid component
- *
- * A CSS Grid container for laying out children in a two-dimensional grid.
- *
- * **Usage:**
- * - Use `columns` to define the number of columns or a custom grid-template-columns value
- * - Use `rows` to define the number of rows or a custom grid-template-rows value
- * - Use `minChildWidth` for responsive auto-fill grids
- * - Combine `columns` + `minChildWidth` for responsive grid with max columns limit
- */
-declare const Grid: FC<GridProps>;
-export default Grid;

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

@@ -1,57 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { ThemeContract } from '@/interfaces';
-export type GridProps = {
-    /** Grid children elements */
-    children: ReactNode;
-    /** Number of columns. Acts as max columns when minChildWidth is set for responsive behavior. */
-    columns?: number;
-    /** Number of rows. */
-    rows?: number;
-    /** Gap between columns (theme spacing key) */
-    columnGap?: keyof ThemeContract['spacing'];
-    /** Gap between rows (theme spacing key) */
-    rowGap?: keyof ThemeContract['spacing'];
-    /** Width of the grid container */
-    width?: CSSProperties['width'];
-    /** Height of the grid container */
-    height?: CSSProperties['height'];
-    /** Minimum height of the grid container */
-    minHeight?: CSSProperties['minHeight'];
-    /** Alignment of items within their grid area (cross axis) */
-    alignItems?: CSSProperties['alignItems'];
-    /** Justification of items within their grid area (main axis) */
-    justifyItems?: CSSProperties['justifyItems'];
-    /** Alignment of the entire grid within its container (cross axis) */
-    alignContent?: CSSProperties['alignContent'];
-    /** Justification of the entire grid within its container (main axis) */
-    justifyContent?: CSSProperties['justifyContent'];
-    /** Padding inside the grid */
-    padding?: keyof ThemeContract['spacing'];
-    /** Minimum width for each grid child. Enables responsive auto-fill behavior. */
-    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;
-    rows?: number;
-    columnGap?: keyof ThemeContract['spacing'];
-    rowGap?: keyof ThemeContract['spacing'];
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    minHeight?: CSSProperties['minHeight'];
-    alignItems?: CSSProperties['alignItems'];
-    justifyItems?: CSSProperties['justifyItems'];
-    alignContent?: CSSProperties['alignContent'];
-    justifyContent?: CSSProperties['justifyContent'];
-    padding?: keyof ThemeContract['spacing'];
-    minChildWidth?: CSSProperties['width'];
-};