@eightshift/ui-components 6.0.3 → 6.0.5

package/dist/components/select/single-select.js

@@ -7,13 +7,14 @@ import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNk
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-Dd37zMvs.js";
 import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D8bjn-nh.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DwjRce5e.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DOxXagm0.js";
 import { useRef, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
+import { randomId } from "../../utilities/hash.js";
 import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-bhxeEDg8.js";
 /**
  * Select menu.
@@ -97,6 +98,19 @@ const Select = (props) => {
   if (hidden) {
     return null;
   }
+  const buttonClass = cva("es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", {
+    variants: {
+      size: {
+        small: ["es:min-h-8", "es:px-2.5"],
+        medium: ["es:min-h-9", "es:px-3"],
+        default: ["es:min-h-10", "es:px-3"],
+        large: ["es:min-h-12", "es:px-4"]
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  });
   const selectClass = cva(
     [
       "es:relative",
@@ -116,12 +130,6 @@ const Select = (props) => {
     ],
     {
       variants: {
-        size: {
-          small: ["es:min-h-8", "es:px-2.5"],
-          medium: ["es:min-h-9", "es:px-3"],
-          default: ["es:min-h-10", "es:px-3"],
-          large: ["es:min-h-12", "es:px-4"]
-        },
         disabled: {
           false: "es:selection:bg-surface-100 es:selection:text-accent-800",
           true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
@@ -209,8 +217,8 @@ const Select = (props) => {
                 className: selectClass({ disabled, flat, size }),
                 ref,
                 children: [
-                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
-                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ isPlaceholder, selectedItems }) => {
+                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: buttonClass({ size }), children: [
+                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "es:pointer-events-none", children: ({ isPlaceholder, selectedItems }) => {
                       const [selectedItem] = selectedItems;
                       if (!isPlaceholder && currentValue && customValueDisplay) {
                         return customValueDisplay(selectedItem);
@@ -301,9 +309,9 @@ const Select = (props) => {
                             {
                               placeholder: __("Search...", "eightshift-ui-components"),
                               className: clsx(
-                                "es:peer es:size-full es:h-9.5 es:outline-hidden es:pl-3.5 es:pr-9 es:shadow-none es:text-13 es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none",
-                                "es:inset-ring es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
+                                "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
+                                "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
+                                "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
                                 "es:text-accent-950 es:placeholder:text-accent-700/50",
                                 "es:transition"
                               )
@@ -315,7 +323,7 @@ const Select = (props) => {
                               "aria-label": __("Clear", "eightshift-ui-components"),
                               className: clsx(
                                 "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
-                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
                                 "es:peer-placeholder-shown:opacity-0"
                               ),
                               children: icons.clearAlt
@@ -348,7 +356,7 @@ const Select = (props) => {
                           return /* @__PURE__ */ jsxs(
                             OptionItemBase,
                             {
-                              id: item.value,
+                              id: item?.value ?? randomId(8),
                               className: item?.className,
                               selectIndicator: true,
                               children: [

package/dist/components/slider/column-config-slider.js

@@ -141,8 +141,8 @@ const ColumnConfigSlider = (props) => {
                         "es:transition es:duration-300",
                         !flat && !disabled && "es:shadow-xs es:shadow-black/5",
                         "es:mx-1.25",
-                        value[0] === 1 && "es:ml-4.25",
-                        value[1] === columns && "es:mr-4.25",
+                        value[0] === 1 && "es:ml-1.75",
+                        value[1] === columns && "es:mr-1.75",
                         !disabled && [
                           "es:bg-accent-500 es:bg-linear-to-b es:from-accent-100/15 es:to-accent-100/0 es:from-25%",
                           "es:inset-ring es:inset-ring-accent-700/10",
@@ -165,8 +165,8 @@ const ColumnConfigSlider = (props) => {
                           "es:transition es:duration-300 es:ease-spring-smooth",
                           marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-900" : "es:text-surface-400",
                           disabled && "es:opacity-0",
-                          !disableOffset && index === 0 && value[0] === 2 && "es:-translate-x-0.25",
-                          !disableWidth && index === columns - 1 && value[1] === columns - 1 && "es:translate-x-0.25",
+                          !disableOffset && index === 0 && value[0] === 2 && "es:-translate-x-px",
+                          !disableWidth && index === columns - 1 && value[1] === columns - 1 && "es:translate-x-px",
                           !disableOffset && index === 0 && value[0] === 1 && "es:opacity-0 es:scale-50",
                           !disableWidth && index === columns - 1 && value[1] === columns && "es:opacity-0 es:scale-50"
                         ),
@@ -221,7 +221,10 @@ const ColumnConfigSlider = (props) => {
                           !disabled && "es:hover:not-dragging:cursor-grab",
                           i === 0 && disableOffset && "es:hidden",
                           i === 1 && disableWidth && "es:hidden",
-                          "es:justify-self-center",
+                          i === 0 && state.values[0] === 1 && "es:justify-self-start",
+                          i === 0 && state.values[0] > 1 && "es:justify-self-center",
+                          i === 1 && state.values[1] < columns && "es:justify-self-center",
+                          i === 1 && state.values[1] === columns && "es:justify-self-end",
                           !flat && !disabled && "es:shadow-xs es:shadow-black/5"
                         ),
                         style: {

package/dist/components/smart-image/smart-image.js

@@ -1,6 +1,6 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { useState, useRef, useEffect, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
@@ -8,7 +8,7 @@ import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { useImageAnalysisWorker } from "../../utilities/web-workers.js";
 import workerInline from "./worker-inline.js";
 import { cyrb64Hash } from "../../utilities/hash.js";
-import { a as analyzeImage } from "../../general-lYMgCPqJ.js";
+import { b as analyzeImage } from "../../general-ChNQK6O9.js";
 /**
  * @typedef {Object} CustomImageProps
  * @property {JSX.Element} [props.renderError] - Component to render if image analysis fails. `(error) => JSX:Element`.
@@ -167,7 +167,33 @@ const SmartImage = (props) => {
   if (error && renderError) {
     return renderError(error);
   } else if (error) {
-    return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center-safe es:p-2 es:motion-preset-fade", errorClassName), children: /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" }) }) });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          typeof children !== "function" && "es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center-safe es:p-2",
+          "es:motion-preset-fade",
+          errorClassName
+        ),
+        children: [
+          typeof children !== "function" && /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" }) }),
+          typeof children === "function" ? children({
+            image: cloneElement(imageElement, { crossOrigin: null }),
+            hasAnalysed: true,
+            isTransparent: false,
+            hasError: true,
+            errorBadge: /* @__PURE__ */ jsx(
+              DecorativeTooltip,
+              {
+                wrapperClassName: "es:size-8 es:-translate-y-4 es:m-auto",
+                text: __("Error loading image", "eightshift-ui-components"),
+                children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" })
+              }
+            )
+          }) : cloneElement(imageElement, { crossOrigin: null })
+        ]
+      }
+    );
   }
   if (!children) {
     return imageElement;

package/dist/components/spacer/spacer.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * A simple spacer/divider component, with optional text or icon.

package/dist/components/tabs/tabs.js

@@ -16,7 +16,7 @@ import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRi
 import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-BBTu4shO.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { Notice } from "../notice/notice.js";
 import { RichLabel } from "../rich-label/rich-label.js";
@@ -691,7 +691,7 @@ const Tab = (props) => {
     [
       "es:group es:relative es:shrink-0",
       "es:flex es:items-center es:gap-1.5",
-      "es:select-none es:not-disabled:cursor-pointer",
+      "es:select-none",
       "es:transition-plus es:text-center es:text-12 es:leading-[1.15] es:text-box-trim",
       "es:any-focus:outline-hidden",
       "es:contrast-more:inset-ring es:contrast-more:inset-ring-accent-500/0 es:contrast-more:focus-visible:inset-ring-accent-500",

package/dist/components/toggle/switch.js

@@ -125,7 +125,7 @@ const Switch2 = (props) => {
           default: "es:h-6 es:w-10 es:p-1"
         },
         disabled: {
-          false: [!flat && "es:shadow-xs es:shadow-black/5", "es:cursor-pointer"]
+          false: [!flat && "es:shadow-xs es:shadow-black/5"]
         }
       },
       compoundVariants: [

package/dist/components/toggle/toggle.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { Switch } from "./switch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * A toggle switch with a label and optional icon and subtitle.
  *

package/dist/components/toggle-button/toggle-button.js

@@ -186,7 +186,6 @@ const ToggleButton2 = (props) => {
       "es:text-box-trim",
       "es:leading-none",
       "es:icon:size-5",
-      !disabled && "es:cursor-pointer",
       icon && children ? "es:justify-start" : "es:justify-center-safe",
       className
     ],

package/dist/components/tooltip/tooltip.js

@@ -6,7 +6,7 @@ import { w as $6179b936705e76d3$export$ae780daf29e6d456, $ as $f645667febf57a63$
 import $dbSRa$react__default, { useContext, useState, useMemo, useRef, useEffect, forwardRef, createContext } from "react";
 import { a as $96b38030c423d352$export$9fc1347d4195ccb3 } from "../../PortalProvider-CHPnqDSH.js";
 import { $ as $dbSRa$reactdom } from "../../index-oFgxU4zs.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 const $f57aed4a881a3485$var$Context = /* @__PURE__ */ $dbSRa$react__default.createContext(null);
 function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
   let { children } = props;

package/dist/{general-lYMgCPqJ.js → general-ChNQK6O9.js}

@@ -4367,10 +4367,10 @@ const analyzeImageData = ({ buffer, imageData, width, height, settings, skipTran
 };
 export {
   FLOAT_RGBA as F,
-  analyzeImage as a,
-  analyzeImageAsync as b,
-  checkTransparency as c,
-  analyzeImageData as d,
+  analyzeImageData as a,
+  analyzeImage as b,
+  analyzeImageAsync as c,
+  checkTransparency as d,
   floatBufferFromCanvas as f,
   getFileExtension as g,
   isColorDark as i,

package/dist/icons/spinner.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../lite-DVmmD_-j.js";
+import { c as clsx } from "../clsx-DgYk2OaC.js";
 /**
  * A simple loading indicator.
  *

package/dist/index.js

@@ -5,7 +5,7 @@ import { Button, ButtonGroup } from "./components/button/button.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
 import { ComponentToggle } from "./components/component-toggle/component-toggle.js";
 import { ContainerPanel } from "./components/container-panel/container-panel.js";
-import { C } from "./color-swatch-CFIuSPcO.js";
+import { C } from "./color-swatch-BEBLRxTy.js";
 import { ColorPicker } from "./components/color-pickers/color-picker.js";
 import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./components/slider/column-config-slider.js";
 import { Container, ContainerGroup } from "./components/base-control/container.js";

package/dist/utilities/general.js

@@ -1,10 +1,10 @@
 import "./hash.js";
-import { a, b, d, c, g, i } from "../general-lYMgCPqJ.js";
+import { b, c, a, d, g, i } from "../general-ChNQK6O9.js";
 export {
-  a as analyzeImage,
-  b as analyzeImageAsync,
-  d as analyzeImageData,
-  c as checkTransparency,
+  b as analyzeImage,
+  c as analyzeImageAsync,
+  a as analyzeImageData,
+  d as checkTransparency,
   g as getFileExtension,
   i as isColorDark
 };

package/dist/utilities/hash.js

@@ -24,7 +24,16 @@ const cyrb64Hash = (str, seed = 0) => {
   const [h2, h1] = cyrb64(str, seed);
   return h2.toString(36).padStart(7, "0") + h1.toString(36).padStart(7, "0");
 };
+const randomId = (length) => {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+};
 export {
   cyrb64Hash,
+  randomId,
   simpleHash
 };

package/dist/utilities/index.js

@@ -2,17 +2,22 @@ import { arrayMoveMultiple, fixIds } from "./array-helpers.js";
 import { camelCase, has, isEmpty, isEqual, isObject, isPlainObject, isString, kebabCase, lowerFirst, pascalCase, snakeCase, upperFirst } from "./es-dash.js";
 import { truncate, truncateEnd, truncateMiddle, unescapeHTML } from "./text-helpers.js";
 import { debounce, throttle } from "./debounce-throttle.js";
-import { a, b, d, c, g, i } from "../general-lYMgCPqJ.js";
-import { c as c2 } from "../lite-DVmmD_-j.js";
-import { cyrb64Hash, simpleHash } from "./hash.js";
+import { b, c, a, d, g, i } from "../general-ChNQK6O9.js";
+import { c as c2 } from "../clsx-DgYk2OaC.js";
+import { cyrb64Hash, randomId, simpleHash } from "./hash.js";
+function clsx() {
+  for (var t, r = 0, e = "", n = arguments.length; r < n; r++) (t = arguments[r]) && "string" == typeof t && (e += (e && " ") + t);
+  return e;
+}
 export {
-  a as analyzeImage,
-  b as analyzeImageAsync,
-  d as analyzeImageData,
+  b as analyzeImage,
+  c as analyzeImageAsync,
+  a as analyzeImageData,
   arrayMoveMultiple,
   camelCase,
-  c as checkTransparency,
-  c2 as clsx,
+  d as checkTransparency,
+  clsx,
+  c2 as clsxFull,
   cyrb64Hash,
   debounce,
   fixIds,
@@ -27,6 +32,7 @@ export {
   kebabCase,
   lowerFirst,
   pascalCase,
+  randomId,
   simpleHash,
   snakeCase,
   throttle,

package/dist/workers/image-analysis.worker.js

@@ -1,4 +1,4 @@
-import { f as floatBufferFromCanvas, d as analyzeImageData, F as FLOAT_RGBA } from "../general-lYMgCPqJ.js";
+import { f as floatBufferFromCanvas, a as analyzeImageData, F as FLOAT_RGBA } from "../general-ChNQK6O9.js";
 self.onmessage = async (event) => {
   const { imageBitmap, settings } = event.data;
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "6.0.3",
+	"version": "6.0.5",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -62,14 +62,14 @@
 		"@react-stately/collections": "^3.12.8",
 		"@stylistic/eslint-plugin-js": "^4.4.1",
 		"@tailwindcss/vite": "^4.1.17",
-		"@thi.ng/color": "^5.8.3",
-		"@thi.ng/pixel": "^7.5.17",
-		"@thi.ng/pixel-analysis": "^2.0.18",
-		"@thi.ng/pixel-dominant-colors": "^2.0.22",
+		"@thi.ng/color": "^5.8.4",
+		"@thi.ng/pixel": "^7.5.18",
+		"@thi.ng/pixel-analysis": "^2.0.19",
+		"@thi.ng/pixel-dominant-colors": "^2.0.23",
 		"@types/react": "^18.3.27",
 		"@types/react-dom": "^18.3.7",
 		"@vitejs/plugin-react-swc": "^4.2.2",
-		"@wordpress/i18n": "^6.8.0",
+		"@wordpress/i18n": "^6.9.0",
 		"autoprefixer": "^10.4.22",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -88,7 +88,7 @@
 		"just-throttle": "^4.2.0",
 		"lightningcss": "^1.30.2",
 		"postcss": "^8.5.6",
-		"prettier": "^3.6.2",
+		"prettier": "^3.7.0",
 		"prettier-plugin-tailwindcss": "^0.7.1",
 		"react": "^18.3.1",
 		"react-aria": "^3.44.0",

package/dist/lite-DVmmD_-j.js

@@ -1,7 +0,0 @@
-function clsx() {
-  for (var t, r = 0, e = "", n = arguments.length; r < n; r++) (t = arguments[r]) && "string" == typeof t && (e += (e && " ") + t);
-  return e;
-}
-export {
-  clsx as c
-};

package/dist/{shared-DwjRce5e.js → shared-DOxXagm0.js}

@@ -23,8 +23,8 @@ import { $ as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-W
 import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "./VisuallyHidden-DTUuKFiI.js";
 import { icons } from "./icons/icons.js";
 import "./react-jsx-parser.min-B_hvYYa1.js";
-import { AnimatedVisibility } from "./components/animated-visibility/animated-visibility.js";
 import { c as clsx } from "./clsx-DgYk2OaC.js";
+import { AnimatedVisibility } from "./components/animated-visibility/animated-visibility.js";
 function $33bf17300c498528$export$a2f47a3d2973640(options = {}) {
   let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
   return useMemo(() => new Intl.ListFormat(locale, options), [