@eightshift/ui-components 0.0.1

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

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { Expandable } from "../expandable/expandable.js";
+import { icons } from "../../icons/icons.js";
+import { Switch } from "../toggle/switch.js";
+import { D as DecorativeTooltip } from "../../tooltip-CkCndvTI.js";
+/**
+ * A component that provides a nice way to toggle a component on and off, and display its content in an expandable panel.
+ *
+ * @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 {boolean} props.useComponent - Whether the component is used. If `false`, the content is hidden.
+ * @param {Function} props.onChange - Function to run when the toggle state changes.
+ * @param {boolean} [props.noUseToggle] - If `true`, the toggle is not displayed.
+ * @param {boolean} [props.expandButtonDisabled] - If `true`, the expand button is disabled.
+ * @param {boolean} [props.controlOnly] - If `true`, only the control is displayed.
+ * @param {string} [props.contentClassName] - Classes to pass to the content container.
+ *
+ * @returns {JSX.Element} The ComponentToggle component.
+ *
+ * @example
+ * <ComponentToggle
+ * 	label='My component'
+ * 	useComponent={useComponent}
+ * 	onChange={setUseComponent}
+ * >
+ * 	...
+ * </ComponentToggle>
+ *
+ * @preserve
+ */
+const ComponentToggle = (props) => {
+  const {
+    children,
+    icon,
+    label,
+    subtitle,
+    useComponent,
+    onChange,
+    noUseToggle,
+    expandButtonDisabled,
+    controlOnly,
+    contentClassName = "es-uic-space-y-2.5"
+  } = props;
+  if (controlOnly) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(
+    Expandable,
+    {
+      icon: icon ?? icons.componentGeneric,
+      label,
+      subtitle,
+      actions: !noUseToggle && /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Toggle component", "eightshift-ui-components"), children: /* @__PURE__ */ jsx("div", { className: "es-uic-mr-0.5 es-uic-flex es-uic-min-h-8 es-uic-items-center es-uic-border-r es-uic-border-r-gray-200 es-uic-pr-1.5", children: /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: useComponent,
+          onChange
+        }
+      ) }) }),
+      disabled: !useComponent || expandButtonDisabled,
+      children: !expandButtonDisabled && /* @__PURE__ */ jsx("div", { className: contentClassName, children })
+    }
+  );
+};
+export {
+  ComponentToggle
+};

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

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "../../utilities/classnames.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.
+ *
+ * @returns {JSX.Element} The ContainerPanel component.
+ *
+ * @example
+ * <ContainerPanel title='Paragraph'>
+ * 	...
+ * </ContainerPanel>
+ *
+ * @preserve
+ */
+const ContainerPanel = ({ children, className, title }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(
+        "es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-4 es-uic-pt-3",
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx("span", { className: "es-uic-select-none es-uic-text-[0.8125rem] es-uic-font-medium es-uic-text-gray-500", children: title }),
+        children
+      ]
+    }
+  );
+};
+export {
+  ContainerPanel
+};

package/dist/components/expandable/expandable.js

@@ -0,0 +1,144 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { B as Button } from "../../button-BkkdyHfJ.js";
+import { icons } from "../../icons/icons.js";
+import { classnames } from "../../utilities/classnames.js";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
+import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope-1u9yyfIN.js";
+/**
+ * A component that allows hiding content in an expandable panel, to declutter the UI.
+ *
+ * @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 {string} [props.className] - Classes to pass to the container.
+ * @param {string} [props.labelClassName] - Classes to pass to the label.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
+ * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
+ * @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
+ * @param {boolean} [props.noFocusHandling] - If `true`, the focus trapping when the item is expanded is disabled. Useful when part of another component that manages focus itself.
+ * @param {boolean} [props.open] - Whether the expandable is open.
+ * @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
+ *
+ * @returns {JSX.Element} The Expandable component.
+ *
+ * @example
+ * <Expandable label='My component'>
+ * 	...
+ * </Expandable>
+ *
+ * @preserve
+ */
+const Expandable = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    className,
+    labelClassName,
+    actions,
+    keepActionsOnExpand = false,
+    disabled,
+    noFocusHandling,
+    children,
+    open = false,
+    onOpenChange,
+    ...other
+  } = props;
+  const [isOpen, setIsOpen] = React__default.useState(open);
+  const component = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(
+        "es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-opacity-0 es-uic-text-sm es-uic-transition",
+        isOpen && "es-uic-border-opacity-100 es-uic-shadow-lg",
+        className
+      ),
+      ...other,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classnames(
+              "es-uic-flex es-uic-h-10 es-uic-items-center es-uic-gap-1 es-uic-py-1 es-uic-transition-[padding-inline]",
+              isOpen && "es-uic-pl-2 es-uic-pr-1"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                RichLabel,
+                {
+                  icon,
+                  label,
+                  subtitle,
+                  className: labelClassName,
+                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+                  fullWidth: true
+                }
+              ),
+              actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  visible: !isOpen,
+                  className: "es-uic-ml-auto es-uic-flex es-uic-gap-2",
+                  transition: "scaleFade",
+                  noInitial: true,
+                  children: actions
+                }
+              ),
+              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es-uic-ml-auto es-uic-flex es-uic-gap-2", children: actions }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "ghost",
+                  icon: isOpen ? icons.caretDownFill : icons.caretDown,
+                  onPress: () => {
+                    setIsOpen(!isOpen);
+                    if (onOpenChange) {
+                      onOpenChange(!isOpen);
+                    }
+                  },
+                  tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+                  disabled,
+                  className: classnames(
+                    "[&>svg]:es-uic-transition-transform",
+                    isOpen && "[&>svg]:-es-uic-scale-y-100"
+                  ),
+                  size: "small"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnimatedVisibility,
+          {
+            visible: isOpen,
+            className: "es-uic-space-y-2.5 es-uic-border-t es-uic-p-2",
+            transition: "slideFade",
+            noInitial: true,
+            children
+          }
+        )
+      ]
+    }
+  );
+  if (noFocusHandling) {
+    return component;
+  }
+  return /* @__PURE__ */ jsx(
+    $9bf71ea28793e738$export$20e40289641fbbb6,
+    {
+      contain: isOpen,
+      autoFocus: isOpen,
+      children: component
+    }
+  );
+};
+export {
+  Expandable
+};

