@nqlib/nqui 0.1.4 → 0.1.5

package/dist/pages/Dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/pages/Dashboard.tsx"],"names":[],"mappings":"AA4PA,MAAM,CAAC,OAAO,UAAU,SAAS,4CAk0DhC"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/pages/Dashboard.tsx"],"names":[],"mappings":"AA6PA,MAAM,CAAC,OAAO,UAAU,SAAS,4CAm7DhC"}

package/dist/styles.css

@@ -314,31 +314,104 @@
       color-mix(in oklch, var(--primary) 50%, transparent) 100%
     );
   }
-}
 
-/* nqui Design System CSS
- *
- * This file contains ALL design tokens, CSS variables, and color scales from nqui.
- * It includes everything the library needs to style components correctly.
- *
- * IMPORTANT: This file does NOT include Tailwind CSS imports.
- * You must have Tailwind CSS configured in your project.
- *
- * For Tailwind CSS v4, add this at the TOP of your CSS file:
- *    *
- * For Tailwind CSS v3, configure it in your tailwind.config.js
- *
- * This file includes:
- * - All CSS variables (--primary, --background, --foreground, etc.)
- * - Complete color scales (100-600) for all semantic colors
- * - Light and dark mode support
- * - Base layer styles
- * - Utility animations
- *
- * Generated by: npx nqui init-css
- * Do not edit manually - regenerate if nqui is updated
- */
+  /* Toast Animations */
+  @keyframes toast-checkmark {
+    0% {
+      transform: scale(0);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.2);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes toast-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+  }
+
+  @keyframes toast-shake {
+    0%, 100% {
+      transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+      transform: translateX(-2px);
+    }
+    20%, 40%, 60%, 80% {
+      transform: translateX(2px);
+    }
+  }
+
+  /* Toast Icon Animations */
+  .toast-icon-success {
+    animation: toast-checkmark 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    filter: drop-shadow(0 0 4px color-mix(in oklch, var(--success) 60%, transparent));
+  }
+
+  .toast-icon-loading {
+    animation: spin 1s linear infinite;
+    filter: drop-shadow(0 0 4px color-mix(in oklch, var(--primary) 60%, transparent));
+  }
+
+  .toast-icon-warning {
+    animation: toast-pulse 2s ease-in-out infinite;
+    filter: drop-shadow(0 0 4px color-mix(in oklch, var(--warning) 60%, transparent));
+  }
+
+  .toast-icon-error {
+    animation: toast-shake 0.5s ease-in-out;
+    filter: drop-shadow(0 0 4px color-mix(in oklch, var(--destructive) 60%, transparent));
+  }
+
+  .toast-icon-info {
+    filter: drop-shadow(0 0 4px color-mix(in oklch, var(--info) 60%, transparent));
+  }
+
+  /* Toast Base Styles */
+  .cn-toast {
+    @apply border shadow-lg;
+    background-color: var(--normal-bg);
+    color: var(--normal-text);
+    border-color: var(--normal-border);
+    border-radius: var(--border-radius);
+    position: relative;
+  }
+
+  .cn-toast > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Toast Icon Colors Only - All variants use same base styling */
+  .toast-success .toast-icon-success {
+    color: var(--success);
+  }
+
+  .toast-error .toast-icon-error {
+    color: var(--destructive);
+  }
+
+  .toast-warning .toast-icon-warning {
+    color: var(--warning);
+  }
 
