@eightshift/ui-components 3.0.1 → 5.0.0

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

@@ -1,158 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-B2153VXe.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.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The OptionsPanel component.
- *
- * @example
- * <OptionsPanel title='Paragraph'>
- * 	...
- * </OptionsPanel>
- *
- * @preserve
- */
-const OptionsPanel = (props) => {
-  const { children, className, title, icon, subtitle, help, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "es:not-last:mb-10", children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("es:bg-white es:rounded-xl es:border es:border-secondary-300 es:overflow-clip es:max-w-lg es:shadow-xs", className), children: [
-      title && /* @__PURE__ */ jsx(
-        RichLabel,
-        {
-          icon,
-          label: title,
-          subtitle,
-          className: clsx(
-            "es:bg-secondary-50 es:shrink-0 es:text-secondary-700 es:px-4 es:**:first:text-base! es:border-b es:border-b-secondary-200",
-            subtitle ? "es:py-3" : "es:pt-2.25 es:pb-1.75"
-          ),
-          noColor: true
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "es:divide-y es:divide-secondary-200/75 es:py-4", children })
-    ] }),
-    help && /* @__PURE__ */ jsx("span", { className: "es:mx-0.5 es:mt-1 es:block es:text-sm es:text-secondary-400", children: help })
-  ] });
-};
-/**
- * Component that provides a container for grouping related options within the `OptionsPanel` component.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {string} [props.className] - Classes to pass to the container.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The OptionsPanelSection component.
- *
- * @example
- * <OptionsPanelSection>
- * 	...
- * </OptionsPanelSection>
- *
- * @preserve
- */
-const OptionsPanelSection = ({ children, className, hidden }) => {
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-2.5 es:not-last:pb-4 es:not-first:pt-4 es:px-4", className), children });
-};
-/**
- * Component that provides a header for the top of an options page.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {boolean} [props.sticky] - If `true`, the header will be sticky (scroll with content). Make sure to pass a background color!
- * @param {string} [props.title] - Title to show.
- * @param {Number} [props.level=2] - Heading level of the title.
- * @param {string} [props.className] - Classes to pass to the container.
- * @param {boolean} [props.limitWidth] - If `true`, the width is limited.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Controls to show on the right side of the header.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The OptionsPanelHeader component.
- *
- * @example
- * <OptionsPanelHeader title='Theme options'>
- * 	...
- * </OptionsPanelHeader>
- *
- * @preserve
- */
-const OptionsPanelHeader = ({ children, sticky, title, className, actions, level = 2, limitWidth, hidden }) => {
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:space-y-2.5", limitWidth && "es:max-w-md", sticky && "es:sticky es:top-0 es:z-10 es:bg-white", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-wrap es:items-center es:justify-between es:gap-x-8 es:gap-y-4", children: [
-      /* @__PURE__ */ jsx(
-        $5cb03073d3f54797$export$a8a3e93435678ff9,
-        {
-          className: "es:text-2xl es:font-medium es:tracking-tight",
-          level,
-          children: title
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "es:flex es:items-center es:gap-2", children: actions })
-    ] }),
-    children
-  ] });
-};
-/**
- * Component that provides an intro for an options page.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {string} [props.title] - Title to show.
- * @param {string} [props.subtitle] - Subtitle to show.
- * @param {Number} [props.level=2] - Heading level of the title.
- * @param {string} [props.className] - Classes to pass to the container.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Controls to show on the right side of the header.
- * @param {boolean} [props.border] - If `true`, a border is shown below the text.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The OptionsPanelIntro component.
- *
- * @example
- * <OptionsPanelIntro title='Theme options' />
- *
- * @preserve
- */
-const OptionsPanelIntro = ({ title, subtitle, className, level = 3, border, hidden }) => {
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:pb-2.5", border && "es:mb-5 es:border-b es:border-b-secondary-200", className), children: [
-    /* @__PURE__ */ jsx(
-      $5cb03073d3f54797$export$a8a3e93435678ff9,
-      {
-        className: "es:text-lg es:tracking-tight es:text-secondary-800",
-        level,
-        children: title
-      }
-    ),
-    subtitle && /* @__PURE__ */ jsx("p", { className: "es:text-sm es:text-secondary-500 es:mt-0.5", children: subtitle })
-  ] });
-};
-export {
-  OptionsPanel,
-  OptionsPanelHeader,
-  OptionsPanelIntro,
-  OptionsPanelSection
-};

