@hivcd-printshop/design-system 1.5.2 → 1.7.0

package/dist/index.d.mts

@@ -262,16 +262,17 @@ interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Tag: ({ className, children, selected, disabled, bgColor, onClick, ...props }: TagProps) => react.JSX.Element;
 
+type AllowedTagChild = React.ReactElement<TagProps> | React.ReactElement<TagProps>[];
 interface ListProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "children"> {
     className?: string;
     label1?: string;
     label2?: string;
-    label2OnClick?: () => void;
+    label2OnClick?: (e: React.MouseEvent<HTMLLabelElement>) => void;
     label3?: string;
     disabled?: boolean;
     selected?: boolean;
-    onClick?: () => void;
-    children?: React.ReactElement<TagProps> | React.ReactElement<TagProps>[];
+    onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
+    children?: AllowedTagChild | AllowedTagChild[];
 }
 declare function List({ className, label1, label2, label2OnClick, label3, disabled, selected, onClick, children, ...props }: ListProps): react.JSX.Element;
 
@@ -629,4 +630,26 @@ interface HeaderBarProps {
 }
 declare const HeaderBar: ({ className, children, onClick, active, ...props }: HeaderBarProps) => react.JSX.Element;
 
-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, HeaderBar, type HeaderBarProps, 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 };
+interface EmptyStateProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const EmptyState: ({ className, children }: EmptyStateProps) => react.JSX.Element;
+
+interface SlotButtonProps {
+    isEditing?: boolean;
+    reserved?: boolean;
+    blocked?: boolean;
+    onClick?: () => void;
+    color?: string;
+    className?: string;
+}
+declare const SlotButton: ({ onClick, isEditing, reserved, blocked, color, className, }: SlotButtonProps) => react.JSX.Element;
+
+interface SlotAddButtonProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare const SlotAddButton: ({ onClick, className }: SlotAddButtonProps) => react.JSX.Element;
+
+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, EmptyState, type EmptyStateProps, 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, HeaderBar, type HeaderBarProps, 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, SlotAddButton, type SlotAddButtonProps, SlotButton, type SlotButtonProps, 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

@@ -262,16 +262,17 @@ interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Tag: ({ className, children, selected, disabled, bgColor, onClick, ...props }: TagProps) => react.JSX.Element;
 
+type AllowedTagChild = React.ReactElement<TagProps> | React.ReactElement<TagProps>[];
 interface ListProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "children"> {
     className?: string;
     label1?: string;
     label2?: string;
-    label2OnClick?: () => void;
+    label2OnClick?: (e: React.MouseEvent<HTMLLabelElement>) => void;
     label3?: string;
     disabled?: boolean;
     selected?: boolean;
-    onClick?: () => void;
-    children?: React.ReactElement<TagProps> | React.ReactElement<TagProps>[];
+    onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
+    children?: AllowedTagChild | AllowedTagChild[];
 }
 declare function List({ className, label1, label2, label2OnClick, label3, disabled, selected, onClick, children, ...props }: ListProps): react.JSX.Element;
 
@@ -629,4 +630,26 @@ interface HeaderBarProps {
 }
 declare const HeaderBar: ({ className, children, onClick, active, ...props }: HeaderBarProps) => react.JSX.Element;
 
