@exem-ui/react 0.3.4-next.20260609073805 → 0.3.4-next.20260611020341

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +95 -2
  2. package/dist/index.d.ts +95 -2
  3. package/dist/index.js +203 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +203 -3
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -463,7 +463,15 @@ type TextAreaLabelProps = {
463
463
  required?: boolean;
464
464
  className?: string;
465
465
  };
466
- type TextAreaFieldProps = Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'disabled' | 'id' | 'value' | 'onChange' | 'maxLength'>;
466
+ type TextAreaBottomRightSlot = React$1.ReactNode;
467
+ type TextAreaFieldProps = Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'disabled' | 'id' | 'value' | 'onChange' | 'maxLength'> & {
468
+ /**
469
+ * Field 우측 하단에 표시할 슬롯입니다.
470
+ * disabled 상태와 별개로 렌더되므로 필요 시 slot 요소에 직접 disabled를 전달하세요.
471
+ * 입력 텍스트와 겹치지 않도록 Field에 우측/하단 padding을 함께 지정하는 것을 권장합니다.
472
+ */
473
+ bottomRightSlot?: TextAreaBottomRightSlot;
474
+ };
467
475
  type TextAreaDescriptionProps = {
468
476
  children?: React$1.ReactNode;
469
477
  showCounter?: boolean;
@@ -649,6 +657,91 @@ type ModalComponent = typeof DialogPrimitive.Root & {
649
657
  */
650
658
  declare const Modal: ModalComponent;
651
659
 
660
+ type SheetSide = 'top' | 'right' | 'bottom' | 'left';
661
+ type SheetRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
662
+ type SheetTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
663
+ type SheetPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
664
+ type SheetOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
665
+ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
666
+ /**
667
+ * Sheet가 열리는 방향
668
+ * @default 'right'
669
+ */
670
+ side?: SheetSide;
671
+ };
672
+ type SheetCloseProps = ButtonProps;
673
+ type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
674
+ /**
675
+ * 하단 구분선 표시 여부
676
+ * @default true
677
+ */
678
+ line?: boolean;
679
+ /**
680
+ * 헤더 우측 영역(rightSlot).
681
+ * - 미지정(`undefined`): 기본 닫기(X) 버튼을 렌더링하며 클릭 시 Sheet를 닫는다.
682
+ * - `null` / `false`: 우측 영역을 숨긴다.
683
+ * - ReactNode: 전달한 노드를 그대로 렌더링한다. 닫기 동작이 필요하면 `Sheet.Close`로 감싼다.
684
+ */
685
+ rightSlot?: React__default.ReactNode;
686
+ };
687
+ type SheetBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
688
+ type SheetFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {
689
+ /**
690
+ * 상단 구분선 표시 여부
691
+ * @default true
692
+ */
693
+ line?: boolean;
694
+ };
695
+ type SheetFooterDescriptionProps = React__default.HTMLAttributes<HTMLDivElement> & {
696
+ /** 에러 상태 표시 여부 */
697
+ error?: boolean;
698
+ /** 설명 앞에 표시할 아이콘 요소 */
699
+ icon?: React__default.ReactNode;
700
+ };
701
+ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
702
+ type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
703
+ type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
704
+ type SheetComponent = typeof DialogPrimitive.Root & {
705
+ Trigger: typeof DialogPrimitive.Trigger;
706
+ Portal: typeof DialogPrimitive.Portal;
707
+ Close: typeof DialogPrimitive.Close;
708
+ Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
709
+ Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
710
+ Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
711
+ Body: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetBodyProps> & React__default.RefAttributes<HTMLDivElement>>;
712
+ Footer: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterProps> & React__default.RefAttributes<HTMLDivElement>>;
713
+ FooterDescription: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterDescriptionProps> & React__default.RefAttributes<HTMLDivElement>>;
714
+ Actions: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetActionsProps> & React__default.RefAttributes<HTMLDivElement>>;
715
+ Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
716
+ Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
717
+ };
718
+ /**
719
+ * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
720
+ * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
721
+ *
722
+ * @example
723
+ * ```tsx
724
+ * <Sheet>
725
+ * <Sheet.Trigger>열기</Sheet.Trigger>
726
+ * <Sheet.Content side="right">
727
+ * <Sheet.Header>
728
+ * <Sheet.Title>제목</Sheet.Title>
729
+ * </Sheet.Header>
730
+ * <Sheet.Body>내용</Sheet.Body>
731
+ * <Sheet.Footer>
732
+ * <Sheet.Actions>
733
+ * <Sheet.Close>닫기</Sheet.Close>
734
+ * <Button>확인</Button>
735
+ * </Sheet.Actions>
736
+ * </Sheet.Footer>
737
+ * </Sheet.Content>
738
+ * </Sheet>
739
+ * ```
740
+ *
741
+ * @see {@link SheetContentProps} Content props 상세
742
+ */
743
+ declare const Sheet: SheetComponent;
744
+
652
745
  type MessageBoxVariant = 'default' | 'critical';
653
746
  type MessageBoxRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
654
747
  type MessageBoxTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
@@ -931,4 +1024,4 @@ declare const buttonize: (fn: (e: React__default.MouseEvent<HTMLElement> | React
931
1024
  onKeyDown: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
932
1025
  };
933
1026
 
934
- 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 BreadcrumbPathProps, 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, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, 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, 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 };
1027
+ 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 BreadcrumbPathProps, 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, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, 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, Sheet, type SheetActionsProps, type SheetBodyProps, type SheetCloseProps, type SheetComponent, type SheetContentProps, type SheetDescriptionProps, type SheetFooterDescriptionProps, type SheetFooterProps, type SheetHeaderProps, type SheetOverlayProps, type SheetPortalProps, type SheetRootProps, type SheetSide, type SheetTitleProps, type SheetTriggerProps, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaBottomRightSlot, 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
@@ -463,7 +463,15 @@ type TextAreaLabelProps = {
463
463
  required?: boolean;
464
464
  className?: string;
465
465
  };
466
- type TextAreaFieldProps = Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'disabled' | 'id' | 'value' | 'onChange' | 'maxLength'>;
466
+ type TextAreaBottomRightSlot = React$1.ReactNode;
467
+ type TextAreaFieldProps = Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'disabled' | 'id' | 'value' | 'onChange' | 'maxLength'> & {
468
+ /**
469
+ * Field 우측 하단에 표시할 슬롯입니다.
470
+ * disabled 상태와 별개로 렌더되므로 필요 시 slot 요소에 직접 disabled를 전달하세요.
471
+ * 입력 텍스트와 겹치지 않도록 Field에 우측/하단 padding을 함께 지정하는 것을 권장합니다.
472
+ */
473
+ bottomRightSlot?: TextAreaBottomRightSlot;
474
+ };
467
475
  type TextAreaDescriptionProps = {
468
476
  children?: React$1.ReactNode;
469
477
  showCounter?: boolean;
@@ -649,6 +657,91 @@ type ModalComponent = typeof DialogPrimitive.Root & {
649
657
  */
650
658
  declare const Modal: ModalComponent;
651
659
 
660
+ type SheetSide = 'top' | 'right' | 'bottom' | 'left';
661
+ type SheetRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
662
+ type SheetTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
663
+ type SheetPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
664
+ type SheetOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
665
+ type SheetContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
666
+ /**
667
+ * Sheet가 열리는 방향
668
+ * @default 'right'
669
+ */
670
+ side?: SheetSide;
671
+ };
672
+ type SheetCloseProps = ButtonProps;
673
+ type SheetHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
674
+ /**
675
+ * 하단 구분선 표시 여부
676
+ * @default true
677
+ */
678
+ line?: boolean;
679
+ /**
680
+ * 헤더 우측 영역(rightSlot).
681
+ * - 미지정(`undefined`): 기본 닫기(X) 버튼을 렌더링하며 클릭 시 Sheet를 닫는다.
682
+ * - `null` / `false`: 우측 영역을 숨긴다.
683
+ * - ReactNode: 전달한 노드를 그대로 렌더링한다. 닫기 동작이 필요하면 `Sheet.Close`로 감싼다.
684
+ */
685
+ rightSlot?: React__default.ReactNode;
686
+ };
687
+ type SheetBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
688
+ type SheetFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {
689
+ /**
690
+ * 상단 구분선 표시 여부
691
+ * @default true
692
+ */
693
+ line?: boolean;
694
+ };
695
+ type SheetFooterDescriptionProps = React__default.HTMLAttributes<HTMLDivElement> & {
696
+ /** 에러 상태 표시 여부 */
697
+ error?: boolean;
698
+ /** 설명 앞에 표시할 아이콘 요소 */
699
+ icon?: React__default.ReactNode;
700
+ };
701
+ type SheetActionsProps = React__default.HTMLAttributes<HTMLDivElement>;
702
+ type SheetTitleProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
703
+ type SheetDescriptionProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
704
+ type SheetComponent = typeof DialogPrimitive.Root & {
705
+ Trigger: typeof DialogPrimitive.Trigger;
706
+ Portal: typeof DialogPrimitive.Portal;
707
+ Close: typeof DialogPrimitive.Close;
708
+ Overlay: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetOverlayProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Overlay>>>;
709
+ Content: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetContentProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Content>>>;
710
+ Header: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetHeaderProps> & React__default.RefAttributes<HTMLDivElement>>;
711
+ Body: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetBodyProps> & React__default.RefAttributes<HTMLDivElement>>;
712
+ Footer: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterProps> & React__default.RefAttributes<HTMLDivElement>>;
713
+ FooterDescription: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetFooterDescriptionProps> & React__default.RefAttributes<HTMLDivElement>>;
714
+ Actions: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetActionsProps> & React__default.RefAttributes<HTMLDivElement>>;
715
+ Title: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetTitleProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Title>>>;
716
+ Description: React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<SheetDescriptionProps> & React__default.RefAttributes<React__default.ComponentRef<typeof DialogPrimitive.Description>>>;
717
+ };
718
+ /**
719
+ * 화면 가장자리에서 슬라이드되어 열리는 패널 컴포넌트입니다.
720
+ * Radix UI Dialog 기반이며 Compound Component 패턴으로 사용합니다.
721
+ *
722
+ * @example
723
+ * ```tsx
724
+ * <Sheet>
725
+ * <Sheet.Trigger>열기</Sheet.Trigger>
726
+ * <Sheet.Content side="right">
727
+ * <Sheet.Header>
728
+ * <Sheet.Title>제목</Sheet.Title>
729
+ * </Sheet.Header>
730
+ * <Sheet.Body>내용</Sheet.Body>
731
+ * <Sheet.Footer>
732
+ * <Sheet.Actions>
733
+ * <Sheet.Close>닫기</Sheet.Close>
734
+ * <Button>확인</Button>
735
+ * </Sheet.Actions>
736
+ * </Sheet.Footer>
737
+ * </Sheet.Content>
738
+ * </Sheet>
739
+ * ```
740
+ *
741
+ * @see {@link SheetContentProps} Content props 상세
742
+ */
743
+ declare const Sheet: SheetComponent;
744
+
652
745
  type MessageBoxVariant = 'default' | 'critical';
