"use client"; import type { HTMLAttributes } from "react"; import * as React from "react"; import { cn } from "@/lib/utils"; type ColorSwatchProps = HTMLAttributes & { /** Color value (hex, rgb, hsl, etc.) */ value: string; /** Optional name/label for the color */ name?: string; }; const ColorSwatchContext = React.createContext<{ value: string; name?: string; } | null>(null); function useColorSwatch() { return React.useContext(ColorSwatchContext); } const ColorSwatch = React.forwardRef( ({ value, name, className, children, ...props }, forwardedRef) => { return (

{children}

); }, ); ColorSwatch.displayName = "ColorSwatch"; type ColorSwatchLabelProps = HTMLAttributes; const ColorSwatchLabel = React.forwardRef< HTMLDivElement, ColorSwatchLabelProps >(({ className, children, ...props }, forwardedRef) => { return (

{children}

); }); ColorSwatchLabel.displayName = "ColorSwatchLabel"; type ColorSwatchPartPosition = | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center"; type ColorSwatchPartProps = HTMLAttributes & { position?: ColorSwatchPartPosition; }; const positionVariants: Record = { "top-left": "top-2 left-2 text-left", "top-right": "top-2 right-2 text-right", "bottom-left": "bottom-2 left-2 text-left", "bottom-right": "bottom-2 right-2 text-right", center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center", }; const ColorSwatchPart = React.forwardRef( ( { className, position = "bottom-right", children, ...props }, forwardedRef, ) => { return (

{children}

); }, ); ColorSwatchPart.displayName = "ColorSwatchPart"; export { ColorSwatch, useColorSwatch, ColorSwatchLabel, ColorSwatchPart, type ColorSwatchProps, type ColorSwatchLabelProps, type ColorSwatchPartProps, };