@iyulab/components 0.1.0

package/dist/components/icon-button/IconButton.styles.js

@@ -0,0 +1,69 @@
+import { css as o } from "lit";
+const e = o`
+  :host {
+    position: relative;
+    display: inline-flex;
+    
+    font-size: 16px;
+    color: var(--u-icon-color);
+    padding: 0.5em;
+    background-color: var(--u-bg-color);
+    border: 1px solid var(--u-border-color);
+    border-radius: 6px;
+
+    transition: all 0.2s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host([borderless]) {
+    border: none;
+    background-color: transparent;
+  }
+  :host([borderless]:hover) {
+    border: none;
+    background-color: transparent;
+  }
+  :host([borderless]:active) {
+    border: none;
+    background-color: transparent;
+  }
+  :host([loading]),
+  :host([disabled]) {
+    pointer-events: none;
+  }
+  :host([disabled]) {
+    opacity: 0.6;
+    color: var(--u-icon-color-disabled);
+  }
+  :host(:hover) {
+    color: var(--u-icon-color-hover);
+    background-color: var(--u-bg-color-hover);
+    border-color: var(--u-border-color-strong);
+  }
+  :host(:active) {
+    color: var(--u-icon-color-active);
+    background-color: var(--u-bg-color-active);
+    transform: translateY(1px);
+  }
+
+  button {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  button:focus-visible {
+    outline: 2px solid var(--u-blue-500, #3b82f6);
+    outline-offset: 2px;
+    border-radius: inherit;
+  }
+
+  u-icon,
+  u-spinner {
+    font-size: inherit;
+    color: inherit;
+  }
+`;
+export {
+  e as styles
+};

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,7 @@
+import { IconButton } from './IconButton.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-icon-button": IconButton;
+    }
+}
+export { IconButton };

package/dist/components/index.d.ts

@@ -0,0 +1,14 @@
+export * from './alert';
+export * from './button';
+export * from './context-menu';
+export * from './dialog';
+export * from './form';
+export * from './icon';
+export * from './icon-button';
+export * from './input';
+export * from './menu';
+export * from './panel';
+export * from './progress-ring';
+export * from './spinner';
+export * from './split-panel';
+export * from './tooltip';

package/dist/components/input/Input.d.ts

@@ -0,0 +1,73 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Input 컴포넌트는 사용자 입력을 받는 텍스트 입력 필드입니다.
+ * prefix, suffix 슬롯과 라벨, 도움말, 유효성 검사 등의 기능을 제공합니다.
+ */
+export declare class Input extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    input: HTMLInputElement;
+    /** password type인 경우 비밀번호 표시/숨김 상태 */
+    showPassword: boolean;
+    /** 유효성 검사 실패 여부 */
+    isInvalid: boolean;
+    /** 현재 표시할 유효성 검사 메시지 */
+    currentValidationMessage: string;
+    /** input 요소의 type 속성 */
+    type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+    /** 필수 입력 여부 */
+    required: boolean;
+    /** 비활성화 여부 */
+    disabled: boolean;
+    /** 클리어 버튼 표시 여부 */
+    clearable: boolean;
+    /** 읽기 전용 여부 */
+    readonly: boolean;
+    /** input 요소의 name 속성 */
+    name?: string;
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 라벨 도움말 (툴팁) */
+    labelhelp?: string;
+    /** placeholder 텍스트 */
+    placeholder?: string;
+    /** 컴포넌트 하단 설명 텍스트 */
+    description?: string;
+    /** 최소 길이 */
+    minlength?: number;
+    /** 최대 길이 */
+    maxlength?: number;
+    /** 맞춤법 검사 여부 */
+    spellcheck: boolean;
+    /** autocomplete 속성 */
+    autocomplete?: string;
+    /** 입력값 */
+    value: string;
+    /** 유효성 검사 패턴 (정규식) */
+    pattern?: string;
+    /** 유효성 검사 실패 시 표시할 메시지 */
+    validationMessage?: string;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 라벨 영역을 렌더링합니다. */
+    private renderHeader;
+    /** 유효성 검사를 수행합니다. */
+    validate(): boolean;
+    /** 입력값을 초기화합니다. */
+    clear(): void;
+    /** 입력 필드에 포커스를 설정합니다. */
+    focus(): void;
+    /** 입력 필드의 포커스를 해제합니다. */
+    blur(): void;
+    /** input 이벤트 핸들러 */
+    private handleInput;
+    /** change 이벤트 핸들러 */
+    private handleChange;
+    /** blur 이벤트 핸들러 */
+    private handleBlur;
+    /** 클리어 버튼 클릭 핸들러 */
+    private handleClear;
+    /** 비밀번호 표시/숨김 토글 핸들러 */
+    private handlePasswordToggle;
+}

