@hivcd-printshop/design-system 1.6.0 → 1.8.0

package/dist/index.d.mts

@@ -646,4 +646,10 @@ interface SlotButtonProps {
 }
 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 };
+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

@@ -646,4 +646,10 @@ interface SlotButtonProps {
 }
 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 };
+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

@@ -1,8 +1,10 @@
 'use client';
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -66,6 +76,7 @@ __export(index_exports, {
   SearchBar: () => SearchBar,
   SelectBoxOption: () => SelectBoxOption,
   SideRadioAccordion: () => SideRadioAccordion,
+  SlotAddButton: () => SlotAddButton,
   SlotButton: () => SlotButton,
   TNB: () => TNB,
   TabSwitch: () => TabSwitch,
@@ -355,6 +366,23 @@ 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",
@@ -1638,6 +1666,7 @@ var Badge2 = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
+var import_chroma_js = __toESM(require("chroma-js"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var Tag = ({
   className,
@@ -1648,6 +1677,11 @@ var Tag = ({
   onClick,
   ...props
 }) => {
+  const customStyles = bgColor ? {
+    "--tag-bg": bgColor,
+    "--tag-bg-hover": (0, import_chroma_js.default)(bgColor).set("hsl.l", "-0.07").css(),
+    "--tag-bg-active": (0, import_chroma_js.default)(bgColor).set("hsl.l", "-0.12").css()
+  } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "button",
     {
@@ -1655,17 +1689,19 @@ var Tag = ({
         "tag",
         "w-fit h-8 px-2.5",
         "text-primary text-body2-regular transition-colors",
-        "box-border border border-gray02",
-        "bg-white",
-        // bgColor && `bg-[${bgColor}] border-none`,
-        onClick && "cursor-pointer hover:bg-gray00 active:bg-gray01 cursor-pointer has-clickable",
+        "box-border",
+        bgColor ? "bg-[var(--tag-bg)] border-none" : "bg-white border border-gray02",
+        onClick && [
+          "cursor-pointer has-clickable",
+          bgColor ? "hover:bg-[var(--tag-bg-hover)] active:bg-[var(--tag-bg-active)]" : "hover:bg-gray00 active:bg-gray01"
+        ],
         selected && "text-white bg-black border-black hover:bg-black active:bg-black",
         "disabled:text-gray04 disabled:bg-gray02 disabled:border-gray02 disabled:cursor-not-allowed",
         className
       ),
       onClick,
       disabled,
-      style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
+      style: customStyles,
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children })
     }
@@ -2353,23 +2389,18 @@ var SlotButton = ({
       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
-        )
+        reserved && "box-border border border-gray08",
+        showMinusIcon ? "border-transparent bg-gray08 active:bg-gray09 cursor-pointer" : cn(!color && "bg-black", className)
       ),
       children: [
-        !reserved && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          "div",
+        blocked && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "span",
           {
             className: cn(
-              // absolute로 위치를 고정하고 투명도로 애니메이션 처리
-              "absolute h-3.5 w-3.5 rounded-full bg-white transition-opacity",
-              blocked && "box-border border border-gray03",
+              "absolute text-head4-regular text-gray08 transition-opacity",
               showMinusIcon ? "opacity-0" : "opacity-100"
-              // 호버 시 스르륵 사라짐
-            )
+            ),
+            children: "!"
           }
         ),
         isEditing && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -2387,6 +2418,29 @@ var SlotButton = ({
     }
   );
 };
+
+// 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,
@@ -2434,6 +2488,7 @@ var SlotButton = ({
   SearchBar,
   SelectBoxOption,
   SideRadioAccordion,
+  SlotAddButton,
   SlotButton,
   TNB,
   TabSwitch,