@trellixio/roaster-coffee/esm/components/ColorField/ColorField.js

Beans' product component library

import * as React from 'react';
import { useUncontrolled } from '../../utils/useUncontrolled/index.js';
import { useUid } from '../../utils/useUid/index.js';
import '@floating-ui/react';

const ColorField = React.forwardRef((props, ref) => {
  const { id, label, name, disabled, helpText, labelClassName, onChange, value, defaultValue } = props;
  const [internalValue, setInternalValue] = useUncontrolled({
    value,
    defaultValue,
    finalValue: "",
    onChange
  });
  const uid = useUid(id);
  const handleChange = (event) => {
    setInternalValue(event.currentTarget.value);
  };
  return /* @__PURE__ */ React.createElement("label", { htmlFor: uid }, /* @__PURE__ */ React.createElement("p", { className: labelClassName }, label), /* @__PURE__ */ React.createElement("div", { className: "merged-inputs" }, /* @__PURE__ */ React.createElement("div", { className: "color-picker merge-right" }, /* @__PURE__ */ React.createElement("span", { className: "color-preview", style: { backgroundColor: internalValue } }), /* @__PURE__ */ React.createElement(
    "input",
    {
      id: uid,
      ref,
      type: "color",
      name,
      disabled,
      onChange: handleChange,
      value: internalValue
    }
  )), /* @__PURE__ */ React.createElement("input", { type: "text", className: "merge-left", value: internalValue, onChange: handleChange })), /* @__PURE__ */ React.createElement("small", null, helpText));
});
ColorField.displayName = "ColorField";

export { ColorField };
//# sourceMappingURL=ColorField.js.map