@cdx-ui/primitives 0.1.7 → 0.2.1

package/lib/commonjs/color-slider/ColorSliderThumb.js

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorSliderThumb = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _utils = require("@cdx-ui/utils");
+var _focus = require("@react-native-aria/focus");
+var _interactions = require("@react-native-aria/interactions");
+var _slot = require("../slot");
+var _useSliderPointer = require("../slider/useSliderPointer");
+var _utils2 = require("../slider/utils");
+var _dataAttributes = require("../utils/dataAttributes");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const ColorSliderThumb = exports.ColorSliderThumb = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  style,
+  accessibilityLabel: accessibilityLabelProp,
+  onLayout,
+  onFocus,
+  onBlur,
+  onHoverIn,
+  onHoverOut,
+  children,
+  ...props
+}, ref) => {
+  const {
+    channel,
+    channelValue,
+    valueLabel,
+    min,
+    max,
+    step,
+    pageStep,
+    percent,
+    orientation,
+    isDisabled,
+    isDragging,
+    layout,
+    thumbSize,
+    accessibilityLabel: rootAccessibilityLabel,
+    setThumbSize,
+    setIsDragging,
+    setChannelValue,
+    setValueFromRatio
+  } = (0, _context.useColorSliderContext)();
+  const {
+    focusProps,
+    isFocused
+  } = (0, _focus.useFocus)();
+  const {
+    focusProps: focusRingProps,
+    isFocusVisible
+  } = (0, _focus.useFocusRing)();
+  const {
+    hoverProps,
+    isHovered
+  } = (0, _interactions.useHover)();
+  const percentRef = (0, _react.useRef)(percent);
+  percentRef.current = percent;
+  const dragStartRatioRef = (0, _react.useRef)(0);
+  const lastRatioRef = (0, _react.useRef)(percent / 100);
+  const orientationRef = (0, _react.useRef)(orientation);
+  orientationRef.current = orientation;
+  const layoutRef = (0, _react.useRef)(layout);
+  layoutRef.current = layout;
+  const thumbSizeRef = (0, _react.useRef)(thumbSize);
+  thumbSizeRef.current = thumbSize;
+  const isDisabledRef = (0, _react.useRef)(isDisabled);
+  isDisabledRef.current = isDisabled;
+  const setIsDraggingRef = (0, _react.useRef)(setIsDragging);
+  setIsDraggingRef.current = setIsDragging;
+  const setValueFromRatioRef = (0, _react.useRef)(setValueFromRatio);
+  setValueFromRatioRef.current = setValueFromRatio;
+  const thumbAxisSize = orientation === 'horizontal' ? thumbSize.width : thumbSize.height;
+  const {
+    startDrag
+  } = (0, _useSliderPointer.useWebSliderDrag)({
+    isDisabled,
+    setIsDragging,
+    setValueFromRatio,
+    trackLayout: layout,
+    orientation,
+    thumbSize: thumbAxisSize
+  });
+  const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => !isDisabledRef.current,
+    onMoveShouldSetPanResponder: () => !isDisabledRef.current,
+    onPanResponderTerminationRequest: () => false,
+    onShouldBlockNativeResponder: () => true,
+    onPanResponderGrant: () => {
+      if (isDisabledRef.current) {
+        return;
+      }
+      setIsDraggingRef.current(true);
+      dragStartRatioRef.current = percentRef.current / 100;
+      lastRatioRef.current = dragStartRatioRef.current;
+    },
+    onPanResponderMove: (_event, gestureState) => {
+      const currentLayout = layoutRef.current;
+      if (!currentLayout) {
+        return;
+      }
+      const isHorizontal = orientationRef.current === 'horizontal';
+      const trackSize = isHorizontal ? currentLayout.width : currentLayout.height;
+      const currentThumbSize = isHorizontal ? thumbSizeRef.current.width : thumbSizeRef.current.height;
+      const travel = (0, _utils2.getThumbTravel)(trackSize, currentThumbSize);
+      if (travel <= 0) {
+        return;
+      }
+      const delta = isHorizontal ? gestureState.dx : -gestureState.dy;
+      const nextRatio = (0, _utils2.clamp)(dragStartRatioRef.current + delta / travel, 0, 1);
+      lastRatioRef.current = nextRatio;
+      setValueFromRatioRef.current(nextRatio);
+    },
+    onPanResponderRelease: () => {
+      setIsDraggingRef.current(false);
+      setValueFromRatioRef.current(lastRatioRef.current, true);
+    },
+    onPanResponderTerminate: () => {
+      setIsDraggingRef.current(false);
+      setValueFromRatioRef.current(lastRatioRef.current, true);
+    }
+  }), []);
+  const positionStyle = (0, _react.useMemo)(() => {
+    const trackWidth = layout?.width ?? 0;
+    const trackHeight = layout?.height ?? 0;
+    if (orientation === 'vertical') {
+      return {
+        position: 'absolute',
+        left: '50%',
+        bottom: (0, _utils2.percentToThumbOffset)(percent, trackHeight, thumbSize.height),
+        marginLeft: -thumbSize.width / 2
+      };
+    }
+    return {
+      position: 'absolute',
+      top: '50%',
+      left: (0, _utils2.percentToThumbOffset)(percent, trackWidth, thumbSize.width),
+      transform: [{
+        translateY: -thumbSize.height / 2
+      }]
+    };
+  }, [layout, orientation, percent, thumbSize.height, thumbSize.width]);
+  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;
+    let next = channelValue;
+    let handled = true;
+    if (key === 'ArrowUp' || key === 'ArrowRight') {
+      next += increment;
+    } else if (key === 'ArrowDown' || key === 'ArrowLeft') {
+      next -= increment;
+    } else if (key === 'PageUp') {
+      next += pageStep;
+    } else if (key === 'PageDown') {
+      next -= pageStep;
+    } else if (key === 'Home') {
+      next = min;
+    } else if (key === 'End') {
+      next = max;
+    } else {
+      handled = false;
+    }
+    if (handled) {
+      event.preventDefault?.();
+      setChannelValue(next, true);
+    }
+  }, [channelValue, isDisabled, max, min, pageStep, setChannelValue, step]);
+  const handleAccessibilityAction = (0, _react.useCallback)(event => {
+    if (event.nativeEvent.actionName === 'increment') {
+      setChannelValue(channelValue + step, true);
+    } else if (event.nativeEvent.actionName === 'decrement') {
+      setChannelValue(channelValue - step, true);
+    }
+  }, [channelValue, setChannelValue, step]);
+  const handleLayout = (0, _react.useCallback)(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setThumbSize({
+      width,
+      height
+    });
+    onLayout?.(event);
+  }, [onLayout, setThumbSize]);
+  const isWeb = _reactNative.Platform.OS === 'web';
+  const Comp = asChild ? _slot.Slot : isWeb ? _reactNative.Pressable : _reactNative.View;
+  const accessibilityLabel = accessibilityLabelProp ?? rootAccessibilityLabel ?? channel;
+  const handlePointerDown = (0, _react.useCallback)(event => {
+    if (_reactNative.Platform.OS !== 'web' || isDisabled) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const {
+      x,
+      y
+    } = (0, _useSliderPointer.getPointerCoords)(event.nativeEvent);
+    startDrag(x, y, percentRef.current / 100);
+  }, [isDisabled, startDrag]);
+  const pointerProps = _reactNative.Platform.OS === 'web' ? {
+    onPointerDown: handlePointerDown,
+    disabled: isDisabled
+  } : panResponder.panHandlers;
+  const webAccessibilityProps = isWeb ? {
+    onKeyDown: handleKeyDown,
+    tabIndex: isDisabled ? -1 : 0,
+    role: 'slider',
+    'aria-valuemin': min,
+    'aria-valuemax': max,
+    'aria-valuenow': channelValue,
+    'aria-valuetext': valueLabel,
+    'aria-orientation': orientation,
+    'aria-disabled': isDisabled
+  } : {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    ...props,
+    ...pointerProps,
+    ...webAccessibilityProps,
+    onLayout: handleLayout,
+    onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onFocus, focusProps.onFocus), focusRingProps.onFocus),
+    onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onBlur, focusProps.onBlur), focusRingProps.onBlur),
+    onHoverIn: (0, _utils.composeEventHandlers)(onHoverIn, hoverProps.onHoverIn),
+    onHoverOut: (0, _utils.composeEventHandlers)(onHoverOut, hoverProps.onHoverOut),
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityValue: {
+      min,
+      max,
+      now: Math.round(channelValue),
+      text: valueLabel
+    },
+    accessibilityState: {
+      disabled: isDisabled
+    },
+    accessibilityActions: [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: handleAccessibilityAction,
+    style: [positionStyle, style],
+    ...(0, _dataAttributes.mergeDataAttributes)(props, (0, _dataAttributes.dataAttributes)({
+      slot: 'color-slider-thumb',
+      disabled: isDisabled,
+      hover: isHovered,
+      focus: isFocused,
+      focusVisible: isFocusVisible,
+      dragging: isDragging
+    })),
+    children: children
+  });
+});
+ColorSliderThumb.displayName = 'ColorSliderThumb';
+//# sourceMappingURL=ColorSliderThumb.js.map

