@transcodes/ui-components 0.2.0 → 0.3.1

package/dist/widgets/tc-offline-modal.js

@@ -0,0 +1,202 @@
+import { LitElement as c, html as h, css as p } from "lit";
+import { property as o, state as f, customElement as v } from "lit/decorators.js";
+import { AnimationController as m } from "../controllers/animation.controller.js";
+import { sharedStyles as y } from "../styles/shared.js";
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (d, a, s, n) => {
+  for (var e = n > 1 ? void 0 : n ? b(a, s) : a, r = d.length - 1, l; r >= 0; r--)
+    (l = d[r]) && (e = (n ? l(a, s, e) : l(e)) || e);
+  return n && e && u(a, s, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.title = "No Connection", this.description = "Please check your internet connection and try again.", this.retryLabel = "Try Again", this.autoDetect = !0, this.isOffline = !1, this.animation = new m(this, {
+      showDuration: 300,
+      hideDuration: 200
+    }), this.handleOnline = () => {
+      this.isOffline = !1, this.hide(), this.dispatchEvent(
+        new CustomEvent("tc-online", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.handleOffline = () => {
+      this.isOffline = !0, this.show(), this.dispatchEvent(
+        new CustomEvent("tc-offline", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateDataState(), this.autoDetect && (this.isOffline = !navigator.onLine, this.isOffline && this.show(), window.addEventListener("online", this.handleOnline), window.addEventListener("offline", this.handleOffline));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("online", this.handleOnline), window.removeEventListener("offline", this.handleOffline);
+  }
+  updateDataState() {
+    this.dataset.state = this.animation.state;
+  }
+  async show() {
+    await this.animation.show(), this.updateDataState();
+  }
+  async hide() {
+    await this.animation.hide(), this.updateDataState();
+  }
+  handleRetry() {
+    this.dispatchEvent(
+      new CustomEvent("tc-retry", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), navigator.onLine && this.handleOnline();
+  }
+  render() {
+    return h`
+      <div part="overlay" class="overlay">
+        <div
+          part="modal"
+          class="modal"
+          role="alertdialog"
+          aria-modal="true"
+          aria-labelledby="offline-title"
+          aria-describedby="offline-description"
+        >
+          <div part="icon" class="icon-container">
+            <tc-icon name="wifi-off" size="2rem"></tc-icon>
+          </div>
+          <tc-section part="content" class="content" gap="var(--space-sm)">
+            <tc-text
+              id="offline-title"
+              part="title"
+              class="title"
+              tag="h2"
+              size="lg"
+              weight="600"
+            >
+              ${this.title}
+            </tc-text>
+            <tc-text
+              id="offline-description"
+              part="description"
+              size="base"
+              color="tertiary"
+            >
+              ${this.description}
+            </tc-text>
+          </tc-section>
+          <div part="action" class="action">
+            <tc-button variant="primary" @tc-click=${this.handleRetry}>
+              ${this.retryLabel}
+            </tc-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = [
+  y,
+  p`
+    :host {
+      display: contents;
+    }
+
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 1001;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--space-lg);
+      background: var(--overlay-dark);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
+    }
+
+    :host([data-state='showing']) .overlay,
+    :host([data-state='visible']) .overlay {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    :host([data-state='hiding']) .overlay {
+      opacity: 0;
+    }
+
+    :host([data-state='hidden']) .overlay {
+      visibility: hidden;
+    }
+
+    .modal {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      max-width: 320px;
+      padding: var(--space-xl);
+      background: var(--paper-white);
+      border-radius: var(--radius-lg);
+      box-shadow: 0 20px 60px var(--overlay-shadow-heavy);
+      text-align: center;
+      transform: scale(0.95);
+      transition: transform var(--transition-smooth);
+    }
+
+    :host([data-state='showing']) .modal,
+    :host([data-state='visible']) .modal {
+      transform: scale(1);
+    }
+
+    :host([data-state='hiding']) .modal {
+      transform: scale(0.95);
+    }
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 4rem;
+      height: 4rem;
+      margin-bottom: var(--space-lg);
+      background: var(--error-bg);
+      border-radius: var(--radius-full);
+      color: var(--error-base);
+    }
+
+    .content {
+      margin-bottom: var(--space-xl);
+    }
+
+    .title {
+      margin-bottom: var(--space-sm);
+    }
+
+    .action {
+      width: 100%;
+    }
+  `
+];
+i([
+  o({ type: String })
+], t.prototype, "title", 2);
+i([
+  o({ type: String })
+], t.prototype, "description", 2);
+i([
+  o({ type: String, attribute: "retry-label" })
+], t.prototype, "retryLabel", 2);
+i([
+  o({ type: Boolean, attribute: "auto-detect" })
+], t.prototype, "autoDetect", 2);
+i([
+  f()
+], t.prototype, "isOffline", 2);
+t = i([
+  v("tc-offline-modal")
+], t);
+export {
+  t as TcOfflineModal
+};

package/dist/widgets/tc-page-decoration.js

@@ -0,0 +1,126 @@
+import { LitElement as c, html as b, css as d } from "lit";
+import { property as m, customElement as p } from "lit/decorators.js";
+import { sharedStyles as v } from "../styles/shared.js";
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (s, e, o, t) => {
+  for (var r = t > 1 ? void 0 : t ? f(e, o) : e, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (r = (t ? n(e, o, r) : n(r)) || r);
+  return t && r && u(e, o, r), r;
+};
+let a = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "primary";
+  }
+  render() {
+    return b`
+      <div part="decoration" class="decoration">
+        <div part="blob" class="blob blob-1"></div>
+        <div part="blob" class="blob blob-2"></div>
+        <div part="blob" class="blob blob-3"></div>
+      </div>
+    `;
+  }
+};
+a.styles = [
+  v,
+  d`
+    :host {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 0;
+      overflow: hidden;
+    }
+
+    .decoration {
+      position: absolute;
+      inset: 0;
+    }
+
+    .blob {
+      position: absolute;
+      border-radius: 50%;
+      opacity: 0.35;
+      filter: blur(0.0625rem);
+    }
+
+    /* Primary (purple) variant */
+    :host([variant='primary']) .blob {
+      background: radial-gradient(
+        circle,
+        var(--accent-primary) 0%,
+        transparent 70%
+      );
+    }
+
+    /* Success (green) variant */
+    :host([variant='success']) .blob {
+      background: radial-gradient(
+        circle,
+        var(--accent-success) 0%,
+        transparent 70%
+      );
+    }
+
+    /* Error (red) variant */
+    :host([variant='error']) .blob {
+      background: radial-gradient(
+        circle,
+        var(--error-base) 0%,
+        transparent 70%
+      );
+    }
+
+    .blob-1 {
+      width: 18rem;
+      height: 18rem;
+      top: -6rem;
+      left: -5rem;
+      animation: decorFloat 12s ease-in-out infinite;
+    }
+
+    .blob-2 {
+      width: 14rem;
+      height: 14rem;
+      top: 30%;
+      right: -6rem;
+      animation: decorFloat 10s ease-in-out infinite reverse;
+    }
+
+    .blob-3 {
+      width: 20rem;
+      height: 20rem;
+      bottom: -8rem;
+      left: 20%;
+      animation: decorFloat 14s ease-in-out infinite 2s;
+    }
+
+    @keyframes decorFloat {
+      0%,
+      100% {
+        transform: translate(0, 0) scale(1);
+      }
+      33% {
+        transform: translate(0.375rem, -0.5rem) scale(1.08);
+      }
+      66% {
+        transform: translate(-0.25rem, -0.25rem) scale(1.15);
+      }
+    }
+
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .blob {
+        animation: none;
+      }
+    }
+  `
+];
+l([
+  m({ type: String })
+], a.prototype, "variant", 2);
+a = l([
+  p("tc-page-decoration")
+], a);
+export {
+  a as TcPageDecoration
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcodes/ui-components",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "private": false,
   "description": "Lit 3.x component library with Reactive Controllers",
   "keywords": [
@@ -28,19 +28,37 @@
     "access": "public"
   },
   "type": "module",
-  "main": "./dist/ui-components.js",
-  "module": "./dist/ui-components.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/ui-components.js"
+      "import": "./dist/index.js"
     },
-    "./styles.css": "./dist/ui-components.css"
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "import": "./dist/primitives/index.js"
+    },
+    "./widgets": {
+      "types": "./dist/widgets/index.d.ts",
+      "import": "./dist/widgets/index.js"
+    },
+    "./screens": {
+      "types": "./dist/screens/index.d.ts",
+      "import": "./dist/screens/index.js"
+    },
+    "./controllers": {
+      "types": "./dist/controllers/index.d.ts",
+      "import": "./dist/controllers/index.js"
+    }
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
   ],
   "scripts": {
     "build": "tsc && vite build",
@@ -54,7 +72,7 @@
     "lit": "^3.0.0"
   },
   "dependencies": {
-    "@transcodes/design-tokens": "^0.2.0"
+    "@transcodes/design-tokens": "^0.3.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.5",

package/dist/ui-components.css

@@ -1 +0,0 @@
-[data-theme=dark]{--ink-black: #ffffff;--ink-dark: #e5e5e5;--ink-medium: #a3a3a3;--ink-light: #737373;--ink-faint: #525252;--paper-white: #1a1a1a;--paper-cream: #2d2d2d;--paper-warm: #404040;--accent-primary: #a78bfa;--accent-primary-hover: #c4b5fd;--accent-primary-pressed: #8b5cf6;--accent-success: #4ade80;--accent-success-hover: #86efac;--accent-success-pressed: #22c55e;--semantic-warning: #fbbf24;--semantic-warning-hover: #fcd34d;--semantic-info: #38bdf8;--semantic-info-hover: #7dd3fc;--error-base: #f87171;--error-bg: rgba(248, 113, 113, .12);--error-border: rgba(248, 113, 113, .3)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-.25rem)}75%{transform:translate(.25rem)}}@keyframes inkFloat{0%,to{transform:translate(0) scale(1);opacity:.5}50%{transform:translate(.625rem,-.625rem) scale(1.1);opacity:.7}}@keyframes inkDrift{0%,to{transform:translate(0) rotate(0);opacity:.4}33%{transform:translate(-.5rem,.5rem) rotate(-5deg);opacity:.6}66%{transform:translate(.375rem,-.375rem) rotate(3deg);opacity:.5}}@keyframes inkSpread{0%{transform:scale(0);opacity:.4}to{transform:scale(var(--ink-effect-spread-scale, 2.5));opacity:0}}.page-container{position:relative;width:100%;max-width:var(--page-container-max-width);margin:0 auto;padding:0 var(--page-container-padding);animation:fadeInUp .6s var(--transition-smooth) both}.page-container--wide{max-width:var(--page-container-max-width-wide)}.page-card{background:var(--paper-white);padding:var(--page-card-padding);border-radius:var(--page-card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.page-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--space-fixed-2xs);background:linear-gradient(135deg,var(--alpha-primary08) 0%,transparent 50%,var(--alpha-primary04) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.page-card--centered{text-align:center}.page-decoration{position:absolute;border-radius:50%;filter:blur(3.75rem);pointer-events:none;z-index:0}.page-decoration--primary{background:var(--alpha-primary15)}.page-decoration--success{background:var(--alpha-success15)}.page-decoration--float{animation:inkFloat 4s ease-in-out infinite}.page-decoration--drift{animation:inkDrift 5s ease-in-out infinite}.button{height:var(--button-height);padding:0 var(--space-lg);font-family:var(--font-body);font-size:var(--button-font-size);font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--button-radius);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.button-primary{background:var(--accent-primary);color:var(--paper-white)}.button-primary:hover:not(:disabled){background:var(--accent-primary-hover);box-shadow:var(--shadow-button-hover-primary);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-success{background:var(--accent-success);color:var(--paper-white)}.button-success:hover:not(:disabled){background:var(--accent-success-hover);box-shadow:var(--shadow-button-hover-success);transform:translateY(calc(-1 * var(--space-fixed-2xs)))}.button-secondary{height:var(--button-height-secondary);background:transparent;color:var(--ink-dark);border:var(--space-fixed-2xs) solid var(--ink-faint)}.button-secondary:hover:not(:disabled){color:var(--accent-primary);border-color:var(--accent-primary);background:var(--alpha-primary04)}.button:disabled{cursor:not-allowed;opacity:.7}.text-button{display:inline-flex;align-items:center;justify-content:center;height:var(--button-text-height);padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:var(--button-text-font-size);font-weight:500;color:var(--ink-dark);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.text-button:hover{background:var(--paper-cream);color:var(--accent-primary)}.text-button-sm{height:auto;padding:var(--space-xs) var(--space-sm);font-size:.8125rem}.text-button-md{height:auto;padding:var(--space-sm) var(--space-md)}.button-content{display:flex;align-items:center;justify-content:center;gap:var(--button-content-gap)}.button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.button-text{flex:1;text-align:center}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);border:var(--button-spinner-border-width) solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}.button-ink{position:relative;overflow:hidden}.button-ink:after{content:"";position:absolute;top:50%;left:50%;width:21.875rem;height:21.875rem;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);border-radius:50%;pointer-events:none;transition:transform var(--ink-effect-ripple-duration, .6s) var(--ink-effect-ripple-easing, cubic-bezier(.4, 0, .2, 1)),opacity var(--ink-effect-fade-duration, .3s) ease;opacity:0}.button-ink:hover:after{transform:translate(-50%,-50%) scale(1);opacity:1}.button-ink:active:after{transform:translate(-50%,-50%) scale(.8);opacity:.8}.card{background:var(--paper-white);padding:var(--card-padding);border-radius:var(--card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.container{position:relative;width:100%;max-width:var(--container-max-width)}.container-wide{max-width:var(--container-max-width-wide)}.form-header{text-align:center;margin-bottom:var(--form-header-margin-bottom)}.form-title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing);animation:slideDown .4s var(--transition-smooth) .2s both}.form-subtitle{font-size:var(--form-subtitle-font-size);color:var(--ink-medium);margin-top:var(--space-sm);animation:fadeInUp .4s var(--transition-smooth) .4s both}.form-fields{display:flex;flex-direction:column;gap:var(--form-fields-gap)}.form-footer{margin-top:var(--form-footer-margin-top);text-align:center;animation:fadeInUp .4s var(--transition-smooth) .6s both}.field-group{display:flex;flex-direction:column;gap:var(--field-group-gap)}.field-label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);transition:color var(--transition-fast)}.field-group.focused .field-label{color:var(--accent-primary)}.required-mark{color:var(--accent-primary);margin-left:var(--space-2xs)}.input{width:100%;padding:var(--input-padding-y) var(--input-padding-x);font-family:var(--font-body);font-size:var(--input-font-size);color:var(--ink-black);background:var(--paper-cream);border:var(--space-fixed-2xs) solid transparent;border-radius:var(--input-radius);transition:background var(--transition-smooth),border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.input::placeholder{color:var(--ink-faint)}.input:hover{background:var(--paper-warm)}.input:focus{outline:none;background:var(--paper-white);border-color:var(--ink-faint);box-shadow:var(--shadow-input-focus)}.label{display:block;font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);margin-bottom:var(--space-sm);transition:color var(--transition-fast)}.title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing)}.error-message{display:flex;align-items:flex-start;gap:var(--feedback-error-gap);padding:var(--feedback-error-padding);background:var(--error-bg);border:var(--space-fixed-2xs) solid var(--error-border);border-radius:var(--feedback-error-radius);color:var(--error-base);animation:slideDown .3s var(--transition-smooth) both}.error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-error-icon-size);height:var(--feedback-error-icon-size);color:var(--error-base)}.error-message.shake{animation:shake .4s var(--transition-smooth)}.notice{display:flex;align-items:flex-start;gap:var(--feedback-notice-gap);padding:var(--feedback-notice-padding);border-radius:var(--feedback-notice-radius);animation:slideUp .4s var(--transition-smooth) both}.notice-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--feedback-notice-icon-size);height:var(--feedback-notice-icon-size)}.notice-success{background:#357a4614;border:var(--space-fixed-2xs) solid rgba(53,122,70,.2);color:var(--accent-success)}.notice-warning{background:#b4530914;border:var(--space-fixed-2xs) solid rgba(180,83,9,.2);color:var(--semantic-warning)}.notice-info{background:#0369a114;border:var(--space-fixed-2xs) solid rgba(3,105,161,.2);color:var(--semantic-info)}