@moontra/moonui 2.1.9 → 2.2.1

package/src/components/ui/button.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -13,89 +15,88 @@ const buttonVariants = cva(
   ["inline-flex items-center justify-center gap-2 whitespace-nowrap",
   "font-medium relative",
   "transition-all duration-200 ease-out",
-  "premium-hover", /* Standart premium hover efekti */
+  "transform active:scale-[0.98]",
   "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-  "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"],
+  "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none disabled:transform-none"],
   {
     variants: {
       variant: {
         primary: [
           "bg-primary text-primary-foreground",
-          "hover:bg-primary-hover dark:hover:bg-primary/90",
-          "active:bg-primary-active dark:active:bg-primary/80",
-          "shadow-sm dark:shadow-primary/20 dark:shadow-md",
-          "focus-visible:ring-primary/50 dark:focus-visible:ring-primary/30",
-          "dark:bg-primary dark:text-white",
+          "dark:bg-primary dark:text-primary-foreground",
+          "hover:bg-primary/90 dark:hover:bg-primary/90",
+          "active:bg-primary/80 dark:active:bg-primary/80",
+          "shadow-sm hover:shadow-md",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
         ],
         secondary: [
-          "bg-secondary text-secondary-foreground",
-          "hover:bg-gray-200 dark:hover:bg-gray-700/90",
-          "active:bg-gray-300 dark:active:bg-gray-600/90",
-          "border border-transparent dark:border-gray-700",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
+          "bg-gray-100 text-gray-900",
           "dark:bg-gray-800 dark:text-gray-100",
-          "dark:shadow-sm dark:shadow-gray-900/20",
+          "hover:bg-gray-200 dark:hover:bg-gray-700",
+          "active:bg-gray-300 dark:active:bg-gray-600",
+          "border border-gray-200 dark:border-gray-700",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "shadow-sm hover:shadow-md",
         ],
         outline: [
           "bg-background text-foreground",
-          "border border-gray-300 dark:border-gray-700",
-          "hover:border-gray-400 dark:hover:border-gray-500",
-          "hover:bg-gray-50 dark:hover:bg-gray-800/80",
-          "active:bg-gray-100 dark:active:bg-gray-800/90",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200 dark:bg-gray-900/50",
-          "dark:shadow-sm dark:shadow-gray-950/10",
+          "dark:bg-background dark:text-foreground",
+          "border border-input dark:border-input",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
+          "active:bg-accent/80 dark:active:bg-accent/80",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         ghost: [
-          "text-foreground",
-          "hover:bg-gray-100 dark:hover:bg-gray-800/90",
-          "active:bg-gray-200 dark:active:bg-gray-700/90",
-          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-200",
-          "transition-colors duration-200",
+          "text-gray-700",
+          "dark:text-gray-300",
+          "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100",
+          "active:bg-gray-200 dark:active:bg-gray-700",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         destructive: [
-          "bg-error text-white",
-          "hover:bg-error/90 dark:hover:bg-error/80",
-          "active:bg-error/80 dark:active:bg-error/70",
-          "shadow-sm dark:shadow-error/10 dark:shadow-md",
-          "focus-visible:ring-error/50 dark:focus-visible:ring-error/30",
-          "dark:text-white dark:border-error/20",
-          "transition-colors duration-200",
+          "bg-destructive text-destructive-foreground",
+          "dark:bg-destructive dark:text-destructive-foreground",
+          "hover:bg-destructive/90 dark:hover:bg-destructive/90",
+          "active:bg-destructive/80 dark:active:bg-destructive/80",
+          "shadow-sm hover:shadow-md",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         success: [
-          "bg-success text-white",
-          "hover:bg-success/90 dark:hover:bg-success/80",
-          "active:bg-success/80 dark:active:bg-success/70",
-          "shadow-sm dark:shadow-success/10 dark:shadow-md", 
-          "focus-visible:ring-success/50 dark:focus-visible:ring-success/30",
-          "dark:text-white dark:border-success/20",
-          "transition-colors duration-200",
+          "bg-success text-success-foreground",
+          "dark:bg-success dark:text-success-foreground",
+          "hover:bg-success/90 dark:hover:bg-success/90",
+          "active:bg-success/80 dark:active:bg-success/80",
+          "shadow-sm hover:shadow-md", 
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "transition-all duration-200",
         ],
         link: [
           "text-primary bg-transparent",
           "underline-offset-4 hover:underline",
-          "hover:text-primary-hover active:text-primary-active",
+          "hover:text-primary/80 active:text-primary/70",
           "p-0 h-auto",
-          "dark:text-blue-400 dark:hover:text-blue-300",
-          "dark:active:text-blue-500",
           "transition-colors duration-200",
         ],
         gradient: [
-          "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
-          "hover:from-blue-700 hover:to-purple-700",
-          "active:from-blue-800 active:to-purple-800",
-          "shadow-lg shadow-purple-500/25",
+          "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
+          "hover:from-purple-600 hover:to-pink-600",
+          "active:from-purple-700 active:to-pink-700",
+          "shadow-xl shadow-purple-500/40",
+          "hover:shadow-2xl hover:shadow-purple-500/50",
           "focus-visible:ring-purple-500/50",
           "transition-all duration-300",
         ],
         glow: [
-          "bg-primary text-primary-foreground",
-          "shadow-lg shadow-primary/50",
-          "hover:shadow-xl hover:shadow-primary/60",
-          "active:shadow-md active:shadow-primary/40",
-          "focus-visible:ring-primary/50",
+          "bg-blue-500 text-white",
+          "shadow-[0_0_30px_rgba(59,130,246,0.5)]",
+          "hover:shadow-[0_0_40px_rgba(59,130,246,0.7)]",
+          "active:shadow-[0_0_20px_rgba(59,130,246,0.4)]",
+          "hover:bg-blue-600",
+          "focus-visible:ring-blue-500/50",
           "transition-all duration-300",
         ],
         soft: [
@@ -119,29 +120,31 @@ const buttonVariants = cva(
           "transition-all duration-200",
         ],
         neon: [
-          "bg-transparent text-primary",
-          "border-2 border-primary",
-          "hover:bg-primary hover:text-primary-foreground",
-          "hover:shadow-[0_0_20px_rgba(var(--primary),0.5)]",
-          "active:shadow-[0_0_10px_rgba(var(--primary),0.3)]",
-          "focus-visible:ring-primary/50",
+          "bg-transparent text-green-400",
+          "border-2 border-green-400",
+          "hover:bg-green-400 hover:text-gray-900",
+          "hover:shadow-[0_0_30px_rgba(74,222,128,0.6)]",
+          "active:shadow-[0_0_15px_rgba(74,222,128,0.4)]",
+          "focus-visible:ring-green-400/50",
           "transition-all duration-300",
         ],
       },
       size: {
-        xs: "h-7 px-2.5 text-xs rounded",
-        sm: "h-8 px-3 text-sm rounded",
-        md: "h-10 px-4 text-base rounded-md",
-        lg: "h-12 px-6 text-lg rounded-lg",
-        xl: "h-14 px-8 text-xl rounded-lg",
-        icon: "h-10 w-10 p-2 rounded-md",
-        "icon-sm": "h-8 w-8 p-1.5 rounded",
-        "icon-lg": "h-12 w-12 p-3 rounded-lg",
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-12 px-6 text-lg",
+        xl: "h-14 px-8 text-xl",
+        icon: "h-10 w-10 p-2",
+        "icon-sm": "h-8 w-8 p-1.5",
+        "icon-lg": "h-12 w-12 p-3",
       },
       rounded: {
-        default: "",
+        default: "rounded-xl",
         full: "rounded-full",
         none: "rounded-none",
+        sm: "rounded-lg",
+        lg: "rounded-2xl",
       },
       fullWidth: {
         true: "w-full",
@@ -199,7 +202,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, rounded, fullWidth, className }))}
+        className={cn("moonui-theme", buttonVariants({ variant, size, rounded, fullWidth, className }))}
         ref={ref}
         disabled={disabled || loading}
         data-loading={loading ? "" : undefined}

package/src/components/ui/calendar.tsx

@@ -164,9 +164,9 @@ function Calendar({
   const days = getDaysInMonth();
 
   return (
-    <div className={cn("p-0", className)}>
+    <div className={cn("moonui-theme", "p-0", className)}>
       {/* Header */}
-      <div className="flex items-center justify-between px-6 py-4">
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border/50 dark:border-gray-700/50">
         <button
           onClick={handlePreviousMonth}
           className={cn(

package/src/components/ui/card-input.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "@/components/ui"
+import { CreditCard } from "lucide-react"
+
+// Card type detection
+const getCardType = (number: string): string => {
+  const patterns = {
+    visa: /^4/,
+    mastercard: /^5[1-5]/,
+    amex: /^3[47]/,
+    discover: /^6(?:011|5)/,
+    diners: /^3(?:0[0-5]|[68])/,
+    jcb: /^35/,
+  }
+
+  for (const [type, pattern] of Object.entries(patterns)) {
+    if (pattern.test(number)) return type
+  }
+  return "unknown"
+}
+
+// Format card number with spaces
+const formatCardNumber = (value: string, cardType: string): string => {
+  const cleaned = value.replace(/\s+/g, "")
+  const groups = cardType === "amex" ? [4, 6, 5] : [4, 4, 4, 4]
+  
+  let formatted = ""
+  let position = 0
+  
+  for (const group of groups) {
+    if (position >= cleaned.length) break
+    if (formatted) formatted += " "
+    formatted += cleaned.slice(position, position + group)
+    position += group
+  }
+  
+  return formatted
+}
+
+// Card Number Input
+export interface CardNumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string, cardType: string) => void
+  showIcon?: boolean
+}
+
+export const CardNumberInput = React.forwardRef<HTMLInputElement, CardNumberInputProps>(
+  ({ className, value = "", onChange, showIcon = true, size, ...props }, ref) => {
+    const [cardType, setCardType] = React.useState("unknown")
+    
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/\D/g, "")
+      const detectedType = getCardType(rawValue)
+      setCardType(detectedType)
+      
+      const maxLength = detectedType === "amex" ? 15 : 16
+      const truncated = rawValue.slice(0, maxLength)
+      const formatted = formatCardNumber(truncated, detectedType)
+      
+      onChange?.(truncated, detectedType)
+      
+      // Update the input value
+      e.target.value = formatted
+    }
+    
+    return (
+      <div className="relative">
+        <Input
+          ref={ref}
+          type="text"
+          inputMode="numeric"
+          autoComplete="cc-number"
+          placeholder="1234 5678 9012 3456"
+          value={formatCardNumber(value, cardType)}
+          onChange={handleChange}
+          className={cn(showIcon && "pl-10", className)}
+          {...props}
+        />
+        {showIcon && (
+          <CreditCard className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        )}
+      </div>
+    )
+  }
+)
+CardNumberInput.displayName = "CardNumberInput"
+
+// Card Expiry Input
+export interface CardExpiryInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export const CardExpiryInput = React.forwardRef<HTMLInputElement, CardExpiryInputProps>(
+  ({ className, value = "", onChange, size, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let rawValue = e.target.value.replace(/\D/g, "")
+      
+      if (rawValue.length >= 2) {
+        const month = parseInt(rawValue.slice(0, 2))
+        if (month > 12) {
+          rawValue = "12" + rawValue.slice(2)
+        } else if (month === 0) {
+          rawValue = "01" + rawValue.slice(2)
+        }
+      }
+      
+      rawValue = rawValue.slice(0, 4)
+      let formatted = rawValue
+      
+      if (rawValue.length >= 2) {
+        formatted = rawValue.slice(0, 2) + "/" + rawValue.slice(2)
+      }
+      
+      onChange?.(rawValue)
+      e.target.value = formatted
+    }
+    
+    const formattedValue = value.length >= 2 ? value.slice(0, 2) + "/" + value.slice(2) : value
+    
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        autoComplete="cc-exp"
+        placeholder="MM/YY"
+        value={formattedValue}
+        onChange={handleChange}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+CardExpiryInput.displayName = "CardExpiryInput"
+
+// Card CVC Input
+export interface CardCVCInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string) => void
+  cardType?: string
+}
+
+export const CardCVCInput = React.forwardRef<HTMLInputElement, CardCVCInputProps>(
+  ({ className, value = "", onChange, cardType = "unknown", size, ...props }, ref) => {
+    const maxLength = cardType === "amex" ? 4 : 3
+    
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/\D/g, "").slice(0, maxLength)
+      onChange?.(rawValue)
+    }
+    
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        inputMode="numeric"
+        autoComplete="cc-csc"
+        placeholder={cardType === "amex" ? "1234" : "123"}
+        value={value}
+        onChange={handleChange}
+        maxLength={maxLength}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+CardCVCInput.displayName = "CardCVCInput"
+
+// Card Zip Input
+export interface CardZipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string) => void
+  format?: "US" | "CA" | "UK" | "other"
+}
+
+export const CardZipInput = React.forwardRef<HTMLInputElement, CardZipInputProps>(
+  ({ className, value = "", onChange, format = "US", size, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let rawValue = e.target.value
+      
+      switch (format) {
+        case "US":
+          rawValue = rawValue.replace(/\D/g, "").slice(0, 5)
+          break
+        case "CA":
+          rawValue = rawValue.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6)
+          if (rawValue.length >= 3) {
+            rawValue = rawValue.slice(0, 3) + " " + rawValue.slice(3)
+          }
+          break
+        case "UK":
+          rawValue = rawValue.toUpperCase().replace(/[^A-Z0-9\s]/g, "").slice(0, 8)
+          break
+        default:
+          rawValue = rawValue.slice(0, 10)
+      }
+      
+      onChange?.(rawValue.replace(/\s/g, ""))
+      e.target.value = rawValue
+    }
+    
+    const getPlaceholder = () => {
+      switch (format) {
+        case "US": return "12345"
+        case "CA": return "K1A 0B1"
+        case "UK": return "SW1A 1AA"
+        default: return "Postal Code"
+      }
+    }
+    
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        autoComplete="postal-code"
+        placeholder={getPlaceholder()}
+        value={value}
+        onChange={handleChange}
+        className={className}
+        {...props}
+      />
+    )
+  }
+)
+CardZipInput.displayName = "CardZipInput"

package/src/components/ui/card.stories.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
 import { Button } from './button';

package/src/components/ui/card.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { motion, type HTMLMotionProps } from "framer-motion";
@@ -63,7 +65,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
       return (
         <motion.div
           ref={ref}
-          className={cn(cardVariants({ variant, size, radius, interactive, className }))}
+          className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
           {...interactionProps}
           {...(props as any)}
         />
@@ -74,7 +76,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
     return (
       <div
         ref={ref}
-        className={cn(cardVariants({ variant, size, radius, interactive, className }))}
+        className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
         {...props}
       />
     );
@@ -88,7 +90,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5", className)}
+    className={cn("moonui-theme", "flex flex-col space-y-1.5", className)}
     {...props}
   />
 ));
