@mrintel/villain-ui 0.2.2 → 0.3.0

package/dist/lib/internal/id.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Generate a unique ID with an optional prefix.
+ * Uses nanoid for smaller size and better security than Math.random() or crypto.randomUUID().
+ *
+ * @param prefix - Optional prefix for the ID (e.g., 'input', 'modal', 'tooltip')
+ * @returns A unique ID string with the format `prefix-{nanoid}`
+ *
+ * @example
+ * createId('input') // Returns 'input-V1StGXR8_Z5jdHi6B'
+ * createId('modal') // Returns 'modal-n5yjdHi6BV1StGXR8'
+ */
+export declare function createId(prefix: string): string;

package/dist/lib/internal/id.js

@@ -0,0 +1,15 @@
+import { nanoid } from 'nanoid';
+/**
+ * Generate a unique ID with an optional prefix.
+ * Uses nanoid for smaller size and better security than Math.random() or crypto.randomUUID().
+ *
+ * @param prefix - Optional prefix for the ID (e.g., 'input', 'modal', 'tooltip')
+ * @returns A unique ID string with the format `prefix-{nanoid}`
+ *
+ * @example
+ * createId('input') // Returns 'input-V1StGXR8_Z5jdHi6B'
+ * createId('modal') // Returns 'modal-n5yjdHi6BV1StGXR8'
+ */
+export function createId(prefix) {
+    return `${prefix}-${nanoid(9)}`;
+}

package/dist/theme.css

