@transcodes/ui-components 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -0,0 +1,76 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.3.1] - 2025-12-11
+
+### Added
+
+- Tree-shaking 지원: preserveModules 빌드로 사용하는 컴포넌트만 번들에 포함
+- package.json exports 개선: 계층별 subpath exports 추가 (`/primitives`, `/widgets`, `/screens`, `/controllers`)
+- esbuild minification 및 적극적 tree-shaking 설정
+
+### Changed
+
+- design-tokens CSS import 제거 (design-tokens에서 자동 로드)
+- package.json `sideEffects: false` 설정으로 더 나은 tree-shaking 지원
+- Vite 빌드 최적화: constBindings, compact, es2020 target
+
+### Fixed
+
+- vite.config.ts 타입 에러 수정: esbuild 옵션을 최상위 레벨로 이동
+
+## [0.3.0] - 2025-12-11
+
+### Added
+
+- **tc-error-message**: 에러/경고/정보 메시지 컴포넌트 (tc-callout 래퍼)
+- **tc-input-with-chip**: 칩 인디케이터가 붙은 입력 필드
+- **tc-authenticator-card**: 인증기 정보 카드 (passkey, TOTP, USB 등)
+- 누락된 primitives 스토리 추가 (tc-item, tc-item-button, tc-symbol, tc-toast)
+- 스크린 컴포넌트에 FlexibleHeight 스토리 추가
+
+### Changed
+
+- 스크린 컴포넌트 `min-height` 개선: `100vh/100dvh` → `inherit` (유연한 컨테이너 크기 지원)
+- design-tokens import 경로 변경: `@transcodes/design-tokens/css` 사용
+- Stories 폴더 구조 재편성 (primitives, widgets, screens, controllers 분리)
+
+### Fixed
+
+- Vercel 배포를 위한 public/ 폴더 구조 수정
+
+## [0.2.0] - 2025-12-10
+
+### Added
+
+- npm publish 준비 완료 (package.json 메타데이터, README 개선)
+- Storybook 개선 및 design-tokens 통합
+- tc-callout: `icon` 슬롯 추가, CSS parts 확장 (icon, content)
+- tc-divider: `text` prop 추가 (텍스트 구분선 지원)
+- tc-icon: 브랜드/인증 아이콘 추가 (apple, google, windows, samsung, totp, qrcode 등)
+- tc-input: `tc-keydown`, `tc-paste` 이벤트 추가
+
+### Fixed
+
+- Storybook 빌드 시 vite-plugin-dts 비활성화 문제 해결
+- Vercel 빌드 시 workspace 의존성 해결
+
+## [0.1.0] - 2025-12-10
+
+### Added
+
+- Initial release of Lit 3.x component library
+- **Primitives**: tc-button, tc-input, tc-text, tc-icon, tc-divider, tc-callout, tc-chip, tc-spinner, tc-otp-input, tc-box, tc-container, tc-item, tc-item-button
+- **Widgets**: tc-modal, tc-fab, tc-toast, tc-floating-button
+- **Controllers**: BaseController, MatchMediaController, FormSubmissionController
+- tc-input: `tc-keydown`, `tc-paste` events
+- tc-callout: `icon` named slot
+- tc-divider: `text` prop for divider with text
+- tc-icon: 32 icons including brand icons (apple, google, windows, samsung)
+- Storybook documentation
+- Vercel deployment support
+- TypeScript type definitions

package/README.md

@@ -1,6 +1,6 @@
 # @transcodes/ui-components
 
