@transcodes/ui-components 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -5,6 +5,41 @@ 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.6] - 2025-12-17
+
+### Changed
+
+- CSS 토큰 활용 강화: 하드코딩된 값을 design-tokens CSS 변수로 교체
+  - tc-error-screen, tc-success-screen: 애니메이션 오프셋 토큰화
+  - tc-input, tc-input-with-chip: focus ring, slideDown 애니메이션 토큰화
+  - tc-item-button, tc-error-message: 아이콘 크기 토큰화
+  - tc-page-decoration, tc-spinner: `border-radius: 50%` → `var(--radius-full)`
+- `:host` 스타일 일관성 통일 및 reset.css 통합
+- Storybook 설정 역할 분리 및 중복 제거
+
+### Removed
+
+- **widgets 레이어 제거**: 미사용 복합 컴포넌트 삭제
+  - tc-authenticator-card, tc-floating-button, tc-iframe-modal
+  - tc-installation-banner, tc-ios-installation-guide
+  - tc-notification-modal, tc-offline-modal
+- FormValidationController 제거 (미사용)
+- 컨트롤러 Storybook 스토리 제거 (내부 구현 세부사항)
+
+### Fixed
+
+- Storybook: sideEffects, storybookAliases, isStorybook 감지 로직 수정
+
+**Note**: 이 버전은 `@transcodes/design-tokens@^0.3.6`과 함께 사용해야 합니다.
+
+## [0.3.5] - 2025-12-11
+
+### Fixed
+
+- TypeScript 타입 정의 파일(.d.ts) 누락 문제 수정
+  - `rollupTypes: false`로 변경하여 모든 컴포넌트의 개별 .d.ts 생성
+  - primitives, widgets, screens 모든 컴포넌트에 타입 정의 포함
+
 ## [0.3.4] - 2025-12-11
 
 ### Changed

package/dist/controllers/animation.controller.d.ts

