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

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 (3) hide show
  1. package/dist/ColorSwatchPicker.d.ts.map +1 -1
  2. package/dist/ColorSwatchPicker.js +6 -2
  3. package/package.json +6 -5
package/dist/ColorSwatchPicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorSwatchPicker.d.ts","sourceRoot":"","sources":["../src/ColorSwatchPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,gGAAgG;AAChG,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAS,EACT,GAAU,EACV,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAoCtC"}
1
+ {"version":3,"file":"ColorSwatchPicker.d.ts","sourceRoot":"","sources":["../src/ColorSwatchPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,gGAAgG;AAChG,MAAM,WAAW,WAAW;IAC1B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC,0BAA0B;IAC1B,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACxB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAS,EACT,GAAU,EACV,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAyCtC"}
package/dist/ColorSwatchPicker.js CHANGED
@@ -9,14 +9,18 @@ export function ColorSwatchPicker({ swatches, value, onChange, size = 28, gap =
9
9
  const cm = getClassMap();
10
10
  return (_jsxs("div", { className: cm.cn(cm.stack(2), className), children: [_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: cm.flex({ align: 'center', gap, wrap: 'wrap' }), children: swatches.map((s) => {
11
11
  const selected = s.value === value;
12
- return (_jsx("button", { type: "button", role: "radio", "aria-checked": selected, "aria-label": s.label ?? s.value, onClick: () => onChange(s.value), className: cm.roundedFull, style: {
12
+ return (_jsx("button", { type: "button", role: "radio", "aria-checked": selected, "aria-label": s.label ?? s.value, "data-mol-id": `color-swatch-${s.value}`, "data-selected": selected ? 'true' : 'false', onClick: () => onChange(s.value),
13
+ /* mol-bespoke-button: colour swatch, no label — the inline
14
+ background IS the caller's data (the colour being picked), not
15
+ a design token, and a `cm.button()` fill would hide it. Cursor
16
+ and the compact touch floor come from the ClassMap. */
17
+ className: cm.cn(cm.roundedFull, cm.cursorPointer, cm.touchTargetCompact), style: {
13
18
  width: size,
14
19
  height: size,
15
20
  background: s.color,
16
21
  outline: selected ? '2px solid currentColor' : 'none',
17
22
  outlineOffset: 2,
18
23
  border: 'none',
19
- cursor: 'pointer',
20
24
  } }, s.value));
21
25
  }) }), preview] }));
22
26
  }
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@molecule/app-color-swatch-picker-react",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "Grid of colored circle swatches with single-select state, for tag colors / labels / themes",
5
+ "homepage": "https://www.molecule.dev/packages/app-color-swatch-picker-react",
5
6
  "type": "module",
6
7
  "main": "dist/index.js",
7
8
  "types": "dist/index.d.ts",
@@ -38,15 +39,15 @@
38
39
  "react": "^18.0.0 || ^19.0.0"
39
40
  },
40
41
  "devDependencies": {
41
- "@molecule/app-react": "1.0.1",
42
- "@molecule/app-ui": "1.0.1",
43
- "@molecule/app-ui-react": "1.0.1",
42
+ "@molecule/app-react": "1.6.0",
43
+ "@molecule/app-ui": "1.1.1",
44
+ "@molecule/app-ui-react": "1.0.2",
44
45
  "@types/node": "26.1.2",
45
46
  "@types/react": "19.2.17",
46
47
  "@types/react-dom": "19.2.3",
47
48
  "react": "19.2.8",
48
49
  "react-dom": "19.2.8",
49
50
  "typescript": "6.0.3",
50
- "vitest": "4.1.10"
51
+ "vitest": "4.1.11"
51
52
  }
52
53
  }