@eightshift/ui-components 1.9.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightshift/ui-components",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -22,72 +22,74 @@
     "./icons": "./dist/icons/index.js",
     "./utilities": "./dist/utilities/index.js",
     "./dist/assets/style.css": "./dist/assets/style.css",
-    "./dist/assets/fonts.css": "./dist/assets/fonts.css",
+    "./dist/assets/style-editor.css": "./dist/assets/style-editor.css",
     "./dist/assets/wp-font-enhancements.css": "./dist/assets/wp-font-enhancements.css",
     "./dist/assets/wp-ui-enhancements.css": "./dist/assets/wp-ui-enhancements.css",
     "./styles": "./dist/assets/style.css",
-    "./fonts": "./dist/assets/fonts.css",
     "./wp-font-enhancements": "./dist/assets/wp-font-enhancements.css",
     "./wp-ui-enhancements": "./dist/assets/wp-ui-enhancements.css",
     "./wp-overrides": "./dist/assets/wp.css"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "dependencies": {
-    "@dnd-kit/abstract": "^0.0.5",
-    "@dnd-kit/dom": "^0.0.5",
-    "@dnd-kit/helpers": "^0.0.5",
-    "@dnd-kit/react": "^0.0.5",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-jsx-parser": "^2.2.2",
-    "react-movable": "^3.3.1",
-    "svg-to-jsx-string": "^0.1.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@adobe/react-spectrum": "^3.38.1",
+    "@adobe/react-spectrum": "^3.39.0",
+    "@dnd-kit/abstract": "^0.0.6",
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/dom": "^0.0.6",
+    "@dnd-kit/helpers": "^0.0.6",
     "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/react": "^0.0.6",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@eslint/compat": "^1.2.4",
-    "@react-stately/collections": "^3.12.0",
-    "@stylistic/eslint-plugin-js": "^2.12.1",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.2",
+    "@eslint/compat": "^1.2.5",
+    "@react-stately/collections": "^3.12.1",
+    "@stylistic/eslint-plugin-js": "^3.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.7.2",
-    "@wordpress/i18n": "^5.14.0",
+    "@wordpress/i18n": "^5.16.0",
     "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "css-gradient-parser": "^0.0.16",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jsdoc": "^50.6.1",
-    "eslint-plugin-prettier": "^5.2.1",
-    "glob": "^11.0.0",
-    "globals": "^15.13.0",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-jsdoc": "^50.6.3",
+    "eslint-plugin-prettier": "^5.2.3",
+    "glob": "^11.0.1",
+    "globals": "^15.14.0",
     "just-camel-case": "^6.2.0",
     "just-debounce-it": "^3.2.0",
     "just-has": "^2.3.0",
     "just-is-empty": "^3.4.1",
     "just-kebab-case": "^4.2.0",
     "just-throttle": "^4.2.0",
-    "lightningcss": "^1.28.2",
-    "postcss": "^8.4.49",
+    "lightningcss": "^1.29.1",
+    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "react-aria": "^3.36.0",
-    "react-aria-components": "^1.5.0",
-    "react-select": "^5.9.0",
-    "react-stately": "^3.34.0",
-    "tailwindcss": "^3.4.16",
-    "tailwindcss-animate": "^1.0.7",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "react": "^18.3.1",
+    "react-aria": "^3.37.0",
+    "react-aria-components": "^1.6.0",
+    "react-dom": "^18.3.1",
+    "react-jsx-parser": "^2.2.2",
+    "react-movable": "^3.4.0",
+    "react-select": "^5.10.0",
+    "react-stately": "^3.35.0",
+    "svg-to-jsx-string": "^0.1.1",
+    "tailwindcss": "^4.0.0",
+    "tailwindcss-motion": "^1.0.1",
     "tailwindcss-react-aria-components": "^1.2.0",
-    "tailwindcss-scoped-preflight": "^3.4.10",
-    "vite": "^6.0.3",
-    "vite-plugin-lib-inject-css": "^2.1.1"
+    "vite": "^6.0.11",
+    "vite-plugin-lib-inject-css": "^2.2.1"
+  },
+  "dependencies": {
+    "@fontsource-variable/geist": "^5.0.1",
+    "@fontsource-variable/geist-mono": "^5.0.1"
   },
   "scripts": {
     "dev": "vite",

package/dist/assets/fonts.css

@@ -1 +0,0 @@
-@font-face{font-family:Geist;src:url(../GeistVF.woff2)}@font-face{font-family:Geist Mono;src:url(../GeistMonoVF.woff2)}

package/dist/components/list-box/list-box.js

@@ -1,157 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-BMpo-Cem.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-/**
- * A component that allows selecting a single or multiple options from a list.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - Icon to display in the label.
- * @param {string} [props.label] - Label to display.
- * @param {string} [props.subtitle] - Subtitle to display.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the header.
- * @param {string} [props.help] - Help text to display below the list.
- * @param {boolean} [props.inline] - If `true`, the list is displayed inline with the label.
- * @param {Object[]} props.options - The list of options to display.
- * @param {string} props.options[].value - The value of the option. Should be unique!
- * @param {string} [props.options[].label] - The label of the option.
- * @param {JSX.Element} [props.options[].icon] - The icon of the option.
- * @param {string} [props.options[].subtitle] - The subtitle of the option.
- * @param {string} [props.options[].tooltip] - The tooltip text of the option.
- * @param {boolean} [props.options[].disabled] - If `true`, the option is cannot be selected.
- * @param {ListBoxSelectionMode} [props.selectionMode='single'] - The selection mode.
- * @param {string} props.value - The currently selected value.
- * @param {Function} props.onChange - Function to run when the selection changes.
- * @param {boolean} [props.canDeselect=false] - If `true`, the selected value can be deselected (`null` is set in that case).
- * @param {ListBoxOrientation} [props.orientation='horizontal'] - The orientation of the list. If all options have only an icon set, the orientation is forced to be horizontal.
- * @param {string} [props.className] - Classes to pass to the list.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The ListBox component.
- *
- * @typedef {'single' | 'multiple'} ListBoxSelectionMode
- * @typedef {'horizontal' | 'vertical' | 'horizontal-tiles'} ListBoxOrientation
- *
- * @example
- * <ListBox
- * 	label='My list'
- * 	options={[
- * 		{ value: 'option1', label: 'Option 1' },
- * 		{ value: 'option2', label: 'Option 2' },
- * 	]}
- * 	value={selectedValue}
- * 	onChange={setSelectedValue}
- * />
- *
- * @preserve
- */
-const ListBox = (props) => {
-  const {
-    icon,
-    label,
-    subtitle,
-    actions,
-    help,
-    inline,
-    options,
-    "aria-label": ariaLabel,
-    selectionMode = "single",
-    value,
-    onChange,
-    canDeselect = false,
-    orientation: setOrientation = "horizontal",
-    className,
-    hidden,
-    ...rest
-  } = props;
-  if (hidden) {
-    return null;
-  }
-  const mappedOptions = options.map((option) => ({
-    ...option,
-    id: option.id ?? option.value
-  }));
-  let orientation = setOrientation;
-  if (options.every(({ icon: icon2, label: label2, subtitle: subtitle2 }) => icon2 && !label2 && !subtitle2)) {
-    orientation = "horizontal";
-  }
-  let orientationPropValue = orientation;
-  if (orientation === "horizontal-tiles") {
-    orientationPropValue = "horizontal";
-  }
-  return /* @__PURE__ */ jsx(
-    BaseControl,
-    {
-      icon,
-      label,
-      subtitle,
-      actions,
-      inline,
-      help,
-      children: /* @__PURE__ */ jsx(
-        $eed445e0843c11d0$export$41f133550aa26f48,
-        {
-          selectionMode,
-          className: clsx(
-            "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-p-1 es-uic-text-sm es-uic-shadow-sm es-uic-transition",
-            "focus:es-uic-outline-none",
-            orientation === "horizontal" && "es-uic-flex es-uic-w-fit es-uic-max-w-full es-uic-gap-0.5",
-            orientation === "vertical" && "es-uic-flex es-uic-flex-col es-uic-gap-0.5",
-            orientation === "horizontal-tiles" && "es-uic-grid es-uic-min-h-20 es-uic-w-fit es-uic-max-w-full es-uic-auto-cols-[fit-content(6rem)] es-uic-grid-rows-[1fr,_minmax(auto,_0.5fr),_auto] es-uic-gap-x-0.5",
-            className
-          ),
-          "aria-label": ariaLabel ?? __("Choose", "eightshift-ui-components"),
-          items: mappedOptions,
-          disallowEmptySelection: !canDeselect,
-          orientation: orientationPropValue,
-          selectedKeys: [value],
-          onSelectionChange: (key) => {
-            onChange((key == null ? void 0 : key.currentKey) ?? (key == null ? void 0 : key.anchorKey));
-          },
-          ...rest,
-          children: (item) => {
-            const { label: label2, icon: icon2, subtitle: subtitle2, tooltip, disabled } = item;
-            return /* @__PURE__ */ jsx(
-              $eed445e0843c11d0$export$a11e76429ed99b4,
-              {
-                textValue: label2 ?? tooltip,
-                isDisabled: disabled,
-                className: ({ isDisabled, isSelected }) => {
-                  return clsx(
-                    "es-uic-flex es-uic-min-h-9 es-uic-select-none es-uic-rounded-md es-uic-border es-uic-transition",
-                    "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
-                    isSelected && !disabled && "es-uic-border es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white es-uic-shadow-md es-uic-shadow-teal-500/25 after:es-uic-opacity-45",
-                    isSelected && !disabled && 'es-uic-relative es-uic-isolate after:es-uic-absolute after:es-uic-inset-0 after:-es-uic-z-10 after:es-uic-rounded-[0.3125rem] after:es-uic-bg-gradient-to-br after:es-uic-from-teal-100/40 after:es-uic-via-transparent after:es-uic-to-teal-200/50 after:es-uic-opacity-0 after:es-uic-transition-opacity after:es-uic-content-[""]',
-                    !isSelected && !disabled && "es-uic-border-transparent hover:es-uic-bg-gray-100",
-                    isDisabled && "es-uic-border-transparent es-uic-opacity-30 es-uic-grayscale",
-                    orientation !== "horizontal-tiles" && "es-uic-px-2 es-uic-py-1.5",
-                    icon2 && !label2 && !subtitle2 && "es-uic-size-9 !es-uic-p-1.5",
-                    orientation === "horizontal-tiles" && "es-uic-row-start-1 es-uic-row-end-4 es-uic-grid es-uic-min-w-18 es-uic-grid-rows-subgrid es-uic-items-center es-uic-justify-items-center es-uic-p-1.5 es-uic-text-center es-uic-leading-tight",
-                    orientation === "horizontal-tiles" && subtitle2 && "[&_svg]:es-uic-mb-1"
-                  );
-                },
-                children: /* @__PURE__ */ jsx(
-                  RichLabel,
-                  {
-                    icon: icon2,
-                    label: label2,
-                    subtitle: subtitle2,
-                    className: clsx(orientation === "horizontal" && "leading-none"),
-                    contentsOnly: orientation === "horizontal-tiles",
-                    noColor: true
-                  }
-                )
-              }
-            );
-          }
-        }
-      )
-    }
-  );
-};
-export {
-  ListBox
-};

package/dist/fonts.js

@@ -1 +0,0 @@
-import './assets/fonts.css';