ColorSwatchPicker
The props declared for ColorSwatchPicker, generated from the types @proyecto-viviana/ui ships.
Import
import { ColorSwatchPicker } from "@proyecto-viviana/ui";Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | JSX.Element | — | The ColorSwatches within the ColorSwatchPicker. |
density | 'compact' | 'regular' | 'spacious' | 'regular' | The amount of padding between the swatches. |
size | 'S' | 'M' | 'L' | 'XS' | 'M' | The size of the color swatches. |
rounding | 'default' | 'none' | 'full' | 'none' | The corner rounding of the color swatches. |
styles | StylesProp | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
class | string | — | Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. |
slot | string | — | A slot name for the component. |
id | string | — | The element's unique identifier. solidaria-components |
onChange | (color: Color) => void | — | Handler called when the selected color changes. solidaria-components |
aria-describedby | string | — | ID of element that describes the swatch picker. solidaria-components |
aria-details | string | — | ID of element that provides detailed information about the swatch picker. solidaria-components |
aria-label | string | — | Accessible label for the swatch picker. solidaria-components |
aria-labelledby | string | — | ID of element that labels the swatch picker. solidaria-components |
value | string | Color | — | The current color value (controlled). solidaria-components |
defaultValue | string | Color | — | The default color value (uncontrolled). solidaria-components |
Declared in packages/viviana-ui/src/color/ColorSwatchPicker.tsx.
ColorSwatchPickerItem props
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Additional CSS class name. |
children | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | ((renderProps: ColorSwatchPickerItemRenderProps) => JSX.Element) | — | The children of the swatch item. solidaria-components |
slot | string | false | — | A slot name for the component. HTML `slot` may be `false` to omit. solidaria-components |
aria-label | string | — | Accessible label for this item. solidaria-components |
isDisabled | false | true | — | Whether this item is disabled. solidaria-components |
color* | string | Color | — | The color represented by this swatch item. solidaria-components |
Declared in packages/viviana-ui/src/color/ColorSwatchPicker.tsx.
Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.