@@ -0,0 +1,48 @@
+import { ReactiveControllerHost } from 'lit';
+import { BaseController } from './base.controller.js';
+export type AnimationState = 'hidden' | 'showing' | 'visible' | 'hiding';
+/**
+ * Controller for managing show/hide animation states.
+ * Provides a state machine for coordinating CSS transitions.
+ *
+ * @example
+ * ```ts
+ * class MyModal extends LitElement {
+ *   private animation = new AnimationController(this);
+ *
+ *   async open() {
+ *     await this.animation.show();
+ *   }
+ *
+ *   async close() {
+ *     await this.animation.hide();
+ *   }
+ *
+ *   render() {
+ *     return html`
+ *       <div class="modal modal--${this.animation.state}">
+ *         <slot></slot>
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export interface AnimationControllerOptions {
+    showDuration?: number;
+    hideDuration?: number;
+}
+export declare class AnimationController extends BaseController {
+    private _state;
+    private showDuration;
+    private hideDuration;
+    constructor(host: ReactiveControllerHost, options?: AnimationControllerOptions | number);
+    get state(): AnimationState;
+    get isVisible(): boolean;
+    get isHidden(): boolean;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    toggle(): Promise<void>;
+    private waitForTransition;
+}
+//# sourceMappingURL=animation.controller.d.ts.map

package/dist/controllers/animation.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/animation.controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qBAAa,mBAAoB,SAAQ,cAAc;IACrD,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;gBAG3B,IAAI,EAAE,sBAAsB,EAC5B,OAAO,GAAE,0BAA0B,GAAG,MAAY;IAYpD,IAAI,KAAK,IAAI,cAAc,CAE1B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAEK,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAcrB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAc3B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAIvB,OAAO,CAAC,iBAAiB;CAK1B"}

package/dist/controllers/base.controller.d.ts

@@ -0,0 +1,14 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Base controller class that all reactive controllers extend from.
+ * Provides common functionality for registering with a host element.
+ */
+export declare abstract class BaseController implements ReactiveController {
+    protected host: ReactiveControllerHost;
+    constructor(host: ReactiveControllerHost);
+    hostConnected?(): void;
+    hostDisconnected?(): void;
+    hostUpdate?(): void;
+    hostUpdated?(): void;
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/controllers/base.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/base.controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE;;;GAGG;AACH,8BAAsB,cAAe,YAAW,kBAAkB;IAChE,SAAS,CAAC,IAAI,EAAE,sBAAsB,CAAC;gBAE3B,IAAI,EAAE,sBAAsB;IAKxC,aAAa,CAAC,IAAI,IAAI;IACtB,gBAAgB,CAAC,IAAI,IAAI;IACzB,UAAU,CAAC,IAAI,IAAI;IACnB,WAAW,CAAC,IAAI,IAAI;CACrB"}

package/dist/controllers/history.controller.d.ts

@@ -0,0 +1,34 @@
+import { BaseController } from './base.controller.js';
+/**
+ * Controller for managing browser history for modals and overlays.
+ * Adds a history entry when opened and handles back button navigation.
+ *
+ * @example
+ * ```ts
+ * class MyModal extends LitElement {
+ *   private history = new HistoryController(this);
+ *
+ *   open() {
+ *     this.history.push({ modal: 'my-modal' });
+ *     this.history.onPopState(() => this.close());
+ *     // show modal
+ *   }
+ *
+ *   close() {
+ *     this.history.pop();
+ *     // hide modal
+ *   }
+ * }
+ * ```
+ */
+export declare class HistoryController extends BaseController {
+    private hasAddedEntry;
+    private onPopCallback?;
+    push(state?: object): void;
+    pop(): void;
+    onPopState(callback: () => void): void;
+    private handlePopState;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=history.controller.d.ts.map

package/dist/controllers/history.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"history.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/history.controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,iBAAkB,SAAQ,cAAc;IACnD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAC,CAAa;IAEnC,IAAI,CAAC,KAAK,GAAE,MAAwB,GAAG,IAAI;IAO3C,GAAG,IAAI,IAAI;IAMX,UAAU,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAItC,OAAO,CAAC,cAAc,CAKpB;IAEO,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;CAIlC"}

package/dist/controllers/index.d.ts

@@ -1,8 +1,6 @@
 export type { AnimationControllerOptions, AnimationState, } from './animation.controller.js';
 export { AnimationController } from './animation.controller.js';
 export { BaseController } from './base.controller.js';
-export type { ValidationRule, ValidationType, } from './form-validation.controller.js';
-export { FormValidationController } from './form-validation.controller.js';
 export { HistoryController } from './history.controller.js';
 export { LoadingController } from './loading.controller.js';
 export { MatchMediaController } from './match-media.controller.js';

package/dist/controllers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controllers/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,0BAA0B,EAC1B,cAAc,GACf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/controllers/index.js

@@ -1,18 +1,16 @@
 import { AnimationController as e } from "./animation.controller.js";
 import { BaseController as l } from "./base.controller.js";
-import { FormValidationController as m } from "./form-validation.controller.js";
-import { HistoryController as f } from "./history.controller.js";
-import { LoadingController as x } from "./loading.controller.js";
-import { MatchMediaController as i } from "./match-media.controller.js";
-import { MessageBusController as d } from "./message-bus.controller.js";
-import { StorageController as M } from "./storage.controller.js";
+import { HistoryController as m } from "./history.controller.js";
+import { LoadingController as f } from "./loading.controller.js";
+import { MatchMediaController as x } from "./match-media.controller.js";
+import { MessageBusController as i } from "./message-bus.controller.js";
+import { StorageController as g } from "./storage.controller.js";
 export {
   e as AnimationController,
   l as BaseController,
-  m as FormValidationController,
-  f as HistoryController,
-  x as LoadingController,
-  i as MatchMediaController,
-  d as MessageBusController,
-  M as StorageController
+  m as HistoryController,
+  f as LoadingController,
+  x as MatchMediaController,
+  i as MessageBusController,
+  g as StorageController
 };

package/dist/controllers/loading.controller.d.ts

@@ -0,0 +1,36 @@
+import { BaseController } from './base.controller.js';
+/**
+ * Controller for managing loading states and progress.
+ *
+ * @example
+ * ```ts
+ * class MyComponent extends LitElement {
+ *   private loading = new LoadingController(this);
+ *
+ *   async handleSubmit() {
+ *     this.loading.start();
+ *     await doSomething();
+ *     this.loading.complete();
+ *   }
+ *
+ *   render() {
+ *     return html`
+ *       <button ?disabled=${this.loading.isLoading}>
+ *         ${this.loading.isLoading ? 'Loading...' : 'Submit'}
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class LoadingController extends BaseController {
+    private _isLoading;
+    private _progress;
+    get isLoading(): boolean;
+    get progress(): number;
+    start(): void;
+    setProgress(value: number): void;
+    complete(): void;
+    reset(): void;
+}
+//# sourceMappingURL=loading.controller.d.ts.map

package/dist/controllers/loading.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/loading.controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,iBAAkB,SAAQ,cAAc;IACnD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAK;IAEtB,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,KAAK,IAAI,IAAI;IAMb,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKhC,QAAQ,IAAI,IAAI;IAMhB,KAAK,IAAI,IAAI;CAKd"}

package/dist/controllers/match-media.controller.d.ts

@@ -0,0 +1,32 @@
+import { ReactiveControllerHost } from 'lit';
+import { BaseController } from './base.controller.js';
+/**
+ * Controller for reactive media query matching.
+ * Automatically updates the host when the media query matches or unmatches.
+ *
+ * @example
+ * ```ts
+ * class MyComponent extends LitElement {
+ *   private mobile = new MatchMediaController(this, '(max-width: 768px)');
+ *   private darkMode = new MatchMediaController(this, '(prefers-color-scheme: dark)');
+ *
+ *   render() {
+ *     return html`
+ *       <div class=${this.mobile.matches ? 'mobile' : 'desktop'}>
+ *         ${this.darkMode.matches ? 'Dark mode' : 'Light mode'}
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class MatchMediaController extends BaseController {
+    private mediaQuery;
+    private _matches;
+    constructor(host: ReactiveControllerHost, query: string);
+    get matches(): boolean;
+    private handleChange;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=match-media.controller.d.ts.map

package/dist/controllers/match-media.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"match-media.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/match-media.controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,oBAAqB,SAAQ,cAAc;IACtD,OAAO,CAAC,UAAU,CAAiB;IACnC,OAAO,CAAC,QAAQ,CAAS;gBAEb,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM;IAMvD,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,OAAO,CAAC,YAAY,CAGlB;IAEO,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;CAGlC"}

package/dist/controllers/message-bus.controller.d.ts

@@ -0,0 +1,45 @@
+import { ReactiveControllerHost } from 'lit';
+import { BaseController } from './base.controller.js';
+export type MessageHandler = (payload: unknown) => void;
+export type WildcardMessageHandler = (type: string, payload: unknown) => void;
+/**
+ * Controller for postMessage communication with iframes or other windows.
+ *
+ * @example
+ * ```ts
+ * class MyIframeHost extends LitElement {
+ *   private messageBus = new MessageBusController(this);
+ *
+ *   connectedCallback() {
+ *     super.connectedCallback();
+ *     this.messageBus.onMessage('READY', (payload) => {
+ *       console.log('Iframe is ready', payload);
+ *     });
+ *   }
+ *
+ *   sendToIframe() {
+ *     this.messageBus.send('COMMAND', { action: 'do-something' });
+ *   }
+ * }
+ * ```
+ */
+export declare class MessageBusController extends BaseController {
+    private handlers;
+    private wildcardHandlers;
+    private targetOrigin;
+    /**
+     * @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(host: ReactiveControllerHost, targetOrigin?: string);
+    send(type: string, payload: unknown, targetWindow?: Window): void;
+    sendToFrame(iframe: HTMLIFrameElement, type: string, payload: unknown): void;
+    onMessage(type: string, handler: MessageHandler): () => void;
+    onMessage(type: '*', handler: WildcardMessageHandler): () => void;
+    private handleMessage;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=message-bus.controller.d.ts.map

package/dist/controllers/message-bus.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bus.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/message-bus.controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AACxD,MAAM,MAAM,sBAAsB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,oBAAqB,SAAQ,cAAc;IACtD,OAAO,CAAC,QAAQ,CAA0C;IAC1D,OAAO,CAAC,gBAAgB,CAAqC;IAC7D,OAAO,CAAC,YAAY,CAAS;IAE7B;;;;;OAKG;gBACS,IAAI,EAAE,sBAAsB,EAAE,YAAY,SAAM;IAgB5D,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,GAAE,MAAe,GAAG,IAAI;IAIzE,WAAW,CAAC,MAAM,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IAI5E,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,MAAM,IAAI;IAC5D,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,sBAAsB,GAAG,MAAM,IAAI;IAsBjE,OAAO,CAAC,aAAa,CAwBnB;IAEO,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;CAIlC"}

package/dist/controllers/storage.controller.d.ts

@@ -0,0 +1,40 @@
+import { ReactiveControllerHost } from 'lit';
+import { BaseController } from './base.controller.js';
+/**
+ * Controller for syncing component state with localStorage/sessionStorage.
+ * Automatically updates when storage changes in other tabs.
+ *
+ * @example
+ * ```ts
+ * class MyBanner extends LitElement {
+ *   private dismissed = new StorageController<boolean>(this, 'banner-dismissed');
+ *
+ *   handleDismiss() {
+ *     this.dismissed.set(true);
+ *   }
+ *
+ *   render() {
+ *     if (this.dismissed.value) return null;
+ *     return html`
+ *       <div class="banner">
+ *         <button @click=${this.handleDismiss}>Dismiss</button>
+ *       </div>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class StorageController<T = unknown> extends BaseController {
+    private key;
+    private storage;
+    private _value;
+    constructor(host: ReactiveControllerHost, key: string, storage?: Storage);
+    get value(): T | null;
+    set(value: T): void;
+    remove(): void;
+    private load;
+    private handleStorageChange;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=storage.controller.d.ts.map

package/dist/controllers/storage.controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.controller.d.ts","sourceRoot":"","sources":["../../src/controllers/storage.controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,iBAAiB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc;IAChE,OAAO,CAAC,GAAG,CAAS;IACpB,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,MAAM,CAAkB;gBAG9B,IAAI,EAAE,sBAAsB,EAC5B,GAAG,EAAE,MAAM,EACX,OAAO,GAAE,OAAsB;IAQjC,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAEpB;IAED,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAWnB,MAAM,IAAI,IAAI;IAMd,OAAO,CAAC,IAAI;IAWZ,OAAO,CAAC,mBAAmB,CAKzB;IAEO,aAAa,IAAI,IAAI;IAIrB,gBAAgB,IAAI,IAAI;CAGlC"}

package/dist/index.d.ts

@@ -1,295 +1,4 @@
-import { ReactiveController } from 'lit';
-import { ReactiveControllerHost } from 'lit';
-
-export declare class AnimationController extends BaseController {
-    private _state;
-    private showDuration;
-    private hideDuration;
-    constructor(host: ReactiveControllerHost, options?: AnimationControllerOptions | number);
-    get state(): AnimationState;
-    get isVisible(): boolean;
-    get isHidden(): boolean;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    toggle(): Promise<void>;
-    private waitForTransition;
-}
-
-/**
- * Controller for managing show/hide animation states.
- * Provides a state machine for coordinating CSS transitions.
- *
- * @example
- * ```ts
- * class MyModal extends LitElement {
- *   private animation = new AnimationController(this);
- *
- *   async open() {
- *     await this.animation.show();
- *   }
- *
- *   async close() {
- *     await this.animation.hide();
- *   }
- *
- *   render() {
- *     return html`
- *       <div class="modal modal--${this.animation.state}">
- *         <slot></slot>
- *       </div>
- *     `;
- *   }
- * }
- * ```
- */
-export declare interface AnimationControllerOptions {
-    showDuration?: number;
-    hideDuration?: number;
-}
-
-export declare type AnimationState = 'hidden' | 'showing' | 'visible' | 'hiding';
-
-/**
- * Base controller class that all reactive controllers extend from.
- * Provides common functionality for registering with a host element.
- */
-export declare abstract class BaseController implements ReactiveController {
-    protected host: ReactiveControllerHost;
-    constructor(host: ReactiveControllerHost);
-    hostConnected?(): void;
-    hostDisconnected?(): void;
-    hostUpdate?(): void;
-    hostUpdated?(): void;
-}
-
-/**
- * Controller for form field validation.
- * Manages validation rules and error states.
- *
- * @example
- * ```ts
- * class MyForm extends LitElement {
- *   private validation = new FormValidationController(this);
- *
- *   private emailRules: ValidationRule[] = [
- *     { type: 'required', message: 'Email is required' },
- *     { type: 'email', message: 'Please enter a valid email' },
- *   ];
- *
- *   handleBlur(e: Event) {
- *     const input = e.target as HTMLInputElement;
- *     this.validation.validate('email', input.value, this.emailRules);
- *   }
- *
- *   render() {
- *     const error = this.validation.getError('email');
- *     return html`
- *       <input @blur=${this.handleBlur} />
- *       ${error ? html`<span class="error">${error}</span>` : ''}
- *     `;
- *   }
- * }
- * ```
- */
-export declare class FormValidationController extends BaseController {
-    private errors;
-    get isValid(): boolean;
-    getError(field: string): string | undefined;
-    getAllErrors(): Map<string, string>;
-    validate(field: string, value: string, rules: ValidationRule[]): boolean;
-    clearError(field: string): void;
-    reset(): void;
-    private runRule;
-}
-
-/**
- * Controller for managing browser history for modals and overlays.
- * Adds a history entry when opened and handles back button navigation.
- *
- * @example
- * ```ts
- * class MyModal extends LitElement {
- *   private history = new HistoryController(this);
- *
- *   open() {
- *     this.history.push({ modal: 'my-modal' });
- *     this.history.onPopState(() => this.close());
- *     // show modal
- *   }
- *
- *   close() {
- *     this.history.pop();
- *     // hide modal
- *   }
- * }
- * ```
- */
-export declare class HistoryController extends BaseController {
-    private hasAddedEntry;
-    private onPopCallback?;
-    push(state?: object): void;
-    pop(): void;
-    onPopState(callback: () => void): void;
-    private handlePopState;
-    hostConnected(): void;
-    hostDisconnected(): void;
-}
-
-/**
- * Controller for managing loading states and progress.
- *
- * @example
- * ```ts
- * class MyComponent extends LitElement {
- *   private loading = new LoadingController(this);
- *
- *   async handleSubmit() {
- *     this.loading.start();
- *     await doSomething();
- *     this.loading.complete();
- *   }
- *
- *   render() {
- *     return html`
- *       <button ?disabled=${this.loading.isLoading}>
- *         ${this.loading.isLoading ? 'Loading...' : 'Submit'}
- *       </button>
- *     `;
- *   }
- * }
- * ```
- */
-export declare class LoadingController extends BaseController {
-    private _isLoading;
-    private _progress;
-    get isLoading(): boolean;
-    get progress(): number;
-    start(): void;
-    setProgress(value: number): void;
-    complete(): void;
-    reset(): void;
-}
-
-/**
- * Controller for reactive media query matching.
- * Automatically updates the host when the media query matches or unmatches.
- *
- * @example
- * ```ts
- * class MyComponent extends LitElement {
- *   private mobile = new MatchMediaController(this, '(max-width: 768px)');
- *   private darkMode = new MatchMediaController(this, '(prefers-color-scheme: dark)');
- *
- *   render() {
- *     return html`
- *       <div class=${this.mobile.matches ? 'mobile' : 'desktop'}>
- *         ${this.darkMode.matches ? 'Dark mode' : 'Light mode'}
- *       </div>
- *     `;
- *   }
- * }
- * ```
- */
-export declare class MatchMediaController extends BaseController {
-    private mediaQuery;
-    private _matches;
-    constructor(host: ReactiveControllerHost, query: string);
-    get matches(): boolean;
-    private handleChange;
-    hostConnected(): void;
-    hostDisconnected(): void;
-}
-
-/**
- * Controller for postMessage communication with iframes or other windows.
- *
- * @example
- * ```ts
- * class MyIframeHost extends LitElement {
- *   private messageBus = new MessageBusController(this);
- *
- *   connectedCallback() {
- *     super.connectedCallback();
- *     this.messageBus.onMessage('READY', (payload) => {
- *       console.log('Iframe is ready', payload);
- *     });
- *   }
- *
- *   sendToIframe() {
- *     this.messageBus.send('COMMAND', { action: 'do-something' });
- *   }
- * }
- * ```
- */
-export declare class MessageBusController extends BaseController {
-    private handlers;
-    private wildcardHandlers;
-    private targetOrigin;
-    /**
-     * @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(host: ReactiveControllerHost, targetOrigin?: string);
-    send(type: string, payload: unknown, targetWindow?: Window): void;
-    sendToFrame(iframe: HTMLIFrameElement, type: string, payload: unknown): void;
-    onMessage(type: string, handler: MessageHandler): () => void;
-    onMessage(type: '*', handler: WildcardMessageHandler): () => void;
-    private handleMessage;
-    hostConnected(): void;
-    hostDisconnected(): void;
-}
-
-declare type MessageHandler = (payload: unknown) => void;
-
-/**
- * Controller for syncing component state with localStorage/sessionStorage.
- * Automatically updates when storage changes in other tabs.
- *
- * @example
- * ```ts
- * class MyBanner extends LitElement {
- *   private dismissed = new StorageController<boolean>(this, 'banner-dismissed');
- *
- *   handleDismiss() {
- *     this.dismissed.set(true);
- *   }
- *
- *   render() {
- *     if (this.dismissed.value) return null;
- *     return html`
- *       <div class="banner">
- *         <button @click=${this.handleDismiss}>Dismiss</button>
- *       </div>
- *     `;
- *   }
- * }
- * ```
- */
-export declare class StorageController<T = unknown> extends BaseController {
-    private key;
-    private storage;
-    private _value;
-    constructor(host: ReactiveControllerHost, key: string, storage?: Storage);
-    get value(): T | null;
-    set(value: T): void;
-    remove(): void;
-    private load;
-    private handleStorageChange;
-    hostConnected(): void;
-    hostDisconnected(): void;
-}
-
-export declare interface ValidationRule {
-    type: ValidationType;
-    value?: string | number | RegExp;
-    message: string;
-    validator?: (value: string) => boolean;
-}
-
-export declare type ValidationType = 'required' | 'email' | 'minLength' | 'maxLength' | 'pattern' | 'custom';
-
-declare type WildcardMessageHandler = (type: string, payload: unknown) => void;
-
-export { }
+export * from './controllers/index.js';
+export * from './primitives/index.js';
+export * from './screens/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AAGvC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,oBAAoB,CAAC"}