-A modern web component library built with [Lit 3.x](https://lit.dev/). Features a comprehensive set of UI primitives, complex widgets, and reusable Reactive Controllers for building beautiful, accessible interfaces.
+A modern web component library built with [Lit 3.x](https://lit.dev/). Features a comprehensive set of UI primitives, complex widgets, full-screen components, and reusable Reactive Controllers.
 
 [![npm version](https://img.shields.io/npm/v/@transcodes/ui-components.svg)](https://www.npmjs.com/package/@transcodes/ui-components)
 [![license](https://img.shields.io/npm/l/@transcodes/ui-components.svg)](https://github.com/transcodings/transcodes-ui/blob/main/packages/ui-components/LICENSE)
@@ -9,8 +9,9 @@ A modern web component library built with [Lit 3.x](https://lit.dev/). Features
 
 - **Web Components** - Framework-agnostic, works with React, Vue, Angular, or vanilla JS
 - **Lit 3.x Powered** - Fast, lightweight, and reactive
+- **Tree-shakable** - Import only what you need (v0.3.1+)
 - **Design Token Integration** - Built on [@transcodes/design-tokens](https://www.npmjs.com/package/@transcodes/design-tokens)
-- **Reactive Controllers** - Reusable logic for loading states, forms, animations, and more
+- **Reactive Controllers** - Reusable logic for forms, animations, storage, and more
 - **TypeScript First** - Full type definitions included
 - **Storybook Documentation** - Interactive component explorer
 
@@ -19,10 +20,6 @@ A modern web component library built with [Lit 3.x](https://lit.dev/). Features
 ```bash
 npm install @transcodes/ui-components lit
 # or
-yarn add @transcodes/ui-components lit
-# or
-pnpm add @transcodes/ui-components lit
-# or
 bun add @transcodes/ui-components lit
 ```
 
@@ -30,69 +27,76 @@ bun add @transcodes/ui-components lit
 
 ## Quick Start
 
-### 1. Import and register components
+### Import All Components
 
 ```typescript
-// Import all components (registers custom elements automatically)
-import '@transcodes/ui-components';
+// Import design tokens (auto-loads CSS)
+import '@transcodes/design-tokens';
 
-// Import styles
-import '@transcodes/ui-components/styles.css';
+// Import all components (registers custom elements)
+import '@transcodes/ui-components';
 ```
 
-### 2. Use in your HTML
-
 ```html
 <tc-button variant="primary">Click me</tc-button>
 
-<tc-input
-  type="email"
-  placeholder="Enter your email"
-  required
-></tc-input>
+<tc-input type="email" placeholder="Enter your email" required></tc-input>
 
 <tc-callout variant="info">
   This is an informational message.
 </tc-callout>
 ```
 
-### 3. Handle events
+### Tree-shaking (v0.3.1+)
 
-```javascript
-const button = document.querySelector('tc-button');
-button.addEventListener('tc-click', (e) => {
-  console.log('Button clicked!', e.detail);
-});
+Import only the components you need for smaller bundle sizes:
 
-const input = document.querySelector('tc-input');
-input.addEventListener('tc-change', (e) => {
-  console.log('Input value:', e.detail.value);
-});
+```typescript
+// Import design tokens
+import '@transcodes/design-tokens';
+
+// Import specific component categories
+import { TcButton, TcInput } from '@transcodes/ui-components/primitives';
+import { TcModal } from '@transcodes/ui-components/widgets';
+import { LoadingController } from '@transcodes/ui-components/controllers';
 ```
 
+**Bundle Size Comparison:**
+
+- Full import: ~252 KB (all components)
+- Single component: ~4-12 KB (e.g., `tc-button` = 4.35 KB)
+- Category import: Varies by selection
+
 ## Components
 
-### Primitives
+### Primitives (19)
 
 Core UI building blocks with consistent styling and behavior.
 
-| Component | Description | Key Props |
-|-----------|-------------|-----------|
-| `<tc-button>` | Interactive button | `variant`, `size`, `disabled`, `loading` |
-| `<tc-input>` | Text input field | `type`, `placeholder`, `required`, `error` |
-| `<tc-otp-input>` | OTP/PIN code input | `length`, `masked` |
-| `<tc-text>` | Typography component | `variant`, `weight`, `color` |
-| `<tc-container>` | Layout container | `maxWidth`, `padding` |
-| `<tc-box>` | Flexible box wrapper | `padding`, `gap` |
-| `<tc-section>` | Page section | `padding` |
-| `<tc-divider>` | Visual separator | `orientation` |
-| `<tc-callout>` | Alert/info box | `variant` (info, warning, error, success) |
-| `<tc-chip>` | Tag/badge | `variant`, `removable` |
-| `<tc-icon>` | Icon display | `name`, `size` |
-| `<tc-spinner>` | Loading indicator | `size` |
-| `<tc-toast>` | Toast notification | `variant`, `duration` |
-
-### Widgets
+| Component | Description |
+|-----------|-------------|
+| `<tc-button>` | Interactive button with variants and loading state |
+| `<tc-input>` | Text input field with validation support |
+| `<tc-otp-input>` | OTP/PIN code input |
+| `<tc-input-with-chip>` | Input with attached chip indicator |
+| `<tc-text>` | Typography component |
+| `<tc-icon>` | Icon display (32+ icons including brand icons) |
+| `<tc-chip>` | Tag/badge component |
+| `<tc-spinner>` | Loading indicator |
+| `<tc-toast>` | Toast notification |
+| `<tc-callout>` | Alert/info box with icon slot |
+| `<tc-divider>` | Visual separator with optional text |
+| `<tc-card>` | Card container |
+| `<tc-box>` | Flexible box wrapper |
+| `<tc-container>` | Layout container |
+| `<tc-section>` | Page section |
+| `<tc-item>` | List item |
+| `<tc-item-button>` | Clickable list item |
+| `<tc-symbol>` | Symbol/logo display |
+| `<tc-form-header>` | Form header with title and description |
+| `<tc-error-message>` | Error/warning/info message (callout wrapper) |
+
+### Widgets (8)
 
 Complex components composed of primitives.
 
@@ -100,18 +104,32 @@ Complex components composed of primitives.
 |-----------|-------------|
 | `<tc-notification-modal>` | Modal dialog for notifications |
 | `<tc-offline-modal>` | Offline state indicator modal |
-| `<tc-floating-action-button>` | FAB with optional menu |
+| `<tc-iframe-modal>` | Modal with embedded iframe |
+| `<tc-floating-button>` | Floating action button |
+| `<tc-installation-banner>` | PWA installation prompt |
+| `<tc-ios-installation-guide>` | iOS PWA installation guide |
+| `<tc-page-decoration>` | Page background decoration |
+| `<tc-authenticator-card>` | Authenticator info card (passkey, TOTP, USB) |
+
+### Screens (3)
 
-### Controllers
+Full-screen state components with flexible height.
 
-Reusable logic that can be attached to any Lit component.
+| Component | Description |
+|-----------|-------------|
+| `<tc-loading-screen>` | Loading state with spinner |
+| `<tc-error-screen>` | Error state with retry option |
+| `<tc-success-screen>` | Success state with action button |
+
+### Controllers (8)
+
+Reusable Reactive Controllers for Lit components.
 
 ```typescript
-import { LoadingController, FormController } from '@transcodes/ui-components';
+import { LoadingController } from '@transcodes/ui-components/controllers';
 
 class MyComponent extends LitElement {
   private loading = new LoadingController(this);
-  private form = new FormController(this);
 
   async handleSubmit() {
     this.loading.start();
@@ -126,16 +144,34 @@ class MyComponent extends LitElement {
 
 | Controller | Purpose |
 |------------|---------|
+| `BaseController` | Base class for custom controllers |
 | `LoadingController` | Manage loading states |
-| `FormController` | Form validation and submission |
+| `FormValidationController` | Form validation |
 | `AnimationController` | Coordinate animations |
 | `MatchMediaController` | Respond to media queries |
 | `StorageController` | Persist data to localStorage/sessionStorage |
+| `HistoryController` | Browser history management |
 | `MessageBusController` | Cross-component communication |
 
+## Events
+
+All components use `tc-` prefixed custom events:
+
+```javascript
+const button = document.querySelector('tc-button');
+button.addEventListener('tc-click', (e) => {
+  console.log('Button clicked!', e.detail);
+});
+
+const input = document.querySelector('tc-input');
+input.addEventListener('tc-change', (e) => {
+  console.log('Input value:', e.detail.value);
+});
+```
+
 ## Styling
 
-Components use CSS custom properties from `@transcodes/design-tokens`. You can customize the look by overriding these variables:
+Components use CSS custom properties from `@transcodes/design-tokens`:
 
 ```css
 :root {
@@ -147,8 +183,6 @@ Components use CSS custom properties from `@transcodes/design-tokens`. You can c
 }
 ```
 
-### Custom styles per component
-
 All components accept an `sx` prop for inline style overrides:
 
 ```html
@@ -160,6 +194,31 @@ All components accept an `sx` prop for inline style overrides:
 </tc-button>
 ```
 
+## Module Exports
+
+| Path | Description | Bundle Impact |
+|------|-------------|---------------|
+| `@transcodes/ui-components` | All components | ~252 KB |
+| `@transcodes/ui-components/primitives` | Primitive components only | ~120 KB |
+| `@transcodes/ui-components/widgets` | Widget components only | ~50 KB |
+| `@transcodes/ui-components/screens` | Screen components only | ~10 KB |
+| `@transcodes/ui-components/controllers` | Reactive Controllers | ~7 KB |
+
+**Note:** Tree-shaking is automatic when using modern bundlers (Vite, Webpack 5+, Rollup).
+
+### Migration from v0.3.0
+
+```typescript
+// v0.3.0 (manual CSS imports)
+import '@transcodes/design-tokens/css';
+import '@transcodes/design-tokens/tokens-dark.css';
+import '@transcodes/ui-components';
+
+// v0.3.1+ (automatic, tree-shakable)
+import '@transcodes/design-tokens'; // CSS auto-loaded
+import '@transcodes/ui-components'; // or import from subpaths
+```
+
 ## Framework Integration
 
 ### React
@@ -168,15 +227,8 @@ All components accept an `sx` prop for inline style overrides:
 import '@transcodes/ui-components';
 
 function App() {
-  const handleClick = (e: CustomEvent) => {
-    console.log('Clicked!');
-  };
-
   return (
-    <tc-button
-      variant="primary"
-      onTc-click={handleClick}
-    >
+    <tc-button variant="primary" onTc-click={() => console.log('Clicked!')}>
       Click me
     </tc-button>
   );
@@ -195,16 +247,12 @@ function App() {
 <script setup>
 import '@transcodes/ui-components';
 
-const handleClick = () => {
-  console.log('Clicked!');
-};
+const handleClick = () => console.log('Clicked!');
 </script>
 ```
 
 ## Browser Support
 
-Supports all modern browsers with native Custom Elements v1 support:
-
 - Chrome 67+
 - Firefox 63+
 - Safari 10.1+
@@ -213,23 +261,20 @@ Supports all modern browsers with native Custom Elements v1 support:
 ## Development
 
 ```bash
-# Install dependencies
-bun install
-
-# Start Storybook dev server
-bun run dev
-
-# Build for production
-bun run build
-
-# Type check
-bun run type-check
+bun install          # Install dependencies
+bun run dev          # Start Storybook dev server
+bun run build        # Build for production
+bun run type-check   # Type check
 ```
 
 ## Related Packages
 
 - [@transcodes/design-tokens](https://www.npmjs.com/package/@transcodes/design-tokens) - Design tokens used by this library
 
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for release history.
+
 ## License
 
 [MIT](./LICENSE)

package/dist/controllers/animation.controller.js

@@ -0,0 +1,32 @@
+import { BaseController as s } from "./base.controller.js";
+class r extends s {
+  constructor(i, t = 300) {
+    super(i), this._state = "hidden", typeof t == "number" ? (this.showDuration = t, this.hideDuration = t) : (this.showDuration = t.showDuration ?? 300, this.hideDuration = t.hideDuration ?? 300);
+  }
+  get state() {
+    return this._state;
+  }
+  get isVisible() {
+    return this._state === "visible" || this._state === "showing";
+  }
+  get isHidden() {
+    return this._state === "hidden";
+  }
+  async show() {
+    this._state === "visible" || this._state === "showing" || (this._state = "showing", this.host.requestUpdate(), await this.waitForTransition(this.showDuration), this._state = "visible", this.host.requestUpdate());
+  }
+  async hide() {
+    this._state === "hidden" || this._state === "hiding" || (this._state = "hiding", this.host.requestUpdate(), await this.waitForTransition(this.hideDuration), this._state = "hidden", this.host.requestUpdate());
+  }
+  toggle() {
+    return this.isVisible ? this.hide() : this.show();
+  }
+  waitForTransition(i) {
+    return new Promise((t) => {
+      setTimeout(t, i);
+    });
+  }
+}
+export {
+  r as AnimationController
+};

package/dist/controllers/base.controller.js

@@ -0,0 +1,8 @@
+class s {
+  constructor(t) {
+    this.host = t, this.host.addController(this);
+  }
+}
+export {
+  s as BaseController
+};

package/dist/controllers/form-validation.controller.js

@@ -0,0 +1,49 @@
+import { BaseController as o } from "./base.controller.js";
+class i extends o {
+  constructor() {
+    super(...arguments), this.errors = /* @__PURE__ */ new Map();
+  }
+  get isValid() {
+    return this.errors.size === 0;
+  }
+  getError(r) {
+    return this.errors.get(r);
+  }
+  getAllErrors() {
+    return new Map(this.errors);
+  }
+  validate(r, e, s) {
+    this.clearError(r);
+    for (const t of s)
+      if (!this.runRule(e, t))
+        return this.errors.set(r, t.message), this.host.requestUpdate(), !1;
+    return !0;
+  }
+  clearError(r) {
+    this.errors.has(r) && (this.errors.delete(r), this.host.requestUpdate());
+  }
+  reset() {
+    this.errors.clear(), this.host.requestUpdate();
+  }
+  runRule(r, e) {
+    switch (e.type) {
+      case "required":
+        return r.trim().length > 0;
+      case "email":
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r);
+      case "minLength":
+        return r.length >= e.value;
+      case "maxLength":
+        return r.length <= e.value;
+      case "pattern":
+        return e.value.test(r);
+      case "custom":
+        return e.validator ? e.validator(r) : !0;
+      default:
+        return !0;
+    }
+  }
+}
+export {
+  i as FormValidationController
+};

package/dist/controllers/history.controller.js

@@ -0,0 +1,26 @@
+import { BaseController as e } from "./base.controller.js";
+class d extends e {
+  constructor() {
+    super(...arguments), this.hasAddedEntry = !1, this.handlePopState = () => {
+      this.hasAddedEntry && (this.hasAddedEntry = !1, this.onPopCallback?.());
+    };
+  }
+  push(t = { modal: !0 }) {
+    this.hasAddedEntry || (history.pushState(t, ""), this.hasAddedEntry = !0);
+  }
+  pop() {
+    this.hasAddedEntry && (this.hasAddedEntry = !1);
+  }
+  onPopState(t) {
+    this.onPopCallback = t;
+  }
+  hostConnected() {
+    window.addEventListener("popstate", this.handlePopState);
+  }
+  hostDisconnected() {
+    window.removeEventListener("popstate", this.handlePopState), this.onPopCallback = void 0;
+  }
+}
+export {
+  d as HistoryController
+};

package/dist/controllers/loading.controller.js

@@ -0,0 +1,27 @@
+import { BaseController as t } from "./base.controller.js";
+class i extends t {
+  constructor() {
+    super(...arguments), this._isLoading = !1, this._progress = 0;
+  }
+  get isLoading() {
+    return this._isLoading;
+  }
+  get progress() {
+    return this._progress;
+  }
+  start() {
+    this._isLoading = !0, this._progress = 0, this.host.requestUpdate();
+  }
+  setProgress(s) {
+    this._progress = Math.max(0, Math.min(100, s)), this.host.requestUpdate();
+  }
+  complete() {
+    this._progress = 100, this._isLoading = !1, this.host.requestUpdate();
+  }
+  reset() {
+    this._isLoading = !1, this._progress = 0, this.host.requestUpdate();
+  }
+}
+export {
+  i as LoadingController
+};

package/dist/controllers/match-media.controller.js

@@ -0,0 +1,20 @@
+import { BaseController as h } from "./base.controller.js";
+class n extends h {
+  constructor(e, t) {
+    super(e), this._matches = !1, this.handleChange = (s) => {
+      this._matches = s.matches, this.host.requestUpdate();
+    }, this.mediaQuery = window.matchMedia(t), this._matches = this.mediaQuery.matches;
+  }
+  get matches() {
+    return this._matches;
+  }
+  hostConnected() {
+    this.mediaQuery.addEventListener("change", this.handleChange);
+  }
+  hostDisconnected() {
+    this.mediaQuery.removeEventListener("change", this.handleChange);
+  }
+}
+export {
+  n as MatchMediaController
+};

package/dist/controllers/message-bus.controller.js

@@ -0,0 +1,45 @@
+import { BaseController as r } from "./base.controller.js";
+class l extends r {
+  /**
+   * @param host - The reactive controller host
+   * @param targetOrigin - The origin to accept messages from and send messages to.
+   *   SECURITY NOTE: Using '*' accepts messages from any origin which can be dangerous.
+   *   Always specify an explicit origin in production environments.
+   */
+  constructor(e, s = "*") {
+    super(e), this.handlers = /* @__PURE__ */ new Map(), this.wildcardHandlers = /* @__PURE__ */ new Set(), this.handleMessage = (t) => {
+      if (!(this.targetOrigin !== "*" && t.origin !== this.targetOrigin) && t.data && typeof t.data == "object" && typeof t.data.type == "string") {
+        const { type: n, payload: a } = t.data;
+        this.handlers.get(n)?.forEach((i) => {
+          i(a);
+        }), this.wildcardHandlers.forEach((i) => {
+          i(n, a);
+        });
+      }
+    }, this.targetOrigin = s, s === "*" && typeof window < "u" && window.location.protocol !== "file:" && console.warn(
+      '[MessageBusController] Using targetOrigin="*" accepts messages from any origin. For security, specify an explicit origin in production.'
+    );
+  }
+  send(e, s, t = window) {
+    t.postMessage({ type: e, payload: s }, this.targetOrigin);
+  }
+  sendToFrame(e, s, t) {
+    e.contentWindow?.postMessage({ type: s, payload: t }, this.targetOrigin);
+  }
+  onMessage(e, s) {
+    return e === "*" ? (this.wildcardHandlers.add(s), () => {
+      this.wildcardHandlers.delete(s);
+    }) : (this.handlers.has(e) || this.handlers.set(e, /* @__PURE__ */ new Set()), this.handlers.get(e)?.add(s), () => {
+      this.handlers.get(e)?.delete(s);
+    });
+  }
+  hostConnected() {
+    window.addEventListener("message", this.handleMessage);
+  }
+  hostDisconnected() {
+    window.removeEventListener("message", this.handleMessage), this.handlers.clear();
+  }
+}
+export {
+  l as MessageBusController
+};

package/dist/controllers/storage.controller.js

@@ -0,0 +1,40 @@
+import { BaseController as a } from "./base.controller.js";
+class i extends a {
+  constructor(t, s, o = localStorage) {
+    super(t), this._value = null, this.handleStorageChange = (e) => {
+      e.key === this.key && e.storageArea === this.storage && (this.load(), this.host.requestUpdate());
+    }, this.key = s, this.storage = o, this.load();
+  }
+  get value() {
+    return this._value;
+  }
+  set(t) {
+    this._value = t;
+    try {
+      this.storage.setItem(this.key, JSON.stringify(t));
+    } catch {
+      console.warn(`Failed to save to storage: ${this.key}`);
+    }
+    this.host.requestUpdate();
+  }
+  remove() {
+    this._value = null, this.storage.removeItem(this.key), this.host.requestUpdate();
+  }
+  load() {
+    try {
+      const t = this.storage.getItem(this.key);
+      t !== null && (this._value = JSON.parse(t));
+    } catch {
+      this._value = null;
+    }
+  }
+  hostConnected() {
+    window.addEventListener("storage", this.handleStorageChange);
+  }
+  hostDisconnected() {
+    window.removeEventListener("storage", this.handleStorageChange);
+  }
+}
+export {
+  i as StorageController
+};