Color Picker

import React, { useState } from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface ColorPickerProps {
  defaultColor?: Color3;
  onChange: (color: Color3) => void;
}

export function ColorPicker({ defaultColor = new Color3(1, 0, 0), onChange }: ColorPickerProps) {
  const { colors } = useTheme();
  const [color, setColor] = useState(defaultColor);

  return (
    <frame BackgroundColor3={colors.bgSecondary} Size={new UDim2(0, 240, 0, 300)}>
      <uicorner CornerRadius={new UDim(0, 12)} />
      <uipadding PaddingAll={new UDim(0, 12)} />
      <frame BackgroundColor3={color} Size={new UDim2(1, 0, 0, 140)}>
        <uicorner CornerRadius={new UDim(0, 8)} />
      </frame>
      <frame BackgroundColor3={new Color3()} Size={new UDim2(1, 0, 0, 20)} Position={new UDim2(0, 0, 0, 152)}>
        <uigradient Color={new ColorSequence([new ColorSequenceKeypoint(0, new Color3(1, 0, 0)), new ColorSequenceKeypoint(0.17, new Color3(1, 1, 0)), new ColorSequenceKeypoint(0.33, new Color3(0, 1, 0)), new ColorSequenceKeypoint(0.5, new Color3(0, 1, 1)), new ColorSequenceKeypoint(0.67, new Color3(0, 0, 1)), new ColorSequenceKeypoint(0.83, new Color3(1, 0, 1)), new ColorSequenceKeypoint(1, new Color3(1, 0, 0))])} />
        <uicorner CornerRadius={new UDim(0, 4)} />
      </frame>
    </frame>
  );
}