analytica-frontend-lib/dist/chunk-VDUO65VK.mjs

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import {
  Text_default
} from "./chunk-IMCIR6TJ.mjs";
import {
  cn
} from "./chunk-53ICLDGS.mjs";

// src/components/CheckBox/CheckBox.tsx
import {
  forwardRef,
  useState,
  useId
} from "react";
import { CheckIcon } from "@phosphor-icons/react/dist/csr/Check";
import { MinusIcon } from "@phosphor-icons/react/dist/csr/Minus";
import { jsx, jsxs } from "react/jsx-runtime";
var SIZE_CLASSES = {
  small: {
    checkbox: "w-4 h-4",
    // 16px x 16px
    textSize: "sm",
    spacing: "gap-1.5",
    // 6px
    borderWidth: "border-2",
    iconSize: 14,
    // pixels for Phosphor icons
    labelHeight: "h-[21px]"
  },
  medium: {
    checkbox: "w-5 h-5",
    // 20px x 20px
    textSize: "md",
    spacing: "gap-2",
    // 8px
    borderWidth: "border-2",
    iconSize: 16,
    // pixels for Phosphor icons
    labelHeight: "h-6"
  },
  large: {
    checkbox: "w-6 h-6",
    // 24px x 24px
    textSize: "lg",
    spacing: "gap-2",
    // 8px
    borderWidth: "border-[3px]",
    // 3px border
    iconSize: 20,
    // pixels for Phosphor icons
    labelHeight: "h-[27px]"
  }
};
var BASE_CHECKBOX_CLASSES = "rounded border cursor-pointer transition-all duration-200 flex items-center justify-center focus:outline-none";
var STATE_CLASSES = {
  default: {
    unchecked: "border-border-400 bg-background hover:border-border-500",
    checked: "border-primary-950 bg-primary-950 text-text hover:border-primary-800 hover:bg-primary-800"
  },
  hovered: {
    unchecked: "border-border-500 bg-background",
    checked: "border-primary-800 bg-primary-800 text-text"
  },
  focused: {
    unchecked: "border-indicator-info bg-background ring-2 ring-indicator-info/20",
    checked: "border-indicator-info bg-primary-950 text-text ring-2 ring-indicator-info/20"
  },
  invalid: {
    unchecked: "border-error-700 bg-background hover:border-error-600",
    checked: "border-error-700 bg-primary-950 text-text"
  },
  disabled: {
    unchecked: "border-border-400 bg-background cursor-not-allowed opacity-40",
    checked: "border-primary-600 bg-primary-600 text-text cursor-not-allowed opacity-40"
  }
};
var CheckBox = forwardRef(
  ({
    label,
    size = "medium",
    state = "default",
    indeterminate = false,
    errorMessage,
    helperText,
    className = "",
    labelClassName = "",
    checked: checkedProp,
    disabled,
    id,
    onChange,
    ...props
  }, ref) => {
    const generatedId = useId();
    const inputId = id ?? `checkbox-${generatedId}`;
    const [internalChecked, setInternalChecked] = useState(false);
    const isControlled = checkedProp !== void 0;
    const checked = isControlled ? checkedProp : internalChecked;
    const handleChange = (event) => {
      if (!isControlled) {
        setInternalChecked(event.target.checked);
      }
      onChange?.(event);
    };
    const currentState = disabled ? "disabled" : state;
    const sizeClasses = SIZE_CLASSES[size];
    const checkVariant = checked || indeterminate ? "checked" : "unchecked";
    const stylingClasses = STATE_CLASSES[currentState][checkVariant];
    const borderWidthClass = state === "focused" || state === "hovered" && size === "large" ? "border-[3px]" : sizeClasses.borderWidth;
    const checkboxClasses = cn(
      BASE_CHECKBOX_CLASSES,
      sizeClasses.checkbox,
      borderWidthClass,
      stylingClasses,
      className
    );
    const renderIcon = () => {
      if (indeterminate) {
        return /* @__PURE__ */ jsx(
          MinusIcon,
          {
            size: sizeClasses.iconSize,
            weight: "bold",
            color: "currentColor"
          }
        );
      }
      if (checked) {
        return /* @__PURE__ */ jsx(
          CheckIcon,
          {
            size: sizeClasses.iconSize,
            weight: "bold",
            color: "currentColor"
          }
        );
      }
      return null;
    };
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: cn(
            "flex flex-row items-center",
            sizeClasses.spacing,
            disabled ? "opacity-40" : ""
          ),
          children: [
            /* @__PURE__ */ jsx(
              "input",
              {
                ref,
                type: "checkbox",
                id: inputId,
                checked,
                disabled,
                onChange: handleChange,
                className: "sr-only",
                ...props
              }
            ),
            /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: checkboxClasses, children: renderIcon() }),
            label && /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "flex flex-row items-center",
                  sizeClasses.labelHeight
                ),
                children: /* @__PURE__ */ jsx(
                  Text_default,
                  {
                    as: "label",
                    htmlFor: inputId,
                    size: sizeClasses.textSize,
                    weight: "normal",
                    className: cn(
                      "cursor-pointer select-none leading-[150%] flex items-center font-roboto",
                      labelClassName
                    ),
                    children: label
                  }
                )
              }
            )
          ]
        }
      ),
      errorMessage && /* @__PURE__ */ jsx(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5",
          color: "text-error-600",
          children: errorMessage
        }
      ),
      helperText && !errorMessage && /* @__PURE__ */ jsx(
        Text_default,
        {
          size: "sm",
          weight: "normal",
          className: "mt-1.5",
          color: "text-text-500",
          children: helperText
        }
      )
    ] });
  }
);
CheckBox.displayName = "CheckBox";
var CheckBox_default = CheckBox;

export {
  CheckBox_default
};
//# sourceMappingURL=chunk-VDUO65VK.mjs.map