@baseplate-dev/ui-components
Version:
Shared UI component library
19 lines • 1.65 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { HexColorInput, HexColorPicker } from 'react-colorful';
import { useControlledState } from '#src/hooks/use-controlled-state.js';
import { inputVariants } from '#src/styles/index.js';
import { cn } from '#src/utils/index.js';
import { Popover, PopoverContent, PopoverTrigger } from '../popover/popover.js';
/**
* A control that allows users to select a color.
*/
function ColorPicker({ className, placeholder, onChange, value: controlledValue, hideInputColor, hideInputText, formatInputText, ref, ...rest }) {
const [value, setValue] = useControlledState(controlledValue, onChange);
const inputComponent = (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { className: cn(inputVariants(), 'flex items-center gap-2', className), ...rest, ref: ref, children: [!hideInputColor && value && (_jsx("div", { className: "h-4 w-6 rounded-sm border border-border", style: {
backgroundColor: value,
} })), !hideInputText && value ? (_jsx("div", { children: formatInputText ? formatInputText(value) : value })) : (_jsx("div", { className: "text-muted-foreground", children: placeholder }))] }) }), _jsxs(PopoverContent, { className: "space-y-2", align: "start", width: "none", children: [_jsx(HexColorInput, { className: cn(inputVariants(), 'p-2'), prefixed: true, color: value, onChange: setValue }), _jsx(HexColorPicker, { color: value, onChange: setValue })] })] }));
return inputComponent;
}
export { ColorPicker };
//# sourceMappingURL=color-picker.js.map