@hivcd-printshop/design-system 1.2.0 → 1.2.2

package/dist/index.d.mts

@@ -75,6 +75,27 @@ interface ColumnSubTitleProps {
  */
 declare const ColumnSubTitle: ({ className, children, action, as: Tag, }: ColumnSubTitleProps) => react.JSX.Element;
 
+interface ColumnDescriptionProps {
+    className?: string;
+    children: React.ReactNode;
+    /** 컴퍼스 마크 불릿 표시 여부. 기본 true. */
+    bullet?: boolean;
+}
+/**
+ * Column 내부의 안내/주의사항 항목 한 줄.
+ * 컴퍼스 마크 불릿 + 본문(body3-book / text-primary)으로 구성되며,
+ * 본문이 여러 줄이어도 줄바꿈된 텍스트가 아이콘 아래로 흐르지 않는다(행잉 인덴트).
+ * 개행은 `\n` 그대로 반영된다.
+ * 예: "예약 시 주의사항" 목록의 각 항목.
+ */
+declare const ColumnDescription: ({ className, children, bullet, }: ColumnDescriptionProps) => react.JSX.Element;
+interface ColumnDescriptionListProps {
+    className?: string;
+    children: React.ReactNode;
+}
+/** `ColumnDescription` 항목들을 16px 간격으로 세로 배치하는 래퍼. */
+declare const ColumnDescriptionList: ({ className, children }: ColumnDescriptionListProps) => react.JSX.Element;
+
 interface BasicFormFieldProps {
     children: React.ReactNode;
     isDanger?: boolean;
@@ -127,7 +148,7 @@ interface FormFileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
     filename?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-declare const FormFile: ({ className, isDanger, dangerText, placeholder, fileUrl, filename, onChange, ...props }: FormFileProps) => react.JSX.Element;
+declare const FormFile: ({ className, isDanger, dangerText, fileUrl, filename, onChange, ...props }: FormFileProps) => react.JSX.Element;
 
 interface FormCheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "checked"> {
     isChecked: boolean;
@@ -213,13 +234,18 @@ interface ModalProps {
     header: string;
     children: react__default.ReactNode;
     className?: string;
+    /**
+     * 지정하면 배경(백드롭) 클릭 시 호출되고, 카드 우상단에 닫기(X) 버튼이 노출된다.
+     * 생략하면 배경은 딤 처리만 되고 클릭해도 닫히지 않는다.
+     */
+    onClose?: () => void;
 }
 interface BaseProps {
     children: react__default.ReactNode;
     className?: string;
     row?: boolean;
 }
-declare const Modal: (({ isVisible, header, children, className }: ModalProps) => react__default.JSX.Element | null) & {
+declare const Modal: (({ isVisible, header, children, className, onClose }: ModalProps) => react__default.JSX.Element | null) & {
     Contents: ({ children, className }: BaseProps) => react__default.JSX.Element;
     CTAs: ({ children, className, row }: BaseProps) => react__default.JSX.Element | null;
 };
@@ -242,6 +268,32 @@ declare const IconInfo: ({ className, stroke }: {
     className?: string;
     stroke?: string;
 }) => react.JSX.Element;
+/** HIVCD 컴퍼스 마크. 주의사항 리스트의 불릿 등으로 사용. */
+declare const IconCompass: ({ className, fill }: {
+    className?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 선택된 라디오 버튼(채워진 점). SideRadioAccordion 등에서 사용. */
+declare const IconRadioSelected: ({ className, stroke, fill, }: {
+    className?: string;
+    stroke?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 선택되지 않은 라디오 버튼(빈 원). */
+declare const IconRadioUnselected: ({ className, stroke, }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
+/** 느낌표(원 안). 보조 안내 텍스트 버튼 등에서 사용. */
+declare const IconExclamation: ({ className, fill }: {
+    className?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 닫기(X) 아이콘. Modal 우상단 등에서 사용. */
+declare const IconClose: ({ className, stroke }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
 
 interface CategorySegmentProps {
     selected?: boolean;
@@ -493,4 +545,4 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconInfo, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
+export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };

package/dist/index.d.ts

@@ -75,6 +75,27 @@ interface ColumnSubTitleProps {
  */
 declare const ColumnSubTitle: ({ className, children, action, as: Tag, }: ColumnSubTitleProps) => react.JSX.Element;
 
+interface ColumnDescriptionProps {
+    className?: string;
+    children: React.ReactNode;
+    /** 컴퍼스 마크 불릿 표시 여부. 기본 true. */
+    bullet?: boolean;
+}
+/**
+ * Column 내부의 안내/주의사항 항목 한 줄.
+ * 컴퍼스 마크 불릿 + 본문(body3-book / text-primary)으로 구성되며,
+ * 본문이 여러 줄이어도 줄바꿈된 텍스트가 아이콘 아래로 흐르지 않는다(행잉 인덴트).
+ * 개행은 `\n` 그대로 반영된다.
+ * 예: "예약 시 주의사항" 목록의 각 항목.
+ */
+declare const ColumnDescription: ({ className, children, bullet, }: ColumnDescriptionProps) => react.JSX.Element;
+interface ColumnDescriptionListProps {
+    className?: string;
+    children: React.ReactNode;
+}
+/** `ColumnDescription` 항목들을 16px 간격으로 세로 배치하는 래퍼. */
+declare const ColumnDescriptionList: ({ className, children }: ColumnDescriptionListProps) => react.JSX.Element;
+
 interface BasicFormFieldProps {
     children: React.ReactNode;
     isDanger?: boolean;
@@ -127,7 +148,7 @@ interface FormFileProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
     filename?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-declare const FormFile: ({ className, isDanger, dangerText, placeholder, fileUrl, filename, onChange, ...props }: FormFileProps) => react.JSX.Element;
+declare const FormFile: ({ className, isDanger, dangerText, fileUrl, filename, onChange, ...props }: FormFileProps) => react.JSX.Element;
 
 interface FormCheckBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "checked"> {
     isChecked: boolean;
@@ -213,13 +234,18 @@ interface ModalProps {
     header: string;
     children: react__default.ReactNode;
     className?: string;
+    /**
+     * 지정하면 배경(백드롭) 클릭 시 호출되고, 카드 우상단에 닫기(X) 버튼이 노출된다.
+     * 생략하면 배경은 딤 처리만 되고 클릭해도 닫히지 않는다.
+     */
+    onClose?: () => void;
 }
 interface BaseProps {
     children: react__default.ReactNode;
     className?: string;
     row?: boolean;
 }
-declare const Modal: (({ isVisible, header, children, className }: ModalProps) => react__default.JSX.Element | null) & {
+declare const Modal: (({ isVisible, header, children, className, onClose }: ModalProps) => react__default.JSX.Element | null) & {
     Contents: ({ children, className }: BaseProps) => react__default.JSX.Element;
     CTAs: ({ children, className, row }: BaseProps) => react__default.JSX.Element | null;
 };
@@ -242,6 +268,32 @@ declare const IconInfo: ({ className, stroke }: {
     className?: string;
     stroke?: string;
 }) => react.JSX.Element;
+/** HIVCD 컴퍼스 마크. 주의사항 리스트의 불릿 등으로 사용. */
+declare const IconCompass: ({ className, fill }: {
+    className?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 선택된 라디오 버튼(채워진 점). SideRadioAccordion 등에서 사용. */
+declare const IconRadioSelected: ({ className, stroke, fill, }: {
+    className?: string;
+    stroke?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 선택되지 않은 라디오 버튼(빈 원). */
+declare const IconRadioUnselected: ({ className, stroke, }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
+/** 느낌표(원 안). 보조 안내 텍스트 버튼 등에서 사용. */
+declare const IconExclamation: ({ className, fill }: {
+    className?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 닫기(X) 아이콘. Modal 우상단 등에서 사용. */
+declare const IconClose: ({ className, stroke }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
 
 interface CategorySegmentProps {
     selected?: boolean;
@@ -493,4 +545,4 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconInfo, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
+export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };