@pathscale/ui 0.1.1 → 1.2.1

package/dist/components/colorpicker/LightnessSlider.js

@@ -0,0 +1,111 @@
+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=Lightness aria-valuemin=0 aria-valuemax=100><div>");
+const LightnessSlider_LightnessSlider = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let sliderRef;
+    const lightness = ()=>context.color().hsl.l;
+    const updateLightness = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newLightness = Math.round(100 * percentage);
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(context.color().hsl.h, context.color().hsl.s, newLightness, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateLightness(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateLightness(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 10 : 1;
+        let newL = lightness();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newL = Math.max(0, newL - step);
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newL = Math.min(100, newL + step);
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(context.color().hsl.h, context.color().hsl.s, newL, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    (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-full h-6 rounded cursor-pointer select-none", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    const thumbClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("absolute top-1/2 w-4 h-4 border-2 border-white rounded-full shadow-lg transform -translate-x-1/2 -translate-y-1/2 pointer-events-none", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "ring-2 ring-primary": isDragging()
+        }));
+    const gradientStyle = ()=>{
+        const h = context.color().hsl.h;
+        const s = context.color().hsl.s;
+        return `linear-gradient(to right, hsl(${h}, ${s}%, 0%), hsl(${h}, ${s}%, 50%), hsl(${h}, ${s}%, 100%))`;
+    };
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        _el$.$$keydown = handleKeyDown;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = sliderRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = gradientStyle(), _v$3 = context.disabled() ? -1 : 0, _v$4 = lightness(), _v$5 = context.disabled(), _v$6 = thumbClasses(), _v$7 = `${lightness()}%`, _v$8 = `hsl(${context.color().hsl.h}, ${context.color().hsl.s}%, ${lightness()}%)`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$.style.setProperty("background", _v$2) : _el$.style.removeProperty("background"));
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("left", _v$7) : _el$2.style.removeProperty("left"));
+            _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 LightnessSlider = LightnessSlider_LightnessSlider;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+export { LightnessSlider as default };

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

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

package/dist/components/colorpicker/SaturationBrightness.js

@@ -0,0 +1,120 @@
+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="Saturation and brightness"aria-valuemin=0 aria-valuemax=100><div>');
+const SaturationBrightness = (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 saturation = ()=>context.color().hsl.s;
+    const brightness = ()=>100 - context.color().hsl.l;
+    const updateColor = (x, y)=>{
+        if (!containerRef || context.disabled()) return;
+        const rect = containerRef.getBoundingClientRect();
+        const s = Math.max(0, Math.min(100, (x - rect.left) / rect.width * 100));
+        const l = Math.max(0, Math.min(100, 100 - (y - rect.top) / rect.height * 100));
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(context.color().hsl.h, s, l, 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);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 10 : 1;
+        let s = saturation();
+        let l = 100 - brightness();
+        switch(e.key){
+            case "ArrowLeft":
+                s = Math.max(0, s - step);
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+                s = Math.min(100, s + step);
+                e.preventDefault();
+                break;
+            case "ArrowUp":
+                l = Math.min(100, l + step);
+                e.preventDefault();
+                break;
+            case "ArrowDown":
+                l = Math.max(0, l - step);
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.createColorFromHsl)(context.color().hsl.h, s, l, context.color().hsl.a);
+        context.onChange(newColor);
+    };
+    (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-full h-48 rounded cursor-crosshair select-none", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "opacity-50 cursor-not-allowed": context.disabled()
+        }), props.class, props.className);
+    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$.$$keydown = handleKeyDown;
+        _el$.$$mousedown = handleMouseDown;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
+        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 = `
+          linear-gradient(to top, #000, transparent),
+          linear-gradient(to right, #fff, hsl(${context.color().hsl.h}, 100%, 50%))
+        `, _v$3 = context.disabled() ? -1 : 0, _v$4 = saturation(), _v$5 = context.disabled(), _v$6 = cursorClasses(), _v$7 = `${saturation()}%`, _v$8 = `${brightness()}%`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$.style.setProperty("background", _v$2) : _el$.style.removeProperty("background"));
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.o = _v$4);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("left", _v$7) : _el$2.style.removeProperty("left"));
+            _v$8 !== _p$.h && (null != (_p$.h = _v$8) ? _el$2.style.setProperty("top", _v$8) : _el$2.style.removeProperty("top"));
+            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 colorpicker_SaturationBrightness = SaturationBrightness;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+export { colorpicker_SaturationBrightness as default };

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

