@foxui/colors 0.4.0

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

@@ -0,0 +1,47 @@
+import { convert, OKHSL, OKHSV, OKLab, OKLCH, sRGB, deserialize, listColorSpaces } from '@texel/color';
+export type Color = string | RGB | OKlab | OKhsv | OKlch;
+export type SetColorFunction = (color: Color) => void;
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface OKlab {
+    l: number;
+    a: number;
+    b: number;
+}
+export interface OKhsv {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface OKhsl {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface OKlch {
+    l: number;
+    c: number;
+    h: number;
+}
+export declare function okhsv_to_oklch(okhsv: OKhsv): OKlch;
+export declare function oklch_to_okhsv(oklch: OKlch): OKhsv;
+export declare function oklab_to_okhsv(oklab: OKlab): OKhsv;
+export declare function okhsv_to_rgb(okhsv: OKhsv): RGB;
+export declare function okhsv_to_oklab(okhsv: OKhsv): OKlab;
+export declare function rgb_to_okhsv(rgb: RGB): OKhsv;
+export declare function rgb_to_oklab(rgb: RGB): OKlab;
+export declare function okhsl_to_rgb(okhsl: OKhsl): RGB;
+export declare function oklab_to_oklch(oklab: OKlab): OKlch;
+export declare function rgb_to_oklch(rgb: RGB): OKlch;
+export declare function oklab_to_rgb(oklab: OKlab): RGB;
+export declare function oklch_to_rgb(oklch: OKlch): RGB;
+export declare function oklch_string_to_oklch(oklch: string): OKlch;
+export declare function rgb_to_hex(rgb: RGB): string;
+export declare function hex_to_rgb(hex: string): RGB;
+export declare function hex_to_okhsv(hex: string): OKhsv;
+export declare function okhsv_to_hex(okhsv: OKhsv): string;
+export declare function convertCSSToHex(css: string): string;
+export { deserialize, convert, listColorSpaces, sRGB, OKLab, OKLCH, OKHSV, OKHSL };

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

@@ -0,0 +1,96 @@
+import { convert, OKHSL, OKHSV, OKLab, OKLCH, RGBToHex, sRGB, deserialize, listColorSpaces } from '@texel/color';
+export function okhsv_to_oklch(okhsv) {
+    const [l, c, h] = convert([okhsv.h, okhsv.s, okhsv.v], OKHSV, OKLCH);
+    return { l: l, c: c, h: h };
+}
+export function oklch_to_okhsv(oklch) {
+    const [h, s, v] = convert([oklch.h, oklch.c, oklch.l], OKLCH, OKHSV);
+    return { h: h ?? 0, s, v };
+}
+export function oklab_to_okhsv(oklab) {
+    const [h, s, v] = convert([oklab.l, oklab.a, oklab.b], OKLab, OKHSV);
+    return { h: h ?? 0, s, v };
+}
+export function okhsv_to_rgb(okhsv) {
+    const [r, g, b] = convert([okhsv.h, okhsv.s, okhsv.v], OKHSV, sRGB);
+    return { r, g, b };
+}
+export function okhsv_to_oklab(okhsv) {
+    const [l, a, b] = convert([okhsv.h, okhsv.s, okhsv.v], OKHSV, OKLab);
+    return { l, a, b };
+}
+export function rgb_to_okhsv(rgb) {
+    const [h, s, v] = convert([rgb.r, rgb.g, rgb.b], sRGB, OKHSV);
+    return { h, s, v };
+}
+export function rgb_to_oklab(rgb) {
+    const [l, a, b] = convert([rgb.r, rgb.g, rgb.b], sRGB, OKLab);
+    return { l, a, b };
+}
+export function okhsl_to_rgb(okhsl) {
+    const [r, g, b] = convert([okhsl.h, okhsl.s, okhsl.l], OKHSL, sRGB);
+    return { r, g, b };
+}
+export function oklab_to_oklch(oklab) {
+    const [l, c, h] = convert([oklab.l, oklab.a, oklab.b], OKLab, OKLCH);
+    return { l, c, h };
+}
+export function rgb_to_oklch(rgb) {
+    const [l, c, h] = convert([rgb.r, rgb.g, rgb.b], sRGB, OKLCH);
+    return { l, c, h };
+}
+export function oklab_to_rgb(oklab) {
+    const [r, g, b] = convert([oklab.l, oklab.a, oklab.b], OKLab, sRGB);
+    return { r, g, b };
+}
+export function oklch_to_rgb(oklch) {
+    const [r, g, b] = convert([oklch.l, oklch.c, oklch.h], OKLCH, sRGB);
+    return { r, g, b };
+}
+export function oklch_string_to_oklch(oklch) {
+    const converted = oklch.split('oklch(')[1].split(')')[0].split(' ');
+    return { l: parseFloat(converted[0]), c: parseFloat(converted[1]), h: parseFloat(converted[2]) };
+}
+export function rgb_to_hex(rgb) {
+    const r = Math.round(rgb.r * 255);
+    const g = Math.round(rgb.g * 255);
+    const b = Math.round(rgb.b * 255);
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+export function hex_to_rgb(hex) {
+    if (hex.startsWith('#')) {
+        hex = hex.slice(1);
+    }
+    else if (hex.startsWith('0x')) {
+        hex = hex.slice(2);
+    }
+    if (hex.length !== 6) {
+        console.warn('Invalid hex color', hex);
+        return { r: 0, g: 0, b: 0 };
+    }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const r_ = r / 255;
+    const g_ = g / 255;
+    const b_ = b / 255;
+    return { r: r_, g: g_, b: b_ };
+}
+export function hex_to_okhsv(hex) {
+    const rgb = hex_to_rgb(hex);
+    return rgb_to_okhsv(rgb);
+}
+export function okhsv_to_hex(okhsv) {
+    const rgb = okhsv_to_rgb(okhsv);
+    return rgb_to_hex(rgb);
+}
+export function convertCSSToHex(css) {
+    const { id, coords } = deserialize(css);
+    const space = listColorSpaces().find((f) => id === f.id);
+    if (!space) {
+        throw new Error('Invalid color space');
+    }
+    const rgb = convert(coords, space, sRGB);
+    return RGBToHex(rgb);
+}
+export { deserialize, convert, listColorSpaces, sRGB, OKLab, OKLCH, OKHSV, OKHSL };

package/dist/components/color-picker/base/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const picker_size = 200;
+export declare const slider_width = 16;
+export declare const border_size = 10;
+export declare const gap_size = 30;
+export declare const eps = 0.0001;

package/dist/components/color-picker/base/constants.js

@@ -0,0 +1,5 @@
+export const picker_size = 200;
+export const slider_width = 16;
+export const border_size = 10;
+export const gap_size = 30;
+export const eps = 0.0001;

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

@@ -0,0 +1,3 @@
+export { default } from './ColorPicker.svelte';
+export { default as ColorPicker } from './ColorPicker.svelte';
+export type { RGB, OKlab, OKhsv } from './color';

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

@@ -0,0 +1,3 @@
+// adapted from https://github.com/CaptainCodeman/svelte-color-select
+export { default } from './ColorPicker.svelte';
+export { default as ColorPicker } from './ColorPicker.svelte';

package/dist/components/color-picker/base/render.d.ts

@@ -0,0 +1,5 @@
+export declare function render_slider_image(canvas: HTMLCanvasElement): void;
+export declare function render_main_image(canvas: HTMLCanvasElement, hue: number): {
+    update: (hue: number) => void;
+    destroy(): void;
+};

package/dist/components/color-picker/base/render.js

@@ -0,0 +1,77 @@
+import { f_shader, v_shader } from './shaders';
+import { picker_size, slider_width } from './constants';
+import { okhsl_to_rgb } from './color';
+export function render_slider_image(canvas) {
+    const ctx = canvas.getContext('2d');
+    const data = new Uint8ClampedArray(picker_size * slider_width * 4);
+    for (let i = 0; i < picker_size; i++) {
+        const a_ = Math.cos((2 * Math.PI * i) / picker_size);
+        const b_ = Math.sin((2 * Math.PI * i) / picker_size);
+        const rgb = okhsl_to_rgb({
+            h: (i / picker_size) * 360,
+            s: 0.9,
+            l: 0.65 + 0.17 * b_ - 0.08 * a_
+        });
+        for (let j = 0; j < slider_width; j++) {
+            const index = 4 * (i * slider_width + j);
+            data[index + 0] = rgb.r * 255;
+            data[index + 1] = rgb.g * 255;
+            data[index + 2] = rgb.b * 255;
+            data[index + 3] = 255;
+        }
+    }
+    const imageData = new ImageData(data, slider_width);
+    ctx.putImageData(imageData, 0, 0);
+}
+export function render_main_image(canvas, hue) {
+    const gl = canvas.getContext('webgl');
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    const shaderProgram = initShaderProgram(gl, v_shader, f_shader);
+    const position = gl.getAttribLocation(shaderProgram, 'position');
+    const resolution = gl.getUniformLocation(shaderProgram, 'resolution');
+    const hue_rad = gl.getUniformLocation(shaderProgram, 'hue_rad');
+    gl.useProgram(shaderProgram);
+    gl.uniform2fv(resolution, [gl.canvas.width, gl.canvas.height]);
+    const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    function update(hue) {
+        requestAnimationFrame(() => {
+            gl.uniform1f(hue_rad, hue / 360);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        });
+    }
+    update(hue);
+    return {
+        update,
+        destroy() {
+            gl.deleteProgram(shaderProgram);
+        }
+    };
+}
+function initShaderProgram(gl, vsSource, fsSource) {
+    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+    const shaderProgram = gl.createProgram();
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        throw `unable to init shader: ${gl.getProgramInfoLog(shaderProgram)}`;
+    }
+    return shaderProgram;
+}
+function loadShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const info = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw `error compiling shaders: ${info}`;
+    }
+    return shader;
+}

