@impulse-ui-native/color-picker 14.1.1 → 15.0.0

package/README.md

@@ -90,7 +90,7 @@ Native device verification of dragging, keyboard entry, font scaling, and nested
 ## Field appearance
 
 Rectangular fields support `variant="outlined" | "soft" | "filled"` and
-`tone="neutral" | "primary" | "secondary"`. The default is `outlined` / `neutral`.
+`tone="neutral" | "primary" | "secondary"`. Inputs default to `outlined` and inherit the root tone (`primary` by default). Set `tone="neutral"` on an input to use the standard neutral field appearance.
 Outlined uses a transparent surface with a tone border; soft uses a subtle tone
 surface; filled uses the tone fill with its paired foreground. Colors come from
 the active theme in both schemes. Error styling overrides the selected tone;
@@ -102,3 +102,11 @@ Customize `components.controlContainer.colors[tone][variant][state]`,
 the previous `variants[variant][state]` maps.
 
 `ColorPicker.HexInput`, `ColorPicker.ChannelInput`, and `ColorPicker.AlphaInput` accept the field appearance props individually.
+
+## Repository palette consistency
+
+ColorPicker.Root and the convenience ColorPicker accept tone (default primary).
+Inputs, sliders, confirm actions, and selected swatch rings inherit it; explicit
+child tones override it. The hue/saturation spectrum, presets, alpha checkerboard,
+and user-selected color are data, so changing tone does not change those values.
+Selection ring tokens move to colorPicker.colors[tone].

package/dist/components/alpha-input.js

