@cryptlex/web-components 1.0.0

package/dist/index.es.js

@@ -0,0 +1,178 @@
+import { Badge as r, badgeVariants as t } from "./components/ui/badge.es.js";
+import { Breadcrumb as n, BreadcrumbEllipsis as i, BreadcrumbItem as p, BreadcrumbLink as d, BreadcrumbList as l, BreadcrumbPage as m, BreadcrumbSeparator as u } from "./components/ui/breadcrumb.es.js";
+import { Button as b, buttonVariants as C } from "./components/ui/button.es.js";
+import { Calendar as c } from "./components/ui/calendar.es.js";
+import { Card as D, CardContent as f, CardDescription as s, CardFooter as M, CardHeader as T, CardTitle as h } from "./components/ui/card.es.js";
+import { ChartContainer as w, ChartLegend as I, ChartLegendContent as B, ChartStyle as F, ChartTooltip as L, ChartTooltipContent as G } from "./components/ui/chart.es.js";
+import { Checkbox as k } from "./components/ui/checkbox.es.js";
+import { Collapsible as R, CollapsibleContent as y, CollapsibleTrigger as A } from "./components/ui/collapsible.es.js";
+import { Command as V, CommandDialog as O, CommandEmpty as N, CommandGroup as U, CommandInput as j, CommandItem as q, CommandList as z, CommandSeparator as J, CommandShortcut as K } from "./components/ui/command.es.js";
+import { Dialog as W, DialogClose as X, DialogContent as Y, DialogDescription as Z, DialogFooter as _, DialogHeader as $, DialogOverlay as ee, DialogPortal as oe, DialogTitle as re, DialogTrigger as te } from "./components/ui/dialog.es.js";
+import { DropdownMenu as ne, DropdownMenuCheckboxItem as ie, DropdownMenuContent as pe, DropdownMenuGroup as de, DropdownMenuItem as le, DropdownMenuLabel as me, DropdownMenuPortal as ue, DropdownMenuRadioGroup as Se, DropdownMenuRadioItem as be, DropdownMenuSeparator as Ce, DropdownMenuShortcut as ge, DropdownMenuSub as ce, DropdownMenuSubContent as xe, DropdownMenuSubTrigger as De, DropdownMenuTrigger as fe } from "./components/ui/dropdown-menu.es.js";
+import { Form as Me, FormControl as Te, FormDescription as he, FormField as Pe, FormItem as we, FormLabel as Ie, FormMessage as Be, useFormField as Fe } from "./components/ui/form.es.js";
+import { Input as Ge } from "./components/ui/input.es.js";
+import { Label as ke } from "./components/ui/label.es.js";
+import { Loader as Re } from "./components/ui/loader.es.js";
+import { Pagination as Ae, PaginationContent as Ee, PaginationEllipsis as Ve, PaginationItem as Oe, PaginationLink as Ne, PaginationNext as Ue, PaginationPrevious as je } from "./components/ui/pagination.es.js";
+import { PasswordInput as ze } from "./components/ui/password-input.es.js";
+import { Popover as Ke, PopoverAnchor as Qe, PopoverContent as We, PopoverTrigger as Xe } from "./components/ui/popover.es.js";
+import { RadioGroup as Ze, RadioGroupItem as _e } from "./components/ui/radio-group.es.js";
+import { Select as eo, SelectContent as oo, SelectGroup as ro, SelectItem as to, SelectLabel as ao, SelectScrollDownButton as no, SelectScrollUpButton as io, SelectSeparator as po, SelectTrigger as lo, SelectValue as mo } from "./components/ui/select.es.js";
+import { Separator as So } from "./components/ui/separator.es.js";
+import { Sheet as Co, SheetClose as go, SheetContent as co, SheetDescription as xo, SheetFooter as Do, SheetHeader as fo, SheetOverlay as so, SheetPortal as Mo, SheetTitle as To, SheetTrigger as ho } from "./components/ui/sheet.es.js";
+import { Sidebar as wo, SidebarContent as Io, SidebarFooter as Bo, SidebarGroup as Fo, SidebarGroupAction as Lo, SidebarGroupContent as Go, SidebarGroupLabel as vo, SidebarHeader as ko, SidebarInput as Ho, SidebarInset as Ro, SidebarMenu as yo, SidebarMenuAction as Ao, SidebarMenuBadge as Eo, SidebarMenuButton as Vo, SidebarMenuItem as Oo, SidebarMenuSkeleton as No, SidebarMenuSub as Uo, SidebarMenuSubButton as jo, SidebarMenuSubItem as qo, SidebarProvider as zo, SidebarRail as Jo, SidebarSeparator as Ko, SidebarTrigger as Qo, useSidebar as Wo } from "./components/ui/sidebar.es.js";
+import { Skeleton as Yo } from "./components/ui/skeleton.es.js";
+import { Table as _o, TableBody as $o, TableCaption as er, TableCell as or, TableFooter as rr, TableHead as tr, TableHeader as ar, TableRow as nr } from "./components/ui/table.es.js";
+import { Tooltip as pr, TooltipContent as dr, TooltipProvider as lr, TooltipTrigger as mr } from "./components/ui/tooltip.es.js";
+import { useIsMobile as Sr } from "./hooks/use-mobile.es.js";
+import { cn as Cr } from "./utils/index.es.js";
+export {
+  r as Badge,
+  n as Breadcrumb,
+  i as BreadcrumbEllipsis,
+  p as BreadcrumbItem,
+  d as BreadcrumbLink,
+  l as BreadcrumbList,
+  m as BreadcrumbPage,
+  u as BreadcrumbSeparator,
+  b as Button,
+  c as Calendar,
+  D as Card,
+  f as CardContent,
+  s as CardDescription,
+  M as CardFooter,
+  T as CardHeader,
+  h as CardTitle,
+  w as ChartContainer,
+  I as ChartLegend,
+  B as ChartLegendContent,
+  F as ChartStyle,
+  L as ChartTooltip,
+  G as ChartTooltipContent,
+  k as Checkbox,
+  R as Collapsible,
+  y as CollapsibleContent,
+  A as CollapsibleTrigger,
+  V as Command,
+  O as CommandDialog,
+  N as CommandEmpty,
+  U as CommandGroup,
+  j as CommandInput,
+  q as CommandItem,
+  z as CommandList,
+  J as CommandSeparator,
+  K as CommandShortcut,
+  W as Dialog,
+  X as DialogClose,
+  Y as DialogContent,
+  Z as DialogDescription,
+  _ as DialogFooter,
+  $ as DialogHeader,
+  ee as DialogOverlay,
+  oe as DialogPortal,
+  re as DialogTitle,
+  te as DialogTrigger,
+  ne as DropdownMenu,
+  ie as DropdownMenuCheckboxItem,
+  pe as DropdownMenuContent,
+  de as DropdownMenuGroup,
+  le as DropdownMenuItem,
+  me as DropdownMenuLabel,
+  ue as DropdownMenuPortal,
+  Se as DropdownMenuRadioGroup,
+  be as DropdownMenuRadioItem,
+  Ce as DropdownMenuSeparator,
+  ge as DropdownMenuShortcut,
+  ce as DropdownMenuSub,
+  xe as DropdownMenuSubContent,
+  De as DropdownMenuSubTrigger,
+  fe as DropdownMenuTrigger,
+  Me as Form,
+  Te as FormControl,
+  he as FormDescription,
+  Pe as FormField,
+  we as FormItem,
+  Ie as FormLabel,
+  Be as FormMessage,
+  Ge as Input,
+  ke as Label,
+  Re as Loader,
+  Ae as Pagination,
+  Ee as PaginationContent,
+  Ve as PaginationEllipsis,
+  Oe as PaginationItem,
+  Ne as PaginationLink,
+  Ue as PaginationNext,
+  je as PaginationPrevious,
+  ze as PasswordInput,
+  Ke as Popover,
+  Qe as PopoverAnchor,
+  We as PopoverContent,
+  Xe as PopoverTrigger,
+  Ze as RadioGroup,
+  _e as RadioGroupItem,
+  eo as Select,
+  oo as SelectContent,
+  ro as SelectGroup,
+  to as SelectItem,
+  ao as SelectLabel,
+  no as SelectScrollDownButton,
+  io as SelectScrollUpButton,
+  po as SelectSeparator,
+  lo as SelectTrigger,
+  mo as SelectValue,
+  So as Separator,
+  Co as Sheet,
+  go as SheetClose,
+  co as SheetContent,
+  xo as SheetDescription,
+  Do as SheetFooter,
+  fo as SheetHeader,
+  so as SheetOverlay,
+  Mo as SheetPortal,
+  To as SheetTitle,
+  ho as SheetTrigger,
+  wo as Sidebar,
+  Io as SidebarContent,
+  Bo as SidebarFooter,
+  Fo as SidebarGroup,
+  Lo as SidebarGroupAction,
+  Go as SidebarGroupContent,
+  vo as SidebarGroupLabel,
+  ko as SidebarHeader,
+  Ho as SidebarInput,
+  Ro as SidebarInset,
+  yo as SidebarMenu,
+  Ao as SidebarMenuAction,
+  Eo as SidebarMenuBadge,
+  Vo as SidebarMenuButton,
+  Oo as SidebarMenuItem,
+  No as SidebarMenuSkeleton,
+  Uo as SidebarMenuSub,
+  jo as SidebarMenuSubButton,
+  qo as SidebarMenuSubItem,
+  zo as SidebarProvider,
+  Jo as SidebarRail,
+  Ko as SidebarSeparator,
+  Qo as SidebarTrigger,
+  Yo as Skeleton,
+  _o as Table,
+  $o as TableBody,
+  er as TableCaption,
+  or as TableCell,
+  rr as TableFooter,
+  tr as TableHead,
+  ar as TableHeader,
+  nr as TableRow,
+  pr as Tooltip,
+  dr as TooltipContent,
+  lr as TooltipProvider,
+  mr as TooltipTrigger,
+  t as badgeVariants,
+  C as buttonVariants,
+  Cr as cn,
+  Fe as useFormField,
+  Sr as useIsMobile,
+  Wo as useSidebar
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/index.es.js

@@ -0,0 +1,9 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
+}
+export {
+  n as cn
+};
+//# sourceMappingURL=index.es.js.map

