@molecule/app-color-swatch-picker-react 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +137 -0
  2. package/package.json +14 -8
package/README.md ADDED
@@ -0,0 +1,137 @@
1
+ <!--
2
+ AUTO-GENERATED — DO NOT EDIT THIS FILE.
3
+ Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
4
+ Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
5
+ To change this document, edit the module-level JSDoc in src/index.ts.
6
+ Generated: 2026-08-04T01:50:20.997Z
7
+ -->
8
+
9
+ # @molecule/app-color-swatch-picker-react
10
+
11
+ > **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
12
+ > It is written to be read by coding agents as much as by people, and is generated from this
13
+ > package's source — edit `src/index.ts` JSDoc, not this file.
14
+
15
+ React color-swatch picker.
16
+
17
+ Exports `<ColorSwatchPicker>` — grid of colored circles with single-select state.
18
+
19
+ ## Quick Start
20
+
21
+ ```tsx
22
+ import { ColorSwatchPicker } from '@molecule/app-color-swatch-picker-react'
23
+
24
+ const swatches = [
25
+ { value: 'red', color: '#ef4444', label: 'Red' },
26
+ { value: 'blue', color: '#3b82f6', label: 'Blue' },
27
+ { value: 'green', color: '#22c55e', label: 'Green' },
28
+ ]
29
+
30
+ <ColorSwatchPicker
31
+ swatches={swatches}
32
+ value={selected}
33
+ onChange={(value) => setSelected(value)}
34
+ ariaLabel="Tag color"
35
+ />
36
+ ```
37
+
38
+ ## Type
39
+
40
+ `feature`
41
+
42
+ ## Installation
43
+
44
+ ```bash
45
+ npm install @molecule/app-color-swatch-picker-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
46
+ npm install -D @types/react
47
+ ```
48
+
49
+ ## API
50
+
51
+ ### Interfaces
52
+
53
+ #### `ColorSwatch`
54
+
55
+ A single color option in the swatch picker with its value, CSS color, and optional label.
56
+
57
+ ```typescript
58
+ interface ColorSwatch {
59
+ /** Value stored in state (can be the raw color or a semantic id). */
60
+ value: string
61
+ /** CSS color (any valid color string). */
62
+ color: string
63
+ /** Optional label shown as tooltip / aria-label. */
64
+ label?: string
65
+ }
66
+ ```
67
+
68
+ #### `ColorSwatchPickerProps`
69
+
70
+ Props for {@link ColorSwatchPicker}.
71
+
72
+ ```typescript
73
+ interface ColorSwatchPickerProps {
74
+ /** Swatch definitions. */
75
+ swatches: ColorSwatch[]
76
+ /** Currently selected swatch value. */
77
+ value: string
78
+ /** Called when a swatch is picked. */
79
+ onChange: (value: string) => void
80
+ /** Swatch diameter in pixels. Defaults to 28. */
81
+ size?: number
82
+ /** Gap between swatches. */
83
+ gap?: 'xs' | 'sm' | 'md'
84
+ /** Optional child rendered below (e.g. a live preview). */
85
+ preview?: ReactNode
86
+ /** Extra classes. */
87
+ className?: string
88
+ /** `aria-label` for the group. */
89
+ ariaLabel?: string
90
+ }
91
+ ```
92
+
93
+ ### Functions
94
+
95
+ #### `ColorSwatchPicker(props)`
96
+
97
+ Grid of colored circles with single-select state. Used for tag
98
+ colors, label colors, theme accent swatches, etc.
99
+
100
+ ```typescript
101
+ function ColorSwatchPicker({
102
+ swatches,
103
+ value,
104
+ onChange,
105
+ size = 28,
106
+ gap = 'sm',
107
+ preview,
108
+ className,
109
+ ariaLabel,
110
+ }: ColorSwatchPickerProps): JSX.Element
111
+ ```
112
+
113
+ - `props` — Component props (see {@link ColorSwatchPickerProps}).
114
+
115
+ ## Injection Notes
116
+
117
+ ### Requirements
118
+
119
+ Peer dependencies:
120
+
121
+ - `@molecule/app-react` ^1.0.1
122
+ - `@molecule/app-ui` ^1.0.1
123
+ - `@molecule/app-ui-react` ^1.0.1
124
+ - `react` ^18.0.0 || ^19.0.0
125
+
126
+ ### Runtime Dependencies
127
+
128
+ - `@molecule/app-react`
129
+ - `@molecule/app-ui`
130
+ - `@molecule/app-ui-react`
131
+ - `react`
132
+
133
+ All text (`label` per swatch, `ariaLabel` for the group) is
134
+ consumer-provided — pass translated strings via `t()`; the component has no
135
+ built-in copy. Selection is fully controlled: persist `onChange(value)` and
136
+ re-render with the new `value`. Swatches render as `role="radio"` buttons
137
+ sized by the `size` prop (default 28px) with the CSS `color` you provide.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@molecule/app-color-swatch-picker-react",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Grid of colored circle swatches with single-select state, for tag colors / labels / themes",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -17,7 +17,8 @@
17
17
  }
18
18
  },
19
19
  "files": [
20
- "dist"
20
+ "dist",
21
+ "README.md"
21
22
  ],
22
23
  "keywords": [
23
24
  "molecule",
@@ -25,16 +26,21 @@
25
26
  "react"
26
27
  ],
27
28
  "license": "Apache-2.0",
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "https://github.com/molecule-dev/molecule.git",
32
+ "directory": "packages/app/features/color-swatch-picker-react"
33
+ },
28
34
  "peerDependencies": {
29
- "@molecule/app-react": "^1.0.0",
30
- "@molecule/app-ui": "^1.0.0",
31
- "@molecule/app-ui-react": "^1.0.0",
35
+ "@molecule/app-react": "^1.0.1",
36
+ "@molecule/app-ui": "^1.0.1",
37
+ "@molecule/app-ui-react": "^1.0.1",
32
38
  "react": "^18.0.0 || ^19.0.0"
33
39
  },
34
40
  "devDependencies": {
35
- "@molecule/app-react": "1.0.0",
36
- "@molecule/app-ui": "1.0.0",
37
- "@molecule/app-ui-react": "1.0.0",
41
+ "@molecule/app-react": "1.0.1",
42
+ "@molecule/app-ui": "1.0.1",
43
+ "@molecule/app-ui-react": "1.0.1",
38
44
  "@types/node": "26.1.2",
39
45
  "@types/react": "19.2.17",
40
46
  "@types/react-dom": "19.2.3",