@@ -0,0 +1,11 @@
+import { type Accessor } from "solid-js";
+import type { ColorValue, ColorFormat } from "./ColorUtils";
+export interface ColorPickerContextType {
+    color: Accessor<ColorValue>;
+    format: Accessor<ColorFormat>;
+    disabled: Accessor<boolean>;
+    onChange: (color: ColorValue) => void;
+    onFormatChange: (format: ColorFormat) => void;
+}
+export declare const ColorPickerContext: import("solid-js").Context<ColorPickerContextType | undefined>;
+export declare function useColorPickerContext(): ColorPickerContextType;

package/dist/components/colorpicker/colorpickerContext.js

@@ -0,0 +1,8 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const ColorPickerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)(void 0);
+function useColorPickerContext() {
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ColorPickerContext);
+    if (!context) throw new Error("useColorPickerContext must be used within a ColorPickerContext.Provider");
+    return context;
+}
+export { ColorPickerContext, useColorPickerContext };

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

@@ -0,0 +1,26 @@
+export { default as ColorPicker, default } from "./ColorPicker";
+export type { ColorPickerProps, ColorFormat, ColorPickerMode } from "./ColorPicker";
+export { default as ColorPickerGradientSelector } from "./ColorPickerGradientSelector";
+export { default as ColorPickerWheelSelector } from "./ColorPickerWheelSelector";
+export { default as ColorPickerFlowerSelector } from "./ColorPickerFlowerSelector";
+export { default as SaturationBrightness } from "./SaturationBrightness";
+export { default as HueSlider } from "./HueSlider";
+export { default as LightnessSlider } from "./LightnessSlider";
+export { default as AlphaSlider } from "./AlphaSlider";
+export { default as ColorWheel } from "./ColorWheel";
+export { default as ColorWheelFlower } from "./ColorWheelFlower";
+export { default as ColorSwatches } from "./ColorSwatches";
+export { default as ColorInput } from "./ColorInput";
+export { default as ColorPreview } from "./ColorPreview";
+export { ColorPickerContext, useColorPickerContext } from "./colorpickerContext";
+export type { ColorPickerContextType } from "./colorpickerContext";
+export type { SaturationBrightnessProps } from "./SaturationBrightness";
+export type { HueSliderProps } from "./HueSlider";
+export type { LightnessSliderProps } from "./LightnessSlider";
+export type { AlphaSliderProps } from "./AlphaSlider";
+export type { ColorWheelProps } from "./ColorWheel";
+export type { ColorWheelFlowerProps } from "./ColorWheelFlower";
+export type { ColorSwatchesProps } from "./ColorSwatches";
+export type { ColorInputProps } from "./ColorInput";
+export type { ColorPreviewProps } from "./ColorPreview";
+export type { ColorValue, RGB, RGBA, HSL, HSLA } from "./ColorUtils";

package/dist/components/colorpicker/index.js