@@ -0,0 +1,218 @@
+@import 'tailwindcss';
+
+@theme {
+  /* ===== Core Brand Base ===== */
+  --color-base-0: #050505;
+  --color-base-1: #0A0A0A;
+  --color-base-2: #111111;
+  --color-base-3: #161616;
+
+  /* ===== Primary Accent ===== */
+  --color-accent: #7F3DFF;
+  --color-accent-soft: #A974FF;
+  --color-accent-dark: #4C1AA8;
+
+  /* ===== Text Colors ===== */
+  --color-text: #EDEDED;
+  --color-text-soft: #ADADAD;
+  --color-text-muted: #7A7A7A;
+
+  /* ===== State Colors ===== */
+  --color-success: #00E897;
+  --color-warning: #FFC861;
+  --color-error: #FF4A6A;
+
+  /* ===== Surface Colors ===== */
+  --color-surface: var(--color-base-1);
+  --color-panel: var(--color-base-2);
+  --color-overlay: rgba(0, 0, 0, 0.65);
+
+  /* ===== Border Colors ===== */
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-strong: rgba(255, 255, 255, 0.16);
+
+  /* ===== Glow/Lighting Shadows ===== */
+  --shadow-accent-glow: 
+    0 0 20px rgba(127, 61, 255, 0.4),
+    0 0 40px rgba(127, 61, 255, 0.2),
+    0 0 60px rgba(127, 61, 255, 0.1);
+  --shadow-deep: 0 10px 40px rgba(0, 0, 0, 0.5);
+  --shadow-text-glow: 
+    0 0 20px rgba(127, 61, 255, 0.5),
+    0 0 40px rgba(127, 61, 255, 0.3);
+
+  /* ===== Glass/Panel Effects ===== */
+  --glass-panel-background: rgba(17, 17, 17, 0.7);
+
+  /* ===== Border Radii ===== */
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-pill: 999px;
+
+  /* ===== Typography ===== */
+  --font-heading: 'Poppins', sans-serif;
+  --font-body: 'Inter', sans-serif;
+  --font-mono: 'IBM Plex Mono', monospace;
+
+  /* Typography Scale */
+  --text-h1-size: 3.5rem;
+  --text-h1-line-height: 1.2;
+  --text-h1-weight: 700;
+  
+  --text-h2-size: 2.5rem;
+  --text-h2-line-height: 1.25;
+  --text-h2-weight: 600;
+  
+  --text-h3-size: 2rem;
+  --text-h3-line-height: 1.3;
+  --text-h3-weight: 600;
+  
+  --text-h4-size: 1.5rem;
+  --text-h4-line-height: 1.35;
+  --text-h4-weight: 600;
+  
+  --text-h5-size: 1.25rem;
+  --text-h5-line-height: 1.4;
+  --text-h5-weight: 500;
+  
+  --text-h6-size: 1rem;
+  --text-h6-line-height: 1.5;
+  --text-h6-weight: 500;
+  
+  --text-body-size: 1rem;
+  --text-body-line-height: 1.6;
+  --text-body-weight: 400;
+  
+  --text-caption-size: 0.875rem;
+  --text-caption-line-height: 1.5;
+  --text-caption-weight: 400;
+
+  /* ===== Motion Curves ===== */
+  --ease-luxe: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-sharp: cubic-bezier(0.4, 0.1, 0.2, 1);
+
+  /* ===== Utility Spacing ===== */
+  --spacing-4\.5: 1.125rem;
+  --spacing-18: 4.5rem;
+
+  /* ===== Keyframe Animations ===== */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes glow-pulse {
+    0%, 100% {
+      box-shadow: 
+        0 0 20px rgba(127, 61, 255, 0.4),
+        0 0 40px rgba(127, 61, 255, 0.2),
+        0 0 60px rgba(127, 61, 255, 0.1);
+    }
+    50% {
+      box-shadow: 
+        0 0 30px rgba(127, 61, 255, 0.6),
+        0 0 60px rgba(127, 61, 255, 0.3),
+        0 0 90px rgba(127, 61, 255, 0.15);
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slide-in-top {
+    from {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-bottom {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+/* ===== Custom Utility Classes ===== */
+
+.text-glow {
+  text-shadow: var(--shadow-text-glow);
+}
+
+.glass-panel {
+  backdrop-filter: blur(14px);
+  background: var(--glass-panel-background);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-deep);
+}
+
+.accent-glow {
+  box-shadow: var(--shadow-accent-glow);
+}
+
+.hover-lift {
+  transition: all 0.3s var(--ease-luxe);
+}
+
+.hover-lift:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 
+    var(--shadow-accent-glow),
+    var(--shadow-deep);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrintel/villain-ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
   "private": false,
   "description": "A luxury Svelte 5 component library with a distinctive dark aesthetic, built with TypeScript and Tailwind CSS v4",
@@ -30,7 +30,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./src/index.js",
+      "svelte": "./dist/index.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
@@ -49,8 +49,9 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "svelte-package -i src -o dist",
     "type-check": "tsc --noEmit",
+    "clean": "rimraf dist",
     "check": "npm run type-check",
     "prepack": "npm run build",
     "prepublishOnly": "npm run build"
@@ -59,6 +60,7 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/node": "^24.10.1",
@@ -66,8 +68,7 @@
     "svelte": "^5.45.2",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "^7.2.4"
   },
   "dependencies": {
     "nanoid": "^5.1.6"

package/dist/index.css

@@ -1 +0,0 @@
-input[type=checkbox].svelte-1ip9uuj:checked:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 5L4 7L8 3' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}input[type=checkbox].svelte-zizzig:after{content:"";position:absolute;left:.25rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;border-radius:var(--radius-pill);background:var(--color-text);transition:all .3s var(--ease-luxe)}input[type=checkbox].svelte-zizzig:checked:after{transform:translate(1.25rem,-50%)}input[type=radio].svelte-1vvu266:checked:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:.625rem;height:.625rem;border-radius:var(--radius-pill);background:var(--color-accent);box-shadow:var(--shadow-accent-glow)}input[type=range].svelte-1jab628::-webkit-slider-thumb{appearance:none;width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);background:var(--color-accent);box-shadow:var(--shadow-accent-glow);cursor:pointer;transition:transform .2s var(--ease-luxe)}input[type=range].svelte-1jab628::-webkit-slider-thumb:hover{transform:scale(1.1)}input[type=range].svelte-1jab628::-moz-range-thumb{appearance:none;width:1.25rem;height:1.25rem;border-radius:var(--radius-pill);background:var(--color-accent);box-shadow:var(--shadow-accent-glow);cursor:pointer;transition:transform .2s var(--ease-luxe);border:none}input[type=range].svelte-1jab628::-moz-range-thumb:hover{transform:scale(1.1)}input[type=range].svelte-1jab628:focus::-webkit-slider-thumb{box-shadow:var(--shadow-accent-glow),0 0 0 3px var(--color-base-1),0 0 0 5px var(--color-accent)}input[type=range].svelte-1jab628:focus::-moz-range-thumb{box-shadow:var(--shadow-accent-glow),0 0 0 3px var(--color-base-1),0 0 0 5px var(--color-accent)}input[type=range].svelte-1jab628:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range].svelte-1jab628:disabled::-moz-range-thumb{cursor:not-allowed}.sr-only.svelte-1tlg6ol{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skeleton-shimmer.svelte-z940em{position:relative;overflow:hidden}.skeleton-shimmer.svelte-z940em:before{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background:linear-gradient(90deg,transparent,rgba(127,61,255,.1),transparent);animation:svelte-z940em-shimmer 1.5s ease-in-out infinite}@keyframes svelte-z940em-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}div.svelte-1blwye3::-webkit-scrollbar{width:8px}div.svelte-1blwye3::-webkit-scrollbar-track{background:var(--color-base-3);border-radius:var(--radius-sm)}div.svelte-1blwye3::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:var(--radius-sm)}div.svelte-1blwye3::-webkit-scrollbar-thumb:hover{background:var(--color-accent-soft)}div[role=listbox].svelte-1whui3e::-webkit-scrollbar{width:8px}div[role=listbox].svelte-1whui3e::-webkit-scrollbar-track{background:var(--color-base-3);border-radius:var(--radius-sm)}div[role=listbox].svelte-1whui3e::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:var(--radius-sm)}div[role=listbox].svelte-1whui3e::-webkit-scrollbar-thumb:hover{background:var(--color-accent-soft)}.mrdv-table.svelte-168is8x thead{background:var(--color-base-2);border-bottom:2px solid var(--color-border-strong)}.mrdv-table.svelte-168is8x thead th{color:var(--color-text);font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-align:left}.mrdv-table.compact.svelte-168is8x th,.mrdv-table.compact.svelte-168is8x td{padding:.5rem 1rem}.mrdv-table.svelte-168is8x:not(.compact) th,.mrdv-table.svelte-168is8x:not(.compact) td{padding:1rem 1.5rem}.mrdv-table.svelte-168is8x tbody{position:relative;z-index:1}.mrdv-table.svelte-168is8x tbody tr{border-bottom:1px solid var(--color-border);transition:all var(--ease-luxe)}.mrdv-table.hoverable.svelte-168is8x tbody tr:hover{background:#7f3dff0d;transform:translateY(-1px);box-shadow:0 2px 8px #0003,var(--shadow-accent-glow)}.mrdv-table.striped.svelte-168is8x tbody tr:nth-child(2n){background:#ffffff05}.mrdv-table.striped.hoverable.svelte-168is8x tbody tr:nth-child(2n):hover{background:#7f3dff0d;transform:translateY(-1px);box-shadow:0 2px 8px #0003,var(--shadow-accent-glow)}.mrdv-table.svelte-168is8x th,.mrdv-table.svelte-168is8x td{text-align:left}button.active.svelte-1800ptl{background:var(--color-accent);color:var(--color-text);cursor:default}button.active.svelte-1800ptl{box-shadow:0 0 20px #7f3dff80}button.inactive.svelte-1800ptl{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}button.inactive.svelte-1800ptl:hover{background:#7f3dff1a;border-color:var(--color-accent)}ul.svelte-18do019{margin:0;padding:0;color:var(--color-text);font-family:var(--font-body)}ul.plain>li{padding:.5rem 0}ul.bordered>li{padding:.75rem 1rem}ul.divided>li{padding:.75rem 1rem;border-bottom:1px solid var(--color-border)}ul.divided>li:last-child{border-bottom:none}ul.hoverable>li{transition:all var(--ease-luxe);cursor:pointer}ul.hoverable>li:hover{background:#7f3dff0d}div.svelte-x44t5r::-webkit-scrollbar{height:8px}div.svelte-x44t5r::-webkit-scrollbar-track{background:var(--color-base-1)}div.svelte-x44t5r::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:var(--radius-sm)}div.svelte-x44t5r::-webkit-scrollbar-thumb:hover{background:var(--color-accent-soft)}.highlighted.svelte-x44t5r{background:#7f3dff1a}.line.highlighted{background:#7f3dff1a;display:inline-block;width:100%}