package/dist/components/color-picker/base/shaders.d.ts

@@ -0,0 +1,2 @@
+export declare const f_shader: string;
+export declare const v_shader: string;

package/dist/components/color-picker/base/shaders.js

@@ -0,0 +1,8 @@
+var _ = `precision mediump float;uniform vec2 resolution;uniform float hue_rad;precision mediump float;
+#define M_PI 3.1415926536
+float cbrt(float x){return sign(x)*pow(abs(x),1.0/3.0);}float srgb_transfer_function(float a){return .0031308>=a ? 12.92*a : 1.055*pow(a,.4166666666666667)-.055;}vec3 oklab_to_linear_srgb(vec3 c){float l_=c.x+0.3963377774*c.y+0.2158037573*c.z;float m_=c.x-0.1055613458*c.y-0.0638541728*c.z;float s_=c.x-0.0894841775*c.y-1.2914855480*c.z;float l=l_*l_*l_;float m=m_*m_*m_;float s=s_*s_*s_;return vec3(+4.0767416621*l-3.3077115913*m+0.2309699292*s,-1.2684380046*l+2.6097574011*m-0.3413193965*s,-0.0041960863*l-0.7034186147*m+1.7076147010*s);}float compute_max_saturation(float a,float b){float k0,k1,k2,k3,k4,wl,wm,ws;if(-1.88170328*a-0.80936493*b>1.0){k0=+1.19086277;k1=+1.76576728;k2=+0.59662641;k3=+0.75515197;k4=+0.56771245;wl=+4.0767416621;wm=-3.3077115913;ws=+0.2309699292;}else if(1.81444104*a-1.19445276*b>1.0){k0=+0.73956515;k1=-0.45954404;k2=+0.08285427;k3=+0.12541070;k4=+0.14503204;wl=-1.2684380046;wm=+2.6097574011;ws=-0.3413193965;}else{k0=+1.35733652;k1=-0.00915799;k2=-1.15130210;k3=-0.50559606;k4=+0.00692167;wl=-0.0041960863;wm=-0.7034186147;ws=+1.7076147010;}float S=k0+k1*a+k2*b+k3*a*a+k4*a*b;float k_l=+0.3963377774*a+0.2158037573*b;float k_m=-0.1055613458*a-0.0638541728*b;float k_s=-0.0894841775*a-1.2914855480*b;{float l_=1.0+S*k_l;float m_=1.0+S*k_m;float s_=1.0+S*k_s;float l=l_*l_*l_;float m=m_*m_*m_;float s=s_*s_*s_;float l_dS=3.0*k_l*l_*l_;float m_dS=3.0*k_m*m_*m_;float s_dS=3.0*k_s*s_*s_;float l_dS2=6.0*k_l*k_l*l_;float m_dS2=6.0*k_m*k_m*m_;float s_dS2=6.0*k_s*k_s*s_;float f=wl*l+wm*m+ws*s;float f1=wl*l_dS+wm*m_dS+ws*s_dS;float f2=wl*l_dS2+wm*m_dS2+ws*s_dS2;S=S-f*f1/(f1*f1-0.5*f*f2);}return S;}vec2 find_cusp(float a,float b){float S_cusp=compute_max_saturation(a,b);vec3 rgb_at_max=oklab_to_linear_srgb(vec3(1,S_cusp*a,S_cusp*b));float L_cusp=cbrt(1.0/max(max(rgb_at_max.r,rgb_at_max.g),rgb_at_max.b));float C_cusp=L_cusp*S_cusp;return vec2(L_cusp,C_cusp);}float toe_inv(float x){float k_1=0.206;float k_2=0.03;float k_3=(1.0+k_1)/(1.0+k_2);return(x*x+k_1*x)/(k_3*(x+k_2));}vec2 to_ST(vec2 cusp){float L=cusp.x;float C=cusp.y;return vec2(C/L,C/(1.0-L));}vec3 okhsv_to_srgb(vec3 hsv){float h=hsv.x;float s=hsv.y;float v=hsv.z;float a_=cos(2.0*M_PI*h);float b_=sin(2.0*M_PI*h);vec2 cusp=find_cusp(a_,b_);vec2 ST_max=to_ST(cusp);float S_max=ST_max.x;float T_max=ST_max.y;float S_0=0.5;float k=1.0-S_0/S_max;float L_v=1.0-s*S_0/(S_0+T_max-T_max*k*s);float C_v=s*T_max*S_0/(S_0+T_max-T_max*k*s);float L=v*L_v;float C=v*C_v;float L_vt=toe_inv(L_v);float C_vt=C_v*L_vt/L_v;float L_new=toe_inv(L);C=C*L_new/L;L=L_new;vec3 rgb_scale=oklab_to_linear_srgb(vec3(L_vt,a_*C_vt,b_*C_vt));float scale_L=cbrt(1.0/max(max(rgb_scale.r,rgb_scale.g),max(rgb_scale.b,0.0)));L=L*scale_L;C=C*scale_L;vec3 rgb=oklab_to_linear_srgb(vec3(L,C*a_,C*b_));return vec3(srgb_transfer_function(rgb.r),srgb_transfer_function(rgb.g),srgb_transfer_function(rgb.b));}void main(){vec2 uv=gl_FragCoord.xy/resolution;float l=uv.y;float h=hue_rad;vec3 hsl=vec3(h,uv.x,uv.y);vec3 hsvRGB=okhsv_to_srgb(hsl);gl_FragColor=vec4(hsvRGB,1.0);}`, a = "attribute vec4 position;void main(){gl_Position=position;}";
+const l = _, t = a;
+export {
+  l as f_shader,
+  t as v_shader
+};

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

