@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/collapse/CollapseTitle.js

@@ -0,0 +1,47 @@
+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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<summary>");
+const TITLE_PART = "title";
+const classesFn = ({ className })=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("collapse-title", className);
+function CollapseTitle(props) {
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "onClick"
+    ]);
+    const handleClick = (event)=>{
+        const titleNode = event.currentTarget;
+        const root = titleNode.closest(".collapse");
+        const toggleInput = root?.querySelector(':scope > input[type="checkbox"], :scope > input[type="radio"]');
+        if (toggleInput) toggleInput.click();
+        if ("function" == typeof local.onClick) local.onClick(event);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "data-collapse-part": TITLE_PART,
+            get ["class"] () {
+                return classesFn({
+                    className: local.class
+                });
+            },
+            onClick: handleClick
+        }), false, false);
+        return _el$;
+    })();
+}
+function Summary(props) {
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            "data-collapse-part": TITLE_PART,
+            get ["class"] () {
+                return classesFn({
+                    className: props.class
+                });
+            }
+        }), false, false);
+        return _el$2;
+    })();
+}
+export { CollapseTitle, Summary, classesFn };

package/dist/components/collapse/collapse.css

@@ -0,0 +1,248 @@
+@layer components {
+  .collapse-arrow > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      top: 50%;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-arrow > .collapse-title:after {
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+    }
+    }
+
+  .collapse-plus > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      --tw-content: "+";
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-plus > .collapse-title:after {
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    }
+
+  .collapse {
+      display: grid;
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius-box, 1rem);
+      width: 100%;
+      grid-template-rows: max-content 0fr;
+      grid-template-columns: minmax(0, 1fr);
+      isolation: isolate;
+    }
+
+  .collapse:not(td, tr, colgroup) {
+      visibility: revert-layer;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse {
+      transition: grid-template-rows 0.2s;
+    }
+    }
+
+  .collapse > input:is([type="checkbox"], [type="radio"]) {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ),
+    .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      content-visibility: visible;
+      min-height: fit-content;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      visibility: visible;
+    }
+    }
+
+  .collapse:focus-visible,
+    .collapse:has(> input:is([type="checkbox"], [type="radio"]):focus-visible),
+    .collapse:has(summary:focus-visible) {
+      outline-color: var(--color-base-content);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+
+  .collapse:not(.collapse-close) > input[type="checkbox"],
+    .collapse:not(.collapse-close) > input[type="radio"]:not(:checked),
+    .collapse:not(.collapse-close) > .collapse-title {
+      cursor: pointer;
+    }
+
+  .collapse[tabindex]:focus:not(.collapse-close, .collapse[open]) > .collapse-title,
+    .collapse[tabindex]:focus-within:not(.collapse-close, .collapse[open]) > .collapse-title {
+      cursor: unset;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > :where(.collapse-content),
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is([open]).collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse.collapse-open.collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  .collapse.collapse-open.collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
+    .collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close) > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse.collapse-arrow:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse[open].collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-plus:focus:not(.collapse-close) > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse.collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse:is(details) {
+      width: 100%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is(details)::details-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out, height 0.2s;
+      height: 0;
+      interpolate-size: allow-keywords;
+    }
+    .collapse:is(details):where([open])::details-content {
+      height: auto;
+    }
+    }
+
+  .collapse:is(details) summary {
+      position: relative;
+      display: block;
+    }
+
+  .collapse:is(details) summary::-webkit-details-marker {
+      display: none;
+    }
+
+  .collapse:is(details) > .collapse-content {
+      content-visibility: visible;
+    }
+
+  .collapse:is(details) summary {
+      outline: none;
+    }
+
+  .collapse-content {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      content-visibility: hidden;
+      grid-column-start: 1;
+      grid-row-start: 2;
+      min-height: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      cursor: unset;
+    }
+
+  @supports not (content-visibility: hidden) {
+    .collapse-content {
+      visibility: hidden;
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out;
+    }
+    }
+
+  .collapse-open {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse-open > .collapse-content {
+      content-visibility: visible;
+      min-height: fit-content;
+      padding-bottom: 1rem;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse-open > .collapse-content {
+      visibility: visible;
+    }
+    }
+
+  .collapse {
+      visibility: collapse;
+    }
+
+  .collapse-title {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      position: relative;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+}

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

@@ -1,4 +1,4 @@
 export { default as CollapseContent } from "./CollapseContent";
 export { CollapseTitle, Summary } from "./CollapseTitle";
 export { default as CollapseDetails } from "./CollapseDetails";
-export { default as Collapse } from "./Collapse";
+export { default as Collapse, type CollapseProps } from "./Collapse";

package/dist/components/collapse/index.js

@@ -0,0 +1,10 @@
+import * as __WEBPACK_EXTERNAL_MODULE__CollapseContent_js_2eec9312__ from "./CollapseContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CollapseTitle_js_e4e27ece__ from "./CollapseTitle.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CollapseDetails_js_6c8028ea__ from "./CollapseDetails.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Collapse_js_e0fc262f__ from "./Collapse.js";
+var __webpack_exports__Collapse = __WEBPACK_EXTERNAL_MODULE__Collapse_js_e0fc262f__["default"];
+var __webpack_exports__CollapseContent = __WEBPACK_EXTERNAL_MODULE__CollapseContent_js_2eec9312__["default"];
+var __webpack_exports__CollapseDetails = __WEBPACK_EXTERNAL_MODULE__CollapseDetails_js_6c8028ea__["default"];
+var __webpack_exports__CollapseTitle = __WEBPACK_EXTERNAL_MODULE__CollapseTitle_js_e4e27ece__.CollapseTitle;
+var __webpack_exports__Summary = __WEBPACK_EXTERNAL_MODULE__CollapseTitle_js_e4e27ece__.Summary;
+export { __webpack_exports__Collapse as Collapse, __webpack_exports__CollapseContent as CollapseContent, __webpack_exports__CollapseDetails as CollapseDetails, __webpack_exports__CollapseTitle as CollapseTitle, __webpack_exports__Summary as Summary };

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

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

package/dist/components/colorpicker/AlphaSlider.js

@@ -0,0 +1,107 @@
+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="Alpha (opacity)"aria-valuemin=0 aria-valuemax=1><div class="absolute inset-0"></div><div class="absolute inset-0"></div><div>');
+const AlphaSlider = (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 alpha = ()=>context.color().hsl.a;
+    const updateAlpha = (clientX)=>{
+        if (!sliderRef || context.disabled()) return;
+        const rect = sliderRef.getBoundingClientRect();
+        const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+        const newAlpha = Math.round(100 * percentage) / 100;
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.setAlpha)(context.color(), newAlpha);
+        context.onChange(newColor);
+    };
+    const handleMouseDown = (e)=>{
+        if (context.disabled()) return;
+        setIsDragging(true);
+        updateAlpha(e.clientX);
+        e.preventDefault();
+    };
+    const handleMouseMove = (e)=>{
+        if (isDragging()) {
+            updateAlpha(e.clientX);
+            e.preventDefault();
+        }
+    };
+    const handleMouseUp = ()=>{
+        setIsDragging(false);
+    };
+    const handleKeyDown = (e)=>{
+        if (context.disabled()) return;
+        const step = e.shiftKey ? 0.1 : 0.01;
+        let newAlpha = alpha();
+        switch(e.key){
+            case "ArrowLeft":
+            case "ArrowDown":
+                newAlpha = Math.max(0, alpha() - step);
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                newAlpha = Math.min(1, alpha() + step);
+                e.preventDefault();
+                break;
+            default:
+                return;
+        }
+        const newColor = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.setAlpha)(context.color(), newAlpha);
+        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 overflow-hidden", (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()
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+        _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$;
+        _el$2.style.setProperty("background-image", "linear-gradient(45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(-45deg, hsl(var(--b3)) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, hsl(var(--b3)) 75%), linear-gradient(-45deg, transparent 75%, hsl(var(--b3)) 75%)");
+        _el$2.style.setProperty("background-size", "8px 8px");
+        _el$2.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = context.disabled() ? -1 : 0, _v$3 = alpha(), _v$4 = context.disabled(), _v$5 = `linear-gradient(to right, transparent, ${context.color().hex})`, _v$6 = thumbClasses(), _v$7 = `${100 * alpha()}%`;
+            _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-valuenow", _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 && (null != (_p$.i = _v$5) ? _el$3.style.setProperty("background", _v$5) : _el$3.style.removeProperty("background"));
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.n = _v$6);
+            _v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$4.style.setProperty("left", _v$7) : _el$4.style.removeProperty("left"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0,
+            s: void 0
+        });
+        return _el$;
+    })();
+};
+const colorpicker_AlphaSlider = AlphaSlider;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "mousedown",
+    "keydown"
+]);
+export { colorpicker_AlphaSlider as default };

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

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

