@j3m-quantum/ui 0.1.0

package/dist/styles/index.css

@@ -0,0 +1,16 @@
+/* ========================================
+   J3M UI STYLES
+   
+   Main entry point for J3M UI styling.
+   Import this in your app to get the full J3M theme.
+   
+   Usage:
+     import '@j3m-quantum/ui/styles'
+   ======================================== */
+
+/* 1. J3M Design Tokens (primitives, scales) */
+@import "./tokens.css";
+
+/* 2. J3M Theme Overrides (shadcn variable customizations) */
+@import "./theme.css";
+

package/dist/styles/theme.css

@@ -0,0 +1,59 @@
+/* ========================================
+   J3M THEME OVERRIDES
+   
+   This file contains CSS variable overrides
+   that transform shadcn components into J3M styled components.
+   
+   Edit this file to customize the J3M theme.
+   ======================================== */
+
+@import "./tokens.css";
+
+/* ========================================
+   GLOBAL THEME OVERRIDES
+   ======================================== */
+
+/* Add your global theme overrides here */
+
+/* ========================================
+   COMPONENT-SPECIFIC OVERRIDES
+   Add custom styles for specific components
+   ======================================== */
+
+/* Toast/Sonner styles */
+[data-sonner-toast] {
+  background: var(--j3m-neutral-100) !important;
+  box-shadow: inset 0 0 0 1px var(--j3m-stroke-primary-350-50) !important;
+}
+
+[data-sonner-toast] [data-description] {
+  color: var(--j3m-neutral-800) !important;
+}
+
+/* ========================================
+   GLASS UTILITY CLASSES
+   ======================================== */
+
+.glass-light {
+  background: var(--j3m-glass-light);
+  backdrop-filter: blur(var(--j3m-blur-lg));
+  -webkit-backdrop-filter: blur(var(--j3m-blur-lg));
+  border: 1px solid var(--j3m-glass-border-light);
+  box-shadow: var(--j3m-glass-shadow-md);
+}
+
+.glass-dark {
+  background: var(--j3m-glass-dark);
+  backdrop-filter: blur(var(--j3m-blur-md));
+  -webkit-backdrop-filter: blur(var(--j3m-blur-md));
+  border: 1px solid var(--j3m-stroke-light-10);
+  box-shadow: var(--j3m-glass-shadow-lg);
+}
+
+.glass-neutral {
+  background: var(--j3m-glass-neutral);
+  backdrop-filter: blur(var(--j3m-blur-md));
+  -webkit-backdrop-filter: blur(var(--j3m-blur-md));
+  border: 1px solid var(--j3m-glass-border-dark);
+  box-shadow: var(--j3m-glass-shadow-sm);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,248 @@
+/* ========================================
+   J3M DESIGN TOKENS
+   All J3M-specific design tokens (backup from original globals.css)
+   ======================================== */
+
+:root {
+  /* ========================================
+     J3M SCALE COLORS (Primitives)
+     ======================================== */
+  
+  /* Primary Orange Scale */
+  --j3m-primary-100: #FBCEB5;
+  --j3m-primary-200: #F79D6B;
+  --j3m-primary-250: #F58446;
+  --j3m-primary-300: #F36C21;
+  --j3m-primary-350: #EA5B0C;
+  --j3m-primary-400: #CA4F0B;
+  --j3m-primary-500: #8F3808;
+
+  /* Neutral Gray Scale */
+  --j3m-neutral-100: #FFFFFF;
+  --j3m-neutral-200: #E8E8E8;
+  --j3m-neutral-250: #DADBDC;
+  --j3m-neutral-300: #D2D2D2;
+  --j3m-neutral-350: #D1D1D1;
+  --j3m-neutral-400: #BBBBBB;
+  --j3m-neutral-500: #A4A4A4;
+  --j3m-neutral-600: #8E8E8E;
+  --j3m-neutral-700: #777777;
+  --j3m-neutral-750: #747474;
+  --j3m-neutral-800: #606060;
+  --j3m-neutral-900: #4A4A4A;
+  --j3m-neutral-1000: #333333;
+
+  /* Status Colors */
+  --j3m-red-100: #FB3748;
+  --j3m-red-200: #D00416;
+  --j3m-yellow-100: #FFDB43;
+  --j3m-yellow-200: #DFB400;
+  --j3m-green-100: #84EBB4;
+  --j3m-green-200: #1FC16B;
+
+  /* ========================================
+     J3M SEMANTIC TOKENS
+     ======================================== */
+  
+  /* Background Tokens */
+  --color-bg-surface: var(--j3m-neutral-100);
+  --color-bg-subtle: var(--j3m-neutral-200);
+  
+  /* Text Tokens */
+  --color-text-main: rgba(0, 0, 0, 0.7);
+  --color-text-muted: rgba(0, 0, 0, 0.5);
+  --color-text-soft: rgba(0, 0, 0, 0.4);
+  --color-text-on-accent: #FFFFFF;
+  --color-text-on-accent-muted: rgba(255, 255, 255, 0.5);
+  
+  /* Border Tokens */
+  --color-border-subtle: var(--j3m-neutral-200);
+  --color-border-strong: var(--j3m-neutral-400);
+  
+  /* Accent Tokens */
+  --color-accent: var(--j3m-primary-250);
+
+  /* Interactive State Tokens */
+  --color-interactive-bg: var(--j3m-primary-250);
+  --color-interactive-text: var(--j3m-neutral-100);
+  --color-cta-bg: var(--j3m-primary-300);
+  --color-cta-text: var(--j3m-neutral-100);
+  --color-focus-ring: var(--j3m-stroke-primary-250-20);
+  --color-hover-overlay-light: var(--j3m-stroke-light-20);
+  --color-hover-overlay-dark: var(--j3m-stroke-neutral-1000-10);
+
+  /* Tooltip Tokens */
+  --color-tooltip-bg: var(--j3m-neutral-1000);
+  --color-tooltip-text: var(--j3m-neutral-100);
+
+  /* Progress Tokens */
+  --color-progress-fill: var(--j3m-primary-250);
+  --color-progress-track: rgba(255, 255, 255, 0.5);
+
+  /* Input Tokens (default - solid context) */
+  --color-input-bg: transparent;
+  --color-input-border: var(--color-border-subtle);
+
+  /* Checkbox & Radio Tokens */
+  --color-checkbox-bg: rgba(255, 255, 255, 0.5);
+  --color-radio-bg: rgba(255, 255, 255, 0.5);
+
+  /* Modal/Overlay Tokens (default - solid context) */
+  --color-popover-bg: var(--color-bg-surface);
+  --color-hovercard-bg: var(--color-bg-surface);
+  --color-sheet-bg: var(--color-bg-surface);
+  --color-drawer-bg: var(--color-bg-surface);
+  --color-dropdown-bg: var(--color-bg-surface);
+  --color-contextmenu-bg: var(--color-bg-surface);
+
+  /* Spacing */
+  --j3m-spacing-xs: 8px;
+  --j3m-spacing-s: 12px;
+  --j3m-spacing-m: 16px;
+  --j3m-spacing-l: 24px;
+  --j3m-spacing-xl: 32px;
+
+  /* Radii */
+  --j3m-radius-none: 0px;
+  --j3m-radius-2xs: 4px;
+  --j3m-radius-xs: 5px;
+  --j3m-radius-s: 8px;
+  --j3m-radius-m: 10px;
+  --j3m-radius-l: 18px;
+  --j3m-radius-xl: 22px;
+  --j3m-radius-2xl: 26px;
+  --j3m-radius-full: 999px;
+
+  /* Stroke/Border Width */
+  --j3m-stroke-none: 0px;
+  --j3m-stroke-s: 1px;
+  --j3m-stroke-m: 2px;
+  --j3m-stroke-l: 3px;
+  --j3m-stroke-xl: 4px;
+
+  /* Stroke Colors (opacity variants) */
+  /* Light (white) strokes */
+  --j3m-stroke-light-10: rgba(255, 255, 255, 0.1);
+  --j3m-stroke-light-20: rgba(255, 255, 255, 0.2);
+  /* Dark (neutral-1000) strokes */
+  --j3m-stroke-neutral-1000-10: rgba(51, 51, 51, 0.1);
+  --j3m-stroke-neutral-1000-20: rgba(51, 51, 51, 0.2);
+  /* Primary-250 strokes (interactive) */
+  --j3m-stroke-primary-250-10: rgba(245, 132, 70, 0.1);
+  --j3m-stroke-primary-250-20: rgba(245, 132, 70, 0.2);
+  /* Primary-350 strokes (toast, accent) */
+  --j3m-stroke-primary-350-10: rgba(234, 91, 12, 0.1);
+  --j3m-stroke-primary-350-50: rgba(234, 91, 12, 0.5);
+
+  /* Glass Effect Tokens */
+  --j3m-glass-light-10: rgba(255, 255, 255, 0.1);
+  --j3m-glass-light-20: rgba(255, 255, 255, 0.2);
+  --j3m-glass-light-30: rgba(255, 255, 255, 0.3);
+  --j3m-glass-light-50: rgba(255, 255, 255, 0.5);
+  --j3m-glass-light-60: rgba(255, 255, 255, 0.6);
+  --j3m-glass-light-70: rgba(255, 255, 255, 0.7);
+  --j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
+  --j3m-glass-light: rgba(255, 255, 255, 0.5);
+  --j3m-glass-light-hover: rgba(255, 255, 255, 0.7);
+  --j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
+  
+  --j3m-glass-dark: rgba(51, 51, 51, 0.6);
+  --j3m-glass-dark-hover: rgba(51, 51, 51, 0.7);
+  --j3m-glass-dark-strong: rgba(51, 51, 51, 0.8);
+  
+  --j3m-glass-neutral-subtle: rgba(198, 198, 198, 0.5);
+  --j3m-glass-neutral: rgba(227, 227, 227, 0.5);
+  --j3m-glass-neutral-hover: rgba(227, 227, 227, 0.6);
+  --j3m-glass-neutral-strong: rgba(227, 227, 227, 0.81);
+  
+  --j3m-glass-primary: rgba(243, 108, 33, 0.1);
+  --j3m-glass-primary-hover: rgba(243, 108, 33, 0.15);
+  --j3m-glass-primary-strong: rgba(243, 108, 33, 0.2);
+  --j3m-glass-primary-highlight: rgba(243, 108, 33, 0.31);
+  
+  --j3m-glass-border-light: rgba(255, 255, 255, 0.3);
+  --j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
+  --j3m-glass-border-white: rgba(255, 255, 255, 0.2);
+  --j3m-glass-border-dark: rgba(0, 0, 0, 0.1);
+  --j3m-glass-border-dark-subtle: rgba(0, 0, 0, 0.05);
+
+  /* Blur Scale */
+  --j3m-blur-none: 0px;
+  --j3m-blur-xs: 4px;
+  --j3m-blur-sm: 8px;
+  --j3m-blur-md: 12px;
+  --j3m-blur-lg: 16px;
+  --j3m-blur-xl: 24px;
+  --j3m-blur-2xl: 40px;
+  --j3m-blur-3xl: 64px;
+  --j3m-blur-4xl: 100px;
+  --j3m-blur-max: 1000px;
+  
+  /* Opacity Scale */
+  --j3m-opacity-0: 0;
+  --j3m-opacity-5: 0.05;
+  --j3m-opacity-10: 0.1;
+  --j3m-opacity-20: 0.2;
+  --j3m-opacity-30: 0.3;
+  --j3m-opacity-40: 0.4;
+  --j3m-opacity-50: 0.5;
+  --j3m-opacity-60: 0.6;
+  --j3m-opacity-70: 0.7;
+  --j3m-opacity-80: 0.8;
+  --j3m-opacity-90: 0.9;
+  --j3m-opacity-100: 1;
+  
+  /* Glass Shadows */
+  --j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
+  --j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --j3m-glass-shadow-glow: 0 0 10px var(--j3m-primary-300);
+  --j3m-glass-shadow-glow-active: 0 0 10px var(--j3m-primary-350);
+}
+
+/* ========================================
+   GLASS CONTEXT OVERRIDES
+   Applied when components are inside .glass-context
+   ======================================== */
+
+.glass-context {
+  /* Background - more transparent, lets blur show through */
+  --color-bg-surface: var(--j3m-glass-light);
+  --color-bg-subtle: var(--j3m-glass-light-subtle);
+  
+  /* Text - higher contrast for glass backgrounds */
+  --color-text-main: rgba(0, 0, 0, 0.85);
+  --color-text-muted: rgba(0, 0, 0, 0.6);
+  --color-text-soft: rgba(0, 0, 0, 0.45);
+  
+  /* Borders - lighter for glass effect */
+  --color-border-subtle: var(--j3m-glass-border-light);
+  --color-border-strong: var(--j3m-glass-border-white);
+  
+  /* Interactive - SAME as solid system (primary-250 orange) */
+  --color-interactive-bg: var(--j3m-primary-250);
+  --color-interactive-text: var(--j3m-neutral-100);
+  --color-hover-overlay-dark: var(--j3m-stroke-neutral-1000-10);
+  --color-hover-overlay-light: var(--j3m-stroke-light-20);
+  --color-focus-ring: var(--j3m-stroke-primary-250-20);
+  
+  /* Inputs & Select - 70% white fill for glass context (much brighter) */
+  --color-input-bg: var(--j3m-glass-light-70);
+  --color-input-border: var(--j3m-glass-border-light);
+
+  /* Checkbox & Radio - same 50% white fill in glass context */
+  --color-checkbox-bg: var(--j3m-glass-light-50);
+  --color-radio-bg: var(--j3m-glass-light-50);
+
+  /* Progress - white track in glass context */
+  --color-progress-track: rgba(255, 255, 255, 0.5);
+
+  /* Modal/Overlay - glass effect with backdrop blur (bright enough but transparent) */
+  --color-popover-bg: var(--j3m-glass-light-60);
+  --color-hovercard-bg: var(--j3m-glass-light-60);
+  --color-sheet-bg: var(--j3m-glass-light-60);
+  --color-drawer-bg: var(--j3m-glass-light-60);
+  --color-dropdown-bg: var(--j3m-glass-light-60);
+  --color-contextmenu-bg: var(--j3m-glass-light-60);
+}
+

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@j3m-quantum/ui",
+  "version": "0.1.0",
+  "description": "J3M UI Component Library - themed shadcn/ui components with design tokens",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && npm run copy-styles",
+    "copy-styles": "cp -r src/styles dist/",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "j3m",
+    "ui",
+    "components",
+    "react",
+    "shadcn",
+    "design-system",
+    "tailwindcss",
+    "radix-ui"
+  ],
+  "author": "J3M",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.3.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-hover-card": "^1.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.3.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.3.0",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.2.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^4.0.0",
+    "embla-carousel-react": "^8.0.0",
+    "input-otp": "^1.0.0",
+    "lucide-react": ">=0.400.0",
+    "react-day-picker": "^9.0.0",
+    "react-hook-form": "^7.0.0",
+    "react-resizable-panels": "^3.0.0",
+    "recharts": "^2.0.0",
+    "sonner": "^2.0.0",
+    "vaul": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "cmdk": { "optional": true },
+    "date-fns": { "optional": true },
+    "embla-carousel-react": { "optional": true },
+    "input-otp": { "optional": true },
+    "react-day-picker": { "optional": true },
+    "react-hook-form": { "optional": true },
+    "react-resizable-panels": { "optional": true },
+    "recharts": { "optional": true },
+    "sonner": { "optional": true },
+    "vaul": { "optional": true }
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.4",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
+  }
+}