@liteforge/modal 1.0.0 → 1.1.0

package/css/styles.css

@@ -0,0 +1,119 @@
+/* ─── CSS Variables (Customizable) ─────────────────────────── */
+/* Default values reference @liteforge/theme semantic tokens.    */
+/* Dark mode cascades automatically through the theme selectors. */
+
+:root {
+  --lf-modal-backdrop:     var(--lf-color-bg-overlay, rgba(0, 0, 0, 0.5));
+  --lf-modal-bg:           var(--lf-color-surface, #ffffff);
+  --lf-modal-border-radius: 10px;
+  --lf-modal-shadow:       var(--lf-shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.3));
+  --lf-modal-header-bg:    var(--lf-color-bg-subtle, #f8fafc);
+  --lf-modal-header-color: var(--lf-color-text, #1e293b);
+  --lf-modal-body-color:   var(--lf-color-text, #374151);
+  --lf-modal-close-color:  var(--lf-color-text-muted, #6b7280);
+  --lf-modal-z-index:      var(--lf-z-modal, 1000);
+}
+
+/* ─── Provider ─────────────────────────────────────────────── */
+
+.lf-modal-provider {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: var(--lf-modal-z-index);
+}
+
+/* ─── Overlay ──────────────────────────────────────────────── */
+
+.lf-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--lf-modal-backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: all;
+  opacity: 0;
+  transition: opacity var(--lf-transition-base, 0.2s ease);
+  padding: var(--lf-space-4, 16px);
+  box-sizing: border-box;
+}
+
+.lf-modal-overlay--open {
+  opacity: 1;
+}
+
+/* ─── Size Variants ────────────────────────────────────────── */
+
+.lf-modal-overlay--sm .lf-modal { max-width: 400px; }
+.lf-modal-overlay--md .lf-modal { max-width: 560px; }
+.lf-modal-overlay--lg .lf-modal { max-width: 720px; }
+.lf-modal-overlay--xl .lf-modal { max-width: 1000px; }
+.lf-modal-overlay--full .lf-modal { max-width: 100vw; margin: 0; border-radius: 0; }
+
+/* ─── Modal ────────────────────────────────────────────────── */
+
+.lf-modal {
+  background: var(--lf-modal-bg);
+  border-radius: var(--lf-modal-border-radius);
+  box-shadow: var(--lf-modal-shadow);
+  width: 100%;
+  max-height: calc(100vh - 32px);
+  display: flex;
+  flex-direction: column;
+  transform: translateY(-8px);
+  transition: transform var(--lf-transition-base, 0.2s ease);
+  overflow: hidden;
+  font-family: var(--lf-font-sans, system-ui, -apple-system, sans-serif);
+}
+
+.lf-modal-overlay--open .lf-modal {
+  transform: translateY(0);
+}
+
+/* ─── Header ───────────────────────────────────────────────── */
+
+.lf-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--lf-space-4, 16px) var(--lf-space-5, 20px);
+  background: var(--lf-modal-header-bg);
+  border-bottom: 1px solid var(--lf-color-border, rgba(0, 0, 0, 0.08));
+  flex-shrink: 0;
+}
+
+.lf-modal-title {
+  font-size: var(--lf-text-md, 16px);
+  font-weight: var(--lf-font-semibold, 600);
+  color: var(--lf-modal-header-color);
+  line-height: 1.4;
+}
+
+.lf-modal-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--lf-modal-close-color);
+  font-size: 18px;
+  padding: 4px 8px;
+  border-radius: var(--lf-radius-sm, 4px);
+  line-height: 1;
+  transition: background-color var(--lf-transition-fast, 0.15s), color var(--lf-transition-fast, 0.15s);
+  flex-shrink: 0;
+}
+
+.lf-modal-close:hover {
+  background: var(--lf-color-bg-muted, rgba(0, 0, 0, 0.06));
+  color: var(--lf-modal-header-color);
+}
+
+/* ─── Body ─────────────────────────────────────────────────── */
+
+.lf-modal-body {
+  padding: var(--lf-space-5, 20px);
+  color: var(--lf-modal-body-color);
+  font-size: var(--lf-text-base, 14px);
+  line-height: 1.6;
+  overflow-y: auto;
+}

package/dist/styles.d.ts

@@ -1,9 +1,3 @@
-/**
- * @liteforge/modal - Default CSS Theme
- *
- * Minimal, clean default styles using CSS variables.
- * Injected once when the first modal provider is created (unless unstyled: true).
- */
 import type { ModalStyles } from './types.js';
 /**
  * Maps ModalStyles keys to their CSS variable names.
@@ -11,13 +5,6 @@ import type { ModalStyles } from './types.js';
  * can override the global :root variables without affecting other modals.
  */
 export declare const STYLE_TOKEN_MAP: ReadonlyArray<readonly [keyof ModalStyles, string]>;
