@harnessio/ui 0.5.4 → 0.5.6

package/dist/tailwind.config.js

@@ -475,16 +475,16 @@ const O = {
       color: "var(--cn-text-1)"
     }
   }
-}, V = ["primary", "secondary", "outline", "ghost"], F = ["success", "danger", "default"], G = ["3xs", "2xs", "xs", "sm", "md"], g = "0.99", l = "150ms", s = "ease-in-out", N = {
+}, V = ["primary", "secondary", "outline", "ghost"], F = ["success", "danger", "default"], N = ["3xs", "2xs", "xs", "sm", "md"], g = "0.99", l = "150ms", s = "ease-in-out", _ = {
   success: "success",
   danger: "danger",
   default: "gray"
 };
-function _() {
+function G() {
   const r = {}, e = {};
   return V.forEach((n) => {
     F.forEach((o) => {
-      const a = {}, t = N[o];
+      const a = {}, t = _[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)`, S = o === "default" ? "var(--cn-state-hover)" : `var(--cn-set-${t}-outline-bg-selected)`;
@@ -522,7 +522,7 @@ function _() {
 }
 function Y() {
   const r = {};
-  return G.forEach((e) => {
+  return N.forEach((e) => {
     r[`&:where(.cn-button-${e})`] = {
       height: `var(--cn-btn-size-${e})`,
       paddingBlock: `var(--cn-btn-py-${e})`,
@@ -609,7 +609,7 @@ const M = {
       }
     },
     // variant styles
-    ..._(),
+    ...G(),
     // Rounded
     "&:where(.cn-button-rounded)": {
       borderRadius: "var(--cn-btn-rounded-radius)"
@@ -2612,7 +2612,7 @@ const Ee = {
         gridTemplateColumns: "1fr",
         gridTemplateAreas: '"icon"'
       },
-      "&-icon": { justifySelf: "center" }
+      "&-icon": { justifySelf: "center", marginLeft: "0" }
     },
     "&-action-button": {
       maxWidth: "0",
@@ -2662,7 +2662,7 @@ const Ee = {
     "&-footer": {
       display: "grid",
       gap: "var(--cn-sidebar-group-gap)",
-      padding: "var(--cn-sidebar-group-py) var(--cn-sidebar-container-spacing)",
+      padding: "var(--cn-sidebar-group-py) var(--cn-sidebar-item-container)",
       marginTop: "auto",
       flexShrink: "0"
     },
@@ -2694,7 +2694,7 @@ const Ee = {
       },
       "&-header": {
         display: "flex",
-        padding: "var(--cn-layout-3xs) var(--cn-sidebar-item-container)",
+        padding: "var(--cn-layout-2xs)",
         alignItems: "center",
         gap: "var(--cn-layout-xs)",
         alignSelf: "stretch",
@@ -2827,7 +2827,7 @@ const Ee = {
         minWidth: "var(--cn-sidebar-item-min-width)",
         justifyItems: "start",
         alignItems: "center",
-        padding: "var(--cn-sidebar-item-container) var(--cn-sidebar-item-container) var(--cn-sidebar-item-container) var(--cn-layout-sm)",
+        padding: "var(--cn-sidebar-item-container)",
         borderRadius: "var(--cn-sidebar-item-radius)",
         "@apply duration-150 transition-[padding,row-gap,column-gap] ease-linear": "",
         // Icons use stroke currentColor; base row color keeps them visible on dark sidebars
@@ -2880,7 +2880,8 @@ const Ee = {
           },
           ...h
         },
-        "&-icon": { gridArea: "icon" },
+        /** Reserves space for active bar + grip handle so icon/title stay stable when active or dragging */
+        "&-icon": { gridArea: "icon", marginLeft: "var(--cn-layout-sm)" },
         "&-title": {
           maxWidth: "100%",
           gridArea: "title",
@@ -2953,7 +2954,7 @@ const Ee = {
         display: "flex",
         alignItems: "center",
         padding: "var(--cn-sidebar-item-container)",
-        columnGap: "var(--cn-sidebar-item-gap)",
+        gap: "var(--cn-layout-xs)",
         "&-icon, &-text": {
           flexShrink: "0",
           height: "var(--cn-icon-size-sm)",
@@ -2983,12 +2984,12 @@ const Ee = {
       ".cn-sidebar-item-content": {
         gap: "var(--cn-layout-3xs) var(--cn-layout-xs)",
         gridTemplateColumns: "var(--cn-size-6) 1fr",
-        paddingLeft: "var(--cn-sidebar-item-container)",
+        padding: "var(--cn-layout-2xs)",
         "&-title": {
           font: "var(--cn-body-single-line-normal)",
           color: "var(--cn-comp-sidebar-item-text)"
         },
-        "&-icon": { paddingLeft: "0" }
+        "&-icon": { paddingLeft: "0", marginLeft: "0" }
       },
       ".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-size-6) !important",
@@ -3037,7 +3038,7 @@ const Ee = {
     backgroundColor: "var(--cn-bg-2)",
     ...u,
     ".cn-sidebar-group-header": {
-      padding: "var(--cn-layout-3xs) var(--cn-sidebar-item-container)"
+      padding: "var(--cn-layout-2xs)"
     },
     ".cn-sidebar-popover-footer": {
       marginTop: "calc(-1 * var(--cn-spacing-2))",
@@ -3055,7 +3056,7 @@ const Ee = {
       backgroundColor: "var(--cn-comp-sidebar-separator)"
     }
   }
-}, Fe = ["sm", "md", "lg", "xs"], Ge = ["2xs", "xs", "sm", "md", "lg", "xl"], Ne = ["xs", "sm", "md", "lg"], _e = ["sm"];
+}, Fe = ["sm", "md", "lg", "xs"], Ne = ["2xs", "xs", "sm", "md", "lg", "xl"], _e = ["xs", "sm", "md", "lg"], Ge = ["sm"];
 function Ye() {
   const r = {};
   return Fe.forEach((e) => {
@@ -3066,7 +3067,7 @@ function Ye() {
   }), r;
 }
 function m(r) {
-  const e = r === "icon" ? Ge : Ne, n = {};
+  const e = r === "icon" ? Ne : _e, 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;
@@ -3074,7 +3075,7 @@ function m(r) {
 }
 function Me() {
   const r = {};
-  return _e.forEach((e) => {
+  return Ge.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})`