klun-ui 0.1.23 → 0.2.2

package/dist/{chunk-T3IFNMYU.js → chunk-UJOMGMCV.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-T225J6LV.js';
-import { createContext, forwardRef, useState, useRef, useEffect, Children, useCallback, useMemo, useLayoutEffect, Fragment as Fragment$1, useContext, isValidElement, createElement, cloneElement, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useState, useRef, useEffect, Children, useCallback, useMemo, useLayoutEffect, Fragment as Fragment$1, createElement, useContext, isValidElement, cloneElement, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -1790,6 +1790,7 @@ var DEFAULT_CONFIG = {
   theme: void 0,
   accent: void 0,
   radius: void 0,
+  density: void 0,
   primaryColor: void 0
 };
 function hexToRgb(hex) {
@@ -1829,6 +1830,7 @@ function ConfigProvider({
   theme,
   accent,
   radius,
+  density,
   primaryColor,
   children
 }) {
@@ -1841,9 +1843,10 @@ function ConfigProvider({
       theme: theme ?? parent.theme,
       accent: accent ?? parent.accent,
       radius: radius ?? parent.radius,
+      density: density ?? parent.density,
       primaryColor: primaryColor ?? parent.primaryColor
     }),
-    [locale, size, dir, theme, accent, radius, primaryColor, parent]
+    [locale, size, dir, theme, accent, radius, density, primaryColor, parent]
   );
   const style = useMemo(() => {
     const s = { display: "contents" };
@@ -1858,6 +1861,7 @@ function ConfigProvider({
       "data-theme": value.theme,
       "data-mode": value.accent,
       "data-radius": value.radius && value.radius !== "default" ? value.radius : void 0,
+      "data-density": value.density,
       style,
       children
     }
@@ -2533,6 +2537,151 @@ var Chip = forwardRef(function Chip2({ children, color = "gray", selected = fals
   );
 });
 Chip.displayName = "Chip";
+var CodeViewer = forwardRef(function CodeViewer2({
+  code = "",
+  title,
+  language,
+  lineNumbers = false,
+  wrap = false,
+  maxHeight = 320,
+  dark = true,
+  onCopied,
+  className,
+  ...props
+}, ref) {
+  const lines = String(code).replace(/\n$/, "").split("\n");
+  const hasHeader = title != null || language != null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx("klun-code-viewer", dark && "klun-code-viewer--dark", className),
+      ...props,
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs("div", { className: "klun-code-viewer__header", children: [
+          /* @__PURE__ */ jsx("span", { className: "klun-code-viewer__title", children: title ?? language }),
+          /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              value: code,
+              onCopied,
+              variant: "ghost",
+              size: "sm",
+              className: "klun-code-viewer__copy"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "klun-code-viewer__scroll",
+            style: { ["--klun-code-viewer-max-height"]: `${maxHeight}px` },
+            children: [
+              !hasHeader ? /* @__PURE__ */ jsx("div", { className: "klun-code-viewer__copy-float", children: /* @__PURE__ */ jsx(
+                CopyButton,
+                {
+                  value: code,
+                  onCopied,
+                  variant: "ghost",
+                  size: "sm",
+                  className: "klun-code-viewer__copy klun-code-viewer__copy--float"
+                }
+              ) }) : null,
+              /* @__PURE__ */ jsx(
+                "pre",
+                {
+                  className: cx(
+                    "klun-code-viewer__pre",
+                    wrap && "klun-code-viewer__pre--wrap"
+                  ),
+                  children: lineNumbers ? /* @__PURE__ */ jsx("code", { className: "klun-code-viewer__code klun-code-viewer__code--numbered", children: lines.map((ln, i) => /* @__PURE__ */ jsxs("span", { className: "klun-code-viewer__row", children: [
+                    /* @__PURE__ */ jsx("span", { className: "klun-code-viewer__gutter", children: i + 1 }),
+                    /* @__PURE__ */ jsx("span", { className: "klun-code-viewer__line", children: ln || " " })
+                  ] }, i)) }) : /* @__PURE__ */ jsx("code", { className: "klun-code-viewer__code", children: code })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+CodeViewer.displayName = "CodeViewer";
+var KNOWN_LEVELS = /* @__PURE__ */ new Set([
+  "error",
+  "warn",
+  "warning",
+  "info",
+  "debug",
+  "success"
+]);
+var LogViewer = forwardRef(function LogViewer2({
+  lines = [],
+  maxHeight = 360,
+  showTimestamp = true,
+  dark = true,
+  onCopied,
+  className,
+  style,
+  ...props
+}, ref) {
+  const norm2 = lines.map(
+    (l) => typeof l === "string" ? { text: l } : l
+  );
+  const raw = norm2.map((l) => [l.ts, l.level && `[${l.level}]`, l.text].filter(Boolean).join(" ")).join("\n");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx("klun-log-viewer", dark && "klun-log-viewer--dark", className),
+      style: { ["--klun-code-viewer-max-height"]: `${maxHeight}px`, ...style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "klun-log-viewer__copy-float", children: /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            value: raw,
+            onCopied,
+            variant: "ghost",
+            size: "sm",
+            className: "klun-log-viewer__copy klun-log-viewer__copy--float"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "klun-log-viewer__body", children: norm2.map((l, i) => {
+          const level = l.level ? String(l.level).toLowerCase() : void 0;
+          const levelClass = level && KNOWN_LEVELS.has(level) ? `klun-log-viewer__level--${level}` : void 0;
+          return /* @__PURE__ */ jsxs("div", { className: "klun-log-viewer__row", children: [
+            showTimestamp && l.ts ? /* @__PURE__ */ jsx("span", { className: "klun-log-viewer__ts", children: l.ts }) : null,
+            l.level ? /* @__PURE__ */ jsx("span", { className: cx("klun-log-viewer__level", levelClass), children: l.level }) : null,
+            /* @__PURE__ */ jsx("span", { className: "klun-log-viewer__text", children: l.text })
+          ] }, i);
+        }) })
+      ]
+    }
+  );
+});
+LogViewer.displayName = "LogViewer";
+var ContentLabel = forwardRef(function ContentLabel2({ children, icon, color = "gray", size = "md", className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cx(
+        "klun-content-label",
+        `klun-content-label--${color}`,
+        `klun-content-label--${size}`,
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "klun-content-label__icon", children: icon }) : null,
+        children
+      ]
+    }
+  );
+});
+ContentLabel.displayName = "ContentLabel";
 var TONE_COLOR = {
   ok: "green",
   warn: "orange",
@@ -2880,151 +3029,6 @@ var CrossRefBadge = forwardRef(
   }
 );
 CrossRefBadge.displayName = "CrossRefBadge";
-var CodeViewer = forwardRef(function CodeViewer2({
-  code = "",
-  title,
-  language,
-  lineNumbers = false,
-  wrap = false,
-  maxHeight = 320,
-  dark = true,
-  onCopied,
-  className,
-  ...props
-}, ref) {
-  const lines = String(code).replace(/\n$/, "").split("\n");
-  const hasHeader = title != null || language != null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx("klun-code-viewer", dark && "klun-code-viewer--dark", className),
-      ...props,
-      children: [
-        hasHeader ? /* @__PURE__ */ jsxs("div", { className: "klun-code-viewer__header", children: [
-          /* @__PURE__ */ jsx("span", { className: "klun-code-viewer__title", children: title ?? language }),
-          /* @__PURE__ */ jsx(
-            CopyButton,
-            {
-              value: code,
-              onCopied,
-              variant: "ghost",
-              size: "sm",
-              className: "klun-code-viewer__copy"
-            }
-          )
-        ] }) : null,
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "klun-code-viewer__scroll",
-            style: { ["--klun-code-viewer-max-height"]: `${maxHeight}px` },
-            children: [
-              !hasHeader ? /* @__PURE__ */ jsx("div", { className: "klun-code-viewer__copy-float", children: /* @__PURE__ */ jsx(
-                CopyButton,
-                {
-                  value: code,
-                  onCopied,
-                  variant: "ghost",
-                  size: "sm",
-                  className: "klun-code-viewer__copy klun-code-viewer__copy--float"
-                }
-              ) }) : null,
-              /* @__PURE__ */ jsx(
-                "pre",
-                {
-                  className: cx(
-                    "klun-code-viewer__pre",
-                    wrap && "klun-code-viewer__pre--wrap"
-                  ),
-                  children: lineNumbers ? /* @__PURE__ */ jsx("code", { className: "klun-code-viewer__code klun-code-viewer__code--numbered", children: lines.map((ln, i) => /* @__PURE__ */ jsxs("span", { className: "klun-code-viewer__row", children: [
-                    /* @__PURE__ */ jsx("span", { className: "klun-code-viewer__gutter", children: i + 1 }),
-                    /* @__PURE__ */ jsx("span", { className: "klun-code-viewer__line", children: ln || " " })
-                  ] }, i)) }) : /* @__PURE__ */ jsx("code", { className: "klun-code-viewer__code", children: code })
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-});
-CodeViewer.displayName = "CodeViewer";
-var KNOWN_LEVELS = /* @__PURE__ */ new Set([
-  "error",
-  "warn",
-  "warning",
-  "info",
-  "debug",
-  "success"
-]);
-var LogViewer = forwardRef(function LogViewer2({
-  lines = [],
-  maxHeight = 360,
-  showTimestamp = true,
-  dark = true,
-  onCopied,
-  className,
-  style,
-  ...props
-}, ref) {
-  const norm2 = lines.map(
-    (l) => typeof l === "string" ? { text: l } : l
-  );
-  const raw = norm2.map((l) => [l.ts, l.level && `[${l.level}]`, l.text].filter(Boolean).join(" ")).join("\n");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx("klun-log-viewer", dark && "klun-log-viewer--dark", className),
-      style: { ["--klun-code-viewer-max-height"]: `${maxHeight}px`, ...style },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "klun-log-viewer__copy-float", children: /* @__PURE__ */ jsx(
-          CopyButton,
-          {
-            value: raw,
-            onCopied,
-            variant: "ghost",
-            size: "sm",
-            className: "klun-log-viewer__copy klun-log-viewer__copy--float"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "klun-log-viewer__body", children: norm2.map((l, i) => {
-          const level = l.level ? String(l.level).toLowerCase() : void 0;
-          const levelClass = level && KNOWN_LEVELS.has(level) ? `klun-log-viewer__level--${level}` : void 0;
-          return /* @__PURE__ */ jsxs("div", { className: "klun-log-viewer__row", children: [
-            showTimestamp && l.ts ? /* @__PURE__ */ jsx("span", { className: "klun-log-viewer__ts", children: l.ts }) : null,
-            l.level ? /* @__PURE__ */ jsx("span", { className: cx("klun-log-viewer__level", levelClass), children: l.level }) : null,
-            /* @__PURE__ */ jsx("span", { className: "klun-log-viewer__text", children: l.text })
-          ] }, i);
-        }) })
-      ]
-    }
-  );
-});
-LogViewer.displayName = "LogViewer";
-var ContentLabel = forwardRef(function ContentLabel2({ children, icon, color = "gray", size = "md", className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref,
-      className: cx(
-        "klun-content-label",
-        `klun-content-label--${color}`,
-        `klun-content-label--${size}`,
-        className
-      ),
-      ...props,
-      children: [
-        icon ? /* @__PURE__ */ jsx("span", { className: "klun-content-label__icon", children: icon }) : null,
-        children
-      ]
-    }
-  );
-});
-ContentLabel.displayName = "ContentLabel";
 var Descriptions = forwardRef(
   function Descriptions2({
     title,
@@ -3746,6 +3750,30 @@ var Rating = forwardRef(function Rating2({ value = 0, max = 5, onChange, readOnl
   )) });
 });
 Rating.displayName = "Rating";
+var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "up", icon, tint = "feature", className, ...props }, ref) {
+  const up = trend === "up";
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-stat-card", `klun-stat-card--${tint}`, className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "klun-stat-card__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "klun-stat-card__icon", children: icon }),
+      delta != null ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cx(
+            "klun-stat-card__delta",
+            up ? "klun-stat-card__delta--up" : "klun-stat-card__delta--down"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("i", { className: up ? "ri-arrow-up-line" : "ri-arrow-down-line" }),
+            delta
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "klun-stat-card__label", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "klun-stat-card__value", children: value })
+  ] });
+});
+StatCard.displayName = "StatCard";
 var TREND_ICONS = {
   up: "ri-arrow-up-line",
   down: "ri-arrow-down-line",
@@ -3773,30 +3801,6 @@ var Statistic = forwardRef(function Statistic2({ label, value, prefix, suffix, p
   ] });
 });
 Statistic.displayName = "Statistic";
