@cdx-ui/primitives 0.1.6 → 0.2.0

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

@@ -0,0 +1,236 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { I18nManager, PanResponder, Platform, View } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { parseColor } from '../color';
+import { useOptionalColorPickerContext } from '../color-picker';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ColorAreaAccessibility } from './ColorAreaAccessibility';
+import { ColorAreaProvider } from './context';
+import { clampColorChannel, snapColorChannel } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function createDefaultColor() {
+  const 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;
+}
+export const ColorAreaRoot = /*#__PURE__*/forwardRef(({
+  asChild,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  onValueChangeComplete,
+  colorSpace = 'hsb',
+  xChannel = 'saturation',
+  yChannel = 'brightness',
+  step = 1,
+  pageStep = 10,
+  isRTL = I18nManager.isRTL,
+  isDisabled = false,
+  accessibilityLabel,
+  children,
+  onLayout,
+  ...props
+}, ref) => {
+  const picker = useOptionalColorPickerContext();
+  const usesPickerContext = picker !== null && valueProp === undefined && defaultValue === undefined;
+  const [localValue, setLocalValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue ?? DEFAULT_COLOR,
+    onChange: onValueChange
+  });
+  const value = (usesPickerContext ? picker.value : localValue) ?? DEFAULT_COLOR;
+  const [layout, setLayoutState] = useState(EMPTY_LAYOUT);
+  const [thumbSize, setThumbSizeState] = useState(EMPTY_LAYOUT);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  const isDisabledRef = useRef(isDisabled);
+  isDisabledRef.current = isDisabled;
+  const setChannelsFromPointRef = useRef(undefined);
+  const lastValidPointRef = useRef(null);
+  const commitValue = 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 = useCallback((nextValue, complete = false) => {
+    commitValue(valueRef.current.withChannel(colorSpace, xChannel, snapColorChannel(nextValue, step)), complete);
+  }, [colorSpace, commitValue, step, xChannel]);
+  const setYValue = useCallback((nextValue, complete = false) => {
+    commitValue(valueRef.current.withChannel(colorSpace, yChannel, snapColorChannel(nextValue, step)), complete);
+  }, [colorSpace, commitValue, step, yChannel]);
+  const setChannelsFromPoint = 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 = clampColorChannel(x, 0, currentLayout.width) / currentLayout.width;
+    const xRatio = isRTL ? 1 - visualXRatio : visualXRatio;
+    const yRatio = 1 - 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 = 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 = 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 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 = useCallback(next => {
+    setLayoutState(previous => previous.width === next.width && previous.height === next.height ? previous : next);
+  }, []);
+  const setThumbSize = useCallback(next => {
+    setThumbSizeState(previous => previous.width === next.width && previous.height === next.height ? previous : next);
+  }, []);
+  const handleLayout = 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 = useMemo(() => ({
+    value,
+    xValue,
+    yValue,
+    xPercent: clampColorChannel(xValue),
+    yPercent: 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 : View;
+  return /*#__PURE__*/_jsx(ColorAreaProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsxs(Comp, {
+      ref: ref,
+      ...props,
+      ...panResponder.panHandlers,
+      onLayout: handleLayout,
+      role: Platform.OS === 'web' ? 'group' : undefined,
+      "aria-label": props['aria-label'] ?? accessibilityLabel,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      ...mergeDataAttributes(props, dataAttributes({
+        disabled: isDisabled,
+        colorSpace,
+        xChannel,
+        yChannel
+      })),
+      children: [children, /*#__PURE__*/_jsx(ColorAreaAccessibility, {
+        accessibilityLabel: accessibilityLabel
+      })]
+    })
+  });
+});
+ColorAreaRoot.displayName = 'ColorAreaRoot';
+//# sourceMappingURL=ColorAreaRoot.js.map

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

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

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

@@ -0,0 +1,67 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useColorAreaContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ColorAreaThumb = /*#__PURE__*/forwardRef(({
+  asChild,
+  style,
+  onLayout,
+  children,
+  ...props
+}, ref) => {
+  const {
+    xPercent,
+    yPercent,
+    layout,
+    thumbSize,
+    isRTL,
+    setThumbSize
+  } = useColorAreaContext();
+  const positionStyle = 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 = useCallback(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setThumbSize({
+      width,
+      height
+    });
+    onLayout?.(event);
+  }, [onLayout, setThumbSize]);
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    ...props,
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    onLayout: handleLayout,
+    style: [positionStyle, style],
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'color-area-thumb'
+    })),
+    children: children
+  });
+});
+ColorAreaThumb.displayName = 'ColorAreaThumb';
+//# sourceMappingURL=ColorAreaThumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","View","Slot","dataAttributes","mergeDataAttributes","useColorAreaContext","jsx","_jsx","ColorAreaThumb","asChild","style","onLayout","children","props","ref","xPercent","yPercent","layout","thumbSize","isRTL","setThumbSize","positionStyle","visualXPercent","translateX","width","translateY","height","position","top","left","pointerEvents","transform","handleLayout","event","nativeEvent","Comp","accessible","accessibilityElementsHidden","importantForAccessibility","slot","displayName"],"sourceRoot":"../../../src","sources":["color-area/ColorAreaThumb.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACxD,SAASC,IAAI,QAAgD,cAAc;AAC3E,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,yBAAyB;AAC7E,SAASC,mBAAmB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKhD,OAAO,MAAMC,cAAc,gBAAGV,UAAU,CACtC,CAAC;EAAEW,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,GAAGf,mBAAmB,CAAC,CAAC;EAE5F,MAAMgB,aAAa,GAAGrB,OAAO,CAAY,MAAM;IAC7C,MAAMsB,cAAc,GAAGH,KAAK,GAAG,GAAG,GAAGJ,QAAQ,GAAGA,QAAQ;IACxD,MAAMQ,UAAU,GAAID,cAAc,GAAG,GAAG,GAAIL,MAAM,CAACO,KAAK,GAAGN,SAAS,CAACM,KAAK,GAAG,CAAC;IAC9E,MAAMC,UAAU,GAAI,CAAC,GAAG,GAAGT,QAAQ,IAAI,GAAG,GAAIC,MAAM,CAACS,MAAM,GAAGR,SAAS,CAACQ,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,CAACN,KAAK,EAAEF,MAAM,CAACS,MAAM,EAAET,MAAM,CAACO,KAAK,EAAEN,SAAS,CAACQ,MAAM,EAAER,SAAS,CAACM,KAAK,EAAET,QAAQ,EAAEC,QAAQ,CAAC,CAAC;EAE/F,MAAMgB,YAAY,GAAGjC,WAAW,CAC7BkC,KAAwB,IAAK;IAC5B,MAAM;MAAET,KAAK;MAAEE;IAAO,CAAC,GAAGO,KAAK,CAACC,WAAW,CAACjB,MAAM;IAClDG,YAAY,CAAC;MAAEI,KAAK;MAAEE;IAAO,CAAC,CAAC;IAC/Bf,QAAQ,GAAGsB,KAAK,CAAC;EACnB,CAAC,EACD,CAACtB,QAAQ,EAAES,YAAY,CACzB,CAAC;EAED,MAAMe,IAAI,GAAG1B,OAAO,GAAGP,IAAI,GAAGD,IAAI;EAElC,oBACEM,IAAA,CAAC4B,IAAI;IACHrB,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IACTuB,UAAU,EAAE,KAAM;IAClBC,2BAA2B;IAC3BC,yBAAyB,EAAC,qBAAqB;IAC/C3B,QAAQ,EAAEqB,YAAa;IACvBtB,KAAK,EAAE,CAACW,aAAa,EAAEX,KAAK,CAAE;IAAA,GAC1BN,mBAAmB,CAACS,KAAK,EAAEV,cAAc,CAAC;MAAEoC,IAAI,EAAE;IAAmB,CAAC,CAAC,CAAC;IAAA3B,QAAA,EAE3EA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDJ,cAAc,CAACgC,WAAW,GAAG,gBAAgB","ignoreList":[]}

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

