@hivcd-printshop/design-system 1.0.0 → 1.1.0

package/dist/ChevronDown-XSALXCW4.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 8.3335L10 13.3335L15 8.3335" stroke="#121212" stroke-width="1.5" stroke-linecap="square"/>
+</svg>

package/dist/Exclamation-IUYZYYC4.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.41438 7.18735H5.57954L5.50175 3.10938H6.49218L6.41438 7.18735ZM5.40001 8.3313C5.39801 8.23061 5.42395 8.13738 5.47781 8.05161C5.53167 7.96583 5.60448 7.89777 5.69624 7.84743C5.79 7.79708 5.89174 7.77191 6.00145 7.77191C6.10718 7.77191 6.20592 7.79708 6.29768 7.84743C6.38945 7.89777 6.46226 7.96583 6.51612 8.05161C6.57197 8.13738 6.5999 8.23061 6.5999 8.3313C6.5999 8.43199 6.57197 8.52522 6.51612 8.611C6.46226 8.69677 6.38945 8.76483 6.29768 8.81518C6.20592 8.86552 6.10718 8.89069 6.00145 8.89069C5.89174 8.89069 5.79 8.86552 5.69624 8.81518C5.60448 8.76483 5.53167 8.69677 5.47781 8.611C5.42395 8.52522 5.39801 8.43199 5.40001 8.3313Z" fill="#505865"/>
+<circle cx="6" cy="6" r="4.5" stroke="#505865"/>
+</svg>

package/dist/RadioSelected-DOLVV7ZM.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" stroke="#121212"/>
+<circle cx="8" cy="8" r="4" fill="#121212"/>
+</svg>

package/dist/RadioUnselected-QN74EU46.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" stroke="#B4B9C2"/>
+</svg>

package/dist/index.d.mts

@@ -1,5 +1,11 @@
 import * as react from 'react';
 
