@eightshift/ui-components 0.0.1

package/dist/components/responsive/responsive.js

@@ -0,0 +1,499 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { D as DecorativeTooltip } from "../../tooltip-CkCndvTI.js";
+import { classnames } from "../../utilities/classnames.js";
+import { _ as __, s as sprintf } from "../../default-i18n-BhE-OUmt.js";
+import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
+import { upperFirst } from "../../utilities/text-helpers.js";
+import { icons } from "../../icons/icons.js";
+import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
+import { T as TriggeredPopover } from "../../popover-Dx3vKXUX.js";
+import { ResponsivePreview } from "../responsive-preview/responsive-preview.js";
+import { a as ButtonGroup, B as Button } from "../../button-BkkdyHfJ.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { ToggleButton } from "../toggle-button/toggle-button.js";
+import { BaseControl } from "../base-control/base-control.js";
+/**
+ * A component that allows the user to set different values for different breakpoints.
+ *
+ * Inner items should be passed as a render function.
+ * The following props are passed to the render function:
+ * - `breakpoint: string` - Name of the current breakpoint.
+ * - `currentValue: any` - Current value.
+ * - `handleChange: Function<(attributeName: string, value: any) => void>` - A function to change the value for the breakpoint..
+ * - `options: Object<string, any>` - (Optional) Options list passed to the `ResponsiveLegacy` component. (optional)
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object} props.value - The current value of the component.
+ * @param {Function} props.onChange - Function to run when the value changes. `(newValue: Object) => void`.
+ * @param {JSX.Element} props.icon - The icon of the component.
+ * @param {string} props.help - The help text of the component.
+ * @param {string} props.label - The label of the component.
+ * @param {string} props.subtitle - The subtitle of the component.
+ * @param {{label: string, value: string}[]} props.options - Options of the attribute the component is linked to. `{ value: string, label: string }[]`.
+ * @param {string[]} props.breakpoints - Breakpoints to use.
+ * @param {string[]} [props.desktopFirstBreakpoints] - Breakpoints to use in desktop-first mode. If not provided, the breakpoints will be used in reverse order.
+ * @param {Object<string, number>} [props.breakpointData] - Currently used breakpoint data. `{ [breakpoint: string]: number }`.
+ *
+ * @returns {JSX.Element} The Responsive component.
+ *
+ * @example
+ * <Responsive
+ * 	value={value}
+ * 	onChange={onChange}
+ * 	icon={icons.myIcon}
+ * 	label={__('Label', 'eightshift-ui-components')}
+ * 	options={[
+ * 		{ value: 'value1', label: 'Value 1' },
+ * 		{ value: 'value2', label: 'Value 2' },
+ * 		{ value: 'value3', label: 'Value 3' },
+ * 	]}
+ * 	breakpoints={['mobile', 'tablet', 'desktop', 'large']}
+ * 	breakpointData={breakpointData}
+ * >
+ * 	{({ breakpoint, currentValue, options, handleChange }) => (
+ * 		<Select
+ * 			label={breakpoint}
+ * 			value={currentValue}
+ * 			options={options}
+ * 			onChange={handleChange}
+ * 		/>
+ * 	)}
+ * </Responsive>
+ *
+ * @preserve
+ */
+const Responsive = (props) => {
+  const {
+    value,
+    onChange,
+    icon,
+    help,
+    label,
+    subtitle,
+    options,
+    breakpoints,
+    desktopFirstBreakpoints = breakpoints.map((bp) => `max-${bp}`),
+    breakpointData,
+    children
+  } = props;
+  const [detailsVisible, setDetailsVisible] = useState(false);
+  const isDesktopFirst = (value == null ? void 0 : value["_mobileFirst"]) === true;
+  const firstMobileFirstOverride = breakpoints.find((breakpoint) => value == null ? void 0 : value[breakpoint]);
+  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value == null ? void 0 : value[breakpoint]);
+  const breakpointsToMap = isDesktopFirst ? desktopFirstBreakpoints : breakpoints;
+  const DefaultTooltip = () => {
+    var _a, _b, _c, _d;
+    return /* @__PURE__ */ jsx(
+      DecorativeTooltip,
+      {
+        placement: "left",
+        className: "es-uic-p-3",
+        theme: "light",
+        offset: 7.5,
+        arrow: true,
+        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-64 es-uic-p-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-text-balance es-uic-font-semibold es-uic-tabular-nums", children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+            !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
+            firstMobileFirstOverride && sprintf(
+              __("Applies when the browser width is %dpx or narrower.", "eightshift-ui-components"),
+              breakpointData[firstMobileFirstOverride] - 1
+            ),
+            lastDesktopFirstOverride && sprintf(
+              __("Applies when the browser width is %dpx or more.", "eightshift-ui-components"),
+              breakpointData[breakpoints.at(-1)]
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto", children: [
+            firstMobileFirstOverride && /* @__PURE__ */ jsx(
+              BreakpointPreview,
+              {
+                blocks: [
+                  {
+                    breakpoint: __("Default", "eightshift-ui-components"),
+                    widthEnd: breakpointData[firstMobileFirstOverride] - 1,
+                    value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
+                    dotsStart: true,
+                    alignEnd: true,
+                    active: true
+                  },
+                  {
+                    breakpoint: firstMobileFirstOverride,
+                    value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[firstMobileFirstOverride]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value[firstMobileFirstOverride]),
+                    dotsEnd: true
+                  }
+                ]
+              }
+            ),
+            lastDesktopFirstOverride && /* @__PURE__ */ jsx(
+              BreakpointPreview,
+              {
+                blocks: [
+                  {
+                    breakpoint: lastDesktopFirstOverride.replace("max-", ""),
+                    value: ((_c = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[lastDesktopFirstOverride]))) == null ? void 0 : _c.label) ?? upperFirst(value == null ? void 0 : value[lastDesktopFirstOverride]),
+                    dotsStart: true,
+                    alignEnd: true
+                  },
+                  {
+                    breakpoint: __("Default", "eightshift-ui-components"),
+                    value: ((_d = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _d.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
+                    width: breakpointData[breakpoints.at(-1)],
+                    dotsEnd: true,
+                    active: true
+                  }
+                ]
+              }
+            )
+          ] })
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-8 es-uic-cursor-help es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-200 es-uic-p-0.5 es-uic-text-gray-950 [&>svg]:es-uic-size-4", children: icons.play })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      help,
+      actions: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        /* @__PURE__ */ jsxs(
+          Menu,
+          {
+            tooltip: __("Responsive options", "eightshift-ui-components"),
+            popoverProps: { placement: "bottom right" },
+            children: [
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  className: "!es-uic-pb-0 !es-uic-pt-1",
+                  disabled: true,
+                  children: __("Breakpoint mode", "eightshift-ui-components")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  selected: !isDesktopFirst,
+                  onClick: () => {
+                    const thingsToDelete = [...breakpoints, ...desktopFirstBreakpoints].reduce(
+                      (prev, curr) => ({ ...prev, [curr]: void 0 }),
+                      {}
+                    );
+                    onChange({
+                      ...value,
+                      ...thingsToDelete,
+                      _mobileFirst: false
+                    });
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    RichLabel,
+                    {
+                      label: __("Mobile-first", "eightshift-ui-components"),
+                      subtitle: __("Recommended", "eightshift-ui-components")
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  selected: isDesktopFirst,
+                  onClick: () => {
+                    const thingsToDelete = [...breakpoints, ...desktopFirstBreakpoints].reduce(
+                      (prev, curr) => ({ ...prev, [curr]: void 0 }),
+                      {}
+                    );
+                    onChange({
+                      ...value,
+                      ...thingsToDelete,
+                      _mobileFirst: true
+                    });
+                  },
+                  children: __("Desktop-first", "eightshift-ui-components")
+                }
+              ),
+              /* @__PURE__ */ jsx(MenuSeparator, {}),
+              /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: icons.clearAlt,
+                  onClick: () => {
+                    const thingsToDelete = [...breakpoints, ...desktopFirstBreakpoints].reduce(
+                      (prev, curr) => ({ ...prev, [curr]: void 0 }),
+                      {}
+                    );
+                    onChange({
+                      ...value,
+                      ...thingsToDelete
+                    });
+                  },
+                  children: __("Clear all overrides", "eightshift-ui-components")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TriggeredPopover,
+          {
+            "aria-label": props["aria-label"] ?? __("Breakpoint preview", "eightshift-ui-components"),
+            trigger: /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: !Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && (value == null ? void 0 : value[key]) !== void 0),
+                icon: icons.previewResponsive,
+                tooltip: __("Breakpoint preview", "eightshift-ui-components")
+              }
+            ),
+            children: /* @__PURE__ */ jsx(
+              ResponsivePreview,
+              {
+                value,
+                isDesktopFirst,
+                breakpoints,
+                desktopFirstBreakpoints,
+                options,
+                breakpointData
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            icon: isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2,
+            onChange: () => setDetailsVisible(!detailsVisible),
+            selected: detailsVisible,
+            tooltip: detailsVisible ? __("Hide responsive overrides", "eightshift-ui-components") : __("Show responsive overrides", "eightshift-ui-components")
+          }
+        )
+      ] }),
+      children: [
+        !isDesktopFirst && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classnames(
+              "es-uic-grid es-uic-items-center es-uic-gap-x-2 es-uic-transition-[grid-template-columns,_margin-block-end] es-uic-duration-150",
+              detailsVisible ? "es-uic-mb-2 es-uic-grid-cols-[minmax(0,_2rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+            ),
+            children: [
+              detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
+              /* @__PURE__ */ jsx("div", { className: classnames(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
+                breakpoint: "_default",
+                currentValue: value == null ? void 0 : value["_default"],
+                handleChange: (newValue) => onChange({
+                  ...value,
+                  _default: newValue
+                }),
+                options
+              }) })
+            ]
+          },
+          "_default-mobile-first"
+        ),
+        /* @__PURE__ */ jsx(
+          AnimatedVisibility,
+          {
+            visible: detailsVisible,
+            className: "es-uic-space-y-2",
+            children: breakpointsToMap.map((breakpoint, i) => {
+              var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+              const realBreakpointName = breakpoint.replace("max-", "");
+              const filterBreakpoints = isDesktopFirst ? [...breakpointsToMap, "_default"] : ["_default", ...breakpointsToMap];
+              const aboveOverride = isDesktopFirst ? filterBreakpoints.slice(i + 1).find((breakpoint2) => value == null ? void 0 : value[breakpoint2]) : filterBreakpoints.slice(0, i + 1).toReversed().find((breakpoint2) => value == null ? void 0 : value[breakpoint2]);
+              const belowOverride = isDesktopFirst ? filterBreakpoints.slice(0, i).toReversed().find((breakpoint2) => value == null ? void 0 : value[breakpoint2]) : filterBreakpoints.slice(i + 2).find((breakpoint2) => value == null ? void 0 : value[breakpoint2]);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      DecorativeTooltip,
+                      {
+                        placement: "left",
+                        theme: "light",
+                        offset: 7.5,
+                        arrow: true,
+                        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-96 es-uic-p-1", children: [
+                          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-font-semibold", children: upperFirst(realBreakpointName) }),
+                          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+                            !isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
+                              !belowOverride && value[breakpoint] && sprintf(
+                                __("Applied when the browser width is %dpx or more.", "eightshift-ui-components"),
+                                breakpointData[realBreakpointName]
+                              ),
+                              belowOverride && value[breakpoint] && sprintf(
+                                __(
+                                  "Applied when the browser width is between %dpx and %dpx.",
+                                  "eightshift-ui-components"
+                                ),
+                                breakpointData[realBreakpointName],
+                                breakpointData[belowOverride] - 1
+                              ),
+                              !value[breakpoint] && sprintf(__("From %dpx", "eightshift-ui-components"), breakpointData[realBreakpointName])
+                            ] }),
+                            isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
+                              !belowOverride && value[breakpoint] && sprintf(
+                                __("Applied when the browser width is %dpx or less.", "eightshift-ui-components"),
+                                breakpointData[realBreakpointName] - 1
+                              ),
+                              belowOverride && value[breakpoint] && sprintf(
+                                __(
+                                  "Applied when the browser width is between %dpx and %dpx.",
+                                  "eightshift-ui-components"
+                                ),
+                                breakpointData[belowOverride == null ? void 0 : belowOverride.replace("max-", "")],
+                                breakpointData[realBreakpointName] - 1
+                              ),
+                              !value[breakpoint] && sprintf(
+                                __("Up to %dpx", "eightshift-ui-components"),
+                                breakpointData[belowOverride == null ? void 0 : belowOverride.replace("max-", "")]
+                              )
+                            ] })
+                          ] }),
+                          !value[breakpoint] && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-2 es-uic-block es-uic-font-medium es-uic-italic", children: __("Not set", "eightshift-ui-components") }),
+                          value[breakpoint] && /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto es-uic-mt-2", children: [
+                            !isDesktopFirst && /* @__PURE__ */ jsx(
+                              BreakpointPreview,
+                              {
+                                dotsStart: belowOverride,
+                                blocks: [
+                                  aboveOverride !== "_default" && {
+                                    breakpoint: aboveOverride,
+                                    value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[aboveOverride]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value[aboveOverride]),
+                                    dotsStart: !belowOverride,
+                                    alignEnd: !belowOverride
+                                  },
+                                  aboveOverride === "_default" && {
+                                    breakpoint: __("Default", "eightshift-ui-components"),
+                                    value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
+                                    dotsStart: !belowOverride,
+                                    alignEnd: !belowOverride
+                                  },
+                                  {
+                                    breakpoint: realBreakpointName,
+                                    value: ((_c = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _c.label) ?? upperFirst(value == null ? void 0 : value[breakpoint]),
+                                    width: breakpointData[realBreakpointName],
+                                    active: true,
+                                    dotsEnd: !belowOverride
+                                  },
+                                  belowOverride && {
+                                    breakpoint: belowOverride,
+                                    value: ((_d = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[belowOverride]))) == null ? void 0 : _d.label) ?? upperFirst(value == null ? void 0 : value[belowOverride]),
+                                    width: breakpointData[belowOverride],
+                                    dotsEnd: true
+                                  }
+                                ]
+                              }
+                            ),
+                            isDesktopFirst && /* @__PURE__ */ jsx(
+                              BreakpointPreview,
+                              {
+                                dotsStart: true,
+                                dotsEnd: aboveOverride !== "_default",
+                                blocks: [
+                                  belowOverride && {
+                                    breakpoint: belowOverride == null ? void 0 : belowOverride.replace("max-", ""),
+                                    value: ((_e = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[belowOverride == null ? void 0 : belowOverride.replace("max-", "")]))) == null ? void 0 : _e.label) ?? upperFirst(value == null ? void 0 : value[belowOverride])
+                                  },
+                                  {
+                                    breakpoint: realBreakpointName,
+                                    value: ((_f = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _f.label) ?? upperFirst(value == null ? void 0 : value[realBreakpointName]),
+                                    width: breakpointData[(_g = filterBreakpoints[i - 1]) == null ? void 0 : _g.replace("max-", "")],
+                                    active: true
+                                  },
+                                  aboveOverride !== "_default" && {
+                                    breakpoint: aboveOverride == null ? void 0 : aboveOverride.replace("max-", ""),
+                                    value: ((_h = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[aboveOverride]))) == null ? void 0 : _h.label) ?? upperFirst(value == null ? void 0 : value[aboveOverride]),
+                                    width: breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")]
+                                  },
+                                  aboveOverride === "_default" && {
+                                    breakpoint: __("Default", "eightshift-ui-components"),
+                                    value: ((_i = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _i.label) ?? upperFirst(value == null ? void 0 : value["_default"]),
+                                    width: breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")],
+                                    dotsEnd: true
+                                  }
+                                ]
+                              }
+                            )
+                          ] })
+                        ] }),
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: classnames(
+                              "es-uic-flex es-uic-size-8 es-uic-shrink-0 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-gray-100 es-uic-p-0.5 es-uic-text-gray-800",
+                              !value[breakpoint] && "[&>svg]:es-uic-opacity-25"
+                            ),
+                            children: (_j = icons) == null ? void 0 : _j[`screen${upperFirst(realBreakpointName)}`]
+                          }
+                        )
+                      }
+                    ),
+                    children({
+                      breakpoint,
+                      currentValue: value == null ? void 0 : value[breakpoint],
+                      handleChange: (newValue) => {
+                        onChange({
+                          ...value,
+                          [breakpoint]: newValue
+                        });
+                      },
+                      options
+                    }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        onPress: () => {
+                          onChange({
+                            ...value,
+                            [breakpoint]: void 0
+                          });
+                        },
+                        icon: icons.clearAlt,
+                        disabled: !(value == null ? void 0 : value[breakpoint]),
+                        type: "ghost"
+                      }
+                    )
+                  ]
+                },
+                realBreakpointName
+              );
+            })
+          }
+        ),
+        isDesktopFirst && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classnames(
+              "es-uic-grid es-uic-items-center es-uic-gap-x-2 es-uic-transition-[grid-template-columns,_margin-block-start] es-uic-duration-150",
+              detailsVisible ? "!es-uic-mt-2 es-uic-grid-cols-[minmax(0,_2rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]" : "es-uic-grid-cols-[minmax(0,_0rem),_minmax(0,_1fr),_minmax(0,_2.25rem)]"
+            ),
+            children: [
+              detailsVisible && /* @__PURE__ */ jsx(DefaultTooltip, {}),
+              /* @__PURE__ */ jsx("div", { className: classnames(detailsVisible ? "es-uic-col-start-2 es-uic-col-end-2" : "es-uic-col-span-full"), children: children({
+                breakpoint: "_default",
+                currentValue: value == null ? void 0 : value["_default"],
+                handleChange: (newValue) => onChange({
+                  ...value,
+                  _default: newValue
+                }),
+                options
+              }) })
+            ]
+          },
+          "_default-desktop-first"
+        )
+      ]
+    }
+  );
+};
+export {
+  Responsive
+};

