"use client"; import { useEffect, useState } from "react"; import type { ColorSpace } from "react-aria-components"; import { getColorChannels, Button as RacButton, ColorPicker as RacColorPicker, type ColorPickerProps as RacColorPickerProps, DialogTrigger as RacDialogTrigger, } from "react-aria-components"; import { tv } from "tailwind-variants"; import { ColorArea } from "@/shim-ui/color-area"; import { ColorField } from "@/shim-ui/color-field"; import { ColorSlider } from "@/shim-ui/color-slider"; import { ColorSwatch } from "@/shim-ui/color-swatch"; import { focusStyle } from "@/shim-ui/lib/style"; import { Popover } from "@/shim-ui/popover"; import { Select, SelectItem } from "@/shim-ui/select"; import { Separator } from "@/shim-ui/separator"; const buttonStyles = tv({ extend: focusStyle, base: "flex cursor-default items-center gap-2 rounded text-gray-800 text-sm dark:text-gray-200", }); interface ColorPickerProps extends RacColorPickerProps { children?: React.ReactNode; } function ColorEditor() { let [mode, setMode] = useState("hsb"); let [space, setSpace] = useState("hsb"); useEffect(() => { if (mode === "hex") { setSpace("rgb"); } else { setSpace(mode); } }, [mode]); return (

{mode === "hex" ? ( ) : ( getColorChannels(space).map((channel) => ( )) )}

); } function ColorPicker({ children, ...props }: ColorPickerProps) { return ( {children || } ); } export { ColorPicker, type ColorPickerProps };

Install