@eightshift/ui-components 0.0.1

package/dist/components/notice/notice.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classnames } from "../../utilities/classnames.js";
+import { icons } from "../../icons/icons.js";
+/**
+ * A simple notice component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display within the notice.
+ * @param {string} [props.label] - The label of the notice.
+ * @param {string} [props.subtitle] - The subtitle of the notice.
+ * @param {string} [props.className] - Classes to pass to the notice.
+ * @param {NoticeType} [props.type='default'] - The type of the notice.
+ * @param {boolean} [props.alignIconToTitle=false] - If `true`, the icon will be aligned to the first row of title, instead of vertically centered.
+ *
+ * @returns {JSX.Element} The Notice component.
+ *
+ * @typedef {'info' | 'success' | 'warning' | 'error' | 'placeholder' | 'default'} NoticeType
+ *
+ * @example
+ * <Notice label='This is a notice' />
+ *
+ * @preserve
+ */
+const Notice = (props) => {
+  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false } = props;
+  const styles = {
+    info: {
+      icon: icons.infoCircle,
+      className: "es-uic-border-blue-400 es-uic-shadow-blue-500/15 es-uic-bg-blue-100/5",
+      iconColor: "es-uic-text-blue-400",
+      textColor: "es-uic-text-blue-900",
+      subtitleColor: "es-uic-text-blue-950/60"
+    },
+    success: {
+      icon: icons.checkSquare,
+      className: "es-uic-border-green-500 es-uic-shadow-green-500/15 es-uic-bg-green-100/5",
+      iconColor: "es-uic-text-green-500",
+      textColor: "es-uic-text-green-900",
+      subtitleColor: "es-uic-text-green-950/60"
+    },
+    warning: {
+      icon: icons.warning,
+      className: "es-uic-border-amber-500 es-uic-shadow-amber-500/15 es-uic-bg-amber-100/5",
+      iconColor: "es-uic-text-amber-500",
+      textColor: "es-uic-text-amber-900",
+      subtitleColor: "es-uic-text-amber-950/60"
+    },
+    error: {
+      icon: icons.errorCircle,
+      className: "es-uic-border-red-400 es-uic-shadow-red-500/15 es-uic-bg-red-100/5",
+      iconColor: "es-uic-text-red-400",
+      textColor: "es-uic-text-red-900",
+      subtitleColor: "es-uic-text-red-950/60"
+    },
+    placeholder: {
+      icon: icons.componentGeneric,
+      className: "es-uic-border-slate-300 es-uic-shadow-slate-300/25 es-uic-border-dashed es-uic-bg-slate-200/5",
+      iconColor: "es-uic-text-slate-400",
+      textColor: "es-uic-text-slate-900",
+      subtitleColor: "es-uic-text-slate-500"
+    },
+    default: {
+      className: "es-uic-border-gray-300 es-uic-shadow-gray-300/25 es-uic-bg-gray-200/5",
+      iconColor: "es-uic-text-gray-400",
+      textColor: "es-uic-text-gray-900",
+      subtitleColor: "es-uic-text-gray-500"
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(
+        "es-uic-grid es-uic-grid-cols-[auto,_1fr] es-uic-grid-rows-[auto,_auto] es-uic-rounded-md es-uic-border es-uic-bg-gradient-to-tr es-uic-shadow-sm",
+        styles[type].className,
+        icon || styles[type].icon ? "es-uic-gap-x-1.5 es-uic-p-1.5" : "es-uic-py-1.5 es-uic-px-2",
+        className
+      ),
+      children: [
+        (icon || styles[type].icon) && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classnames(
+              "es-uic-col-span-1 es-uic-col-start-1 es-uic-row-span-2 es-uic-row-start-1 es-uic-shrink-0 es-uic-self-center [&>svg]:es-uic-size-7",
+              alignIconToTitle ? "es-uic-self-baseline" : "es-uic-self-center",
+              styles[type].iconColor
+            ),
+            children: icon ?? styles[type].icon
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classnames(
+              "es-uic-col-span-2 es-uic-col-start-2 es-uic-text-balance es-uic-text-sm es-uic-leading-tight",
+              subtitle ? "es-uic-self-end" : "es-uic-row-span-2 es-uic-self-center",
+              styles[type].textColor
+            ),
+            children: label
+          }
+        ),
+        subtitle && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classnames(
+              "es-uic-col-span-2 es-uic-col-start-2 es-uic-text-balance es-uic-text-xs es-uic-leading-tight",
+              styles[type].subtitleColor,
+              label ? "es-uic-self-start" : "es-uic-row-span-2 es-uic-self-center"
+            ),
+            children: subtitle
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Notice
+};

package/dist/components/number-picker/number-picker.js

@@ -0,0 +1,277 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React__default, { forwardRef, useRef, createContext, useState, cloneElement } from "react";
+import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DyqpTRPe.js";
+import { $ 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 { $ as $d2b4bc8c273e7be6$export$24d547caef80ccd1, B as Button } from "../../button-BkkdyHfJ.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-BsiH7-5Y.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 { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-jMy6xdVq.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-BLU3uhSR.js";
+import { icons } from "../../icons/icons.js";
+import { classnames } from "../../utilities/classnames.js";
+import { BaseControl } from "../base-control/base-control.js";
+const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
+const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
+function $b91743d66a0ed188$var$NumberField(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
+  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 { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
+    ...props,
+    locale,
+    validationBehavior
+  });
+  let inputRef = useRef(null);
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8();
+  let { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, ...validation } = $81397a9303501bda$export$23f548e970bdf099({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    label,
+    validationBehavior
+  }, state, inputRef);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      state,
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid || false
+    },
+    defaultClassName: "react-aria-NumberField"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $b91743d66a0ed188$export$6cc906c6cff9bec5,
+        state
+      ],
+      [
+        $a049562f99e7db0e$export$f9c6924e160136d1,
+        groupProps
+      ],
+      [
+        $3985021b0ad6602f$export$37fb8590cf2c088c,
+        {
+          ...inputProps,
+          ref: inputRef
+        }
+      ],
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef
+        }
+      ],
+      [
+        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        {
+          slots: {
+            increment: incrementButtonProps,
+            decrement: decrementButtonProps
+          }
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, /* @__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
+  }), props.name && /* @__PURE__ */ React__default.createElement("input", {
+    type: "hidden",
+    name: props.name,
+    value: isNaN(state.numberValue) ? "" : state.numberValue
+  }));
+}
+const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef($b91743d66a0ed188$var$NumberField);
+/**
+ * A number picker component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {number} props.value - The current value of the number picker.
+ * @param {Function} props.onChange - Function to run when the value changes.
+ * @param {number} [props.min=0] - The minimum value of the number picker.
+ * @param {number} [props.max] - The maximum value of the number picker.
+ * @param {number} [props.step=1] - The step value of the number picker.
+ * @param {string} [props.label] - The label of the number picker.
+ * @param {JSX.Element} [props.icon] - Icon to display within the number picker.
+ * @param {string} [props.subtitle] - The subtitle of the number picker.
+ * @param {string} [props.help] - The help text shown below the number picker.
+ * @param {boolean} [props.readOnly] - If `true`, the number picker is read-only.
+ * @param {boolean} [props.disabled] - If `true`, the number picker is disabled.
+ * @param {string} [props.placeholder] - Placeholder text to display in the number picker.
+ * @param {JSX.Element} [props.prefix] - Element to display to the left of the number picker.
+ * @param {JSX.Element} [props.suffix] - Element to display to the right of the number picker.
+ * @param {number} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values.
+ * @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
+ * @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
+ * @param {NumberPickerSize} [props.size='default'] - Determines the input field size.
+ *
+ * @returns {JSX.Element} The NumberPicker component.
+ *
+ * @typedef {'compact' | 'small' | 'default'} NumberPickerSize
+ *
+ * @example
+ * <NumberPicker
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const NumberPicker = ({
+  value,
+  onChange,
+  min = 0,
+  max,
+  step = 1,
+  label,
+  icon,
+  subtitle,
+  help,
+  readOnly,
+  disabled,
+  placeholder,
+  prefix,
+  fixedWidth = null,
+  suffix,
+  children,
+  inline,
+  noScrollToChange = false,
+  size = "default",
+  ...props
+}) => {
+  var _a, _b, _c, _d;
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const sizes = {
+    compact: {
+      field: "es-uic-min-h-5",
+      noPrefixPadding: "es-uic-pl-1.5"
+    },
+    small: {
+      field: "es-uic-min-h-9",
+      noPrefixPadding: "es-uic-pl-2"
+    },
+    default: {
+      field: "es-uic-min-h-10",
+      noPrefixPadding: "es-uic-pl-2"
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    $b91743d66a0ed188$export$63c5fa0b2fdccd2e,
+    {
+      value,
+      onChange,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      minValue: min,
+      maxValue: max,
+      step,
+      isWheelDisabled: noScrollToChange,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        BaseControl,
+        {
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          icon,
+          label,
+          subtitle,
+          help,
+          inline,
+          className: "text-sm",
+          children: /* @__PURE__ */ jsxs(
+            $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
+            {
+              className: classnames(
+                "es-uic-flex es-uic-w-fit es-uic-items-center es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-pl-1 es-uic-pr-0.5 es-uic-shadow-sm es-uic-transition",
+                isInputFocused && "es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                !prefix && (((_a = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _a.noPrefixPadding) ?? sizes.default.noPrefixPadding),
+                ((_b = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _b.field) ?? sizes.default.field
+              ),
+              children: [
+                prefix && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    slot: "prefix",
+                    className: "es-uic-col-start-1 es-uic-row-span-2 es-uic-mr-0.5 es-uic-select-none es-uic-self-center es-uic-text-gray-500",
+                    children: prefix
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  $3985021b0ad6602f$export$f5b8910cec6cf069,
+                  {
+                    onFocus: () => setIsInputFocused(true),
+                    onBlur: () => setIsInputFocused(false),
+                    className: "es-uic-col-start-2 es-uic-row-span-2 es-uic-bg-transparent es-uic-py-1 es-uic-tabular-nums focus:es-uic-outline-none es-uic-text-sm selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
+                    placeholder,
+                    style: {
+                      width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(_d = (_c = max ?? 1e3) == null ? void 0 : _c.toString()) == null ? void 0 : _d.length} * 1ch)`
+                    }
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    slot: "suffix",
+                    className: "es-uic-col-start-3 es-uic-row-span-2 es-uic-select-none es-uic-self-center es-uic-text-gray-500",
+                    children: suffix
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "ghost",
+                      className: "es-uic-col-start-4 !es-uic-h-3 !es-uic-w-5 !es-uic-rounded !es-uic-text-gray-500 disabled:!es-uic-text-gray-300 [&>svg]:es-uic-size-[0.8rem]",
+                      slot: "increment",
+                      icon: icons.caretUpFill
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "ghost",
+                      className: "es-uic-col-start-4 !es-uic-h-3 !es-uic-w-5 !es-uic-rounded !es-uic-text-gray-500 disabled:!es-uic-text-gray-300 [&>svg]:es-uic-size-[0.8rem]",
+                      slot: "decrement",
+                      icon: icons.caretDownFill
+                    }
+                  )
+                ] }),
+                children && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "es-uic-h-[2.375rem] es-uic-w-px es-uic-bg-gray-300" }),
+                  /* @__PURE__ */ jsx("div", { className: "es-uic-pl-1 es-uic-pr-0.5", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  NumberPicker
+};

package/dist/components/popover/popover.js

@@ -0,0 +1,9 @@
+import "react/jsx-runtime";
+import { P, T } from "../../popover-Dx3vKXUX.js";
+import "../../utilities/classnames.js";
+import "../../default-i18n-BhE-OUmt.js";
+import "../../button-BkkdyHfJ.js";
+export {
+  P as Popover,
+  T as TriggeredPopover
+};