@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/border-radius-shadow-demo.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+import { Card } from './card';
+import { Button } from './button';
+
+export const BorderRadiusShadowDemo: React.FC = () => {
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-2xl font-bold text-cs-text-primary mb-2">
+          Advanced Border Radius & Shadow System
+        </h2>
+        <p className="text-cs-text-secondary">
+          Sophisticated visual polish with calculated variants and multiple depth levels
+        </p>
+      </div>
+
+      {/* Border Radius System */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Border Radius System
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <div className="h-20 bg-cs-primary rounded-sm flex items-center justify-center text-white font-medium">
+              rounded-sm
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">--radius-sm (calc(var(--radius) - 4px))</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-cs-primary rounded-md flex items-center justify-center text-white font-medium">
+              rounded-md
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">--radius-md (calc(var(--radius) - 2px))</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-cs-primary rounded-lg flex items-center justify-center text-white font-medium">
+              rounded-lg
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">--radius-lg (var(--radius))</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-cs-primary rounded-xl flex items-center justify-center text-white font-medium">
+              rounded-xl
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">--radius-xl (calc(var(--radius) + 2px))</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-cs-primary rounded-2xl flex items-center justify-center text-white font-medium">
+              rounded-2xl
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">--radius-2xl (calc(var(--radius) + 4px))</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-cs-primary rounded-full flex items-center justify-center text-white font-medium">
+              rounded-full
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">Native Tailwind (50%)</p>
+          </div>
+        </div>
+      </Card>
+
+      {/* Shadow System */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Shadow System
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <div className="h-20 bg-white rounded-lg shadow-sm flex items-center justify-center text-cs-text-primary font-medium border">
+              shadow-sm
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">Subtle elevation</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-white rounded-lg shadow flex items-center justify-center text-cs-text-primary font-medium border">
+              shadow
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">Default shadow</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-white rounded-lg shadow-md flex items-center justify-center text-cs-text-primary font-medium border">
+              shadow-md
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">Medium elevation</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-white rounded-lg shadow-lg flex items-center justify-center text-cs-text-primary font-medium border">
+              shadow-lg
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">Large elevation</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-white rounded-lg shadow-xl flex items-center justify-center text-cs-text-primary font-medium border">
+              shadow-xl
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">Extra large elevation</p>
+          </div>
+          
+          <div className="space-y-2">
+            <div className="h-20 bg-white rounded-lg shadow-2xl flex items-center justify-center text-cs-text-primary font-medium border">
+              shadow-2xl
+            </div>
+            <p className="text-xs text-cs-text-muted text-center">Maximum elevation</p>
+          </div>
+        </div>
+      </Card>
+
+      {/* Component Integration */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Component Integration
+        </h3>
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Button variant="default" className="w-full">
+              Default Button
+            </Button>
+            <Button variant="outline" className="w-full">
+              Outline Button
+            </Button>
+            <Button variant="secondary" className="w-full">
+              Secondary Button
+            </Button>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-cs-text-secondary">Input Field</label>
+              <input 
+                type="text" 
+                placeholder="Type something..." 
+                className="w-full h-11 rounded-md border border-cs-border bg-cs-surface-bg px-3 py-2 text-cs-text-primary focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-cs-text-secondary">Card Example</label>
+              <div className="p-4 rounded-lg border border-cs-border bg-cs-surface-bg shadow-sm">
+                <p className="text-sm text-cs-text-secondary">This card uses rounded-lg and shadow-sm</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* Technical Details */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
+          Technical Implementation
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <h4 className="font-medium text-cs-text-primary mb-2">CSS Custom Properties</h4>
+            <div className="bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary overflow-auto">
+              <p>--radius: 0.5rem</p>
+              <p>--radius-sm: calc(var(--radius) - 4px)</p>
+              <p>--radius-md: calc(var(--radius) - 2px)</p>
+              <p>--radius-lg: var(--radius)</p>
+              <p>--radius-xl: calc(var(--radius) + 2px)</p>
+              <p>--radius-2xl: calc(var(--radius) + 4px)</p>
+            </div>
+          </div>
+          
+          <div>
+            <h4 className="font-medium text-cs-text-primary mb-2">Tailwind Classes</h4>
+            <div className="bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary">
+              <p>rounded-sm → var(--radius-sm)</p>
+              <p>rounded-md → var(--radius-md)</p>
+              <p>rounded-lg → var(--radius-lg)</p>
+              <p>rounded-xl → var(--radius-xl)</p>
+              <p>rounded-2xl → var(--radius-2xl)</p>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  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"
+    
+    // Build semantic CSS classes using BEM methodology
+    const baseClass = 'button'
+    const variantClass = `button--variant-${variant}`
+    const sizeClass = `button--size-${size}`
+    
+    // Combine classes
+    const buttonClasses = [baseClass, variantClass, sizeClass, className]
+      .filter(Boolean)
+      .join(' ')
+    
+    return (
+      <Comp
+        className={buttonClasses}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button }

package/src/components/ui/card.tsx

@@ -0,0 +1,207 @@
+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
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ 
+    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 (
+      <div
+        ref={ref}
+        className={cardClasses}
+        {...props}
+      />
+    )
+  }
+)
+Card.displayName = "Card"
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  spacing?: 'compact' | 'normal' | 'spacious'
+}
+
+const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ 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 (
+      <div
+        ref={ref}
+        className={headerClasses}
+        {...props}
+      />
+    )
+  }
+)
+CardHeader.displayName = "CardHeader"
+
+export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  size?: 'small' | 'normal' | 'large'
+}
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ 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 (
+      <h3
+        ref={ref}
+        className={titleClasses}
+        {...props}
+      />
+    )
+  }
+)
+CardTitle.displayName = "CardTitle"
+
+export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  size?: 'small' | 'normal'
+}
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(
+  ({ 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 (
+      <p 
+        className={descriptionClasses} 
+        ref={ref} 
+        {...props} 
+      />
+    )
+  }
+)
+CardDescription.displayName = "CardDescription"
+
+export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  spacing?: 'compact' | 'normal' | 'spacious'
+}
+
+const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  ({ 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 (
+      <div 
+        ref={ref} 
+        className={contentClasses} 
+        {...props} 
+      />
+    )
+  }
+)
+CardContent.displayName = "CardContent"
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  layout?: 'horizontal' | 'vertical' | 'stacked' | 'justified' | 'centered'
+}
+
+const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ 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 (
+      <div
+        ref={ref}
+        className={footerClasses}
+        {...props}
+      />
+    )
+  }
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  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' : size === 'large' ? 'h-5 w-5' : 'h-4 w-4';
+  
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={`checkbox ${sizeClass} ${className || ''}`}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="checkbox__indicator">
+        <Check className={`checkbox__checkmark ${checkmarkSize}`} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+})
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }