@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/checkbox/checkbox.js

@@ -1,21 +1,22 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { b as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-CJ-HBf0L.js";
-import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-cvK1vxO7.js";
+import { a as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, k as $df56164dff5785e2$export$4338b53315abf666, l as $5dc95899b306f630$export$c9058316764c140e, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-DGpXyJOJ.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import React__default, { useEffect, useMemo, useRef, forwardRef, useContext, createContext } from "react";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-CeNsUGWK.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BCEPS3hl.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-DNoP2bvV.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-CzN79ary.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-BRDW3y7-.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-CgnIuZJ2.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
+import $dbSRa$react__default, { useEffect, useMemo, useRef, forwardRef, useContext, createContext } from "react";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-DQeXkyLm.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-B8OteQMu.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-BZhaYwZl.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-VkXJjsru.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
+import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DTUuKFiI.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
   let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
     ...props,
@@ -173,7 +174,7 @@ const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef(fun
   });
   delete DOMProps.id;
   delete DOMProps.onClick;
-  return /* @__PURE__ */ React__default.createElement("label", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("label", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
     ref,
     slot: props.slot || void 0,
@@ -187,9 +188,9 @@ const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef(fun
     "data-readonly": isReadOnly || void 0,
     "data-invalid": isInvalid || void 0,
     "data-required": props.isRequired || void 0
-  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
     elementType: "span"
-  }, /* @__PURE__ */ React__default.createElement("input", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
     ref: inputRef
   })), renderProps.children);
