@nuvia/components 0.1.0

package/dist/ui/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/tooltip.tsx"],"names":["twMerge","clsx","TooltipPrimitive","React","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiCA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;ACE3E,IAAM,eAAA,GAAmCC,2BAAA,CAAA;AAEzC,IAAM,OAAA,GAA2BA,2BAAA,CAAA;AAEjC,IAAM,cAAA,GAAkCA,2BAAA,CAAA;AAExC,IAAM,cAAA,GAAuBC,gBAAA,CAAA,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,CAAA,EAAG,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1CC,cAAA,CAAkBF,oCAAjB,EACC,QAAA,kBAAAE,cAAA;AAAA,EAAkBF,2BAAA,CAAA,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,6YAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CAAA,EACF,CACD;AACD,cAAA,CAAe,cAA+BA,2BAAA,CAAA,OAAA,CAAQ,WAAA","file":"tooltip.cjs","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"../lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-xl shadow-md bg-background border border-border px-3 py-1.5 text-xs text-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\",\n        className\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"]}

package/dist/ui/tooltip.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { clsx } from 'clsx';
+import 'sonner';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var cn = (...inputs) => twMerge(clsx(inputs));
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var 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-xl shadow-md bg-background border border-border px-3 py-1.5 text-xs text-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 };
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/ui/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/ui/tooltip.tsx"],"names":[],"mappings":";;;;;;;AAKO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiC,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;ACE3E,IAAM,eAAA,GAAmC,gBAAA,CAAA;AAEzC,IAAM,OAAA,GAA2B,gBAAA,CAAA;AAEjC,IAAM,cAAA,GAAkC,gBAAA,CAAA;AAExC,IAAM,cAAA,GAAuB,KAAA,CAAA,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,CAAA,EAAG,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1C,GAAA,CAAkB,yBAAjB,EACC,QAAA,kBAAA,GAAA;AAAA,EAAkB,gBAAA,CAAA,OAAA;AAAA,EAAjB;AAAA,IACC,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACT,6YAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,GAAG;AAAA;AACN,CAAA,EACF,CACD;AACD,cAAA,CAAe,cAA+B,gBAAA,CAAA,OAAA,CAAQ,WAAA","file":"tooltip.js","sourcesContent":["import { clsx } from \"clsx\";\nimport type { ClassValue } from \"clsx\";\nimport { toast } from \"sonner\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\nexport const capitalize = (str: string) =>\n  str?.charAt(0)?.toUpperCase() + str?.slice(1);\n\nexport const handleError = (error: { message: string }): void => {\n  toast.error(error.message);\n};\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"../lib/utils\"\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = TooltipPrimitive.Root\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded-xl shadow-md bg-background border border-border px-3 py-1.5 text-xs text-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\",\n        className\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"]}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@nuvia/components",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./ui/*": {
+      "import": "./dist/ui/*.js",
+      "require": "./dist/ui/*.cjs",
+      "types": "./dist/ui/*.d.ts"
+    },
+    "./hooks/*": {
+      "import": "./dist/hooks/*.js",
+      "require": "./dist/hooks/*.cjs",
+      "types": "./dist/hooks/*.d.ts"
+    },
+    "./lib/*": {
+      "import": "./dist/lib/*.js",
+      "require": "./dist/lib/*.cjs",
+      "types": "./dist/lib/*.d.ts"
+    },
+    "./providers/*": {
+      "import": "./dist/providers/*.js",
+      "require": "./dist/providers/*.cjs",
+      "types": "./dist/providers/*.d.ts"
+    },
+    "./styles/globals.css": "./src/styles/globals.css"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@phosphor-icons/react": "^2.1.7",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.4",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.5.2",
+    "input-otp": "^1.4.2",
+    "next-themes": "^0.4.4",
+    "react-day-picker": "^8.10.1",
+    "react-hook-form": "^7.54.2",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.0",
+    "sonner": "^1.7.2",
+    "tailwind-merge": "^2.6.0",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist node_modules"
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,529 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  font-family: var(--font-plus-jakarta-sans);
+  overscroll-behavior-x: none;
+}
+
+@layer base {
+  :root,
+  .dark {
+    /*==== Nuvia Brand Colors ====*/
+    /* Zafiro */
+    --color-zafiro-100: 233 100% 98%;
+    --color-zafiro-200: 228 75% 89%;
+    --color-zafiro-300: 228 71% 80%;
+    --color-zafiro-400: 228 71% 71%;
+    --color-zafiro-500: 228 45% 55%;
+    --color-zafiro-600: 228 48% 40%;
+    --color-zafiro-700: 228 76% 24%;
+    --color-zafiro-800: 227 44% 13%;
+
+    /* Madrugada */
+    --color-madrugada-100: 235 100% 96%;
+    --color-madrugada-200: 236 71% 89%;
+    --color-madrugada-300: 236 64% 83%;
+    --color-madrugada-400: 235 58% 78%;
+    --color-madrugada-500: 235 41% 64%;
+    --color-madrugada-600: 235 34% 49%;
+    --color-madrugada-700: 235 51% 36%;
+    --color-madrugada-800: 235 51% 23%;
+
+    /* Nimbus */
+    --color-nimbus-200: 221 66% 94%;
+    --color-nimbus-300: 220 55% 91%;
+    --color-nimbus-400: 220 46% 88%;
+    --color-nimbus-500: 220 35% 80%;
+    --color-nimbus-600: 220 29% 71%;
+
+    /* Indigo */
+    --color-indigo-100: 217 100% 90%;
+    --color-indigo-200: 218 98% 76%;
+    --color-indigo-300: 218 99% 63%;
+    --color-indigo-400: 218 98% 50%;
+    --color-indigo-500: 217 98% 41%;
+    --color-indigo-600: 218 99% 32%;
+    --color-indigo-700: 218 100% 22%;
+    --color-indigo-800: 218 100% 12%;
+
+    /* Lumen */
+    --color-lumen-100: 152 81% 92%;
+    --color-lumen-200: 153 80% 76%;
+    --color-lumen-300: 153 81% 61%;
+    --color-lumen-400: 153 100% 45%;
+    --color-lumen-500: 153 99% 35%;
+    --color-lumen-600: 153 98% 24%;
+    --color-lumen-700: 154 100% 13%;
+    --color-lumen-800: 155 100% 6%;
+
+    /* Lilas */
+    --color-lilas-100: 295 59% 88%;
+    --color-lilas-200: 295 58% 79%;
+    --color-lilas-300: 295 59% 70%;
+    --color-lilas-400: 295 59% 61%;
+    --color-lilas-500: 295 37% 47%;
+    --color-lilas-600: 295 37% 33%;
+    --color-lilas-700: 295 38% 18%;
+    --color-lilas-800: 295 38% 18%;
+
+    /* Magenta */
+    --color-magenta-100: 337 83% 93%;
+    --color-magenta-200: 337 82% 80%;
+    --color-magenta-300: 337 83% 67%;
+    --color-magenta-400: 337 84% 55%;
+    --color-magenta-500: 337 70% 42%;
+    --color-magenta-600: 337 70% 29%;
+    --color-magenta-700: 337 69% 16%;
+    --color-magenta-800: 337 69% 16%;
+
+    /* Magma */
+    --color-magma-100: 22 100% 93%;
+    --color-magma-200: 21 100% 79%;
+    --color-magma-300: 22 100% 64%;
+    --color-magma-400: 22 100% 50%;
+    --color-magma-500: 22 100% 38%;
+    --color-magma-600: 22 100% 27%;
+    --color-magma-700: 22 100% 15%;
+    --color-magma-800: 22 100% 6%;
+
+    /* Off Black */
+    --color-off-black-400: 82% 76% 0% 85%;
+
+    /*==== Support Colors ====*/
+
+    /* Light */
+    --color-light-100: 0 0% 100%;
+    --color-light-200: 0 0% 98%;
+    --color-light-300: 240 5% 96%;
+    --color-light-400: 240 6% 90%;
+    --color-light-500: 240 5% 84%;
+    --color-light-600: 0 0% 68%;
+    --color-light-700: 240 5% 65%;
+
+    /* Dark */
+    --color-dark-100: 240 4% 46%;
+    --color-dark-200: 240 4% 39%;
+    --color-dark-300: 240 4% 32%;
+    --color-dark-400: 240 4% 25%;
+    --color-dark-500: 240 4% 18%;
+    --color-dark-600: 240 5% 11%;
+    --color-dark-700: 240 10% 4%;
+
+    /* Error */
+    --color-error-100: 0 100% 97%;
+    --color-error-200: 0 45% 78%;
+    --color-error-300: 0 100% 84%;
+    --color-error-500: 0 84% 60%;
+    --color-error-700: 0 28% 28%;
+  }
+
+  :root {
+    /*==== Interface Colors - LIGHT ====*/
+    --background: var(--color-light-100);
+    --background-default-light: var(--color-light-100);
+    --background-default-medium: var(--color-light-200);
+    --background-default-heavy: var(--color-light-300);
+    --background-default-accent: var(--color-light-400);
+    --background-primary-light: var(--color-zafiro-100);
+    --background-primary-medium: var(--color-zafiro-200);
+    --background-primary-heavy: var(--color-zafiro-300);
+    --background-secondary-light: var(--color-madrugada-100);
+    --background-secondary-medium: var(--color-madrugada-200);
+    --background-secondary-heavy: var(--color-madrugada-300);
+    --background-accent-light: var(--color-indigo-100);
+    --background-accent-medium: var(--color-indigo-200);
+    --background-accent-heavy: var(--color-indigo-300);
+    --background-accent-primary: var(--color-zafiro-400);
+    --background-accent-secondary: var(--color-madrugada-400);
+
+    --foreground: var(--color-dark-700);
+    --foreground-default-light: var(--color-light-300);
+    --foreground-default-xlight: var(--color-light-600);
+    --foreground-default-heavy: var(--color-dark-700);
+    --foreground-default-medium: var(--color-dark-500);
+    --foreground-primary-light: var(--color-zafiro-400);
+    --foreground-primary-heavy: var(--color-zafiro-600);
+    --foreground-primary-medium: var(--color-zafiro-500);
+    --foreground-secondary-light: var(--color-madrugada-500);
+    --foreground-secondary-heavy: var(--color-madrugada-700);
+    --foreground-secondary-medium: var(--color-madrugada-600);
+    --foreground-accent-light: var(--color-indigo-400);
+    --foreground-accent-heavy: var(--color-indigo-600);
+    --foreground-accent-medium: var(--color-indigo-500);
+
+    --card: var(--color-light-100);
+    --card-foreground: var(--color-dark-700);
+
+    --popover: var(--color-light-100);
+    --popover-foreground: 240 8% 9%;
+
+    --primary: var(--color-zafiro-500);
+    --primary-foreground: 218 100% 98%;
+
+    --secondary: var(--color-madrugada-100);
+    --secondary-foreground: var(--color-dark-600);
+    --secondary-card: var(--color-light-100);
+
+    --muted: var(--color-light-300);
+    --muted-foreground: var(--color-dark-100);
+
+    --accent: var(--color-light-300);
+    --accent-foreground: var(--color-dark-600);
+
+    --destructive: 0 84% 60%;
+    --destructive-foreground: var(--color-light-200);
+
+    --success: var(--color-lumen-100);
+    --success-foreground: var(--color-lumen-500);
+    --success-outline: var(--color-lumen-500);
+
+    --warning: var(--color-magma-100);
+    --warning-foreground: var(--color-magma-500);
+    --warning-outline: var(--color-magma-500);
+
+    --danger: var(--color-error-100);
+    --danger-foreground: var(--color-error-500);
+    --danger-outline: var(--color-error-500);
+
+    --border: var(--color-light-400);
+    --border-default-light: var(--color-light-300);
+    --border-default-medium: var(--color-light-400);
+    --border-default-heavy: var(--color-light-500);
+    --border-primary-light: var(--color-zafiro-200);
+    --border-primary-medium: var(--color-zafiro-300);
+    --border-primary-heavy: var(--color-zafiro-400);
+    --border-accent-light: var(--color-indigo-200);
+    --border-accent-medium: var(--color-indigo-300);
+    --border-accent-heavy: var(--color-indigo-400);
+
+    --border-medium: var(--color-light-600);
+    --input: var(--color-madrugada-200);
+    --ring: var(--color-dark-600);
+    --radius: 0.5rem;
+
+    --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%;
+
+    --sidebar-background: var(--color-light-200);
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: var(--color-light-200);
+    --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%;
+
+    --text-default-primary: var(--color-dark-700);
+    --text-default-secondary: var(--color-dark-100);
+    --text-brand-primary: var(--color-zafiro-600);
+    --text-brand-secondary: var(--color-madrugada-500);
+    --text-links: var(--color-indigo-400);
+    --text-disabled: var(--color-light-600);
+    --text-default-inverted: var(--color-light-200);
+    --text-general-light: var(--color-light-100);
+    --text-general-dark: var(--color-dark-700);
+  }
+
+  .dark {
+    /*==== Interface Colors - DARK ====*/
+    --background: var(--color-dark-700);
+    --background-default-light: var(--color-dark-700);
+    --background-default-medium: var(--color-dark-600);
+    --background-default-heavy: var(--color-dark-500);
+    --background-default-accent: var(--color-dark-400);
+    --background-primary-light: var(--color-zafiro-900);
+    --background-primary-medium: var(--color-zafiro-800);
+    --background-primary-heavy: var(--color-zafiro-700);
+    --background-secondary-light: var(--color-madrugada-800);
+    --background-secondary-medium: var(--color-madrugada-700);
+    --background-secondary-heavy: var(--color-madrugada-600);
+    --background-accent-light: var(--color-indigo-600);
+    --background-accent-medium: var(--color-indigo-500);
+    --background-accent-heavy: var(--color-indigo-400);
+    --background-accent-primary: var(--color-zafiro-400);
+    --background-accent-secondary: var(--color-madrugada-400);
+
+    --foreground: var(--color-light-200);
+    --foreground-default-light: var(--color-light-500);
+    --foreground-default-xlight: var(--color-light-900);
+    --foreground-default-heavy: var(--color-dark-100);
+    --foreground-default-medium: var(--color-dark-300);
+    --foreground-primary-light: var(--color-zafiro-500);
+    --foreground-primary-heavy: var(--color-zafiro-300);
+    --foreground-primary-medium: var(--color-zafiro-400);
+    --foreground-secondary-light: var(--color-madrugada-300);
+    --foreground-secondary-heavy: var(--color-madrugada-100);
+    --foreground-secondary-medium: var(--color-madrugada-200);
+    --foreground-accent-light: var(--color-indigo-300);
+    --foreground-accent-heavy: var(--color-indigo-100);
+    --foreground-accent-medium: var(--color-indigo-200);
+
+    --card: var(--color-dark-700);
+    --card-foreground: var(--color-light-200);
+
+    --popover: var(--color-dark-500);
+    --popover-foreground: var(--color-light-200);
+
+    --primary: var(--color-zafiro-500);
+    --primary-foreground: 230 43% 5%;
+
+    --secondary: var(--color-madrugada-500);
+    --secondary-foreground: var(--color-light-200);
+    --secondary-card: 224 31% 7%;
+
+    --muted: var(--color-dark-500);
+    --muted-foreground: var(--color-light-700);
+
+    --accent: var(--color-dark-500);
+    --accent-foreground: var(--color-light-200);
+
+    --success: var(--color-lumen-800);
+    --success-foreground: var(--color-lumen-500);
+    --success-outline: var(--color-lumen-600);
+
+    --warning: var(--color-magma-800);
+    --warning-foreground: var(--color-magma-200);
+    --warning-outline: var(--color-magma-200);
+
+    --danger: var(--color-error-700);
+    --danger-foreground: var(--color-error-200);
+    --danger-outline: var(--color-error-200);
+
+    --border: var(--color-dark-500);
+    --border-default-light: var(--color-dark-500);
+    --border-default-medium: var(--color-dark-400);
+    --border-default-heavy: var(--color-dark-300);
+    --border-primary-light: var(--color-zafiro-700);
+    --border-primary-medium: var(--color-zafiro-700);
+    --border-primary-heavy: var(--color-zafiro-600);
+    --border-accent-light: var(--color-indigo-600);
+    --border-accent-medium: var(--color-indigo-500);
+    --border-accent-heavy: var(--color-indigo-400);
+
+    --border-medium: var(--color-dark-400);
+    --input: 238 30% 20%;
+    --ring: var(--color-light-500);
+    --radius: 0.5rem;
+
+    --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: var(--color-light-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%;
+
+    --text-default-primary: var(--color-light-100);
+    --text-default-secondary: var(--color-light-600);
+    --text-brand-primary: var(--color-zafiro-200);
+    --text-brand-secondary: var(--color-madrugada-400);
+    --text-links: var(--color-indigo-300);
+    --text-disabled: var(--color-dark-200);
+    --text-default-inverted: var(--color-dark-700);
+    --text-general-light: var(--color-light-100);
+    --text-general-dark: var(--color-dark-800);
+  }
+}
+
+/* This layer is added by shadcn/ui */
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* This layer is by next-forge */
+@layer base {
+  * {
+    @apply min-w-0;
+  }
+  html {
+    text-rendering: optimizelegibility;
+  }
+  body {
+    @apply min-h-[100dvh];
+  }
+}
+
+.spin-bg-animation {
+  background-size: 150% 150%;
+  animation: spin-bg 20s ease infinite;
+  background-origin: center;
+}
+
+.slide-up {
+  animation: slide-up 0.5s ease-in-out forwards;
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes spin-bg {
+  0% {
+    background-position: 0% 0%;
+  }
+  25% {
+    background-position: 100% 0%;
+  }
+  50% {
+    background-position: 100% 100%;
+  }
+  75% {
+    background-position: 0% 100%;
+  }
+  100% {
+    background-position: 0% 0%;
+  }
+}
+
+@layer utilities {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .flex-center-col {
+    @apply flex flex-col items-center justify-center;
+  }
+
+  .flex-center-row {
+    @apply flex flex-row items-center justify-center;
+  }
+
+  .token-font-heading-1 {
+    @apply scroll-m-20 text-4xl leading-[46px] font-extrabold tracking-tight;
+  }
+
+  .token-font-heading-2 {
+    @apply scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0;
+  }
+
+  .token-font-heading-3 {
+    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+  }
+
+  .token-font-heading-4 {
+    @apply scroll-m-20 text-xl font-semibold tracking-tight;
+  }
+
+  .token-font-paragraph {
+    @apply leading-7 [&:not(:first-child)]:mt-6;
+  }
+
+  .token-font-blockquote {
+    @apply mt-6 border-l-2 pl-6 italic;
+  }
+
+  .token-font-inline-code {
+    @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+  }
+
+  .token-font-lead {
+    @apply text-base font-bold;
+  }
+
+  .token-font-large {
+    @apply text-lg font-semibold;
+  }
+
+  .token-font-medium {
+    @apply text-base leading-normal;
+  }
+
+  .token-font-small {
+    @apply text-sm;
+  }
+
+  .token-font-small-title {
+    @apply text-sm leading-[0.875rem] font-medium;
+  }
+
+  .token-font-extra-small-title {
+    @apply text-xs font-semibold;
+  }
+
+  .token-font-extra-small {
+    @apply text-xs;
+  }
+
+  .token-font-minimum {
+    @apply text-[0.5625rem];
+  }
+
+  .token-font-subtle {
+    @apply text-sm leading-tight;
+  }
+
+  .token-font-muted {
+    @apply text-sm text-muted-foreground;
+  }
+
+  /* Gradients */
+  .nuvia-gradient-1 {
+    @apply bg-gradient-to-r from-nuvia-indigo-400  to-nuvia-lilas-400;
+  }
+
+  .nuvia-gradient-2 {
+    @apply bg-gradient-to-r from-nuvia-magenta-400 to-nuvia-magma-400;
+  }
+
+  .marketing-gradient {
+    @apply bg-gradient-to-r from-nuvia-magenta-400 to-nuvia-magma-400;
+  }
+
+  .fade-in-gradient-to-t {
+    @apply bg-gradient-to-t from-transparent to-background;
+  }
+
+  .fade-in-gradient-to-b {
+    @apply bg-gradient-to-b from-transparent to-background;
+  }
+
+  .fade-in-gradient-to-r {
+    @apply bg-gradient-to-r from-transparent to-background;
+  }
+
+  .fade-in-gradient-to-l {
+    @apply bg-gradient-to-l from-transparent to-background;
+  }
+}
+
+/*Icon Gradient*/
+.icon-gradient {
+  /* 1. Set the background image to your gradient */
+  background-image: linear-gradient(to right, #e72c83, #a742c6); /* */
+  /* Optional: Adjust size and other properties */
+  font-size: 40px;
+}
+
+/* Apply text gradient only for non-SVG elements to avoid transparent SVG icons */
+.icon-gradient:not(svg) {
+  /* 2. Clip the background to the text shape */
+  -webkit-background-clip: text;
+  background-clip: text;
+  /* 3. Make the actual text color transparent so the gradient shows through */
+  -webkit-text-fill-color: transparent;
+  color: transparent; /* */
+}