@keboola/design 4.2.0 → 4.3.0

package/dist/index.cjs

@@ -1443,9 +1443,9 @@ var variants = classVarianceAuthority.cva(
     "focus-visible:tw-outline",
     "focus-visible:tw-outline-1",
     "focus-visible:-tw-outline-offset-1",
-    "focus-visible:tw-outline-secondary-500",
+    "focus-visible:tw-outline-ring",
     "focus-visible:tw-ring-4",
-    "focus-visible:tw-ring-secondary-200",
+    "focus-visible:tw-ring-ring/30",
     // disabled
     "disabled:tw-opacity-40",
     "disabled:tw-cursor-not-allowed",
@@ -2489,9 +2489,10 @@ var toggleVariants = classVarianceAuthority.cva(
     // focus-visible
     "[&:not(:active)]:not-disabled:focus-visible:tw-outline",
     "!tw-outline-offset-0",
-    "[&:not(:active)]:not-disabled:focus-visible:tw-outline-secondary-500",
+    "[&:not(:active)]:not-disabled:focus-visible:tw-outline-ring",
     "[&:not(:active)]:not-disabled:focus-visible:tw-outline-1",
-    "[&:not(:active)]:not-disabled:focus-visible:tw-shadow-[0_0_0_4px_rgba(31,143,255,0.2)]"
+    "[&:not(:active)]:not-disabled:focus-visible:tw-ring-4",
+    "[&:not(:active)]:not-disabled:focus-visible:tw-ring-ring/20"
   ],
   {
     variants: {
@@ -8832,7 +8833,7 @@ var inputGroupVariants = classVarianceAuthority.cva(
     variants: {
       focusVariant: {
         default: [],
-        on: ["!tw-border-secondary-500", "!tw-ring-secondary-200", "!tw-ring-4"],
+        on: ["!tw-border-ring", "!tw-ring-ring/30", "!tw-ring-4"],
         off: ["has-[:is(input,textarea):focus]:!tw-ring-0"]
       },
       variant: {
@@ -8872,8 +8873,8 @@ var inputGroupVariants = classVarianceAuthority.cva(
       },
       state: {
         default: [
-          "has-[:is(input,textarea):focus]:tw-border-secondary-500",
-          "has-[:is(input,textarea):focus]:tw-ring-secondary-200"
+          "has-[:is(input,textarea):focus]:tw-border-ring",
+          "has-[:is(input,textarea):focus]:tw-ring-ring/30"
         ],
         error: [
           "tw-border-error-500",
@@ -9953,9 +9954,9 @@ var switchVariants = classVarianceAuthority.cva(
           "focus-visible:tw-outline-none",
           "before:focus-visible:tw-outline",
           "before:focus-visible:tw-outline-1",
-          "before:focus-visible:tw-outline-secondary-500",
+          "before:focus-visible:tw-outline-ring",
           "before:focus-visible:tw-ring-4",
-          "before:focus-visible:tw-ring-secondary-200"
+          "before:focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "tw-peer",
@@ -10139,7 +10140,7 @@ var radioVariants = classVarianceAuthority.cva(
           "data-[state=unchecked]:hover:tw-border-primary",
           "data-[state=unchecked]:disabled:hover:tw-border-neutral-200",
           "focus-visible:tw-ring-2",
-          "focus-visible:tw-ring-secondary-200"
+          "focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "disabled:tw-opacity-50",
@@ -10219,9 +10220,9 @@ var radioItemButtonVariants = classVarianceAuthority.cva(
           "data-[state=checked]:tw-text-white",
           "data-[state=checked]:tw-cursor-default",
           "focus-visible:tw-outline",
-          "focus-visible:tw-outline-secondary-500",
+          "focus-visible:tw-outline-ring",
           "focus-visible:tw-ring-4",
-          "focus-visible:tw-ring-secondary-200"
+          "focus-visible:tw-ring-ring/30"
         ],
         argo: [
           "disabled:tw-opacity-50",
@@ -10690,8 +10691,8 @@ var searchWrapperVariants = classVarianceAuthority.cva(
           // focus
           "has-[input:focus]:tw-outline-1",
           "has-[input:focus]:tw-ring-4",
-          "has-[input:focus]:tw-outline-secondary-500",
-          "has-[input:focus]:tw-ring-secondary-200"
+          "has-[input:focus]:tw-outline-ring",
+          "has-[input:focus]:tw-ring-ring/30"
         ],
         ai: [
           "tailwindcss-preflight",
@@ -10708,7 +10709,7 @@ var searchWrapperVariants = classVarianceAuthority.cva(
           "tw-shadow-[inset_0_100vw_white]",
           // focus
           "has-[input:focus]:tw-ring-4",
-          "has-[input:focus]:tw-ring-secondary-200"
+          "has-[input:focus]:tw-ring-ring/30"
         ]
       }
     }
@@ -11130,10 +11131,10 @@ var variants4 = classVarianceAuthority.cva(
       },
       state: {
         default: [
-          "focus:tw-border-secondary-500",
-          "focus:tw-ring-secondary-200",
-          "data-[state=open]:tw-border-secondary-500",
-          "data-[state=open]:tw-ring-secondary-200"
+          "focus:tw-border-ring",
+          "focus:tw-ring-ring/30",
+          "data-[state=open]:tw-border-ring",
+          "data-[state=open]:tw-ring-ring/30"
         ],
         error: [
           "tw-border-error-500",
@@ -11512,7 +11513,7 @@ var badgeRootVariants = classVarianceAuthority.cva(
     "focus-visible:tw-outline-none",
     "focus-visible:tw-ring-2",
     "focus-visible:tw-ring-inset",
-    "focus-visible:tw-ring-secondary-500"
+    "focus-visible:tw-ring-ring"
   ],
   {
     defaultVariants: {
@@ -12636,6 +12637,43 @@ var ColorInput = ({
     }
   );
 };
+var OPTIONS = [
+  { value: "light", label: "Light", icon: icons_exports.Sun },
+  { value: "dark", label: "Dark", icon: icons_exports.Moon },
+  { value: "system", label: "System", icon: icons_exports.Monitor }
+];
+var triggerSizeMap = { small: "icon-sm", medium: "icon" };
+var ColorModeSwitch = ({ value, onValueChange, size = "small", className }) => {
+  const active = OPTIONS.find((option) => option.value === value);
+  const ActiveIcon = active?.icon ?? icons_exports.Monitor;
+  const activeLabel = active?.label ?? "System";
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: triggerSizeMap[size],
+        "aria-label": `Color mode: ${activeLabel}`,
+        title: `Color mode: ${activeLabel}`,
+        className,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ActiveIcon, { className: "tw-size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.RadioGroup, { value, onValueChange, children: OPTIONS.map(({ value: option, label, icon: Icon2 }) => /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownMenu.RadioItem,
+      {
+        value: option,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon2, {}),
+        indicator: "check",
+        indicatorAlign: "end",
+        closeOnSelect: true,
+        children: label
+      },
+      option
+    )) }) })
+  ] });
+};
 var toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
 var NumberInput = ({
   ref,
@@ -14978,9 +15016,9 @@ FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 var variantClasses = {
-  success: "tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600",
+  success: "tw-text-secondary-500 focus-visible:tw-outline-ring not-disabled:hover:tw-text-secondary-600",
   error: "tw-text-error-500 focus-visible:tw-outline-error-500 not-disabled:hover:tw-text-error-600",
-  processing: "tw-text-secondary-500 focus-visible:tw-outline-secondary-500 not-disabled:hover:tw-text-secondary-600",
+  processing: "tw-text-secondary-500 focus-visible:tw-outline-ring not-disabled:hover:tw-text-secondary-600",
   dismissed: "tw-text-neutral-700 focus-visible:tw-outline-neutral-500 not-disabled:hover:tw-text-neutral-800"
 };
 var renderVariantIcon = (variant) => {
@@ -15113,8 +15151,8 @@ var Avatar = ({
         "tw-border",
         "tw-border-transparent",
         "focus-visible:tw-ring-4",
-        "focus-visible:tw-ring-secondary-200",
-        "focus-visible:tw-border-secondary-500",
+        "focus-visible:tw-ring-ring/30",
+        "focus-visible:tw-border-ring",
         className
       ),
       children: [
@@ -15225,7 +15263,7 @@ var ExpandToggle = ({
     type: "button",
     onClick: onToggle,
     "aria-expanded": isExpanded,
-    className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-secondary-500",
+    className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-text-secondary-500 hover:tw-text-secondary-600 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-ring",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15585,7 +15623,7 @@ var promptInputVariants = classVarianceAuthority.cva(
     "tw-shadow-[inset_0_100vw_white]",
     // focus
     "has-[textarea:focus]:tw-ring-4",
-    "has-[textarea:focus]:tw-ring-secondary-200",
+    "has-[textarea:focus]:tw-ring-ring/30",
     "tw-cursor-text",
     "tw-px-2"
   ],
@@ -16455,7 +16493,7 @@ var Alert = ({
             "tw-rounded-sm",
             "focus-visible:tw-outline",
             "focus-visible:tw-outline-2",
-            "focus-visible:tw-outline-secondary-500"
+            "focus-visible:tw-outline-ring"
           ),
           children: [
             !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant, icon }),
@@ -18528,10 +18566,10 @@ var SidebarGroupAction = ({
       "hover:[&_svg]:tw-text-secondary-600",
       "hover:tw-bg-neutral-100",
       "focus-visible:tw-ring-4",
-      "focus-visible:tw-ring-secondary-200",
+      "focus-visible:tw-ring-ring/30",
       "focus-visible:tw-outline",
       "focus-visible:tw-outline-1",
-      "focus-visible:tw-outline-secondary-500",
+      "focus-visible:tw-outline-ring",
       className
     ),
     children
@@ -19808,7 +19846,7 @@ var BreadcrumbEllipsis = ({
       // focus
       "focus-visible:tw-outline-none",
       "focus-visible:tw-ring-2",
-      "focus-visible:tw-ring-secondary-500/50",
+      "focus-visible:tw-ring-ring/50",
       "tw-p-1",
       className
     ),
@@ -19844,7 +19882,7 @@ var BreadcrumbLink = ({
         // focus
         "focus-visible:tw-outline-none",
         "focus-visible:tw-ring-2",
-        "focus-visible:tw-ring-secondary-500/50",
+        "focus-visible:tw-ring-ring/50",
         "focus-visible:tw-rounded-sm",
         // Icon
         '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
@@ -22197,6 +22235,7 @@ exports.Collapsible = Collapsible;
 exports.CollapsiblePanel = CollapsiblePanel;
 exports.CollapsibleStepHeader = CollapsibleStepHeader;
 exports.ColorInput = ColorInput;
+exports.ColorModeSwitch = ColorModeSwitch;
 exports.Combobox = Combobox;
 exports.Command = Command;
 exports.CommandGroup = CommandGroup;