@harnessio/ui 0.3.2 → 0.3.3

package/dist/tailwind.config.js

@@ -262,7 +262,7 @@ function T() {
     };
   }), r;
 }
-const W = {
+const B = {
   ".cn-avatar": {
     display: "inline-flex",
     alignItems: "center",
@@ -297,7 +297,7 @@ const W = {
     // Avatar xs → Icon xs, Avatar sm → Icon sm, Avatar md → Icon sm, Avatar lg → Icon md
     ".cn-avatar-icon": {}
   }
-}, B = ["primary", "secondary", "outline", "status", "ghost"], L = ["success", "info", "warning", "danger", "muted", "merged", "risk"], H = {
+}, W = ["primary", "secondary", "outline", "status", "ghost"], L = ["success", "info", "warning", "danger", "muted", "merged", "risk"], H = {
   success: "success",
   info: "blue",
   warning: "warning",
@@ -308,7 +308,7 @@ const W = {
 };
 function A() {
   const r = {}, e = {};
-  return B.forEach((n) => {
+  return W.forEach((n) => {
     L.forEach((o) => {
       const a = {}, t = H[o];
       n === "ghost" ? (a.color = `var(--cn-set-${t}-outline-text)`, r[`&:where(.cn-badge-${n}.cn-badge-${o})`] = a) : n !== "status" ? (a.backgroundColor = `var(--cn-set-${t}-${n}-bg)`, a.color = `var(--cn-set-${t}-${n}-text)`, a.borderColor = `var(--cn-set-${t}-${n}-border, var(--cn-set-${t}-${n}-bg))`, r[`&:where(.cn-badge-${n}.cn-badge-${o})`] = a) : e[`&.cn-badge-status.cn-badge-${o} > .cn-badge-indicator`] = {
@@ -2467,8 +2467,8 @@ const ke = {
       }
     }
   }
-}, Te = ["danger", "warning"], We = ["sm"];
-function Be() {
+}, Te = ["danger", "warning"], Be = ["sm"];
+function We() {
   const r = {};
   return Te.forEach((e) => {
     r[`&:where(.cn-select-${e}):not(:disabled)`] = {
@@ -2479,7 +2479,7 @@ function Be() {
         boxShadow: `var(--cn-ring-${e}-hover)`
       }
     };
-  }), We.forEach((e) => {
+  }), Be.forEach((e) => {
     r[`&.cn-select-${e}`] = {
       height: `var(--cn-input-size-${e})`
     }, r[`&.cn-select-${e} .cn-select-trigger`] = {
@@ -2538,7 +2538,7 @@ const Le = {
       aspectRatio: "1",
       height: "100%"
     },
-    ...Be()
+    ...We()
   }
 }, He = {
   ".cn-shimmer": {
@@ -2566,6 +2566,38 @@ const Le = {
     }
   }
 }, je = {
+  "& .cn-input-prefix": {
+    "@apply ml-0": ""
+  },
+  ".cn-sidebar-group": {
+    "--sidebar-group-label-scale": "0",
+    "&-header": {
+      display: "none"
+    }
+  },
+  ".cn-sidebar-item": {
+    "&-content": {
+      // Hide text and extra elements; icon stays centered
+      "&-title, &-description, &-badge, &-right-element, &-action-item-placeholder, &-action-buttons": {
+        maxWidth: "0",
+        padding: "0",
+        opacity: "0",
+        minWidth: "0"
+      },
+      "&-w-description, &-complete": {
+        padding: "0"
+      },
+      "&-icon": {
+        justifySelf: "center"
+      }
+    },
+    "&-action-button": {
+      maxWidth: "0",
+      minWidth: "0",
+      opacity: "0"
+    }
+  }
+}, Ee = {
   ".cn-sidebar": {
     "&.cn-sidebar": {
       display: "flex",
@@ -2718,9 +2750,6 @@ const Le = {
         },
         textDecoration: "none !important"
       },
-      "&-big": {
-        maxWidth: "100%"
-      },
       "&-active": {
         ".cn-sidebar-item-content-title": {
           color: "var(--cn-comp-sidebar-item-text-selected)"
@@ -2830,13 +2859,12 @@ const Le = {
         display: "grid",
         gridTemplateColumns: "auto 1fr",
         gridTemplateAreas: '"icon title"',
-        gap: "8px",
+        gap: "var(--cn-layout-xs)",
         minHeight: "var(--cn-sidebar-item-min-height)",
         minWidth: "var(--cn-sidebar-item-min-width)",
         justifyItems: "start",
         alignItems: "center",
-        padding: "var(--cn-sidebar-item-container)",
-        paddingLeft: "calc(var(--cn-sidebar-item-container) + var(--cn-layout-sm))",
+        padding: "var(--cn-sidebar-item-container) var(--cn-sidebar-item-container) var(--cn-sidebar-item-container) var(--cn-layout-sm)",
         borderRadius: "var(--cn-sidebar-item-radius)",
         "@apply duration-150 transition-[padding,row-gap,column-gap] ease-linear": "",
         "&:hover, &:focus-within": {
@@ -2885,22 +2913,6 @@ const Le = {
             gridTemplateColumns: "auto 1fr auto auto"
           }
         },
-        /* Deprecated class
-        
-                        '&-icon': {
-                          gridArea: 'icon',
-                
-                          '&-w-border': {
-                            width: 'var(--cn-icon-size-lg)',
-                            height: 'var(--cn-icon-size-lg)',
-                            borderRadius: 'var(--cn-rounded-2)',
-                            border: '1px solid var(--cn-border-2)',
-                            display: 'grid',
-                            placeContent: 'center',
-                            backgroundImage: 'var(--cn-comp-sidebar-icon-asset-bg)'
-                          }
-                        },
-                      */
         "&-icon": {
           gridArea: "icon"
         },
@@ -2927,8 +2939,8 @@ const Le = {
           gridArea: "elem",
           display: "grid",
           placeContent: "center",
-          width: "var(--cn-size-7)",
-          height: "var(--cn-size-7)",
+          width: "var(--cn-size-8)",
+          height: "var(--cn-size-8)",
           color: "var(--cn-text-2)",
           justifyContent: "flex-end",
           "& svg, & path": {
@@ -2955,13 +2967,13 @@ const Le = {
       "&-action-button": {
         position: "absolute",
         zIndex: "1",
-        top: "calc(50% - var(--cn-size-7)/2)",
+        top: "calc(50% - var(--cn-size-8)/2)",
         right: "4px",
         display: "grid",
         placeContent: "center",
         color: "var(--cn-text-2)",
-        width: "var(--cn-size-7)",
-        height: "var(--cn-size-7)",
+        width: "var(--cn-size-8)",
+        height: "var(--cn-size-8)",
         borderRadius: "var(--cn-rounded-2)",
         opacity: "1",
         overflow: "hidden",
@@ -3014,6 +3026,7 @@ const Le = {
     "&-item-popover": {
       width: "auto",
       ".cn-sidebar-item-content": {
+        gap: "var(--cn-layout-3xs) var(--cn-layout-xs)",
         gridTemplateColumns: "var(--cn-size-8) 1fr",
         paddingLeft: "var(--cn-sidebar-item-container)",
         "&-title": {
@@ -3024,22 +3037,20 @@ const Le = {
           paddingLeft: "0"
         }
       },
-      // Icon with border container effect
-      // SVG is 16px (iconSize/sm), padding creates 28px total (size/7)
-      // Total: 16px + 5px*2 padding + 1px*2 border = 28px
+      // Icon with border container effect: container is var(--cn-size-8)
+      // Padding centers the icon (var(--cn-icon-size-sm)) inside; border is 1px
       ".cn-icon.cn-icon-2xs:not(.cn-sidebar-item-expand-icon), .cn-icon.cn-icon-xs:not(.cn-sidebar-item-expand-icon), .cn-icon.cn-icon-sm:not(.cn-sidebar-item-expand-icon), .cn-icon.cn-icon-md:not(.cn-sidebar-item-expand-icon), .cn-icon.cn-icon-lg:not(.cn-sidebar-item-expand-icon), .cn-icon.cn-icon-xl:not(.cn-sidebar-item-expand-icon)": {
-        width: "var(--cn-icon-size-sm) !important",
-        minWidth: "var(--cn-icon-size-sm) !important",
-        height: "var(--cn-icon-size-sm) !important",
-        minHeight: "var(--cn-icon-size-sm) !important",
-        padding: "calc((var(--cn-size-7) - var(--cn-icon-size-sm) - 2px) / 2)",
-        boxSizing: "content-box",
+        width: "var(--cn-size-8) !important",
+        minWidth: "var(--cn-size-8) !important",
+        height: "var(--cn-size-8) !important",
+        minHeight: "var(--cn-size-8) !important",
+        padding: "calc((var(--cn-size-8) - var(--cn-icon-size-sm) - 2px) / 2)",
+        boxSizing: "border-box",
         borderRadius: "var(--cn-rounded-2)",
         border: "1px solid var(--cn-border-2)",
         backgroundColor: "var(--cn-bg-1)",
         flexShrink: "0",
-        color: "var(--cn-comp-sidebar-item-text)",
-        marginLeft: "var(--cn-layout-4xs)"
+        color: "var(--cn-comp-sidebar-item-text)"
       },
       "&:hover, &:focus-within": {
         ".cn-sidebar-item-content-title": {
@@ -3047,43 +3058,7 @@ const Le = {
         }
       }
     },
-    "&[data-state=collapsed]": {
-      "& .cn-input-prefix": {
-        "@apply ml-0": ""
-      },
-      ".cn-sidebar-group": {
-        "--sidebar-group-label-scale": "0",
-        "&-header": {
-          display: "none"
-        }
-      },
-      ".cn-sidebar-item": {
-        "&-big": {
-          maxWidth: "38px"
-          /* I don’t have a fixed value for the collapsed state in the design — it depends on the padding */
-          /* marginLeft: '2px' / Why we need that? */
-        },
-        "&-content": {
-          "&-title, &-description, &-badge, &-right-element, &-action-item-placeholder, &-action-buttons": {
-            maxWidth: "0",
-            padding: "0",
-            opacity: "0",
-            minWidth: "0"
-          },
-          "&-w-description, &-complete": {
-            padding: "0"
-          },
-          "&-icon": {
-            justifySelf: "center"
-          }
-        },
-        "&-action-button": {
-          maxWidth: "0",
-          minWidth: "0",
-          opacity: "0"
-        }
-      }
-    }
+    "&[data-state=collapsed]": je
   },
   // Hidden measurement container for popover column calculation
   ".cn-sidebar-popover-measurement": {
@@ -3106,11 +3081,27 @@ const Le = {
   ".cn-sidebar-nested-popover": {
     width: "var(--cn-size-84)",
     height: "100vh",
-    borderRadius: "0 var(--cn-popover-radius) var(--cn-popover-radius) 0"
+    borderRadius: "0 var(--cn-popover-radius) var(--cn-popover-radius) 0",
+    // Stretch icon in items with title + description so spacing is even
+    ".cn-sidebar-item-content.cn-sidebar-item-content-w-description": {
+      ".cn-sidebar-item-content-icon": {
+        alignSelf: "stretch",
+        display: "flex",
+        alignItems: "center"
+      }
+    }
   },
   // Sidebar popover
   ".cn-popover-content.cn-sidebar-popover": {
     backgroundColor: "var(--cn-bg-2)",
+    // Stretch icon in items with title + description so spacing is even
+    ".cn-sidebar-item-content.cn-sidebar-item-content-w-description": {
+      ".cn-sidebar-item-content-icon": {
+        alignSelf: "stretch",
+        display: "flex",
+        alignItems: "center"
+      }
+    },
     // Reset padding left for group headers in popover (only side nav should have padding left)
     ".cn-sidebar-group-header": {
       padding: "var(--cn-layout-3xs) var(--cn-sidebar-item-container)"
@@ -3133,10 +3124,10 @@ const Le = {
       backgroundColor: "var(--cn-comp-sidebar-separator)"
     }
   }
-}, Ee = ["sm", "md", "lg", "xs"], De = ["2xs", "xs", "sm", "md", "lg", "xl"], Pe = ["xs", "sm", "md", "lg"], Oe = ["sm"];
-function Xe() {
+}, De = ["sm", "md", "lg", "xs"], Pe = ["2xs", "xs", "sm", "md", "lg", "xl"], Oe = ["xs", "sm", "md", "lg"], Xe = ["sm"];
+function Ve() {
   const r = {};
-  return Ee.forEach((e) => {
+  return De.forEach((e) => {
     r[`&:where(.cn-skeleton-avatar-${e})`] = {
       width: `var(--cn-avatar-size-${e})`,
       height: `var(--cn-avatar-size-${e})`
@@ -3144,22 +3135,22 @@ function Xe() {
   }), r;
 }
 function g(r) {
-  const e = r === "icon" ? De : Pe, n = {};
+  const e = r === "icon" ? Pe : Oe, 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;
   }), n;
 }
-function Ve() {
+function Fe() {
   const r = {};
-  return Oe.forEach((e) => {
+  return Xe.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})`
     };
   }), r;
 }
-const Fe = {
+const Ge = {
   ".cn-skeleton": {
     "&-base": {
       backgroundImage: "var(--cn-comp-skeleton-bg)",
@@ -3174,7 +3165,7 @@ const Fe = {
       "&:where(.cn-skeleton-avatar-rounded)": {
         borderRadius: "var(--cn-avatar-radius-rounded)"
       },
-      ...Xe()
+      ...Ve()
     },
     "&-icon": {
       ...g("icon")
@@ -3210,7 +3201,7 @@ const Fe = {
         border: "var(--cn-input-border) solid var(--cn-border-2)",
         borderRadius: "var(--cn-input-radius)",
         backgroundColor: "var(--cn-comp-input-bg)",
-        ...Ve()
+        ...Fe()
       }
     },
     "&-list": {
@@ -3231,7 +3222,7 @@ const Fe = {
       backgroundPosition: "-200% 0"
     }
   }
-}, Ge = {
+}, Ne = {
   ".cn-slider": {
     display: "flex",
     flexDirection: "column",
@@ -3507,7 +3498,7 @@ const Fe = {
       }
     }
   }
-}, Ne = {
+}, _e = {
   ".cn-stacked-list": {
     "@apply w-full bg-cn-1 border rounded-cn-3": "",
     "& > *:first-child > .cn-stacked-list-item": {
@@ -3579,7 +3570,7 @@ const Fe = {
   }
 }, h = {
   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)"
-}, _e = {
+}, Ye = {
   ".cn-studio-card": {
     borderRadius: "var(--cn-rounded-4)",
     border: "1px solid var(--cn-border-2)",
@@ -3849,7 +3840,7 @@ const Fe = {
       }
     }
   }
-}, Ye = {
+}, Me = {
   ".cn-switch-wrapper": {
     display: "flex",
     gap: "var(--cn-spacing-2-half)",
@@ -3938,7 +3929,7 @@ const Fe = {
     },
     "@apply truncate": ""
   }
-}, Me = {
+}, Ue = {
   ".cn-table-v2": {
     "@apply w-full": "",
     // Table container
@@ -4102,7 +4093,7 @@ const Fe = {
       "@apply mt-cn-md": ""
     }
   }
-}, Ue = {
+}, qe = {
   ".cn-tabs-scroll-container": {
     position: "relative",
     width: "100%",
@@ -4262,7 +4253,7 @@ const Fe = {
       "@apply opacity-cn-disabled": ""
     }
   }
-}, qe = [
+}, Je = [
   "gray",
   "blue",
   "brown",
@@ -4278,7 +4269,7 @@ const Fe = {
   "red",
   "violet",
   "yellow"
-], Je = {
+], Ke = {
   green: "success",
   red: "danger",
   yellow: "warning"
@@ -4288,8 +4279,8 @@ const Fe = {
 });
 function m(r) {
   const e = {};
-  return qe.forEach((n) => {
-    const o = Je[n] ?? n, a = r === "outline", t = {
+  return Je.forEach((n) => {
+    const o = Ke[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"})`,
@@ -4316,7 +4307,7 @@ function m(r) {
     e[`&:where(.cn-tag-${o})`] = t;
   }), e;
 }
-const Ke = {
+const Qe = {
   ".cn-tag": {
     display: "inline-flex",
     alignItems: "center",
@@ -4371,10 +4362,10 @@ const Ke = {
       "@apply truncate leading-normal align-middle inline-block": ""
     }
   }
-}, Qe = ["danger", "warning"], Ze = ["sm"];
-function er() {
+}, Ze = ["danger", "warning"], er = ["sm"];
+function rr() {
   const r = {};
-  return Qe.forEach((e) => {
+  return Ze.forEach((e) => {
     r[`&:where(.cn-textarea-${e}):not(:disabled)`] = {
       borderColor: `var(--cn-border-${e})`,
       boxShadow: `var(--cn-ring-${e})`,
@@ -4387,13 +4378,13 @@ function er() {
         boxShadow: `var(--cn-ring-${e})`
       }
     };
-  }), Ze.forEach((e) => {
+  }), er.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 rr = {
+const nr = {
   ".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)",
@@ -4432,7 +4423,7 @@ const rr = {
     "&-resizable": {
       resize: "vertical"
     },
-    ...er(),
+    ...rr(),
     "&-label-wrapper": {
       display: "flex",
       alignItems: "center",
@@ -4453,7 +4444,7 @@ const rr = {
       }
     }
   }
-}, nr = {
+}, ar = {
   ".cn-time-ago-card": {
     "&-trigger": {
       "@apply leading-snug whitespace-nowrap truncate max-w-full": "",
@@ -4475,7 +4466,7 @@ const rr = {
       "@apply grid grid-cols-[auto_1fr_auto] items-center whitespace-nowrap": ""
     }
   }
-}, ar = {
+}, or = {
   ".cn-toast-wrapper": {
     right: "var(--cn-toast-offset-right)",
     bottom: "var(--cn-toast-offset-bottom)"
@@ -4551,9 +4542,9 @@ const rr = {
       }
     }
   }
-}, or = ["xs", "sm", "md"], tr = () => {
+}, tr = ["xs", "sm", "md"], cr = () => {
   const r = {};
-  return or.forEach((e) => {
+  return tr.forEach((e) => {
     r[`&.cn-toggle-${e}.cn-toggle-transparent.cn-toggle-text`] = {
       paddingLeft: `var(--cn-btn-px-${e})`,
       paddingRight: `var(--cn-btn-px-${e})`,
@@ -4562,15 +4553,15 @@ const rr = {
       border: "var(--cn-btn-border) solid transparent"
     };
   }), r;
-}, cr = {
+}, ir = {
   ".cn-toggle": {
     transitionDuration: "100ms",
-    ...tr(),
+    ...cr(),
     '&[data-state="on"]': {
       color: "var(--cn-text-1)"
     }
   }
-}, ir = {
+}, dr = {
   ".cn-toggle-group": {
     gap: "var(--cn-layout-3xs)",
     "@apply flex": "",
@@ -4578,7 +4569,7 @@ const rr = {
       "@apply flex-col": ""
     }
   }
-}, dr = {
+}, lr = {
   ".cn-tooltip": {
     minWidth: "var(--cn-tooltip-min)",
     maxWidth: "var(--cn-tooltip-max)",
@@ -4634,7 +4625,7 @@ const rr = {
   "@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)"
-}, lr = {
+}, sr = {
   ".cn-file-tree": {
     "&-base-item": {
       ...x
@@ -4680,71 +4671,71 @@ const rr = {
       }
     }
   }
-}, sr = [
+}, pr = [
   C,
   I,
   j,
   G,
   ee,
-  Ye,
+  Me,
   de,
-  Ke,
+  Qe,
   le,
-  W,
+  B,
   M,
   U,
   he,
   ke,
   K,
   _,
-  Ue,
+  qe,
   J,
   $e,
   Ie,
   Re,
   ue,
-  dr,
-  ar,
-  je,
+  lr,
+  or,
+  Ee,
   E,
   oe,
-  nr,
+  ar,
   Ae,
-  cr,
   ir,
+  dr,
   N,
   Ce,
-  Fe,
-  Ne,
+  Ge,
   _e,
-  lr,
+  Ye,
+  sr,
   pe,
   se,
   ze,
   He,
-  Ge,
+  Ne,
   // Form styles
   Le,
   re,
   q,
   Se,
-  rr,
+  nr,
   ie,
   Y,
   ve,
-  Me
-], pr = {
+  Ue
+], br = {
   content: [],
   plugins: [
     w(({ addComponents: r }) => {
-      r(sr);
+      r(pr);
     })
   ]
-}, gr = {
-  presets: [pr, k],
+}, vr = {
+  presets: [br, k],
   content: ["./src/**/*.{ts,tsx}"]
 };
 export {
-  gr as default
+  vr as default
 };
 //# sourceMappingURL=tailwind.config.js.map