@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

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

@@ -0,0 +1,205 @@
+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/card.esm.js

@@ -0,0 +1,182 @@
+import * as React from "react"
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?}
+
+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' = 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' = [
+      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?}
+
+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?}
+
+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?}
+
+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?}
+
+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?}
+
+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/card.js

@@ -0,0 +1,182 @@
+import * as React from "react"
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?}
+
+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' = 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' = [
+      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?}
+
+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?}
+
+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?}
+
+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?}
+
+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?}
+
+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

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

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

@@ -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?;
+}
+
+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' ;
+  
+  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 }

package/dist/components/ui/checkbox.js

@@ -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?;
+}
+
+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' ;
+  
+  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 }