@varialkit/colorpicker 0.1.0

package/src/ColorPicker.types.ts

@@ -0,0 +1,270 @@
+import type React from "react";
+import type { MenuDropdownProps, MenuProps } from "@solara/menu";
+
+export type ColorPickerSize = "sm" | "md" | "lg";
+export type ColorPickerValueFormat = "hex" | "rgba" | "hsla";
+
+export type ColorPickerPaletteEntry = string | ColorPickerPaletteOption;
+
+export interface ColorPickerPaletteOption {
+  /**
+   * Color value (hex format)
+   */
+  value: string;
+  /**
+   * Optional label for accessibility or overlays.
+   */
+  label?: string;
+  /**
+   * Optional overlay content rendered on top of the swatch.
+   */
+  content?: React.ReactNode;
+  /**
+   * Whether this palette option is disabled.
+   */
+  disabled?: boolean;
+}
+
+export interface ColorPickerSwatchProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+  /**
+   * Color value to render.
+   */
+  color: string;
+  /**
+   * Size of the swatch.
+   */
+  size?: ColorPickerSize;
+  /**
+   * Override the swatch radius (CSS value or token).
+   */
+  radius?: string;
+  /**
+   * Whether the swatch is selected.
+   */
+  selected?: boolean;
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * Optional overlay content on top of the swatch.
+   */
+  children?: React.ReactNode;
+}
+
+export interface ColorPickerPaletteProps {
+  /**
+   * Current selected color value (hex format)
+   */
+  value?: string;
+  /**
+   * Palette entries rendered as swatches.
+   */
+  colors?: ColorPickerPaletteEntry[];
+  /**
+   * Called when a swatch is selected.
+   */
+  onSelectColor?: (color: string) => void;
+  /**
+   * Size of the palette swatches.
+   */
+  size?: ColorPickerSize;
+  /**
+   * Disabled state for the entire palette.
+   */
+  disabled?: boolean;
+  /**
+   * Additional className.
+   */
+  className?: string;
+  /**
+   * Override the swatch radius (CSS value or token).
+   */
+  swatchRadius?: string;
+  /**
+   * Optional overlay content for each swatch.
+   */
+  swatchContent?: (color: string) => React.ReactNode;
+}
+
+export interface ColorPickerContentProps {
+  /**
+   * Current selected color value.
+   */
+  value?: string;
+  /**
+   * Callback when color changes
+   */
+  onChange?: (color: string) => void;
+  /**
+   * Presets rendered in the menu palette.
+   */
+  presets?: ColorPickerPaletteEntry[];
+  /**
+   * Legacy alias for `presets`.
+   */
+  colors?: ColorPickerPaletteEntry[];
+  /**
+   * Whether to show the value input row.
+   */
+  showValueInput?: boolean;
+  /**
+   * Legacy alias for `showValueInput`.
+   */
+  showHexInput?: boolean;
+  /**
+   * Placeholder text for the value input.
+   */
+  valueInputPlaceholder?: string;
+  /**
+   * Legacy alias for `valueInputPlaceholder`.
+   */
+  hexInputPlaceholder?: string;
+  /**
+   * Format emitted through `onChange`.
+   */
+  valueFormat?: ColorPickerValueFormat;
+  /**
+   * Initial format shown in the value editor row.
+   */
+  defaultInputFormat?: ColorPickerValueFormat;
+  /**
+   * Formats available in the value type dropdown.
+   */
+  inputFormats?: ColorPickerValueFormat[];
+  /**
+   * Show the saturation/value selection field.
+   */
+  showSpectrum?: boolean;
+  /**
+   * Show the hue slider.
+   */
+  showHueSlider?: boolean;
+  /**
+   * Show the opacity slider.
+   */
+  showOpacitySlider?: boolean;
+  /**
+   * Show the eyedropper trigger.
+   */
+  showEyedropper?: boolean;
+  /**
+   * Show the value format selector.
+   */
+  showFormatSelector?: boolean;
+  /**
+   * Show the alpha / opacity text input.
+   */
+  showOpacityInput?: boolean;
+  /**
+   * Size of the color picker
+   */
+  size?: ColorPickerSize;
+  /**
+   * Override the swatch radius (CSS value or token).
+   */
+  swatchRadius?: string;
+  /**
+   * Optional overlay content for each swatch.
+   */
+  swatchContent?: (color: string) => React.ReactNode;
+  /**
+   * Additional className
+   */
+  className?: string;
+  /**
+   * Disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Called when a color is selected from the swatches.
+   */
+  onSelectColor?: (color: string) => void;
+}
+
+export interface ColorPickerProps extends ColorPickerContentProps {
+  /**
+   * Custom trigger element (if not provided, uses ColorPreview)
+   */
+  trigger?: MenuDropdownProps["trigger"];
+  /**
+   * Label used by the default trigger.
+   */
+  triggerLabel?: string;
+  /**
+   * Controlled open state for the dropdown.
+   */
+  isOpen?: MenuDropdownProps["isOpen"];
+  /**
+   * Default open state for the dropdown.
+   */
+  defaultOpen?: MenuDropdownProps["defaultOpen"];
+  /**
+   * Callback when dropdown open state changes.
+   */
+  onOpenChange?: MenuDropdownProps["onOpenChange"];
+  /**
+   * Menu placement (align) for the dropdown.
+   */
+  align?: MenuDropdownProps["align"];
+  /**
+   * Menu placement (side) for the dropdown.
+   */
+  side?: MenuDropdownProps["side"];
+  /**
+   * Close the dropdown when a swatch is selected.
+   */
+  closeOnSelect?: boolean;
+  /**
+   * Override the dropdown menu width.
+   */
+  menuWidth?: React.CSSProperties["width"];
+  /**
+   * Override the dropdown menu height.
+   */
+  menuHeight?: React.CSSProperties["height"];
+  /**
+   * Props passed to the Menu surface wrapper.
+   */
+  menuProps?: Omit<MenuProps, "children">;
+  /**
+   * Accessible label for the dropdown content.
+   */
+  contentAriaLabel?: MenuDropdownProps["contentAriaLabel"];
+  /**
+   * Custom class name for the wrapper element.
+   */
+  wrapperClassName?: string;
+}
+
+export interface ColorPreviewProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Color value to display (hex format)
+   */
+  color: string;
+  /**
+   * Size of the color preview
+   */
+  size?: ColorPickerSize;
+  /**
+   * Shape of the color preview
+   */
+  shape?: "square" | "circle";
+  /**
+   * Whether to show a border
+   */
+  showBorder?: boolean;
+  /**
+   * Label text to display next to the color
+   */
+  label?: string;
+  /**
+   * Position of the label relative to the color preview
+   */
+  labelPosition?: "left" | "right" | "top" | "bottom";
+  /**
+   * Additional className
+   */
+  className?: string;
+}