package/dist/components/responsive-preview/responsive-preview.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { upperFirst } from "../../utilities/text-helpers.js";
+import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";
+import { icons } from "../../icons/icons.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+/**
+ * A component that displays a preview of the responsive settings.
+ *
+ * **Note**: Only intended for horizontal groups of buttons that don't wrap.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object} props.value - The value object.
+ * @param {boolean} props.isDesktopFirst - Whether the desktop-first mode is enabled.
+ * @param {string[]} props.breakpoints - Breakpoints to use.
+ * @param {string[]} [props.desktopFirstBreakpoints] - Breakpoints to use in desktop-first mode. If not provided, the breakpoints will be used in reverse order.
+ * @param {{label: string, value: string}[]} props.options - Options of the attribute the component is linked to. `{ value: string, label: string }[]`.
+ * @param {Object} props.breakpointData - Breakpoints to use. `{ [breakpoint: string]: number }`.
+ *
+ * @returns {JSX.Element} The ResponsivePreview component.
+ *
+ * @example
+ * <ResponsivePreview
+ * 	value={value}
+ * 	isDesktopFirst={isDesktopFirst}
+ * 	breakpoints={breakpoints}
+ * 	options={options}
+ * 	breakpointData={breakpointData} // e.g. from global manifest
+ * />
+ *
+ * @preserve
+ */
+const ResponsivePreview = (props) => {
+  var _a, _b;
+  const {
+    value,
+    isDesktopFirst,
+    breakpoints,
+    desktopFirstBreakpoints = breakpoints.map((bp) => `max-${bp}`),
+    options,
+    breakpointData
+  } = props;
+  const firstMobileFirstOverride = breakpoints.find((breakpoint) => value == null ? void 0 : value[breakpoint]);
+  const lastDesktopFirstOverride = desktopFirstBreakpoints.toReversed().find((breakpoint) => value == null ? void 0 : value[breakpoint]);
+  let previewItems = [];
+  if (firstMobileFirstOverride) {
+    previewItems = [
+      ...previewItems,
+      {
+        breakpoint: __("Default", "eightshift-ui-components"),
+        value: ((_a = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _a.label) ?? upperFirst(value == null ? void 0 : value["_default"])
+      }
+    ];
+    breakpoints.forEach((breakpoint) => {
+      var _a2;
+      if (!(value == null ? void 0 : value[breakpoint])) {
+        return;
+      }
+      previewItems = [
+        ...previewItems,
+        {
+          width: breakpointData[breakpoint],
+          breakpoint,
+          value: ((_a2 = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[firstMobileFirstOverride]))) == null ? void 0 : _a2.label) ?? upperFirst(value == null ? void 0 : value[firstMobileFirstOverride])
+        }
+      ];
+    });
+  }
+  if (lastDesktopFirstOverride) {
+    desktopFirstBreakpoints.forEach((breakpoint, i) => {
+      var _a2;
+      if (!(value == null ? void 0 : value[breakpoint])) {
+        return;
+      }
+      previewItems = [
+        ...previewItems,
+        {
+          width: breakpointData[breakpoints[i - 1]],
+          breakpoint: breakpoint.replace("max-", ""),
+          value: ((_a2 = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value[breakpoint]))) == null ? void 0 : _a2.label) ?? upperFirst(value == null ? void 0 : value[breakpoint])
+        }
+      ];
+    });
+    previewItems = [
+      ...previewItems,
+      {
+        width: breakpointData[breakpoints.at(-1)],
+        breakpoint: __("Default", "eightshift-ui-components"),
+        value: ((_b = options == null ? void 0 : options.find((opt) => opt.value === (value == null ? void 0 : value["_default"]))) == null ? void 0 : _b.label) ?? upperFirst(value == null ? void 0 : value["_default"])
+      }
+    ];
+    previewItems.at(0).width = null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-min-w-72 es-uic-flex-col es-uic-items-start es-uic-gap-4 es-uic-p-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-2.5", children: [
+      /* @__PURE__ */ jsx(
+        RichLabel,
+        {
+          icon: icons.previewResponsive,
+          label: __("Responsive preview", "eightshift-ui-components")
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "es-uic-ml-auto es-uic-select-none es-uic-rounded es-uic-bg-gray-100 es-uic-px-1 es-uic-py-0.5 es-uic-text-xs es-uic-text-gray-500", children: isDesktopFirst ? __("Desktop-first", "eightshift-ui-components") : __("Mobile-first", "eightshift-ui-components") })
+    ] }),
+    previewItems.length === 0 && /* @__PURE__ */ jsx("span", { className: "es-uic-text-gray-500 es-uic-text-sm es-uic-italic", children: __("No overrides applied", "eightshift-ui-components") }),
+    /* @__PURE__ */ jsx(
+      BreakpointPreview,
+      {
+        blocks: previewItems,
+        dotsStart: true,
+        dotsEnd: true
+      }
+    )
+  ] });
+};
+export {
+  ResponsivePreview
+};

