@pathscale/ui 1.1.55 → 1.1.56

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/color-area/ColorArea.js

@@ -2,8 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./ColorArea.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__ColorArea_classes_js_e74ec548__ from "./ColorArea.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=color-area__thumb data-slot=color-area-thumb>");
 const DEFAULT_VALUE = {
     h: 0,
     s: 100,
@@ -153,9 +152,10 @@ const ColorArea_ColorArea = (props)=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
         var _ref$ = areaRef;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : areaRef = _el$;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorArea_classes_js_e74ec548__.CLASSES.base, local.class, local.className)
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-area", local.class, local.className);
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -190,24 +190,20 @@ const ColorArea_ColorArea = (props)=>{
             onLostPointerCapture: handleLostPointerCapture,
             onKeyDown: handleKeyDown
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__ColorArea_classes_js_e74ec548__.CLASSES.slot.thumb
-            }), {
-            "data-slot": "color-area-thumb",
-            get ["data-dragging"] () {
-                return isDragging() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get style () {
-                return {
-                    left: `${currentValue().s}%`,
-                    top: `${100 - currentValue().v}%`,
-                    "background-color": "var(--color-area-thumb-color)"
-                };
-            }
-        }), false, false);
+        _el$2.style.setProperty("background-color", "var(--color-area-thumb-color)");
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = isDragging() ? "true" : "false", _v$2 = isDisabled() ? "true" : "false", _v$3 = `${currentValue().s}%`, _v$4 = `${100 - currentValue().v}%`;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-dragging", _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-disabled", _p$.t = _v$2);
+            _v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$2.style.setProperty("left", _v$3) : _el$2.style.removeProperty("left"));
+            _v$4 !== _p$.o && (null != (_p$.o = _v$4) ? _el$2.style.setProperty("top", _v$4) : _el$2.style.removeProperty("top"));
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+        });
         return _el$;
     })();
 };

package/dist/components/color-field/ColorField.d.ts

@@ -1,6 +1,6 @@
 import "./ColorField.css";
 import { type Component, type JSX } from "solid-js";
-import { type ColorFormat } from "../color-wheel-flower/ColorUtils";
+import { type ColorFormat } from "../colorpicker/ColorUtils";
 import type { IComponentBaseProps } from "../types";
 export type ColorFieldFormat = ColorFormat;
 export type ColorFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> & IComponentBaseProps & {

package/dist/components/color-field/ColorField.js

@@ -2,18 +2,17 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./ColorField.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__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__ from "./ColorField.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><input>");
+import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=color-field><div data-slot=color-field-group><input>");
 const FALLBACK_COLOR = "#FFFFFF";
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const normalizeColor = (value, format)=>{
-    const parsed = (0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.parseColor)(value);
+    const parsed = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(value);
     if (!parsed) return null;
-    const formatted = (0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.formatColor)(parsed, format);
+    const formatted = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.formatColor)(parsed, format);
     return "hex" === format ? formatted.toUpperCase() : formatted;
 };
 const ColorField = (props)=>{
@@ -116,34 +115,6 @@ const ColorField = (props)=>{
     };
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.base, local.fullWidth && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.fullWidth, isDisabled() && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.disabled, local.class, local.className)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "color-field",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.slot.group, isInvalid() && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.groupInvalid, local.fullWidth && __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.flag.groupFullWidth)
-            }), {
-            "data-slot": "color-field-group",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            }
-        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             type: "text",
             get value () {
@@ -151,10 +122,8 @@ const ColorField = (props)=>{
             },
             get disabled () {
                 return isDisabled();
-            }
-        }, ()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__ColorField_classes_js_ef62f7c2__.CLASSES.slot.input
-            }), {
+            },
+            class: "color-field__input",
             "data-slot": "color-field-input",
             spellcheck: false,
             autocapitalize: "off",
@@ -168,6 +137,27 @@ const ColorField = (props)=>{
             onFocus: handleFocus,
             onKeyDown: handleKeyDown
         }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-field", local.fullWidth && "color-field--full-width", isDisabled() && "color-field--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isDisabled() ? "true" : "false", _v$4 = isInvalid() ? "true" : "false", _v$5 = isDisabled() ? "true" : "false", _v$6 = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-field__group", isInvalid() && "color-field__group--invalid", local.fullWidth && "color-field__group--full-width"), _v$7 = isDisabled() ? "true" : "false", _v$8 = isInvalid() ? "true" : "false";