-var StatCard = forwardRef(function StatCard2({ label, value, delta, trend = "up", icon, tint = "feature", className, ...props }, ref) {
-  const up = trend === "up";
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-stat-card", `klun-stat-card--${tint}`, className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "klun-stat-card__head", children: [
-      /* @__PURE__ */ jsx("span", { className: "klun-stat-card__icon", children: icon }),
-      delta != null ? /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: cx(
-            "klun-stat-card__delta",
-            up ? "klun-stat-card__delta--up" : "klun-stat-card__delta--down"
-          ),
-          children: [
-            /* @__PURE__ */ jsx("i", { className: up ? "ri-arrow-up-line" : "ri-arrow-down-line" }),
-            delta
-          ]
-        }
-      ) : null
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "klun-stat-card__label", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "klun-stat-card__value", children: value })
-  ] });
-});
-StatCard.displayName = "StatCard";
 var SIZES2 = { xs: 6, sm: 8, md: 10, lg: 12 };
 var StatusDot = forwardRef(function StatusDot2({ tone = "neutral", size = "sm", pulse = false, label, className, style, ...props }, ref) {
   const sizeStyle = { ["--klun-status-dot-size"]: `${SIZES2[size] ?? SIZES2.sm}px` };
@@ -5760,43 +5764,6 @@ var Alert = forwardRef(function Alert2({ status = "information", variant = "ligh
   );
 });
 Alert.displayName = "Alert";
-var EmptyState = forwardRef(function EmptyState2({ icon, title, description, action, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-empty-state", className), ...props, children: [
-    icon ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__icon", children: icon }) : null,
-    title ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__title", children: title }) : null,
-    description ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__desc", children: description }) : null,
-    action ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__action", children: action }) : null
-  ] });
-});
-EmptyState.displayName = "EmptyState";
-var PRESET_ICON = {
-  success: "ri-checkbox-circle-fill",
-  error: "ri-close-circle-fill",
-  warning: "ri-alert-fill",
-  info: "ri-information-fill",
-  "404": "ri-compass-3-line",
-  "403": "ri-lock-2-line",
-  "500": "ri-server-line"
-};
-var Result = forwardRef(function Result2({ status = "info", icon, title, subtitle, extra, children, className, ...props }, ref) {
-  const big = status === "404" || status === "403" || status === "500";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: cx("klun-result", `klun-result--${status}`, big && "klun-result--big", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "klun-result__icon", children: icon || /* @__PURE__ */ jsx("i", { className: PRESET_ICON[status] }) }),
-        title ? /* @__PURE__ */ jsx("div", { className: "klun-result__title", children: title }) : null,
-        subtitle ? /* @__PURE__ */ jsx("div", { className: "klun-result__subtitle", children: subtitle }) : null,
-        extra ? /* @__PURE__ */ jsx("div", { className: "klun-result__extra", children: extra }) : null,
-        children ? /* @__PURE__ */ jsx("div", { className: "klun-result__content", children }) : null
-      ]
-    }
-  );
-});
-Result.displayName = "Result";
 var Banner = forwardRef(function Banner2({ status = "information", variant = "filled", icon, action, onClose, className, children, ...props }, ref) {
   const { banner } = useLocale();
   return /* @__PURE__ */ jsxs(
@@ -5880,6 +5847,15 @@ var CircularProgress = forwardRef(
   }
 );
 CircularProgress.displayName = "CircularProgress";
+var EmptyState = forwardRef(function EmptyState2({ icon, title, description, action, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-empty-state", className), ...props, children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__icon", children: icon }) : null,
+    title ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__title", children: title }) : null,
+    description ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__desc", children: description }) : null,
+    action ? /* @__PURE__ */ jsx("div", { className: "klun-empty-state__action", children: action }) : null
+  ] });
+});
+EmptyState.displayName = "EmptyState";
 var GaugeBar = forwardRef(function GaugeBar2({
   value = 0,
   max = 100,
@@ -6148,6 +6124,34 @@ var ProgressBar = forwardRef(function ProgressBar2({ value = 0, max = 100, color
   );
 });
 ProgressBar.displayName = "ProgressBar";
+var PRESET_ICON = {
+  success: "ri-checkbox-circle-fill",
+  error: "ri-close-circle-fill",
+  warning: "ri-alert-fill",
+  info: "ri-information-fill",
+  "404": "ri-compass-3-line",
+  "403": "ri-lock-2-line",
+  "500": "ri-server-line"
+};
+var Result = forwardRef(function Result2({ status = "info", icon, title, subtitle, extra, children, className, ...props }, ref) {
+  const big = status === "404" || status === "403" || status === "500";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx("klun-result", `klun-result--${status}`, big && "klun-result--big", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "klun-result__icon", children: icon || /* @__PURE__ */ jsx("i", { className: PRESET_ICON[status] }) }),
+        title ? /* @__PURE__ */ jsx("div", { className: "klun-result__title", children: title }) : null,
+        subtitle ? /* @__PURE__ */ jsx("div", { className: "klun-result__subtitle", children: subtitle }) : null,
+        extra ? /* @__PURE__ */ jsx("div", { className: "klun-result__extra", children: extra }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "klun-result__content", children }) : null
+      ]
+    }
+  );
+});
+Result.displayName = "Result";
 var SegmentedProgress = forwardRef(
   function SegmentedProgress2({ value = 0, segments = 4, color = "primary", className, ...props }, ref) {
     return /* @__PURE__ */ jsx(
@@ -6738,59 +6742,20 @@ var Checkbox = forwardRef(function Checkbox2({ indeterminate = false, disabled =
             className: "klun-checkbox__input",
             disabled,
             "aria-invalid": error || void 0,
-            onChange: (e) => onChange?.(e.target.checked),
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "klun-checkbox__box", "aria-hidden": true, children: [
-          /* @__PURE__ */ jsx("svg", { className: "klun-checkbox__check", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-          /* @__PURE__ */ jsx("svg", { className: "klun-checkbox__dash", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-        ] }),
-        children != null && children !== false && /* @__PURE__ */ jsx("span", { className: "klun-checkbox__label", children })
-      ]
-    }
-  );
-});
-Checkbox.displayName = "Checkbox";
-var CheckboxGroup = forwardRef(function CheckboxGroup2({ options, value, defaultValue, onChange, disabled = false, size, name, direction = "horizontal", className, style, children }, ref) {
-  const [internal, setInternal] = useState(defaultValue ?? []);
-  const controlled = value != null;
-  const current = controlled ? value : internal;
-  const toggle = (val, checked) => {
-    const next = checked ? [...current, val] : current.filter((v) => v !== val);
-    if (!controlled) setInternal(next);
-    onChange?.(next);
-  };
-  const norm2 = (options ?? []).map(
-    (o) => typeof o === "string" ? { label: o, value: o } : o
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      role: "group",
-      className: cx("klun-checkbox-group", `klun-checkbox-group--${direction}`, className),
-      style,
-      children: [
-        norm2.map((o) => /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            name,
-            size,
-            value: o.value,
-            checked: current.includes(o.value),
-            disabled: disabled || o.disabled,
-            onChange: (checked) => toggle(o.value, checked),
-            children: o.label
-          },
-          o.value
-        )),
-        children
+            onChange: (e) => onChange?.(e.target.checked),
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "klun-checkbox__box", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("svg", { className: "klun-checkbox__check", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+          /* @__PURE__ */ jsx("svg", { className: "klun-checkbox__dash", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+        ] }),
+        children != null && children !== false && /* @__PURE__ */ jsx("span", { className: "klun-checkbox__label", children })
       ]
     }
   );
 });
-CheckboxGroup.displayName = "CheckboxGroup";
+Checkbox.displayName = "Checkbox";
 var CheckboxCard = forwardRef(
   function CheckboxCard2({
     title,
@@ -6860,6 +6825,45 @@ var CheckboxCard = forwardRef(
   }
 );
 CheckboxCard.displayName = "CheckboxCard";
+var CheckboxGroup = forwardRef(function CheckboxGroup2({ options, value, defaultValue, onChange, disabled = false, size, name, direction = "horizontal", className, style, children }, ref) {
+  const [internal, setInternal] = useState(defaultValue ?? []);
+  const controlled = value != null;
+  const current = controlled ? value : internal;
+  const toggle = (val, checked) => {
+    const next = checked ? [...current, val] : current.filter((v) => v !== val);
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+  const norm2 = (options ?? []).map(
+    (o) => typeof o === "string" ? { label: o, value: o } : o
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: cx("klun-checkbox-group", `klun-checkbox-group--${direction}`, className),
+      style,
+      children: [
+        norm2.map((o) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            name,
+            size,
+            value: o.value,
+            checked: current.includes(o.value),
+            disabled: disabled || o.disabled,
+            onChange: (checked) => toggle(o.value, checked),
+            children: o.label
+          },
+          o.value
+        )),
+        children
+      ]
+    }
+  );
+});
+CheckboxGroup.displayName = "CheckboxGroup";
 var ColorDot = forwardRef(function ColorDot2({
   color = "var(--klun-primary-base)",
   selected = false,
@@ -7785,6 +7789,116 @@ var DatePicker = forwardRef(
   }
 );
 DatePicker.displayName = "DatePicker";
+var norm = (d) => d && new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+var DEFAULT_FORMAT2 = { month: "short", day: "numeric" };
+var RangeCalendar = forwardRef(function RangeCalendar2({ start, end, onPick, className, style }, ref) {
+  const { datePicker } = useLocale();
+  const base = start ? new Date(start) : /* @__PURE__ */ new Date();
+  const [view, setView] = useState(new Date(base.getFullYear(), base.getMonth(), 1));
+  const s = start ? new Date(start) : null;
+  const e = end ? new Date(end) : null;
+  const y = view.getFullYear();
+  const m = view.getMonth();
+  const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
+  const daysInMonth = new Date(y, m + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < firstDay; i++) cells.push(null);
+  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
+  const pick = (d) => {
+    if (!s || s && e) return onPick({ start: d, end: null });
+    if (norm(d) < norm(s)) return onPick({ start: d, end: s });
+    onPick({ start: s, end: d });
+  };
+  const inRange = (d) => !!s && !!e && norm(d) > norm(s) && norm(d) < norm(e);
+  const isStart = (d) => !!s && norm(d) === norm(s);
+  const isEnd = (d) => !!e && norm(d) === norm(e);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-date-range-picker", className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "klun-date-range-picker__header", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 6l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "klun-date-range-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 6l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "klun-date-range-picker__grid", children: [
+      datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsx("div", { className: "klun-date-range-picker__weekday", children: d }, i)),
+      cells.map((date, i) => {
+        if (!date) return /* @__PURE__ */ jsx("span", {}, i);
+        const mid = inRange(date);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "klun-date-range-picker__cell",
+            "data-in-range": mid || void 0,
+            "data-range-edge": isStart(date) || isEnd(date) || void 0,
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "klun-date-range-picker__day",
+                "data-range-start": isStart(date) || void 0,
+                "data-range-end": isEnd(date) || void 0,
+                "data-in-range": mid || void 0,
+                onClick: () => pick(date),
+                children: date.getDate()
+              }
+            )
+          },
+          i
+        );
+      })
+    ] })
+  ] });
+});
+var DateRangePicker = forwardRef(
+  function DateRangePicker2({ start, end, onChange, inline: inline2, placeholder, format = DEFAULT_FORMAT2, align = "left", disabled, className, style, ...props }, ref) {
+    if (inline2) {
+      return /* @__PURE__ */ jsx(
+        RangeCalendar,
+        {
+          ref,
+          start,
+          end,
+          onPick: (r) => onChange?.(r),
+          className,
+          style
+        }
+      );
+    }
+    const f = (d) => d ? new Date(d).toLocaleDateString(void 0, format) : "";
+    const label = start || end ? `${f(start)} \u2013 ${f(end)}` : "";
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-date-range-field", className), style, ...props, children: /* @__PURE__ */ jsx(
+      Popover,
+      {
+        align,
+        width: 300,
+        trigger: /* @__PURE__ */ jsx(
+          Input,
+          {
+            readOnly: true,
+            disabled,
+            value: label,
+            placeholder: placeholder ?? "Select range",
+            leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-calendar-2-line" }),
+            trailingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line" }),
+            style: { width: "100%", cursor: "pointer" }
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsx(
+          RangeCalendar,
+          {
+            className: "klun-date-range-picker--bare",
+            start,
+            end,
+            onPick: (r) => {
+              onChange?.(r);
+              if (r.start && r.end) close();
+            }
+          }
+        )
+      }
+    ) });
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
 var pad = (n) => String(n).padStart(2, "0");
 var TimePicker = forwardRef(
   function TimePicker2({ value = "09:00", onChange, className, style, ...props }, ref) {
@@ -7986,7 +8100,7 @@ function TimeColumn({
 }
 TimePicker.displayName = "TimePicker";
 var pad2 = (n) => String(n).padStart(2, "0");
-var DEFAULT_FORMAT2 = {
+var DEFAULT_FORMAT3 = {
   year: "numeric",
   month: "short",
   day: "numeric",
@@ -8013,112 +8127,13 @@ function DateTimePanel({ value, onChange }) {
   ] });
 }
 var DateTimePicker = forwardRef(
-  function DateTimePicker2({ value, onChange, inline: inline2, placeholder, format = DEFAULT_FORMAT2, align = "left", disabled, className, style, ...props }, ref) {
+  function DateTimePicker2({ value, onChange, inline: inline2, placeholder, format = DEFAULT_FORMAT3, align = "left", disabled, className, style, ...props }, ref) {
     const date = value ? new Date(value) : null;
     if (inline2) {
       return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-date-time-picker", className), style, ...props, children: /* @__PURE__ */ jsx(DateTimePanel, { value: date, onChange: (d) => onChange?.(d) }) });
     }
     const label = date ? date.toLocaleString(void 0, format) : "";
-    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-date-time-field", className), style, ...props, children: /* @__PURE__ */ jsx(
-      Popover,
-      {
-        align,
-        width: 300,
-        trigger: /* @__PURE__ */ jsx(
-          Input,
-          {
-            readOnly: true,
-            disabled,
-            value: label,
-            placeholder: placeholder ?? "Select date & time",
-            leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-calendar-2-line" }),
-            trailingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line" }),
-            style: { width: "100%", cursor: "pointer" }
-          }
-        ),
-        children: /* @__PURE__ */ jsx(DateTimePanel, { value: date, onChange: (d) => onChange?.(d) })
-      }
-    ) });
-  }
-);
-DateTimePicker.displayName = "DateTimePicker";
-var norm = (d) => d && new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-var DEFAULT_FORMAT3 = { month: "short", day: "numeric" };
-var RangeCalendar = forwardRef(function RangeCalendar2({ start, end, onPick, className, style }, ref) {
-  const { datePicker } = useLocale();
-  const base = start ? new Date(start) : /* @__PURE__ */ new Date();
-  const [view, setView] = useState(new Date(base.getFullYear(), base.getMonth(), 1));
-  const s = start ? new Date(start) : null;
-  const e = end ? new Date(end) : null;
-  const y = view.getFullYear();
-  const m = view.getMonth();
-  const firstDay = (new Date(y, m, 1).getDay() + 6) % 7;
-  const daysInMonth = new Date(y, m + 1, 0).getDate();
-  const cells = [];
-  for (let i = 0; i < firstDay; i++) cells.push(null);
-  for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(y, m, d));
-  const pick = (d) => {
-    if (!s || s && e) return onPick({ start: d, end: null });
-    if (norm(d) < norm(s)) return onPick({ start: d, end: s });
-    onPick({ start: s, end: d });
-  };
-  const inRange = (d) => !!s && !!e && norm(d) > norm(s) && norm(d) < norm(e);
-  const isStart = (d) => !!s && norm(d) === norm(s);
-  const isEnd = (d) => !!e && norm(d) === norm(e);
-  return /* @__PURE__ */ jsxs("div", { ref, className: cx("klun-date-range-picker", className), style, children: [
-    /* @__PURE__ */ jsxs("div", { className: "klun-date-range-picker__header", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 6l-4 4 4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-      /* @__PURE__ */ jsx("span", { className: "klun-date-range-picker__title", children: fmt(datePicker.title, { month: datePicker.months[m], year: y }) }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "klun-date-range-picker__nav", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M8 6l4 4-4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "klun-date-range-picker__grid", children: [
-      datePicker.weekdaysShort.map((d, i) => /* @__PURE__ */ jsx("div", { className: "klun-date-range-picker__weekday", children: d }, i)),
-      cells.map((date, i) => {
-        if (!date) return /* @__PURE__ */ jsx("span", {}, i);
-        const mid = inRange(date);
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "klun-date-range-picker__cell",
-            "data-in-range": mid || void 0,
-            "data-range-edge": isStart(date) || isEnd(date) || void 0,
-            children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "klun-date-range-picker__day",
-                "data-range-start": isStart(date) || void 0,
-                "data-range-end": isEnd(date) || void 0,
-                "data-in-range": mid || void 0,
-                onClick: () => pick(date),
-                children: date.getDate()
-              }
-            )
-          },
-          i
-        );
-      })
-    ] })
-  ] });
-});
-var DateRangePicker = forwardRef(
-  function DateRangePicker2({ start, end, onChange, inline: inline2, placeholder, format = DEFAULT_FORMAT3, align = "left", disabled, className, style, ...props }, ref) {
-    if (inline2) {
-      return /* @__PURE__ */ jsx(
-        RangeCalendar,
-        {
-          ref,
-          start,
-          end,
-          onPick: (r) => onChange?.(r),
-          className,
-          style
-        }
-      );
-    }
-    const f = (d) => d ? new Date(d).toLocaleDateString(void 0, format) : "";
-    const label = start || end ? `${f(start)} \u2013 ${f(end)}` : "";
-    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-date-range-field", className), style, ...props, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-date-time-field", className), style, ...props, children: /* @__PURE__ */ jsx(
       Popover,
       {
         align,
@@ -8129,29 +8144,18 @@ var DateRangePicker = forwardRef(
             readOnly: true,
             disabled,
             value: label,
-            placeholder: placeholder ?? "Select range",
+            placeholder: placeholder ?? "Select date & time",
             leadingIcon: /* @__PURE__ */ jsx("i", { className: "ri-calendar-2-line" }),
             trailingIcon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-down-s-line" }),
             style: { width: "100%", cursor: "pointer" }
           }
         ),
-        children: (close) => /* @__PURE__ */ jsx(
-          RangeCalendar,
-          {
-            className: "klun-date-range-picker--bare",
-            start,
-            end,
-            onPick: (r) => {
-              onChange?.(r);
-              if (r.start && r.end) close();
-            }
-          }
-        )
+        children: /* @__PURE__ */ jsx(DateTimePanel, { value: date, onChange: (d) => onChange?.(d) })
       }
     ) });
   }
 );