+interface BackButtonProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare const BackButton: ({ onClick, className }: BackButtonProps) => react.JSX.Element;
+
 interface CTAProps {
     primary?: boolean;
     variable: CTAVariable;
@@ -10,4 +16,158 @@ interface CTAProps {
 type CTAVariable = "disabled" | "default" | "pressed";
 declare const CTA: ({ primary, variable, label, onClick, className, }: CTAProps) => react.JSX.Element;
 
-export { CTA, type CTAProps };
+interface CategorySegmentProps {
+    selected?: boolean;
+    label: string;
+    className?: string;
+    onClick?: () => void;
+}
+declare const CategorySegment: ({ selected, label, className, onClick, }: CategorySegmentProps) => react.JSX.Element;
+
+interface CategorySegmentedControlProps {
+    variable: "info" | "archive" | "notice" | "infoTag";
+    setSelectedCategory: (label: string) => void;
+    selectedCategory: string;
+    className?: string;
+}
+declare const CategorySegmentedControl: ({ variable, setSelectedCategory, selectedCategory, className, }: CategorySegmentedControlProps) => react.JSX.Element;
+
+interface TitleInputProps {
+    title?: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+declare const TitleInput: ({ title, onChange, className }: TitleInputProps) => react.JSX.Element;
+
+interface NoticeBadgeProps {
+    variable: NoticeBadgeVariable;
+    className?: string;
+    onClick?: () => void;
+}
+type NoticeBadgeVariable = "urgent" | "common";
+declare const NoticeBadge: ({ variable, className, onClick }: NoticeBadgeProps) => react.JSX.Element;
+
+interface NoticeBarProps {
+    variable: NoticeBarVariable;
+    badgeVariable: NoticeBarBadgeVariable;
+    title: string;
+    date: string;
+    className?: string;
+    onClick?: () => void;
+}
+type NoticeBarVariable = "default" | "hover" | "pressed";
+type NoticeBarBadgeVariable = "urgent" | "common";
+declare const NoticeBar: ({ variable, badgeVariable, title, date, className, onClick, }: NoticeBarProps) => react.JSX.Element;
+
+interface SearchBarProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare const SearchBar: ({ value, onChange, className }: SearchBarProps) => react.JSX.Element;
+
+type PrintColor$1 = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "Seet Cutting" | "Laser Cutting";
+type RadioToggle = {
+    title: string;
+    content: string;
+    badges?: string[];
+    /** 선택됐을 때 라디오 행에 입힐 배경색. 없으면 회색(gray00)으로 표시 */
+    printColor?: PrintColor$1;
+    labelTextButton?: string;
+    onClickTextButton?: () => void;
+};
+interface SideRadioAccordionProps {
+    step: number;
+    title: string;
+    radioToggleList: RadioToggle[];
+    /** 처음에 선택돼 있을 항목의 title */
+    defaultSelected?: string;
+    onSelect?: (title: string) => void;
+    quantityLimitLabel?: string;
+    onClickQuantityLimit?: () => void;
+    className?: string;
+}
+declare const SideRadioAccordion: ({ step, title, radioToggleList, defaultSelected, onSelect, quantityLimitLabel, onClickQuantityLimit, className, }: SideRadioAccordionProps) => react.JSX.Element;
+
+interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    children: string | React.ReactNode;
+    selected?: boolean;
+    onClick?: () => void;
+    bgColor?: string;
+}
+declare const Tag: ({ className, children, selected, disabled, bgColor, onClick, ...props }: TagProps) => react.JSX.Element;
+
+type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
+interface WeekNavigationProps {
+    /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
+    date: string;
+    week: Week;
+    onPrevWeek?: () => void;
+    onNextWeek?: () => void;
+    className?: string;
+}
+declare const WeekNavigation: ({ date, week, onPrevWeek, onNextWeek, className, }: WeekNavigationProps) => react.JSX.Element;
+
+type PrintColor = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "Seet Cutting" | "Laser Cutting";
+type TimeSlotState = "none" | "default" | "disabled" | "selected";
+interface TimeSlot {
+    time: string;
+    state: TimeSlotState;
+    /** state가 "default"/"selected"일 때만 사용되는 hover 색상 */
+    printColor?: PrintColor;
+}
+interface DayColumn {
+    /** 해당 요일의 ISO 날짜("YYYY-MM-DD") */
+    date: string;
+    slots: TimeSlot[];
+}
+interface TimetableProps {
+    /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD") */
+    weekStart: string;
+    week: Week;
+    /** 월~금 5개, 왼쪽부터 순서대로 */
+    days: DayColumn[];
+    onPrevWeek?: () => void;
+    onNextWeek?: () => void;
+    onSelectSlot?: (date: string, time: string) => void;
+    className?: string;
+}
+declare const Timetable: ({ weekStart, week, days, onPrevWeek, onNextWeek, onSelectSlot, className, }: TimetableProps) => react.JSX.Element;
+
+type NavIcon = {
+    src: string;
+    alt?: string;
+    onClick?: () => void;
+    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태) */
+    selected?: boolean;
+    className?: string;
+};
+type LowerPartItem = {
+    label: string;
+    onClick?: () => void;
+};
+type UpperPartItem = {
+    label: string;
+    /** 이 상단 탭이 선택됐을 때 아래에 노출할 하위 메뉴 */
+    lowerPartItemList: LowerPartItem[];
+};
+interface TNBProps {
+    logo: NavIcon;
+    upperPartItemList: UpperPartItem[];
+    /** 우측 알림/마이페이지 등 아이콘 목록(로고 제외) */
+    upperPartIconList: NavIcon[];
+    /** 처음에 선택돼 있을 상단 탭의 label */
+    defaultSelected?: string;
+    onSelectItem?: (label: string) => void;
+    className?: string;
+}
+declare const TNB: ({ logo, upperPartItemList, upperPartIconList, defaultSelected, onSelectItem, className, }: TNBProps) => react.JSX.Element;
+
+interface ToastProps {
+    message: string;
+    className?: string;
+}
+declare const Toast: ({ message, className }: ToastProps) => react.JSX.Element;
+
+export { BackButton, type BackButtonProps, CTA, type CTAProps, type CTAVariable, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, type DayColumn, type LowerPartItem, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps };

package/dist/index.d.ts

@@ -1,5 +1,11 @@
 import * as react from 'react';
 
+interface BackButtonProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare const BackButton: ({ onClick, className }: BackButtonProps) => react.JSX.Element;
+
 interface CTAProps {
     primary?: boolean;
     variable: CTAVariable;
@@ -10,4 +16,158 @@ interface CTAProps {
 type CTAVariable = "disabled" | "default" | "pressed";
 declare const CTA: ({ primary, variable, label, onClick, className, }: CTAProps) => react.JSX.Element;
 
-export { CTA, type CTAProps };
+interface CategorySegmentProps {
+    selected?: boolean;
+    label: string;
+    className?: string;
+    onClick?: () => void;
+}
+declare const CategorySegment: ({ selected, label, className, onClick, }: CategorySegmentProps) => react.JSX.Element;
+
+interface CategorySegmentedControlProps {
+    variable: "info" | "archive" | "notice" | "infoTag";
+    setSelectedCategory: (label: string) => void;
+    selectedCategory: string;
+    className?: string;
+}
+declare const CategorySegmentedControl: ({ variable, setSelectedCategory, selectedCategory, className, }: CategorySegmentedControlProps) => react.JSX.Element;
+
+interface TitleInputProps {
+    title?: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+declare const TitleInput: ({ title, onChange, className }: TitleInputProps) => react.JSX.Element;
+
+interface NoticeBadgeProps {
+    variable: NoticeBadgeVariable;
+    className?: string;
+    onClick?: () => void;
+}
+type NoticeBadgeVariable = "urgent" | "common";
+declare const NoticeBadge: ({ variable, className, onClick }: NoticeBadgeProps) => react.JSX.Element;
+
+interface NoticeBarProps {
+    variable: NoticeBarVariable;
+    badgeVariable: NoticeBarBadgeVariable;
+    title: string;
+    date: string;
+    className?: string;
+    onClick?: () => void;
+}
+type NoticeBarVariable = "default" | "hover" | "pressed";
+type NoticeBarBadgeVariable = "urgent" | "common";
+declare const NoticeBar: ({ variable, badgeVariable, title, date, className, onClick, }: NoticeBarProps) => react.JSX.Element;
+
+interface SearchBarProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare const SearchBar: ({ value, onChange, className }: SearchBarProps) => react.JSX.Element;
+
+type PrintColor$1 = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "Seet Cutting" | "Laser Cutting";
+type RadioToggle = {
+    title: string;
+    content: string;
+    badges?: string[];
+    /** 선택됐을 때 라디오 행에 입힐 배경색. 없으면 회색(gray00)으로 표시 */
+    printColor?: PrintColor$1;
+    labelTextButton?: string;
+    onClickTextButton?: () => void;
+};
+interface SideRadioAccordionProps {
+    step: number;
+    title: string;
+    radioToggleList: RadioToggle[];
+    /** 처음에 선택돼 있을 항목의 title */
+    defaultSelected?: string;
+    onSelect?: (title: string) => void;
+    quantityLimitLabel?: string;
+    onClickQuantityLimit?: () => void;
+    className?: string;
+}
+declare const SideRadioAccordion: ({ step, title, radioToggleList, defaultSelected, onSelect, quantityLimitLabel, onClickQuantityLimit, className, }: SideRadioAccordionProps) => react.JSX.Element;
+
+interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    children: string | React.ReactNode;
+    selected?: boolean;
+    onClick?: () => void;
+    bgColor?: string;
+}
+declare const Tag: ({ className, children, selected, disabled, bgColor, onClick, ...props }: TagProps) => react.JSX.Element;
+
+type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
+interface WeekNavigationProps {
+    /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
+    date: string;
+    week: Week;
+    onPrevWeek?: () => void;
+    onNextWeek?: () => void;
+    className?: string;
+}
+declare const WeekNavigation: ({ date, week, onPrevWeek, onNextWeek, className, }: WeekNavigationProps) => react.JSX.Element;
+
+type PrintColor = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "Seet Cutting" | "Laser Cutting";
+type TimeSlotState = "none" | "default" | "disabled" | "selected";
+interface TimeSlot {
+    time: string;
+    state: TimeSlotState;
+    /** state가 "default"/"selected"일 때만 사용되는 hover 색상 */
+    printColor?: PrintColor;
+}
+interface DayColumn {
+    /** 해당 요일의 ISO 날짜("YYYY-MM-DD") */
+    date: string;
+    slots: TimeSlot[];
+}
+interface TimetableProps {
+    /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD") */
+    weekStart: string;
+    week: Week;
+    /** 월~금 5개, 왼쪽부터 순서대로 */
+    days: DayColumn[];
+    onPrevWeek?: () => void;
+    onNextWeek?: () => void;
+    onSelectSlot?: (date: string, time: string) => void;
+    className?: string;
+}
+declare const Timetable: ({ weekStart, week, days, onPrevWeek, onNextWeek, onSelectSlot, className, }: TimetableProps) => react.JSX.Element;
+
+type NavIcon = {
+    src: string;
+    alt?: string;
+    onClick?: () => void;
+    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태) */
+    selected?: boolean;
+    className?: string;
+};
+type LowerPartItem = {
+    label: string;
+    onClick?: () => void;
+};
+type UpperPartItem = {
+    label: string;
+    /** 이 상단 탭이 선택됐을 때 아래에 노출할 하위 메뉴 */
+    lowerPartItemList: LowerPartItem[];
+};
+interface TNBProps {
+    logo: NavIcon;
+    upperPartItemList: UpperPartItem[];
+    /** 우측 알림/마이페이지 등 아이콘 목록(로고 제외) */
+    upperPartIconList: NavIcon[];
+    /** 처음에 선택돼 있을 상단 탭의 label */
+    defaultSelected?: string;
+    onSelectItem?: (label: string) => void;
+    className?: string;
+}
+declare const TNB: ({ logo, upperPartItemList, upperPartIconList, defaultSelected, onSelectItem, className, }: TNBProps) => react.JSX.Element;
+
+interface ToastProps {
+    message: string;
+    className?: string;
+}
+declare const Toast: ({ message, className }: ToastProps) => react.JSX.Element;
+
+export { BackButton, type BackButtonProps, CTA, type CTAProps, type CTAVariable, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, type DayColumn, type LowerPartItem, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps };