@eightshift/ui-components 0.0.2 → 0.0.4

package/dist/components/breakpoint-preview/breakpoint-preview.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 import { c as clsx } from "../../lite-pbIeT7tm.js";
-import { upperFirst } from "../../utilities/text-helpers.js";
+import { upperFirst } from "../../utilities/es-dash.js";
 /**
  * Component that renders a preview of the breakpoints to help users visualize the options they set.
  *

package/dist/components/index.js

@@ -0,0 +1,117 @@
+import { AnimatedVisibility } from "./animated-visibility/animated-visibility.js";
+import { BaseControl } from "./base-control/base-control.js";
+import { BreakpointPreview } from "./breakpoint-preview/breakpoint-preview.js";
+import { B, a } from "../button-idVI4jmd.js";
+import { Checkbox } from "./checkbox/checkbox.js";
+import { ComponentToggle } from "./component-toggle/component-toggle.js";
+import { ContainerPanel } from "./container-panel/container-panel.js";
+import { ColorSwatch } from "./color-pickers/color-swatch.js";
+import { ColorPicker } from "./color-pickers/color-picker.js";
+import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./slider/column-config-slider.js";
+import { DraggableList } from "./draggable-list/draggable-list.js";
+import { DraggableListItem } from "./draggable-list/draggable-list-item.js";
+import { Expandable } from "./expandable/expandable.js";
+import { FilePlaceholder } from "./placeholders/file-placeholder.js";
+import { GradientEditor } from "./color-pickers/gradient-editor.js";
+import { HStack } from "./layout/hstack.js";
+import { RichLabel } from "./rich-label/rich-label.js";
+import { InputField } from "./input-field/input-field.js";
+import { ImagePlaceholder } from "./placeholders/image-placeholder.js";
+import { LinkInput } from "./link-input/link-input.js";
+import { ListBox } from "./list-box/list-box.js";
+import { MatrixAlign } from "./matrix-align/matrix-align.js";
+import { MediaPlaceholder } from "./placeholders/media-placeholder.js";
+import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./menu/menu.js";
+import { Notice } from "./notice/notice.js";
+import { NumberPicker } from "./number-picker/number-picker.js";
+import { P, T } from "../popover-o2Q28Ljn.js";
+import { RadioButton, RadioButtonGroup } from "./radio/radio.js";
+import { Repeater } from "./repeater/repeater.js";
+import { RepeaterItem } from "./repeater/repeater-item.js";
+import { Responsive } from "./responsive/responsive.js";
+import { ResponsiveLegacy } from "./responsive/responsive-legacy.js";
+import { ResponsivePreview } from "./responsive-preview/responsive-preview.js";
+import { AsyncMultiSelect } from "./select/async-multi-select.js";
+import { AsyncSelect } from "./select/async-single-select.js";
+import { MultiSelect } from "./select/multi-select.js";
+import { RSClearIndicator, RSDropdownIndicator, RSMultiValue, RSMultiValueContainer, RSMultiValueLabel, RSMultiValueRemove, RSOption, RSSingleValue } from "./select/react-select-component-wrappers.js";
+import { OptionSelect } from "./option-select/option-select.js";
+import { Select } from "./select/single-select.js";
+import { Slider } from "./slider/slider.js";
+import { SolidColorPicker } from "./color-pickers/solid-color-picker.js";
+import { Spacer } from "./spacer/spacer.js";
+import { Tab, TabList, TabPanel, Tabs } from "./tabs/tabs.js";
+import { Toggle } from "./toggle/toggle.js";
+import { Switch } from "./toggle/switch.js";
+import { ToggleButton } from "./toggle-button/toggle-button.js";
+import { D, T as T2 } from "../tooltip-T6H9uF-Z.js";
+import { VStack } from "./layout/vstack.js";
+export {
+  AnimatedVisibility,
+  AsyncMultiSelect,
+  AsyncSelect,
+  BaseControl,
+  BreakpointPreview,
+  B as Button,
+  a as ButtonGroup,
+  Checkbox,
+  ColorPicker,
+  ColorSwatch,
+  ColumnConfigSlider,
+  ColumnConfigSliderOutput,
+  ComponentToggle,
+  ContainerPanel,
+  D as DecorativeTooltip,
+  DraggableList,
+  DraggableListItem,
+  Expandable,
+  FilePlaceholder,
+  GradientEditor,
+  HStack,
+  ImagePlaceholder,
+  InputField,
+  LinkInput,
+  ListBox,
+  MatrixAlign,
+  MediaPlaceholder,
+  Menu,
+  MenuItem,
+  MenuSection,
+  MenuSeparator,
+  MultiSelect,
+  Notice,
+  NumberPicker,
+  OptionSelect,
+  P as Popover,
+  RSClearIndicator,
+  RSDropdownIndicator,
+  RSMultiValue,
+  RSMultiValueContainer,
+  RSMultiValueLabel,
+  RSMultiValueRemove,
+  RSOption,
+  RSSingleValue,
+  RadioButton,
+  RadioButtonGroup,
+  Repeater,
+  RepeaterItem,
+  Responsive,
+  ResponsiveLegacy,
+  ResponsivePreview,
+  RichLabel,
+  Select,
+  Slider,
+  SolidColorPicker,
+  Spacer,
+  SubMenuItem,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  Toggle,
+  ToggleButton,
+  T2 as Tooltip,
+  T as TriggeredPopover,
+  VStack
+};

package/dist/components/matrix-align/matrix-align.js

@@ -4,7 +4,7 @@ import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 import { P as Popover } from "../../popover-o2Q28Ljn.js";
 import { B as Button } from "../../button-idVI4jmd.js";
 import { icons } from "../../icons/icons.js";
-import { upperFirst, camelCase } from "../../utilities/text-helpers.js";
+import { upperFirst, camelCase } from "../../utilities/es-dash.js";
 import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { T as Tooltip } from "../../tooltip-T6H9uF-Z.js";
 import { BaseControl } from "../base-control/base-control.js";

package/dist/components/repeater/repeater.js

@@ -99,7 +99,6 @@ const Repeater = (props) => {
   const onChange = (items2) => {
     const currentItems = [...items2];
     currentItems.forEach((item) => delete item.key);
-    console.log(items2, currentItems);
     rawOnChange(currentItems);
   };
   const list = {

package/dist/components/responsive/responsive-legacy.js

@@ -4,7 +4,7 @@ import { D as DecorativeTooltip } from "../../tooltip-T6H9uF-Z.js";
 import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
-import { upperFirst } from "../../utilities/text-helpers.js";
+import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";
 import { B as Button } from "../../button-idVI4jmd.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";

package/dist/components/responsive/responsive.js

@@ -4,7 +4,7 @@ import { D as DecorativeTooltip } from "../../tooltip-T6H9uF-Z.js";
 import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
-import { upperFirst } from "../../utilities/text-helpers.js";
+import { upperFirst } from "../../utilities/es-dash.js";
 import { icons } from "../../icons/icons.js";
 import { Menu, MenuItem, MenuSeparator, SubMenuItem } from "../menu/menu.js";
 import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";

package/dist/components/responsive-preview/responsive-preview.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
-import { upperFirst } from "../../utilities/text-helpers.js";
+import { upperFirst } from "../../utilities/es-dash.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";

package/dist/components/tabs/tabs.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { f as $880e95eb8b93ba9a$export$ecf600387e221c37, c as $ae20dd8cbca75726$export$d6daf82dcd84e87c, g as $7135fc7d473fd974$export$7cd71aa5ddd6dc4e, h as $7135fc7d473fd974$export$8c25dea96356a8b6, i as $7135fc7d473fd974$export$813b5978dd974d8, j as $7135fc7d473fd974$export$e7c29ae2353b16ea } from "../../SelectionManager-sedvcM-1.js";
 import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$86427a43e3e48ebb, a as $64fa3d84918910a7$export$29f1550f4b0d4415, p as $64fa3d84918910a7$export$8dc98ba7eadeaa56, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-DIBzm1e4.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
@@ -13,6 +13,7 @@ import { $ as $83013635b024ae3d$export$eac1895992b9f3d6 } from "../../useHasTabb
 import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
 import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { Notice } from "../notice/notice.js";
+import { RichLabel } from "../rich-label/rich-label.js";
 const $99b62ae3ff97ec45$export$c5f62239608282b6 = /* @__PURE__ */ new WeakMap();
 function $99b62ae3ff97ec45$export$567fc7097e064344(state, key, role) {
   if (typeof key === "string")
@@ -558,6 +559,9 @@ TabList.displayName = "TabList";
  * @param {Object} props - Component props.
  * @param {boolean} [props.disabled] - Whether the tab is disabled.
  * @param {string} [props.className] - Classes to pass to the tab.
+ * @param {JSX.Element} [props.icon] - Icon to show on the tab.
+ * @param {string} [props.label] - Tab label. **Note**: overrides inner items!
+ * @param {string} [props.subtitle] - Tab subtitle. **Note**: overrides inner items!
  *
  * @returns {JSX.Element} The Tab component.
  *
@@ -566,8 +570,8 @@ TabList.displayName = "TabList";
  * @preserve
  */
 const Tab = (props) => {
-  const { children, disabled, isParentVertical, className, ...other } = props;
-  return /* @__PURE__ */ jsx(
+  const { children, disabled, isParentVertical, className, icon, label, subtitle, ...other } = props;
+  return /* @__PURE__ */ jsxs(
     $5e8ad37a45e1c704$export$3e41faf802a29e71,
     {
       ...other,
@@ -589,7 +593,26 @@ const Tab = (props) => {
           className
         );
       },
-      children
+      children: [
+        !label && children,
+        !label && !icon && children,
+        !label && icon && children && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label: children
+          }
+        ),
+        !icon && !subtitle && label,
+        (icon || subtitle) && label && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label,
+            subtitle
+          }
+        )
+      ]
     }
   );
 };

