@harnessio/ui 0.5.34 → 0.5.35

package/dist/tailwind.config.js

@@ -1,4 +1,4 @@
-import { p as I, t as R } from "./tailwind-design-system-D9j_K4lL.js";
+import { p as R, t as I } from "./tailwind-design-system-D9j_K4lL.js";
 import { F as S, C as l } from "./form-constants-CdD106iI.js";
 const T = {
   ".cn-accordion": {
@@ -121,7 +121,7 @@ const T = {
       }
     }
   }
-}, B = ["info", "danger", "warning", "success"], W = {
+}, W = ["info", "danger", "warning", "success"], B = {
   info: {
     backgroundColor: "gray-secondary",
     color: "text-cn-2",
@@ -145,8 +145,8 @@ const T = {
 };
 function H() {
   const r = {};
-  return B.forEach((e) => {
-    const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = W[e];
+  return W.forEach((e) => {
+    const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = B[e];
     n.backgroundColor = `var(--cn-set-${o}-bg)`, n["> .cn-alert-icon"] = {
       color: `var(--cn-${a})`
     }, n[" .cn-alert-fade-overlay"] = {
@@ -1285,6 +1285,13 @@ const K = {
       boxShadow: "var(--cn-shadow-5)",
       overflow: "hidden",
       outline: "none",
+      // Cap content at the viewport so a drawer never overflows the screen, regardless
+      // of `size` or layout. Originally added to keep dual-pane drawers usable on small
+      // viewports (the dual pane behaves like `size="full"` once the chosen size exceeds
+      // 100vw / 100vh), but applies to all drawers because a drawer larger than the
+      // viewport is broken UX in any context.
+      maxWidth: "100vw",
+      maxHeight: "100vh",
       "@apply fixed flex flex-col z-50 border": "",
       "&:where(.cn-drawer-content-right), &:where(.cn-drawer-content-left)": {
         "@apply inset-y-0 !h-auto": "",
@@ -1401,7 +1408,7 @@ const K = {
       "@apply size-full": "",
       "&-content": {
         padding: "var(--cn-drawer-container)",
-        overflowX: "hidden"
+        overflowX: "clip"
       }
     },
     "&-body-wrap": {
@@ -1429,6 +1436,227 @@ const K = {
       gap: "var(--cn-drawer-gap)",
       padding: "var(--cn-drawer-container)",
       "@apply flex flex-col border-t": ""
+    },
+    "&-dual-pane": {
+      "--cn-drawer-dual-pane-rail-width": "19.125rem",
+      "--cn-drawer-dual-pane-main-min-width": "var(--cn-drawer-xs)",
+      width: "100%",
+      minWidth: "0",
+      "@apply flex min-h-0 w-full min-w-0 flex-1 flex-row overflow-x-auto overflow-y-hidden": ""
+    },
+    "&-dual-pane-rail": {
+      width: "var(--cn-drawer-dual-pane-rail-width)",
+      minWidth: "var(--cn-drawer-dual-pane-rail-width)",
+      maxWidth: "var(--cn-drawer-dual-pane-rail-width)",
+      flexShrink: "0",
+      backgroundColor: "var(--cn-bg-2)",
+      borderRightWidth: "var(--cn-border-width-1)",
+      borderRightColor: "var(--cn-border-3)",
+      "@apply flex min-h-0 flex-col overflow-hidden border-r": ""
+    },
+    "&-dual-pane-rail-header": {
+      borderBottomWidth: "var(--cn-border-width-1)",
+      borderBottomColor: "var(--cn-border-3)",
+      padding: "var(--cn-drawer-container) var(--cn-drawer-container) var(--cn-drawer-container) var(--cn-spacing-8)",
+      flexShrink: "0",
+      "@apply flex flex-col border-b": "",
+      "&:where(.cn-drawer-dual-pane-rail-header-at-top)": {
+        borderBottomColor: "transparent"
+      }
+    },
+    "&-dual-pane-rail-header-title": {
+      font: "var(--cn-heading-section)",
+      letterSpacing: "var(--cn-tracking-tight)",
+      color: "var(--cn-text-1)",
+      margin: "0",
+      wordBreak: "break-word"
+    },
+    "&-dual-pane-rail-body": {
+      "@apply flex-1 min-h-0": ""
+    },
+    "&-dual-pane-rail-content": {
+      padding: "0 var(--cn-drawer-container) var(--cn-drawer-container)"
+    },
+    "&-dual-pane-steps-list": {
+      gap: "var(--cn-spacing-1)",
+      listStyle: "none",
+      margin: "0",
+      padding: "0",
+      "@apply flex flex-col": ""
+    },
+    "&-dual-pane-step-item": {
+      margin: "0",
+      padding: "0"
+    },
+    "&-dual-pane-step": {
+      gap: "var(--cn-spacing-3)",
+      padding: "var(--cn-spacing-2) var(--cn-spacing-3)",
+      borderRadius: "var(--cn-rounded-3)",
+      textAlign: "left",
+      width: "100%",
+      backgroundColor: "transparent",
+      border: "none",
+      "@apply flex flex-row items-start": "",
+      "&:where(button)": {
+        "@apply cursor-pointer": ""
+      },
+      "&:hover": {
+        backgroundColor: "var(--cn-state-hover)"
+      },
+      "&:where(button):focus-visible": {
+        outline: "2px solid var(--cn-focus)",
+        outlineOffset: "2px"
+      }
+    },
+    "&-dual-pane-step-content": {
+      gap: "var(--cn-spacing-half)",
+      minWidth: "0",
+      "@apply flex flex-col flex-1": ""
+    },
+    "&-dual-pane-step-indicator": {
+      width: "1.25rem",
+      height: "1.25rem",
+      borderRadius: "9999px",
+      flexShrink: "0",
+      borderWidth: "var(--cn-border-width-1)",
+      borderStyle: "solid",
+      borderColor: "var(--cn-border-2)",
+      backgroundColor: "transparent",
+      color: "var(--cn-text-3)",
+      fontSize: "0.75rem",
+      fontWeight: "500",
+      lineHeight: "1",
+      marginTop: "0.0625rem",
+      "@apply inline-flex items-center justify-center": ""
+    },
+    "&-dual-pane-step-indicator-number": {
+      "@apply leading-none": ""
+    },
+    "&-dual-pane-step-indicator-icon": {
+      width: "0.875rem",
+      height: "0.875rem"
+    },
+    "&-dual-pane-step-title": {
+      font: "var(--cn-body-strong)",
+      fontWeight: "var(--cn-font-weight-default-normal-600)",
+      color: "var(--cn-text-1)"
+    },
+    "&-dual-pane-step-description": {
+      font: "var(--cn-body-normal)",
+      color: "var(--cn-text-4)"
+    },
+    "&-dual-pane-step-active": {
+      backgroundColor: "var(--cn-bg-2)",
+      "& .cn-drawer-dual-pane-step-title": {
+        color: "var(--cn-text-1)"
+      },
+      "& .cn-drawer-dual-pane-step-indicator": {
+        backgroundColor: "var(--cn-text-1)",
+        borderColor: "var(--cn-text-1)",
+        color: "var(--cn-bg-1)"
+      }
+    },
+    "&-dual-pane-step-completed": {
+      "& .cn-drawer-dual-pane-step-title": {
+        color: "var(--cn-text-1)"
+      },
+      "& .cn-drawer-dual-pane-step-indicator": {
+        backgroundColor: "var(--cn-text-1)",
+        borderColor: "var(--cn-text-1)",
+        color: "var(--cn-bg-1)"
+      }
+    },
+    "&-dual-pane-step-upcoming": {
+      "& .cn-drawer-dual-pane-step-title": {
+        color: "var(--cn-text-2)"
+      }
+    },
+    "&-dual-pane-substeps-list": {
+      gap: "var(--cn-spacing-1)",
+      listStyle: "none",
+      // Indent substeps so their indicator column sits roughly under the parent title.
+      // Parent indicator (1.25rem) + parent gap (var(--cn-spacing-3)) + parent step left padding (var(--cn-spacing-3)).
+      paddingInlineStart: "calc(1.25rem + var(--cn-spacing-3) + var(--cn-spacing-3))",
+      paddingInlineEnd: "0",
+      paddingBlock: "var(--cn-spacing-1) 0",
+      margin: "0",
+      "@apply flex flex-col": "",
+      '&[data-state="collapsed"]': {
+        display: "none"
+      }
+    },
+    "&-dual-pane-substep-item": {
+      margin: "0",
+      padding: "0"
+    },
+    "&-dual-pane-substep": {
+      gap: "var(--cn-spacing-3)",
+      padding: "var(--cn-spacing-2) var(--cn-spacing-3)",
+      borderRadius: "var(--cn-rounded-3)",
+      textAlign: "left",
+      width: "100%",
+      backgroundColor: "transparent",
+      border: "none",
+      "@apply flex flex-row items-center": "",
+      "&:where(button)": {
+        "@apply cursor-pointer": ""
+      },
+      "&:hover": {
+        backgroundColor: "var(--cn-state-hover)"
+      },
+      "&:where(button):focus-visible": {
+        outline: "2px solid var(--cn-focus)",
+        outlineOffset: "2px"
+      }
+    },
+    "&-dual-pane-substep-indicator": {
+      width: "1.25rem",
+      height: "1.25rem",
+      flexShrink: "0",
+      color: "var(--cn-text-2)",
+      "@apply inline-flex items-center justify-center": ""
+    },
+    "&-dual-pane-substep-indicator-icon": {
+      width: "0.875rem",
+      height: "0.875rem"
+    },
+    "&-dual-pane-substep-indicator-dot": {
+      width: "0.375rem",
+      height: "0.375rem",
+      borderRadius: "9999px",
+      backgroundColor: "currentColor"
+    },
+    "&-dual-pane-substep-title": {
+      font: "var(--cn-body-normal)",
+      color: "var(--cn-text-2)",
+      minWidth: "0",
+      "@apply flex-1": ""
+    },
+    "&-dual-pane-substep-active": {
+      backgroundColor: "var(--cn-bg-2)",
+      "& .cn-drawer-dual-pane-substep-indicator": {
+        color: "var(--cn-text-1)"
+      },
+      "& .cn-drawer-dual-pane-substep-title": {
+        color: "var(--cn-text-1)"
+      }
+    },
+    "&-dual-pane-substep-completed": {
+      "& .cn-drawer-dual-pane-substep-indicator": {
+        color: "var(--cn-text-1)"
+      },
+      "& .cn-drawer-dual-pane-substep-title": {
+        color: "var(--cn-text-1)"
+      }
+    },
+    "&-dual-pane-substep-upcoming": {
+      "& .cn-drawer-dual-pane-substep-indicator": {
+        color: "var(--cn-text-3)"
+      }
+    },
+    "&-dual-pane-main": {
+      minWidth: "var(--cn-drawer-dual-pane-main-min-width)",
+      "@apply flex min-h-0 flex-1 flex-col overflow-hidden": ""
     }
   }
 }, oe = [
@@ -1746,7 +1974,7 @@ const ge = {
       color: "var(--cn-set-danger-secondary-text)"
     }
   }
-}, he = {
+}, ue = {
   ".cn-link": {
     display: "inline-flex",
     alignItems: "center",
@@ -1807,7 +2035,7 @@ const ge = {
       textDecorationLine: "none !important"
     }
   }
-}, ue = {
+}, he = {
   ".cn-message-bubble": {
     display: "flex",
     flexDirection: "column",
@@ -2061,7 +2289,7 @@ const fe = {
   ${g} 68.75%,
   transparent 68.75%,
   transparent)`, $e = (r) => r === "sm" ? "8px 8px" : r === "lg" ? "32px 32px" : "16px 16px";
-function Ie() {
+function Re() {
   const r = {};
   return Ce.forEach((e) => {
     const n = {};
@@ -2086,7 +2314,7 @@ function Ie() {
     }, r[`&:where(.cn-progress-${e})`] = n;
   }), r;
 }
-const Re = {
+const Ie = {
   ".cn-progress": {
     "&-container": {
       position: "relative"
@@ -2177,7 +2405,7 @@ const Re = {
       width: "100%",
       animation: "cnProgressBar-md 0.8s linear infinite"
     },
-    ...Ie(),
+    ...Re(),
     "@keyframes cnProgressIndeterminateAnimation": {
       "0%": {
         transform: "translateX(-100%)"
@@ -2277,7 +2505,7 @@ const Re = {
       boxShadow: "0 0 3px 0 color-mix(in srgb, var(--cn-gradient-ai-stop-3) 30%, transparent), 0 0 12px 2px color-mix(in srgb, var(--cn-gradient-ai-stop-3) 15%, transparent), 0 0 28px 6px color-mix(in srgb, var(--cn-gradient-ai-stop-3) 8%, transparent)"
     }
   }
-}, Be = {
+}, We = {
   ":where(.cn-radio-control)": {
     [`@apply ${l}`]: ""
   },
@@ -2362,7 +2590,7 @@ const Re = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, We = {
+}, Be = {
   ".cn-reasoning": {
     marginBottom: "var(--cn-spacing-4)"
   },
@@ -2572,10 +2800,10 @@ const Pe = {
 }), Xe = {
   ".cn-sidebar-item-content-title": { color: "var(--cn-comp-sidebar-item-text-hover)" },
   ".cn-sidebar-item-content-icon": { color: "var(--cn-comp-sidebar-item-text-hover)" }
-}, h = {
+}, u = {
   ".cn-sidebar-item-content-title": { color: "var(--cn-comp-sidebar-item-text-selected)" },
   ".cn-sidebar-item-content-icon": { color: "var(--cn-comp-sidebar-item-text-selected)" }
-}, u = {
+}, h = {
   "& .cn-sidebar-item-content-icon": { color: "var(--cn-text-1)" }
 }, m = {
   ".cn-sidebar-item-content.cn-sidebar-item-content-w-description": {
@@ -2752,7 +2980,7 @@ const Pe = {
       overflow: "hidden",
       "@apply duration-150 transition-[max-width,margin-left,padding] ease-linear": "",
       // Router-active (e.g. NavLink); label colors — hover is handled on .cn-sidebar-item-wrapper
-      "&-active": h,
+      "&-active": u,
       "&:hover": {
         textDecoration: "none !important"
       },
@@ -2803,7 +3031,7 @@ const Pe = {
             ".cn-sidebar-item-content": {
               background: "var(--cn-comp-sidebar-item-selected)"
             },
-            ...h,
+            ...u,
             ".cn-sidebar-item-action-menu": { opacity: "1" },
             ".cn-sidebar-item-active-indicator": {
               backgroundColor: "var(--cn-set-brand-primary-bg)",
@@ -2857,7 +3085,7 @@ const Pe = {
           `,
             gridTemplateColumns: "auto 1fr auto"
           },
-          ...u
+          ...h
         },
         "&-w-r-element": {
           gridTemplateAreas: '"icon title elem"',
@@ -2881,7 +3109,7 @@ const Pe = {
           `,
             gridTemplateColumns: "auto 1fr auto auto"
           },
-          ...u
+          ...h
         },
         /** Reserves space for active bar + grip handle so icon/title stay stable when active or dragging */
         "&-icon": { gridArea: "icon", marginLeft: "var(--cn-layout-sm)" },
@@ -3501,6 +3729,33 @@ const qe = {
       }
     }
   }
+}, Ze = {
+  ".cn-sticky-list-section": {
+    "@apply relative": "",
+    "&-sentinel": {
+      "@apply absolute top-0 left-0 w-full pointer-events-none": "",
+      height: "1px"
+    },
+    "&-header": {
+      "@apply sticky z-20": "",
+      top: "calc(-1 * var(--cn-drawer-container))",
+      backgroundColor: "var(--cn-bg-1)",
+      marginLeft: "calc(-1 * var(--cn-drawer-container))",
+      marginRight: "calc(-1 * var(--cn-drawer-container))",
+      paddingLeft: "var(--cn-drawer-container)",
+      paddingRight: "var(--cn-drawer-container)",
+      paddingTop: "var(--cn-drawer-container)",
+      transitionProperty: "box-shadow",
+      transitionDuration: "150ms",
+      transitionTimingFunction: "linear",
+      "&-stuck": {
+        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.08)"
+      }
+    },
+    "&-content": {
+      "@apply relative": ""
+    }
+  }
 }, z = ".cn-studio-card-header, .cn-studio-card-message, .cn-studio-card-footer, .cn-studio-card-content > .cn-studio-card-expand-button, .cn-studio-card-content > .cn-studio-card-button, .cn-studio-card-tag, .cn-studio-card-status", y = {
   [z]: {
     opacity: "0.45 !important",
@@ -3508,7 +3763,7 @@ const qe = {
   }
 }, f = {
   boxShadow: "0 4px 6px -1px lch(from var(--cn-shadow-color-3) l c h / 0.05), 0 2px 8px -2px lch(from var(--cn-shadow-color-3) l c h / 0.05)"
-}, Ze = {
+}, er = {
   ".cn-studio-card": {
     borderRadius: "var(--cn-rounded-4)",
     border: "1px solid var(--cn-border-2)",
@@ -3873,7 +4128,7 @@ const qe = {
       }
     }
   }
-}, er = {
+}, rr = {
   ".cn-switch-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -3962,7 +4217,7 @@ const qe = {
     },
     "@apply truncate": ""
   }
-}, rr = {
+}, nr = {
   ".cn-table-v2": {
     "@apply w-full": "",
     // Table container
@@ -4030,6 +4285,9 @@ const qe = {
         "&>td": {
           backgroundColor: "var(--cn-state-hover)"
         },
+        "&>td.cn-table-v2-cell-pinned": {
+          background: "linear-gradient(var(--cn-state-hover), var(--cn-state-hover)), var(--cn-bg-1)"
+        },
         "& .cn-row-pin:not(.cn-row-pin-on)": {
           opacity: "1"
         }
@@ -4136,7 +4394,7 @@ const qe = {
   ".cn-row-pin-on": {
     opacity: "1"
   }
-}, nr = {
+}, ar = {
   ".cn-tabs-scroll-container": {
     position: "relative",
     width: "100%",
@@ -4361,7 +4619,7 @@ const qe = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, ar = [
+}, or = [
   "gray",
   "blue",
   "brown",
@@ -4377,7 +4635,7 @@ const qe = {
   "red",
   "violet",
   "yellow"
-], or = {
+], tr = {
   green: "success",
   red: "danger",
   yellow: "warning"
@@ -4387,8 +4645,8 @@ const qe = {
 });
 function k(r) {
   const e = {};
-  return ar.forEach((n) => {
-    const o = or[n] ?? n, a = r === "outline", t = {
+  return or.forEach((n) => {
+    const o = tr[n] ?? n, a = r === "outline", t = {
       color: `var(--cn-set-${o}-${a ? "outline-text" : "secondary-text"})`,
       backgroundColor: `var(--cn-set-${o}-${a ? "outline-bg" : "secondary-bg"})`,
       borderColor: `var(--cn-set-${o}-${a ? "outline-border" : "secondary-bg"})`,
@@ -4415,7 +4673,7 @@ function k(r) {
     e[`&:where(.cn-tag-${o})`] = t;
   }), e;
 }
-const tr = {
+const cr = {
   ".cn-tag": {
     display: "inline-flex",
     alignItems: "center",
@@ -4470,10 +4728,10 @@ const tr = {
       "@apply truncate leading-normal align-middle inline-block": ""
     }
   }
-}, cr = ["danger", "warning"], ir = ["sm"];
-function dr() {
+}, ir = ["danger", "warning"], dr = ["sm"];
+function lr() {
   const r = {};
-  return cr.forEach((e) => {
+  return ir.forEach((e) => {
     r[`&:where(.cn-textarea-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -4486,13 +4744,13 @@ function dr() {
         boxShadow: `var(--cn-ring-${e})`
       }
     };
-  }), ir.forEach((e) => {
+  }), dr.forEach((e) => {
     r[`&.cn-textarea-${e}`] = {
       padding: `var(--cn-input-${e}-py) var(--cn-input-${e}-pr) var(--cn-input-${e}-py) var(--cn-input-${e}-pl)`
     };
   }), r;
 }
-const lr = {
+const sr = {
   ".cn-textarea": {
     borderRadius: "var(--cn-input-radius)",
     padding: "var(--cn-input-md-py) var(--cn-input-md-pr) var(--cn-input-md-py) var(--cn-input-md-pl)",
@@ -4531,7 +4789,7 @@ const lr = {
     "&-resizable": {
       resize: "vertical"
     },
-    ...dr(),
+    ...lr(),
     "&-label-wrapper": {
       display: "flex",
       alignItems: "center",
@@ -4552,7 +4810,7 @@ const lr = {
       }
     }
   }
-}, sr = {
+}, pr = {
   ".cn-time-ago-card": {
     "&-trigger": {
       "@apply leading-snug whitespace-nowrap truncate max-w-full": "",
@@ -4574,7 +4832,7 @@ const lr = {
       "@apply grid grid-cols-[auto_1fr_auto] items-center whitespace-nowrap": ""
     }
   }
-}, pr = {
+}, br = {
   ".cn-toast-wrapper": {
     right: "var(--cn-toast-offset-right)",
     bottom: "var(--cn-toast-offset-bottom)"
@@ -4650,9 +4908,9 @@ const lr = {
       }
     }
   }
-}, br = ["xs", "sm", "md"], gr = () => {
+}, gr = ["xs", "sm", "md"], vr = () => {
   const r = {};
-  return br.forEach((e) => {
+  return gr.forEach((e) => {
     r[`&.cn-toggle-${e}.cn-toggle-transparent.cn-toggle-text`] = {
       paddingLeft: `var(--cn-btn-px-${e})`,
       paddingRight: `var(--cn-btn-px-${e})`,
@@ -4661,10 +4919,10 @@ const lr = {
       border: "var(--cn-btn-border) solid transparent"
     };
   }), r;
-}, vr = {
+}, ur = {
   ".cn-toggle": {
     transitionDuration: "100ms",
-    ...gr(),
+    ...vr(),
     '&[data-state="on"]': {
       color: "var(--cn-text-1)"
     }
@@ -4677,7 +4935,7 @@ const lr = {
       "@apply flex-col": ""
     }
   }
-}, ur = {
+}, mr = {
   ".cn-tooltip": {
     minWidth: "var(--cn-tooltip-min)",
     maxWidth: "var(--cn-tooltip-max)",
@@ -4733,7 +4991,7 @@ const lr = {
   "@apply text-cn-2 font-body-normal": "",
   minHeight: "var(--cn-tree-item-height)",
   padding: "var(--cn-tree-item-py) var(--cn-tree-item-pr) var(--cn-tree-item-py)"
-}, mr = {
+}, xr = {
   ".cn-file-tree": {
     "&-base-item": {
       ...C
@@ -4779,71 +5037,72 @@ const lr = {
       }
     }
   }
-}, xr = [
+}, yr = [
   T,
   L,
   X,
   K,
   ce,
-  er,
+  rr,
   ve,
-  tr,
-  he,
+  cr,
+  ue,
   E,
   Z,
   ee,
   we,
-  Re,
+  Ie,
   ae,
   J,
-  nr,
+  ar,
   ne,
   He,
   Le,
   Ae,
   ke,
-  ur,
-  pr,
+  mr,
+  br,
   Ve,
   F,
   se,
-  sr,
+  pr,
   _e,
-  vr,
+  ur,
   hr,
   q,
   Te,
   qe,
   Qe,
   Ze,
-  mr,
+  er,
+  xr,
   me,
-  ue,
-  We,
+  he,
+  Be,
   Oe,
   Je,
   // Form styles
   Pe,
   ie,
   re,
-  Be,
-  lr,
+  We,
+  sr,
   ge,
   Q,
   fe,
-  rr
-], yr = {
+  nr
+], fr = {
   content: [],
   plugins: [
-    I(({ addComponents: r }) => {
-      r(xr);
+    R(({ addComponents: r }) => {
+      r(yr);
     })
   ]
-}, kr = {
-  presets: [yr, R],
+}, Cr = {
+  presets: [fr, I],
   content: ["./src/**/*.{ts,tsx}"]
 };
 export {
-  kr as default
+  Cr as default
 };
 //# sourceMappingURL=tailwind.config.js.map