"use client"; import * as React from "react"; type ColorFormat = "hex" | "css"; type ColorChannel = "hue" | "saturation" | "lightness"; export type ColorValue = { hue: number; saturation: number; lightness: number; alpha: number; sourceHex?: string; toString: (format?: ColorFormat) => string; }; type ColorFieldContextValue = { id: string; name?: string; value: ColorValue | null; setValue: (value: ColorValue | null) => void; channel?: ColorChannel; colorSpace?: string; isDisabled: boolean; isReadOnly: boolean; isInvalid: boolean; }; type ColorFieldRootProps = Omit, "defaultValue" | "onChange"> & { children: React.ReactNode | ((props: { isDisabled: boolean; isInvalid: boolean; isReadOnly: boolean; isFocused: boolean; isFocusWithin: boolean; isFocusVisible: boolean; isRequired: boolean; }) => React.ReactNode); name?: string; value?: ColorValue | null; defaultValue?: string | ColorValue | null; onChange?: (value: ColorValue | null) => void; channel?: ColorChannel; colorSpace?: string; fullWidth?: boolean; isDisabled?: boolean; isReadOnly?: boolean; isInvalid?: boolean; isRequired?: boolean; render?: (props: React.HTMLAttributes) => React.ReactNode; }; type ColorFieldGroupProps = React.HTMLAttributes & { variant?: "primary" | "secondary"; fullWidth?: boolean; render?: (props: React.HTMLAttributes) => React.ReactNode; }; type ColorFieldInputProps = Omit, "defaultValue" | "value" | "onChange"> & { defaultValue?: string; value?: string; onChange?: React.ChangeEventHandler; }; type ColorSwatchProps = React.HTMLAttributes & { color?: ColorValue | string | null; size?: "xs" | "sm" | "md" | "lg" | "xl"; shape?: "circle" | "square"; }; function cn(...values: Array) { return values.filter(Boolean).join(" "); } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function hslToRgb(h: number, s: number, l: number): [number, number, number] { const hue = (((h % 360) + 360) % 360) / 360; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; const convert = (t: number) => { let next = t; if (next < 0) next += 1; if (next > 1) next -= 1; if (next < 1 / 6) return p + (q - p) * 6 * next; if (next < 1 / 2) return q; if (next < 2 / 3) return p + (q - p) * (2 / 3 - next) * 6; return p; }; return [convert(hue + 1 / 3), convert(hue), convert(hue - 1 / 3)].map((part) => Math.round(part * 255)) as [ number, number, number, ]; } function rgbToHsl(r: number, g: number, b: number): Pick { const red = r / 255; const green = g / 255; const blue = b / 255; const max = Math.max(red, green, blue); const min = Math.min(red, green, blue); let hue = 0; let saturation = 0; const lightness = (max + min) / 2; const delta = max - min; if (delta !== 0) { saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min); if (max === red) hue = (green - blue) / delta + (green < blue ? 6 : 0); if (max === green) hue = (blue - red) / delta + 2; if (max === blue) hue = (red - green) / delta + 4; hue *= 60; } return { hue, saturation, lightness }; } function createColor(hue: number, saturation: number, lightness: number, alpha = 1, sourceHex?: string): ColorValue { return { hue: clamp(Math.round(hue), 0, 360), saturation: clamp(saturation, 0, 1), lightness: clamp(lightness, 0, 1), alpha: clamp(alpha, 0, 1), sourceHex, toString(format: ColorFormat = "css") { const [red, green, blue] = hslToRgb(this.hue, this.saturation, this.lightness); if (format === "hex") { if (this.sourceHex) return this.sourceHex; return `#${[red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("").toUpperCase()}`; } return `rgba(${red}, ${green}, ${blue}, ${this.alpha})`; }, }; } export function parseColor(value: string): ColorValue { const normalized = value.trim(); const hex = normalized.match(/^#?([0-9a-fA-F]{6})$/); if (!hex) return createColor(0, 0, 0); const int = Number.parseInt(hex[1], 16); const red = (int >> 16) & 255; const green = (int >> 8) & 255; const blue = int & 255; const hsl = rgbToHsl(red, green, blue); return createColor(hsl.hue, hsl.saturation, hsl.lightness, 1, `#${hex[1].toUpperCase()}`); } function toColor(value: string | ColorValue | null | undefined): ColorValue | null { if (!value) return null; if (typeof value === "string") return parseColor(value); return value; } function ColorFieldStyles() { return ( ); } const ColorFieldContext = React.createContext(null); const RequiredContext = React.createContext(false); function useColorFieldContext() { const context = React.useContext(ColorFieldContext); if (!context) throw new Error("ColorField subcomponents must be used inside ColorField"); return context; } function formatChannelValue(color: ColorValue | null, channel?: ColorChannel) { if (!color) return ""; if (channel === "hue") return `${Math.round(color.hue)}\u00b0`; if (channel === "saturation") return `${Math.round(color.saturation * 100)}%`; if (channel === "lightness") return `${Math.round(color.lightness * 100)}%`; return color.toString("hex"); } function updateChannel(color: ColorValue | null, channel: ColorChannel, raw: string) { const base = color ?? createColor(0, 0, 0); const numeric = Number.parseFloat(raw.replace(/[^\d.-]/g, "")); if (Number.isNaN(numeric)) return color; if (channel === "hue") return createColor(clamp(numeric, 0, 360), base.saturation, base.lightness, base.alpha); if (channel === "saturation") return createColor(base.hue, clamp(numeric, 0, 100) / 100, base.lightness, base.alpha); return createColor(base.hue, base.saturation, clamp(numeric, 0, 100) / 100, base.alpha); } function ColorFieldRoot({ children, className, value, defaultValue, onChange, channel, colorSpace, fullWidth, isDisabled, isReadOnly, isInvalid, isRequired, name, render, ...props }: ColorFieldRootProps) { const reactId = React.useId(); const [uncontrolled, setUncontrolled] = React.useState(() => toColor(defaultValue)); const [isFocusWithin, setIsFocusWithin] = React.useState(false); const current = value !== undefined ? value : uncontrolled; const disabled = Boolean(isDisabled || props["aria-disabled"]); const readOnly = Boolean(isReadOnly); const invalid = Boolean(isInvalid); const setValue = React.useCallback( (next: ColorValue | null) => { if (value === undefined) setUncontrolled(next); onChange?.(next); }, [onChange, value], ); const renderProps = { isDisabled: disabled, isInvalid: invalid, isReadOnly: readOnly, isFocused: isFocusWithin, isFocusWithin, isFocusVisible: isFocusWithin, isRequired: Boolean(isRequired), }; const rootProps: React.HTMLAttributes = { ...props, id: props.id, className: cn("color-field", fullWidth && "color-field--full-width", className), "data-slot": "color-field", "data-disabled": disabled ? "true" : undefined, "data-invalid": invalid ? "true" : undefined, "data-readonly": readOnly ? "true" : undefined, "data-required": isRequired ? "true" : undefined, "data-full-width": fullWidth ? "true" : undefined, "data-channel": channel, onFocus: (event) => { setIsFocusWithin(true); props.onFocus?.(event); }, onBlur: (event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setIsFocusWithin(false); props.onBlur?.(event); }, }; return ( {render ? ( render(rootProps) ) : (

{typeof children === "function" ? children(renderProps) : children}

)} ); } const ColorFieldGroup = React.forwardRef( ({ children, className, variant = "primary", fullWidth, render, ...props }, ref) => { const context = useColorFieldContext(); const groupProps: React.HTMLAttributes = { ...props, ref, role: "presentation", className: cn("color-input-group", `color-input-group--${variant}`, fullWidth && "color-input-group--full-width", className), "data-slot": "color-input-group", "data-variant": variant, "data-disabled": context.isDisabled ? "true" : undefined, } as React.HTMLAttributes; return render ? render(groupProps) :

{children}

; }, ); ColorFieldGroup.displayName = "ColorField.Group"; const ColorFieldPrefix = React.forwardRef>( ({ className, ...props }, ref) => (

), ); ColorFieldPrefix.displayName = "ColorField.Prefix"; const ColorFieldSuffix = React.forwardRef>( ({ className, ...props }, ref) => (

), ); ColorFieldSuffix.displayName = "ColorField.Suffix"; const ColorFieldInput = React.forwardRef( ({ className, placeholder, defaultValue, value, onBlur, onChange, onFocus, onKeyDown, ...props }, ref) => { const context = useColorFieldContext(); const controlledText = value ?? (context.channel ? formatChannelValue(context.value, context.channel) : context.value?.toString("hex") ?? ""); const [draft, setDraft] = React.useState(defaultValue ?? controlledText); const [isEditing, setIsEditing] = React.useState(false); const shown = isEditing ? draft : (value !== undefined || context.value !== undefined ? controlledText : draft); React.useEffect(() => { if (!isEditing && (context.value || context.channel)) setDraft(controlledText); }, [context.channel, context.value, controlledText, isEditing]); return ( { setIsEditing(false); onBlur?.(event); }} onChange={(event) => { setDraft(event.target.value); if (context.channel) { const next = updateChannel(context.value, context.channel, event.target.value); context.setValue(next); setDraft(formatChannelValue(next, context.channel)); } else if (/^#?[0-9a-fA-F]{6}$/.test(event.target.value.trim())) { context.setValue(parseColor(event.target.value)); } else if (event.target.value.trim() === "") { context.setValue(null); } onChange?.(event); }} onFocus={(event) => { setIsEditing(true); setDraft(controlledText); onFocus?.(event); }} onKeyDown={(event) => { if (context.channel && (event.key === "ArrowUp" || event.key === "ArrowDown")) { event.preventDefault(); const step = context.channel === "hue" ? 1 : 1; const numeric = Number.parseFloat(shown.replace(/[^\d.-]/g, "")) || 0; const next = updateChannel(context.value, context.channel, String(numeric + (event.key === "ArrowUp" ? step : -step))); context.setValue(next); setDraft(formatChannelValue(next, context.channel)); } onKeyDown?.(event); }} /> ); }, ); ColorFieldInput.displayName = "ColorField.Input"; export const ColorField = Object.assign(ColorFieldRoot, { Root: ColorFieldRoot, Group: ColorFieldGroup, Input: ColorFieldInput, Prefix: ColorFieldPrefix, Suffix: ColorFieldSuffix, }); export function Label({ className, children, ...props }: React.LabelHTMLAttributes) { const context = React.useContext(ColorFieldContext); const required = React.useContext(RequiredContext); return ( {children} ); } export function Description({ className, ...props }: React.HTMLAttributes) { return ; } export function FieldError({ className, ...props }: React.HTMLAttributes) { return ; } export function ColorSwatch({ className, color, size = "md", shape = "circle", style, ...props }: ColorSwatchProps) { const current = typeof color === "string" ? color : color?.toString("css") ?? "rgba(255, 255, 255, 0)"; return (

); } export function Surface({ className, ...props }: React.HTMLAttributes) { return

; } export function Button({ className, isDisabled, isPending, onPress, onClick, variant = "tertiary", children, ...props }: React.ButtonHTMLAttributes & { isDisabled?: boolean; isPending?: boolean; onPress?: () => void; variant?: "primary" | "tertiary"; }) { return ( ); } export type ColorFieldProps = React.ComponentProps;

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

ColorField

Created by

Installation

How to use

Website