analytica-frontend-lib/dist/chunk-JMMNZIDR.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/ColorPicker/ColorPicker.tsx
import { forwardRef, useId } from "react";
import { WarningCircleIcon } from "@phosphor-icons/react/dist/csr/WarningCircle";
import { jsx, jsxs } from "react/jsx-runtime";
var ColorPicker = forwardRef(
  ({
    label,
    helperText,
    errorMessage,
    value = "#FFFFFF",
    onChange,
    placeholder = "#FFFFFF",
    className,
    disabled,
    required,
    id,
    ...props
  }, ref) => {
    const generatedId = useId();
    const inputId = id ?? `color-picker-${generatedId}`;
    const hasError = Boolean(errorMessage);
    const inputClasses = cn(
      "bg-background w-full py-2 px-3 font-normal text-text-900 text-sm",
      "border rounded-lg focus:outline-primary-950",
      hasError ? "border-2 border-indicator-error" : "border-border-300 hover:border-border-400",
      disabled && "cursor-not-allowed opacity-40"
    );
    const colorInputClasses = cn(
      "w-12 h-10 rounded cursor-pointer border",
      hasError ? "border-indicator-error" : "border-border-200",
      disabled && "cursor-not-allowed opacity-40"
    );
    return /* @__PURE__ */ jsxs("div", { className, children: [
      label && /* @__PURE__ */ jsxs(
        "label",
        {
          htmlFor: inputId,
          className: "block font-bold text-text-900 mb-2 text-sm",
          children: [
            label,
            " ",
            required && /* @__PURE__ */ jsx("span", { className: "text-indicator-error", children: "*" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ jsx(
          "input",
          {
            type: "color",
            value,
            onChange,
            disabled,
            className: colorInputClasses,
            "aria-label": label ? `${label} color picker` : "Color picker"
          }
        ),
        /* @__PURE__ */ jsx(
          "input",
          {
            ref,
            id: inputId,
            type: "text",
            value,
            onChange,
            placeholder,
            disabled,
            required,
            className: inputClasses,
            "aria-invalid": hasError ? "true" : void 0,
            ...props
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
        helperText && !errorMessage && /* @__PURE__ */ jsx(Text_default, { size: "xs", color: "text-text-500", children: helperText }),
        errorMessage && /* @__PURE__ */ jsxs(Text_default, { size: "xs", color: "text-indicator-error", children: [
          /* @__PURE__ */ jsx(WarningCircleIcon, { size: 14 }),
          " ",
          errorMessage
        ] })
      ] })
    ] });
  }
);
ColorPicker.displayName = "ColorPicker";
var ColorPicker_default = ColorPicker;

export {
  ColorPicker_default
};
//# sourceMappingURL=chunk-JMMNZIDR.mjs.map