package/dist/components/rich-label/rich-label.js

@@ -0,0 +1,56 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { classnames } from "../../utilities/classnames.js";
+/**
+ * Component that displays a label, with an optional icon and subtitle.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display.
+ * @param {string} [props.label] - Label to display.
+ * @param {string} [props.subtitle] - Subtitle to display.
+ * @param {JSX.Element} [props.as] - Element to render the label as. Not compatible with `contentsOnly`.
+ * @param {string} [props.className] - Classes to pass to the label.
+ * @param {boolean} [props.fullWidth=false] - If `true`, the component will take up as much space as it can.
+ * @param {boolean} [props.contentsOnly] - If `true`, only the label (/icon/subtitle) will be rendered, without any wrapping elements. Useful if you want to provide your own layout.
+ *
+ * @returns {JSX.Element} The RichLabel component.
+ *
+ * @example
+ * <RichLabel
+ * 	icon={icons.myIcon}
+ * 	label='My label'
+ * />
+ *
+ * @preserve
+ */
+const RichLabel = (props) => {
+  const { icon, label, subtitle, as, className, fullWidth = false, contentsOnly } = props;
+  const ComponentToRender = as ?? "div";
+  if (contentsOnly) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "es-uic-text-slate-500 [&>svg]:es-uic-size-5.5", children: icon }),
+      label && /* @__PURE__ */ jsx("span", { className: "es-uic-text-balance", children: label }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: "es-uic-text-xs es-uic-text-gray-500 es-uic-text-balance", children: subtitle })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    ComponentToRender,
+    {
+      className: classnames(
+        "es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm es-uic-leading-tight es-uic-text-gray-800",
+        fullWidth && "es-uic-grow",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "es-uic-text-slate-500 [&>svg]:es-uic-size-5.5", children: icon }),
+        (label || subtitle) && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-col es-uic-items-start es-uic-text-start es-uic-text-balance", children: [
+          label && /* @__PURE__ */ jsx("span", { children: label }),
+          subtitle && /* @__PURE__ */ jsx("span", { className: "es-uic-text-xs es-uic-text-gray-500", children: subtitle })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  RichLabel
+};