package/dist/components/placeholders/file-placeholder.js

@@ -1,42 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { icons } from "../../icons/icons.js";
-import { RichLabel } from "../rich-label/rich-label.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-/**
- * A simple file placeholder.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} [props.icon] - File type icon override.
- * @param {string} [props.fileName] - Current file name.
- * @param {string} [props.className] - Classes to pass to the component.
- *
- * @returns {JSX.Element} The FilePlaceholder component.
- *
- * @example
- * <FilePlaceholder />
- *
- * @example
- * <FilePlaceholder fileName='demo.json' />
- *
- * @preserve
- */
-const FilePlaceholder = (props) => {
-  const { icon, fileName, className, children } = props;
-  return /* @__PURE__ */ jsx(
-    RichLabel,
-    {
-      icon: icon ?? icons.file,
-      label: (fileName ? fileName : children) ?? __("No file selected", "eightshift-ui-components"),
-      className: clsx(
-        "es:w-fit es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:p-2 es:pr-3 es:text-xs es:text-secondary-300 es:shadow-xs",
-        fileName && "es:font-mono",
-        className
-      )
-    }
-  );
-};
-export {
-  FilePlaceholder
-};

package/dist/components/placeholders/image-placeholder.js

@@ -1,88 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { icons } from "../../icons/icons.js";
-/**
- * A simple image placeholder, with an empty state.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {string} [props.url] - The image URL.
- * @param {string} [props.alt] - The image alt text.
- * @param {ImagePlaceholderStyle} [props.style='default'] - Style of the image placeholder.
- * @param {ImagePlaceholderSize} [props.size='default'] - Size of the image placeholder.
- * @param {boolean} [props.noImage] - If `true`, the image within the placeholder will not be displayed, even if `url` is provided.
- * @param {string} [props.className] - Classes to pass to the component.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode.
- *
- * @returns {JSX.Element} The ImagePlaceholder component.
- *
- * @typedef {'default' | 'simple'} ImagePlaceholderStyle
- * @typedef {'cover'|'contain' | 'fill'} ImagePlaceholderImageMode
- * @typedef @typedef {'auto' | 'default' | 'large' | 'fullWidth' | 'fullHeight' | 'full' | 'video'} ImagePlaceholderSize
- *
- * @example
- * <ImagePlaceholder url="https://example.com/image.jpg" alt="Image alt text" />
- *
- * @preserve
- */
-const ImagePlaceholder = (props) => {
-  const { url, alt, style = "default", size = "default", noImage, className, hidden, imageMode = "cover" } = props;
-  if (hidden) {
-    return null;
-  }
-  const styleClassName = {
-    default: "es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-300 es:shadow-xs",
-    simple: "es:rounded-xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-300"
-  };
-  const sizeClassName = {
-    auto: "",
-    default: "es:size-20",
-    large: "es:size-40",
-    fullWidth: "es:w-full",
-    fullHeight: "es:h-full",
-    full: "es:size-full",
-    video: "es:w-full es:aspect-video"
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "es:grid es:grid-cols-1 es:grid-rows-1 es:overflow-hidden",
-        "es:*:col-start-1 es:*:col-end-1 es:*:row-start-1 es:*:row-end-1",
-        styleClassName[style] ?? (styleClassName == null ? void 0 : styleClassName.default),
-        sizeClassName[size] ?? (sizeClassName == null ? void 0 : sizeClassName.default),
-        className
-      ),
-      children: [
-        !noImage && /* @__PURE__ */ jsx(
-          "img",
-          {
-            className: clsx(
-              "es:size-full! es:select-none es:fill-mode-forwards",
-              imageMode === "cover" && "es:object-cover",
-              imageMode === "contain" && "es:object-contain",
-              imageMode === "fill" && "es:object-fill",
-              (url == null ? void 0 : url.length) > 0 ? "es:motion-opacity-in es:motion-scale-in-125 es:motion-blur-in-xs es:motion-delay-300/blur es:motion-duration-300 es:motion-ease-spring-snappy/scale" : "es:hidden"
-            ),
-            src: url,
-            alt
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              "es:place-self-center es:justify-self-center es:transition es:fill-mode-forwards es:icon:size-7",
-              !url ? "es:motion-opacity-in es:motion-scale-in-90 es:motion-duration-300 es:motion-ease-spring-snappy/scale" : "es:invisible"
-            ),
-            children: icons.image
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  ImagePlaceholder
-};

package/dist/components/placeholders/media-placeholder.js

@@ -1,63 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { icons } from "../../icons/icons.js";
-/**
- * A simple media placeholder, with an empty state.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {MediaPlaceholderStyle} [props.style='default'] - Style of the image placeholder.
- * @param {MediaPlaceholderSize} [props.size='default'] - Size of the image placeholder.
- * @param {string} [props.className] - Classes to pass to the component.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- * @param {JSX.Element} [props.icon] - Icon to show within the placeholder.
- * @param {string|JSX.Element} [props.helpText] - Text to show below the icon.
- *
- * @returns {JSX.Element} The MediaPlaceholder component.
- *
- * @typedef {'default'|'simple'} MediaPlaceholderStyle
- * @typedef {'auto' | 'default' | 'large' | 'fullWidth' | 'fullHeight' | 'full' | 'video'} MediaPlaceholderSize
- *
- * @example
- * <MediaPlaceholder url="https://example.com/image.jpg" alt="Image alt text" />
- *
- * @preserve
- */
-const MediaPlaceholder = (props) => {
-  const { style = "default", size = "default", className, icon, helpText, children, hidden } = props;
-  if (hidden) {
-    return null;
-  }
-  const styleClassName = {
-    default: "es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-400 es:shadow-xs",
-    simple: "es:rounded-xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-400"
-  };
-  const sizeClassName = {
-    auto: "",
-    default: "es:size-20",
-    large: "es:size-40",
-    fullWidth: "es:w-full",
-    fullHeight: "es:h-full",
-    full: "es:size-full",
-    video: "es:w-full es:aspect-video"
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        "es:flex es:flex-col es:items-center es:justify-center es:gap-2 es:overflow-hidden es:p-2",
-        styleClassName[style] ?? (styleClassName == null ? void 0 : styleClassName.default),
-        sizeClassName[size] ?? (sizeClassName == null ? void 0 : sizeClassName.default),
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "es:icon:size-7", children: icon ?? icons.image }),
-        helpText && /* @__PURE__ */ jsx("div", { className: "es:text-sm es:text-secondary-500", children: helpText }),
-        children && /* @__PURE__ */ jsx("div", { className: "es:mt-2 es:flex es:items-center es:gap-x-2 es:gap-y-2.5 es:text-sm", children })
-      ]
-    }
-  );
-};
-export {
-  MediaPlaceholder
-};

