@cdx-ui/primitives 0.1.7 → 0.2.0

package/lib/commonjs/color/Color.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseColor = parseColor;
+var _color = require("@react-stately/color");
+const NUMBER_PATTERN = '[+-]?(?:\\d+(?:\\.\\d+)?|\\.\\d+)';
+const HEX_PATTERN = /^#[\da-f]{3}(?:[\da-f]{3})?$/iu;
+const RGB_PATTERN = new RegExp(`^rgb\\(\\s*${NUMBER_PATTERN}\\s*,\\s*${NUMBER_PATTERN}\\s*,\\s*${NUMBER_PATTERN}\\s*\\)$`, 'iu');
+const HSL_PATTERN = new RegExp(`^hsl\\(\\s*${NUMBER_PATTERN}\\s*,\\s*${NUMBER_PATTERN}%\\s*,\\s*${NUMBER_PATTERN}%\\s*\\)$`, 'iu');
+function isSupportedOpaqueColor(value) {
+  return HEX_PATTERN.test(value) || RGB_PATTERN.test(value) || HSL_PATTERN.test(value);
+}
+function normalizeHue(value) {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  return (value % 360 + 360) % 360;
+}
+function normalizeChannelValue(color, channel, value) {
+  if (!Number.isFinite(value)) {
+    return color.getChannelValue(channel);
+  }
+  if (channel === 'hue') {
+    return normalizeHue(value);
+  }
+  const {
+    minValue,
+    maxValue
+  } = color.getChannelRange(channel);
+  const clampedValue = Math.min(maxValue, Math.max(minValue, value));
+  return channel === 'red' || channel === 'green' || channel === 'blue' ? Math.round(clampedValue) : clampedValue;
+}
+function createColor(color) {
+  return {
+    toString(format) {
+      const value = color.toString(format);
+      return format === 'hex' ? value.toUpperCase() : value;
+    },
+    getChannel(space, channel) {
+      const value = color.toFormat(space).getChannelValue(channel);
+      return channel === 'hue' ? normalizeHue(value) : value;
+    },
+    withChannel(space, channel, value) {
+      const convertedColor = color.toFormat(space);
+      const channelValue = normalizeChannelValue(convertedColor, channel, value);
+      return createColor(convertedColor.withChannelValue(channel, channelValue));
+    }
+  };
+}
+function parseColor(value) {
+  const normalizedValue = value.trim().toLowerCase();
+  if (!isSupportedOpaqueColor(normalizedValue)) {
+    return undefined;
+  }
+  try {
+    let color = (0, _color.parseColor)(normalizedValue);
+    if (RGB_PATTERN.test(normalizedValue)) {
+      color = color.withChannelValue('red', Math.round(color.getChannelValue('red'))).withChannelValue('green', Math.round(color.getChannelValue('green'))).withChannelValue('blue', Math.round(color.getChannelValue('blue')));
+    } else if (HSL_PATTERN.test(normalizedValue)) {
+      color = color.withChannelValue('hue', normalizeHue(color.getChannelValue('hue')));
+    }
+    return createColor(color);
+  } catch {
+    return undefined;
+  }
+}
+//# sourceMappingURL=Color.js.map

