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

package/dist/components/ui/border-radius-shadow-demo.esm.js

@@ -1,187 +1,6 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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>
-  );
+export const BorderRadiusShadowDemo = () => {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-cs-text-primary mb-2", children: "Advanced Border Radius & Shadow System" }), _jsx("p", { className: "text-cs-text-secondary", children: "Sophisticated visual polish with calculated variants and multiple depth levels" })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Border Radius System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-sm flex items-center justify-center text-white font-medium", children: "rounded-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-sm (calc(var(--radius) - 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-md flex items-center justify-center text-white font-medium", children: "rounded-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-md (calc(var(--radius) - 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-lg flex items-center justify-center text-white font-medium", children: "rounded-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-lg (var(--radius))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-xl flex items-center justify-center text-white font-medium", children: "rounded-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-xl (calc(var(--radius) + 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-2xl flex items-center justify-center text-white font-medium", children: "rounded-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-2xl (calc(var(--radius) + 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-full flex items-center justify-center text-white font-medium", children: "rounded-full" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Native Tailwind (50%)" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Shadow System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-sm flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Subtle elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Default shadow" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-md flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Medium elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-lg flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Extra large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-2xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Maximum elevation" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Component Integration" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(Button, { variant: "default", className: "w-full", children: "Default Button" }), _jsx(Button, { variant: "outline", className: "w-full", children: "Outline Button" }), _jsx(Button, { variant: "secondary", className: "w-full", children: "Secondary Button" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Input Field" }), _jsx("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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Card Example" }), _jsx("div", { className: "p-4 rounded-lg border border-cs-border bg-cs-surface-bg shadow-sm", children: _jsx("p", { className: "text-sm text-cs-text-secondary", children: "This card uses rounded-lg and shadow-sm" }) })] })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Technical Implementation" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "CSS Custom Properties" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary overflow-auto", children: [_jsx("p", { children: "--radius: 0.5rem" }), _jsx("p", { children: "--radius-sm: calc(var(--radius) - 4px)" }), _jsx("p", { children: "--radius-md: calc(var(--radius) - 2px)" }), _jsx("p", { children: "--radius-lg: var(--radius)" }), _jsx("p", { children: "--radius-xl: calc(var(--radius) + 2px)" }), _jsx("p", { children: "--radius-2xl: calc(var(--radius) + 4px)" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "Tailwind Classes" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary", children: [_jsx("p", { children: "rounded-sm \u2192 var(--radius-sm)" }), _jsx("p", { children: "rounded-md \u2192 var(--radius-md)" }), _jsx("p", { children: "rounded-lg \u2192 var(--radius-lg)" }), _jsx("p", { children: "rounded-xl \u2192 var(--radius-xl)" }), _jsx("p", { children: "rounded-2xl \u2192 var(--radius-2xl)" })] })] })] })] })] }));
 };

package/dist/components/ui/border-radius-shadow-demo.js

@@ -1,187 +1,6 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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>
-  );
+export const BorderRadiusShadowDemo = () => {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-cs-text-primary mb-2", children: "Advanced Border Radius & Shadow System" }), _jsx("p", { className: "text-cs-text-secondary", children: "Sophisticated visual polish with calculated variants and multiple depth levels" })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Border Radius System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-sm flex items-center justify-center text-white font-medium", children: "rounded-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-sm (calc(var(--radius) - 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-md flex items-center justify-center text-white font-medium", children: "rounded-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-md (calc(var(--radius) - 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-lg flex items-center justify-center text-white font-medium", children: "rounded-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-lg (var(--radius))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-xl flex items-center justify-center text-white font-medium", children: "rounded-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-xl (calc(var(--radius) + 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-2xl flex items-center justify-center text-white font-medium", children: "rounded-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-2xl (calc(var(--radius) + 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-full flex items-center justify-center text-white font-medium", children: "rounded-full" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Native Tailwind (50%)" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Shadow System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-sm flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Subtle elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Default shadow" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-md flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Medium elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-lg flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Extra large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-2xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Maximum elevation" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Component Integration" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(Button, { variant: "default", className: "w-full", children: "Default Button" }), _jsx(Button, { variant: "outline", className: "w-full", children: "Outline Button" }), _jsx(Button, { variant: "secondary", className: "w-full", children: "Secondary Button" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Input Field" }), _jsx("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" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Card Example" }), _jsx("div", { className: "p-4 rounded-lg border border-cs-border bg-cs-surface-bg shadow-sm", children: _jsx("p", { className: "text-sm text-cs-text-secondary", children: "This card uses rounded-lg and shadow-sm" }) })] })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Technical Implementation" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "CSS Custom Properties" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary overflow-auto", children: [_jsx("p", { children: "--radius: 0.5rem" }), _jsx("p", { children: "--radius-sm: calc(var(--radius) - 4px)" }), _jsx("p", { children: "--radius-md: calc(var(--radius) - 2px)" }), _jsx("p", { children: "--radius-lg: var(--radius)" }), _jsx("p", { children: "--radius-xl: calc(var(--radius) + 2px)" }), _jsx("p", { children: "--radius-2xl: calc(var(--radius) + 4px)" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "Tailwind Classes" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary", children: [_jsx("p", { children: "rounded-sm \u2192 var(--radius-sm)" }), _jsx("p", { children: "rounded-md \u2192 var(--radius-md)" }), _jsx("p", { children: "rounded-lg \u2192 var(--radius-lg)" }), _jsx("p", { children: "rounded-xl \u2192 var(--radius-xl)" }), _jsx("p", { children: "rounded-2xl \u2192 var(--radius-2xl)" })] })] })] })] })] }));
 };

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

@@ -1,36 +1,17 @@
-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"
-    
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+const Button = React.forwardRef(({ 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}`
-    
+    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 }
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Comp, { className: buttonClasses, ref: ref, ...props }));
+});
+Button.displayName = "Button";
+export { Button };

package/dist/components/ui/button.js

@@ -1,36 +1,17 @@
-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"
-    
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+const Button = React.forwardRef(({ 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}`
-    
+    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 }
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Comp, { className: buttonClasses, ref: ref, ...props }));
+});
+Button.displayName = "Button";
+export { Button };