Color swatch picker

"use client";import {  ColorSwatchPicker,  ColorSwatchPickerItem,} from "@/components/vip-ui/color-swatch-picker";export function ColorSwatchPickerDemo() {  return (    <div className="grid gap-3">      <span id="accent-color-label" className="text-sm font-medium">        Accent color      </span>      <ColorSwatchPicker        aria-labelledby="accent-color-label"        defaultValue="#4567d4"      >        <ColorSwatchPickerItem color="#4567d4" aria-label="Blue" />        <ColorSwatchPickerItem color="#af4d65" aria-label="Rose" />        <ColorSwatchPickerItem color="#228571" aria-label="Teal" />        <ColorSwatchPickerItem color="#a96c22" aria-label="Amber" />      </ColorSwatchPicker>    </div>  );}

"use client";import {  ColorSwatchPicker,  ColorSwatchPickerItem,} from "@/components/vip-ui/color-swatch-picker";export function ColorSwatchPickerDisabledDemo() {  return (    <div className="grid gap-3">      <span id="team-color-label" className="text-sm font-medium">        Team color      </span>      <ColorSwatchPicker        aria-labelledby="team-color-label"        defaultValue="#4567d4"      >        <ColorSwatchPickerItem color="#4567d4" aria-label="Blue" />        <ColorSwatchPickerItem color="#af4d65" aria-label="Rose" isDisabled />        <ColorSwatchPickerItem color="#228571" aria-label="Teal" />        <ColorSwatchPickerItem color="#a96c22" aria-label="Amber" isDisabled />      </ColorSwatchPicker>    </div>  );}

"use client";import { useState } from "react";import { type Color, parseColor } from "react-aria-components";import {  ColorSwatchPicker,  ColorSwatchPickerItem,} from "@/components/vip-ui/color-swatch-picker";const colors = [  { name: "Blue", value: "#4567d4" },  { name: "Rose", value: "#af4d65" },  { name: "Teal", value: "#228571" },  { name: "Amber", value: "#a96c22" },];export function ColorSwatchPickerControlledDemo() {  const [color, setColor] = useState<Color>(parseColor("#af4d65"));  const name = colors.find(    ({ value }) => value === color.toString("hex").toLowerCase(),  )?.name;  return (    <div className="grid gap-3">      <span id="label-color-label" className="text-sm font-medium">        Label color      </span>      <ColorSwatchPicker        aria-labelledby="label-color-label"        value={color}        onChange={setColor}      >        {colors.map(({ name, value }) => (          <ColorSwatchPickerItem key={value} color={value} aria-label={name} />        ))}      </ColorSwatchPicker>      <output className="text-sm text-muted-foreground">        Selected: {name}      </output>    </div>  );}