@@ -0,0 +1,5 @@
+"use strict";
+
+import { createContext } from '@cdx-ui/utils';
+export const [ColorAreaProvider, useColorAreaContext] = createContext('ColorAreaContext');
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","ColorAreaProvider","useColorAreaContext"],"sourceRoot":"../../../src","sources":["color-area/context.tsx"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,eAAe;AAG7C,OAAO,MAAM,CAACC,iBAAiB,EAAEC,mBAAmB,CAAC,GACnDF,aAAa,CAAwB,kBAAkB,CAAC","ignoreList":[]}

package/lib/module/color-area/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { ColorAreaRoot } from './ColorAreaRoot';
+export { ColorAreaThumb } from './ColorAreaThumb';
+export { useColorAreaContext } from './context';
+//# sourceMappingURL=index.js.map

package/lib/module/color-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ColorAreaRoot","ColorAreaThumb","useColorAreaContext"],"sourceRoot":"../../../src","sources":["color-area/index.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAiC,iBAAiB;AACxE,SAASC,cAAc,QAAkC,kBAAkB;AAC3E,SAASC,mBAAmB,QAAQ,WAAW","ignoreList":[]}

package/lib/module/color-area/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/color-area/types.js.map

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

package/lib/module/color-area/utils.js

@@ -0,0 +1,45 @@
+"use strict";
+
+export function clampColorChannel(value, min = 0, max = 100) {
+  if (!Number.isFinite(value)) {
+    return min;
+  }
+  return Math.min(max, Math.max(min, value));
+}
+export function snapColorChannel(value, step, min = 0, max = 100) {
+  const clamped = clampColorChannel(value, min, max);
+  const snapped = step > 0 ? min + Math.round((clamped - min) / step) * step : clamped;
+  return clampColorChannel(snapped, min, max);
+}
+function describeColor(color) {
+  const hue = clampColorChannel(color.getChannel('hsb', 'hue'), 0, 360);
+  const saturation = clampColorChannel(color.getChannel('hsb', 'saturation'));
+  const brightness = clampColorChannel(color.getChannel('hsb', 'brightness'));
+  if (brightness <= 10) {
+    return 'black';
+  }
+  if (saturation <= 10) {
+    if (brightness >= 90) {
+      return 'white';
+    }
+    return brightness < 45 ? 'dark gray' : brightness > 75 ? 'light gray' : 'gray';
+  }
+  const names = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple', 'magenta'];
+  const index = Math.round((hue % 360 + 360) % 360 / 45) % names.length;
+  const tone = brightness < 40 ? 'dark ' : brightness > 80 ? 'light ' : '';
+  const intensity = saturation > 75 ? 'vibrant ' : saturation < 40 ? 'muted ' : '';
+  return `${tone}${intensity}${names[index]}`;
+}
+export function colorAreaValueText(color, changedChannel) {
+  const saturation = Math.round(clampColorChannel(color.getChannel('hsb', 'saturation')));
+  const brightness = Math.round(clampColorChannel(color.getChannel('hsb', 'brightness')));
+  const colorName = describeColor(color);
+  if (changedChannel === 'saturation') {
+    return `Saturation ${String(saturation)}%, ${colorName}`;
+  }
+  if (changedChannel === 'brightness') {
+    return `Brightness ${String(brightness)}%, ${colorName}`;
+  }
+  return `Saturation ${String(saturation)}%, Brightness ${String(brightness)}%, ${colorName}`;
+}
+//# sourceMappingURL=utils.js.map