@@ -10,7 +10,14 @@ const ColorPickerAlphaInput = memo(function ColorPickerAlphaInput2({
   variant,
   tone
 }) {
-  const { hsva, disabled, size, setAlpha, resetKey } = useColorPickerContext();
+  const {
+    hsva,
+    disabled,
+    size,
+    tone: rootTone,
+    setAlpha,
+    resetKey
+  } = useColorPickerContext();
   const commit = useEventCallback((text) => {
     const percentage = parseColorPercentage(text);
     if (percentage === void 0) {
@@ -30,7 +37,7 @@ const ColorPickerAlphaInput = memo(function ColorPickerAlphaInput2({
     {
       label,
       variant,
-      tone,
+      tone: tone ?? rootTone,
       size,
       disabled,
       keyboardType: "number-pad",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alpha-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 { ColorPickerAlphaInputProps } from \"../types\";\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseColorPercentage } from \"../utils/color.utils\";\n\nexport const ColorPickerAlphaInput = memo(function ColorPickerAlphaInput({\n  label,\n  variant,\n  tone,\n}: ColorPickerAlphaInputProps) {\n  const { hsva, disabled, size, setAlpha, resetKey } = useColorPickerContext();\n  const commit = useEventCallback((text: string): string | undefined => {\n    const percentage = parseColorPercentage(text);\n\n    if (percentage === undefined) {\n      return undefined;\n    }\n\n    setAlpha(percentage / 100);\n\n    return String(percentage);\n  });\n  const input = useColorInput({\n    resetKey,\n    value: String(Math.round(hsva.a * 100)),\n    disabled,\n    commit,\n  });\n\n  return (\n    <Input\n      label={label}\n      variant={variant}\n      tone={tone}\n      size={size}\n      disabled={disabled}\n      keyboardType=\"number-pad\"\n      maxLength={3}\n      value={input.text}\n      onChangeText={input.onChangeText}\n      onBlur={input.onCommit}\n      onSubmitEditing={input.onCommit}\n      error={input.invalid ? \"Use 0-100\" : undefined}\n    />\n  );\n});\n"],"mappings":"AAmCI;AAnCJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AAGtB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAE9B,MAAM,wBAAwB,KAAK,SAASA,uBAAsB;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,IAAI,sBAAsB;AAC3E,QAAM,SAAS,iBAAiB,CAAC,SAAqC;AACpE,UAAM,aAAa,qBAAqB,IAAI;AAE5C,QAAI,eAAe,QAAW;AAC5B,aAAO;AAAA,IACT;AAEA,aAAS,aAAa,GAAG;AAEzB,WAAO,OAAO,UAAU;AAAA,EAC1B,CAAC;AACD,QAAM,QAAQ,cAAc;AAAA,IAC1B;AAAA,IACA,OAAO,OAAO,KAAK,MAAM,KAAK,IAAI,GAAG,CAAC;AAAA,IACtC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAa;AAAA,MACb,WAAW;AAAA,MACX,OAAO,MAAM;AAAA,MACb,cAAc,MAAM;AAAA,MACpB,QAAQ,MAAM;AAAA,MACd,iBAAiB,MAAM;AAAA,MACvB,OAAO,MAAM,UAAU,cAAc;AAAA;AAAA,EACvC;AAEJ,CAAC;","names":["ColorPickerAlphaInput"]}
+{"version":3,"sources":["../../src/components/alpha-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 { ColorPickerAlphaInputProps } from \"../types\";\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseColorPercentage } from \"../utils/color.utils\";\n\nexport const ColorPickerAlphaInput = memo(function ColorPickerAlphaInput({\n  label,\n  variant,\n  tone,\n}: ColorPickerAlphaInputProps) {\n  const {\n    hsva,\n    disabled,\n    size,\n    tone: rootTone,\n    setAlpha,\n    resetKey,\n  } = useColorPickerContext();\n  const commit = useEventCallback((text: string): string | undefined => {\n    const percentage = parseColorPercentage(text);\n\n    if (percentage === undefined) {\n      return undefined;\n    }\n\n    setAlpha(percentage / 100);\n\n    return String(percentage);\n  });\n  const input = useColorInput({\n    resetKey,\n    value: String(Math.round(hsva.a * 100)),\n    disabled,\n    commit,\n  });\n\n  return (\n    <Input\n      label={label}\n      variant={variant}\n      tone={tone ?? rootTone}\n      size={size}\n      disabled={disabled}\n      keyboardType=\"number-pad\"\n      maxLength={3}\n      value={input.text}\n      onChangeText={input.onChangeText}\n      onBlur={input.onCommit}\n      onSubmitEditing={input.onCommit}\n      error={input.invalid ? \"Use 0-100\" : undefined}\n    />\n  );\n});\n"],"mappings":"AA0CI;AA1CJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AAGtB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAE9B,MAAM,wBAAwB,KAAK,SAASA,uBAAsB;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAC1B,QAAM,SAAS,iBAAiB,CAAC,SAAqC;AACpE,UAAM,aAAa,qBAAqB,IAAI;AAE5C,QAAI,eAAe,QAAW;AAC5B,aAAO;AAAA,IACT;AAEA,aAAS,aAAa,GAAG;AAEzB,WAAO,OAAO,UAAU;AAAA,EAC1B,CAAC;AACD,QAAM,QAAQ,cAAc;AAAA,IAC1B;AAAA,IACA,OAAO,OAAO,KAAK,MAAM,KAAK,IAAI,GAAG,CAAC;AAAA,IACtC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA,cAAa;AAAA,MACb,WAAW;AAAA,MACX,OAAO,MAAM;AAAA,MACb,cAAc,MAAM;AAAA,MACpB,QAAQ,MAAM;AAAA,MACd,iBAAiB,MAAM;AAAA,MACvB,OAAO,MAAM,UAAU,cAAc;AAAA;AAAA,EACvC;AAEJ,CAAC;","names":["ColorPickerAlphaInput"]}

package/dist/components/alpha-slider.js

@@ -5,7 +5,7 @@ import { Slider } from "@impulse-ui-native/slider";
 import { useColorPickerContext } from "../hooks/use-color-picker-context.hook";
 import { ColorMotionGradient } from "./motion-gradient";
 const ColorPickerAlphaSlider = memo(function ColorPickerAlphaSlider2() {
-  const { hsva, disabled, size, gesture, motion } = useColorPickerContext();
+  const { hsva, disabled, size, tone, gesture, motion } = useColorPickerContext();
   const trackContent = useMemo(
     () => /* @__PURE__ */ jsx(ColorMotionGradient, { rgba: motion.rgba }),
     [motion.rgba]
@@ -17,6 +17,7 @@ const ColorPickerAlphaSlider = memo(function ColorPickerAlphaSlider2() {
   return /* @__PURE__ */ jsx(
     Slider,
     {
+      tone,
       min: 0,
       max: 1,
       step: 0.01,

package/dist/components/alpha-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alpha-slider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Slider } from \"@impulse-ui-native/slider\";\n\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { ColorMotionGradient } from \"./motion-gradient\";\n\nexport const ColorPickerAlphaSlider = memo(function ColorPickerAlphaSlider() {\n  const { hsva, disabled, size, gesture, motion } = useColorPickerContext();\n  const trackContent = useMemo(\n    () => <ColorMotionGradient rgba={motion.rgba} />,\n    [motion.rgba],\n  );\n  const handleComplete = useEventCallback((value: number) => {\n    gesture.setAlpha(value);\n    motion.finish();\n  });\n\n  return (\n    <Slider\n      min={0}\n      max={1}\n      step={0.01}\n      value={hsva.a}\n      onValueChange={gesture.setAlpha}\n      onValueChangeWorklet={motion.setAlpha}\n      onSlidingComplete={handleComplete}\n      disabled={disabled}\n      size={size}\n      variant=\"outlined\"\n      trackContent={trackContent}\n    />\n  );\n});\n"],"mappings":"AAWU;AAXV,SAAS,MAAM,eAAe;AAE9B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAEvB,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAE7B,MAAM,yBAAyB,KAAK,SAASA,0BAAyB;AAC3E,QAAM,EAAE,MAAM,UAAU,MAAM,SAAS,OAAO,IAAI,sBAAsB;AACxE,QAAM,eAAe;AAAA,IACnB,MAAM,oBAAC,uBAAoB,MAAM,OAAO,MAAM;AAAA,IAC9C,CAAC,OAAO,IAAI;AAAA,EACd;AACA,QAAM,iBAAiB,iBAAiB,CAAC,UAAkB;AACzD,YAAQ,SAAS,KAAK;AACtB,WAAO,OAAO;AAAA,EAChB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,KAAK;AAAA,MACZ,eAAe,QAAQ;AAAA,MACvB,sBAAsB,OAAO;AAAA,MAC7B,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ColorPickerAlphaSlider"]}
+{"version":3,"sources":["../../src/components/alpha-slider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Slider } from \"@impulse-ui-native/slider\";\n\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { ColorMotionGradient } from \"./motion-gradient\";\n\nexport const ColorPickerAlphaSlider = memo(function ColorPickerAlphaSlider() {\n  const { hsva, disabled, size, tone, gesture, motion } =\n    useColorPickerContext();\n  const trackContent = useMemo(\n    () => <ColorMotionGradient rgba={motion.rgba} />,\n    [motion.rgba],\n  );\n  const handleComplete = useEventCallback((value: number) => {\n    gesture.setAlpha(value);\n    motion.finish();\n  });\n\n  return (\n    <Slider\n      tone={tone}\n      min={0}\n      max={1}\n      step={0.01}\n      value={hsva.a}\n      onValueChange={gesture.setAlpha}\n      onValueChangeWorklet={motion.setAlpha}\n      onSlidingComplete={handleComplete}\n      disabled={disabled}\n      size={size}\n      variant=\"outlined\"\n      trackContent={trackContent}\n    />\n  );\n});\n"],"mappings":"AAYU;AAZV,SAAS,MAAM,eAAe;AAE9B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAEvB,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AAE7B,MAAM,yBAAyB,KAAK,SAASA,0BAAyB;AAC3E,QAAM,EAAE,MAAM,UAAU,MAAM,MAAM,SAAS,OAAO,IAClD,sBAAsB;AACxB,QAAM,eAAe;AAAA,IACnB,MAAM,oBAAC,uBAAoB,MAAM,OAAO,MAAM;AAAA,IAC9C,CAAC,OAAO,IAAI;AAAA,EACd;AACA,QAAM,iBAAiB,iBAAiB,CAAC,UAAkB;AACzD,YAAQ,SAAS,KAAK;AACtB,WAAO,OAAO;AAAA,EAChB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,KAAK;AAAA,MACZ,eAAe,QAAQ;AAAA,MACvB,sBAAsB,OAAO;AAAA,MAC7B,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ColorPickerAlphaSlider"]}

package/dist/components/apply.js

@@ -21,6 +21,7 @@ const ColorPickerApply = memo(function ColorPickerApply2({
   return /* @__PURE__ */ jsx(
     Button,
     {
+      tone: picker.tone,
       size: picker.size,
       ...props,
       loading,

package/dist/components/apply.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/apply.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Button } from \"@impulse-ui-native/primitives\";\n\nimport type { ColorPickerActionProps } from \"../types\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\n\nexport const ColorPickerApply = memo(function ColorPickerApply({\n  disabled,\n  loading,\n  onPress,\n  ...props\n}: ColorPickerActionProps) {\n  const picker = useColorPickerContext();\n  const blocked = picker.disabled || disabled === true || loading === true;\n  const handlePress = useEventCallback((event: GestureResponderEvent) => {\n    if (blocked) {\n      return;\n    }\n\n    picker.apply();\n    onPress?.(event);\n  });\n\n  return (\n    <Button\n      size={picker.size}\n      {...props}\n      loading={loading}\n      disabled={blocked}\n      onPress={handlePress}\n    />\n  );\n});\n"],"mappings":"AA2BI;AA1BJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAGvB,SAAS,6BAA6B;AAE/B,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,sBAAsB;AACrC,QAAM,UAAU,OAAO,YAAY,aAAa,QAAQ,YAAY;AACpE,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,SAAS;AACX;AAAA,IACF;AAEA,WAAO,MAAM;AACb,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO;AAAA,MACZ,GAAG;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;","names":["ColorPickerApply"]}
+{"version":3,"sources":["../../src/components/apply.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Button } from \"@impulse-ui-native/primitives\";\n\nimport type { ColorPickerActionProps } from \"../types\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\n\nexport const ColorPickerApply = memo(function ColorPickerApply({\n  disabled,\n  loading,\n  onPress,\n  ...props\n}: ColorPickerActionProps) {\n  const picker = useColorPickerContext();\n  const blocked = picker.disabled || disabled === true || loading === true;\n  const handlePress = useEventCallback((event: GestureResponderEvent) => {\n    if (blocked) {\n      return;\n    }\n\n    picker.apply();\n    onPress?.(event);\n  });\n\n  return (\n    <Button\n      tone={picker.tone}\n      size={picker.size}\n      {...props}\n      loading={loading}\n      disabled={blocked}\n      onPress={handlePress}\n    />\n  );\n});\n"],"mappings":"AA2BI;AA1BJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAGvB,SAAS,6BAA6B;AAE/B,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,sBAAsB;AACrC,QAAM,UAAU,OAAO,YAAY,aAAa,QAAQ,YAAY;AACpE,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,SAAS;AACX;AAAA,IACF;AAEA,WAAO,MAAM;AACb,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACZ,GAAG;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;","names":["ColorPickerApply"]}

package/dist/components/cancel.js

@@ -21,6 +21,7 @@ const ColorPickerCancel = memo(function ColorPickerCancel2({
   return /* @__PURE__ */ jsx(
     Button,
     {
+      tone: picker.tone,
       size: picker.size,
       variant: "outlined",
       ...props,

package/dist/components/cancel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/cancel.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Button } from \"@impulse-ui-native/primitives\";\n\nimport type { ColorPickerActionProps } from \"../types\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\n\nexport const ColorPickerCancel = memo(function ColorPickerCancel({\n  disabled,\n  loading,\n  onPress,\n  ...props\n}: ColorPickerActionProps) {\n  const picker = useColorPickerContext();\n  const blocked = picker.disabled || disabled === true || loading === true;\n  const handlePress = useEventCallback((event: GestureResponderEvent) => {\n    if (blocked) {\n      return;\n    }\n\n    picker.cancel();\n    onPress?.(event);\n  });\n\n  return (\n    <Button\n      size={picker.size}\n      variant=\"outlined\"\n      {...props}\n      loading={loading}\n      disabled={blocked}\n      onPress={handlePress}\n    />\n  );\n});\n"],"mappings":"AA2BI;AA1BJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAGvB,SAAS,6BAA6B;AAE/B,MAAM,oBAAoB,KAAK,SAASA,mBAAkB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,sBAAsB;AACrC,QAAM,UAAU,OAAO,YAAY,aAAa,QAAQ,YAAY;AACpE,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,SAAS;AACX;AAAA,IACF;AAEA,WAAO,OAAO;AACd,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;","names":["ColorPickerCancel"]}
+{"version":3,"sources":["../../src/components/cancel.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\nimport { memo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Button } from \"@impulse-ui-native/primitives\";\n\nimport type { ColorPickerActionProps } from \"../types\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\n\nexport const ColorPickerCancel = memo(function ColorPickerCancel({\n  disabled,\n  loading,\n  onPress,\n  ...props\n}: ColorPickerActionProps) {\n  const picker = useColorPickerContext();\n  const blocked = picker.disabled || disabled === true || loading === true;\n  const handlePress = useEventCallback((event: GestureResponderEvent) => {\n    if (blocked) {\n      return;\n    }\n\n    picker.cancel();\n    onPress?.(event);\n  });\n\n  return (\n    <Button\n      tone={picker.tone}\n      size={picker.size}\n      variant=\"outlined\"\n      {...props}\n      loading={loading}\n      disabled={blocked}\n      onPress={handlePress}\n    />\n  );\n});\n"],"mappings":"AA2BI;AA1BJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAGvB,SAAS,6BAA6B;AAE/B,MAAM,oBAAoB,KAAK,SAASA,mBAAkB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,sBAAsB;AACrC,QAAM,UAAU,OAAO,YAAY,aAAa,QAAQ,YAAY;AACpE,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,SAAS;AACX;AAAA,IACF;AAEA,WAAO,OAAO;AACd,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA;AAAA,EACX;AAEJ,CAAC;","names":["ColorPickerCancel"]}

package/dist/components/channel-input.js

@@ -11,7 +11,14 @@ const ColorPickerChannelInput = memo(function ColorPickerChannelInput2({
   variant,
   tone
 }) {
-  const { rgba, disabled, size, setChannel, resetKey } = useColorPickerContext();
+  const {
+    rgba,
+    disabled,
+    size,
+    tone: rootTone,
+    setChannel,
+    resetKey
+  } = useColorPickerContext();
   const commit = useEventCallback((text) => {
     const number = parseColorChannel(text);
     if (number === void 0) {
@@ -31,7 +38,7 @@ const ColorPickerChannelInput = memo(function ColorPickerChannelInput2({
     {
       label,
       variant,
-      tone,
+      tone: tone ?? rootTone,
       size,
       disabled,
       keyboardType: "number-pad",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/channel-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 { ColorPickerChannelInputProps } from \"../types\";\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseColorChannel } from \"../utils/color.utils\";\n\nexport const ColorPickerChannelInput = memo(function ColorPickerChannelInput({\n  channel,\n  label,\n  variant,\n  tone,\n}: ColorPickerChannelInputProps) {\n  const { rgba, disabled, size, setChannel, resetKey } =\n    useColorPickerContext();\n  const commit = useEventCallback((text: string): string | undefined => {\n    const number = parseColorChannel(text);\n\n    if (number === undefined) {\n      return undefined;\n    }\n\n    setChannel(channel, number);\n\n    return String(number);\n  });\n  const input = useColorInput({\n    resetKey,\n    value: String(rgba[channel]),\n    disabled,\n    commit,\n  });\n\n  return (\n    <Input\n      label={label}\n      variant={variant}\n      tone={tone}\n      size={size}\n      disabled={disabled}\n      keyboardType=\"number-pad\"\n      maxLength={3}\n      value={input.text}\n      onChangeText={input.onChangeText}\n      onBlur={input.onCommit}\n      onSubmitEditing={input.onCommit}\n      error={input.invalid ? \"Use 0-255\" : undefined}\n    />\n  );\n});\n"],"mappings":"AAqCI;AArCJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AAGtB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAE3B,MAAM,0BAA0B,KAAK,SAASA,yBAAwB;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,EAAE,MAAM,UAAU,MAAM,YAAY,SAAS,IACjD,sBAAsB;AACxB,QAAM,SAAS,iBAAiB,CAAC,SAAqC;AACpE,UAAM,SAAS,kBAAkB,IAAI;AAErC,QAAI,WAAW,QAAW;AACxB,aAAO;AAAA,IACT;AAEA,eAAW,SAAS,MAAM;AAE1B,WAAO,OAAO,MAAM;AAAA,EACtB,CAAC;AACD,QAAM,QAAQ,cAAc;AAAA,IAC1B;AAAA,IACA,OAAO,OAAO,KAAK,OAAO,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAa;AAAA,MACb,WAAW;AAAA,MACX,OAAO,MAAM;AAAA,MACb,cAAc,MAAM;AAAA,MACpB,QAAQ,MAAM;AAAA,MACd,iBAAiB,MAAM;AAAA,MACvB,OAAO,MAAM,UAAU,cAAc;AAAA;AAAA,EACvC;AAEJ,CAAC;","names":["ColorPickerChannelInput"]}
+{"version":3,"sources":["../../src/components/channel-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 { ColorPickerChannelInputProps } from \"../types\";\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseColorChannel } from \"../utils/color.utils\";\n\nexport const ColorPickerChannelInput = memo(function ColorPickerChannelInput({\n  channel,\n  label,\n  variant,\n  tone,\n}: ColorPickerChannelInputProps) {\n  const {\n    rgba,\n    disabled,\n    size,\n    tone: rootTone,\n    setChannel,\n    resetKey,\n  } = useColorPickerContext();\n  const commit = useEventCallback((text: string): string | undefined => {\n    const number = parseColorChannel(text);\n\n    if (number === undefined) {\n      return undefined;\n    }\n\n    setChannel(channel, number);\n\n    return String(number);\n  });\n  const input = useColorInput({\n    resetKey,\n    value: String(rgba[channel]),\n    disabled,\n    commit,\n  });\n\n  return (\n    <Input\n      label={label}\n      variant={variant}\n      tone={tone ?? rootTone}\n      size={size}\n      disabled={disabled}\n      keyboardType=\"number-pad\"\n      maxLength={3}\n      value={input.text}\n      onChangeText={input.onChangeText}\n      onBlur={input.onCommit}\n      onSubmitEditing={input.onCommit}\n      error={input.invalid ? \"Use 0-255\" : undefined}\n    />\n  );\n});\n"],"mappings":"AA2CI;AA3CJ,SAAS,YAAY;AAErB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AAGtB,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAE3B,MAAM,0BAA0B,KAAK,SAASA,yBAAwB;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAC1B,QAAM,SAAS,iBAAiB,CAAC,SAAqC;AACpE,UAAM,SAAS,kBAAkB,IAAI;AAErC,QAAI,WAAW,QAAW;AACxB,aAAO;AAAA,IACT;AAEA,eAAW,SAAS,MAAM;AAE1B,WAAO,OAAO,MAAM;AAAA,EACtB,CAAC;AACD,QAAM,QAAQ,cAAc;AAAA,IAC1B;AAAA,IACA,OAAO,OAAO,KAAK,OAAO,CAAC;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA,cAAa;AAAA,MACb,WAAW;AAAA,MACX,OAAO,MAAM;AAAA,MACb,cAAc,MAAM;AAAA,MACpB,QAAQ,MAAM;AAAA,MACd,iBAAiB,MAAM;AAAA,MACvB,OAAO,MAAM,UAAU,cAAc;AAAA;AAAA,EACvC;AAEJ,CAAC;","names":["ColorPickerChannelInput"]}

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

@@ -2,6 +2,6 @@ import * as react from 'react';
 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.Element>;
+declare const ColorPickerHexInput: react.MemoExoticComponent<({ disabled: disabledProp, onBlur, onSubmitEditing, error, tone, ...props }: ColorPickerHexInputProps) => react.JSX.Element>;
 
 export { ColorPickerHexInput };

package/dist/components/hex-input.js

@@ -10,12 +10,14 @@ const ColorPickerHexInput = memo(function ColorPickerHexInput2({
   onBlur,
   onSubmitEditing,
   error,
+  tone,
   ...props
 }) {
   const {
     value,
     disabled: rootDisabled,
     size,
+    tone: rootTone,
     setColor,
     resetKey
   } = useColorPickerContext();
@@ -40,6 +42,7 @@ const ColorPickerHexInput = memo(function ColorPickerHexInput2({
   return /* @__PURE__ */ jsx(
     Input,
     {
+      tone: tone ?? rootTone,
       size,
       autoCapitalize: "characters",
       autoCorrect: false,

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  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"]}
+{"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  tone,\n  ...props\n}: ColorPickerHexInputProps) {\n  const {\n    value,\n    disabled: rootDisabled,\n    size,\n    tone: rootTone,\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      tone={tone ?? rootTone}\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":"AAsDI;AAtDJ,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;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,MAAM;AAAA,IACN;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,MAAM,QAAQ;AAAA,MACd;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.js

@@ -6,7 +6,7 @@ import { HueStops } from "../constants/color.constants";
 import { useColorPickerContext } from "../hooks/use-color-picker-context.hook";
 import { ColorGradient } from "./gradient";
 const ColorPickerHueSlider = memo(function ColorPickerHueSlider2() {
-  const { hsva, disabled, size, gesture, motion } = useColorPickerContext();
+  const { hsva, disabled, size, tone, gesture, motion } = useColorPickerContext();
   const trackContent = useMemo(() => /* @__PURE__ */ jsx(ColorGradient, { colors: HueStops }), []);
   const handleComplete = useEventCallback((value) => {
     gesture.setHue(value);
@@ -15,6 +15,7 @@ const ColorPickerHueSlider = memo(function ColorPickerHueSlider2() {
   return /* @__PURE__ */ jsx(
     Slider,
     {
+      tone,
       min: 0,
       max: 360,
       step: 1,

package/dist/components/hue-slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/hue-slider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Slider } from \"@impulse-ui-native/slider\";\n\nimport { HueStops } from \"../constants/color.constants\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { ColorGradient } from \"./gradient\";\n\nexport const ColorPickerHueSlider = memo(function ColorPickerHueSlider() {\n  const { hsva, disabled, size, gesture, motion } = useColorPickerContext();\n  const trackContent = useMemo(() => <ColorGradient colors={HueStops} />, []);\n  const handleComplete = useEventCallback((value: number) => {\n    gesture.setHue(value);\n    motion.finish();\n  });\n\n  return (\n    <Slider\n      min={0}\n      max={360}\n      step={1}\n      value={hsva.h}\n      onValueChange={gesture.setHue}\n      onValueChangeWorklet={motion.setHue}\n      onSlidingComplete={handleComplete}\n      disabled={disabled}\n      size={size}\n      variant=\"outlined\"\n      trackContent={trackContent}\n    />\n  );\n});\n"],"mappings":"AAWqC;AAXrC,SAAS,MAAM,eAAe;AAE9B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAEvB,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAEvB,MAAM,uBAAuB,KAAK,SAASA,wBAAuB;AACvE,QAAM,EAAE,MAAM,UAAU,MAAM,SAAS,OAAO,IAAI,sBAAsB;AACxE,QAAM,eAAe,QAAQ,MAAM,oBAAC,iBAAc,QAAQ,UAAU,GAAI,CAAC,CAAC;AAC1E,QAAM,iBAAiB,iBAAiB,CAAC,UAAkB;AACzD,YAAQ,OAAO,KAAK;AACpB,WAAO,OAAO;AAAA,EAChB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,KAAK;AAAA,MACZ,eAAe,QAAQ;AAAA,MACvB,sBAAsB,OAAO;AAAA,MAC7B,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ColorPickerHueSlider"]}
+{"version":3,"sources":["../../src/components/hue-slider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Slider } from \"@impulse-ui-native/slider\";\n\nimport { HueStops } from \"../constants/color.constants\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { ColorGradient } from \"./gradient\";\n\nexport const ColorPickerHueSlider = memo(function ColorPickerHueSlider() {\n  const { hsva, disabled, size, tone, gesture, motion } =\n    useColorPickerContext();\n  const trackContent = useMemo(() => <ColorGradient colors={HueStops} />, []);\n  const handleComplete = useEventCallback((value: number) => {\n    gesture.setHue(value);\n    motion.finish();\n  });\n\n  return (\n    <Slider\n      tone={tone}\n      min={0}\n      max={360}\n      step={1}\n      value={hsva.h}\n      onValueChange={gesture.setHue}\n      onValueChangeWorklet={motion.setHue}\n      onSlidingComplete={handleComplete}\n      disabled={disabled}\n      size={size}\n      variant=\"outlined\"\n      trackContent={trackContent}\n    />\n  );\n});\n"],"mappings":"AAYqC;AAZrC,SAAS,MAAM,eAAe;AAE9B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AAEvB,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAEvB,MAAM,uBAAuB,KAAK,SAASA,wBAAuB;AACvE,QAAM,EAAE,MAAM,UAAU,MAAM,MAAM,SAAS,OAAO,IAClD,sBAAsB;AACxB,QAAM,eAAe,QAAQ,MAAM,oBAAC,iBAAc,QAAQ,UAAU,GAAI,CAAC,CAAC;AAC1E,QAAM,iBAAiB,iBAAiB,CAAC,UAAkB;AACzD,YAAQ,OAAO,KAAK;AACpB,WAAO,OAAO;AAAA,EAChB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,KAAK;AAAA,MACZ,eAAe,QAAQ;AAAA,MACvB,sBAAsB,OAAO;AAAA,MAC7B,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ColorPickerHueSlider"]}

package/dist/components/root.d.mts

@@ -5,6 +5,6 @@ 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.Element>;
+declare const ColorPickerRoot: react.MemoExoticComponent<({ children, style, value, defaultValue, onChange, disabled, size, commitMode, tone, ...props }: ColorPickerRootProps) => react.JSX.Element>;
 
 export { ColorPickerRoot };

package/dist/components/root.js

@@ -14,6 +14,7 @@ const ColorPickerRoot = memo(function ColorPickerRoot2({
   disabled,
   size,
   commitMode,
+  tone,
   ...props
 }) {
   const context = useColorPicker({
@@ -22,7 +23,8 @@ const ColorPickerRoot = memo(function ColorPickerRoot2({
     onChange,
     disabled,
     size,
-    commitMode
+    commitMode,
+    tone
   });
   const styles = useThemedStyles(themedStyles);
   const extractedStyleProps = useStyleProps(props);

package/dist/components/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ColorPickerRootProps } from \"../types\";\nimport { ColorPickerContext } from \"../contexts/color-picker.context\";\nimport { useColorPicker } from \"../hooks/use-color-picker.hook\";\n\nexport const ColorPickerRoot = memo(function ColorPickerRoot({\n  children,\n  style,\n  value,\n  defaultValue,\n  onChange,\n  disabled,\n  size,\n  commitMode,\n  ...props\n}: ColorPickerRootProps) {\n  const context = useColorPicker({\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    size,\n    commitMode,\n  });\n  const styles = useThemedStyles(themedStyles);\n  const extractedStyleProps = useStyleProps(props);\n  const rootStyle = useMemo(\n    () => [styles.root, extractedStyleProps, style],\n    [styles.root, extractedStyleProps, style],\n  );\n\n  return (\n    <ColorPickerContext.Provider value={context}>\n      <View {...props} style={rootStyle}>\n        {children}\n      </View>\n    </ColorPickerContext.Provider>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.colorPicker;\n\n  return StyleSheet.create({\n    root: {\n      gap: tokens.gap,\n      padding: tokens.padding,\n      borderRadius: tokens.borderRadius,\n      borderWidth: tokens.borderWidth,\n      borderColor: tokens.borderColor,\n      backgroundColor: tokens.backgroundColor,\n    },\n  });\n}\n"],"mappings":"AAuCM;AAvCN,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAG/C,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAAgB;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,eAAe;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,SAClC,8BAAC,QAAM,GAAG,OAAO,OAAO,WACrB,UACH,GACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,SAAS,OAAO;AAAA,MAChB,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,iBAAiB,OAAO;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ColorPickerRoot"]}
+{"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ColorPickerRootProps } from \"../types\";\nimport { ColorPickerContext } from \"../contexts/color-picker.context\";\nimport { useColorPicker } from \"../hooks/use-color-picker.hook\";\n\nexport const ColorPickerRoot = memo(function ColorPickerRoot({\n  children,\n  style,\n  value,\n  defaultValue,\n  onChange,\n  disabled,\n  size,\n  commitMode,\n  tone,\n  ...props\n}: ColorPickerRootProps) {\n  const context = useColorPicker({\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    size,\n    commitMode,\n    tone,\n  });\n  const styles = useThemedStyles(themedStyles);\n  const extractedStyleProps = useStyleProps(props);\n  const rootStyle = useMemo(\n    () => [styles.root, extractedStyleProps, style],\n    [styles.root, extractedStyleProps, style],\n  );\n\n  return (\n    <ColorPickerContext.Provider value={context}>\n      <View {...props} style={rootStyle}>\n        {children}\n      </View>\n    </ColorPickerContext.Provider>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.colorPicker;\n\n  return StyleSheet.create({\n    root: {\n      gap: tokens.gap,\n      padding: tokens.padding,\n      borderRadius: tokens.borderRadius,\n      borderWidth: tokens.borderWidth,\n      borderColor: tokens.borderColor,\n      backgroundColor: tokens.backgroundColor,\n    },\n  });\n}\n"],"mappings":"AAyCM;AAzCN,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAG/C,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAAgB;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,eAAe;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,SAClC,8BAAC,QAAM,GAAG,OAAO,OAAO,WACrB,UACH,GACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,SAAS,OAAO;AAAA,MAChB,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,iBAAiB,OAAO;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ColorPickerRoot"]}

package/dist/components/swatch.js

@@ -19,16 +19,17 @@ const ColorPickerSwatch = memo(function ColorPickerSwatch2({
     value,
     disabled: rootDisabled,
     size,
-    setColor
+    setColor,
+    tone
   } = useColorPickerContext();
   const parsed = parseHexColor(color);
   const disabled = rootDisabled || disabledProp === true || parsed === void 0;
   const selected = parsed !== void 0 && rgbaToHex(parsed) === value;
-  const styles = useThemedStyles(themedStyles, { size, disabled, selected }, [
-    size,
-    disabled,
-    selected
-  ]);
+  const styles = useThemedStyles(
+    themedStyles,
+    { size, disabled, selected, tone },
+    [size, disabled, selected, tone]
+  );
   const colors = useMemo(() => [color, color], [color]);
   const swatchStyle = useCallback(
     (state) => [
@@ -58,7 +59,7 @@ const ColorPickerSwatch = memo(function ColorPickerSwatch2({
     }
   );
 });
-function themedStyles(theme, { size, selected }) {
+function themedStyles(theme, { size, selected, tone, disabled }) {
   const tokens = theme.components.colorPicker;
   const sizeTokens = tokens.sizes[size];
   return StyleSheet.create({
@@ -72,7 +73,7 @@ function themedStyles(theme, { size, selected }) {
       padding: tokens.swatchRingPadding,
       borderRadius: tokens.swatchBorderRadius,
       borderWidth: tokens.swatchRingBorderWidth,
-      borderColor: selected ? tokens.selectedBorderColor : "transparent"
+      borderColor: selected ? disabled ? tokens.disabledBorderColor : tokens.colors[tone].selectedBorderColor : "transparent"
     },
     color: {
       width: sizeTokens.swatchSize,

package/dist/components/swatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swatch.tsx"],"sourcesContent":["import type {\n  GestureResponderEvent,\n  PressableStateCallbackType,\n} from \"react-native\";\nimport { memo, useCallback, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type {\n  ColorPickerSwatchProps,\n  ColorPickerSwatchThemeProps,\n} from \"../types\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\nimport { ColorGradient } from \"./gradient\";\n\nexport const ColorPickerSwatch = memo(function ColorPickerSwatch({\n  color,\n  children,\n  disabled: disabledProp,\n  style,\n  onPress,\n  ...props\n}: ColorPickerSwatchProps) {\n  const {\n    value,\n    disabled: rootDisabled,\n    size,\n    setColor,\n  } = useColorPickerContext();\n  const parsed = parseHexColor(color);\n  const disabled =\n    rootDisabled || disabledProp === true || parsed === undefined;\n  const selected = parsed !== undefined && rgbaToHex(parsed) === value;\n  const styles = useThemedStyles(themedStyles, { size, disabled, selected }, [\n    size,\n    disabled,\n    selected,\n  ]);\n  const colors = useMemo(() => [color, color], [color]);\n  const swatchStyle = useCallback(\n    (state: PressableStateCallbackType) => [\n      styles.target,\n      typeof style === \"function\" ? style(state) : style,\n    ],\n    [styles.target, style],\n  );\n  const handlePress = useEventCallback((event: GestureResponderEvent) => {\n    if (disabled) {\n      return;\n    }\n\n    setColor(color);\n    onPress?.(event);\n  });\n\n  return (\n    <Pressable\n      {...props}\n      disabled={disabled}\n      style={swatchStyle}\n      onPress={handlePress}\n    >\n      <View style={styles.ring}>\n        <View style={styles.color}>\n          <ColorGradient colors={colors} checkerboard />\n          <View style={styles.content}>{children}</View>\n        </View>\n      </View>\n    </Pressable>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, selected }: ColorPickerSwatchThemeProps,\n) {\n  const tokens = theme.components.colorPicker;\n  const sizeTokens = tokens.sizes[size];\n\n  return StyleSheet.create({\n    target: {\n      minWidth: sizeTokens.swatchTargetSize,\n      minHeight: sizeTokens.swatchTargetSize,\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    ring: {\n      padding: tokens.swatchRingPadding,\n      borderRadius: tokens.swatchBorderRadius,\n      borderWidth: tokens.swatchRingBorderWidth,\n      borderColor: selected ? tokens.selectedBorderColor : \"transparent\",\n    },\n    color: {\n      width: sizeTokens.swatchSize,\n      height: sizeTokens.swatchSize,\n      borderRadius: tokens.swatchBorderRadius,\n      borderWidth: tokens.borderWidth,\n      borderColor: tokens.borderColor,\n      overflow: \"hidden\",\n    },\n    content: {\n      ...StyleSheet.flatten(StyleSheet.absoluteFill),\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  });\n}\n"],"mappings":"AAoEQ,SACE,KADF;AAhER,SAAS,MAAM,aAAa,eAAe;AAC3C,SAAS,kBAAkB;AAG3B,SAAS,wBAAwB;AACjC,SAAS,WAAW,YAAY;AAChC,SAAS,uBAAuB;AAMhC,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AACzC,SAAS,qBAAqB;AAEvB,MAAM,oBAAoB,KAAK,SAASA,mBAAkB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAC1B,QAAM,SAAS,cAAc,KAAK;AAClC,QAAM,WACJ,gBAAgB,iBAAiB,QAAQ,WAAW;AACtD,QAAM,WAAW,WAAW,UAAa,UAAU,MAAM,MAAM;AAC/D,QAAM,SAAS,gBAAgB,cAAc,EAAE,MAAM,UAAU,SAAS,GAAG;AAAA,IACzE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,SAAS,QAAQ,MAAM,CAAC,OAAO,KAAK,GAAG,CAAC,KAAK,CAAC;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AACA,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,UAAU;AACZ;AAAA,IACF;AAEA,aAAS,KAAK;AACd,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MAET,8BAAC,QAAK,OAAO,OAAO,MAClB,+BAAC,QAAK,OAAO,OAAO,OAClB;AAAA,4BAAC,iBAAc,QAAgB,cAAY,MAAC;AAAA,QAC5C,oBAAC,QAAK,OAAO,OAAO,SAAU,UAAS;AAAA,SACzC,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,GACjB;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,IAAI;AAEpC,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,UAAU,WAAW;AAAA,MACrB,WAAW,WAAW;AAAA,MACtB,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO;AAAA,MAChB,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,aAAa,WAAW,OAAO,sBAAsB;AAAA,IACvD;AAAA,IACA,OAAO;AAAA,MACL,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MACnB,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,GAAG,WAAW,QAAQ,WAAW,YAAY;AAAA,MAC7C,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,EACF,CAAC;AACH;","names":["ColorPickerSwatch"]}
+{"version":3,"sources":["../../src/components/swatch.tsx"],"sourcesContent":["import type {\n  GestureResponderEvent,\n  PressableStateCallbackType,\n} from \"react-native\";\nimport { memo, useCallback, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type {\n  ColorPickerSwatchProps,\n  ColorPickerSwatchThemeProps,\n} from \"../types\";\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\nimport { ColorGradient } from \"./gradient\";\n\nexport const ColorPickerSwatch = memo(function ColorPickerSwatch({\n  color,\n  children,\n  disabled: disabledProp,\n  style,\n  onPress,\n  ...props\n}: ColorPickerSwatchProps) {\n  const {\n    value,\n    disabled: rootDisabled,\n    size,\n    setColor,\n    tone,\n  } = useColorPickerContext();\n  const parsed = parseHexColor(color);\n  const disabled =\n    rootDisabled || disabledProp === true || parsed === undefined;\n  const selected = parsed !== undefined && rgbaToHex(parsed) === value;\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, disabled, selected, tone },\n    [size, disabled, selected, tone],\n  );\n  const colors = useMemo(() => [color, color], [color]);\n  const swatchStyle = useCallback(\n    (state: PressableStateCallbackType) => [\n      styles.target,\n      typeof style === \"function\" ? style(state) : style,\n    ],\n    [styles.target, style],\n  );\n  const handlePress = useEventCallback((event: GestureResponderEvent) => {\n    if (disabled) {\n      return;\n    }\n\n    setColor(color);\n    onPress?.(event);\n  });\n\n  return (\n    <Pressable\n      {...props}\n      disabled={disabled}\n      style={swatchStyle}\n      onPress={handlePress}\n    >\n      <View style={styles.ring}>\n        <View style={styles.color}>\n          <ColorGradient colors={colors} checkerboard />\n          <View style={styles.content}>{children}</View>\n        </View>\n      </View>\n    </Pressable>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, selected, tone, disabled }: ColorPickerSwatchThemeProps,\n) {\n  const tokens = theme.components.colorPicker;\n  const sizeTokens = tokens.sizes[size];\n\n  return StyleSheet.create({\n    target: {\n      minWidth: sizeTokens.swatchTargetSize,\n      minHeight: sizeTokens.swatchTargetSize,\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    ring: {\n      padding: tokens.swatchRingPadding,\n      borderRadius: tokens.swatchBorderRadius,\n      borderWidth: tokens.swatchRingBorderWidth,\n      borderColor: selected\n        ? disabled\n          ? tokens.disabledBorderColor\n          : tokens.colors[tone].selectedBorderColor\n        : \"transparent\",\n    },\n    color: {\n      width: sizeTokens.swatchSize,\n      height: sizeTokens.swatchSize,\n      borderRadius: tokens.swatchBorderRadius,\n      borderWidth: tokens.borderWidth,\n      borderColor: tokens.borderColor,\n      overflow: \"hidden\",\n    },\n    content: {\n      ...StyleSheet.flatten(StyleSheet.absoluteFill),\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  });\n}\n"],"mappings":"AAqEQ,SACE,KADF;AAjER,SAAS,MAAM,aAAa,eAAe;AAC3C,SAAS,kBAAkB;AAG3B,SAAS,wBAAwB;AACjC,SAAS,WAAW,YAAY;AAChC,SAAS,uBAAuB;AAMhC,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AACzC,SAAS,qBAAqB;AAEvB,MAAM,oBAAoB,KAAK,SAASA,mBAAkB;AAAA,EAC/D;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAC1B,QAAM,SAAS,cAAc,KAAK;AAClC,QAAM,WACJ,gBAAgB,iBAAiB,QAAQ,WAAW;AACtD,QAAM,WAAW,WAAW,UAAa,UAAU,MAAM,MAAM;AAC/D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,UAAU,UAAU,KAAK;AAAA,IACjC,CAAC,MAAM,UAAU,UAAU,IAAI;AAAA,EACjC;AACA,QAAM,SAAS,QAAQ,MAAM,CAAC,OAAO,KAAK,GAAG,CAAC,KAAK,CAAC;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AACA,QAAM,cAAc,iBAAiB,CAAC,UAAiC;AACrE,QAAI,UAAU;AACZ;AAAA,IACF;AAEA,aAAS,KAAK;AACd,cAAU,KAAK;AAAA,EACjB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MAET,8BAAC,QAAK,OAAO,OAAO,MAClB,+BAAC,QAAK,OAAO,OAAO,OAClB;AAAA,4BAAC,iBAAc,QAAgB,cAAY,MAAC;AAAA,QAC5C,oBAAC,QAAK,OAAO,OAAO,SAAU,UAAS;AAAA,SACzC,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,UAAU,MAAM,SAAS,GACjC;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,IAAI;AAEpC,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,UAAU,WAAW;AAAA,MACrB,WAAW,WAAW;AAAA,MACtB,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,OAAO;AAAA,MAChB,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,aAAa,WACT,WACE,OAAO,sBACP,OAAO,OAAO,IAAI,EAAE,sBACtB;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MACnB,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,GAAG,WAAW,QAAQ,WAAW,YAAY;AAAA,MAC7C,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,EACF,CAAC;AACH;","names":["ColorPickerSwatch"]}

package/dist/hooks/use-color-picker.hook.d.mts

@@ -7,6 +7,6 @@ import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';
 import 'react-native-reanimated';
 
-declare function useColorPicker({ value, defaultValue, onChange, disabled, size, commitMode, }: ColorPickerRootProps): ColorPickerContextData;
+declare function useColorPicker({ value, defaultValue, onChange, disabled, size, commitMode, tone, }: ColorPickerRootProps): ColorPickerContextData;
 
 export { useColorPicker };

package/dist/hooks/use-color-picker.hook.js

@@ -20,7 +20,8 @@ function useColorPicker({
   onChange,
   disabled = false,
   size = "medium",
-  commitMode = "immediate"
+  commitMode = "immediate",
+  tone = "primary"
 }) {
   const theme = useTheme();
   const [draft, setDraft] = useState();
@@ -184,6 +185,7 @@ function useColorPicker({
       disabled,
       size,
       commitMode,
+      tone,
       setColor,
       setHue,
       setAlpha,
@@ -202,6 +204,7 @@ function useColorPicker({
       disabled,
       size,
       commitMode,
+      tone,
       setColor,
       setHue,
       setAlpha,

package/dist/hooks/use-color-picker.hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-color-picker.hook.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n  useControllableState,\n  useEventCallback,\n} from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport type {\n  ColorChannel,\n  ColorPickerContextData,\n  ColorPickerDraft,\n  ColorPickerRootProps,\n  HsvaColor,\n} from \"../types\";\nimport { FallbackColor } from \"../constants/color.constants\";\nimport {\n  clampColorValue,\n  hsvaToHex,\n  hsvaToRgba,\n  parseHexColor,\n  rgbaToHex,\n  rgbaToHsva,\n} from \"../utils/color.utils\";\nimport { useColorPickerMotion } from \"./use-color-picker-motion.hook\";\n\nexport function useColorPicker({\n  value,\n  defaultValue,\n  onChange,\n  disabled = false,\n  size = \"medium\",\n  commitMode = \"immediate\",\n}: ColorPickerRootProps): ColorPickerContextData {\n  const theme = useTheme();\n  const [draft, setDraft] = useState<ColorPickerDraft>();\n  const [resetKey, setResetKey] = useState(0);\n  const [interactionSnapshot, setInteractionSnapshot] = useState<HsvaColor>();\n  const interactionActive = useRef(false);\n  const [committed, setCommitted] = useControllableState<string>({\n    prop: value,\n    defaultProp: defaultValue ?? theme.colors.primary.value,\n    onChange,\n  });\n  const base = useMemo(\n    () =>\n      rgbaToHex(\n        parseHexColor(committed) ??\n          parseHexColor(theme.colors.primary.value) ??\n          FallbackColor,\n      ),\n    [committed, theme.colors.primary.value],\n  );\n  const hsva = useMemo(\n    () =>\n      interactionSnapshot ??\n      (draft?.base === base && draft.commitMode === commitMode\n        ? draft.hsva\n        : rgbaToHsva(parseHexColor(base) ?? FallbackColor)),\n    [base, draft, commitMode, interactionSnapshot],\n  );\n  const rgba = useMemo(() => hsvaToRgba(hsva), [hsva]);\n  const currentValue = rgbaToHex(rgba);\n  const hsvaRef = useRef(hsva);\n  const visualMotion = useColorPickerMotion(hsva, resetKey);\n\n  const update = useEventCallback((next: HsvaColor, fromGesture = false) => {\n    const current = hsvaRef.current;\n\n    if (\n      disabled ||\n      (next.h === current.h &&\n        next.s === current.s &&\n        next.v === current.v &&\n        next.a === current.a)\n    ) {\n      return;\n    }\n\n    if (fromGesture && !interactionActive.current) {\n      interactionActive.current = true;\n      setInteractionSnapshot(current);\n    }\n\n    if (!fromGesture && interactionActive.current) {\n      interactionActive.current = false;\n      setInteractionSnapshot(undefined);\n      visualMotion.finish();\n    }\n\n    hsvaRef.current = next;\n\n    const nextValue = hsvaToHex(next);\n    if (!fromGesture) {\n      setDraft({\n        commitMode,\n        base: commitMode === \"immediate\" ? nextValue : base,\n        hsva: next,\n      });\n    }\n\n    if (commitMode === \"immediate\" && nextValue !== hsvaToHex(current)) {\n      if (value !== undefined) {\n        onChange?.(nextValue);\n      } else {\n        setCommitted(nextValue);\n      }\n    }\n  });\n\n  const finishGesture = useEventCallback(() => {\n    const next = hsvaRef.current;\n    interactionActive.current = false;\n    setInteractionSnapshot(undefined);\n    setDraft({\n      commitMode,\n      base: commitMode === \"immediate\" ? hsvaToHex(next) : base,\n      hsva: next,\n    });\n\n    visualMotion.finish();\n  });\n  const setGestureHue = useEventCallback((h: number) =>\n    update({ ...hsvaRef.current, h: clampColorValue(h, 0, 360) }, true),\n  );\n  const setGestureAlpha = useEventCallback((a: number) =>\n    update({ ...hsvaRef.current, a: clampColorValue(a, 0, 1) }, true),\n  );\n  const setGestureSpectrum = useEventCallback((s: number, v: number) =>\n    update(\n      {\n        ...hsvaRef.current,\n        s: clampColorValue(s, 0, 1),\n        v: clampColorValue(v, 0, 1),\n      },\n      true,\n    ),\n  );\n  const gesture = useMemo(\n    () => ({\n      setHue: setGestureHue,\n      setAlpha: setGestureAlpha,\n      setSpectrum: setGestureSpectrum,\n    }),\n    [setGestureAlpha, setGestureHue, setGestureSpectrum],\n  );\n  const motion = useMemo(\n    () => ({ ...visualMotion, finish: finishGesture }),\n    [finishGesture, visualMotion],\n  );\n\n  const setColor = useEventCallback((next: string): boolean => {\n    const parsed = parseHexColor(next);\n\n    if (disabled || !parsed) {\n      return false;\n    }\n\n    const nextHsva = rgbaToHsva(parsed);\n    update({\n      ...nextHsva,\n      h: nextHsva.s === 0 ? hsvaRef.current.h : nextHsva.h,\n    });\n\n    return true;\n  });\n  const setHue = useEventCallback((hue: number) =>\n    update({ ...hsvaRef.current, h: clampColorValue(hue, 0, 360) }),\n  );\n  const setAlpha = useEventCallback((alpha: number) =>\n    update({ ...hsvaRef.current, a: clampColorValue(alpha, 0, 1) }),\n  );\n  const setSpectrum = useEventCallback(\n    (saturation: number, brightness: number) =>\n      update({\n        ...hsvaRef.current,\n        s: clampColorValue(saturation, 0, 1),\n        v: clampColorValue(brightness, 0, 1),\n      }),\n  );\n  const setChannel = useEventCallback(\n    (channel: ColorChannel, channelValue: number) => {\n      const next = rgbaToHsva({\n        ...hsvaToRgba(hsvaRef.current),\n        [channel]: Math.round(clampColorValue(channelValue, 0, 255)),\n      });\n      update({ ...next, h: next.s === 0 ? hsvaRef.current.h : next.h });\n    },\n  );\n  const apply = useEventCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const nextHsva = hsvaRef.current;\n    const nextValue = hsvaToHex(nextHsva);\n    interactionActive.current = false;\n    setInteractionSnapshot(undefined);\n\n    if (nextValue !== base) {\n      setCommitted(nextValue);\n    }\n\n    setDraft({ base: nextValue, hsva: nextHsva, commitMode });\n    setResetKey((key) => key + 1);\n  });\n  const cancel = useEventCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    interactionActive.current = false;\n    setInteractionSnapshot(undefined);\n    setDraft(undefined);\n    setResetKey((key) => key + 1);\n  });\n\n  const context = useMemo(\n    () => ({\n      gesture,\n      motion,\n      resetKey,\n      value: currentValue,\n      rgba,\n      hsva,\n      disabled,\n      size,\n      commitMode,\n      setColor,\n      setHue,\n      setAlpha,\n      setSpectrum,\n      setChannel,\n      apply,\n      cancel,\n    }),\n    [\n      gesture,\n      motion,\n      resetKey,\n      currentValue,\n      rgba,\n      hsva,\n      disabled,\n      size,\n      commitMode,\n      setColor,\n      setHue,\n      setAlpha,\n      setSpectrum,\n      setChannel,\n      apply,\n      cancel,\n    ],\n  );\n\n  useLayoutEffect(() => {\n    if (!interactionActive.current) {\n      hsvaRef.current = hsva;\n    }\n  }, [hsva]);\n\n  // Discard obsolete transient edits rather than restoring them if the caller\n  // later returns to a previously selected color or commit mode.\n  if (\n    draft !== undefined &&\n    (draft.base !== base || draft.commitMode !== commitMode)\n  ) {\n    setDraft(undefined);\n  }\n\n  return context;\n}\n"],"mappings":"AAAA,SAAS,iBAAiB,SAAS,QAAQ,gBAAgB;AAE3D;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AASzB,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAE9B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AACf,GAAiD;AAC/C,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA2B;AACrD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAoB;AAC1E,QAAM,oBAAoB,OAAO,KAAK;AACtC,QAAM,CAAC,WAAW,YAAY,IAAI,qBAA6B;AAAA,IAC7D,MAAM;AAAA,IACN,aAAa,gBAAgB,MAAM,OAAO,QAAQ;AAAA,IAClD;AAAA,EACF,CAAC;AACD,QAAM,OAAO;AAAA,IACX,MACE;AAAA,MACE,cAAc,SAAS,KACrB,cAAc,MAAM,OAAO,QAAQ,KAAK,KACxC;AAAA,IACJ;AAAA,IACF,CAAC,WAAW,MAAM,OAAO,QAAQ,KAAK;AAAA,EACxC;AACA,QAAM,OAAO;AAAA,IACX,MACE,wBACC,OAAO,SAAS,QAAQ,MAAM,eAAe,aAC1C,MAAM,OACN,WAAW,cAAc,IAAI,KAAK,aAAa;AAAA,IACrD,CAAC,MAAM,OAAO,YAAY,mBAAmB;AAAA,EAC/C;AACA,QAAM,OAAO,QAAQ,MAAM,WAAW,IAAI,GAAG,CAAC,IAAI,CAAC;AACnD,QAAM,eAAe,UAAU,IAAI;AACnC,QAAM,UAAU,OAAO,IAAI;AAC3B,QAAM,eAAe,qBAAqB,MAAM,QAAQ;AAExD,QAAM,SAAS,iBAAiB,CAAC,MAAiB,cAAc,UAAU;AACxE,UAAM,UAAU,QAAQ;AAExB,QACE,YACC,KAAK,MAAM,QAAQ,KAClB,KAAK,MAAM,QAAQ,KACnB,KAAK,MAAM,QAAQ,KACnB,KAAK,MAAM,QAAQ,GACrB;AACA;AAAA,IACF;AAEA,QAAI,eAAe,CAAC,kBAAkB,SAAS;AAC7C,wBAAkB,UAAU;AAC5B,6BAAuB,OAAO;AAAA,IAChC;AAEA,QAAI,CAAC,eAAe,kBAAkB,SAAS;AAC7C,wBAAkB,UAAU;AAC5B,6BAAuB,MAAS;AAChC,mBAAa,OAAO;AAAA,IACtB;AAEA,YAAQ,UAAU;AAElB,UAAM,YAAY,UAAU,IAAI;AAChC,QAAI,CAAC,aAAa;AAChB,eAAS;AAAA,QACP;AAAA,QACA,MAAM,eAAe,cAAc,YAAY;AAAA,QAC/C,MAAM;AAAA,MACR,CAAC;AAAA,IACH;AAEA,QAAI,eAAe,eAAe,cAAc,UAAU,OAAO,GAAG;AAClE,UAAI,UAAU,QAAW;AACvB,mBAAW,SAAS;AAAA,MACtB,OAAO;AACL,qBAAa,SAAS;AAAA,MACxB;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,iBAAiB,MAAM;AAC3C,UAAM,OAAO,QAAQ;AACrB,sBAAkB,UAAU;AAC5B,2BAAuB,MAAS;AAChC,aAAS;AAAA,MACP;AAAA,MACA,MAAM,eAAe,cAAc,UAAU,IAAI,IAAI;AAAA,MACrD,MAAM;AAAA,IACR,CAAC;AAED,iBAAa,OAAO;AAAA,EACtB,CAAC;AACD,QAAM,gBAAgB;AAAA,IAAiB,CAAC,MACtC,OAAO,EAAE,GAAG,QAAQ,SAAS,GAAG,gBAAgB,GAAG,GAAG,GAAG,EAAE,GAAG,IAAI;AAAA,EACpE;AACA,QAAM,kBAAkB;AAAA,IAAiB,CAAC,MACxC,OAAO,EAAE,GAAG,QAAQ,SAAS,GAAG,gBAAgB,GAAG,GAAG,CAAC,EAAE,GAAG,IAAI;AAAA,EAClE;AACA,QAAM,qBAAqB;AAAA,IAAiB,CAAC,GAAW,MACtD;AAAA,MACE;AAAA,QACE,GAAG,QAAQ;AAAA,QACX,GAAG,gBAAgB,GAAG,GAAG,CAAC;AAAA,QAC1B,GAAG,gBAAgB,GAAG,GAAG,CAAC;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,aAAa;AAAA,IACf;AAAA,IACA,CAAC,iBAAiB,eAAe,kBAAkB;AAAA,EACrD;AACA,QAAM,SAAS;AAAA,IACb,OAAO,EAAE,GAAG,cAAc,QAAQ,cAAc;AAAA,IAChD,CAAC,eAAe,YAAY;AAAA,EAC9B;AAEA,QAAM,WAAW,iBAAiB,CAAC,SAA0B;AAC3D,UAAM,SAAS,cAAc,IAAI;AAEjC,QAAI,YAAY,CAAC,QAAQ;AACvB,aAAO;AAAA,IACT;AAEA,UAAM,WAAW,WAAW,MAAM;AAClC,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,SAAS,MAAM,IAAI,QAAQ,QAAQ,IAAI,SAAS;AAAA,IACrD,CAAC;AAED,WAAO;AAAA,EACT,CAAC;AACD,QAAM,SAAS;AAAA,IAAiB,CAAC,QAC/B,OAAO,EAAE,GAAG,QAAQ,SAAS,GAAG,gBAAgB,KAAK,GAAG,GAAG,EAAE,CAAC;AAAA,EAChE;AACA,QAAM,WAAW;AAAA,IAAiB,CAAC,UACjC,OAAO,EAAE,GAAG,QAAQ,SAAS,GAAG,gBAAgB,OAAO,GAAG,CAAC,EAAE,CAAC;AAAA,EAChE;AACA,QAAM,cAAc;AAAA,IAClB,CAAC,YAAoB,eACnB,OAAO;AAAA,MACL,GAAG,QAAQ;AAAA,MACX,GAAG,gBAAgB,YAAY,GAAG,CAAC;AAAA,MACnC,GAAG,gBAAgB,YAAY,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACL;AACA,QAAM,aAAa;AAAA,IACjB,CAAC,SAAuB,iBAAyB;AAC/C,YAAM,OAAO,WAAW;AAAA,QACtB,GAAG,WAAW,QAAQ,OAAO;AAAA,QAC7B,CAAC,OAAO,GAAG,KAAK,MAAM,gBAAgB,cAAc,GAAG,GAAG,CAAC;AAAA,MAC7D,CAAC;AACD,aAAO,EAAE,GAAG,MAAM,GAAG,KAAK,MAAM,IAAI,QAAQ,QAAQ,IAAI,KAAK,EAAE,CAAC;AAAA,IAClE;AAAA,EACF;AACA,QAAM,QAAQ,iBAAiB,MAAM;AACnC,QAAI,UAAU;AACZ;AAAA,IACF;AAEA,UAAM,WAAW,QAAQ;AACzB,UAAM,YAAY,UAAU,QAAQ;AACpC,sBAAkB,UAAU;AAC5B,2BAAuB,MAAS;AAEhC,QAAI,cAAc,MAAM;AACtB,mBAAa,SAAS;AAAA,IACxB;AAEA,aAAS,EAAE,MAAM,WAAW,MAAM,UAAU,WAAW,CAAC;AACxD,gBAAY,CAAC,QAAQ,MAAM,CAAC;AAAA,EAC9B,CAAC;AACD,QAAM,SAAS,iBAAiB,MAAM;AACpC,QAAI,UAAU;AACZ;AAAA,IACF;AAEA,sBAAkB,UAAU;AAC5B,2BAAuB,MAAS;AAChC,aAAS,MAAS;AAClB,gBAAY,CAAC,QAAQ,MAAM,CAAC;AAAA,EAC9B,CAAC;AAED,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,kBAAgB,MAAM;AACpB,QAAI,CAAC,kBAAkB,SAAS;AAC9B,cAAQ,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAIT,MACE,UAAU,WACT,MAAM,SAAS,QAAQ,MAAM,eAAe,aAC7C;AACA,aAAS,MAAS;AAAA,EACpB;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-color-picker.hook.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n  useControllableState,\n  useEventCallback,\n} from \"@impulse-ui-native/core\";\nimport { useTheme } from \"@impulse-ui-native/theme\";\n\nimport type {\n  ColorChannel,\n  ColorPickerContextData,\n  ColorPickerDraft,\n  ColorPickerRootProps,\n  HsvaColor,\n} from \"../types\";\nimport { FallbackColor } from \"../constants/color.constants\";\nimport {\n  clampColorValue,\n  hsvaToHex,\n  hsvaToRgba,\n  parseHexColor,\n  rgbaToHex,\n  rgbaToHsva,\n} from \"../utils/color.utils\";\nimport { useColorPickerMotion } from \"./use-color-picker-motion.hook\";\n\nexport function useColorPicker({\n  value,\n  defaultValue,\n  onChange,\n  disabled = false,\n  size = \"medium\",\n  commitMode = \"immediate\",\n  tone = \"primary\",\n}: ColorPickerRootProps): ColorPickerContextData {\n  const theme = useTheme();\n  const [draft, setDraft] = useState<ColorPickerDraft>();\n  const [resetKey, setResetKey] = useState(0);\n  const [interactionSnapshot, setInteractionSnapshot] = useState<HsvaColor>();\n  const interactionActive = useRef(false);\n  const [committed, setCommitted] = useControllableState<string>({\n    prop: value,\n    defaultProp: defaultValue ?? theme.colors.primary.value,\n    onChange,\n  });\n  const base = useMemo(\n    () =>\n      rgbaToHex(\n        parseHexColor(committed) ??\n          parseHexColor(theme.colors.primary.value) ??\n          FallbackColor,\n      ),\n    [committed, theme.colors.primary.value],\n  );\n  const hsva = useMemo(\n    () =>\n      interactionSnapshot ??\n      (draft?.base === base && draft.commitMode === commitMode\n        ? draft.hsva\n        : rgbaToHsva(parseHexColor(base) ?? FallbackColor)),\n    [base, draft, commitMode, interactionSnapshot],\n  );\n  const rgba = useMemo(() => hsvaToRgba(hsva), [hsva]);\n  const currentValue = rgbaToHex(rgba);\n  const hsvaRef = useRef(hsva);\n  const visualMotion = useColorPickerMotion(hsva, resetKey);\n\n  const update = useEventCallback((next: HsvaColor, fromGesture = false) => {\n    const current = hsvaRef.current;\n\n    if (\n      disabled ||\n      (next.h === current.h &&\n        next.s === current.s &&\n        next.v === current.v &&\n        next.a === current.a)\n    ) {\n      return;\n    }\n\n    if (fromGesture && !interactionActive.current) {\n      interactionActive.current = true;\n      setInteractionSnapshot(current);\n    }\n\n    if (!fromGesture && interactionActive.current) {\n      interactionActive.current = false;\n      setInteractionSnapshot(undefined);\n      visualMotion.finish();\n    }\n\n    hsvaRef.current = next;\n\n    const nextValue = hsvaToHex(next);\n    if (!fromGesture) {\n      setDraft({\n        commitMode,\n        base: commitMode === \"immediate\" ? nextValue : base,\n        hsva: next,\n      });\n    }\n\n    if (commitMode === \"immediate\" && nextValue !== hsvaToHex(current)) {\n      if (value !== undefined) {\n        onChange?.(nextValue);\n      } else {\n        setCommitted(nextValue);\n      }\n    }\n  });\n\n  const finishGesture = useEventCallback(() => {\n    const next = hsvaRef.current;\n    interactionActive.current = false;\n    setInteractionSnapshot(undefined);\n    setDraft({\n      commitMode,\n      base: commitMode === \"immediate\" ? hsvaToHex(next) : base,\n      hsva: next,\n    });\n\n    visualMotion.finish();\n  });\n  const setGestureHue = useEventCallback((h: number) =>\n    update({ ...hsvaRef.current, h: clampColorValue(h, 0, 360) }, true),\n  );\n  const setGestureAlpha = useEventCallback((a: number) =>\n    update({ ...hsvaRef.current, a: clampColorValue(a, 0, 1) }, true),\n  );\n  const setGestureSpectrum = useEventCallback((s: number, v: number) =>\n    update(\n      {\n        ...hsvaRef.current,\n        s: clampColorValue(s, 0, 1),\n        v: clampColorValue(v, 0, 1),\n      },\n      true,\n    ),\n  );\n  const gesture = useMemo(\n    () => ({\n      setHue: setGestureHue,\n      setAlpha: setGestureAlpha,\n      setSpectrum: setGestureSpectrum,\n    }),\n    [setGestureAlpha, setGestureHue, setGestureSpectrum],\n  );\n  const motion = useMemo(\n    () => ({ ...visualMotion, finish: finishGesture }),\n    [finishGesture, visualMotion],\n  );\n\n  const setColor = useEventCallback((next: string): boolean => {\n    const parsed = parseHexColor(next);\n\n    if (disabled || !parsed) {\n      return false;\n    }\n\n    const nextHsva = rgbaToHsva(parsed);\n    update({\n      ...nextHsva,\n      h: nextHsva.s === 0 ? hsvaRef.current.h : nextHsva.h,\n    });\n\n    return true;\n  });\n  const setHue = useEventCallback((hue: number) =>\n    update({ ...hsvaRef.current, h: clampColorValue(hue, 0, 360) }),\n  );\n  const setAlpha = useEventCallback((alpha: number) =>\n    update({ ...hsvaRef.current, a: clampColorValue(alpha, 0, 1) }),\n  );\n  const setSpectrum = useEventCallback(\n    (saturation: number, brightness: number) =>\n      update({\n        ...hsvaRef.current,\n        s: clampColorValue(saturation, 0, 1),\n        v: clampColorValue(brightness, 0, 1),\n      }),\n  );\n  const setChannel = useEventCallback(\n    (channel: ColorChannel, channelValue: number) => {\n      const next = rgbaToHsva({\n        ...hsvaToRgba(hsvaRef.current),\n        [channel]: Math.round(clampColorValue(channelValue, 0, 255)),\n      });\n      update({ ...next, h: next.s === 0 ? hsvaRef.current.h : next.h });\n    },\n  );\n  const apply = useEventCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const nextHsva = hsvaRef.current;\n    const nextValue = hsvaToHex(nextHsva);\n    interactionActive.current = false;\n    setInteractionSnapshot(undefined);\n\n    if (nextValue !== base) {\n      setCommitted(nextValue);\n    }\n\n    setDraft({ base: nextValue, hsva: nextHsva, commitMode });\n    setResetKey((key) => key + 1);\n  });\n  const cancel = useEventCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    interactionActive.current = false;\n    setInteractionSnapshot(undefined);\n    setDraft(undefined);\n    setResetKey((key) => key + 1);\n  });\n\n  const context = useMemo(\n    () => ({\n      gesture,\n      motion,\n      resetKey,\n      value: currentValue,\n      rgba,\n      hsva,\n      disabled,\n      size,\n      commitMode,\n      tone,\n      setColor,\n      setHue,\n      setAlpha,\n      setSpectrum,\n      setChannel,\n      apply,\n      cancel,\n    }),\n    [\n      gesture,\n      motion,\n      resetKey,\n      currentValue,\n      rgba,\n      hsva,\n      disabled,\n      size,\n      commitMode,\n      tone,\n      setColor,\n      setHue,\n      setAlpha,\n      setSpectrum,\n      setChannel,\n      apply,\n      cancel,\n    ],\n  );\n\n  useLayoutEffect(() => {\n    if (!interactionActive.current) {\n      hsvaRef.current = hsva;\n    }\n  }, [hsva]);\n\n  // Discard obsolete transient edits rather than restoring them if the caller\n  // later returns to a previously selected color or commit mode.\n  if (\n    draft !== undefined &&\n    (draft.base !== base || draft.commitMode !== commitMode)\n  ) {\n    setDraft(undefined);\n  }\n\n  return context;\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -9,12 +9,12 @@ import '@impulse-ui-native/input';
 declare const ColorPicker: react.NamedExoticComponent<ColorPickerProps> & {
     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.Element>;
+    Root: react.MemoExoticComponent<({ children, style, value, defaultValue, onChange, disabled, size, commitMode, tone, ...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>;
+    HexInput: react.MemoExoticComponent<({ disabled: disabledProp, onBlur, onSubmitEditing, error, tone, ...props }: ColorPickerHexInputProps) => react.JSX.Element>;
     ChannelInput: react.MemoExoticComponent<({ channel, label, variant, tone, }: ColorPickerChannelInputProps) => react.JSX.Element>;
     AlphaInput: react.MemoExoticComponent<({ label, variant, tone, }: ColorPickerAlphaInputProps) => react.JSX.Element>;
     Swatch: react.MemoExoticComponent<({ color, children, disabled: disabledProp, style, onPress, ...props }: ColorPickerSwatchProps) => react.JSX.Element>;

package/dist/types/color-picker-internal.types.d.mts

@@ -1,11 +1,12 @@
 import { SharedValue, DerivedValue } from 'react-native-reanimated';
-import { ColorPickerPreset, ComponentSize } from '@impulse-ui-native/theme';
+import { ColorPickerPreset, ComponentTone, ComponentSize } from '@impulse-ui-native/theme';
 import { HsvaColor, RgbaColor, ColorPickerCommitMode, ColorChannel } from './color.types.mjs';
 
 interface ColorPickerPresetEntryProps {
     preset: ColorPickerPreset;
 }
 interface ColorPickerContextData {
+    tone: ComponentTone;
     gesture: ColorPickerGestureHandlers;
     motion: ColorPickerMotion;
     resetKey: number;
@@ -47,6 +48,7 @@ interface ColorPickerSizeThemeProps {
     disabled?: boolean;
 }
 interface ColorPickerSwatchThemeProps extends ColorPickerSizeThemeProps {
+    tone: ComponentTone;
     selected: boolean;
 }
 

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

@@ -1,10 +1,11 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { InputProps } from '@impulse-ui-native/input';
 import { ButtonProps, ViewProps, PressableCoreProps } from '@impulse-ui-native/primitives';
-import { ComponentSize, ColorPickerPreset } from '@impulse-ui-native/theme';
+import { ComponentTone, ComponentSize, ColorPickerPreset } from '@impulse-ui-native/theme';
 import { ColorChannel, ColorPickerCommitMode } from './color.types.mjs';
 
 interface ColorPickerRootProps extends ViewProps {
+    tone?: ComponentTone;
     /** Hex: RGB, RGBA, RRGGBB, or RRGGBBAA, with an optional #. */
     value?: string;
     defaultValue?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/color-picker",
-  "version": "14.1.1",
+  "version": "15.0.0",
   "description": "Modular spectrum color picker with custom hex/RGB entry and theme presets for React Native.",
   "keywords": [
     "react-native",
@@ -28,12 +28,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/core": "14.1.1",
-    "@impulse-ui-native/icon": "14.1.1",
-    "@impulse-ui-native/primitives": "14.1.1",
-    "@impulse-ui-native/theme": "14.1.1",
-    "@impulse-ui-native/input": "14.1.1",
-    "@impulse-ui-native/slider": "14.1.1"
+    "@impulse-ui-native/core": "15.0.0",
+    "@impulse-ui-native/icon": "15.0.0",
+    "@impulse-ui-native/primitives": "15.0.0",
+    "@impulse-ui-native/theme": "15.0.0",
+    "@impulse-ui-native/input": "15.0.0",
+    "@impulse-ui-native/slider": "15.0.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",