@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/collapse/Collapse.js

@@ -0,0 +1,104 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./collapse.css";
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__CollapseDetails_js_6c8028ea__ from "./CollapseDetails.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CollapseTitle_js_e4e27ece__ from "./CollapseTitle.js";
+import * as __WEBPACK_EXTERNAL_MODULE__CollapseContent_js_2eec9312__ from "./CollapseContent.js";
+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)("<input type=checkbox class=peer>");
+const classesFn = ({ className, icon, open })=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("collapse", className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+        "collapse-arrow": "arrow" === icon,
+        "collapse-plus": "plus" === icon,
+        "collapse-open": true === open,
+        "collapse-close": false === open
+    }));
+const Collapse = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "checkbox",
+        "icon",
+        "open",
+        "onOpen",
+        "onClose",
+        "onToggle",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const isControlled = void 0 !== local.open;
+    const isChecked = ()=>isControlled ? local.open : internalOpen();
+    const handleCheckboxChange = ()=>{
+        if (local.onToggle) local.onToggle();
+        if (isControlled) {
+            if (local.open && local.onClose) local.onClose();
+            if (!local.open && local.onOpen) local.onOpen();
+        } else {
+            const next = !internalOpen();
+            setInternalOpen(next);
+            if (next && local.onOpen) local.onOpen();
+            if (!next && local.onClose) local.onClose();
+        }
+    };
+    const handleBlur = (e)=>{
+        if (!local.checkbox) {
+            local.onToggle?.();
+            local.onClose?.();
+        }
+        if ("function" == typeof others.onBlur) others.onBlur(e);
+    };
+    const handleFocus = (e)=>{
+        if (!local.checkbox) {
+            local.onToggle?.();
+            local.onOpen?.();
+        }
+        if ("function" == typeof others.onFocus) others.onFocus(e);
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["aria-expanded"] () {
+                return local.open;
+            }
+        }, others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classesFn({
+                    className: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className),
+                    icon: local.icon,
+                    open: local.open
+                });
+            },
+            get style () {
+                return local.style;
+            },
+            get tabIndex () {
+                return local.checkbox || isChecked() ? void 0 : 0;
+            },
+            onBlur: handleBlur,
+            onFocus: handleFocus
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.checkbox);
+            return ()=>_c$() && (()=>{
+                    var _el$2 = _tmpl$2();
+                    _el$2.addEventListener("change", handleCheckboxChange);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>el, _el$2);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "tabindex", isChecked() ? 0 : void 0));
+                    return _el$2;
+                })();
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+        return _el$;
+    })();
+};
+const collapse_Collapse = Object.assign(Collapse, {
+    Details: __WEBPACK_EXTERNAL_MODULE__CollapseDetails_js_6c8028ea__["default"],
+    Title: __WEBPACK_EXTERNAL_MODULE__CollapseTitle_js_e4e27ece__.CollapseTitle,
+    Content: __WEBPACK_EXTERNAL_MODULE__CollapseContent_js_2eec9312__["default"]
+});
+export { classesFn, collapse_Collapse as default };

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

@@ -0,0 +1,4 @@
+import type { JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type CollapseContentProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+export default function CollapseContent(props: CollapseContentProps): JSX.Element;

package/dist/components/collapse/CollapseContent.js

@@ -0,0 +1,15 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function CollapseContent(props) {
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("collapse-content", props.class);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            "data-collapse-part": "content",
+            class: classes
+        }), false, false);
+        return _el$;
+    })();
+}
+export { CollapseContent as default };

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

@@ -0,0 +1,17 @@
+import type { JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import { Summary } from "./CollapseTitle";
+export type CollapseDetailsProps = JSX.HTMLAttributes<HTMLDetailsElement> & IComponentBaseProps & {
+    icon?: "arrow" | "plus";
+    open?: boolean;
+};
+export declare function classesFn({ className, icon, open, }: {
+    className?: string;
+    icon?: "arrow" | "plus";
+    open?: boolean;
+}): string;
+declare function CollapseDetails(props: CollapseDetailsProps): JSX.Element;
+declare namespace CollapseDetails {
+    var Title: typeof Summary;
+}
+export default CollapseDetails;

package/dist/components/collapse/CollapseDetails.js

@@ -0,0 +1,33 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__CollapseTitle_js_e4e27ece__ from "./CollapseTitle.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<details>");
+function classesFn({ className, icon, open }) {
+    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("collapse", className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+        "collapse-arrow": "arrow" === icon,
+        "collapse-plus": "plus" === icon,
+        "collapse-open": true === open,
+        "collapse-close": false === open
+    }));
+}
+function CollapseDetails(props) {
+    const classes = classesFn({
+        className: props.class,
+        icon: props.icon,
+        open: props.open
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+            class: classes,
+            get open () {
+                return props.open;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+}
+CollapseDetails.Title = __WEBPACK_EXTERNAL_MODULE__CollapseTitle_js_e4e27ece__.Summary;
+export { classesFn, CollapseDetails as default };

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

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type CollapseTitleProps<T extends HTMLElement = HTMLDivElement> = JSX.HTMLAttributes<T> & IComponentBaseProps;
+export declare const classesFn: ({ className }: {
+    className?: string;
+}) => string;
+export declare function CollapseTitle(props: CollapseTitleProps): JSX.Element;
+export type SummaryProps = JSX.HTMLAttributes<HTMLElement> & IComponentBaseProps;
+export declare function Summary(props: SummaryProps): JSX.Element;

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

@@ -0,0 +1,4 @@
+export { default as CollapseContent } from "./CollapseContent";
+export { CollapseTitle, Summary } from "./CollapseTitle";
+export { default as CollapseDetails } from "./CollapseDetails";
+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;