package/lib/commonjs/color-slider/ColorSliderThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_utils","_focus","_interactions","_slot","_useSliderPointer","_utils2","_dataAttributes","_context","_jsxRuntime","ColorSliderThumb","exports","forwardRef","asChild","style","accessibilityLabel","accessibilityLabelProp","onLayout","onFocus","onBlur","onHoverIn","onHoverOut","children","props","ref","channel","channelValue","valueLabel","min","max","step","pageStep","percent","orientation","isDisabled","isDragging","layout","thumbSize","rootAccessibilityLabel","setThumbSize","setIsDragging","setChannelValue","setValueFromRatio","useColorSliderContext","focusProps","isFocused","useFocus","focusRingProps","isFocusVisible","useFocusRing","hoverProps","isHovered","useHover","percentRef","useRef","current","dragStartRatioRef","lastRatioRef","orientationRef","layoutRef","thumbSizeRef","isDisabledRef","setIsDraggingRef","setValueFromRatioRef","thumbAxisSize","width","height","startDrag","useWebSliderDrag","trackLayout","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderTerminationRequest","onShouldBlockNativeResponder","onPanResponderGrant","onPanResponderMove","_event","gestureState","currentLayout","isHorizontal","trackSize","currentThumbSize","travel","getThumbTravel","delta","dx","dy","nextRatio","clamp","onPanResponderRelease","onPanResponderTerminate","positionStyle","trackWidth","trackHeight","position","left","bottom","percentToThumbOffset","marginLeft","top","transform","translateY","handleKeyDown","useCallback","event","key","nativeEvent","shiftKey","increment","next","handled","preventDefault","handleAccessibilityAction","actionName","handleLayout","isWeb","Platform","OS","Comp","Slot","Pressable","View","handlePointerDown","stopPropagation","x","y","getPointerCoords","pointerProps","onPointerDown","disabled","panHandlers","webAccessibilityProps","onKeyDown","tabIndex","role","jsx","composeEventHandlers","accessibilityRole","accessibilityValue","now","Math","round","text","accessibilityState","accessibilityActions","name","onAccessibilityAction","mergeDataAttributes","dataAttributes","slot","hover","focus","focusVisible","dragging","displayName"],"sourceRoot":"../../../src","sources":["color-slider/ColorSliderThumb.tsx"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","ColorSliderProvider","useColorSliderContext","createContext","exports"],"sourceRoot":"../../../src","sources":["color-slider/context.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAM,CAACC,mBAAmB,EAAEC,qBAAqB,CAAC,GACvD,IAAAC,oBAAa,EAA0B,oBAAoB,CAAC;AAACC,OAAA,CAAAF,qBAAA,GAAAA,qBAAA;AAAAE,OAAA,CAAAH,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/lib/commonjs/color-slider/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ColorSliderRail", {
+  enumerable: true,
+  get: function () {
+    return _ColorSliderRail.ColorSliderRail;
+  }
+});
+Object.defineProperty(exports, "ColorSliderRoot", {
+  enumerable: true,
+  get: function () {
+    return _ColorSliderRoot.ColorSliderRoot;
+  }
+});
+Object.defineProperty(exports, "ColorSliderThumb", {
+  enumerable: true,
+  get: function () {
+    return _ColorSliderThumb.ColorSliderThumb;
+  }
+});
+Object.defineProperty(exports, "useColorSliderContext", {
+  enumerable: true,
+  get: function () {
+    return _context.useColorSliderContext;
+  }
+});
+var _ColorSliderRoot = require("./ColorSliderRoot");
+var _ColorSliderRail = require("./ColorSliderRail");
+var _ColorSliderThumb = require("./ColorSliderThumb");
+var _context = require("./context");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_ColorSliderRoot","require","_ColorSliderRail","_ColorSliderThumb","_context"],"sourceRoot":"../../../src","sources":["color-slider/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA","ignoreList":[]}