-/**
- * Inject default styles into the document head.
- * Called automatically when the first ModalProvider is created (unless unstyled: true).
- */
 export declare function injectDefaultStyles(): void;
-/**
- * Reset styles injection flag (for testing)
- */
 export declare function resetStylesInjection(): void;
 //# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,WAAW,EAAE,MAAM,CAAC,CAStE,CAAA;AAqJV;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAU1C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAM3C"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9C;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,WAAW,EAAE,MAAM,CAAC,CAStE,CAAA;AAIV,wBAAgB,mBAAmB,IAAI,IAAI,CAS1C;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAG3C"}

package/dist/styles.js

@@ -1,9 +1,4 @@
-/**
- * @liteforge/modal - Default CSS Theme
- *
- * Minimal, clean default styles using CSS variables.
- * Injected once when the first modal provider is created (unless unstyled: true).
- */
+import stylesUrl from '../css/styles.css?url';
 /**
  * Maps ModalStyles keys to their CSS variable names.
  * Applied as inline styles on the overlay element so each modal instance
@@ -20,173 +15,20 @@ export const STYLE_TOKEN_MAP = [
     ['borderRadius', '--lf-modal-border-radius'],
 ];
 let stylesInjected = false;
-const DEFAULT_STYLES = `
-/* ─── CSS Variables (Customizable) ─────────────────────────── */
-
-:root {
-  --lf-modal-backdrop: rgba(0, 0, 0, 0.5);
-  --lf-modal-bg: #ffffff;
-  --lf-modal-border-radius: 10px;
-  --lf-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  --lf-modal-header-bg: #f8fafc;
-  --lf-modal-header-color: #1e293b;
-  --lf-modal-body-color: #374151;
-  --lf-modal-close-color: #6b7280;
-  --lf-modal-z-index: 1000;
-}
-
-/* ─── Provider ─────────────────────────────────────────────── */
-
-.lf-modal-provider {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: var(--lf-modal-z-index);
-}
-
-/* ─── Overlay ──────────────────────────────────────────────── */
-
-.lf-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--lf-modal-backdrop);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: all;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  padding: 16px;
-  box-sizing: border-box;
-}
-
-.lf-modal-overlay--open {
-  opacity: 1;
-}
-
-/* ─── Size Variants ────────────────────────────────────────── */
-
-.lf-modal-overlay--sm .lf-modal { max-width: 400px; }
-.lf-modal-overlay--md .lf-modal { max-width: 560px; }
-.lf-modal-overlay--lg .lf-modal { max-width: 720px; }
-.lf-modal-overlay--xl .lf-modal { max-width: 1000px; }
-.lf-modal-overlay--full .lf-modal { max-width: 100vw; margin: 0; border-radius: 0; }
-
-/* ─── Modal ────────────────────────────────────────────────── */
-
-.lf-modal {
-  background: var(--lf-modal-bg);
-  border-radius: var(--lf-modal-border-radius);
-  box-shadow: var(--lf-modal-shadow);
-  width: 100%;
-  max-height: calc(100vh - 32px);
-  display: flex;
-  flex-direction: column;
-  transform: translateY(-8px);
-  transition: transform 0.2s ease;
-  overflow: hidden;
-  font-family: system-ui, -apple-system, sans-serif;
-}
-
-.lf-modal-overlay--open .lf-modal {
-  transform: translateY(0);
-}
-
-/* ─── Header ───────────────────────────────────────────────── */
-
-.lf-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  background: var(--lf-modal-header-bg);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  flex-shrink: 0;
-}
-
-.lf-modal-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--lf-modal-header-color);
-  line-height: 1.4;
-}
-
-.lf-modal-close {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--lf-modal-close-color);
-  font-size: 18px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  line-height: 1;
-  transition: background-color 0.15s, color 0.15s;
-  flex-shrink: 0;
-}
-
-.lf-modal-close:hover {
-  background: rgba(0, 0, 0, 0.06);
-  color: var(--lf-modal-header-color);
-}
-
-/* ─── Body ─────────────────────────────────────────────────── */
-
-.lf-modal-body {
-  padding: 20px;
-  color: var(--lf-modal-body-color);
-  font-size: 14px;
-  line-height: 1.6;
-  overflow-y: auto;
-}
-
-/* ─── Dark Mode Support ────────────────────────────────────── */
-
-.dark,
-[data-theme="dark"] {
-  --lf-modal-backdrop: rgba(0, 0, 0, 0.7);
-  --lf-modal-bg: #1e1e2e;
-  --lf-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
-  --lf-modal-header-bg: #181825;
-  --lf-modal-header-color: #cdd6f4;
-  --lf-modal-body-color: #a6adc8;
-  --lf-modal-close-color: #6c7086;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --lf-modal-backdrop: rgba(0, 0, 0, 0.7);
-    --lf-modal-bg: #1e1e2e;
-    --lf-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
-    --lf-modal-header-bg: #181825;
-    --lf-modal-header-color: #cdd6f4;
-    --lf-modal-body-color: #a6adc8;
-    --lf-modal-close-color: #6c7086;
-  }
-}
-`;
-/**
- * Inject default styles into the document head.
- * Called automatically when the first ModalProvider is created (unless unstyled: true).
- */
 export function injectDefaultStyles() {
     if (stylesInjected)
         return;
     if (typeof document === 'undefined')
         return; // SSR safety
-    const style = document.createElement('style');
-    style.id = 'lf-modal-styles';
-    style.textContent = DEFAULT_STYLES;
-    document.head.appendChild(style);
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = stylesUrl;
+    link.setAttribute('data-lf-modal', '');
+    document.head.appendChild(link);
     stylesInjected = true;
 }
-/**
- * Reset styles injection flag (for testing)
- */
 export function resetStylesInjection() {
     stylesInjected = false;
-    const existing = document.getElementById('lf-modal-styles');
-    if (existing) {
-        existing.remove();
-    }
+    document.querySelector('link[data-lf-modal]')?.remove();
 }
 //# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAwD;IAClF,CAAC,IAAI,EAAY,eAAe,CAAC;IACjC,CAAC,UAAU,EAAM,sBAAsB,CAAC;IACxC,CAAC,aAAa,EAAG,yBAAyB,CAAC;IAC3C,CAAC,WAAW,EAAK,uBAAuB,CAAC;IACzC,CAAC,YAAY,EAAI,wBAAwB,CAAC;IAC1C,CAAC,UAAU,EAAM,qBAAqB,CAAC;IACvC,CAAC,QAAQ,EAAQ,mBAAmB,CAAC;IACrC,CAAC,cAAc,EAAE,0BAA0B,CAAC;CACpC,CAAA;AAEV,IAAI,cAAc,GAAG,KAAK,CAAA;AAE1B,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ItB,CAAA;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB;IACjC,IAAI,cAAc;QAAE,OAAM;IAC1B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM,CAAC,aAAa;IAEzD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAC7C,KAAK,CAAC,EAAE,GAAG,iBAAiB,CAAA;IAC5B,KAAK,CAAC,WAAW,GAAG,cAAc,CAAA;IAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAEhC,cAAc,GAAG,IAAI,CAAA;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAClC,cAAc,GAAG,KAAK,CAAA;IACtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D,IAAI,QAAQ,EAAE,CAAC;QACb,QAAQ,CAAC,MAAM,EAAE,CAAA;IACnB,CAAC;AACH,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAwD;IAClF,CAAC,IAAI,EAAY,eAAe,CAAC;IACjC,CAAC,UAAU,EAAM,sBAAsB,CAAC;IACxC,CAAC,aAAa,EAAG,yBAAyB,CAAC;IAC3C,CAAC,WAAW,EAAK,uBAAuB,CAAC;IACzC,CAAC,YAAY,EAAI,wBAAwB,CAAC;IAC1C,CAAC,UAAU,EAAM,qBAAqB,CAAC;IACvC,CAAC,QAAQ,EAAQ,mBAAmB,CAAC;IACrC,CAAC,cAAc,EAAE,0BAA0B,CAAC;CACpC,CAAA;AAEV,IAAI,cAAc,GAAG,KAAK,CAAA;AAE1B,MAAM,UAAU,mBAAmB;IACjC,IAAI,cAAc;QAAE,OAAM;IAC1B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAM,CAAC,aAAa;IACzD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAC3C,IAAI,CAAC,GAAG,GAAG,YAAY,CAAA;IACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAA;IACrB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;IACtC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IAC/B,cAAc,GAAG,IAAI,CAAA;AACvB,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,cAAc,GAAG,KAAK,CAAA;IACtB,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAA;AACzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liteforge/modal",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Signal-based modal system. createModal, ModalProvider, confirm/alert/prompt presets.",
   "author": "SchildW3rk <contact@schildw3rk.dev>",
   "license": "MIT",
@@ -29,14 +29,18 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles": "./css/styles.css"
   },
   "files": [
     "dist",
+    "css",
     "README.md",
     "LICENSE"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "css/*.css"
+  ],
   "engines": {
     "node": ">=18"
   },
@@ -45,7 +49,7 @@
   },
   "peerDependencies": {
     "@liteforge/core": ">=0.1.0",
-    "@liteforge/runtime": ">=0.4.0"
+    "@liteforge/runtime": ">=0.4.3"
   },
   "peerDependenciesMeta": {
     "@liteforge/runtime": {
@@ -54,7 +58,7 @@
   },
   "devDependencies": {
     "@liteforge/core": "0.1.0",
-    "@liteforge/runtime": "0.4.0"
+    "@liteforge/runtime": "0.4.3"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",