+            _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$, "data-theme", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-invalid", _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 && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-disabled", _p$.s = _v$7);
+            _v$8 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-invalid", _p$.h = _v$8);
+            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$;
     })();
 };

package/dist/components/color-picker/ColorPicker.js

@@ -5,8 +5,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-m
 import * as __WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__ from "../color-area/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__ from "../color-field/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__ from "../color-slider/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__ from "./ColorPicker.classes.js";
+import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const DEFAULT_COLOR = "#3B82F6";
 const ColorPickerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
@@ -85,9 +84,9 @@ const formatOutputColor = (value)=>{
 };
 const toColorState = (value)=>{
     if (!value) return null;
-    const parsed = (0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.parseColor)(value);
+    const parsed = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(value);
     if (!parsed) return null;
-    const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.formatColor)(parsed, "hex"));
+    const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.formatColor)(parsed, "hex"));
     const hsv = rgbToHsv(parsed.rgb.r, parsed.rgb.g, parsed.rgb.b);
     const alpha = normalizeAlpha(parsed.rgb.a ?? 1);
     return {
@@ -117,9 +116,10 @@ const ColorPickerArea = (props)=>{
         "onChange",
         "dataTheme"
     ]);
-    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.area, local.class, local.className)
-        }), {
+    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_area_index_js_f79642f5__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__area", local.class, local.className);
+        },
         get dataTheme () {
             return local.dataTheme;
         },
@@ -137,10 +137,10 @@ const ColorPickerArea = (props)=>{
         },
         get isDisabled () {
             return ctx.isDisabled();
-        }
-    }, ()=>({
-            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.area, local.class, local.className)
-        }), {
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__area", local.class, local.className);
+        },
         get dataTheme () {
             return local.dataTheme;
         },
@@ -161,10 +161,10 @@ const ColorPickerSlider = (props)=>{
     if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
         get type () {
             return sliderType();
-        }
-    }, ()=>({
-            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.slider, local.class, local.className)
-        }), {
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__slider", local.class, local.className);
+        },
         get dataTheme () {
             return local.dataTheme;
         },
@@ -200,10 +200,10 @@ const ColorPickerSlider = (props)=>{
         },
         get isDisabled () {
             return ctx.isDisabled();
-        }
-    }, ()=>({
-            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.slider, local.class, local.className)
-        }), {
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__slider", local.class, local.className);
+        },
         get dataTheme () {
             return local.dataTheme;
         },
@@ -223,9 +223,10 @@ const ColorPickerField = (props)=>{
         "format",
         "dataTheme"
     ]);
-    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.field, local.class, local.className)
-        }), {
+    if (!ctx) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__field", local.class, local.className);
+        },
         get dataTheme () {
             return local.dataTheme;
         },
@@ -249,10 +250,10 @@ const ColorPickerField = (props)=>{
         },
         get isDisabled () {
             return ctx.isDisabled();
-        }
-    }, ()=>({
-            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.slot.field, local.class, local.className)
-        }), {
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker__field", local.class, local.className);
+        },
         get dataTheme () {
             return local.dataTheme;
         },
@@ -294,7 +295,7 @@ const ColorPickerRoot = (props)=>{
     const setFromArea = (nextValue)=>{
         const hsv = normalizeHsv(nextValue);
         const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
-        const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.rgbToHex)(rgb.r, rgb.g, rgb.b));
+        const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.rgbToHex)(rgb.r, rgb.g, rgb.b));
         emitChange({
             hex,
             hsv,
@@ -311,7 +312,7 @@ const ColorPickerRoot = (props)=>{
             h: value
         });
         const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);
-        const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__.rgbToHex)(rgb.r, rgb.g, rgb.b));
+        const hex = normalizeHex((0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.rgbToHex)(rgb.r, rgb.g, rgb.b));
         emitChange({
             hex,
             hsv,
@@ -336,9 +337,10 @@ const ColorPickerRoot = (props)=>{
         },
         get children () {
             var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ColorPicker_classes_js_3f630e74__.CLASSES.base, local.class, local.className)
-                }), {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("color-picker", local.class, local.className);
+                },
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },