@iris-ui-kit/react 0.2.1 → 0.2.3

package/dist/admin.cjs

@@ -307,20 +307,20 @@ function IrisNavMenu({
   const itemStyle = (opts) => ({
     display: "flex",
     alignItems: "center",
-    gap: 10,
+    gap: "var(--iris-space-sm, 12px)",
     width: horizontal && opts.depth === 0 ? "auto" : "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-hover, var(--iris-surface))" : "transparent",
+    background: opts.active ? opts.hovered && !opts.disabled ? "var(--iris-nav-item-active-hover, color-mix(in srgb, var(--iris-primary) 88%, black))" : "var(--iris-primary)" : opts.hovered && !opts.disabled ? "var(--iris-surface-hover, var(--iris-surface))" : "transparent",
     color: opts.active ? "var(--iris-primary-foreground, #fff)" : opts.trail ? "var(--iris-primary)" : "var(--iris-foreground)",
     font: "inherit",
-    fontSize: 14,
+    fontSize: "var(--iris-font-size-md, 14px)",
     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",
+    padding: collapsed ? 10 : "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
     paddingInlineStart: collapsed ? 10 : 12 + opts.depth * 16,
     justifyContent: collapsed ? "center" : "flex-start"
   });
@@ -331,12 +331,12 @@ function IrisNavMenu({
       "data-iris-nav-badge": "",
       style: {
         marginInlineStart: "auto",
-        fontSize: 11,
+        fontSize: "var(--iris-font-size-xs, 12px)",
         lineHeight: 1,
-        padding: "2px 6px",
+        padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
         borderRadius: 999,
-        background: "var(--iris-danger, #e5484d)",
-        color: "#fff"
+        background: "var(--iris-danger, #ef4444)",
+        color: "var(--iris-primary-foreground, #fff)"
       },
       children: String(node.badge)
     }
@@ -457,7 +457,7 @@ function IrisNavMenu({
                 insetInlineStart: 0,
                 zIndex: 60,
                 minWidth: 220,
-                padding: 6,
+                padding: "var(--iris-space-xs, 8px)",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-md, 6px)",
                 background: "var(--iris-surface)",
@@ -524,7 +524,7 @@ function IrisNavMenu({
         display: "flex",
         flexDirection: horizontal ? "row" : "column",
         alignItems: horizontal ? "center" : void 0,
-        gap: 2
+        gap: "var(--iris-space-xxs, 4px)"
       },
       children: collapsed ? tree.map((node) => renderCollapsed(node)) : tree.map((node) => renderItem(node, 0))
     }
@@ -550,11 +550,11 @@ var IrisBreadcrumb = React13__namespace.forwardRef(
             style: {
               display: "inline-flex",
               alignItems: "center",
-              gap: 6,
+              gap: "var(--iris-space-xs, 8px)",
               margin: 0,
               padding: 0,
               listStyle: "none",
-              fontSize: 14
+              fontSize: "var(--iris-font-size-md, 14px)"
             },
             children: flat.map((child, i) => {
               const isLast = i === total - 1;
@@ -836,6 +836,7 @@ function useFloating(options) {
   const [x, setX] = React13__namespace.useState(0);
   const [y, setY] = React13__namespace.useState(0);
   const [finalPlacement, setFinalPlacement] = React13__namespace.useState(placement);
+  const [positioned, setPositioned] = React13__namespace.useState(false);
   const [arrowX, setArrowX] = React13__namespace.useState();
   const [arrowY, setArrowY] = React13__namespace.useState();
   const middleware = React13__namespace.useMemo(() => {
@@ -877,6 +878,7 @@ function useFloating(options) {
     if (token !== epochRef.current) return;
     setX(result.x);
     setY(result.y);
+    setPositioned(true);
     setFinalPlacement(result.placement);
     const arrowData = result.middlewareData.arrow;
     setArrowX(arrowData?.x);
@@ -887,6 +889,7 @@ function useFloating(options) {
     const a = anchor.current;
     const f = floating.current;
     if (!a || !f) return;
+    setPositioned(false);
     const cleanup = dom.autoUpdate(a, f, () => {
       void update();
     });
@@ -901,9 +904,13 @@ function useFloating(options) {
       top: 0,
       left: 0,
       transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
-      width: "max-content"
+      width: "max-content",
+      // Hidden until the first positioning cycle lands — prevents a flash at
+      // the viewport origin. `visibility` (not `display:none`) keeps the panel
+      // measurable so Floating UI can compute its real coordinates.
+      visibility: positioned ? void 0 : "hidden"
     }),
-    [strategy, x, y]
+    [strategy, x, y, positioned]
   );
   const OPPOSITE = {
     top: "bottom",
@@ -1059,15 +1066,15 @@ var IrisDropdownMenu = React13__namespace.forwardRef(
         onKeyDown: handleKeyDown,
         style: {
           ...floatingStyles,
-          background: "var(--iris-surface)",
+          background: "var(--iris-surface-floating)",
           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)",
+          boxShadow: "var(--iris-shadow-lg)",
           minWidth: 160,
           outline: "none",
-          zIndex: 1e3,
+          zIndex: "var(--iris-z-popover, 1000)",
           ...style
         },
         children
@@ -1120,14 +1127,14 @@ var IrisDropdownItem = React13__namespace.forwardRef(
           display: "flex",
           alignItems: "center",
           gap: "var(--iris-gap-sm, 6px)",
-          padding: "6px var(--iris-padding-md, 12px)",
+          padding: "var(--iris-padding-sm, 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,
+          fontSize: "var(--iris-font-size-md, 14px)",
           transition: "background-color 80ms ease",
           ...style
         },
@@ -1329,12 +1336,12 @@ function IrisAdminTabs({
         style: {
           display: "inline-flex",
           alignItems: "center",
-          gap: 6,
+          gap: "var(--iris-space-xs, 8px)",
           border: "none",
           background: "transparent",
           color: "inherit",
           font: "inherit",
-          fontSize: 13,
+          fontSize: "var(--iris-font-size-sm, 13px)",
           cursor: "pointer",
           padding: 0
         },
@@ -1382,7 +1389,7 @@ function IrisAdminTabs({
           display: "inline-flex",
           alignItems: "center",
           gap: 4,
-          padding: "5px 8px 5px 10px",
+          padding: "var(--iris-padding-sm, 6px) var(--iris-space-xs, 8px) var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
           borderRadius: "var(--iris-radius-md, 6px)",
           border: `1px solid ${active ? "var(--iris-primary)" : "var(--iris-border)"}`,
           background: active ? "var(--iris-primary)" : "var(--iris-surface)",
@@ -1405,8 +1412,8 @@ function IrisAdminTabs({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: 6,
-        padding: "6px 10px",
+        gap: "var(--iris-space-xs, 8px)",
+        padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
         borderBottom: "1px solid var(--iris-border)",
         background: "var(--iris-background)"
       },
@@ -1428,7 +1435,7 @@ function IrisAdminTabs({
                 onReorder: reorder,
                 disabled: !reorderable,
                 orientation: "horizontal",
-                style: { alignItems: "center", gap: 6, width: "max-content" },
+                style: { alignItems: "center", gap: "var(--iris-space-xs, 8px)", width: "max-content" },
                 children: t.tabs.map((tab) => chip(tab))
               }
             )
@@ -1569,12 +1576,12 @@ function IrisAdminLayout({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: 10,
+        gap: "var(--iris-space-sm, 12px)",
         height: 52,
         padding: "0 16px",
         color: "var(--iris-foreground)",
         fontWeight: 700,
-        fontSize: 16,
+        fontSize: "var(--iris-font-size-lg, 16px)",
         whiteSpace: "nowrap",
         overflow: "hidden",
         flexShrink: 0