@eightshift/ui-components 0.0.1

package/README.md

@@ -0,0 +1,27 @@
+# Eightshift UI components
+
+A collection of commonly-used UI components, utilities and icons, meant to provide the best experience both for users and developers while making the editor UI look modern.
+
+Built using [React Aria components](https://react-spectrum.adobe.com/react-aria/), styled using [TailwindCSS](https://tailwindcss.com/). Build process and library export is set up with [Vite](https://vitejs.dev/).
+
+## Who do I talk to?
+
+If you have any questions or problems, please [open an issue](https://github.com/infinum/eightshift-ui-components/issues) on GitHub and we will do our best to give you a timely answer.
+
+## Maintainers
+Eightshift UI components is maintained and sponsored by
+[Eightshift](https://eightshift.com) and [Infinum](https://infinum.com).
+
+## License
+Eightshift UI components are provided by [Team Eightshift](https://eightshift.com) at [Infinum](https://infinum.com). This is free software, and may be redistributed under the terms specified in the LICENSE file.
+
+## To-do
+[] AdvancedColorPicker
+
+### Won't bring over from Frontend libs
+- BlockInserter
+- Responsive components (ResponsiveNumberPicker, ResponsiveSlider, ResponsiveToggleButton)
+- PresetPicker
+- ReOrderable - will deprecate
+- TileButton - will deprecate
+- WidthOffsetRangeSlider

package/dist/Checkbox-BLcVbhiO.js

@@ -0,0 +1,178 @@
+import { $ as $4e85f108e88277b8$export$b085522c77523c51 } from "./RSPContexts-CrNYmadY.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-BsiH7-5Y.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-Cq3fu75_.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-DG2RfOUr.js";
+import React__default, { useEffect, useRef, forwardRef, useContext, createContext } from "react";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$dad6ae84456c676a, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "./useFormValidationState-BAPPNXic.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "./useToggle-C9ETOBaZ.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "./useToggleState-DJ_z5E2S.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-Cc-4eouh.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "./focusSafely-C3K8zAKj.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "./VisuallyHidden-BYRI1Lfo.js";
+function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
+  let validationState = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+    ...props,
+    value: state.isSelected
+  });
+  let { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
+  let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577({
+    ...props,
+    isInvalid
+  }, state, inputRef);
+  $e93e671b31057976$export$b8473d3665f3a75a(props, validationState, inputRef);
+  let { isIndeterminate, isRequired, validationBehavior = "aria" } = props;
+  useEffect(() => {
+    if (inputRef.current)
+      inputRef.current.indeterminate = !!isIndeterminate;
+  });
+  return {
+    labelProps,
+    inputProps: {
+      ...inputProps,
+      checked: isSelected,
+      "aria-required": isRequired && validationBehavior === "aria" || void 0,
+      required: isRequired && validationBehavior === "native"
+    },
+    isSelected,
+    isPressed,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+const $1ae600c947479353$export$ec98120685d4f57d = /* @__PURE__ */ new WeakMap();
+function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
+  const toggleState = $3017fa7ffdddec74$export$8042c6c013fd5226({
+    isReadOnly: props.isReadOnly || state.isReadOnly,
+    isSelected: state.isSelected(props.value),
+    onChange(isSelected) {
+      if (isSelected)
+        state.addValue(props.value);
+      else
+        state.removeValue(props.value);
+      if (props.onChange)
+        props.onChange(isSelected);
+    }
+  });
+  let { name, descriptionId, errorMessageId, validationBehavior } = $1ae600c947479353$export$ec98120685d4f57d.get(state);
+  var _props_validationBehavior;
+  validationBehavior = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : validationBehavior;
+  let { realtimeValidation } = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
+    ...props,
+    value: toggleState.isSelected,
+    // Server validation is handled at the group level.
+    name: void 0,
+    validationBehavior: "aria"
+  });
+  let nativeValidation = useRef($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let updateValidation = () => {
+    state.setInvalid(props.value, realtimeValidation.isInvalid ? realtimeValidation : nativeValidation.current);
+  };
+  useEffect(updateValidation);
+  let combinedRealtimeValidation = state.realtimeValidation.isInvalid ? state.realtimeValidation : realtimeValidation;
+  let displayValidation = validationBehavior === "native" ? state.displayValidation : combinedRealtimeValidation;
+  var _props_isRequired;
+  let res = $406796ff087fe49b$export$e375f10ce42261c5({
+    ...props,
+    isReadOnly: props.isReadOnly || state.isReadOnly,
+    isDisabled: props.isDisabled || state.isDisabled,
+    name: props.name || name,
+    isRequired: (_props_isRequired = props.isRequired) !== null && _props_isRequired !== void 0 ? _props_isRequired : state.isRequired,
+    validationBehavior,
+    [$e5be200c675c3b3a$export$a763b9476acd3eb]: {
+      realtimeValidation: combinedRealtimeValidation,
+      displayValidation,
+      resetValidation: state.resetValidation,
+      commitValidation: state.commitValidation,
+      updateValidation(v) {
+        nativeValidation.current = v;
+        updateValidation();
+      }
+    }
+  }, toggleState, inputRef);
+  return {
+    ...res,
+    inputProps: {
+      ...res.inputProps,
+      "aria-describedby": [
+        props["aria-describedby"],
+        state.isInvalid ? errorMessageId : null,
+        descriptionId
+      ].filter(Boolean).join(" ") || void 0
+    }
+  };
+}
+const $bc237834342dbd75$export$139c5b8563afc1fc = /* @__PURE__ */ createContext(null);
+function $bc237834342dbd75$var$Checkbox(props, ref) {
+  let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $4e85f108e88277b8$export$b085522c77523c51);
+  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 groupState = useContext($bc237834342dbd75$export$139c5b8563afc1fc);
+  let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid } = groupState ? $fba3e38d5ca8983f$export$353b32fc6898d37d({
+    ...props,
+    // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
+    // it's passed explicitly here to avoid typescript error (requires ignore).
+    // @ts-ignore
+    value: props.value,
+    // ReactNode type doesn't allow function children.
+    children: typeof props.children === "function" ? true : props.children
+  }, groupState, inputRef) : $406796ff087fe49b$export$e375f10ce42261c5({
+    ...props,
+    children: typeof props.children === "function" ? true : props.children,
+    validationBehavior
+  }, $3017fa7ffdddec74$export$8042c6c013fd5226(props), inputRef);
+  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
+  let isInteractionDisabled = isDisabled || isReadOnly;
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
+    ...props,
+    isDisabled: isInteractionDisabled
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    // TODO: should data attrs go on the label or on the <input>? useCheckbox passes them to the input...
+    ...props,
+    defaultClassName: "react-aria-Checkbox",
+    values: {
+      isSelected,
+      isIndeterminate: props.isIndeterminate || false,
+      isPressed,
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired: props.isRequired || false
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("label", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
+    ref,
+    slot: props.slot || void 0,
+    "data-selected": isSelected || void 0,
+    "data-indeterminate": props.isIndeterminate || void 0,
+    "data-pressed": isPressed || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focused": isFocused || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-readonly": isReadOnly || void 0,
+    "data-invalid": isInvalid || void 0,
+    "data-required": props.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
+    elementType: "span"
+  }, /* @__PURE__ */ React__default.createElement("input", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
+    ref: inputRef
+  })), renderProps.children);
+}
+const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef($bc237834342dbd75$var$Checkbox);
+export {
+  $bc237834342dbd75$export$48513f6b9f8ce62d as $
+};

