@tolle_/tolle-ui 0.0.3-beta → 0.0.4-beta

package/package.json

@@ -1,32 +1,38 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "0.0.3-beta",
+  "version": "0.0.4-beta",
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    "./theme.css": {
+      "default": "./theme.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/tolle_-tolle-ui.mjs",
+      "esm": "./esm2022/tolle_-tolle-ui.mjs",
+      "default": "./fesm2022/tolle_-tolle-ui.mjs"
+    }
+  },
   "description": "A high-performance Angular UI library.",
   "author": "Bernard Kojo Ossei-Agyei <bernard.ossei@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^18.2.0",
     "@angular/core": "^18.2.0",
-    "@floating-ui/dom": "^1.7.4"
+    "@floating-ui/dom": "^1.7.4",
+    "class-variance-authority": "^0.7.1",
+    "tailwind-merge": "^3.4.0",
+    "clsx": "^2.1.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
   "module": "fesm2022/tolle_-tolle-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/tolle_-tolle-ui.mjs",
-      "esm": "./esm2022/tolle_-tolle-ui.mjs",
-      "default": "./fesm2022/tolle_-tolle-ui.mjs"
-    }
-  }
+  "typings": "index.d.ts"
 }

package/theme.css

@@ -1,120 +1,91 @@
-/* Import CDK overlay styles */
+/* -------------------------------------------------------------------------- */
+/* 1. TAILWIND & CDK CORE IMPORTS                                             */
+/* -------------------------------------------------------------------------- */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* -------------------------------------------------------------------------- */
+/* 2. THEME VARIABLES (The Engine)                                            */
+/* -------------------------------------------------------------------------- */
 :root {
-  /* --- 1. CONFIGURATION (The only things you change) --- */
-  /* Blue-600 as default primary */
+  /* --- Configuration (Source of Truth) --- */
   --primary: #2563eb;
   --radius: 0.5rem;
 
-  /* --- 2. AUTO-GENERATION (Do not touch unless tweaking logic) --- */
-
-  /* Foreground: White text on primary */
+  /* --- Auto-Generated Colors (Dependent on --primary) --- */
   --primary-foreground: #ffffff;
-  /* Secondary: Mix Primary with 85% White */
   --secondary: color-mix(in srgb, var(--primary), #ffffff 85%);
   --secondary-foreground: color-mix(in srgb, var(--primary), #000000 80%);
 
-  /* Muted: Mix Primary with 92% Light Gray */
   --muted: color-mix(in srgb, var(--primary), #f3f4f6 92%);
-  --muted-foreground: color-mix(in srgb, var(--primary), #4b5563 40%);
-  --muted-foreground: #71717a;
-  /* Accent: Very light wash of primary (for hovers) */
+  --muted-foreground: color-mix(in srgb, var(--primary), #4b5563 40%); /* Fixed double definition */
+
   --accent: color-mix(in srgb, var(--primary), transparent 90%);
   --accent-foreground: var(--primary);
 
-  /* Borders */
-  --border: #dddddd;
-  --input: #e4e4e7;
+  --ring: color-mix(in srgb, var(--primary), transparent 75%);
 
-  /* Base */
+  /* --- Neutral/Layout Base --- */
   --background: #ffffff;
   --foreground: #020817;
-  --ring: color-mix(in srgb, var(--primary), transparent 75%);
+  --border: #dddddd;
+  --input: #e4e4e7;
   --destructive: #ef4444;
   --destructive-foreground: #f8fafc;
   --input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
+/* --- Dark Mode (Google/Charcoal Palette) --- */
 .dark {
-  /* --- Google Dark Mode Palette --- */
-  --background: #121212; /* Base Background */
-  --foreground: #e3e3e3; /* Soft white/gray text */
-
-  /* Secondary: Elevated surface (Google's "Surface" color) */
+  --background: #121212;
+  --foreground: #e3e3e3;
   --secondary: #1f1f1f;
   --secondary-foreground: #ffffff;
-
-  /* Muted: Used for tags or inactive backgrounds */
   --muted: #2a2a2a;
-  --muted-foreground: #9aa0a6; /* Google's muted gray text */
-
-  /* Borders: Very subtle against the charcoal background */
+  --muted-foreground: #9aa0a6;
   --border: #3c4043;
   --input: #3c4043;
-
-  /* Popover/Dropdown: Matches elevated surfaces */
   --popover: #1f1f1f;
   --popover-foreground: #e3e3e3;
-
-  /* Accent: Hover states */
   --accent: rgba(255, 255, 255, 0.04);
   --accent-foreground: var(--primary);
-
-  /* Primary Ring: Lower opacity for charcoal backgrounds */
   --ring: color-mix(in srgb, var(--primary), transparent 40%);
   --input-shadow: 0 0 #0000;
 }
 
-.dark tolle-card {
-  background-color: var(--secondary); /* #1f1f1f */
-  border-color: var(--border);
-}
-
-.dark tolle-input, .dark tolle-select button {
-  background-color: transparent; /* Google inputs often have a transparent or very dark base */
-}
-
-tolle-button svg {
-  @apply w-4 h-4; /* Default Lucide/Radix icon size */
-}
-
-.h-8 svg {
-  @apply w-3.5 h-3.5;
-}
-
+/* -------------------------------------------------------------------------- */
+/* 3. BASE LAYER (Icons & Typography)                                         */
+/* -------------------------------------------------------------------------- */
 @layer base {
-  /* This ensures Remix Icons are centered and sized relative to text */
+  /* Remix Icons Standardization */
   i[class^="ri-"], i[class*=" ri-"] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
     line-height: 1;
-    /* Standardized icon size for buttons/inputs */
     font-size: 1.2rem;
   }
 
-  /* Handle spacing when an icon is next to text */
+  /* Scale icons for XS/SM containers */
+  .size-xs i[class^="ri-"], .size-xs i[class*=" ri-"],
+  .size-sm i[class^="ri-"], .size-sm i[class*=" ri-"] {
+    font-size: 1rem;
+  }
+
   .tolle-button-content {
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
-
-  /* Scale icons down for XS and SM containers */
-  .size-xs i[class^="ri-"],
-  .size-xs i[class*=" ri-"],
-  .size-sm i[class^="ri-"],
-  .size-sm i[class*=" ri-"] {
-    font-size: 1rem;
-  }
 }
 
+/* -------------------------------------------------------------------------- */
+/* 4. COMPONENT OVERRIDES                                                     */
+/* -------------------------------------------------------------------------- */
 @layer components {
-  /* Target the internal input and button elements */
+  /* Interactive Element Transitions */
   tolle-input input,
   tolle-select button,
   tolle-masked-input input,
@@ -123,41 +94,35 @@ tolle-button svg {
     transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  /* Remove shadow on focus to let the 'ring' effect take over cleanly */
   tolle-input input:focus,
   tolle-select button:focus,
   tolle-masked-input input:focus {
     box-shadow: 0 0 #0000;
   }
-}
 
-/* Compact dropdown items when select is xs/sm */
-.size-xs tolle-select-item > div { padding: 4px 8px 4px 32px; font-size: 12px; }
-.size-sm tolle-select-item > div { padding: 6px 12px 6px 32px; }
+  /* Dark Mode specific component adjustments */
+  .dark tolle-card {
+    background-color: var(--secondary);
+    border-color: var(--border);
+  }
 
+  .dark tolle-input,
+  .dark tolle-select button {
+    background-color: transparent;
+  }
 
+  /* Icon sizing inside buttons */
+  tolle-button svg { @apply w-4 h-4; }
+  .h-8 svg { @apply w-3.5 h-3.5; }
 
-/* Ensure the backdrop covers the screen */
-.cdk-overlay-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: auto;
-  -webkit-tap-highlight-color: transparent;
-  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  /* Compact Select Items */
+  .size-xs tolle-select-item > div { padding: 4px 8px 4px 32px; font-size: 12px; }
+  .size-sm tolle-select-item > div { padding: 6px 12px 6px 32px; }
 }
 
-/* Our custom backdrop style from earlier */
-.tolle-modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
-  z-index: 50;
-}
-
-
-/* --- Core Overlay Container --- */
+/* -------------------------------------------------------------------------- */
+/* 5. CDK OVERLAY & MODAL SYSTEM (Structural)                                 */
+/* -------------------------------------------------------------------------- */
 .cdk-overlay-container {
   position: fixed;
   z-index: 1000;
@@ -168,26 +133,33 @@ tolle-button svg {
   pointer-events: none;
 }
 
-/* --- The Individual Overlay Pane (The Modal Window) --- */
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1001;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
 .cdk-overlay-pane {
   position: absolute;
   pointer-events: auto;
   box-sizing: border-box;
-  z-index: 1001; /* Must be HIGHER than the backdrop */
+  z-index: 1001;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-/* --- The Backdrop --- */
+/* Backdrop Styles */
 .cdk-overlay-backdrop {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000; /* Must be LOWER than the pane */
+  top: 0; bottom: 0; left: 0; right: 0;
+  z-index: 1000;
   pointer-events: auto;
   -webkit-tap-highlight-color: transparent;
   transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -198,14 +170,8 @@ tolle-button svg {
   opacity: 1;
 }
 
-/* Utility to ensure the flex centering works */
-.cdk-global-overlay-wrapper {
-  display: flex;
-  position: absolute;
-  z-index: 1001;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+.tolle-modal-backdrop {
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  z-index: 50;
 }