@inspirer-dev/hero-size-checkbox/dist/_chunks/index-B0WAZNDT.js

A custom field plugin for Strapi v5 that provides a checkbox selector for hero widget sizes (XL, L, M, S).

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const designSystem = require("@strapi/design-system");
const icons = require("@strapi/icons");
const reactIntl = require("react-intl");
const HERO_SIZES = [
  { value: "XL", label: "XL" },
  { value: "L", label: "L" },
  { value: "M", label: "M" },
  { value: "S", label: "S" }
];
const HeroSizeCheckboxInput = react.forwardRef(
  ({ name, onChange, value, intlLabel, disabled = false, error, required, hint }, ref) => {
    reactIntl.useIntl();
    const currentValue = value || { sizes: [] };
    const handleToggle = (sizeValue) => {
      const newSizes = currentValue.sizes.includes(sizeValue) ? currentValue.sizes.filter((size) => size !== sizeValue) : [...currentValue.sizes, sizeValue];
      const newValue = {
        sizes: newSizes
      };
      onChange({
        target: {
          name,
          value: newValue
        }
      });
    };
    const getDisplayName = () => {
      if (intlLabel?.defaultMessage && !intlLabel.defaultMessage.includes(".")) {
        return intlLabel.defaultMessage;
      }
      return "Hero Size Checkbox";
    };
    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, error, hint, required, children: [
      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: getDisplayName() }),
      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "row", gap: 2, children: HERO_SIZES.map((size) => {
        const isSelected = currentValue.sizes.includes(size.value);
        return /* @__PURE__ */ jsxRuntime.jsx(
          designSystem.Button,
          {
            variant: isSelected ? "default" : "tertiary",
            size: "S",
            onClick: (event) => {
              event.preventDefault();
              handleToggle(size.value);
            },
            disabled,
            startIcon: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) : null,
            children: size.label
          },
          size.value
        );
      }) }) }),
      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
    ] });
  }
);
HeroSizeCheckboxInput.displayName = "HeroSizeCheckboxInput";
exports.HeroSizeCheckboxInput = HeroSizeCheckboxInput;
exports.default = HeroSizeCheckboxInput;