@@ -0,0 +1,31 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__ from "./ColorPicker.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerGradientSelector_js_56799ff8__ from "./ColorPickerGradientSelector.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerWheelSelector_js_ea2d44f8__ from "./ColorPickerWheelSelector.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPickerFlowerSelector_js_461ceb45__ from "./ColorPickerFlowerSelector.js";
+import * as __WEBPACK_EXTERNAL_MODULE__SaturationBrightness_js_260379ed__ from "./SaturationBrightness.js";
+import * as __WEBPACK_EXTERNAL_MODULE__HueSlider_js_2f8e5d2a__ from "./HueSlider.js";
+import * as __WEBPACK_EXTERNAL_MODULE__LightnessSlider_js_8323e906__ from "./LightnessSlider.js";
+import * as __WEBPACK_EXTERNAL_MODULE__AlphaSlider_js_9037f62c__ from "./AlphaSlider.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorWheel_js_83f4ee9c__ from "./ColorWheel.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_js_ffac5f30__ from "./ColorWheelFlower.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorSwatches_js_ed23b2d2__ from "./ColorSwatches.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorInput_js_cca8d716__ from "./ColorInput.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ColorPreview_js_cbf20135__ from "./ColorPreview.js";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__ from "./colorpickerContext.js";
+var __webpack_exports__AlphaSlider = __WEBPACK_EXTERNAL_MODULE__AlphaSlider_js_9037f62c__["default"];
+var __webpack_exports__ColorInput = __WEBPACK_EXTERNAL_MODULE__ColorInput_js_cca8d716__["default"];
+var __webpack_exports__ColorPicker = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__["default"];
+var __webpack_exports__ColorPickerContext = __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.ColorPickerContext;
+var __webpack_exports__ColorPickerFlowerSelector = __WEBPACK_EXTERNAL_MODULE__ColorPickerFlowerSelector_js_461ceb45__["default"];
+var __webpack_exports__ColorPickerGradientSelector = __WEBPACK_EXTERNAL_MODULE__ColorPickerGradientSelector_js_56799ff8__["default"];
+var __webpack_exports__ColorPickerWheelSelector = __WEBPACK_EXTERNAL_MODULE__ColorPickerWheelSelector_js_ea2d44f8__["default"];
+var __webpack_exports__ColorPreview = __WEBPACK_EXTERNAL_MODULE__ColorPreview_js_cbf20135__["default"];
+var __webpack_exports__ColorSwatches = __WEBPACK_EXTERNAL_MODULE__ColorSwatches_js_ed23b2d2__["default"];
+var __webpack_exports__ColorWheel = __WEBPACK_EXTERNAL_MODULE__ColorWheel_js_83f4ee9c__["default"];
+var __webpack_exports__ColorWheelFlower = __WEBPACK_EXTERNAL_MODULE__ColorWheelFlower_js_ffac5f30__["default"];
+var __webpack_exports__HueSlider = __WEBPACK_EXTERNAL_MODULE__HueSlider_js_2f8e5d2a__["default"];
+var __webpack_exports__LightnessSlider = __WEBPACK_EXTERNAL_MODULE__LightnessSlider_js_8323e906__["default"];
+var __webpack_exports__SaturationBrightness = __WEBPACK_EXTERNAL_MODULE__SaturationBrightness_js_260379ed__["default"];
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ColorPicker_js_c381c0c3__["default"];
+var __webpack_exports__useColorPickerContext = __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext;
+export { __webpack_exports__AlphaSlider as AlphaSlider, __webpack_exports__ColorInput as ColorInput, __webpack_exports__ColorPicker as ColorPicker, __webpack_exports__ColorPickerContext as ColorPickerContext, __webpack_exports__ColorPickerFlowerSelector as ColorPickerFlowerSelector, __webpack_exports__ColorPickerGradientSelector as ColorPickerGradientSelector, __webpack_exports__ColorPickerWheelSelector as ColorPickerWheelSelector, __webpack_exports__ColorPreview as ColorPreview, __webpack_exports__ColorSwatches as ColorSwatches, __webpack_exports__ColorWheel as ColorWheel, __webpack_exports__ColorWheelFlower as ColorWheelFlower, __webpack_exports__HueSlider as HueSlider, __webpack_exports__LightnessSlider as LightnessSlider, __webpack_exports__SaturationBrightness as SaturationBrightness, __webpack_exports__default as default, __webpack_exports__useColorPickerContext as useColorPickerContext };

