@exem-ui/react 0.3.2 → 0.3.3
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/dist/FlatTooltip-Dyj1pCh4.d.mts +251 -0
- package/dist/FlatTooltip-Dyj1pCh4.d.ts +251 -0
- package/dist/chunk-CMKUMLDS.js +715 -0
- package/dist/chunk-CMKUMLDS.js.map +1 -0
- package/dist/chunk-WSRLUKC4.mjs +684 -0
- package/dist/chunk-WSRLUKC4.mjs.map +1 -0
- package/dist/flat/index.d.mts +96 -0
- package/dist/flat/index.d.ts +96 -0
- package/dist/flat/index.js +25 -0
- package/dist/flat/index.js.map +1 -0
- package/dist/flat/index.mjs +4 -0
- package/dist/flat/index.mjs.map +1 -0
- package/dist/index.d.mts +12 -245
- package/dist/index.d.ts +12 -245
- package/dist/index.js +116 -699
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +28 -618
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -1
package/dist/index.d.mts
CHANGED
|
@@ -3,16 +3,18 @@ import { VariantProps } from '@exem-ui/core/utils';
|
|
|
3
3
|
import * as React$1 from 'react';
|
|
4
4
|
import React__default, { ComponentProps } from 'react';
|
|
5
5
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
6
|
-
import
|
|
7
|
-
|
|
6
|
+
import { C as ConditionalTooltip, V as Variant, S as Size, I as Icon } from './FlatTooltip-Dyj1pCh4.mjs';
|
|
7
|
+
export { l as Segment, m as SegmentComponent, n as SegmentContentProps, o as SegmentItemProps, p as SegmentListProps, q as SegmentRootProps, a as Select, b as SelectBoxProps, c as SelectComponent, d as SelectDescriptionProps, e as SelectEmptyProps, f as SelectGroupProps, g as SelectItemProps, h as SelectLabelProps, i as SelectListProps, j as SelectRootProps, k as SelectTriggerProps, T as Tooltip, r as TooltipComponent, s as TooltipContentProps, t as TooltipDescriptionProps, u as TooltipProviderProps, v as TooltipRootProps, w as TooltipTitleProps, x as TooltipTriggerProps } from './FlatTooltip-Dyj1pCh4.mjs';
|
|
8
8
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
9
9
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
10
10
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
11
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
11
12
|
import { DayPicker } from 'react-day-picker';
|
|
12
|
-
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
13
13
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
14
14
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
15
15
|
import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
|
|
16
|
+
import '@radix-ui/react-select';
|
|
17
|
+
import '@radix-ui/react-tooltip';
|
|
16
18
|
|
|
17
19
|
interface AvatarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
|
|
18
20
|
/** 사용자 이름. 이미지가 없을 때 이니셜 폴백에 사용됩니다. */
|
|
@@ -280,247 +282,6 @@ declare const buttonVariants: (props?: ({
|
|
|
280
282
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
281
283
|
declare const Button: ButtonComponent;
|
|
282
284
|
|
|
283
|
-
type SegmentSize = 'small' | 'medium' | 'large';
|
|
284
|
-
type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
|
|
285
|
-
type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
|
|
286
|
-
/** 텍스트 왼쪽에 표시할 아이콘 요소 */
|
|
287
|
-
leftIcon?: React__default.ReactElement<{
|
|
288
|
-
className?: string;
|
|
289
|
-
}>;
|
|
290
|
-
};
|
|
291
|
-
type SegmentContentProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
|
|
292
|
-
type SegmentRootProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
|
|
293
|
-
/**
|
|
294
|
-
* 세그먼트 크기
|
|
295
|
-
* @default 'medium'
|
|
296
|
-
*/
|
|
297
|
-
size?: SegmentSize;
|
|
298
|
-
};
|
|
299
|
-
type SegmentComponent = React__default.ForwardRefExoticComponent<SegmentRootProps & React__default.RefAttributes<React__default.ElementRef<typeof TabsPrimitive.Root>>> & {
|
|
300
|
-
List: React__default.ForwardRefExoticComponent<SegmentListProps>;
|
|
301
|
-
Item: React__default.ForwardRefExoticComponent<SegmentItemProps>;
|
|
302
|
-
Content: React__default.ForwardRefExoticComponent<SegmentContentProps>;
|
|
303
|
-
};
|
|
304
|
-
/**
|
|
305
|
-
* 탭 형태의 세그먼트 컨트롤 컴포넌트입니다.
|
|
306
|
-
* Compound Component 패턴으로 `Segment.List`, `Segment.Item`, `Segment.Content`와 함께 사용합니다.
|
|
307
|
-
*
|
|
308
|
-
* @example
|
|
309
|
-
* ```tsx
|
|
310
|
-
* <Segment defaultValue="tab1" size="medium">
|
|
311
|
-
* <Segment.List>
|
|
312
|
-
* <Segment.Item value="tab1">첫 번째</Segment.Item>
|
|
313
|
-
* <Segment.Item value="tab2">두 번째</Segment.Item>
|
|
314
|
-
* </Segment.List>
|
|
315
|
-
* <Segment.Content value="tab1">첫 번째 내용</Segment.Content>
|
|
316
|
-
* <Segment.Content value="tab2">두 번째 내용</Segment.Content>
|
|
317
|
-
* </Segment>
|
|
318
|
-
* ```
|
|
319
|
-
*
|
|
320
|
-
* @see {@link SegmentRootProps} 루트 props 상세
|
|
321
|
-
* @see {@link SegmentItemProps} 아이템 props 상세
|
|
322
|
-
*/
|
|
323
|
-
declare const Segment: SegmentComponent;
|
|
324
|
-
|
|
325
|
-
type Size = 'xsmall' | 'small' | 'medium' | 'large';
|
|
326
|
-
type Variant = 'fill' | 'line';
|
|
327
|
-
type Icon = React.ReactElement<{
|
|
328
|
-
className?: string;
|
|
329
|
-
}>;
|
|
330
|
-
|
|
331
|
-
/** Select 라벨 Props */
|
|
332
|
-
type SelectLabelProps = {
|
|
333
|
-
children: React$1.ReactNode;
|
|
334
|
-
required?: boolean;
|
|
335
|
-
size?: Size;
|
|
336
|
-
className?: string;
|
|
337
|
-
};
|
|
338
|
-
/** Select 트리거 Props */
|
|
339
|
-
type SelectTriggerProps = {
|
|
340
|
-
children?: React$1.ReactNode;
|
|
341
|
-
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
342
|
-
leftIcon?: Icon;
|
|
343
|
-
className?: string;
|
|
344
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
345
|
-
/** Select Box (Trigger + Value 조합) Props */
|
|
346
|
-
type SelectBoxProps = {
|
|
347
|
-
placeholder?: string;
|
|
348
|
-
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
349
|
-
leftIcon?: Icon;
|
|
350
|
-
className?: string;
|
|
351
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
352
|
-
/** Select 아이템 Props */
|
|
353
|
-
type SelectItemProps = {
|
|
354
|
-
children?: React$1.ReactNode;
|
|
355
|
-
/** 아이템 왼쪽에 표시할 아이콘 */
|
|
356
|
-
leftIcon?: Icon;
|
|
357
|
-
/** 아이템 오른쪽에 표시할 아이콘 */
|
|
358
|
-
rightIcon?: Icon;
|
|
359
|
-
/** 왼쪽 아이콘 크기 */
|
|
360
|
-
leftIconSize?: Size;
|
|
361
|
-
/** 오른쪽 아이콘 크기 */
|
|
362
|
-
rightIconSize?: Size;
|
|
363
|
-
size?: Size;
|
|
364
|
-
className?: string;
|
|
365
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'children'>;
|
|
366
|
-
type SelectEmptyProps = {
|
|
367
|
-
children?: React$1.ReactNode;
|
|
368
|
-
className?: string;
|
|
369
|
-
};
|
|
370
|
-
type SelectDescriptionProps = {
|
|
371
|
-
children?: React$1.ReactNode;
|
|
372
|
-
size?: Size;
|
|
373
|
-
className?: string;
|
|
374
|
-
};
|
|
375
|
-
type SelectGroupProps = {
|
|
376
|
-
children: React$1.ReactNode;
|
|
377
|
-
size?: Size;
|
|
378
|
-
/** 셀렉트 그룹 스타일 변형 */
|
|
379
|
-
variant?: Variant;
|
|
380
|
-
/** 불투명 배경 (elevation-0) 사용 여부. 반투명 배경이 비쳐보이는 것을 방지합니다. */
|
|
381
|
-
hasBackground?: boolean;
|
|
382
|
-
className?: string;
|
|
383
|
-
};
|
|
384
|
-
/** Select 루트 Props */
|
|
385
|
-
type SelectRootProps = {
|
|
386
|
-
children?: React$1.ReactNode;
|
|
387
|
-
/** 셀렉트 크기 */
|
|
388
|
-
size?: Size;
|
|
389
|
-
/** 셀렉트 스타일 변형 */
|
|
390
|
-
variant?: Variant;
|
|
391
|
-
/** 에러 상태 */
|
|
392
|
-
error?: boolean;
|
|
393
|
-
/** 포커스 상태 (line variant에서만 적용) */
|
|
394
|
-
focus?: boolean;
|
|
395
|
-
/** 활성화 상태 (필터 적용 등 내부 상태가 활성화됨을 표시) */
|
|
396
|
-
active?: boolean;
|
|
397
|
-
/** 비활성화 상태 */
|
|
398
|
-
disabled?: boolean;
|
|
399
|
-
className?: string;
|
|
400
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'disabled' | 'children'>;
|
|
401
|
-
type SelectListProps = Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>;
|
|
402
|
-
type SelectComponent = React$1.ForwardRefExoticComponent<SelectRootProps & React$1.RefAttributes<HTMLDivElement>> & {
|
|
403
|
-
Label: React$1.ForwardRefExoticComponent<SelectLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
404
|
-
Trigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
405
|
-
Box: React$1.ForwardRefExoticComponent<SelectBoxProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
406
|
-
Value: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Value>>>;
|
|
407
|
-
List: React$1.ForwardRefExoticComponent<SelectListProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Content>>>;
|
|
408
|
-
Item: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Item>>>;
|
|
409
|
-
Empty: React$1.ForwardRefExoticComponent<SelectEmptyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
410
|
-
Description: React$1.ForwardRefExoticComponent<SelectDescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
411
|
-
Group: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
412
|
-
};
|
|
413
|
-
declare const Select: SelectComponent;
|
|
414
|
-
|
|
415
|
-
type TooltipRootProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
|
|
416
|
-
type TooltipProviderProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
|
|
417
|
-
type TooltipTriggerProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;
|
|
418
|
-
type TooltipContentProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipContentVariants> & {
|
|
419
|
-
portalContainer?: HTMLElement | null;
|
|
420
|
-
};
|
|
421
|
-
type TooltipTitleProps = React__default.HTMLAttributes<HTMLDivElement>;
|
|
422
|
-
type TooltipDescriptionProps = React__default.HTMLAttributes<HTMLDivElement>;
|
|
423
|
-
type TooltipComponent = typeof TooltipPrimitive.Root & {
|
|
424
|
-
Provider: typeof TooltipPrimitive.Provider;
|
|
425
|
-
Trigger: typeof TooltipPrimitive.Trigger;
|
|
426
|
-
Content: React__default.ForwardRefExoticComponent<TooltipContentProps & React__default.RefAttributes<React__default.ElementRef<typeof TooltipPrimitive.Content>>>;
|
|
427
|
-
Title: React__default.ForwardRefExoticComponent<TooltipTitleProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
428
|
-
Description: React__default.ForwardRefExoticComponent<TooltipDescriptionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
429
|
-
};
|
|
430
|
-
declare const tooltipContentVariants: (props?: ({
|
|
431
|
-
size?: "small" | "medium" | "large" | "xlarge" | "tiny" | null | undefined;
|
|
432
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
433
|
-
declare const Tooltip: TooltipComponent;
|
|
434
|
-
|
|
435
|
-
interface FlatTooltipProps {
|
|
436
|
-
/** 툴팁을 적용할 자식 요소 */
|
|
437
|
-
children: React.ReactNode;
|
|
438
|
-
/** 툴팁 제목 (선택) */
|
|
439
|
-
title?: React.ReactNode;
|
|
440
|
-
/** 툴팁 크기 */
|
|
441
|
-
size: ComponentProps<typeof Tooltip.Content>['size'];
|
|
442
|
-
/** 툴팁 표시 위치 */
|
|
443
|
-
side?: ComponentProps<typeof Tooltip.Content>['side'];
|
|
444
|
-
/** 툴팁 정렬 */
|
|
445
|
-
align?: ComponentProps<typeof Tooltip.Content>['align'];
|
|
446
|
-
/** 사이드 방향 오프셋 (px) */
|
|
447
|
-
sideOffset?: ComponentProps<typeof Tooltip.Content>['sideOffset'];
|
|
448
|
-
/** 정렬 방향 오프셋 (px) */
|
|
449
|
-
alignOffset?: ComponentProps<typeof Tooltip.Content>['alignOffset'];
|
|
450
|
-
/** 툴팁 설명 텍스트 */
|
|
451
|
-
description: React.ReactNode;
|
|
452
|
-
}
|
|
453
|
-
/**
|
|
454
|
-
* Tooltip 컴포넌트의 간소화된 Flat API입니다.
|
|
455
|
-
* Compound Component 없이 props만으로 간편하게 사용할 수 있습니다.
|
|
456
|
-
*
|
|
457
|
-
* @example
|
|
458
|
-
* ```tsx
|
|
459
|
-
* <FlatTooltip size="small" description="도움말 텍스트">
|
|
460
|
-
* <button>호버하세요</button>
|
|
461
|
-
* </FlatTooltip>
|
|
462
|
-
*
|
|
463
|
-
* <FlatTooltip size="tiny" title="제목" description="설명">
|
|
464
|
-
* <span>정보</span>
|
|
465
|
-
* </FlatTooltip>
|
|
466
|
-
* ```
|
|
467
|
-
*
|
|
468
|
-
* @see {@link FlatTooltipProps} props 상세
|
|
469
|
-
*/
|
|
470
|
-
declare const FlatTooltip: {
|
|
471
|
-
({ children, title, size, description, ...props }: FlatTooltipProps): react_jsx_runtime.JSX.Element;
|
|
472
|
-
displayName: string;
|
|
473
|
-
};
|
|
474
|
-
/** FlatTooltip 설정 객체 타입 (children 제외) */
|
|
475
|
-
type TooltipConfig = Omit<ComponentProps<typeof FlatTooltip>, 'children' | 'size'> & {
|
|
476
|
-
/**
|
|
477
|
-
* 툴팁 사용 여부
|
|
478
|
-
* @default true
|
|
479
|
-
*/
|
|
480
|
-
use?: boolean;
|
|
481
|
-
size?: ComponentProps<typeof FlatTooltip>['size'];
|
|
482
|
-
};
|
|
483
|
-
interface ConditionalTooltipProps {
|
|
484
|
-
/** 툴팁으로 감쌀 자식 요소 */
|
|
485
|
-
children: React.ReactNode;
|
|
486
|
-
/**
|
|
487
|
-
* 툴팁 설정값
|
|
488
|
-
* - `string`: 기본 tiny 사이즈의 툴팁 description으로 사용
|
|
489
|
-
* - `object`: FlatTooltip props를 직접 전달 (`use: false`로 비활성화 가능)
|
|
490
|
-
*/
|
|
491
|
-
tooltip: ComponentProps<typeof FlatTooltip>['description'] | TooltipConfig;
|
|
492
|
-
}
|
|
493
|
-
/**
|
|
494
|
-
* 조건부로 FlatTooltip을 적용하는 래퍼 컴포넌트입니다.
|
|
495
|
-
*
|
|
496
|
-
* @description
|
|
497
|
-
* tooltip prop의 타입에 따라 다르게 동작합니다:
|
|
498
|
-
* - `string`: tiny 사이즈의 기본 툴팁으로 렌더링
|
|
499
|
-
* - `object` (`use !== false`): 전달된 props로 FlatTooltip 렌더링
|
|
500
|
-
* - `object` (`use === false`) 또는 기타: children만 반환 (툴팁 없음)
|
|
501
|
-
*
|
|
502
|
-
* @example
|
|
503
|
-
* ```tsx
|
|
504
|
-
* <ConditionalTooltip tooltip="도움말 텍스트">
|
|
505
|
-
* <button>버튼</button>
|
|
506
|
-
* </ConditionalTooltip>
|
|
507
|
-
*
|
|
508
|
-
* <ConditionalTooltip tooltip={{ description: "설명", size: "small", side: "top" }}>
|
|
509
|
-
* <button>버튼</button>
|
|
510
|
-
* </ConditionalTooltip>
|
|
511
|
-
*
|
|
512
|
-
* <ConditionalTooltip tooltip={{ use: false, description: "" }}>
|
|
513
|
-
* <button>툴팁 없음</button>
|
|
514
|
-
* </ConditionalTooltip>
|
|
515
|
-
* ```
|
|
516
|
-
*
|
|
517
|
-
* @see {@link ConditionalTooltipProps} props 상세
|
|
518
|
-
*/
|
|
519
|
-
declare function ConditionalTooltip({ children, tooltip }: ConditionalTooltipProps): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
|
|
520
|
-
declare namespace ConditionalTooltip {
|
|
521
|
-
var displayName: string;
|
|
522
|
-
}
|
|
523
|
-
|
|
524
285
|
type ButtonGroupSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
525
286
|
interface ButtonGroupItem {
|
|
526
287
|
id: string;
|
|
@@ -1163,4 +924,10 @@ declare function useToast(): {
|
|
|
1163
924
|
loading: (message?: string, options?: Options) => string | number;
|
|
1164
925
|
};
|
|
1165
926
|
|
|
1166
|
-
|
|
927
|
+
declare const buttonize: (fn: (e: React__default.MouseEvent<HTMLElement> | React__default.KeyboardEvent<HTMLElement>) => void) => {
|
|
928
|
+
role: string;
|
|
929
|
+
onClick: (e: React__default.MouseEvent<HTMLElement> | React__default.KeyboardEvent<HTMLElement>) => void;
|
|
930
|
+
onKeyDown: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
|
|
931
|
+
};
|
|
932
|
+
|
|
933
|
+
export { Avatar, type AvatarComponent, type AvatarProps, Badge, type BadgeComponent, type BadgeProps, Breadcrumb, type BreadcrumbComponent, type BreadcrumbEllipsisProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbRootProps, type BreadcrumbSeparatorProps, Button, type ButtonComponent, ButtonGroup, type ButtonGroupComponent, type ButtonGroupItem, type ButtonGroupProps, type ButtonProps, Checkbox, type CheckboxComponent, type CheckboxProps, DatePicker, type DatePickerProps, DoubleTag, type DoubleTagProps, type ExtendedExternalToast, IconButton, type IconButtonComponent, type IconButtonProps, Loading, type LoadingComponent, type LoadingProps, MessageBox, type MessageBoxActionProps, type MessageBoxActionsProps, type MessageBoxCancelProps, type MessageBoxComponent, type MessageBoxContentProps, type MessageBoxDescriptionProps, type MessageBoxRootProps, type MessageBoxTitleProps, type MessageBoxTriggerProps, type MessageBoxVariant, Modal, type ModalActionProps, type ModalActionsProps, type ModalBodyProps, type ModalCloseProps, type ModalComponent, type ModalContentProps, type ModalDescriptionProps, type ModalFooterDescriptionProps, type ModalFooterProps, type ModalHeaderProps, type ModalOverlayProps, type ModalPortalProps, type ModalRootProps, type ModalTitleProps, type ModalTriggerProps, Progress, type ProgressComponent, type ProgressProps, Radio, type RadioComponent, type RadioItemProps, type RadioRootProps, ScrollArea, type ScrollAreaProps, ScrollBar, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tabs, type TabsComponent, type TabsContentProps, type TabsListProps, type TabsRootProps, type TabsTriggerProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaComponent, type TextAreaDescriptionProps, type TextAreaFieldProps, type TextAreaLabelProps, type TextAreaRootProps, TextField, type TextFieldComponent, type TextFieldDescriptionProps, type TextFieldInputProps, type TextFieldLabelProps, type TextFieldRootProps, type ToastAction, type ToastInput, type ToastOptions, ToastProvider, type ToastProviderProps, Toaster, type ToasterActionProps, type ToasterComponent, type ToasterContainerProps, type ToasterDescriptionProps, type ToasterIconProps, type ToasterRootProps, type ToasterTitleProps, buttonize, toast, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,16 +3,18 @@ import { VariantProps } from '@exem-ui/core/utils';
|
|
|
3
3
|
import * as React$1 from 'react';
|
|
4
4
|
import React__default, { ComponentProps } from 'react';
|
|
5
5
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
6
|
-
import
|
|
7
|
-
|
|
6
|
+
import { C as ConditionalTooltip, V as Variant, S as Size, I as Icon } from './FlatTooltip-Dyj1pCh4.js';
|
|
7
|
+
export { l as Segment, m as SegmentComponent, n as SegmentContentProps, o as SegmentItemProps, p as SegmentListProps, q as SegmentRootProps, a as Select, b as SelectBoxProps, c as SelectComponent, d as SelectDescriptionProps, e as SelectEmptyProps, f as SelectGroupProps, g as SelectItemProps, h as SelectLabelProps, i as SelectListProps, j as SelectRootProps, k as SelectTriggerProps, T as Tooltip, r as TooltipComponent, s as TooltipContentProps, t as TooltipDescriptionProps, u as TooltipProviderProps, v as TooltipRootProps, w as TooltipTitleProps, x as TooltipTriggerProps } from './FlatTooltip-Dyj1pCh4.js';
|
|
8
8
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
9
9
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
10
10
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
11
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
11
12
|
import { DayPicker } from 'react-day-picker';
|
|
12
|
-
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
13
13
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
14
14
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
15
15
|
import { Toaster as Toaster$1, ExternalToast, toast as toast$1 } from 'sonner';
|
|
16
|
+
import '@radix-ui/react-select';
|
|
17
|
+
import '@radix-ui/react-tooltip';
|
|
16
18
|
|
|
17
19
|
interface AvatarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
|
|
18
20
|
/** 사용자 이름. 이미지가 없을 때 이니셜 폴백에 사용됩니다. */
|
|
@@ -280,247 +282,6 @@ declare const buttonVariants: (props?: ({
|
|
|
280
282
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
281
283
|
declare const Button: ButtonComponent;
|
|
282
284
|
|
|
283
|
-
type SegmentSize = 'small' | 'medium' | 'large';
|
|
284
|
-
type SegmentListProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
|
|
285
|
-
type SegmentItemProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
|
|
286
|
-
/** 텍스트 왼쪽에 표시할 아이콘 요소 */
|
|
287
|
-
leftIcon?: React__default.ReactElement<{
|
|
288
|
-
className?: string;
|
|
289
|
-
}>;
|
|
290
|
-
};
|
|
291
|
-
type SegmentContentProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
|
|
292
|
-
type SegmentRootProps = React__default.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
|
|
293
|
-
/**
|
|
294
|
-
* 세그먼트 크기
|
|
295
|
-
* @default 'medium'
|
|
296
|
-
*/
|
|
297
|
-
size?: SegmentSize;
|
|
298
|
-
};
|
|
299
|
-
type SegmentComponent = React__default.ForwardRefExoticComponent<SegmentRootProps & React__default.RefAttributes<React__default.ElementRef<typeof TabsPrimitive.Root>>> & {
|
|
300
|
-
List: React__default.ForwardRefExoticComponent<SegmentListProps>;
|
|
301
|
-
Item: React__default.ForwardRefExoticComponent<SegmentItemProps>;
|
|
302
|
-
Content: React__default.ForwardRefExoticComponent<SegmentContentProps>;
|
|
303
|
-
};
|
|
304
|
-
/**
|
|
305
|
-
* 탭 형태의 세그먼트 컨트롤 컴포넌트입니다.
|
|
306
|
-
* Compound Component 패턴으로 `Segment.List`, `Segment.Item`, `Segment.Content`와 함께 사용합니다.
|
|
307
|
-
*
|
|
308
|
-
* @example
|
|
309
|
-
* ```tsx
|
|
310
|
-
* <Segment defaultValue="tab1" size="medium">
|
|
311
|
-
* <Segment.List>
|
|
312
|
-
* <Segment.Item value="tab1">첫 번째</Segment.Item>
|
|
313
|
-
* <Segment.Item value="tab2">두 번째</Segment.Item>
|
|
314
|
-
* </Segment.List>
|
|
315
|
-
* <Segment.Content value="tab1">첫 번째 내용</Segment.Content>
|
|
316
|
-
* <Segment.Content value="tab2">두 번째 내용</Segment.Content>
|
|
317
|
-
* </Segment>
|
|
318
|
-
* ```
|
|
319
|
-
*
|
|
320
|
-
* @see {@link SegmentRootProps} 루트 props 상세
|
|
321
|
-
* @see {@link SegmentItemProps} 아이템 props 상세
|
|
322
|
-
*/
|
|
323
|
-
declare const Segment: SegmentComponent;
|
|
324
|
-
|
|
325
|
-
type Size = 'xsmall' | 'small' | 'medium' | 'large';
|
|
326
|
-
type Variant = 'fill' | 'line';
|
|
327
|
-
type Icon = React.ReactElement<{
|
|
328
|
-
className?: string;
|
|
329
|
-
}>;
|
|
330
|
-
|
|
331
|
-
/** Select 라벨 Props */
|
|
332
|
-
type SelectLabelProps = {
|
|
333
|
-
children: React$1.ReactNode;
|
|
334
|
-
required?: boolean;
|
|
335
|
-
size?: Size;
|
|
336
|
-
className?: string;
|
|
337
|
-
};
|
|
338
|
-
/** Select 트리거 Props */
|
|
339
|
-
type SelectTriggerProps = {
|
|
340
|
-
children?: React$1.ReactNode;
|
|
341
|
-
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
342
|
-
leftIcon?: Icon;
|
|
343
|
-
className?: string;
|
|
344
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
345
|
-
/** Select Box (Trigger + Value 조합) Props */
|
|
346
|
-
type SelectBoxProps = {
|
|
347
|
-
placeholder?: string;
|
|
348
|
-
/** 트리거 왼쪽에 표시할 아이콘 */
|
|
349
|
-
leftIcon?: Icon;
|
|
350
|
-
className?: string;
|
|
351
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'>;
|
|
352
|
-
/** Select 아이템 Props */
|
|
353
|
-
type SelectItemProps = {
|
|
354
|
-
children?: React$1.ReactNode;
|
|
355
|
-
/** 아이템 왼쪽에 표시할 아이콘 */
|
|
356
|
-
leftIcon?: Icon;
|
|
357
|
-
/** 아이템 오른쪽에 표시할 아이콘 */
|
|
358
|
-
rightIcon?: Icon;
|
|
359
|
-
/** 왼쪽 아이콘 크기 */
|
|
360
|
-
leftIconSize?: Size;
|
|
361
|
-
/** 오른쪽 아이콘 크기 */
|
|
362
|
-
rightIconSize?: Size;
|
|
363
|
-
size?: Size;
|
|
364
|
-
className?: string;
|
|
365
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'children'>;
|
|
366
|
-
type SelectEmptyProps = {
|
|
367
|
-
children?: React$1.ReactNode;
|
|
368
|
-
className?: string;
|
|
369
|
-
};
|
|
370
|
-
type SelectDescriptionProps = {
|
|
371
|
-
children?: React$1.ReactNode;
|
|
372
|
-
size?: Size;
|
|
373
|
-
className?: string;
|
|
374
|
-
};
|
|
375
|
-
type SelectGroupProps = {
|
|
376
|
-
children: React$1.ReactNode;
|
|
377
|
-
size?: Size;
|
|
378
|
-
/** 셀렉트 그룹 스타일 변형 */
|
|
379
|
-
variant?: Variant;
|
|
380
|
-
/** 불투명 배경 (elevation-0) 사용 여부. 반투명 배경이 비쳐보이는 것을 방지합니다. */
|
|
381
|
-
hasBackground?: boolean;
|
|
382
|
-
className?: string;
|
|
383
|
-
};
|
|
384
|
-
/** Select 루트 Props */
|
|
385
|
-
type SelectRootProps = {
|
|
386
|
-
children?: React$1.ReactNode;
|
|
387
|
-
/** 셀렉트 크기 */
|
|
388
|
-
size?: Size;
|
|
389
|
-
/** 셀렉트 스타일 변형 */
|
|
390
|
-
variant?: Variant;
|
|
391
|
-
/** 에러 상태 */
|
|
392
|
-
error?: boolean;
|
|
393
|
-
/** 포커스 상태 (line variant에서만 적용) */
|
|
394
|
-
focus?: boolean;
|
|
395
|
-
/** 활성화 상태 (필터 적용 등 내부 상태가 활성화됨을 표시) */
|
|
396
|
-
active?: boolean;
|
|
397
|
-
/** 비활성화 상태 */
|
|
398
|
-
disabled?: boolean;
|
|
399
|
-
className?: string;
|
|
400
|
-
} & Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, 'disabled' | 'children'>;
|
|
401
|
-
type SelectListProps = Omit<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, 'position'>;
|
|
402
|
-
type SelectComponent = React$1.ForwardRefExoticComponent<SelectRootProps & React$1.RefAttributes<HTMLDivElement>> & {
|
|
403
|
-
Label: React$1.ForwardRefExoticComponent<SelectLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
404
|
-
Trigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
405
|
-
Box: React$1.ForwardRefExoticComponent<SelectBoxProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Trigger>>>;
|
|
406
|
-
Value: React$1.ForwardRefExoticComponent<React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Value>>>;
|
|
407
|
-
List: React$1.ForwardRefExoticComponent<SelectListProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Content>>>;
|
|
408
|
-
Item: React$1.ForwardRefExoticComponent<SelectItemProps & React$1.RefAttributes<React$1.ComponentRef<typeof SelectPrimitive.Item>>>;
|
|
409
|
-
Empty: React$1.ForwardRefExoticComponent<SelectEmptyProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
410
|
-
Description: React$1.ForwardRefExoticComponent<SelectDescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
411
|
-
Group: React$1.ForwardRefExoticComponent<SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
412
|
-
};
|
|
413
|
-
declare const Select: SelectComponent;
|
|
414
|
-
|
|
415
|
-
type TooltipRootProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
|
|
416
|
-
type TooltipProviderProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
|
|
417
|
-
type TooltipTriggerProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;
|
|
418
|
-
type TooltipContentProps = React__default.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & VariantProps<typeof tooltipContentVariants> & {
|
|
419
|
-
portalContainer?: HTMLElement | null;
|
|
420
|
-
};
|
|
421
|
-
type TooltipTitleProps = React__default.HTMLAttributes<HTMLDivElement>;
|
|
422
|
-
type TooltipDescriptionProps = React__default.HTMLAttributes<HTMLDivElement>;
|
|
423
|
-
type TooltipComponent = typeof TooltipPrimitive.Root & {
|
|
424
|
-
Provider: typeof TooltipPrimitive.Provider;
|
|
425
|
-
Trigger: typeof TooltipPrimitive.Trigger;
|
|
426
|
-
Content: React__default.ForwardRefExoticComponent<TooltipContentProps & React__default.RefAttributes<React__default.ElementRef<typeof TooltipPrimitive.Content>>>;
|
|
427
|
-
Title: React__default.ForwardRefExoticComponent<TooltipTitleProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
428
|
-
Description: React__default.ForwardRefExoticComponent<TooltipDescriptionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
429
|
-
};
|
|
430
|
-
declare const tooltipContentVariants: (props?: ({
|
|
431
|
-
size?: "small" | "medium" | "large" | "xlarge" | "tiny" | null | undefined;
|
|
432
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
433
|
-
declare const Tooltip: TooltipComponent;
|
|
434
|
-
|
|
435
|
-
interface FlatTooltipProps {
|
|
436
|
-
/** 툴팁을 적용할 자식 요소 */
|
|
437
|
-
children: React.ReactNode;
|
|
438
|
-
/** 툴팁 제목 (선택) */
|
|
439
|
-
title?: React.ReactNode;
|
|
440
|
-
/** 툴팁 크기 */
|
|
441
|
-
size: ComponentProps<typeof Tooltip.Content>['size'];
|
|
442
|
-
/** 툴팁 표시 위치 */
|
|
443
|
-
side?: ComponentProps<typeof Tooltip.Content>['side'];
|
|
444
|
-
/** 툴팁 정렬 */
|
|
445
|
-
align?: ComponentProps<typeof Tooltip.Content>['align'];
|
|
446
|
-
/** 사이드 방향 오프셋 (px) */
|
|
447
|
-
sideOffset?: ComponentProps<typeof Tooltip.Content>['sideOffset'];
|
|
448
|
-
/** 정렬 방향 오프셋 (px) */
|
|
449
|
-
alignOffset?: ComponentProps<typeof Tooltip.Content>['alignOffset'];
|
|
450
|
-
/** 툴팁 설명 텍스트 */
|
|
451
|
-
description: React.ReactNode;
|
|
452
|
-
}
|
|
453
|
-
/**
|
|
454
|
-
* Tooltip 컴포넌트의 간소화된 Flat API입니다.
|
|
455
|
-
* Compound Component 없이 props만으로 간편하게 사용할 수 있습니다.
|
|
456
|
-
*
|
|
457
|
-
* @example
|
|
458
|
-
* ```tsx
|
|
459
|
-
* <FlatTooltip size="small" description="도움말 텍스트">
|
|
460
|
-
* <button>호버하세요</button>
|
|
461
|
-
* </FlatTooltip>
|
|
462
|
-
*
|
|
463
|
-
* <FlatTooltip size="tiny" title="제목" description="설명">
|
|
464
|
-
* <span>정보</span>
|
|
465
|
-
* </FlatTooltip>
|
|
466
|
-
* ```
|
|
467
|
-
*
|
|
468
|
-
* @see {@link FlatTooltipProps} props 상세
|
|
469
|
-
*/
|
|
470
|
-
declare const FlatTooltip: {
|
|
471
|
-
({ children, title, size, description, ...props }: FlatTooltipProps): react_jsx_runtime.JSX.Element;
|
|
472
|
-
displayName: string;
|
|
473
|
-
};
|
|
474
|
-
/** FlatTooltip 설정 객체 타입 (children 제외) */
|
|
475
|
-
type TooltipConfig = Omit<ComponentProps<typeof FlatTooltip>, 'children' | 'size'> & {
|
|
476
|
-
/**
|
|
477
|
-
* 툴팁 사용 여부
|
|
478
|
-
* @default true
|
|
479
|
-
*/
|
|
480
|
-
use?: boolean;
|
|
481
|
-
size?: ComponentProps<typeof FlatTooltip>['size'];
|
|
482
|
-
};
|
|
483
|
-
interface ConditionalTooltipProps {
|
|
484
|
-
/** 툴팁으로 감쌀 자식 요소 */
|
|
485
|
-
children: React.ReactNode;
|
|
486
|
-
/**
|
|
487
|
-
* 툴팁 설정값
|
|
488
|
-
* - `string`: 기본 tiny 사이즈의 툴팁 description으로 사용
|
|
489
|
-
* - `object`: FlatTooltip props를 직접 전달 (`use: false`로 비활성화 가능)
|
|
490
|
-
*/
|
|
491
|
-
tooltip: ComponentProps<typeof FlatTooltip>['description'] | TooltipConfig;
|
|
492
|
-
}
|
|
493
|
-
/**
|
|
494
|
-
* 조건부로 FlatTooltip을 적용하는 래퍼 컴포넌트입니다.
|
|
495
|
-
*
|
|
496
|
-
* @description
|
|
497
|
-
* tooltip prop의 타입에 따라 다르게 동작합니다:
|
|
498
|
-
* - `string`: tiny 사이즈의 기본 툴팁으로 렌더링
|
|
499
|
-
* - `object` (`use !== false`): 전달된 props로 FlatTooltip 렌더링
|
|
500
|
-
* - `object` (`use === false`) 또는 기타: children만 반환 (툴팁 없음)
|
|
501
|
-
*
|
|
502
|
-
* @example
|
|
503
|
-
* ```tsx
|
|
504
|
-
* <ConditionalTooltip tooltip="도움말 텍스트">
|
|
505
|
-
* <button>버튼</button>
|
|
506
|
-
* </ConditionalTooltip>
|
|
507
|
-
*
|
|
508
|
-
* <ConditionalTooltip tooltip={{ description: "설명", size: "small", side: "top" }}>
|
|
509
|
-
* <button>버튼</button>
|
|
510
|
-
* </ConditionalTooltip>
|
|
511
|
-
*
|
|
512
|
-
* <ConditionalTooltip tooltip={{ use: false, description: "" }}>
|
|
513
|
-
* <button>툴팁 없음</button>
|
|
514
|
-
* </ConditionalTooltip>
|
|
515
|
-
* ```
|
|
516
|
-
*
|
|
517
|
-
* @see {@link ConditionalTooltipProps} props 상세
|
|
518
|
-
*/
|
|
519
|
-
declare function ConditionalTooltip({ children, tooltip }: ConditionalTooltipProps): string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | null | undefined;
|
|
520
|
-
declare namespace ConditionalTooltip {
|
|
521
|
-
var displayName: string;
|
|
522
|
-
}
|
|
523
|
-
|
|
524
285
|
type ButtonGroupSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
525
286
|
interface ButtonGroupItem {
|
|
526
287
|
id: string;
|
|
@@ -1163,4 +924,10 @@ declare function useToast(): {
|
|
|
1163
924
|
loading: (message?: string, options?: Options) => string | number;
|
|
1164
925
|
};
|
|
1165
926
|
|
|
1166
|
-
|
|
927
|
+
declare const buttonize: (fn: (e: React__default.MouseEvent<HTMLElement> | React__default.KeyboardEvent<HTMLElement>) => void) => {
|
|
928
|
+
role: string;
|
|
929
|
+
onClick: (e: React__default.MouseEvent<HTMLElement> | React__default.KeyboardEvent<HTMLElement>) => void;
|
|
930
|
+
onKeyDown: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
|
|
931
|
+
};
|
|
932
|
+
|
|
933
|
+
export { Avatar, type AvatarComponent, type AvatarProps, Badge, type BadgeComponent, type BadgeProps, Breadcrumb, type BreadcrumbComponent, type BreadcrumbEllipsisProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbPageProps, type BreadcrumbRootProps, type BreadcrumbSeparatorProps, Button, type ButtonComponent, ButtonGroup, type ButtonGroupComponent, type ButtonGroupItem, type ButtonGroupProps, type ButtonProps, Checkbox, type CheckboxComponent, type CheckboxProps, DatePicker, type DatePickerProps, DoubleTag, type DoubleTagProps, type ExtendedExternalToast, IconButton, type IconButtonComponent, type IconButtonProps, Loading, type LoadingComponent, type LoadingProps, MessageBox, type MessageBoxActionProps, type MessageBoxActionsProps, type MessageBoxCancelProps, type MessageBoxComponent, type MessageBoxContentProps, type MessageBoxDescriptionProps, type MessageBoxRootProps, type MessageBoxTitleProps, type MessageBoxTriggerProps, type MessageBoxVariant, Modal, type ModalActionProps, type ModalActionsProps, type ModalBodyProps, type ModalCloseProps, type ModalComponent, type ModalContentProps, type ModalDescriptionProps, type ModalFooterDescriptionProps, type ModalFooterProps, type ModalHeaderProps, type ModalOverlayProps, type ModalPortalProps, type ModalRootProps, type ModalTitleProps, type ModalTriggerProps, Progress, type ProgressComponent, type ProgressProps, Radio, type RadioComponent, type RadioItemProps, type RadioRootProps, ScrollArea, type ScrollAreaProps, ScrollBar, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tabs, type TabsComponent, type TabsContentProps, type TabsListProps, type TabsRootProps, type TabsTriggerProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaComponent, type TextAreaDescriptionProps, type TextAreaFieldProps, type TextAreaLabelProps, type TextAreaRootProps, TextField, type TextFieldComponent, type TextFieldDescriptionProps, type TextFieldInputProps, type TextFieldLabelProps, type TextFieldRootProps, type ToastAction, type ToastInput, type ToastOptions, ToastProvider, type ToastProviderProps, Toaster, type ToasterActionProps, type ToasterComponent, type ToasterContainerProps, type ToasterDescriptionProps, type ToasterIconProps, type ToasterRootProps, type ToasterTitleProps, buttonize, toast, useToast };
|