@harnessio/ui 0.5.17 → 0.5.19

package/dist/tailwind.config.js

@@ -1,6 +1,6 @@
 import { p as $, t as I } from "./tailwind-design-system-B-Jd9lCG.js";
-import { F as R, C as g, f as T } from "./form-shared-styles-W3czzLsz.js";
-const B = {
+import { F as R, C as g, f as T } from "./form-shared-styles-Be4PYgYO.js";
+const W = {
   ".cn-accordion": {
     display: "flex",
     flexDirection: "column",
@@ -121,7 +121,7 @@ const B = {
       }
     }
   }
-}, W = ["info", "danger", "warning", "success"], L = {
+}, B = ["info", "danger", "warning", "success"], L = {
   info: {
     backgroundColor: "gray-secondary",
     color: "text-cn-2",
@@ -143,9 +143,9 @@ const B = {
     fadeBgColor: "success"
   }
 };
-function A() {
+function H() {
   const r = {};
-  return W.forEach((e) => {
+  return B.forEach((e) => {
     const n = {}, { backgroundColor: o, color: a, fadeBgColor: t } = L[e];
     n.backgroundColor = `var(--cn-set-${o}-bg)`, n["> .cn-alert-icon"] = {
       color: `var(--cn-${a})`
@@ -154,7 +154,7 @@ function A() {
     }, r[`&:where(.cn-alert-${e})`] = n;
   }), r;
 }
-const H = {
+const A = {
   ".cn-alert": {
     gap: "var(--cn-alert-gap)",
     paddingTop: "var(--cn-alert-py)",
@@ -243,7 +243,7 @@ const H = {
     "&-link-wrapper": {
       paddingTop: "var(--cn-spacing-1)"
     },
-    ...A()
+    ...H()
   }
 }, j = ["md", "sm", "lg", "xs"];
 function E() {
@@ -476,7 +476,7 @@ const F = {
       color: "var(--cn-text-1)"
     }
   }
-}, G = ["primary", "secondary", "outline", "ghost"], N = ["success", "danger", "default"], M = ["3xs", "2xs", "xs", "sm", "md"], v = "0.99", l = "150ms", s = "ease-in-out", Y = {
+}, G = ["primary", "secondary", "outline", "ghost"], Y = ["success", "danger", "default"], N = ["3xs", "2xs", "xs", "sm", "md"], v = "0.99", l = "150ms", s = "ease-in-out", M = {
   success: "success",
   danger: "danger",
   default: "gray"
@@ -484,8 +484,8 @@ const F = {
 function U() {
   const r = {}, e = {};
   return G.forEach((n) => {
-    N.forEach((o) => {
-      const a = {}, t = Y[o];
+    Y.forEach((o) => {
+      const a = {}, t = M[o];
       if (n === "ghost") {
         a.color = `var(--cn-set-${t}-outline-text)`;
         const c = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-hover)`, z = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-selected)`;
@@ -523,7 +523,7 @@ function U() {
 }
 function K() {
   const r = {};
-  return M.forEach((e) => {
+  return N.forEach((e) => {
     r[`&:where(.cn-button-${e})`] = {
       height: `var(--cn-btn-size-${e})`,
       paddingBlock: `var(--cn-btn-py-${e})`,
@@ -2249,7 +2249,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 ${g}`]: ""
   },
@@ -2334,7 +2334,7 @@ const Re = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, We = {
+}, Be = {
   ".cn-reasoning": {
     marginBottom: "var(--cn-spacing-4)"
   },
@@ -2402,7 +2402,7 @@ const Re = {
       }
     }
   }
-}, Ae = {
+}, He = {
   ".cn-sandbox-layout": {
     "&-content": {
       paddingTop: "var(--cn-page-container-spacing-py)",
@@ -2418,7 +2418,7 @@ const Re = {
       paddingRight: "var(--cn-page-container-spacing-px)"
     }
   }
-}, He = {
+}, Ae = {
   ".cn-scroll-area": {
     "@apply overflow-auto grid min-w-full": "",
     "&-content": {
@@ -3029,7 +3029,7 @@ const Pe = {
       backgroundColor: "var(--cn-comp-sidebar-separator)"
     }
   }
-}, Ge = ["sm", "md", "lg", "xs"], Ne = ["2xs", "xs", "sm", "md", "lg", "xl"], Me = ["xs", "sm", "md", "lg"], Ye = ["sm"];
+}, Ge = ["sm", "md", "lg", "xs"], Ye = ["2xs", "xs", "sm", "md", "lg", "xl"], Ne = ["xs", "sm", "md", "lg"], Me = ["sm"];
 function Ue() {
   const r = {};
   return Ge.forEach((e) => {
@@ -3040,7 +3040,7 @@ function Ue() {
   }), r;
 }
 function x(r) {
-  const e = r === "icon" ? Ne : Me, n = {};
+  const e = r === "icon" ? Ye : Ne, n = {};
   return e.forEach((o) => {
     const a = {};
     a.width = `var(--cn-${r}-size-${o})`, a["min-width"] = `var(--cn-${r}-size-${o})`, a.height = `var(--cn-${r}-size-${o})`, a["min-height"] = `var(--cn-${r}-size-${o})`, n[`&:where(.cn-skeleton-${r}-${o})`] = a;
@@ -3048,7 +3048,7 @@ function x(r) {
 }
 function Ke() {
   const r = {};
-  return Ye.forEach((e) => {
+  return Me.forEach((e) => {
     r[`&.cn-skeleton-form-item-${e}`] = {
       padding: `var(--cn-input-${e}-py) var(--cn-input-${e}-pr) var(--cn-input-${e}-py) var(--cn-input-${e}-pl)`,
       height: `var(--cn-input-size-${e})`
@@ -3492,6 +3492,12 @@ const qe = {
     minWidth: "220px",
     maxWidth: "220px",
     height: "var(--cn-size-40)",
+    "&.cn-studio-card-xs": {
+      // Extra small variant - reduces dimensions for compact cards
+      width: "auto",
+      minWidth: "var(--cn-size-41)",
+      height: "auto"
+    },
     "&.cn-studio-card-sm": {
       borderWidth: "2px !important"
     },
@@ -3525,14 +3531,16 @@ const qe = {
     // Group card variant
     "&:where(.cn-studio-card-group)": {
       width: "auto",
-      minWidth: "var(--cn-size-90)",
+      // minWidth: 'var(--cn-size-90)',
       maxWidth: "none",
       height: "auto",
       "&.cn-studio-card-stage": {
-        minWidth: "var(--cn-size-90)"
+        // minWidth: 'var(--cn-size-90)'
       },
+      // When expanded - remove max-width to fit children
       '&:has(> .cn-studio-card-content > [data-expanded="true"])': {
-        "@apply bg-cn-3/50": ""
+        "@apply bg-cn-3/50": "",
+        maxWidth: "none"
       },
       "> .cn-studio-card-content": {
         minHeight: "108px"
@@ -3540,10 +3548,31 @@ const qe = {
       "> .cn-studio-card-content:not(:has(> .cn-studio-card-message))": {
         "@apply justify-center items-start": ""
       },
+      // When collapsed - fixed width
       '&:has(> .cn-studio-card-content > [data-expanded="false"])': {
-        width: "var(--cn-size-90)",
-        minWidth: "var(--cn-size-90)",
-        maxWidth: "var(--cn-size-90)"
+        // width: 'var(--cn-size-90)',
+        // minWidth: 'var(--cn-size-90)',
+        // maxWidth: 'var(--cn-size-90)'
+      }
+    },
+    // Group card variant with xs size - compact layout
+    "&:where(.cn-studio-card-group.cn-studio-card-xs)": {
+      minWidth: "var(--cn-size-41)",
+      "&.cn-studio-card-stage": {
+        minWidth: "var(--cn-size-41)"
+      },
+      "> .cn-studio-card-content": {
+        minHeight: "63px"
+      },
+      // When expanded - remove max-width to fit children
+      '&:has(> .cn-studio-card-content > [data-expanded="true"])': {
+        maxWidth: "none"
+      },
+      // When collapsed - fixed width
+      '&:has(> .cn-studio-card-content > [data-expanded="false"])': {
+        width: "var(--cn-size-41)",
+        minWidth: "var(--cn-size-41)",
+        maxWidth: "var(--cn-size-41)"
       }
     },
     // Shimmer effect for executing status
@@ -3578,8 +3607,13 @@ const qe = {
       "@apply flex-1": ""
     }
   },
+  // Compact header padding for xs cards
+  ".cn-studio-card-xs .cn-studio-card-header": {
+    "@apply p-cn-2xs pl-cn-xs": ""
+  },
   ".cn-studio-card-code-preview": {
     "@apply relative h-full overflow-hidden": "",
+    minHeight: "var(--cn-size-13)",
     "&::before": {
       "@apply absolute inset-y-0 right-0 w-8": "",
       content: '""',
@@ -3591,11 +3625,18 @@ const qe = {
       content: '""',
       zIndex: "2",
       background: "linear-gradient(to bottom, color-mix(in lch, var(--cn-comp-pipeline-card-footer) 0%, transparent), var(--cn-comp-pipeline-card-footer))"
+    },
+    // Allow pre tags to wrap and prevent width expansion
+    "& pre": {
+      position: "absolute",
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      overflowWrap: "break-word"
     }
   },
   // Content Component
   ".cn-studio-card-content": {
-    "@apply flex flex-col flex-grow gap-cn-sm px-cn-md pb-cn-lg pt-cn-sm": "",
+    "@apply flex flex-col flex-grow gap-cn-sm px-cn-md pb-cn-md pt-cn-sm": "",
     paddingTop: "0 !important",
     // When a group card is hovered anywhere inside this content
     "&:has(.cn-studio-card-group:hover)": {
@@ -3672,6 +3713,28 @@ const qe = {
     "& span": {
       "@apply line-clamp-4": ""
     },
+    // Explicit compact size via prop
+    '&[data-size="compact"]': {
+      minHeight: "var(--cn-size-13)",
+      "& span": {
+        "@apply line-clamp-2": ""
+      }
+    },
+    // Auto-detect parent Root size - xs cards get compact footer
+    ".cn-studio-card-xs > &": {
+      minHeight: "var(--cn-size-16)",
+      "@apply px-cn-xs py-cn-xs": "",
+      "& span": {
+        "@apply line-clamp-2": ""
+      }
+    },
+    // Auto-detect parent Root size - sm cards get slightly reduced footer
+    ".cn-studio-card-sm > &": {
+      minHeight: "var(--cn-size-20)",
+      "& span": {
+        "@apply line-clamp-3": ""
+      }
+    },
     // Group card variant - adjust padding and line-clamp
     ".cn-studio-card-group > &": {
       minHeight: "var(--cn-size-13)",
@@ -3708,7 +3771,7 @@ const qe = {
     width: "226px",
     height: "var(--cn-size-22)",
     transition: "transform 0.1s linear",
-    // Stack layers
+    // Stack layers - default direction is "right"
     "&-stack": {
       pointerEvents: "none",
       transitionProperty: "transform",
@@ -3731,7 +3794,7 @@ const qe = {
         transform: "translateX(6px)"
       }
     },
-    // Hover state - expand stacks and translate button right
+    // Hover state - expand stacks and translate button
     "&:hover": {
       transform: "scale(1.02) !important",
       ".cn-studio-card-expand-button-stack-1": {
@@ -3741,6 +3804,35 @@ const qe = {
         transform: "translateX(8px)"
       }
     },
+    // Bottom stack direction variant
+    '&[data-stack-direction="bottom"]': {
+      ".cn-studio-card-expand-button-stack-1": {
+        insetBlock: "0px",
+        insetInline: "3px",
+        transform: "translateY(3px)"
+      },
+      ".cn-studio-card-expand-button-stack-2": {
+        insetBlock: "0px",
+        insetInline: "6px",
+        transform: "translateY(6px)"
+      },
+      "&:hover": {
+        ".cn-studio-card-expand-button-stack-1": {
+          transform: "translateY(4px)"
+        },
+        ".cn-studio-card-expand-button-stack-2": {
+          transform: "translateY(8px)"
+        }
+      }
+    },
+    // Minimal variant
+    '&[data-variant="minimal"]': {
+      width: "auto",
+      height: "auto",
+      ".cn-studio-card-expand-button-top": {
+        "@apply p-cn-2xs px-cn-sm": ""
+      }
+    },
     // Expanded state - hide stacks
     '&:where([data-expanded="true"])': {
       ".cn-studio-card-expand-button-stack": {
@@ -4590,8 +4682,8 @@ const lr = {
     }
   }
 }, xr = [
-  B,
-  H,
+  W,
+  A,
   F,
   q,
   ie,
@@ -4609,8 +4701,8 @@ const lr = {
   nr,
   ae,
   Le,
-  Ae,
   He,
+  Ae,
   ke,
   ur,
   pr,
@@ -4629,14 +4721,14 @@ const lr = {
   mr,
   me,
   ue,
-  We,
+  Be,
   Oe,
   Je,
   // Form styles
   Pe,
   T,
   ne,
-  Be,
+  We,
   lr,
   ge,
   Z,