@impulse-ui-native/color-picker 11.4.0 → 12.0.0

package/README.md

@@ -86,3 +86,19 @@ Immediate-mode `onChange` still emits live values. Apply, Cancel, and gesture
 completion reconcile the visual color to the accepted selection.
 
 Native device verification of dragging, keyboard entry, font scaling, and nested scrolling remains necessary; package checks are not interaction tests.
+
+## Field appearance
+
+Rectangular fields support `variant="outlined" | "soft" | "filled"` and
+`tone="neutral" | "primary" | "secondary"`. The default is `outlined` / `neutral`.
+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;
+disabled fields use neutral styling and block interaction.
+
+Customize `components.controlContainer.colors[tone][variant][state]`,
+`controlInput.colors[tone][variant][state]`, and
+`controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
+the previous `variants[variant][state]` maps.
+
+`ColorPicker.HexInput`, `ColorPicker.ChannelInput`, and `ColorPicker.AlphaInput` accept the field appearance props individually.

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

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

package/dist/components/alpha-input.js

@@ -6,7 +6,9 @@ import { useColorInput } from "../hooks/use-color-input.hook";
 import { useColorPickerContext } from "../hooks/use-color-picker-context.hook";
 import { parseColorPercentage } from "../utils/color.utils";
 const ColorPickerAlphaInput = memo(function ColorPickerAlphaInput2({
-  label
+  label,
+  variant,
+  tone
 }) {
   const { hsva, disabled, size, setAlpha, resetKey } = useColorPickerContext();
   const commit = useEventCallback((text) => {
@@ -27,6 +29,8 @@ const ColorPickerAlphaInput = memo(function ColorPickerAlphaInput2({
     Input,
     {
       label,
+      variant,
+      tone,
       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}: 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      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":"AAiCI;AAjCJ,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;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,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 { 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"]}

package/dist/components/apply.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ColorPickerActionProps } from '../types/color-picker.types.mjs';
+import '@impulse-ui-native/input';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';

package/dist/components/cancel.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ColorPickerActionProps } from '../types/color-picker.types.mjs';
+import '@impulse-ui-native/input';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';

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

@@ -1,9 +1,10 @@
 import * as react from 'react';
 import { ColorPickerChannelInputProps } from '../types/color-picker.types.mjs';
+import '@impulse-ui-native/input';
 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.Element>;
+declare const ColorPickerChannelInput: react.MemoExoticComponent<({ channel, label, variant, tone, }: ColorPickerChannelInputProps) => react.JSX.Element>;
 
 export { ColorPickerChannelInput };

package/dist/components/channel-input.js

@@ -7,7 +7,9 @@ import { useColorPickerContext } from "../hooks/use-color-picker-context.hook";
 import { parseColorChannel } from "../utils/color.utils";
 const ColorPickerChannelInput = memo(function ColorPickerChannelInput2({
   channel,
-  label
+  label,
+  variant,
+  tone
 }) {
   const { rgba, disabled, size, setChannel, resetKey } = useColorPickerContext();
   const commit = useEventCallback((text) => {
@@ -28,6 +30,8 @@ const ColorPickerChannelInput = memo(function ColorPickerChannelInput2({
     Input,
     {
       label,
+      variant,
+      tone,
       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}: 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      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":"AAmCI;AAnCJ,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;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,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 { 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"]}

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

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ColorPickerProps } from '../types/color-picker.types.mjs';
+import '@impulse-ui-native/input';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';

package/dist/components/root.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ColorPickerRootProps } from '../types/color-picker.types.mjs';
+import '@impulse-ui-native/input';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';

package/dist/components/swatch.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ColorPickerSwatchProps } from '../types/color-picker.types.mjs';
+import '@impulse-ui-native/input';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';

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

@@ -1,6 +1,7 @@
 import { ColorPickerRootProps } from '../types/color-picker.types.mjs';
 import { ColorPickerContextData } from '../types/color-picker-internal.types.mjs';
 import 'react';
+import '@impulse-ui-native/input';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import '../types/color.types.mjs';

package/dist/index.d.mts

@@ -15,8 +15,8 @@ declare const ColorPicker: react.NamedExoticComponent<ColorPickerProps> & {
     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>;
+    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>;
     Apply: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react.JSX.Element>;
     Cancel: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: ColorPickerActionProps) => react.JSX.Element>;

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

@@ -1,4 +1,5 @@
 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 { ColorChannel, ColorPickerCommitMode } from './color.types.mjs';
@@ -22,11 +23,11 @@ interface ColorPickerProps extends Omit<ColorPickerRootProps, "children"> {
     /** Label above the preset palette. Defaults to "Theme colors". */
     presetsLabel?: string;
 }
-interface ColorPickerChannelInputProps {
+interface ColorPickerChannelInputProps extends Pick<InputProps, "variant" | "tone"> {
     channel: ColorChannel;
     label?: string;
 }
-interface ColorPickerAlphaInputProps {
+interface ColorPickerAlphaInputProps extends Pick<InputProps, "variant" | "tone"> {
     label?: string;
 }
 interface ColorPickerSwatchProps extends Omit<PressableCoreProps, "loading" | "children"> {

package/dist/types/index.d.mts

@@ -2,6 +2,7 @@ export { ColorChannel, ColorPickerCommitMode, HsvaColor, RgbaColor } from './col
 export { ColorPickerActionProps, ColorPickerAlphaInputProps, ColorPickerChannelInputProps, ColorPickerProps, ColorPickerRootProps, ColorPickerSwatchProps } from './color-picker.types.mjs';
 export { ColorPickerContextData, ColorPickerDraft, ColorPickerGestureHandlers, ColorPickerMotion, ColorPickerPresetEntryProps, ColorPickerSizeThemeProps, ColorPickerSwatchThemeProps } from './color-picker-internal.types.mjs';
 import 'react';
+import '@impulse-ui-native/input';
 import '@impulse-ui-native/primitives';
 import '@impulse-ui-native/theme';
 import 'react-native-reanimated';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/color-picker",
-  "version": "11.4.0",
+  "version": "12.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": "11.4.0",
-    "@impulse-ui-native/icon": "11.4.0",
-    "@impulse-ui-native/primitives": "11.4.0",
-    "@impulse-ui-native/theme": "11.4.0",
-    "@impulse-ui-native/input": "11.4.0",
-    "@impulse-ui-native/slider": "11.4.0"
+    "@impulse-ui-native/core": "12.0.0",
+    "@impulse-ui-native/icon": "12.0.0",
+    "@impulse-ui-native/primitives": "12.0.0",
+    "@impulse-ui-native/theme": "12.0.0",
+    "@impulse-ui-native/input": "12.0.0",
+    "@impulse-ui-native/slider": "12.0.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",