@hivcd-printshop/design-system 1.4.2 → 1.5.1

package/dist/index.mjs

@@ -1088,7 +1088,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
         className: cn(
           "relative w-110 pt-8 h-fit pointer-events-auto",
           "flex flex-col items-center",
-          "border border-gray02",
+          // "border border-gray02",
           "bg-white shadow-[0px_0px_30px_0px_rgba(0,0,0,0.08)]",
           className
         ),
@@ -1304,7 +1304,7 @@ var NoticeBar = ({
       children: [
         /* @__PURE__ */ jsxs17("section", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx33(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ jsx33("h1", { className: "text-head1-medium text-strong", children: title })
+          /* @__PURE__ */ jsx33("h1", { className: "text-head3-regular text-strong", children: title })
         ] }),
         /* @__PURE__ */ jsx33("p", { className: "text-body3-book text-tertiary", children: date })
       ]
@@ -1322,7 +1322,7 @@ var SearchBar = ({ value, onChange, className }) => {
         "w-full h-12 pl-4 pr-3",
         "flex items-center gap-2",
         "box-border border-b border-gray02 border-t border-t-white",
-        "focus-within:border-black focus-within:border focus-within:outline-none",
+        "focus-within:border-black focus-within:border focus-within:outline-none focus-within:pl-[15px]",
         className
       ),
       children: [
@@ -1424,7 +1424,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
     " | ",
     title
   ] });
-  const base = "w-full flex items-center justify-between px-5 py-2.5 text-head3-medium text-primary text-left bg-white border-b border-gray02";
+  const base = "w-full flex items-center justify-between px-5 py-2.5 text-head3-medium text-strong text-left bg-white border-b border-gray02";
   if (!collapsible) {
     return /* @__PURE__ */ jsx35("div", { className: cn(base, className), children: label });
   }
@@ -1477,7 +1477,7 @@ var RadioToggleItem = ({
       }
     ),
     open && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ jsx35("p", { className: "text-caption-regular text-secondary", children: content }),
+      /* @__PURE__ */ jsx35("p", { className: "text-body3-book text-secondary", children: content }),
       badges && badges.length > 0 && /* @__PURE__ */ jsx35("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx35(Badge2, { label: badge }, badge)) }),
       labelTextButton && /* @__PURE__ */ jsx35(
         TextButton2,
@@ -1502,7 +1502,7 @@ var Radio = ({ selected = false, className }) => {
       {
         className: cn(
           "inline-flex size-6 shrink-0 items-center justify-center rounded-full transition-colors",
-          "group-hover:bg-gray00 group-active:bg-gray01",
+          // "group-hover:bg-gray00 group-active:bg-gray01",
           className
         ),
         children: /* @__PURE__ */ jsx35(Icon, { className: "size-2.5" })
@@ -2026,7 +2026,7 @@ var UpperPartTab = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx40("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ jsx40("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-gray04"), children: label }),
         /* @__PURE__ */ jsx40("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
       ]
     }
@@ -2124,7 +2124,7 @@ var LowerPartItemButton = ({
       className: cn(
         "inline-flex h-full items-center justify-center px-5 text-head3-medium cursor-pointer no-underline",
         "transition-colors hover:bg-gray00 active:bg-gray01",
-        selected ? "text-strong" : "text-quaternary",
+        selected ? "text-strong" : "text-gray04",
         className
       ),
       children: label
@@ -2164,8 +2164,9 @@ var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose
       role: "status",
       "aria-live": "polite",
       className: cn(
-        "w-full h-fit py-2.5 bg-gray06",
-        "font-pretendard text-white text-center font-semibold text-[17px] leading-[1.6]",
+        "w-full h-fit py-2.5 bg-gray08",
+        "mt-7 mx-8",
+        "text-white text-center text-body1-regular",
         "shadow-[0_2px_15px_rgba(0,0,0,0.18)]",
         controlled && "transition-opacity duration-300",
         controlled && (visible ? "opacity-100" : "opacity-0"),
@@ -2186,6 +2187,44 @@ var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose
     }
   );
 });
+
+// src/components/HeaderBar/HeaderBar.tsx
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+var HeaderBar = ({ className, children, onClick, active, ...props }) => {
+  const onClickStyle = onClick ? "cursor-pointer hover:bg-gray00 active:bg-gray01 transition-colors" : "";
+  const a11yProps = onClick ? {
+    role: "button",
+    tabIndex: 0,
+    "aria-expanded": active,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick();
+      }
+    }
+  } : {};
+  return /* @__PURE__ */ jsxs24(
+    "header",
+    {
+      className: cn(
+        "header",
+        "h-12 w-full pl-5 pr-4 py-2.5",
+        "bg-white box-border border-b border-gray02",
+        "text-head3-medium text-strong",
+        "flex items-center justify-between",
+        onClickStyle,
+        className
+      ),
+      onClick,
+      ...a11yProps,
+      ...props,
+      children: [
+        children,
+        onClick && /* @__PURE__ */ jsx42(IconChevronDownXS, { className: cn("transition-transform", active && "rotate-180") })
+      ]
+    }
+  );
+};
 export {
   Accordion,
   BackButton,
@@ -2212,6 +2251,7 @@ export {
   FormTel,
   FormText,
   FormTextArea,
+  HeaderBar,
   IconCheck,
   IconChevronDownXS,
   IconClose,