@transcodes/ui-components 0.4.2 → 0.4.3

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

@@ -1,202 +0,0 @@
-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 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 i = 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 ${i}">
-              <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 ${i}">
-              <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 ${i}">
-                    <tc-button variant="success" @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;
-      background: var(--paper-white);
-    }
-
-    .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);
-      background: var(--alpha-primary10);
-      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);
-    }
-  `;
-a([
-  s({ type: String })
-], t.prototype, "title", 2);
-a([
-  s({ type: String })
-], t.prototype, "message", 2);
-a([
-  s({ type: String, attribute: "action-label" })
-], t.prototype, "actionLabel", 2);
-a([
-  s({ type: Boolean, attribute: "auto-animate" })
-], t.prototype, "autoAnimate", 2);
-a([
-  s({ type: Object })
-], t.prototype, "sx", 2);
-a([
-  h()
-], t.prototype, "isAnimated", 2);
-t = a([
-  u("tc-success-screen")
-], t);
-export {
-  t as TcSuccessScreen
-};

package/dist/styles/shared.d.ts

@@ -1,20 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,7 +0,0 @@
-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

@@ -1,34 +0,0 @@
-/**
- * 공통 타입 정의
- * @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

@@ -1 +0,0 @@
-{"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"}