@designbasekorea/ui-wc 0.8.9 → 0.8.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +32 -0
- package/README.md +38 -0
- package/dist/esm/components/db-ai-glow.d.ts +80 -0
- package/dist/esm/components/db-ai-glow.js +1 -0
- package/dist/esm/components/db-icons.d.ts +1 -1
- package/dist/esm/components/db-icons.js +1 -1
- package/dist/esm/components/db-navigation-rail.d.ts +44 -0
- package/dist/esm/components/db-navigation-rail.js +1 -0
- package/dist/esm/components/db-time-picker.d.ts +9 -0
- package/dist/esm/components/db-time-picker.js +1 -1
- package/dist/esm/components/db-toggle.d.ts +2 -0
- package/dist/esm/components/db-toggle.js +1 -1
- package/dist/esm/components/db-tooltip.js +1 -1
- package/dist/esm/core/i18n.d.ts +3 -0
- package/dist/esm/core/i18n.js +1 -1
- package/dist/esm/core/voice-meter.js +1 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/node_modules/@designbasekorea/ui-contracts/dist/components.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +190 -61
- package/dist/index.esm.js +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.d.ts +288 -62
- package/dist/react/index.esm.js +1 -1
- package/package.json +4 -3
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,102 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { ReactNode } from 'react';
|
|
3
|
-
import { BadgeVariant, BadgeType, TIME_PICKER_FORMATS, DOWNLOAD_PROGRESS_STATUSES, DOWNLOAD_PROGRESS_POSITIONS, OTP_INPUT_SIZES, PHONE_VERIFY_SIZES, EMAIL_VERIFY_SIZES, TWO_FACTOR_SIZES, CHAT_ORB_SIZES, CHAT_ORB_VARIANTS, CHAT_ORB_STATES, CHAT_ORB_THEMES, CHAT_MESSAGE_ROLES, CHAT_WIDGET_VIEWS, CHAT_WIDGET_POSITIONS } from '@designbasekorea/ui-contracts';
|
|
3
|
+
import { NavigationRailLabelDisplay, BadgeVariant, BadgeType, TIME_PICKER_FORMATS, DOWNLOAD_PROGRESS_STATUSES, DOWNLOAD_PROGRESS_POSITIONS, OTP_INPUT_SIZES, PHONE_VERIFY_SIZES, EMAIL_VERIFY_SIZES, TWO_FACTOR_SIZES, AI_GLOW_STATES, AI_GLOW_VARIANTS, AI_GLOW_SIZES, CHAT_ORB_SIZES, CHAT_ORB_VARIANTS, CHAT_ORB_STATES, CHAT_ORB_THEMES, CHAT_MESSAGE_ROLES, CHAT_WIDGET_VIEWS, CHAT_WIDGET_POSITIONS, ToggleVariant } from '@designbasekorea/ui-contracts';
|
|
4
|
+
|
|
5
|
+
declare class DbTooltip extends HTMLElement {
|
|
6
|
+
static get observedAttributes(): string[];
|
|
7
|
+
private tooltipId;
|
|
8
|
+
private trigger?;
|
|
9
|
+
private tooltip?;
|
|
10
|
+
private contentEl?;
|
|
11
|
+
private arrow?;
|
|
12
|
+
private visible;
|
|
13
|
+
private showTimer?;
|
|
14
|
+
private hideTimer?;
|
|
15
|
+
private repositionRaf?;
|
|
16
|
+
private enterRaf?;
|
|
17
|
+
private removalTimer?;
|
|
18
|
+
get content(): string;
|
|
19
|
+
set content(value: string);
|
|
20
|
+
get position(): string;
|
|
21
|
+
set position(value: string);
|
|
22
|
+
get size(): string;
|
|
23
|
+
set size(value: string);
|
|
24
|
+
get variant(): string;
|
|
25
|
+
set variant(value: string);
|
|
26
|
+
get disabled(): boolean;
|
|
27
|
+
set disabled(value: boolean);
|
|
28
|
+
get alwaysShow(): boolean;
|
|
29
|
+
set alwaysShow(value: boolean);
|
|
30
|
+
get delay(): number;
|
|
31
|
+
get hideDelay(): number;
|
|
32
|
+
get maxWidth(): number;
|
|
33
|
+
get showArrow(): boolean;
|
|
34
|
+
private childObserver?;
|
|
35
|
+
connectedCallback(): void;
|
|
36
|
+
disconnectedCallback(): void;
|
|
37
|
+
attributeChangedCallback(): void;
|
|
38
|
+
private clearTimers;
|
|
39
|
+
private groupOf;
|
|
40
|
+
private resolvedPosition;
|
|
41
|
+
private collectTriggerChildren;
|
|
42
|
+
private ensureTrigger;
|
|
43
|
+
private mountTriggerChildren;
|
|
44
|
+
private render;
|
|
45
|
+
private ensureTooltip;
|
|
46
|
+
private syncTooltipClasses;
|
|
47
|
+
private calculatePosition;
|
|
48
|
+
private setVisible;
|
|
49
|
+
private hideTooltip;
|
|
50
|
+
private removeTooltip;
|
|
51
|
+
private handleShow;
|
|
52
|
+
private handleHide;
|
|
53
|
+
private handleKeyDown;
|
|
54
|
+
private handleReposition;
|
|
55
|
+
}
|
|
56
|
+
declare global {
|
|
57
|
+
interface HTMLElementTagNameMap {
|
|
58
|
+
'db-tooltip': DbTooltip;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
interface DbNavigationRailItem {
|
|
63
|
+
id: string;
|
|
64
|
+
label: string;
|
|
65
|
+
icon: string;
|
|
66
|
+
activeIcon?: string;
|
|
67
|
+
href?: string;
|
|
68
|
+
disabled?: boolean;
|
|
69
|
+
/** true = 알림 점, 문자열/숫자 = 배지 */
|
|
70
|
+
badge?: boolean | string | number;
|
|
71
|
+
badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
|
|
72
|
+
dividerBefore?: boolean;
|
|
73
|
+
}
|
|
74
|
+
/** Selection is controlled by active-item-id; clicks emit db-item-click. */
|
|
75
|
+
declare class DbNavigationRail extends HTMLElement {
|
|
76
|
+
static get observedAttributes(): string[];
|
|
77
|
+
connectedCallback(): void;
|
|
78
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
79
|
+
private parseItems;
|
|
80
|
+
get items(): DbNavigationRailItem[];
|
|
81
|
+
set items(value: DbNavigationRailItem[] | string);
|
|
82
|
+
get bottomItems(): DbNavigationRailItem[];
|
|
83
|
+
set bottomItems(value: DbNavigationRailItem[] | string);
|
|
84
|
+
get activeItemId(): string;
|
|
85
|
+
set activeItemId(value: string);
|
|
86
|
+
get labelDisplay(): NavigationRailLabelDisplay;
|
|
87
|
+
set labelDisplay(value: NavigationRailLabelDisplay);
|
|
88
|
+
get size(): 's' | 'm' | 'l';
|
|
89
|
+
set size(value: 's' | 'm' | 'l');
|
|
90
|
+
get fullHeight(): boolean;
|
|
91
|
+
set fullHeight(value: boolean);
|
|
92
|
+
private renderItems;
|
|
93
|
+
private render;
|
|
94
|
+
}
|
|
95
|
+
declare global {
|
|
96
|
+
interface HTMLElementTagNameMap {
|
|
97
|
+
'db-navigation-rail': DbNavigationRail;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
4
100
|
|
|
5
101
|
/**
|
|
6
102
|
* Light DOM custom element for the canonical web Button.
|
|
@@ -194,6 +290,8 @@ declare class DbToggle extends HTMLElement {
|
|
|
194
290
|
set readOnly(value: boolean);
|
|
195
291
|
get size(): string;
|
|
196
292
|
set size(value: string);
|
|
293
|
+
get variant(): string;
|
|
294
|
+
set variant(value: string);
|
|
197
295
|
connectedCallback(): void;
|
|
198
296
|
attributeChangedCallback(): void;
|
|
199
297
|
formResetCallback(): void;
|
|
@@ -525,63 +623,6 @@ declare global {
|
|
|
525
623
|
}
|
|
526
624
|
}
|
|
527
625
|
|
|
528
|
-
declare class DbTooltip extends HTMLElement {
|
|
529
|
-
static get observedAttributes(): string[];
|
|
530
|
-
private tooltipId;
|
|
531
|
-
private trigger?;
|
|
532
|
-
private tooltip?;
|
|
533
|
-
private contentEl?;
|
|
534
|
-
private arrow?;
|
|
535
|
-
private visible;
|
|
536
|
-
private showTimer?;
|
|
537
|
-
private hideTimer?;
|
|
538
|
-
private repositionRaf?;
|
|
539
|
-
private enterRaf?;
|
|
540
|
-
private removalTimer?;
|
|
541
|
-
get content(): string;
|
|
542
|
-
set content(value: string);
|
|
543
|
-
get position(): string;
|
|
544
|
-
set position(value: string);
|
|
545
|
-
get size(): string;
|
|
546
|
-
set size(value: string);
|
|
547
|
-
get variant(): string;
|
|
548
|
-
set variant(value: string);
|
|
549
|
-
get disabled(): boolean;
|
|
550
|
-
set disabled(value: boolean);
|
|
551
|
-
get alwaysShow(): boolean;
|
|
552
|
-
set alwaysShow(value: boolean);
|
|
553
|
-
get delay(): number;
|
|
554
|
-
get hideDelay(): number;
|
|
555
|
-
get maxWidth(): number;
|
|
556
|
-
get showArrow(): boolean;
|
|
557
|
-
private childObserver?;
|
|
558
|
-
connectedCallback(): void;
|
|
559
|
-
disconnectedCallback(): void;
|
|
560
|
-
attributeChangedCallback(): void;
|
|
561
|
-
private clearTimers;
|
|
562
|
-
private groupOf;
|
|
563
|
-
private resolvedPosition;
|
|
564
|
-
private collectTriggerChildren;
|
|
565
|
-
private ensureTrigger;
|
|
566
|
-
private mountTriggerChildren;
|
|
567
|
-
private render;
|
|
568
|
-
private ensureTooltip;
|
|
569
|
-
private syncTooltipClasses;
|
|
570
|
-
private calculatePosition;
|
|
571
|
-
private setVisible;
|
|
572
|
-
private hideTooltip;
|
|
573
|
-
private removeTooltip;
|
|
574
|
-
private handleShow;
|
|
575
|
-
private handleHide;
|
|
576
|
-
private handleKeyDown;
|
|
577
|
-
private handleReposition;
|
|
578
|
-
}
|
|
579
|
-
declare global {
|
|
580
|
-
interface HTMLElementTagNameMap {
|
|
581
|
-
'db-tooltip': DbTooltip;
|
|
582
|
-
}
|
|
583
|
-
}
|
|
584
|
-
|
|
585
626
|
interface AccordionItemConfig$1 {
|
|
586
627
|
id?: string;
|
|
587
628
|
title: string;
|
|
@@ -2822,6 +2863,8 @@ declare class DbTimePicker extends HTMLElement {
|
|
|
2822
2863
|
private tempSeconds;
|
|
2823
2864
|
private tempPeriod;
|
|
2824
2865
|
private boundDocumentMouseDown;
|
|
2866
|
+
private boundViewportChange;
|
|
2867
|
+
private viewportChangeFrame;
|
|
2825
2868
|
connectedCallback(): void;
|
|
2826
2869
|
disconnectedCallback(): void;
|
|
2827
2870
|
/** 열린 드롭다운은 Escape 로 닫히고 포커스는 트리거로 돌아간다 (A11Y-ESCAPE) */
|
|
@@ -2836,6 +2879,10 @@ declare class DbTimePicker extends HTMLElement {
|
|
|
2836
2879
|
private get is12h();
|
|
2837
2880
|
private get showSeconds();
|
|
2838
2881
|
private get minuteStep();
|
|
2882
|
+
private get normalizedSize();
|
|
2883
|
+
private get dropdownPosition();
|
|
2884
|
+
/** CSS wheel item 높이와 스크롤 계산을 같은 값으로 유지한다. */
|
|
2885
|
+
private get itemHeight();
|
|
2839
2886
|
get disabled(): boolean;
|
|
2840
2887
|
set disabled(value: boolean);
|
|
2841
2888
|
get readonly(): boolean;
|
|
@@ -2854,6 +2901,9 @@ declare class DbTimePicker extends HTMLElement {
|
|
|
2854
2901
|
private closePicker;
|
|
2855
2902
|
private toggleOpen;
|
|
2856
2903
|
private handleDocumentMouseDown;
|
|
2904
|
+
private handleViewportChange;
|
|
2905
|
+
/** 드롭다운을 body에 고정해 overflow-hidden 컬럼에서도 잘리지 않게 한다. */
|
|
2906
|
+
private positionDropdown;
|
|
2857
2907
|
private createWheel;
|
|
2858
2908
|
private renderSelector;
|
|
2859
2909
|
private render;
|
|
@@ -4832,6 +4882,149 @@ declare global {
|
|
|
4832
4882
|
}
|
|
4833
4883
|
}
|
|
4834
4884
|
|
|
4885
|
+
/**
|
|
4886
|
+
* 정리(cleanup) 관리.
|
|
4887
|
+
*
|
|
4888
|
+
* `connectedCallback` 에서 등록한 리스너·타이머·observer 를 `disconnectedCallback`
|
|
4889
|
+
* 에서 빠짐없이 해제하기 위한 도구. 등록과 해제를 한 줄로 묶어두면
|
|
4890
|
+
* "add 는 했는데 remove 를 빠뜨리는" 실수가 구조적으로 불가능해진다.
|
|
4891
|
+
*
|
|
4892
|
+
* 규격: PERF-CLEANUP
|
|
4893
|
+
*/
|
|
4894
|
+
type Cleanup = () => void;
|
|
4895
|
+
/** 해제 함수를 모아뒀다가 한 번에 실행하는 가방 */
|
|
4896
|
+
declare class CleanupBag {
|
|
4897
|
+
private items;
|
|
4898
|
+
/** 해제 함수를 직접 등록 */
|
|
4899
|
+
add(fn: Cleanup): void;
|
|
4900
|
+
/** 리스너를 달고 해제 함수를 자동 등록 */
|
|
4901
|
+
listen<T extends EventTarget>(target: T, type: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
|
|
4902
|
+
/** setTimeout — 해제 시 자동 clear */
|
|
4903
|
+
timeout(fn: () => void, ms: number): number;
|
|
4904
|
+
/** setInterval — 해제 시 자동 clear */
|
|
4905
|
+
interval(fn: () => void, ms: number): number;
|
|
4906
|
+
/** MutationObserver / ResizeObserver / IntersectionObserver 등록 */
|
|
4907
|
+
observe<T extends {
|
|
4908
|
+
disconnect(): void;
|
|
4909
|
+
}>(observer: T): T;
|
|
4910
|
+
/** 등록된 모든 해제 함수를 실행하고 비운다. 여러 번 호출해도 안전하다. */
|
|
4911
|
+
run(): void;
|
|
4912
|
+
}
|
|
4913
|
+
|
|
4914
|
+
/**
|
|
4915
|
+
* 선택적 베이스 클래스.
|
|
4916
|
+
*
|
|
4917
|
+
* 기존 130개 컴포넌트는 전부 `extends HTMLElement` 이며 그대로 동작한다.
|
|
4918
|
+
* 새 컴포넌트나 개선 대상만 이 클래스를 상속하면 정리(cleanup)와 이벤트 발행이
|
|
4919
|
+
* 규격에 맞게 강제된다. **상속은 강제가 아니다.**
|
|
4920
|
+
*
|
|
4921
|
+
* 규격: PERF-CLEANUP, STD-EVENT
|
|
4922
|
+
*/
|
|
4923
|
+
|
|
4924
|
+
declare abstract class DbElement extends HTMLElement {
|
|
4925
|
+
/**
|
|
4926
|
+
* `connectedCallback` 에서 등록한 것들을 담아두는 가방.
|
|
4927
|
+
* `disconnectedCallback` 에서 자동으로 비워진다.
|
|
4928
|
+
*/
|
|
4929
|
+
protected readonly cleanups: CleanupBag;
|
|
4930
|
+
/**
|
|
4931
|
+
* 하위 클래스는 `disconnectedCallback` 을 오버라이드할 때 반드시
|
|
4932
|
+
* `super.disconnectedCallback()` 을 호출해야 한다.
|
|
4933
|
+
*/
|
|
4934
|
+
disconnectedCallback(): void;
|
|
4935
|
+
/**
|
|
4936
|
+
* 규격에 맞는 커스텀 이벤트를 발행한다 — `db-` 접두사 + bubbles + composed.
|
|
4937
|
+
*
|
|
4938
|
+
* @returns `preventDefault()` 되지 않았으면 true
|
|
4939
|
+
*/
|
|
4940
|
+
protected dbEmit<T>(name: string, detail?: T, options?: {
|
|
4941
|
+
cancelable?: boolean;
|
|
4942
|
+
}): boolean;
|
|
4943
|
+
/**
|
|
4944
|
+
* 커스텀 엘리먼트가 정의되기 **전에** 프레임워크가 프로퍼티로 값을 넣어둔 경우,
|
|
4945
|
+
* 그 값은 인스턴스 자체 프로퍼티로 남아 접근자를 가린다. 정의 후 회수한다.
|
|
4946
|
+
*
|
|
4947
|
+
* 규격: STD-UPGRADE
|
|
4948
|
+
*/
|
|
4949
|
+
protected upgradeProperties(names: string[]): void;
|
|
4950
|
+
}
|
|
4951
|
+
|
|
4952
|
+
type GlowSize = (typeof AI_GLOW_SIZES)[number];
|
|
4953
|
+
type GlowState = (typeof AI_GLOW_STATES)[number];
|
|
4954
|
+
type GlowVariant = (typeof AI_GLOW_VARIANTS)[number];
|
|
4955
|
+
/**
|
|
4956
|
+
* AI 가 생각·작업·청취 중임을 알리는 테두리 글로우.
|
|
4957
|
+
* iOS Siri·브라우저 에이전트처럼 가장자리 안쪽으로 여러 색 그라데이션이 번지며 흐른다.
|
|
4958
|
+
* 콘텐츠 위에 떠 있지만 `pointer-events: none` 이라 조작을 막지 않는다.
|
|
4959
|
+
*
|
|
4960
|
+
* 기본은 뷰포트 전체(`position: fixed`). `contained` 를 주면 가장 가까운 positioned 조상 안에만
|
|
4961
|
+
* 깔리고 모서리 둥글기도 부모를 따른다 — 부모에 `position: relative` 가 필요하다.
|
|
4962
|
+
*
|
|
4963
|
+
* `state="listening"` 은 음성 반응 모드다. `audioStream`(마이크 MediaStream) 또는
|
|
4964
|
+
* `voice-level`(0–1) 을 넣으면 소리 크기에 맞춰 빛의 두께·밝기가 출렁인다.
|
|
4965
|
+
* 둘 다 없으면 청취 중임을 알 수 있도록 말하는 듯한 잔잔한 움직임으로 대신한다.
|
|
4966
|
+
*
|
|
4967
|
+
* @example
|
|
4968
|
+
* <db-ai-glow active></db-ai-glow>
|
|
4969
|
+
*
|
|
4970
|
+
* @example
|
|
4971
|
+
* const glow = document.querySelector('db-ai-glow');
|
|
4972
|
+
* glow.state = 'listening';
|
|
4973
|
+
* glow.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
4974
|
+
* glow.active = true;
|
|
4975
|
+
*/
|
|
4976
|
+
declare class DbAiGlow extends DbElement {
|
|
4977
|
+
static get observedAttributes(): string[];
|
|
4978
|
+
private status;
|
|
4979
|
+
private readonly meter;
|
|
4980
|
+
private inputStream;
|
|
4981
|
+
private rafId;
|
|
4982
|
+
private lastFrame;
|
|
4983
|
+
private startedAt;
|
|
4984
|
+
private level;
|
|
4985
|
+
get active(): boolean;
|
|
4986
|
+
set active(value: boolean);
|
|
4987
|
+
get state(): GlowState;
|
|
4988
|
+
set state(value: GlowState);
|
|
4989
|
+
get variant(): GlowVariant;
|
|
4990
|
+
set variant(value: GlowVariant);
|
|
4991
|
+
get size(): GlowSize;
|
|
4992
|
+
set size(value: GlowSize);
|
|
4993
|
+
get contained(): boolean;
|
|
4994
|
+
set contained(value: boolean);
|
|
4995
|
+
/** 외부 분석기가 전달하는 정규화 음성 레벨(0–1). `listening` 상태에서만 쓰인다. */
|
|
4996
|
+
get voiceLevel(): number;
|
|
4997
|
+
set voiceLevel(value: number);
|
|
4998
|
+
/** 켜질 때 스크린 리더에 알릴 문구(예: "AI가 화면을 제어하는 중"). 없으면 순수 장식이다. */
|
|
4999
|
+
get label(): string;
|
|
5000
|
+
set label(value: string);
|
|
5001
|
+
/**
|
|
5002
|
+
* 실제 마이크/통화 MediaStream. 음량만 분석하며 트랙을 stop() 하지 않는다.
|
|
5003
|
+
* null 을 넣으면 분석만 해제한다.
|
|
5004
|
+
*/
|
|
5005
|
+
get audioStream(): MediaStream | null;
|
|
5006
|
+
set audioStream(stream: MediaStream | null);
|
|
5007
|
+
connectedCallback(): void;
|
|
5008
|
+
disconnectedCallback(): void;
|
|
5009
|
+
attributeChangedCallback(name: string): void;
|
|
5010
|
+
private onMotionChange;
|
|
5011
|
+
/** 구조는 한 번만 만든다 (PERF-RECONCILE) */
|
|
5012
|
+
private ensureStructure;
|
|
5013
|
+
/** 소비자가 붙인 className 은 건드리지 않고 수식어만 교체한다 */
|
|
5014
|
+
private syncClasses;
|
|
5015
|
+
private syncStatus;
|
|
5016
|
+
/** 음성 반응 루프는 청취 중 + 켜짐 + 모션 허용일 때만 돈다. 나머지 애니메이션은 전부 CSS 다. */
|
|
5017
|
+
private syncLoop;
|
|
5018
|
+
private stopLoop;
|
|
5019
|
+
private frame;
|
|
5020
|
+
private sampleLevel;
|
|
5021
|
+
}
|
|
5022
|
+
declare global {
|
|
5023
|
+
interface HTMLElementTagNameMap {
|
|
5024
|
+
'db-ai-glow': DbAiGlow;
|
|
5025
|
+
}
|
|
5026
|
+
}
|
|
5027
|
+
|
|
4835
5028
|
type OrbSize = (typeof CHAT_ORB_SIZES)[number];
|
|
4836
5029
|
type OrbVariant = (typeof CHAT_ORB_VARIANTS)[number];
|
|
4837
5030
|
type OrbState = (typeof CHAT_ORB_STATES)[number];
|
|
@@ -4955,7 +5148,7 @@ declare global {
|
|
|
4955
5148
|
}
|
|
4956
5149
|
}
|
|
4957
5150
|
|
|
4958
|
-
type DbIconName = 'arrow-bar-left' | 'arrow-bar-right' | 'award' | 'apple' | 'play-store' | 'arrow-right' | 'star' | 'star-filled' | 'star-half' | 'trending-up' | 'cart' | 'bell-active' | 'caret-down-filled' | 'caret-updown-filled' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'calendar' | 'camera' | 'clock' | 'bulb' | 'circle-checked' | 'cloud-close' | 'close' | 'done' | 'documentation' | 'doughnut-chart' | 'download' | 'error-filled' | 'edit' | 'eyedropper' | 'file-new' | 'folder-open' | 'gallery' | 'globe' | 'hide' | 'info-filled' | 'lock' | 'mail' | 'menu' | 'microphone' | 'minus' | 'moon' | 'more-vertical' | 'paperclip' | 'pause' | 'play' | 'plus' | 'copy' | 'code' | 'write' | 'upload' | 'video' | 'volume-up' | 'mute-filled' | 'package' | 'delivery-filled' | 'repeat' | 'settings' | 'refresh' | 'expand' | 'shrink' | 'grip-vertical' | 'grip-horizontal' | 'search' | 'send' | 'share-alt' | 'show' | 'sparkle' | 'stop' | 'sun' | 'thumb-down' | 'thumb-up' | 'trash' | 'user' | 'warning-filled';
|
|
5151
|
+
type DbIconName = 'arrow-bar-left' | 'arrow-bar-right' | 'award' | 'apple' | 'play-store' | 'arrow-right' | 'star' | 'star-filled' | 'star-half' | 'trending-up' | 'cart' | 'bell-active' | 'caret-down-filled' | 'caret-updown-filled' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'calendar' | 'camera' | 'clock' | 'bulb' | 'circle-checked' | 'cloud-close' | 'close' | 'done' | 'documentation' | 'doughnut-chart' | 'download' | 'error-filled' | 'edit' | 'eyedropper' | 'file-new' | 'home-outline' | 'home-filled' | 'folder' | 'more-horizontal' | 'folder-open' | 'gallery' | 'globe' | 'hide' | 'info-filled' | 'lock' | 'mail' | 'menu' | 'microphone' | 'minus' | 'moon' | 'more-vertical' | 'paperclip' | 'pause' | 'play' | 'plus' | 'copy' | 'code' | 'write' | 'upload' | 'video' | 'volume-up' | 'mute-filled' | 'package' | 'delivery-filled' | 'repeat' | 'settings' | 'refresh' | 'expand' | 'shrink' | 'grip-vertical' | 'grip-horizontal' | 'search' | 'send' | 'share-alt' | 'show' | 'sparkle' | 'stop' | 'sun' | 'thumb-down' | 'thumb-up' | 'trash' | 'user' | 'warning-filled';
|
|
4959
5152
|
|
|
4960
5153
|
interface DbChatTool {
|
|
4961
5154
|
/** 고유 id (이벤트 detail 로 전달) */
|
|
@@ -6765,6 +6958,7 @@ type TextareaProps = WebComponentProps & {
|
|
|
6765
6958
|
}>;
|
|
6766
6959
|
};
|
|
6767
6960
|
type ToggleProps = WebComponentProps & {
|
|
6961
|
+
variant?: ToggleVariant;
|
|
6768
6962
|
onChange?: DbEventHandler<{
|
|
6769
6963
|
checked: boolean;
|
|
6770
6964
|
}>;
|
|
@@ -7372,7 +7566,7 @@ type TimePickerProps = WebComponentProps & {
|
|
|
7372
7566
|
label?: string;
|
|
7373
7567
|
fullWidth?: boolean;
|
|
7374
7568
|
error?: boolean;
|
|
7375
|
-
dropdownPosition?: 'bottom-start' | 'bottom-end';
|
|
7569
|
+
dropdownPosition?: 'auto' | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
|
|
7376
7570
|
onChange?: DbEventHandler<{
|
|
7377
7571
|
value: string;
|
|
7378
7572
|
}>;
|
|
@@ -7470,6 +7664,21 @@ type BottomNavigationItem = {
|
|
|
7470
7664
|
badge?: string | number;
|
|
7471
7665
|
badgeColor?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
7472
7666
|
};
|
|
7667
|
+
|
|
7668
|
+
type NavigationRailProps = WebComponentProps & {
|
|
7669
|
+
items?: DbNavigationRailItem[] | string;
|
|
7670
|
+
bottomItems?: DbNavigationRailItem[] | string;
|
|
7671
|
+
activeItemId?: string;
|
|
7672
|
+
labelDisplay?: 'tooltip' | 'always';
|
|
7673
|
+
size?: 's' | 'm' | 'l';
|
|
7674
|
+
fullHeight?: boolean;
|
|
7675
|
+
onItemClick?: DbEventHandler<{
|
|
7676
|
+
item: DbNavigationRailItem;
|
|
7677
|
+
}>;
|
|
7678
|
+
onDbItemClick?: DbEventHandler<{
|
|
7679
|
+
item: DbNavigationRailItem;
|
|
7680
|
+
}>;
|
|
7681
|
+
};
|
|
7473
7682
|
type BottomNavigationProps = WebComponentProps & {
|
|
7474
7683
|
items?: BottomNavigationItem[] | string;
|
|
7475
7684
|
activeItemId?: string;
|
|
@@ -9828,6 +10037,21 @@ declare const Progress: react.ForwardRefExoticComponent<Omit<ProgressProps, "ref
|
|
|
9828
10037
|
declare const ProgressStep: react.ForwardRefExoticComponent<Omit<ProgressStepProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
9829
10038
|
declare const Progressbar: react.ForwardRefExoticComponent<Omit<WebComponentProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
9830
10039
|
declare const DownloadProgress: react.ForwardRefExoticComponent<Omit<DownloadProgressProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10040
|
+
type AiGlowProps = WebComponentProps & {
|
|
10041
|
+
/** 켜기/끄기 — 페이드로 전환됩니다. */
|
|
10042
|
+
active?: boolean;
|
|
10043
|
+
state?: 'thinking' | 'working' | 'listening';
|
|
10044
|
+
variant?: 'aurora' | 'brand';
|
|
10045
|
+
size?: 's' | 'm' | 'l';
|
|
10046
|
+
/** 뷰포트 대신 가장 가까운 positioned 조상 안에만 표시합니다. */
|
|
10047
|
+
contained?: boolean;
|
|
10048
|
+
/** listening 상태의 정규화 음성 크기(0–1). */
|
|
10049
|
+
voiceLevel?: number;
|
|
10050
|
+
/** 켜질 때 스크린 리더에 알릴 문구. */
|
|
10051
|
+
label?: string;
|
|
10052
|
+
/** 실제 마이크/통화 스트림. 분석만 하며 트랙은 중지하지 않습니다. */
|
|
10053
|
+
audioStream?: MediaStream | null;
|
|
10054
|
+
};
|
|
9831
10055
|
type ChatOrbProps = WebComponentProps & {
|
|
9832
10056
|
size?: 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
9833
10057
|
variant?: 'aurora' | 'ocean' | 'emerald' | 'violet' | 'mono';
|
|
@@ -9973,6 +10197,7 @@ type ChatWidgetProps = WebComponentProps & {
|
|
|
9973
10197
|
}>;
|
|
9974
10198
|
onStartChat?: DbEventHandler;
|
|
9975
10199
|
};
|
|
10200
|
+
declare const AiGlow: react.ForwardRefExoticComponent<Omit<AiGlowProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
9976
10201
|
declare const ChatOrb: react.ForwardRefExoticComponent<Omit<ChatOrbProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
9977
10202
|
declare const ChatWelcome: react.ForwardRefExoticComponent<Omit<ChatWelcomeProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
9978
10203
|
declare const ChatComposer: react.ForwardRefExoticComponent<Omit<ChatComposerProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
@@ -10093,6 +10318,7 @@ declare const Image: react.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & r
|
|
|
10093
10318
|
declare const ImagePlaceholder: react.ForwardRefExoticComponent<Omit<ImagePlaceholderProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10094
10319
|
declare const ImageList: react.ForwardRefExoticComponent<Omit<ImageListProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10095
10320
|
declare const Lightbox: react.ForwardRefExoticComponent<Omit<LightboxProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10321
|
+
declare const NavigationRail: react.ForwardRefExoticComponent<Omit<NavigationRailProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10096
10322
|
declare const BottomNavigation: react.ForwardRefExoticComponent<Omit<BottomNavigationProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10097
10323
|
declare const Navbar: react.ForwardRefExoticComponent<Omit<NavbarProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10098
10324
|
declare const Footer: react.ForwardRefExoticComponent<Omit<FooterProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
@@ -10189,5 +10415,5 @@ declare const DatePicker: react.ForwardRefExoticComponent<Omit<DatePickerProps,
|
|
|
10189
10415
|
declare const TimePicker: react.ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10190
10416
|
declare const Calendar: react.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
10191
10417
|
|
|
10192
|
-
export { Accordion, ActivityHeatmap, AdBanner, AiChat, AiChatList, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, ChatComposer, ChatList, ChatMessage, ChatOrb, ChatRoom, ChatSuggestions, ChatTyping, ChatWelcome, ChatWidget, Checkbox, Chip, CodeBlock, ColorPicker, ColorSwatch, Confirm, Container, ContextMenu, CookieBanner, Countdown, CursorFollower, DatePicker, Divider, DownloadProgress, Drawer, Dropdown, Dropzone, EmailVerify, EmptyState, FileUploader, FloatingActionButton, Footer, Form, Gantt, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Kanban, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, OtpInput, PageHeader, Pagination, PhoneVerify, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionCta, SectionFaq, SectionFeature, SectionFeatureGrid, SectionHero, SectionLogoCloud, SectionPricing, SectionStats, SectionTestimonials, SegmentControl, Select, Share, Sidebar, Signature, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, TwoFactor, VideoPlayer, YouTubePlayer, useContextMenu };
|
|
10193
|
-
export type { AccordionItemConfig, AccordionProps, ActivityHeatmapCellDetail, ActivityHeatmapItem, ActivityHeatmapProps, AdBannerProps, AiChatListProps, AiChatProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbMenuItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChatComposerProps, ChatListProps, ChatMessageProps, ChatOrbProps, ChatRoomProps, ChatSuggestionsProps, ChatTypingProps, ChatWelcomeProps, ChatWidgetProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ColorSwatchItem, ColorSwatchProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CookieBannerProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbChatSuggestion, DbChatTool, DbChatWidgetArticle, DbChatWidgetConversation, DbChatWidgetMenuAction, DbChatWidgetMenuItem, DbChatWidgetMessage, DbEventHandler, DividerProps, DownloadProgressProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmailVerifyProps, EmptyStateProps, FileStatus, FileUploaderProps, FloatingActionButtonProps, FooterCompanyInfo, FooterFamilySite, FooterLink, FooterLinkColumn, FooterProps, FooterSocialLink, FormFieldData, FormProps, GanttAssignee, GanttGroup, GanttItem, GanttProps, GanttRow, GradientColor, GradientProps, GradientScheme, GradientTone, GridBackgroundProps, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, KanbanAssignee, KanbanCard, KanbanColumn, KanbanProps, KanbanTag, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, MarkdownEditorProps, MarqueeImageItem, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, OnboardingModalProps, OnboardingStep, OtpInputProps, PageHeaderProps, PageHeaderTabItem, PaginationProps, PhoneVerifyProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionBlockBadge, SectionContactAction, SectionContactProps, SectionCtaButton, SectionCtaProps, SectionFaqItem, SectionFaqProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureGridItem, SectionFeatureGridProps, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionLogoCloudItem, SectionLogoCloudProps, SectionPricingCta, SectionPricingPlan, SectionPricingProps, SectionProps, SectionStatItem, SectionStatsProps, SectionTestimonialItem, SectionTestimonialsProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarPanel, SidebarPanelMode, SidebarProject, SidebarPromoBanner, SidebarProps, SidebarSection, SidebarUpdateBanner, SidebarUserProfile, SignatureProps, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, TwoFactorProps, UploadFile, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };
|
|
10418
|
+
export { Accordion, ActivityHeatmap, AdBanner, AiChat, AiChatList, AiGlow, Alert, AnimationBackground, AnimationText, AppBadge, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, ChatComposer, ChatList, ChatMessage, ChatOrb, ChatRoom, ChatSuggestions, ChatTyping, ChatWelcome, ChatWidget, Checkbox, Chip, CodeBlock, ColorPicker, ColorSwatch, Confirm, Container, ContextMenu, CookieBanner, Countdown, CursorFollower, DatePicker, Divider, DownloadProgress, Drawer, Dropdown, Dropzone, EmailVerify, EmptyState, FileUploader, FloatingActionButton, Footer, Form, Gantt, Gradient, Grid, GridBackground, GridItem, Image, ImageList, ImagePlaceholder, Indicator, Input, Kanban, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, NavigationRail, OnboardingModal, OtpInput, PageHeader, Pagination, PhoneVerify, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SectionAppDownload, SectionContact, SectionCta, SectionFaq, SectionFeature, SectionFeatureGrid, SectionHero, SectionLogoCloud, SectionPricing, SectionStats, SectionTestimonials, SegmentControl, Select, Share, Sidebar, Signature, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, TwoFactor, VideoPlayer, YouTubePlayer, useContextMenu };
|
|
10419
|
+
export type { AccordionItemConfig, AccordionProps, ActivityHeatmapCellDetail, ActivityHeatmapItem, ActivityHeatmapProps, AdBannerProps, AiChatListProps, AiChatProps, AiGlowProps, AlertAction, AlertProps, AnimationBackgroundProps, AnimationTextProps, AppBadgeProps, AudioPlayerProps, AvatarProps, BackdropProps, BadgeProps, BannerAction, BannerProps, BottomNavigationItem, BottomNavigationProps, BottomSheetProps, BreadcrumbItemConfig, BreadcrumbMenuItemConfig, BreadcrumbsProps, ButtonProps, CalendarEvent, CalendarProps, CardProps, CarouselItem, CarouselProps, ChatComposerProps, ChatListProps, ChatMessageProps, ChatOrbProps, ChatRoomProps, ChatSuggestionsProps, ChatTypingProps, ChatWelcomeProps, ChatWidgetProps, ChipProps, CodeBlockItem, CodeBlockProps, ColorPickerProps, ColorSwatchItem, ColorSwatchProps, ConfirmProps, ContextMenuItemConfig, ContextMenuProps, CookieBannerProps, CountdownProps, CursorFollowerProps, DatePickerProps, DbChatSuggestion, DbChatTool, DbChatWidgetArticle, DbChatWidgetConversation, DbChatWidgetMenuAction, DbChatWidgetMenuItem, DbChatWidgetMessage, DbEventHandler, DbNavigationRailItem, DividerProps, DownloadProgressProps, DrawerProps, DropdownItemConfig, DropdownProps, DropzoneProps, EmailVerifyProps, EmptyStateProps, FileStatus, FileUploaderProps, FloatingActionButtonProps, FooterCompanyInfo, FooterFamilySite, FooterLink, FooterLinkColumn, FooterProps, FooterSocialLink, FormFieldData, FormProps, GanttAssignee, GanttGroup, GanttItem, GanttProps, GanttRow, GradientColor, GradientProps, GradientScheme, GradientTone, GridBackgroundProps, ImageListItem, ImageListProps, ImagePlaceholderProps, ImageProps, IndicatorProps, InputProps, KanbanAssignee, KanbanCard, KanbanColumn, KanbanProps, KanbanTag, LabelProps, LightboxImage, LightboxProps, ListItemConfig, ListProps, LogoProps, MarkdownEditorProps, MarqueeImageItem, MarqueeProps, MasonryItem, MasonryProps, MenuItemChildConfig, MenuItemProps, ModalProps, ModalSegmentItem, ModalTabItem, NavbarItem, NavbarProps, NavbarUserProfile, NavigationRailProps, OnboardingModalProps, OnboardingStep, OtpInputProps, PageHeaderProps, PageHeaderTabItem, PaginationProps, PhoneVerifyProps, PopoverProps, ProgressProps, ProgressStepItem, ProgressStepProps, RadioProps, RandomGradientProps, RangeSliderProps, RatingProps, ReorderItem, ReorderProps, ResizablePanelsProps, ScrollAreaProps, SearchBarProps, SectionAppDownloadProps, SectionAppDownloadStore, SectionBlockBadge, SectionContactAction, SectionContactProps, SectionCtaButton, SectionCtaProps, SectionFaqItem, SectionFaqProps, SectionFeatureAction, SectionFeatureBadge, SectionFeatureGridItem, SectionFeatureGridProps, SectionFeatureProps, SectionHeroButton, SectionHeroProps, SectionLogoCloudItem, SectionLogoCloudProps, SectionPricingCta, SectionPricingPlan, SectionPricingProps, SectionProps, SectionStatItem, SectionStatsProps, SectionTestimonialItem, SectionTestimonialsProps, SegmentControlProps, SelectProps, SelectionProps, SharePlatform, ShareProps, SidebarItem, SidebarPanel, SidebarPanelMode, SidebarProject, SidebarPromoBanner, SidebarProps, SidebarSection, SidebarUpdateBanner, SidebarUserProfile, SignatureProps, SkeletonProps, SpinnerProps, SplitViewProps, StatChange, StatProps, StepperProps, TabItemConfig, TableColumn, TableProps, TabsProps, TestimonialProps, TextareaProps, TimePickerProps, TimelineItem, TimelineProps, ToastProps, ToggleProps, TooltipProps, TopBannerProps, TutorialProps, TutorialStep, TwoFactorProps, UploadFile, UseContextMenuReturn, VideoPlayerProps, WebComponentProps, YouTubePlayerProps };
|