package/lib/commonjs/color/Color.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_color","require","NUMBER_PATTERN","HEX_PATTERN","RGB_PATTERN","RegExp","HSL_PATTERN","isSupportedOpaqueColor","value","test","normalizeHue","Number","isFinite","normalizeChannelValue","color","channel","getChannelValue","minValue","maxValue","getChannelRange","clampedValue","Math","min","max","round","createColor","toString","format","toUpperCase","getChannel","space","toFormat","withChannel","convertedColor","channelValue","withChannelValue","parseColor","normalizedValue","trim","toLowerCase","undefined","parseStatelyColor"],"sourceRoot":"../../../src","sources":["color/Color.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/color/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "parseColor", {
+  enumerable: true,
+  get: function () {
+    return _Color.parseColor;
+  }
+});
+var _Color = require("./Color");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Color","require"],"sourceRoot":"../../../src","sources":["color/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/color/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/commonjs/color/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["color/types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/color-area/ColorAreaAccessibility.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorAreaAccessibility = ColorAreaAccessibility;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _context = require("./context");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function ColorAreaAccessibility({
+  accessibilityLabel
+}) {
+  const {
+    value,
+    xValue,
+    yValue,
+    step,
+    isDisabled,
+    setXValue,
+    setYValue
+  } = (0, _context.useColorAreaContext)();
+  const handleSaturationAction = (0, _react.useCallback)(event => {
+    if (event.nativeEvent.actionName === 'increment') {
+      setXValue(xValue + step, true);
+    } else if (event.nativeEvent.actionName === 'decrement') {
+      setXValue(xValue - step, true);
+    }
+  }, [setXValue, step, xValue]);
+  const handleBrightnessAction = (0, _react.useCallback)(event => {
+    if (event.nativeEvent.actionName === 'increment') {
+      setYValue(yValue + step, true);
+    } else if (event.nativeEvent.actionName === 'decrement') {
+      setYValue(yValue - step, true);
+    }
+  }, [setYValue, step, yValue]);
+  const actionProps = {
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }]
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ...actionProps,
+      accessible: true,
+      style: styles.saturationProxy,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, Saturation` : 'Saturation',
+      accessibilityValue: {
+        min: 0,
+        max: 100,
+        now: Math.round((0, _utils.clampColorChannel)(xValue)),
+        text: (0, _utils.colorAreaValueText)(value)
+      },
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      onAccessibilityAction: handleSaturationAction
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ...actionProps,
+      accessible: true,
+      style: styles.brightnessProxy,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel ? `${accessibilityLabel}, Brightness` : 'Brightness',
+      accessibilityValue: {
+        min: 0,
+        max: 100,
+        now: Math.round((0, _utils.clampColorChannel)(yValue)),
+        text: (0, _utils.colorAreaValueText)(value)
+      },
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      onAccessibilityAction: handleBrightnessAction
+    })]
+  });
+}
+ColorAreaAccessibility.displayName = 'ColorAreaAccessibility';
+const styles = _reactNative.StyleSheet.create({
+  saturationProxy: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: '50%',
+    pointerEvents: 'none'
+  },
+  brightnessProxy: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: '50%',
+    pointerEvents: 'none'
+  }
+});
+//# sourceMappingURL=ColorAreaAccessibility.js.map

package/lib/commonjs/color-area/ColorAreaAccessibility.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_context","_utils","_jsxRuntime","ColorAreaAccessibility","accessibilityLabel","value","xValue","yValue","step","isDisabled","setXValue","setYValue","useColorAreaContext","handleSaturationAction","useCallback","event","nativeEvent","actionName","handleBrightnessAction","actionProps","accessibilityActions","name","jsxs","Fragment","children","jsx","View","accessible","style","styles","saturationProxy","accessibilityRole","accessibilityValue","min","max","now","Math","round","clampColorChannel","text","colorAreaValueText","accessibilityState","disabled","onAccessibilityAction","brightnessProxy","displayName","StyleSheet","create","position","top","bottom","left","width","pointerEvents","right"],"sourceRoot":"../../../src","sources":["color-area/ColorAreaAccessibility.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAAgE,IAAAI,WAAA,GAAAJ,OAAA;AAMzD,SAASK,sBAAsBA,CAAC;EAAEC;AAAgD,CAAC,EAAE;EAC1F,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,UAAU;IAAEC,SAAS;IAAEC;EAAU,CAAC,GAAG,IAAAC,4BAAmB,EAAC,CAAC;EAE/F,MAAMC,sBAAsB,GAAG,IAAAC,kBAAW,EACvCC,KAA+B,IAAK;IACnC,IAAIA,KAAK,CAACC,WAAW,CAACC,UAAU,KAAK,WAAW,EAAE;MAChDP,SAAS,CAACJ,MAAM,GAAGE,IAAI,EAAE,IAAI,CAAC;IAChC,CAAC,MAAM,IAAIO,KAAK,CAACC,WAAW,CAACC,UAAU,KAAK,WAAW,EAAE;MACvDP,SAAS,CAACJ,MAAM,GAAGE,IAAI,EAAE,IAAI,CAAC;IAChC;EACF,CAAC,EACD,CAACE,SAAS,EAAEF,IAAI,EAAEF,MAAM,CAC1B,CAAC;EAED,MAAMY,sBAAsB,GAAG,IAAAJ,kBAAW,EACvCC,KAA+B,IAAK;IACnC,IAAIA,KAAK,CAACC,WAAW,CAACC,UAAU,KAAK,WAAW,EAAE;MAChDN,SAAS,CAACJ,MAAM,GAAGC,IAAI,EAAE,IAAI,CAAC;IAChC,CAAC,MAAM,IAAIO,KAAK,CAACC,WAAW,CAACC,UAAU,KAAK,WAAW,EAAE;MACvDN,SAAS,CAACJ,MAAM,GAAGC,IAAI,EAAE,IAAI,CAAC;IAChC;EACF,CAAC,EACD,CAACG,SAAS,EAAEH,IAAI,EAAED,MAAM,CAC1B,CAAC;EAED,MAAMY,WAAW,GAAG;IAClBC,oBAAoB,EAAE,CAAC;MAAEC,IAAI,EAAE;IAAY,CAAC,EAAE;MAAEA,IAAI,EAAE;IAAY,CAAC;EACrE,CAAU;EAEV,oBACE,IAAAnB,WAAA,CAAAoB,IAAA,EAAApB,WAAA,CAAAqB,QAAA;IAAAC,QAAA,gBACE,IAAAtB,WAAA,CAAAuB,GAAA,EAAC1B,YAAA,CAAA2B,IAAI;MAAA,GACCP,WAAW;MACfQ,UAAU;MACVC,KAAK,EAAEC,MAAM,CAACC,eAAgB;MAC9BC,iBAAiB,EAAC,YAAY;MAC9B3B,kBAAkB,EAAEA,kBAAkB,GAAG,GAAGA,kBAAkB,cAAc,GAAG,YAAa;MAC5F4B,kBAAkB,EAAE;QAClBC,GAAG,EAAE,CAAC;QACNC,GAAG,EAAE,GAAG;QACRC,GAAG,EAAEC,IAAI,CAACC,KAAK,CAAC,IAAAC,wBAAiB,EAAChC,MAAM,CAAC,CAAC;QAC1CiC,IAAI,EAAE,IAAAC,yBAAkB,EAACnC,KAAK;MAChC,CAAE;MACFoC,kBAAkB,EAAE;QAAEC,QAAQ,EAAEjC;MAAW,CAAE;MAC7CkC,qBAAqB,EAAE9B;IAAuB,CAC/C,CAAC,eACF,IAAAX,WAAA,CAAAuB,GAAA,EAAC1B,YAAA,CAAA2B,IAAI;MAAA,GACCP,WAAW;MACfQ,UAAU;MACVC,KAAK,EAAEC,MAAM,CAACe,eAAgB;MAC9Bb,iBAAiB,EAAC,YAAY;MAC9B3B,kBAAkB,EAAEA,kBAAkB,GAAG,GAAGA,kBAAkB,cAAc,GAAG,YAAa;MAC5F4B,kBAAkB,EAAE;QAClBC,GAAG,EAAE,CAAC;QACNC,GAAG,EAAE,GAAG;QACRC,GAAG,EAAEC,IAAI,CAACC,KAAK,CAAC,IAAAC,wBAAiB,EAAC/B,MAAM,CAAC,CAAC;QAC1CgC,IAAI,EAAE,IAAAC,yBAAkB,EAACnC,KAAK;MAChC,CAAE;MACFoC,kBAAkB,EAAE;QAAEC,QAAQ,EAAEjC;MAAW,CAAE;MAC7CkC,qBAAqB,EAAEzB;IAAuB,CAC/C,CAAC;EAAA,CACF,CAAC;AAEP;AAEAf,sBAAsB,CAAC0C,WAAW,GAAG,wBAAwB;AAE7D,MAAMhB,MAAM,GAAGiB,uBAAU,CAACC,MAAM,CAAC;EAC/BjB,eAAe,EAAE;IACfkB,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,KAAK;IACZC,aAAa,EAAE;EACjB,CAAC;EACDT,eAAe,EAAE;IACfI,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNK,KAAK,EAAE,CAAC;IACRJ,MAAM,EAAE,CAAC;IACTE,KAAK,EAAE,KAAK;IACZC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/color-area/ColorAreaAccessibility.web.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorAreaAccessibility = ColorAreaAccessibility;
+var _visuallyHidden = require("@react-aria/visually-hidden");
+var _context = require("./context");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function ColorAreaAccessibility({
+  accessibilityLabel
+}) {
+  const {
+    value,
+    xValue,
+    yValue,
+    step,
+    isDisabled,
+    setXValue,
+    setYValue,
+    handleKeyDown
+  } = (0, _context.useColorAreaContext)();
+  const handleInputKeyDown = event => {
+    handleKeyDown(event);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: step,
+        value: (0, _utils.snapColorChannel)(xValue, step),
+        disabled: isDisabled,
+        "aria-label": accessibilityLabel ? `${accessibilityLabel}, Saturation` : 'Saturation',
+        "aria-valuetext": (0, _utils.colorAreaValueText)(value),
+        onKeyDown: handleInputKeyDown,
+        onChange: event => setXValue(Number(event.currentTarget.value), true)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "range",
+        min: 0,
+        max: 100,
+        step: step,
+        value: (0, _utils.snapColorChannel)(yValue, step),
+        disabled: isDisabled,
+        "aria-label": accessibilityLabel ? `${accessibilityLabel}, Brightness` : 'Brightness',
+        "aria-valuetext": (0, _utils.colorAreaValueText)(value),
+        onKeyDown: handleInputKeyDown,
+        onChange: event => setYValue(Number(event.currentTarget.value), true)
+      })
+    })]
+  });
+}
+ColorAreaAccessibility.displayName = 'ColorAreaAccessibility';
+//# sourceMappingURL=ColorAreaAccessibility.web.js.map

package/lib/commonjs/color-area/ColorAreaAccessibility.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_visuallyHidden","require","_context","_utils","_jsxRuntime","ColorAreaAccessibility","accessibilityLabel","value","xValue","yValue","step","isDisabled","setXValue","setYValue","handleKeyDown","useColorAreaContext","handleInputKeyDown","event","jsxs","Fragment","children","jsx","VisuallyHidden","type","min","max","snapColorChannel","disabled","colorAreaValueText","onKeyDown","onChange","Number","currentTarget","displayName"],"sourceRoot":"../../../src","sources":["color-area/ColorAreaAccessibility.web.tsx"],"mappings":";;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAA+D,IAAAG,WAAA,GAAAH,OAAA;AAMxD,SAASI,sBAAsBA,CAAC;EAAEC;AAAgD,CAAC,EAAE;EAC1F,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,UAAU;IAAEC,SAAS;IAAEC,SAAS;IAAEC;EAAc,CAAC,GACpF,IAAAC,4BAAmB,EAAC,CAAC;EAEvB,MAAMC,kBAAkB,GAAIC,KAA4C,IAAK;IAC3EH,aAAa,CAACG,KAA0C,CAAC;EAC3D,CAAC;EAED,oBACE,IAAAb,WAAA,CAAAc,IAAA,EAAAd,WAAA,CAAAe,QAAA;IAAAC,QAAA,gBACE,IAAAhB,WAAA,CAAAiB,GAAA,EAACrB,eAAA,CAAAsB,cAAc;MAAAF,QAAA,eACb,IAAAhB,WAAA,CAAAiB,GAAA;QACEE,IAAI,EAAC,OAAO;QACZC,GAAG,EAAE,CAAE;QACPC,GAAG,EAAE,GAAI;QACTf,IAAI,EAAEA,IAAK;QACXH,KAAK,EAAE,IAAAmB,uBAAgB,EAAClB,MAAM,EAAEE,IAAI,CAAE;QACtCiB,QAAQ,EAAEhB,UAAW;QACrB,cAAYL,kBAAkB,GAAG,GAAGA,kBAAkB,cAAc,GAAG,YAAa;QACpF,kBAAgB,IAAAsB,yBAAkB,EAACrB,KAAK,CAAE;QAC1CsB,SAAS,EAAEb,kBAAmB;QAC9Bc,QAAQ,EAAGb,KAAK,IAAKL,SAAS,CAACmB,MAAM,CAACd,KAAK,CAACe,aAAa,CAACzB,KAAK,CAAC,EAAE,IAAI;MAAE,CACzE;IAAC,CACY,CAAC,eACjB,IAAAH,WAAA,CAAAiB,GAAA,EAACrB,eAAA,CAAAsB,cAAc;MAAAF,QAAA,eACb,IAAAhB,WAAA,CAAAiB,GAAA;QACEE,IAAI,EAAC,OAAO;QACZC,GAAG,EAAE,CAAE;QACPC,GAAG,EAAE,GAAI;QACTf,IAAI,EAAEA,IAAK;QACXH,KAAK,EAAE,IAAAmB,uBAAgB,EAACjB,MAAM,EAAEC,IAAI,CAAE;QACtCiB,QAAQ,EAAEhB,UAAW;QACrB,cAAYL,kBAAkB,GAAG,GAAGA,kBAAkB,cAAc,GAAG,YAAa;QACpF,kBAAgB,IAAAsB,yBAAkB,EAACrB,KAAK,CAAE;QAC1CsB,SAAS,EAAEb,kBAAmB;QAC9Bc,QAAQ,EAAGb,KAAK,IAAKJ,SAAS,CAACkB,MAAM,CAACd,KAAK,CAACe,aAAa,CAACzB,KAAK,CAAC,EAAE,IAAI;MAAE,CACzE;IAAC,CACY,CAAC;EAAA,CACjB,CAAC;AAEP;AAEAF,sBAAsB,CAAC4B,WAAW,GAAG,wBAAwB","ignoreList":[]}

package/lib/commonjs/color-area/ColorAreaRoot.js

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorAreaRoot = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _color = require("../color");
+var _colorPicker = require("../color-picker");
+var _slot = require("../slot");
+var _dataAttributes = require("../utils/dataAttributes");
+var _ColorAreaAccessibility = require("./ColorAreaAccessibility");
+var _context = require("./context");
+var _utils2 = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function createDefaultColor() {
+  const color = (0, _color.parseColor)('#FF0000');
+  if (!color) {
+    throw new Error('ColorArea default color could not be parsed');
+  }
+  return color;
+}
+const DEFAULT_COLOR = createDefaultColor();
+const EMPTY_LAYOUT = {
+  width: 0,
+  height: 0
+};
+function getFinitePoint(event) {
+  const {
+    locationX: x,
+    locationY: y
+  } = event.nativeEvent;
+  return Number.isFinite(x) && Number.isFinite(y) ? {
+    x,
+    y
+  } : null;
+}
+const ColorAreaRoot = exports.ColorAreaRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueChangeComplete,
+  colorSpace = 'hsb',
+  xChannel = 'saturation',
+  yChannel = 'brightness',
+  step = 1,
+  pageStep = 10,
+  isRTL = _reactNative.I18nManager.isRTL,
+  isDisabled = false,
+  accessibilityLabel,
+  children,
+  onLayout,
+  ...props
+}, ref) => {
+  const picker = (0, _colorPicker.useOptionalColorPickerContext)();
+  const usesPickerContext = picker !== null && valueProp === undefined && defaultValue === undefined;
+  const [localValue, setLocalValue] = (0, _utils.useControllableState)({
+    prop: valueProp,
+    defaultProp: defaultValue ?? DEFAULT_COLOR,
+    onChange: onValueChange
+  });
+  const value = (usesPickerContext ? picker.value : localValue) ?? DEFAULT_COLOR;
+  const [layout, setLayoutState] = (0, _react.useState)(EMPTY_LAYOUT);
+  const [thumbSize, setThumbSizeState] = (0, _react.useState)(EMPTY_LAYOUT);
+  const valueRef = (0, _react.useRef)(value);
+  valueRef.current = value;
+  const layoutRef = (0, _react.useRef)(layout);
+  layoutRef.current = layout;
+  const isDisabledRef = (0, _react.useRef)(isDisabled);
+  isDisabledRef.current = isDisabled;
+  const setChannelsFromPointRef = (0, _react.useRef)(undefined);
+  const lastValidPointRef = (0, _react.useRef)(null);
+  const commitValue = (0, _react.useCallback)((next, complete = false) => {
+    if (isDisabled) {
+      return;
+    }
+    valueRef.current = next;
+    if (usesPickerContext) {
+      onValueChange?.(next);
+      picker.onValueChange(next);
+    } else {
+      setLocalValue(next);
+    }
+    if (complete) {
+      onValueChangeComplete?.(next);
+    }
+  }, [isDisabled, onValueChange, onValueChangeComplete, picker, setLocalValue, usesPickerContext]);
+  const setXValue = (0, _react.useCallback)((nextValue, complete = false) => {
+    commitValue(valueRef.current.withChannel(colorSpace, xChannel, (0, _utils2.snapColorChannel)(nextValue, step)), complete);
+  }, [colorSpace, commitValue, step, xChannel]);
+  const setYValue = (0, _react.useCallback)((nextValue, complete = false) => {
+    commitValue(valueRef.current.withChannel(colorSpace, yChannel, (0, _utils2.snapColorChannel)(nextValue, step)), complete);
+  }, [colorSpace, commitValue, step, yChannel]);
+  const setChannelsFromPoint = (0, _react.useCallback)((x, y, complete = false) => {
+    const currentLayout = layoutRef.current;
+    if (isDisabledRef.current || !Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(currentLayout.width) || !Number.isFinite(currentLayout.height) || currentLayout.width <= 0 || currentLayout.height <= 0) {
+      return;
+    }
+    const visualXRatio = (0, _utils2.clampColorChannel)(x, 0, currentLayout.width) / currentLayout.width;
+    const xRatio = isRTL ? 1 - visualXRatio : visualXRatio;
+    const yRatio = 1 - (0, _utils2.clampColorChannel)(y, 0, currentLayout.height) / currentLayout.height;
+    const next = valueRef.current.withChannel(colorSpace, xChannel, xRatio * 100).withChannel(colorSpace, yChannel, yRatio * 100);
+    commitValue(next, complete);
+  }, [colorSpace, commitValue, isRTL, xChannel, yChannel]);
+  setChannelsFromPointRef.current = setChannelsFromPoint;
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (isDisabled) {
+      return;
+    }
+    const key = event.nativeEvent?.key ?? event.key;
+    const shiftKey = event.nativeEvent?.shiftKey ?? event.shiftKey;
+    const increment = shiftKey ? pageStep : step;
+    const currentX = valueRef.current.getChannel(colorSpace, xChannel);
+    const currentY = valueRef.current.getChannel(colorSpace, yChannel);
+    let handled = true;
+    if (key === 'ArrowLeft') {
+      setXValue(currentX + (isRTL ? increment : -increment), true);
+    } else if (key === 'ArrowRight') {
+      setXValue(currentX + (isRTL ? -increment : increment), true);
+    } else if (key === 'ArrowUp') {
+      setYValue(currentY + increment, true);
+    } else if (key === 'ArrowDown') {
+      setYValue(currentY - increment, true);
+    } else if (key === 'PageUp') {
+      setYValue(currentY + pageStep, true);
+    } else if (key === 'PageDown') {
+      setYValue(currentY - pageStep, true);
+    } else if (key === 'Home') {
+      setXValue(currentX + (isRTL ? pageStep : -pageStep), true);
+    } else if (key === 'End') {
+      setXValue(currentX + (isRTL ? -pageStep : pageStep), true);
+    } else {
+      handled = false;
+    }
+    if (handled) {
+      event.preventDefault?.();
+    }
+  }, [colorSpace, isDisabled, isRTL, pageStep, setXValue, setYValue, step, xChannel, yChannel]);
+  const panResponder = (0, _react.useMemo)(() => {
+    const updateFromEvent = (event, complete = false) => {
+      const point = getFinitePoint(event);
+      if (point) {
+        lastValidPointRef.current = point;
+      }
+      const resolvedPoint = point ?? lastValidPointRef.current;
+      if (resolvedPoint) {
+        setChannelsFromPointRef.current?.(resolvedPoint.x, resolvedPoint.y, complete);
+      }
+    };
+    return _reactNative.PanResponder.create({
+      onStartShouldSetPanResponder: () => !isDisabledRef.current,
+      onMoveShouldSetPanResponder: () => !isDisabledRef.current,
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true,
+      onPanResponderGrant: event => {
+        lastValidPointRef.current = null;
+        updateFromEvent(event);
+      },
+      onPanResponderMove: event => {
+        updateFromEvent(event);
+      },
+      onPanResponderRelease: event => {
+        updateFromEvent(event, true);
+        lastValidPointRef.current = null;
+      },
+      onPanResponderTerminate: event => {
+        updateFromEvent(event, true);
+        lastValidPointRef.current = null;
+      }
+    });
+  }, []);
+  const setLayout = (0, _react.useCallback)(next => {
+    setLayoutState(previous => previous.width === next.width && previous.height === next.height ? previous : next);
+  }, []);
+  const setThumbSize = (0, _react.useCallback)(next => {
+    setThumbSizeState(previous => previous.width === next.width && previous.height === next.height ? previous : next);
+  }, []);
+  const handleLayout = (0, _react.useCallback)(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setLayout({
+      width,
+      height
+    });
+    onLayout?.(event);
+  }, [onLayout, setLayout]);
+  const xValue = value.getChannel(colorSpace, xChannel);
+  const yValue = value.getChannel(colorSpace, yChannel);
+  const contextValue = (0, _react.useMemo)(() => ({
+    value,
+    xValue,
+    yValue,
+    xPercent: (0, _utils2.clampColorChannel)(xValue),
+    yPercent: (0, _utils2.clampColorChannel)(yValue),
+    layout,
+    thumbSize,
+    isRTL,
+    isDisabled,
+    step,
+    pageStep,
+    setLayout,
+    setThumbSize,
+    setChannelsFromPoint,
+    setXValue,
+    setYValue,
+    handleKeyDown
+  }), [handleKeyDown, isDisabled, isRTL, layout, pageStep, setChannelsFromPoint, setLayout, setThumbSize, setXValue, setYValue, step, thumbSize, value, xValue, yValue]);
+  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ColorAreaProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Comp, {
+      ref: ref,
+      ...props,
+      ...panResponder.panHandlers,
+      onLayout: handleLayout,
+      role: _reactNative.Platform.OS === 'web' ? 'group' : undefined,
+      "aria-label": props['aria-label'] ?? accessibilityLabel,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+        disabled: isDisabled,
+        colorSpace,
+        xChannel,
+        yChannel
+      })),
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorAreaAccessibility.ColorAreaAccessibility, {
+        accessibilityLabel: accessibilityLabel
+      })]
+    })
+  });
+});
+ColorAreaRoot.displayName = 'ColorAreaRoot';
+//# sourceMappingURL=ColorAreaRoot.js.map

package/lib/commonjs/color-area/ColorAreaRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_color","_colorPicker","_slot","_dataAttributes","_ColorAreaAccessibility","_context","_utils2","_jsxRuntime","createDefaultColor","color","parseColor","Error","DEFAULT_COLOR","EMPTY_LAYOUT","width","height","getFinitePoint","event","locationX","x","locationY","y","nativeEvent","Number","isFinite","ColorAreaRoot","exports","forwardRef","asChild","value","valueProp","defaultValue","onValueChange","onValueChangeComplete","colorSpace","xChannel","yChannel","step","pageStep","isRTL","I18nManager","isDisabled","accessibilityLabel","children","onLayout","props","ref","picker","useOptionalColorPickerContext","usesPickerContext","undefined","localValue","setLocalValue","useControllableState","prop","defaultProp","onChange","layout","setLayoutState","useState","thumbSize","setThumbSizeState","valueRef","useRef","current","layoutRef","isDisabledRef","setChannelsFromPointRef","lastValidPointRef","commitValue","useCallback","next","complete","setXValue","nextValue","withChannel","snapColorChannel","setYValue","setChannelsFromPoint","currentLayout","visualXRatio","clampColorChannel","xRatio","yRatio","handleKeyDown","key","shiftKey","increment","currentX","getChannel","currentY","handled","preventDefault","panResponder","useMemo","updateFromEvent","point","resolvedPoint","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderTerminationRequest","onShouldBlockNativeResponder","onPanResponderGrant","onPanResponderMove","onPanResponderRelease","onPanResponderTerminate","setLayout","previous","setThumbSize","handleLayout","xValue","yValue","contextValue","xPercent","yPercent","Comp","Slot","View","jsx","ColorAreaProvider","jsxs","panHandlers","role","Platform","OS","accessibilityState","disabled","mergeDataAttributes","dataAttributes","ColorAreaAccessibility","displayName"],"sourceRoot":"../../../src","sources":["color-area/ColorAreaRoot.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/color-area/ColorAreaThumb.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorAreaThumb = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _slot = require("../slot");
+var _dataAttributes = require("../utils/dataAttributes");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const ColorAreaThumb = exports.ColorAreaThumb = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  style,
+  onLayout,
+  children,
+  ...props
+}, ref) => {
+  const {
+    xPercent,
+    yPercent,
+    layout,
+    thumbSize,
+    isRTL,
+    setThumbSize
+  } = (0, _context.useColorAreaContext)();
+  const positionStyle = (0, _react.useMemo)(() => {
+    const visualXPercent = isRTL ? 100 - xPercent : xPercent;
+    const translateX = visualXPercent / 100 * layout.width - thumbSize.width / 2;
+    const translateY = (100 - yPercent) / 100 * layout.height - thumbSize.height / 2;
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      pointerEvents: 'none',
+      transform: [{
+        translateX
+      }, {
+        translateY
+      }]
+    };
+  }, [isRTL, layout.height, layout.width, thumbSize.height, thumbSize.width, xPercent, yPercent]);
+  const handleLayout = (0, _react.useCallback)(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setThumbSize({
+      width,
+      height
+    });
+    onLayout?.(event);
+  }, [onLayout, setThumbSize]);
+  const Comp = asChild ? _slot.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    ...props,
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    onLayout: handleLayout,
+    style: [positionStyle, style],
+    ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+      slot: 'color-area-thumb'
+    })),
+    children: children
+  });
+});
+ColorAreaThumb.displayName = 'ColorAreaThumb';
+//# sourceMappingURL=ColorAreaThumb.js.map

package/lib/commonjs/color-area/ColorAreaThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_slot","_dataAttributes","_context","_jsxRuntime","ColorAreaThumb","exports","forwardRef","asChild","style","onLayout","children","props","ref","xPercent","yPercent","layout","thumbSize","isRTL","setThumbSize","useColorAreaContext","positionStyle","useMemo","visualXPercent","translateX","width","translateY","height","position","top","left","pointerEvents","transform","handleLayout","useCallback","event","nativeEvent","Comp","Slot","View","jsx","accessible","accessibilityElementsHidden","importantForAccessibility","mergeDataAttributes","dataAttributes","slot","displayName"],"sourceRoot":"../../../src","sources":["color-area/ColorAreaThumb.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAgD,IAAAK,WAAA,GAAAL,OAAA;AAKzC,MAAMM,cAAc,GAAAC,OAAA,CAAAD,cAAA,gBAAG,IAAAE,iBAAU,EACtC,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACzD,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC;EAAa,CAAC,GAAG,IAAAC,4BAAmB,EAAC,CAAC;EAE5F,MAAMC,aAAa,GAAG,IAAAC,cAAO,EAAY,MAAM;IAC7C,MAAMC,cAAc,GAAGL,KAAK,GAAG,GAAG,GAAGJ,QAAQ,GAAGA,QAAQ;IACxD,MAAMU,UAAU,GAAID,cAAc,GAAG,GAAG,GAAIP,MAAM,CAACS,KAAK,GAAGR,SAAS,CAACQ,KAAK,GAAG,CAAC;IAC9E,MAAMC,UAAU,GAAI,CAAC,GAAG,GAAGX,QAAQ,IAAI,GAAG,GAAIC,MAAM,CAACW,MAAM,GAAGV,SAAS,CAACU,MAAM,GAAG,CAAC;IAElF,OAAO;MACLC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,CAAC;MACNC,IAAI,EAAE,CAAC;MACPC,aAAa,EAAE,MAAM;MACrBC,SAAS,EAAE,CAAC;QAAER;MAAW,CAAC,EAAE;QAAEE;MAAW,CAAC;IAC5C,CAAC;EACH,CAAC,EAAE,CAACR,KAAK,EAAEF,MAAM,CAACW,MAAM,EAAEX,MAAM,CAACS,KAAK,EAAER,SAAS,CAACU,MAAM,EAAEV,SAAS,CAACQ,KAAK,EAAEX,QAAQ,EAAEC,QAAQ,CAAC,CAAC;EAE/F,MAAMkB,YAAY,GAAG,IAAAC,kBAAW,EAC7BC,KAAwB,IAAK;IAC5B,MAAM;MAAEV,KAAK;MAAEE;IAAO,CAAC,GAAGQ,KAAK,CAACC,WAAW,CAACpB,MAAM;IAClDG,YAAY,CAAC;MAAEM,KAAK;MAAEE;IAAO,CAAC,CAAC;IAC/BjB,QAAQ,GAAGyB,KAAK,CAAC;EACnB,CAAC,EACD,CAACzB,QAAQ,EAAES,YAAY,CACzB,CAAC;EAED,MAAMkB,IAAI,GAAG7B,OAAO,GAAG8B,UAAI,GAAGC,iBAAI;EAElC,oBACE,IAAAnC,WAAA,CAAAoC,GAAA,EAACH,IAAI;IACHxB,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IACT6B,UAAU,EAAE,KAAM;IAClBC,2BAA2B;IAC3BC,yBAAyB,EAAC,qBAAqB;IAC/CjC,QAAQ,EAAEuB,YAAa;IACvBxB,KAAK,EAAE,CAACY,aAAa,EAAEZ,KAAK,CAAE;IAAA,GAC1B,IAAAmC,mCAAmB,EAAChC,KAAK,EAAE,IAAAiC,8BAAc,EAAC;MAAEC,IAAI,EAAE;IAAmB,CAAC,CAAC,CAAC;IAAAnC,QAAA,EAE3EA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDN,cAAc,CAAC0C,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/lib/commonjs/color-area/context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorAreaContext = exports.ColorAreaProvider = void 0;
+var _utils = require("@cdx-ui/utils");
+const [ColorAreaProvider, useColorAreaContext] = (0, _utils.createContext)('ColorAreaContext');
+exports.useColorAreaContext = useColorAreaContext;
+exports.ColorAreaProvider = ColorAreaProvider;
+//# sourceMappingURL=context.js.map

package/lib/commonjs/color-area/context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","ColorAreaProvider","useColorAreaContext","createContext","exports"],"sourceRoot":"../../../src","sources":["color-area/context.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAM,CAACC,iBAAiB,EAAEC,mBAAmB,CAAC,GACnD,IAAAC,oBAAa,EAAwB,kBAAkB,CAAC;AAACC,OAAA,CAAAF,mBAAA,GAAAA,mBAAA;AAAAE,OAAA,CAAAH,iBAAA,GAAAA,iBAAA","ignoreList":[]}