@gearbox-protocol/permissionless-ui 1.0.0

package/dist/esm/components/index.js

@@ -0,0 +1,26 @@
+export * from "./alert-dialog.js";
+export * from "./back-button.js";
+export * from "./badge.js";
+export * from "./buttons/button.js";
+export * from "./buttons/copy-button.js";
+export * from "./buttons/external-button.js";
+export * from "./buttons/tab-button.js";
+export * from "./card.js";
+export * from "./checkbox.js";
+export * from "./danger-zone.js";
+export * from "./dialog.js";
+export * from "./dropdown-menu.js";
+export * from "./editable-table/edit-button.js";
+export * from "./editable-table/editable-table.js";
+export * from "./editable-table/updated-value.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./page-layout.js";
+export * from "./search-bar.js";
+export * from "./select.js";
+export * from "./skeleton.js";
+export * from "./table.js";
+export * from "./tabs.js";
+export * from "./textarea.js";
+export * from "./token-icon.js";
+export * from "./tooltip.js";

package/dist/esm/components/input.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import cn from "../utils/index.js";
+const InputInternal = React.forwardRef(({ className, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-9 w-full rounded-md border border-input px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)] focus:bg-[rgb(40,40,40)] active:bg-[rgb(40,40,40)] [&:not(:placeholder-shown)]:bg-[rgb(40,40,40)] autofill:bg-[rgb(40,40,40)] [-webkit-autofill]:bg-[rgb(40,40,40)] [&:-webkit-autofill]:shadow-[0_0_0_1000px_rgb(40,40,40)_inset] [&:-webkit-autofill]:[text-fill-color:rgb(255,255,255)]",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+InputInternal.displayName = "Input";
+function Input({ hasError, errorMessage, value, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      InputInternal,
+      {
+        ...props,
+        value,
+        className: cn(hasError ? "border-red-500" : "", props.className),
+        onWheel: props.type === "number" ? (e) => e.currentTarget.blur() : void 0
+      }
+    ),
+    hasError && value !== "" && /* @__PURE__ */ jsx("p", { className: "text-red-500", children: errorMessage })
+  ] });
+}
+export {
+  Input
+};

package/dist/esm/components/label.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import cn from "../utils//index.js";
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), "text-white text-lg", className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+export {
+  Label
+};

package/dist/esm/components/page-layout.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BackButton } from "./back-button.js";
+function PageLayout({ children, title, backButton }) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-black text-white p-6", children: [
+    backButton && /* @__PURE__ */ jsx(BackButton, { href: backButton.href, text: backButton.text }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center", children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold mb-2", children: title }) }),
+    children
+  ] });
+}
+export {
+  PageLayout
+};

package/dist/esm/components/search-bar.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { useState } from "react";
+import { Input } from "./input.js";
+function SearchBar({
+  onChange,
+  placeholder = "Search...",
+  className = "w-64",
+  children
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const handleSearch = (e) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    onChange(query);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6 mb-2 mt-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          placeholder,
+          value: searchQuery,
+          onChange: handleSearch,
+          className: "pl-10"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Search,
+        {
+          className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground",
+          size: 18
+        }
+      )
+    ] }),
+    children
+  ] });
+}
+export {
+  SearchBar
+};

package/dist/esm/components/select.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import cn from "../utils/index.js";
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)]",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-[rgb(40,40,40)] text-white border-[rgb(100,100,100)]",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+};

package/dist/esm/components/skeleton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import cn from "../utils/index.js";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+export {
+  Skeleton
+};

package/dist/esm/components/table.js

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cn from "../utils/index.js";
+const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b ", className), ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-2  border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", { ref, className: cn("p-2 align-middle", className), ...props }));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/dist/esm/components/tabs.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+import cn from "../utils/index.js";
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-fit items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground bg-transparent p-0 space-x-6",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow rounded-none border-b-2 border-transparent px-2 py-2 text-gray-400 hover:text-white data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:text-white focus:outline-none",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+};

package/dist/esm/components/textarea.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cn from "../utils/index.js";
+const Textarea = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/dist/esm/components/token-icon.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import Image from "next/image";
+import { useState } from "react";
+function TokenIcon({ symbol, size = 48 }) {
+  const name = symbol.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
+  const defaultSrc = "https://static.gearbox.fi/tokens/default.svg";
+  const [src, setSrc] = useState(
+    `https://static.gearbox.fi/tokens/${name}.svg`
+  );
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      src,
+      alt: `${symbol} icon`,
+      width: size,
+      height: size,
+      onError: () => setSrc(defaultSrc)
+    }
+  );
+}
+export {
+  TokenIcon
+};

package/dist/esm/components/tooltip.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import cn from "../utils/index.js";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/esm/configs/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./tailwind.config.js";
+export {
+  default2 as tailwindConfig
+};

package/dist/esm/configs/tailwind.config.js

@@ -0,0 +1,64 @@
+const tailwindConfig = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))"
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))"
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))"
+        }
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      }
+    }
+  },
+  plugins: [require("tailwindcss-animate")]
+};
+var tailwind_config_default = tailwindConfig;
+export {
+  tailwind_config_default as default
+};

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./components/index.js";
+export * from "./utils/index.js";

package/dist/esm/package.json

@@ -0,0 +1 @@
+{"type": "module","sideEffects":false}

package/dist/esm/utils/cn.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  cn
+};

package/dist/esm/utils/copy.js

@@ -0,0 +1,11 @@
+import { toast } from "sonner";
+const copyToClipboard = ({
+  text,
+  name = "Address"
+}) => {
+  navigator.clipboard.writeText(text);
+  toast.success(`${name} copied to clipboard`);
+};
+export {
+  copyToClipboard
+};

package/dist/esm/utils/index.js

@@ -0,0 +1,6 @@
+export * from "./cn.js";
+import { cn } from "./cn.js";
+export * from "./copy.js";
+export {
+  cn as default
+};

package/dist/globals.css

@@ -0,0 +1,88 @@
+/** biome-ignore-all lint/suspicious/noUnknownAtRules: <> */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  @apply dark;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Add these styles to fix white background under scroll */
+@layer base {
+  html.dark {
+    color-scheme: dark;
+  }
+}