@iyulab/components 0.1.0

package/dist/components/split-panel/Splitter.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from '../BaseElement.js';
+import { PanelOrientation } from './SplitPanel.types.js';
+/**
+ * Splitter 컴포넌트는 SplitPanel의 패널들 사이에 배치되는 디바이더입니다.
+ * 사용자가 드래그하여 패널의 크기를 조절할 수 있습니다.
+ */
+export declare class Splitter extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 드래그 중인지 여부를 나타냅니다. */
+    dragging: boolean;
+    /** 분할 방향을 설정합니다. */
+    orientation: PanelOrientation;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 스플리터의 크기를 반환합니다. */
+    get size(): number;
+}

package/dist/components/split-panel/Splitter.js

@@ -0,0 +1,39 @@
+import { html as p } from "lit";
+import { state as l, property as g } from "lit/decorators.js";
+import { BaseElement as d } from "../BaseElement.js";
+import { styles as m } from "./Splitter.styles.js";
+var f = Object.defineProperty, n = (r, e, i, u) => {
+  for (var t = void 0, s = r.length - 1, o; s >= 0; s--)
+    (o = r[s]) && (t = o(e, i, t) || t);
+  return t && f(e, i, t), t;
+};
+class a extends d {
+  constructor() {
+    super(...arguments), this.dragging = !1, this.orientation = "horizontal";
+  }
+  static {
+    this.styles = [super.styles, m];
+  }
+  static {
+    this.dependencies = {};
+  }
+  render() {
+    return p`
+      <div class="handler" ?dragging=${this.dragging}></div>
+    `;
+  }
+  /** 스플리터의 크기를 반환합니다. */
+  get size() {
+    const e = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
+    return parseFloat(e) || 2;
+  }
+}
+n([
+  l()
+], a.prototype, "dragging");
+n([
+  g({ type: String, reflect: !0 })
+], a.prototype, "orientation");
+export {
+  a as Splitter
+};

package/dist/components/split-panel/Splitter.styles.d.ts

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

package/dist/components/split-panel/Splitter.styles.js

@@ -0,0 +1,45 @@
+import { css as r } from "lit";
+const e = r`
+  :host {
+    position: relative;
+    display: block;
+    flex-shrink: 0;
+    background-color: var(--u-neutral-200, #e5e7eb);
+    transition: background-color 0.2s ease;
+
+    --splitter-size: 2px;
+    --handler-size: 6px;
+    --handler-color: var(--u-blue-500, #3b82f6);
+  }
+  :host([orientation="horizontal"]) {
+    width: var(--splitter-size, 2px);
+    height: 100%;
+    cursor: col-resize;
+  }
+  :host([orientation="vertical"]) {
+    width: 100%;
+    height: var(--splitter-size, 2px);
+    cursor: row-resize;
+  }
+
+  .handler {
+    position: absolute;
+    z-index: 100;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: block;
+    width: 300%;
+    height: 300%;
+    background-color: var(--handler-color, #3b82f6);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  .handler[dragging],
+  .handler:hover {
+    opacity: 1;
+  }
+`;
+export {
+  e as styles
+};

package/dist/components/split-panel/index.d.ts