package/lib/commonjs/color-slider/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

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

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

package/lib/commonjs/color-slider/utils.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clampColorSliderValue = clampColorSliderValue;
+exports.formatColorSliderValue = formatColorSliderValue;
+exports.getColorSliderChannelValue = getColorSliderChannelValue;
+exports.getColorSliderGradientColors = getColorSliderGradientColors;
+exports.getColorSliderRange = getColorSliderRange;
+exports.withColorSliderChannel = withColorSliderChannel;
+const HUE_STOPS = [0, 60, 120, 180, 240, 300, 360];
+function clampColorSliderValue(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function getColorSliderRange({
+  colorSpace,
+  channel
+}) {
+  if (colorSpace === 'rgb') {
+    return {
+      min: 0,
+      max: 255
+    };
+  }
+  if (channel === 'hue') {
+    return {
+      min: 0,
+      max: 360
+    };
+  }
+  return {
+    min: 0,
+    max: 100
+  };
+}
+function getColorSliderChannelValue(color, configuration) {
+  if (configuration.colorSpace === 'rgb') {
+    return color.getChannel('rgb', configuration.channel);
+  }
+  if (configuration.colorSpace === 'hsl') {
+    return color.getChannel('hsl', configuration.channel);
+  }
+  return color.getChannel('hsb', configuration.channel);
+}
+function withColorSliderChannel(color, configuration, value) {
+  if (configuration.colorSpace === 'rgb') {
+    return color.withChannel('rgb', configuration.channel, value);
+  }
+  if (configuration.colorSpace === 'hsl') {
+    return color.withChannel('hsl', configuration.channel, value);
+  }
+  return color.withChannel('hsb', configuration.channel, value);
+}
+function formatColorSliderValue(value, configuration) {
+  const formatted = Number.isInteger(value) ? String(value) : value.toFixed(1);
+  if (configuration.channel === 'hue') {
+    return `${formatted}°`;
+  }
+  if (configuration.colorSpace !== 'rgb') {
+    return `${formatted}%`;
+  }
+  return formatted;
+}
+function getColorSliderGradientColors(color, configuration) {
+  if (configuration.channel === 'hue') {
+    return HUE_STOPS.map(value => withColorSliderChannel(color, configuration, value).toString('hex'));
+  }
+  const {
+    min,
+    max
+  } = getColorSliderRange(configuration);
+  return [withColorSliderChannel(color, configuration, min).toString('hex'), withColorSliderChannel(color, configuration, max).toString('hex')];
+}
+//# sourceMappingURL=utils.js.map

package/lib/commonjs/color-slider/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HUE_STOPS","clampColorSliderValue","value","min","max","Math","getColorSliderRange","colorSpace","channel","getColorSliderChannelValue","color","configuration","getChannel","withColorSliderChannel","withChannel","formatColorSliderValue","formatted","Number","isInteger","String","toFixed","getColorSliderGradientColors","map","toString"],"sourceRoot":"../../../src","sources":["color-slider/utils.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/color-swatch-picker/ColorSwatchPickerItem.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorSwatchPickerItem = void 0;
+var _react = require("react");
+var _radio = require("../radio");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const ColorSwatchPickerItem = exports.ColorSwatchPickerItem = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  color,
+  isDisabled,
+  disabled,
+  accessibilityLabel,
+  'aria-label': ariaLabelProp,
+  children,
+  ...props
+}, ref) => {
+  const {
+    registerColor
+  } = (0, _context.useColorSwatchPickerContext)();
+  const colorValue = color.toString('hex');
+  const label = ariaLabelProp ?? accessibilityLabel ?? colorValue;
+  const contextValue = (0, _react.useMemo)(() => ({
+    color
+  }), [color]);
+  (0, _react.useEffect)(() => registerColor(color), [color, registerColor]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ColorSwatchPickerItemProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.RadioRoot, {
+      ref: ref,
+      asChild: asChild,
+      value: colorValue,
+      isDisabled: !!(isDisabled || disabled),
+      disabled: disabled,
+      "aria-label": label,
+      accessibilityLabel: label,
+      ...props,
+      children: children
+    })
+  });
+});
+ColorSwatchPickerItem.displayName = 'ColorSwatchPickerItem';
+//# sourceMappingURL=ColorSwatchPickerItem.js.map

