@iris-ui-kit/react 0.1.0 → 0.2.0

package/dist/chunk-K2F7SC2T.js

@@ -0,0 +1,107 @@
+'use client'
+import * as React from 'react';
+import { createSortable } from '@iris-ui-kit/core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/behaviors/Sortable.tsx
+var SORTABLE_ITEM_ATTR = "data-iris-sortable-item";
+function IrisSortable({
+  items,
+  onReorder,
+  getKey = (_item, index) => String(index),
+  disabled = false,
+  orientation = "vertical",
+  style,
+  className,
+  children,
+  ...rest
+}) {
+  const containerRef = React.useRef(null);
+  const ctrlRef = React.useRef(null);
+  if (ctrlRef.current === null) ctrlRef.current = createSortable();
+  const ctrl = ctrlRef.current;
+  const [state, setState] = React.useState({ activeId: null, overId: null });
+  React.useEffect(() => ctrl.subscribe(setState), [ctrl]);
+  const dragging = state.activeId;
+  const indexByKey = (key) => Array.from(containerRef.current?.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`) ?? []).findIndex(
+    (el) => el.getAttribute(SORTABLE_ITEM_ATTR) === key
+  );
+  const onPointerDown = (e) => {
+    if (disabled) return;
+    const target = e.target.closest(`[${SORTABLE_ITEM_ATTR}]`);
+    if (!target) return;
+    const key = target.getAttribute(SORTABLE_ITEM_ATTR) ?? "";
+    if (!key) return;
+    ctrl.press(key, e.clientX, e.clientY);
+  };
+  const onPointerMove = (e) => {
+    if (!ctrl.getState().activeId) {
+      if (!ctrl.tryStart(e.clientX, e.clientY)) return;
+    }
+    const els = containerRef.current?.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`);
+    const rects = Array.from(els ?? []).map((el) => ({
+      id: el.getAttribute(SORTABLE_ITEM_ATTR) ?? "",
+      ...el.getBoundingClientRect()
+    }));
+    ctrl.moveOver({ x: e.clientX, y: e.clientY }, rects);
+  };
+  const onPointerUp = () => {
+    const result = ctrl.end();
+    if (result.activeId && result.overId && result.activeId !== result.overId) {
+      const from = indexByKey(result.activeId);
+      const to = indexByKey(result.overId);
+      if (from >= 0 && to >= 0 && from !== to) {
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        onReorder(next);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      "data-iris-sortable": "",
+      "data-state": dragging ? "dragging" : "idle",
+      className,
+      style: {
+        display: "flex",
+        flexDirection: orientation === "horizontal" ? "row" : "column",
+        gap: "var(--iris-gap-sm, 4px)",
+        opacity: disabled ? 0.6 : 1,
+        userSelect: dragging ? "none" : void 0,
+        ...style
+      },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerLeave: onPointerUp,
+      children: React.Children.map(children, (child, index) => {
+        if (!React.isValidElement(child)) return child;
+        const key = getKey(items[index], index);
+        const isDragging = key === dragging;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-iris-sortable-item": key,
+            "data-iris-sortable-dragging": isDragging ? "" : void 0,
+            style: {
+              transition: isDragging ? "none" : "transform 150ms ease",
+              opacity: isDragging ? 0.4 : 1,
+              position: "relative",
+              zIndex: isDragging ? 100 : void 0
+            },
+            children: child
+          },
+          key
+        );
+      })
+    }
+  );
+}
+
+export { IrisSortable, SORTABLE_ITEM_ATTR };
+//# sourceMappingURL=chunk-K2F7SC2T.js.map
+//# sourceMappingURL=chunk-K2F7SC2T.js.map

