@foxui/colors 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 flo-bit
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# 🦊 fox ui
+
+svelte 5 + tailwind 4 ui kit, colors components
+
+- [Color Gradient Picker](https://flo-bit.dev/ui-kit/components/colors/color-gradient-picker)
+- [Color Picker](https://flo-bit.dev/ui-kit/components/colors/color-picker)
+- [Color Select](https://flo-bit.dev/ui-kit/components/colors/color-select)
+
+> **This is a public alpha release. Expect bugs and breaking changes.**
+
+[See all components here](https://flo-bit.dev/ui-kit)
+
+For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
+
+Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
+
+For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).

package/dist/components/color-gradient-picker/ColorGradientPicker.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import { cn, Button, Popover } from '@foxui/core';
+
+	import { ColorPicker, type RGB } from '../color-picker/base';
+	import { DragGesture } from '@use-gesture/vanilla';
+
+	type ColorStop = { rgb: RGB; position: number };
+
+	let initialColors: ColorStop[] = $state([
+		{ rgb: { r: 0, g: 0, b: 1 }, position: 0 },
+		{ rgb: { r: 1, g: 0, b: 0 }, position: 1 }
+	]);
+
+	let {
+		colors = $bindable(initialColors),
+		class: className,
+		defaultNewColor = { r: 0, g: 0, b: 0 },
+		size = 'default',
+		onchange
+	}: {
+		rgb?: RGB;
+
+		colors?: ColorStop[];
+
+		class?: string;
+
+		defaultNewColor?: RGB;
+
+		size?: 'default' | 'sm';
+
+		onchange?: (colors: ColorStop[]) => void;
+	} = $props();
+
+	const gradientString = $derived(
+		`linear-gradient(to right, ${colors
+			.toSorted((a, b) => a.position - b.position)
+			.map(
+				({ rgb, position }) =>
+					`rgb(${rgb.r * 255}, ${rgb.g * 255}, ${rgb.b * 255}) ${position * 100}%`
+			)
+			.join(', ')})`
+	);
+
+	let colorsRef = $state<(HTMLButtonElement | null)[]>(new Array(colors.length).fill(null));
+	let gradientRef = $state<HTMLDivElement | undefined>(undefined);
+	let isDragging = $state(new Array(colors.length).fill(false));
+
+	$effect(() => {
+		let gestures: DragGesture[] = [];
+
+		colorsRef.forEach((ref, i) => {
+			if (!ref) return;
+
+			gestures.push(
+				new DragGesture(
+					ref,
+					(state) => {
+						const { delta } = state;
+
+						const newPosition = delta[0] / (gradientRef?.clientWidth ?? 1);
+
+						colors[i].position += newPosition;
+						colors[i].position = Math.max(0, Math.min(1, colors[i].position));
+
+						if (Math.abs(state.offset[0]) > 10) {
+							isDragging[i] = state.active;
+						} else {
+							isDragging[i] = state.active;
+						}
+
+						if (state.tap) {
+							allOpen[i] = !allOpen[i];
+						} else {
+							onchange?.(colors);
+						}
+					},
+					{
+						preventDefault: true,
+						eventOptions: {
+							passive: false
+						}
+					}
+				)
+			);
+		});
+
+		return () => {
+			gestures.forEach((gesture) => gesture.destroy());
+		};
+	});
+
+	let allOpen = $state(new Array(colors.length).fill(false));
+
+	function getOpen(i: number) {
+		if (isDragging[i]) {
+			return false;
+		}
+		return allOpen[i];
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+	class={cn(
+		'border-base-400 dark:border-base-600 relative w-full cursor-pointer touch-none rounded-2xl border',
+		size === 'sm' ? 'h-4' : 'h-8',
+		className
+	)}
+	style={'background: ' + gradientString}
+	bind:this={gradientRef}
+	onclick={(e) => {
+		// get target
+		const target = e.target as HTMLDivElement;
+		// if target is not the gradient itself return
+		if (target !== gradientRef) {
+			return;
+		}
+		let rect = gradientRef?.getBoundingClientRect();
+		// get the position of the click
+		const position = (e.clientX - rect.left) / (gradientRef?.clientWidth ?? 1);
+		// add a new color
+		colors.push({
+			rgb: { r: defaultNewColor.r, g: defaultNewColor.g, b: defaultNewColor.b },
+			position: position
+		});
+		colorsRef.push(null);
+		allOpen.push(true);
+		onchange?.(colors);
+	}}
+	onkeydown={(e) => {
+		if (e.key === '+') {
+			colors.push({
+				rgb: { r: defaultNewColor.r, g: defaultNewColor.g, b: defaultNewColor.b },
+				position: 0.5
+			});
+			colorsRef.push(null);
+			allOpen.push(true);
+		}
+	}}
+>
+	{#each colors as color, i}
+		<Popover
+			bind:open={() => getOpen(i), (open) => {}}
+			side="bottom"
+			sideOffset={10}
+			onInteractOutside={() => {
+				allOpen[i] = false;
+			}}
+			onEscapeKeydown={() => {
+				allOpen[i] = false;
+			}}
+			onkeydown={(e) => {
+				if (e.key === 'Backspace' && colors.length > 2) {
+					colors.splice(i, 1);
+					onchange?.(colors);
+				}
+			}}
+			class="p-1 pl-2 pr-0"
+		>
+			{#snippet child({ props })}
+				<button
+					{...props}
+					class={cn(
+						'absolute left-0 touch-none',
+						'focus-visible:outline-base-900 dark:focus-visible:outline-base-100 cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2',
+						size === 'sm' ? '-top-1.5' : '-top-4'
+					)}
+					style={`left: calc(${color.position * 100}% - 16px)`}
+					bind:this={colorsRef[i]}
+					tabindex={Math.floor(color.position * 100 + 10)}
+					onkeydown={(e) => {
+						if (e.key === 'Enter') {
+							allOpen[i] = !allOpen[i];
+						} else if (e.key === 'Backspace' && colors.length > 2) {
+							colors.splice(i, 1);
+							onchange?.(colors);
+						}
+					}}
+				>
+					<div
+						class={cn(
+							'ring-base-400 dark:ring-base-500 focus-visible:outline-accent-500 shadow-base-900/50 z-10 rounded-full shadow-lg ring',
+							size === 'sm' ? 'size-6' : 'size-8'
+						)}
+						style={`background-color: rgb(${color.rgb.r * 255}, ${color.rgb.g * 255}, ${color.rgb.b * 255});`}
+					></div>
+					<span class="sr-only">Color Picker</span>
+				</button>
+			{/snippet}
+			<div>
+				<ColorPicker
+					bind:rgb={colors[i].rgb}
+					onchange={() => {
+						onchange?.(colors);
+					}}
+				/>
+
+				<div class="flex w-full justify-center">
+					{#if colors.length > 2}
+						<Button
+							variant="link"
+							class="mb-1 backdrop-blur-none"
+							onclick={() => {
+								colors.splice(i, 1);
+								onchange?.(colors);
+							}}
+							size="icon"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								fill="currentColor"
+								class="size-6"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							Delete
+						</Button>
+					{/if}
+				</div>
+			</div>
+		</Popover>
+	{/each}
+</div>

package/dist/components/color-gradient-picker/ColorGradientPicker.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type RGB } from '../color-picker/base';
+type ColorStop = {
+    rgb: RGB;
+    position: number;
+};
+type $$ComponentProps = {
+    rgb?: RGB;
+    colors?: ColorStop[];
+    class?: string;
+    defaultNewColor?: RGB;
+    size?: 'default' | 'sm';
+    onchange?: (colors: ColorStop[]) => void;
+};
+declare const ColorGradientPicker: import("svelte").Component<$$ComponentProps, {}, "colors">;
+type ColorGradientPicker = ReturnType<typeof ColorGradientPicker>;
+export default ColorGradientPicker;

package/dist/components/color-gradient-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as ColorGradientPicker } from './ColorGradientPicker.svelte';

package/dist/components/color-gradient-picker/index.js

@@ -0,0 +1 @@
+export { default as ColorGradientPicker } from './ColorGradientPicker.svelte';

package/dist/components/color-picker/LICENSE

@@ -0,0 +1,42 @@
+from https://github.com/CaptainCodeman/svelte-color-select
+
+MIT License
+
+Copyright (c) 2022 Simon Green
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Based on https://bottosson.github.io/posts/colorpicker/
+Copyright (c) 2021 Björn Ottosson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/color-picker/base/ColorPicker.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { eps, picker_size, slider_width, border_size, gap_size } from './constants';
+	import { render_main_image, render_slider_image } from './render';
+	import type { RGB, OKlab, OKhsv, OKlch } from './color';
+	import {
+		okhsv_to_oklab,
+		okhsv_to_rgb,
+		okhsv_to_oklch,
+		rgb_to_hex,
+		oklab_to_okhsv,
+		rgb_to_okhsv,
+		oklab_to_rgb
+	} from './color';
+
+	import { cn } from '@foxui/core';
+
+	let {
+		rgb = $bindable(),
+		oklab = $bindable(),
+		okhsv = $bindable(),
+		class: className,
+		onchange,
+		quickSelects = $bindable([])
+	}: {
+		rgb?: RGB;
+		oklab?: OKlab;
+		okhsv?: OKhsv;
+		class?: string;
+		onchange?: (color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void;
+		quickSelects?: {
+			label: string;
+			rgb?: RGB;
+			oklab?: OKlab;
+			okhsv?: OKhsv;
+		}[];
+	} = $props();
+
+	const width = picker_size + slider_width + gap_size + border_size * 2;
+	const height = picker_size + border_size * 2;
+
+	let color = $derived(convertToInternal(rgb, oklab, okhsv));
+	let uihsv = $derived(scale_to_ui(color));
+
+	function scale_to_ui(okhsv: OKhsv): OKhsv {
+		return {
+			h: clamp_ui(okhsv.h / 360),
+			s: clamp_ui(okhsv.s),
+			v: clamp_ui(1 - okhsv.v)
+		};
+	}
+
+	function clamp(x: number) {
+		return x < eps ? eps : x > 1 - eps ? 1 - eps : x;
+	}
+
+	function clamp_ui(value: number) {
+		return value < 0 ? 0 : value > 1 ? picker_size : value * picker_size;
+	}
+
+	function convertToInternal(
+		rgb: RGB | undefined,
+		oklab: OKlab | undefined,
+		okhsv: OKhsv | undefined
+	) {
+		if (okhsv) {
+			return okhsv;
+		}
+
+		if (oklab) {
+			return oklab_to_okhsv(oklab);
+		}
+
+		if (rgb) {
+			return rgb_to_okhsv(rgb);
+		}
+
+		throw 'rgb, oklab, or okhsv required';
+	}
+
+	async function update_input() {
+		let new_rgb = okhsv_to_rgb(color);
+		let new_oklab = okhsv_to_oklab(color);
+		let new_oklch = okhsv_to_oklch(color);
+		let new_hex = rgb_to_hex(new_rgb);
+		let new_okhsv = color;
+
+		if (okhsv) {
+			okhsv = color;
+		}
+
+		if (oklab) {
+			oklab = new_oklab;
+		}
+
+		if (rgb) {
+			rgb = new_rgb;
+		}
+
+		onchange?.({
+			rgb: new_rgb,
+			oklab: new_oklab,
+			okhsv: new_okhsv,
+			oklch: new_oklch,
+			hex: new_hex
+		});
+	}
+
+	function update_sv(x: number, y: number) {
+		let new_s = clamp(x / picker_size);
+		let new_v = clamp(1 - y / picker_size);
+
+		color.s = new_s;
+		color.v = new_v;
+
+		update_input();
+	}
+
+	function update_h(x: number, y: number) {
+		let h = clamp(y / picker_size);
+		color.h = h * 360;
+		color.s = Math.max(color.s, 0.00001);
+		color.v = Math.max(color.v, 0.00001);
+
+		update_input();
+	}
+
+	function pointer(node: HTMLCanvasElement, fn: (x: number, y: number) => void) {
+		let active = false;
+
+		function update(event: PointerEvent) {
+			const x = event.offsetX;
+			const y = event.offsetY;
+			fn(x, y);
+		}
+
+		function onpointerdown(event: PointerEvent) {
+			event.stopPropagation();
+			node.setPointerCapture(event.pointerId);
+			update(event);
+			active = true;
+		}
+
+		function onpointermove(event: PointerEvent) {
+			event.stopPropagation();
+			if (active) {
+				update(event);
+			}
+		}
+
+		function onpointerend(event: PointerEvent) {
+			event.stopPropagation();
+			node.releasePointerCapture(event.pointerId);
+			active = false;
+		}
+
+		node.addEventListener('pointerdown', onpointerdown, { passive: true });
+		node.addEventListener('pointermove', onpointermove, { passive: true });
+		node.addEventListener('pointerup', onpointerend, { passive: true });
+		node.addEventListener('pointercancel', onpointerend, { passive: true });
+
+		return {
+			destroy() {
+				node.removeEventListener('pointerdown', onpointerdown);
+				node.removeEventListener('pointermove', onpointermove);
+				node.removeEventListener('pointerup', onpointerend);
+				node.removeEventListener('pointercancel', onpointerend);
+			}
+		};
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		const keyHandled = () => {
+			event.preventDefault();
+			event.stopPropagation();
+		};
+
+		const step = event.shiftKey ? 10 : 1;
+
+		switch (event.key) {
+			case 'ArrowUp':
+				if (event.altKey) {
+					update_h(0, Math.round(uihsv.h! - step));
+				} else {
+					update_sv(uihsv.s, Math.round(uihsv.v - step));
+				}
+				keyHandled();
+				break;
+
+			case 'ArrowDown':
+				if (event.altKey) {
+					update_h(0, Math.round(uihsv.h! + step));
+				} else {
+					update_sv(uihsv.s, Math.round(uihsv.v + step));
+				}
+				keyHandled();
+				break;
+
+			case 'ArrowLeft':
+				update_sv(Math.round(uihsv.s - step), uihsv.v);
+				keyHandled();
+				break;
+
+			case 'ArrowRight':
+				update_sv(Math.round(uihsv.s + step), uihsv.v);
+				keyHandled();
+				break;
+		}
+	}
+
+	function convertToRgb(
+		rgb: RGB | undefined,
+		oklab: OKlab | undefined,
+		okhsv: OKhsv | undefined
+	): RGB {
+		if (okhsv) {
+			return okhsv_to_rgb(okhsv);
+		}
+
+		if (oklab) {
+			return oklab_to_rgb(oklab);
+		}
+
+		if (rgb) {
+			return rgb;
+		}
+
+		throw 'rgb, oklab, or okhsv required';
+	}
+
+	function getRgbString(rgb: RGB) {
+		return `rgb(${rgb.r * 255}, ${rgb.g * 255}, ${rgb.b * 255})`;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={cn(
+		'focus-visible:outline-base-900 dark:focus-visible:outline-base-100 relative rounded-xl border-none focus-visible:outline-2 focus-visible:outline-offset-2',
+		className
+	)}
+	tabindex="0"
+	style:width="{width}px"
+	style:height="{height}px"
+	onkeydown={onKeydown}
+>
+	<canvas
+		id="okhsv_sv_canvas"
+		width={picker_size}
+		height={picker_size}
+		style:top="{border_size}px"
+		style:left="{border_size}px"
+		class="absolute touch-none rounded-xl"
+		use:pointer={update_sv}
+		use:render_main_image={color.h}
+	></canvas>
+	<canvas
+		width={slider_width}
+		height={picker_size}
+		style:top="{border_size}px"
+		style:left="{picker_size + gap_size}px"
+		class="absolute touch-none rounded-xl"
+		use:pointer={update_h}
+		use:render_slider_image
+	></canvas>
+
+	<svg {width} {height} class="pointer-events-none absolute touch-none">
+		<g transform="translate({border_size},{border_size})">
+			<g transform="translate({uihsv.s},{uihsv.v})">
+				<circle cx="0" cy="0" r="5" fill="none" stroke-width="1.75" class="stroke-base-50" />
+				<circle cx="0" cy="0" r="6" fill="none" stroke-width="1.25" class="stroke-base-950" />
+			</g>
+		</g>
+		<g transform="translate({picker_size + gap_size},{border_size})">
+			<g transform="translate(0,{uihsv.h})">
+				<polygon points="-7,-4 -1,0 -7,4" stroke-width="0.8" class="stroke-base-950 fill-base-50" />
+				<polygon
+					points="{slider_width + 7},-4 {slider_width + 1},0 {slider_width + 7},4"
+					stroke-width="0.8"
+					class="stroke-base-950 fill-base-50"
+				/>
+			</g>
+		</g>
+	</svg>
+</div>
+
+{#if quickSelects.length > 0}
+	<div class="grid grid-cols-7 gap-2 px-2 pt-2 pb-3" 
+	style:width="{width}px">
+		{#each quickSelects as quickSelect}
+			<button
+				class={cn(
+					'focus-visible:outline-base-900 dark:focus-visible:outline-base-100 cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2',
+					'group'
+				)}
+				onclick={() => {
+					color = convertToInternal(quickSelect.rgb, quickSelect.oklab, quickSelect.okhsv);
+
+					update_input();
+				}}
+			>
+				<div
+				class="border-base-300 dark:border-base-700 focus-visible:outline-accent-500 z-10 size-7 rounded-full border group-hover:scale-105 group-active:scale-95 transition-all duration-100"
+					style="background-color: {getRgbString(
+						convertToRgb(quickSelect.rgb, quickSelect.oklab, quickSelect.okhsv)
+					)};"
+				></div>
+				<span class="sr-only">Select {quickSelect.label}</span>
+			</button>
+		{/each}
+	</div>
+{/if}

package/dist/components/color-picker/base/ColorPicker.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { RGB, OKlab, OKhsv, OKlch } from './color';
+type $$ComponentProps = {
+    rgb?: RGB;
+    oklab?: OKlab;
+    okhsv?: OKhsv;
+    class?: string;
+    onchange?: (color: {
+        hex: string;
+        rgb: RGB;
+        oklab: OKlab;
+        okhsv: OKhsv;
+        oklch: OKlch;
+    }) => void;
+    quickSelects?: {
+        label: string;
+        rgb?: RGB;
+        oklab?: OKlab;
+        okhsv?: OKhsv;
+    }[];
+};
+declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "rgb" | "oklab" | "okhsv" | "quickSelects">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;