package/lib/module/color-area/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampColorChannel","value","min","max","Number","isFinite","Math","snapColorChannel","step","clamped","snapped","round","describeColor","color","hue","getChannel","saturation","brightness","names","index","length","tone","intensity","colorAreaValueText","changedChannel","colorName","String"],"sourceRoot":"../../../src","sources":["color-area/utils.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/color-field/ColorFieldInput.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import { forwardRef, useEffect, useState } from 'react';
+import { InputField } from '../input';
+import { useColorFieldContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ColorFieldInput = /*#__PURE__*/forwardRef(({
+  onChangeText,
+  onFocus,
+  onBlur,
+  editable,
+  keyboardType,
+  autoCapitalize = 'none',
+  autoCorrect = false,
+  ...props
+}, ref) => {
+  const {
+    value,
+    colorSpace,
+    disabled,
+    readOnly,
+    invalid,
+    required,
+    commitText,
+    formatValue
+  } = useColorFieldContext();
+  const [text, setText] = useState(formatValue);
+  const [isEditing, setIsEditing] = useState(false);
+  useEffect(() => {
+    if (!isEditing) {
+      setText(formatValue());
+    }
+  }, [formatValue, isEditing, value]);
+  return /*#__PURE__*/_jsx(InputField, {
+    ref: ref,
+    ...props,
+    value: text,
+    editable: editable ?? !(disabled || readOnly),
+    disabled: disabled,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isInvalid: invalid,
+    isRequired: required,
+    keyboardType: keyboardType ?? (colorSpace ? 'decimal-pad' : 'default'),
+    autoCapitalize: autoCapitalize,
+    autoCorrect: autoCorrect,
+    onChangeText: nextText => {
+      onChangeText?.(nextText);
+      setText(nextText);
+      commitText(nextText);
+    },
+    onFocus: event => {
+      setIsEditing(true);
+      onFocus?.(event);
+    },
+    onBlur: event => {
+      setIsEditing(false);
+      onBlur?.(event);
+    }
+  });
+});
+ColorFieldInput.displayName = 'ColorFieldInput';
+//# sourceMappingURL=ColorFieldInput.js.map

package/lib/module/color-field/ColorFieldInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useEffect","useState","InputField","useColorFieldContext","jsx","_jsx","ColorFieldInput","onChangeText","onFocus","onBlur","editable","keyboardType","autoCapitalize","autoCorrect","props","ref","value","colorSpace","disabled","readOnly","invalid","required","commitText","formatValue","text","setText","isEditing","setIsEditing","isDisabled","isReadOnly","isInvalid","isRequired","nextText","event","displayName"],"sourceRoot":"../../../src","sources":["color-field/ColorFieldInput.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAEvD,SAASC,UAAU,QAAQ,UAAU;AACrC,SAASC,oBAAoB,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKjD,OAAO,MAAMC,eAAe,gBAAGP,UAAU,CACvC,CACE;EACEQ,YAAY;EACZC,OAAO;EACPC,MAAM;EACNC,QAAQ;EACRC,YAAY;EACZC,cAAc,GAAG,MAAM;EACvBC,WAAW,GAAG,KAAK;EACnB,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,KAAK;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,UAAU;IAAEC;EAAY,CAAC,GACzFpB,oBAAoB,CAAC,CAAC;EACxB,MAAM,CAACqB,IAAI,EAAEC,OAAO,CAAC,GAAGxB,QAAQ,CAACsB,WAAW,CAAC;EAC7C,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EAEjDD,SAAS,CAAC,MAAM;IACd,IAAI,CAAC0B,SAAS,EAAE;MACdD,OAAO,CAACF,WAAW,CAAC,CAAC,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,WAAW,EAAEG,SAAS,EAAEV,KAAK,CAAC,CAAC;EAEnC,oBACEX,IAAA,CAACH,UAAU;IACTa,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IACTE,KAAK,EAAEQ,IAAK;IACZd,QAAQ,EAAEA,QAAQ,IAAI,EAAEQ,QAAQ,IAAIC,QAAQ,CAAE;IAC9CD,QAAQ,EAAEA,QAAS;IACnBU,UAAU,EAAEV,QAAS;IACrBW,UAAU,EAAEV,QAAS;IACrBW,SAAS,EAAEV,OAAQ;IACnBW,UAAU,EAAEV,QAAS;IACrBV,YAAY,EAAEA,YAAY,KAAKM,UAAU,GAAG,aAAa,GAAG,SAAS,CAAE;IACvEL,cAAc,EAAEA,cAAe;IAC/BC,WAAW,EAAEA,WAAY;IACzBN,YAAY,EAAGyB,QAAQ,IAAK;MAC1BzB,YAAY,GAAGyB,QAAQ,CAAC;MACxBP,OAAO,CAACO,QAAQ,CAAC;MACjBV,UAAU,CAACU,QAAQ,CAAC;IACtB,CAAE;IACFxB,OAAO,EAAGyB,KAAK,IAAK;MAClBN,YAAY,CAAC,IAAI,CAAC;MAClBnB,OAAO,GAAGyB,KAAK,CAAC;IAClB,CAAE;IACFxB,MAAM,EAAGwB,KAAK,IAAK;MACjBN,YAAY,CAAC,KAAK,CAAC;MACnBlB,MAAM,GAAGwB,KAAK,CAAC;IACjB;EAAE,CACH,CAAC;AAEN,CACF,CAAC;AAED3B,eAAe,CAAC4B,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/lib/module/color-field/ColorFieldRoot.js

@@ -0,0 +1,100 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { useControllableState, useFormControl } from '@cdx-ui/utils';
+import { useOptionalColorPickerContext } from '../color-picker';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ColorFieldProvider } from './context';
+import { formatColorFieldValue, parseColorFieldValue } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ColorFieldRoot = /*#__PURE__*/forwardRef(({
+  asChild,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  colorSpace,
+  channel,
+  isDisabled,
+  isReadOnly,
+  isInvalid,
+  isRequired,
+  children,
+  ...props
+}, ref) => {
+  const picker = useOptionalColorPickerContext();
+  const usesPickerContext = picker !== null && valueProp === undefined && defaultValue === undefined;
+  const [localValue, setLocalValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  const value = usesPickerContext ? picker.value : localValue;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const formControl = useFormControl({
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    isRequired
+  });
+  const disabled = Boolean(formControl.disabled);
+  const readOnly = Boolean(formControl.readOnly);
+  const invalid = Boolean(formControl['aria-invalid']);
+  const required = Boolean(formControl.required);
+  const configuration = useMemo(() => channel ? {
+    colorSpace,
+    channel
+  } : {
+    colorSpace: undefined,
+    channel: undefined
+  }, [channel, colorSpace]);
+  const commitText = useCallback(text => {
+    if (disabled || readOnly) {
+      return undefined;
+    }
+    const nextValue = parseColorFieldValue(text, valueRef.current, configuration);
+    if (!nextValue) {
+      return undefined;
+    }
+    valueRef.current = nextValue;
+    if (usesPickerContext) {
+      onValueChange?.(nextValue);
+      picker.onValueChange(nextValue);
+    } else {
+      setLocalValue(nextValue);
+    }
+    return nextValue;
+  }, [configuration, disabled, onValueChange, picker, readOnly, setLocalValue, usesPickerContext]);
+  const formatValue = useCallback(() => formatColorFieldValue(valueRef.current, configuration), [configuration]);
+  const contextValue = useMemo(() => ({
+    ...configuration,
+    value,
+    disabled,
+    readOnly,
+    invalid,
+    required,
+    commitText,
+    formatValue
+  }), [commitText, configuration, disabled, formatValue, invalid, readOnly, required, value]);
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(ColorFieldProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(Comp, {
+      ref: ref,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        disabled,
+        invalid,
+        readonly: readOnly,
+        required,
+        colorSpace: configuration.colorSpace,
+        channel: configuration.channel
+      })),
+      children: children
+    })
+  });
+});
+ColorFieldRoot.displayName = 'ColorFieldRoot';
+//# sourceMappingURL=ColorFieldRoot.js.map

