@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.52 → 0.3.0

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to the harvey theme package will be documented in this file.
 
-## [0.2.52] - 2025-10-08
+## [0.3.0] - 2025-10-10
 
 ### Added
 - Initial release of harvey theme package

package/dist/components/ui/button.d.ts

@@ -1,7 +1,9 @@
 import * as React from "react";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg' | 'icon' | 'mobile';
+    size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | 'icon' | 'mobile';
+    /** Phase 2 Enhancement: Content density support for responsive design */
+    density?: 'compact' | 'comfortable' | 'spacious';
     asChild?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IAChF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAA;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAsBX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IAChF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAA;IAChE,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAA;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAuBX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/button.esm.js

@@ -2,14 +2,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-const Button = React.forwardRef(({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
+const Button = React.forwardRef(({ className, variant = 'default', size = 'default', density, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     // Build semantic CSS classes using BEM methodology
     const baseClass = 'button';
     const variantClass = `button--variant-${variant}`;
     const sizeClass = `button--size-${size}`;
+    const densityClass = density ? `button--density-${density}` : null;
     // Combine classes
-    const buttonClasses = [baseClass, variantClass, sizeClass, className]
+    const buttonClasses = [baseClass, variantClass, sizeClass, densityClass, className]
         .filter(Boolean)
         .join(' ');
     return (_jsx(Comp, { className: buttonClasses, ref: ref, ...props }));

package/dist/components/ui/button.js

@@ -2,14 +2,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-const Button = React.forwardRef(({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
+const Button = React.forwardRef(({ className, variant = 'default', size = 'default', density, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     // Build semantic CSS classes using BEM methodology
     const baseClass = 'button';
     const variantClass = `button--variant-${variant}`;
     const sizeClass = `button--size-${size}`;
+    const densityClass = density ? `button--density-${density}` : null;
     // Combine classes
-    const buttonClasses = [baseClass, variantClass, sizeClass, className]
+    const buttonClasses = [baseClass, variantClass, sizeClass, densityClass, className]
         .filter(Boolean)
         .join(' ');
     return (_jsx(Comp, { className: buttonClasses, ref: ref, ...props }));

package/dist/components/ui/layout/container.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Container Component
+ * Implements Phase 2 container max-widths and content width system
+ *
+ * Container Max-Widths:
+ * - xs: 100%, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1792px
+ *
+ * Content Width Patterns:
+ * - narrow: Optimal for reading content (65ch-75ch)
+ * - standard: General content (80%-90% width)
+ * - wide: Data/dashboards (90%-100% width)
+ */
+import * as React from 'react';
+export interface ContainerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    children: React.ReactNode;
+    type?: 'container' | 'content' | 'fluid';
+    width?: 'narrow' | 'standard' | 'wide' | 'full';
+    maxWidths?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+    };
+    padding?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+    };
+    centered?: boolean;
+    breakout?: boolean;
+    characterWidth?: {
+        min?: string;
+        max?: string;
+        optimal?: string;
+    };
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare const Container: React.FC<ContainerProps>;
+export interface ContentContainerProps extends Omit<ContainerProps, 'type' | 'width'> {
+    lineLength?: 'short' | 'optimal' | 'long';
+    textAlign?: 'left' | 'center' | 'justify';
+}
+export declare const ContentContainer: React.FC<ContentContainerProps>;
+export interface SectionContainerProps extends ContainerProps {
+    fullWidthBackground?: boolean;
+    backgroundVariant?: 'default' | 'muted' | 'accent' | 'inverse';
+}
+export declare const SectionContainer: React.FC<SectionContainerProps>;
+export default Container;
+//# sourceMappingURL=container.d.ts.map

package/dist/components/ui/layout/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layout/container.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACzF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IAGzC,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAGhD,SAAS,CAAC,EAAE;QACV,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,cAAc,CAAC,EAAE;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAGF,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAgED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgG9C,CAAC;AAGF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC3C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0C5D,CAAC;AAGF,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAE3D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0B5D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/ui/layout/container.esm.js

@@ -0,0 +1,173 @@
+/**
+ * Container Component
+ * Implements Phase 2 container max-widths and content width system
+ *
+ * Container Max-Widths:
+ * - xs: 100%, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1792px
+ *
+ * Content Width Patterns:
+ * - narrow: Optimal for reading content (65ch-75ch)
+ * - standard: General content (80%-90% width)
+ * - wide: Data/dashboards (90%-100% width)
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Default container max-widths (from implementation plan)
+const DEFAULT_CONTAINER_MAX_WIDTHS = {
+    xs: '100%',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    '3xl': '1792px'
+};
+// Default content width patterns (from implementation plan)
+const CONTENT_WIDTH_PATTERNS = {
+    narrow: {
+        xs: '100%',
+        sm: '100%',
+        md: '65ch',
+        lg: '70ch',
+        xl: '75ch',
+        '2xl': '75ch',
+        '3xl': '75ch'
+    },
+    standard: {
+        xs: '100%',
+        sm: '100%',
+        md: '90%',
+        lg: '85%',
+        xl: '80%',
+        '2xl': '80%',
+        '3xl': '80%'
+    },
+    wide: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '95%',
+        xl: '90%',
+        '2xl': '90%',
+        '3xl': '90%'
+    },
+    full: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '100%',
+        xl: '100%',
+        '2xl': '100%',
+        '3xl': '100%'
+    }
+};
+// Default padding configuration
+const DEFAULT_PADDING = {
+    xs: 'var(--cs-spacing-scale-md)',
+    sm: 'var(--cs-spacing-scale-lg)',
+    md: 'var(--cs-spacing-scale-xl)',
+    lg: 'var(--cs-spacing-scale-2xl)',
+    xl: 'var(--cs-spacing-scale-2xl)',
+    '2xl': 'var(--cs-spacing-scale-3xl)',
+    '3xl': 'var(--cs-spacing-scale-3xl)'
+};
+export const Container = ({ children, type = 'container', width = 'standard', maxWidths: customMaxWidths, padding: customPadding, centered = true, breakout = false, characterWidth, className = '', style: userStyle, as: Component = 'div', ...restProps }) => {
+    const testId = restProps['data-testid'] || 'container';
+    // Determine max-widths based on type and width
+    const maxWidths = React.useMemo(() => {
+        if (customMaxWidths) {
+            return customMaxWidths;
+        }
+        switch (type) {
+            case 'container':
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+            case 'content':
+                return CONTENT_WIDTH_PATTERNS[width];
+            case 'fluid':
+                return CONTENT_WIDTH_PATTERNS.full;
+            default:
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+        }
+    }, [type, width, customMaxWidths]);
+    // Determine padding
+    const padding = customPadding || DEFAULT_PADDING;
+    // Build CSS custom properties
+    const containerStyle = React.useMemo(() => {
+        const style = {};
+        // Set max-width configurations
+        Object.entries(maxWidths).forEach(([breakpoint, maxWidth]) => {
+            style[`--container-max-width-${breakpoint}`] = maxWidth;
+        });
+        // Set padding configurations
+        Object.entries(padding).forEach(([breakpoint, paddingValue]) => {
+            style[`--container-padding-${breakpoint}`] = paddingValue;
+        });
+        // Set character width constraints
+        if (characterWidth) {
+            if (characterWidth.min) {
+                style['--container-character-width-min'] = characterWidth.min;
+            }
+            if (characterWidth.max) {
+                style['--container-character-width-max'] = characterWidth.max;
+            }
+            if (characterWidth.optimal) {
+                style['--container-character-width-optimal'] = characterWidth.optimal;
+            }
+        }
+        return style;
+    }, [maxWidths, padding, characterWidth]);
+    // Build CSS classes
+    const containerClasses = React.useMemo(() => {
+        const baseClass = 'container';
+        const typeClass = `container--${type}`;
+        const widthClass = width !== 'standard' ? `container--width-${width}` : '';
+        const centeredClass = centered ? 'container--centered' : '';
+        const breakoutClass = breakout ? 'container--breakout' : '';
+        const characterWidthClass = characterWidth ? 'container--character-width' : '';
+        return [baseClass, typeClass, widthClass, centeredClass, breakoutClass, characterWidthClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [type, width, centered, breakout, characterWidth, className]);
+    // Merge user styles with container styles
+    const mergedStyle = React.useMemo(() => ({
+        ...containerStyle,
+        ...userStyle
+    }), [containerStyle, userStyle]);
+    return (_jsx(Component, { className: containerClasses, style: mergedStyle, "data-testid": testId, ...restProps, children: children }));
+};
+export const ContentContainer = ({ children, lineLength = 'optimal', textAlign = 'left', characterWidth: customCharacterWidth, style: userStyle, ...props }) => {
+    // Map line length to character widths
+    const characterWidth = React.useMemo(() => {
+        if (customCharacterWidth) {
+            return customCharacterWidth;
+        }
+        switch (lineLength) {
+            case 'short':
+                return { min: '45ch', max: '65ch', optimal: '55ch' };
+            case 'optimal':
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+            case 'long':
+                return { min: '75ch', max: '85ch', optimal: '80ch' };
+            default:
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+        }
+    }, [lineLength, customCharacterWidth]);
+    const mergedStyle = React.useMemo(() => ({
+        textAlign: textAlign,
+        ...userStyle
+    }), [textAlign, userStyle]);
+    return (_jsx(Container, { type: "content", width: "narrow", characterWidth: characterWidth, style: mergedStyle, ...props, children: children }));
+};
+export const SectionContainer = ({ children, fullWidthBackground = false, backgroundVariant = 'default', className = '', ...props }) => {
+    const sectionClasses = React.useMemo(() => {
+        const baseClass = 'section-container';
+        const backgroundClass = fullWidthBackground ? 'section-container--full-width-bg' : '';
+        const variantClass = backgroundVariant !== 'default' ? `section-container--${backgroundVariant}` : '';
+        return [baseClass, backgroundClass, variantClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [fullWidthBackground, backgroundVariant, className]);
+    return (_jsx(Container, { className: sectionClasses, as: "section", ...props, children: children }));
+};
+export default Container;

package/dist/components/ui/layout/container.js

@@ -0,0 +1,173 @@
+/**
+ * Container Component
+ * Implements Phase 2 container max-widths and content width system
+ *
+ * Container Max-Widths:
+ * - xs: 100%, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1792px
+ *
+ * Content Width Patterns:
+ * - narrow: Optimal for reading content (65ch-75ch)
+ * - standard: General content (80%-90% width)
+ * - wide: Data/dashboards (90%-100% width)
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Default container max-widths (from implementation plan)
+const DEFAULT_CONTAINER_MAX_WIDTHS = {
+    xs: '100%',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    '3xl': '1792px'
+};
+// Default content width patterns (from implementation plan)
+const CONTENT_WIDTH_PATTERNS = {
+    narrow: {
+        xs: '100%',
+        sm: '100%',
+        md: '65ch',
+        lg: '70ch',
+        xl: '75ch',
+        '2xl': '75ch',
+        '3xl': '75ch'
+    },
+    standard: {
+        xs: '100%',
+        sm: '100%',
+        md: '90%',
+        lg: '85%',
+        xl: '80%',
+        '2xl': '80%',
+        '3xl': '80%'
+    },
+    wide: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '95%',
+        xl: '90%',
+        '2xl': '90%',
+        '3xl': '90%'
+    },
+    full: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '100%',
+        xl: '100%',
+        '2xl': '100%',
+        '3xl': '100%'
+    }
+};
+// Default padding configuration
+const DEFAULT_PADDING = {
+    xs: 'var(--cs-spacing-scale-md)',
+    sm: 'var(--cs-spacing-scale-lg)',
+    md: 'var(--cs-spacing-scale-xl)',
+    lg: 'var(--cs-spacing-scale-2xl)',
+    xl: 'var(--cs-spacing-scale-2xl)',
+    '2xl': 'var(--cs-spacing-scale-3xl)',
+    '3xl': 'var(--cs-spacing-scale-3xl)'
+};
+export const Container = ({ children, type = 'container', width = 'standard', maxWidths: customMaxWidths, padding: customPadding, centered = true, breakout = false, characterWidth, className = '', style: userStyle, as: Component = 'div', ...restProps }) => {
+    const testId = restProps['data-testid'] || 'container';
+    // Determine max-widths based on type and width
+    const maxWidths = React.useMemo(() => {
+        if (customMaxWidths) {
+            return customMaxWidths;
+        }
+        switch (type) {
+            case 'container':
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+            case 'content':
+                return CONTENT_WIDTH_PATTERNS[width];
+            case 'fluid':
+                return CONTENT_WIDTH_PATTERNS.full;
+            default:
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+        }
+    }, [type, width, customMaxWidths]);
+    // Determine padding
+    const padding = customPadding || DEFAULT_PADDING;
+    // Build CSS custom properties
+    const containerStyle = React.useMemo(() => {
+        const style = {};
+        // Set max-width configurations
+        Object.entries(maxWidths).forEach(([breakpoint, maxWidth]) => {
+            style[`--container-max-width-${breakpoint}`] = maxWidth;
+        });
+        // Set padding configurations
+        Object.entries(padding).forEach(([breakpoint, paddingValue]) => {
+            style[`--container-padding-${breakpoint}`] = paddingValue;
+        });
+        // Set character width constraints
+        if (characterWidth) {
+            if (characterWidth.min) {
+                style['--container-character-width-min'] = characterWidth.min;
+            }
+            if (characterWidth.max) {
+                style['--container-character-width-max'] = characterWidth.max;
+            }
+            if (characterWidth.optimal) {
+                style['--container-character-width-optimal'] = characterWidth.optimal;
+            }
+        }
+        return style;
+    }, [maxWidths, padding, characterWidth]);
+    // Build CSS classes
+    const containerClasses = React.useMemo(() => {
+        const baseClass = 'container';
+        const typeClass = `container--${type}`;
+        const widthClass = width !== 'standard' ? `container--width-${width}` : '';
+        const centeredClass = centered ? 'container--centered' : '';
+        const breakoutClass = breakout ? 'container--breakout' : '';
+        const characterWidthClass = characterWidth ? 'container--character-width' : '';
+        return [baseClass, typeClass, widthClass, centeredClass, breakoutClass, characterWidthClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [type, width, centered, breakout, characterWidth, className]);
+    // Merge user styles with container styles
+    const mergedStyle = React.useMemo(() => ({
+        ...containerStyle,
+        ...userStyle
+    }), [containerStyle, userStyle]);
+    return (_jsx(Component, { className: containerClasses, style: mergedStyle, "data-testid": testId, ...restProps, children: children }));
+};
+export const ContentContainer = ({ children, lineLength = 'optimal', textAlign = 'left', characterWidth: customCharacterWidth, style: userStyle, ...props }) => {
+    // Map line length to character widths
+    const characterWidth = React.useMemo(() => {
+        if (customCharacterWidth) {
+            return customCharacterWidth;
+        }
+        switch (lineLength) {
+            case 'short':
+                return { min: '45ch', max: '65ch', optimal: '55ch' };
+            case 'optimal':
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+            case 'long':
+                return { min: '75ch', max: '85ch', optimal: '80ch' };
+            default:
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+        }
+    }, [lineLength, customCharacterWidth]);
+    const mergedStyle = React.useMemo(() => ({
+        textAlign: textAlign,
+        ...userStyle
+    }), [textAlign, userStyle]);
+    return (_jsx(Container, { type: "content", width: "narrow", characterWidth: characterWidth, style: mergedStyle, ...props, children: children }));
+};
+export const SectionContainer = ({ children, fullWidthBackground = false, backgroundVariant = 'default', className = '', ...props }) => {
+    const sectionClasses = React.useMemo(() => {
+        const baseClass = 'section-container';
+        const backgroundClass = fullWidthBackground ? 'section-container--full-width-bg' : '';
+        const variantClass = backgroundVariant !== 'default' ? `section-container--${backgroundVariant}` : '';
+        return [baseClass, backgroundClass, variantClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [fullWidthBackground, backgroundVariant, className]);
+    return (_jsx(Container, { className: sectionClasses, as: "section", ...props, children: children }));
+};
+export default Container;

package/dist/components/ui/layout/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Layout Components Index
+ * Exports all layout components for Phase 2 implementation
+ */
+export { ResponsiveGrid, ResponsiveGridItem } from './responsive-grid';
+export type { ResponsiveGridProps, ResponsiveGridItemProps } from './responsive-grid';
+export { Container, ContentContainer, SectionContainer } from './container';
+export type { ContainerProps, ContentContainerProps, SectionContainerProps } from './container';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layout/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEtF,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC5E,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/ui/layout/index.esm.js

@@ -0,0 +1,6 @@
+/**
+ * Layout Components Index
+ * Exports all layout components for Phase 2 implementation
+ */
+export { ResponsiveGrid, ResponsiveGridItem } from './responsive-grid';
+export { Container, ContentContainer, SectionContainer } from './container';

package/dist/components/ui/layout/index.js

@@ -0,0 +1,6 @@
+/**
+ * Layout Components Index
+ * Exports all layout components for Phase 2 implementation
+ */
+export { ResponsiveGrid, ResponsiveGridItem } from './responsive-grid';
+export { Container, ContentContainer, SectionContainer } from './container';

package/dist/components/ui/layout/responsive-grid.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Responsive Grid Component
+ * Implements Phase 2 responsive grid system as defined in the implementation plan
+ *
+ * Grid Progression:
+ * - xs: 1 column (Single column mobile)
+ * - sm: 2 columns (2 columns small tablet)
+ * - md: 2 columns (2 columns tablet)
+ * - lg: 3 columns (3 columns desktop)
+ * - xl: 4 columns (4 columns large desktop)
+ * - 2xl: 4 columns (4 columns ultra-wide)
+ * - 3xl: 5 columns (5 columns large displays)
+ *
+ * Gap Progression:
+ * - xs: 16px, sm: 20px, md: 24px, lg: 28px, xl: 32px, 2xl: 36px, 3xl: 40px
+ */
+import * as React from 'react';
+export interface ResponsiveGridProps {
+    children: React.ReactNode;
+    columns?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    gaps?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+    };
+    pattern?: 'default' | 'content' | 'dashboard' | 'gallery' | 'cards';
+    autoFit?: boolean;
+    minItemWidth?: string;
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+    'aria-label'?: string;
+    'data-testid'?: string;
+    className?: string;
+}
+export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;
+export interface ResponsiveGridItemProps {
+    children: React.ReactNode;
+    colSpan?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    rowSpan?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    colStart?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    rowStart?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    alignSelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch';
+    justifySelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const ResponsiveGridItem: React.FC<ResponsiveGridItemProps>;
+export default ResponsiveGrid;
+//# sourceMappingURL=responsive-grid.d.ts.map

package/dist/components/ui/layout/responsive-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layout/responsive-grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,IAAI,CAAC,EAAE;QACL,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IAGpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAGtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmExD,CAAC;AAGF,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,QAAQ,CAAC,EAAE;QACT,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,QAAQ,CAAC,EAAE;QACT,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC5D,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAG9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsEhE,CAAC;AAEF,eAAe,cAAc,CAAC"}