-DateRangePicker.displayName = "DateRangePicker";
+DateTimePicker.displayName = "DateTimePicker";
 var DigitInput = forwardRef(function DigitInput2({ length = 4, value = "", onChange, error = false, disabled = false, size: sizeProp, className, style, ...props }, ref) {
   const size = useSize(sizeProp);
   const refs = useRef([]);
@@ -9408,6 +9412,25 @@ var Card = forwardRef(function Card2({ variant = "stroke", padding, className, s
   );
 });
 Card.displayName = "Card";
+var GAP_PRESET = { small: 8, middle: 16, large: 24 };
+var resolveGap = (g) => g == null ? void 0 : typeof g === "string" && g in GAP_PRESET ? GAP_PRESET[g] : g;
+var Flex = forwardRef(function Flex2({ vertical = false, wrap, justify, align, flex, gap, component = "div", children, className, style, ...props }, ref) {
+  const mergedStyle = {
+    flexDirection: vertical ? "column" : "row",
+    flexWrap: typeof wrap === "boolean" ? wrap ? "wrap" : "nowrap" : wrap,
+    justifyContent: justify,
+    alignItems: align,
+    flex,
+    gap: resolveGap(gap),
+    ...style
+  };
+  return createElement(
+    component,
+    { ref, className: cx("klun-flex", className), style: mergedStyle, ...props },
+    children
+  );
+});
+Flex.displayName = "Flex";
 var MIN_WIDTH = [
   ["xxl", 1600],
   ["xl", 1200],
@@ -9799,11 +9822,11 @@ function Masonry({
 }
 Masonry.displayName = "Masonry";
 var GAP2 = { none: 0, xs: 4, sm: 8, md: 12, lg: 16, xl: 24, "2xl": 32 };
-function resolveGap(g) {
+function resolveGap2(g) {
   return typeof g === "number" ? g : GAP2[g] ?? GAP2.md;
 }
 var Space = forwardRef(function Space2({ direction = "row", size = "md", align, justify, wrap = true, split, children, className, style, ...props }, ref) {
-  const gap = resolveGap(size);
+  const gap = resolveGap2(size);
   const items2 = Children.toArray(children);
   return /* @__PURE__ */ jsx(
     "div",
@@ -9827,25 +9850,6 @@ var Space = forwardRef(function Space2({ direction = "row", size = "md", align,
   );
 });
 Space.displayName = "Space";
-var GAP_PRESET = { small: 8, middle: 16, large: 24 };
-var resolveGap2 = (g) => g == null ? void 0 : typeof g === "string" && g in GAP_PRESET ? GAP_PRESET[g] : g;
-var Flex = forwardRef(function Flex2({ vertical = false, wrap, justify, align, flex, gap, component = "div", children, className, style, ...props }, ref) {
-  const mergedStyle = {
-    flexDirection: vertical ? "column" : "row",
-    flexWrap: typeof wrap === "boolean" ? wrap ? "wrap" : "nowrap" : wrap,
-    justifyContent: justify,
-    alignItems: align,
-    flex,
-    gap: resolveGap2(gap),
-    ...style
-  };
-  return createElement(
-    component,
-    { ref, className: cx("klun-flex", className), style: mergedStyle, ...props },
-    children
-  );
-});
-Flex.displayName = "Flex";
 var SplitterPanel = forwardRef(
   function SplitterPanel2({ className, children, ...props }, ref) {
     return /* @__PURE__ */ jsx("div", { ref, className: cx("klun-splitter__panel", className), ...props, children });
@@ -10167,108 +10171,6 @@ var Breadcrumb = forwardRef(function Breadcrumb2({ items: items2 = [], className
   }) });
 });
 Breadcrumb.displayName = "Breadcrumb";
-var Tabs = forwardRef(function Tabs2({ items: items2 = [], value, onChange, variant = "underline", className, ...props }, ref) {
-  const active = value ?? items2[0]?.value;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      role: "tablist",
-      className: cx("klun-tabs", `klun-tabs--${variant}`, className),
-      ...props,
-      children: items2.map((it) => {
-        const on = it.value === active;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": on,
-            "data-active": on ? "true" : void 0,
-            onClick: () => onChange?.(it.value),
-            className: "klun-tabs__tab",
-            children: [
-              it.icon ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__icon", children: it.icon }) : null,
-              it.label,
-              it.badge != null ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__badge", children: it.badge }) : null
-            ]
-          },
-          it.value
-        );
-      })
-    }
-  );
-});
-Tabs.displayName = "Tabs";
-var PageHeader = forwardRef(function PageHeader2({
-  title,
-  avatar,
-  tags,
-  subtitle,
-  breadcrumb,
-  onBack,
-  extra,
-  tabs,
-  activeTab,
-  onTabChange,
-  sticky = false,
-  bordered = true,
-  className,
-  children,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ jsxs(
-    "header",
-    {
-      ref,
-      className: cx(
-        "klun-page-header",
-        sticky && "klun-page-header--sticky",
-        bordered && "klun-page-header--bordered",
-        className
-      ),
-      ...props,
-      children: [
-        breadcrumb ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__breadcrumb", children: breadcrumb }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "klun-page-header__bar", children: [
-          onBack ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              iconOnly: true,
-              appearance: "ghost",
-              variant: "neutral",
-              size: "small",
-              "aria-label": "Back",
-              className: "klun-page-header__back",
-              icon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-line", "aria-hidden": true }),
-              onClick: onBack
-            }
-          ) : null,
-          avatar ? /* @__PURE__ */ jsx("span", { className: "klun-page-header__avatar", children: avatar }) : null,
-          /* @__PURE__ */ jsxs("div", { className: "klun-page-header__heading", children: [
-            /* @__PURE__ */ jsxs("div", { className: "klun-page-header__title-row", children: [
-              /* @__PURE__ */ jsx("h1", { className: "klun-page-header__title", children: title }),
-              tags ? /* @__PURE__ */ jsx("span", { className: "klun-page-header__tags", children: tags }) : null
-            ] }),
-            subtitle ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__subtitle", children: subtitle }) : null
-          ] }),
-          extra ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__extra", children: extra }) : null
-        ] }),
-        children ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__content", children }) : null,
-        tabs && tabs.length ? /* @__PURE__ */ jsx(
-          Tabs,
-          {
-            className: "klun-page-header__tabs",
-            items: tabs.map((t) => ({ value: t.key, label: t.label })),
-            value: activeTab,
-            onChange: onTabChange
-          }
-        ) : null
-      ]
-    }
-  );
-});
-PageHeader.displayName = "PageHeader";
 var Divider = forwardRef(function Divider2({ variant = "line", className, children, ...props }, ref) {
   if (variant !== "line" && children != null) {
     return /* @__PURE__ */ jsxs(
@@ -10397,6 +10299,108 @@ var Menu = forwardRef(function Menu2({ items: items2 = [], selectedKey, onSelect
   );
 });
 Menu.displayName = "Menu";
+var Tabs = forwardRef(function Tabs2({ items: items2 = [], value, onChange, variant = "underline", className, ...props }, ref) {
+  const active = value ?? items2[0]?.value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      className: cx("klun-tabs", `klun-tabs--${variant}`, className),
+      ...props,
+      children: items2.map((it) => {
+        const on = it.value === active;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": on,
+            "data-active": on ? "true" : void 0,
+            onClick: () => onChange?.(it.value),
+            className: "klun-tabs__tab",
+            children: [
+              it.icon ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__icon", children: it.icon }) : null,
+              it.label,
+              it.badge != null ? /* @__PURE__ */ jsx("span", { className: "klun-tabs__badge", children: it.badge }) : null
+            ]
+          },
+          it.value
+        );
+      })
+    }
+  );
+});
+Tabs.displayName = "Tabs";
+var PageHeader = forwardRef(function PageHeader2({
+  title,
+  avatar,
+  tags,
+  subtitle,
+  breadcrumb,
+  onBack,
+  extra,
+  tabs,
+  activeTab,
+  onTabChange,
+  sticky = false,
+  bordered = true,
+  className,
+  children,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cx(
+        "klun-page-header",
+        sticky && "klun-page-header--sticky",
+        bordered && "klun-page-header--bordered",
+        className
+      ),
+      ...props,
+      children: [
+        breadcrumb ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__breadcrumb", children: breadcrumb }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "klun-page-header__bar", children: [
+          onBack ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              appearance: "ghost",
+              variant: "neutral",
+              size: "small",
+              "aria-label": "Back",
+              className: "klun-page-header__back",
+              icon: /* @__PURE__ */ jsx("i", { className: "ri-arrow-left-line", "aria-hidden": true }),
+              onClick: onBack
+            }
+          ) : null,
+          avatar ? /* @__PURE__ */ jsx("span", { className: "klun-page-header__avatar", children: avatar }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "klun-page-header__heading", children: [
+            /* @__PURE__ */ jsxs("div", { className: "klun-page-header__title-row", children: [
+              /* @__PURE__ */ jsx("h1", { className: "klun-page-header__title", children: title }),
+              tags ? /* @__PURE__ */ jsx("span", { className: "klun-page-header__tags", children: tags }) : null
+            ] }),
+            subtitle ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__subtitle", children: subtitle }) : null
+          ] }),
+          extra ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__extra", children: extra }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "klun-page-header__content", children }) : null,
+        tabs && tabs.length ? /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            className: "klun-page-header__tabs",
+            items: tabs.map((t) => ({ value: t.key, label: t.label })),
+            value: activeTab,
+            onChange: onTabChange
+          }
+        ) : null
+      ]
+    }
+  );
+});
+PageHeader.displayName = "PageHeader";
 function Cell({ children, active, disabled, onClick, aria }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -11597,5 +11601,5 @@ var Popconfirm = forwardRef(function Popconfirm2({
 Popconfirm.displayName = "Popconfirm";
 
 export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-T3IFNMYU.js.map
-//# sourceMappingURL=chunk-T3IFNMYU.js.map
+//# sourceMappingURL=chunk-UJOMGMCV.js.map
+//# sourceMappingURL=chunk-UJOMGMCV.js.map