@transcodes/ui-components 0.4.3 → 0.4.4

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

@@ -0,0 +1,200 @@
+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, i = (a, n, o, r) => {
+  for (var e = r > 1 ? void 0 : r ? v(n, o) : n, c = a.length - 1, l; c >= 0; c--)
+    (l = a[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.sx = {}, this.isAnimated = !1, this.animation = new f(this, {
+      showDuration: 600,
+      hideDuration: 300
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
+      this.playAnimation();
+    });
+  }
+  async playAnimation() {
+    await this.animation.show(), this.isAnimated = !0;
+  }
+  handleAction() {
+    this.dispatchEvent(
+      new CustomEvent("tc-action", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const a = this.isAnimated ? "animated" : "";
+    return m`
+      <div part="screen" class="screen" style=${y(this.sx)}>
+        <tc-container>
+          <div part="content" class="content">
+            <div part="icon" class="icon-container ${a}">
+              <svg
+                class="checkmark"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            </div>
+            <tc-section .sx=${{ gap: "var(--space-sm)" }} class="text-content ${a}">
+              <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
+                ${this.title}
+              </tc-text>
+              <tc-text part="message" size="base" color="tertiary" class="message">
+                ${this.message}
+              </tc-text>
+            </tc-section>
+            ${this.actionLabel ? m`
+                  <div part="action" class="action ${a}">
+                    <tc-button variant="primary" @tc-click=${this.handleAction}>
+                      ${this.actionLabel}
+                    </tc-button>
+                  </div>
+                ` : ""}
+          </div>
+        </tc-container>
+      </div>
+    `;
+  }
+};
+t.styles = p`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      min-height: inherit;
+    }
+
+    .screen {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      min-height: inherit;
+      padding: var(--space-lg);
+      box-sizing: border-box;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--space-lg);
+      text-align: center;
+      max-width: 20rem;
+    }
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--space-md);
+      border-radius: var(--radius-full);
+      color: var(--accent-primary);
+      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;
+    }
+
+    .checkmark {
+      width: var(--size-icon-xl);
+      height: var(--size-icon-xl);
+      stroke-dasharray: 50;
+      stroke-dashoffset: 50;
+    }
+
+    .icon-container.animated .checkmark {
+      animation: draw-check 0.5s ease-out 0.3s forwards;
+    }
+
+    @keyframes draw-check {
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    .title {
+      margin: 0;
+    }
+
+    .message {
+      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);
+    }
+  `;
+i([
+  s({ type: String })
+], t.prototype, "title", 2);
+i([
+  s({ type: String })
+], t.prototype, "message", 2);
+i([
+  s({ type: String, attribute: "action-label" })
+], t.prototype, "actionLabel", 2);
+i([
+  s({ type: Boolean, attribute: "auto-animate" })
+], t.prototype, "autoAnimate", 2);
+i([
+  s({ type: Object })
+], t.prototype, "sx", 2);
+i([
+  h()
+], t.prototype, "isAnimated", 2);
+t = i([
+  u("tc-success-screen")
+], t);
+export {
+  t as TcSuccessScreen
+};

package/dist/styles/shared.d.ts

@@ -0,0 +1,20 @@
+import { CSSResult } from 'lit';
+/**
+ * Design-tokens component styles as Lit CSSResult
+ * Use this in your component's static styles:
+ *
+ * @example
+ * ```ts
+ * import { sharedStyles } from '../styles/shared.js';
+ *
+ * @customElement('my-component')
+ * export class MyComponent extends LitElement {
+ *   static override styles = [sharedStyles, css`
+ *     // component-specific styles
+ *   `];
+ * }
+ * ```
+ */
+export declare const sharedStyles: CSSResult;
+export default sharedStyles;
+//# sourceMappingURL=shared.d.ts.map

package/dist/styles/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/styles/shared.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,SAAsC,CAAC;AAElE,eAAe,YAAY,CAAC"}

package/dist/styles/shared.js

@@ -0,0 +1,7 @@
+import { componentStyles as o } from "@transcodes/design-tokens/components";
+import { unsafeCSS as t } from "lit";
+const s = t(o);
+export {
+  s as default,
+  s as sharedStyles
+};

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.4.3",
+  "version": "0.4.4",
   "private": false,
   "description": "Lit 3.x component library with Reactive Controllers",
   "keywords": [
@@ -67,6 +67,7 @@
     "predev": "cd ../design-tokens && bun run build && cd ../ui-components && cp -r ../design-tokens/build .storybook/design-tokens",
     "clean": "rm -rf dist",
     "dev": "storybook dev -p 6006",
+    "prepublishOnly": "bun run clean && bun run build",
     "preview": "vite preview",
     "type-check": "tsc --noEmit"
   },
@@ -74,7 +75,7 @@
     "lit": "^3.0.0"
   },
   "dependencies": {
-    "@transcodes/design-tokens": "^0.4.3"
+    "@transcodes/design-tokens": "^0.4.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.1.9",