@@ -100,7 +102,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    className={cn("moonui-theme", "text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
 ));
@@ -112,7 +114,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("moonui-theme", "text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -122,7 +124,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("pt-0", className)} {...props} />
+  <div ref={ref} className={cn("moonui-theme", "pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
@@ -132,7 +134,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center pt-4", className)}
+    className={cn("moonui-theme", "flex items-center pt-4", className)}
     {...props}
   />
 ));

package/src/components/ui/checkbox.tsx

@@ -94,7 +94,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       checked={effectiveChecked}
-      className={cn(checkboxVariants({ variant, size, radius, animation }), className)}
+      className={cn("moonui-theme", checkboxVariants({ variant, size, radius, animation }), className)}
       {...props}
     >
       <CheckboxPrimitive.Indicator

package/src/components/ui/collapsible.tsx

@@ -52,7 +52,7 @@ const CollapsibleTrigger = React.forwardRef<
     return (
       <CollapsiblePrimitive.Trigger
         ref={ref}
-        className={cn(collapsibleTriggerVariants({ variant, size }), className)}
+        className={cn("moonui-theme", collapsibleTriggerVariants({ variant, size }), className)}
         asChild={asChild}
         {...props}
       >
@@ -64,7 +64,7 @@ const CollapsibleTrigger = React.forwardRef<
   return (
     <CollapsiblePrimitive.Trigger
       ref={ref}
-      className={cn(collapsibleTriggerVariants({ variant, size }), className)}
+      className={cn("moonui-theme", collapsibleTriggerVariants({ variant, size }), className)}
       {...props}
     >
       {children}
@@ -107,7 +107,7 @@ const CollapsibleContent = React.forwardRef<
 >(({ className, children, variant, size, ...props }, ref) => (
   <CollapsiblePrimitive.Content
     ref={ref}
-    className={cn(collapsibleContentVariants({ variant, size }), className)}
+    className={cn("moonui-theme", collapsibleContentVariants({ variant, size }), className)}
     {...props}
   >
     <div className="p-4">{children}</div>

package/src/components/ui/color-picker.tsx

@@ -574,7 +574,7 @@ export function SimpleColorPicker({
   };
 
   return (
-    <div className={cn("flex flex-wrap gap-2", className)}>
+    <div className={cn("moonui-theme", "flex flex-wrap gap-2", className)}>
       {colors.map((color) => (
         <button
           key={color}
@@ -617,7 +617,7 @@ export function GradientPicker({
   };
 
   return (
-    <div className={cn("space-y-4", className)}>
+    <div className={cn("moonui-theme", "space-y-4", className)}>
       <div
         className="h-20 rounded-lg border-2"
         style={{

package/src/components/ui/command.tsx

@@ -48,7 +48,7 @@ const Command = React.forwardRef<
 >(({ className, variant, size, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
-    className={cn(commandVariants({ variant, size }), className)}
+    className={cn("moonui-theme", commandVariants({ variant, size }), className)}
     {...props}
   />
 ))
@@ -112,7 +112,7 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("moonui-theme", "max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
 ))
@@ -128,7 +128,7 @@ const CommandEmpty = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className={cn("py-6 text-center text-sm text-muted-foreground", className)}
+    className={cn("moonui-theme", "py-6 text-center text-sm text-muted-foreground", className)}
     {...props}
   />
 ))
@@ -163,7 +163,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn("moonui-theme", "-mx-1 h-px bg-border", className)}
     {...props}
   />
 ))

package/src/components/ui/data-table.stories.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { DataTable } from './data-table';
 import { Badge } from './badge';
@@ -141,7 +143,7 @@ const userColumns: ColumnDef<User>[] = [
     cell: ({ row }) => {
       const role = row.getValue('role') as string;
       return (
-        <Badge variant={role === 'admin' ? 'default' : 'secondary'}>
+        <Badge variant={role === 'admin' ? 'admin' : 'secondary'}>
           {role}
         </Badge>
       );
@@ -156,7 +158,7 @@ const userColumns: ColumnDef<User>[] = [
         <Badge
           variant={
             status === 'active'
-              ? 'default'
+              ? 'success'
               : status === 'inactive'
               ? 'secondary'
               : 'outline'