@impulse-ui-native/color-picker 15.0.5 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,116 +1,116 @@
1
- # @impulse-ui-native/color-picker
2
-
3
- A modular full-spectrum color picker for native iOS and Android. Reuses ImpulseUI Input, Slider, Button, Typography, and theme utilities. Gradients and transparency previews use react-native-svg.
4
-
5
- ## Installation
6
-
7
- ```sh
8
- pnpm add @impulse-ui-native/color-picker react-native-svg react-native-gesture-handler react-native-reanimated react-native-worklets
9
- ```
10
-
11
- Requires React >=18, React Native >=0.73, react-native-svg >=13.9.0, Gesture Handler >=2, Reanimated >=4, and Worklets >=0.5. Complete Gesture Handler, Reanimated, and Worklets native setup. Render inside `GestureHandlerRootView` and `ThemeProvider` from `@impulse-ui-native/theme` and load the theme's fonts, as for other ImpulseUI controls. ColorPicker also requires react-native-svg for gradients and transparency previews. No overlay providers are required for this inline picker.
12
-
13
- ## Usage
14
-
15
- ```tsx
16
- import { useState } from "react";
17
- import { GestureHandlerRootView } from "react-native-gesture-handler";
18
-
19
- import { ColorPicker } from "@impulse-ui-native/color-picker";
20
- import { ThemeProvider } from "@impulse-ui-native/theme";
21
-
22
- export function BrandColor() {
23
- const [color, setColor] = useState("#F55D6B");
24
-
25
- return (
26
- <GestureHandlerRootView style={{ flex: 1 }}>
27
- <ThemeProvider>
28
- <ColorPicker value={color} onChange={setColor} commitMode="confirm" />
29
- </ThemeProvider>
30
- </GestureHandlerRootView>
31
- );
32
- }
33
- ```
34
-
35
- Use defaultValue for uncontrolled selection. Without an initial value, the theme primary color is used. Both modes use onChange. Immediate mode is the default; confirm mode stages edits, commits on Apply, and restores the committed color on Cancel. External controlled value changes invalidate the draft. The picker stays inline after Apply or Cancel; modal/sheet dismissal belongs to its owner.
36
-
37
- Values accept RGB, RGBA, RRGGBB, or RRGGBBAA hex strings, with an optional #. Changes emit uppercase #RRGGBB for opaque colors and #RRGGBBAA for transparent colors. CSS names, rgb(), and theme paths are not accepted. Invalid incoming values fall back to theme primary. Invalid or incomplete typed values retain the last valid selection; blur/submission shows an error. Valid fields update the current selection as you type, so Apply uses the latest valid edit. RGB channels accept integers 0-255, and opacity accepts percentages 0-100. Hue is retained when editing achromatic colors.
38
-
39
- showAlpha={false} hides opacity controls; it preserves existing alpha and still allows alpha in hex input. Pass showPresets={false} to hide the preset palette and its label. It defaults to true. Supply presets with { label, color, disabled? } entries to customize the palette; presets={[]} also hides it. Default preset colors resolve from the current theme, while the selected custom hex color stays unchanged across theme switches. Sizes are small, medium, and large. Disabled roots block every interactive part.
40
-
41
- Use presetsLabel="Brand colors" to customize the heading above the preset palette. It defaults to "Theme colors" and appears only when presets are available.
42
-
43
- ## Composition
44
-
45
- ```tsx
46
- <ColorPicker.Root defaultValue="#1864AB" commitMode="confirm">
47
- <ColorPicker.Spectrum />
48
- <ColorPicker.HueSlider />
49
- <ColorPicker.AlphaSlider />
50
- <ColorPicker.Preview />
51
- <ColorPicker.HexInput label="Custom hex" />
52
- <ColorPicker.ChannelInput channel="r" label="Red" />
53
- <ColorPicker.AlphaInput label="Opacity (%)" />
54
- <ColorPicker.Swatch color="#1864AB">{customMark}</ColorPicker.Swatch>
55
- <ColorPicker.Cancel>Discard</ColorPicker.Cancel>
56
- <ColorPicker.Apply>Use color</ColorPicker.Apply>
57
- </ColorPicker.Root>
58
- ```
59
-
60
- Root owns state and renders supplied children. Omit or reorder any parts. Swatch renders the supplied children over its intrinsic color preview; the ready-made picker supplies the selected checkmark. Actions render supplied button content and preserve native onPress callbacks after the semantic action. Wrap multiple fields/actions in View for your layout. Parts require Root; sibling roots maintain independent selections.
61
-
62
- The package exports ColorPicker and its prop/value types. The toolkit also re-exports the picker. Customize components.colorPicker through ThemeProvider: geometry, surface and border colors, selected ring, checkerboard, disabled opacity, presets, and size-specific dimensions. Controls continue to use the existing Input, Slider, and Button tokens. Spectrum colors are intrinsic color-space values rather than brand tokens; surrounding chrome and presets follow light/dark themes.
63
-
64
- Internal spacing has independent tokens: rowGap, sliderLabelGap, presetsLabelGap (heading to palette), presetsGap (between presets), and presetLabelGap (swatch to caption). Surface radii, swatch ring padding/borders, alpha field proportions, checkmark sizes, and spectrum indicator borders/shadows also have dedicated tokens.
65
-
66
- ```tsx
67
- <ThemeProvider
68
- components={{ colorPicker: { presetsLabelGap: 12, presetsGap: 8 } }}
69
- >
70
- <ColorPicker />
71
- </ThemeProvider>
72
- ```
73
-
74
- Touches that start in the enabled spectrum activate a native pan gesture on touch-down and stay with the panel until release, blocking parent scrolling while selecting saturation and brightness. Dragging beyond the panel clamps selection to its edges. The spectrum indicator
75
- updates on the UI thread at the native gesture rate. Spectrum color updates are
76
- limited to approximately 60 Hz, with the final selection always flushed on
77
- release or interruption. Hue and alpha thumbs also move continuously on the UI thread, while their
78
- emitted values follow the configured slider steps;
79
- unchanged slider steps and repeated colors skip redundant updates. Disabled spectra leave scrolling available.
80
-
81
- The color preview, spectrum hue background, and opacity gradient share UI-thread
82
- color state with the gestures. They update without waiting for React renders or
83
- `onChange`. During a drag, React-rendered hex/RGB fields and preset selection
84
- keep their previous snapshot; releasing publishes the final normalized color.
85
- Immediate-mode `onChange` still emits live values. Apply, Cancel, and gesture
86
- completion reconcile the visual color to the accepted selection.
87
-
88
- Native device verification of dragging, keyboard entry, font scaling, and nested scrolling remains necessary; package checks are not interaction tests.
89
-
90
- ## Field appearance
91
-
92
- Rectangular fields support `variant="outlined" | "soft" | "filled"` and
93
- `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.
94
- Outlined uses a transparent surface with a tone border; soft uses a subtle tone
95
- surface; filled uses the tone fill with its paired foreground. Colors come from
96
- the active theme in both schemes. Error styling overrides the selected tone;
97
- disabled fields use neutral styling and block interaction.
98
-
99
- Customize `components.controlContainer.colors[tone][variant][state]`,
100
- `controlInput.colors[tone][variant][state]`, and
101
- `controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
102
- the previous `variants[variant][state]` maps.
103
-
104
- `ColorPicker.HexInput`, `ColorPicker.ChannelInput`, and `ColorPicker.AlphaInput` accept the field appearance props individually.
105
-
106
- ## Repository palette consistency
107
-
108
- ColorPicker.Root and the convenience ColorPicker accept tone (default primary).
109
- Inputs, sliders, confirm actions, and selected swatch rings inherit it; explicit
110
- child tones override it. The hue/saturation spectrum, presets, alpha checkerboard,
111
- and user-selected color are data, so changing tone does not change those values.
112
- Selection ring tokens move to colorPicker.colors[tone].
113
-
114
- ## Agent and design reference
115
-
116
- Start with the [capability guide](../../docs/design-system/capabilities/color-picker.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
1
+ # @impulse-ui-native/color-picker
2
+
3
+ A modular full-spectrum color picker for native iOS and Android. Reuses ImpulseUI Input, Slider, Button, Typography, and theme utilities. Gradients and transparency previews use react-native-svg.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ pnpm add @impulse-ui-native/color-picker react-native-svg react-native-gesture-handler react-native-reanimated react-native-worklets
9
+ ```
10
+
11
+ Requires React >=18, React Native >=0.73, react-native-svg >=13.9.0, Gesture Handler >=2, Reanimated >=4, and Worklets >=0.5. Complete Gesture Handler, Reanimated, and Worklets native setup. Render inside `GestureHandlerRootView` and `ThemeProvider` from `@impulse-ui-native/theme` and load the theme's fonts, as for other ImpulseUI controls. ColorPicker also requires react-native-svg for gradients and transparency previews. No overlay providers are required for this inline picker.
12
+
13
+ ## Usage
14
+
15
+ ```tsx
16
+ import { useState } from "react";
17
+ import { GestureHandlerRootView } from "react-native-gesture-handler";
18
+
19
+ import { ColorPicker } from "@impulse-ui-native/color-picker";
20
+ import { ThemeProvider } from "@impulse-ui-native/theme";
21
+
22
+ export function BrandColor() {
23
+ const [color, setColor] = useState("#F55D6B");
24
+
25
+ return (
26
+ <GestureHandlerRootView style={{ flex: 1 }}>
27
+ <ThemeProvider>
28
+ <ColorPicker value={color} onChange={setColor} commitMode="confirm" />
29
+ </ThemeProvider>
30
+ </GestureHandlerRootView>
31
+ );
32
+ }
33
+ ```
34
+
35
+ Use defaultValue for uncontrolled selection. Without an initial value, the theme primary color is used. Both modes use onChange. Immediate mode is the default; confirm mode stages edits, commits on Apply, and restores the committed color on Cancel. External controlled value changes invalidate the draft. The picker stays inline after Apply or Cancel; modal/sheet dismissal belongs to its owner.
36
+
37
+ Values accept RGB, RGBA, RRGGBB, or RRGGBBAA hex strings, with an optional #. Changes emit uppercase #RRGGBB for opaque colors and #RRGGBBAA for transparent colors. CSS names, rgb(), and theme paths are not accepted. Invalid incoming values fall back to theme primary. Invalid or incomplete typed values retain the last valid selection; blur/submission shows an error. Valid fields update the current selection as you type, so Apply uses the latest valid edit. RGB channels accept integers 0-255, and opacity accepts percentages 0-100. Hue is retained when editing achromatic colors.
38
+
39
+ showAlpha={false} hides opacity controls; it preserves existing alpha and still allows alpha in hex input. Pass showPresets={false} to hide the preset palette and its label. It defaults to true. Supply presets with { label, color, disabled? } entries to customize the palette; presets={[]} also hides it. Default preset colors resolve from the current theme, while the selected custom hex color stays unchanged across theme switches. Sizes are small, medium, and large. Disabled roots block every interactive part.
40
+
41
+ Use presetsLabel="Brand colors" to customize the heading above the preset palette. It defaults to "Theme colors" and appears only when presets are available.
42
+
43
+ ## Composition
44
+
45
+ ```tsx
46
+ <ColorPicker.Root defaultValue="#1864AB" commitMode="confirm">
47
+ <ColorPicker.Spectrum />
48
+ <ColorPicker.HueSlider />
49
+ <ColorPicker.AlphaSlider />
50
+ <ColorPicker.Preview />
51
+ <ColorPicker.HexInput label="Custom hex" />
52
+ <ColorPicker.ChannelInput channel="r" label="Red" />
53
+ <ColorPicker.AlphaInput label="Opacity (%)" />
54
+ <ColorPicker.Swatch color="#1864AB">{customMark}</ColorPicker.Swatch>
55
+ <ColorPicker.Cancel>Discard</ColorPicker.Cancel>
56
+ <ColorPicker.Apply>Use color</ColorPicker.Apply>
57
+ </ColorPicker.Root>
58
+ ```
59
+
60
+ Root owns state and renders supplied children. Omit or reorder any parts. Swatch renders the supplied children over its intrinsic color preview; the ready-made picker supplies the selected checkmark. Actions render supplied button content and preserve native onPress callbacks after the semantic action. Wrap multiple fields/actions in View for your layout. Parts require Root; sibling roots maintain independent selections.
61
+
62
+ The package exports ColorPicker and its prop/value types. The toolkit also re-exports the picker. Customize components.colorPicker through ThemeProvider: geometry, surface and border colors, selected ring, checkerboard, disabled opacity, presets, and size-specific dimensions. Controls continue to use the existing Input, Slider, and Button tokens. Spectrum colors are intrinsic color-space values rather than brand tokens; surrounding chrome and presets follow light/dark themes.
63
+
64
+ Internal spacing has independent tokens: rowGap, sliderLabelGap, presetsLabelGap (heading to palette), presetsGap (between presets), and presetLabelGap (swatch to caption). Surface radii, swatch ring padding/borders, alpha field proportions, checkmark sizes, and spectrum indicator borders/shadows also have dedicated tokens.
65
+
66
+ ```tsx
67
+ <ThemeProvider
68
+ components={{ colorPicker: { presetsLabelGap: 12, presetsGap: 8 } }}
69
+ >
70
+ <ColorPicker />
71
+ </ThemeProvider>
72
+ ```
73
+
74
+ Touches that start in the enabled spectrum activate a native pan gesture on touch-down and stay with the panel until release, blocking parent scrolling while selecting saturation and brightness. Dragging beyond the panel clamps selection to its edges. The spectrum indicator
75
+ updates on the UI thread at the native gesture rate. Spectrum color updates are
76
+ limited to approximately 60 Hz, with the final selection always flushed on
77
+ release or interruption. Hue and alpha thumbs also move continuously on the UI thread, while their
78
+ emitted values follow the configured slider steps;
79
+ unchanged slider steps and repeated colors skip redundant updates. Disabled spectra leave scrolling available.
80
+
81
+ The color preview, spectrum hue background, and opacity gradient share UI-thread
82
+ color state with the gestures. They update without waiting for React renders or
83
+ `onChange`. During a drag, React-rendered hex/RGB fields and preset selection
84
+ keep their previous snapshot; releasing publishes the final normalized color.
85
+ Immediate-mode `onChange` still emits live values. Apply, Cancel, and gesture
86
+ completion reconcile the visual color to the accepted selection.
87
+
88
+ Native device verification of dragging, keyboard entry, font scaling, and nested scrolling remains necessary; package checks are not interaction tests.
89
+
90
+ ## Field appearance
91
+
92
+ Rectangular fields support `variant="outlined" | "soft" | "filled"` and
93
+ `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.
94
+ Outlined uses a transparent surface with a tone border; soft uses a subtle tone
95
+ surface; filled uses the tone fill with its paired foreground. Colors come from
96
+ the active theme in both schemes. Error styling overrides the selected tone;
97
+ disabled fields use neutral styling and block interaction.
98
+
99
+ Customize `components.controlContainer.colors[tone][variant][state]`,
100
+ `controlInput.colors[tone][variant][state]`, and
101
+ `controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
102
+ the previous `variants[variant][state]` maps.
103
+
104
+ `ColorPicker.HexInput`, `ColorPicker.ChannelInput`, and `ColorPicker.AlphaInput` accept the field appearance props individually.
105
+
106
+ ## Repository palette consistency
107
+
108
+ ColorPicker.Root and the convenience ColorPicker accept tone (default primary).
109
+ Inputs, sliders, confirm actions, and selected swatch rings inherit it; explicit
110
+ child tones override it. The hue/saturation spectrum, presets, alpha checkerboard,
111
+ and user-selected color are data, so changing tone does not change those values.
112
+ Selection ring tokens move to colorPicker.colors[tone].
113
+
114
+ ## Agent and design reference
115
+
116
+ Start with the [capability guide](../../docs/design-system/capabilities/color-picker.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
@@ -1 +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 {\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"]}
1
+ {"version":3,"sources":["../../src/components/alpha-input.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Input } from \"@impulse-ui-native/input\";\r\n\r\nimport type { ColorPickerAlphaInputProps } from \"../types\";\r\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\nimport { parseColorPercentage } from \"../utils/color.utils\";\r\n\r\nexport const ColorPickerAlphaInput = memo(function ColorPickerAlphaInput({\r\n label,\r\n variant,\r\n tone,\r\n}: ColorPickerAlphaInputProps) {\r\n const {\r\n hsva,\r\n disabled,\r\n size,\r\n tone: rootTone,\r\n setAlpha,\r\n resetKey,\r\n } = useColorPickerContext();\r\n const commit = useEventCallback((text: string): string | undefined => {\r\n const percentage = parseColorPercentage(text);\r\n\r\n if (percentage === undefined) {\r\n return undefined;\r\n }\r\n\r\n setAlpha(percentage / 100);\r\n\r\n return String(percentage);\r\n });\r\n const input = useColorInput({\r\n resetKey,\r\n value: String(Math.round(hsva.a * 100)),\r\n disabled,\r\n commit,\r\n });\r\n\r\n return (\r\n <Input\r\n label={label}\r\n variant={variant}\r\n tone={tone ?? rootTone}\r\n size={size}\r\n disabled={disabled}\r\n keyboardType=\"number-pad\"\r\n maxLength={3}\r\n value={input.text}\r\n onChangeText={input.onChangeText}\r\n onBlur={input.onCommit}\r\n onSubmitEditing={input.onCommit}\r\n error={input.invalid ? \"Use 0-100\" : undefined}\r\n />\r\n );\r\n});\r\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"]}
@@ -1 +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, 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"]}
1
+ {"version":3,"sources":["../../src/components/alpha-slider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Slider } from \"@impulse-ui-native/slider\";\r\n\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\nimport { ColorMotionGradient } from \"./motion-gradient\";\r\n\r\nexport const ColorPickerAlphaSlider = memo(function ColorPickerAlphaSlider() {\r\n const { hsva, disabled, size, tone, gesture, motion } =\r\n useColorPickerContext();\r\n const trackContent = useMemo(\r\n () => <ColorMotionGradient rgba={motion.rgba} />,\r\n [motion.rgba],\r\n );\r\n const handleComplete = useEventCallback((value: number) => {\r\n gesture.setAlpha(value);\r\n motion.finish();\r\n });\r\n\r\n return (\r\n <Slider\r\n tone={tone}\r\n min={0}\r\n max={1}\r\n step={0.01}\r\n value={hsva.a}\r\n onValueChange={gesture.setAlpha}\r\n onValueChangeWorklet={motion.setAlpha}\r\n onSlidingComplete={handleComplete}\r\n disabled={disabled}\r\n size={size}\r\n variant=\"outlined\"\r\n trackContent={trackContent}\r\n />\r\n );\r\n});\r\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"]}
@@ -1 +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 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"]}
1
+ {"version":3,"sources":["../../src/components/apply.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\r\nimport { memo } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Button } from \"@impulse-ui-native/primitives\";\r\n\r\nimport type { ColorPickerActionProps } from \"../types\";\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\n\r\nexport const ColorPickerApply = memo(function ColorPickerApply({\r\n disabled,\r\n loading,\r\n onPress,\r\n ...props\r\n}: ColorPickerActionProps) {\r\n const picker = useColorPickerContext();\r\n const blocked = picker.disabled || disabled === true || loading === true;\r\n const handlePress = useEventCallback((event: GestureResponderEvent) => {\r\n if (blocked) {\r\n return;\r\n }\r\n\r\n picker.apply();\r\n onPress?.(event);\r\n });\r\n\r\n return (\r\n <Button\r\n tone={picker.tone}\r\n size={picker.size}\r\n {...props}\r\n loading={loading}\r\n disabled={blocked}\r\n onPress={handlePress}\r\n />\r\n );\r\n});\r\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"]}
@@ -1 +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 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"]}
1
+ {"version":3,"sources":["../../src/components/cancel.tsx"],"sourcesContent":["import type { GestureResponderEvent } from \"react-native\";\r\nimport { memo } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Button } from \"@impulse-ui-native/primitives\";\r\n\r\nimport type { ColorPickerActionProps } from \"../types\";\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\n\r\nexport const ColorPickerCancel = memo(function ColorPickerCancel({\r\n disabled,\r\n loading,\r\n onPress,\r\n ...props\r\n}: ColorPickerActionProps) {\r\n const picker = useColorPickerContext();\r\n const blocked = picker.disabled || disabled === true || loading === true;\r\n const handlePress = useEventCallback((event: GestureResponderEvent) => {\r\n if (blocked) {\r\n return;\r\n }\r\n\r\n picker.cancel();\r\n onPress?.(event);\r\n });\r\n\r\n return (\r\n <Button\r\n tone={picker.tone}\r\n size={picker.size}\r\n variant=\"outlined\"\r\n {...props}\r\n loading={loading}\r\n disabled={blocked}\r\n onPress={handlePress}\r\n />\r\n );\r\n});\r\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"]}
@@ -1 +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 {\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"]}
1
+ {"version":3,"sources":["../../src/components/channel-input.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Input } from \"@impulse-ui-native/input\";\r\n\r\nimport type { ColorPickerChannelInputProps } from \"../types\";\r\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\nimport { parseColorChannel } from \"../utils/color.utils\";\r\n\r\nexport const ColorPickerChannelInput = memo(function ColorPickerChannelInput({\r\n channel,\r\n label,\r\n variant,\r\n tone,\r\n}: ColorPickerChannelInputProps) {\r\n const {\r\n rgba,\r\n disabled,\r\n size,\r\n tone: rootTone,\r\n setChannel,\r\n resetKey,\r\n } = useColorPickerContext();\r\n const commit = useEventCallback((text: string): string | undefined => {\r\n const number = parseColorChannel(text);\r\n\r\n if (number === undefined) {\r\n return undefined;\r\n }\r\n\r\n setChannel(channel, number);\r\n\r\n return String(number);\r\n });\r\n const input = useColorInput({\r\n resetKey,\r\n value: String(rgba[channel]),\r\n disabled,\r\n commit,\r\n });\r\n\r\n return (\r\n <Input\r\n label={label}\r\n variant={variant}\r\n tone={tone ?? rootTone}\r\n size={size}\r\n disabled={disabled}\r\n keyboardType=\"number-pad\"\r\n maxLength={3}\r\n value={input.text}\r\n onChangeText={input.onChangeText}\r\n onBlur={input.onCommit}\r\n onSubmitEditing={input.onCommit}\r\n error={input.invalid ? \"Use 0-255\" : undefined}\r\n />\r\n );\r\n});\r\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"]}
@@ -1 +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 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"]}
1
+ {"version":3,"sources":["../../src/components/hex-input.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Input } from \"@impulse-ui-native/input\";\r\n\r\nimport type { ColorPickerHexInputProps } from \"../types/color-input.types\";\r\nimport { useColorInput } from \"../hooks/use-color-input.hook\";\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\r\n\r\nexport const ColorPickerHexInput = memo(function ColorPickerHexInput({\r\n disabled: disabledProp,\r\n onBlur,\r\n onSubmitEditing,\r\n error,\r\n tone,\r\n ...props\r\n}: ColorPickerHexInputProps) {\r\n const {\r\n value,\r\n disabled: rootDisabled,\r\n size,\r\n tone: rootTone,\r\n setColor,\r\n resetKey,\r\n } = useColorPickerContext();\r\n const disabled = rootDisabled || disabledProp === true;\r\n const commit = useEventCallback((text: string): string | undefined => {\r\n const parsed = parseHexColor(text);\r\n\r\n if (!parsed || !setColor(text)) {\r\n return undefined;\r\n }\r\n\r\n return rgbaToHex(parsed);\r\n });\r\n const input = useColorInput({ value, disabled, commit, resetKey });\r\n const handleBlur = useEventCallback<\r\n NonNullable<ColorPickerHexInputProps[\"onBlur\"]>\r\n >((event) => {\r\n input.onCommit();\r\n onBlur?.(event);\r\n });\r\n const handleSubmit = useEventCallback<\r\n NonNullable<ColorPickerHexInputProps[\"onSubmitEditing\"]>\r\n >((event) => {\r\n input.onCommit();\r\n onSubmitEditing?.(event);\r\n });\r\n\r\n const inputError =\r\n error ?? (input.invalid ? \"Enter a valid hex color\" : undefined);\r\n\r\n return (\r\n <Input\r\n tone={tone ?? rootTone}\r\n size={size}\r\n autoCapitalize=\"characters\"\r\n autoCorrect={false}\r\n maxLength={9}\r\n {...props}\r\n disabled={disabled}\r\n value={input.text}\r\n onChangeText={input.onChangeText}\r\n onBlur={handleBlur}\r\n onSubmitEditing={handleSubmit}\r\n error={inputError}\r\n />\r\n );\r\n});\r\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"]}
@@ -1 +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, 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"]}
1
+ {"version":3,"sources":["../../src/components/hue-slider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\n\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Slider } from \"@impulse-ui-native/slider\";\r\n\r\nimport { HueStops } from \"../constants/color.constants\";\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\nimport { ColorGradient } from \"./gradient\";\r\n\r\nexport const ColorPickerHueSlider = memo(function ColorPickerHueSlider() {\r\n const { hsva, disabled, size, tone, gesture, motion } =\r\n useColorPickerContext();\r\n const trackContent = useMemo(() => <ColorGradient colors={HueStops} />, []);\r\n const handleComplete = useEventCallback((value: number) => {\r\n gesture.setHue(value);\r\n motion.finish();\r\n });\r\n\r\n return (\r\n <Slider\r\n tone={tone}\r\n min={0}\r\n max={360}\r\n step={1}\r\n value={hsva.h}\r\n onValueChange={gesture.setHue}\r\n onValueChangeWorklet={motion.setHue}\r\n onSlidingComplete={handleComplete}\r\n disabled={disabled}\r\n size={size}\r\n variant=\"outlined\"\r\n trackContent={trackContent}\r\n />\r\n );\r\n});\r\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"]}
@@ -1 +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 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"]}
1
+ {"version":3,"sources":["../../src/components/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { View } from \"@impulse-ui-native/primitives\";\r\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ColorPickerRootProps } from \"../types\";\r\nimport { ColorPickerContext } from \"../contexts/color-picker.context\";\r\nimport { useColorPicker } from \"../hooks/use-color-picker.hook\";\r\n\r\nexport const ColorPickerRoot = memo(function ColorPickerRoot({\r\n children,\r\n style,\r\n value,\r\n defaultValue,\r\n onChange,\r\n disabled,\r\n size,\r\n commitMode,\r\n tone,\r\n ...props\r\n}: ColorPickerRootProps) {\r\n const context = useColorPicker({\r\n value,\r\n defaultValue,\r\n onChange,\r\n disabled,\r\n size,\r\n commitMode,\r\n tone,\r\n });\r\n const styles = useThemedStyles(themedStyles);\r\n const extractedStyleProps = useStyleProps(props);\r\n const rootStyle = useMemo(\r\n () => [styles.root, extractedStyleProps, style],\r\n [styles.root, extractedStyleProps, style],\r\n );\r\n\r\n return (\r\n <ColorPickerContext.Provider value={context}>\r\n <View {...props} style={rootStyle}>\r\n {children}\r\n </View>\r\n </ColorPickerContext.Provider>\r\n );\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme) {\r\n const tokens = theme.components.colorPicker;\r\n\r\n return StyleSheet.create({\r\n root: {\r\n gap: tokens.gap,\r\n padding: tokens.padding,\r\n borderRadius: tokens.borderRadius,\r\n borderWidth: tokens.borderWidth,\r\n borderColor: tokens.borderColor,\r\n backgroundColor: tokens.backgroundColor,\r\n },\r\n });\r\n}\r\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"]}
@@ -1 +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 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"]}
1
+ {"version":3,"sources":["../../src/components/swatch.tsx"],"sourcesContent":["import type {\r\n GestureResponderEvent,\r\n PressableStateCallbackType,\r\n} from \"react-native\";\r\nimport { memo, useCallback, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { useEventCallback } from \"@impulse-ui-native/core\";\r\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\r\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type {\r\n ColorPickerSwatchProps,\r\n ColorPickerSwatchThemeProps,\r\n} from \"../types\";\r\nimport { useColorPickerContext } from \"../hooks/use-color-picker-context.hook\";\r\nimport { parseHexColor, rgbaToHex } from \"../utils/color.utils\";\r\nimport { ColorGradient } from \"./gradient\";\r\n\r\nexport const ColorPickerSwatch = memo(function ColorPickerSwatch({\r\n color,\r\n children,\r\n disabled: disabledProp,\r\n style,\r\n onPress,\r\n ...props\r\n}: ColorPickerSwatchProps) {\r\n const {\r\n value,\r\n disabled: rootDisabled,\r\n size,\r\n setColor,\r\n tone,\r\n } = useColorPickerContext();\r\n const parsed = parseHexColor(color);\r\n const disabled =\r\n rootDisabled || disabledProp === true || parsed === undefined;\r\n const selected = parsed !== undefined && rgbaToHex(parsed) === value;\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n { size, disabled, selected, tone },\r\n [size, disabled, selected, tone],\r\n );\r\n const colors = useMemo(() => [color, color], [color]);\r\n const swatchStyle = useCallback(\r\n (state: PressableStateCallbackType) => [\r\n styles.target,\r\n typeof style === \"function\" ? style(state) : style,\r\n ],\r\n [styles.target, style],\r\n );\r\n const handlePress = useEventCallback((event: GestureResponderEvent) => {\r\n if (disabled) {\r\n return;\r\n }\r\n\r\n setColor(color);\r\n onPress?.(event);\r\n });\r\n\r\n return (\r\n <Pressable\r\n {...props}\r\n disabled={disabled}\r\n style={swatchStyle}\r\n onPress={handlePress}\r\n >\r\n <View style={styles.ring}>\r\n <View style={styles.color}>\r\n <ColorGradient colors={colors} checkerboard />\r\n <View style={styles.content}>{children}</View>\r\n </View>\r\n </View>\r\n </Pressable>\r\n );\r\n});\r\n\r\nfunction themedStyles(\r\n theme: AppTheme,\r\n { size, selected, tone, disabled }: ColorPickerSwatchThemeProps,\r\n) {\r\n const tokens = theme.components.colorPicker;\r\n const sizeTokens = tokens.sizes[size];\r\n\r\n return StyleSheet.create({\r\n target: {\r\n minWidth: sizeTokens.swatchTargetSize,\r\n minHeight: sizeTokens.swatchTargetSize,\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n ring: {\r\n padding: tokens.swatchRingPadding,\r\n borderRadius: tokens.swatchBorderRadius,\r\n borderWidth: tokens.swatchRingBorderWidth,\r\n borderColor: selected\r\n ? disabled\r\n ? tokens.disabledBorderColor\r\n : tokens.colors[tone].selectedBorderColor\r\n : \"transparent\",\r\n },\r\n color: {\r\n width: sizeTokens.swatchSize,\r\n height: sizeTokens.swatchSize,\r\n borderRadius: tokens.swatchBorderRadius,\r\n borderWidth: tokens.borderWidth,\r\n borderColor: tokens.borderColor,\r\n overflow: \"hidden\",\r\n },\r\n content: {\r\n ...StyleSheet.flatten(StyleSheet.absoluteFill),\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n });\r\n}\r\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"]}
@@ -1 +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 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":[]}
1
+ {"version":3,"sources":["../../src/hooks/use-color-picker.hook.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from \"react\";\r\n\r\nimport {\r\n useControllableState,\r\n useEventCallback,\r\n} from \"@impulse-ui-native/core\";\r\nimport { useTheme } from \"@impulse-ui-native/theme\";\r\n\r\nimport type {\r\n ColorChannel,\r\n ColorPickerContextData,\r\n ColorPickerDraft,\r\n ColorPickerRootProps,\r\n HsvaColor,\r\n} from \"../types\";\r\nimport { FallbackColor } from \"../constants/color.constants\";\r\nimport {\r\n clampColorValue,\r\n hsvaToHex,\r\n hsvaToRgba,\r\n parseHexColor,\r\n rgbaToHex,\r\n rgbaToHsva,\r\n} from \"../utils/color.utils\";\r\nimport { useColorPickerMotion } from \"./use-color-picker-motion.hook\";\r\n\r\nexport function useColorPicker({\r\n value,\r\n defaultValue,\r\n onChange,\r\n disabled = false,\r\n size = \"medium\",\r\n commitMode = \"immediate\",\r\n tone = \"primary\",\r\n}: ColorPickerRootProps): ColorPickerContextData {\r\n const theme = useTheme();\r\n const [draft, setDraft] = useState<ColorPickerDraft>();\r\n const [resetKey, setResetKey] = useState(0);\r\n const [interactionSnapshot, setInteractionSnapshot] = useState<HsvaColor>();\r\n const interactionActive = useRef(false);\r\n const [committed, setCommitted] = useControllableState<string>({\r\n prop: value,\r\n defaultProp: defaultValue ?? theme.colors.primary.value,\r\n onChange,\r\n });\r\n const base = useMemo(\r\n () =>\r\n rgbaToHex(\r\n parseHexColor(committed) ??\r\n parseHexColor(theme.colors.primary.value) ??\r\n FallbackColor,\r\n ),\r\n [committed, theme.colors.primary.value],\r\n );\r\n const hsva = useMemo(\r\n () =>\r\n interactionSnapshot ??\r\n (draft?.base === base && draft.commitMode === commitMode\r\n ? draft.hsva\r\n : rgbaToHsva(parseHexColor(base) ?? FallbackColor)),\r\n [base, draft, commitMode, interactionSnapshot],\r\n );\r\n const rgba = useMemo(() => hsvaToRgba(hsva), [hsva]);\r\n const currentValue = rgbaToHex(rgba);\r\n const hsvaRef = useRef(hsva);\r\n const visualMotion = useColorPickerMotion(hsva, resetKey);\r\n\r\n const update = useEventCallback((next: HsvaColor, fromGesture = false) => {\r\n const current = hsvaRef.current;\r\n\r\n if (\r\n disabled ||\r\n (next.h === current.h &&\r\n next.s === current.s &&\r\n next.v === current.v &&\r\n next.a === current.a)\r\n ) {\r\n return;\r\n }\r\n\r\n if (fromGesture && !interactionActive.current) {\r\n interactionActive.current = true;\r\n setInteractionSnapshot(current);\r\n }\r\n\r\n if (!fromGesture && interactionActive.current) {\r\n interactionActive.current = false;\r\n setInteractionSnapshot(undefined);\r\n visualMotion.finish();\r\n }\r\n\r\n hsvaRef.current = next;\r\n\r\n const nextValue = hsvaToHex(next);\r\n if (!fromGesture) {\r\n setDraft({\r\n commitMode,\r\n base: commitMode === \"immediate\" ? nextValue : base,\r\n hsva: next,\r\n });\r\n }\r\n\r\n if (commitMode === \"immediate\" && nextValue !== hsvaToHex(current)) {\r\n if (value !== undefined) {\r\n onChange?.(nextValue);\r\n } else {\r\n setCommitted(nextValue);\r\n }\r\n }\r\n });\r\n\r\n const finishGesture = useEventCallback(() => {\r\n const next = hsvaRef.current;\r\n interactionActive.current = false;\r\n setInteractionSnapshot(undefined);\r\n setDraft({\r\n commitMode,\r\n base: commitMode === \"immediate\" ? hsvaToHex(next) : base,\r\n hsva: next,\r\n });\r\n\r\n visualMotion.finish();\r\n });\r\n const setGestureHue = useEventCallback((h: number) =>\r\n update({ ...hsvaRef.current, h: clampColorValue(h, 0, 360) }, true),\r\n );\r\n const setGestureAlpha = useEventCallback((a: number) =>\r\n update({ ...hsvaRef.current, a: clampColorValue(a, 0, 1) }, true),\r\n );\r\n const setGestureSpectrum = useEventCallback((s: number, v: number) =>\r\n update(\r\n {\r\n ...hsvaRef.current,\r\n s: clampColorValue(s, 0, 1),\r\n v: clampColorValue(v, 0, 1),\r\n },\r\n true,\r\n ),\r\n );\r\n const gesture = useMemo(\r\n () => ({\r\n setHue: setGestureHue,\r\n setAlpha: setGestureAlpha,\r\n setSpectrum: setGestureSpectrum,\r\n }),\r\n [setGestureAlpha, setGestureHue, setGestureSpectrum],\r\n );\r\n const motion = useMemo(\r\n () => ({ ...visualMotion, finish: finishGesture }),\r\n [finishGesture, visualMotion],\r\n );\r\n\r\n const setColor = useEventCallback((next: string): boolean => {\r\n const parsed = parseHexColor(next);\r\n\r\n if (disabled || !parsed) {\r\n return false;\r\n }\r\n\r\n const nextHsva = rgbaToHsva(parsed);\r\n update({\r\n ...nextHsva,\r\n h: nextHsva.s === 0 ? hsvaRef.current.h : nextHsva.h,\r\n });\r\n\r\n return true;\r\n });\r\n const setHue = useEventCallback((hue: number) =>\r\n update({ ...hsvaRef.current, h: clampColorValue(hue, 0, 360) }),\r\n );\r\n const setAlpha = useEventCallback((alpha: number) =>\r\n update({ ...hsvaRef.current, a: clampColorValue(alpha, 0, 1) }),\r\n );\r\n const setSpectrum = useEventCallback(\r\n (saturation: number, brightness: number) =>\r\n update({\r\n ...hsvaRef.current,\r\n s: clampColorValue(saturation, 0, 1),\r\n v: clampColorValue(brightness, 0, 1),\r\n }),\r\n );\r\n const setChannel = useEventCallback(\r\n (channel: ColorChannel, channelValue: number) => {\r\n const next = rgbaToHsva({\r\n ...hsvaToRgba(hsvaRef.current),\r\n [channel]: Math.round(clampColorValue(channelValue, 0, 255)),\r\n });\r\n update({ ...next, h: next.s === 0 ? hsvaRef.current.h : next.h });\r\n },\r\n );\r\n const apply = useEventCallback(() => {\r\n if (disabled) {\r\n return;\r\n }\r\n\r\n const nextHsva = hsvaRef.current;\r\n const nextValue = hsvaToHex(nextHsva);\r\n interactionActive.current = false;\r\n setInteractionSnapshot(undefined);\r\n\r\n if (nextValue !== base) {\r\n setCommitted(nextValue);\r\n }\r\n\r\n setDraft({ base: nextValue, hsva: nextHsva, commitMode });\r\n setResetKey((key) => key + 1);\r\n });\r\n const cancel = useEventCallback(() => {\r\n if (disabled) {\r\n return;\r\n }\r\n\r\n interactionActive.current = false;\r\n setInteractionSnapshot(undefined);\r\n setDraft(undefined);\r\n setResetKey((key) => key + 1);\r\n });\r\n\r\n const context = useMemo(\r\n () => ({\r\n gesture,\r\n motion,\r\n resetKey,\r\n value: currentValue,\r\n rgba,\r\n hsva,\r\n disabled,\r\n size,\r\n commitMode,\r\n tone,\r\n setColor,\r\n setHue,\r\n setAlpha,\r\n setSpectrum,\r\n setChannel,\r\n apply,\r\n cancel,\r\n }),\r\n [\r\n gesture,\r\n motion,\r\n resetKey,\r\n currentValue,\r\n rgba,\r\n hsva,\r\n disabled,\r\n size,\r\n commitMode,\r\n tone,\r\n setColor,\r\n setHue,\r\n setAlpha,\r\n setSpectrum,\r\n setChannel,\r\n apply,\r\n cancel,\r\n ],\r\n );\r\n\r\n useLayoutEffect(() => {\r\n if (!interactionActive.current) {\r\n hsvaRef.current = hsva;\r\n }\r\n }, [hsva]);\r\n\r\n // Discard obsolete transient edits rather than restoring them if the caller\r\n // later returns to a previously selected color or commit mode.\r\n if (\r\n draft !== undefined &&\r\n (draft.base !== base || draft.commitMode !== commitMode)\r\n ) {\r\n setDraft(undefined);\r\n }\r\n\r\n return context;\r\n}\r\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@impulse-ui-native/color-picker",
3
- "version": "15.0.5",
3
+ "version": "17.0.0",
4
4
  "description": "Modular spectrum color picker with custom hex/RGB entry and theme presets for React Native.",
5
5
  "keywords": [
6
6
  "react-native",
@@ -28,12 +28,12 @@
28
28
  ],
29
29
  "sideEffects": false,
30
30
  "dependencies": {
31
- "@impulse-ui-native/core": "15.0.5",
32
- "@impulse-ui-native/icon": "15.0.5",
33
- "@impulse-ui-native/primitives": "15.0.5",
34
- "@impulse-ui-native/theme": "15.0.5",
35
- "@impulse-ui-native/input": "15.0.5",
36
- "@impulse-ui-native/slider": "15.0.5"
31
+ "@impulse-ui-native/core": "17.0.0",
32
+ "@impulse-ui-native/icon": "17.0.0",
33
+ "@impulse-ui-native/primitives": "17.0.0",
34
+ "@impulse-ui-native/theme": "17.0.0",
35
+ "@impulse-ui-native/input": "17.0.0",
36
+ "@impulse-ui-native/slider": "17.0.0"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@impulse-ui-native/eslint-config": "1.0.0",