package/dist/components/input-field/input-field.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-jsbb4ugq.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-BsiH7-5Y.js";
+import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-C3K8zAKj.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cc-4eouh.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-wtMA4667.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { classnames } from "../../utilities/classnames.js";
+const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
+let $216918bed6669f72$var$filterHoverProps = (props) => {
+  let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
+  return otherProps;
+};
+function $216918bed6669f72$var$TextArea(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $216918bed6669f72$export$2dc6166a7e65358c);
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    isTextInput: true,
+    autoFocus: props.autoFocus
+  });
+  let isInvalid = !!props["aria-invalid"] && props["aria-invalid"] !== "false";
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled: props.disabled || false,
+      isInvalid
+    },
+    defaultClassName: "react-aria-TextArea"
+  });
+  return /* @__PURE__ */ React__default.createElement("textarea", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928($216918bed6669f72$var$filterHoverProps(props), focusProps, hoverProps),
+    ...renderProps,
+    ref,
+    "data-focused": isFocused || void 0,
+    "data-disabled": props.disabled || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-invalid": isInvalid || void 0
+  });
+}
+const $216918bed6669f72$export$f5c9f3c2c4054eec = /* @__PURE__ */ forwardRef($216918bed6669f72$var$TextArea);
+const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
+function $bcdf0525bf22703d$var$TextField(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
+  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
+  var _props_validationBehavior, _ref;
+  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
+  let inputRef = useRef(null);
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8();
+  let [inputElementType, setInputElementType] = useState("input");
+  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $2d73ec29415bd339$export$712718f7aec83d5({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    inputElementType,
+    label,
+    validationBehavior
+  }, inputRef);
+  let inputOrTextAreaRef = useCallback((el) => {
+    inputRef.current = el;
+    if (el)
+      setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
+  }, []);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: "react-aria-TextField"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-invalid": validation.isInvalid || void 0,
+    "data-readonly": props.isReadOnly || void 0,
+    "data-required": props.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef
+        }
+      ],
+      [
+        $3985021b0ad6602f$export$37fb8590cf2c088c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $216918bed6669f72$export$2dc6166a7e65358c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, renderProps.children));
+}
+const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ forwardRef($bcdf0525bf22703d$var$TextField);
+/**
+ * An input field.
+ *
+ * @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 {string} [props.help] - Help text to display below the input.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
+ * @param {string} [props.value] - The current value of the input.
+ * @param {Function} [props.onChange] - Function to run when the input value changes.
+ * @param {InputType} [props.type='text'] - The input type. Renders a `<textarea>` instead of `<input>` if set to 'multiline'.
+ * @param {boolean} [props.disabled] - If `true`, the input is disabled.
+ * @param {boolean} [props.readOnly] - If `true`, the input is read-only.
+ * @param {string} [props.className] - Classes to pass to the input field.
+ *
+ * @returns {JSX.Element} The InputField component.
+ *
+ * @typedef {'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | 'multiline'} InputType
+ *
+ * @example
+ * <InputField
+ * 	label='My input'
+ * 	value={inputValue}
+ * 	onChange={setInputValue}
+ * />
+ *
+ * @preserve
+ */
+const InputField = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    help,
+    actions,
+    value,
+    onChange,
+    type = "text",
+    disabled,
+    readOnly,
+    className,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    $bcdf0525bf22703d$export$2c73285ae9390cec,
+    {
+      value: value ?? "",
+      onChange,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      ...other,
+      children: /* @__PURE__ */ jsxs(
+        BaseControl,
+        {
+          icon,
+          label,
+          subtitle,
+          actions,
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          help,
+          children: [
+            type !== "multiline" && /* @__PURE__ */ jsx(
+              $3985021b0ad6602f$export$f5b8910cec6cf069,
+              {
+                ...other,
+                className: classnames(
+                  "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
+                  "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",
+                  className
+                )
+              }
+            ),
+            type === "multiline" && /* @__PURE__ */ jsx(
+              $216918bed6669f72$export$f5c9f3c2c4054eec,
+              {
+                ...other,
+                className: classnames(
+                  "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
+                  "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",
+                  className
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  InputField
+};