@hivcd-printshop/design-system 1.5.0 → 1.5.2

package/dist/index.mjs

@@ -2164,11 +2164,10 @@ 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-gray08",
-        "mt-7 mx-8",
+        "w-full h-fit py-2.5 px-4 bg-gray08",
         "text-white text-center text-body1-regular",
         "shadow-[0_2px_15px_rgba(0,0,0,0.18)]",
-        controlled && "transition-opacity duration-300",
+        controlled && "transition-opacity",
         controlled && (visible ? "opacity-100" : "opacity-0"),
         className
       ),
@@ -2180,13 +2179,51 @@ var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose
     "div",
     {
       className: cn(
-        "fixed inset-x-0 z-5000 pointer-events-none",
+        "fixed inset-x-0 z-5000 pointer-events-none h-full my-7 mx-8",
         position === "top" ? "top-0" : "bottom-0"
       ),
       children: banner
     }
   );
 });
+
+// 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,
@@ -2213,6 +2250,7 @@ export {
   FormTel,
   FormText,
   FormTextArea,
+  HeaderBar,
   IconCheck,
   IconChevronDownXS,
   IconClose,