-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, HeaderBar, type HeaderBarProps, 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 };
+interface EmptyStateProps {
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const EmptyState: ({ className, children }: EmptyStateProps) => react.JSX.Element;
+
+interface SlotButtonProps {
+    isEditing?: boolean;
+    reserved?: boolean;
+    blocked?: boolean;
+    onClick?: () => void;
+    color?: string;
+    className?: string;
+}
+declare const SlotButton: ({ onClick, isEditing, reserved, blocked, color, className, }: SlotButtonProps) => react.JSX.Element;
+
+interface SlotAddButtonProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare const SlotAddButton: ({ onClick, className }: SlotAddButtonProps) => react.JSX.Element;
+
+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, EmptyState, type EmptyStateProps, 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, HeaderBar, type HeaderBarProps, 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, SlotAddButton, type SlotAddButtonProps, SlotButton, type SlotButtonProps, 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.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   ColumnText: () => ColumnText,
   ColumnTextStyle: () => ColumnTextStyle,
   Dropdown: () => Dropdown,
+  EmptyState: () => EmptyState,
   FormCheckBox: () => FormCheckBox,
   FormColor: () => FormColor,
   FormFile: () => FormFile,
@@ -65,6 +66,8 @@ __export(index_exports, {
   SearchBar: () => SearchBar,
   SelectBoxOption: () => SelectBoxOption,
   SideRadioAccordion: () => SideRadioAccordion,
+  SlotAddButton: () => SlotAddButton,
+  SlotButton: () => SlotButton,
   TNB: () => TNB,
   TabSwitch: () => TabSwitch,
   Tag: () => Tag,
@@ -353,6 +356,37 @@ var IconClose = ({ className, stroke }) => {
     }
   );
 };
+var IconPlus = ({ className, stroke }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16.6673 10.0013H3.33398", stroke: stroke || "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.99902 3.33203V16.6654", stroke: stroke || "currentColor" })
+      ]
+    }
+  );
+};
+var IconMinus = ({ className, stroke }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16.6673 10.0013H3.33398", stroke: stroke || "currentColor" })
+    }
+  );
+};
 
 // src/components/Accordion/Accordion.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -2296,6 +2330,104 @@ var HeaderBar = ({ className, children, onClick, active, ...props }) => {
     }
   );
 };
+
+// src/components/EmptyState/EmptyState.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var EmptyState = ({ className, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      className: cn(
+        "empty-state",
+        "flex items-center justify-center h-full w-full",
+        "text-body3-regular text-strong",
+        className
+      ),
+      children: children ?? "No content available."
+    }
+  );
+};
+
+// src/components/SlotButton/SlotButton.tsx
+var import_react13 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var SlotButton = ({
+  onClick,
+  isEditing,
+  reserved,
+  blocked,
+  color,
+  className
+}) => {
+  const [isHovered, setIsHovered] = (0, import_react13.useState)(false);
+  const showMinusIcon = isEditing && isHovered;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "button",
+    {
+      onClick,
+      onMouseEnter: isEditing ? () => setIsHovered(true) : void 0,
+      onMouseLeave: isEditing ? () => setIsHovered(false) : void 0,
+      style: !showMinusIcon && color ? { backgroundColor: color } : void 0,
+      className: cn(
+        // 자식 요소들을 겹치기 위해 relative 추가
+        "relative h-7 w-7 rounded-full flex items-center justify-center transition-colors",
+        showMinusIcon ? "bg-gray09 cursor-pointer" : cn(
+          !color && "bg-black",
+          blocked && "bg-white box-border border border-gray03",
+          className
+        )
+      ),
+      children: [
+        !reserved && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "div",
+          {
+            className: cn(
+              // absolute로 위치를 고정하고 투명도로 애니메이션 처리
+              "absolute h-3.5 w-3.5 rounded-full bg-white transition-opacity",
+              blocked && "box-border border border-gray03",
+              showMinusIcon ? "opacity-0" : "opacity-100"
+              // 호버 시 스르륵 사라짐
+            )
+          }
+        ),
+        isEditing && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          IconMinus,
+          {
+            className: cn(
+              // absolute로 위치를 고정하고 투명도로 애니메이션 처리
+              "absolute text-white w-5 h-5 transition-opacity",
+              showMinusIcon ? "opacity-100" : "opacity-0"
+              // 호버 시 스르륵 나타남
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/SlotButton/SlotAddButton.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var SlotAddButton = ({ onClick, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "group",
+        // 1. 부모에 group 클래스 추가!
+        "h-7 w-7 rounded-full flex items-center justify-center",
+        "bg-white box-border border border-gray03",
+        "hover:bg-gray08 hover:border-transparent",
+        // border-none 대신 border-transparent가 레이아웃 덜 흔들려!
+        "active:bg-gray09 active:border-transparent",
+        "transition-colors cursor-pointer",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(IconPlus, { className: "text-gray04 group-hover:text-white w-5 h-5" })
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2314,6 +2446,7 @@ var HeaderBar = ({ className, children, onClick, active, ...props }) => {
   ColumnText,
   ColumnTextStyle,
   Dropdown,
+  EmptyState,
   FormCheckBox,
   FormColor,
   FormFile,
@@ -2342,6 +2475,8 @@ var HeaderBar = ({ className, children, onClick, active, ...props }) => {
   SearchBar,
   SelectBoxOption,
   SideRadioAccordion,
+  SlotAddButton,
+  SlotButton,
   TNB,
   TabSwitch,
   Tag,