package/dist/components/popover/popover.js

@@ -1,207 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-8tYeQ9n4.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { Button } from "../button/button.js";
-/**
- * A popover component.
- *
- * Two modes of operation are supported:
- * - **controlled mode**: pass `isOpen` and `onOpenChange` to control when the popover is open.
- * - **uncontrolled mode**: pass `openByDefault` to set the initial popover state. The show/hide state will be managed internally, based on the interaction with the trigger button.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {React.Ref} props.triggerRef - Ref of the trigger button. In uncontrolled mode, this element will be used to open the popover. In controlled mode, the popover will be anchored to this element.
- * @param {boolean} [props.openByDefault=false] - (**Controlled mode**) If `true`, the popover is open by default.
- * @param {boolean} props.isOpen - (**Uncontrolled mode**) If `true`, the popover is open.
- * @param {Function} props.onOpenChange - (**Uncontrolled mode**) Function to run when the popover is opened or closed. `(isOpen: boolean) => void`.
- * @param {PopoverPlacement} props.placement - The placement of the popover.
- * @param {string} [props.className] - Classes to pass to the popover contents.
- * @param {string} [props.wrapperClassName] - Classes to pass to the popover wrapper.
- * @param {Object} props.style - Styles to pass to the popover.
- * @param {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
- * @param {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
- * @param {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
- * @param {boolean} props.shouldFlip - If `true`, the popover should flip when there is not enough space.
- * @param {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The Popover component.
- *
- * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPlacement
- *
- * @example
- * // Uncontrolled mode.
- * const ref = useRef(null);
- *
- * <Button forwardedRef={ref}>Open popover</Button>
- *
- * <Popover
- * 	triggerRef={triggerRef}
- * 	openByDefault={true}
- * >
- * 	...
- * </Popover>
- *
- * @example
- * // Controlled mode.
- * const [open, setOpen] = useState(false);
- *
- * <Button onPress={() => setOpen(true)}>Open popover</Button>
- *
- * <Popover
- * 	onOpenChange={setOpen}
- * 	isOpen={open}
- * 	triggerRef={triggerRef}
- * >
- * 	...
- * 	<Button onPress={() => setOpen(false)}>Close popover</Button>
- * </Popover>
- *
- * @preserve
- */
-const Popover = (props) => {
-  const {
-    children,
-    triggerRef,
-    openByDefault,
-    isOpen,
-    onOpenChange,
-    placement,
-    className,
-    wrapperClassName,
-    style,
-    offset,
-    crossOffset,
-    containerPadding,
-    shouldFlip,
-    shouldCloseOnInteractOutside = () => true,
-    "aria-label": rawAriaLabel,
-    hidden,
-    ...other
-  } = props;
-  let ariaLabel = rawAriaLabel;
-  if (ariaLabel === false) {
-    ariaLabel = void 0;
-  }
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    $07b14b47974efb58$export$5b6b19405a83ff9d,
-    {
-      shouldFlip,
-      shouldCloseOnInteractOutside,
-      triggerRef,
-      isOpen,
-      onOpenChange,
-      defaultOpen: openByDefault,
-      placement,
-      offset,
-      crossOffset,
-      containerPadding,
-      className: ({ isEntering, isExiting }) => clsx(
-        "es:rounded-lg es:border es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden",
-        "es:motion-safe:motion-ease-spring-smooth",
-        isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
-        isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200",
-        wrapperClassName
-      ),
-      style,
-      children: /* @__PURE__ */ jsx(
-        $de32f1b87079253c$export$3ddf2d174ce01153,
-        {
-          className: clsx("es:p-1 es:text-sm es:outline-hidden", className),
-          "aria-label": ariaLabel,
-          ...other,
-          children
-        }
-      )
-    }
-  );
-};
-/**
- * A simple version of the Popover component that includes a trigger button.
- * The control of the popover is handled internally. A custom trigger can be provided.
- *
- * If you need more control over the trigger, use the Popover component directly.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {JSX.Element} props.trigger - Allows using a custom trigger element.
- * @param {JSX.Element} [props.triggerButtonIcon] - The icon for the built-in trigger button.
- * @param {string} props.triggerButtonLabel - The label for the built-in trigger button.
- * @param {Object} props.triggerButtonProps - Props to pass to the built-in trigger button.
- * @param {Function} props.onOpenChange - Function to run when the popover is opened or closed. `(isOpen: boolean) => void`.
- * @param {boolean} props.openByDefault - If `true`, the popover is open by default.
- * @param {PopoverPlacement} props.placement - The placement of the popover.
- * @param {string} props.className - Classes to pass to the popover.
- * @param {Object} props.style - Styles to pass to the popover.
- * @param {number} props.offset - Offset from the trigger element, on the same axis as the placement of the popover (e.g. if `placement` is `left`, this controls the horizontal spacing from the element).
- * @param {number} props.crossOffset - Offset from the trigger element, on the opposite axis as the placement of the popover (e.g. if `placement` is `left`, this controls the vertical spacing from the element).
- * @param {number} props.containerPadding - Space that should be left between the popover and the edge of the container (the default container is browser window).
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The TriggeredPopover component.
- *
- * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPlacement
- *
- * @example
- * <TriggeredPopover>
- * 		...
- * </TriggeredPopover>
- *
- * @preserve
- */
-const TriggeredPopover = (props) => {
-  const {
-    trigger,
-    triggerButtonIcon,
-    triggerButtonLabel = !triggerButtonIcon && __("Open", "eightshift-ui-components"),
-    triggerButtonProps,
-    children,
-    onOpenChange,
-    openByDefault,
-    placement,
-    style,
-    className,
-    offset,
-    crossOffset,
-    containerPadding,
-    hidden,
-    ...rest
-  } = props;
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { onOpenChange, children: [
-    trigger,
-    !trigger && /* @__PURE__ */ jsx(
-      Button,
-      {
-        icon: triggerButtonIcon,
-        ...triggerButtonProps,
-        children: triggerButtonLabel
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        placement,
-        openByDefault,
-        offset,
-        crossOffset,
-        containerPadding,
-        className,
-        style,
-        ...rest,
-        children
-      }
-    )
-  ] });
-};
-export {
-  Popover,
-  TriggeredPopover
-};