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

package/dist/components/ui/animation-demo.js

@@ -1,250 +1,30 @@
-import React, { useState } from 'react'
-import { Card } from './card'
-import { Button } from './button'
-import { Badge } from './badge'
-import { 
-  AnimatedContainer, 
-  StaggeredContainer,
-  useAnimationProfile,
-  usePerformanceMode
-} from './animation'
-
-
-export const AnimationDemo: React.FC = () => {
-  const [currentAnimation, setCurrentAnimation] = useState<'fadeIn' | 'slideIn' | 'scaleIn' | 'bounce'>('fadeIn')
-  const [isAnimating, setIsAnimating] = useState(false)
-  
-  const { profile, performanceMetrics, deviceInfo } = useAnimationProfile()
-  const { performanceMode, shouldOptimizeForBattery } = usePerformanceMode()
-
-  const animations = [
-    { key: 'fadeIn' as const, label: 'Fade In', icon: '✨' },
-    { key: 'slideIn' as const, label: 'Slide In', icon: '➡️' },
-    { key: 'scaleIn' as const, label: 'Scale In', icon: '🔍' },
-    { key: 'bounce' as const, label: 'Bounce', icon: '🎾' }
-  ]
-
-  const handleAnimationChange = (animation: typeof currentAnimation) => {
-    setCurrentAnimation(animation)
-    setIsAnimating(true)
-    
-    // Reset animation state after a delay
-    setTimeout(() => setIsAnimating(false), 1000)
-  }
-
-  const performanceIndicators = [
-    { label: 'FPS', value: performanceMetrics.fps, unit: '', color: performanceMetrics.fps > 50 ? 'green' : performanceMetrics.fps > 30 ? 'yellow' : 'red' },
-    { label: 'Memory', value: performanceMetrics.memoryUsage ? Math.round(performanceMetrics.memoryUsage * 100) : 'N/A', unit: '%', color: 'blue' },
-    { label: 'Battery', value: performanceMetrics.batteryLevel ? Math.round(performanceMetrics.batteryLevel * 100) : 'N/A', unit: '%', color: performanceMetrics.isLowPowerMode ? 'red' : 'green' }
-  ]
-
-  return (
-    <div className="space-y-6 p-6">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold mb-2">Mobile-First Animation System</h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          Device-specific animations with performance optimization and battery awareness
-        </p>
-      </div>
-
-      {/* Performance Metrics */}
-      <Card className="p-4">
-        <h2 className="text-xl font-semibold mb-4">Performance Metrics</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {performanceIndicators.map((indicator) => (
-            <div key={indicator.label} className="text-center">
-              <div className={`text-2xl font-bold text-${indicator.color}-600`}>
-                {indicator.value}{indicator.unit}
-              </div>
-              <div className="text-sm text-gray-600 dark:text-gray-400">
-                {indicator.label}
-              </div>
-            </div>
-          ))}
-        </div>
-        
-        <div className="mt-4 space-y-2">
-          <div className="flex items-center justify-between">
-            <span>Performance Mode:</span>
-            <Badge variant={performanceMode === 'high' ? 'default' : performanceMode === 'medium' ? 'secondary' : 'destructive'}>
-              {performanceMode.toUpperCase()}
-            </Badge>
-          </div>
-          <div className="flex items-center justify-between">
-            <span>Battery Optimization:</span>
-            <Badge variant={shouldOptimizeForBattery ? 'destructive' : 'default'}>
-              {shouldOptimizeForBattery ? 'Enabled' : 'Disabled'}
-            </Badge>
-          </div>
-          <div className="flex items-center justify-between">
-            <span>Reduced Motion:</span>
-            <Badge variant={profile.performance.reducedMotion ? 'destructive' : 'default'}>
-              {profile.performance.reducedMotion ? 'Enabled' : 'Disabled'}
-            </Badge>
-          </div>
-        </div>
-      </Card>
-
-      {/* Device Information */}
-      <Card className="p-4">
-        <h2 className="text-xl font-semibold mb-4">Device Profile</h2>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div className="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.screenSize}</div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">Screen Size</div>
-          </div>
-          <div className="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.orientation}</div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">Orientation</div>
-          </div>
-          <div className="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.touchDevice ? 'Touch' : 'Mouse'}</div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">Input Type</div>
-          </div>
-          <div className="text-center">
-            <div className="text-lg font-semibold">{deviceInfo.isMobile ? 'Mobile' : deviceInfo.isTablet ? 'Tablet' : 'Desktop'}</div>
-            <div className="text-sm text-gray-600 dark:text-gray-400">Device Type</div>
-          </div>
-        </div>
-      </Card>
-
-      {/* Animation Controls */}
-      <Card className="p-4">
-        <h2 className="text-xl font-semibold mb-4">Animation Controls</h2>
-        <div className="flex flex-wrap gap-2 mb-4">
-          {animations.map((animation) => (
-            <Button
-              key={animation.key}
-              variant={currentAnimation === animation.key ? 'default' : 'outline'}
-              onClick={() => handleAnimationChange(animation.key)}
-              disabled={isAnimating}
-              className="flex items-center gap-2"
-            >
-              <span>{animation.icon}</span>
-              {animation.label}
-            </Button>
-          ))}
-        </div>
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium mb-2">Current Animation Profile</label>
-            <div className="space-y-2 text-sm">
-              <div>Duration: {profile.duration.normal}</div>
-              <div>Easing: {profile.easing.ease}</div>
-              <div>Performance: {profile.performance.mode}</div>
-            </div>
-          </div>
-          <div>
-            <label className="block text-sm font-medium mb-2">Animation Classes</label>
-            <div className="text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded">
-              {deviceInfo.isMobile && 'coach-stan-mobile-animation '}
-              {deviceInfo.isTablet && 'coach-stan-tablet-animation '}
-              {deviceInfo.isDesktop && 'coach-stan-desktop-animation '}
-              {shouldOptimizeForBattery && 'coach-stan-battery-saver '}
-              {profile.performance.reducedMotion && 'reduced-motion'}
-            </div>
-          </div>
-        </div>
-      </Card>
-
-      {/* Animation Examples */}
-      <Card className="p-4">
-        <h2 className="text-xl font-semibold mb-4">Animation Examples</h2>
-        
-        {/* Single Animation */}
-        <div className="mb-6">
-          <h3 className="text-lg font-medium mb-3">Single Animation</h3>
-          <AnimatedContainer
-            animation={currentAnimation}
-            duration="normal"
-            easing="ease"
-            className="h-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-semibold"
-          >
-            <div className="text-center">
-              <div className="text-2xl mb-2">🎭</div>
-              <div>Animated Element</div>
-              <div className="text-sm opacity-75">{currentAnimation}</div>
-            </div>
-          </AnimatedContainer>
-        </div>
-
-        {/* Staggered Animations */}
-        <div className="mb-6">
-          <h3 className="text-lg font-medium mb-3">Staggered Animations</h3>
-          <StaggeredContainer
-            animation="slideIn"
-            duration="fast"
-            staggerDelay={0.1}
-            staggerDirection="forward"
-            className="grid grid-cols-2 md:grid-cols-4 gap-4"
-          >
-            {[1, 2, 3, 4].map((num) => (
-              <div
-                key={num}
-                className="h-20 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-xl"
-              >
-                {num}
-              </div>
-            ))}
-          </StaggeredContainer>
-        </div>
-
-        {/* Performance Mode Comparison */}
-        <div>
-          <h3 className="text-lg font-medium mb-3">Performance Mode Comparison</h3>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <AnimatedContainer
-              animation="fadeIn"
-              duration="fast"
-              className="h-24 bg-red-400 rounded-lg flex items-center justify-center text-white font-semibold"
-            >
-              Fast Mode
-            </AnimatedContainer>
-            <AnimatedContainer
-              animation="fadeIn"
-              duration="normal"
-              className="h-24 bg-yellow-400 rounded-lg flex items-center justify-center text-white font-semibold"
-            >
-              Normal Mode
-            </AnimatedContainer>
-            <AnimatedContainer
-              animation="fadeIn"
-              duration="slow"
-              className="h-24 bg-green-400 rounded-lg flex items-center justify-center text-white font-semibold"
-            >
-              Slow Mode
-            </AnimatedContainer>
-          </div>
-        </div>
-      </Card>
-
-      {/* Technical Details */}
-      <Card className="p-4">
-        <h2 className="text-xl font-semibold mb-4">Technical Details</h2>
-        <div className="space-y-4">
-          <div>
-            <h3 className="font-medium mb-2">Animation Profile</h3>
-            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
-              {JSON.stringify(profile, null, 2)}
-            </pre>
-          </div>
-          
-          <div>
-            <h3 className="font-medium mb-2">Device Info</h3>
-            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
-              {JSON.stringify(deviceInfo, null, 2)}
-            </pre>
-          </div>
-          
-          <div>
-            <h3 className="font-medium mb-2">Performance Metrics</h3>
-            <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
-              {JSON.stringify(performanceMetrics, null, 2)}
-            </pre>
-          </div>
-        </div>
-      </Card>
-    </div>
-  )
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card } from './card';
+import { Button } from './button';
+import { Badge } from './badge';
+import { AnimatedContainer, StaggeredContainer, useAnimationProfile, usePerformanceMode } from './animation';
+export const AnimationDemo = () => {
+    const [currentAnimation, setCurrentAnimation] = useState('fadeIn');
+    const [isAnimating, setIsAnimating] = useState(false);
+    const { profile, performanceMetrics, deviceInfo } = useAnimationProfile();
+    const { performanceMode, shouldOptimizeForBattery } = usePerformanceMode();
+    const animations = [
+        { key: 'fadeIn', label: 'Fade In', icon: '✨' },
+        { key: 'slideIn', label: 'Slide In', icon: '➡️' },
+        { key: 'scaleIn', label: 'Scale In', icon: '🔍' },
+        { key: 'bounce', label: 'Bounce', icon: '🎾' }
+    ];
+    const handleAnimationChange = (animation) => {
+        setCurrentAnimation(animation);
+        setIsAnimating(true);
+        // Reset animation state after a delay
+        setTimeout(() => setIsAnimating(false), 1000);
+    };
+    const performanceIndicators = [
+        { label: 'FPS', value: performanceMetrics.fps, unit: '', color: performanceMetrics.fps > 50 ? 'green' : performanceMetrics.fps > 30 ? 'yellow' : 'red' },
+        { label: 'Memory', value: performanceMetrics.memoryUsage ? Math.round(performanceMetrics.memoryUsage * 100) : 'N/A', unit: '%', color: 'blue' },
+        { label: 'Battery', value: performanceMetrics.batteryLevel ? Math.round(performanceMetrics.batteryLevel * 100) : 'N/A', unit: '%', color: performanceMetrics.isLowPowerMode ? 'red' : 'green' }
+    ];
+    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "Mobile-First Animation System" }), _jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Device-specific animations with performance optimization and battery awareness" })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Performance Metrics" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: performanceIndicators.map((indicator) => (_jsxs("div", { className: "text-center", children: [_jsxs("div", { className: `text-2xl font-bold text-${indicator.color}-600`, children: [indicator.value, indicator.unit] }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: indicator.label })] }, indicator.label))) }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "Performance Mode:" }), _jsx(Badge, { variant: performanceMode === 'high' ? 'default' : performanceMode === 'medium' ? 'secondary' : 'destructive', children: performanceMode.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "Battery Optimization:" }), _jsx(Badge, { variant: shouldOptimizeForBattery ? 'destructive' : 'default', children: shouldOptimizeForBattery ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "Reduced Motion:" }), _jsx(Badge, { variant: profile.performance.reducedMotion ? 'destructive' : 'default', children: profile.performance.reducedMotion ? 'Enabled' : 'Disabled' })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Device Profile" }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.screenSize }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Screen Size" })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.orientation }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Orientation" })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.touchDevice ? 'Touch' : 'Mouse' }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Input Type" })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.isMobile ? 'Mobile' : deviceInfo.isTablet ? 'Tablet' : 'Desktop' }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Device Type" })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Animation Controls" }), _jsx("div", { className: "flex flex-wrap gap-2 mb-4", children: animations.map((animation) => (_jsxs(Button, { variant: currentAnimation === animation.key ? 'default' : 'outline', onClick: () => handleAnimationChange(animation.key), disabled: isAnimating, className: "flex items-center gap-2", children: [_jsx("span", { children: animation.icon }), animation.label] }, animation.key))) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Current Animation Profile" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Duration: ", profile.duration.normal] }), _jsxs("div", { children: ["Easing: ", profile.easing.ease] }), _jsxs("div", { children: ["Performance: ", profile.performance.mode] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Animation Classes" }), _jsxs("div", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded", children: [deviceInfo.isMobile && 'coach-stan-mobile-animation ', deviceInfo.isTablet && 'coach-stan-tablet-animation ', deviceInfo.isDesktop && 'coach-stan-desktop-animation ', shouldOptimizeForBattery && 'coach-stan-battery-saver ', profile.performance.reducedMotion && 'reduced-motion'] })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Animation Examples" }), _jsxs("div", { className: "mb-6", children: [_jsx("h3", { className: "text-lg font-medium mb-3", children: "Single Animation" }), _jsx(AnimatedContainer, { animation: currentAnimation, duration: "normal", easing: "ease", className: "h-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-semibold", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83C\uDFAD" }), _jsx("div", { children: "Animated Element" }), _jsx("div", { className: "text-sm opacity-75", children: currentAnimation })] }) })] }), _jsxs("div", { className: "mb-6", children: [_jsx("h3", { className: "text-lg font-medium mb-3", children: "Staggered Animations" }), _jsx(StaggeredContainer, { animation: "slideIn", duration: "fast", staggerDelay: 0.1, staggerDirection: "forward", className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [1, 2, 3, 4].map((num) => (_jsx("div", { className: "h-20 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-xl", children: num }, num))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium mb-3", children: "Performance Mode Comparison" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(AnimatedContainer, { animation: "fadeIn", duration: "fast", className: "h-24 bg-red-400 rounded-lg flex items-center justify-center text-white font-semibold", children: "Fast Mode" }), _jsx(AnimatedContainer, { animation: "fadeIn", duration: "normal", className: "h-24 bg-yellow-400 rounded-lg flex items-center justify-center text-white font-semibold", children: "Normal Mode" }), _jsx(AnimatedContainer, { animation: "fadeIn", duration: "slow", className: "h-24 bg-green-400 rounded-lg flex items-center justify-center text-white font-semibold", children: "Slow Mode" })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Technical Details" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium mb-2", children: "Animation Profile" }), _jsx("pre", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto", children: JSON.stringify(profile, null, 2) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium mb-2", children: "Device Info" }), _jsx("pre", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto", children: JSON.stringify(deviceInfo, null, 2) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium mb-2", children: "Performance Metrics" }), _jsx("pre", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto", children: JSON.stringify(performanceMetrics, null, 2) })] })] })] })] }));
+};

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