653
746
  type MessageBoxRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
654
747
  type MessageBoxTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
@@ -931,4 +1024,4 @@ declare const buttonize: (fn: (e: React__default.MouseEvent<HTMLElement> | React
931
1024
  onKeyDown: (event: React__default.KeyboardEvent<HTMLDivElement>) => void;
932
1025
  };
933
1026
 
934
- 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 BreadcrumbPathProps, 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, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, 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, 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 };
1027
+ 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 BreadcrumbPathProps, 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, Dropdown, type DropdownComponent, type DropdownContentProps, type DropdownGroupProps, type DropdownItemProps, type DropdownLabelProps, type DropdownRootProps, type DropdownSeparatorProps, type DropdownTriggerProps, 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, Sheet, type SheetActionsProps, type SheetBodyProps, type SheetCloseProps, type SheetComponent, type SheetContentProps, type SheetDescriptionProps, type SheetFooterDescriptionProps, type SheetFooterProps, type SheetHeaderProps, type SheetOverlayProps, type SheetPortalProps, type SheetRootProps, type SheetSide, type SheetTitleProps, type SheetTriggerProps, type Options as SonnerToastOptions, Star, type StarComponent, type StarProps, Switch, type SwitchComponent, type SwitchProps, Tag, type TagColor, type TagComponent, type TagProps, TextArea, type TextAreaBottomRightSlot, 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.js CHANGED
@@ -1269,6 +1269,8 @@ var textAreaVariants = {
1269
1269
  defaultVariants: { variant: "fill", size: "medium", state: "default" }
1270
1270
  }
1271
1271
  ),
1272
+ fieldWrapper: "relative w-full",
1273
+ bottomRightSlot: "absolute right-0 bottom-0 flex items-center justify-center",
1272
1274
  descriptionContainer: utils.cva("flex flex-row items-center justify-between", {
1273
1275
  variants: {
1274
1276
  size: {
@@ -1330,7 +1332,7 @@ TextArea.Label = React__namespace.forwardRef(
1330
1332
  }
1331
1333
  );
1332
1334
  TextArea.Field = React__namespace.forwardRef(
1333
- ({ className, onFocus, onBlur, ...props }, ref) => {
1335
+ ({ className, onFocus, onBlur, bottomRightSlot, ...props }, ref) => {
1334
1336
  const {
1335
1337
  variant,
1336
1338
  size,
@@ -1352,7 +1354,7 @@ TextArea.Field = React__namespace.forwardRef(
1352
1354
  };
1353
1355
  const state = disabled ? "disabled" : error ? "error" : focused ? "focused" : "default";
1354
1356
  const isControlled = contextValue !== void 0;
1355
- return /* @__PURE__ */ jsxRuntime.jsx(
1357
+ const field = /* @__PURE__ */ jsxRuntime.jsx(
1356
1358
  "textarea",
1357
1359
  {
1358
1360
  ref,
@@ -1369,6 +1371,13 @@ TextArea.Field = React__namespace.forwardRef(
1369
1371
  ...props
1370
1372
  }
1371
1373
  );
1374
+ if (!bottomRightSlot) {
1375
+ return field;
1376
+ }
1377
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: textAreaVariants.fieldWrapper, children: [
1378
+ field,
1379
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: textAreaVariants.bottomRightSlot, children: bottomRightSlot })
1380
+ ] });
1372
1381
  }
1373
1382
  );
1374
1383
  TextArea.Description = React__namespace.forwardRef(
@@ -1910,6 +1919,197 @@ Modal.Actions.displayName = "Modal.Actions";
1910
1919
  Modal.Action.displayName = "Modal.Action";
1911
1920
  Modal.Title.displayName = "Modal.Title";
1912
1921
  Modal.Description.displayName = "Modal.Description";
1922
+ var SHEET_EDGE_GAP = "[--sheet-edge-gap:40px]";
1923
+ var SHEET_SIDE_CLASSES = {
1924
+ right: "inset-y-0 right-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
1925
+ left: "inset-y-0 left-0 h-full w-[800px] max-w-[calc(100vw-var(--sheet-edge-gap))] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
1926
+ top: "inset-x-0 top-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
1927
+ bottom: "inset-x-0 bottom-0 w-full h-auto max-h-[calc(100vh-var(--sheet-edge-gap))] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
1928
+ };
1929
+ var SheetContext = React.createContext({ side: "right" });
1930
+ var Sheet = DialogPrimitive__namespace.Root;
1931
+ Sheet.Trigger = DialogPrimitive__namespace.Trigger;
1932
+ Sheet.Portal = DialogPrimitive__namespace.Portal;
1933
+ Sheet.Close = DialogPrimitive__namespace.Close;
1934
+ Sheet.Overlay = React.forwardRef(
1935
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
1936
+ DialogPrimitive__namespace.Overlay,
1937
+ {
1938
+ ref,
1939
+ className: utils.cn(
1940
+ "fixed inset-0 z-50 bg-component-dim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
1941
+ className
1942
+ ),
1943
+ ...props
1944
+ }
1945
+ )
1946
+ );
1947
+ Sheet.Content = React.forwardRef(
1948
+ ({ className, children, side = "right", onInteractOutside, ...props }, ref) => {
1949
+ const shouldPreventDismissForSelect = (target) => {
1950
+ const isSelectOpen = Boolean(
1951
+ document.querySelector('[data-radix-select-content][data-state="open"]')
1952
+ );
1953
+ if (isSelectOpen) {
1954
+ return true;
1955
+ }
1956
+ if (!(target instanceof Element)) {
1957
+ return false;
1958
+ }
1959
+ return Boolean(
1960
+ target.closest("[data-radix-select-content]") || target.closest("[data-radix-select-viewport]")
1961
+ );
1962
+ };
1963
+ const handleInteractOutside = (event) => {
1964
+ if (shouldPreventDismissForSelect(event.target)) {
1965
+ event.preventDefault();
1966
+ }
1967
+ onInteractOutside?.(event);
1968
+ };
1969
+ return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: { side }, children: /* @__PURE__ */ jsxRuntime.jsxs(Sheet.Portal, { children: [
1970
+ /* @__PURE__ */ jsxRuntime.jsx(Sheet.Overlay, {}),
1971
+ /* @__PURE__ */ jsxRuntime.jsx(
1972
+ DialogPrimitive__namespace.Content,
1973
+ {
1974
+ ref,
1975
+ className: utils.cn(
1976
+ // 공통 스타일 (Modal Content 토큰, radius 제외)
1977
+ "fixed z-50 flex flex-col border-border-primary bg-elevation-elevation-0 shadow-strong data-[state=open]:duration-300 data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
1978
+ // 가장자리 여백 CSS 변수 정의 (side 클래스의 max-w/max-h가 참조)
1979
+ SHEET_EDGE_GAP,
1980
+ // side별 위치/크기/슬라이드
1981
+ SHEET_SIDE_CLASSES[side],
1982
+ className
1983
+ ),
1984
+ ...props,
1985
+ onInteractOutside: handleInteractOutside,
1986
+ children
1987
+ }
1988
+ )
1989
+ ] }) });
1990
+ }
1991
+ );
1992
+ Sheet.Header = React.forwardRef(
1993
+ ({ className, line = true, rightSlot, children, ...props }, ref) => {
1994
+ const rightElement = rightSlot === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
1995
+ DialogPrimitive__namespace.Close,
1996
+ {
1997
+ className: utils.cn(
1998
+ "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
1999
+ ),
2000
+ children: /* @__PURE__ */ jsxRuntime.jsx(chunkTAZFRRWT_js.X, { type: "regular", size: 20 })
2001
+ }
2002
+ ) : rightSlot;
2003
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2004
+ "div",
2005
+ {
2006
+ ref,
2007
+ className: utils.cn(
2008
+ "flex shrink-0 flex-row items-center gap-2 h-12 pl-4 pr-2",
2009
+ line && "border-b border-border-primary",
2010
+ className
2011
+ ),
2012
+ ...props,
2013
+ children: [
2014
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-row items-center gap-1", children }),
2015
+ rightElement ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-row items-center", children: rightElement }) : null
2016
+ ]
2017
+ }
2018
+ );
2019
+ }
2020
+ );
2021
+ Sheet.Body = React.forwardRef(
2022
+ ({ className, children, ...props }, ref) => {
2023
+ const { side } = React.useContext(SheetContext);
2024
+ const disableHorizontalScroll = side === "left" || side === "right";
2025
+ return /* @__PURE__ */ jsxRuntime.jsx(
2026
+ "div",
2027
+ {
2028
+ ref,
2029
+ className: utils.cn(
2030
+ "flex-1 flex flex-col min-h-0 h-full",
2031
+ "[&_[data-slot=scroll-area-viewport]>div]:h-full"
2032
+ ),
2033
+ ...props,
2034
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2035
+ ScrollArea,
2036
+ {
2037
+ className: "h-full flex flex-col",
2038
+ disableHorizontalScroll,
2039
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("p-4", className), children })
2040
+ }
2041
+ )
2042
+ }
2043
+ );
2044
+ }
2045
+ );
2046
+ Sheet.Footer = React.forwardRef(
2047
+ ({ className, line = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
2048
+ "div",
2049
+ {
2050
+ ref,
2051
+ className: utils.cn(
2052
+ "flex flex-row items-center justify-between h-14 gap-3 px-4 py-3",
2053
+ line && "border-t border-border-primary",
2054
+ className
2055
+ ),
2056
+ ...props
2057
+ }
2058
+ )
2059
+ );
2060
+ Sheet.FooterDescription = React.forwardRef(
2061
+ ({ className, error = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
2062
+ "div",
2063
+ {
2064
+ ref,
2065
+ className: utils.cn(
2066
+ "flex flex-row items-center gap-1 text-body-3",
2067
+ error ? "text-text-critical" : "text-text-tertiary",
2068
+ className
2069
+ ),
2070
+ ...props,
2071
+ children: [
2072
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
2073
+ children
2074
+ ]
2075
+ }
2076
+ )
2077
+ );
2078
+ Sheet.Actions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
2079
+ Sheet.Title = React.forwardRef(
2080
+ ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
2081
+ DialogPrimitive__namespace.Title,
2082
+ {
2083
+ ref,
2084
+ className: utils.cn(
2085
+ "text-body-1 font-semibold leading-none tracking-tight text-text-primary",
2086
+ className
2087
+ ),
2088
+ ...props
2089
+ }
2090
+ )
2091
+ );
2092
+ Sheet.Description = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
2093
+ DialogPrimitive__namespace.Description,
2094
+ {
2095
+ ref,
2096
+ className: utils.cn("text-body-2 text-text-tertiary", className),
2097
+ ...props
2098
+ }
2099
+ ));
2100
+ Sheet.displayName = "Sheet";
2101
+ Sheet.Trigger.displayName = "Sheet.Trigger";
2102
+ Sheet.Portal.displayName = "Sheet.Portal";
2103
+ Sheet.Close.displayName = "Sheet.Close";
2104
+ Sheet.Overlay.displayName = "Sheet.Overlay";
2105
+ Sheet.Content.displayName = "Sheet.Content";
2106
+ Sheet.Header.displayName = "Sheet.Header";
2107
+ Sheet.Body.displayName = "Sheet.Body";
2108
+ Sheet.Footer.displayName = "Sheet.Footer";
2109
+ Sheet.FooterDescription.displayName = "Sheet.FooterDescription";
2110
+ Sheet.Actions.displayName = "Sheet.Actions";
2111
+ Sheet.Title.displayName = "Sheet.Title";
2112
+ Sheet.Description.displayName = "Sheet.Description";
1913
2113
  var MessageBoxContext = React.createContext({ variant: "default" });
1914
2114
  var MessageBoxRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
1915
2115
  var MessageBox = MessageBoxRoot;
@@ -2497,6 +2697,7 @@ exports.Progress = Progress;
2497
2697
  exports.Radio = Radio;
2498
2698
  exports.ScrollArea = ScrollArea;
2499
2699
  exports.ScrollBar = ScrollBar;
2700
+ exports.Sheet = Sheet;
2500
2701
  exports.Star = Star;
2501
2702
  exports.Switch = Switch;
2502
2703
  exports.Tag = Tag;