@@ -0,0 +1,2 @@
+export { default as ColorPicker } from './base/ColorPicker.svelte';
+export { default as PopoverColorPicker } from './popover/PopoverColorPicker.svelte';

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

@@ -0,0 +1,2 @@
+export { default as ColorPicker } from './base/ColorPicker.svelte';
+export { default as PopoverColorPicker } from './popover/PopoverColorPicker.svelte';

package/dist/components/color-picker/popover/PopoverColorPicker.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { cn, Popover } from '@foxui/core';
+
+	import { ColorPicker, type OKhsv, type OKlab, type RGB } from '../base';
+
+	import { okhsv_to_rgb, oklab_to_rgb, type OKlch } from '../base/color';
+
+	let {
+		rgb = $bindable(),
+		oklab = $bindable(),
+		okhsv = $bindable(),
+		sideOffset = 10,
+		side = 'bottom',
+		class: className,
+		onchange,
+		quickSelects = $bindable([]),
+		...restProps
+	}: {
+		rgb?: RGB;
+		oklab?: OKlab;
+		okhsv?: OKhsv;
+		class?: string;
+		sideOffset?: number;
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		onchange?: (color: { hex: string; rgb: RGB; oklab: OKlab; okhsv: OKhsv; oklch: OKlch }) => void;
+		quickSelects?: {
+			label: string;
+			rgb?: RGB;
+			oklab?: OKlab;
+			okhsv?: OKhsv;
+		}[];
+	} = $props();
+
+	let internalColor = $derived(convertToInternal(rgb, oklab, okhsv));
+
+	function convertToInternal(
+		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';
+	}
+</script>
+
+<Popover {side} {sideOffset} class="p-1 pl-2 pr-0">
+	{#snippet child({ props })}
+		<button
+			{...props}
+			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'
+			)}
+		>
+			<div
+				class="border-base-300 dark:border-base-700 focus-visible:outline-accent-500 z-10 size-8 rounded-full border group-hover:scale-105 group-active:scale-95 transition-all duration-100"
+				style={`background-color: rgb(${internalColor.r * 255}, ${internalColor.g * 255}, ${internalColor.b * 255});`}
+			></div>
+			<span class="sr-only">Pick a color</span>
+		</button>
+	{/snippet}
+
+	<ColorPicker bind:rgb bind:oklab bind:okhsv class={className} {onchange} {quickSelects} {...restProps} />
+</Popover>

package/dist/components/color-picker/popover/PopoverColorPicker.svelte.d.ts

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

package/dist/components/color-select/ColorSelect.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	type Color = { class?: string; label: string; value?: string } | string;
+
+	let {
+		ref = $bindable(null),
+
+		class: className,
+		colorsClass,
+		colors = $bindable([]),
+		selected = $bindable(colors[0]),
+
+		name = $bindable(crypto.randomUUID()),
+
+		onselected,
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+		colors: Color[];
+
+		selected?: Color;
+
+		colorsClass?: string;
+
+		name?: string;
+
+		onselected?: (color: Color, previous: Color) => void;
+	} = $props();
+
+	function getLabel(c: Color) {
+		if (typeof c === 'string') return c;
+		return c.label;
+	}
+
+	function getValue(c: Color) {
+		if (typeof c === 'string') return c;
+		return c.value;
+	}
+
+	function getColorClass(c: Color) {
+		if (typeof c === 'string') return '';
+		return c.class;
+	}
+</script>
+
+<div
+	class={cn('group flex flex-wrap items-center gap-2', className)}
+	{...restProps}
+	bind:this={ref}
+>
+	{#each colors as color}
+		<label
+			aria-label={getLabel(color)}
+			class={cn(
+				'group relative flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-current',
+				'has-focus-visible:outline-base-900 dark:has-focus-visible:outline-base-100 has-focus-visible:outline-2 has-focus-visible:outline-offset-0',
+				'has-checked:ring-3 hover:scale-105 active:scale-95 transition-all duration-100',
+				colorsClass,
+				getColorClass(color)
+			)}
+			style={getValue(color) ? `color: ${getValue(color)}` : undefined}
+		>
+			<input
+				type="radio"
+				{name}
+				value={getLabel(color)}
+				class="sr-only"
+				onchange={() => {
+					let previous = selected;
+					selected = color;
+
+					if (onselected) onselected(color, previous);
+				}}
+				checked={getLabel(selected) === getLabel(color)}
+			/>
+
+			<span aria-hidden="true" class="size-8 rounded-full bg-current"></span>
+		</label>
+	{/each}
+</div>

package/dist/components/color-select/ColorSelect.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type Color = {
+    class?: string;
+    label: string;
+    value?: string;
+} | string;
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+    colors: Color[];
+    selected?: Color;
+    colorsClass?: string;
+    name?: string;
+    onselected?: (color: Color, previous: Color) => void;
+};
+declare const ColorSelect: import("svelte").Component<$$ComponentProps, {}, "colors" | "ref" | "name" | "selected">;
+type ColorSelect = ReturnType<typeof ColorSelect>;
+export default ColorSelect;