+  .toast-info .toast-icon-info {
+    color: var(--info);
+  }
+
+  .toast-loading .toast-icon-loading {
+    color: var(--primary);
+  }
+}
 
 /* ============================================
    nqui Color System & Design Tokens
@@ -702,290 +775,3 @@
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
 }
-
-@theme inline {
-    --font-sans: 'Inter Variable', sans-serif;
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-    --color-success: var(--success);
-    --color-success-foreground: var(--success-foreground);
-    --color-warning: var(--warning);
-    --color-warning-foreground: var(--warning-foreground);
-    --color-info: var(--info);
-    --color-info-foreground: var(--info-foreground);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --color-foreground: var(--foreground);
-    --color-background: var(--background);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-    --radius-2xl: calc(var(--radius) + 8px);
-    --radius-3xl: calc(var(--radius) + 12px);
-    --radius-4xl: calc(var(--radius) + 16px);
-
-    /* Button enhanced styling */
-    --button-gradient: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
-    --button-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 1px 1px 0 rgba(0,0,0,0.075);
-}
-
-
-@layer utilities {
-  @keyframes radio-pulse {
-    0% {
-      box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 40%, transparent);
-    }
-    70% {
-      box-shadow: 0 0 0 8px color-mix(in oklch, var(--primary) 0%, transparent);
-    }
-    100% {
-      box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 0%, transparent);
-    }
-  }
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-
-  /* Separator Decorative Variants */
-  /* Base transparent gradient line for decorative variants */
-  .separator-transparent::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 5%;
-    right: 5%;
-    width: 90%;
-    height: 1px;
-    background-image: linear-gradient(to right, transparent, var(--border), transparent);
-  }
-
-  /* Arrow/Diamond Down - decorative arrow shape in center */
-  .separator-arrow-down::after {
-    content: "";
-    position: absolute;
-    z-index: 1;
-    top: -7px;
-    left: calc(50% - 7px);
-    width: 14px;
-    height: 14px;
-    transform: rotate(45deg);
-    background-color: var(--background);
-    border-bottom: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-  }
-
-  /* Tab Down - rounded tab shape in center */
-  .separator-tab-down::after {
-    content: "";
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: calc(50% - 10px);
-    width: 20px;
-    height: 14px;
-    background-color: var(--background);
-    border-bottom: 1px solid var(--border);
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-    border-radius: 0 0 var(--radius) var(--radius);
-  }
-
-  /* Stopper - rectangular stopper in center */
-  .separator-stopper::after {
-    content: "";
-    position: absolute;
-    z-index: 1;
-    top: -6px;
-    left: calc(50% - 7px);
-    width: 14px;
-    height: 12px;
-    background-color: var(--background);
-    border-left: 1px solid var(--border);
-    border-right: 1px solid var(--border);
-  }
-
-  /* Dot - circular dot in center with shadow */
-  .separator-dot::after {
-    content: "";
-    position: absolute;
-    z-index: 1;
-    top: -9px;
-    left: calc(50% - 9px);
-    width: 18px;
-    height: 18px;
-    background-color: var(--primary);
-    border: 1px solid var(--border);
-    border-radius: 50%;
-    box-shadow: inset 0 0 0 2px var(--background), 0 0 0 4px var(--background);
-  }
-
-  /* Text Decoration - text/character decoration in center */
-  .separator-text-decoration {
-    border-top: 1px solid var(--border);
-    background-color: transparent;
-  }
-
-  .separator-text-decoration::before {
-    content: var(--separator-text-content, "j");
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -65%);
-    background-color: var(--background);
-    color: var(--foreground);
-    display: inline-block;
-    font-size: 1rem;
-    line-height: 1rem;
-    padding: 0 0.5rem;
-    text-rendering: geometricPrecision;
-  }
-
-  /* Shiny Corner - lighting effect on 2 edges (left/right for horizontal, top/bottom for vertical) */
-  .separator-shiny-corner {
-    background: linear-gradient(
-      90deg,
-      color-mix(in oklch, var(--foreground) 60%, transparent) 0%,
-      transparent 8%,
-      var(--border) 20%,
-      var(--border) 80%,
-      transparent 92%,
-      color-mix(in oklch, var(--foreground) 60%, transparent) 100%
-    );
-    position: relative;
-  }
-
-  .separator-shiny-corner::before {
-    content: "";
-    position: absolute;
-    inset: -1px;
-    background: linear-gradient(
-      90deg,
-      color-mix(in oklch, var(--foreground) 80%, transparent) 0%,
-      transparent 5%,
-      transparent 95%,
-      color-mix(in oklch, var(--foreground) 80%, transparent) 100%
-    );
-    filter: blur(1px);
-    opacity: 0.7;
-    z-index: -1;
-  }
-
-  /* Vertical orientation support for shiny corner */
-  [aria-orientation="vertical"].separator-shiny-corner {
-    background: linear-gradient(
-      180deg,
-      color-mix(in oklch, var(--foreground) 60%, transparent) 0%,
-      transparent 8%,
-      var(--border) 20%,
-      var(--border) 80%,
-      transparent 92%,
-      color-mix(in oklch, var(--foreground) 60%, transparent) 100%
-    );
-  }
-
-  [aria-orientation="vertical"].separator-shiny-corner::before {
-    background: linear-gradient(
-      180deg,
-      color-mix(in oklch, var(--foreground) 80%, transparent) 0%,
-      transparent 5%,
-      transparent 95%,
-      color-mix(in oklch, var(--foreground) 80%, transparent) 100%
-    );
-  }
-
-  /* Shiny Edge - softer gradient highlight on edges */
-  .separator-shiny-edge {
-    background: linear-gradient(
-      90deg,
-      color-mix(in oklch, var(--foreground) 40%, transparent) 0%,
-      transparent 10%,
-      var(--border) 30%,
-      var(--border) 70%,
-      transparent 90%,
-      color-mix(in oklch, var(--foreground) 40%, transparent) 100%
-    );
-    position: relative;
-  }
-
-  .separator-shiny-edge::before {
-    content: "";
-    position: absolute;
-    inset: -0.5px;
-    background: linear-gradient(
-      90deg,
-      color-mix(in oklch, var(--primary) 50%, transparent) 0%,
-      transparent 8%,
-      transparent 92%,
-      color-mix(in oklch, var(--primary) 50%, transparent) 100%
-    );
-    filter: blur(0.5px);
-    opacity: 0.5;
-    z-index: -1;
-  }
-
-  /* Vertical orientation support for shiny edge */
-  [aria-orientation="vertical"].separator-shiny-edge {
-    background: linear-gradient(
-      180deg,
-      color-mix(in oklch, var(--foreground) 40%, transparent) 0%,
-      transparent 10%,
-      var(--border) 30%,
-      var(--border) 70%,
-      transparent 90%,
-      color-mix(in oklch, var(--foreground) 40%, transparent) 100%
-    );
-  }
-
-  [aria-orientation="vertical"].separator-shiny-edge::before {
-    background: linear-gradient(
-      180deg,
-      color-mix(in oklch, var(--primary) 50%, transparent) 0%,
-      transparent 8%,
-      transparent 92%,
-      color-mix(in oklch, var(--primary) 50%, transparent) 100%
-    );
-  }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nqlib/nqui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A React component library with enhanced UI components and developer tools",
   "type": "module",
   "main": "./dist/nqui.cjs.js",
