@eightshift/ui-components 0.0.3 → 0.0.5

package/dist/components/options-panel/options-panel.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+/**
+ * Component that provides a container panel for options, with an optional title.
+ * Best used within the Gutenberg sidebar, instead of the default `PanelBody` component.
+ * Ensures that the content is spaced nicely.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.className] - Classes to pass to the container.
+ * @param {string} [props.title] - Title to display on the top of the panel.
+ * @param {JSX.Element} [props.icon] - Icon to display on the top of the panel.
+ * @param {string} [props.subtitle] - Subtitle to display on the top of the panel.
+ * @param {string} [props.help] - Help text to show below the panel.
+ *
+ * @returns {JSX.Element} The OptionsPanel component.
+ *
+ * @example
+ * <OptionsPanel title='Paragraph'>
+ * 	...
+ * </OptionsPanel>
+ *
+ * @preserve
+ */
+const OptionsPanel = (props) => {
+  const { children, className, title, icon, subtitle, help } = props;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-max-w-96", className), children: [
+    title && /* @__PURE__ */ jsx(
+      RichLabel,
+      {
+        icon,
+        label: title,
+        subtitle,
+        className: "es-uic-mb-1 es-uic-text-[0.875rem] es-uic-tracking-[-0.01em] !es-uic-text-gray-500"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "es-uic-bg-white es-uic-divide-y es-uic-rounded-lg es-uic-divide-gray-200 es-uic-shadow es-uic-border es-uic-border-gray-200", children }),
+    help && /* @__PURE__ */ jsx("span", { className: "text-sm es-uic-mt-1.5 es-uic-block es-uic-text-gray-400", children: help })
+  ] });
+};
+const OptionsPanelSection = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "es-uic-space-y-2.5 first:es-uic-rounded-t-lg last:rounded-b-lg only:es-uic-rounded-lg es-uic-px-3 es-uic-py-4 first:es-uic-pt-3.5 last:es-uic-pb-3.5",
+        className
+      ),
+      children
+    }
+  );
+};
+export {
+  OptionsPanel,
+  OptionsPanelSection
+};

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")
@@ -540,9 +541,9 @@ const TabList = (props) => {
     {
       "aria-label": ariaLabel ?? __("tabs", "eightshift-ui-components"),
       className: ({ orientation }) => clsx(
-        "es-uic-flex es-uic-gap-1",
-        orientation === "vertical" && "es-uic-h-full es-uic-flex-col es-uic-pr-1.5",
-        orientation === "horizontal" && "es-uic-w-full es-uic-items-end es-uic-border-b es-uic-border-b-gray-300",
+        "es-uic-flex",
+        orientation === "vertical" && "es-uic-gap-px es-uic-h-full es-uic-flex-col es-uic-pr-1.5",
+        orientation === "horizontal" && "es-uic-gap-1 es-uic-w-full es-uic-items-end es-uic-border-b es-uic-border-b-gray-300",
         className
       ),
       ...other,
@@ -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,
@@ -585,11 +589,21 @@ const Tab = (props) => {
           !isSelected && !isDisabled && isParentVertical && "after:es-uic-scale-y-75",
           !isSelected && !isDisabled && !isParentVertical && "after:es-uic-scale-x-75",
           isDisabled && "es-uic-text-gray-300 after:es-uic-hidden",
-          isParentVertical && "es-uic-pl-3 after:es-uic-inset-y-0 after:es-uic-left-px after:es-uic-right-auto after:es-uic-my-auto after:es-uic-h-7 after:es-uic-w-[0.1875rem]",
+          isParentVertical && "es-uic-min-h-9 es-uic-pl-3 after:es-uic-inset-y-0 after:es-uic-left-px after:es-uic-right-auto after:es-uic-my-auto after:es-uic-h-7 after:es-uic-w-[0.1875rem]",
           className
         );
       },
-      children
+      children: [
+        (icon || subtitle) && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label: label ?? children,
+            subtitle
+          }
+        ),
+        !(icon || subtitle) && (label ?? children)
+      ]
     }
   );
 };

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

@@ -36,6 +36,7 @@ import { AsyncSelect } from "./components/select/async-single-select.js";
 import { MultiSelect } from "./components/select/multi-select.js";
 import { RSClearIndicator, RSDropdownIndicator, RSMultiValue, RSMultiValueContainer, RSMultiValueLabel, RSMultiValueRemove, RSOption, RSSingleValue } from "./components/select/react-select-component-wrappers.js";
 import { OptionSelect } from "./components/option-select/option-select.js";
+import { OptionsPanel, OptionsPanelSection } from "./components/options-panel/options-panel.js";
 import { Select } from "./components/select/single-select.js";
 import { Slider } from "./components/slider/slider.js";
 import { SolidColorPicker } from "./components/color-pickers/solid-color-picker.js";
@@ -47,18 +48,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 +68,10 @@ export {
   DraggableListItem,
   Expandable,
   FilePlaceholder,
-  GenericColorSwatch,
   GradientEditor,
   HStack,
   ImagePlaceholder,
   InputField,
-  JsxSvg,
   LinkInput,
   ListBox,
   MatrixAlign,
@@ -92,6 +84,8 @@ export {
   Notice,
   NumberPicker,
   OptionSelect,
+  OptionsPanel,
+  OptionsPanelSection,
   P as Popover,
   RSClearIndicator,
   RSDropdownIndicator,
@@ -124,12 +118,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
+};