@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/components/ui/button.js

@@ -3,11 +3,17 @@ import { Slot } from "@radix-ui/react-slot"
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?}
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  size?: 'default' | 'sm' | 'lg' | 'icon' | 'mobile'
+  asChild?: boolean
+}
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot = 'button'
+    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}`
     

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

@@ -1,7 +1,18 @@
 import * as React from "react"
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?}
+  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
+}
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
   ({ 
@@ -24,8 +35,17 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     const variantClass = `card--variant-${variant}`
     const elevationClass = `card--elevation-${elevation}`
     const sizeClass = `card--size-${size}`
-    const interactiveClass = interactive ? 'card--interactive' = disabled ? 'card--disabled' = loading ? 'card--loading' = fullWidth ? 'card--full-width' = centered ? 'card--centered' = `card--text-${textAlign}`
-    const animateInClass = animateIn ? 'card--animate-in' = animateOut ? 'card--animate-out' = [
+    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,
@@ -55,7 +75,8 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 Card.displayName = "Card"
 
 export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  spacing?}
+  spacing?: 'compact' | 'normal' | 'spacious'
+}
 
 const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
   ({ className, spacing = 'normal', ...props }, ref) => {
@@ -80,7 +101,8 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
 CardHeader.displayName = "CardHeader"
 
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  size?}
+  size?: 'small' | 'normal' | 'large'
+}
 
 const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
   ({ className, size = 'normal', ...props }, ref) => {
@@ -105,7 +127,8 @@ const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
 CardTitle.displayName = "CardTitle"
 
 export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
-  size?}
+  size?: 'small' | 'normal'
+}
 
 const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(
   ({ className, size = 'normal', ...props }, ref) => {
@@ -130,7 +153,8 @@ const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionPr
 CardDescription.displayName = "CardDescription"
 
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  spacing?}
+  spacing?: 'compact' | 'normal' | 'spacious'
+}
 
 const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
   ({ className, spacing = 'normal', ...props }, ref) => {
@@ -155,7 +179,8 @@ const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
 CardContent.displayName = "CardContent"
 
 export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  layout?}
+  layout?: 'horizontal' | 'vertical' | 'stacked' | 'justified' | 'centered'
+}
 
 const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
   ({ className, layout = 'horizontal', ...props }, ref) => {

package/dist/components/ui/card.js

@@ -1,7 +1,18 @@
 import * as React from "react"
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?}
+  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
+}
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
   ({ 
@@ -24,8 +35,17 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     const variantClass = `card--variant-${variant}`
     const elevationClass = `card--elevation-${elevation}`
     const sizeClass = `card--size-${size}`
-    const interactiveClass = interactive ? 'card--interactive' = disabled ? 'card--disabled' = loading ? 'card--loading' = fullWidth ? 'card--full-width' = centered ? 'card--centered' = `card--text-${textAlign}`
-    const animateInClass = animateIn ? 'card--animate-in' = animateOut ? 'card--animate-out' = [
+    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,
@@ -55,7 +75,8 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
 Card.displayName = "Card"
 
 export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  spacing?}
+  spacing?: 'compact' | 'normal' | 'spacious'
+}
 
 const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
   ({ className, spacing = 'normal', ...props }, ref) => {
@@ -80,7 +101,8 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
 CardHeader.displayName = "CardHeader"
 
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  size?}
+  size?: 'small' | 'normal' | 'large'
+}
 
 const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
   ({ className, size = 'normal', ...props }, ref) => {
@@ -105,7 +127,8 @@ const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
 CardTitle.displayName = "CardTitle"
 
 export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
-  size?}
+  size?: 'small' | 'normal'
+}
 
 const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(
   ({ className, size = 'normal', ...props }, ref) => {
@@ -130,7 +153,8 @@ const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionPr
 CardDescription.displayName = "CardDescription"
 
 export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  spacing?}
+  spacing?: 'compact' | 'normal' | 'spacious'
+}
 
 const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
   ({ className, spacing = 'normal', ...props }, ref) => {
@@ -155,7 +179,8 @@ const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
 CardContent.displayName = "CardContent"
 
 export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  layout?}
+  layout?: 'horizontal' | 'vertical' | 'stacked' | 'justified' | 'centered'
+}
 
 const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
   ({ className, layout = 'horizontal', ...props }, ref) => {

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

@@ -3,15 +3,15 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
 export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-  size?;
+  size?: 'small' | 'default' | 'large';
 }
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxProps
 >(({ className, size = 'default', ...props }, ref) => {
-  const sizeClass = size !== 'default' ? `checkbox--size-${size}` ;
-  const checkmarkSize = size === 'small' ? 'h-3 w-3' === 'large' ? 'h-5 w-5' ;
+  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 (
     <CheckboxPrimitive.Root

package/dist/components/ui/checkbox.js

@@ -3,15 +3,15 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
 export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-  size?;
+  size?: 'small' | 'default' | 'large';
 }
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxProps
 >(({ className, size = 'default', ...props }, ref) => {
-  const sizeClass = size !== 'default' ? `checkbox--size-${size}` ;
-  const checkmarkSize = size === 'small' ? 'h-3 w-3' === 'large' ? 'h-5 w-5' ;
+  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 (
     <CheckboxPrimitive.Root

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

@@ -6,14 +6,14 @@ import { ColorScale, SemanticColors } from '../../themes/types';
 import { ColorManager } from '../../themes/colorManager';
 
 export interface ColorPreviewProps {
-  colorScale?;
-  semanticColors?;
-  scaleName?;
-  showAccessibility?;
-  className?;
+  colorScale?: ColorScale;
+  semanticColors?: SemanticColors;
+  scaleName?: string;
+  showAccessibility?: boolean;
+  className?: string;
 }
 
-export const ColorPreview= ({
+export const ColorPreview: React.FC<ColorPreviewProps> = ({
   colorScale,
   semanticColors,
   scaleName = 'Color Scale',
@@ -27,7 +27,7 @@ export const ColorPreview= ({
   const semantic = semanticColors || currentThemeConfig?.colors.semantic;
   
   // Type guard to ensure semantic colors are strings
-  const isStringColor = (color)=> 
+  const isStringColor = (color: unknown): color is string => 
     typeof color === 'string' && color.length > 0;
   
   if (!colors) {
@@ -70,18 +70,20 @@ export const ColorPreview= ({
         {/* Color Scale Preview */}
         <div>
           <h4 className="text-sm font-medium mb-3">Color Scale</h4>
-          <div className="grid grid-cols-2 md=> {
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+            {scaleShades.map(shade => {
               const color = colors[shade as keyof ColorScale];
               if (!color) return null;
               
               const accessibility = showAccessibility 
                 ? ColorManager.checkColorContrast(color, '#ffffff')
-                ;
+                : null;
               
               return (
                 <div key={shade} className="space-y-2">
                   <div 
-                    className="w-full h-16 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                    className="w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700"
+                    style={{ backgroundColor: color }}
                   />
                   <div className="text-center">
                     <div className="text-xs font-mono font-medium">{shade}</div>
@@ -89,11 +91,13 @@ export const ColorPreview= ({
                     {showAccessibility && accessibility && (
                       <div className="mt-1">
                         <Badge 
-                          variant={accessibility.aa ? 'default' } 
+                          variant={accessibility.aa ? 'default' : 'destructive'} 
                           className="text-xs"
                         >
-                          {accessibility.contrastRatio.toFixed(1)}="text-xs mt-1">
-                          {accessibility.aa ? 'AA' }
+                          {accessibility.contrastRatio.toFixed(1)}:1
+                        </Badge>
+                        <div className="text-xs mt-1">
+                          {accessibility.aa ? 'AA' : 'Fail'}
                           {accessibility.aaa && ' AAA'}
                         </div>
                       </div>
@@ -108,9 +112,12 @@ export const ColorPreview= ({
           {(colors.light || colors.dark || colors.contrast) && (
             <div className="mt-4">
               <h5 className="text-sm font-medium mb-2">Additional Variations</h5>
-              <div className="grid grid-cols-1 md="space-y-2">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                {colors.light && (
+                  <div className="space-y-2">
                     <div 
-                      className="w-full h-12 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                      className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: colors.light }}
                     />
                     <div className="text-center">
                       <div className="text-xs font-medium">Light</div>
@@ -122,7 +129,8 @@ export const ColorPreview= ({
                 {colors.dark && (
                   <div className="space-y-2">
                     <div 
-                      className="w-full h-12 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                      className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: colors.dark }}
                     />
                     <div className="text-center">
                       <div className="text-xs font-medium">Dark</div>
@@ -134,7 +142,8 @@ export const ColorPreview= ({
                 {colors.contrast && (
                   <div className="space-y-2">
                     <div 
-                      className="w-full h-12 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                      className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: colors.contrast }}
                     />
                     <div className="text-center">
                       <div className="text-xs font-medium">Contrast</div>
@@ -151,17 +160,19 @@ export const ColorPreview= ({
         {semantic && (
           <div>
             <h4 className="text-sm font-medium mb-3">Semantic Colors</h4>
-            <div className="grid grid-cols-2 md).map(([name, color]) => {
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              {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 (
                   <div key={name} className="space-y-2">
                     <div 
-                      className="w-full h-16 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                      className="w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: color }}
                     />
                     <div className="text-center">
                       <div className="text-xs font-medium capitalize">
@@ -171,10 +182,13 @@ export const ColorPreview= ({
                       {showAccessibility && accessibility && (
                         <div className="mt-1">
                           <Badge 
-                            variant={accessibility.aa ? 'default' } 
+                            variant={accessibility.aa ? 'default' : 'destructive'} 
                             className="text-xs"
                           >
-                            {accessibility.contrastRatio.toFixed(1)})}
+                            {accessibility.contrastRatio.toFixed(1)}:1
+                          </Badge>
+                        </div>
+                      )}
                     </div>
                   </div>
                 );
@@ -184,13 +198,15 @@ export const ColorPreview= ({
             {/* Light and Dark variants */}
             <div className="mt-4">
               <h5 className="text-sm font-medium mb-2">Semantic Variants</h5>
-              <div className="grid grid-cols-2 md).map(([name, color]) => {
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                {Object.entries(semantic).map(([name, color]) => {
                   if (!isStringColor(color) || !name.includes('Light') && !name.includes('Dark')) return null;
                   
                   return (
                     <div key={name} className="space-y-2">
                       <div 
-                        className="w-full h-12 rounded-lg border border-gray-200 dark={{ backgroundColor}}
+                        className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                        style={{ backgroundColor: color }}
                       />
                       <div className="text-center">
                         <div className="text-xs font-medium capitalize">
@@ -213,10 +229,15 @@ export const ColorPreview= ({
             <div className="space-y-2 text-xs text-muted-foreground">
               <div className="flex items-center gap-2">
                 <Badge variant="default" className="text-xs">AA</Badge>
-                <span>WCAG AA standard="flex items-center gap-2">
+                <span>WCAG AA standard: 4.5:1 contrast ratio</span>
+              </div>
+              <div className="flex items-center gap-2">
                 <Badge variant="secondary" className="text-xs">AAA</Badge>
-                <span>WCAG AAA standard="text-xs">
-                <strong>Note, test against appropriate dark backgrounds.
+                <span>WCAG AAA standard: 7:1 contrast ratio</span>
+              </div>
+              <div className="text-xs">
+                <strong>Note:</strong> Colors are tested against white background. 
+                For dark themes, test against appropriate dark backgrounds.
               </div>
             </div>
           </div>
@@ -227,19 +248,19 @@ export const ColorPreview= ({
           <h4 className="text-sm font-medium mb-2">Usage Examples</h4>
           <div className="space-y-3">
             {/* Primary color usage */}
-            <div className="p-3 rounded-lg border" style={{ backgroundColor] }}>
+            <div className="p-3 rounded-lg border" style={{ backgroundColor: colors[100] }}>
               <div className="space-y-2">
-                <h5 className="font-medium" style={{ color] }}>
+                <h5 className="font-medium" style={{ color: colors[900] }}>
                   Primary Color Usage
                 </h5>
-                <p className="text-sm" style={{ color] }}>
+                <p className="text-sm" style={{ color: colors[700] }}>
                   This is an example of how the primary color scale can be used for text and backgrounds.
                 </p>
                 <div className="flex gap-2">
-                  <Badge style={{ backgroundColor], color}}>
+                  <Badge style={{ backgroundColor: colors[500], color: '#ffffff' }}>
                     Primary Button
                   </Badge>
-                  <Badge variant="outline" style={{ borderColor], color] }}>
+                  <Badge variant="outline" style={{ borderColor: colors[500], color: colors[700] }}>
                     Secondary Button
                   </Badge>
                 </div>
@@ -248,23 +269,24 @@ export const ColorPreview= ({
 
             {/* Semantic color usage */}
             {semantic && (
-              <div className="grid grid-cols-1 md="p-3 rounded-lg border" style={{ backgroundColor}}>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div className="p-3 rounded-lg border" style={{ backgroundColor: semantic.successLight }}>
                   <div className="space-y-2">
-                    <h5 className="font-medium" style={{ color}}>
+                    <h5 className="font-medium" style={{ color: semantic.successDark }}>
                       Success State
                     </h5>
-                    <p className="text-sm" style={{ color}}>
+                    <p className="text-sm" style={{ color: semantic.success }}>
                       This shows how semantic colors can be used for different states.
                     </p>
                   </div>
                 </div>
                 
-                <div className="p-3 rounded-lg border" style={{ backgroundColor}}>
+                <div className="p-3 rounded-lg border" style={{ backgroundColor: semantic.errorLight }}>
                   <div className="space-y-2">
-                    <h5 className="font-medium" style={{ color}}>
+                    <h5 className="font-medium" style={{ color: semantic.errorDark }}>
                       Error State
                     </h5>
-                    <p className="text-sm" style={{ color}}>
+                    <p className="text-sm" style={{ color: semantic.error }}>
                       Error messages and validation feedback use semantic colors.
                     </p>
                   </div>
@@ -280,11 +302,11 @@ export const ColorPreview= ({
 
 // Multi-color preview component
 export interface ColorShowcaseProps {
-  showAccessibility?;
-  className?;
+  showAccessibility?: boolean;
+  className?: string;
 }
 
-export const ColorShowcase= ({
+export const ColorShowcase: React.FC<ColorShowcaseProps> = ({
   showAccessibility = true,
   className = ''
 }) => {
@@ -301,7 +323,7 @@ export const ColorShowcase= ({
   const { primary, secondary, semantic, neutral, surface, text } = currentThemeConfig.colors;
   
   // Type guard to ensure colors are strings
-  const isStringColor = (color)=> 
+  const isStringColor = (color: unknown): color is string => 
     typeof color === 'string' && color.length > 0;
 
   return (
@@ -339,7 +361,8 @@ export const ColorShowcase= ({
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 md="space-y-3">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-3">
               <h4 className="text-sm font-medium">Surface Colors</h4>
               <div className="space-y-2">
                 {Object.entries(surface).map(([name, color]) => {
@@ -348,7 +371,7 @@ export const ColorShowcase= ({
                     <div key={name} className="flex items-center gap-3">
                       <div 
                         className="w-8 h-8 rounded border"
-                        style={{ backgroundColor}}
+                        style={{ backgroundColor: color }}
                       />
                       <div>
                         <div className="text-sm font-medium capitalize">{name}</div>
@@ -369,7 +392,7 @@ export const ColorShowcase= ({
                     <div key={name} className="flex items-center gap-3">
                       <div 
                         className="w-8 h-8 rounded border"
-                        style={{ backgroundColor}}
+                        style={{ backgroundColor: color }}
                       />
                       <div>
                         <div className="text-sm font-medium capitalize">{name}</div>