@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    elevation?: 'base' | 'elevated' | 'interactive';
+    size?: 'compact' | 'normal' | 'spacious';
+    interactive?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    centered?: boolean;
+    textAlign?: 'left' | 'center' | 'right';
+    animateIn?: boolean;
+    animateOut?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    spacing?: 'compact' | 'normal' | 'spacious';
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    size?: 'small' | 'normal' | 'large';
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    size?: 'small' | 'normal';
+}
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    spacing?: 'compact' | 'normal' | 'spacious';
+}
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    layout?: 'horizontal' | 'vertical' | 'stacked' | 'justified' | 'centered';
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;IAC/E,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAA;IAC/C,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IACxC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,QAAA,MAAM,IAAI,kFAyDT,CAAA;AAGD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;CAC5C;AAED,QAAA,MAAM,UAAU,wFAmBf,CAAA;AAGD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC9E,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,QAAA,MAAM,SAAS,2FAmBd,CAAA;AAGD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,QAAA,MAAM,eAAe,mGAmBpB,CAAA;AAGD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;CAC5C;AAED,QAAA,MAAM,WAAW,yFAmBhB,CAAA;AAGD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;CAC1E;AAED,QAAA,MAAM,UAAU,wFAmBf,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,CAAA"}

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const Card = React.forwardRef(({ className, variant = 'default', elevation = 'base', size = 'normal', interactive = false, disabled = false, loading = false, fullWidth = false, centered = false, textAlign = 'left', animateIn = false, animateOut = false, ...props }, ref) => {
+    // Build semantic CSS classes using BEM methodology
+    const baseClass = 'card';
+    const variantClass = `card--variant-${variant}`;
+    const elevationClass = `card--elevation-${elevation}`;
+    const sizeClass = `card--size-${size}`;
+    const interactiveClass = interactive ? 'card--interactive' : '';
+    const disabledClass = disabled ? 'card--disabled' : '';
+    const loadingClass = loading ? 'card--loading' : '';
+    const fullWidthClass = fullWidth ? 'card--full-width' : '';
+    const centeredClass = centered ? 'card--centered' : '';
+    const textAlignClass = `card--text-${textAlign}`;
+    const animateInClass = animateIn ? 'card--animate-in' : '';
+    const animateOutClass = animateOut ? 'card--animate-out' : '';
+    // Combine classes
+    const cardClasses = [
+        baseClass,
+        variantClass,
+        elevationClass,
+        sizeClass,
+        interactiveClass,
+        disabledClass,
+        loadingClass,
+        fullWidthClass,
+        centeredClass,
+        textAlignClass,
+        animateInClass,
+        animateOutClass,
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: cardClasses, ...props }));
+});
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, spacing = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__header';
+    const spacingClass = `card__header--spacing-${spacing}`;
+    // Combine classes
+    const headerClasses = [baseClass, spacingClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: headerClasses, ...props }));
+});
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, size = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__title';
+    const sizeClass = `card__title--size-${size}`;
+    // Combine classes
+    const titleClasses = [baseClass, sizeClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("h3", { ref: ref, className: titleClasses, ...props }));
+});
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, size = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__description';
+    const sizeClass = `card__description--size-${size}`;
+    // Combine classes
+    const descriptionClasses = [baseClass, sizeClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("p", { className: descriptionClasses, ref: ref, ...props }));
+});
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, spacing = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__content';
+    const spacingClass = `card__content--spacing-${spacing}`;
+    // Combine classes
+    const contentClasses = [baseClass, spacingClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: contentClasses, ...props }));
+});
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, layout = 'horizontal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__footer';
+    const layoutClass = `card__footer--layout-${layout}`;
+    // Combine classes
+    const footerClasses = [baseClass, layoutClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: footerClasses, ...props }));
+});
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ui/card.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const Card = React.forwardRef(({ className, variant = 'default', elevation = 'base', size = 'normal', interactive = false, disabled = false, loading = false, fullWidth = false, centered = false, textAlign = 'left', animateIn = false, animateOut = false, ...props }, ref) => {
+    // Build semantic CSS classes using BEM methodology
+    const baseClass = 'card';
+    const variantClass = `card--variant-${variant}`;
+    const elevationClass = `card--elevation-${elevation}`;
+    const sizeClass = `card--size-${size}`;
+    const interactiveClass = interactive ? 'card--interactive' : '';
+    const disabledClass = disabled ? 'card--disabled' : '';
+    const loadingClass = loading ? 'card--loading' : '';
+    const fullWidthClass = fullWidth ? 'card--full-width' : '';
+    const centeredClass = centered ? 'card--centered' : '';
+    const textAlignClass = `card--text-${textAlign}`;
+    const animateInClass = animateIn ? 'card--animate-in' : '';
+    const animateOutClass = animateOut ? 'card--animate-out' : '';
+    // Combine classes
+    const cardClasses = [
+        baseClass,
+        variantClass,
+        elevationClass,
+        sizeClass,
+        interactiveClass,
+        disabledClass,
+        loadingClass,
+        fullWidthClass,
+        centeredClass,
+        textAlignClass,
+        animateInClass,
+        animateOutClass,
+        className
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: cardClasses, ...props }));
+});
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, spacing = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__header';
+    const spacingClass = `card__header--spacing-${spacing}`;
+    // Combine classes
+    const headerClasses = [baseClass, spacingClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: headerClasses, ...props }));
+});
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, size = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__title';
+    const sizeClass = `card__title--size-${size}`;
+    // Combine classes
+    const titleClasses = [baseClass, sizeClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("h3", { ref: ref, className: titleClasses, ...props }));
+});
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, size = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__description';
+    const sizeClass = `card__description--size-${size}`;
+    // Combine classes
+    const descriptionClasses = [baseClass, sizeClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("p", { className: descriptionClasses, ref: ref, ...props }));
+});
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, spacing = 'normal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__content';
+    const spacingClass = `card__content--spacing-${spacing}`;
+    // Combine classes
+    const contentClasses = [baseClass, spacingClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: contentClasses, ...props }));
+});
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, layout = 'horizontal', ...props }, ref) => {
+    // Build semantic CSS classes
+    const baseClass = 'card__footer';
+    const layoutClass = `card__footer--layout-${layout}`;
+    // Combine classes
+    const footerClasses = [baseClass, layoutClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ref: ref, className: footerClasses, ...props }));
+});
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    size?: 'small' | 'default' | 'large';
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAG7D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC;IAClG,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,QAAQ,yFAkBZ,CAAA;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAA"}

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+const Checkbox = React.forwardRef(({ className, size = 'default', ...props }, ref) => {
+    const sizeClass = size !== 'default' ? `checkbox--size-${size}` : '';
+    const checkmarkSize = size === 'small' ? 'h-3 w-3' : size === 'large' ? 'h-5 w-5' : 'h-4 w-4';
+    return (_jsx(CheckboxPrimitive.Root, { ref: ref, className: `checkbox ${sizeClass} ${className || ''}`, ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "checkbox__indicator", children: _jsx(Check, { className: `checkbox__checkmark ${checkmarkSize}` }) }) }));
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+const Checkbox = React.forwardRef(({ className, size = 'default', ...props }, ref) => {
+    const sizeClass = size !== 'default' ? `checkbox--size-${size}` : '';
+    const checkmarkSize = size === 'small' ? 'h-3 w-3' : size === 'large' ? 'h-5 w-5' : 'h-4 w-4';
+    return (_jsx(CheckboxPrimitive.Root, { ref: ref, className: `checkbox ${sizeClass} ${className || ''}`, ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: "checkbox__indicator", children: _jsx(Check, { className: `checkbox__checkmark ${checkmarkSize}` }) }) }));
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export { Checkbox };