@@ -0,0 +1,7 @@
+import { SplitPanel } from './SplitPanel.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-split-panel': SplitPanel;
+    }
+}
+export { SplitPanel };

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,44 @@
+import { PropertyValues } from 'lit';
+import { Placement } from '@floating-ui/dom';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Tooltip 컴포넌트는 대상 엘리먼트에 툴팁을 표시하는 기능을 제공합니다.
+ */
+export declare class Tooltip extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 슬롯이 비어있는지 여부를 나타냅니다. */
+    private isSlotEmpty;
+    /** 툴팁이 연결될 대상 엘리먼트입니다. 지정하지 않으면 부모 엘리먼트가 대상이 됩니다. */
+    triggers: HTMLElement[];
+    /** 트리거 셀렉터 문자열입니다. 이 속성을 사용하여 트리거 엘리먼트를 지정할 수 있습니다. */
+    triggerSelectors?: string;
+    /** 현재 툴팁이 열려있는지 여부를 나타냅니다. */
+    open: boolean;
+    /** 'fixed' 위치에서 포지션을 계산할지 여부를 설정합니다. 기본값은 false입니다. */
+    hoist: boolean;
+    /** 툴팁이 나타날 위치를 설정합니다. */
+    placement?: Placement;
+    /** 툴팁의 위치에서 대상 엘리먼트까지의 거리를 픽셀단위로 설정합니다. 기본값은 8입니다. */
+    distance: number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 툴팁을 표시합니다. */
+    show: (e?: Event) => Promise<void>;
+    /** 툴팁을 숨깁니다. */
+    hide: (_: Event) => Promise<void>;
+    /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
+    private attachTriggers;
+    /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
+    private detachTriggers;
+    /**
+   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
+   */
+    private getTransformOrigin;
+    /**
+     * slot에 콘텐츠가 존재하는지 확인합니다.
+     */
+    private handleSlotChange;
+}

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,130 @@
+import { html as l } from "lit";
+import { property as r } from "lit/decorators.js";
+import { offset as g, shift as p, flip as u, autoPlacement as m, computePosition as d } from "@floating-ui/dom";
+import { getParentElement as f, findElementsBy as y } from "../../internals/node-helpers.js";
+import { BaseElement as E } from "../BaseElement.js";
+import { styles as v } from "./Tooltip.styles.js";
+var T = Object.defineProperty, i = (a, t, e, n) => {
+  for (var s = void 0, h = a.length - 1, c; h >= 0; h--)
+    (c = a[h]) && (s = c(t, e, s) || s);
+  return s && T(t, e, s), s;
+};
+class o extends E {
+  constructor() {
+    super(...arguments), this.isSlotEmpty = !0, this.triggers = [], this.open = !1, this.hoist = !1, this.distance = 8, this.show = async (t) => {
+      await this.updateComplete;
+      const e = t?.currentTarget || this.triggers[0] || null;
+      if (!e || this.isSlotEmpty) return;
+      const n = [
+        g({ mainAxis: this.distance }),
+        p(),
+        u()
+      ];
+      this.placement || n.push(m());
+      const s = await d(e, this, {
+        placement: this.placement,
+        middleware: n,
+        strategy: this.hoist ? "fixed" : "absolute"
+      });
+      Object.assign(this.style, {
+        left: `${s.x}px`,
+        top: `${s.y}px`,
+        transformOrigin: this.getTransformOrigin(s.placement)
+      }), await this.updateComplete, requestAnimationFrame(() => {
+        this.open = !0;
+      });
+    }, this.hide = async (t) => {
+      await this.updateComplete, requestAnimationFrame(() => {
+        this.open = !1;
+      });
+    }, this.handleSlotChange = (t) => {
+      const n = t.target.assignedNodes({ flatten: !0 }) ?? [];
+      this.isSlotEmpty = !n.some((s) => !!(s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && s.textContent?.trim()));
+    };
+  }
+  static {
+    this.styles = [super.styles, v];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    if (super.connectedCallback(), this.triggers.length === 0) {
+      const t = f(this);
+      t && (this.triggers = [t]);
+    }
+  }
+  disconnectedCallback() {
+    this.detachTriggers(this.triggers), super.disconnectedCallback();
+  }
+  updated(t) {
+    if (super.updated(t), t.has("triggers") && this.triggers) {
+      const e = t.get("triggers");
+      this.detachTriggers(e), this.attachTriggers(this.triggers);
+    }
+    t.has("triggerSelectors") && this.triggerSelectors && (this.triggers = y(this, this.triggerSelectors));
+  }
+  render() {
+    return l`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+  }
+  /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
+  attachTriggers(t) {
+    if (t)
+      for (const e of t)
+        e.addEventListener("mouseenter", this.show), e.addEventListener("mouseleave", this.hide), e.addEventListener("focusin", this.show), e.addEventListener("focusout", this.hide);
+  }
+  /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
+  detachTriggers(t) {
+    if (t)
+      for (const e of t)
+        e.removeEventListener("mouseenter", this.show), e.removeEventListener("mouseleave", this.hide), e.removeEventListener("focusin", this.show), e.removeEventListener("focusout", this.hide);
+  }
+  /**
+  * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
+  */
+  getTransformOrigin(t) {
+    switch (t) {
+      case "top":
+      case "top-start":
+      case "top-end":
+        return "center bottom";
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        return "center top";
+      case "left":
+      case "left-start":
+      case "left-end":
+        return "right center";
+      case "right":
+      case "right-start":
+      case "right-end":
+        return "left center";
+      default:
+        return "center";
+    }
+  }
+}
+i([
+  r({ attribute: !1 })
+], o.prototype, "triggers");
+i([
+  r({ type: String, attribute: "trigger-selectors" })
+], o.prototype, "triggerSelectors");
+i([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "open");
+i([
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "hoist");
+i([
+  r({ type: String })
+], o.prototype, "placement");
+i([
+  r({ type: Number })
+], o.prototype, "distance");
+export {
+  o as Tooltip
+};

package/dist/components/tooltip/Tooltip.styles.d.ts

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

package/dist/components/tooltip/Tooltip.styles.js

@@ -0,0 +1,36 @@
+import { css as o } from "lit";
+const e = o`
+  :host {
+    position: absolute;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    display: block;
+    width: max-content;
+
+    padding: 8px;
+    color: var(--u-tooltip-text-color);
+    font-family: var(--u-font-modern, inherit);
+    font-size: 14px;
+    line-height: 1.5;
+    border: none;
+    border-radius: 4px;
+    background-color: var(--u-tooltip-bg-color);
+    
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0);
+    transition: opacity 0.15s ease, transform 0.15s ease;
+  }
+  :host([open]) {
+    opacity: 0.8;
+    transform: scale(1);
+    pointer-events: auto;
+  }
+  :host([hoist]) {
+    position: fixed;
+  }
+`;
+export {
+  e as styles
+};

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

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

package/dist/events/UChangeEvent.d.ts

@@ -0,0 +1,6 @@
+export type UChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'u-change': UChangeEvent;
+    }
+}

package/dist/events/UHideEvent.d.ts

@@ -0,0 +1,6 @@
+export type UHideEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'u-hide': UHideEvent;
+    }
+}

package/dist/events/UInputEvent.d.ts

@@ -0,0 +1,6 @@
+export type UInputEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'u-input': UInputEvent;
+    }
+}

package/dist/events/UResizeEvent.d.ts

@@ -0,0 +1,6 @@
+export type UResizeEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'u-resize': UResizeEvent;
+    }
+}

package/dist/events/USelectEvent.d.ts

@@ -0,0 +1,6 @@
+export type USelectEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'u-select': USelectEvent;
+    }
+}

package/dist/events/UShowEvent.d.ts

@@ -0,0 +1,6 @@
+export type UShowEvent = CustomEvent<Record<PropertyKey, never>>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'u-show': UShowEvent;
+    }
+}

package/dist/events/index.d.ts

@@ -0,0 +1,6 @@
+export * from './UChangeEvent';
+export * from './UHideEvent';
+export * from './UInputEvent';
+export * from './UResizeEvent';
+export * from './USelectEvent';
+export * from './UShowEvent';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utilities';

package/dist/index.js

@@ -0,0 +1,40 @@
+import { Alert as e } from "./components/alert/Alert.js";
+import { Button as p } from "./components/button/Button.js";
+import { ContextMenu as f } from "./components/context-menu/ContextMenu.js";
+import { Dialog as n } from "./components/dialog/Dialog.js";
+import { Form as i } from "./components/form/Form.js";
+import { Icon as g } from "./components/icon/Icon.js";
+import { IconButton as M } from "./components/icon-button/IconButton.js";
+import { Input as s } from "./components/input/Input.js";
+import { Menu as B } from "./components/menu/Menu.js";
+import { Panel as S } from "./components/panel/Panel.js";
+import { ProgressRing as h } from "./components/progress-ring/ProgressRing.js";
+import { Spinner as A } from "./components/spinner/Spinner.js";
+import { SplitPanel as D } from "./components/split-panel/SplitPanel.js";
+import { Tooltip as R } from "./components/tooltip/Tooltip.js";
+import { getPropertyMeta as b, propertyMeta as d, setPropertyMeta as j } from "./utilities/decorators.js";
+import { notifier as q } from "./utilities/notifier.js";
+import { BrowserStorage as z } from "./utilities/storage.js";
+import { theme as G } from "./utilities/theme.js";
+export {
+  e as Alert,
+  z as BrowserStorage,
+  p as Button,
+  f as ContextMenu,
+  n as Dialog,
+  i as Form,
+  g as Icon,
+  M as IconButton,
+  s as Input,
+  B as Menu,
+  S as Panel,
+  h as ProgressRing,
+  A as Spinner,
+  D as SplitPanel,
+  R as Tooltip,
+  b as getPropertyMeta,
+  q as notifier,
+  d as propertyMeta,
+  j as setPropertyMeta,
+  G as theme
+};

package/dist/integrations/react/UAlert.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Alert } from '../../components/alert/index';
+
+export declare const UAlert: React.ForwardRefExoticComponent<
+  Partial<Alert> & React.HTMLAttributes<Alert>
+>;
+
+export type UAlertProps = React.ComponentProps<typeof UAlert>;

package/dist/integrations/react/UAlert.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Alert } from '../../components/alert/index';
+
+export const UAlert = createComponent({
+  react: React,
+  tagName: 'u-alert',
+  elementClass: Alert,
+  events: {}
+});

package/dist/integrations/react/UButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '../../components/button/index';
+
+export declare const UButton: React.ForwardRefExoticComponent<
+  Partial<Button> & React.HTMLAttributes<Button>
+>;
+
+export type UButtonProps = React.ComponentProps<typeof UButton>;

package/dist/integrations/react/UButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Button } from '../../components/button/index';
+
+export const UButton = createComponent({
+  react: React,
+  tagName: 'u-button',
+  elementClass: Button,
+  events: {}
+});

package/dist/integrations/react/UContextMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContextMenu } from '../../components/context-menu/index';
+
+export declare const UContextMenu: React.ForwardRefExoticComponent<
+  Partial<ContextMenu> & React.HTMLAttributes<ContextMenu>
+>;
+
+export type UContextMenuProps = React.ComponentProps<typeof UContextMenu>;

package/dist/integrations/react/UContextMenu.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ContextMenu } from '../../components/context-menu/index';
+
+export const UContextMenu = createComponent({
+  react: React,
+  tagName: 'u-context-menu',
+  elementClass: ContextMenu,
+  events: {}
+});

package/dist/integrations/react/UCopyButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CopyButton } from '../../components/copy-button/index';
+
+export declare const UCopyButton: React.ForwardRefExoticComponent<
+  Partial<CopyButton> & React.HTMLAttributes<CopyButton>
+>;
+
+export type UCopyButtonProps = React.ComponentProps<typeof UCopyButton>;

package/dist/integrations/react/UCopyButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { CopyButton } from '../../components/copy-button/index';
+
+export const UCopyButton = createComponent({
+  react: React,
+  tagName: 'u-copy-button',
+  elementClass: CopyButton,
+  events: {}
+});

package/dist/integrations/react/UDialog.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Dialog } from '../../components/dialog/index';
+
+export declare const UDialog: React.ForwardRefExoticComponent<
+  Partial<Dialog> & React.HTMLAttributes<Dialog>
+>;
+
+export type UDialogProps = React.ComponentProps<typeof UDialog>;

package/dist/integrations/react/UDialog.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Dialog } from '../../components/dialog/index';
+
+export const UDialog = createComponent({
+  react: React,
+  tagName: 'u-dialog',
+  elementClass: Dialog,
+  events: {}
+});

package/dist/integrations/react/UForm.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Form } from '../../components/form/index';
+
+export declare const UForm: React.ForwardRefExoticComponent<
+  Partial<Form> & React.HTMLAttributes<Form>
+>;
+
+export type UFormProps = React.ComponentProps<typeof UForm>;

package/dist/integrations/react/UForm.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Form } from '../../components/form/index';
+
+export const UForm = createComponent({
+  react: React,
+  tagName: 'u-form',
+  elementClass: Form,
+  events: {}
+});

package/dist/integrations/react/UIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon } from '../../components/icon/index';
+
+export declare const UIcon: React.ForwardRefExoticComponent<
+  Partial<Icon> & React.HTMLAttributes<Icon>
+>;
+
+export type UIconProps = React.ComponentProps<typeof UIcon>;

package/dist/integrations/react/UIcon.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Icon } from '../../components/icon/index';
+
+export const UIcon = createComponent({
+  react: React,
+  tagName: 'u-icon',
+  elementClass: Icon,
+  events: {}
+});

package/dist/integrations/react/UIconButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IconButton } from '../../components/icon-button/index';
+
+export declare const UIconButton: React.ForwardRefExoticComponent<
+  Partial<IconButton> & React.HTMLAttributes<IconButton>
+>;
+
+export type UIconButtonProps = React.ComponentProps<typeof UIconButton>;

package/dist/integrations/react/UIconButton.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { IconButton } from '../../components/icon-button/index';
+
+export const UIconButton = createComponent({
+  react: React,
+  tagName: 'u-icon-button',
+  elementClass: IconButton,
+  events: {}
+});

package/dist/integrations/react/UInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Input } from '../../components/input/index';
+
+export declare const UInput: React.ForwardRefExoticComponent<
+  Partial<Input> & React.HTMLAttributes<Input>
+>;
+
+export type UInputProps = React.ComponentProps<typeof UInput>;

package/dist/integrations/react/UInput.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Input } from '../../components/input/index';
+
+export const UInput = createComponent({
+  react: React,
+  tagName: 'u-input',
+  elementClass: Input,
+  events: {}
+});

package/dist/integrations/react/UMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Menu } from '../../components/menu/index';
+
+export declare const UMenu: React.ForwardRefExoticComponent<
+  Partial<Menu> & React.HTMLAttributes<Menu>
+>;
+
+export type UMenuProps = React.ComponentProps<typeof UMenu>;

package/dist/integrations/react/UMenu.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { Menu } from '../../components/menu/index';
+
+export const UMenu = createComponent({
+  react: React,
+  tagName: 'u-menu',
+  elementClass: Menu,
+  events: {}
+});