@@ -80,6 +80,7 @@
     "@hugeicons/react": "^1.1.4",
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

package/scripts/publish-npmjs.js

@@ -54,6 +54,25 @@ if (existsSync(npmrcPath)) {
 }
 
 try {
+  // Check if user is logged in to npm
+  console.log('🔐 Checking npm authentication...');
+  try {
+    const whoami = execSync('npm whoami --registry=https://registry.npmjs.com', {
+      encoding: 'utf-8',
+      cwd: rootDir,
+      env: {
+        ...process.env,
+        npm_config_registry: 'https://registry.npmjs.com'
+      }
+    }).trim();
+    console.log(`✅ Logged in as: ${whoami}`);
+  } catch (authError) {
+    console.error('❌ Not logged in to npmjs.com');
+    console.error('💡 Please run: npm login --registry=https://registry.npmjs.com');
+    console.error('💡 Or create an access token at: https://www.npmjs.com/settings/YOUR_USERNAME/tokens');
+    throw new Error('Authentication required. Please login to npmjs.com first.');
+  }
+
   console.log('📦 Publishing to npmjs.com...');
   execSync('npm publish --registry=https://registry.npmjs.com --access=public', {
     stdio: 'inherit',
@@ -67,6 +86,17 @@ try {
   console.log('✅ Published to npmjs.com successfully!');
 } catch (error) {
   console.error('❌ Failed to publish to npmjs.com');
+  if (error.message && error.message.includes('Authentication required')) {
+    throw error;
+  }
+  if (error.status === 404 || (error.output && error.output.toString().includes('404'))) {
+    console.error('💡 Package not found. This might be the first publish.');
+    console.error('💡 Make sure the @nqlib scope exists on npmjs.com');
+    console.error('💡 For scoped packages, you need to own the scope or be added to it');
+  }
+  if (error.status === 401 || (error.output && error.output.toString().includes('401'))) {
+    console.error('💡 Authentication failed. Please login: npm login --registry=https://registry.npmjs.com');
+  }
   throw error;
 } finally {
   // Restore original publishConfig