package/dist/components/input/Input.js

@@ -0,0 +1,193 @@
+import { html as o, nothing as u } from "lit";
+import { query as c, state as p, property as s } from "lit/decorators.js";
+import { ifDefined as r } from "lit/directives/if-defined.js";
+import { live as y } from "lit/directives/live.js";
+import { BaseElement as v } from "../BaseElement.js";
+import { Icon as f } from "../icon/Icon.js";
+import { Tooltip as g } from "../tooltip/Tooltip.js";
+import { styles as m } from "./Input.styles.js";
+var $ = Object.defineProperty, t = (n, i, a, b) => {
+  for (var l = void 0, h = n.length - 1, d; h >= 0; h--)
+    (d = n[h]) && (l = d(i, a, l) || l);
+  return l && $(i, a, l), l;
+};
+class e extends v {
+  constructor() {
+    super(...arguments), this.showPassword = !1, this.isInvalid = !1, this.currentValidationMessage = "", this.type = "text", this.required = !1, this.disabled = !1, this.clearable = !1, this.readonly = !1, this.spellcheck = !1, this.value = "", this.handleInput = (i) => {
+      const a = i.target;
+      this.value = a.value, this.isInvalid && (this.isInvalid = !1, this.currentValidationMessage = ""), this.emit("u-input", { value: this.value });
+    }, this.handleChange = (i) => {
+      const a = i.target;
+      this.value = a.value, this.emit("u-change", { value: this.value });
+    }, this.handleBlur = () => {
+      this.validate();
+    }, this.handleClear = (i) => {
+      i.stopPropagation(), this.clear();
+    }, this.handlePasswordToggle = (i) => {
+      i.stopPropagation(), this.showPassword = !this.showPassword, this.focus();
+    };
+  }
+  static {
+    this.styles = [super.styles, m];
+  }
+  static {
+    this.dependencies = {
+      "u-icon": f,
+      "u-tooltip": g
+    };
+  }
+  updated(i) {
+    super.updated(i), i.has("value") && this.input && this.input.value !== this.value && (this.input.value = this.value);
+  }
+  render() {
+    return o`
+      ${this.renderHeader()}
+      
+      <div class="container"
+        ?invalid=${this.isInvalid}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}>
+        <slot name="prefix" class="prefix"></slot>
+        
+        <input part="input"
+          type=${this.type === "password" && this.showPassword ? "text" : this.type}
+          name=${r(this.name)}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          placeholder=${r(this.placeholder)}
+          minlength=${r(this.minlength)}
+          maxlength=${r(this.maxlength)}
+          spellcheck=${this.spellcheck}
+          autocomplete=${r(this.autocomplete)}
+          pattern=${r(this.pattern)}
+          .value=${y(this.value)}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @blur=${this.handleBlur}
+        />
+        
+        <slot name="suffix" class="suffix"></slot>
+        
+        <div class="tools">
+          <u-icon class="tool" name=${this.showPassword ? "eye-slash" : "eye"}
+            ?hidden=${this.type !== "password" || this.disabled || this.readonly}
+            @click=${this.handlePasswordToggle}
+          ></u-icon>
+          <u-icon class="tool" name="x-lg"
+            ?hidden=${!this.clearable || !this.value || this.disabled || this.readonly}
+            @click=${this.handleClear}
+          ></u-icon>
+        </div>
+      </div>
+
+      <div class="validation-error" role="alert" ?hidden=${!this.currentValidationMessage}>
+        ${this.currentValidationMessage}
+      </div>
+
+      <div class="description" ?hidden=${!this.description}>
+        ${this.description}
+      </div>
+    `;
+  }
+  /** 라벨 영역을 렌더링합니다. */
+  renderHeader() {
+    return this.label ? o`
+      <div class="header">
+        <label class="label" @click=${this.focus}>
+          ${this.label}
+          ${this.required ? o`<span class="required-mark">*</span>` : ""}
+        </label>
+        
+        ${this.labelhelp ? o`
+          <u-icon class="help-icon" name="info-circle-fill"></u-icon>
+          <u-tooltip trigger-selectors=".help-icon" placement="right-end">${this.labelhelp}</u-tooltip>
+        ` : u}
+      </div>
+    ` : u;
+  }
+  /** 유효성 검사를 수행합니다. */
+  validate() {
+    if (!this.input) return !0;
+    const i = this.input.checkValidity();
+    return this.isInvalid = !i, i ? this.currentValidationMessage = "" : this.currentValidationMessage = this.validationMessage || this.input.validationMessage, i;
+  }
+  /** 입력값을 초기화합니다. */
+  clear() {
+    this.value = "", this.isInvalid = !1, this.currentValidationMessage = "", this.focus(), this.emit("u-clear");
+  }
+  /** 입력 필드에 포커스를 설정합니다. */
+  focus() {
+    this.input?.focus();
+  }
+  /** 입력 필드의 포커스를 해제합니다. */
+  blur() {
+    this.input?.blur();
+  }
+}
+t([
+  c("input")
+], e.prototype, "input");
+t([
+  p()
+], e.prototype, "showPassword");
+t([
+  p()
+], e.prototype, "isInvalid");
+t([
+  p()
+], e.prototype, "currentValidationMessage");
+t([
+  s({ type: String, reflect: !0 })
+], e.prototype, "type");
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "required");
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "clearable");
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "readonly");
+t([
+  s({ type: String })
+], e.prototype, "name");
+t([
+  s({ type: String })
+], e.prototype, "label");
+t([
+  s({ type: String })
+], e.prototype, "labelhelp");
+t([
+  s({ type: String })
+], e.prototype, "placeholder");
+t([
+  s({ type: String })
+], e.prototype, "description");
+t([
+  s({ type: Number })
+], e.prototype, "minlength");
+t([
+  s({ type: Number })
+], e.prototype, "maxlength");
+t([
+  s({ type: Boolean })
+], e.prototype, "spellcheck");
+t([
+  s({ type: String })
+], e.prototype, "autocomplete");
+t([
+  s({ type: String })
+], e.prototype, "value");
+t([
+  s({ type: String })
+], e.prototype, "pattern");
+t([
+  s({ type: String })
+], e.prototype, "validationMessage");
+export {
+  e as Input
+};

