ruler-components 0.1.0 → 0.1.2

package/components/ui/steppers.tsx

@@ -1,309 +0,0 @@
-"use client";
-
-import React from "react";
-import { motion } from "framer-motion";
-import { Check, ChevronRight, HelpCircle } from "lucide-react";
-import { cn } from "@/lib/cn";
-
-export interface Step {
-  title: string;
-  description?: string;
-  icon?: React.ElementType;
-}
-
-interface StepperProps {
-  steps: Step[];
-  currentStep: number;
-  onStepClick?: (step: number) => void;
-  className?: string;
-}
-
-type StepTone = "done" | "current" | "upcoming";
-
-function getTone(i: number, currentStep: number): StepTone {
-  if (i < currentStep) return "done";
-  if (i === currentStep) return "current";
-  return "upcoming";
-}
-
-const NODE_TONE: Record<StepTone, string> = {
-  done: "border-zinc-900 bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 dark:border-white",
-  current:
-    "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900",
-  upcoming:
-    "border-zinc-200 bg-white text-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-600",
-};
-
-const TEXT_TONE: Record<StepTone, string> = {
-  done: "text-zinc-900 dark:text-zinc-100",
-  current: "text-zinc-900 dark:text-white",
-  upcoming: "text-zinc-400 dark:text-zinc-600",
-};
-
-export function HorizontalStepper({ steps, currentStep, className }: StepperProps) {
-  return (
-    <nav aria-label="Progress" className={cn("flex w-full items-start pb-8", className)}>
-      {steps.map((step, i) => {
-        const tone = getTone(i, currentStep);
-        return (
-          <React.Fragment key={i}>
-            <div className="relative flex flex-col items-center">
-              <div
-                aria-current={tone === "current" ? "step" : undefined}
-                className={cn(
-                  "z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-bold shadow-sm transition-all duration-300",
-                  NODE_TONE[tone],
-                )}
-              >
-                {tone === "done" ? <Check size={18} strokeWidth={3} /> : <span>{i + 1}</span>}
-              </div>
-              <div className="absolute top-12 w-24 text-center">
-                <span className={cn("text-[10px] font-black uppercase tracking-tighter transition-colors duration-300", TEXT_TONE[tone])}>
-                  {step.title}
-                </span>
-              </div>
-            </div>
-            {i < steps.length - 1 && (
-              <div className="relative mx-2 mt-5 h-0.5 flex-1 shrink-0 rounded-full bg-zinc-100 dark:bg-zinc-800">
-                <motion.div
-                  initial={false}
-                  animate={{ width: i < currentStep ? "100%" : "0%" }}
-                  className="absolute h-full rounded-full bg-zinc-900 dark:bg-white"
-                  transition={{ duration: 0.5, ease: "easeInOut" }}
-                />
-              </div>
-            )}
-          </React.Fragment>
-        );
-      })}
-    </nav>
-  );
-}
-
-export function VerticalStepper({ steps, currentStep, className }: StepperProps) {
-  return (
-    <nav aria-label="Progress" className={cn("space-y-0", className)}>
-      {steps.map((step, i) => {
-        const tone = getTone(i, currentStep);
-        return (
-          <div key={i} className="relative pl-10 pb-10 last:pb-0">
-            {i < steps.length - 1 && (
-              <div className="absolute left-[15px] top-8 bottom-0 w-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800">
-                <motion.div
-                  initial={false}
-                  animate={{ height: i < currentStep ? "100%" : "0%" }}
-                  className="w-full rounded-full bg-zinc-900 dark:bg-white"
-                  transition={{ duration: 0.4 }}
-                />
-              </div>
-            )}
-            <motion.div
-              aria-current={tone === "current" ? "step" : undefined}
-              animate={{ scale: tone === "current" ? 1.15 : 1 }}
-              className={cn(
-                "absolute left-0 top-0 z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all duration-300",
-                tone === "done" || tone === "current"
-                  ? "border-zinc-900 bg-zinc-900 dark:border-white dark:bg-white"
-                  : "border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950",
-              )}
-            >
-              {tone === "done" ? (
-                <Check size={14} strokeWidth={3} className="text-white dark:text-zinc-900" />
-              ) : (
-                <div className={cn("h-1.5 w-1.5 rounded-full", tone === "current" ? "bg-white dark:bg-zinc-900" : "bg-zinc-300 dark:bg-zinc-700")} />
-              )}
-            </motion.div>
-            <div className="flex flex-col">
-              <h6 className={cn("text-sm font-bold tracking-tight transition-colors duration-300", TEXT_TONE[tone])}>
-                {step.title}
-              </h6>
-              <p className="mt-1 text-xs leading-tight text-zinc-500 dark:text-zinc-400">{step.description}</p>
-            </div>
-          </div>
-        );
-      })}
-    </nav>
-  );
-}
-
-export function ProgressStepper({ steps, currentStep }: StepperProps) {
-  const progress = ((currentStep + 1) / steps.length) * 100;
-  return (
-    <div className="w-full space-y-4">
-      <div className="flex items-end justify-between">
-        <div className="flex items-baseline gap-2">
-          <span className="text-lg font-black tracking-tighter text-zinc-900 dark:text-white">
-            {Math.round(progress)}%
-          </span>
-        </div>
-        <div className="flex gap-1">
-          {steps.map((_, i) => (
-            <motion.div
-              key={i}
-              animate={{ opacity: i <= currentStep ? 1 : 0.2 }}
-              className="h-1 w-4 rounded-full bg-zinc-900 dark:bg-white"
-            />
-          ))}
-        </div>
-      </div>
-      <div className="h-3 w-full overflow-hidden rounded-full bg-zinc-100 p-1 dark:bg-zinc-800">
-        <motion.div
-          initial={false}
-          animate={{ width: `${progress}%` }}
-          className="h-full rounded-full bg-zinc-900 dark:bg-white"
-          transition={{ type: "spring", bounce: 0, duration: 0.8 }}
-        />
-      </div>
-    </div>
-  );
-}
-export function DotStepper({ steps, currentStep }: StepperProps) {
-  return (
-    <div className="flex items-center gap-3 rounded-full border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950">
-      {steps.map((_, i) => {
-        const tone = getTone(i, currentStep);
-        return (
-          <motion.div
-            key={i}
-            animate={{ width: tone === "current" ? 40 : 12 }}
-            className={cn(
-              "h-3 rounded-full transition-colors duration-300",
-              tone === "done" || tone === "current" ? "bg-zinc-900 dark:bg-white" : "bg-zinc-200 dark:bg-zinc-800",
-            )}
-            transition={{ type: "spring", stiffness: 300, damping: 20 }}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-export function SegmentedStepper({ steps, currentStep }: StepperProps) {
-  return (
-    <div className="flex w-full gap-1">
-      {steps.map((_, i) => (
-        <div key={i} className="h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800">
-          <motion.div
-            initial={false}
-            animate={{ x: i <= currentStep ? "0%" : "-100%" }}
-            className="h-full bg-zinc-900 dark:bg-white"
-            transition={{ duration: 0.6 }}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function BreadcrumbStepper({ steps, currentStep }: StepperProps) {
-  return (
-    <nav aria-label="Progress" className="w-full">
-      <div className="flex w-full items-center gap-2">
-        {steps.map((step, i) => {
-          const tone = getTone(i, currentStep);
-
-          return (
-            <div
-              key={i}
-              className="flex min-w-0 flex-1 items-center gap-2"
-            >
-              <motion.div
-                animate={{
-                  opacity: tone === "upcoming" ? 0.45 : 1,
-                  scale: tone === "current" ? 1 : 0.98,
-                }}
-                transition={{ duration: 0.25 }}
-                className={cn(
-                  "flex min-w-0 flex-1 items-center justify-center rounded-full px-2 py-2 text-[9px] font-bold uppercase tracking-wide transition-all duration-300",
-                  tone === "current" &&
-                    "bg-zinc-900 text-white shadow-sm dark:bg-white dark:text-zinc-900",
-                  tone === "done" &&
-                    "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-white",
-                  tone === "upcoming" &&
-                    "text-zinc-400 dark:text-zinc-600",
-                )}
-              >
-                <span className="whitespace-nowrap">{step.title}</span>
-              </motion.div>
-
-              {i < steps.length - 1 && (
-                <span
-                  aria-hidden="true"
-                  className="h-px w-4 shrink-0 bg-zinc-200 dark:bg-zinc-800"
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </nav>
-  );
-}
-
-export function TimelineStepper({ steps, currentStep }: StepperProps) {
-  return (
-    <nav aria-label="Progress" className="space-y-12">
-      {steps.map((step, i) => {
-        const tone = getTone(i, currentStep);
-        return (
-          <div key={i} className="relative flex gap-8">
-            {i < steps.length - 1 && (
-              <div className={cn("absolute left-5 top-10 -bottom-12 w-0.5 transition-colors duration-1000", i < currentStep ? "bg-zinc-900 dark:bg-white" : "bg-zinc-100 dark:bg-zinc-800")} />
-            )}
-            <motion.div
-              animate={{ scale: tone === "current" ? 1.2 : 1 }}
-              className={cn(
-                "z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-4 border-white shadow-xl ring-2 transition-all duration-300 dark:border-zinc-950",
-                tone === "done" || tone === "current"
-                  ? "bg-zinc-900 ring-zinc-900 dark:bg-white dark:ring-white"
-                  : "bg-white ring-zinc-200 dark:bg-zinc-950 dark:ring-zinc-800",
-              )}
-            >
-              {tone === "done" ? (
-                <Check size={16} strokeWidth={3} className="text-white dark:text-zinc-900" />
-              ) : (
-                <span className={cn("text-xs font-bold", tone === "current" ? "text-white dark:text-zinc-900" : "text-zinc-400")}>{i + 1}</span>
-              )}
-            </motion.div>
-            <div className={cn("transition-all duration-500", tone === "upcoming" ? "translate-x-4 opacity-20" : "translate-x-0 opacity-100")}>
-              <h3 className="text-sm font-black uppercase tracking-tighter text-zinc-900 dark:text-white">{step.title}</h3>
-              <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">{step.description}</p>
-            </div>
-          </div>
-        );
-      })}
-    </nav>
-  );
-}
-
-export function InteractiveStepper({ steps, currentStep, onStepClick }: StepperProps) {
-  return (
-    <div className="flex flex-wrap gap-4">
-      {steps.map((step, i) => {
-        const tone = getTone(i, currentStep);
-        return (
-          <button
-            key={i}
-            onClick={() => onStepClick?.(i)}
-            className={cn(
-              "group relative flex min-w-44 flex-1 flex-col gap-2 rounded-2xl border-2 p-6 text-left transition-all duration-300",
-              tone === "current"
-                ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900"
-                : "border-zinc-100 hover:border-zinc-900 dark:border-zinc-800 dark:hover:border-white",
-            )}
-          >
-            <span className={cn("text-[10px] font-bold uppercase tracking-widest", tone === "current" ? "text-zinc-400" : "text-zinc-400 group-hover:text-zinc-900 dark:group-hover:text-zinc-200")}>
-              Phase 0{i + 1}
-            </span>
-            <span className="text-sm font-black">{step.title}</span>
-            {tone === "done" && (
-              <motion.div layoutId="inter-check" className="absolute -right-2 -top-2 rounded-full bg-zinc-900 p-1 text-white shadow-lg dark:bg-white dark:text-zinc-900">
-                <Check size={14} strokeWidth={3} />
-              </motion.div>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/components/ui/switch.tsx

@@ -1,153 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/cn";
-
-const switchTrackVariants = cva(
-  [
-    "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-200",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900/20 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
-    "dark:focus-visible:ring-zinc-100/20 dark:focus-visible:ring-offset-zinc-950",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "data-[state=checked]:bg-zinc-900 data-[state=unchecked]:bg-zinc-200",
-    "dark:data-[state=checked]:bg-zinc-100 dark:data-[state=unchecked]:bg-zinc-700",
-    "hover:data-[state=unchecked]:bg-zinc-300 dark:hover:data-[state=unchecked]:bg-zinc-600",
-    "hover:data-[state=checked]:bg-zinc-800 dark:hover:data-[state=checked]:bg-zinc-200",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-5 w-9",
-        md: "h-6 w-11",
-        lg: "h-7 w-[3.25rem]",
-      },
-    },
-    defaultVariants: { size: "md" },
-  },
-);
-
-const switchThumbVariants = cva(
-  "pointer-events-none absolute left-0.5 top-1/2 block -translate-y-1/2 rounded-full bg-white shadow-sm transition-transform duration-200 dark:bg-zinc-950",
-  {
-    variants: {
-      size: {
-        sm: "h-3.5 w-3.5 data-[state=checked]:translate-x-4",
-        md: "h-4 w-4 data-[state=checked]:translate-x-5",
-        lg: "h-5 w-5 data-[state=checked]:translate-x-6",
-      },
-    },
-    defaultVariants: { size: "md" },
-  },
-);
-
-export interface SwitchProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "size">,
-    VariantProps<typeof switchTrackVariants> {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  label?: string;
-  description?: string;
-}
-
-const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
-  (
-    {
-      className,
-      size,
-      checked,
-      defaultChecked = false,
-      onCheckedChange,
-      disabled,
-      label,
-      description,
-      id,
-      onClick,
-      ...props
-    },
-    ref,
-  ) => {
-    const generatedId = React.useId();
-    const switchId = id ?? generatedId;
-    const isControlled = checked !== undefined;
-    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
-    const isChecked = isControlled ? checked : uncontrolledChecked;
-    const state = isChecked ? "checked" : "unchecked";
-
-    const toggle = () => {
-      if (disabled) return;
-      const next = !isChecked;
-      if (!isControlled) setUncontrolledChecked(next);
-      onCheckedChange?.(next);
-    };
-
-    const switchControl = (
-      <button
-        ref={ref}
-        id={switchId}
-        type="button"
-        role="switch"
-        aria-checked={isChecked}
-        aria-labelledby={label ? `${switchId}-label` : undefined}
-        aria-describedby={description ? `${switchId}-description` : undefined}
-        disabled={disabled}
-        data-state={state}
-        className={cn(switchTrackVariants({ size }), className)}
-        onClick={(event) => {
-          toggle();
-          onClick?.(event);
-        }}
-        onKeyDown={(event) => {
-          if (event.key === " ") {
-            event.preventDefault();
-            toggle();
-          }
-        }}
-        {...props}
-      >
-        <span data-state={state} className={switchThumbVariants({ size })} />
-      </button>
-    );
-
-    if (!label && !description) {
-      return switchControl;
-    }
-
-    return (
-      <div
-        className={cn(
-          "flex items-start justify-between gap-4",
-          disabled && "opacity-60",
-        )}
-      >
-        <div className="flex min-w-0 flex-col gap-0.5">
-          {label && (
-            <label
-              id={`${switchId}-label`}
-              htmlFor={switchId}
-              className={cn(
-                "text-sm font-medium leading-snug text-zinc-800 dark:text-zinc-100",
-                !disabled && "cursor-pointer",
-              )}
-            >
-              {label}
-            </label>
-          )}
-          {description && (
-            <p
-              id={`${switchId}-description`}
-              className="text-xs leading-relaxed text-zinc-500 dark:text-zinc-400"
-            >
-              {description}
-            </p>
-          )}
-        </div>
-        {switchControl}
-      </div>
-    );
-  },
-);
-Switch.displayName = "Switch";
-
-export { Switch, switchTrackVariants, switchThumbVariants };

package/components/ui/table.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
-
-export function Table({ children, className = "", ...props }: React.HTMLAttributes<HTMLTableElement>) {
-  return (
-    <div className="w-full overflow-auto">
-      <table className={`w-full caption-bottom text-sm ${className}`} {...props}>{children}</table>
-    </div>
-  );
-}
-
-export function TableHeader({ children, className = "", ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
-  return <thead className={`border-b border-zinc-200 bg-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-900/50 ${className}`} {...props}>{children}</thead>;
-}
-
-export function TableBody({ children, className = "", ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
-  return <tbody className={`divide-y divide-zinc-200 dark:divide-zinc-800 ${className}`} {...props}>{children}</tbody>;
-}
-
-export function TableRow({ children, className = "", ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
-  return <tr className={`transition-colors hover:bg-zinc-50/50 dark:hover:bg-zinc-900/50 ${className}`} {...props}>{children}</tr>;
-}
-
-export function TableHead({ children, className = "", ...props }: React.ThHTMLAttributes<HTMLTableHeaderCellElement>) {
-  return (
-    <th className={`h-12 px-4 text-left align-middle font-semibold text-zinc-500 dark:text-zinc-400 uppercase text-[11px] tracking-wider ${className}`} {...props}>
-      {children}
-    </th>
-  );
-}
-
-export function TableCell({ children, className = "", ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
-  return <td className={`p-4 align-middle text-zinc-700 dark:text-zinc-300 ${className}`} {...props}>{children}</td>;
-}
-
-export function ExpandableRow({ title, details, children, colSpan = 10 }: { title: React.ReactNode; details: React.ReactNode; children?: React.ReactNode; colSpan?: number }) {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  return (
-    <>
-      <TableRow className="cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
-        <TableCell className="w-10 text-zinc-400">
-          {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-        </TableCell>
-        {children}
-      </TableRow>
-      {isExpanded && (
-        <tr className="bg-zinc-50/30 dark:bg-zinc-900/30">
-          <TableCell colSpan={colSpan} className="p-6 border-l-2 border-zinc-900 dark:border-white">
-            {details}
-          </TableCell>
-        </tr>
-      )}
-    </>
-  );
-}

package/components/ui/tabs.tsx

@@ -1,166 +0,0 @@
-"use client";
-
-import React, { createContext, useContext, useState } from "react";
-import { cn } from "@/lib/cn";
-
-type TabsContextType = {
-  activeTab: string;
-  setActiveTab: (value: string) => void;
-  variant: string;
-  uid: string;
-};
-
-const TabsContext = createContext<TabsContextType | null>(null);
-
-function useTabs() {
-  const context = useContext(TabsContext);
-  if (!context) return { activeTab: "", setActiveTab: () => {}, variant: "", uid: "" };
-  return context;
-}
-
-export function Tabs({
-  children,
-  defaultValue,
-  variant = "underline",
-  className
-}: {
-  children: React.ReactNode;
-  defaultValue: string;
-  variant?: "underline" | "pill" | "segmented" | "bordered" | "filled" | "icon" | "vertical" | "floating" | "scrollable" | "card";
-  className?: string;
-}) {
-  const [activeTab, setActiveTab] = useState(defaultValue);
-  const uid = React.useId();
-  return (
-    <TabsContext.Provider value={{ activeTab, setActiveTab, variant, uid }}>
-      <div className={cn(variant === "vertical" ? "flex gap-8" : "flex flex-col gap-4", className)}>
-        {children}
-      </div>
-    </TabsContext.Provider>
-  );
-}
-
-export function TabsList({ children, className }: { children: React.ReactNode; className?: string }) {
-  const { variant } = useTabs();
-
-  const variantStyles: Record<string, string> = {
-    underline: "flex min-w-0 gap-4 overflow-x-auto border-b border-zinc-200 dark:border-zinc-800 sm:gap-8 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-    pill: "flex min-w-0 flex-wrap gap-2",
-    segmented: "inline-flex max-w-full flex-wrap p-1 bg-zinc-100 dark:bg-zinc-900 rounded-xl gap-1",
-    bordered: "flex min-w-0 flex-wrap gap-3",
-    filled: "flex min-w-0 flex-wrap gap-1 bg-zinc-50 dark:bg-zinc-900/50 p-1.5 rounded-lg",
-    icon: "flex min-w-0 flex-wrap gap-6 sm:gap-10",
-    vertical: "flex flex-col border-l border-zinc-100 dark:border-zinc-800",
-    floating: "inline-flex max-w-full flex-wrap bg-white dark:bg-zinc-950 shadow-xl border border-zinc-100 dark:border-zinc-800 p-2 rounded-2xl gap-2",
-    scrollable: "flex min-w-0 gap-6 overflow-x-auto pb-2 docs-scrollbar whitespace-nowrap",
-    card: "flex min-w-0 gap-1 overflow-x-auto border-b border-zinc-100 dark:border-zinc-800 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-  };
-
-  return (
-    <div
-      role="tablist"
-      aria-orientation={variant === "vertical" ? "vertical" : "horizontal"}
-      className={cn(variantStyles[variant], className)}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function TabsTrigger({ 
-  value, 
-  label, 
-  icon: Icon, 
-  badge,
-  className 
-}: { 
-  value: string; 
-  label: string; 
-  icon?: any; 
-  badge?: string | number;
-  className?: string;
-}) {
-  const { activeTab, setActiveTab, variant, uid } = useTabs();
-  const isActive = activeTab === value;
-
-  const triggerStyles: Record<string, string> = {
-    underline: cn(
-      "relative pb-3 text-sm font-medium transition-all",
-      isActive ? "text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
-    ),
-    pill: cn(
-      "px-4 py-2 rounded-full text-sm font-semibold transition-all",
-      isActive ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 shadow-lg" : "bg-white dark:bg-zinc-900 text-zinc-600 border border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50"
-    ),
-    segmented: cn(
-      "px-6 py-1.5 rounded-lg text-xs font-bold transition-all",
-      isActive ? "bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-sm" : "text-zinc-500 hover:text-zinc-700"
-    ),
-    bordered: cn(
-      "px-4 py-2 rounded-lg border-2 text-sm font-bold transition-all",
-      isActive ? "border-zinc-900 text-zinc-900 dark:border-white dark:text-white" : "border-transparent text-zinc-400 hover:border-zinc-200"
-    ),
-    filled: cn(
-      "px-4 py-2 rounded-md text-sm font-medium transition-all",
-      isActive ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900" : "text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
-    ),
-    card: cn(
-      "relative shrink-0 px-4 py-2.5 text-sm font-medium transition-all",
-      isActive ? "text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
-    ),
-    icon: cn(
-      "flex flex-col items-center gap-1.5 transition-all",
-      isActive ? "text-zinc-900 dark:text-white" : "text-zinc-400 hover:text-zinc-700"
-    ),
-    vertical: cn(
-      "pl-6 pr-12 py-2 text-sm font-medium border-l-2 -ml-[2px] transition-all",
-      isActive ? "border-zinc-900 text-zinc-900 dark:border-white dark:text-white bg-zinc-50 dark:bg-zinc-900" : "border-transparent text-zinc-500 hover:text-zinc-800"
-    ),
-    floating: cn(
-      "px-4 py-2 rounded-xl text-sm font-medium transition-all",
-      isActive ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900" : "text-zinc-500 hover:bg-zinc-50"
-    )
-  };
-
-  return (
-    <button
-      type="button"
-      role="tab"
-      id={`${uid}-tab-${value}`}
-      aria-selected={isActive}
-      aria-controls={`${uid}-panel-${value}`}
-      tabIndex={isActive ? 0 : -1}
-      onClick={() => setActiveTab(value)}
-      className={cn("shrink-0 outline-none", triggerStyles[variant] || triggerStyles['underline'], className)}
-    >
-      <div className="flex items-center gap-2">
-        {Icon && <Icon size={variant === "icon" ? 20 : 16} />}
-        <span>{label}</span>
-        {badge && (
-          <span className={cn("flex h-4 w-4 items-center justify-center rounded-full text-[10px] text-white", isActive ? "bg-zinc-800 dark:bg-zinc-700" : "bg-red-500")}>
-            {badge}
-          </span>
-        )}
-      </div>
-      {variant === "underline" && isActive && (
-        <div className="absolute bottom-0 left-0 h-[2.5px] w-full bg-zinc-900 dark:bg-white rounded-full animate-in fade-in" />
-      )}
-    </button>
-  );
-}
-
-export function TabsContent({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
-  const { activeTab, uid } = useTabs();
-  if (activeTab !== value) return null;
-  return (
-    <div
-      role="tabpanel"
-      id={`${uid}-panel-${value}`}
-      aria-labelledby={`${uid}-tab-${value}`}
-      tabIndex={0}
-      className={cn("outline-none animate-in fade-in slide-in-from-bottom-2 duration-300", className)}
-    >
-      {children}
-    </div>
-  );
-}