package/src/ColorPreview.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from "react";
+import type { ColorPreviewProps } from "./ColorPicker.types";
+import "./ColorPicker.scss";
+
+function cx(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(" ");
+}
+
+export const ColorPreview = forwardRef<HTMLButtonElement, ColorPreviewProps>(
+  (
+    {
+      color,
+      size = "md",
+      shape = "square",
+      showBorder = true,
+      label,
+      labelPosition = "right",
+      className,
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={props.type ?? "button"}
+        className={cx("solara-color-preview", className)}
+        data-size={size}
+        data-shape={shape}
+        data-border={showBorder ? "true" : "false"}
+        data-label-position={label ? labelPosition : undefined}
+        data-disabled={disabled ? "true" : undefined}
+        disabled={disabled}
+        aria-label={`Color: ${color}`}
+        {...props}>
+        <span
+          className="solara-color-preview__swatch"
+          style={{ backgroundColor: color }}
+          aria-hidden="true"
+        />
+        {label ? <span className="solara-color-preview__label">{label}</span> : null}
+      </button>
+    );
+  }
+);
+
+ColorPreview.displayName = "ColorPreview";

package/src/index.ts

@@ -0,0 +1,12 @@
+export { ColorPicker, ColorPickerContent, ColorPickerPalette, ColorPickerSwatch } from "./ColorPicker";
+export { ColorPreview } from "./ColorPreview";
+export type {
+  ColorPickerProps,
+  ColorPickerContentProps,
+  ColorPickerPaletteProps,
+  ColorPickerPaletteEntry,
+  ColorPickerPaletteOption,
+  ColorPickerSwatchProps,
+  ColorPickerSize,
+  ColorPreviewProps,
+} from "./ColorPicker.types";