@hivcd-printshop/design-system 1.3.2 → 1.4.0

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 (8) hide show
  1. package/dist/index.d.mts +45 -1
  2. package/dist/index.d.ts +45 -1
  3. package/dist/index.js +290 -213
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +256 -181
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -34,6 +34,25 @@ interface BackButtonProps {
34
34
  }
35
35
  declare const BackButton: ({ onClick, className }: BackButtonProps) => react.JSX.Element;
36
36
 
37
+ type BadgeVariant = "warning" | "restriction" | "outline" | "neutral" | "solid";
38
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
39
+ /**
40
+ * - `warning` : 경고 상태 (노란 배경)
41
+ * - `restriction` : 제한 상태 (붉은 배경)
42
+ * - `outline` : 흰 배경 + 회색 테두리 (예: "직접 인증")
43
+ * - `neutral` : 옅은 회색 배경
44
+ * - `solid` : 검정 배경 + 흰 글씨
45
+ */
46
+ variant?: BadgeVariant;
47
+ children: React.ReactNode;
48
+ className?: string;
49
+ }
50
+ /**
51
+ * 상태·분류를 나타내는 짧은 라벨. 높이 32px 고정, 좌우 8px 패딩.
52
+ * 예: "경고", "제한", "직접 인증", "인증"
53
+ */
54
+ declare const Badge: ({ variant, children, className, ...props }: BadgeProps) => react.JSX.Element;
55
+
37
56
  interface CTAProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
38
57
  primary?: boolean;
39
58
  alert?: boolean;
@@ -424,6 +443,31 @@ interface SideRadioAccordionProps {
424
443
  }
425
444
  declare const SideRadioAccordion: react.ForwardRefExoticComponent<SideRadioAccordionProps & react.RefAttributes<HTMLDivElement>>;
426
445
 
446
+ type TabSwitchItem = {
447
+ label: string;
448
+ /**
449
+ * 선택 상태를 식별할 값. 표시 텍스트(label)와 분리하고 싶을 때 사용한다.
450
+ * 생략하면 label이 식별자로 쓰인다.
451
+ */
452
+ value?: string;
453
+ };
454
+ interface TabSwitchProps {
455
+ items: TabSwitchItem[];
456
+ /** controlled: 현재 선택된 항목의 value(없으면 label). */
457
+ selected?: string;
458
+ /** uncontrolled 초기 선택값. `selected`를 함께 주면 무시된다. 기본은 첫 항목. */
459
+ defaultSelected?: string;
460
+ /** 선택이 바뀔 때 호출. 인자는 항목의 value(없으면 label). */
461
+ onSelect?: (value: string) => void;
462
+ className?: string;
463
+ }
464
+ /**
465
+ * 두 개 이상의 항목을 가로로 나열하고 선택된 항목 아래에 밑줄을 그리는 탭 전환 UI.
466
+ * 예: "나의 예약"의 "진행중인 예약" / "완료된 예약" 전환.
467
+ * (Figma "카테고리" 컴포넌트 — CategorySegmentedControl과는 별개의, 필터가 아닌 탭 전환용 컴포넌트.)
468
+ */
469
+ declare const TabSwitch: react.ForwardRefExoticComponent<TabSwitchProps & react.RefAttributes<HTMLDivElement>>;
470
+
427
471
  type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
428
472
  interface WeekNavigationProps {
429
473
  /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
@@ -577,4 +621,4 @@ interface ToastProps {
577
621
  }
578
622
  declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
579
623
 
580
- export { Accordion, type AccordionProps, 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 };
624
+ export { Accordion, type AccordionProps, BackButton, type BackButtonProps, Badge, type BadgeProps, type BadgeVariant, 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, TabSwitch, type TabSwitchItem, type TabSwitchProps, 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 CHANGED
@@ -34,6 +34,25 @@ interface BackButtonProps {
34
34
  }
35
35
  declare const BackButton: ({ onClick, className }: BackButtonProps) => react.JSX.Element;
36
36
 
37
+ type BadgeVariant = "warning" | "restriction" | "outline" | "neutral" | "solid";
38
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
39
+ /**
40
+ * - `warning` : 경고 상태 (노란 배경)
41
+ * - `restriction` : 제한 상태 (붉은 배경)
42
+ * - `outline` : 흰 배경 + 회색 테두리 (예: "직접 인증")
43
+ * - `neutral` : 옅은 회색 배경
44
+ * - `solid` : 검정 배경 + 흰 글씨
45
+ */
46
+ variant?: BadgeVariant;
47
+ children: React.ReactNode;
48
+ className?: string;
49
+ }
50
+ /**
51
+ * 상태·분류를 나타내는 짧은 라벨. 높이 32px 고정, 좌우 8px 패딩.
52
+ * 예: "경고", "제한", "직접 인증", "인증"
53
+ */
54
+ declare const Badge: ({ variant, children, className, ...props }: BadgeProps) => react.JSX.Element;
55
+
37
56
  interface CTAProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
38
57
  primary?: boolean;
39
58
  alert?: boolean;
@@ -424,6 +443,31 @@ interface SideRadioAccordionProps {
424
443
  }
425
444
  declare const SideRadioAccordion: react.ForwardRefExoticComponent<SideRadioAccordionProps & react.RefAttributes<HTMLDivElement>>;
426
445
 
446
+ type TabSwitchItem = {
447
+ label: string;
448
+ /**
449
+ * 선택 상태를 식별할 값. 표시 텍스트(label)와 분리하고 싶을 때 사용한다.
450
+ * 생략하면 label이 식별자로 쓰인다.
451
+ */
452
+ value?: string;
453
+ };
454
+ interface TabSwitchProps {
455
+ items: TabSwitchItem[];
456
+ /** controlled: 현재 선택된 항목의 value(없으면 label). */
457
+ selected?: string;
458
+ /** uncontrolled 초기 선택값. `selected`를 함께 주면 무시된다. 기본은 첫 항목. */
459
+ defaultSelected?: string;
460
+ /** 선택이 바뀔 때 호출. 인자는 항목의 value(없으면 label). */
461
+ onSelect?: (value: string) => void;
462
+ className?: string;
463
+ }
464
+ /**
465
+ * 두 개 이상의 항목을 가로로 나열하고 선택된 항목 아래에 밑줄을 그리는 탭 전환 UI.
466
+ * 예: "나의 예약"의 "진행중인 예약" / "완료된 예약" 전환.
467
+ * (Figma "카테고리" 컴포넌트 — CategorySegmentedControl과는 별개의, 필터가 아닌 탭 전환용 컴포넌트.)
468
+ */
469
+ declare const TabSwitch: react.ForwardRefExoticComponent<TabSwitchProps & react.RefAttributes<HTMLDivElement>>;
470
+
427
471
  type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
428
472
  interface WeekNavigationProps {
429
473
  /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
@@ -577,4 +621,4 @@ interface ToastProps {
577
621
  }
578
622
  declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
579
623
 
580
- export { Accordion, type AccordionProps, 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 };
624
+ export { Accordion, type AccordionProps, BackButton, type BackButtonProps, Badge, type BadgeProps, type BadgeVariant, 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, TabSwitch, type TabSwitchItem, type TabSwitchProps, 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 };