package/dist/components/confirm-dialog/ConfirmDialog.d.ts

@@ -0,0 +1,15 @@
+import type { JSX, ParentProps } from "solid-js";
+import type { ButtonVariant } from "../button";
+import type { IComponentBaseProps } from "../types";
+export type ConfirmDialogProps = ParentProps<IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDialogElement>, "children"> & {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message?: JSX.Element;
+    confirmText?: string;
+    cancelText?: string;
+    confirmVariant?: ButtonVariant;
+    loading?: boolean;
+}>;
+export default function ConfirmDialog(props: ConfirmDialogProps): JSX.Element;

package/dist/components/confirm-dialog/ConfirmDialog.js

@@ -0,0 +1,102 @@
+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_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__modal_Modal_js_71594540__ from "../modal/Modal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__ from "../button/Button.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function ConfirmDialog(props) {
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "open",
+        "onClose",
+        "onConfirm",
+        "title",
+        "message",
+        "children",
+        "confirmText",
+        "cancelText",
+        "confirmVariant",
+        "loading",
+        "dataTheme",
+        "class",
+        "className"
+    ]);
+    const titleId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const messageId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const hasBody = ()=>null != local.children || null != local.message;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__modal_Modal_js_71594540__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get open () {
+            return local.open;
+        },
+        get onClose () {
+            return local.onClose;
+        },
+        responsive: true,
+        role: "alertdialog",
+        "aria-labelledby": titleId,
+        get ["aria-describedby"] () {
+            return hasBody() ? messageId : void 0;
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
+        }
+    }, others, {
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__modal_Modal_js_71594540__["default"].Header, {
+                    id: titleId,
+                    get children () {
+                        return local.title;
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__modal_Modal_js_71594540__["default"].Body, {
+                    get children () {
+                        var _el$ = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "id", messageId);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? local.message);
+                        return _el$;
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__modal_Modal_js_71594540__["default"].Actions, {
+                    class: "flex justify-end gap-2",
+                    get children () {
+                        return [
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
+                                variant: "ghost",
+                                get onClick () {
+                                    return local.onClose;
+                                },
+                                get isDisabled () {
+                                    return local.loading;
+                                },
+                                get children () {
+                                    return local.cancelText ?? "Cancel";
+                                }
+                            }),
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_Button_js_6d750473__["default"], {
+                                get variant () {
+                                    return local.confirmVariant ?? "danger";
+                                },
+                                get onClick () {
+                                    return local.onConfirm;
+                                },
+                                get isPending () {
+                                    return local.loading;
+                                },
+                                get isDisabled () {
+                                    return local.loading;
+                                },
+                                get children () {
+                                    return local.confirmText ?? "Confirm";
+                                }
+                            })
+                        ];
+                    }
+                })
+            ];
+        }
+    }));
+}
+export { ConfirmDialog as default };

package/dist/components/confirm-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from "./ConfirmDialog";
+export type { ConfirmDialogProps } from "./ConfirmDialog";

package/dist/components/confirm-dialog/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ConfirmDialog_js_95f2ee03__ from "./ConfirmDialog.js";
+var __webpack_exports__ConfirmDialog = __WEBPACK_EXTERNAL_MODULE__ConfirmDialog_js_95f2ee03__["default"];
+export { __webpack_exports__ConfirmDialog as ConfirmDialog };

package/dist/components/connectionstatus/ConnectionStatus.d.ts

@@ -1,4 +1,4 @@
-import { type Component } from "solid-js";
+import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ConnectionState = "connecting" | "connected" | "disconnected" | "error";
 export interface ConnectionStatusProps extends IComponentBaseProps {
@@ -49,7 +49,7 @@ export interface ConnectionStatusProps extends IComponentBaseProps {
     /**
      * Custom style
      */
-    style?: any;
+    style?: JSX.CSSProperties;
     /**
      * Data theme
      */