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

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

@@ -0,0 +1,183 @@
+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/border-radius-shadow-demo.esm.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import { Card } from './card';
+import { Button } from './button';
+
+export const BorderRadiusShadowDemo= () => {
+  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="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="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="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="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="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="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) - 4px)</p>
+              <p>--radius-md) - 2px)</p>
+              <p>--radius-lg)</p>
+              <p>--radius-xl) + 2px)</p>
+              <p>--radius-2xl) + 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/border-radius-shadow-demo.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import { Card } from './card';
+import { Button } from './button';
+
+export const BorderRadiusShadowDemo= () => {
+  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="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="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="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="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="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="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) - 4px)</p>
+              <p>--radius-md) - 2px)</p>
+              <p>--radius-lg)</p>
+              <p>--radius-xl) + 2px)</p>
+              <p>--radius-2xl) + 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

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

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot = '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/button.js

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot = '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 }