@hivcd-printshop/design-system 1.5.2 → 1.6.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,20 @@ 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;
+
+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, 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,20 @@ 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;
+
+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, 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,7 @@ __export(index_exports, {
   SearchBar: () => SearchBar,
   SelectBoxOption: () => SelectBoxOption,
   SideRadioAccordion: () => SideRadioAccordion,
+  SlotButton: () => SlotButton,
   TNB: () => TNB,
   TabSwitch: () => TabSwitch,
   Tag: () => Tag,
@@ -353,6 +355,20 @@ var IconClose = ({ className, stroke }) => {
     }
   );
 };
+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 +2312,81 @@ 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"
+              // 호버 시 스르륵 나타남
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2314,6 +2405,7 @@ var HeaderBar = ({ className, children, onClick, active, ...props }) => {
   ColumnText,
   ColumnTextStyle,
   Dropdown,
+  EmptyState,
   FormCheckBox,
   FormColor,
   FormFile,
@@ -2342,6 +2434,7 @@ var HeaderBar = ({ className, children, onClick, active, ...props }) => {
   SearchBar,
   SelectBoxOption,
   SideRadioAccordion,
+  SlotButton,
   TNB,
   TabSwitch,
   Tag,