ruler-components 0.1.0

package/components/landing/hero-spotlight.tsx

@@ -0,0 +1,126 @@
+"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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,60 @@
+"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

@@ -0,0 +1,174 @@
+"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

@@ -0,0 +1,103 @@
+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 };