Swatch

import { useState } from "react";
import { type Color } from "react-aria-components";
import { Swatch, SwatchPicker } from "@nexera-ui/react";

const palette = [
  { color: "#04855D", name: "Emerald 600" },
  { color: "#2563EB", name: "Blue 600" },
  { color: "#D97706", name: "Amber 600" },
  { color: "#7C3AED", name: "Violet 600" },
  { color: "#0E7490", name: "Cyan 700" },
  { color: "#DB2777", name: "Pink 600" },
] as const;

export function Picker() {
  const [value, setValue] = useState<string | Color>("#04855D");
  return (
    <div className="flex flex-col gap-3">
      <SwatchPicker aria-label="Team colour" value={value} onChange={setValue}>
        {palette.map((entry) => (
          <Swatch
            key={entry.color}
            shape={args.shape ?? "circle"}
            size={args.size ?? "md"}
            color={entry.color}
            colorName={entry.name}
            isDisabled={entry.color === "#0E7490"}
          />
        ))}
      </SwatchPicker>
      <p className="m-0 text-body-small text-secondary">
        Selected: {typeof value === "string" ? value : value.toString("hex")}
      </p>
    </div>
  );
}

import { Swatch, SwatchPicker } from "@nexera-ui/react";

const shapes = ["circle", "square"] as const;

const sizes = ["sm", "md", "lg"] as const;

const palette = [
  { color: "#04855D", name: "Emerald 600" },
  { color: "#2563EB", name: "Blue 600" },
  { color: "#D97706", name: "Amber 600" },
  { color: "#7C3AED", name: "Violet 600" },
  { color: "#0E7490", name: "Cyan 700" },
  { color: "#DB2777", name: "Pink 600" },
] as const;

export function ShapesAndSizes() {
  return (
    <div className="flex flex-col gap-4">
      {shapes.flatMap((shape) =>
        sizes.map((size) => (
          <SwatchPicker
            key={`${shape}${size}`}
            aria-label={`${shape} ${size}`}
            defaultValue="#04855D"
          >
            {palette.slice(0, 4).map((entry) => (
              <Swatch
                key={entry.color}
                shape={shape}
                size={size}
                color={entry.color}
                colorName={entry.name}
              />
            ))}
          </SwatchPicker>
        )),
      )}
    </div>
  );
}

import { Swatch, SwatchPicker } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <SwatchPicker aria-label="لون الفريق" defaultValue="#2563EB">
      <Swatch color="#04855D" colorName="أخضر زمردي" size="md" />
      <Swatch color="#2563EB" colorName="أزرق" size="md" />
      <Swatch color="#D97706" colorName="كهرماني" size="md" />
    </SwatchPicker>
  );
}