package/dist/utils/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../lib/utils/index.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"names":["cn","inputs","twMerge","clsx"],"mappings":";;AAGO,SAASA,KAAMC,GAAsB;AACnC,SAAAC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;"}

package/lib/index.css

@@ -0,0 +1,24 @@
+@import url('tokens.css');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  /* TODO This is just for testing  purposing */
+  div,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+  @apply font-bold
+  }
+  
+}

package/lib/tokens.css

@@ -0,0 +1,143 @@
+:root {
+    --primary-hue: 218;
+    --primary-1: 99% .02 var(--primary-hue);
+    --primary-2: 90% .1 var(--primary-hue);
+    --primary-3: 80% .2 var(--primary-hue);
+    --primary-4: 72% .25 var(--primary-hue);
+    --primary-5: 67% .31 var(--primary-hue);
+    --primary-6: 50% .27 var(--primary-hue);
+    --primary-7: 35% .25 var(--primary-hue);
+    --primary-8: 25% .2 var(--primary-hue);
+    --primary-9: 13% .2 var(--primary-hue);
+    --primary-10: 5% .1 var(--primary-hue);
+
+    --neutral-s: 0.01;
+    --neutral-1: 99% var(--neutral-s) var(--primary-hue);
+    --neutral-2: 82% var(--neutral-s) var(--primary-hue);
+    --neutral-3: 73% var(--neutral-s) var(--primary-hue);
+    --neutral-4: 63% var(--neutral-s) var(--primary-hue);
+    --neutral-5: 54% var(--neutral-s) var(--primary-hue);
+    --neutral-6: 45% var(--neutral-s) var(--primary-hue);
+    --neutral-7: 36% var(--neutral-s) var(--primary-hue);
+    --neutral-8: 27% var(--neutral-s) var(--primary-hue);
+    --neutral-9: 18% var(--neutral-s) var(--primary-hue);
+    --neutral-10: 9% var(--neutral-s) var(--primary-hue);
+    --secondary-hue: 100;
+    --xsecondary-1: 0.99 0.02 var(--secondary-hue);
+    --xsecondary-2: 0.9 0.04 var(--secondary-hue);
+    --xsecondary-3: 0.67 0.13 var(--secondary-hue);
+    --xsecondary-4: 0.35 0.13 var(--secondary-hue);
+    --xsecondary-5: 0.13 0.13 var(--secondary-hue);
+    --secondary-1: var(--xsecondary-1);
+    --secondary-2: var(--xsecondary-2);
+    --secondary-3: var(--xsecondary-3);
+    --secondary-4: var(--xsecondary-4);
+    --secondary-5: var(--xsecondary-5);
+
+    --accent-hue: 230;
+    --xaccent-1: 0.99 0.02 var(--accent-hue);
+    --xaccent-2: 0.9 0.04 var(--accent-hue);
+    --xaccent-3: 0.67 0.13 var(--accent-hue);
+    --xaccent-4: 0.35 0.13 var(--accent-hue);
+    --xaccent-5: 0.13 0.13 var(--accent-hue);
+    --accent-1: var(--xaccent-1);
+    --accent-2: var(--xaccent-2);
+    --accent-3: var(--xaccent-3);
+    --accent-4: var(--xaccent-4);
+    --accent-5: var(--xaccent-5);
+
+    --red-hue: 13;
+    --xred-1: 0.99 0.02 var(--red-hue);
+    --xred-2: 0.9 0.04 var(--red-hue);
+    --xred-3: 0.67 0.13 var(--red-hue);
+    --xred-4: 0.35 0.13 var(--red-hue);
+    --xred-5: 0.13 0.13 var(--red-hue);
+    --red-1: var(--xred-1);
+    --red-2: var(--xred-2);
+    --red-3: var(--xred-3);
+     --red-4: var(--xred-4);
+
+    /* shadcn tokens */
+    --background: var(--neutral-1);
+    --foreground: var(--neutral-10);
+
+    --card: var(--background);
+    --card-foreground: var(--foreground);
+    --popover: var(--background);
+    --popover-foreground: var(--foreground);
+
+    --primary: var(--primary-8);
+    --primary-foreground: var(--primary-2);
+
+    --secondary: var(--primary);
+    --secondary-foreground: var(--primary-foreground);
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive:  var(--red-3);
+    --destructive-foreground: var(--red-1);
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+
+    --radius: 0rem;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%
+}
+
+.dark {
+    --background: 0 0% 3.9%;
+    --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%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%
+}

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@cryptlex/web-components",
+  "version": "1.0.0",
+  "description": "React component library for Cryptlex web applications",
+  "author": "Cryptlex",
+  "type": "module",
+  "private": false,
+  "main": "./dist/index.es.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.es.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.es.d.ts",
+      "import": "./dist/index.es.js"
+    },
+    "./index.css": "./lib/index.css",
+    "./tokens.css": "./lib/tokens.css",
+    "./tailwind-preset": "./tailwind.preset.ts"
+  },
+  "files": [
+    "dist",
+    "tailwind.preset.ts",
+    "lib/tokens.css",
+    "lib/index.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cryptlex/web-components"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "cryptlex"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.tsx"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "@tanstack/react-table": "^8.20.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^3.0.0",
+    "lucide-react": "^0.453.0",
+    "react": "^18.3.1",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.13.0",
+    "react-hook-form": "^7.53.1",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@eslint/js": "^9.11.1",
+    "@storybook/addon-docs": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-onboarding": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
+    "@types/node": "^22.7.8",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-storybook": "^0.10.1",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.47",
+    "storybook": "^8.3.6",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^4.2.4"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build"
+  }
+}