package/dist/components/input/Input.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/input/Input.styles.js

@@ -0,0 +1,149 @@
+import { css as o } from "lit";
+const r = o`
+  :host {
+    display: inline-block;
+    font-size: inherit;
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  /* 헤더 영역 */
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 0.375em;
+    margin-bottom: 0.5em;
+  }
+  .header .label {
+    font-size: 0.8em;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--u-text-color);
+    user-select: none;
+    cursor: pointer;
+  }
+  .header .required-mark {
+    color: var(--u-red-600);
+    margin-left: 0.25em;
+  }
+  .header .help-icon {
+    font-size: 0.8em;
+    cursor: help;
+  }
+
+  /* 입력 래퍼 */
+  .container {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.5em 0.75em;
+    background-color: var(--u-bg-color);
+    border: 1px solid var(--u-input-border-color);
+    border-radius: 0.375em;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+  .container[invalid] {
+    border-color: var(--u-red-600);
+  }
+  .container[invalid]:focus-within {
+    box-shadow: 0 0 0 0.125em rgba(244, 67, 54, 0.1);
+  }
+  .container[disabled] {
+    background-color: var(--u-bg-color-disabled);
+    border-color: var(--u-border-color-weak);
+    cursor: not-allowed;
+  }
+  .container[readonly] {
+    background-color: var(--u-neutral-50);
+    border-color: var(--u-border-color-weak);
+  }
+  .container:hover:not(([disabled])):not(([readonly])) {
+    border-color: var(--u-input-border-hover);
+  }
+  .container:focus-within:not(([disabled])):not(([readonly])) {
+    border-color: var(--u-input-border-focus);
+    box-shadow: 0 0 0 0.125em rgba(33, 150, 243, 0.1);
+    outline: none;
+  }
+
+  /* 입력 필드 */
+  input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    font-family: inherit;
+    font-size: 1em;
+    line-height: 1.5;
+    color: var(--u-text-color);
+    padding: 0;
+  }
+  input::placeholder {
+    color: var(--u-text-color-disabled);
+  }
+  input:disabled {
+    cursor: not-allowed;
+    color: var(--u-text-color-disabled);
+  }
+  input:read-only {
+    cursor: default;
+  }
+
+  /* Prefix & Suffix 슬롯 */
+  ::slotted([slot="prefix"]),
+  ::slotted([slot="suffix"]) {
+    display: contents;
+  }
+
+  /* Tools 영역 (clear, password toggle 등) */
+  .tools {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.375em;
+  }
+  .tool {
+    font-size: 1.125em;
+    color: var(--u-icon-color);
+    transition: color 0.2s ease;
+    cursor: pointer;
+  }
+  .tool:hover {
+    color: var(--u-icon-color-hover);
+  }
+  .tool:active {
+    color: var(--u-icon-color-active);
+  }
+
+  /* 유효성 검사 에러 메시지 */
+  .validation-error {
+    margin-top: 0.375em;
+    font-size: 0.8125em;
+    color: var(--u-red-600);
+    line-height: 1.4;
+  }
+
+  /* 설명 텍스트 */
+  .description {
+    margin-top: 0.375em;
+    font-size: 0.8125em;
+    color: var(--u-soft-text-color);
+    line-height: 1.4;
+  }
+
+  /* Number input 기본 스타일 제거 (브라우저 간 일관성 위해) */
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+  /* Number input 스피너 제거 옵션 (선택적) */
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;
+export {
+  r as styles
+};

package/dist/components/input/index.d.ts

@@ -0,0 +1,7 @@
+import { Input } from './Input.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-input": Input;
+    }
+}
+export { Input };

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,36 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Menu 컴포넌트는 일반적인 메뉴 컨테이너입니다.
+ * MenuItem 컴포넌트를 자식으로 포함하여 메뉴를 구성합니다.
+ */
+export declare class Menu extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 슬롯에 할당된 메뉴 항목들을 가져옵니다. */
+    private items;
+    /** 메뉴가 열려있는지 여부입니다. */
+    open: boolean;
+    /** 메뉴 항목 중 하나만 선택할 수 있는지 여부입니다. */
+    selectable: boolean;
+    /** 현재 선택된 메뉴 항목의 값입니다. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 메뉴를 표시합니다. */
+    show: () => Promise<void>;
+    /** 메뉴를 숨깁니다. */
+    hide: () => Promise<void>;
+    /** open 상태가 변경될 때 호출됩니다. */
+    private updateOpenState;
+    /** 선택 상태를 업데이트합니다. */
+    private updateSelection;
+    /** 슬롯 변경 이벤트를 처리합니다. */
+    private handleSlotChange;
+    /** 메뉴 항목 선택 이벤트를 처리합니다. */
+    private handleSelect;
+    /** 키보드 네비게이션을 처리합니다. */
+    private handleKeydown;
+}

package/dist/components/menu/Menu.js

@@ -0,0 +1,103 @@
+import { html as c } from "lit";
+import { queryAssignedElements as u, property as o } from "lit/decorators.js";
+import { BaseElement as d } from "../BaseElement.js";
+import { MenuItem as p } from "../menu-item/MenuItem.js";
+import { styles as m } from "./Menu.styles.js";
+var f = Object.defineProperty, i = (r, e, t, n) => {
+  for (var s = void 0, a = r.length - 1, h; a >= 0; a--)
+    (h = r[a]) && (s = h(e, t, s) || s);
+  return s && f(e, t, s), s;
+};
+class l extends d {
+  constructor() {
+    super(...arguments), this.open = !1, this.selectable = !1, this.value = "", this.show = async () => {
+      await this.updateComplete, requestAnimationFrame(() => {
+        this.open = !0;
+      });
+    }, this.hide = async () => {
+      await this.updateComplete, requestAnimationFrame(() => {
+        this.open = !1;
+      });
+    }, this.handleSlotChange = () => {
+      this.selectable && this.value && this.updateSelection();
+    }, this.handleSelect = (e) => {
+      const t = e, n = e.target;
+      this.selectable && n && (this.value = n.value || t.detail?.value || "", this.updateSelection());
+    }, this.handleKeydown = (e) => {
+      const t = this.items.filter((a) => !a.disabled);
+      if (t.length === 0) return;
+      const n = t.findIndex((a) => a === e.target);
+      let s = n;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), s = (n + 1) % t.length, t[s].focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), s = n - 1 < 0 ? t.length - 1 : n - 1, t[s].focus();
+          break;
+        case "Home":
+          e.preventDefault(), t[0].focus();
+          break;
+        case "End":
+          e.preventDefault(), t[t.length - 1].focus();
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), n >= 0 && t[n].click();
+          break;
+        case "Escape":
+          e.preventDefault(), this.hide();
+          break;
+      }
+    };
+  }
+  static {
+    this.styles = [super.styles, m];
+  }
+  static {
+    this.dependencies = {
+      "u-menu-item": p
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "menu"), this.addEventListener("u-select", this.handleSelect), this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("u-select", this.handleSelect), this.removeEventListener("keydown", this.handleKeydown), super.disconnectedCallback();
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && this.selectable && this.updateSelection(), e.has("open") && this.updateOpenState(this.open);
+  }
+  render() {
+    return c`
+      <div class="container">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+  /** open 상태가 변경될 때 호출됩니다. */
+  updateOpenState(e) {
+    e ? this.emit("u-show") : this.emit("u-hide");
+  }
+  /** 선택 상태를 업데이트합니다. */
+  updateSelection() {
+    this.items.forEach((e) => {
+      e.selected = e.value === this.value;
+    });
+  }
+}
+i([
+  u({ selector: "u-menu-item" })
+], l.prototype, "items");
+i([
+  o({ type: Boolean, reflect: !0 })
+], l.prototype, "open");
+i([
+  o({ type: Boolean })
+], l.prototype, "selectable");
+i([
+  o({ type: String })
+], l.prototype, "value");
+export {
+  l as Menu
+};

package/dist/components/menu/Menu.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/menu/Menu.styles.js

@@ -0,0 +1,33 @@
+import { css as o } from "lit";
+const t = o`
+  :host {
+    display: block;
+    width: max-content;
+    min-width: 180px;
+    
+    opacity: 0;
+    transform: scale(0.95);
+    transform-origin: top left;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    pointer-events: none;
+  }
+  :host([open]) {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    border: 1px solid var(--u-border-color, #ddd);
+    border-radius: 8px;
+    background-color: var(--u-bg-color, #fff);
+    overflow: auto;
+  }
+`;
+export {
+  t as styles
+};