package/lib/commonjs/color-swatch-picker/ColorSwatchPickerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_radio","_context","_jsxRuntime","ColorSwatchPickerItem","exports","forwardRef","asChild","color","isDisabled","disabled","accessibilityLabel","ariaLabelProp","children","props","ref","registerColor","useColorSwatchPickerContext","colorValue","toString","label","contextValue","useMemo","useEffect","jsx","ColorSwatchPickerItemProvider","value","RadioRoot","displayName"],"sourceRoot":"../../../src","sources":["color-swatch-picker/ColorSwatchPickerItem.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAuF,IAAAG,WAAA,GAAAH,OAAA;AAOhF,MAAMI,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,gBAAG,IAAAE,iBAAU,EAI7C,CACE;EACEC,OAAO;EACPC,KAAK;EACLC,UAAU;EACVC,QAAQ;EACRC,kBAAkB;EAClB,YAAY,EAAEC,aAAa;EAC3BC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC;EAAc,CAAC,GAAG,IAAAC,oCAA2B,EAAC,CAAC;EACvD,MAAMC,UAAU,GAAGV,KAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;EACxC,MAAMC,KAAK,GAAGR,aAAa,IAAID,kBAAkB,IAAIO,UAAU;EAC/D,MAAMG,YAAY,GAAG,IAAAC,cAAO,EAAC,OAAO;IAAEd;EAAM,CAAC,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAExD,IAAAe,gBAAS,EAAC,MAAMP,aAAa,CAACR,KAAK,CAAC,EAAE,CAACA,KAAK,EAAEQ,aAAa,CAAC,CAAC;EAE7D,oBACE,IAAAb,WAAA,CAAAqB,GAAA,EAACtB,QAAA,CAAAuB,6BAA6B;IAACC,KAAK,EAAEL,YAAa;IAAAR,QAAA,eACjD,IAAAV,WAAA,CAAAqB,GAAA,EAACvB,MAAA,CAAA0B,SAAS;MACRZ,GAAG,EAAEA,GAAI;MACTR,OAAO,EAAEA,OAAQ;MACjBmB,KAAK,EAAER,UAAW;MAClBT,UAAU,EAAE,CAAC,EAAEA,UAAU,IAAIC,QAAQ,CAAE;MACvCA,QAAQ,EAAEA,QAAS;MACnB,cAAYU,KAAM;MAClBT,kBAAkB,EAAES,KAAM;MAAA,GACtBN,KAAK;MAAAD,QAAA,EAERA;IAAQ,CACA;EAAC,CACiB,CAAC;AAEpC,CACF,CAAC;AAEDT,qBAAqB,CAACwB,WAAW,GAAG,uBAAuB","ignoreList":[]}