package/tailwind.preset.ts

@@ -0,0 +1,77 @@
+import type { Config } from 'tailwindcss';
+
+// Define your Tailwind preset configuration
+const tailwindPreset: Config = {
+  darkMode: ['class'], // Enable dark mode based on class
+  content: [
+    './lib/**/*.{ts,tsx}', // Paths to your library components
+    './stories/**/*.{tsx,ts}', // Paths to any storybook files
+    './.storybook/**/*.{tsx,ts}', // Storybook config paths
+  ],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      colors: {
+        background: 'oklch(var(--background))',
+        foreground: 'oklch(var(--foreground))',
+        card: {
+          DEFAULT: 'oklch(var(--card))',
+          foreground: 'oklch(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'oklch(var(--popover))',
+          foreground: 'oklch(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'oklch(var(--primary))',
+          foreground: 'oklch(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'oklch(var(--secondary))',
+          foreground: 'oklch(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'oklch(var(--muted))',
+          foreground: 'oklch(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'oklch(var(--accent))',
+          foreground: 'oklch(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'oklch(var(--destructive))',
+          foreground: 'oklch(var(--destructive-foreground))',
+        },
+        border: 'oklch(var(--border))',
+        input: 'oklch(var(--input))',
+        ring: 'oklch(var(--ring))',
+        chart: {
+          1: 'oklch(var(--chart-1))',
+          2: 'oklch(var(--chart-2))',
+          3: 'oklch(var(--chart-3))',
+          4: 'oklch(var(--chart-4))',
+          5: 'oklch(var(--chart-5))',
+        },
+        sidebar: {
+          DEFAULT: 'oklch(var(--sidebar-background))',
+          foreground: 'oklch(var(--sidebar-foreground))',
+          primary: 'oklch(var(--sidebar-primary))',
+          primaryForeground:
+            'oklch(var(--sidebar-primary-foreground))',
+          accent: 'oklch(var(--sidebar-accent))',
+          accentForeground:
+            'oklch(var(--sidebar-accent-foreground))',
+          border: 'oklch(var(--sidebar-border))',
+          ring: 'oklch(var(--sidebar-ring))',
+        },
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')], // Include any plugins you need
+};
+
+export default tailwindPreset;