ruler-components 0.1.0 → 0.1.2

package/components/landing/hero-spotlight.tsx

@@ -1,126 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useSyncExternalStore, type ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-
-function subscribeReducedMotion(onChange: () => void) {
-  const media = window.matchMedia(REDUCED_MOTION_QUERY);
-  media.addEventListener("change", onChange);
-  return () => media.removeEventListener("change", onChange);
-}
-
-function useReducedMotion() {
-  return useSyncExternalStore(
-    subscribeReducedMotion,
-    () => window.matchMedia(REDUCED_MOTION_QUERY).matches,
-    () => false,
-  );
-}
-
-function spawnSnowParticle(container: HTMLElement, x: number, y: number) {
-  const particle = document.createElement("span");
-  particle.className = "hero-particle";
-
-  const offsetX = (Math.random() - 0.5) * 16;
-  const offsetY = (Math.random() - 0.5) * 16;
-  particle.style.left = `${x + offsetX}px`;
-  particle.style.top = `${y + offsetY}px`;
-
-  const size = 2 + Math.random() * 2.5;
-  particle.style.width = `${size}px`;
-  particle.style.height = `${size}px`;
-
-  const dx1 = (Math.random() - 0.5) * 40;
-  const dy1 = 12 + Math.random() * 18;
-  const dx2 = dx1 + (Math.random() - 0.5) * 50;
-  const dy2 = dy1 + 25 + Math.random() * 35;
-  const duration = 1800 + Math.random() * 1600;
-  const peakOpacity = 0.5 + Math.random() * 0.4;
-
-  particle.style.setProperty("--dx1", `${dx1}px`);
-  particle.style.setProperty("--dy1", `${dy1}px`);
-  particle.style.setProperty("--dx2", `${dx2}px`);
-  particle.style.setProperty("--dy2", `${dy2}px`);
-  particle.style.setProperty("--dur", `${duration}ms`);
-  particle.style.setProperty("--peak-opacity", `${peakOpacity}`);
-
-  particle.addEventListener("animationend", () => particle.remove());
-  container.appendChild(particle);
-}
-
-export function HeroSpotlight({ children }: { children: ReactNode }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const gridRef = useRef<HTMLDivElement>(null);
-  const lastSpawnRef = useRef(0);
-  const reducedMotion = useReducedMotion();
-
-  useEffect(() => {
-    const container = containerRef.current;
-    const grid = gridRef.current;
-    if (!container || !grid) return;
-
-    const handleMove = (event: PointerEvent) => {
-      const rect = container.getBoundingClientRect();
-      const x = event.clientX - rect.left;
-      const y = event.clientY - rect.top;
-      grid.style.setProperty("--mask-x", `${x - 280}px`);
-      grid.style.setProperty("--mask-y", `${y - 280}px`);
-
-      if (reducedMotion) return;
-      if (event.timeStamp - lastSpawnRef.current < 130) return;
-      lastSpawnRef.current = event.timeStamp;
-
-      spawnSnowParticle(container, x, y);
-      spawnSnowParticle(container, x, y);
-    };
-
-    const activate = () => grid.classList.add("is-active");
-    const deactivate = () => grid.classList.remove("is-active");
-
-    container.addEventListener("pointermove", handleMove);
-    container.addEventListener("pointerenter", activate);
-    container.addEventListener("pointerleave", deactivate);
-    return () => {
-      container.removeEventListener("pointermove", handleMove);
-      container.removeEventListener("pointerenter", activate);
-      container.removeEventListener("pointerleave", deactivate);
-    };
-  }, [reducedMotion]);
-
-  return (
-    <div ref={containerRef} className="relative overflow-hidden rounded-3xl bg-zinc-950">
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 opacity-90"
-        style={{
-          backgroundImage:
-            "radial-gradient(60% 50% at 22% -10%, rgba(99,102,241,0.20), transparent 70%)," +
-            "radial-gradient(55% 45% at 100% 115%, rgba(217,119,87,0.16), transparent 70%)," +
-            "radial-gradient(40% 35% at 78% 8%, rgba(56,189,248,0.10), transparent 70%)",
-        }}
-      />
-      <div
-        aria-hidden
-        className="pointer-events-none absolute inset-0 opacity-[0.05] mix-blend-overlay"
-        style={{
-          backgroundImage:
-            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
-          backgroundSize: "160px 160px",
-        }}
-      />
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
-      <div ref={gridRef} className="hero-spotlight-grid pointer-events-none absolute inset-0" />
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 hidden h-6 items-end justify-between px-10 pb-2 opacity-[0.15] sm:flex">
-        {Array.from({ length: 48 }).map((_, i) => (
-          <span
-            key={i}
-            className={cn("w-px bg-white", i % 4 === 0 ? "h-3.5" : "h-1.5")}
-          />
-        ))}
-      </div>
-      {children}
-    </div>
-  );
-}

package/components/landing/hero.tsx

@@ -1,64 +0,0 @@
-import Link from "next/link";
-import { ArrowRight, CheckCircle2, FileCode2, SlidersHorizontal } from "lucide-react";
-import { GithubIcon } from "@/components/icons/github";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/cn";
-
-const TRUST_ITEMS = [
-  { icon: FileCode2, label: "TypeScript First" },
-  { icon: CheckCircle2, label: "Accessible (WAI-ARIA)" },
-  { icon: SlidersHorizontal, label: "Customizable" },
-  { icon: GithubIcon, label: "Open Source" },
-];
-
-export function Hero() {
-  return (
-    <div className="mt-10 min-w-0 max-w-xl sm:mt-16">
-      <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-zinc-300">
-        <span className="h-1.5 w-1.5 rounded-full bg-zinc-300" />
-        v1.0.0 is now available
-      </div>
-      <h1 className="mt-5 text-[1.85rem] font-bold leading-[1.2] tracking-tight text-zinc-300 sm:text-5xl sm:leading-[1.15]">
-        Build beautiful interfaces, faster with{" "}
-        <span className="font-brand bg-gradient-to-r from-white via-zinc-200 to-zinc-400 bg-clip-text tracking-wide text-transparent">
-          ruler.ui
-        </span>
-      </h1>
-      <p className="mt-5 text-base leading-relaxed text-zinc-400">
-        A modern, accessible, and customizable component library for React &amp;
-        TypeScript.
-      </p>
-      <div className="mt-8 flex flex-wrap items-center gap-3">
-  <Link
-    href="/docs"
-    className={cn(
-      buttonVariants({ variant: "white", size: "lg" }),
-      "group"
-    )}
-  >
-    Get Started
-    <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
-  </Link>
-
-<Link
-  href="#"
-  className="group inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-zinc-700 bg-transparent px-6 text-base font-medium text-white transition-all duration-200 hover:-translate-y-0.5 hover:border-zinc-700 hover:bg-transparent hover:text-white"
->
-  <GithubIcon className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
-  View on GitHub
-</Link>
-</div>
-      <div className="mt-8 flex flex-wrap items-center gap-x-5 gap-y-2">
-        {TRUST_ITEMS.map((item) => (
-          <span
-            key={item.label}
-            className="inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500"
-          >
-            <item.icon className="h-3.5 w-3.5" />
-            {item.label}
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-}

package/components/landing/navbar.tsx

@@ -1,44 +0,0 @@
-import Link from "next/link";
-import { GithubIcon } from "@/components/icons/github";
-import { ThemeToggle } from "@/components/ui/theme-toggle";
-
-const NAV_LINKS = [
-  { label: "Docs", href: "/docs" },
-  { label: "Components", href: "/docs" },
-  { label: "Themes", href: "/docs/theming" },
-  { label: "Resources", href: "/docs" }
-];
-
-export function Navbar() {
-  return (
-    <nav className="flex min-w-0 items-center justify-between gap-3 border-b border-white/5 pb-6 sm:gap-6">
-      <Link href="/" className="min-w-0 shrink">
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src="/dark2.png" alt="ruler.ui" className="h-8 w-auto max-w-[9rem] object-contain sm:h-9 sm:max-w-none" />
-      </Link>
-
-      <div className="hidden items-center gap-1 rounded-full border border-white/10 bg-white/[0.03] p-1 md:flex">
-        {NAV_LINKS.map((link) => (
-          <Link
-            key={link.label}
-            href={link.href}
-            className="rounded-full px-3.5 py-1.5 text-sm font-medium text-zinc-300 transition-colors hover:bg-white/10 hover:text-white"
-          >
-            {link.label}
-          </Link>
-        ))}
-      </div>
-
-      <div className="flex items-center gap-3">
-        <ThemeToggle inverted />
-        <Link
-          href="#"
-          className="hidden items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium text-zinc-300 transition-colors hover:bg-white/10 hover:text-white sm:flex"
-        >
-          <GithubIcon className="h-4 w-4" />
-          GitHub
-        </Link>
-      </div>
-    </nav>
-  );
-}

package/components/landing/quick-start-section.tsx

@@ -1,59 +0,0 @@
-import Link from "next/link";
-import { ArrowRight, Zap } from "lucide-react";
-import { CodeBlock } from "@/components/ui/code-block";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/cn";
-
-const USAGE_CODE = `import { Button } from 'ruler.ui'
-
-export default function App() {
-  return (
-    <Button variant="primary">
-      Get Started
-    </Button>
-  )
-}`;
-
-export function QuickStartSection() {
-  return (
-    <div className="py-20 max-w-[1200px] mx-auto border-t border-zinc-100 dark:border-zinc-900">
-      <div className="grid gap-12 lg:grid-cols-[minmax(0,320px)_1fr] lg:items-center">
-        {/* Left Side */}
-        <div className="space-y-6">
-          <div className="space-y-4">
-            <div className="flex items-center gap-3">
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-zinc-900 text-white dark:bg-zinc-50 dark:text-zinc-900">
-                <Zap className="h-5 w-5 fill-current" />
-              </span>
-              <h2 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
-                Quick Start
-              </h2>
-            </div>
-            <p className="text-[15px] leading-relaxed text-zinc-500 dark:text-zinc-400">
-              Start building with ruler.ui in seconds. Copy this example to see it in action.
-            </p>
-          </div>
-          
-        <Link
-  href="/docs"
-  className={cn(buttonVariants({ variant: "primary", size: "lg" }), "group")}
->
-  Explore Components
-  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-</Link>
-        </div>
-
-        {/* Right Side: IDE Window with Mac Dots */}
-        <div className="relative group">
-          <div className="relative overflow-hidden rounded-2xl border border-zinc-200/50 bg-zinc-950 shadow-2xl dark:border-zinc-800/60">
-          
-            
-            <div className="p-0">
-               <CodeBlock code={USAGE_CODE} filename="App.tsx" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/landing/site-footer.tsx

@@ -1,55 +0,0 @@
-import Link from "next/link";
-import { GithubIcon } from "@/components/icons/github";
-import { XIcon } from "@/components/icons/x";
-import { DiscordIcon } from "@/components/icons/discord";
-
-const FOOTER_LINKS = [
-  { label: "Docs", href: "/docs" },
-  { label: "Components", href: "/docs" },
-  { label: "Themes", href: "/docs/theming" },
-  { label: "Resources", href: "/docs" },
-  { label: "Playground", href: "#" },
-];
-
-const SOCIAL_LINKS = [
-  { label: "GitHub", href: "#", icon: GithubIcon },
-  { label: "X", href: "#", icon: XIcon },
-  { label: "Discord", href: "#", icon: DiscordIcon },
-];
-
-export function SiteFooter() {
-  return (
-    <footer className="flex flex-col items-center justify-between gap-6 border-t border-zinc-200 py-8 dark:border-zinc-800 sm:flex-row">
-      <div>
-        <p className="mt-1 text-xs text-zinc-400 dark:text-zinc-600">
-          © 2026 ruler.ui. All rights reserved.
-        </p>
-      </div>
-
-      <nav className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
-        {FOOTER_LINKS.map((link) => (
-          <Link
-            key={link.label}
-            href={link.href}
-            className="text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
-          >
-            {link.label}
-          </Link>
-        ))}
-      </nav>
-
-      <div className="flex items-center gap-4">
-        {SOCIAL_LINKS.map((social) => (
-          <Link
-            key={social.label}
-            href={social.href}
-            aria-label={social.label}
-            className="text-zinc-400 transition-colors hover:text-zinc-900 dark:text-zinc-500 dark:hover:text-zinc-100"
-          >
-            <social.icon className="h-4 w-4" />
-          </Link>
-        ))}
-      </div>
-    </footer>
-  );
-}

package/components/theme-provider.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import {
-  applyTheme,
-  parseTheme,
-  persistTheme,
-  readStoredTheme,
-  type Theme,
-} from "@/lib/theme";
-
-type ThemeContextValue = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-export function ThemeProvider({
-  children,
-  defaultTheme = "light",
-}: {
-  children: ReactNode;
-  defaultTheme?: Theme;
-}) {
-  const [theme, setThemeState] = useState<Theme>(defaultTheme);
-
-  useEffect(() => {
-    const stored = readStoredTheme();
-    const resolved = stored ?? defaultTheme;
-    setThemeState(resolved);
-    applyTheme(resolved);
-  }, [defaultTheme]);
-
-  const setTheme = useCallback((nextTheme: Theme) => {
-    setThemeState(nextTheme);
-    persistTheme(nextTheme);
-    applyTheme(nextTheme);
-  }, []);
-
-  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
-
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within ThemeProvider");
-  }
-  return context;
-}

package/components/ui/accordion.tsx

@@ -1,174 +0,0 @@
-"use client";
-
-import React, { createContext, useContext, useState, useRef, useLayoutEffect, useId } from "react";
-import { Plus, ChevronDown, ChevronRight } from "lucide-react";
-import { cn } from "@/lib/cn";
-
-type AccordionContextType = {
-  openValue: string | null;
-  toggle: (value: string) => void;
-};
-
-const AccordionContext = createContext<AccordionContextType | null>(null);
-
-function useAccordionContext() {
-  const ctx = useContext(AccordionContext);
-  if (!ctx) throw new Error("Accordion components must be used inside Accordion");
-  return ctx;
-}
-
-const EASE = { transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" };
-
-export function Accordion({ children, defaultValue = null, className = "" }: { children: React.ReactNode, defaultValue?: string | null, className?: string }) {
-  const [openValue, setOpenValue] = useState<string | null>(defaultValue);
-  const toggle = (value: string) => setOpenValue((current) => (current === value ? null : value));
-
-  return (
-    <AccordionContext.Provider value={{ openValue, toggle }}>
-      <div className={className}>{children}</div>
-    </AccordionContext.Provider>
-  );
-}
-
-export function AccordionItem({ value, title, children, variant = "plus" }: { value: string, title: string, children: React.ReactNode, variant?: "plus" | "chevron" }) {
-  const { openValue, toggle } = useAccordionContext();
-  const isOpen = openValue === value;
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-  const panelId = useId();
-
-  useLayoutEffect(() => {
-    if (!contentRef.current) return;
-    setHeight(isOpen ? contentRef.current.scrollHeight : 0);
-  }, [isOpen]);
-
-  if (variant === "chevron") {
-    return (
-      <div className="border-b border-zinc-200 dark:border-zinc-800 last:border-0">
-        <button
-          type="button"
-          onClick={() => toggle(value)}
-          aria-expanded={isOpen}
-          aria-controls={panelId}
-          className="group flex w-full items-center justify-between rounded-lg py-5 text-left outline-none transition-colors duration-200 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:hover:bg-zinc-900/40 dark:focus-visible:ring-white/20"
-        >
-          <span
-            className={cn(
-              "text-[15px] font-medium transition-colors duration-200",
-              isOpen
-                ? "text-zinc-900 dark:text-white"
-                : "text-zinc-600 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-200",
-            )}
-          >
-            {title}
-          </span>
-          <ChevronDown
-            size={18}
-            style={EASE}
-            className={cn(
-              "shrink-0 text-zinc-400 transition-transform duration-300 group-hover:text-zinc-600 dark:group-hover:text-zinc-300",
-              isOpen && "rotate-180 text-zinc-900 dark:text-white",
-            )}
-          />
-        </button>
-        <div style={{ ...EASE, height }} className="overflow-hidden transition-[height] duration-300">
-          <div id={panelId} ref={contentRef} className="pb-5 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="border-b border-zinc-200 dark:border-zinc-800 last:border-0">
-      <button
-        type="button"
-        onClick={() => toggle(value)}
-        aria-expanded={isOpen}
-        aria-controls={panelId}
-        className="group flex w-full items-center gap-3 rounded-lg py-4 text-left outline-none transition-colors duration-200 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:hover:bg-zinc-900/40 dark:focus-visible:ring-white/20"
-      >
-        <span
-          style={EASE}
-          className={cn(
-            "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition-all duration-300",
-            isOpen
-              ? "border-zinc-900 bg-zinc-900 text-white shadow-sm dark:border-zinc-100 dark:bg-zinc-100 dark:text-zinc-900"
-              : "border-zinc-300 text-zinc-400 group-hover:border-zinc-400 group-hover:text-zinc-500 dark:border-zinc-700 dark:group-hover:border-zinc-600",
-          )}
-        >
-          <Plus size={12} style={EASE} className={cn("transition-transform duration-300", isOpen && "rotate-45")} />
-        </span>
-        <span
-          className={cn(
-            "text-[15px] font-medium transition-colors duration-200",
-            isOpen
-              ? "text-zinc-900 dark:text-zinc-100"
-              : "text-zinc-600 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-200",
-          )}
-        >
-          {title}
-        </span>
-      </button>
-      <div style={{ ...EASE, height }} className="overflow-hidden transition-[height] duration-300">
-        <div id={panelId} ref={contentRef} className="pb-4 pl-9 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function AccordionNested({ title, children, level = 0 }: { title: string, children?: React.ReactNode, level?: number }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-  const panelId = useId();
-
-  useLayoutEffect(() => {
-    if (!contentRef.current) return;
-    setHeight(isOpen ? contentRef.current.scrollHeight : 0);
-  }, [isOpen, children]);
-
-  return (
-    <div className="border-b border-zinc-100 dark:border-zinc-800 last:border-0">
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-expanded={isOpen}
-        aria-controls={panelId}
-        className="group flex w-full items-center gap-2.5 rounded-lg py-3.5 text-left outline-none transition-colors duration-200 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:hover:bg-zinc-900/40 dark:focus-visible:ring-white/20"
-        style={{ paddingLeft: `${level * 1.5}rem` }}
-      >
-        <ChevronRight
-          size={15}
-          style={EASE}
-          className={cn(
-            "shrink-0 text-zinc-400 transition-transform duration-300 group-hover:text-zinc-600 dark:group-hover:text-zinc-300",
-            isOpen && "rotate-90 text-zinc-600 dark:text-zinc-300",
-          )}
-        />
-        <span className="text-[15px] font-medium text-zinc-900 dark:text-zinc-100">{title}</span>
-      </button>
-      <div style={{ ...EASE, height }} className="overflow-hidden transition-[height] duration-300">
-        <div id={panelId} ref={contentRef} className="flex flex-col">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function AccordionLink({ title, level = 0 }: { title: string, level?: number }) {
-  return (
-    <div className="border-b border-zinc-100 dark:border-zinc-800 last:border-0">
-      <div
-        className="cursor-pointer rounded-lg py-3.5 text-[15px] font-medium text-zinc-600 transition-colors duration-200 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900/40 dark:hover:text-zinc-100"
-        style={{ paddingLeft: `${level * 1.5 + 1.5625}rem` }}
-      >
-        {title}
-      </div>
-    </div>
-  );
-}

package/components/ui/alert.tsx

@@ -1,103 +0,0 @@
-import React from "react";
-import { CheckCircle2, TriangleAlert, Info, XCircle, X } from "lucide-react";
-
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: "info" | "success" | "warning" | "error";
-  title?: string;
-  description?: string;
-  dismissible?: boolean;
-  onDismiss?: () => void;
-  action?: React.ReactNode;
-}
-
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  ({ className = "", variant = "info", title, description, dismissible, onDismiss, action, children, ...props }, ref) => {
-    const configs = {
-  info: {
-    bar: "bg-[#0070BA]",
-    icon: (
-      <Info className="h-5 w-5 text-[#0070BA] shrink-0" />
-    ),
-  },
-
-  success: {
-    bar: "bg-[#28A745]",
-    icon: (
-      <CheckCircle2 className="h-5 w-5 text-[#28A745] shrink-0" />
-    ),
-  },
-
-  warning: {
-    bar: "bg-[#E58E00]",
-    icon: (
-      <TriangleAlert className="h-5 w-5 text-[#E58E00] shrink-0" />
-    ),
-  },
-
-  error: {
-    bar: "bg-[#D93025]",
-    icon: (
-      <XCircle className="h-5 w-5 text-[#D93025] shrink-0" />
-    ),
-  },
-};
-
-    const current = configs[variant];
-
-    return (
-      <div
-  ref={ref}
-  className={`relative flex w-full min-h-[64px] items-center gap-2.5 rounded-lg border border-gray-200 bg-white px-3 py-2.5 shadow-[0_3px_12px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-none ${className}`}
-  {...props}
->
-<div
-  className={`absolute left-0 top-0 w-16 h-1 ${current.bar} rounded-tl-lg`}
-  style={{
-    clipPath: "polygon(0 0, 100% 0, 92% 100%, 0 100%)",
-  }}
-/>
-
-  {/* Icon */}
-  <div className="shrink-0 flex items-center justify-center">
-    {current.icon}
-  </div>
-
- <div className="flex-1 min-w-0">
-  {title && (
-    <h5 className="text-[13px] font-semibold tracking-tight text-zinc-900 dark:text-white leading-tight">
-      {title}
-    </h5>
-  )}
-
-  {description && (
-    <p className="mt-0.5 text-[11px] font-medium text-zinc-500 dark:text-zinc-300 leading-tight">
-      {description}
-    </p>
-  )}
-
-  {children}
-</div>
-
-{action && (
-  <div className={`shrink-0 ml-auto ${dismissible || onDismiss ? "mr-5" : ""}`}>
-    {action}
-  </div>
-)}
-
-  {/* Close button */}
-  {(dismissible || onDismiss) && (
-    <button
-      onClick={onDismiss}
-      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-200 transition-colors"
-    >
-      <X className="h-3.5 w-3.5 stroke-[3]" />
-    </button>
-  )}
-</div>
-    );
-  }
-);
-
-Alert.displayName = "Alert";
-
-export { Alert };