package/dist/components/ui/color-preview.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ColorScale, SemanticColors } from '../../themes/types.js';
+export interface ColorPreviewProps {
+    colorScale?: ColorScale;
+    semanticColors?: SemanticColors;
+    scaleName?: string;
+    showAccessibility?: boolean;
+    className?: string;
+}
+export declare const ColorPreview: React.FC<ColorPreviewProps>;
+export interface ColorShowcaseProps {
+    showAccessibility?: boolean;
+    className?: string;
+}
+export declare const ColorShowcase: React.FC<ColorShowcaseProps>;
+//# sourceMappingURL=color-preview.d.ts.map

package/dist/components/ui/color-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ui/color-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGnE,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6RpD,CAAC;AAGF,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsGtD,CAAC"}

package/dist/components/ui/color-preview.esm.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+;
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { useTheme } from '../../themes';
+import { ColorManager } from '../../themes/colorManager.js';
+export const ColorPreview = ({ colorScale, semanticColors, scaleName = 'Color Scale', showAccessibility = true, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    // Use provided colors or get from current theme
+    const colors = colorScale || currentThemeConfig?.colors.primary;
+    const semantic = semanticColors || currentThemeConfig?.colors.semantic;
+    // Type guard to ensure semantic colors are strings
+    const isStringColor = (color) => typeof color === 'string' && color.length > 0;
+    if (!colors) {
+        return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "p-4", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Color configuration not available" }) }) }));
+    }
+    // Color scale shades
+    const scaleShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { children: scaleName }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Badge, { variant: "outline", className: "text-xs", children: [scaleShades.length, " shades"] }), showAccessibility && (_jsx(Badge, { variant: "secondary", className: "text-xs", children: "WCAG AA/AAA" }))] })] }), _jsx(CardDescription, { children: "Color scale with accessibility information and contrast ratios" })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Color Scale" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: scaleShades.map(shade => {
+                                    const color = colors[shade];
+                                    if (!color)
+                                        return null;
+                                    const accessibility = showAccessibility
+                                        ? ColorManager.checkColorContrast(color, '#ffffff')
+                                        : null;
+                                    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-mono font-medium", children: shade }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color }), showAccessibility && accessibility && (_jsxs("div", { className: "mt-1", children: [_jsxs(Badge, { variant: accessibility.aa ? 'default' : 'destructive', className: "text-xs", children: [accessibility.contrastRatio.toFixed(1), ":1"] }), _jsxs("div", { className: "text-xs mt-1", children: [accessibility.aa ? 'AA' : 'Fail', accessibility.aaa && ' AAA'] })] }))] })] }, shade));
+                                }) }), (colors.light || colors.dark || colors.contrast) && (_jsxs("div", { className: "mt-4", children: [_jsx("h5", { className: "text-sm font-medium mb-2", children: "Additional Variations" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: [colors.light && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: colors.light } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium", children: "Light" }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: colors.light })] })] })), colors.dark && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: colors.dark } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium", children: "Dark" }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: colors.dark })] })] })), colors.contrast && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: colors.contrast } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium", children: "Contrast" }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: colors.contrast })] })] }))] })] }))] }), semantic && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Semantic Colors" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: Object.entries(semantic).map(([name, color]) => {
+                                    if (!isStringColor(color) || name.includes('Light') || name.includes('Dark'))
+                                        return null;
+                                    const accessibility = showAccessibility
+                                        ? ColorManager.checkColorContrast(color, '#ffffff')
+                                        : null;
+                                    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium capitalize", children: name.replace(/([A-Z])/g, ' $1').trim() }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color }), showAccessibility && accessibility && (_jsx("div", { className: "mt-1", children: _jsxs(Badge, { variant: accessibility.aa ? 'default' : 'destructive', className: "text-xs", children: [accessibility.contrastRatio.toFixed(1), ":1"] }) }))] })] }, name));
+                                }) }), _jsxs("div", { className: "mt-4", children: [_jsx("h5", { className: "text-sm font-medium mb-2", children: "Semantic Variants" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: Object.entries(semantic).map(([name, color]) => {
+                                            if (!isStringColor(color) || !name.includes('Light') && !name.includes('Dark'))
+                                                return null;
+                                            return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium capitalize", children: name.replace(/([A-Z])/g, ' $1').trim() }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color })] })] }, name));
+                                        }) })] })] })), showAccessibility && (_jsxs("div", { className: "pt-4 border-t", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Accessibility Information" }), _jsxs("div", { className: "space-y-2 text-xs text-muted-foreground", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "default", className: "text-xs", children: "AA" }), _jsx("span", { children: "WCAG AA standard: 4.5:1 contrast ratio" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "secondary", className: "text-xs", children: "AAA" }), _jsx("span", { children: "WCAG AAA standard: 7:1 contrast ratio" })] }), _jsxs("div", { className: "text-xs", children: [_jsx("strong", { children: "Note:" }), " Colors are tested against white background. For dark themes, test against appropriate dark backgrounds."] })] })] })), _jsxs("div", { className: "pt-4 border-t", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Usage Examples" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "p-3 rounded-lg border", style: { backgroundColor: colors[100] }, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h5", { className: "font-medium", style: { color: colors[900] }, children: "Primary Color Usage" }), _jsx("p", { className: "text-sm", style: { color: colors[700] }, children: "This is an example of how the primary color scale can be used for text and backgrounds." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { style: { backgroundColor: colors[500], color: '#ffffff' }, children: "Primary Button" }), _jsx(Badge, { variant: "outline", style: { borderColor: colors[500], color: colors[700] }, children: "Secondary Button" })] })] }) }), semantic && (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx("div", { className: "p-3 rounded-lg border", style: { backgroundColor: semantic.successLight }, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h5", { className: "font-medium", style: { color: semantic.successDark }, children: "Success State" }), _jsx("p", { className: "text-sm", style: { color: semantic.success }, children: "This shows how semantic colors can be used for different states." })] }) }), _jsx("div", { className: "p-3 rounded-lg border", style: { backgroundColor: semantic.errorLight }, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h5", { className: "font-medium", style: { color: semantic.errorDark }, children: "Error State" }), _jsx("p", { className: "text-sm", style: { color: semantic.error }, children: "Error messages and validation feedback use semantic colors." })] }) })] }))] })] })] })] }));
+};
+export const ColorShowcase = ({ showAccessibility = true, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    if (!currentThemeConfig?.colors) {
+        return (_jsx("div", { className: className, children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No color configuration available" }) }));
+    }
+    const { primary, secondary, semantic, neutral, surface, text } = currentThemeConfig.colors;
+    // Type guard to ensure colors are strings
+    const isStringColor = (color) => typeof color === 'string' && color.length > 0;
+    return (_jsxs("div", { className: `space-y-6 ${className}`, children: [_jsx(ColorPreview, { colorScale: primary, scaleName: "Primary Colors", showAccessibility: showAccessibility }), _jsx(ColorPreview, { colorScale: secondary, scaleName: "Secondary Colors", showAccessibility: showAccessibility }), _jsx(ColorPreview, { colorScale: neutral, scaleName: "Neutral Colors", showAccessibility: showAccessibility }), _jsx(ColorPreview, { semanticColors: semantic, scaleName: "Semantic Colors", showAccessibility: showAccessibility }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Surface & Text Colors" }), _jsx(CardDescription, { children: "Background, surface, and text color combinations" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium", children: "Surface Colors" }), _jsx("div", { className: "space-y-2", children: Object.entries(surface).map(([name, color]) => {
+                                                if (!isStringColor(color))
+                                                    return null;
+                                                return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-8 h-8 rounded border", style: { backgroundColor: color } }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium capitalize", children: name }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color })] })] }, name));
+                                            }) })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium", children: "Text Colors" }), _jsx("div", { className: "space-y-2", children: Object.entries(text).map(([name, color]) => {
+                                                if (!isStringColor(color))
+                                                    return null;
+                                                return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-8 h-8 rounded border", style: { backgroundColor: color } }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium capitalize", children: name }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color })] })] }, name));
+                                            }) })] })] }) })] })] }));
+};