package/dist/chunk-K2F7SC2T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/behaviors/Sortable.tsx"],"names":[],"mappings":"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","file":"chunk-K2F7SC2T.js","sourcesContent":["/**\n * Behavior wrapper: makes a list of items sortable via drag-and-drop.\n * Uses `createSortable` from `@iris-ui-kit/core` for the drag-and-drop controller.\n *\n * @example\n *   const [items, setItems] = React.useState(['A', 'B', 'C'])\n *   <IrisSortable items={items} onReorder={setItems}>\n *     {items.map((label) => <div key={label}>{label}</div>)}\n *   </IrisSortable>\n */\nimport * as React from 'react'\nimport { createSortable, type SortableState } from '@iris-ui-kit/core'\n\nexport interface IrisSortableProps<T = string> {\n  items: readonly T[]\n  onReorder: (next: T[]) => void\n  getKey?: (item: T, index: number) => string\n  children?: React.ReactNode\n  className?: string\n  style?: React.CSSProperties\n  disabled?: boolean\n  orientation?: 'vertical' | 'horizontal'\n}\n\nexport const SORTABLE_ITEM_ATTR = 'data-iris-sortable-item'\n\nexport function IrisSortable<T>({\n  items,\n  onReorder,\n  getKey = (_item, index) => String(index),\n  disabled = false,\n  orientation = 'vertical',\n  style,\n  className,\n  children,\n  ...rest\n}: IrisSortableProps<T> &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>): React.ReactElement {\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n  const ctrlRef = React.useRef<ReturnType<typeof createSortable> | null>(null)\n  if (ctrlRef.current === null) ctrlRef.current = createSortable()\n  const ctrl = ctrlRef.current\n\n  const [state, setState] = React.useState<SortableState>({ activeId: null, overId: null })\n  React.useEffect(() => ctrl.subscribe(setState), [ctrl])\n\n  const dragging = state.activeId\n\n  const indexByKey = (key: string): number =>\n    Array.from(containerRef.current?.querySelectorAll(`[${SORTABLE_ITEM_ATTR}]`) ?? []).findIndex(\n      (el) => el.getAttribute(SORTABLE_ITEM_ATTR) === key,\n    )\n\n  const onPointerDown = (e: React.PointerEvent<HTMLElement>): void => {\n    if (disabled) return\n    const target = (e.target as HTMLElement).closest(`[${SORTABLE_ITEM_ATTR}]`)\n    if (!target) return\n    const key = target.getAttribute(SORTABLE_ITEM_ATTR) ?? ''\n    if (!key) return\n    ctrl.press(key, e.clientX, e.clientY)\n  }\n\n  const onPointerMove = (e: React.PointerEvent<HTMLElement>): void => {\n    if (!ctrl.getState().activeId) {\n      // Pending press — promote if past threshold\n      if (!ctrl.tryStart(e.clientX, e.clientY)) return\n    }\n    const els = containerRef.current?.querySelectorAll<HTMLElement>(`[${SORTABLE_ITEM_ATTR}]`)\n    const rects = Array.from(els ?? []).map((el) => ({\n      id: el.getAttribute(SORTABLE_ITEM_ATTR) ?? '',\n      ...el.getBoundingClientRect(),\n    }))\n    ctrl.moveOver({ x: e.clientX, y: e.clientY }, rects)\n  }\n\n  const onPointerUp = (): void => {\n    const result = ctrl.end()\n    if (result.activeId && result.overId && result.activeId !== result.overId) {\n      const from = indexByKey(result.activeId)\n      const to = indexByKey(result.overId)\n      if (from >= 0 && to >= 0 && from !== to) {\n        const next = [...items]\n        const [moved] = next.splice(from, 1)\n        next.splice(to, 0, moved!)\n        onReorder(next)\n      }\n    }\n  }\n\n  return (\n    <div\n      {...rest}\n      ref={containerRef}\n      data-iris-sortable=\"\"\n      data-state={dragging ? 'dragging' : 'idle'}\n      className={className}\n      style={{\n        display: 'flex',\n        flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n        gap: 'var(--iris-gap-sm, 4px)',\n        opacity: disabled ? 0.6 : 1,\n        userSelect: dragging ? 'none' : undefined,\n        ...style,\n      }}\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      onPointerLeave={onPointerUp}\n    >\n      {React.Children.map(children, (child, index) => {\n        if (!React.isValidElement(child)) return child\n        const key = getKey(items[index]!, index)\n        const isDragging = key === dragging\n        return (\n          <div\n            key={key}\n            data-iris-sortable-item={key}\n            data-iris-sortable-dragging={isDragging ? '' : undefined}\n            style={{\n              transition: isDragging ? 'none' : 'transform 150ms ease',\n              opacity: isDragging ? 0.4 : 1,\n              position: 'relative',\n              zIndex: isDragging ? 100 : undefined,\n            }}\n          >\n            {child}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n"]}

package/dist/{chunk-VWCJJRSC.js → chunk-XVXURJZQ.js}

@@ -1,13 +1,14 @@
 'use client'
 import { useThemeOptional } from './chunk-XCK4RIXB.js';
-import { IrisSidebarLayout, IrisHeaderLayout } from './chunk-J5FB2UB2.js';
+import { IrisHeaderLayout, IrisSidebarLayout } from './chunk-J5FB2UB2.js';
+import { IrisSortable } from './chunk-K2F7SC2T.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';
+export { createAdminPreferences, createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, localStorageAdminPreferencesStorage, 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';
@@ -59,11 +60,13 @@ function IrisNavMenu({
   expandedKeys,
   defaultExpandedKeys,
   collapsed = false,
+  orientation = "vertical",
   ariaLabel,
   onSelect,
   onExpandedKeysChange
 }) {
   const { t } = useI18n();
+  const horizontal = orientation === "horizontal";
   const trailOf = React6.useCallback(
     (key) => key ? branchTrail(items, key) : [],
     [items]
@@ -99,7 +102,7 @@ function IrisNavMenu({
     display: "flex",
     alignItems: "center",
     gap: 10,
-    width: "100%",
+    width: horizontal && opts.depth === 0 ? "auto" : "100%",
     boxSizing: "border-box",
     border: "none",
     borderRadius: "var(--iris-radius-md, 6px)",
@@ -111,7 +114,8 @@ function IrisNavMenu({
     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`,
+    padding: collapsed ? 10 : "8px 10px",
+    paddingInlineStart: collapsed ? 10 : 12 + opts.depth * 16,
     justifyContent: collapsed ? "center" : "flex-start"
   });
   const iconNode = (node, size = 18) => node.icon ? /* @__PURE__ */ jsx(IrisIcon, { name: node.icon, size }) : null;
@@ -218,12 +222,48 @@ function IrisNavMenu({
       }
     );
     if (!branch || !open) {
-      return /* @__PURE__ */ jsx("div", { "data-iris-nav-group": branch ? "" : void 0, children: row }, node.key);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-iris-nav-group": branch ? "" : void 0,
+          style: { position: horizontal && depth === 0 ? "relative" : 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);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-iris-nav-group": "",
+        "data-open": "true",
+        style: { position: horizontal && depth === 0 ? "relative" : void 0 },
+        children: [
+          row,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-iris-nav-children": "",
+              role: "group",
+              style: horizontal && depth === 0 ? {
+                position: "absolute",
+                insetBlockStart: "calc(100% + 4px)",
+                insetInlineStart: 0,
+                zIndex: 60,
+                minWidth: 220,
+                padding: 6,
+                border: "1px solid var(--iris-border)",
+                borderRadius: "var(--iris-radius-md, 6px)",
+                background: "var(--iris-surface)",
+                boxShadow: "var(--iris-shadow-md)"
+              } : void 0,
+              children: (node.children ?? []).map((child) => renderItem(child, depth + 1))
+            }
+          )
+        ]
+      },
+      node.key
+    );
   };
   const onKeyDown = (e) => {
     const root = e.currentTarget;
@@ -271,9 +311,15 @@ function IrisNavMenu({
     {
       "data-iris-nav-menu": "",
       "data-collapsed": collapsed ? "true" : void 0,
+      "data-orientation": orientation,
       "aria-label": ariaLabel ?? t("admin.nav"),
       onKeyDown,
-      style: { display: "flex", flexDirection: "column", gap: 2 },
+      style: {
+        display: "flex",
+        flexDirection: horizontal ? "row" : "column",
+        alignItems: horizontal ? "center" : void 0,
+        gap: 2
+      },
       children: collapsed ? tree.map((node) => renderCollapsed(node)) : tree.map((node) => renderItem(node, 0))
     }
   );
@@ -404,6 +450,7 @@ function useTabsNav(nav) {
     closeRight: nav.closeRight,
     refresh: nav.refresh,
     setPinned: nav.setPinned,
+    move: nav.move,
     cacheKey: nav.cacheKey
   };
 }
@@ -775,7 +822,9 @@ function IrisAdminTabs({
   nav,
   onChange,
   onClose,
-  onRefresh
+  onRefresh,
+  reorderable = true,
+  onReorder
 }) {
   const t = useTabsNav(nav);
   const { t: translate } = useI18n();
@@ -801,6 +850,10 @@ function IrisAdminTabs({
     nav.refresh(key);
     onRefresh?.(key);
   };
+  const reorder = (tabs) => {
+    tabs.forEach((tab, index) => nav.move(tab.key, index));
+    onReorder?.(tabs);
+  };
   const onKeyDown = (e) => {
     const tabs = t.tabs;
     const idx = tabs.findIndex((x) => x.key === t.activeKey);
@@ -932,8 +985,19 @@ function IrisAdminTabs({
             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))
+            style: { overflowX: "auto", flex: 1 },
+            children: /* @__PURE__ */ jsx(
+              IrisSortable,
+              {
+                items: t.tabs,
+                getKey: (tab) => tab.key,
+                onReorder: reorder,
+                disabled: !reorderable,
+                orientation: "horizontal",
+                style: { alignItems: "center", gap: 6, width: "max-content" },
+                children: t.tabs.map((tab) => chip(tab))
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxs(IrisDropdown, { children: [
@@ -960,6 +1024,8 @@ function IrisAdminTabs({
             /* @__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.closeLeft(activeKey), children: translate("admin.closeLeft") }),
+            /* @__PURE__ */ jsx(IrisDropdownItem, { onSelect: () => nav.closeRight(activeKey), children: translate("admin.closeRight") }),
             /* @__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" }) })
@@ -1025,7 +1091,13 @@ function IrisAdminLayout({
   mode = "sidebar",
   appTitle = "Iris Admin",
   tabs,
+  showTabs = true,
   showBreadcrumb = true,
+  stickyHeader = true,
+  stickyTabs = true,
+  menuAlign = "start",
+  contentWidth = "fluid",
+  contentHeight = "viewport",
   sidebarWidth = 240,
   collapsedWidth = 64,
   logo,
@@ -1096,6 +1168,37 @@ function IrisAdminLayout({
     }
   );
   const renderLogo = (state) => typeof logo === "function" ? logo(state) : logo ?? defaultLogo(state);
+  const tabsBar = tabs && showTabs ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-iris-admin-tabs-region": "",
+      "data-sticky": stickyTabs ? "true" : void 0,
+      style: {
+        position: stickyTabs && !stickyHeader ? "sticky" : "relative",
+        top: 0,
+        zIndex: 49
+      },
+      children: /* @__PURE__ */ jsx(IrisAdminTabs, { nav: tabs })
+    }
+  ) : null;
+  const contentRegion = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-iris-admin-content": "",
+      "data-width": contentWidth,
+      style: {
+        boxSizing: "border-box",
+        width: "100%",
+        maxWidth: contentWidth === "centered" ? "72rem" : void 0,
+        marginInline: contentWidth === "centered" ? "auto" : void 0,
+        padding: 16
+      },
+      children: [
+        mode === "horizontal" && showBreadcrumb ? /* @__PURE__ */ jsx(IrisAdminBreadcrumb, { trail, onSelect: handleSelect }) : null,
+        renderContent()
+      ]
+    }
+  );
   const collapseToggle = /* @__PURE__ */ jsx(
     "button",
     {
@@ -1141,6 +1244,75 @@ function IrisAdminLayout({
       ]
     }
   );
+  if (mode === "horizontal") {
+    const justifyContent = menuAlign === "center" ? "center" : menuAlign === "end" ? "flex-end" : "flex-start";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-iris-admin-layout": "",
+        "data-mode": "horizontal",
+        style: {
+          height: contentHeight === "viewport" ? "100vh" : "auto",
+          minHeight: "100vh"
+        },
+        children: [
+          tabs ? /* @__PURE__ */ jsx(TabsSync, { nav: tabs, activeKey: currentActive, onActivate: syncFromTab }) : null,
+          /* @__PURE__ */ jsx(
+            IrisHeaderLayout,
+            {
+              sticky: stickyHeader,
+              footer,
+              header: /* @__PURE__ */ jsxs("div", { "data-iris-admin-header": "", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-iris-admin-headerbar": "",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 12,
+                      minHeight: 52,
+                      padding: "0 16px",
+                      background: "var(--iris-background)"
+                    },
+                    children: [
+                      renderLogo({ collapsed: false }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          "data-iris-admin-topnav": "",
+                          style: { display: "flex", flex: 1, minWidth: 0, justifyContent },
+                          children: /* @__PURE__ */ jsx(
+                            IrisNavMenu,
+                            {
+                              items: menus,
+                              activeKey: currentActive,
+                              orientation: "horizontal",
+                              onSelect: handleSelect
+                            }
+                          )
+                        }
+                      ),
+                      toolbar ? /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          "data-iris-admin-toolbar": "",
+                          style: { display: "flex", alignItems: "center", gap: 8 },
+                          children: toolbar
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                tabsBar
+              ] }),
+              children: contentRegion
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     IrisSidebarLayout,
     {
@@ -1181,20 +1353,34 @@ function IrisAdminLayout({
         /* @__PURE__ */ jsx(
           IrisHeaderLayout,
           {
-            sticky: true,
+            sticky: stickyHeader,
             header: /* @__PURE__ */ jsxs("div", { "data-iris-admin-header": "", children: [
               headerBar,
-              tabs ? /* @__PURE__ */ jsx(IrisAdminTabs, { nav: tabs }) : null
+              tabsBar
             ] }),
             footer,
-            children: /* @__PURE__ */ jsx("div", { "data-iris-admin-content": "", style: { padding: 16 }, children: renderContent() })
+            children: contentRegion
           }
         )
       ]
     }
   );
 }
+function useAdminPreferences(preferences, hydrate = true) {
+  const state = useStore(preferences.store);
+  React6.useEffect(() => {
+    if (hydrate) void preferences.hydrate();
+  }, [hydrate, preferences]);
+  return {
+    state,
+    set: preferences.set,
+    patch: preferences.patch,
+    reset: preferences.reset,
+    hydrate: preferences.hydrate,
+    flush: preferences.flush
+  };
+}
 
-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
+export { DropdownContext, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, IrisSlot, useAdminPreferences, useAdminShell, useDropdownContext, useMachine, useTabsNav };
+//# sourceMappingURL=chunk-XVXURJZQ.js.map
+//# sourceMappingURL=chunk-XVXURJZQ.js.map