@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/colorpicker/ColorUtils.js

@@ -0,0 +1,216 @@
+function hexToRgb(hex) {
+    const cleaned = hex.replace(/^#/, "");
+    if (3 === cleaned.length) {
+        const r = Number.parseInt(cleaned[0] + cleaned[0], 16);
+        const g = Number.parseInt(cleaned[1] + cleaned[1], 16);
+        const b = Number.parseInt(cleaned[2] + cleaned[2], 16);
+        return {
+            r,
+            g,
+            b
+        };
+    }
+    if (6 === cleaned.length) {
+        const r = Number.parseInt(cleaned.substring(0, 2), 16);
+        const g = Number.parseInt(cleaned.substring(2, 4), 16);
+        const b = Number.parseInt(cleaned.substring(4, 6), 16);
+        return {
+            r,
+            g,
+            b
+        };
+    }
+    return null;
+}
+function rgbToHex(r, g, b) {
+    const toHex = (n)=>{
+        const hex = Math.max(0, Math.min(255, Math.round(n))).toString(16);
+        return 1 === hex.length ? `0${hex}` : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function rgbToHsl(r, g, b) {
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    const delta = max - min;
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (0 !== delta) {
+        s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+        switch(max){
+            case rNorm:
+                h = ((gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0)) / 6;
+                break;
+            case gNorm:
+                h = ((bNorm - rNorm) / delta + 2) / 6;
+                break;
+            case bNorm:
+                h = ((rNorm - gNorm) / delta + 4) / 6;
+                break;
+        }
+    }
+    return {
+        h: Math.round(360 * h),
+        s: Math.round(100 * s),
+        l: Math.round(100 * l)
+    };
+}
+function hslToRgb(h, s, l) {
+    const hNorm = h / 360;
+    const sNorm = s / 100;
+    const lNorm = l / 100;
+    const hue2rgb = (p, q, t)=>{
+        let tNorm = t;
+        if (tNorm < 0) tNorm += 1;
+        if (tNorm > 1) tNorm -= 1;
+        if (tNorm < 1 / 6) return p + (q - p) * 6 * tNorm;
+        if (tNorm < 0.5) return q;
+        if (tNorm < 2 / 3) return p + (q - p) * (2 / 3 - tNorm) * 6;
+        return p;
+    };
+    if (0 === sNorm) {
+        const gray = Math.round(255 * lNorm);
+        return {
+            r: gray,
+            g: gray,
+            b: gray
+        };
+    }
+    const q = lNorm < 0.5 ? lNorm * (1 + sNorm) : lNorm + sNorm - lNorm * sNorm;
+    const p = 2 * lNorm - q;
+    return {
+        r: Math.round(255 * hue2rgb(p, q, hNorm + 1 / 3)),
+        g: Math.round(255 * hue2rgb(p, q, hNorm)),
+        b: Math.round(255 * hue2rgb(p, q, hNorm - 1 / 3))
+    };
+}
+function parseColor(color) {
+    const trimmed = color.trim();
+    if (trimmed.startsWith("#")) {
+        const rgb = hexToRgb(trimmed);
+        if (!rgb) return null;
+        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+        return {
+            rgb: {
+                ...rgb,
+                a: 1
+            },
+            hsl: {
+                ...hsl,
+                a: 1
+            },
+            hex: trimmed
+        };
+    }
+    const rgbMatch = trimmed.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/);
+    if (rgbMatch) {
+        const r = Number.parseInt(rgbMatch[1], 10);
+        const g = Number.parseInt(rgbMatch[2], 10);
+        const b = Number.parseInt(rgbMatch[3], 10);
+        const a = rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1;
+        const hsl = rgbToHsl(r, g, b);
+        return {
+            rgb: {
+                r,
+                g,
+                b,
+                a
+            },
+            hsl: {
+                ...hsl,
+                a
+            },
+            hex: rgbToHex(r, g, b)
+        };
+    }
+    const hslMatch = trimmed.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)/);
+    if (hslMatch) {
+        const h = Number.parseFloat(hslMatch[1]);
+        const s = Number.parseFloat(hslMatch[2]);
+        const l = Number.parseFloat(hslMatch[3]);
+        const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1;
+        const rgb = hslToRgb(h, s, l);
+        return {
+            rgb: {
+                ...rgb,
+                a
+            },
+            hsl: {
+                h,
+                s,
+                l,
+                a
+            },
+            hex: rgbToHex(rgb.r, rgb.g, rgb.b)
+        };
+    }
+    return null;
+}
+function formatColor(color, format) {
+    switch(format){
+        case "hex":
+            return color.hex;
+        case "rgb":
+            return `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
+        case "rgba":
+            return `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`;
+        case "hsl":
+            return `hsl(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%)`;
+        case "hsla":
+            return `hsla(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%, ${color.hsl.a})`;
+        default:
+            return color.hex;
+    }
+}
+function setAlpha(color, alpha) {
+    const clampedAlpha = Math.max(0, Math.min(1, alpha));
+    return {
+        ...color,
+        rgb: {
+            ...color.rgb,
+            a: clampedAlpha
+        },
+        hsl: {
+            ...color.hsl,
+            a: clampedAlpha
+        }
+    };
+}
+function createColorFromHsl(h, s, l, a = 1) {
+    const rgb = hslToRgb(h, s, l);
+    return {
+        rgb: {
+            ...rgb,
+            a
+        },
+        hsl: {
+            h,
+            s,
+            l,
+            a
+        },
+        hex: rgbToHex(rgb.r, rgb.g, rgb.b)
+    };
+}
+function getDefaultColor() {
+    return {
+        rgb: {
+            r: 255,
+            g: 255,
+            b: 255,
+            a: 1
+        },
+        hsl: {
+            h: 0,
+            s: 0,
+            l: 100,
+            a: 1
+        },
+        hex: "#ffffff"
+    };
+}
+export { createColorFromHsl, formatColor, getDefaultColor, hexToRgb, hslToRgb, parseColor, rgbToHex, rgbToHsl, setAlpha };

package/dist/components/colorpicker/ColorWheel.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface ColorWheelProps {
+    class?: string;
+    className?: string;
+}
+declare const ColorWheel: (props: ColorWheelProps) => JSX.Element;
+export default ColorWheel;

package/dist/components/colorpicker/ColorWheel.js

@@ -0,0 +1,106 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__ from "./ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=slider aria-label="Color Wheel"><div>');
+const ColorWheel_ColorWheel = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let containerRef;
+    let cursorRef;
+    const hue = ()=>context.color().hsl.h;
+    const saturation = ()=>context.color().hsl.s;
+    const lightness = ()=>context.color().hsl.l;
+    const updateColor = (x, y)=>{
+        if (!containerRef || context.disabled()) return;
+        const rect = containerRef.getBoundingClientRect();
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const dx = x - rect.left - centerX;
+        const dy = y - rect.top - centerY;
+        let angle = 180 / Math.PI * Math.atan2(dy, dx) + 90;
+        if (angle < 0) angle += 360;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const radius = rect.width / 2;
+        const s = Math.min(100, distance / radius * 100);
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(Math.round(angle), Math.round(s), lightness(), context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateColor(e.clientX, e.clientY);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateColor(e.clientX, e.clientY);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    });
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative w-48 h-48 rounded-full cursor-crosshair select-none overflow-hidden mx-auto", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const cursorPosition = ()=>{
+        const hRad = (hue() - 90) * (Math.PI / 180);
+        const sNorm = saturation() / 100;
+        const x = 50 + 50 * sNorm * Math.cos(hRad);
+        const y = 50 + 50 * sNorm * Math.sin(hRad);
+        return {
+            x,
+            y
+        };
+    };
+    const cursorClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("absolute w-4 h-4 border-2 border-white rounded-full shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-1/2", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "ring-2 ring-primary": isDragging()
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
+        _el$.style.setProperty("background", "\n          radial-gradient(circle, white 0%, transparent 100%),\n          conic-gradient(\n            from 0deg,\n            hsl(0, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        ");
+        var _ref$2 = cursorRef;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : cursorRef = _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = `Hue ${Math.round(hue())}deg, Saturation ${Math.round(saturation())}%`, _v$4 = context.disabled(), _v$5 = cursorClasses(), _v$6 = `${cursorPosition().x}%`, _v$7 = `${cursorPosition().y}%`, _v$8 = `hsl(${hue()}, ${saturation()}%, 50%)`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuetext", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.i = _v$5);
+            _v$6 !== _p$.n && (null != (_p$.n = _v$6) ? _el$2.style.setProperty("left", _v$6) : _el$2.style.removeProperty("left"));
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("top", _v$7) : _el$2.style.removeProperty("top"));
+            _v$8 !== _p$.h && (null != (_p$.h = _v$8) ? _el$2.style.setProperty("background-color", _v$8) : _el$2.style.removeProperty("background-color"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0,
+            h: void 0
+        });
+        return _el$;
+    })();
+};
+const ColorWheel = ColorWheel_ColorWheel;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown"
+]);
+export { ColorWheel as default };

package/dist/components/colorpicker/ColorWheelFlower.d.ts

@@ -0,0 +1,7 @@
+import { type JSX } from "solid-js";
+export interface ColorWheelFlowerProps {
+    class?: string;
+    className?: string;
+}
+declare const ColorWheelFlower: (props: ColorWheelFlowerProps) => JSX.Element;
+export default ColorWheelFlower;