package/dist/components/colorpicker/ColorInput.js

@@ -0,0 +1,88 @@
+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><input type=text aria-label="Color value"><select aria-label="Color format"><option value=hex>HEX</option><option value=rgb>RGB</option><option value=rgba>RGBA</option><option value=hsl>HSL</option><option value=hsla>HSLA');
+const ColorInput = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__colorpickerContext_js_45c33b20__.useColorPickerContext)();
+    const [inputValue, setInputValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("");
+    const [isValid, setIsValid] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const formatted = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.formatColor)(context.color(), context.format());
+        setInputValue(formatted);
+        setIsValid(true);
+    });
+    const handleInput = (e)=>{
+        const target = e.target;
+        const value = target.value;
+        setInputValue(value);
+        const parsed = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.parseColor)(value);
+        parsed ? setIsValid(true) : setIsValid(false);
+    };
+    const handleKeyDown = (e)=>{
+        if ("Enter" === e.key) applyColor();
+    };
+    const handleBlur = ()=>{
+        applyColor();
+    };
+    const applyColor = ()=>{
+        const parsed = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.parseColor)(inputValue());
+        if (parsed) {
+            context.onChange(parsed);
+            setIsValid(true);
+        } else {
+            const formatted = (0, __WEBPACK_EXTERNAL_MODULE__ColorUtils_js_8c38ee50__.formatColor)(context.color(), context.format());
+            setInputValue(formatted);
+            setIsValid(true);
+        }
+    };
+    const handleFormatChange = (e)=>{
+        const target = e.target;
+        const newFormat = target.value;
+        context.onFormatChange(newFormat);
+    };
+    const inputClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex-1 px-3 py-2 text-sm border rounded-l focus:outline-none focus:ring-2 focus:ring-primary", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "border-error focus:ring-error": !isValid(),
+            "border-base-300": isValid(),
+            "bg-base-200 cursor-not-allowed": context.disabled(),
+            "bg-base-100 text-base-content": !context.disabled()
+        }));
+    const selectClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("px-3 py-2 text-sm border border-l-0 rounded-r focus:outline-none focus:ring-2 focus:ring-primary bg-base-100 text-base-content border-base-300", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "bg-base-200 cursor-not-allowed": context.disabled()
+        }));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        _el$2.addEventListener("blur", handleBlur);
+        _el$2.$$keydown = handleKeyDown;
+        _el$2.$$input = handleInput;
+        _el$3.addEventListener("change", handleFormatChange);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex w-full", props.class, props.className), _v$2 = context.disabled(), _v$3 = inputClasses(), _v$4 = !isValid(), _v$5 = context.disabled(), _v$6 = selectClasses();
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-invalid", _p$.o = _v$4);
+            _v$5 !== _p$.i && (_el$3.disabled = _p$.i = _v$5);
+            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.n = _v$6);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0,
+            n: void 0
+        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.value = inputValue());
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$3.value = context.format());
+        return _el$;
+    })();
+};
+const colorpicker_ColorInput = ColorInput;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "input",
+    "keydown"
+]);
+export { colorpicker_ColorInput as default };

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

@@ -0,0 +1,18 @@
+import { type JSX } from "solid-js";
+import type { ColorFormat } from "./ColorUtils";
+import { IComponentBaseProps } from "../types";
+export type { ColorFormat } from "./ColorUtils";
+export type ColorPickerMode = "picker" | "wheel" | "flower";
+export interface ColorPickerProps extends IComponentBaseProps {
+    value?: string;
+    onChange?: (color: string) => void;
+    format?: ColorFormat;
+    disabled?: boolean;
+    swatches?: string[];
+    showAlpha?: boolean;
+    placement?: "top" | "bottom" | "left" | "right";
+    initialMode?: ColorPickerMode;
+    "aria-label"?: string;
+}
+declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
+export default ColorPicker;