@iyulab/components 0.3.0 → 1.0.0

package/dist/components/progress-bar/UProgressBar.js

@@ -1,5 +1,97 @@
-import { UProgressBar } from './UProgressBar.component.js';
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UProgressBar.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/progress-bar/UProgressBar.ts
+var UProgressBar = class UProgressBar extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.indeterminate = false;
+		this.striped = false;
+		this.rounded = false;
+		this.status = "default";
+		this.segments = 0;
+		this.segmentGap = 3;
+		this.min = 0;
+		this.max = 100;
+		this.value = 0;
+		this.progress = 0;
+		this.bufferProgress = 0;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"min",
+			"max",
+			"buffer",
+			"value"
+		].some((k) => changedProperties.has(k))) {
+			this.progress = this.calcProgress(this.value);
+			this.bufferProgress = this.buffer !== void 0 ? this.calcProgress(this.buffer) : 0;
+		}
+	}
+	render() {
+		const hasBuffer = this.buffer !== void 0 && !this.indeterminate;
+		const hasSegments = this.segments > 1;
+		return html`
+      <div class="buffer" part="buffer" ?hidden=${!hasBuffer}
+        style=${`transform: scaleX(${this.bufferProgress})`}
+      ></div>
 
-UProgressBar.define("u-progress-bar");
+      <div class="indicator" part="indicator"
+        style=${this.indeterminate ? "" : `transform: scaleX(${this.progress})`}
+      ></div>
 
+      <div class="segments" part="segments" ?hidden=${!hasSegments}>
+        ${Array.from({ length: Math.max(this.segments - 1, 0) }, (_, i) => {
+			return html`<div class="segment-gap" style="left: ${(i + 1) / this.segments * 100}%; width: ${this.segmentGap}px;"></div>`;
+		})}
+      </div>
+
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+	}
+	calcProgress(value) {
+		const range = this.max - this.min;
+		if (range === 0) return 0;
+		const p = (Math.max(this.min, Math.min(this.max, value)) - this.min) / range;
+		return isNaN(p) ? 0 : p;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "striped", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "rounded", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressBar.prototype, "status", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "segments", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "segment-gap"
+}), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "segmentGap", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "min", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "max", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "buffer", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "progress", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressBar.prototype, "bufferProgress", void 0);
+UProgressBar = __decorate([customElement("u-progress-bar")], UProgressBar);
+//#endregion
 export { UProgressBar };

package/dist/components/progress-bar/UProgressBar.styles.js

@@ -1,73 +1,147 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/progress-bar/UProgressBar.styles.ts
+var styles = css`
   :host {
-    --progress-value: 0;
+    --progress-bar-height: 0.5em;
+    --progress-bar-color: var(--u-blue-600);
+    --progress-bar-buffer-color: var(--u-blue-200);
+    --progress-bar-track-color: var(--u-neutral-200);
+  }
+
+  /* === Status Colors === */
+  :host([status="success"]) { 
+    --progress-bar-color: var(--u-green-600); 
+    --progress-bar-buffer-color: var(--u-green-200); 
+  }
+  :host([status="warning"]) { 
+    --progress-bar-color: var(--u-yellow-500); 
+    --progress-bar-buffer-color: var(--u-yellow-200); 
+  }
+  :host([status="error"]) { 
+    --progress-bar-color: var(--u-red-600); 
+    --progress-bar-buffer-color: var(--u-red-200); 
+  }
+  :host([status="info"]) { 
+    --progress-bar-color: var(--u-blue-500); 
+    --progress-bar-buffer-color: var(--u-blue-200); 
   }
 
   :host {
     position: relative;
     display: block;
     width: 100%;
-    height: 1em;
-    border-radius: 9999px;
-    background-color: var(--u-neutral-200);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    height: var(--progress-bar-height);
+    background-color: var(--progress-bar-track-color);
     overflow: hidden;
   }
 
+  /* === Rounded === */
+  :host([rounded]) {
+    border-radius: 9999px;
+  }
+
+  /* === Indeterminate === */
+  :host([indeterminate]) .indicator {
+    animation: indeterminate-move 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    transform: none !important;
+    inset: 0;
+  }
+
+  /* === Striped Effect === */
+  :host([striped]) .indicator {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 1em 1em;
+    animation: striped-move 1s linear infinite;
+  }
+
+  :host([striped][indeterminate]) .indicator {
+    animation:
+      indeterminate-move 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite,
+      striped-move 1s linear infinite;
+  }
+
+  /* === Indicator Bar === */
   .indicator {
     position: absolute;
-    inset: 0 0 0 0;
-    display: block;
+    inset: 0;
     border-radius: inherit;
-    background-color: var(--u-blue-600);
+    background-color: var(--progress-bar-color);
     transform-origin: left center;
-    will-change: transform, opacity;
-  }
-  .indicator[state="turned-on"] {
-    opacity: 0;
     transform: scaleX(0);
-    transition: none;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
   }
-  .indicator[state="turned-off"] {
-    opacity: 0;
-    transform: scaleX(1);
-    transition: transform 0.3s ease, opacity 0.5s ease;
+
+  /* === Buffer Bar === */
+  .buffer {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: var(--progress-bar-buffer-color);
+    transform-origin: left center;
+    transform: scaleX(0);
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
   }
-  .indicator[state="determinate"] {
-    opacity: 1;
-    transform: scaleX(var(--progress-value));
-    transition: transform 0.3s ease;
+
+  /* === Segments === */
+  .segments {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
   }
-  .indicator[state="indeterminate"] {
-    opacity: 1;
-    transform: scaleX(1);
-    animation: indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  .segment-gap {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: var(--progress-bar-track-color);
+    transform: translateX(-50%);
   }
 
+  /* === Content (슬롯) === */
   .content {
     position: absolute;
-    z-index: 100;
+    inset: 0;
+    z-index: 3;
     display: flex;
-    inset: 0 0 0 0;
     align-items: center;
     justify-content: center;
-    font-size: 0.5em;
-    line-height: 1em;
+    font-size: 0.65em;
+    line-height: 1;
     white-space: nowrap;
     user-select: none;
     pointer-events: none;
   }
 
-  @keyframes indeterminate {
+  @keyframes indeterminate-move {
     0% {
-      transform: translateX(-100%);
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
     }
     100% {
-      transform: translateX(100%);
+      left: 100%;
+      right: -90%;
     }
   }
-`;
 
+  @keyframes striped-move {
+    from { background-position: 1em 0; }
+    to { background-position: 0 0; }
+  }
+`;
+//#endregion
 export { styles };

package/dist/components/progress-ring/UProgressRing.d.ts

@@ -1,8 +1,51 @@
-import { UProgressRing } from './UProgressRing.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type ProgressRingStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * 원형 진행 표시기 컴포넌트입니다.
+ *
+ * @slot - 링 중앙에 표시할 콘텐츠 (예: 퍼센트)
+ *
+ * @csspart svg - 링을 감싸는 SVG 요소
+ * @csspart content - 링 중앙의 콘텐츠 래퍼
+ *
+ * @cssprop --progress-ring-size - 링의 크기 (기본: 6em)
+ * @cssprop --progress-ring-color - 링 색상
+ * @cssprop --progress-ring-track-width - 트랙/링 두께 (기본: 6)
+ * @cssprop --progress-ring-track-color - 트랙 배경색
+ * @cssprop --progress-ring-buffer-color - 버퍼 링 색상
+ */
+export declare class UProgressRing extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 불확정 상태 (로딩 애니메이션 표시) */
+    indeterminate: boolean;
+    /** 둥근 끝 (stroke-linecap: round) */
+    rounded: boolean;
+    /** 상태 (색상 변경) */
+    status: ProgressRingStatus;
+    /** 세그먼트 개수 */
+    segments: number;
+    /** 세그먼트 간격 (pathLength 기준 비율) */
+    segmentGap: number;
+    /** 최소값 */
+    min: number;
+    /** 최대값 */
+    max: number;
+    /** 버퍼값 */
+    buffer?: number;
+    /** 현재값 */
+    value: number;
+    private progress;
+    private bufferProgress;
+    private dasharray;
+    private uuid;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private calcProgress;
+    private calcDasharray;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-progress-ring': UProgressRing;
     }
 }
-export { UProgressRing };
-export type { ProgressRingVariant } from './UProgressRing.component.js';

package/dist/components/progress-ring/UProgressRing.js

@@ -1,5 +1,155 @@
-import { UProgressRing } from './UProgressRing.component.js';
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UProgressRing.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/progress-ring/UProgressRing.ts
+var PATH_LENGTH = 100;
+var RADIUS = 44;
+var UProgressRing = class UProgressRing extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.indeterminate = false;
+		this.rounded = false;
+		this.status = "default";
+		this.segments = 0;
+		this.segmentGap = 2;
+		this.min = 0;
+		this.max = 100;
+		this.value = 0;
+		this.progress = 0;
+		this.bufferProgress = 0;
+		this.dasharray = PATH_LENGTH.toString();
+		this.uuid = `pr-${Math.random().toString(36).slice(2, 8)}`;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"min",
+			"max",
+			"buffer",
+			"value"
+		].some((k) => changedProperties.has(k))) {
+			this.progress = this.calcProgress(this.value);
+			this.bufferProgress = this.buffer !== void 0 ? this.calcProgress(this.buffer) : 0;
+		}
+		if (["segments", "segmentGap"].some((k) => changedProperties.has(k))) this.dasharray = this.calcDasharray(this.segments, this.segmentGap);
+	}
+	render() {
+		const hasBuffer = this.buffer !== void 0 && !this.indeterminate;
+		const linecap = this.rounded ? "round" : "butt";
+		const progressOffset = PATH_LENGTH * (1 - this.progress);
+		const bufferOffset = PATH_LENGTH * (1 - this.bufferProgress);
+		const maskId = `${this.uuid}-mask`;
+		const bufferMaskId = `${this.uuid}-buf-mask`;
+		return html`
+      <svg class="ring" part="svg" viewBox="0 0 100 100">
+        <defs>
+          <mask id="${maskId}">
+            <circle class="mask-progress"
+              cx="50" cy="50" r="${RADIUS}"
+              fill="none"
+              pathLength="${PATH_LENGTH}"
+              stroke="white"
+              stroke-width="var(--progress-ring-track-width, 6)"
+              stroke-dasharray="${PATH_LENGTH}"
+              stroke-dashoffset="${progressOffset}"
+              stroke-linecap="${linecap}"
+            />
+          </mask>
+          <mask id="${bufferMaskId}">
+            <circle class="mask-buffer"
+              cx="50" cy="50" r="${RADIUS}"
+              ?hidden=${!hasBuffer}
+              fill="none"
+              pathLength="${PATH_LENGTH}"
+              stroke="white"
+              stroke-width="var(--progress-ring-track-width, 6)"
+              stroke-dasharray="${PATH_LENGTH}"
+              stroke-dashoffset="${bufferOffset}"
+              stroke-linecap="${linecap}"
+            />
+          </mask>
+        </defs>
 
-UProgressRing.define("u-progress-ring");
+        <circle class="track"
+          cx="50" cy="50" r="${RADIUS}"
+          pathLength="${PATH_LENGTH}"
+          stroke-dasharray="${this.dasharray}"
+          stroke-linecap="${linecap}"
+        ></circle>
 
+        <circle class="buffer"
+          cx="50" cy="50" r="${RADIUS}"
+          ?hidden=${!hasBuffer}
+          pathLength="${PATH_LENGTH}"
+          stroke-dasharray="${this.dasharray}"
+          stroke-linecap="${linecap}"
+          mask="url(#${bufferMaskId})"
+        ></circle>
+
+        <circle class="indicator determinate"
+          cx="50" cy="50" r="${RADIUS}"
+          ?hidden=${this.indeterminate}
+          pathLength="${PATH_LENGTH}"
+          stroke-dasharray="${this.dasharray}"
+          stroke-linecap="${linecap}"
+          mask="url(#${maskId})"
+        ></circle>
+
+        <circle class="indicator indeterminate"
+          cx="50" cy="50" r="${RADIUS}"
+          ?hidden=${!this.indeterminate}
+          pathLength="${PATH_LENGTH}"
+        ></circle>
+      </svg>
+
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+	}
+	calcProgress(value) {
+		const range = this.max - this.min;
+		if (range === 0) return 0;
+		const p = (Math.max(this.min, Math.min(this.max, value)) - this.min) / range;
+		return isNaN(p) ? 0 : p;
+	}
+	calcDasharray(count, gap) {
+		if (count > 1) {
+			const dashLen = (PATH_LENGTH - count * gap) / count;
+			return `${Math.max(dashLen, .5)} ${gap}`;
+		} else return PATH_LENGTH.toString();
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressRing.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressRing.prototype, "rounded", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UProgressRing.prototype, "status", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "segments", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "segment-gap"
+}), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "segmentGap", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "min", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "max", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "buffer", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "progress", void 0);
+__decorate([state(), __decorateMetadata("design:type", Number)], UProgressRing.prototype, "bufferProgress", void 0);
+__decorate([state(), __decorateMetadata("design:type", String)], UProgressRing.prototype, "dasharray", void 0);
+UProgressRing = __decorate([customElement("u-progress-ring")], UProgressRing);
+//#endregion
 export { UProgressRing };

package/dist/components/progress-ring/UProgressRing.styles.js

@@ -1,52 +1,115 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/progress-ring/UProgressRing.styles.ts
+var styles = css`
   :host {
-    --track-width: 0.25em;
-    --track-color: var(--u-neutral-200, #e5e7eb);
-    --indicator-color: var(--u-blue-600, #3b82f6);
+    --progress-ring-size: 6em;
+    --progress-ring-color: var(--u-blue-600);
+    --progress-ring-track-width: 6;
+    --progress-ring-track-color: var(--u-neutral-200);
+    --progress-ring-buffer-color: var(--u-blue-200);
+  }
+
+  /* === Status Colors === */
+  :host([status="success"]) { 
+    --progress-ring-color: var(--u-green-600);
+    --progress-ring-buffer-color: var(--u-green-200);
+  }
+  :host([status="warning"]) { 
+    --progress-ring-color: var(--u-yellow-500);
+    --progress-ring-buffer-color: var(--u-yellow-200);
+  }
+  :host([status="error"]) { 
+    --progress-ring-color: var(--u-red-600);
+    --progress-ring-buffer-color: var(--u-red-200);
+  }
+  :host([status="info"]) { 
+    --progress-ring-color: var(--u-blue-500);
+    --progress-ring-buffer-color: var(--u-blue-200);
   }
 
+  /* === Host === */
   :host {
     position: relative;
     display: inline-flex;
+    width: var(--progress-ring-size);
+    height: var(--progress-ring-size);
     font-size: inherit;
   }
 
-  .progress-ring {
-    position: relative;
-    width: 6em;
-    height: 6em;
-    transform: rotate(-90deg); /* 0%가 위에서 시작하도록 회전 */
+  /* === Indeterminate === */
+  :host([indeterminate]) .ring {
+    animation: ring-rotate 1.4s linear infinite;
+  }
+  :host([indeterminate]) .indicator.indeterminate {
+    animation: ring-dash 2s ease-in-out infinite;
+    transition: none;
+    stroke-linecap: round;
   }
-  .progress-ring circle {
+
+  /* === SVG Ring === */
+  .ring {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+  .ring circle {
     fill: none;
-    stroke-width: var(--track-width);
-    r: calc(3em - var(--track-width) / 2);
-    cx: 3em;
-    cy: 3em;
+    stroke-width: var(--progress-ring-track-width);
   }
 
+  /* === Mask === */
+  .mask-progress,
+  .mask-buffer {
+    transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* === Track === */
   .track {
-    stroke: var(--track-color);
+    stroke: var(--progress-ring-track-color);
   }
-  .indicator {
-    stroke: var(--indicator-color);
-    transition: stroke-dashoffset 350ms ease;
+
+  /* === Buffer === */
+  .buffer {
+    stroke: var(--progress-ring-buffer-color);
   }
 
-  /* 라벨 중앙 숫자 */
-  .label {
+  /* === Indicator === */
+  .indicator {
+    stroke: var(--progress-ring-color);
+  }
+  
+  /* === Content (슬롯) === */
+  .content {
     position: absolute;
-    inset: 0 0 0 0;
+    inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 1em;
-    color: var(--indicator-color);
+    color: var(--progress-ring-color);
     pointer-events: none;
   }
-`;
 
+  @keyframes ring-rotate {
+    from { transform: rotate(-90deg); }
+    to { transform: rotate(270deg); }
+  }
+
+  @keyframes ring-dash {
+    0% {
+      stroke-dasharray: 1 99;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 60 40;
+      stroke-dashoffset: -20;
+    }
+    100% {
+      stroke-dasharray: 1 99;
+      stroke-dashoffset: -99;
+    }
+  }
+`;
+//#endregion
 export { styles };

package/dist/components/radio/URadio.d.ts

@@ -0,0 +1,41 @@
+import { PropertyValues } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+export type RadioType = "default" | "button";
+export type RadioVariant = "filled" | "outlined";
+export type RadioOrientation = "vertical" | "horizontal";
+/**
+ * 여러 라디오 버튼 중 하나를 선택하는 라디오 그룹 컴포넌트입니다.
+ *
+ * @slot - u-option 아이템
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - 옵션들을 감싸는 컨테이너
+ *
+ * @event change - 선택 값이 변경될 때 발생
+ */
+export declare class URadio extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 라디오 유형 */
+    type: RadioType;
+    /** 스타일 변형 */
+    variant: RadioVariant;
+    /** 배치 방향 */
+    orientation: RadioOrientation;
+    private options;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private setup;
+    private cleanup;
+    private onChangeValue;
+    private handleSlotChange;
+    private handleOptionClick;
+    private handleOptionKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-radio': URadio;
+    }
+}