package/lib/commonjs/color-swatch-picker/ColorSwatchPickerRoot.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorSwatchPickerRoot = void 0;
+var _react = require("react");
+var _utils = require("@cdx-ui/utils");
+var _radio = require("../radio");
+var _colorPicker = require("../color-picker");
+var _context = require("./context");
+var _jsxRuntime = require("react/jsx-runtime");
+const ColorSwatchPickerRoot = exports.ColorSwatchPickerRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  isDisabled,
+  accessibilityLabel,
+  children,
+  ...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,
+    onChange: onValueChange
+  });
+  const value = usesPickerContext ? picker.value : localValue;
+  const colorsRef = (0, _react.useRef)(new Map());
+  const registerColor = (0, _react.useCallback)(color => {
+    const key = color.toString('hex');
+    colorsRef.current.set(key, color);
+    return () => {
+      if (colorsRef.current.get(key) === color) {
+        colorsRef.current.delete(key);
+      }
+    };
+  }, []);
+  const handleValueChange = (0, _react.useCallback)(key => {
+    const color = colorsRef.current.get(key);
+    if (!color) {
+      return;
+    }
+    if (usesPickerContext) {
+      onValueChange?.(color);
+      picker.onValueChange(color);
+      return;
+    }
+    setLocalValue(color);
+  }, [onValueChange, picker, setLocalValue, usesPickerContext]);
+  const contextValue = (0, _react.useMemo)(() => ({
+    registerColor
+  }), [registerColor]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ColorSwatchPickerProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_radio.RadioGroup, {
+      ref: ref,
+      asChild: asChild,
+      value: value?.toString('hex'),
+      onChange: handleValueChange,
+      isDisabled: isDisabled,
+      "aria-label": props['aria-label'] ?? accessibilityLabel,
+      ...props,
+      children: children
+    })
+  });
+});
+ColorSwatchPickerRoot.displayName = 'ColorSwatchPickerRoot';
+//# sourceMappingURL=ColorSwatchPickerRoot.js.map

