@hivcd-printshop/design-system 1.5.0 → 1.5.1

package/dist/index.mjs

@@ -2187,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,
@@ -2213,6 +2251,7 @@ export {
   FormTel,
   FormText,
   FormTextArea,
+  HeaderBar,
   IconCheck,
   IconChevronDownXS,
   IconClose,