package/dist/icons/icons.js

@@ -3197,6 +3197,14 @@ const icons = {
   slider: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
     /* @__PURE__ */ jsx("path", { d: "M1 10h5m13 0h-9", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
     /* @__PURE__ */ jsx("rect", { x: "6.5", y: "7.5", width: "3", height: "5", rx: "1", fill: "currentColor", fillOpacity: "0.12", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  header: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M19 17V4.5A1.5 1.5 0 0 0 17.5 3h-15A1.5 1.5 0 0 0 1 4.5V17", stroke: "currentColor", strokeLinecap: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 4.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-3Z", fill: "currentColor", fillOpacity: "0.5" })
+  ] }),
+  footer: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 3v12.5A1.5 1.5 0 0 0 2.5 17h15a1.5 1.5 0 0 0 1.5-1.5V3", stroke: "currentColor", strokeLinecap: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 10.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-5Z", fill: "currentColor", fillOpacity: "0.5" })
   ] })
 };
 const illustrations = {

package/dist/icons/index.js

@@ -0,0 +1,12 @@
+import { blockIcons, icons, illustrations } from "./icons.js";
+import { BlockIcon } from "./block-icon.js";
+import { GenericColorSwatch } from "./generic-color-swatch.js";
+import { JsxSvg } from "./jsx-svg.js";
+export {
+  BlockIcon,
+  GenericColorSwatch,
+  JsxSvg,
+  blockIcons,
+  icons,
+  illustrations
+};

package/dist/index.js

@@ -47,18 +47,11 @@ import { ToggleButton } from "./components/toggle-button/toggle-button.js";
 import { D, T as T2 } from "./tooltip-T6H9uF-Z.js";
 import { VStack } from "./components/layout/vstack.js";
 import { getColumnConfigOutputText } from "./components/slider/utils.js";
-import { blockIcons, icons, illustrations } from "./icons/icons.js";
-import { BlockIcon } from "./icons/block-icon.js";
-import { GenericColorSwatch } from "./icons/generic-color-swatch.js";
-import { JsxSvg } from "./icons/jsx-svg.js";
-import { arrayMoveMultiple } from "./utilities/array-helpers.js";
-import { camelCase, lowerFirst, upperFirst } from "./utilities/text-helpers.js";
 export {
   AnimatedVisibility,
   AsyncMultiSelect,
   AsyncSelect,
   BaseControl,
-  BlockIcon,
   BreakpointPreview,
   B as Button,
   a as ButtonGroup,
@@ -74,12 +67,10 @@ export {
   DraggableListItem,
   Expandable,
   FilePlaceholder,
-  GenericColorSwatch,
   GradientEditor,
   HStack,
   ImagePlaceholder,
   InputField,
-  JsxSvg,
   LinkInput,
   ListBox,
   MatrixAlign,
@@ -124,12 +115,5 @@ export {
   T2 as Tooltip,
   T as TriggeredPopover,
   VStack,
-  arrayMoveMultiple,
-  blockIcons,
-  camelCase,
-  getColumnConfigOutputText,
-  icons,
-  illustrations,
-  lowerFirst,
-  upperFirst
+  getColumnConfigOutputText
 };

package/dist/utilities/debounce-throttle.js

@@ -0,0 +1,123 @@
+var functionDebounce = debounce$1;
+function debounce$1(fn, wait, callFirst) {
+  var timeout = null;
+  var debouncedFn = null;
+  var clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      debouncedFn = null;
+      timeout = null;
+    }
+  };
+  var flush = function() {
+    var call = debouncedFn;
+    clear();
+    if (call) {
+      call();
+    }
+  };
+  var debounceWrapper = function() {
+    if (!wait) {
+      return fn.apply(this, arguments);
+    }
+    var context = this;
+    var args = arguments;
+    var callNow = callFirst && !timeout;
+    clear();
+    debouncedFn = function() {
+      fn.apply(context, args);
+    };
+    timeout = setTimeout(function() {
+      timeout = null;
+      if (!callNow) {
+        var call = debouncedFn;
+        debouncedFn = null;
+        return call();
+      }
+    }, wait);
+    if (callNow) {
+      return debouncedFn();
+    }
+  };
+  debounceWrapper.cancel = clear;
+  debounceWrapper.flush = flush;
+  return debounceWrapper;
+}
+var functionThrottle = throttle$1;
+function throttle$1(fn, interval, options) {
+  var timeoutId = null;
+  var throttledFn = null;
+  var leading = options && options.leading;
+  var trailing = options && options.trailing;
+  if (leading == null) {
+    leading = true;
+  }
+  if (trailing == null) {
+    trailing = !leading;
+  }
+  if (leading == true) {
+    trailing = false;
+  }
+  var cancel = function() {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  var flush = function() {
+    var call = throttledFn;
+    cancel();
+    if (call) {
+      call();
+    }
+  };
+  var throttleWrapper = function() {
+    var callNow = leading && !timeoutId;
+    var context = this;
+    var args = arguments;
+    throttledFn = function() {
+      return fn.apply(context, args);
+    };
+    if (!timeoutId) {
+      timeoutId = setTimeout(function() {
+        timeoutId = null;
+        if (trailing) {
+          return throttledFn();
+        }
+      }, interval);
+    }
+    if (callNow) {
+      callNow = false;
+      return throttledFn();
+    }
+  };
+  throttleWrapper.cancel = cancel;
+  throttleWrapper.flush = flush;
+  return throttleWrapper;
+}
+/**
+ * Debounces the provided function.
+ * For more information, check [this blog post](https://davidwalsh.name/javascript-debounce-function).
+ *
+ * @param {function} func - Callback to apply.
+ * @param {number} wait   - Number of milliseconds for the delay of the callback function. Default is 200ms.
+ *
+ * @access public
+ *
+ * @return {function} Debounced callback.
+ *
+ * Usage:
+ * ```js
+ * debounce(() => {
+ *   // callback function.
+ * }, 250);
+ * ```
+ *
+ * @preserve
+ */
+const debounce = (func, wait = 250) => functionDebounce(func, wait);
+const throttle = (func, wait = 250, after = false) => functionThrottle(func, wait, { leading: !after, trailing: after });
+export {
+  debounce,
+  throttle
+};

package/dist/utilities/es-dash.js

@@ -0,0 +1,376 @@
+var stringKebabCase = kebabCase$1;
+var wordSeparators = /[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/;
+var capital_plus_lower = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD][a-zà-ÿ]/g;
+var capitals = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD]+/g;
+function kebabCase$1(str) {
+  str = str.replace(capital_plus_lower, function(match) {
+    return " " + (match[0].toLowerCase() || match[0]) + match[1];
+  });
+  str = str.replace(capitals, function(match) {
+    return " " + match.toLowerCase();
+  });
+  return str.trim().split(wordSeparators).join("-").replace(/^-/, "").replace(/-\s*$/, "");
+}
+var stringCamelCase = camelCase$1;
+var wordSeparatorsRegEx = /[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/;
+var basicCamelRegEx = /^[a-z\u00E0-\u00FCA-Z\u00C0-\u00DC][\d|a-z\u00E0-\u00FCA-Z\u00C0-\u00DC]*$/;
+var fourOrMoreConsecutiveCapsRegEx = /([A-Z\u00C0-\u00DC]{4,})/g;
+var allCapsRegEx = /^[A-Z\u00C0-\u00DC]+$/;
+function camelCase$1(str) {
+  var words = str.split(wordSeparatorsRegEx);
+  var len = words.length;
+  var mappedWords = new Array(len);
+  for (var i = 0; i < len; i++) {
+    var word = words[i];
+    if (word === "") {
+      continue;
+    }
+    var isCamelCase = basicCamelRegEx.test(word) && !allCapsRegEx.test(word);
+    if (isCamelCase) {
+      word = word.replace(fourOrMoreConsecutiveCapsRegEx, function(match, p1, offset) {
+        return deCap(match, word.length - offset - match.length == 0);
+      });
+    }
+    var firstLetter = word[0];
+    firstLetter = i > 0 ? firstLetter.toUpperCase() : firstLetter.toLowerCase();
+    mappedWords[i] = firstLetter + (!isCamelCase ? word.slice(1).toLowerCase() : word.slice(1));
+  }
+  return mappedWords.join("");
+}
+function deCap(match, endOfWord) {
+  var arr = match.split("");
+  var first = arr.shift().toUpperCase();
+  var last = endOfWord ? arr.pop().toLowerCase() : arr.pop();
+  return first + arr.join("").toLowerCase() + last;
+}
+var objectIsEmpty = isEmpty$1;
+function isEmpty$1(obj) {
+  if (obj == null) {
+    return true;
+  }
+  if (Array.isArray(obj)) {
+    return !obj.length;
+  }
+  if (typeof obj == "string") {
+    return !obj.length;
+  }
+  var type = {}.toString.call(obj);
+  if (type == "[object Object]") {
+    return !Object.keys(obj).length && !Object.getOwnPropertySymbols(obj).length;
+  }
+  if (type == "[object Map]" || type == "[object Set]") {
+    return !obj.size;
+  }
+  return Object(obj) !== obj || !Object.keys(obj).length;
+}
+var objectHas = has$1;
+function has$1(obj, propsArg) {
+  if (!obj) {
+    return false;
+  }
+  var props, prop;
+  if (Array.isArray(propsArg)) {
+    props = propsArg.slice(0);
+  }
+  if (typeof propsArg == "string") {
+    props = propsArg.split(".");
+  }
+  if (typeof propsArg == "symbol") {
+    props = [propsArg];
+  }
+  if (!Array.isArray(props)) {
+    throw new Error("props arg must be an array, a string or a symbol");
+  }
+  while (props.length) {
+    prop = props.shift();
+    if (obj == null) {
+      return false;
+    }
+    if (!Object.prototype.hasOwnProperty.call(obj, prop)) {
+      return false;
+    }
+    if (props.length === 0) {
+      return true;
+    }
+    obj = obj[prop];
+  }
+  return false;
+}
+/**
+ * Returns a camelCase-formatted string.
+ *
+ * @param {string} input - String to convert.
+ *
+ * @access public
+ *
+ * @return {string} *camelCase*-formatted string.
+ *
+ * @example
+ * camelCase('New super Test-title') // => 'newSuperTestTitle'
+ * camelCase(null) // => ''
+ *
+ * @preserve
+ */
+const camelCase = (input) => lowerFirst(stringCamelCase(input ?? ""));
+/**
+ * Returns a PascalCase-formatted string.
+ *
+ * @param {string} input - String to convert.
+ *
+ * @access public
+ *
+ * @return {string} *PascalCase*-formatted string.
+ *
+ * Usage:
+ * ```js
+ * pascalCase('New super Test-title') // => 'NewSuperTestTitle'
+ * pascalCase(null) // => ''
+ * ```
+ *
+ * @preserve
+ */
+const pascalCase = (input) => upperFirst(stringCamelCase(input ?? ""));
+/**
+ * Returns a snake_case-formatted string.
+ *
+ * @param {string} input - String to convert.
+ *
+ * @access public
+ *
+ * @return {string} *snake_case*-formatted string.
+ *
+ * Usage:
+ * ```js
+ * snakeCase('New super Test-title') // => 'new_super_test_title'
+ * snakeCase(null) // => ''
+ * ```
+ *
+ * @preserve
+ */
+const snakeCase = (input) => kebabCase(input ?? "").replaceAll("-", "_");
+const kebabCase = (input) => stringKebabCase(input ?? "");
+/**
+ * Checks if value is an empty object or collection.
+ *
+ * @param {*} input - Value to check.
+ *
+ * @returns true if the object is empty, false otherwise.
+ *
+ * Usage:
+ * ```js
+ * isEmpty({}) // => true
+ * isEmpty([]) // => true
+ * isEmpty('') // => true
+ * isEmpty({ a: 1 }) // => false
+ * isEmpty([1, 2, 3]) // => false
+ * ```
+ *
+ * @preserve
+ */
+const isEmpty = (input) => objectIsEmpty(input);
+/**
+ * Returns the string with its first character converted to uppercase.
+ *
+ * @param {string} input - String to convert.
+ *
+ * @return {string} string with its first character converted to uppercase.
+ *
+ * @example
+ * upperFirst('new super Test-title') // => 'New super Test-title'
+ *
+ * @preserve
+ */
+const upperFirst = (input) => {
+  if (typeof input === "undefined") {
+    return "";
+  }
+  if (input === true) {
+    return "True";
+  } else if (input === false) {
+    return "False";
+  }
+  if (input.length < 2) {
+    return input.toUpperCase();
+  }
+  return input.charAt(0).toUpperCase() + input.slice(1);
+};
+/**
+ * Returns the string with its first character converted to lowercase.
+ *
+ * @param {string} input - String to convert.
+ *
+ * @return {string} string with its first character converted to lowercase.
+ *
+ * @example
+ * lowerFirst('New super Test-title') // => 'new super Test-title'
+ *
+ * @preserve
+ */
+const lowerFirst = (input) => {
+  if (typeof input === "undefined") {
+    return "";
+  }
+  if (input === true) {
+    return "true";
+  } else if (input === false) {
+    return "false";
+  }
+  if ((input == null ? void 0 : input.length) < 2) {
+    return input.toLowerCase();
+  }
+  return input.charAt(0).toLowerCase() + input.slice(1);
+};
+/**
+ * Checks if `key` is a direct property of `object`. Key may be a path of a value separated by `.`
+ *
+ * @param {object} obj - Object to check.
+ * @param {string} key - Key to check.
+ *
+ * @return {boolean} true if key is a direct property, false otherwise.
+ *
+ * Usage:
+ * ```js
+ * has({ a: 1 }, 'a') // => true
+ * has({ a: 1 }, 'b') // => false
+ * has({ a: { b: 2 } }, 'a.b') // => true
+ * has({ a: { b: 3 } }, 'a.c') // => false
+ * ```
+ *
+ * @preserve
+ */
+const has = (obj, key) => objectHas(obj, key);
+/*
+ * Checks if value is a plain object, that is, an object created by the Object constructor or one with a `[[Prototype]]` of `null`.
+ *
+ * @param {*} value - Value to check.
+ * @returns {boolean} true if value is a plain object, false otherwise.
+ *
+ * Usage:
+ * ```js
+ * isPlainObject({ a: 2 }) // => true
+ * isPlainObject('Lorem') // => false
+ * isPlainObject([]) // => false
+ * isPlainObject(new Boolean()) // => false
+ * ```
+ *
+ * @preserve
+ */
+const isPlainObject = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  if (Object.prototype.toString.call(value) !== "[object Object]") {
+    return false;
+  }
+  const proto = Object.getPrototypeOf(value);
+  if (proto === null) {
+    return true;
+  }
+  const Ctor = Object.prototype.hasOwnProperty.call(proto, "constructor") && proto.constructor;
+  return typeof Ctor === "function" && Ctor instanceof Ctor && Function.prototype.call(Ctor) === Function.prototype.call(value);
+};
+/**
+ * Checks if value is the language type of `Object`. (e.g. arrays, functions, objects, regexes, new Number(0), and new String(’’))
+ *
+ * @param {*} input - Value to check.
+ *
+ * @returns {boolean} true if value is an array, false otherwise.
+ *
+ * Usage:
+ * ```js
+ * isObject({}) // => true
+ * isObject([1, 2, 3]) // => true
+ * isObject(() => {}) // => true
+ * isObject(null) // => false
+ * ```
+ *
+ * @preserve
+ */
+const isObject = (input) => input instanceof Object;
+/**
+ * Performs a deep comparison between two values to determine if they are equivalent.
+ *
+ * **Note**: works for simple types, arrays, and objects. Might not work for all the types the lodash version supports.
+ *
+ * @param {*} first First value to compare.
+ * @param {*} second Second value to compare.
+ *
+ * @returns true if the values are equivalent, false otherwise.
+ *
+ * Usage:
+ * ```js
+ * isEqual({ a: 1 }, { a: 1 }) // => true
+ * isEqual({ a: 1 }, { a: 2 }) // => false
+ * isEqual({ a: 1 }, 'b') // => false
+ * ```
+ *
+ * @preserve
+ */
+const isEqual = (first, second) => {
+  if (first === second) {
+    return true;
+  }
+  if ((first === void 0 || second === void 0 || first === null || second === null) && (first || second)) {
+    return false;
+  }
+  const firstType = first == null ? void 0 : first.constructor.name;
+  const secondType = second == null ? void 0 : second.constructor.name;
+  if (firstType !== secondType) {
+    return false;
+  }
+  if (firstType === "Array") {
+    if (first.length !== second.length) {
+      return false;
+    }
+    let equal = true;
+    for (let i = 0; i < first.length; i++) {
+      if (!isEqual(first[i], second[i])) {
+        equal = false;
+        break;
+      }
+    }
+    return equal;
+  }
+  if (firstType === "Object") {
+    let equal = true;
+    const fKeys = Object.keys(first);
+    const sKeys = Object.keys(second);
+    if (fKeys.length !== sKeys.length) {
+      return false;
+    }
+    for (let i = 0; i < fKeys.length; i++) {
+      if (first[fKeys[i]] && second[fKeys[i]]) {
+        if (first[fKeys[i]] === second[fKeys[i]]) {
+          continue;
+        }
+        if (first[fKeys[i]] && (first[fKeys[i]].constructor.name === "Array" || first[fKeys[i]].constructor.name === "Object")) {
+          equal = isEqual(first[fKeys[i]], second[fKeys[i]]);
+          if (!equal) {
+            break;
+          }
+        } else if (first[fKeys[i]] !== second[fKeys[i]]) {
+          equal = false;
+          break;
+        }
+      } else if (first[fKeys[i]] && !second[fKeys[i]] || !first[fKeys[i]] && second[fKeys[i]]) {
+        equal = false;
+        break;
+      }
+    }
+    return equal;
+  }
+  return first === second;
+};
+export {
+  camelCase,
+  has,
+  isEmpty,
+  isEqual,
+  isObject,
+  isPlainObject,
+  kebabCase,
+  lowerFirst,
+  pascalCase,
+  snakeCase,
+  upperFirst
+};

package/dist/utilities/index.js

@@ -1,8 +1,25 @@
 import { arrayMoveMultiple } from "./array-helpers.js";
-import { camelCase, lowerFirst, upperFirst } from "./text-helpers.js";
+import { camelCase, has, isEmpty, isEqual, isObject, isPlainObject, kebabCase, lowerFirst, pascalCase, snakeCase, upperFirst } from "./es-dash.js";
+import { truncate, truncateMiddle, unescapeHTML } from "./text-helpers.js";
+import { debounce, throttle } from "./debounce-throttle.js";
+import { c } from "../lite-pbIeT7tm.js";
 export {
   arrayMoveMultiple,
   camelCase,
+  c as clsx,
+  debounce,
+  has,
+  isEmpty,
+  isEqual,
+  isObject,
+  isPlainObject,
+  kebabCase,
   lowerFirst,
+  pascalCase,
+  snakeCase,
+  throttle,
+  truncate,
+  truncateMiddle,
+  unescapeHTML,
   upperFirst
 };

package/dist/utilities/text-helpers.js

@@ -1,105 +1,92 @@
-var stringCamelCase = camelCase$1;
-var wordSeparatorsRegEx = /[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/;
-var basicCamelRegEx = /^[a-z\u00E0-\u00FCA-Z\u00C0-\u00DC][\d|a-z\u00E0-\u00FCA-Z\u00C0-\u00DC]*$/;
-var fourOrMoreConsecutiveCapsRegEx = /([A-Z\u00C0-\u00DC]{4,})/g;
-var allCapsRegEx = /^[A-Z\u00C0-\u00DC]+$/;
-function camelCase$1(str) {
-  var words = str.split(wordSeparatorsRegEx);
-  var len = words.length;
-  var mappedWords = new Array(len);
-  for (var i = 0; i < len; i++) {
-    var word = words[i];
-    if (word === "") {
-      continue;
-    }
-    var isCamelCase = basicCamelRegEx.test(word) && !allCapsRegEx.test(word);
-    if (isCamelCase) {
-      word = word.replace(fourOrMoreConsecutiveCapsRegEx, function(match, p1, offset) {
-        return deCap(match, word.length - offset - match.length == 0);
-      });
-    }
-    var firstLetter = word[0];
-    firstLetter = i > 0 ? firstLetter.toUpperCase() : firstLetter.toLowerCase();
-    mappedWords[i] = firstLetter + (!isCamelCase ? word.slice(1).toLowerCase() : word.slice(1));
-  }
-  return mappedWords.join("");
-}
-function deCap(match, endOfWord) {
-  var arr = match.split("");
-  var first = arr.shift().toUpperCase();
-  var last = endOfWord ? arr.pop().toLowerCase() : arr.pop();
-  return first + arr.join("").toLowerCase() + last;
-}
 /**
- * Returns the string with its first character converted to uppercase.
+ * Slices the string in the middle and inputs the provided separator so that the string is maxLength characters long.
+ *
+ * @param {string} input             - String to slice.
+ * @param {number} maxLength         - Maximum allowed string length.
+ * @param {string} [separator='...'] - Separator to insert.
+ *
+ * @access public
  *
- * @param {string} input - String to convert.
+ * @returns {string|Error} Truncated string or error if separator length exceeds maxLength.
  *
- * @return {string} string with its first character converted to uppercase.
+ * Usage:
+ * ```js
+ * truncateMiddle('https://eightshift.com/contact/', 22);
+ * ```
  *
- * @example
- * upperFirst('new super Test-title') // => 'New super Test-title'
+ * Output:
+ * ```js
+ * "https://ei.../contact/"
  *
  * @preserve
  */
-const upperFirst = (input) => {
-  if (typeof input === "undefined") {
-    return "";
+const truncateMiddle = (input, maxLength, separator = "...") => {
+  if ((input == null ? void 0 : input.length) <= maxLength) {
+    return input;
   }
-  if (input === true) {
-    return "True";
-  } else if (input === false) {
-    return "False";
+  if (separator.length + 1 > maxLength) {
+    throw new Error("Separator length exceeds the passed maximum length, string wouldn't be visible.");
   }
-  if (input.length < 2) {
-    return input.toUpperCase();
-  }
-  return input.charAt(0).toUpperCase() + input.slice(1);
+  const maxStringLength = maxLength - separator.length;
+  const leftPartLength = Math.ceil(maxStringLength / 2);
+  const rightPartLength = Math.floor(maxStringLength / 2);
+  const leftPart = input.slice(0, leftPartLength).trim();
+  const rightPart = rightPartLength > 0 ? input.slice(-1 * rightPartLength).trim() : "";
+  return `${leftPart}${separator}${rightPart}`;
 };
 /**
- * Returns a camelCase-formatted string.
+* Un-escapes HTML entities.
+*
+* @param {string} input - Input string.
+*
+* @access public
+*
+* @returns {string} String with HTML entities unescaped.
+*
+* Usage:
+* ```js
+* unescapeHTML('Test&#38;Up');
+* ```
+*
+* Output:
+* ```js
+* Test&Up
+* ```
+*
+* @preserve
+*/
+const unescapeHTML = (input = "") => new DOMParser().parseFromString(input, "text/html").documentElement.textContent;
+/**
+ * Limits the string to the maximum length and adds the provided separator in case the string is longer.
  *
- * @param {string} input - String to convert.
+ * @param {string} input             - String to slice.
+ * @param {number} maxLength         - Maximum allowed string length.
+ * @param {string} [separator='...'] - Separator to insert.
  *
  * @access public
  *
- * @return {string} *camelCase*-formatted string.
- *
- * @example
- * camelCase('New super Test-title') // => 'newSuperTestTitle'
- * camelCase(null) // => ''
+ * @returns {string|Error} Truncated string or error if separator length exceeds maxLength.
  *
- * @preserve
- */
-const camelCase = (input) => lowerFirst(stringCamelCase(input ?? ""));
-/**
- * Returns the string with its first character converted to lowercase.
- *
- * @param {string} input - String to convert.
- *
- * @return {string} string with its first character converted to lowercase.
- *
- * @example
- * lowerFirst('New super Test-title') // => 'new super Test-title'
+ * Usage:
+ * ```js
+ * truncate('Hello this is a string', 13); // => "Hello this..."
+ * ```
  *
  * @preserve
  */
-const lowerFirst = (input) => {
-  if (typeof input === "undefined") {
-    return "";
-  }
-  if (input === true) {
-    return "true";
-  } else if (input === false) {
-    return "false";
+const truncate = (input, maxLength, separator = "...") => {
+  if ((input == null ? void 0 : input.length) <= maxLength) {
+    return input;
   }
-  if ((input == null ? void 0 : input.length) < 2) {
-    return input.toLowerCase();
+  if (separator.length + 1 > maxLength) {
+    throw new Error("Separator length exceeds the passed maximum length, string wouldn't be visible.");
   }
-  return input.charAt(0).toLowerCase() + input.slice(1);
+  const maxStringLength = maxLength - separator.length;
+  const leftPart = input.slice(0, maxStringLength).trim();
+  return `${leftPart}${separator}`;
 };
 export {
-  camelCase,
-  lowerFirst,
-  upperFirst
+  truncate,
+  truncateMiddle,
+  unescapeHTML
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -19,9 +19,14 @@
 			"import": "./dist/index.js",
 			"require": "./dist/index.js"
 		},
+		"./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/wp.css": "./dist/assets/wp.css"
+		"./dist/assets/wp.css": "./dist/assets/wp.css",
+		"./styles": "./dist/assets/style.css",
+		"./fonts": "./dist/assets/fonts.css",
+		"./wp-overrides": "./dist/assets/wp.css"
 	},
 	"scripts": {
 		"dev": "vite",
@@ -62,7 +67,6 @@
 		"eslint-plugin-react-refresh": "^0.4.7",
 		"framer-motion": "^11.2.10",
 		"glob": "^10.4.1",
-		"just-camel-case": "^6.2.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.3.0",
 		"prettier-plugin-tailwindcss": "^0.6.1",
@@ -73,6 +77,12 @@
 		"tailwindcss-animate": "^1.0.7",
 		"tailwindcss-react-aria-components": "^1.1.3",
 		"vite": "^5.2.12",
-		"vite-plugin-lib-inject-css": "^2.1.1"
+		"vite-plugin-lib-inject-css": "^2.1.1",
+		"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"
 	}
 }