@brycks/core-front 0.2.7 → 0.2.9

package/dist/layout.d.ts

@@ -0,0 +1,543 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { CSSProperties } from 'react';
+import { default as default_2 } from 'react';
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Article: ForwardRefExoticComponent<SemanticProps & RefAttributes<HTMLElement>>;
+
+export declare type ArticleProps = SemanticProps;
+
+export declare const Aside: ForwardRefExoticComponent<AsideProps & RefAttributes<HTMLElement>>;
+
+export declare interface AsideProps extends SemanticProps {
+    'aria-label'?: string;
+}
+
+export declare const AspectRatio: ForwardRefExoticComponent<AspectRatioProps & RefAttributes<HTMLDivElement>>;
+
+/** Common aspect ratio presets */
+export declare type AspectRatioPreset = '1:1' | '4:3' | '3:2' | '16:9' | '21:9' | '2:3' | '3:4' | '9:16';
+
+export declare interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Aspect ratio as a preset string or custom number.
+     * Number represents width/height (e.g., 16/9 = 1.777...)
+     * @default '16:9'
+     */
+    ratio?: AspectRatioPreset | number;
+    /** Content to render inside the ratio container */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const Box: BoxComponent;
+
+declare interface BoxComponent {
+    <E extends ElementType = 'div'>(props: BoxProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface BoxOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Display property */
+    display?: CSSProperties['display'];
+    /** Position property */
+    position?: CSSProperties['position'];
+    /** Width */
+    width?: CSSProperties['width'];
+    /** Height */
+    height?: CSSProperties['height'];
+    /** Min width */
+    minWidth?: CSSProperties['minWidth'];
+    /** Max width */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** Min height */
+    minHeight?: CSSProperties['minHeight'];
+    /** Max height */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** Overflow */
+    overflow?: CSSProperties['overflow'];
+    /** Background color (CSS variable or direct value) */
+    bg?: string;
+    /** Border radius */
+    radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    /** Box shadow */
+    shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type BoxProps<E extends ElementType = 'div'> = BoxOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof BoxOwnProps>;
+
+export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
+export declare const CardBody: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show a divider above the footer */
+    divider?: boolean;
+    /** Footer alignment */
+    align?: 'left' | 'center' | 'right' | 'between';
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show a divider below the header */
+    divider?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Card variant */
+    variant?: CardVariant;
+    /** Card padding */
+    padding?: CardPadding;
+    /** Whether the card is interactive (adds hover effect) */
+    interactive?: boolean;
+    /** Whether the card is selected */
+    selected?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost';
+
+export declare const Container: ContainerComponent;
+
+declare interface ContainerComponent {
+    <E extends ElementType = 'div'>(props: ContainerProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface ContainerOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Container size / max-width */
+    size?: keyof typeof containers;
+    /** Whether to center the container */
+    centered?: boolean;
+    /** Whether to add default horizontal padding */
+    padded?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ContainerProps<E extends ElementType = 'div'> = ContainerOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof ContainerOwnProps>;
+
+/** Container max-widths aligned with breakpoints */
+declare const containers: {
+    readonly xs: 320;
+    readonly sm: 480;
+    readonly md: 640;
+    readonly lg: 768;
+    readonly xl: 1024;
+    readonly '2xl': 1280;
+    readonly '3xl': 1440;
+    readonly full: "100%";
+};
+
+export declare const Flex: ForwardRefExoticComponent<FlexProps & RefAttributes<HTMLDivElement>>;
+
+declare type FlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
+declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+export declare const FlexItem: ForwardRefExoticComponent<FlexItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex grow */
+    grow?: number;
+    /** Flex shrink */
+    shrink?: number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Align self */
+    alignSelf?: FlexAlign;
+    /** Order */
+    order?: number;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}
+
+declare type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+
+export declare interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Flex wrap */
+    wrap?: FlexWrap;
+    /** Justify content */
+    justify?: FlexJustify;
+    /** Align items */
+    align?: FlexAlign;
+    /** Gap between items */
+    gap?: SpacingKey_3;
+    /** Row gap */
+    rowGap?: SpacingKey_3;
+    /** Column gap */
+    columnGap?: SpacingKey_3;
+    /** Whether to display inline */
+    inline?: boolean;
+    /** Flex grow */
+    grow?: number;
+    /** Flex shrink */
+    shrink?: number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}
+
+declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+export declare const Footer: ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>>;
+
+export declare interface FooterProps extends SemanticProps {
+    role?: 'contentinfo' | 'none';
+}
+
+export declare const Grid: GridComponent;
+
+declare interface GridComponent {
+    <E extends ElementType = 'div'>(props: GridProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare const GridItem: GridItemComponent;
+
+declare interface GridItemComponent {
+    <E extends ElementType = 'div'>(props: GridItemProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+/** Grid Item Component */
+export declare interface GridItemOwnProps {
+    /** Column span */
+    colSpan?: number | 'full';
+    /** Row span */
+    rowSpan?: number;
+    /** Column start */
+    colStart?: number;
+    /** Column end */
+    colEnd?: number;
+    /** Row start */
+    rowStart?: number;
+    /** Row end */
+    rowEnd?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type GridItemProps<E extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof GridItemOwnProps> & {
+    as?: E;
+};
+
+export declare interface GridOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Number of columns */
+    columns?: number | string;
+    /** Number of rows */
+    rows?: number | string;
+    /** Gap between items */
+    gap?: SpacingKey;
+    /** Column gap */
+    gapX?: SpacingKey;
+    /** Row gap */
+    gapY?: SpacingKey;
+    /** Align items */
+    align?: CSSProperties['alignItems'];
+    /** Justify items */
+    justify?: CSSProperties['justifyItems'];
+    /** Template columns (CSS value) */
+    templateColumns?: string;
+    /** Template rows (CSS value) */
+    templateRows?: string;
+    /** Auto flow */
+    flow?: CSSProperties['gridAutoFlow'];
+    /** Whether to render as inline-grid */
+    inline?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type GridProps<E extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof GridOwnProps>;
+
+export declare const Header: ForwardRefExoticComponent<HeaderProps & RefAttributes<HTMLElement>>;
+
+export declare interface HeaderProps extends SemanticProps {
+    role?: 'banner' | 'none';
+}
+
+export declare const HStack: StackComponent;
+
+export declare const Main: ForwardRefExoticComponent<MainProps & RefAttributes<HTMLElement>>;
+
+export declare interface MainProps extends SemanticProps {
+    id?: string;
+}
+
+export declare const Nav: ForwardRefExoticComponent<NavProps & RefAttributes<HTMLElement>>;
+
+export declare interface NavProps extends SemanticProps {
+    'aria-label'?: string;
+}
+
+export declare const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Section title */
+    title?: ReactNode;
+    /** Section description */
+    description?: ReactNode;
+    /** Title level for accessibility */
+    titleLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Spacing between sections */
+    spacing?: SectionSpacing;
+    /** Whether to show a divider above the section */
+    divider?: boolean;
+    /** Actions to display in the header (right side) */
+    actions?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+declare interface SemanticProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}
+
+export declare const Spacer: ForwardRefExoticComponent<SpacerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fixed size in spacing tokens */
+    size?: SpacingKey_2;
+    /** Custom size in pixels */
+    customSize?: number;
+    /** Whether to expand to fill available space (flex: 1) */
+    flex?: boolean;
+    /** Direction of the spacer */
+    direction?: 'horizontal' | 'vertical';
+    /** Custom class name */
+    className?: string;
+}
+
+declare type Spacing = typeof spacing;
+
+/** Spacing scale - values in pixels */
+declare const spacing: {
+    /** 0px */
+    readonly 0: 0;
+    /** 1px - hairline */
+    readonly px: 1;
+    /** 2px - micro */
+    readonly 0.5: number;
+    /** 4px - tiny */
+    readonly 1: 4;
+    /** 6px */
+    readonly 1.5: number;
+    /** 8px - extra small */
+    readonly 2: number;
+    /** 10px */
+    readonly 2.5: number;
+    /** 12px - small */
+    readonly 3: number;
+    /** 14px */
+    readonly 3.5: number;
+    /** 16px - medium (base) */
+    readonly 4: number;
+    /** 20px */
+    readonly 5: number;
+    /** 24px - large */
+    readonly 6: number;
+    /** 28px */
+    readonly 7: number;
+    /** 32px - extra large */
+    readonly 8: number;
+    /** 36px */
+    readonly 9: number;
+    /** 40px */
+    readonly 10: number;
+    /** 44px */
+    readonly 11: number;
+    /** 48px - 2x large */
+    readonly 12: number;
+    /** 56px */
+    readonly 14: number;
+    /** 64px - 3x large */
+    readonly 16: number;
+    /** 80px */
+    readonly 20: number;
+    /** 96px - 4x large */
+    readonly 24: number;
+    /** 112px */
+    readonly 28: number;
+    /** 128px */
+    readonly 32: number;
+    /** 160px */
+    readonly 40: number;
+    /** 192px */
+    readonly 48: number;
+    /** 224px */
+    readonly 56: number;
+    /** 256px */
+    readonly 64: number;
+    /** 320px */
+    readonly 80: number;
+    /** 384px */
+    readonly 96: number;
+};
+
+declare type SpacingKey = keyof Spacing;
+
+declare type SpacingKey_2 = keyof typeof spacing;
+
+declare type SpacingKey_3 = keyof typeof spacing;
+
+/** Spacing props for components */
+declare interface SpacingProps {
+    /** Margin all sides */
+    m?: SpacingKey;
+    /** Margin horizontal (left + right) */
+    mx?: SpacingKey;
+    /** Margin vertical (top + bottom) */
+    my?: SpacingKey;
+    /** Margin top */
+    mt?: SpacingKey;
+    /** Margin right */
+    mr?: SpacingKey;
+    /** Margin bottom */
+    mb?: SpacingKey;
+    /** Margin left */
+    ml?: SpacingKey;
+    /** Padding all sides */
+    p?: SpacingKey;
+    /** Padding horizontal (left + right) */
+    px?: SpacingKey;
+    /** Padding vertical (top + bottom) */
+    py?: SpacingKey;
+    /** Padding top */
+    pt?: SpacingKey;
+    /** Padding right */
+    pr?: SpacingKey;
+    /** Padding bottom */
+    pb?: SpacingKey;
+    /** Padding left */
+    pl?: SpacingKey;
+}
+
+export declare const Stack: StackComponent;
+
+declare interface StackComponent {
+    <E extends ElementType = 'div'>(props: StackProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface StackOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Stack direction */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Gap between items */
+    gap?: SpacingKey;
+    /** Horizontal gap (for row direction) */
+    gapX?: SpacingKey;
+    /** Vertical gap (for column direction) */
+    gapY?: SpacingKey;
+    /** Align items */
+    align?: CSSProperties['alignItems'];
+    /** Justify content */
+    justify?: CSSProperties['justifyContent'];
+    /** Flex wrap */
+    wrap?: CSSProperties['flexWrap'];
+    /** Whether to render as inline-flex */
+    inline?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type StackProps<E extends ElementType = 'div'> = StackOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof StackOwnProps>;
+
+export declare const VStack: StackComponent;
+
+export { }