@transcodes/ui-components 0.3.6 → 0.4.0

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

@@ -1,28 +1,29 @@
-import { css as m, LitElement as g, html as p } from "lit";
-import { property as l, customElement as h } from "lit/decorators.js";
-import { LoadingController as d } from "../controllers/loading.controller.js";
+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, u = Object.getOwnPropertyDescriptor, c = (o, r, n, i) => {
-  for (var e = i > 1 ? void 0 : i ? u(r, n) : r, s = o.length - 1, a; s >= 0; s--)
-    (a = o[s]) && (e = (i ? a(r, n, e) : a(e)) || e);
+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 g {
   constructor() {
-    super(...arguments), this.message = "", this.spinnerSize = "md", this.loading = new d(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>
@@ -68,13 +69,16 @@ t.styles = m`
       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([
+s([
+  c({ type: Object })
+], t.prototype, "sx", 2);
+t = s([
   h("tc-loading-screen")
 ], t);
 export {

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,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"}
+{"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,19 +1,20 @@
 import { css as p, LitElement as d, html as m } from "lit";
-import { property as r, state as h, customElement as u } from "lit/decorators.js";
+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 y = 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 && y(s, o, e), e;
+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 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 f(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
     });
@@ -35,12 +36,12 @@ let t = class extends d {
     );
   }
   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"
@@ -53,7 +54,7 @@ let t = class extends d {
                 <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>
@@ -62,7 +63,7 @@ let t = class extends d {
               </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>
@@ -175,22 +176,25 @@ t.styles = p`
       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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transcodes/ui-components",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "private": false,
   "description": "Lit 3.x component library with Reactive Controllers",
   "keywords": [
@@ -74,7 +74,7 @@
     "lit": "^3.0.0"
   },
   "dependencies": {
-    "@transcodes/design-tokens": "^0.3.6"
+    "@transcodes/design-tokens": "^0.4.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.9",