@@ -211,6 +212,7 @@ const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef(fun
  * @param {string} [props.labelClassName] - Additional classes to add to the label container.
  * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
  * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Checkbox component.
@@ -237,6 +239,7 @@ const Checkbox2 = (props) => {
     className,
     labelClassName,
     inlineSubtitle,
+    flat,
     alignEnd,
     children,
     hidden,
@@ -245,7 +248,69 @@ const Checkbox2 = (props) => {
   if (hidden) {
     return null;
   }
-  const selectedOrIntermediate = checked || indeterminate;
+  const checkboxClasses = cva(
+    [
+      "es:size-5 es:shrink-0",
+      "es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1",
+      "es:*:row-start-1 es:*:col-start-1",
+      "es:rounded-sm",
+      "es:transition-plus es:duration-300 es:ease-spring-smooth",
+      "es:inset-ring",
+      "es:any-focus:outline-hidden",
+      "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/30"
+    ],
+    {
+      variants: {
+        disabled: {
+          true: "es:cursor-not-allowed",
+          false: "es:inset-shadow-xs es:bg-linear-to-b es:from-25%"
+        }
+      },
+      compoundVariants: [
+        { flat: false, disabled: false, class: "es:shadow-xs es:shadow-black/5" },
+        //
+        {
+          active: false,
+          disabled: false,
+          class: [
+            "es:bg-secondary-50 es:inset-ring-secondary-300/60",
+            "es:from-black/1 es:to-black/5",
+            "es:hover:bg-surface-100 es:hover:inset-ring-surface-300/60",
+            "es:inset-shadow-white/50",
+            "es:group-focus-visible:inset-ring-accent-500"
+          ]
+        },
+        {
+          active: true,
+          disabled: false,
+          class: [
+            "es:bg-accent-600 es:inset-ring-accent-800/5 es:text-white",
+            "es:from-accent-50/10 es:to-accent-50/2",
+            "es:inset-shadow-accent-50/35",
+            "es:group-focus-visible:inset-ring-accent-950"
+          ]
+        },
+        //
+        {
+          active: true,
+          disabled: true,
+          class: ["es:bg-secondary-400 es:inset-ring-secondary-400 es:text-white"]
+        },
+        {
+          active: false,
+          disabled: true,
+          class: ["es:bg-white es:inset-ring-secondary-300 es:text-secondary-50", "es:bg-linear-to-b es:from-secondary-800/0 es:to-secondary-800/3"]
+        }
+      ],
+      defaultVariants: {
+        flat: false,
+        active: false,
+        indeterminate: false,
+        checked: false,
+        disabled: false
+      }
+    }
+  );
   return /* @__PURE__ */ jsxs(
     $bc237834342dbd75$export$48513f6b9f8ce62d,
     {
@@ -254,10 +319,10 @@ const Checkbox2 = (props) => {
       isReadOnly: readOnly,
       isSelected: checked ?? false,
       onChange,
-      className: clsx("es:group es:flex es:w-full es:items-center es:gap-1.5 es:text-sm", className),
+      className: clsx("es:group es:flex es:w-full es:items-center es:gap-2", className),
       ...other,
       children: [
-        (icon || alignEnd) && (label || subtitle) && /* @__PURE__ */ jsx(
+        !alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
           RichLabel,
           {
             icon,
@@ -267,27 +332,20 @@ const Checkbox2 = (props) => {
             inlineSubtitle,
             fullSizeSubtitle: true,
             fullWidth: true,
-            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
+            as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            noColor: true
           }
         ),
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx(
-              "es:size-5 es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1 es:*:row-start-1 es:*:col-start-1",
-              "es:transition es:cursor-pointer",
-              "es:bg-radial es:border es:rounded-md",
-              "es:shadow-sm es:inset-ring es:inset-shadow-xs",
-              "es:any-focus:outline-hidden es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
-              !selectedOrIntermediate && "es:group-focus-visible:border-accent-500",
-              !selectedOrIntermediate && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
-              !selectedOrIntermediate && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
-              !selectedOrIntermediate && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
-              selectedOrIntermediate && "es:text-white es:from-accent-500 es:to-accent-600",
-              selectedOrIntermediate && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
-              selectedOrIntermediate && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
-              !alignEnd && subtitle && "es:mb-auto"
-            ),
+            className: checkboxClasses({
+              active: checked || indeterminate,
+              indeterminate,
+              checked,
+              disabled,
+              flat
+            }),
             children: [
               /* @__PURE__ */ jsx(
                 AnimatedVisibility,
@@ -295,7 +353,7 @@ const Checkbox2 = (props) => {
                   transition: "scaleRotateFade",
                   visible: indeterminate,
                   className: "es:transition-none",
-                  children: /* @__PURE__ */ jsx("div", { className: "es:h-0.5 es:w-3 es:rounded es:bg-white" })
+                  children: /* @__PURE__ */ jsx("div", { className: clsx("es:h-0.5 es:w-3 es:rounded-full es:bg-white", !disabled && "es:shadow-xs es:shadow-accent-950/30") })
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -303,7 +361,7 @@ const Checkbox2 = (props) => {
                 {
                   transition: "scaleRotateFade",
                   visible: !indeterminate && checked,
-                  className: "es:transition-none es:icon:size-4 es:icon:stroke-2",
+                  className: clsx("es:transition-none es:icon:size-4 es:icon:stroke-[2.5]", !disabled && "es:icon:drop-shadow-xs es:icon:drop-shadow-accent-950/30"),
                   noInitial: true,
                   children: icons.check
                 }
@@ -311,15 +369,16 @@ const Checkbox2 = (props) => {
             ]
           }
         ),
-        !icon && (label || subtitle) && /* @__PURE__ */ jsx(
+        alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
           RichLabel,
           {
             label,
             subtitle,
-            className: clsx(subtitle && "es:mt-0.5", "es:ml-0.5 es:*:space-y-0.5", labelClassName),
+            className: clsx(subtitle && "es:mt-1.25", labelClassName),
             inlineSubtitle,
             fullSizeSubtitle: true,
-            as: $01b77f81d0f07f68$export$b04be29aa201d4f5
+            as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            noColor: true
           }
         ),
         !(icon || label || subtitle) && children

package/dist/components/color-pickers/color-picker.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
-import { ColorSwatch } from "./color-swatch.js";
+import { C as ColorSwatch } from "../../color-swatch-CFIuSPcO.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -116,7 +116,8 @@ const ColorPicker = (props) => {
         ColorSwatch,
         {
           className: "es:size-5!",
-          color
+          color,
+          flat: true
         }
       ),
       onClick: () => onChange(slug),
@@ -128,7 +129,7 @@ const ColorPicker = (props) => {
           {
             label: name.replaceAll("-", " "),
             subtitle: color.toUpperCase(),
-            subtitleClassName: "es:font-mono"
+            subtitleClassName: "es:font-mono es:text-xs!"
           }
         )
       ]
@@ -189,7 +190,8 @@ const ColorPicker = (props) => {
               ColorSwatch,
               {
                 color: currentColor,
-                className: "es:size-6! es:shadow-none!"
+                className: "es:size-6!",
+                flat: true
               }
             ),
             !icon && type !== "default" && /* @__PURE__ */ jsxs("div", { className: "es:relative es:size-6 es:icon:absolute es:icon:inset-0 es:icon:size-full", children: [
@@ -198,7 +200,8 @@ const ColorPicker = (props) => {
                 ColorSwatch,
                 {
                   color: currentColor,
-                  className: "es:absolute es:-bottom-0.5 es:left-0 es:h-2! es:shadow-none!"
+                  className: "es:absolute es:-bottom-0.5 es:left-0 es:h-2!",
+                  flat: true
                 }
               )
             ] })
@@ -217,7 +220,13 @@ const ColorPicker = (props) => {
                 {
                   onClick: () => onChange(void 0),
                   selected: typeof value === "undefined",
-                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "es:size-5!" }),
+                  endIcon: /* @__PURE__ */ jsx(
+                    ColorSwatch,
+                    {
+                      className: "es:size-5!",
+                      flat: true
+                    }
+                  ),
                   children: clearItemLabel
                 }
               ),

package/dist/components/color-pickers/color-swatch.js

@@ -1,59 +1,7 @@
-import { jsx } from "react/jsx-runtime";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-xVS3rMYS.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-WxFE7lQB.js";
-/**
- * A simple color/gradient swatch.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {string} [props.color] - The color to display.
- * @param {string} [props.gradient] - The gradient to display.
- * @param {string} [props.className] - Additional clsx to apply.
- * @param {string} [props.colorName] - The name of the color. Should be auto-generated for colors.
- * @param {boolean} [props.customGradient=false] - Set to `true` if using a custom gradient.
- *
- * @returns {JSX.Element} The ColorSwatch component.
- *
- * @example
- * <ColorSwatch color="#FF0000" />
- *
- * @example
- * <ColorSwatch gradient="linear-gradient(45deg, #FF0000, #00FF00)" />
- *
- * @preserve
- */
-const ColorSwatch = (props) => {
-  const { color: rawColor, gradient, className, colorName, customGradient = false } = props;
-  const checkerPattern = "repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 0.75rem 0.75rem";
-  let color;
-  if (rawColor && !gradient && !customGradient) {
-    try {
-      if (rawColor === "transparent") {
-        color = "rgba(0, 0, 0, 0)";
-      } else {
-        color = $799cddbef784668f$export$6e865ea70d7724f(rawColor);
-      }
-    } catch (error) {
-      color = null;
-    }
-  }
-  const backgroundGradient = gradient ? `${gradient}, ${checkerPattern}` : `linear-gradient(${color}, ${color}), ${checkerPattern}`;
-  return /* @__PURE__ */ jsx(
-    $251c695a52d94a8d$export$cae13e90592f246a,
-    {
-      ...props,
-      style: {
-        background: (color || gradient) && backgroundGradient
-      },
-      className: () => clsx("es:size-6 es:rounded-md es:border es:border-secondary-300 es:shadow-sm", !color && !gradient && !customGradient && "es:bg-white", className),
-      colorName: !color && !gradient && !customGradient ? __("No color", "eightshift-ui-components") : colorName,
-      color,
-      children: !color && !gradient && !customGradient && /* @__PURE__ */ jsx("div", { className: "es:m-auto es:h-full es:w-px es:rotate-45 es:rounded-md es:bg-red-500" })
-    }
-  );
-};
+import "react/jsx-runtime";
+import { C } from "../../color-swatch-CFIuSPcO.js";
+import "../../lite-DVmmD_-j.js";
+import "../../default-i18n-CnQeC5Pl.js";
 export {
-  ColorSwatch
+  C as ColorSwatch
 };