package/lib/module/color-field/ColorFieldRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useMemo","useRef","View","useControllableState","useFormControl","useOptionalColorPickerContext","Slot","dataAttributes","mergeDataAttributes","ColorFieldProvider","formatColorFieldValue","parseColorFieldValue","jsx","_jsx","ColorFieldRoot","asChild","value","valueProp","defaultValue","onValueChange","colorSpace","channel","isDisabled","isReadOnly","isInvalid","isRequired","children","props","ref","picker","usesPickerContext","undefined","localValue","setLocalValue","prop","defaultProp","onChange","valueRef","current","formControl","disabled","Boolean","readOnly","invalid","required","configuration","commitText","text","nextValue","formatValue","contextValue","Comp","readonly","displayName"],"sourceRoot":"../../../src","sources":["color-field/ColorFieldRoot.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/color-field/context.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { createContext } from '@cdx-ui/utils';
+export const [ColorFieldProvider, useColorFieldContext] = createContext('ColorFieldContext');
+//# sourceMappingURL=context.js.map

package/lib/module/color-field/context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","ColorFieldProvider","useColorFieldContext"],"sourceRoot":"../../../src","sources":["color-field/context.tsx"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,eAAe;AAG7C,OAAO,MAAM,CAACC,kBAAkB,EAAEC,oBAAoB,CAAC,GACrDF,aAAa,CAAyB,mBAAmB,CAAC","ignoreList":[]}

package/lib/module/color-field/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { ColorFieldRoot } from './ColorFieldRoot';
+export { ColorFieldInput } from './ColorFieldInput';
+export { useColorFieldContext } from './context';
+//# sourceMappingURL=index.js.map

package/lib/module/color-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ColorFieldRoot","ColorFieldInput","useColorFieldContext"],"sourceRoot":"../../../src","sources":["color-field/index.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,kBAAkB;AAEjD,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,oBAAoB,QAAQ,WAAW","ignoreList":[]}

package/lib/module/color-field/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/color-field/types.js.map

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