import { ColorInputStyled } from "@mshafiqyajid/react-color-input/styled";
import "@mshafiqyajid/react-color-input/styles.css";

function App() {
  const [color, setColor] = useState("#6366f1");
  return (
    <ColorInputStyled
      value={color}
      onChange={setColor}
      label="Brand color"
      size="md"
      tone="neutral"
    />
  );
}

import { useColorInput } from "@mshafiqyajid/react-color-input";

function MyColorInput() {
  const { inputProps, swatchProps, isOpen, isValid } = useColorInput({
    defaultValue: "#6366f1",
    onChange: (hex) => console.log(hex),
  });

  return (
    <div>
      <button {...swatchProps} style={{ background: inputProps.value }} />
      <input {...inputProps} />
      {!isValid && <span>Invalid hex</span>}
      {isOpen && <div>Picker goes here</div>}
    </div>
  );
}