@iris-ui-kit/react 0.1.0

package/dist/chunk-VWCJJRSC.js

@@ -0,0 +1,1200 @@
+'use client'
+import { useThemeOptional } from './chunk-XCK4RIXB.js';
+import { IrisSidebarLayout, IrisHeaderLayout } from './chunk-J5FB2UB2.js';
+import { useI18n } from './chunk-OMOTUHYI.js';
+import { useFloating, useDismiss } from './chunk-6BMFMCMQ.js';
+import { useStore } from './chunk-RZNYIFV2.js';
+import * as React6 from 'react';
+import { useMemo } from 'react';
+import { composeEventHandlers, matchTypeahead, branchTrail, createExpansion, visibleNav, findNavPath, createFloatingMachine, createAdminShell, isClosable, isBranch, firstLeaf, findNavNode } from '@iris-ui-kit/core';
+export { createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, nodeAllowsRoles, visibleNav } from '@iris-ui-kit/core';
+import { resolveThemedIcon, defaultIconRegistry } from '@iris-ui-kit/icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+function IrisIcon({
+  name,
+  size = 24,
+  strokeWidth = 2,
+  fill = false,
+  title,
+  registry = defaultIconRegistry,
+  style,
+  ...rest
+}) {
+  const theme = useThemeOptional();
+  const icon = resolveThemedIcon(registry, name, theme);
+  if (!icon) return null;
+  const paint = fill ? { fill: "currentColor" } : {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon.viewBox ?? "0 0 24 24",
+      width: size,
+      height: size,
+      ...paint,
+      role: title ? "img" : void 0,
+      "aria-label": title || void 0,
+      "aria-hidden": title ? void 0 : true,
+      "data-iris-icon": name,
+      style: { display: "inline-block", verticalAlign: "middle", flexShrink: 0, ...style },
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        icon.nodes.map((node, i) => React6.createElement(node.tag, { key: i, ...node.attrs }))
+      ]
+    }
+  );
+}
+function IrisNavMenu({
+  items,
+  activeKey,
+  expandedKeys,
+  defaultExpandedKeys,
+  collapsed = false,
+  ariaLabel,
+  onSelect,
+  onExpandedKeysChange
+}) {
+  const { t } = useI18n();
+  const trailOf = React6.useCallback(
+    (key) => key ? branchTrail(items, key) : [],
+    [items]
+  );
+  const isControlled = expandedKeys !== void 0;
+  const modelRef = React6.useRef(null);
+  if (modelRef.current === null) {
+    modelRef.current = createExpansion({
+      mode: "multiple",
+      defaultExpanded: defaultExpandedKeys ?? trailOf(activeKey)
+    });
+  }
+  const model = modelRef.current;
+  const internalExpanded = useStore(model.store);
+  const expanded = isControlled ? expandedKeys : internalExpanded;
+  React6.useEffect(() => {
+    if (isControlled) return;
+    model.merge(trailOf(activeKey));
+  }, [activeKey, isControlled, model, trailOf]);
+  const setExpanded = (keys) => {
+    if (!isControlled) model.set(keys);
+    onExpandedKeysChange?.(keys);
+  };
+  const toggle = (key) => setExpanded(expanded.includes(key) ? expanded.filter((k) => k !== key) : [...expanded, key]);
+  const select = (node) => {
+    if (node.disabled) return;
+    onSelect?.(node.key, node);
+  };
+  const [hovered, setHovered] = React6.useState(null);
+  const tree = visibleNav(items);
+  const activePath = activeKey ? findNavPath(items, activeKey).map((n) => n.key) : [];
+  const itemStyle = (opts) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    boxSizing: "border-box",
+    border: "none",
+    borderRadius: "var(--iris-radius-md, 6px)",
+    background: opts.active ? "var(--iris-primary)" : opts.hovered && !opts.disabled ? "var(--iris-surface)" : "transparent",
+    color: opts.active ? "var(--iris-primary-foreground, #fff)" : opts.trail ? "var(--iris-primary)" : "var(--iris-foreground)",
+    font: "inherit",
+    fontSize: 14,
+    fontWeight: opts.active || opts.trail ? 600 : 400,
+    textAlign: "start",
+    cursor: opts.disabled ? "not-allowed" : "pointer",
+    opacity: opts.disabled ? 0.5 : 1,
+    padding: collapsed ? 10 : `8px 10px 8px ${12 + opts.depth * 16}px`,
+    justifyContent: collapsed ? "center" : "flex-start"
+  });
+  const iconNode = (node, size = 18) => node.icon ? /* @__PURE__ */ jsx(IrisIcon, { name: node.icon, size }) : null;
+  const badgeNode = (node) => node.badge !== void 0 && node.badge !== "" && !collapsed ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-iris-nav-badge": "",
+      style: {
+        marginInlineStart: "auto",
+        fontSize: 11,
+        lineHeight: 1,
+        padding: "2px 6px",
+        borderRadius: 999,
+        background: "var(--iris-danger, #e5484d)",
+        color: "#fff"
+      },
+      children: String(node.badge)
+    }
+  ) : null;
+  const hoverProps = (key) => ({
+    onMouseEnter: () => setHovered(key),
+    onMouseLeave: () => setHovered((h) => h === key ? null : h)
+  });
+  const renderCollapsed = (node) => {
+    const branch = isBranch(node);
+    const active = branch ? activePath.includes(node.key) : node.key === activeKey;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-iris-nav-item": "",
+        "data-key": node.key,
+        "data-active": active ? "true" : void 0,
+        "data-branch": branch ? "true" : void 0,
+        disabled: node.disabled,
+        title: node.title,
+        "aria-label": branch ? `${node.title} (section)` : node.title,
+        "aria-current": active && !branch ? "page" : void 0,
+        style: itemStyle({
+          depth: 0,
+          active,
+          trail: false,
+          disabled: !!node.disabled,
+          hovered: hovered === node.key
+        }),
+        ...hoverProps(node.key),
+        onClick: () => select(branch ? firstLeaf(node) : node),
+        children: iconNode(node, 20) ?? /* @__PURE__ */ jsx("span", { style: { fontWeight: 700 }, children: node.title.charAt(0) })
+      },
+      node.key
+    );
+  };
+  const renderItem = (node, depth) => {
+    const branch = isBranch(node);
+    const open = expanded.includes(node.key);
+    const active = node.key === activeKey;
+    const trail = branch && activePath.includes(node.key);
+    const row = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-iris-nav-item": "",
+        "data-key": node.key,
+        "data-branch": branch ? "true" : void 0,
+        "data-active": active ? "true" : void 0,
+        "data-open": branch && open ? "true" : void 0,
+        "data-depth": String(depth),
+        disabled: node.disabled,
+        "aria-expanded": branch ? open ? "true" : "false" : void 0,
+        "aria-current": active ? "page" : void 0,
+        style: itemStyle({
+          depth,
+          active,
+          trail,
+          disabled: !!node.disabled,
+          hovered: hovered === node.key
+        }),
+        ...hoverProps(node.key),
+        onClick: () => branch ? toggle(node.key) : select(node),
+        children: [
+          iconNode(node),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                flex: branch ? 1 : "0 1 auto",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: node.title
+            }
+          ),
+          badgeNode(node),
+          branch ? /* @__PURE__ */ jsx(
+            IrisIcon,
+            {
+              name: open ? "chevron-down" : "chevron-right",
+              size: 16,
+              style: { marginInlineStart: node.badge ? 6 : "auto", opacity: 0.6 }
+            }
+          ) : null
+        ]
+      }
+    );
+    if (!branch || !open) {
+      return /* @__PURE__ */ jsx("div", { "data-iris-nav-group": branch ? "" : void 0, children: row }, node.key);
+    }
+    return /* @__PURE__ */ jsxs("div", { "data-iris-nav-group": "", "data-open": "true", children: [
+      row,
+      /* @__PURE__ */ jsx("div", { "data-iris-nav-children": "", role: "group", children: (node.children ?? []).map((child) => renderItem(child, depth + 1)) })
+    ] }, node.key);
+  };
+  const onKeyDown = (e) => {
+    const root = e.currentTarget;
+    const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]"));
+    if (buttons.length === 0) return;
+    const idx = buttons.indexOf(document.activeElement);
+    const focusAt = (i) => buttons[(i + buttons.length) % buttons.length]?.focus();
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        return focusAt(idx < 0 ? 0 : idx + 1);
+      case "ArrowUp":
+        e.preventDefault();
+        return focusAt(idx < 0 ? buttons.length - 1 : idx - 1);
+      case "Home":
+        e.preventDefault();
+        return void buttons[0]?.focus();
+      case "End":
+        e.preventDefault();
+        return void buttons[buttons.length - 1]?.focus();
+    }
+    if (collapsed || idx < 0) return;
+    const key = buttons[idx]?.getAttribute("data-key");
+    if (!key) return;
+    const node = findNavNode(items, key);
+    if (e.key === "ArrowRight" && node && isBranch(node)) {
+      e.preventDefault();
+      if (!expanded.includes(key)) toggle(key);
+      else focusAt(idx + 1);
+    } else if (e.key === "ArrowLeft") {
+      if (node && isBranch(node) && expanded.includes(key)) {
+        e.preventDefault();
+        toggle(key);
+      } else {
+        const parentKey = findNavPath(items, key).at(-2)?.key;
+        if (parentKey) {
+          e.preventDefault();
+          buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-iris-nav-menu": "",
+      "data-collapsed": collapsed ? "true" : void 0,
+      "aria-label": ariaLabel ?? t("admin.nav"),
+      onKeyDown,
+      style: { display: "flex", flexDirection: "column", gap: 2 },
+      children: collapsed ? tree.map((node) => renderCollapsed(node)) : tree.map((node) => renderItem(node, 0))
+    }
+  );
+}
+var IrisBreadcrumb = React6.forwardRef(
+  function IrisBreadcrumb2({ separator = "/", children, ...rest }, ref) {
+    const { t } = useI18n();
+    const flat = React6.Children.toArray(children).filter(
+      (c) => React6.isValidElement(c)
+    );
+    const total = flat.length;
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ...rest,
+        ref,
+        "aria-label": t("breadcrumb.label"),
+        "data-iris-breadcrumb": "",
+        children: /* @__PURE__ */ jsx(
+          "ol",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              margin: 0,
+              padding: 0,
+              listStyle: "none",
+              fontSize: 14
+            },
+            children: flat.map((child, i) => {
+              const isLast = i === total - 1;
+              const itemNode = /* @__PURE__ */ jsx(
+                "li",
+                {
+                  "data-iris-breadcrumb-item": "",
+                  "data-iris-breadcrumb-last": isLast ? "true" : void 0,
+                  style: { display: "inline-flex", alignItems: "center" },
+                  children: React6.cloneElement(child, {
+                    isCurrent: isLast
+                  })
+                },
+                `item-${i}`
+              );
+              const sepNode = !isLast ? /* @__PURE__ */ jsx(
+                "li",
+                {
+                  "data-iris-breadcrumb-separator": "",
+                  "aria-hidden": "true",
+                  style: { color: "var(--iris-muted)", display: "inline-flex", alignItems: "center" },
+                  children: separator
+                },
+                `sep-${i}`
+              ) : null;
+              return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+                itemNode,
+                sepNode
+              ] }, `pair-${i}`);
+            })
+          }
+        )
+      }
+    );
+  }
+);
+var IrisBreadcrumbItem = React6.forwardRef(
+  function IrisBreadcrumbItem2({ href, isCurrent = false, style, children, ...rest }, ref) {
+    const baseStyle = {
+      color: isCurrent ? "var(--iris-muted)" : "var(--iris-primary)",
+      textDecoration: "none",
+      cursor: isCurrent ? "default" : href ? "pointer" : "default"
+    };
+    const common = {
+      ...rest,
+      "aria-current": isCurrent ? "page" : void 0,
+      "data-iris-breadcrumb-crumb": "",
+      style: { ...baseStyle, ...style }
+    };
+    if (href && !isCurrent) {
+      return /* @__PURE__ */ jsx("a", { ...common, ref, href, children });
+    }
+    return /* @__PURE__ */ jsx("span", { ...common, ref, children });
+  }
+);
+function IrisAdminBreadcrumb({
+  trail,
+  showIcon = true,
+  hideSingle = false,
+  separator = "/",
+  onSelect
+}) {
+  if (trail.length === 0 || hideSingle && trail.length === 1) return null;
+  return /* @__PURE__ */ jsx(IrisBreadcrumb, { separator, children: trail.map((node, i) => {
+    const last = i === trail.length - 1;
+    return /* @__PURE__ */ jsxs(
+      IrisBreadcrumbItem,
+      {
+        "data-iris-admin-crumb": "",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          cursor: last ? "default" : "pointer"
+        },
+        onClick: last ? void 0 : () => onSelect?.(node.key, node),
+        children: [
+          showIcon && node.icon ? /* @__PURE__ */ jsx(IrisIcon, { name: node.icon, size: 14, style: { marginInlineEnd: 4 } }) : null,
+          /* @__PURE__ */ jsx("span", { children: node.title })
+        ]
+      },
+      node.key
+    );
+  }) });
+}
+
+// src/admin/useTabsNav.ts
+function useTabsNav(nav) {
+  const state = useStore(nav.store);
+  return {
+    tabs: state.tabs,
+    activeKey: state.activeKey,
+    cacheKeys: state.tabs.map((t) => nav.cacheKey(t.key)),
+    open: nav.open,
+    activate: nav.activate,
+    close: nav.close,
+    closeOthers: nav.closeOthers,
+    closeAll: nav.closeAll,
+    closeLeft: nav.closeLeft,
+    closeRight: nav.closeRight,
+    refresh: nav.refresh,
+    setPinned: nav.setPinned,
+    cacheKey: nav.cacheKey
+  };
+}
+function useMachine(factory) {
+  const machine = useMemo(factory, []);
+  const state = useStore(machine.store);
+  return [state, machine.send];
+}
+var DropdownContext = React6.createContext(null);
+function useDropdownContext(componentName) {
+  const ctx = React6.useContext(DropdownContext);
+  if (!ctx) {
+    throw new Error(`[iris-ui] ${componentName} must be a descendant of <IrisDropdown>`);
+  }
+  return ctx;
+}
+function IrisDropdown({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom-start",
+  offset = 6,
+  children
+}) {
+  const isControlled = openProp !== void 0;
+  const [state, send] = useMachine(() => createFloatingMachine(defaultOpen ? "open" : "closed"));
+  const internalOpen = state.value === "open";
+  React6.useEffect(() => {
+    if (!isControlled) return;
+    const target = openProp ? "open" : "closed";
+    if (state.value !== target) {
+      send({ type: openProp ? "OPEN" : "CLOSE" });
+    }
+  }, [isControlled, openProp, state.value, send]);
+  const open = isControlled ? Boolean(openProp) : internalOpen;
+  const setOpen = React6.useCallback(
+    (next) => {
+      if (!isControlled) send({ type: next ? "OPEN" : "CLOSE" });
+      onOpenChange?.(next);
+    },
+    [isControlled, send, onOpenChange]
+  );
+  const triggerRef = React6.useRef(null);
+  const contentRef = React6.useRef(null);
+  const contentId = React6.useId();
+  const value = React6.useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef,
+      contentRef,
+      contentId,
+      placement,
+      offset
+    }),
+    [open, setOpen, contentId, placement, offset]
+  );
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children });
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(value);
+      else ref.current = value;
+    }
+  };
+}
+function isEventHandlerName(key) {
+  return /^on[A-Z]/.test(key);
+}
+function mergeSlotProps(slot, child) {
+  const merged = { ...slot };
+  for (const key of Object.keys(child)) {
+    const slotValue = slot[key];
+    const childValue = child[key];
+    if (key === "style") {
+      merged.style = {
+        ...slotValue ?? {},
+        ...childValue ?? {}
+      };
+    } else if (key === "className") {
+      merged.className = [slotValue, childValue].filter(Boolean).join(" ").trim() || void 0;
+    } else if (isEventHandlerName(key) && typeof slotValue === "function" && typeof childValue === "function") {
+      merged[key] = composeEventHandlers(
+        slotValue,
+        childValue
+      );
+    } else if (childValue !== void 0) {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+var IrisSlot = React6.forwardRef(function IrisSlot2({ children, ...slotProps }, forwardedRef) {
+  if (!React6.isValidElement(children)) return null;
+  const child = children;
+  const childProps = child.props ?? {};
+  const merged = mergeSlotProps(slotProps, childProps);
+  const childRef = child.ref ?? null;
+  if (forwardedRef || childRef) {
+    merged.ref = mergeRefs(
+      forwardedRef,
+      childRef
+    );
+  }
+  return React6.cloneElement(child, merged);
+});
+var IrisDropdownTrigger = React6.forwardRef(
+  function IrisDropdownTrigger2({ asChild = false, onClick, onKeyDown, children, ...rest }, forwardedRef) {
+    const ctx = useDropdownContext("IrisDropdownTrigger");
+    const captureRef = React6.useCallback(
+      (el) => {
+        ctx.triggerRef.current = el;
+        if (typeof forwardedRef === "function") forwardedRef(el);
+        else if (forwardedRef)
+          forwardedRef.current = el;
+      },
+      [ctx, forwardedRef]
+    );
+    const handleClick = composeEventHandlers(
+      onClick,
+      () => ctx.setOpen(!ctx.open)
+    );
+    const handleKeyDown = composeEventHandlers(
+      onKeyDown,
+      (e) => {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          ctx.setOpen(true);
+        }
+      }
+    );
+    const triggerProps = {
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx.open,
+      "aria-controls": ctx.contentId,
+      "data-state": ctx.open ? "open" : "closed",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown
+    };
+    if (asChild) {
+      if (!React6.isValidElement(children)) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn("[iris-ui] IrisDropdownTrigger asChild requires a single React element");
+        }
+        return null;
+      }
+      return /* @__PURE__ */ jsx(IrisSlot, { ref: captureRef, ...rest, ...triggerProps, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...rest,
+        ...triggerProps,
+        ref: captureRef,
+        children
+      }
+    );
+  }
+);
+var IrisDropdownMenu = React6.forwardRef(
+  function IrisDropdownMenu2({ portalTarget, style, onKeyDown, children, ...rest }, forwardedRef) {
+    const ctx = useDropdownContext("IrisDropdownMenu");
+    const innerRef = React6.useRef(null);
+    const captureRef = React6.useCallback(
+      (el) => {
+        innerRef.current = el;
+        ctx.contentRef.current = el;
+        if (typeof forwardedRef === "function") forwardedRef(el);
+        else if (forwardedRef)
+          forwardedRef.current = el;
+      },
+      [ctx, forwardedRef]
+    );
+    const { floatingStyles } = useFloating({
+      anchor: ctx.triggerRef,
+      floating: innerRef,
+      open: ctx.open,
+      placement: ctx.placement,
+      offset: ctx.offset
+    });
+    useDismiss({
+      enabled: ctx.open,
+      exclude: [ctx.triggerRef, ctx.contentRef],
+      onDismiss: () => ctx.setOpen(false)
+    });
+    const wasOpenRef = React6.useRef(false);
+    React6.useEffect(() => {
+      if (ctx.open && !wasOpenRef.current) {
+        queueMicrotask(() => {
+          const items = innerRef.current?.querySelectorAll('[role="menuitem"]');
+          items?.[0]?.focus();
+        });
+      } else if (!ctx.open && wasOpenRef.current) {
+        ctx.triggerRef.current?.focus?.();
+      }
+      wasOpenRef.current = ctx.open;
+    }, [ctx.open, ctx.triggerRef]);
+    const typeaheadRef = React6.useRef({ buffer: "", timer: null });
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!ctx.open) return;
+      const items = Array.from(
+        innerRef.current?.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        ) ?? []
+      );
+      if (items.length === 0) return;
+      const current = document.activeElement;
+      const index = current ? items.indexOf(current) : -1;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = index < 0 ? 0 : (index + 1) % items.length;
+          items[next]?.focus();
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const next = index <= 0 ? items.length - 1 : index - 1;
+          items[next]?.focus();
+          break;
+        }
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+        case "Tab":
+          ctx.setOpen(false);
+          break;
+        default: {
+          if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+            const ta = typeaheadRef.current;
+            ta.buffer += e.key;
+            if (ta.timer) clearTimeout(ta.timer);
+            ta.timer = setTimeout(() => {
+              ta.buffer = "";
+            }, 500);
+            const match = matchTypeahead(
+              items.map((it) => it.textContent ?? ""),
+              ta.buffer,
+              index
+            );
+            if (match >= 0) {
+              e.preventDefault();
+              items[match]?.focus();
+            }
+          }
+        }
+      }
+    };
+    if (!ctx.open) return null;
+    const node = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref: captureRef,
+        id: ctx.contentId,
+        role: "menu",
+        tabIndex: -1,
+        "data-iris-dropdown-menu": "",
+        "data-state": "open",
+        onKeyDown: handleKeyDown,
+        style: {
+          ...floatingStyles,
+          background: "var(--iris-surface)",
+          color: "var(--iris-foreground)",
+          border: "1px solid var(--iris-border)",
+          borderRadius: "var(--iris-radius-md, 6px)",
+          padding: "var(--iris-padding-sm, 4px)",
+          boxShadow: "0 8px 24px -8px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.08)",
+          minWidth: 160,
+          outline: "none",
+          zIndex: 1e3,
+          ...style
+        },
+        children
+      }
+    );
+    if (portalTarget === false) return node;
+    if (typeof document === "undefined") return null;
+    return createPortal(node, portalTarget ?? document.body);
+  }
+);
+var IrisDropdownItem = React6.forwardRef(
+  function IrisDropdownItem2({ disabled = false, keepOpen = false, onSelect, onClick, onKeyDown, style, children, ...rest }, ref) {
+    const ctx = useDropdownContext("IrisDropdownItem");
+    const [hovered, setHovered] = React6.useState(false);
+    const fire = (event) => {
+      if (disabled) return;
+      onSelect?.(event);
+      if (!keepOpen) ctx.setOpen(false);
+    };
+    const handleClick = composeEventHandlers(
+      onClick,
+      (e) => fire(e)
+    );
+    const handleKeyDown = composeEventHandlers(
+      onKeyDown,
+      (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          fire(e);
+        }
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        role: "menuitem",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled ? "true" : void 0,
+        "data-iris-dropdown-item": "",
+        "data-disabled": disabled ? "" : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onPointerEnter: () => setHovered(true),
+        onPointerLeave: () => setHovered(false),
+        onFocus: () => setHovered(true),
+        onBlur: () => setHovered(false),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--iris-gap-sm, 6px)",
+          padding: "6px var(--iris-padding-md, 12px)",
+          borderRadius: "var(--iris-radius-sm, 4px)",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          background: hovered && !disabled ? "var(--iris-surface-hover)" : "transparent",
+          color: "inherit",
+          outline: "none",
+          fontSize: 14,
+          transition: "background-color 80ms ease",
+          ...style
+        },
+        children
+      }
+    );
+  }
+);
+var IrisDropdownSeparator = React6.forwardRef(
+  function IrisDropdownSeparator2({ style, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        role: "separator",
+        "data-iris-dropdown-separator": "",
+        style: {
+          height: 1,
+          background: "var(--iris-border)",
+          margin: "4px 0",
+          ...style
+        }
+      }
+    );
+  }
+);
+function IrisAdminTabs({
+  nav,
+  onChange,
+  onClose,
+  onRefresh
+}) {
+  const t = useTabsNav(nav);
+  const { t: translate } = useI18n();
+  const tablistRef = React6.useRef(null);
+  const pendingFocus = React6.useRef(null);
+  React6.useEffect(() => {
+    if (!pendingFocus.current) return;
+    const key = pendingFocus.current;
+    pendingFocus.current = null;
+    tablistRef.current?.querySelectorAll("[data-iris-tab-label]").forEach((el) => {
+      if (el.getAttribute("data-key") === key) el.focus();
+    });
+  });
+  const activate = (key) => {
+    nav.activate(key);
+    onChange?.(key);
+  };
+  const close = (key) => {
+    nav.close(key);
+    onClose?.(key);
+  };
+  const refresh = (key) => {
+    nav.refresh(key);
+    onRefresh?.(key);
+  };
+  const onKeyDown = (e) => {
+    const tabs = t.tabs;
+    const idx = tabs.findIndex((x) => x.key === t.activeKey);
+    if (idx < 0 || tabs.length === 0) return;
+    if (e.key === "Delete" || e.key === "Backspace") {
+      const cur = tabs[idx];
+      if (cur && isClosable(cur)) {
+        e.preventDefault();
+        close(cur.key);
+        pendingFocus.current = nav.getState().activeKey ?? null;
+      }
+      return;
+    }
+    let target = -1;
+    if (e.key === "ArrowRight") target = (idx + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") target = (idx - 1 + tabs.length) % tabs.length;
+    else if (e.key === "Home") target = 0;
+    else if (e.key === "End") target = tabs.length - 1;
+    else return;
+    e.preventDefault();
+    const key = tabs[target]?.key;
+    if (!key) return;
+    activate(key);
+    pendingFocus.current = key;
+  };
+  const chip = (tab) => {
+    const active = tab.key === t.activeKey;
+    const closable = isClosable(tab);
+    const label = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "data-iris-tab-label": "",
+        "data-key": tab.key,
+        "aria-selected": active ? "true" : "false",
+        "aria-current": active ? "page" : void 0,
+        tabIndex: active ? 0 : -1,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          border: "none",
+          background: "transparent",
+          color: "inherit",
+          font: "inherit",
+          fontSize: 13,
+          cursor: "pointer",
+          padding: 0
+        },
+        onClick: () => activate(tab.key),
+        children: [
+          tab.icon ? /* @__PURE__ */ jsx(IrisIcon, { name: tab.icon, size: 14 }) : null,
+          /* @__PURE__ */ jsx("span", { style: { whiteSpace: "nowrap" }, children: tab.title })
+        ]
+      }
+    );
+    const closeBtn = closable ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "data-iris-tab-close": "",
+        "aria-label": translate("admin.closeTab", { title: tab.title }),
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 16,
+          height: 16,
+          border: "none",
+          borderRadius: 4,
+          background: "transparent",
+          color: "inherit",
+          cursor: "pointer",
+          padding: 0,
+          opacity: 0.6
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          close(tab.key);
+        },
+        children: /* @__PURE__ */ jsx(IrisIcon, { name: "x", size: 12 })
+      }
+    ) : tab.pinned ? /* @__PURE__ */ jsx(IrisIcon, { name: "check-circle", size: 12, style: { opacity: 0.5 } }) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-iris-tab": "",
+        "data-active": active ? "true" : void 0,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "5px 8px 5px 10px",
+          borderRadius: "var(--iris-radius-md, 6px)",
+          border: `1px solid ${active ? "var(--iris-primary)" : "var(--iris-border)"}`,
+          background: active ? "var(--iris-primary)" : "var(--iris-surface)",
+          color: active ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
+          flex: "0 0 auto"
+        },
+        children: [
+          label,
+          closeBtn
+        ]
+      },
+      tab.key
+    );
+  };
+  const activeKey = t.activeKey;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-iris-admin-tabs": "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "6px 10px",
+        borderBottom: "1px solid var(--iris-border)",
+        background: "var(--iris-background)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tablistRef,
+            "data-iris-tabs-scroll": "",
+            role: "tablist",
+            "aria-label": translate("admin.openPages"),
+            onKeyDown,
+            style: { display: "flex", alignItems: "center", gap: 6, overflowX: "auto", flex: 1 },
+            children: t.tabs.map((tab) => chip(tab))
+          }
+        ),
+        /* @__PURE__ */ jsxs(IrisDropdown, { children: [
+          /* @__PURE__ */ jsx(
+            IrisDropdownTrigger,
+            {
+              "aria-label": translate("admin.tabActions"),
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 28,
+                height: 28,
+                borderRadius: "var(--iris-radius-md, 6px)",
+                border: "1px solid var(--iris-border)",
+                background: "var(--iris-surface)",
+                color: "var(--iris-foreground)",
+                cursor: "pointer"
+              },
+              children: /* @__PURE__ */ jsx(IrisIcon, { name: "more-horizontal", size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(IrisDropdownMenu, { children: activeKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(IrisDropdownItem, { onSelect: () => refresh(activeKey), children: translate("admin.refresh") }),
+            /* @__PURE__ */ jsx(IrisDropdownItem, { onSelect: () => close(activeKey), children: translate("admin.close") }),
+            /* @__PURE__ */ jsx(IrisDropdownSeparator, {}),
+            /* @__PURE__ */ jsx(IrisDropdownItem, { onSelect: () => nav.closeOthers(activeKey), children: translate("admin.closeOthers") }),
+            /* @__PURE__ */ jsx(IrisDropdownItem, { onSelect: () => nav.closeAll(), children: translate("admin.closeAll") })
+          ] }) : /* @__PURE__ */ jsx(IrisDropdownItem, { disabled: true, children: "No active tab" }) })
+        ] })
+      ]
+    }
+  );
+}
+function useAdminShell(config) {
+  const { menus, activeKey, defaultActiveKey, onActiveKeyChange, onSelect, tabs } = config;
+  const activeControlled = activeKey !== void 0;
+  const latest = React6.useRef({ onActiveKeyChange, onSelect });
+  latest.current = { onActiveKeyChange, onSelect };
+  const shellRef = React6.useRef(null);
+  if (shellRef.current === null) {
+    shellRef.current = createAdminShell({
+      menus,
+      defaultActiveKey: activeKey ?? defaultActiveKey,
+      tabs,
+      onActiveChange: (key, node) => {
+        latest.current.onActiveKeyChange?.(key);
+        if (node) latest.current.onSelect?.(key, node);
+      }
+    });
+  }
+  const shell = shellRef.current;
+  const state = useStore(shell.store);
+  React6.useEffect(() => {
+    shell.setMenus(menus);
+  }, [shell, menus]);
+  React6.useEffect(() => {
+    if (activeControlled && shell.getActiveKey() !== (activeKey ?? null)) {
+      shell.store.setState({ activeKey: activeKey ?? null });
+    }
+  });
+  const current = activeControlled ? activeKey ?? "" : state.activeKey ?? "";
+  return {
+    activeKey: current,
+    navigate: shell.navigate,
+    syncFromTab: shell.syncFromTab,
+    breadcrumb: current ? findNavPath(menus, current) : []
+  };
+}
+function TabsSync({
+  nav,
+  activeKey,
+  onActivate
+}) {
+  const state = useStore(nav.store);
+  React6.useEffect(() => {
+    if (state.activeKey && state.activeKey !== activeKey) onActivate(state.activeKey);
+  }, [state.activeKey, activeKey, onActivate]);
+  return null;
+}
+function IrisAdminLayout({
+  menus,
+  activeKey,
+  defaultActiveKey,
+  onActiveKeyChange,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  mode = "sidebar",
+  appTitle = "Iris Admin",
+  tabs,
+  showBreadcrumb = true,
+  sidebarWidth = 240,
+  collapsedWidth = 64,
+  logo,
+  toolbar,
+  footer,
+  onSelect,
+  children
+}) {
+  const { t } = useI18n();
+  const {
+    activeKey: currentActive,
+    navigate,
+    syncFromTab,
+    breadcrumb: trail
+  } = useAdminShell({ menus, activeKey, defaultActiveKey, onActiveKeyChange, onSelect, tabs });
+  const collapseControlled = collapsed !== void 0;
+  const [internalCollapsed, setInternalCollapsed] = React6.useState(defaultCollapsed);
+  const currentCollapsed = collapseControlled ? collapsed : internalCollapsed;
+  const setCollapsed = React6.useCallback(
+    (next) => {
+      if (!collapseControlled) setInternalCollapsed(next);
+      onCollapsedChange?.(next);
+    },
+    [collapseControlled, onCollapsedChange]
+  );
+  const handleSelect = (_key, node) => navigate(node);
+  const renderContent = () => typeof children === "function" ? children({ activeKey: currentActive }) : children;
+  if (mode === "full-content") {
+    return /* @__PURE__ */ jsx("div", { "data-iris-admin-layout": "", "data-mode": "full-content", style: { height: "100%" }, children: renderContent() });
+  }
+  const defaultLogo = (state) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-iris-admin-logo": "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        height: 52,
+        padding: "0 16px",
+        color: "var(--iris-foreground)",
+        fontWeight: 700,
+        fontSize: 16,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 28,
+              height: 28,
+              borderRadius: "var(--iris-radius-md, 6px)",
+              background: "var(--iris-primary)",
+              color: "var(--iris-primary-foreground, #fff)",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx(IrisIcon, { name: "menu", size: 18 })
+          }
+        ),
+        state.collapsed ? null : /* @__PURE__ */ jsx("span", { children: appTitle })
+      ]
+    }
+  );
+  const renderLogo = (state) => typeof logo === "function" ? logo(state) : logo ?? defaultLogo(state);
+  const collapseToggle = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-iris-admin-collapse": "",
+      "aria-label": currentCollapsed ? t("admin.expandSidebar") : t("admin.collapseSidebar"),
+      "aria-pressed": currentCollapsed ? "true" : "false",
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 32,
+        height: 32,
+        border: "none",
+        borderRadius: "var(--iris-radius-md, 6px)",
+        background: "transparent",
+        color: "var(--iris-foreground)",
+        cursor: "pointer",
+        flexShrink: 0
+      },
+      onClick: () => setCollapsed(!currentCollapsed),
+      children: /* @__PURE__ */ jsx(IrisIcon, { name: currentCollapsed ? "chevron-right" : "menu", size: 18 })
+    }
+  );
+  const headerBar = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-iris-admin-headerbar": "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        height: 52,
+        padding: "0 16px",
+        borderBottom: "1px solid var(--iris-border)",
+        background: "var(--iris-background)"
+      },
+      children: [
+        collapseToggle,
+        showBreadcrumb ? /* @__PURE__ */ jsx(IrisAdminBreadcrumb, { trail, onSelect: handleSelect }) : null,
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        toolbar ? /* @__PURE__ */ jsx("div", { "data-iris-admin-toolbar": "", style: { display: "flex", alignItems: "center", gap: 8 }, children: toolbar }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    IrisSidebarLayout,
+    {
+      "data-iris-admin-layout": "",
+      "data-mode": "sidebar",
+      collapsed: currentCollapsed,
+      onCollapsedChange: setCollapsed,
+      width: sidebarWidth,
+      collapsedWidth,
+      style: { height: "100vh" },
+      sidebar: (state) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-iris-admin-sidebar": "",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            borderInlineEnd: "1px solid var(--iris-border)",
+            background: "var(--iris-surface)"
+          },
+          children: [
+            renderLogo(state),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", overflowX: "hidden", padding: 8 }, children: /* @__PURE__ */ jsx(
+              IrisNavMenu,
+              {
+                items: menus,
+                activeKey: currentActive,
+                collapsed: state.collapsed,
+                onSelect: handleSelect
+              }
+            ) })
+          ]
+        }
+      ),
+      children: [
+        tabs ? /* @__PURE__ */ jsx(TabsSync, { nav: tabs, activeKey: currentActive, onActivate: syncFromTab }) : null,
+        /* @__PURE__ */ jsx(
+          IrisHeaderLayout,
+          {
+            sticky: true,
+            header: /* @__PURE__ */ jsxs("div", { "data-iris-admin-header": "", children: [
+              headerBar,
+              tabs ? /* @__PURE__ */ jsx(IrisAdminTabs, { nav: tabs }) : null
+            ] }),
+            footer,
+            children: /* @__PURE__ */ jsx("div", { "data-iris-admin-content": "", style: { padding: 16 }, children: renderContent() })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { DropdownContext, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, IrisSlot, useAdminShell, useDropdownContext, useMachine, useTabsNav };
+//# sourceMappingURL=chunk-VWCJJRSC.js.map
+//# sourceMappingURL=chunk-VWCJJRSC.js.map