@@ -1,28 +1,10 @@
-const badgeVariants = cva(
-  "badge",
-  {
-    variants: {
-      variant: {
-        default: "badge--default",
-        secondary: "badge--secondary",
-        destructive: "badge--destructive",
-        outline: "badge--outline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
-
-export { Badge, badgeVariants }
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/ui/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;sEAelB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAI1D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

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

@@ -1,33 +1,20 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const badgeVariants = cva(
-  "badge",
-  {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const badgeVariants = cva("badge", {
     variants: {
-      variant: {
-        default: "badge--default",
-        secondary: "badge--secondary",
-        destructive: "badge--destructive",
-        outline: "badge--outline",
-      },
+        variant: {
+            default: "badge--default",
+            secondary: "badge--secondary",
+            destructive: "badge--destructive",
+            outline: "badge--outline",
+        },
     },
     defaultVariants: {
-      variant: "default",
+        variant: "default",
     },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+});
+function Badge({ className, variant, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
 }
-
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -1,33 +1,20 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../lib/utils"
-
-const badgeVariants = cva(
-  "badge",
-  {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const badgeVariants = cva("badge", {
     variants: {
-      variant: {
-        default: "badge--default",
-        secondary: "badge--secondary",
-        destructive: "badge--destructive",
-        outline: "badge--outline",
-      },
+        variant: {
+            default: "badge--default",
+            secondary: "badge--secondary",
+            destructive: "badge--destructive",
+            outline: "badge--outline",
+        },
     },
     defaultVariants: {
-      variant: "default",
+        variant: "default",
     },
-  }
-)
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+});
+function Badge({ className, variant, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
 }
-
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };