@cryptlex/web-components 1.3.4 → 1.4.0

package/lib/index.css

@@ -1,62 +1,9 @@
 @import url('tokens.css');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import './tailwind.preset.css';
 
-:root {
-  /* shad/cn tokens */
-  --background: var(--neutral-1);
-  --foreground: var(--neutral-10);
-
-  --card: var(--neutral-2);
-  --card-foreground: var(--foreground);
-  --popover: var(--background);
-  --popover-foreground: var(--foreground);
-
-  --primary: var(--primary-8);
-  --primary-foreground: var(--primary-2);
-
-  --secondary: var(--secondary-8);
-  --secondary-foreground: var(--secondary-2);
-
-  --muted: var(--neutral-7);
-  --muted-foreground: var(--neutral-4);
-
-  --accent: var(--neutral-7);
-  --accent-foreground: var(--neutral-4);
-
-  --destructive: var(--destructive-8);
-  --destructive-foreground: var(--destructive-2);
-
-  --success: var(--success-8);
-  --succcess-foreground: var(--success-2);
-
-  --border: var(--neutral-3);
-  --input: var(--border);
-  --ring: var(--neutral-5);
-
-  --chart-1: var(--primary-5);
-  --chart-2: var(--primary-4);
-  --chart-3: var(--secondary-5);
-  --chart-4: var(--secondary-4);
-  --chart-5: var(--secondary-2);
-
-  --radius: 0.25rem;
-
-  --sidebar-background: var(--background);
-  --sidebar-foreground: var(--foreground);
-
-  --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%;
-
-  /** Grid Tokens */
-  --grid-fluid-min: 16rem;
+@utility link {
+  @apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
 }
 
 @layer base {
@@ -68,42 +15,23 @@
     @apply link;
   }
 
-  h1 {
-    @apply text-heading-1;
-  }
-
-  h2 {
-    @apply text-heading-2;
-  }
-
-  h3 {
-    @apply text-heading-3;
-  }
-
-  h4 {
-    @apply text-heading-4;
-  }
-
-  h5 {
-    @apply text-heading-5;
+  body {
+    @apply bg-background/50 text-foreground;
   }
 
-  h6 {
-    @apply text-heading-6;
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
   }
 
-  p {
-    @apply text-body;
-  }  
-
-  body {
-    @apply bg-background text-foreground;
+  *::-webkit-scrollbar-track {
+    background: white;
+    border-radius: 2px;
   }
 
-}
+  *::-webkit-scrollbar-thumb {
+    background-color: gray;
 
-@layer components {
-  .link {
-    @apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
+    border: 3px solid gray;
   }
 }

package/lib/tailwind.preset.css

@@ -0,0 +1,220 @@
+/** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
+
+@plugin "tailwindcss-animate";
+
+@theme {
+    /* Radius */
+    --radius: 0.25rem;
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    /* Text Sizes */
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-md: 1.125rem;
+    --text-lg: 1.25rem;
+    --text-xl: 1.5rem;
+    --text-2xl: 1.75rem;
+    --text-3xl: 2rem;
+
+    /* Colors */
+    --color-*: initial;
+    --color-primary-1: var(--primary-1);
+    --color-primary-2: var(--primary-2);
+    --color-primary-3: var(--primary-3);
+    --color-primary-4: var(--primary-4);
+    --color-primary-5: var(--primary-5);
+    --color-primary-6: var(--primary-6);
+    --color-primary-7: var(--primary-7);
+    --color-primary-8: var(--primary-8);
+    --color-primary-9: var(--primary-9);
+    --color-primary-10: var(--primary-10);
+
+    --color-secondary-1: var(--secondary-1);
+    --color-secondary-2: var(--secondary-2);
+    --color-secondary-3: var(--secondary-3);
+    --color-secondary-4: var(--secondary-4);
+    --color-secondary-5: var(--secondary-5);
+    --color-secondary-6: var(--secondary-6);
+    --color-secondary-7: var(--secondary-7);
+    --color-secondary-8: var(--secondary-8);
+    --color-secondary-9: var(--secondary-9);
+    --color-secondary-10: var(--secondary-10);
+
+    --color-neutral-1: var(--neutral-1);
+    --color-neutral-2: var(--neutral-2);
+    --color-neutral-3: var(--neutral-3);
+    --color-neutral-4: var(--neutral-4);
+    --color-neutral-5: var(--neutral-5);
+    --color-neutral-6: var(--neutral-6);
+    --color-neutral-7: var(--neutral-7);
+    --color-neutral-8: var(--neutral-8);
+    --color-neutral-9: var(--neutral-9);
+    --color-neutral-10: var(--neutral-10);
+
+    --color-destructive-1: var(--destructive-1);
+    --color-destructive-2: var(--destructive-2);
+    --color-destructive-3: var(--destructive-3);
+    --color-destructive-4: var(--destructive-4);
+    --color-destructive-5: var(--destructive-5);
+    --color-destructive-6: var(--destructive-6);
+    --color-destructive-7: var(--destructive-7);
+    --color-destructive-8: var(--destructive-8);
+    --color-destructive-9: var(--destructive-9);
+    --color-destructive-10: var(--destructive-10);
+
+    --color-success-1: var(--success-1);
+    --color-success-2: var(--success-2);
+    --color-success-3: var(--success-3);
+    --color-success-4: var(--success-4);
+    --color-success-5: var(--success-5);
+    --color-success-6: var(--success-6);
+    --color-success-7: var(--success-7);
+    --color-success-8: var(--success-8);
+    --color-success-9: var(--success-9);
+    --color-success-10: var(--success-10);
+
+    --color-background: var(--color-neutral-2);
+    --color-foreground: var(--color-neutral-10);
+
+    --color-card: var(--color-neutral-2);
+    --color-card-foreground: var(--color-foreground);
+
+    --color-popover: var(--color-background);
+    --color-popover-foreground: var(--color-foreground);
+
+    --color-primary: var(--color-primary-8);
+    --color-primary-foreground: var(--color-primary-2);
+    --color-secondary: var(--color-secondary-8);
+    --color-secondary-foreground: var(--color-secondary-2);
+    --color-muted: var(--color-neutral-7);
+    --color-muted-foreground: var(--color-neutral-4);
+    --color-accent: var(--color-neutral-7);
+    --color-accent-foreground: var(--color-neutral-4);
+    --color-destructive: var(--color-destructive-8);
+    --color-destructive-foreground: var(--color-destructive-2);
+    --color-success: var(--color-success-8);
+    --color-success-foreground: var(--color-success-2);
+
+    --color-border: var(--color-neutral-3);
+    --color-input: var(--color-border);
+    --color-ring: var(--color-neutral-5);
+
+    --color-chart-1: var(--color-primary-5);
+    --color-chart-2: var(--color-primary-4);
+    --color-chart-3: var(--color-secondary-5);
+    --color-chart-4: var(--color-secondary-4);
+    --color-chart-5: var(--color-secondary-2);
+
+    --color-sidebar-background: var(--color-background);
+    --color-sidebar-foreground: var(--color-foreground);
+    /* // TODO */
+    --color-sidebar-primary: 240 5.9% 10%;
+    --color-sidebar-primary-foreground: 0 0% 98%;
+
+    --color-sidebar-accent: 240 4.8% 95.9%;
+    --color-sidebar-accent-foreground: 240 5.9% 10%;
+
+    --color-sidebar-border: var(--color-border);
+    --color-sidebar-ring: var(--color-ring);
+
+    /** TODO Grid Tokens */
+    /* --grid-fluid-min: 16rem;
+    gridTemplateColumns: {
+        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
+      }, */
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    --animate-collapsible-down: collapsible-down 0.2s ease-out;
+
+    @keyframes collapsible-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-collapsible-content-height);
+        }
+    }
+
+    --animate-collapsible-up: collapsible-up 0.2s ease-out;
+
+    @keyframes collapsible-up {
+        from {
+            height: var(--radix-collapsible-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+}
+
+@utility text-caption {
+    @apply text-sm;
+}
+
+
+@utility text-body {
+    @apply text-base;
+    /* lineHeight: '1.6', */
+}
+
+@utility text-heading-6 {
+    @apply text-base;
+    /* fontWeight: 700, */
+    /* lineHeight: '1.2', */
+
+}
+
+@utility text-heading-5 {
+    @apply text-md;
+    /* lineHeight: '1.2', */
+}
+
+@utility text-heading-4 {
+    @apply text-lg;
+    /* lineHeight: '1.2', */
+    /* fontWeight: 500, */
+}
+
+@utlility text-heading-3 {
+    @apply text-xl;
+}
+
+@utility text-heading-2 {
+    @apply text-2xl;
+    /* lineHeight: '1', */
+    /* fontWeight: 300, */
+}
+
+@utility text-heading-1 {
+    @apply text-3xl;
+    /* lineHeight: '1', */
+}
+
+@layer components {}

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.4",
+  "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,28 +58,31 @@
     "@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",
     "class-variance-authority": "^0.7.0",
-    "openapi-fetch": ">=0.13.3",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "date-fns": "^3.0.0",
     "input-otp": "^1.4.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.453.0",
+    "openapi-fetch": ">=0.13.3",
     "react": "^18.3.1",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",
     "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",
-    "rollup-preserve-directives": "^1.1.3"
+    "zod": "^3.24.1",
+    "@hookform/resolvers": "^4.0.0"
   },
   "dependencies": {
     "@cryptlex/web-api-types": "^1.17.0"
@@ -100,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/dist/components/info-card/info-card.es.js

@@ -1,71 +0,0 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { Badge as n } from "../ui/badge.es.js";
-import "../ui/accordion.es.js";
-import "../ui/avatar.es.js";
-import "../ui/breadcrumb.es.js";
-import "../ui/button.es.js";
-import "../ui/calendar.es.js";
-import { Card as c, CardHeader as d, CardTitle as f, CardContent as x } from "../ui/card.es.js";
-import "../ui/chart.es.js";
-import "../ui/checkbox.es.js";
-import "@radix-ui/react-collapsible";
-import "../ui/command.es.js";
-import "../ui/dialog.es.js";
-import "../ui/drawer.es.js";
-import "../ui/dropdown-menu.es.js";
-import "../ui/form.es.js";
-import "../ui/input.es.js";
-import "../ui/input-otp.es.js";
-import "../ui/label.es.js";
-import "lucide-react";
-import "../ui/mutli-select.es.js";
-import "../ui/navigation-menu.es.js";
-import "../ui/pagination.es.js";
-import "../ui/password-input.es.js";
-import "../ui/popover.es.js";
-import "../ui/radio-group.es.js";
-import "react";
-import "../ui/select.es.js";
-import "../ui/separator.es.js";
-import "../ui/sheet.es.js";
-import "../ui/sidebar.es.js";
-import { Skeleton as u } from "../ui/skeleton.es.js";
-import "sonner";
-import "../ui/table.es.js";
-import "../ui/tabs.es.js";
-import "../ui/tooltip.es.js";
-const Z = ({ data: p, label: s, fields: e }) => {
-  const l = (r, t) => {
-    if (r.transform)
-      return r.transform(t);
-    switch (r.type) {
-      case "badge":
-        return /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-1", children: Array.isArray(t) ? t.map((i, m) => /* @__PURE__ */ o(n, { variant: "secondary", children: typeof i == "object" ? i.name || i.id : i }, m)) : t });
-      case "boolean":
-        return t.toString();
-      default:
-        return t ?? "";
-    }
-  };
-  return /* @__PURE__ */ a(c, { children: [
-    /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(f, { children: s }) }),
-    /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: p ? e.map((r) => {
-      const t = r.accessor ? r.accessor.split(".").reduce((i, m) => i == null ? void 0 : i[m], p) : null;
-      return /* @__PURE__ */ a(
-        "div",
-        {
-          className: "flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0",
-          children: [
-            /* @__PURE__ */ o("p", { className: "text-sm flex w-full justify-start  font-semibold text-muted-foreground col-span-1", children: r.display }),
-            /* @__PURE__ */ o("div", { className: "text-sm flex w-full justify-start text-wrap", children: l(r, t) })
-          ]
-        },
-        r.display
-      );
-    }) : e.map((r, t) => /* @__PURE__ */ o(u, { className: "h-12 w-full" }, t)) }) })
-  ] });
-};
-export {
-  Z as InfoCard
-};
-//# sourceMappingURL=info-card.es.js.map

package/dist/components/info-card/info-card.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"info-card.es.js","sources":["../../../lib/components/info-card/info-card.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Card, CardContent, CardHeader, CardTitle, Skeleton } from '@/index';\n\nexport type DisplayField = {\n  display: string;\n  accessor: string;\n  type?: 'text' | 'badge' | 'boolean';\n  transform?: (value: any) => React.ReactNode;\n};\n\nexport interface InfoCardProps {\n  data: Record<string, any>;\n  label: string;\n  fields: DisplayField[];\n  className?: string;\n}\n\nexport const InfoCard: React.FC<InfoCardProps> = ({ data, label, fields }) => {\n  const renderValue = (field: DisplayField, value: any) => {\n    // Custom transform if provided\n    if (field.transform) {\n      return field.transform(value);\n    }\n\n    // Handle specific types\n    switch (field.type) {\n      case 'badge':\n        return (\n          <div className=\"flex flex-wrap gap-1\">\n            {Array.isArray(value)\n              ? value.map((item, index) => (\n                  <Badge key={index} variant=\"secondary\">\n                    {typeof item === 'object' ? item.name || item.id : item}\n                  </Badge>\n                ))\n              : value}\n          </div>\n        );\n\n      case 'boolean':\n        return value.toString();\n      default:\n        return value ?? '';\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{label}</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-1\">\n          {data\n            ? fields.map((field) => {\n                const value = field.accessor\n                  ? field.accessor.split('.').reduce((obj, key) => obj?.[key], data)\n                  : null;\n\n                return (\n                  <div\n                    key={field.display}\n                    className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n                  >\n                    <p className=\"text-sm flex w-full justify-start  font-semibold text-muted-foreground col-span-1\">\n                      {field.display}\n                    </p>\n                    <div className=\"text-sm flex w-full justify-start text-wrap\">\n                      {renderValue(field, value)}\n                    </div>\n                  </div>\n                );\n              })\n            : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":["InfoCard","data","label","fields","renderValue","field","value","jsx","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,IAAoC,CAAC,EAAE,MAAAC,GAAM,OAAAC,GAAO,QAAAC,QAAa;AACtE,QAAAC,IAAc,CAACC,GAAqBC,MAAe;AAEvD,QAAID,EAAM;AACD,aAAAA,EAAM,UAAUC,CAAK;AAI9B,YAAQD,EAAM,MAAM;AAAA,MAClB,KAAK;AACH,eACG,gBAAAE,EAAA,OAAA,EAAI,WAAU,wBACZ,UAAM,MAAA,QAAQD,CAAK,IAChBA,EAAM,IAAI,CAACE,GAAMC,MACf,gBAAAF,EAACG,GAAkB,EAAA,SAAQ,aACxB,UAAA,OAAOF,KAAS,WAAWA,EAAK,QAAQA,EAAK,KAAKA,EADzC,GAAAC,CAEZ,CACD,IACDH,GACN;AAAA,MAGJ,KAAK;AACH,eAAOA,EAAM,SAAS;AAAA,MACxB;AACE,eAAOA,KAAS;AAAA,IAAA;AAAA,EAEtB;AAEA,2BACGK,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAJ,EAACK,GACC,EAAA,UAAA,gBAAAL,EAACM,GAAW,EAAA,UAAAX,EAAM,CAAA,GACpB;AAAA,IACA,gBAAAK,EAACO,GACC,EAAA,UAAA,gBAAAP,EAAC,OAAI,EAAA,WAAU,uBACZ,UACGN,IAAAE,EAAO,IAAI,CAACE,MAAU;AACpB,YAAMC,IAAQD,EAAM,WAChBA,EAAM,SAAS,MAAM,GAAG,EAAE,OAAO,CAACU,GAAKC,MAAQD,KAAA,gBAAAA,EAAMC,IAAMf,CAAI,IAC/D;AAGF,aAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAV,EAAC,KAAE,EAAA,WAAU,qFACV,UAAAF,EAAM,SACT;AAAA,8BACC,OAAI,EAAA,WAAU,+CACZ,UAAYD,EAAAC,GAAOC,CAAK,EAC3B,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QARKD,EAAM;AAAA,MASb;AAAA,IAEH,CAAA,IACDF,EAAO,IAAI,CAACe,GAAGT,MAAW,gBAAAF,EAAAY,GAAA,EAAqB,WAAU,cAAA,GAAjBV,CAA+B,CAAE,EAC/E,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}