@cryptlex/web-components 1.3.5 → 1.4.0

package/lib/tokens.css

@@ -4,16 +4,16 @@
 */
 :root {
   --primary-hue: 240;
-  --xprimary-1: 0.99 0.01 var(--primary-hue);
-  --xprimary-2: 0.97 0.03 var(--primary-hue);
-  --xprimary-3: 0.9 0.04 var(--primary-hue);
-  --xprimary-4: 0.72 0.13 var(--primary-hue);
-  --xprimary-5: 0.67 0.13 var(--primary-hue);
-  --xprimary-6: 0.5 0.13 var(--primary-hue);
-  --xprimary-7: 0.35 0.13 var(--primary-hue);
-  --xprimary-8: 0.25 0.13 var(--primary-hue);
-  --xprimary-9: 0.20 0.09 var(--primary-hue);
-  --xprimary-10: 0.10 0.03 var(--primary-hue);
+  --xprimary-1: oklch(0.99 0.01 var(--primary-hue));
+  --xprimary-2: oklch(0.97 0.03 var(--primary-hue));
+  --xprimary-3: oklch(0.9 0.04 var(--primary-hue));
+  --xprimary-4: oklch(0.72 0.13 var(--primary-hue));
+  --xprimary-5: oklch(0.67 0.13 var(--primary-hue));
+  --xprimary-6: oklch(0.5 0.13 var(--primary-hue));
+  --xprimary-7: oklch(0.35 0.13 var(--primary-hue));
+  --xprimary-8: oklch(0.25 0.13 var(--primary-hue));
+  --xprimary-9: oklch(0.2 0.09 var(--primary-hue));
+  --xprimary-10: oklch(0.1 0.03 var(--primary-hue));
   --primary-1: var(--xprimary-1);
   --primary-2: var(--xprimary-2);
   --primary-3: var(--xprimary-3);
@@ -24,17 +24,17 @@
   --primary-8: var(--xprimary-8);
   --primary-9: var(--xprimary-9);
   --primary-10: var(--xprimary-10);
-  --secondary-hue: calc(var(--primary-hue) + 60);
-  --xsecondary-1: 0.99 0.01 var(--secondary-hue);
-  --xsecondary-2: 0.97 0.03 var(--secondary-hue);
-  --xsecondary-3: 0.9 0.04 var(--secondary-hue);
-  --xsecondary-4: 0.72 0.13 var(--secondary-hue);
-  --xsecondary-5: 0.67 0.13 var(--secondary-hue);
-  --xsecondary-6: 0.5 0.13 var(--secondary-hue);
-  --xsecondary-7: 0.35 0.13 var(--secondary-hue);
-  --xsecondary-8: 0.25 0.13 var(--secondary-hue);
-  --xsecondary-9: 0.20 0.09 var(--secondary-hue);
-  --xsecondary-10: 0.10 0.03 var(--secondary-hue);
+  --secondary-hue: calc(var(--primary-hue) + 30);
+  --xsecondary-1: oklch(0.99 0.01 var(--secondary-hue));
+  --xsecondary-2: oklch(0.97 0.03 var(--secondary-hue));
+  --xsecondary-3: oklch(0.9 0.04 var(--secondary-hue));
+  --xsecondary-4: oklch(0.72 0.13 var(--secondary-hue));
+  --xsecondary-5: oklch(0.67 0.13 var(--secondary-hue));
+  --xsecondary-6: oklch(0.5 0.13 var(--secondary-hue));
+  --xsecondary-7: oklch(0.35 0.13 var(--secondary-hue));
+  --xsecondary-8: oklch(0.25 0.13 var(--secondary-hue));
+  --xsecondary-9: oklch(0.2 0.09 var(--secondary-hue));
+  --xsecondary-10: oklch(0.1 0.03 var(--secondary-hue));
   --secondary-1: var(--xsecondary-1);
   --secondary-2: var(--xsecondary-2);
   --secondary-3: var(--xsecondary-3);
@@ -45,17 +45,17 @@
   --secondary-8: var(--xsecondary-8);
   --secondary-9: var(--xsecondary-9);
   --secondary-10: var(--xsecondary-10);
-  --destructive-hue: 10;
-  --xdestructive-1: 0.99 0.01 var(--destructive-hue);
-  --xdestructive-2: 0.97 0.03 var(--destructive-hue);
-  --xdestructive-3: 0.9 0.04 var(--destructive-hue);
-  --xdestructive-4: 0.72 0.13 var(--destructive-hue);
-  --xdestructive-5: 0.67 0.13 var(--destructive-hue);
-  --xdestructive-6: 0.5 0.13 var(--destructive-hue);
-  --xdestructive-7: 0.35 0.13 var(--destructive-hue);
-  --xdestructive-8: 0.25 0.13 var(--destructive-hue);
-  --xdestructive-9: 0.20 0.09 var(--destructive-hue);
-  --xdestructive-10: 0.10 0.03 var(--destructive-hue);
+  --destructive-hue: calc(var(--primary-hue) - 230);
+  --xdestructive-1: oklch(0.99 0.01 var(--destructive-hue));
+  --xdestructive-2: oklch(0.97 0.03 var(--destructive-hue));
+  --xdestructive-3: oklch(0.9 0.04 var(--destructive-hue));
+  --xdestructive-4: oklch(0.72 0.13 var(--destructive-hue));
+  --xdestructive-5: oklch(0.67 0.13 var(--destructive-hue));
+  --xdestructive-6: oklch(0.5 0.13 var(--destructive-hue));
+  --xdestructive-7: oklch(0.35 0.13 var(--destructive-hue));
+  --xdestructive-8: oklch(0.25 0.13 var(--destructive-hue));
+  --xdestructive-9: oklch(0.2 0.09 var(--destructive-hue));
+  --xdestructive-10: oklch(0.1 0.03 var(--destructive-hue));
   --destructive-1: var(--xdestructive-1);
   --destructive-2: var(--xdestructive-2);
   --destructive-3: var(--xdestructive-3);
@@ -66,17 +66,17 @@
   --destructive-8: var(--xdestructive-8);
   --destructive-9: var(--xdestructive-9);
   --destructive-10: var(--xdestructive-10);
-  --success-hue: 152;
-  --xsuccess-1: 0.99 0.01 var(--success-hue);
-  --xsuccess-2: 0.97 0.03 var(--success-hue);
-  --xsuccess-3: 0.9 0.04 var(--success-hue);
-  --xsuccess-4: 0.72 0.13 var(--success-hue);
-  --xsuccess-5: 0.67 0.13 var(--success-hue);
-  --xsuccess-6: 0.5 0.13 var(--success-hue);
-  --xsuccess-7: 0.35 0.13 var(--success-hue);
-  --xsuccess-8: 0.25 0.13 var(--success-hue);
-  --xsuccess-9: 0.20 0.09 var(--success-hue);
-  --xsuccess-10: 0.10 0.03 var(--success-hue);
+  --success-hue: calc(var(--primary-hue) - 90);
+  --xsuccess-1: oklch(0.99 0.01 var(--success-hue));
+  --xsuccess-2: oklch(0.97 0.03 var(--success-hue));
+  --xsuccess-3: oklch(0.9 0.04 var(--success-hue));
+  --xsuccess-4: oklch(0.72 0.13 var(--success-hue));
+  --xsuccess-5: oklch(0.67 0.13 var(--success-hue));
+  --xsuccess-6: oklch(0.5 0.13 var(--success-hue));
+  --xsuccess-7: oklch(0.35 0.13 var(--success-hue));
+  --xsuccess-8: oklch(0.25 0.13 var(--success-hue));
+  --xsuccess-9: oklch(0.2 0.09 var(--success-hue));
+  --xsuccess-10: oklch(0.1 0.03 var(--success-hue));
   --success-1: var(--xsuccess-1);
   --success-2: var(--xsuccess-2);
   --success-3: var(--xsuccess-3);
@@ -88,17 +88,17 @@
   --success-9: var(--xsuccess-9);
   --success-10: var(--xsuccess-10);
   --neutral-hue: var(--primary-hue);
-  --neutral-s: 0.01;
-  --xneutral-1: 0.99 var(--neutral-s) var(--neutral-hue);
-  --xneutral-2: 0.97 var(--neutral-s) var(--neutral-hue);
-  --xneutral-3: 0.9 var(--neutral-s) var(--neutral-hue);
-  --xneutral-4: 0.72 var(--neutral-s) var(--neutral-hue);
-  --xneutral-5: 0.67 var(--neutral-s) var(--neutral-hue);
-  --xneutral-6: 0.5 var(--neutral-s) var(--neutral-hue);
-  --xneutral-7: 0.4 var(--neutral-s) var(--neutral-hue);
-  --xneutral-8: 0.35 var(--neutral-s) var(--neutral-hue);
-  --xneutral-9: 0.33 var(--neutral-s) var(--neutral-hue);
-  --xneutral-10: 0.25 var(--neutral-s) var(--neutral-hue);
+  --neutral-s: 0.005;
+  --xneutral-1: oklch(0.985 var(--neutral-s) var(--neutral-hue));
+  --xneutral-2: oklch(0.97 var(--neutral-s) var(--neutral-hue));
+  --xneutral-3: oklch(0.922 var(--neutral-s) var(--neutral-hue));
+  --xneutral-4: oklch(0.87 var(--neutral-s) var(--neutral-hue));
+  --xneutral-5: oklch(0.708 var(--neutral-s) var(--neutral-hue));
+  --xneutral-6: oklch(0.556 var(--neutral-s) var(--neutral-hue));
+  --xneutral-7: oklch(0.439 var(--neutral-s) var(--neutral-hue));
+  --xneutral-8: oklch(0.35 var(--neutral-s) var(--neutral-hue));
+  --xneutral-9: oklch(0.269 var(--neutral-s) var(--neutral-hue));
+  --xneutral-10: oklch(0.205 var(--neutral-s) var(--neutral-hue));
   --neutral-1: var(--xneutral-1);
   --neutral-2: var(--xneutral-2);
   --neutral-3: var(--xneutral-3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -15,11 +15,11 @@
     },
     "./index.css": "./lib/index.css",
     "./tokens.css": "./lib/tokens.css",
-    "./tailwind-preset": "./tailwind.preset.ts"
+    "./tailwind.preset.css": "./lib/tailwind.preset.css"
   },
   "files": [
     "dist",
-    "tailwind.preset.ts",
+    "lib/tailwind.preset.css",
     "lib/tokens.css",
     "lib/index.css"
   ],
@@ -58,6 +58,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.62.3",
     "@tanstack/react-router": "^1.87.1",
     "@tanstack/react-table": "^8.20.5",
@@ -76,11 +77,12 @@
     "recharts": "^2.13.0",
     "rollup-preserve-directives": "^1.1.3",
     "sonner": "^1.7.0",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
     "use-debounce": "^10.0.4",
     "vaul": "^1.1.1",
-    "zod": "^3.24.1"
+    "zod": "^3.24.1",
+    "@hookform/resolvers": "^4.0.0"
   },
   "dependencies": {
     "@cryptlex/web-api-types": "^1.17.0"
@@ -101,13 +103,11 @@
     "@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.11.0",
     "globals": "^15.9.0",
-    "postcss": "^8.4.47",
     "sass": "^1.80.6",
     "storybook": "^8.4.2",
     "typescript": "^5.5.3",

package/tailwind.preset.ts

@@ -1,191 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const tokenRamps = (paletteName: string) => {
-  const ramps: Record<number, string> = {};
-  for (let i = 1; i <= 10; i++) {
-    ramps[i] = `oklch(var(--${paletteName}-${i}) / <alpha-value>)`
-  }
-  return ramps;
-}
-export default {
-  // Enable dark mode based on class.
-  darkMode: ['class'],
-  // The preset does not define content, this is done in the host.
-  content: [],
-  theme: {
-    borderRadius: {
-      lg: 'var(--radius)',
-      md: 'calc(var(--radius) - 2px)',
-      sm: 'calc(var(--radius) - 4px)',
-    },
-    fontSize: {
-      // text-caption
-      'caption': [
-        'var(--font-sm)',
-        {
-          lineHeight: '1.5',
-        },
-      ],
-      // text-body
-      'body': [
-        'var(--font-base)',
-        {
-          lineHeight: '1.6',
-        },
-      ],
-      // text-heading-6
-      'heading-6': [
-        'var(--font-base)',
-        {
-          lineHeight: '1.2',
-          fontWeight: 700,
-        },
-      ],
-      // text-heading-5
-      'heading-5': [
-        'var(--font-md)',
-        {
-          lineHeight: '1.2',
-        },
-      ],
-      // text-heading-4
-      'heading-4': [
-        'var(--font-lg)',
-        {
-          lineHeight: '1.2',
-          fontWeight: 500,
-        },
-      ],
-      // text-heading-3
-      'heading-3': [
-        'var(--font-xl)',
-        {
-          lineHeight: '1.1',
-          fontWeight: 500,
-        },
-      ],
-
-      // text-heading-2
-      'heading-2': [
-        'var(--font-2xl)',
-        {
-          lineHeight: '1',
-          fontWeight: 300,
-        },
-      ],
-
-      // text-heading-1
-      'heading-1': [
-        'var(--font-3xl)',
-        {
-          lineHeight: '1',
-        },
-      ],
-    },
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#ffffff',
-      black: '#000000',
-      background: 'oklch(var(--background) / <alpha-value>)',
-      foreground: 'oklch(var(--foreground) / <alpha-value>)',
-      card: {
-        DEFAULT: 'oklch(var(--card) / <alpha-value>)',
-        foreground: 'oklch(var(--card-foreground) / <alpha-value>)',
-      },
-      popover: {
-        DEFAULT: 'oklch(var(--popover) / <alpha-value>)',
-        foreground: 'oklch(var(--popover-foreground) / <alpha-value>)',
-      },
-      primary: {
-        DEFAULT: 'oklch(var(--primary) / <alpha-value>)',
-        foreground: 'oklch(var(--primary-foreground) / <alpha-value>)',
-        ...tokenRamps('primary'),
-      },
-      secondary: {
-        DEFAULT: 'oklch(var(--secondary) / <alpha-value>)',
-        foreground: 'oklch(var(--secondary-foreground) / <alpha-value>)',
-        ...tokenRamps('secondary'),
-      },
-      neutral: {
-        ...tokenRamps('neutral'),
-      },
-      muted: {
-        DEFAULT: 'oklch(var(--muted) / <alpha-value>)',
-        foreground: 'oklch(var(--muted-foreground) / <alpha-value>)',
-      },
-      accent: {
-        DEFAULT: 'oklch(var(--accent) / <alpha-value>)',
-        foreground: 'oklch(var(--accent-foreground) / <alpha-value>)',
-      },
-      destructive: {
-        DEFAULT: 'oklch(var(--destructive) / <alpha-value>)',
-        foreground: 'oklch(var(--destructive-foreground) / <alpha-value>)',
-        ...tokenRamps('destructive'),
-      },
-      success: {
-        DEFAULT: 'oklch(var(--success) / <alpha-value>)',
-        foreground: 'oklch(var(--success-foreground) / <alpha-value>)',
-        ...tokenRamps('success'),
-      },
-      border: 'oklch(var(--border) / <alpha-value>)',
-      input: 'oklch(var(--input) / <alpha-value>)',
-      ring: 'oklch(var(--ring) / <alpha-value>)',
-      chart: {
-        1: 'oklch(var(--chart-1) / <alpha-value>)',
-        2: 'oklch(var(--chart-2) / <alpha-value>)',
-        3: 'oklch(var(--chart-3) / <alpha-value>)',
-        4: 'oklch(var(--chart-4) / <alpha-value>)',
-        5: 'oklch(var(--chart-5) / <alpha-value>)',
-      },
-      sidebar: {
-        DEFAULT: 'oklch(var(--sidebar-background) / <alpha-value>)',
-        foreground: 'oklch(var(--sidebar-foreground) / <alpha-value>)',
-        primary: 'oklch(var(--sidebar-primary) / <alpha-value>)',
-        primaryForeground: 'oklch(var(--sidebar-primary-foreground) / <alpha-value>)',
-        accent: 'oklch(var(--sidebar-accent) / <alpha-value>)',
-        accentForeground: 'oklch(var(--sidebar-accent-foreground) / <alpha-value>)',
-        border: 'oklch(var(--sidebar-border) / <alpha-value>)',
-        ring: 'oklch(var(--sidebar-ring) / <alpha-value>)',
-      },
-    },
-    extend: {
-      gridTemplateColumns: {
-        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
-      },
-      keyframes: {
-        'accordion-down': {
-          from: {
-            height: '0',
-          },
-          to: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-        },
-        'accordion-up': {
-          from: {
-            height: 'var(--radix-accordion-content-height)',
-          },
-          to: {
-            height: '0',
-          },
-        },
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-out',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate')], // Include any plugins you need
-} satisfies Config;