omni-color 0.1.0

package/dist/demo/src/demo/combinations/ColorCombinationDemo.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '../../../../dist';
+interface Props {
+    color: Color;
+}
+export declare function ColorCombinationDemo({ color }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/combinations/ColorCombinationDemo.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Color } from '../../../../dist';
+import { ColorBox } from '../../components/ColorBox';
+import { MixColorsOptionInputs } from './MixColorsOptionInputs';
+import { BlendColorsOptionInputs } from './BlendColorsOptionInputs';
+import { AverageColorsOptionInputs } from './AverageColorsOptionInputs';
+import { Card } from '../../components/Card';
+import { useIsDarkMode } from '../../components/utils';
+import { DEFAULT_AVERAGE_COLORS_OPTIONS, DEFAULT_BLEND_COLORS_OPTIONS, DEFAULT_MIX_COLORS_OPTIONS, } from './colorCombinationDemo.consts';
+function getMixCodeSnippet(colorHex, mixOptions) {
+    const mixSpace = mixOptions.space ?? DEFAULT_MIX_COLORS_OPTIONS.space;
+    const mixType = mixOptions.type ?? DEFAULT_MIX_COLORS_OPTIONS.type;
+    return `
+const color = new Color('${colorHex}');
+
+const red = new Color('red');
+const green = new Color('green');
+const blue = new Color('blue');
+
+const mixedWithRed = color.mix([red], { space: '${mixSpace}', type: '${mixType}' });
+const mixedWithGreen = color.mix([green], { space: '${mixSpace}', type: '${mixType}' });
+const mixedWithBlue = color.mix([blue], { space: '${mixSpace}', type: '${mixType}' });
+const mixedWithAll = color.mix([red, green, blue], { space: '${mixSpace}', type: '${mixType}' });
+`;
+}
+function getBlendCodeSnippet(colorHex, blendOptions) {
+    const blendMode = blendOptions.mode ?? DEFAULT_BLEND_COLORS_OPTIONS.mode;
+    const blendSpace = blendOptions.space ?? DEFAULT_BLEND_COLORS_OPTIONS.space;
+    const blendRatio = blendOptions.ratio ?? DEFAULT_BLEND_COLORS_OPTIONS.ratio;
+    return `
+const color = new Color('${colorHex}');
+
+const red = new Color('red');
+const green = new Color('green');
+const blue = new Color('blue');
+
+const blendedWithRed = color.blend(red, { mode: '${blendMode}', space: '${blendSpace}', ratio: ${blendRatio} });
+const blendedWithGreen = color.blend(green, { mode: '${blendMode}', space: '${blendSpace}', ratio: ${blendRatio} });
+const blendedWithBlue = color.blend(blue, { mode: '${blendMode}', space: '${blendSpace}', ratio: ${blendRatio} });
+`;
+}
+function getAverageCodeSnippet(colorHex, averageOptions) {
+    const averageSpace = averageOptions.space ?? DEFAULT_AVERAGE_COLORS_OPTIONS.space;
+    return `
+const color = new Color('${colorHex}');
+
+const red = new Color('red');
+const green = new Color('green');
+const blue = new Color('blue');
+
+const averagedWithRed = color.average([red], { space: '${averageSpace}' });
+const averagedWithGreen = color.average([green], { space: '${averageSpace}' });
+const averagedWithBlue = color.average([blue], { space: '${averageSpace}' });
+const averagedWithAll = color.average([red, green, blue], { space: '${averageSpace}' });
+`;
+}
+export function ColorCombinationDemo({ color }) {
+    const isDarkMode = useIsDarkMode();
+    const [mixOptions, setMixOptions] = useState(DEFAULT_MIX_COLORS_OPTIONS);
+    const [blendOptions, setBlendOptions] = useState(DEFAULT_BLEND_COLORS_OPTIONS);
+    const [averageOptions, setAverageOptions] = useState(DEFAULT_AVERAGE_COLORS_OPTIONS);
+    const { red, green, blue } = useMemo(() => {
+        return { red: new Color('red'), green: new Color('green'), blue: new Color('blue') };
+    }, []);
+    const mixRed = color.mix([red], mixOptions);
+    const mixGreen = color.mix([green], mixOptions);
+    const mixBlue = color.mix([blue], mixOptions);
+    const mixRGB = color.mix([red, green, blue], mixOptions);
+    const blendRed = color.blend(red, blendOptions);
+    const blendGreen = color.blend(green, blendOptions);
+    const blendBlue = color.blend(blue, blendOptions);
+    const averageRed = color.average([red], averageOptions);
+    const averageGreen = color.average([green], averageOptions);
+    const averageBlue = color.average([blue], averageOptions);
+    const averageRGB = color.average([red, green, blue], averageOptions);
+    return (_jsxs("div", { className: "w-full flex flex-col gap-4", children: [_jsxs(Card, { codeSnippet: getMixCodeSnippet(color.toHex8(), mixOptions), title: "Mix", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-5 gap-2 mb-4", children: [_jsx(ColorBox, { color: color, label: color.toHex(), overlaySize: "SMALL", overlayText: "Original", width: "STRETCH" }), _jsx(ColorBox, { color: mixRed, label: mixRed.toHex(), overlaySize: "SMALL", overlayText: "+Red", width: "STRETCH" }), _jsx(ColorBox, { color: mixGreen, label: mixGreen.toHex(), overlaySize: "SMALL", overlayText: "+Green", width: "STRETCH" }), _jsx(ColorBox, { color: mixBlue, label: mixBlue.toHex(), overlaySize: "SMALL", overlayText: "+Blue", width: "STRETCH" }), _jsx(ColorBox, { color: mixRGB, label: mixRGB.toHex(), overlaySize: "SMALL", overlayText: "+RGB", width: "STRETCH" })] }), _jsx(MixColorsOptionInputs, { mixOptions: mixOptions, onOptionsChanged: setMixOptions })] }), _jsxs(Card, { codeSnippet: getBlendCodeSnippet(color.toHex8(), blendOptions), title: "Blend", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-5 gap-2 mb-4", children: [_jsx(ColorBox, { color: color, label: color.toHex(), overlaySize: "SMALL", overlayText: "Original", width: "STRETCH" }), _jsx(ColorBox, { color: blendRed, label: blendRed.toHex(), overlaySize: "SMALL", overlayText: "+Red", width: "STRETCH" }), _jsx(ColorBox, { color: blendGreen, label: blendGreen.toHex(), overlaySize: "SMALL", overlayText: "+Green", width: "STRETCH" }), _jsx(ColorBox, { color: blendBlue, label: blendBlue.toHex(), overlaySize: "SMALL", overlayText: "+Blue", width: "STRETCH" }), _jsx(ColorBox, { color: isDarkMode ? new Color('#00000000') : new Color('#ffffff00'), label: "Not supported", overlaySize: "SMALL", overlayText: "+RGB (N/A)", width: "STRETCH" })] }), _jsx(BlendColorsOptionInputs, { blendOptions: blendOptions, onOptionsChanged: setBlendOptions })] }), _jsxs(Card, { codeSnippet: getAverageCodeSnippet(color.toHex8(), averageOptions), title: "Average", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-5 gap-2 mb-4", children: [_jsx(ColorBox, { color: color, label: color.toHex(), overlaySize: "SMALL", overlayText: "Original", width: "STRETCH" }), _jsx(ColorBox, { color: averageRed, label: averageRed.toHex(), overlaySize: "SMALL", overlayText: "+Red", width: "STRETCH" }), _jsx(ColorBox, { color: averageGreen, label: averageGreen.toHex(), overlaySize: "SMALL", overlayText: "+Green", width: "STRETCH" }), _jsx(ColorBox, { color: averageBlue, label: averageBlue.toHex(), overlaySize: "SMALL", overlayText: "+Blue", width: "STRETCH" }), _jsx(ColorBox, { color: averageRGB, label: averageRGB.toHex(), overlaySize: "SMALL", overlayText: "+RGB", width: "STRETCH" })] }), _jsx(AverageColorsOptionInputs, { mixOptions: averageOptions, onOptionsChanged: setAverageOptions })] })] }));
+}

package/dist/demo/src/demo/combinations/MixColorsOptionInputs.d.ts

@@ -0,0 +1,7 @@
+import type { MixColorsOptions } from '../../../../dist';
+interface Props {
+    mixOptions: MixColorsOptions;
+    onOptionsChanged: (options: MixColorsOptions) => void;
+}
+export declare function MixColorsOptionInputs({ mixOptions, onOptionsChanged }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/combinations/MixColorsOptionInputs.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputGroup } from '../../components/inputs/InputGroup';
+import { Select } from '../../components/inputs/Select';
+import { DEFAULT_MIX_COLORS_OPTIONS } from './colorCombinationDemo.consts';
+export function MixColorsOptionInputs({ mixOptions, onOptionsChanged }) {
+    return (_jsxs(InputGroup, { onResetClicked: () => onOptionsChanged(DEFAULT_MIX_COLORS_OPTIONS), children: [_jsx(Select, { label: "Mix type", options: [
+                    { label: 'Additive', value: 'ADDITIVE' },
+                    { label: 'Subtractive', value: 'SUBTRACTIVE' },
+                ], value: mixOptions.type, onChange: (value) => onOptionsChanged({ ...mixOptions, type: value }) }), _jsx(Select, { label: "Mix space", options: [{ label: 'Linear RGB', value: 'LINEAR_RGB' }, 'RGB', 'HSL', 'LCH', 'OKLCH'], value: mixOptions.space, onChange: (value) => onOptionsChanged({ ...mixOptions, space: value }) })] }));
+}

package/dist/demo/src/demo/combinations/colorCombinationDemo.consts.d.ts

@@ -0,0 +1,4 @@
+import type { AverageColorsOptions, BlendColorsOptions, MixColorsOptions } from '../../../../dist';
+export declare const DEFAULT_MIX_COLORS_OPTIONS: MixColorsOptions;
+export declare const DEFAULT_BLEND_COLORS_OPTIONS: BlendColorsOptions;
+export declare const DEFAULT_AVERAGE_COLORS_OPTIONS: AverageColorsOptions;

package/dist/demo/src/demo/combinations/colorCombinationDemo.consts.js

@@ -0,0 +1,12 @@
+export const DEFAULT_MIX_COLORS_OPTIONS = {
+    space: 'LINEAR_RGB',
+    type: 'ADDITIVE',
+};
+export const DEFAULT_BLEND_COLORS_OPTIONS = {
+    mode: 'NORMAL',
+    space: 'RGB',
+    ratio: 0.5,
+};
+export const DEFAULT_AVERAGE_COLORS_OPTIONS = {
+    space: 'LINEAR_RGB',
+};

package/dist/demo/src/demo/gradients/GradientOptionInputs.d.ts

@@ -0,0 +1,10 @@
+import { Color, type ColorGradientOptions } from '../../../../dist';
+interface Props {
+    options: ColorGradientOptions;
+    showInterpolationOption?: boolean;
+    onOptionsChanged: (options: ColorGradientOptions) => void;
+    onOptionsReset: () => void;
+    onTargetColorChanged?: (targetColor: Color) => void;
+}
+export declare function GradientOptionInputs({ options, showInterpolationOption, onOptionsChanged, onOptionsReset, onTargetColorChanged, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/gradients/GradientOptionInputs.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Color } from '../../../../dist';
+import { InputGroup } from '../../components/inputs/InputGroup';
+import { Select } from '../../components/inputs/Select';
+import { NumberInput } from '../../components/inputs/NumberInput';
+const TARGET_COLORS_NAMES = ['Red', 'Green', 'Blue', 'Black', 'White', 'Gray', 'Random'];
+export function GradientOptionInputs({ options, showInterpolationOption = true, onOptionsChanged, onOptionsReset, onTargetColorChanged, }) {
+    const [selectedTargetColorName, setSelectedTargetColorName] = useState('Random');
+    const handleTargetColorNameChanged = (colorName) => {
+        if (!onTargetColorChanged) {
+            return;
+        }
+        setSelectedTargetColorName(colorName);
+        if (colorName === 'Random') {
+            onTargetColorChanged(new Color());
+        }
+        else {
+            onTargetColorChanged(new Color(colorName.toLowerCase()));
+        }
+    };
+    const handleOptionsReset = () => {
+        setSelectedTargetColorName('Random');
+        onOptionsReset();
+    };
+    return (_jsxs(InputGroup, { onResetClicked: handleOptionsReset, children: [onTargetColorChanged && (_jsx(Select, { label: "Target color", options: TARGET_COLORS_NAMES, value: selectedTargetColorName, onChange: handleTargetColorNameChanged })), _jsx(NumberInput, { label: "Stops", max: 10, min: 2, step: 1, value: options.stops, onChange: (value) => onOptionsChanged({ ...options, stops: value }) }), _jsx(Select, { label: "Color space", options: ['RGB', 'HSL', 'HSV', 'LCH', 'OKLCH'], value: options.space, onChange: (value) => onOptionsChanged({ ...options, space: value }) }), showInterpolationOption && (_jsx(Select, { label: "Interpolation", options: [
+                    { label: 'Linear', value: 'LINEAR' },
+                    { label: 'Bezier', value: 'BEZIER' },
+                ], value: options.interpolation, onChange: (value) => onOptionsChanged({ ...options, interpolation: value }) })), _jsx(Select, { label: "Easing", options: [
+                    { label: 'Linear', value: 'LINEAR' },
+                    { label: 'Ease in', value: 'EASE_IN' },
+                    { label: 'Ease out', value: 'EASE_OUT' },
+                    { label: 'Ease in/out', value: 'EASE_IN_OUT' },
+                ], value: typeof options.easing === 'string' ? options.easing : undefined, onChange: (value) => onOptionsChanged({ ...options, easing: value }) }), options.space !== 'RGB' && (_jsx(Select, { label: "Hue interpolation", options: [
+                    { label: 'Cartesian', value: 'CARTESIAN' },
+                    { label: 'Shortest', value: 'SHORTEST' },
+                    { label: 'Longest', value: 'LONGEST' },
+                    { label: 'Increasing', value: 'INCREASING' },
+                    { label: 'Decreasing', value: 'DECREASING' },
+                    { label: 'Raw', value: 'RAW' },
+                ], value: options.hueInterpolationMode, onChange: (value) => onOptionsChanged({ ...options, hueInterpolationMode: value }) }))] }));
+}

package/dist/demo/src/demo/gradients/GradientThroughCard.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '../../../../dist';
+interface Props {
+    color: Color;
+}
+export declare function GradientThroughCard({ color }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/gradients/GradientThroughCard.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Card } from '../../components/Card';
+import { ColorBox } from '../../components/ColorBox';
+import { GradientOptionInputs } from './GradientOptionInputs';
+import { DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS } from './gradientOptions.consts';
+const STOP_COLORS = ['Red', 'Green', 'Blue'];
+function getGradientThroughCodeSnippet({ colorHex, options, }) {
+    const stops = options.stops ?? DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS.stops;
+    const space = options.space ?? DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS.space;
+    const interpolation = options.interpolation ?? DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS.interpolation;
+    const easing = options.easing ?? DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS.easing;
+    const clamp = options.clamp ?? DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS.clamp;
+    const hueInterpolationMode = options.hueInterpolationMode ?? DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS.hueInterpolationMode;
+    const easingInput = typeof easing === 'function' ? easing.toString() : `'${easing}'`;
+    const hueInterpolationInput = space !== 'RGB'
+        ? `,
+  hueInterpolationMode: '${hueInterpolationMode}'`
+        : '';
+    return `
+const color = new Color('${colorHex}');
+const stopColors = ['red', 'green', 'blue'];
+
+const gradient = color.createGradientThrough(stopColors, {
+  stops: ${stops},
+  space: '${space}',
+  interpolation: '${interpolation}',
+  easing: ${easingInput},
+  clamp: ${clamp}${hueInterpolationInput},
+});
+`;
+}
+export function GradientThroughCard({ color }) {
+    const [options, setOptions] = useState(DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS);
+    const colorBoxes = useMemo(() => {
+        const gradientStops = color.createGradientThrough(STOP_COLORS, options);
+        return gradientStops.map((color, index) => {
+            const colorHex = color.toHex();
+            let title;
+            if (index === 0) {
+                title = 'Start';
+            }
+            return (_jsx(ColorBox, { color: color, label: colorHex, overlaySize: "SMALL", overlayText: title, width: "STRETCH" }, colorHex));
+        });
+    }, [color, options]);
+    return (_jsxs(Card, { codeSnippet: getGradientThroughCodeSnippet({
+            colorHex: color.toHex8(),
+            options,
+        }), title: "Gradient through red, green, and blue", children: [_jsx("div", { className: "flex flex-col sm:flex-row gap-2 mb-4", children: colorBoxes }), _jsx(GradientOptionInputs, { options: options, onOptionsReset: () => setOptions(DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS), onOptionsChanged: setOptions })] }));
+}

package/dist/demo/src/demo/gradients/GradientToCard.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '../../../../dist';
+interface Props {
+    color: Color;
+}
+export declare function GradientToCard({ color }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/gradients/GradientToCard.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Color } from '../../../../dist';
+import { Card } from '../../components/Card';
+import { ColorBox } from '../../components/ColorBox';
+import { GradientOptionInputs } from './GradientOptionInputs';
+import { DEFAULT_COLOR_GRADIENT_TO_OPTIONS } from './gradientOptions.consts';
+function getGradientToCodeSnippet({ colorHex, targetColorHex, options, }) {
+    const stops = options.stops ?? DEFAULT_COLOR_GRADIENT_TO_OPTIONS.stops;
+    const space = options.space ?? DEFAULT_COLOR_GRADIENT_TO_OPTIONS.space;
+    const easing = options.easing ?? DEFAULT_COLOR_GRADIENT_TO_OPTIONS.easing;
+    const clamp = options.clamp ?? DEFAULT_COLOR_GRADIENT_TO_OPTIONS.clamp;
+    const hueInterpolationMode = options.hueInterpolationMode ?? DEFAULT_COLOR_GRADIENT_TO_OPTIONS.hueInterpolationMode;
+    const easingInput = typeof easing === 'function' ? easing.toString() : `'${easing}'`;
+    const hueInterpolationInput = space !== 'RGB'
+        ? `,
+  hueInterpolationMode: '${hueInterpolationMode}'`
+        : '';
+    return `
+const color = new Color('${colorHex}');
+const targetColor = new Color('${targetColorHex}');
+
+const gradient = color.createGradientTo(targetColor, {
+  stops: ${stops},
+  space: '${space}',
+  easing: ${easingInput},
+  clamp: ${clamp}${hueInterpolationInput},
+});
+`;
+}
+export function GradientToCard({ color }) {
+    const [targetColor, setTargetColor] = useState(new Color());
+    const [options, setOptions] = useState(DEFAULT_COLOR_GRADIENT_TO_OPTIONS);
+    const gradientColors = color.createGradientTo(targetColor, options);
+    const handleOptionsReset = () => {
+        setOptions(DEFAULT_COLOR_GRADIENT_TO_OPTIONS);
+        setTargetColor(new Color());
+    };
+    return (_jsxs(Card, { codeSnippet: getGradientToCodeSnippet({
+            colorHex: color.toHex8(),
+            targetColorHex: targetColor.toHex8(),
+            options,
+        }), title: "Gradient to", children: [_jsx("div", { className: "flex flex-col sm:flex-row gap-2 mb-4", children: gradientColors.map((color, index) => {
+                    const colorHex = color.toHex();
+                    let title;
+                    if (index === 0) {
+                        title = 'Start';
+                    }
+                    else if (index === gradientColors.length - 1) {
+                        title = 'Target';
+                    }
+                    return (_jsx(ColorBox, { color: color, label: colorHex, overlaySize: "SMALL", overlayText: title, width: "STRETCH" }, index));
+                }) }), _jsx(GradientOptionInputs, { options: options, showInterpolationOption: false, onOptionsChanged: setOptions, onOptionsReset: handleOptionsReset, onTargetColorChanged: setTargetColor })] }));
+}

package/dist/demo/src/demo/gradients/GradientsDemo.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '../../../../dist';
+interface Props {
+    color: Color;
+}
+export declare function GradientsDemo({ color }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/gradients/GradientsDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GradientThroughCard } from './GradientThroughCard';
+import { GradientToCard } from './GradientToCard';
+export function GradientsDemo({ color }) {
+    return (_jsxs("div", { className: "w-full flex flex-col gap-4", children: [_jsx(GradientToCard, { color: color }), _jsx(GradientThroughCard, { color: color })] }));
+}

package/dist/demo/src/demo/gradients/gradientOptions.consts.d.ts

@@ -0,0 +1,3 @@
+import type { ColorGradientOptions } from '../../../../dist';
+export declare const DEFAULT_COLOR_GRADIENT_TO_OPTIONS: ColorGradientOptions;
+export declare const DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS: ColorGradientOptions;

package/dist/demo/src/demo/gradients/gradientOptions.consts.js

@@ -0,0 +1,16 @@
+const DEFAULT_COLOR_GRADIENT_OPTIONS = {
+    stops: 2,
+    space: 'RGB',
+    interpolation: 'LINEAR',
+    easing: 'LINEAR',
+    clamp: true,
+    hueInterpolationMode: 'CARTESIAN',
+};
+export const DEFAULT_COLOR_GRADIENT_TO_OPTIONS = {
+    ...DEFAULT_COLOR_GRADIENT_OPTIONS,
+    stops: 5,
+};
+export const DEFAULT_COLOR_GRADIENT_THROUGH_OPTIONS = {
+    ...DEFAULT_COLOR_GRADIENT_OPTIONS,
+    stops: 6,
+};

package/dist/demo/src/demo/palette/ColorPaletteDemo.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '../../../../dist';
+interface Props {
+    color: Color;
+}
+export declare function ColorPaletteDemo({ color }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/palette/ColorPaletteDemo.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ColorSwatch } from '../ColorSwatch';
+import { PaletteHarmonyOptions } from './PaletteHarmonyOptions';
+import { PaletteGenerationOptions } from './PaletteGenerationOptions';
+import { VSpace } from '../../components/VSpace';
+const DEFAULT_GENERATE_COLOR_PALETTE_OPTIONS = {
+    neutralHarmonization: {
+        tintChromaFactor: 0.1,
+        maxTintChroma: 0.04,
+    },
+    semanticHarmonization: {
+        huePull: 0.1,
+        chromaRange: [0.02, 0.25],
+    },
+    swatchOptions: {
+        centerOn500: true,
+        extended: false,
+    },
+};
+export function ColorPaletteDemo({ color }) {
+    const [selectedHarmony, setSelectedHarmony] = useState('COMPLEMENTARY');
+    const [options, setOptions] = useState(DEFAULT_GENERATE_COLOR_PALETTE_OPTIONS);
+    const palette = color.getColorPalette(selectedHarmony, options);
+    return (_jsxs("div", { className: "w-full flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(PaletteHarmonyOptions, { selectedHarmony: selectedHarmony, onHarmonySelectionChanged: setSelectedHarmony }), _jsx(VSpace, { height: 8 }), _jsx(PaletteGenerationOptions, { options: options, onOptionsChanged: setOptions, onReset: () => setOptions(DEFAULT_GENERATE_COLOR_PALETTE_OPTIONS) })] }), _jsx(ColorSwatch, { swatch: palette.primary, title: "Primary", withLabels: true }), palette.secondaryColors.map((swatch, index) => (_jsx(ColorSwatch, { title: `Secondary${palette.secondaryColors.length > 1 ? ` ${index + 1}` : ''}`, swatch: swatch, withLabels: true }, index))), _jsx(ColorSwatch, { swatch: palette.neutrals, title: "Neutrals", withLabels: true }), _jsx(ColorSwatch, { swatch: palette.tintedNeutrals, title: "Tinted neutrals", withLabels: true }), _jsx(ColorSwatch, { swatch: palette.info, title: "Info (semantic)", withLabels: true }), _jsx(ColorSwatch, { swatch: palette.positive, title: "Positive (semantic)", withLabels: true }), _jsx(ColorSwatch, { swatch: palette.negative, title: "Negative (semantic)", withLabels: true }), _jsx(ColorSwatch, { swatch: palette.warning, title: "Warning (semantic)", withLabels: true }), _jsx(ColorSwatch, { swatch: palette.special, title: "Special (semantic)", withLabels: true })] }));
+}

package/dist/demo/src/demo/palette/PaletteGenerationOptions.d.ts

@@ -0,0 +1,8 @@
+import type { GenerateColorPaletteOptions } from '../../../../dist';
+interface Props {
+    options: GenerateColorPaletteOptions;
+    onOptionsChanged: (options: GenerateColorPaletteOptions) => void;
+    onReset: () => void;
+}
+export declare function PaletteGenerationOptions({ options, onOptionsChanged, onReset }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/palette/PaletteGenerationOptions.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '../../components/inputs/Checkbox';
+import { InputGroup } from '../../components/inputs/InputGroup';
+import { NumberInput } from '../../components/inputs/NumberInput';
+export function PaletteGenerationOptions({ options, onOptionsChanged, onReset }) {
+    return (_jsxs(InputGroup, { onResetClicked: onReset, children: [_jsx(NumberInput, { label: _jsxs("span", { children: [_jsx("u", { children: "Tinted neutrals" }), " chroma factor"] }), max: 1, min: 0, step: 0.01, value: options.neutralHarmonization?.tintChromaFactor, onChange: (value) => onOptionsChanged({
+                    ...options,
+                    neutralHarmonization: {
+                        ...options.neutralHarmonization,
+                        tintChromaFactor: value,
+                    },
+                }) }), _jsx(NumberInput, { label: _jsxs("span", { children: [_jsx("u", { children: "Tinted neutrals" }), " max chroma"] }), max: 1, min: 0, step: 0.01, value: options.neutralHarmonization?.maxTintChroma, onChange: (value) => onOptionsChanged({
+                    ...options,
+                    neutralHarmonization: {
+                        ...options.neutralHarmonization,
+                        maxTintChroma: value,
+                    },
+                }) }), _jsx(NumberInput, { label: _jsxs("span", { children: [_jsx("u", { children: "Semantic" }), " hue pull"] }), max: 1, min: 0, step: 0.01, value: options.semanticHarmonization?.huePull, onChange: (value) => onOptionsChanged({
+                    ...options,
+                    semanticHarmonization: {
+                        ...options.semanticHarmonization,
+                        huePull: value,
+                    },
+                }) }), _jsx("label", { children: _jsxs("div", { className: "flex flex-row flex-wrap items-center gap-2", children: [_jsx("u", { children: "Semantic" }), " chroma range:", _jsx(NumberInput, { max: 1, min: 0, step: 0.01, value: options.semanticHarmonization?.chromaRange?.[0], onChange: (value) => onOptionsChanged({
+                                ...options,
+                                semanticHarmonization: {
+                                    ...options.semanticHarmonization,
+                                    chromaRange: [value, options.semanticHarmonization?.chromaRange?.[1] ?? value],
+                                },
+                            }) }), "-", _jsx(NumberInput, { max: 1, min: 0, step: 0.01, value: options.semanticHarmonization?.chromaRange?.[1], onChange: (value) => onOptionsChanged({
+                                ...options,
+                                semanticHarmonization: {
+                                    ...options.semanticHarmonization,
+                                    chromaRange: [options.semanticHarmonization?.chromaRange?.[0] ?? value, value],
+                                },
+                            }) })] }) }), _jsx(Checkbox, { isChecked: options.swatchOptions?.centerOn500, label: "Centered swatches", onChange: (centerOn500) => {
+                    onOptionsChanged({
+                        ...options,
+                        swatchOptions: {
+                            ...options.swatchOptions,
+                            centerOn500,
+                        },
+                    });
+                } }), _jsx(Checkbox, { isChecked: options.swatchOptions?.extended, label: "Extended swatches", onChange: (extended) => {
+                    onOptionsChanged({
+                        ...options,
+                        swatchOptions: {
+                            ...options.swatchOptions,
+                            extended,
+                        },
+                    });
+                } })] }));
+}

package/dist/demo/src/demo/palette/PaletteHarmonyOptions.d.ts

@@ -0,0 +1,7 @@
+import type { ColorHarmony } from '../../../../dist';
+interface Props {
+    selectedHarmony: ColorHarmony;
+    onHarmonySelectionChanged: (harmony: ColorHarmony) => void;
+}
+export declare function PaletteHarmonyOptions({ selectedHarmony, onHarmonySelectionChanged }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/src/demo/palette/PaletteHarmonyOptions.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PALETTE_HARMONY_RADIO_GROUP_NAME = 'palette-color-harmony';
+export function PaletteHarmonyOptions({ selectedHarmony, onHarmonySelectionChanged }) {
+    return (_jsxs("div", { className: "w-full flex flex-row justify-center items-center gap-4 flex-wrap", children: [_jsxs("label", { className: "flex flex-row items-center gap-1", children: [_jsx("input", { checked: selectedHarmony === 'COMPLEMENTARY', name: PALETTE_HARMONY_RADIO_GROUP_NAME, type: "radio", value: "COMPLEMENTARY", onChange: () => onHarmonySelectionChanged('COMPLEMENTARY') }), "Complementary"] }), _jsxs("label", { className: "flex flex-row items-center gap-1", children: [_jsx("input", { checked: selectedHarmony === 'SPLIT_COMPLEMENTARY', name: PALETTE_HARMONY_RADIO_GROUP_NAME, type: "radio", value: "SPLIT_COMPLEMENTARY", onChange: () => onHarmonySelectionChanged('SPLIT_COMPLEMENTARY') }), "Split complementary"] }), _jsxs("label", { className: "flex flex-row items-center gap-1", children: [_jsx("input", { checked: selectedHarmony === 'TRIADIC', name: PALETTE_HARMONY_RADIO_GROUP_NAME, type: "radio", value: "TRIADIC", onChange: () => onHarmonySelectionChanged('TRIADIC') }), "Triadic"] }), _jsxs("label", { className: "flex flex-row items-center gap-1", children: [_jsx("input", { checked: selectedHarmony === 'SQUARE', name: PALETTE_HARMONY_RADIO_GROUP_NAME, type: "radio", value: "SQUARE", onChange: () => onHarmonySelectionChanged('SQUARE') }), "Square"] }), _jsxs("label", { className: "flex flex-row items-center gap-1", children: [_jsx("input", { checked: selectedHarmony === 'TETRADIC', name: PALETTE_HARMONY_RADIO_GROUP_NAME, type: "radio", value: "TETRADIC", onChange: () => onHarmonySelectionChanged('TETRADIC') }), "Tetradic"] }), _jsxs("label", { className: "flex flex-row items-center gap-1", children: [_jsx("input", { checked: selectedHarmony === 'ANALOGOUS', name: PALETTE_HARMONY_RADIO_GROUP_NAME, type: "radio", value: "ANALOGOUS", onChange: () => onHarmonySelectionChanged('ANALOGOUS') }), "Analogous"] }), _jsxs("label", { className: "flex flex-row items-center gap-1", children: [_jsx("input", { checked: selectedHarmony === 'MONOCHROMATIC', name: PALETTE_HARMONY_RADIO_GROUP_NAME, type: "radio", value: "MONOCHROMATIC", onChange: () => onHarmonySelectionChanged('MONOCHROMATIC') }), "Monochromatic"] })] }));
+}

package/dist/demo/src/main.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/demo/src/main.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { DemoPage } from './pages/DemoPage';
+import { PlaygroundPage } from './pages/PlaygroundPage';
+import { ToastProvider } from './toast';
+import './index.css';
+const basename = (import.meta.env.BASE_URL ?? '/').replace(/\/$/, '');
+const router = createBrowserRouter([
+    { path: '/', element: _jsx(DemoPage, {}) },
+    { path: '/playground', element: _jsx(PlaygroundPage, {}) },
+], { basename });
+createRoot(document.getElementById('root')).render(_jsx(StrictMode, { children: _jsx(ToastProvider, { children: _jsx(RouterProvider, { router: router }) }) }));

package/dist/demo/src/pages/DemoPage.d.ts

@@ -0,0 +1 @@
+export declare function DemoPage(): import("react/jsx-runtime").JSX.Element;

package/dist/demo/src/pages/DemoPage.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { AppFooter } from '../AppFooter';
+import { AppHeader } from '../AppHeader';
+import { SectionContainer } from '../components/SectionContainer';
+import { DemoSectionIDs } from '../components/utils';
+import { VSpace } from '../components/VSpace';
+import { ColorDemo } from '../demo/ColorDemo';
+import { Playground } from '../playground/Playground';
+import { PageHead } from '../seo/PageHead';
+import { StructuredData } from '../seo/StructuredData';
+export function DemoPage() {
+    const pageStructuredData = useMemo(() => ({
+        '@context': 'https://schema.org',
+        '@type': 'WebPage',
+        '@id': 'https://rteammco.github.io/omni-color/',
+        name: 'omni-color color library demo',
+        url: 'https://rteammco.github.io/omni-color/',
+        inLanguage: 'en',
+        isPartOf: {
+            '@id': 'https://rteammco.github.io/omni-color/#website',
+        },
+        about: {
+            '@id': 'https://rteammco.github.io/omni-color/#software',
+        },
+    }), []);
+    return (_jsxs(_Fragment, { children: [_jsx(PageHead, { description: "Explore omni-color color utilities, gradients, harmonies, and palettes with live previews and interactive demos.", path: "/", title: "omni-color | Interactive Demo" }), _jsx(StructuredData, { data: pageStructuredData }), _jsx("div", { className: "w-full p-6 text-center", children: _jsxs("div", { className: "max-w-7xl justify-self-center", children: [_jsx(AppHeader, {}), _jsx(VSpace, { height: 40 }), _jsx(ColorDemo, {}), _jsx(VSpace, { height: 40 }), _jsx(SectionContainer, { description: "You can experiment with the Color object here", openSectionInNewTabLink: "/omni-color/playground", sectionID: DemoSectionIDs.PLAYGROUND, title: "Code playground", children: _jsx(Playground, {}) }), _jsx(VSpace, { height: 40 }), _jsx(AppFooter, {})] }) })] }));
+}

package/dist/demo/src/pages/PlaygroundPage.d.ts

@@ -0,0 +1 @@
+export declare function PlaygroundPage(): import("react/jsx-runtime").JSX.Element;

package/dist/demo/src/pages/PlaygroundPage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { AppHeader } from '../AppHeader';
+import { VSpace } from '../components/VSpace';
+import { Playground } from '../playground/Playground';
+import { PageHead } from '../seo/PageHead';
+import { StructuredData } from '../seo/StructuredData';
+export function PlaygroundPage() {
+    const pageStructuredData = useMemo(() => ({
+        '@context': 'https://schema.org',
+        '@type': 'WebPage',
+        '@id': 'https://rteammco.github.io/omni-color/playground',
+        name: 'omni-color playground',
+        url: 'https://rteammco.github.io/omni-color/playground',
+        inLanguage: 'en',
+        isPartOf: {
+            '@id': 'https://rteammco.github.io/omni-color/#website',
+        },
+        about: {
+            '@id': 'https://rteammco.github.io/omni-color/#software',
+        },
+    }), []);
+    return (_jsxs(_Fragment, { children: [_jsx(PageHead, { description: "Run omni-color JavaScript snippets in the browser to explore conversions, palettes, and color math interactively.", path: "/playground", title: "omni-color | Code Playground" }), _jsx(StructuredData, { data: pageStructuredData }), _jsxs("div", { className: "p-6 w-full text-center", children: [_jsx(AppHeader, { pageDescription: "Code Playground" }), _jsx(VSpace, { height: 40 }), _jsx(Playground, {})] })] }));
+}

package/dist/demo/src/playground/Playground.d.ts

@@ -0,0 +1 @@
+export declare function Playground(): import("react/jsx-runtime").JSX.Element;

package/dist/demo/src/playground/Playground.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { CodeExecutionStatus, getRandomStarterCode, tryToRunCode } from './playgroundUtils';
+import { Color } from '../../../dist';
+import { ColorBox } from '../components/ColorBox';
+import { Card } from '../components/Card';
+export function Playground() {
+    const initialCode = useMemo(() => getRandomStarterCode(), []);
+    const [code, setCode] = useState(initialCode);
+    const [returnedColor, setReturnedColor] = useState(null);
+    const [codeErrorMessage, setCodeErrorMessage] = useState(null);
+    const [codeConsoleOutputs, setCodeConsoleOutputs] = useState(null);
+    const placeholderColor = useMemo(() => new Color('white'), []);
+    const executeCode = useCallback((newCode) => {
+        tryToRunCode(newCode).then((res) => {
+            if (res.status === CodeExecutionStatus.SUCCESS) {
+                setCodeErrorMessage(null);
+                setReturnedColor(res.color ?? null);
+            }
+            else {
+                setCodeErrorMessage(res.errorMessage ?? `Something went wrong: ${res.status}`);
+            }
+            if (res.status !== CodeExecutionStatus.CODE_ERROR) {
+                setCodeConsoleOutputs(res.consoleOutputs ?? null);
+            }
+        });
+    }, []);
+    const handleCodeChanged = useCallback((event) => {
+        const newCode = event.target.value;
+        setCode(newCode);
+        executeCode(newCode);
+    }, [executeCode]);
+    const handleResetOrInitCode = useCallback(() => {
+        const newCode = getRandomStarterCode();
+        setCode(newCode);
+        executeCode(newCode);
+    }, [executeCode]);
+    useEffect(() => {
+        executeCode(initialCode);
+    }, [executeCode, initialCode]);
+    return (_jsxs("div", { className: "w-full flex flex-col items-center", children: [_jsxs("div", { className: "w-full flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx("textarea", { className: `px-4 py-2 w-full h-60 border-1 ${codeErrorMessage ? 'border-red-500' : 'border-gray-200'} rounded-md shadow-md font-mono text-sm`, spellCheck: false, value: code, onChange: handleCodeChanged }), codeErrorMessage && (_jsx("div", { className: "flex flex-row items-center text-sm text-red-500 h-6", children: codeErrorMessage }))] }), _jsx(Card, { title: "Output", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "w-full", children: _jsx(ColorBox, { color: returnedColor ?? placeholderColor, label: returnedColor?.toHex(), overlaySize: "SMALL", overlayText: "Returned color", width: "STRETCH" }) }), codeConsoleOutputs && codeConsoleOutputs.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-3 mb-3 w-full", children: _jsx("div", { className: "flex flex-col items-start gap-0.5 w-full", children: codeConsoleOutputs.map((output, index) => (_jsxs("pre", { className: "text-sm whitespace-pre-wrap break-words text-left w-full", children: ["> ", output] }, index))) }) }))] }) })] }), _jsx("button", { className: "mt-4", onClick: handleResetOrInitCode, children: "Reset playground" })] }));
+}

package/dist/demo/src/playground/playgroundUtils.d.ts

@@ -0,0 +1,16 @@
+import { Color } from '../../../dist';
+export declare function getRandomStarterCode(): string;
+export declare enum CodeExecutionStatus {
+    CODE_ERROR = "CODE_ERROR",
+    NO_RETURNED_VALUE = "NO_RETURNED_VALUE",
+    INVALID_RETURNED_VALUE = "INVALID_RETURNED_VALUE",
+    SUCCESS = "SUCCESS"
+}
+interface RunCodeResults {
+    color?: Color;
+    consoleOutputs?: string[];
+    errorMessage?: string;
+    status: CodeExecutionStatus;
+}
+export declare function tryToRunCode(code: string): Promise<RunCodeResults>;
+export {};