Cell Color Picker

Usage

"use client";

import { CellColorPicker } from "@thenamespace/uikit";
import { ColorArea } from "@thenamespace/uikit/color-area";
import { ColorSlider } from "@thenamespace/uikit/color-slider";

Anatomy

Import the CellColorPicker component and access all parts using dot notation.

import { CellColorPicker } from "@thenamespace/uikit";

<CellColorPicker>
  <CellColorPicker.Label />
  <CellColorPicker.Trigger />
  <CellColorPicker.ValueDisplay />
  <CellColorPicker.Popover>
    <CellColorPicker.Swatch />
  </CellColorPicker.Popover>
</CellColorPicker>;

Controlled

"use client";

import { useState } from "react";

import { CellColorPicker } from "@thenamespace/uikit";

Disabled

"use client";

import { CellColorPicker } from "@thenamespace/uikit";
import { ColorArea } from "@thenamespace/uikit/color-area";
import { Label } from "@thenamespace/uikit/label";

Settings Group

"use client";

import { useState } from "react";

import { CellColorPicker } from "@thenamespace/uikit";

Variants

"use client";

import { CellColorPicker } from "@thenamespace/uikit";
import { ColorArea } from "@thenamespace/uikit/color-area";
import { ColorSlider } from "@thenamespace/uikit/color-slider";

With Presets

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

CSS Classes

Base Classes

• .cell-color-picker - Root wrapper

Element Classes

• .cell-color-picker__trigger - The visible cell row button
• .cell-color-picker__trigger--default - Default variant trigger styling
• .cell-color-picker__trigger--secondary - Secondary variant trigger styling
• .cell-color-picker__label - Leading text label
• .cell-color-picker__value-display - Hex value text display
• .cell-color-picker__swatch - Color swatch preview
• .cell-color-picker__popover - Dropdown color picker panel

API Reference

CellColorPicker

The root component. Wraps Namespace UIKit ColorPicker with cell-style layout.

Also supports all RAC ColorPicker props except children (defaultValue, value, onChange, etc.).

CellColorPicker.Trigger

The visible cell row button. Wraps RAC Button.

Also supports all RAC Button props.

CellColorPicker.Label

Leading text label rendered as a span.

Also supports all native span HTML attributes.

CellColorPicker.ValueDisplay

Displays the current color as a hex value (e.g. #FF5733). Automatically reads from the color picker state.

Also supports all native span HTML attributes.

CellColorPicker.Swatch

Color swatch preview. Wraps Namespace UIKit ColorSwatch.

Also supports all Namespace UIKit ColorSwatch props.

CellColorPicker.Popover

Dropdown color picker panel. Wraps Namespace UIKit ColorPicker.Popover.

Also supports all Namespace UIKit ColorPicker.Popover props.