@inspirer-dev/hero-size-checkbox/dist/_chunks/index-ChoBgLkI.mjs

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

import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Field, Box, Flex, Button } from "@strapi/design-system";
import { Check } from "@strapi/icons";
import { useIntl } from "react-intl";
const HERO_SIZES = [
  { value: "XL", label: "XL" },
  { value: "L", label: "L" },
  { value: "M", label: "M" },
  { value: "S", label: "S" }
];
const HeroSizeCheckboxInput = forwardRef(
  ({ name, onChange, value, intlLabel, disabled = false, error, required, hint }, ref) => {
    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__ */ jsxs(Field.Root, { name, error, hint, required, children: [
      /* @__PURE__ */ jsx(Field.Label, { children: getDisplayName() }),
      /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Flex, { direction: "row", gap: 2, children: HERO_SIZES.map((size) => {
        const isSelected = currentValue.sizes.includes(size.value);
        return /* @__PURE__ */ jsx(
          Button,
          {
            variant: isSelected ? "default" : "tertiary",
            size: "S",
            onClick: (event) => {
              event.preventDefault();
              handleToggle(size.value);
            },
            disabled,
            startIcon: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null,
            children: size.label
          },
          size.value
        );
      }) }) }),
      /* @__PURE__ */ jsx(Field.Hint, {}),
      /* @__PURE__ */ jsx(Field.Error, {})
    ] });
  }
);
HeroSizeCheckboxInput.displayName = "HeroSizeCheckboxInput";
export {
  HeroSizeCheckboxInput,
  HeroSizeCheckboxInput as default
};