@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/panel-header-D313n_9-.js

@@ -0,0 +1,105 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { forwardRef as b, useContext as P, createContext as k } from "react";
+import { c as i } from "./index-D2ZczOXr.js";
+const l = k(null);
+function C({
+  actions: a,
+  children: e
+}) {
+  return /* @__PURE__ */ r(l.Provider, { value: a, children: e });
+}
+function y() {
+  return P(l);
+}
+const N = i(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+    "ds:px-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-sm)]"
+  ].join(" "),
+  {
+    variants: {
+      // `sticky` pins the header to the top of the panel's scroll region;
+      // otherwise it stays a fixed-height band that never shrinks.
+      sticky: {
+        true: "ds:sticky ds:top-0 ds:z-[1] ds:bg-[color:var(--background)]",
+        false: "ds:shrink-0"
+      },
+      divider: {
+        true: "ds:border-b ds:border-[color:var(--border)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      sticky: !1,
+      divider: !0
+    }
+  }
+), j = i(
+  [
+    "ds:m-0 ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+    "ds:text-[color:var(--foreground)]"
+  ].join(" "),
+  {
+    variants: {
+      titleScale: {
+        card: "type-title-card",
+        section: "type-title-section"
+      }
+    },
+    defaultVariants: {
+      titleScale: "card"
+    }
+  }
+), H = b(
+  ({
+    title: a,
+    icon: e,
+    headingId: c,
+    headingLevel: o = 2,
+    actions: d,
+    filters: n,
+    sticky: p = !1,
+    divider: u = !0,
+    titleScale: m = "card",
+    className: v,
+    ...f
+  }, g) => {
+    const t = y(), x = o === 3 ? "h3" : "h2", h = d != null || t != null;
+    return /* @__PURE__ */ s(
+      "header",
+      {
+        ref: g,
+        "data-component": "panel-header",
+        className: N({ sticky: p, divider: u, className: v }),
+        ...f,
+        children: [
+          /* @__PURE__ */ s("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ s(x, { id: c, className: j({ titleScale: m }), children: [
+              e ? /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "ds:inline-flex ds:shrink-0 ds:text-[color:var(--accent)] ds:[&_svg]:size-4",
+                  children: e
+                }
+              ) : null,
+              a
+            ] }),
+            h ? /* @__PURE__ */ s("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:shrink-0", children: [
+              d,
+              t
+            ] }) : null
+          ] }),
+          n != null ? /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: n }) : null
+        ]
+      }
+    );
+  }
+);
+H.displayName = "PanelHeader";
+export {
+  H as P,
+  C as a,
+  y as u
+};
+//# sourceMappingURL=panel-header-D313n_9-.js.map