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

package/dist/components/ui/border-radius-shadow-demo.d.ts

@@ -1,183 +0,0 @@
-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/dist/components/ui/button.d.ts

@@ -1,33 +0,0 @@
-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/dist/components/ui/card.d.ts

@@ -1,205 +0,0 @@
-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/dist/components/ui/checkbox.d.ts

@@ -1,26 +0,0 @@
-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 }