@impulse-ui-native/color-picker 9.1.1 → 10.0.0

package/dist/components/alpha-input.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerAlphaInputProps } from '../types/color-picker.types.mjs';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerAlphaInput: react.MemoExoticComponent<({ label, }: ColorPickerAlphaInputProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerAlphaInput: react.MemoExoticComponent<({ label, }: ColorPickerAlphaInputProps) => react.JSX.Element>;
 
 export { ColorPickerAlphaInput };

package/dist/components/alpha-slider.d.mts

@@ -1,6 +1,5 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const ColorPickerAlphaSlider: react.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerAlphaSlider: react.MemoExoticComponent<() => react.JSX.Element>;
 
 export { ColorPickerAlphaSlider };

package/dist/components/apply.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerActionProps } from '../types/color-picker.types.mjs';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerApply: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerApply: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react.JSX.Element>;
 
 export { ColorPickerApply };

package/dist/components/cancel.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerActionProps } from '../types/color-picker.types.mjs';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerCancel: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerCancel: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react.JSX.Element>;
 
 export { ColorPickerCancel };

package/dist/components/channel-input.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerChannelInputProps } from '../types/color-picker.types.mjs';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerChannelInput: react.MemoExoticComponent<({ channel, label, }: ColorPickerChannelInputProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerChannelInput: react.MemoExoticComponent<({ channel, label, }: ColorPickerChannelInputProps) => react.JSX.Element>;
 
 export { ColorPickerChannelInput };

package/dist/components/color-picker.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerProps } from '../types/color-picker.types.mjs';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerComponent: react.MemoExoticComponent<({ showAlpha, showPresets, presets, presetsLabel, commitMode, ...props }: ColorPickerProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerComponent: react.MemoExoticComponent<({ showAlpha, showPresets, presets, presetsLabel, commitMode, ...props }: ColorPickerProps) => react.JSX.Element>;
 
 export { ColorPickerComponent };

package/dist/components/color-picker.js

@@ -25,6 +25,7 @@ const ColorPickerComponent = memo(function ColorPicker({
   const tokens = useComponentsTokens().colorPicker;
   const styles = useThemedStyles(themedStyles);
   const palette = presets ?? tokens.presets;
+  const hasPresets = showPresets && palette.length > 0;
   return /* @__PURE__ */ jsxs(ColorPickerRoot, { ...props, commitMode, children: [
     /* @__PURE__ */ jsx(Typography.Title4, { color: tokens.labelColor, children: "Choose color" }),
     /* @__PURE__ */ jsx(ColorPickerSpectrum, {}),
@@ -46,7 +47,7 @@ const ColorPickerComponent = memo(function ColorPicker({
       /* @__PURE__ */ jsx(View, { style: styles.field, children: /* @__PURE__ */ jsx(ColorPickerChannelInput, { channel: "g", label: "G" }) }),
       /* @__PURE__ */ jsx(View, { style: styles.field, children: /* @__PURE__ */ jsx(ColorPickerChannelInput, { channel: "b", label: "B" }) })
     ] }),
-    showPresets && palette.length > 0 ? /* @__PURE__ */ jsxs(View, { gap: tokens.presetsLabelGap, children: [
+    hasPresets ? /* @__PURE__ */ jsxs(View, { gap: tokens.presetsLabelGap, children: [
       /* @__PURE__ */ jsx(Typography.Label, { children: presetsLabel }),
       /* @__PURE__ */ jsx(View, { style: styles.palette, children: palette.map((preset, index) => /* @__PURE__ */ jsx(
         ColorPickerPresetEntry,

package/dist/components/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/color-picker.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ColorPickerProps } from \"../types\";\nimport { ColorPickerAlphaInput } from \"./alpha-input\";\nimport { ColorPickerAlphaSlider } from \"./alpha-slider\";\nimport { ColorPickerApply } from \"./apply\";\nimport { ColorPickerCancel } from \"./cancel\";\nimport { ColorPickerChannelInput } from \"./channel-input\";\nimport { ColorPickerHexInput } from \"./hex-input\";\nimport { ColorPickerHueSlider } from \"./hue-slider\";\nimport { ColorPickerPresetEntry } from \"./preset\";\nimport { ColorPickerPreview } from \"./preview\";\nimport { ColorPickerRoot } from \"./root\";\nimport { ColorPickerSpectrum } from \"./spectrum\";\n\nexport const ColorPickerComponent = memo(function ColorPicker({\n  showAlpha = true,\n  showPresets = true,\n  presets,\n  presetsLabel = \"Theme colors\",\n  commitMode = \"immediate\",\n  ...props\n}: ColorPickerProps) {\n  const tokens = useComponentsTokens().colorPicker;\n  const styles = useThemedStyles(themedStyles);\n  const palette = presets ?? tokens.presets;\n\n  return (\n    <ColorPickerRoot {...props} commitMode={commitMode}>\n      <Typography.Title4 color={tokens.labelColor}>\n        Choose color\n      </Typography.Title4>\n      <ColorPickerSpectrum />\n      <View gap={tokens.sliderLabelGap}>\n        <Typography.Caption>Hue</Typography.Caption>\n        <ColorPickerHueSlider />\n      </View>\n      {showAlpha ? (\n        <View gap={tokens.sliderLabelGap}>\n          <Typography.Caption>Opacity</Typography.Caption>\n          <ColorPickerAlphaSlider />\n        </View>\n      ) : null}\n      <View style={styles.row}>\n        <ColorPickerPreview />\n        <View style={styles.field}>\n          <ColorPickerHexInput label=\"HEX\" />\n        </View>\n        {showAlpha ? (\n          <View style={styles.alphaField}>\n            <ColorPickerAlphaInput label=\"Opacity (%)\" />\n          </View>\n        ) : null}\n      </View>\n      <View style={styles.row}>\n        <View style={styles.field}>\n          <ColorPickerChannelInput channel=\"r\" label=\"R\" />\n        </View>\n        <View style={styles.field}>\n          <ColorPickerChannelInput channel=\"g\" label=\"G\" />\n        </View>\n        <View style={styles.field}>\n          <ColorPickerChannelInput channel=\"b\" label=\"B\" />\n        </View>\n      </View>\n      {showPresets && palette.length > 0 ? (\n        <View gap={tokens.presetsLabelGap}>\n          <Typography.Label>{presetsLabel}</Typography.Label>\n          <View style={styles.palette}>\n            {palette.map((preset, index) => (\n              <ColorPickerPresetEntry\n                key={preset.label + index}\n                preset={preset}\n              />\n            ))}\n          </View>\n        </View>\n      ) : null}\n      {commitMode === \"confirm\" ? (\n        <View style={styles.row}>\n          <ColorPickerCancel style={styles.action}>Cancel</ColorPickerCancel>\n          <ColorPickerApply style={styles.action}>Apply color</ColorPickerApply>\n        </View>\n      ) : null}\n    </ColorPickerRoot>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.colorPicker;\n\n  return StyleSheet.create({\n    row: { flexDirection: \"row\", alignItems: \"flex-end\", gap: tokens.rowGap },\n    field: { flex: 1, minWidth: 0 },\n    alphaField: { flex: tokens.alphaFieldFlex, minWidth: 0 },\n    palette: { flexDirection: \"row\", flexWrap: \"wrap\", gap: tokens.presetsGap },\n    action: { flex: 1 },\n  });\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/color-picker.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ColorPickerProps } from \"../types\";\nimport { ColorPickerAlphaInput } from \"./alpha-input\";\nimport { ColorPickerAlphaSlider } from \"./alpha-slider\";\nimport { ColorPickerApply } from \"./apply\";\nimport { ColorPickerCancel } from \"./cancel\";\nimport { ColorPickerChannelInput } from \"./channel-input\";\nimport { ColorPickerHexInput } from \"./hex-input\";\nimport { ColorPickerHueSlider } from \"./hue-slider\";\nimport { ColorPickerPresetEntry } from \"./preset\";\nimport { ColorPickerPreview } from \"./preview\";\nimport { ColorPickerRoot } from \"./root\";\nimport { ColorPickerSpectrum } from \"./spectrum\";\n\nexport const ColorPickerComponent = memo(function ColorPicker({\n  showAlpha = true,\n  showPresets = true,\n  presets,\n  presetsLabel = \"Theme colors\",\n  commitMode = \"immediate\",\n  ...props\n}: ColorPickerProps) {\n  const tokens = useComponentsTokens().colorPicker;\n  const styles = useThemedStyles(themedStyles);\n  const palette = presets ?? tokens.presets;\n\n  const hasPresets = showPresets && palette.length > 0;\n\n  return (\n    <ColorPickerRoot {...props} commitMode={commitMode}>\n      <Typography.Title4 color={tokens.labelColor}>\n        Choose color\n      </Typography.Title4>\n      <ColorPickerSpectrum />\n      <View gap={tokens.sliderLabelGap}>\n        <Typography.Caption>Hue</Typography.Caption>\n        <ColorPickerHueSlider />\n      </View>\n      {showAlpha ? (\n        <View gap={tokens.sliderLabelGap}>\n          <Typography.Caption>Opacity</Typography.Caption>\n          <ColorPickerAlphaSlider />\n        </View>\n      ) : null}\n      <View style={styles.row}>\n        <ColorPickerPreview />\n        <View style={styles.field}>\n          <ColorPickerHexInput label=\"HEX\" />\n        </View>\n        {showAlpha ? (\n          <View style={styles.alphaField}>\n            <ColorPickerAlphaInput label=\"Opacity (%)\" />\n          </View>\n        ) : null}\n      </View>\n      <View style={styles.row}>\n        <View style={styles.field}>\n          <ColorPickerChannelInput channel=\"r\" label=\"R\" />\n        </View>\n        <View style={styles.field}>\n          <ColorPickerChannelInput channel=\"g\" label=\"G\" />\n        </View>\n        <View style={styles.field}>\n          <ColorPickerChannelInput channel=\"b\" label=\"B\" />\n        </View>\n      </View>\n      {hasPresets ? (\n        <View gap={tokens.presetsLabelGap}>\n          <Typography.Label>{presetsLabel}</Typography.Label>\n          <View style={styles.palette}>\n            {palette.map((preset, index) => (\n              <ColorPickerPresetEntry\n                key={preset.label + index}\n                preset={preset}\n              />\n            ))}\n          </View>\n        </View>\n      ) : null}\n      {commitMode === \"confirm\" ? (\n        <View style={styles.row}>\n          <ColorPickerCancel style={styles.action}>Cancel</ColorPickerCancel>\n          <ColorPickerApply style={styles.action}>Apply color</ColorPickerApply>\n        </View>\n      ) : null}\n    </ColorPickerRoot>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.colorPicker;\n\n  return StyleSheet.create({\n    row: { flexDirection: \"row\", alignItems: \"flex-end\", gap: tokens.rowGap },\n    field: { flex: 1, minWidth: 0 },\n    alphaField: { flex: tokens.alphaFieldFlex, minWidth: 0 },\n    palette: { flexDirection: \"row\", flexWrap: \"wrap\", gap: tokens.presetsGap },\n    action: { flex: 1 },\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/components/gradient.d.mts

@@ -1,7 +1,6 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorGradientProps } from '../types/color-gradient.types.mjs';
 
-declare const ColorGradient: react.MemoExoticComponent<({ colors, checkerboard, vertical, }: ColorGradientProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorGradient: react.MemoExoticComponent<({ colors, checkerboard, vertical, }: ColorGradientProps) => react.JSX.Element>;
 
 export { ColorGradient };

package/dist/components/gradient.js

@@ -26,6 +26,8 @@ const ColorGradient = memo(function ColorGradient2({
     }),
     [colors]
   );
+  const checkerFill = "url(#" + id + "-checker)";
+  const gradientFill = "url(#" + id + ")";
   return /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", children: [
     /* @__PURE__ */ jsxs(Defs, { children: [
       /* @__PURE__ */ jsx(
@@ -36,15 +38,18 @@ const ColorGradient = memo(function ColorGradient2({
           y1: "0%",
           x2: vertical ? "0%" : "100%",
           y2: vertical ? "100%" : "0%",
-          children: stops.map((stop, index) => /* @__PURE__ */ jsx(
-            Stop,
-            {
-              offset: index / Math.max(1, stops.length - 1),
-              stopColor: stop.color,
-              stopOpacity: stop.opacity
-            },
-            index
-          ))
+          children: stops.map((stop, index) => {
+            const offset = index / Math.max(1, stops.length - 1);
+            return /* @__PURE__ */ jsx(
+              Stop,
+              {
+                offset,
+                stopColor: stop.color,
+                stopOpacity: stop.opacity
+              },
+              index
+            );
+          })
         }
       ),
       checkerboard ? /* @__PURE__ */ jsxs(
@@ -85,8 +90,8 @@ const ColorGradient = memo(function ColorGradient2({
         }
       ) : null
     ] }),
-    checkerboard ? /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: "url(#" + id + "-checker)" }) : null,
-    /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: "url(#" + id + ")" })
+    checkerboard ? /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: checkerFill }) : null,
+    /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: gradientFill })
   ] });
 });
 export {

package/dist/components/gradient.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/gradient.tsx"],"sourcesContent":["import { memo, useId, useMemo } from \"react\";\nimport Svg, {\n  Defs,\n  LinearGradient,\n  Pattern,\n  Rect,\n  Stop,\n} from \"react-native-svg\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ColorGradientProps } from \"../types/color-gradient.types\";\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\n\nexport const ColorGradient = memo(function ColorGradient({\n  colors,\n  checkerboard = false,\n  vertical = false,\n}: ColorGradientProps) {\n  const id = useId().replace(/:/g, \"\");\n  const tokens = useComponentsTokens().colorPicker;\n  const stops = useMemo(\n    () =>\n      colors.map((color) => {\n        const rgba = parseHexColor(color);\n\n        return {\n          color: rgba ? rgbaToHex({ ...rgba, a: 1 }) : color,\n          opacity: rgba?.a ?? 1,\n        };\n      }),\n    [colors],\n  );\n\n  return (\n    <Svg width=\"100%\" height=\"100%\">\n      <Defs>\n        <LinearGradient\n          id={id}\n          x1=\"0%\"\n          y1=\"0%\"\n          x2={vertical ? \"0%\" : \"100%\"}\n          y2={vertical ? \"100%\" : \"0%\"}\n        >\n          {stops.map((stop, index) => (\n            <Stop\n              key={index}\n              offset={index / Math.max(1, stops.length - 1)}\n              stopColor={stop.color}\n              stopOpacity={stop.opacity}\n            />\n          ))}\n        </LinearGradient>\n        {checkerboard ? (\n          <Pattern\n            id={id + \"-checker\"}\n            width={tokens.checkerSize * 2}\n            height={tokens.checkerSize * 2}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <Rect\n              width={tokens.checkerSize * 2}\n              height={tokens.checkerSize * 2}\n              fill={tokens.checkerLightColor}\n            />\n            <Rect\n              width={tokens.checkerSize}\n              height={tokens.checkerSize}\n              fill={tokens.checkerDarkColor}\n            />\n            <Rect\n              x={tokens.checkerSize}\n              y={tokens.checkerSize}\n              width={tokens.checkerSize}\n              height={tokens.checkerSize}\n              fill={tokens.checkerDarkColor}\n            />\n          </Pattern>\n        ) : null}\n      </Defs>\n      {checkerboard ? (\n        <Rect width=\"100%\" height=\"100%\" fill={\"url(#\" + id + \"-checker)\"} />\n      ) : null}\n      <Rect width=\"100%\" height=\"100%\" fill={\"url(#\" + id + \")\"} />\n    </Svg>\n  );\n});\n"],"mappings":"AA6CY,cASF,YATE;AA7CZ,SAAS,MAAM,OAAO,eAAe;AACrC,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,eAAe,iBAAiB;AAElC,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AACb,GAAuB;AACrB,QAAM,KAAK,MAAM,EAAE,QAAQ,MAAM,EAAE;AACnC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,QAAQ;AAAA,IACZ,MACE,OAAO,IAAI,CAAC,UAAU;AACpB,YAAM,OAAO,cAAc,KAAK;AAEhC,aAAO;AAAA,QACL,OAAO,OAAO,UAAU,EAAE,GAAG,MAAM,GAAG,EAAE,CAAC,IAAI;AAAA,QAC7C,SAAS,MAAM,KAAK;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,IACH,CAAC,MAAM;AAAA,EACT;AAEA,SACE,qBAAC,OAAI,OAAM,QAAO,QAAO,QACvB;AAAA,yBAAC,QACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAG;AAAA,UACH,IAAG;AAAA,UACH,IAAI,WAAW,OAAO;AAAA,UACtB,IAAI,WAAW,SAAS;AAAA,UAEvB,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,YAAC;AAAA;AAAA,cAEC,QAAQ,QAAQ,KAAK,IAAI,GAAG,MAAM,SAAS,CAAC;AAAA,cAC5C,WAAW,KAAK;AAAA,cAChB,aAAa,KAAK;AAAA;AAAA,YAHb;AAAA,UAIP,CACD;AAAA;AAAA,MACH;AAAA,MACC,eACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,KAAK;AAAA,UACT,OAAO,OAAO,cAAc;AAAA,UAC5B,QAAQ,OAAO,cAAc;AAAA,UAC7B,cAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,OAAO,cAAc;AAAA,gBAC5B,QAAQ,OAAO,cAAc;AAAA,gBAC7B,MAAM,OAAO;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,OAAO;AAAA,gBACd,QAAQ,OAAO;AAAA,gBACf,MAAM,OAAO;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG,OAAO;AAAA,gBACV,GAAG,OAAO;AAAA,gBACV,OAAO,OAAO;AAAA,gBACd,QAAQ,OAAO;AAAA,gBACf,MAAM,OAAO;AAAA;AAAA,YACf;AAAA;AAAA;AAAA,MACF,IACE;AAAA,OACN;AAAA,IACC,eACC,oBAAC,QAAK,OAAM,QAAO,QAAO,QAAO,MAAM,UAAU,KAAK,aAAa,IACjE;AAAA,IACJ,oBAAC,QAAK,OAAM,QAAO,QAAO,QAAO,MAAM,UAAU,KAAK,KAAK;AAAA,KAC7D;AAEJ,CAAC;","names":["ColorGradient"]}
+{"version":3,"sources":["../../src/components/gradient.tsx"],"sourcesContent":["import { memo, useId, useMemo } from \"react\";\nimport Svg, {\n  Defs,\n  LinearGradient,\n  Pattern,\n  Rect,\n  Stop,\n} from \"react-native-svg\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ColorGradientProps } from \"../types/color-gradient.types\";\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\n\nexport const ColorGradient = memo(function ColorGradient({\n  colors,\n  checkerboard = false,\n  vertical = false,\n}: ColorGradientProps) {\n  const id = useId().replace(/:/g, \"\");\n  const tokens = useComponentsTokens().colorPicker;\n  const stops = useMemo(\n    () =>\n      colors.map((color) => {\n        const rgba = parseHexColor(color);\n\n        return {\n          color: rgba ? rgbaToHex({ ...rgba, a: 1 }) : color,\n          opacity: rgba?.a ?? 1,\n        };\n      }),\n    [colors],\n  );\n\n  const checkerFill = \"url(#\" + id + \"-checker)\";\n  const gradientFill = \"url(#\" + id + \")\";\n\n  return (\n    <Svg width=\"100%\" height=\"100%\">\n      <Defs>\n        <LinearGradient\n          id={id}\n          x1=\"0%\"\n          y1=\"0%\"\n          x2={vertical ? \"0%\" : \"100%\"}\n          y2={vertical ? \"100%\" : \"0%\"}\n        >\n          {stops.map((stop, index) => {\n            const offset = index / Math.max(1, stops.length - 1);\n\n            return (\n              <Stop\n                key={index}\n                offset={offset}\n                stopColor={stop.color}\n                stopOpacity={stop.opacity}\n              />\n            );\n          })}\n        </LinearGradient>\n        {checkerboard ? (\n          <Pattern\n            id={id + \"-checker\"}\n            width={tokens.checkerSize * 2}\n            height={tokens.checkerSize * 2}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <Rect\n              width={tokens.checkerSize * 2}\n              height={tokens.checkerSize * 2}\n              fill={tokens.checkerLightColor}\n            />\n            <Rect\n              width={tokens.checkerSize}\n              height={tokens.checkerSize}\n              fill={tokens.checkerDarkColor}\n            />\n            <Rect\n              x={tokens.checkerSize}\n              y={tokens.checkerSize}\n              width={tokens.checkerSize}\n              height={tokens.checkerSize}\n              fill={tokens.checkerDarkColor}\n            />\n          </Pattern>\n        ) : null}\n      </Defs>\n      {checkerboard ? (\n        <Rect width=\"100%\" height=\"100%\" fill={checkerFill} />\n      ) : null}\n      <Rect width=\"100%\" height=\"100%\" fill={gradientFill} />\n    </Svg>\n  );\n});\n"],"mappings":"AAmDc,cAUJ,YAVI;AAnDd,SAAS,MAAM,OAAO,eAAe;AACrC,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,eAAe,iBAAiB;AAElC,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AACb,GAAuB;AACrB,QAAM,KAAK,MAAM,EAAE,QAAQ,MAAM,EAAE;AACnC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,QAAQ;AAAA,IACZ,MACE,OAAO,IAAI,CAAC,UAAU;AACpB,YAAM,OAAO,cAAc,KAAK;AAEhC,aAAO;AAAA,QACL,OAAO,OAAO,UAAU,EAAE,GAAG,MAAM,GAAG,EAAE,CAAC,IAAI;AAAA,QAC7C,SAAS,MAAM,KAAK;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,IACH,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,cAAc,UAAU,KAAK;AACnC,QAAM,eAAe,UAAU,KAAK;AAEpC,SACE,qBAAC,OAAI,OAAM,QAAO,QAAO,QACvB;AAAA,yBAAC,QACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAG;AAAA,UACH,IAAG;AAAA,UACH,IAAI,WAAW,OAAO;AAAA,UACtB,IAAI,WAAW,SAAS;AAAA,UAEvB,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,kBAAM,SAAS,QAAQ,KAAK,IAAI,GAAG,MAAM,SAAS,CAAC;AAEnD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA,WAAW,KAAK;AAAA,gBAChB,aAAa,KAAK;AAAA;AAAA,cAHb;AAAA,YAIP;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA,MACC,eACC;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,KAAK;AAAA,UACT,OAAO,OAAO,cAAc;AAAA,UAC5B,QAAQ,OAAO,cAAc;AAAA,UAC7B,cAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,OAAO,cAAc;AAAA,gBAC5B,QAAQ,OAAO,cAAc;AAAA,gBAC7B,MAAM,OAAO;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,OAAO;AAAA,gBACd,QAAQ,OAAO;AAAA,gBACf,MAAM,OAAO;AAAA;AAAA,YACf;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,GAAG,OAAO;AAAA,gBACV,GAAG,OAAO;AAAA,gBACV,OAAO,OAAO;AAAA,gBACd,QAAQ,OAAO;AAAA,gBACf,MAAM,OAAO;AAAA;AAAA,YACf;AAAA;AAAA;AAAA,MACF,IACE;AAAA,OACN;AAAA,IACC,eACC,oBAAC,QAAK,OAAM,QAAO,QAAO,QAAO,MAAM,aAAa,IAClD;AAAA,IACJ,oBAAC,QAAK,OAAM,QAAO,QAAO,QAAO,MAAM,cAAc;AAAA,KACvD;AAEJ,CAAC;","names":["ColorGradient"]}

package/dist/components/hex-input.d.mts

@@ -1,8 +1,7 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerHexInputProps } from '../types/color-input.types.mjs';
 import '@impulse-ui-native/input';
 
-declare const ColorPickerHexInput: react.MemoExoticComponent<({ disabled: disabledProp, onBlur, onSubmitEditing, error, ...props }: ColorPickerHexInputProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerHexInput: react.MemoExoticComponent<({ disabled: disabledProp, onBlur, onSubmitEditing, error, ...props }: ColorPickerHexInputProps) => react.JSX.Element>;
 
 export { ColorPickerHexInput };

package/dist/components/hex-input.js

@@ -36,6 +36,7 @@ const ColorPickerHexInput = memo(function ColorPickerHexInput2({
     input.onCommit();
     onSubmitEditing?.(event);
   });
+  const inputError = error ?? (input.invalid ? "Enter a valid hex color" : void 0);
   return /* @__PURE__ */ jsx(
     Input,
     {
@@ -49,7 +50,7 @@ const ColorPickerHexInput = memo(function ColorPickerHexInput2({
       onChangeText: input.onChangeText,
       onBlur: handleBlur,
       onSubmitEditing: handleSubmit,
-      error: error ?? (input.invalid ? "Enter a valid hex color" : void 0)
+      error: inputError
     }
   );
 });

package/dist/components/hex-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/hex-input.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Input } from \"@impulse-ui-native/input\";\n\nimport type { ColorPickerHexInputProps } from \"../types/color-input.types\";\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\n\nexport const ColorPickerHexInput = memo(function ColorPickerHexInput({\n  disabled: disabledProp,\n  onBlur,\n  onSubmitEditing,\n  error,\n  ...props\n}: ColorPickerHexInputProps) {\n  const {\n    value,\n    disabled: rootDisabled,\n    size,\n    setColor,\n    resetKey,\n  } = useColorPickerContext();\n  const disabled = rootDisabled || disabledProp === true;\n  const commit = useEventCallback((text: string): string | undefined => {\n    const parsed = parseHexColor(text);\n\n    if (!parsed || !setColor(text)) {\n      return undefined;\n    }\n\n    return rgbaToHex(parsed);\n  });\n  const input = useColorInput({ value, disabled, commit, resetKey });\n  const handleBlur = useEventCallback<\n    NonNullable<ColorPickerHexInputProps[\"onBlur\"]>\n  >((event) => {\n    input.onCommit();\n    onBlur?.(event);\n  });\n  const handleSubmit = useEventCallback<\n    NonNullable<ColorPickerHexInputProps[\"onSubmitEditing\"]>\n  >((event) => {\n    input.onCommit();\n    onSubmitEditing?.(event);\n  });\n\n  return (\n    <Input\n      size={size}\n      autoCapitalize=\"characters\"\n      autoCorrect={false}\n      maxLength={9}\n      {...props}\n      disabled={disabled}\n      value={input.text}\n      onChangeText={input.onChangeText}\n      onBlur={handleBlur}\n      onSubmitEditing={handleSubmit}\n      error={error ?? (input.invalid ? \"Enter a valid hex color\" : undefined)}\n    />\n  );\n});\n"],"mappings":"AAiDI;AAjDJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AAGtB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AAElC,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAC1B,QAAM,WAAW,gBAAgB,iBAAiB;AAClD,QAAM,SAAS,iBAAiB,CAAC,SAAqC;AACpE,UAAM,SAAS,cAAc,IAAI;AAEjC,QAAI,CAAC,UAAU,CAAC,SAAS,IAAI,GAAG;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO,UAAU,MAAM;AAAA,EACzB,CAAC;AACD,QAAM,QAAQ,cAAc,EAAE,OAAO,UAAU,QAAQ,SAAS,CAAC;AACjE,QAAM,aAAa,iBAEjB,CAAC,UAAU;AACX,UAAM,SAAS;AACf,aAAS,KAAK;AAAA,EAChB,CAAC;AACD,QAAM,eAAe,iBAEnB,CAAC,UAAU;AACX,UAAM,SAAS;AACf,sBAAkB,KAAK;AAAA,EACzB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,gBAAe;AAAA,MACf,aAAa;AAAA,MACb,WAAW;AAAA,MACV,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,MAAM;AAAA,MACb,cAAc,MAAM;AAAA,MACpB,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,OAAO,UAAU,MAAM,UAAU,4BAA4B;AAAA;AAAA,EAC/D;AAEJ,CAAC;","names":["ColorPickerHexInput"]}
+{"version":3,"sources":["../../src/components/hex-input.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Input } from \"@impulse-ui-native/input\";\n\nimport type { ColorPickerHexInputProps } from \"../types/color-input.types\";\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\n\nexport const ColorPickerHexInput = memo(function ColorPickerHexInput({\n  disabled: disabledProp,\n  onBlur,\n  onSubmitEditing,\n  error,\n  ...props\n}: ColorPickerHexInputProps) {\n  const {\n    value,\n    disabled: rootDisabled,\n    size,\n    setColor,\n    resetKey,\n  } = useColorPickerContext();\n  const disabled = rootDisabled || disabledProp === true;\n  const commit = useEventCallback((text: string): string | undefined => {\n    const parsed = parseHexColor(text);\n\n    if (!parsed || !setColor(text)) {\n      return undefined;\n    }\n\n    return rgbaToHex(parsed);\n  });\n  const input = useColorInput({ value, disabled, commit, resetKey });\n  const handleBlur = useEventCallback<\n    NonNullable<ColorPickerHexInputProps[\"onBlur\"]>\n  >((event) => {\n    input.onCommit();\n    onBlur?.(event);\n  });\n  const handleSubmit = useEventCallback<\n    NonNullable<ColorPickerHexInputProps[\"onSubmitEditing\"]>\n  >((event) => {\n    input.onCommit();\n    onSubmitEditing?.(event);\n  });\n\n  const inputError =\n    error ?? (input.invalid ? \"Enter a valid hex color\" : undefined);\n\n  return (\n    <Input\n      size={size}\n      autoCapitalize=\"characters\"\n      autoCorrect={false}\n      maxLength={9}\n      {...props}\n      disabled={disabled}\n      value={input.text}\n      onChangeText={input.onChangeText}\n      onBlur={handleBlur}\n      onSubmitEditing={handleSubmit}\n      error={inputError}\n    />\n  );\n});\n"],"mappings":"AAoDI;AApDJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AAGtB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AAElC,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAC1B,QAAM,WAAW,gBAAgB,iBAAiB;AAClD,QAAM,SAAS,iBAAiB,CAAC,SAAqC;AACpE,UAAM,SAAS,cAAc,IAAI;AAEjC,QAAI,CAAC,UAAU,CAAC,SAAS,IAAI,GAAG;AAC9B,aAAO;AAAA,IACT;AAEA,WAAO,UAAU,MAAM;AAAA,EACzB,CAAC;AACD,QAAM,QAAQ,cAAc,EAAE,OAAO,UAAU,QAAQ,SAAS,CAAC;AACjE,QAAM,aAAa,iBAEjB,CAAC,UAAU;AACX,UAAM,SAAS;AACf,aAAS,KAAK;AAAA,EAChB,CAAC;AACD,QAAM,eAAe,iBAEnB,CAAC,UAAU;AACX,UAAM,SAAS;AACf,sBAAkB,KAAK;AAAA,EACzB,CAAC;AAED,QAAM,aACJ,UAAU,MAAM,UAAU,4BAA4B;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,gBAAe;AAAA,MACf,aAAa;AAAA,MACb,WAAW;AAAA,MACV,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,MAAM;AAAA,MACb,cAAc,MAAM;AAAA,MACpB,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;","names":["ColorPickerHexInput"]}

package/dist/components/hue-slider.d.mts

@@ -1,6 +1,5 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const ColorPickerHueSlider: react.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerHueSlider: react.MemoExoticComponent<() => react.JSX.Element>;
 
 export { ColorPickerHueSlider };

package/dist/components/index.d.mts

@@ -1,5 +1,4 @@
 import * as _impulse_ui_native_primitives from '@impulse-ui-native/primitives';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ColorPickerProps, ColorPickerRootProps, ColorPickerChannelInputProps, ColorPickerAlphaInputProps, ColorPickerSwatchProps, ColorPickerActionProps } from '../types/color-picker.types.mjs';
 import { ColorPickerHexInputProps } from '../types/color-input.types.mjs';
@@ -8,19 +7,19 @@ import '@impulse-ui-native/theme';
 import '@impulse-ui-native/input';
 
 declare const ColorPicker: react.NamedExoticComponent<ColorPickerProps> & {
-    readonly type: ({ showAlpha, showPresets, presets, presetsLabel, commitMode, ...props }: ColorPickerProps) => react_jsx_runtime.JSX.Element;
+    readonly type: ({ showAlpha, showPresets, presets, presetsLabel, commitMode, ...props }: ColorPickerProps) => react.JSX.Element;
 } & {
-    Root: react.MemoExoticComponent<({ children, style, value, defaultValue, onChange, disabled, size, commitMode, ...props }: ColorPickerRootProps) => react_jsx_runtime.JSX.Element>;
-    Spectrum: react.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
-    HueSlider: react.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
-    AlphaSlider: react.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
-    Preview: react.MemoExoticComponent<({ style, children, ...props }: _impulse_ui_native_primitives.ViewProps) => react_jsx_runtime.JSX.Element>;
-    HexInput: react.MemoExoticComponent<({ disabled: disabledProp, onBlur, onSubmitEditing, error, ...props }: ColorPickerHexInputProps) => react_jsx_runtime.JSX.Element>;
-    ChannelInput: react.MemoExoticComponent<({ channel, label, }: ColorPickerChannelInputProps) => react_jsx_runtime.JSX.Element>;
-    AlphaInput: react.MemoExoticComponent<({ label, }: ColorPickerAlphaInputProps) => react_jsx_runtime.JSX.Element>;
-    Swatch: react.MemoExoticComponent<({ color, children, disabled: disabledProp, style, onPress, ...props }: ColorPickerSwatchProps) => react_jsx_runtime.JSX.Element>;
-    Apply: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react_jsx_runtime.JSX.Element>;
-    Cancel: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react_jsx_runtime.JSX.Element>;
+    Root: react.MemoExoticComponent<({ children, style, value, defaultValue, onChange, disabled, size, commitMode, ...props }: ColorPickerRootProps) => react.JSX.Element>;
+    Spectrum: react.MemoExoticComponent<() => react.JSX.Element>;
+    HueSlider: react.MemoExoticComponent<() => react.JSX.Element>;
+    AlphaSlider: react.MemoExoticComponent<() => react.JSX.Element>;
+    Preview: react.MemoExoticComponent<({ style, children, ...props }: _impulse_ui_native_primitives.ViewProps) => react.JSX.Element>;
+    HexInput: react.MemoExoticComponent<({ disabled: disabledProp, onBlur, onSubmitEditing, error, ...props }: ColorPickerHexInputProps) => react.JSX.Element>;
+    ChannelInput: react.MemoExoticComponent<({ channel, label, }: ColorPickerChannelInputProps) => react.JSX.Element>;
+    AlphaInput: react.MemoExoticComponent<({ label, }: ColorPickerAlphaInputProps) => react.JSX.Element>;
+    Swatch: react.MemoExoticComponent<({ color, children, disabled: disabledProp, style, onPress, ...props }: ColorPickerSwatchProps) => react.JSX.Element>;
+    Apply: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react.JSX.Element>;
+    Cancel: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react.JSX.Element>;
 };
 
 export { ColorPicker };

package/dist/components/motion-gradient.d.mts

@@ -1,9 +1,8 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorMotionSurfaceProps } from '../types/color-motion.types.mjs';
 import 'react-native-reanimated';
 import '../types/color.types.mjs';
 
-declare const ColorMotionGradient: react.MemoExoticComponent<({ rgba, }: ColorMotionSurfaceProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorMotionGradient: react.MemoExoticComponent<({ rgba, }: ColorMotionSurfaceProps) => react.JSX.Element>;
 
 export { ColorMotionGradient };

package/dist/components/motion-gradient.js

@@ -16,6 +16,7 @@ const ColorMotionGradient = memo(function ColorMotionGradient2({
   const rectProps = useAnimatedProps(() => ({
     color: rgbaToNativeColor(rgba.get(), true)
   }));
+  const gradientFill = "url(#" + id + ")";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ColorGradient, { colors: TransparentStops, checkerboard: true }),
     /* @__PURE__ */ jsxs(
@@ -31,7 +32,7 @@ const ColorMotionGradient = memo(function ColorMotionGradient2({
               /* @__PURE__ */ jsx(Stop, { offset: 0, stopColor: "#FFFFFF", stopOpacity: 0 }),
               /* @__PURE__ */ jsx(Stop, { offset: 1, stopColor: "#FFFFFF", stopOpacity: 1 })
             ] }),
-            /* @__PURE__ */ jsx(Mask, { id: id + "-mask", x: "0%", y: "0%", width: "100%", height: "100%", children: /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: "url(#" + id + ")" }) })
+            /* @__PURE__ */ jsx(Mask, { id: id + "-mask", x: "0%", y: "0%", width: "100%", height: "100%", children: /* @__PURE__ */ jsx(Rect, { width: "100%", height: "100%", fill: gradientFill }) })
           ] }),
           /* @__PURE__ */ jsx(
             AnimatedColorRect,

package/dist/components/motion-gradient.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/motion-gradient.tsx"],"sourcesContent":["import { memo, useId } from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport { useAnimatedProps } from \"react-native-reanimated\";\nimport Svg, { Defs, LinearGradient, Mask, Rect, Stop } from \"react-native-svg\";\n\nimport type { ColorMotionSurfaceProps } from \"../types/color-motion.types\";\nimport {\n  AnimatedColorRect,\n  TransparentStops,\n} from \"../constants/motion.constants\";\nimport { rgbaToNativeColor } from \"../utils/color.utils\";\nimport { ColorGradient } from \"./gradient\";\n\nexport const ColorMotionGradient = memo(function ColorMotionGradient({\n  rgba,\n}: ColorMotionSurfaceProps) {\n  const id = useId().replace(/:/g, \"\");\n  const rectProps = useAnimatedProps(() => ({\n    color: rgbaToNativeColor(rgba.get(), true),\n  }));\n\n  return (\n    <>\n      <ColorGradient colors={TransparentStops} checkerboard />\n      <Svg\n        pointerEvents=\"none\"\n        width=\"100%\"\n        height=\"100%\"\n        style={StyleSheet.absoluteFill}\n      >\n        <Defs>\n          <LinearGradient id={id} x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"0%\">\n            <Stop offset={0} stopColor=\"#FFFFFF\" stopOpacity={0} />\n            <Stop offset={1} stopColor=\"#FFFFFF\" stopOpacity={1} />\n          </LinearGradient>\n          <Mask id={id + \"-mask\"} x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\">\n            <Rect width=\"100%\" height=\"100%\" fill={\"url(#\" + id + \")\"} />\n          </Mask>\n        </Defs>\n        <AnimatedColorRect\n          fill=\"currentColor\"\n          width=\"100%\"\n          height=\"100%\"\n          mask={\"url(#\" + id + \"-mask)\"}\n          animatedProps={rectProps}\n        />\n      </Svg>\n    </>\n  );\n});\n"],"mappings":"AAsBI,mBACE,KAQI,YATN;AAtBJ,SAAS,MAAM,aAAa;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,OAAO,MAAM,gBAAgB,MAAM,MAAM,YAAY;AAG5D;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAEvB,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE;AACF,GAA4B;AAC1B,QAAM,KAAK,MAAM,EAAE,QAAQ,MAAM,EAAE;AACnC,QAAM,YAAY,iBAAiB,OAAO;AAAA,IACxC,OAAO,kBAAkB,KAAK,IAAI,GAAG,IAAI;AAAA,EAC3C,EAAE;AAEF,SACE,iCACE;AAAA,wBAAC,iBAAc,QAAQ,kBAAkB,cAAY,MAAC;AAAA,IACtD;AAAA,MAAC;AAAA;AAAA,QACC,eAAc;AAAA,QACd,OAAM;AAAA,QACN,QAAO;AAAA,QACP,OAAO,WAAW;AAAA,QAElB;AAAA,+BAAC,QACC;AAAA,iCAAC,kBAAe,IAAQ,IAAG,MAAK,IAAG,QAAO,IAAG,MAAK,IAAG,MACnD;AAAA,kCAAC,QAAK,QAAQ,GAAG,WAAU,WAAU,aAAa,GAAG;AAAA,cACrD,oBAAC,QAAK,QAAQ,GAAG,WAAU,WAAU,aAAa,GAAG;AAAA,eACvD;AAAA,YACA,oBAAC,QAAK,IAAI,KAAK,SAAS,GAAE,MAAK,GAAE,MAAK,OAAM,QAAO,QAAO,QACxD,8BAAC,QAAK,OAAM,QAAO,QAAO,QAAO,MAAM,UAAU,KAAK,KAAK,GAC7D;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAM;AAAA,cACN,QAAO;AAAA,cACP,MAAM,UAAU,KAAK;AAAA,cACrB,eAAe;AAAA;AAAA,UACjB;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["ColorMotionGradient"]}
+{"version":3,"sources":["../../src/components/motion-gradient.tsx"],"sourcesContent":["import { memo, useId } from \"react\";\nimport { StyleSheet } from \"react-native\";\nimport { useAnimatedProps } from \"react-native-reanimated\";\nimport Svg, { Defs, LinearGradient, Mask, Rect, Stop } from \"react-native-svg\";\n\nimport type { ColorMotionSurfaceProps } from \"../types/color-motion.types\";\nimport {\n  AnimatedColorRect,\n  TransparentStops,\n} from \"../constants/motion.constants\";\nimport { rgbaToNativeColor } from \"../utils/color.utils\";\nimport { ColorGradient } from \"./gradient\";\n\nexport const ColorMotionGradient = memo(function ColorMotionGradient({\n  rgba,\n}: ColorMotionSurfaceProps) {\n  const id = useId().replace(/:/g, \"\");\n  const rectProps = useAnimatedProps(() => ({\n    color: rgbaToNativeColor(rgba.get(), true),\n  }));\n\n  const gradientFill = \"url(#\" + id + \")\";\n\n  return (\n    <>\n      <ColorGradient colors={TransparentStops} checkerboard />\n      <Svg\n        pointerEvents=\"none\"\n        width=\"100%\"\n        height=\"100%\"\n        style={StyleSheet.absoluteFill}\n      >\n        <Defs>\n          <LinearGradient id={id} x1=\"0%\" x2=\"100%\" y1=\"0%\" y2=\"0%\">\n            <Stop offset={0} stopColor=\"#FFFFFF\" stopOpacity={0} />\n            <Stop offset={1} stopColor=\"#FFFFFF\" stopOpacity={1} />\n          </LinearGradient>\n          <Mask id={id + \"-mask\"} x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\">\n            <Rect width=\"100%\" height=\"100%\" fill={gradientFill} />\n          </Mask>\n        </Defs>\n        <AnimatedColorRect\n          fill=\"currentColor\"\n          width=\"100%\"\n          height=\"100%\"\n          mask={\"url(#\" + id + \"-mask)\"}\n          animatedProps={rectProps}\n        />\n      </Svg>\n    </>\n  );\n});\n"],"mappings":"AAwBI,mBACE,KAQI,YATN;AAxBJ,SAAS,MAAM,aAAa;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,OAAO,OAAO,MAAM,gBAAgB,MAAM,MAAM,YAAY;AAG5D;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAEvB,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE;AACF,GAA4B;AAC1B,QAAM,KAAK,MAAM,EAAE,QAAQ,MAAM,EAAE;AACnC,QAAM,YAAY,iBAAiB,OAAO;AAAA,IACxC,OAAO,kBAAkB,KAAK,IAAI,GAAG,IAAI;AAAA,EAC3C,EAAE;AAEF,QAAM,eAAe,UAAU,KAAK;AAEpC,SACE,iCACE;AAAA,wBAAC,iBAAc,QAAQ,kBAAkB,cAAY,MAAC;AAAA,IACtD;AAAA,MAAC;AAAA;AAAA,QACC,eAAc;AAAA,QACd,OAAM;AAAA,QACN,QAAO;AAAA,QACP,OAAO,WAAW;AAAA,QAElB;AAAA,+BAAC,QACC;AAAA,iCAAC,kBAAe,IAAQ,IAAG,MAAK,IAAG,QAAO,IAAG,MAAK,IAAG,MACnD;AAAA,kCAAC,QAAK,QAAQ,GAAG,WAAU,WAAU,aAAa,GAAG;AAAA,cACrD,oBAAC,QAAK,QAAQ,GAAG,WAAU,WAAU,aAAa,GAAG;AAAA,eACvD;AAAA,YACA,oBAAC,QAAK,IAAI,KAAK,SAAS,GAAE,MAAK,GAAE,MAAK,OAAM,QAAO,QAAO,QACxD,8BAAC,QAAK,OAAM,QAAO,QAAO,QAAO,MAAM,cAAc,GACvD;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAM;AAAA,cACN,QAAO;AAAA,cACP,MAAM,UAAU,KAAK;AAAA,cACrB,eAAe;AAAA;AAAA,UACjB;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["ColorMotionGradient"]}

package/dist/components/motion-surface.d.mts

@@ -1,9 +1,8 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorMotionSurfaceProps } from '../types/color-motion.types.mjs';
 import 'react-native-reanimated';
 import '../types/color.types.mjs';
 
-declare const ColorMotionSurface: react.MemoExoticComponent<({ rgba, }: ColorMotionSurfaceProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorMotionSurface: react.MemoExoticComponent<({ rgba, }: ColorMotionSurfaceProps) => react.JSX.Element>;
 
 export { ColorMotionSurface };

package/dist/components/preset.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerPresetEntryProps } from '../types/color-picker-internal.types.mjs';
 import 'react-native-reanimated';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerPresetEntry: react.MemoExoticComponent<({ preset, }: ColorPickerPresetEntryProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerPresetEntry: react.MemoExoticComponent<({ preset, }: ColorPickerPresetEntryProps) => react.JSX.Element>;
 
 export { ColorPickerPresetEntry };

package/dist/components/preview.d.mts

@@ -1,7 +1,6 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ViewProps } from '@impulse-ui-native/primitives';
 
-declare const ColorPickerPreview: react.MemoExoticComponent<({ style, children, ...props }: ViewProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerPreview: react.MemoExoticComponent<({ style, children, ...props }: ViewProps) => react.JSX.Element>;
 
 export { ColorPickerPreview };

package/dist/components/root.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerRootProps } from '../types/color-picker.types.mjs';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerRoot: react.MemoExoticComponent<({ children, style, value, defaultValue, onChange, disabled, size, commitMode, ...props }: ColorPickerRootProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerRoot: react.MemoExoticComponent<({ children, style, value, defaultValue, onChange, disabled, size, commitMode, ...props }: ColorPickerRootProps) => react.JSX.Element>;
 
 export { ColorPickerRoot };

package/dist/components/spectrum.d.mts

@@ -1,6 +1,5 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare const ColorPickerSpectrum: react.MemoExoticComponent<() => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerSpectrum: react.MemoExoticComponent<() => react.JSX.Element>;
 
 export { ColorPickerSpectrum };

package/dist/components/swatch.d.mts

@@ -1,10 +1,9 @@
 import * as react from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColorPickerSwatchProps } from '../types/color-picker.types.mjs';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 
-declare const ColorPickerSwatch: react.MemoExoticComponent<({ color, children, disabled: disabledProp, style, onPress, ...props }: ColorPickerSwatchProps) => react_jsx_runtime.JSX.Element>;
+declare const ColorPickerSwatch: react.MemoExoticComponent<({ color, children, disabled: disabledProp, style, onPress, ...props }: ColorPickerSwatchProps) => react.JSX.Element>;
 
 export { ColorPickerSwatch };

package/dist/constants/motion.constants.d.mts

@@ -4,6 +4,6 @@ import { Rect } from 'react-native-svg';
 
 declare const TransparentStops: readonly string[];
 declare const SaturationStops: readonly string[];
-declare const AnimatedColorRect: react_native_reanimated_lib_typescript_createAnimatedComponent.AnimatedComponentType<Readonly<react_native_svg.RectProps | Readonly<react_native_svg.RectProps>>, typeof Rect>;
+declare const AnimatedColorRect: react_native_reanimated_lib_typescript_createAnimatedComponent.AnimatedComponentType<Readonly<react_native_svg.RectProps | Readonly<react_native_svg.RectProps>>, typeof Rect, object>;
 
 export { AnimatedColorRect, SaturationStops, TransparentStops };

package/dist/hooks/use-spectrum-interaction.hook.d.mts

@@ -1,11 +1,37 @@
 import * as react_native_reanimated_lib_typescript_hook_commonTypes from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+import * as react_native from 'react-native';
 import * as react_native_gesture_handler_lib_typescript_handlers_gestures_panGesture from 'react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture';
-import { LayoutChangeEvent } from 'react-native';
 import { SpectrumInteractionOptions } from '../types/spectrum.types.mjs';
 
 declare function useSpectrumInteraction({ disabled, onChange, onChangeWorklet, onComplete, saturation, brightness, }: SpectrumInteractionOptions): {
     gesture: react_native_gesture_handler_lib_typescript_handlers_gestures_panGesture.PanGesture;
-    handleLayout: (event: LayoutChangeEvent) => void;
+    handleLayout: (event: Readonly<{
+        bubbles: boolean | undefined;
+        cancelable: boolean | undefined;
+        currentTarget: number | react_native.HostInstance;
+        defaultPrevented: boolean | undefined;
+        dispatchConfig: Readonly<{
+            registrationName: string;
+        }>;
+        eventPhase: number | undefined;
+        preventDefault: () => void;
+        isDefaultPrevented: () => boolean;
+        stopPropagation: () => void;
+        isPropagationStopped: () => boolean;
+        isTrusted: boolean | undefined;
+        nativeEvent: Readonly<{
+            layout: Readonly<{
+                x: number;
+                y: number;
+                width: number;
+                height: number;
+            }>;
+        }>;
+        persist: () => void;
+        target: (number | undefined) | react_native.HostInstance;
+        timeStamp: number;
+        type: string | undefined;
+    }>) => void;
     indicatorStyle: react_native_reanimated_lib_typescript_hook_commonTypes.AnimatedStyleHandle<{
         transform: ({
             translateX: number;

package/dist/index.d.mts

@@ -4,6 +4,5 @@ export { ColorPickerActionProps, ColorPickerAlphaInputProps, ColorPickerChannelI
 export { ColorPickerPreset } from '@impulse-ui-native/theme';
 export { ColorPickerHexInputProps } from './types/color-input.types.mjs';
 import '@impulse-ui-native/primitives';
-import 'react/jsx-runtime';
 import 'react';
 import '@impulse-ui-native/input';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/color-picker",
-  "version": "9.1.1",
+  "version": "10.0.0",
   "description": "Modular spectrum color picker with custom hex/RGB entry and theme presets for React Native.",
   "keywords": [
     "react-native",
@@ -13,11 +13,11 @@
   "source": "src/index.ts",
   "module": "dist/index.js",
   "types": "dist/index.d.mts",
-  "react-native": "src/index.ts",
+  "react-native": "dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
-      "react-native": "./src/index.ts",
+      "react-native": "./dist/index.js",
       "import": "./dist/index.js"
     }
   },
@@ -28,24 +28,24 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/core": "9.1.1",
-    "@impulse-ui-native/input": "9.1.1",
-    "@impulse-ui-native/theme": "9.1.1",
-    "@impulse-ui-native/icon": "9.1.1",
-    "@impulse-ui-native/primitives": "9.1.1",
-    "@impulse-ui-native/slider": "9.1.1"
+    "@impulse-ui-native/icon": "10.0.0",
+    "@impulse-ui-native/core": "10.0.0",
+    "@impulse-ui-native/primitives": "10.0.0",
+    "@impulse-ui-native/theme": "10.0.0",
+    "@impulse-ui-native/slider": "10.0.0",
+    "@impulse-ui-native/input": "10.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.2.14",
+    "@types/react": "~19.3.0",
     "eslint": "^9.38.0",
     "prettier": "^3.6.2",
-    "react": "19.2.3",
-    "react-native": "0.86.2",
+    "react": "19.3.0",
+    "react-native": "0.88.0",
     "typescript": "~6.0.3",
-    "react-native-svg": "15.15.4",
-    "react-native-gesture-handler": "~2.32.0",
-    "react-native-reanimated": "4.5.1",
-    "react-native-worklets": "0.10.1",
+    "react-native-svg": "15.16.0",
+    "react-native-gesture-handler": "~3.3.0",
+    "react-native-reanimated": "4.7.1",
+    "react-native-worklets": "0.13.0",
     "@impulse-ui-native/eslint-config": "1.0.0",
     "@impulse-ui-native/prettier-config": "1.0.0",
     "@impulse-ui-native/tsconfig": "1.0.0"