@keboola/design 4.3.1 → 4.4.0

package/dist/index.js

@@ -1402,7 +1402,7 @@ var variants = cva(
     "tw-tracking-[1px]",
     "tw-uppercase",
     // border
-    "tw-rounded",
+    "tw-rounded-[var(--radius-lg,0.25rem)]",
     "tw-border",
     "tw-border-transparent",
     // styling
@@ -1556,7 +1556,7 @@ var argoVariants = cva(
     // border
     "tw-border",
     "tw-border-transparent",
-    "tw-rounded-lg",
+    "tw-rounded-[var(--radius-lg,0.25rem)]",
     // text
     "tw-font-medium",
     "tw-select-none",
@@ -2279,7 +2279,10 @@ var DropdownMenuRadioItem = ({
         "data-[state=checked]:tw-cursor-default",
         {
           "data-[state=checked]:tw-bg-neutral-100": indicator === "none",
-          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-sky-100": indicator === "check"
+          // Semantic brand tint (flips under `[data-theme='dark']`) instead of a
+          // hardcoded `tw-bg-sky-100`, which stayed light in dark mode and left the
+          // checked item's text near-invisible.
+          "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary/10": indicator === "check"
         },
         className
       ),
@@ -2869,10 +2872,10 @@ var AlertModalIcon = ({ variant, icon }) => {
           "div",
           {
             className: cn("tw-relative", "tw-rounded-full", "tw-size-12", {
-              "tw-bg-secondary-500": variant === "info",
+              "tw-bg-blue-500": variant === "info",
               "tw-bg-warning-500": variant === "warning",
               "tw-bg-error-500": variant === "danger",
-              "tw-bg-primary-500": variant === "success"
+              "tw-bg-green-500": variant === "success"
             }),
             children: /* @__PURE__ */ jsx(
               "span",
@@ -2912,10 +2915,10 @@ var AlertModalIcon = ({ variant, icon }) => {
           "tw-size-8",
           '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           {
-            "tw-bg-secondary-100 tw-text-secondary-600": variant === "info",
+            "tw-bg-blue-100 tw-text-blue-600": variant === "info",
             "tw-bg-warning-100 tw-text-warning-500": variant === "warning",
             "tw-bg-error-100 tw-text-error-500": variant === "danger",
-            "tw-bg-primary-100 tw-text-primary-900": variant === "success"
+            "tw-bg-green-100 tw-text-green-900": variant === "success"
           }
         ),
         children: glyph
@@ -3410,8 +3413,8 @@ var ModalIcon = (props) => {
         {
           className: cn("tw-relative", "tw-rounded-full", "tw-size-12", {
             "tw-bg-warning-500": props.color === "orange",
-            "tw-bg-secondary-500": props.color === "blue",
-            "tw-bg-primary-500": props.color === "green",
+            "tw-bg-blue-500": props.color === "blue",
+            "tw-bg-green-500": props.color === "green",
             "tw-bg-error-500": props.color === "red",
             "tw-bg-neutral-150": props.color === "gray",
             "tw-bg-purple-100": props.color === "violet"
@@ -8698,7 +8701,7 @@ var inputGroupVariants = cva(
     "tw-flex",
     "tw-items-center",
     // base
-    "tw-rounded",
+    "tw-rounded-[var(--radius-lg,0.25rem)]",
     "tw-border",
     "tw-border-solid",
     "tw-border-neutral-200",
@@ -8819,7 +8822,6 @@ var inputGroupVariants = cva(
           // muted filled input surface — gray, distinct from white containers; not the app-background token
           "tw-bg-muted",
           "tw-border-input",
-          "tw-rounded-lg",
           "tw-text-foreground",
           "has-[:is(input,textarea):disabled]:tw-opacity-50",
           // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
@@ -11218,7 +11220,7 @@ function Checkbox({
     description && /* @__PURE__ */ jsx(FieldBox.Description, { children: description })
   ] });
   if (!tooltip) return rendered;
-  return /* @__PURE__ */ jsx(Tooltip, { tooltip, placement: tooltipPlacement, triggerAsChild: true, children: rendered });
+  return /* @__PURE__ */ jsx(Tooltip, { tooltip, placement: tooltipPlacement, triggerAsChild: !!children, children: rendered });
 }
 var addonVariants2 = cva(
   [
@@ -12297,7 +12299,7 @@ var AutoSaveTextarea = ({
                   " Saving"
                 ] }),
                 !isOverLimit && value !== null && !isChanged && !isSaving && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  /* @__PURE__ */ jsx(icons_exports.CircleCheck, { className: "tw-size-4 tw-text-primary-500" }),
+                  /* @__PURE__ */ jsx(icons_exports.CircleCheck, { className: "tw-size-4 tw-text-green-500" }),
                   " Saved"
                 ] })
               ] })
@@ -16166,7 +16168,7 @@ var ThinkingIndicator = ({ label = "Thinking..." }) => {
 // src/blocks/AIKit/usageStatsHelpers.ts
 var clampPercentage = (value) => Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
 var UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }) => {
-  const radius = Math.max(0, (size - strokeWidth) / 2);
+  const radius = Math.max(0, (size - strokeWidth) / 2 - 1);
   const circumference = 2 * Math.PI * radius;
   const offset = circumference * (1 - clampPercentage(value) / 100);
   return /* @__PURE__ */ jsxs(
@@ -16294,10 +16296,10 @@ var AlertCollapsibleIcon = ({ open }) => /* @__PURE__ */ jsx(Tooltip, { placemen
       "tw-size-5",
       "tw-text-neutral-400",
       "group-data-[state=open]/alert:tw-rotate-180",
-      "group-data-[variant=info]/alert:group-hover:tw-text-secondary-600",
+      "group-data-[variant=info]/alert:group-hover:tw-text-blue-600",
       "group-data-[variant=warning]/alert:group-hover:tw-text-warning-600",
       "group-data-[variant=error]/alert:group-hover:tw-text-error-600",
-      "group-data-[variant=success]/alert:group-hover:tw-text-primary-600"
+      "group-data-[variant=success]/alert:group-hover:tw-text-green-600"
     )
   }
 ) });
@@ -16345,10 +16347,10 @@ var AlertIcon = ({ variant, icon, className, ...rest }) => /* @__PURE__ */ jsx(
       "tw-self-start",
       "tw-p-0.5",
       '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-      "group-data-[variant=info]/alert:tw-text-secondary-500",
+      "group-data-[variant=info]/alert:tw-text-blue-500",
       "group-data-[variant=warning]/alert:tw-text-warning-500",
       "group-data-[variant=error]/alert:tw-text-error-500",
-      "group-data-[variant=success]/alert:tw-text-primary-500",
+      "group-data-[variant=success]/alert:tw-text-green-500",
       className
     ),
     children: icon ?? VARIANT_ICONS2[variant]
@@ -16387,19 +16389,18 @@ var AlertRoot = ({
         "tw-text-left",
         "tw-p-4",
         // border
-        "tw-rounded",
-        "data-[argo=true]:tw-rounded-lg",
+        "tw-rounded-[var(--radius-lg,0.25rem)]",
         "tw-border",
         "tw-border-solid",
         // border variants
-        "data-[variant=info]:tw-bg-secondary-100",
-        "data-[variant=info]:tw-border-secondary-200",
+        "data-[variant=info]:tw-bg-blue-100",
+        "data-[variant=info]:tw-border-blue-200",
         "data-[variant=warning]:tw-bg-warning-100",
         "data-[variant=warning]:tw-border-warning-300",
         "data-[variant=error]:tw-bg-error-100",
         "data-[variant=error]:tw-border-error-200",
-        "data-[variant=success]:tw-bg-primary-100",
-        "data-[variant=success]:tw-border-primary-200",
+        "data-[variant=success]:tw-bg-green-100",
+        "data-[variant=success]:tw-border-green-200",
         className
       ),
       children
@@ -16659,8 +16660,8 @@ var variants6 = cva(
       variant: {
         default: "tw-border tw-border-border tw-bg-popover",
         error: "tw-bg-error-550",
-        info: "tw-bg-secondary-600",
-        success: "tw-bg-primary-700",
+        info: "tw-bg-blue-600",
+        success: "tw-bg-green-700",
         warning: "tw-bg-warning-550"
       }
     }
@@ -21117,7 +21118,7 @@ var PaneHeader = ({ label, sublabel }) => /* @__PURE__ */ jsxs("div", { children
 var ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }) => {
   const hasConflicts = remainingConflicts > 0;
   const allDone = !hasConflicts && remainingSafeChanges === 0;
-  const colorClass = hasConflicts ? "tw-text-warning-500" : allDone ? "tw-text-primary-500" : "tw-text-muted-foreground";
+  const colorClass = hasConflicts ? "tw-text-warning-500" : allDone ? "tw-text-green-500" : "tw-text-muted-foreground";
   const parts = [];
   if (hasConflicts) {
     parts.push(`${remainingConflicts} conflict${remainingConflicts !== 1 ? "s" : ""}`);