package/lib/commonjs/color-swatch-picker/ColorSwatchPickerRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_utils","_radio","_colorPicker","_context","_jsxRuntime","ColorSwatchPickerRoot","exports","forwardRef","asChild","value","valueProp","defaultValue","onValueChange","isDisabled","accessibilityLabel","children","props","ref","picker","useOptionalColorPickerContext","usesPickerContext","undefined","localValue","setLocalValue","useControllableState","prop","defaultProp","onChange","colorsRef","useRef","Map","registerColor","useCallback","color","key","toString","current","set","get","delete","handleValueChange","contextValue","useMemo","jsx","ColorSwatchPickerProvider","RadioGroup","displayName"],"sourceRoot":"../../../src","sources":["color-swatch-picker/ColorSwatchPickerRoot.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/color-swatch-picker/context.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorSwatchPickerContext = exports.ColorSwatchPickerProvider = exports.ColorSwatchPickerItemProvider = void 0;
+exports.useColorSwatchPickerItemContext = useColorSwatchPickerItemContext;
+var _react = require("react");
+var _utils = require("@cdx-ui/utils");
+const [ColorSwatchPickerProvider, useColorSwatchPickerContext] = (0, _utils.createContext)('ColorSwatchPickerContext');
+exports.useColorSwatchPickerContext = useColorSwatchPickerContext;
+exports.ColorSwatchPickerProvider = ColorSwatchPickerProvider;
+const ColorSwatchPickerItemContext = /*#__PURE__*/(0, _react.createContext)(null);
+const ColorSwatchPickerItemProvider = exports.ColorSwatchPickerItemProvider = ColorSwatchPickerItemContext.Provider;
+function useColorSwatchPickerItemContext() {
+  const context = (0, _react.useContext)(ColorSwatchPickerItemContext);
+  if (!context) {
+    throw new Error('ColorSwatchPicker item slots must be used within ColorSwatchPicker.Item');
+  }
+  return context;
+}
+//# sourceMappingURL=context.js.map

package/lib/commonjs/color-swatch-picker/context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_utils","ColorSwatchPickerProvider","useColorSwatchPickerContext","createContext","exports","ColorSwatchPickerItemContext","createReactContext","ColorSwatchPickerItemProvider","Provider","useColorSwatchPickerItemContext","context","useContext","Error"],"sourceRoot":"../../../src","sources":["color-swatch-picker/context.tsx"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAGO,MAAM,CAACE,yBAAyB,EAAEC,2BAA2B,CAAC,GACnE,IAAAC,oBAAa,EAAgC,0BAA0B,CAAC;AAACC,OAAA,CAAAF,2BAAA,GAAAA,2BAAA;AAAAE,OAAA,CAAAH,yBAAA,GAAAA,yBAAA;AAE3E,MAAMI,4BAA4B,gBAAG,IAAAC,oBAAkB,EACrD,IACF,CAAC;AAEM,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAGF,4BAA4B,CAACG,QAAQ;AAE3E,SAASC,+BAA+BA,CAAA,EAAsC;EACnF,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACN,4BAA4B,CAAC;EAExD,IAAI,CAACK,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,yEAAyE,CAAC;EAC5F;EAEA,OAAOF,OAAO;AAChB","ignoreList":[]}

package/lib/commonjs/color-swatch-picker/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ColorSwatchPickerItem", {
+  enumerable: true,
+  get: function () {
+    return _ColorSwatchPickerItem.ColorSwatchPickerItem;
+  }
+});
+Object.defineProperty(exports, "ColorSwatchPickerRoot", {
+  enumerable: true,
+  get: function () {
+    return _ColorSwatchPickerRoot.ColorSwatchPickerRoot;
+  }
+});
+Object.defineProperty(exports, "useColorSwatchPickerContext", {
+  enumerable: true,
+  get: function () {
+    return _context.useColorSwatchPickerContext;
+  }
+});
+Object.defineProperty(exports, "useColorSwatchPickerItemContext", {
+  enumerable: true,
+  get: function () {
+    return _context.useColorSwatchPickerItemContext;
+  }
+});
+var _ColorSwatchPickerRoot = require("./ColorSwatchPickerRoot");
+var _ColorSwatchPickerItem = require("./ColorSwatchPickerItem");
+var _context = require("./context");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/color-swatch-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ColorSwatchPickerRoot","require","_ColorSwatchPickerItem","_context"],"sourceRoot":"../../../src","sources":["color-swatch-picker/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA","ignoreList":[]}

package/lib/commonjs/color-swatch-picker/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/color-swatch-picker/types.js.map

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