package/dist/components/ui/color-preview.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+;
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { useTheme } from '../../themes';
+import { ColorManager } from '../../themes/colorManager.js';
+export const ColorPreview = ({ colorScale, semanticColors, scaleName = 'Color Scale', showAccessibility = true, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    // Use provided colors or get from current theme
+    const colors = colorScale || currentThemeConfig?.colors.primary;
+    const semantic = semanticColors || currentThemeConfig?.colors.semantic;
+    // Type guard to ensure semantic colors are strings
+    const isStringColor = (color) => typeof color === 'string' && color.length > 0;
+    if (!colors) {
+        return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "p-4", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Color configuration not available" }) }) }));
+    }
+    // Color scale shades
+    const scaleShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsx("span", { children: scaleName }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Badge, { variant: "outline", className: "text-xs", children: [scaleShades.length, " shades"] }), showAccessibility && (_jsx(Badge, { variant: "secondary", className: "text-xs", children: "WCAG AA/AAA" }))] })] }), _jsx(CardDescription, { children: "Color scale with accessibility information and contrast ratios" })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Color Scale" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-3", children: scaleShades.map(shade => {
+                                    const color = colors[shade];
+                                    if (!color)
+                                        return null;
+                                    const accessibility = showAccessibility
+                                        ? ColorManager.checkColorContrast(color, '#ffffff')
+                                        : null;
+                                    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-mono font-medium", children: shade }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color }), showAccessibility && accessibility && (_jsxs("div", { className: "mt-1", children: [_jsxs(Badge, { variant: accessibility.aa ? 'default' : 'destructive', className: "text-xs", children: [accessibility.contrastRatio.toFixed(1), ":1"] }), _jsxs("div", { className: "text-xs mt-1", children: [accessibility.aa ? 'AA' : 'Fail', accessibility.aaa && ' AAA'] })] }))] })] }, shade));
+                                }) }), (colors.light || colors.dark || colors.contrast) && (_jsxs("div", { className: "mt-4", children: [_jsx("h5", { className: "text-sm font-medium mb-2", children: "Additional Variations" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-3", children: [colors.light && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: colors.light } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium", children: "Light" }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: colors.light })] })] })), colors.dark && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: colors.dark } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium", children: "Dark" }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: colors.dark })] })] })), colors.contrast && (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: colors.contrast } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium", children: "Contrast" }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: colors.contrast })] })] }))] })] }))] }), semantic && (_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Semantic Colors" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: Object.entries(semantic).map(([name, color]) => {
+                                    if (!isStringColor(color) || name.includes('Light') || name.includes('Dark'))
+                                        return null;
+                                    const accessibility = showAccessibility
+                                        ? ColorManager.checkColorContrast(color, '#ffffff')
+                                        : null;
+                                    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium capitalize", children: name.replace(/([A-Z])/g, ' $1').trim() }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color }), showAccessibility && accessibility && (_jsx("div", { className: "mt-1", children: _jsxs(Badge, { variant: accessibility.aa ? 'default' : 'destructive', className: "text-xs", children: [accessibility.contrastRatio.toFixed(1), ":1"] }) }))] })] }, name));
+                                }) }), _jsxs("div", { className: "mt-4", children: [_jsx("h5", { className: "text-sm font-medium mb-2", children: "Semantic Variants" }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-3", children: Object.entries(semantic).map(([name, color]) => {
+                                            if (!isStringColor(color) || !name.includes('Light') && !name.includes('Dark'))
+                                                return null;
+                                            return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700", style: { backgroundColor: color } }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-xs font-medium capitalize", children: name.replace(/([A-Z])/g, ' $1').trim() }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color })] })] }, name));
+                                        }) })] })] })), showAccessibility && (_jsxs("div", { className: "pt-4 border-t", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Accessibility Information" }), _jsxs("div", { className: "space-y-2 text-xs text-muted-foreground", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "default", className: "text-xs", children: "AA" }), _jsx("span", { children: "WCAG AA standard: 4.5:1 contrast ratio" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "secondary", className: "text-xs", children: "AAA" }), _jsx("span", { children: "WCAG AAA standard: 7:1 contrast ratio" })] }), _jsxs("div", { className: "text-xs", children: [_jsx("strong", { children: "Note:" }), " Colors are tested against white background. For dark themes, test against appropriate dark backgrounds."] })] })] })), _jsxs("div", { className: "pt-4 border-t", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Usage Examples" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "p-3 rounded-lg border", style: { backgroundColor: colors[100] }, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h5", { className: "font-medium", style: { color: colors[900] }, children: "Primary Color Usage" }), _jsx("p", { className: "text-sm", style: { color: colors[700] }, children: "This is an example of how the primary color scale can be used for text and backgrounds." }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Badge, { style: { backgroundColor: colors[500], color: '#ffffff' }, children: "Primary Button" }), _jsx(Badge, { variant: "outline", style: { borderColor: colors[500], color: colors[700] }, children: "Secondary Button" })] })] }) }), semantic && (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx("div", { className: "p-3 rounded-lg border", style: { backgroundColor: semantic.successLight }, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h5", { className: "font-medium", style: { color: semantic.successDark }, children: "Success State" }), _jsx("p", { className: "text-sm", style: { color: semantic.success }, children: "This shows how semantic colors can be used for different states." })] }) }), _jsx("div", { className: "p-3 rounded-lg border", style: { backgroundColor: semantic.errorLight }, children: _jsxs("div", { className: "space-y-2", children: [_jsx("h5", { className: "font-medium", style: { color: semantic.errorDark }, children: "Error State" }), _jsx("p", { className: "text-sm", style: { color: semantic.error }, children: "Error messages and validation feedback use semantic colors." })] }) })] }))] })] })] })] }));
+};
+export const ColorShowcase = ({ showAccessibility = true, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    if (!currentThemeConfig?.colors) {
+        return (_jsx("div", { className: className, children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No color configuration available" }) }));
+    }
+    const { primary, secondary, semantic, neutral, surface, text } = currentThemeConfig.colors;
+    // Type guard to ensure colors are strings
+    const isStringColor = (color) => typeof color === 'string' && color.length > 0;
+    return (_jsxs("div", { className: `space-y-6 ${className}`, children: [_jsx(ColorPreview, { colorScale: primary, scaleName: "Primary Colors", showAccessibility: showAccessibility }), _jsx(ColorPreview, { colorScale: secondary, scaleName: "Secondary Colors", showAccessibility: showAccessibility }), _jsx(ColorPreview, { colorScale: neutral, scaleName: "Neutral Colors", showAccessibility: showAccessibility }), _jsx(ColorPreview, { semanticColors: semantic, scaleName: "Semantic Colors", showAccessibility: showAccessibility }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Surface & Text Colors" }), _jsx(CardDescription, { children: "Background, surface, and text color combinations" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium", children: "Surface Colors" }), _jsx("div", { className: "space-y-2", children: Object.entries(surface).map(([name, color]) => {
+                                                if (!isStringColor(color))
+                                                    return null;
+                                                return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-8 h-8 rounded border", style: { backgroundColor: color } }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium capitalize", children: name }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color })] })] }, name));
+                                            }) })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "text-sm font-medium", children: "Text Colors" }), _jsx("div", { className: "space-y-2", children: Object.entries(text).map(([name, color]) => {
+                                                if (!isStringColor(color))
+                                                    return null;
+                                                return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-8 h-8 rounded border", style: { backgroundColor: color } }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium capitalize", children: name }), _jsx("div", { className: "text-xs text-muted-foreground font-mono", children: color })] })] }, name));
+                                            }) })] })] }) })] })] }));
+};

package/dist/components/ui/data-display/chart.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartProps } from './types.js';
+export declare const Chart: React.FC<ChartProps>;
+export default Chart;
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/ui/data-display/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/data-display/chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,UAAU,EAEX,MAAM,YAAY,CAAC;AA4epB,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyJtC,CAAC;AAEF,eAAe,KAAK,CAAC"}