package/dist/ColorSwatch-Cmlex_kT.js

@@ -0,0 +1,66 @@
+import { e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "./utils-BsiH7-5Y.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, a as $3493a52097159720$exports } from "./intlStrings-CUhoK9EN.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-DG2RfOUr.js";
+import React__default, { useMemo, forwardRef, createContext } from "react";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-jMy6xdVq.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-Prmz0h0A.js";
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $2993fcad7650b98d$export$9060ae606178d849(props) {
+  let { color: value, colorName } = props;
+  let nonNullValue = value || "#fff0";
+  let color = useMemo(() => typeof nonNullValue === "string" ? $799cddbef784668f$export$6e865ea70d7724f(nonNullValue) : nonNullValue, [
+    nonNullValue
+  ]);
+  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($3493a52097159720$exports), "@react-aria/color");
+  let id = $bdb11010cef70236$export$f680877a34711e37(props.id);
+  if (!colorName)
+    colorName = color.getChannelValue("alpha") === 0 ? stringFormatter.format("transparent") : color.getColorName(locale);
+  return {
+    colorSwatchProps: {
+      ...DOMProps,
+      role: "img",
+      "aria-roledescription": stringFormatter.format("colorSwatch"),
+      "aria-label": [
+        colorName,
+        props["aria-label"] || ""
+      ].filter(Boolean).join(", "),
+      "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : void 0,
+      id,
+      style: {
+        backgroundColor: color.toString("css"),
+        // @ts-ignore
+        forcedColorAdjust: "none"
+      }
+    },
+    color: color || null
+  };
+}
+const $251c695a52d94a8d$export$83cc445538396800 = /* @__PURE__ */ createContext(null);
+function $251c695a52d94a8d$var$ColorSwatch(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $251c695a52d94a8d$export$83cc445538396800);
+  let { colorSwatchProps, color } = $2993fcad7650b98d$export$9060ae606178d849(props);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-ColorSwatch",
+    defaultStyle: colorSwatchProps.style,
+    values: {
+      color
+    }
+  });
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...colorSwatchProps,
+    ...renderProps,
+    slot: props.slot || void 0,
+    ref
+  });
+}
+const $251c695a52d94a8d$export$cae13e90592f246a = /* @__PURE__ */ forwardRef($251c695a52d94a8d$var$ColorSwatch);
+export {
+  $251c695a52d94a8d$export$cae13e90592f246a as $
+};

package/dist/FieldError-wtMA4667.js

@@ -0,0 +1,42 @@
+import { $ as $d191a55c9702f145$export$8467354a121f1b9f } from "./useLabel-CGlkoFG0.js";
+import { k as $bdb11010cef70236$export$b4cc09c592e8fdb8, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./utils-BsiH7-5Y.js";
+import { createContext } from "react";
+function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
+  let { description, errorMessage, isInvalid, validationState } = props;
+  let { labelProps, fieldProps } = $d191a55c9702f145$export$8467354a121f1b9f(props);
+  let descriptionId = $bdb11010cef70236$export$b4cc09c592e8fdb8([
+    Boolean(description),
+    Boolean(errorMessage),
+    isInvalid,
+    validationState
+  ]);
+  let errorMessageId = $bdb11010cef70236$export$b4cc09c592e8fdb8([
+    Boolean(description),
+    Boolean(errorMessage),
+    isInvalid,
+    validationState
+  ]);
+  fieldProps = $3ef42575df84b30b$export$9d1611c77c2fe928(fieldProps, {
+    "aria-describedby": [
+      descriptionId,
+      // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+      errorMessageId,
+      props["aria-describedby"]
+    ].filter(Boolean).join(" ") || void 0
+  });
+  return {
+    labelProps,
+    fieldProps,
+    descriptionProps: {
+      id: descriptionId
+    },
+    errorMessageProps: {
+      id: errorMessageId
+    }
+  };
+}
+const $ee014567cb39d3f0$export$ff05c3ac10437e03 = /* @__PURE__ */ createContext(null);
+export {
+  $ee014567cb39d3f0$export$ff05c3ac10437e03 as $,
+  $2baaea4c71418dea$export$294aa081a6c6f55d as a
+};