@likelion-design/ui 1.0.1 → 1.0.2

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/index.d.mts CHANGED
@@ -242,4 +242,807 @@ declare function useDialog(): {
242
242
  DialogContainer: () => React.ReactPortal | null;
243
243
  };
244
244
 
245
- export { ActionButton, type ActionButtonProps, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOpenOptions, type DialogProps, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, useDialog };
245
+ type TextInputSize = "pc" | "mo";
246
+ type TextInputState = "default" | "error";
247
+ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "title"> {
248
+ /** Title 텍스트 (있으면 표시) */
249
+ title?: string;
250
+ /** 필수 필드 표시 여부 */
251
+ required?: boolean;
252
+ /** Input 크기 (미지정 시 breakpoint 기준: tablet 미만 mo, 이상 pc). 지정 시 오버라이드 */
253
+ size?: TextInputSize;
254
+ /** Input 상태 (에러 상태) */
255
+ error?: boolean;
256
+ /** Help text */
257
+ description?: React.ReactNode;
258
+ /** Character count 표시 (예: "99/100") */
259
+ maxLength?: number;
260
+ /** 왼쪽 아이콘 */
261
+ prefixIcon?: React.ReactNode;
262
+ /** 오른쪽 아이콘 */
263
+ suffixIcon?: React.ReactNode;
264
+ /** 오른쪽 단위 (타이머 등) */
265
+ suffixUnit?: React.ReactNode;
266
+ /** Help text 아이콘 (true면 기본 아이콘, 노드면 커스텀) */
267
+ accentIcon?: boolean | React.ReactNode;
268
+ }
269
+ /** TextInput 컴포넌트는 사용자로부터 텍스트 입력을 받는 폼 컴포넌트입니다. */
270
+ declare const TextInput: ({ required, size, error, description, maxLength, prefixIcon, suffixIcon, suffixUnit, title, accentIcon, className, id, value, defaultValue, onChange, onFocus, onBlur, ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
271
+
272
+ type ToggleSize = "medium" | "small";
273
+ type ToggleLabelPosition = "start" | "end";
274
+ interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
275
+ /** Toggle 크기 */
276
+ size?: ToggleSize;
277
+ /** Toggle 라벨 */
278
+ label?: React.ReactNode;
279
+ /** Toggle 라벨 위치 */
280
+ labelPosition?: ToggleLabelPosition;
281
+ /** Toggle 설명 텍스트 */
282
+ description?: React.ReactNode;
283
+ /** Toggle 상태 변경 핸들러 */
284
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
285
+ }
286
+ /** Toggle 컴포넌트는 사용자가 on/off 상태를 전환할 수 있는 스위치 컴포넌트다. */
287
+ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
288
+
289
+ type TextVariant = "display-d1" | "display-d2" | "display-d3" | "display-d4" | "heading-h1" | "heading-h2" | "heading-h3" | "heading-h4" | "heading-h5" | "heading-h6" | "subtitle-p1" | "subtitle-p2" | "subtitle-p3" | "body-p1" | "body-p2" | "body-p3" | "body-p4" | "body-p5";
290
+ type TextDecoration = "none" | "underline";
291
+ interface TextProps extends React.HTMLAttributes<HTMLElement> {
292
+ /** Text 변형 */
293
+ variant: TextVariant;
294
+ /** 텍스트 장식 (underline 등) */
295
+ decoration?: TextDecoration;
296
+ /** HTML 태그 (기본값: variant에 따라 자동 결정) */
297
+ as?: keyof React.JSX.IntrinsicElements;
298
+ /** 자식 요소 */
299
+ children: React.ReactNode;
300
+ }
301
+ /** Text 컴포넌트는 텍스트 스타일을 일관되게 적용하는 컴포넌트입니다. */
302
+ declare const Text: ({ variant, decoration, as, children, className, ...props }: TextProps) => React.DOMElement<{
303
+ defaultChecked?: boolean | undefined;
304
+ defaultValue?: string | number | readonly string[] | undefined;
305
+ suppressContentEditableWarning?: boolean | undefined;
306
+ suppressHydrationWarning?: boolean | undefined;
307
+ accessKey?: string | undefined;
308
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
309
+ autoFocus?: boolean | undefined;
310
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
311
+ contextMenu?: string | undefined;
312
+ dir?: string | undefined;
313
+ draggable?: (boolean | "true" | "false") | undefined;
314
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
315
+ hidden?: boolean | undefined;
316
+ id?: string | undefined;
317
+ lang?: string | undefined;
318
+ nonce?: string | undefined;
319
+ slot?: string | undefined;
320
+ spellCheck?: (boolean | "true" | "false") | undefined;
321
+ style?: React.CSSProperties | undefined;
322
+ tabIndex?: number | undefined;
323
+ title?: string | undefined;
324
+ translate?: "yes" | "no" | undefined;
325
+ radioGroup?: string | undefined;
326
+ role?: React.AriaRole | undefined;
327
+ about?: string | undefined;
328
+ content?: string | undefined;
329
+ datatype?: string | undefined;
330
+ inlist?: any;
331
+ prefix?: string | undefined;
332
+ property?: string | undefined;
333
+ rel?: string | undefined;
334
+ resource?: string | undefined;
335
+ rev?: string | undefined;
336
+ typeof?: string | undefined;
337
+ vocab?: string | undefined;
338
+ autoCorrect?: string | undefined;
339
+ autoSave?: string | undefined;
340
+ color?: string | undefined;
341
+ itemProp?: string | undefined;
342
+ itemScope?: boolean | undefined;
343
+ itemType?: string | undefined;
344
+ itemID?: string | undefined;
345
+ itemRef?: string | undefined;
346
+ results?: number | undefined;
347
+ security?: string | undefined;
348
+ unselectable?: "on" | "off" | undefined;
349
+ popover?: "" | "auto" | "manual" | "hint" | undefined;
350
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
351
+ popoverTarget?: string | undefined;
352
+ inert?: boolean | undefined;
353
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
354
+ is?: string | undefined;
355
+ exportparts?: string | undefined;
356
+ part?: string | undefined;
357
+ "aria-activedescendant"?: string | undefined;
358
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
359
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
360
+ "aria-braillelabel"?: string | undefined;
361
+ "aria-brailleroledescription"?: string | undefined;
362
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
363
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
364
+ "aria-colcount"?: number | undefined;
365
+ "aria-colindex"?: number | undefined;
366
+ "aria-colindextext"?: string | undefined;
367
+ "aria-colspan"?: number | undefined;
368
+ "aria-controls"?: string | undefined;
369
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
370
+ "aria-describedby"?: string | undefined;
371
+ "aria-description"?: string | undefined;
372
+ "aria-details"?: string | undefined;
373
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
374
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
375
+ "aria-errormessage"?: string | undefined;
376
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
377
+ "aria-flowto"?: string | undefined;
378
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
379
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
380
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
381
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
382
+ "aria-keyshortcuts"?: string | undefined;
383
+ "aria-label"?: string | undefined;
384
+ "aria-labelledby"?: string | undefined;
385
+ "aria-level"?: number | undefined;
386
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
387
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
388
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
389
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
390
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
391
+ "aria-owns"?: string | undefined;
392
+ "aria-placeholder"?: string | undefined;
393
+ "aria-posinset"?: number | undefined;
394
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
395
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
396
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
397
+ "aria-required"?: (boolean | "true" | "false") | undefined;
398
+ "aria-roledescription"?: string | undefined;
399
+ "aria-rowcount"?: number | undefined;
400
+ "aria-rowindex"?: number | undefined;
401
+ "aria-rowindextext"?: string | undefined;
402
+ "aria-rowspan"?: number | undefined;
403
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
404
+ "aria-setsize"?: number | undefined;
405
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
406
+ "aria-valuemax"?: number | undefined;
407
+ "aria-valuemin"?: number | undefined;
408
+ "aria-valuenow"?: number | undefined;
409
+ "aria-valuetext"?: string | undefined;
410
+ dangerouslySetInnerHTML?: {
411
+ __html: string | TrustedHTML;
412
+ } | undefined;
413
+ onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
414
+ onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
415
+ onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
416
+ onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
417
+ onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
418
+ onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
419
+ onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
420
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
421
+ onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
422
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
423
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
424
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
425
+ onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
426
+ onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
427
+ onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
428
+ onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
429
+ onChange?: React.FormEventHandler<HTMLElement> | undefined;
430
+ onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
431
+ onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
432
+ onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
433
+ onInput?: React.FormEventHandler<HTMLElement> | undefined;
434
+ onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
435
+ onReset?: React.FormEventHandler<HTMLElement> | undefined;
436
+ onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
437
+ onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
438
+ onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
439
+ onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
440
+ onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
441
+ onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
442
+ onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
443
+ onError?: React.ReactEventHandler<HTMLElement> | undefined;
444
+ onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
445
+ onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
446
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
447
+ onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
448
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
449
+ onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
450
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
451
+ onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
452
+ onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
453
+ onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
454
+ onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
455
+ onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
456
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
457
+ onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
458
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
459
+ onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
460
+ onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
461
+ onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
462
+ onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
463
+ onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
464
+ onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
465
+ onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
466
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
467
+ onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
468
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
469
+ onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
470
+ onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
471
+ onPause?: React.ReactEventHandler<HTMLElement> | undefined;
472
+ onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
473
+ onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
474
+ onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
475
+ onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
476
+ onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
477
+ onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
478
+ onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
479
+ onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
480
+ onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
481
+ onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
482
+ onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
483
+ onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
484
+ onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
485
+ onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
486
+ onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
487
+ onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
488
+ onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
489
+ onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
490
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
491
+ onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
492
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
493
+ onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
494
+ onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
495
+ onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
496
+ onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
497
+ onClick?: React.MouseEventHandler<HTMLElement> | undefined;
498
+ onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
499
+ onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
500
+ onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
501
+ onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
502
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
503
+ onDrag?: React.DragEventHandler<HTMLElement> | undefined;
504
+ onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
505
+ onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
506
+ onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
507
+ onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
508
+ onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
509
+ onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
510
+ onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
511
+ onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
512
+ onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
513
+ onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
514
+ onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
515
+ onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
516
+ onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
517
+ onDrop?: React.DragEventHandler<HTMLElement> | undefined;
518
+ onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
519
+ onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
520
+ onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
521
+ onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
522
+ onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
523
+ onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
524
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
525
+ onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
526
+ onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
527
+ onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
528
+ onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
529
+ onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
530
+ onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
531
+ onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
532
+ onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
533
+ onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
534
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
535
+ onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
536
+ onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
537
+ onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
538
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
539
+ onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
540
+ onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
541
+ onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
542
+ onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
543
+ onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
544
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
545
+ onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
546
+ onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
547
+ onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
548
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
549
+ onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
550
+ onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
551
+ onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
552
+ onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
553
+ onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
554
+ onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
555
+ onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
556
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
557
+ onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
558
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
559
+ onScroll?: React.UIEventHandler<HTMLElement> | undefined;
560
+ onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
561
+ onScrollEnd?: React.UIEventHandler<HTMLElement> | undefined;
562
+ onScrollEndCapture?: React.UIEventHandler<HTMLElement> | undefined;
563
+ onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
564
+ onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
565
+ onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
566
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
567
+ onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
568
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
569
+ onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
570
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
571
+ onToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
572
+ onBeforeToggle?: React.ToggleEventHandler<HTMLElement> | undefined;
573
+ onTransitionCancel?: React.TransitionEventHandler<HTMLElement> | undefined;
574
+ onTransitionCancelCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
575
+ onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
576
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
577
+ onTransitionRun?: React.TransitionEventHandler<HTMLElement> | undefined;
578
+ onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
579
+ onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
580
+ onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
581
+ className: string;
582
+ }, Element>;
583
+
584
+ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
585
+ /** Checkbox 라벨 */
586
+ label?: React.ReactNode;
587
+ /** label 스타일 오버라이드 (옵션) */
588
+ labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
589
+ variant?: React.ComponentProps<typeof Text>["variant"];
590
+ };
591
+ /** Checkbox 설명 텍스트 */
592
+ description?: React.ReactNode;
593
+ /** Checkbox 값 (Checkbox.Group에서 사용) */
594
+ value?: string;
595
+ /** Checkbox 상태 변경 핸들러 */
596
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
597
+ /** Indeterminate 상태 (부분 선택 상태) */
598
+ indeterminate?: boolean;
599
+ }
600
+ /** Checkbox 컴포넌트는 사용자가 선택/해제할 수 있는 체크박스 입력 컴포넌트다. */
601
+ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
602
+ interface CheckboxGroupProps {
603
+ /** 그룹 라벨 */
604
+ label?: React.ReactNode;
605
+ /** 그룹 라벨 스타일 오버라이드 (옵션) */
606
+ labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
607
+ variant?: React.ComponentProps<typeof Text>["variant"];
608
+ };
609
+ /** 그룹 설명 */
610
+ description?: React.ReactNode;
611
+ /** 그룹 설명 스타일 오버라이드 (옵션) */
612
+ descriptionProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
613
+ variant?: React.ComponentProps<typeof Text>["variant"];
614
+ };
615
+ /** 복수 선택 허용 여부. false면 단일 선택(라디오처럼 동작) */
616
+ multiple?: boolean;
617
+ /** 선택된 값들 (controlled). multiple=false일 때는 길이 0 또는 1 */
618
+ value?: string[];
619
+ /** 초기 선택된 값들 (uncontrolled) */
620
+ defaultValue?: string[];
621
+ /** 값 변경 핸들러 */
622
+ onChange?: (values: string[]) => void;
623
+ /** 비활성화 상태 */
624
+ disabled?: boolean;
625
+ /** 자식 Checkbox 컴포넌트들 */
626
+ children: React.ReactNode;
627
+ /** 추가 CSS 클래스명 */
628
+ className?: string;
629
+ }
630
+ /** Checkbox.Group은 여러 Checkbox를 그룹화하여 관리할 수 있는 컴포넌트다. */
631
+ declare const CheckboxGroup: {
632
+ ({ label, labelProps, description, descriptionProps, multiple, value: valueProp, defaultValue, onChange, disabled, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
633
+ displayName: string;
634
+ };
635
+
636
+ interface UseCheckboxGroupOptions {
637
+ /** 선택 가능한 값 목록 (CheckboxGroup 자식들의 value와 일치) */
638
+ options: readonly string[];
639
+ /** 초기 선택 값 (uncontrolled일 때) */
640
+ defaultValue?: string[];
641
+ /** 선택 값 (controlled일 때). 지정하면 onChange와 함께 사용 */
642
+ value?: string[];
643
+ /** 선택 값 변경 핸들러 (controlled일 때 필수) */
644
+ onChange?: (values: string[]) => void;
645
+ }
646
+ interface UseCheckboxGroupResult {
647
+ /** 현재 선택된 값들. CheckboxGroup의 value에 전달 */
648
+ value: string[];
649
+ /** 선택 변경 핸들러. CheckboxGroup의 onChange에 전달 */
650
+ onChange: (values: string[]) => void;
651
+ /** '전체 선택' 체크박스에 넘길 checked */
652
+ selectAllChecked: boolean;
653
+ /** '전체 선택' 체크박스에 넘길 indeterminate (일부만 선택된 경우) */
654
+ selectAllIndeterminate: boolean;
655
+ /** '전체 선택' 체크박스에 넘길 onChange */
656
+ handleSelectAll: (e: React.ChangeEvent<HTMLInputElement>) => void;
657
+ /** '전체 선택' Checkbox에 그대로 spread 가능한 props (checked, indeterminate, onChange) */
658
+ selectAllProps: {
659
+ checked: boolean;
660
+ indeterminate: boolean;
661
+ onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
662
+ };
663
+ }
664
+ /**
665
+ * CheckboxGroup + '전체 선택' 체크박스(indeterminate 포함) 상태를 관리하는 훅.
666
+ * options와 동기화된 value/onChange와, 전체 선택용 checked/indeterminate/onChange를 반환한다.
667
+ * 외부에서는 이 훅만 사용하면 된다.
668
+ *
669
+ * @example
670
+ * const options = ['react', 'vue', 'angular'] as const;
671
+ * const { value, onChange, selectAllProps } = useCheckboxGroup({ options });
672
+ *
673
+ * <Checkbox label="전체 선택" {...selectAllProps} />
674
+ * <CheckboxGroup value={value} onChange={onChange} ...>
675
+ * {options.map(v => <Checkbox key={v} value={v} label={v} />)}
676
+ * </CheckboxGroup>
677
+ */
678
+ declare function useCheckboxGroup(config: UseCheckboxGroupOptions): UseCheckboxGroupResult;
679
+
680
+ interface SelectMenuItem {
681
+ value: string;
682
+ label: React.ReactNode;
683
+ disabled?: boolean;
684
+ }
685
+ interface SelectMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
686
+ /** 메뉴 항목들 */
687
+ items: SelectMenuItem[];
688
+ /** 선택된 값 (controlled) */
689
+ value?: string | string[];
690
+ /** 초기 선택 값 (uncontrolled) */
691
+ defaultValue?: string | string[];
692
+ /** 값 변경 핸들러 */
693
+ onChange?: (value: string | string[] | undefined) => void;
694
+ /** 다중 선택 허용 여부 */
695
+ multiple?: boolean;
696
+ /** 항목 텍스트 스타일 오버라이드 (옵션) */
697
+ itemTextProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
698
+ variant?: React.ComponentProps<typeof Text>["variant"];
699
+ };
700
+ /** 선택된 항목 suffix 아이콘 (기본 체크 아이콘, 함수로 커스터마이즈 가능) */
701
+ suffixIcon?: React.ReactNode | ((item: SelectMenuItem) => React.ReactNode);
702
+ }
703
+ /** SelectMenu는 옵션 리스트를 표시하고 값을 선택하는 메뉴 컴포넌트다. */
704
+ declare const SelectMenu: React.ForwardRefExoticComponent<SelectMenuProps & React.RefAttributes<HTMLDivElement>>;
705
+ interface SelectMenuOverlayProps extends Omit<SelectMenuProps, "onClose"> {
706
+ /** 메뉴를 열기 위한 트리거 요소 (버튼/텍스트/아이콘 등) */
707
+ children: React.ReactNode;
708
+ /** 열림 상태 (controlled) */
709
+ open?: boolean;
710
+ /** 초기 열림 상태 (uncontrolled) */
711
+ defaultOpen?: boolean;
712
+ /** 열림 상태 변경 핸들러 */
713
+ onOpenChange?: (open: boolean) => void;
714
+ /** 메뉴 컨테이너 스타일 (positioning 커스터마이즈용) */
715
+ menuContainerStyle?: React.CSSProperties;
716
+ }
717
+ /** SelectMenuOverlay는 트리거(children)를 감싸고 SelectMenu를 토글하는 래퍼 컴포넌트다. */
718
+ declare const SelectMenuOverlay: {
719
+ ({ children, open: openProp, defaultOpen, onOpenChange, menuContainerStyle, ...menuProps }: SelectMenuOverlayProps): react_jsx_runtime.JSX.Element;
720
+ displayName: string;
721
+ };
722
+
723
+ type SelectHeaderType = "outlined" | "underlined";
724
+ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onChange" | "value"> {
725
+ /** SelectHeader 타입 */
726
+ type?: SelectHeaderType;
727
+ /** Title 텍스트 */
728
+ title?: string;
729
+ /** 필수 필드 표시 여부 */
730
+ required?: boolean;
731
+ /** 선택된 값 표시 (items 없을 때) / 선택된 값 controlled (items 있을 때) */
732
+ value?: string | string[] | null;
733
+ /** 플레이스홀더 텍스트 */
734
+ placeholder?: string;
735
+ /** 비활성화 상태 */
736
+ disabled?: boolean;
737
+ /** 에러 상태 */
738
+ error?: boolean;
739
+ /** Help text (도움말 텍스트) */
740
+ description?: React.ReactNode;
741
+ /** Help text 아이콘 (true면 기본 아이콘, 노드면 커스텀, false면 아이콘 없음) */
742
+ accentIcon?: boolean | React.ReactNode;
743
+ /** 클릭 핸들러 */
744
+ onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
745
+ /** 값 클리어 핸들러 */
746
+ onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
747
+ /** 커스텀 아이콘 */
748
+ icon?: React.ReactNode;
749
+ /** SelectMenu 항목들 (있으면 클릭 시 메뉴 열림) */
750
+ items?: SelectMenuItem[];
751
+ /** 초기 선택 값 (uncontrolled, items 있을 때) */
752
+ defaultValue?: string | string[];
753
+ /** 값 변경 핸들러 (items 있을 때) */
754
+ onChange?: (value: string | string[] | undefined) => void;
755
+ /** 다중 선택 허용 여부 (items 있을 때) */
756
+ multiple?: boolean;
757
+ }
758
+ /** SelectHeader 컴포넌트는 선택된 값을 표시하고 드롭다운을 여는 헤더 컴포넌트다. items를 주면 클릭 시 메뉴가 열린다. */
759
+ declare const SelectHeader: React.ForwardRefExoticComponent<SelectHeaderProps & React.RefAttributes<HTMLButtonElement>>;
760
+
761
+ type PaginationType = "basic" | "compact";
762
+ interface PaginationProps {
763
+ /** 총 페이지 수 (1 이상) */
764
+ totalPages: number;
765
+ /** 현재 페이지 (1부터 시작) */
766
+ currentPage: number;
767
+ /** 페이지 변경 핸들러 */
768
+ onChange?: (page: number) => void;
769
+ /** Pagination 타입 (기본형 / 축약형) */
770
+ type?: PaginationType;
771
+ /** 추가 CSS 클래스명 */
772
+ className?: string;
773
+ }
774
+ /** Pagination 컴포넌트는 리스트/테이블 등에서 여러 페이지를 탐색할 때 사용하는 페이지네이션 컴포넌트다. */
775
+ declare const Pagination: {
776
+ ({ totalPages, currentPage, onChange, type, className, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
777
+ displayName: string;
778
+ };
779
+
780
+ interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange"> {
781
+ /** 라디오 라벨 */
782
+ label?: React.ReactNode;
783
+ /** label 스타일 오버라이드 (옵션) */
784
+ labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
785
+ variant?: React.ComponentProps<typeof Text>["variant"];
786
+ };
787
+ /** 라디오 설명 텍스트 */
788
+ description?: React.ReactNode;
789
+ /** 라디오 값 (RadioButton.Group에서 사용) */
790
+ value?: string;
791
+ /** 라디오 상태 변경 핸들러 */
792
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
793
+ }
794
+ /** RadioButton은 단일 선택(라디오) 입력 컴포넌트다. */
795
+ declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
796
+ interface RadioButtonGroupProps {
797
+ /** 그룹 라벨 */
798
+ label?: React.ReactNode;
799
+ /** 그룹 라벨 스타일 오버라이드 (옵션) */
800
+ labelProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
801
+ variant?: React.ComponentProps<typeof Text>["variant"];
802
+ };
803
+ /** 그룹 설명 */
804
+ description?: React.ReactNode;
805
+ /** 그룹 설명 스타일 오버라이드 (옵션) */
806
+ descriptionProps?: Omit<React.ComponentProps<typeof Text>, "children" | "variant"> & {
807
+ variant?: React.ComponentProps<typeof Text>["variant"];
808
+ };
809
+ /** 선택된 값 (controlled) */
810
+ value?: string;
811
+ /** 초기 선택 값 (uncontrolled) */
812
+ defaultValue?: string;
813
+ /** 값 변경 핸들러 (선택 해제 시 value는 undefined) */
814
+ onChange?: (value: string | undefined) => void;
815
+ /** 비활성화 상태 */
816
+ disabled?: boolean;
817
+ /** name (미지정 시 내부 생성) */
818
+ name?: string;
819
+ /** 자식 RadioButton 컴포넌트들 */
820
+ children: React.ReactNode;
821
+ /** 추가 CSS 클래스명 */
822
+ className?: string;
823
+ }
824
+ /** RadioButton.Group은 여러 RadioButton을 그룹화하여 단일 선택을 관리한다. */
825
+ declare const RadioButtonGroup: {
826
+ ({ label, labelProps, description, descriptionProps, value: valueProp, defaultValue, onChange, disabled, name, children, className, }: RadioButtonGroupProps): react_jsx_runtime.JSX.Element;
827
+ displayName: string;
828
+ };
829
+
830
+ type BadgeVariant = "primary" | "secondary" | "progressing" | "success" | "warning" | "error" | "disabled";
831
+ type BadgeType = "number" | "dot";
832
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
833
+ /** number: 글자(숫자/문자) 표시, dot: 점만 표시 */
834
+ type?: BadgeType;
835
+ /** Badge variant (primary, secondary, progressing, success, warning, error, disabled) */
836
+ variant?: BadgeVariant;
837
+ /** Badge 값 (type이 number일 때 표시할 숫자 또는 글자) */
838
+ value?: number | string;
839
+ /** 최대 표시 숫자 (숫자일 때 이 값을 넘으면 maxValue+ 형태로 표시) */
840
+ maxValue?: number;
841
+ }
842
+ /** Badge 컴포넌트는 알림 카운트, 상태 등을 시각적으로 표현하는 원형 라벨 컴포넌트다. */
843
+ declare const Badge: ({ type, variant, value, maxValue, className, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
844
+
845
+ type TagType = "solid" | "outline" | "weak";
846
+ type TagSize = "medium" | "small";
847
+ type TagState = "enabled" | "error" | "progress" | "warning" | "success";
848
+ interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
849
+ /** 태그 타입 (solid, outline, weak) */
850
+ type?: TagType;
851
+ /** 태그 크기 */
852
+ size?: TagSize;
853
+ /** 태그 상태 (type이 weak일 때만 사용 가능) */
854
+ state?: TagState;
855
+ /** 태그 라벨 */
856
+ label: React.ReactNode;
857
+ /** Prefix 아이콘 */
858
+ prefixIcon?: React.ReactNode;
859
+ /** Suffix 아이콘 */
860
+ suffixIcon?: React.ReactNode;
861
+ }
862
+ /** Tag 컴포넌트는 콘텐츠의 속성, 상태, 카테고리를 시각적으로 표현하는 읽기 전용 라벨 컴포넌트다. */
863
+ declare const Tag: ({ type, size, state, label, prefixIcon, suffixIcon, className, ...props }: TagProps) => react_jsx_runtime.JSX.Element;
864
+
865
+ type TooltipPosition = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
866
+ type TooltipType = "word" | "sentence";
867
+ interface TooltipProps {
868
+ /** 툴팁에 표시할 내용 */
869
+ label: React.ReactNode;
870
+ /** 툴팁 타입 (word: 단어형, sentence: 장문형) */
871
+ type?: TooltipType;
872
+ /** Prefix 아이콘 (왼쪽) */
873
+ prefixIcon?: React.ReactNode;
874
+ /** Close 버튼 클릭 핸들러 (제공 시 닫기 버튼이 표시됨) */
875
+ onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
876
+ /** 툴팁이 표시될 방향 */
877
+ direction?: TooltipPosition;
878
+ /** 화살표 표시 여부 */
879
+ withArrow?: boolean;
880
+ /** 툴팁 열림 상태 (controlled) */
881
+ opened?: boolean;
882
+ /** 툴팁 초기 열림 상태 (uncontrolled) */
883
+ defaultOpened?: boolean;
884
+ /** 툴팁 비활성화 */
885
+ disabled?: boolean;
886
+ /** 툴팁 너비 */
887
+ width?: number | string;
888
+ /** 툴팁 오프셋 (px) */
889
+ offset?: number;
890
+ /** 포털 사용 여부 */
891
+ withinPortal?: boolean;
892
+ /** 툴팁 표시 지연 시간 (ms) */
893
+ openDelay?: number;
894
+ /** 툴팁 숨김 지연 시간 (ms) */
895
+ closeDelay?: number;
896
+ /** 툴팁이 표시될 대상 요소 */
897
+ children: React.ReactElement;
898
+ /** 추가 클래스명 */
899
+ className?: string;
900
+ }
901
+ /** Tooltip 컴포넌트는 사용자에게 추가 정보나 설명을 제공하는 작은 팝오버입니다. */
902
+ declare const Tooltip: ({ label, type, prefixIcon, onClose, direction, withArrow, opened: openedProp, defaultOpened, disabled, width, offset, withinPortal, openDelay, closeDelay, children, className, }: TooltipProps) => react_jsx_runtime.JSX.Element;
903
+
904
+ type ToastSize = "medium" | "small";
905
+ type ToastState = "default" | "error" | "warning" | "success" | "information";
906
+ type ToastPosition = "top" | "bottom";
907
+ type ToastHorizontalAlign = "center" | "left" | "right";
908
+ interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "style"> {
909
+ /** Toast 크기. 미지정 시 breakpoint 기준(tablet 미만: small, 이상: medium). 지정 시 해당 값으로 오버라이드 */
910
+ size?: ToastSize;
911
+ /** Toast 상태 (default, error, warning, success, information) */
912
+ state?: ToastState;
913
+ /** Toast 메시지 */
914
+ label: React.ReactNode;
915
+ /** State 아이콘 (state에 따라 자동으로 표시되지만, 커스텀 아이콘을 전달할 수 있음) */
916
+ icon?: React.ReactNode;
917
+ /** Toast 위치 (top: 상단, bottom: 하단) - 기본값: top */
918
+ position?: ToastPosition;
919
+ /** 수평 정렬 (center: 중앙, left: 왼쪽, right: 오른쪽) - 기본값: center */
920
+ horizontalAlign?: ToastHorizontalAlign;
921
+ /** 상단 여백 (px) - 기본값: medium일 때 60px, small일 때 20px */
922
+ topOffset?: number;
923
+ /** 하단 여백 (px) - 기본값: 20px */
924
+ bottomOffset?: number;
925
+ /** 좌우 여백 (px) - small 사이즈일 때만 적용, 기본값: 16px */
926
+ horizontalPadding?: number;
927
+ /** 추가 스타일 (position이 명시되면 fixed position 로직을 건너뜁니다) */
928
+ style?: React.CSSProperties;
929
+ }
930
+ /** Toast 컴포넌트는 화면에 짧은 시간 동안 나타났다가 자동으로 사라지는 경량 알림 컴포넌트다. */
931
+ declare const Toast: (props: ToastProps) => react_jsx_runtime.JSX.Element;
932
+ interface ToastOptions {
933
+ /** Toast 상태 */
934
+ state?: ToastState;
935
+ /** Toast 크기 */
936
+ size?: ToastSize;
937
+ /** 자동으로 사라지는 시간 (ms) - 기본값: 3000 */
938
+ duration?: number;
939
+ /** Toast 위치 */
940
+ position?: ToastPosition;
941
+ /** 수평 정렬 */
942
+ horizontalAlign?: ToastHorizontalAlign;
943
+ /** 상단 여백 */
944
+ topOffset?: number;
945
+ /** 하단 여백 */
946
+ bottomOffset?: number;
947
+ /** 좌우 여백 */
948
+ horizontalPadding?: number;
949
+ }
950
+ /**
951
+ * Toast를 사용하기 위한 커스텀 훅
952
+ *
953
+ * @returns {Object} Toast 관련 상태와 핸들러
954
+ * @returns {function} showToast - Toast를 표시하는 함수
955
+ * @returns {function} hideToast - Toast를 숨기는 함수
956
+ * @returns {React.ReactNode} ToastContainer - Toast 컴포넌트들을 렌더링하는 컨테이너
957
+ *
958
+ * @example
959
+ * const { showToast, ToastContainer } = useToast();
960
+ *
961
+ * <button onClick={() => showToast("성공했습니다!", { state: "success" })}>
962
+ * Show Toast
963
+ * </button>
964
+ * {ToastContainer}
965
+ */
966
+ declare function useToast(): {
967
+ showToast: (message: string, options?: ToastOptions) => void;
968
+ hideToast: (id: string) => void;
969
+ ToastContainer: react_jsx_runtime.JSX.Element | null;
970
+ };
971
+
972
+ type LogoType = "likelion-eng" | "likelion-kr" | "bootcamp" | "symbol" | "favicon" | "og-image";
973
+ type LogoVariant = "primary" | "secondary" | "white";
974
+ type LogoSize = "large" | "medium" | "small" | "favicon" | "og-image";
975
+ interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
976
+ /** 로고 타입 */
977
+ type?: LogoType;
978
+ /** 로고 색상 변형 */
979
+ variant?: LogoVariant;
980
+ /** 로고 크기 */
981
+ size?: LogoSize;
982
+ /** 서비스 타입 (og-image용) */
983
+ service?: "likelion" | "bootcamp";
984
+ }
985
+ /** Logo 컴포넌트는 브랜드 아이덴티티를 표현하는 로고 컴포넌트다. */
986
+ declare const Logo: ({ type, variant, size, service, className, ...props }: LogoProps) => react_jsx_runtime.JSX.Element;
987
+
988
+ interface BreakpointContextType {
989
+ isMobile?: boolean;
990
+ isTablet?: boolean;
991
+ isDesktop?: boolean;
992
+ isUnderTablet?: boolean;
993
+ }
994
+ declare const BreakpointProvider: React.Provider<BreakpointContextType | null>;
995
+ declare function useMediaQuery(query: string): boolean;
996
+ /**
997
+ * 프로젝트 브레이크포인트 전용 훅
998
+ */
999
+ declare function useBreakpoint(): {
1000
+ isMobile: boolean;
1001
+ isTablet: boolean;
1002
+ isDesktop: boolean;
1003
+ isUnderTablet: boolean;
1004
+ };
1005
+
1006
+ declare const BREAKPOINTS: {
1007
+ readonly mobile: {
1008
+ readonly min: 375;
1009
+ readonly max: 743;
1010
+ };
1011
+ readonly tablet: {
1012
+ readonly min: 744;
1013
+ readonly max: 1279;
1014
+ };
1015
+ readonly desktop: {
1016
+ readonly min: 1280;
1017
+ };
1018
+ };
1019
+ declare const TAILWIND_SCREENS: {
1020
+ readonly mo: "375px";
1021
+ readonly tb: "744px";
1022
+ readonly pc: "1280px";
1023
+ };
1024
+ declare const MEDIA_QUERIES: {
1025
+ readonly mobile: "(min-width: 375px) and (max-width: 743px)";
1026
+ readonly tablet: "(min-width: 744px) and (max-width: 1279px)";
1027
+ readonly desktop: "(min-width: 1280px)";
1028
+ readonly underTablet: "(max-width: 743px)";
1029
+ };
1030
+ declare const LAYOUT_SYSTEM: {
1031
+ readonly mobile: {
1032
+ readonly margin: 16;
1033
+ readonly column: 4;
1034
+ readonly gutter: 16;
1035
+ };
1036
+ readonly tablet: {
1037
+ readonly margin: 24;
1038
+ readonly column: 8;
1039
+ readonly gutter: 24;
1040
+ };
1041
+ readonly desktop: {
1042
+ readonly margin: 24;
1043
+ readonly column: 12;
1044
+ readonly gutter: 24;
1045
+ };
1046
+ };
1047
+
1048
+ export { ActionButton, type ActionButtonProps, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOpenOptions, type DialogProps, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoProps, type LogoSize, type LogoType, type LogoVariant, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, type SelectMenuOverlayProps, type SelectMenuProps, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextInput, type TextInputProps, type TextInputSize, type TextInputState, type TextProps, type TextVariant, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };