@transcodes/ui-components 0.3.5 → 0.4.0

package/dist/primitives/tc-toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-toast.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,QAAQ,SAAQ;IACY,WAAW,UAAQ;IAC9C,WAAW,UAAQ;IAEhD,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAgB,MAAM,4BA6FpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IASnB,IAAI;IAOJ,IAAI;IAaV,OAAO,CAAC,WAAW;IAIV,MAAM;CAiChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"tc-toast.d.ts","sourceRoot":"","sources":["../../src/primitives/tc-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACT,OAAO,EAC/B,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAU;IACO,QAAQ,SAAQ;IACY,WAAW,UAAQ;IAC9C,WAAW,UAAQ;IACpB,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,SAAS,CAGd;IAEH,OAAO,CAAC,YAAY,CAAC,CAAgC;IAErD,OAAgB,MAAM,4BA6FpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,iBAAiB;IASnB,IAAI;IAOJ,IAAI;IAaV,OAAO,CAAC,WAAW;IAIV,MAAM;CAuChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/primitives/tc-toast.js

@@ -1,15 +1,16 @@
-import { LitElement as h, html as d, css as m } from "lit";
-import { property as o, customElement as p } from "lit/decorators.js";
-import { AnimationController as u } from "../controllers/animation.controller.js";
-import { sharedStyles as v } from "../styles/shared.js";
-var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (c, e, r, a) => {
-  for (var t = a > 1 ? void 0 : a ? f(e, r) : e, n = c.length - 1, l; n >= 0; n--)
-    (l = c[n]) && (t = (a ? l(e, r, t) : l(t)) || t);
-  return a && t && y(e, r, t), t;
+import { css as h, LitElement as m, html as d } from "lit";
+import { property as e, customElement as p } from "lit/decorators.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { AnimationController as v } from "../controllers/animation.controller.js";
+import { sharedStyles as y } from "../styles/shared.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (c, a, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? b(a, r) : a, n = c.length - 1, l; n >= 0; n--)
+    (l = c[n]) && (s = (o ? l(a, r, s) : l(s)) || s);
+  return o && s && f(a, r, s), s;
 };
-let s = class extends h {
+let t = class extends m {
   constructor() {
-    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.animation = new u(this, {
+    super(...arguments), this.variant = "info", this.duration = 5e3, this.autoDismiss = !0, this.dismissible = !0, this.sx = {}, this.animation = new v(this, {
       showDuration: 300,
       hideDuration: 200
     });
@@ -47,7 +48,13 @@ let s = class extends h {
   }
   render() {
     return d`
-      <div part="toast" class="toast toast--${this.variant}" role="alert" aria-live="polite">
+      <div
+        part="toast"
+        class="toast toast--${this.variant}"
+        role="alert"
+        aria-live="polite"
+        style=${u(this.sx)}
+      >
         <div part="content" class="content">
           <slot></slot>
         </div>
@@ -75,9 +82,9 @@ let s = class extends h {
     `;
   }
 };
-s.styles = [
-  v,
-  m`
+t.styles = [
+  y,
+  h`
     :host {
       display: block;
       position: fixed;
@@ -170,20 +177,23 @@ s.styles = [
   `
 ];
 i([
-  o({ type: String })
-], s.prototype, "variant", 2);
+  e({ type: String })
+], t.prototype, "variant", 2);
 i([
-  o({ type: Number })
-], s.prototype, "duration", 2);
+  e({ type: Number })
+], t.prototype, "duration", 2);
 i([
-  o({ type: Boolean, attribute: "auto-dismiss" })
-], s.prototype, "autoDismiss", 2);
+  e({ type: Boolean, attribute: "auto-dismiss" })
+], t.prototype, "autoDismiss", 2);
 i([
-  o({ type: Boolean })
-], s.prototype, "dismissible", 2);
-s = i([
+  e({ type: Boolean })
+], t.prototype, "dismissible", 2);
+i([
+  e({ type: Object })
+], t.prototype, "sx", 2);
+t = i([
   p("tc-toast")
-], s);
+], t);
 export {
-  s as TcToast
+  t as TcToast
 };

package/dist/screens/tc-error-screen.d.ts

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
- * A full-screen error state with icon, message, and retry action.
+ * A full-screen error state with animated icon, message, and retry action.
  *
  * @fires tc-retry - Fired when the retry button is clicked
  * @csspart screen - The screen container
@@ -15,7 +16,13 @@ export declare class TcErrorScreen extends LitElement {
     message: string;
     retryLabel: string;
     showRetry: boolean;
+    autoAnimate: boolean;
+    sx: SxProps;
+    private isAnimated;
+    private animation;
     static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    playAnimation(): Promise<void>;
     private handleRetry;
     render(): import('lit').TemplateResult<1>;
 }

package/dist/screens/tc-error-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IAEvE,OAAgB,MAAM,0BAoDpB;IAEF,OAAO,CAAC,WAAW;IASV,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/screens/tc-error-screen.js

@@ -1,13 +1,31 @@
-import { LitElement as m, html as p, css as h } from "lit";
-import { property as s, customElement as g } from "lit/decorators.js";
-var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (l, i, a, n) => {
-  for (var t = n > 1 ? void 0 : n ? y(i, a) : i, c = l.length - 1, o; c >= 0; c--)
-    (o = l[c]) && (t = (n ? o(i, a, t) : o(t)) || t);
-  return n && t && d(i, a, t), t;
+import { css as m, LitElement as d, html as p } from "lit";
+import { property as a, state as y, customElement as h } from "lit/decorators.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { AnimationController as g } from "../controllers/animation.controller.js";
+import "../primitives/tc-icon.js";
+import "../primitives/tc-text.js";
+import "../primitives/tc-button.js";
+import "../primitives/tc-container.js";
+import "../primitives/tc-section.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, e = (i, n, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? v(n, o) : n, c = i.length - 1, l; c >= 0; c--)
+    (l = i[c]) && (r = (s ? l(n, o, r) : l(r)) || r);
+  return s && r && f(n, o, r), r;
 };
-let e = class extends m {
+let t = class extends d {
   constructor() {
-    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0;
+    super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.sx = {}, this.isAnimated = !1, this.animation = new g(this, {
+      showDuration: 600,
+      hideDuration: 300
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
+      this.playAnimation();
+    });
+  }
+  async playAnimation() {
+    await this.animation.show(), this.isAnimated = !0;
   }
   handleRetry() {
     this.dispatchEvent(
@@ -18,14 +36,15 @@ let e = class extends m {
     );
   }
   render() {
+    const i = this.isAnimated ? "animated" : "";
     return p`
-      <div part="screen" class="screen">
+      <div part="screen" class="screen" style=${u(this.sx)}>
         <tc-container>
           <div part="content" class="content">
-            <div part="icon" class="icon-container">
-              <tc-icon name="alert-circle" size="2rem"></tc-icon>
+            <div part="icon" class="icon-container ${i}">
+              <tc-icon name="alert-circle" .sx=${{ "--icon-size": "var(--size-icon-xl)" }}></tc-icon>
             </div>
-            <tc-section gap="var(--space-sm)">
+            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${i}">
               <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
                 ${this.title}
               </tc-text>
@@ -34,7 +53,7 @@ let e = class extends m {
               </tc-text>
             </tc-section>
             ${this.showRetry ? p`
-                  <div part="action" class="action">
+                  <div part="action" class="action ${i}">
                     <tc-button variant="primary" @tc-click=${this.handleRetry}>
                       ${this.retryLabel}
                     </tc-button>
@@ -46,12 +65,13 @@ let e = class extends m {
     `;
   }
 };
-e.styles = h`
+t.styles = m`
     :host {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
     }
 
@@ -60,6 +80,7 @@ e.styles = h`
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
@@ -79,11 +100,19 @@ e.styles = h`
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 4rem;
-      height: 4rem;
+      padding: var(--space-md);
       background: var(--error-bg);
       border-radius: var(--radius-full);
       color: var(--error-base);
+      transform: scale(0);
+      opacity: 0;
+      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
+        opacity 0.3s ease;
+    }
+
+    .icon-container.animated {
+      transform: scale(1);
+      opacity: 1;
     }
 
     .title {
@@ -94,26 +123,56 @@ e.styles = h`
       color: var(--ink-medium);
     }
 
+    .text-content {
+      opacity: 0;
+      transform: translateY(var(--offset-slide-up-md));
+      transition: opacity 0.4s ease, transform 0.4s ease;
+      transition-delay: 0.4s;
+    }
+
+    .text-content.animated {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
     .action {
       width: 100%;
       margin-top: var(--space-md);
+      opacity: 0;
+      transform: translateY(var(--offset-slide-up-md));
+      transition: opacity 0.4s ease, transform 0.4s ease;
+      transition-delay: 0.6s;
+    }
+
+    .action.animated {
+      opacity: 1;
+      transform: translateY(0);
     }
   `;
-r([
-  s({ type: String })
-], e.prototype, "title", 2);
-r([
-  s({ type: String })
-], e.prototype, "message", 2);
-r([
-  s({ type: String, attribute: "retry-label" })
-], e.prototype, "retryLabel", 2);
-r([
-  s({ type: Boolean, attribute: "show-retry" })
-], e.prototype, "showRetry", 2);
-e = r([
-  g("tc-error-screen")
-], e);
+e([
+  a({ type: String })
+], t.prototype, "title", 2);
+e([
+  a({ type: String })
+], t.prototype, "message", 2);
+e([
+  a({ type: String, attribute: "retry-label" })
+], t.prototype, "retryLabel", 2);
+e([
+  a({ type: Boolean, attribute: "show-retry" })
+], t.prototype, "showRetry", 2);
+e([
+  a({ type: Boolean, attribute: "auto-animate" })
+], t.prototype, "autoAnimate", 2);
+e([
+  a({ type: Object })
+], t.prototype, "sx", 2);
+e([
+  y()
+], t.prototype, "isAnimated", 2);
+t = e([
+  h("tc-error-screen")
+], t);
 export {
-  e as TcErrorScreen
+  t as TcErrorScreen
 };

package/dist/screens/tc-loading-screen.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A full-screen loading state with spinner and optional message.
  *
@@ -9,7 +10,8 @@ import { LitElement } from 'lit';
  */
 export declare class TcLoadingScreen extends LitElement {
     message: string;
-    spinnerSize: string;
+    spinnerSize: 'sm' | 'md' | 'lg' | 'auto';
+    sx: SxProps;
     private loading;
     static styles: import('lit').CSSResult;
     connectedCallback(): void;

package/dist/screens/tc-loading-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,SAAU;IAE5E,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAgCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IACU,EAAE,EAAE,OAAO,CAAM;IAE7C,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAkCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/screens/tc-loading-screen.js

@@ -1,25 +1,29 @@
-import { LitElement as m, html as p, css as g } from "lit";
-import { property as l, customElement as d } from "lit/decorators.js";
-import { LoadingController as h } from "../controllers/loading.controller.js";
-var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, r, s, n) => {
-  for (var e = n > 1 ? void 0 : n ? u(r, s) : r, i = o.length - 1, a; i >= 0; i--)
-    (a = o[i]) && (e = (n ? a(r, s, e) : a(e)) || e);
-  return n && e && f(r, s, e), e;
+import { css as m, LitElement as g, html as l } from "lit";
+import { property as c, customElement as h } from "lit/decorators.js";
+import { styleMap as d } from "lit/directives/style-map.js";
+import { LoadingController as y } from "../controllers/loading.controller.js";
+import "../primitives/tc-spinner.js";
+import "../primitives/tc-text.js";
+import "../primitives/tc-container.js";
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (p, r, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? x(r, n) : r, a = p.length - 1, o; a >= 0; a--)
+    (o = p[a]) && (e = (i ? o(r, n, e) : o(e)) || e);
+  return i && e && f(r, n, e), e;
 };
-let t = class extends m {
+let t = class extends g {
   constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new h(this);
+    super(...arguments), this.message = "", this.spinnerSize = "md", this.sx = {}, this.loading = new y(this);
   }
   connectedCallback() {
     super.connectedCallback(), this.loading.start();
   }
   render() {
-    return p`
-      <div part="screen" class="screen">
+    return l`
+      <div part="screen" class="screen" style=${d(this.sx)}>
         <tc-container>
           <div part="content" class="content">
             <tc-spinner part="spinner" size=${this.spinnerSize}></tc-spinner>
-            ${this.message ? p`
+            ${this.message ? l`
                   <tc-text part="message" class="message" size="base" color="tertiary">
                     ${this.message}
                   </tc-text>
@@ -30,12 +34,13 @@ let t = class extends m {
     `;
   }
 };
-t.styles = g`
+t.styles = m`
     :host {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
     }
 
@@ -44,6 +49,7 @@ t.styles = g`
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
@@ -63,14 +69,17 @@ t.styles = g`
       max-width: 20rem;
     }
   `;
-c([
-  l({ type: String })
+s([
+  c({ type: String })
 ], t.prototype, "message", 2);
-c([
-  l({ type: String, attribute: "spinner-size" })
+s([
+  c({ type: String, attribute: "spinner-size" })
 ], t.prototype, "spinnerSize", 2);
-t = c([
-  d("tc-loading-screen")
+s([
+  c({ type: Object })
+], t.prototype, "sx", 2);
+t = s([
+  h("tc-loading-screen")
 ], t);
 export {
   t as TcLoadingScreen

package/dist/screens/tc-success-screen.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { SxProps } from '../types.js';
 /**
  * A full-screen success state with animated checkmark and message.
  *
@@ -15,6 +16,7 @@ export declare class TcSuccessScreen extends LitElement {
     message: string;
     actionLabel: string;
     autoAnimate: boolean;
+    sx: SxProps;
     private isAnimated;
     private animation;
     static styles: import('lit').CSSResult;

package/dist/screens/tc-success-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAC/C,EAAE,EAAE,OAAO,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAoGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/screens/tc-success-screen.js

@@ -1,14 +1,20 @@
-import { LitElement as p, html as m, css as d } from "lit";
-import { property as r, state as h, customElement as u } from "lit/decorators.js";
-import { AnimationController as y } from "../controllers/animation.controller.js";
-var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (a, s, o, n) => {
-  for (var e = n > 1 ? void 0 : n ? g(s, o) : s, c = a.length - 1, l; c >= 0; c--)
-    (l = a[c]) && (e = (n ? l(s, o, e) : l(e)) || e);
-  return n && e && f(s, o, e), e;
+import { css as p, LitElement as d, html as m } from "lit";
+import { property as s, state as h, customElement as u } from "lit/decorators.js";
+import { styleMap as y } from "lit/directives/style-map.js";
+import { AnimationController as f } from "../controllers/animation.controller.js";
+import "../primitives/tc-icon.js";
+import "../primitives/tc-text.js";
+import "../primitives/tc-button.js";
+import "../primitives/tc-container.js";
+import "../primitives/tc-section.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (i, n, o, r) => {
+  for (var e = r > 1 ? void 0 : r ? v(n, o) : n, c = i.length - 1, l; c >= 0; c--)
+    (l = i[c]) && (e = (r ? l(n, o, e) : l(e)) || e);
+  return r && e && g(n, o, e), e;
 };
-let t = class extends p {
+let t = class extends d {
   constructor() {
-    super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new y(this, {
+    super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.sx = {}, this.isAnimated = !1, this.animation = new f(this, {
       showDuration: 600,
       hideDuration: 300
     });
@@ -30,12 +36,12 @@ let t = class extends p {
     );
   }
   render() {
-    const a = this.isAnimated ? "animated" : "";
+    const i = this.isAnimated ? "animated" : "";
     return m`
-      <div part="screen" class="screen">
+      <div part="screen" class="screen" style=${y(this.sx)}>
         <tc-container>
           <div part="content" class="content">
-            <div part="icon" class="icon-container ${a}">
+            <div part="icon" class="icon-container ${i}">
               <svg
                 class="checkmark"
                 viewBox="0 0 24 24"
@@ -48,7 +54,7 @@ let t = class extends p {
                 <polyline points="20 6 9 17 4 12"></polyline>
               </svg>
             </div>
-            <tc-section gap="var(--space-sm)" class="text-content ${a}">
+            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${i}">
               <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
                 ${this.title}
               </tc-text>
@@ -57,7 +63,7 @@ let t = class extends p {
               </tc-text>
             </tc-section>
             ${this.actionLabel ? m`
-                  <div part="action" class="action ${a}">
+                  <div part="action" class="action ${i}">
                     <tc-button variant="success" @tc-click=${this.handleAction}>
                       ${this.actionLabel}
                     </tc-button>
@@ -69,12 +75,13 @@ let t = class extends p {
     `;
   }
 };
-t.styles = d`
+t.styles = p`
     :host {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
     }
 
@@ -83,6 +90,7 @@ t.styles = d`
       align-items: center;
       justify-content: center;
       width: 100%;
+      height: 100%;
       min-height: inherit;
       padding: var(--space-lg);
       box-sizing: border-box;
@@ -102,8 +110,7 @@ t.styles = d`
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 5rem;
-      height: 5rem;
+      padding: var(--space-md);
       background: var(--alpha-success10);
       border-radius: var(--radius-full);
       color: var(--accent-success);
@@ -119,8 +126,8 @@ t.styles = d`
     }
 
     .checkmark {
-      width: 2.5rem;
-      height: 2.5rem;
+      width: var(--size-icon-xl);
+      height: var(--size-icon-xl);
       stroke-dasharray: 50;
       stroke-dashoffset: 50;
     }
@@ -145,7 +152,7 @@ t.styles = d`
 
     .text-content {
       opacity: 0;
-      transform: translateY(10px);
+      transform: translateY(var(--offset-slide-up-md));
       transition: opacity 0.4s ease, transform 0.4s ease;
       transition-delay: 0.4s;
     }
@@ -159,7 +166,7 @@ t.styles = d`
       width: 100%;
       margin-top: var(--space-md);
       opacity: 0;
-      transform: translateY(10px);
+      transform: translateY(var(--offset-slide-up-md));
       transition: opacity 0.4s ease, transform 0.4s ease;
       transition-delay: 0.6s;
     }
@@ -169,22 +176,25 @@ t.styles = d`
       transform: translateY(0);
     }
   `;
-i([
-  r({ type: String })
+a([
+  s({ type: String })
 ], t.prototype, "title", 2);
-i([
-  r({ type: String })
+a([
+  s({ type: String })
 ], t.prototype, "message", 2);
-i([
-  r({ type: String, attribute: "action-label" })
+a([
+  s({ type: String, attribute: "action-label" })
 ], t.prototype, "actionLabel", 2);
-i([
-  r({ type: Boolean, attribute: "auto-animate" })
+a([
+  s({ type: Boolean, attribute: "auto-animate" })
 ], t.prototype, "autoAnimate", 2);
-i([
+a([
+  s({ type: Object })
+], t.prototype, "sx", 2);
+a([
   h()
 ], t.prototype, "isAnimated", 2);
-t = i([
+t = a([
   u("tc-success-screen")
 ], t);
 export {

package/dist/types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 공통 타입 정의
+ * @packageDocumentation
+ */
+/**
+ * 인라인 스타일 객체 타입
+ * Lit의 styleMap과 호환
+ *
+ * @example
+ * ```typescript
+ * <tc-button .sx=${{ padding: '1rem', fontSize: '1.25rem' }}>
+ *   Large Button
+ * </tc-button>
+ * ```
+ */
+export type SxProps = Record<string, string | number>;
+/**
+ * 공통 크기 옵션
+ */
+export type Size = 'sm' | 'md' | 'lg';
+export type SizeWithAuto = Size | 'auto';
+/**
+ * 시맨틱 변형 타입
+ */
+export type SemanticVariant = 'info' | 'success' | 'warning' | 'error';
+/**
+ * 버튼 변형 타입
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'success';
+/**
+ * 칩 변형 타입
+ */
+export type ChipVariant = 'default' | 'success' | 'error' | 'info';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvE;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC"}