chroma-panel 0.1.0 → 0.1.2

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 (20) hide show
  1. package/README.md +1 -1
  2. package/dist/components/ChromaPanel.cjs +1 -1
  3. package/dist/components/ChromaPanel.js +1 -1
  4. package/dist/components/ColorInput.cjs +1 -1
  5. package/dist/components/ColorInput.js +1 -1
  6. package/dist/components/PanelFooter.cjs +4 -4
  7. package/dist/components/PanelFooter.js +4 -4
  8. package/dist/core/useFormControl.cjs +1 -1
  9. package/dist/core/useFormControl.js +1 -1
  10. package/dist/modes/image/index.cjs +3 -3
  11. package/dist/modes/image/index.js +3 -3
  12. package/dist/modes/palettes/index.cjs +1 -1
  13. package/dist/modes/palettes/index.js +1 -1
  14. package/dist/modes/sliders/index.cjs +1 -1
  15. package/dist/modes/sliders/index.js +1 -1
  16. package/dist/modes/wheel/index.cjs +1 -1
  17. package/dist/modes/wheel/index.js +1 -1
  18. package/dist/primitives/ColorDisc.cjs +1 -1
  19. package/dist/primitives/ColorDisc.js +1 -1
  20. package/package.json +1 -1
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ![chroma-panel, a React color picker](https://raw.githubusercontent.com/re-sohail/chroma-panel/main/assets/hero.png)
2
2
 
3
3
  [![npm](https://img.shields.io/npm/v/chroma-panel?color=2d7ff9)](https://www.npmjs.com/package/chroma-panel)
4
- [![gzipped](https://img.shields.io/bundlephobia/minzip/chroma-panel?color=2d7ff9&label=gzipped)](https://bundlephobia.com/package/chroma-panel)
4
+ [![install size](https://img.shields.io/npm/unpacked-size/chroma-panel?color=2d7ff9&label=install%20size)](https://www.npmjs.com/package/chroma-panel)
5
5
  [![downloads](https://img.shields.io/npm/dw/chroma-panel?color=2d7ff9)](https://www.npmjs.com/package/chroma-panel)
6
6
  [![licence](https://img.shields.io/npm/l/chroma-panel?color=2d7ff9)](./LICENSE)
7
7
 
package/dist/components/ChromaPanel.cjs CHANGED
@@ -32,7 +32,7 @@ function ChromaPanel(props) {
32
32
  "palettes",
33
33
  "image",
34
34
  "pencils"
35
- ], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colours", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
35
+ ], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colors", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
36
36
  const rootRef = react.useRef(null);
37
37
  const panelHostRef = react.useRef(null);
38
38
  const idPrefix = require_context.useStableId("cp");
package/dist/components/ChromaPanel.js CHANGED
@@ -30,7 +30,7 @@ function ChromaPanel(props) {
30
30
  "palettes",
31
31
  "image",
32
32
  "pencils"
33
- ], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colours", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
33
+ ], mode, defaultMode, onModeChange, format = "hex", showAlpha = true, showEyedropper = true, showRecentColors = true, recentColors, defaultRecentColors, onRecentColorsChange, palettes, pencils, modeProps, imageOptions, disabled = false, theme, showTitleBar = true, title = "Colors", onClose, collapsed, defaultCollapsed = false, onCollapsedChange, size, defaultSize = "default", onSizeChange, injectStyles: shouldInject = true, className, classNames = {}, style, store: externalStore } = props;
34
34
  const rootRef = React.useRef(null);
35
35
  const panelHostRef = React.useRef(null);
36
36
  const idPrefix = useStableId("cp");
package/dist/components/ColorInput.cjs CHANGED
@@ -15,7 +15,7 @@ react = require_runtime.__toESM(react, 1);
15
15
  let react_jsx_runtime = require("react/jsx-runtime");
16
16
  //#region src/components/ColorInput.tsx
17
17
  function ColorInput(props) {
18
- const { open, defaultOpen = false, onOpenChange, name, form, required = false, readOnly = false, autoComplete, validationBehavior = "native", id, "aria-label": ariaLabel = "Choose a colour", triggerClassName, disabled: disabledProp = false, className, classNames = {}, format = "hex", value, defaultValue = require_ChromaPanel.DEFAULT_COLOR, store: externalStore, mode, defaultMode, onModeChange, ...panelProps } = props;
18
+ const { open, defaultOpen = false, onOpenChange, name, form, required = false, readOnly = false, autoComplete, validationBehavior = "native", id, "aria-label": ariaLabel = "Choose a color", triggerClassName, disabled: disabledProp = false, className, classNames = {}, format = "hex", value, defaultValue = require_ChromaPanel.DEFAULT_COLOR, store: externalStore, mode, defaultMode, onModeChange, ...panelProps } = props;
19
19
  const triggerId = require_context.useStableId("cp-trigger-");
20
20
  const hiddenRef = react.useRef(null);
21
21
  const fieldsetDisabled = require_useFormControl.useFieldsetDisabled(hiddenRef);
package/dist/components/ColorInput.js CHANGED
@@ -13,7 +13,7 @@ import * as React from "react";
13
13
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
14
  //#region src/components/ColorInput.tsx
15
15
  function ColorInput(props) {
16
- const { open, defaultOpen = false, onOpenChange, name, form, required = false, readOnly = false, autoComplete, validationBehavior = "native", id, "aria-label": ariaLabel = "Choose a colour", triggerClassName, disabled: disabledProp = false, className, classNames = {}, format = "hex", value, defaultValue = DEFAULT_COLOR, store: externalStore, mode, defaultMode, onModeChange, ...panelProps } = props;
16
+ const { open, defaultOpen = false, onOpenChange, name, form, required = false, readOnly = false, autoComplete, validationBehavior = "native", id, "aria-label": ariaLabel = "Choose a color", triggerClassName, disabled: disabledProp = false, className, classNames = {}, format = "hex", value, defaultValue = DEFAULT_COLOR, store: externalStore, mode, defaultMode, onModeChange, ...panelProps } = props;
17
17
  const triggerId = useStableId("cp-trigger-");
18
18
  const hiddenRef = React.useRef(null);
19
19
  const fieldsetDisabled = useFieldsetDisabled(hiddenRef);
package/dist/components/PanelFooter.cjs CHANGED
@@ -41,12 +41,12 @@ function PanelFooter() {
41
41
  recents.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
42
42
  ref: recentsRef,
43
43
  className: "cp-recents",
44
- "aria-label": "Recent colours",
44
+ "aria-label": "Recent colors",
45
45
  children: recents.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
46
46
  type: "button",
47
47
  className: require_context.cx("cp-swatch", "cp-swatch-round", classNames.swatch),
48
48
  style: { ["--cp-swatch-color"]: color },
49
- "aria-label": `Recent colour ${color}`,
49
+ "aria-label": `Recent color ${color}`,
50
50
  disabled,
51
51
  onClick: () => {
52
52
  const parsed = require_parse.parse(color);
@@ -59,8 +59,8 @@ function PanelFooter() {
59
59
  showEyedropper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
60
60
  type: "button",
61
61
  className: "cp-icon-button",
62
- "aria-label": "Pick a colour from the screen",
63
- title: "Pick a colour from the screen",
62
+ "aria-label": "Pick a color from the screen",
63
+ title: "Pick a color from the screen",
64
64
  disabled,
65
65
  onClick: () => {
66
66
  handlePick();
package/dist/components/PanelFooter.js CHANGED
@@ -39,12 +39,12 @@ function PanelFooter() {
39
39
  recents.length > 0 ? /* @__PURE__ */ jsx("ul", {
40
40
  ref: recentsRef,
41
41
  className: "cp-recents",
42
- "aria-label": "Recent colours",
42
+ "aria-label": "Recent colors",
43
43
  children: recents.map((color, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
44
44
  type: "button",
45
45
  className: cx("cp-swatch", "cp-swatch-round", classNames.swatch),
46
46
  style: { ["--cp-swatch-color"]: color },
47
- "aria-label": `Recent colour ${color}`,
47
+ "aria-label": `Recent color ${color}`,
48
48
  disabled,
49
49
  onClick: () => {
50
50
  const parsed = parse(color);
@@ -57,8 +57,8 @@ function PanelFooter() {
57
57
  showEyedropper && /* @__PURE__ */ jsx("button", {
58
58
  type: "button",
59
59
  className: "cp-icon-button",
60
- "aria-label": "Pick a colour from the screen",
61
- title: "Pick a colour from the screen",
60
+ "aria-label": "Pick a color from the screen",
61
+ title: "Pick a color from the screen",
62
62
  disabled,
63
63
  onClick: () => {
64
64
  handlePick();
package/dist/core/useFormControl.cjs CHANGED
@@ -50,7 +50,7 @@ function useConstraintValidation(ref, options) {
50
50
  const input = ref.current;
51
51
  if (input === null) return;
52
52
  const { behavior, required, isEmpty } = latest.current;
53
- const message = behavior === "native" && required && isEmpty ? "Please choose a colour." : "";
53
+ const message = behavior === "native" && required && isEmpty ? "Please choose a color." : "";
54
54
  input.setCustomValidity(message);
55
55
  if (!input.hasAttribute("title")) input.title = "";
56
56
  });
package/dist/core/useFormControl.js CHANGED
@@ -48,7 +48,7 @@ function useConstraintValidation(ref, options) {
48
48
  const input = ref.current;
49
49
  if (input === null) return;
50
50
  const { behavior, required, isEmpty } = latest.current;
51
- const message = behavior === "native" && required && isEmpty ? "Please choose a colour." : "";
51
+ const message = behavior === "native" && required && isEmpty ? "Please choose a color." : "";
52
52
  input.setCustomValidity(message);
53
53
  if (!input.hasAttribute("title")) input.title = "";
54
54
  });
package/dist/modes/image/index.cjs CHANGED
@@ -123,8 +123,8 @@ function ImagePanel(props) {
123
123
  "aria-live": "polite",
124
124
  className: "cp-visually-hidden",
125
125
  children: [
126
- status === "working" ? "Extracting colours" : "",
127
- status === "ready" ? `${swatches.length} colours extracted` : "",
126
+ status === "working" ? "Extracting colors" : "",
127
+ status === "ready" ? `${swatches.length} colors extracted` : "",
128
128
  status === "error" ? message : ""
129
129
  ]
130
130
  }),
@@ -176,7 +176,7 @@ function ImagePanel(props) {
176
176
  color: s.hex,
177
177
  name: s.hex
178
178
  })),
179
- label: "Extracted colours",
179
+ label: "Extracted colors",
180
180
  columns: 5
181
181
  })
182
182
  ]
package/dist/modes/image/index.js CHANGED
@@ -121,8 +121,8 @@ function ImagePanel(props) {
121
121
  "aria-live": "polite",
122
122
  className: "cp-visually-hidden",
123
123
  children: [
124
- status === "working" ? "Extracting colours" : "",
125
- status === "ready" ? `${swatches.length} colours extracted` : "",
124
+ status === "working" ? "Extracting colors" : "",
125
+ status === "ready" ? `${swatches.length} colors extracted` : "",
126
126
  status === "error" ? message : ""
127
127
  ]
128
128
  }),
@@ -174,7 +174,7 @@ function ImagePanel(props) {
174
174
  color: s.hex,
175
175
  name: s.hex
176
176
  })),
177
- label: "Extracted colours",
177
+ label: "Extracted colors",
178
178
  columns: 5
179
179
  })
180
180
  ]
package/dist/modes/palettes/index.cjs CHANGED
@@ -46,7 +46,7 @@ function PalettesPanel() {
46
46
  children: groups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
47
47
  className: "cp-empty",
48
48
  children: [
49
- "No colours match “",
49
+ "No colors match “",
50
50
  query,
51
51
  "”."
52
52
  ]
package/dist/modes/palettes/index.js CHANGED
@@ -44,7 +44,7 @@ function PalettesPanel() {
44
44
  children: groups.length === 0 ? /* @__PURE__ */ jsxs("p", {
45
45
  className: "cp-empty",
46
46
  children: [
47
- "No colours match “",
47
+ "No colors match “",
48
48
  query,
49
49
  "”."
50
50
  ]
package/dist/modes/sliders/index.cjs CHANGED
@@ -64,7 +64,7 @@ function SlidersPanel() {
64
64
  children: [
65
65
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SegmentedControl.SegmentedControl, {
66
66
  size: "sm",
67
- ariaLabel: "Colour model",
67
+ ariaLabel: "Color model",
68
68
  items: MODELS,
69
69
  value: model,
70
70
  onChange: (id) => setModel(id)
package/dist/modes/sliders/index.js CHANGED
@@ -62,7 +62,7 @@ function SlidersPanel() {
62
62
  children: [
63
63
  /* @__PURE__ */ jsx(SegmentedControl, {
64
64
  size: "sm",
65
- ariaLabel: "Colour model",
65
+ ariaLabel: "Color model",
66
66
  items: MODELS,
67
67
  value: model,
68
68
  onChange: (id) => setModel(id)
package/dist/modes/wheel/index.cjs CHANGED
@@ -53,7 +53,7 @@ function WheelPanel() {
53
53
  }
54
54
  const wheelMode = {
55
55
  id: "wheel",
56
- label: "Colour wheel",
56
+ label: "Color wheel",
57
57
  icon: require_icons.WheelIcon,
58
58
  Panel: WheelPanel
59
59
  };
package/dist/modes/wheel/index.js CHANGED
@@ -51,7 +51,7 @@ function WheelPanel() {
51
51
  }
52
52
  const wheelMode = {
53
53
  id: "wheel",
54
- label: "Colour wheel",
54
+ label: "Color wheel",
55
55
  icon: WheelIcon,
56
56
  Panel: WheelPanel
57
57
  };
package/dist/primitives/ColorDisc.cjs CHANGED
@@ -60,7 +60,7 @@ function ColorDisc(props) {
60
60
  onPointerUp: drag.onPointerUp,
61
61
  onLostPointerCapture: drag.onLostPointerCapture,
62
62
  role: "group",
63
- "aria-label": "Colour wheel",
63
+ "aria-label": "Color wheel",
64
64
  "aria-disabled": disabled || void 0,
65
65
  children: [
66
66
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AxisInput.AxisInput, {
package/dist/primitives/ColorDisc.js CHANGED
@@ -58,7 +58,7 @@ function ColorDisc(props) {
58
58
  onPointerUp: drag.onPointerUp,
59
59
  onLostPointerCapture: drag.onLostPointerCapture,
60
60
  role: "group",
61
- "aria-label": "Colour wheel",
61
+ "aria-label": "Color wheel",
62
62
  "aria-disabled": disabled || void 0,
63
63
  children: [
64
64
  /* @__PURE__ */ jsx(AxisInput, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chroma-panel",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "React color picker with wheel, sliders, palettes, image sampling and an eyedropper. Zero dependencies, accessible, TypeScript types included.",
5
5
  "keywords": [
6
6
  "react",