package/dist/components/color-select/index.d.ts

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

package/dist/components/color-select/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './color-gradient-picker';
+export * from './color-picker';
+export * from './color-select';
+export * from './color-picker/base/color';
+export * from './select-theme';

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export * from './color-gradient-picker';
+export * from './color-picker';
+export * from './color-select';
+export * from './color-picker/base/color';
+export * from './select-theme';

package/dist/components/select-theme/SelectTheme.svelte

@@ -0,0 +1,124 @@
+<script lang="ts" module>
+	let accentColor = $state({
+		class: '',
+		label: ''
+	});
+
+	let baseColor = $state({
+		class: '',
+		label: ''
+	});
+</script>
+
+<script lang="ts">
+	import { Paragraph } from '@foxui/core';
+	import { ColorSelect } from '../';
+	import { onMount } from 'svelte';
+
+	let accentColors = [
+		{ class: 'text-red-500', label: 'red' },
+		{ class: 'text-orange-500', label: 'orange' },
+		{ class: 'text-amber-500', label: 'amber' },
+		{ class: 'text-yellow-500', label: 'yellow' },
+		{ class: 'text-lime-500', label: 'lime' },
+		{ class: 'text-green-500', label: 'green' },
+		{ class: 'text-emerald-500', label: 'emerald' },
+		{ class: 'text-teal-500', label: 'teal' },
+		{ class: 'text-cyan-500', label: 'cyan' },
+		{ class: 'text-sky-500', label: 'sky' },
+		{ class: 'text-blue-500', label: 'blue' },
+		{ class: 'text-indigo-500', label: 'indigo' },
+		{ class: 'text-violet-500', label: 'violet' },
+		{ class: 'text-purple-500', label: 'purple' },
+		{ class: 'text-fuchsia-500', label: 'fuchsia' },
+		{ class: 'text-pink-500', label: 'pink' },
+		{ class: 'text-rose-500', label: 'rose' }
+	];
+
+	let baseColors = [
+		{ class: 'text-gray-500', label: 'gray' },
+		{ class: 'text-stone-500', label: 'stone' },
+		{ class: 'text-zinc-500', label: 'zinc' },
+		{ class: 'text-neutral-500', label: 'neutral' },
+		{ class: 'text-slate-500', label: 'slate' }
+	];
+
+	let {
+		defaultAccentColor = 'pink',
+		defaultBaseColor = 'stone',
+		selectAccentColor = true,
+		selectBaseColor = true,
+		onchanged
+	}: {
+		defaultAccentColor?: string;
+		defaultBaseColor?: string;
+		selectAccentColor?: boolean;
+		selectBaseColor?: boolean;
+		onchanged?: (accentColor: string, baseColor: string) => void;
+	} = $props();
+
+	onMount(() => {
+		let savedAccentColor = localStorage.getItem('accentColor');
+		if (savedAccentColor) {
+			accentColor.label = JSON.parse(savedAccentColor);
+		} else {
+			accentColor.label = defaultAccentColor;
+		}
+
+		let savedBaseColor = localStorage.getItem('baseColor');
+		if (savedBaseColor) {
+			baseColor.label = JSON.parse(savedBaseColor);
+		} else {
+			baseColor.label = defaultBaseColor;
+		}
+	});
+</script>
+
+{#if selectAccentColor}
+	<Paragraph class="mb-2">Accent Color</Paragraph>
+	<ColorSelect
+		bind:selected={accentColor}
+		colors={accentColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			localStorage.setItem('accentColor', JSON.stringify(color.label));
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { accentColor: color.label } })
+			);
+
+			onchanged?.(color.label, previous.label);
+		}}
+		class="w-64"
+	/>
+{/if}
+
+{#if selectBaseColor}
+	<Paragraph class="mb-2 mt-4">Base Color</Paragraph>
+	<ColorSelect
+		bind:selected={baseColor}
+		colors={baseColors}
+		onselected={(color, previous) => {
+			if (typeof previous === 'string' || typeof color === 'string') {
+				return;
+			}
+
+			document.documentElement.classList.remove(previous.label.toLowerCase());
+			document.documentElement.classList.add(color.label.toLowerCase());
+
+			localStorage.setItem('baseColor', JSON.stringify(color.label));
+
+			window.dispatchEvent(
+				new CustomEvent('theme-changed', { detail: { baseColor: color.label } })
+			);
+
+			onchanged?.(color.label, previous.label);
+		}}
+	/>
+{/if}

package/dist/components/select-theme/SelectTheme.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    defaultAccentColor?: string;
+    defaultBaseColor?: string;
+    selectAccentColor?: boolean;
+    selectBaseColor?: boolean;
+    onchanged?: (accentColor: string, baseColor: string) => void;
+};
+declare const SelectTheme: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectTheme = ReturnType<typeof SelectTheme>;
+export default SelectTheme;