@pathscale/ui 0.0.110 → 0.0.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/colorpicker/ColorPicker.d.ts +1 -1
- package/dist/components/colorpicker/ColorPickerFlowerSelector.d.ts +3 -0
- package/dist/components/colorpicker/ColorPickerGradientSelector.d.ts +3 -0
- package/dist/components/colorpicker/ColorPickerWheelSelector.d.ts +3 -0
- package/dist/components/colorpicker/ColorWheelFlower.d.ts +7 -0
- package/dist/components/colorpicker/index.d.ts +23 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +660 -330
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { type JSX } from "solid-js";
|
|
|
2
2
|
import type { ColorFormat } from "./ColorUtils";
|
|
3
3
|
import { IComponentBaseProps } from "../types";
|
|
4
4
|
export type { ColorFormat } from "./ColorUtils";
|
|
5
|
-
export type ColorPickerMode = "picker" | "wheel";
|
|
5
|
+
export type ColorPickerMode = "picker" | "wheel" | "flower";
|
|
6
6
|
export interface ColorPickerProps extends IComponentBaseProps {
|
|
7
7
|
value?: string;
|
|
8
8
|
onChange?: (color: string) => void;
|
|
@@ -1,3 +1,26 @@
|
|
|
1
1
|
export { default as ColorPicker, default } from "./ColorPicker";
|
|
2
2
|
export type { ColorPickerProps, ColorFormat, ColorPickerMode } from "./ColorPicker";
|
|
3
|
+
export { default as ColorPickerGradientSelector } from "./ColorPickerGradientSelector";
|
|
4
|
+
export { default as ColorPickerWheelSelector } from "./ColorPickerWheelSelector";
|
|
5
|
+
export { default as ColorPickerFlowerSelector } from "./ColorPickerFlowerSelector";
|
|
6
|
+
export { default as SaturationBrightness } from "./SaturationBrightness";
|
|
7
|
+
export { default as HueSlider } from "./HueSlider";
|
|
8
|
+
export { default as LightnessSlider } from "./LightnessSlider";
|
|
9
|
+
export { default as AlphaSlider } from "./AlphaSlider";
|
|
10
|
+
export { default as ColorWheel } from "./ColorWheel";
|
|
11
|
+
export { default as ColorWheelFlower } from "./ColorWheelFlower";
|
|
12
|
+
export { default as ColorSwatches } from "./ColorSwatches";
|
|
13
|
+
export { default as ColorInput } from "./ColorInput";
|
|
14
|
+
export { default as ColorPreview } from "./ColorPreview";
|
|
15
|
+
export { ColorPickerContext, useColorPickerContext } from "./colorpickerContext";
|
|
16
|
+
export type { ColorPickerContextType } from "./colorpickerContext";
|
|
17
|
+
export type { SaturationBrightnessProps } from "./SaturationBrightness";
|
|
18
|
+
export type { HueSliderProps } from "./HueSlider";
|
|
19
|
+
export type { LightnessSliderProps } from "./LightnessSlider";
|
|
20
|
+
export type { AlphaSliderProps } from "./AlphaSlider";
|
|
21
|
+
export type { ColorWheelProps } from "./ColorWheel";
|
|
22
|
+
export type { ColorWheelFlowerProps } from "./ColorWheelFlower";
|
|
23
|
+
export type { ColorSwatchesProps } from "./ColorSwatches";
|
|
24
|
+
export type { ColorInputProps } from "./ColorInput";
|
|
25
|
+
export type { ColorPreviewProps } from "./ColorPreview";
|
|
3
26
|
export type { ColorValue, RGB, RGBA, HSL, HSLA } from "./ColorUtils";
|
package/dist/index.d.ts
CHANGED
|
@@ -16,7 +16,8 @@ export type { CarouselItemProps, CarouselProps } from "./components/carousel";
|
|
|
16
16
|
export { default as ChatBubble } from "./components/chatbubble";
|
|
17
17
|
export { default as Checkbox } from "./components/checkbox";
|
|
18
18
|
export { default as ColorPicker } from "./components/colorpicker";
|
|
19
|
-
export
|
|
19
|
+
export { AlphaSlider, ColorInput, ColorPickerContext, ColorPickerFlowerSelector, ColorPickerGradientSelector, ColorPickerWheelSelector, ColorPreview, ColorSwatches, ColorWheel, ColorWheelFlower, HueSlider, LightnessSlider, SaturationBrightness, useColorPickerContext, } from "./components/colorpicker";
|
|
20
|
+
export type { AlphaSliderProps, ColorFormat, ColorInputProps, ColorPickerContextType, ColorPickerMode, ColorPickerProps, ColorPreviewProps, ColorSwatchesProps, ColorValue, ColorWheelFlowerProps, ColorWheelProps, HueSliderProps, LightnessSliderProps, SaturationBrightnessProps, } from "./components/colorpicker";
|
|
20
21
|
export { CodeMockup, CodeMockupLine } from "./components/codemockup";
|
|
21
22
|
export { Collapse, CollapseContent, CollapseDetails, CollapseTitle, Summary, } from "./components/collapse";
|
|
22
23
|
export { default as ConnectionStatus } from "./components/connectionstatus";
|
package/dist/index.js
CHANGED
|
@@ -6471,6 +6471,106 @@ function getDefaultColor() {
|
|
|
6471
6471
|
hex: "#ffffff"
|
|
6472
6472
|
};
|
|
6473
6473
|
}
|
|
6474
|
+
var AlphaSlider_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>');
|
|
6475
|
+
const AlphaSlider_AlphaSlider = (props)=>{
|
|
6476
|
+
const context = useColorPickerContext();
|
|
6477
|
+
const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
|
|
6478
|
+
let sliderRef;
|
|
6479
|
+
const alpha = ()=>context.color().hsl.a;
|
|
6480
|
+
const updateAlpha = (clientX)=>{
|
|
6481
|
+
if (!sliderRef || context.disabled()) return;
|
|
6482
|
+
const rect = sliderRef.getBoundingClientRect();
|
|
6483
|
+
const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
|
6484
|
+
const newAlpha = Math.round(100 * percentage) / 100;
|
|
6485
|
+
const newColor = setAlpha(context.color(), newAlpha);
|
|
6486
|
+
context.onChange(newColor);
|
|
6487
|
+
};
|
|
6488
|
+
const handleMouseDown = (e)=>{
|
|
6489
|
+
if (context.disabled()) return;
|
|
6490
|
+
setIsDragging(true);
|
|
6491
|
+
updateAlpha(e.clientX);
|
|
6492
|
+
e.preventDefault();
|
|
6493
|
+
};
|
|
6494
|
+
const handleMouseMove = (e)=>{
|
|
6495
|
+
if (isDragging()) {
|
|
6496
|
+
updateAlpha(e.clientX);
|
|
6497
|
+
e.preventDefault();
|
|
6498
|
+
}
|
|
6499
|
+
};
|
|
6500
|
+
const handleMouseUp = ()=>{
|
|
6501
|
+
setIsDragging(false);
|
|
6502
|
+
};
|
|
6503
|
+
const handleKeyDown = (e)=>{
|
|
6504
|
+
if (context.disabled()) return;
|
|
6505
|
+
const step = e.shiftKey ? 0.1 : 0.01;
|
|
6506
|
+
let newAlpha = alpha();
|
|
6507
|
+
switch(e.key){
|
|
6508
|
+
case "ArrowLeft":
|
|
6509
|
+
case "ArrowDown":
|
|
6510
|
+
newAlpha = Math.max(0, alpha() - step);
|
|
6511
|
+
e.preventDefault();
|
|
6512
|
+
break;
|
|
6513
|
+
case "ArrowRight":
|
|
6514
|
+
case "ArrowUp":
|
|
6515
|
+
newAlpha = Math.min(1, alpha() + step);
|
|
6516
|
+
e.preventDefault();
|
|
6517
|
+
break;
|
|
6518
|
+
default:
|
|
6519
|
+
return;
|
|
6520
|
+
}
|
|
6521
|
+
const newColor = setAlpha(context.color(), newAlpha);
|
|
6522
|
+
context.onChange(newColor);
|
|
6523
|
+
};
|
|
6524
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
|
|
6525
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
6526
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
6527
|
+
});
|
|
6528
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
|
|
6529
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
6530
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
6531
|
+
});
|
|
6532
|
+
const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none overflow-hidden", clsx({
|
|
6533
|
+
"opacity-50 cursor-not-allowed": context.disabled()
|
|
6534
|
+
}), props.class, props.className);
|
|
6535
|
+
const thumbClasses = ()=>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", clsx({
|
|
6536
|
+
"ring-2 ring-primary": isDragging()
|
|
6537
|
+
}));
|
|
6538
|
+
return (()=>{
|
|
6539
|
+
var _el$ = AlphaSlider_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
|
|
6540
|
+
_el$.$$keydown = handleKeyDown;
|
|
6541
|
+
_el$.$$mousedown = handleMouseDown;
|
|
6542
|
+
var _ref$ = sliderRef;
|
|
6543
|
+
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
|
|
6544
|
+
_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%)");
|
|
6545
|
+
_el$2.style.setProperty("background-size", "8px 8px");
|
|
6546
|
+
_el$2.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
|
|
6547
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
6548
|
+
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()}%`;
|
|
6549
|
+
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
|
|
6550
|
+
_v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
|
|
6551
|
+
_v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.a = _v$3);
|
|
6552
|
+
_v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
|
|
6553
|
+
_v$5 !== _p$.i && (null != (_p$.i = _v$5) ? _el$3.style.setProperty("background", _v$5) : _el$3.style.removeProperty("background"));
|
|
6554
|
+
_v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.n = _v$6);
|
|
6555
|
+
_v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$4.style.setProperty("left", _v$7) : _el$4.style.removeProperty("left"));
|
|
6556
|
+
return _p$;
|
|
6557
|
+
}, {
|
|
6558
|
+
e: void 0,
|
|
6559
|
+
t: void 0,
|
|
6560
|
+
a: void 0,
|
|
6561
|
+
o: void 0,
|
|
6562
|
+
i: void 0,
|
|
6563
|
+
n: void 0,
|
|
6564
|
+
s: void 0
|
|
6565
|
+
});
|
|
6566
|
+
return _el$;
|
|
6567
|
+
})();
|
|
6568
|
+
};
|
|
6569
|
+
const AlphaSlider = AlphaSlider_AlphaSlider;
|
|
6570
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
|
|
6571
|
+
"mousedown",
|
|
6572
|
+
"keydown"
|
|
6573
|
+
]);
|
|
6474
6574
|
var SaturationBrightness_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>');
|
|
6475
6575
|
const SaturationBrightness = (props)=>{
|
|
6476
6576
|
const context = useColorPickerContext();
|
|
@@ -6682,106 +6782,11 @@ const colorpicker_HueSlider = HueSlider;
|
|
|
6682
6782
|
"mousedown",
|
|
6683
6783
|
"keydown"
|
|
6684
6784
|
]);
|
|
6685
|
-
|
|
6686
|
-
|
|
6687
|
-
|
|
6688
|
-
|
|
6689
|
-
|
|
6690
|
-
const alpha = ()=>context.color().hsl.a;
|
|
6691
|
-
const updateAlpha = (clientX)=>{
|
|
6692
|
-
if (!sliderRef || context.disabled()) return;
|
|
6693
|
-
const rect = sliderRef.getBoundingClientRect();
|
|
6694
|
-
const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
|
6695
|
-
const newAlpha = Math.round(100 * percentage) / 100;
|
|
6696
|
-
const newColor = setAlpha(context.color(), newAlpha);
|
|
6697
|
-
context.onChange(newColor);
|
|
6698
|
-
};
|
|
6699
|
-
const handleMouseDown = (e)=>{
|
|
6700
|
-
if (context.disabled()) return;
|
|
6701
|
-
setIsDragging(true);
|
|
6702
|
-
updateAlpha(e.clientX);
|
|
6703
|
-
e.preventDefault();
|
|
6704
|
-
};
|
|
6705
|
-
const handleMouseMove = (e)=>{
|
|
6706
|
-
if (isDragging()) {
|
|
6707
|
-
updateAlpha(e.clientX);
|
|
6708
|
-
e.preventDefault();
|
|
6709
|
-
}
|
|
6710
|
-
};
|
|
6711
|
-
const handleMouseUp = ()=>{
|
|
6712
|
-
setIsDragging(false);
|
|
6713
|
-
};
|
|
6714
|
-
const handleKeyDown = (e)=>{
|
|
6715
|
-
if (context.disabled()) return;
|
|
6716
|
-
const step = e.shiftKey ? 0.1 : 0.01;
|
|
6717
|
-
let newAlpha = alpha();
|
|
6718
|
-
switch(e.key){
|
|
6719
|
-
case "ArrowLeft":
|
|
6720
|
-
case "ArrowDown":
|
|
6721
|
-
newAlpha = Math.max(0, alpha() - step);
|
|
6722
|
-
e.preventDefault();
|
|
6723
|
-
break;
|
|
6724
|
-
case "ArrowRight":
|
|
6725
|
-
case "ArrowUp":
|
|
6726
|
-
newAlpha = Math.min(1, alpha() + step);
|
|
6727
|
-
e.preventDefault();
|
|
6728
|
-
break;
|
|
6729
|
-
default:
|
|
6730
|
-
return;
|
|
6731
|
-
}
|
|
6732
|
-
const newColor = setAlpha(context.color(), newAlpha);
|
|
6733
|
-
context.onChange(newColor);
|
|
6734
|
-
};
|
|
6735
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
|
|
6736
|
-
document.addEventListener("mousemove", handleMouseMove);
|
|
6737
|
-
document.addEventListener("mouseup", handleMouseUp);
|
|
6738
|
-
});
|
|
6739
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
|
|
6740
|
-
document.removeEventListener("mousemove", handleMouseMove);
|
|
6741
|
-
document.removeEventListener("mouseup", handleMouseUp);
|
|
6742
|
-
});
|
|
6743
|
-
const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none overflow-hidden", clsx({
|
|
6744
|
-
"opacity-50 cursor-not-allowed": context.disabled()
|
|
6745
|
-
}), props.class, props.className);
|
|
6746
|
-
const thumbClasses = ()=>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", clsx({
|
|
6747
|
-
"ring-2 ring-primary": isDragging()
|
|
6748
|
-
}));
|
|
6749
|
-
return (()=>{
|
|
6750
|
-
var _el$ = AlphaSlider_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
|
|
6751
|
-
_el$.$$keydown = handleKeyDown;
|
|
6752
|
-
_el$.$$mousedown = handleMouseDown;
|
|
6753
|
-
var _ref$ = sliderRef;
|
|
6754
|
-
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
|
|
6755
|
-
_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%)");
|
|
6756
|
-
_el$2.style.setProperty("background-size", "8px 8px");
|
|
6757
|
-
_el$2.style.setProperty("background-position", "0 0, 0 4px, 4px -4px, -4px 0px");
|
|
6758
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
6759
|
-
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()}%`;
|
|
6760
|
-
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
|
|
6761
|
-
_v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.t = _v$2);
|
|
6762
|
-
_v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.a = _v$3);
|
|
6763
|
-
_v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.o = _v$4);
|
|
6764
|
-
_v$5 !== _p$.i && (null != (_p$.i = _v$5) ? _el$3.style.setProperty("background", _v$5) : _el$3.style.removeProperty("background"));
|
|
6765
|
-
_v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.n = _v$6);
|
|
6766
|
-
_v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$4.style.setProperty("left", _v$7) : _el$4.style.removeProperty("left"));
|
|
6767
|
-
return _p$;
|
|
6768
|
-
}, {
|
|
6769
|
-
e: void 0,
|
|
6770
|
-
t: void 0,
|
|
6771
|
-
a: void 0,
|
|
6772
|
-
o: void 0,
|
|
6773
|
-
i: void 0,
|
|
6774
|
-
n: void 0,
|
|
6775
|
-
s: void 0
|
|
6776
|
-
});
|
|
6777
|
-
return _el$;
|
|
6778
|
-
})();
|
|
6779
|
-
};
|
|
6780
|
-
const AlphaSlider = AlphaSlider_AlphaSlider;
|
|
6781
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
|
|
6782
|
-
"mousedown",
|
|
6783
|
-
"keydown"
|
|
6784
|
-
]);
|
|
6785
|
+
const ColorPickerGradientSelector = ()=>[
|
|
6786
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_SaturationBrightness, {}),
|
|
6787
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_HueSlider, {})
|
|
6788
|
+
];
|
|
6789
|
+
const colorpicker_ColorPickerGradientSelector = ColorPickerGradientSelector;
|
|
6785
6790
|
var ColorWheel_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div role=slider aria-label="Color Wheel"><div>');
|
|
6786
6791
|
const ColorWheel_ColorWheel = (props)=>{
|
|
6787
6792
|
const context = useColorPickerContext();
|
|
@@ -6928,63 +6933,533 @@ const LightnessSlider_LightnessSlider = (props)=>{
|
|
|
6928
6933
|
default:
|
|
6929
6934
|
return;
|
|
6930
6935
|
}
|
|
6931
|
-
const newColor = createColorFromHsl(context.color().hsl.h, context.color().hsl.s, newL, context.color().hsl.a);
|
|
6932
|
-
context.onChange(newColor);
|
|
6936
|
+
const newColor = createColorFromHsl(context.color().hsl.h, context.color().hsl.s, newL, context.color().hsl.a);
|
|
6937
|
+
context.onChange(newColor);
|
|
6938
|
+
};
|
|
6939
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
|
|
6940
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
6941
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
6942
|
+
});
|
|
6943
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
|
|
6944
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
6945
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
6946
|
+
});
|
|
6947
|
+
const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none", clsx({
|
|
6948
|
+
"opacity-50 cursor-not-allowed": context.disabled()
|
|
6949
|
+
}), props.class, props.className);
|
|
6950
|
+
const thumbClasses = ()=>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", clsx({
|
|
6951
|
+
"ring-2 ring-primary": isDragging()
|
|
6952
|
+
}));
|
|
6953
|
+
const gradientStyle = ()=>{
|
|
6954
|
+
const h = context.color().hsl.h;
|
|
6955
|
+
const s = context.color().hsl.s;
|
|
6956
|
+
return `linear-gradient(to right, hsl(${h}, ${s}%, 0%), hsl(${h}, ${s}%, 50%), hsl(${h}, ${s}%, 100%))`;
|
|
6957
|
+
};
|
|
6958
|
+
return (()=>{
|
|
6959
|
+
var _el$ = LightnessSlider_tmpl$(), _el$2 = _el$.firstChild;
|
|
6960
|
+
_el$.$$keydown = handleKeyDown;
|
|
6961
|
+
_el$.$$mousedown = handleMouseDown;
|
|
6962
|
+
var _ref$ = sliderRef;
|
|
6963
|
+
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : sliderRef = _el$;
|
|
6964
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
6965
|
+
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()}%)`;
|
|
6966
|
+
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
|
|
6967
|
+
_v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$.style.setProperty("background", _v$2) : _el$.style.removeProperty("background"));
|
|
6968
|
+
_v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.a = _v$3);
|
|
6969
|
+
_v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.o = _v$4);
|
|
6970
|
+
_v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
|
|
6971
|
+
_v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
|
|
6972
|
+
_v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("left", _v$7) : _el$2.style.removeProperty("left"));
|
|
6973
|
+
_v$8 !== _p$.h && (null != (_p$.h = _v$8) ? _el$2.style.setProperty("background-color", _v$8) : _el$2.style.removeProperty("background-color"));
|
|
6974
|
+
return _p$;
|
|
6975
|
+
}, {
|
|
6976
|
+
e: void 0,
|
|
6977
|
+
t: void 0,
|
|
6978
|
+
a: void 0,
|
|
6979
|
+
o: void 0,
|
|
6980
|
+
i: void 0,
|
|
6981
|
+
n: void 0,
|
|
6982
|
+
s: void 0,
|
|
6983
|
+
h: void 0
|
|
6984
|
+
});
|
|
6985
|
+
return _el$;
|
|
6986
|
+
})();
|
|
6987
|
+
};
|
|
6988
|
+
const LightnessSlider = LightnessSlider_LightnessSlider;
|
|
6989
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
|
|
6990
|
+
"mousedown",
|
|
6991
|
+
"keydown"
|
|
6992
|
+
]);
|
|
6993
|
+
const ColorPickerWheelSelector_ColorPickerWheelSelector = ()=>[
|
|
6994
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorWheel, {}),
|
|
6995
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(LightnessSlider, {})
|
|
6996
|
+
];
|
|
6997
|
+
const ColorPickerWheelSelector = ColorPickerWheelSelector_ColorPickerWheelSelector;
|
|
6998
|
+
const prefersReducedMotion = ()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
|
|
6999
|
+
const motionDurations = {
|
|
7000
|
+
route: 0.18,
|
|
7001
|
+
routeAuth: 0.35,
|
|
7002
|
+
fast: 0.2,
|
|
7003
|
+
base: 0.3,
|
|
7004
|
+
slow: 0.45
|
|
7005
|
+
};
|
|
7006
|
+
const motionEasings = {
|
|
7007
|
+
out: "ease-out",
|
|
7008
|
+
inOut: "ease-in-out"
|
|
7009
|
+
};
|
|
7010
|
+
const motionDistances = {
|
|
7011
|
+
sm: 6,
|
|
7012
|
+
md: 12,
|
|
7013
|
+
lg: 20,
|
|
7014
|
+
slideIn: 40
|
|
7015
|
+
};
|
|
7016
|
+
const defaultMotionTokens = {
|
|
7017
|
+
durations: {
|
|
7018
|
+
...motionDurations
|
|
7019
|
+
},
|
|
7020
|
+
easings: {
|
|
7021
|
+
...motionEasings
|
|
7022
|
+
},
|
|
7023
|
+
distances: {
|
|
7024
|
+
...motionDistances
|
|
7025
|
+
}
|
|
7026
|
+
};
|
|
7027
|
+
const mergeDefined = (base, overrides)=>{
|
|
7028
|
+
const next = {
|
|
7029
|
+
...base
|
|
7030
|
+
};
|
|
7031
|
+
if (!overrides) return next;
|
|
7032
|
+
for (const [key, value] of Object.entries(overrides))if (void 0 !== value) next[key] = value;
|
|
7033
|
+
return next;
|
|
7034
|
+
};
|
|
7035
|
+
const mergeMotionTokens = (base, overrides)=>({
|
|
7036
|
+
durations: mergeDefined(base.durations, overrides?.durations),
|
|
7037
|
+
easings: mergeDefined(base.easings, overrides?.easings),
|
|
7038
|
+
distances: mergeDefined(base.distances, overrides?.distances)
|
|
7039
|
+
});
|
|
7040
|
+
const immediateDriver = ({ to, onUpdate, onComplete })=>{
|
|
7041
|
+
onUpdate(to);
|
|
7042
|
+
onComplete?.();
|
|
7043
|
+
return {
|
|
7044
|
+
stop: ()=>{}
|
|
7045
|
+
};
|
|
7046
|
+
};
|
|
7047
|
+
let activeDriver = immediateDriver;
|
|
7048
|
+
const setMotionDriver = (driver)=>{
|
|
7049
|
+
activeDriver = driver;
|
|
7050
|
+
};
|
|
7051
|
+
const getMotionDriver = ()=>activeDriver;
|
|
7052
|
+
const easeOutCubic = (t)=>1 - Math.pow(1 - t, 3);
|
|
7053
|
+
const easeInCubic = (t)=>t * t * t;
|
|
7054
|
+
const easeInOutCubic = (t)=>t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
7055
|
+
const resolveEase = (easing)=>{
|
|
7056
|
+
if ("function" == typeof easing) return easing;
|
|
7057
|
+
switch(easing){
|
|
7058
|
+
case "ease-in":
|
|
7059
|
+
return easeInCubic;
|
|
7060
|
+
case "ease-in-out":
|
|
7061
|
+
return easeInOutCubic;
|
|
7062
|
+
case "linear":
|
|
7063
|
+
return (t)=>t;
|
|
7064
|
+
case "ease-out":
|
|
7065
|
+
default:
|
|
7066
|
+
return easeOutCubic;
|
|
7067
|
+
}
|
|
7068
|
+
};
|
|
7069
|
+
const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
|
|
7070
|
+
const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
|
|
7071
|
+
const readOpacity = (el)=>{
|
|
7072
|
+
const value = Number.parseFloat(getComputedStyle(el).opacity);
|
|
7073
|
+
return Number.isFinite(value) ? value : 1;
|
|
7074
|
+
};
|
|
7075
|
+
const runMotion = (el, from, to, transition, onComplete)=>{
|
|
7076
|
+
const duration = resolveDuration(transition);
|
|
7077
|
+
const delay = resolveDelay(transition);
|
|
7078
|
+
const ease = resolveEase(transition?.easing);
|
|
7079
|
+
const driver = getMotionDriver();
|
|
7080
|
+
const controls = [];
|
|
7081
|
+
const shouldTransform = void 0 !== from.x || void 0 !== from.y || void 0 !== from.scale || void 0 !== to.x || void 0 !== to.y || void 0 !== to.scale;
|
|
7082
|
+
const transformState = {
|
|
7083
|
+
x: from.x ?? 0,
|
|
7084
|
+
y: from.y ?? 0,
|
|
7085
|
+
scale: from.scale ?? 1
|
|
7086
|
+
};
|
|
7087
|
+
const applyTransform = ()=>{
|
|
7088
|
+
if (!shouldTransform) return;
|
|
7089
|
+
el.style.transform = `translate3d(${transformState.x}px, ${transformState.y}px, 0) scale(${transformState.scale})`;
|
|
7090
|
+
};
|
|
7091
|
+
if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
|
|
7092
|
+
applyTransform();
|
|
7093
|
+
const animationTargets = Object.keys(to);
|
|
7094
|
+
if (0 === animationTargets.length) {
|
|
7095
|
+
onComplete?.();
|
|
7096
|
+
return {
|
|
7097
|
+
stop: ()=>{}
|
|
7098
|
+
};
|
|
7099
|
+
}
|
|
7100
|
+
let remaining = animationTargets.length;
|
|
7101
|
+
const handleComplete = ()=>{
|
|
7102
|
+
remaining -= 1;
|
|
7103
|
+
if (remaining <= 0) onComplete?.();
|
|
7104
|
+
};
|
|
7105
|
+
const start = ()=>{
|
|
7106
|
+
animationTargets.forEach((key)=>{
|
|
7107
|
+
if ("opacity" === key) {
|
|
7108
|
+
const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
|
|
7109
|
+
const control = driver({
|
|
7110
|
+
from: fromValue,
|
|
7111
|
+
to: to.opacity ?? fromValue,
|
|
7112
|
+
duration,
|
|
7113
|
+
ease,
|
|
7114
|
+
onUpdate: (latest)=>{
|
|
7115
|
+
el.style.opacity = String(latest);
|
|
7116
|
+
},
|
|
7117
|
+
onComplete: handleComplete
|
|
7118
|
+
});
|
|
7119
|
+
controls.push(control);
|
|
7120
|
+
return;
|
|
7121
|
+
}
|
|
7122
|
+
const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
|
|
7123
|
+
const toValue = to[key] ?? fromValue;
|
|
7124
|
+
const control = driver({
|
|
7125
|
+
from: fromValue,
|
|
7126
|
+
to: toValue,
|
|
7127
|
+
duration,
|
|
7128
|
+
ease,
|
|
7129
|
+
onUpdate: (latest)=>{
|
|
7130
|
+
if (!shouldTransform) return;
|
|
7131
|
+
if ("x" === key) transformState.x = latest;
|
|
7132
|
+
if ("y" === key) transformState.y = latest;
|
|
7133
|
+
if ("scale" === key) transformState.scale = latest;
|
|
7134
|
+
applyTransform();
|
|
7135
|
+
},
|
|
7136
|
+
onComplete: handleComplete
|
|
7137
|
+
});
|
|
7138
|
+
controls.push(control);
|
|
7139
|
+
});
|
|
7140
|
+
};
|
|
7141
|
+
let timeoutId = null;
|
|
7142
|
+
if (delay > 0) timeoutId = window.setTimeout(start, delay);
|
|
7143
|
+
else start();
|
|
7144
|
+
return {
|
|
7145
|
+
stop: ()=>{
|
|
7146
|
+
if (null !== timeoutId) clearTimeout(timeoutId);
|
|
7147
|
+
controls.forEach((control)=>control.stop());
|
|
7148
|
+
}
|
|
7149
|
+
};
|
|
7150
|
+
};
|
|
7151
|
+
var ColorWheelFlower_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="absolute inset-0"><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div><div class="absolute inset-0"><div class="absolute inset-0 rounded-full"></div></div></div><div class="relative z-10 w-[calc(100%-5px)] h-[calc(100%-5px)] rounded-full">'), ColorWheelFlower_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=absolute><div class="w-[32px] h-[32px]"><button type=button><span>');
|
|
7152
|
+
const parseRgbToHsl = (rgbString)=>{
|
|
7153
|
+
const match = rgbString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
|
7154
|
+
if (!match) return {
|
|
7155
|
+
hue: 0,
|
|
7156
|
+
saturation: 0,
|
|
7157
|
+
lightness: 100
|
|
7158
|
+
};
|
|
7159
|
+
const r = parseInt(match[1]);
|
|
7160
|
+
const g = parseInt(match[2]);
|
|
7161
|
+
const b = parseInt(match[3]);
|
|
7162
|
+
const hsl = rgbToHsl(r, g, b);
|
|
7163
|
+
return {
|
|
7164
|
+
hue: hsl.h,
|
|
7165
|
+
saturation: hsl.s,
|
|
7166
|
+
lightness: hsl.l
|
|
7167
|
+
};
|
|
7168
|
+
};
|
|
7169
|
+
const createColorItem = (rgb, offsetX, offsetY)=>({
|
|
7170
|
+
rgb,
|
|
7171
|
+
offsetX,
|
|
7172
|
+
offsetY,
|
|
7173
|
+
...parseRgbToHsl(rgb)
|
|
7174
|
+
});
|
|
7175
|
+
const readMotionState = (el)=>{
|
|
7176
|
+
const styles = getComputedStyle(el);
|
|
7177
|
+
const opacityValue = Number.parseFloat(styles.opacity);
|
|
7178
|
+
const opacity = Number.isFinite(opacityValue) ? opacityValue : 1;
|
|
7179
|
+
const transform = styles.transform;
|
|
7180
|
+
if (!transform || "none" === transform) return {
|
|
7181
|
+
opacity,
|
|
7182
|
+
x: 0,
|
|
7183
|
+
y: 0,
|
|
7184
|
+
scale: 1
|
|
7185
|
+
};
|
|
7186
|
+
if ("undefined" != typeof DOMMatrixReadOnly) {
|
|
7187
|
+
const matrix = new DOMMatrixReadOnly(transform);
|
|
7188
|
+
return {
|
|
7189
|
+
opacity,
|
|
7190
|
+
x: matrix.m41,
|
|
7191
|
+
y: matrix.m42,
|
|
7192
|
+
scale: matrix.a
|
|
7193
|
+
};
|
|
7194
|
+
}
|
|
7195
|
+
const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
|
|
7196
|
+
if (!matrixMatch) return {
|
|
7197
|
+
opacity,
|
|
7198
|
+
x: 0,
|
|
7199
|
+
y: 0,
|
|
7200
|
+
scale: 1
|
|
7201
|
+
};
|
|
7202
|
+
const values = matrixMatch[1].split(",").map((value)=>Number.parseFloat(value.trim()));
|
|
7203
|
+
return {
|
|
7204
|
+
opacity,
|
|
7205
|
+
scale: Number.isFinite(values[0]) ? values[0] : 1,
|
|
7206
|
+
x: Number.isFinite(values[4]) ? values[4] : 0,
|
|
7207
|
+
y: Number.isFinite(values[5]) ? values[5] : 0
|
|
7208
|
+
};
|
|
7209
|
+
};
|
|
7210
|
+
const getLiftOffset = (item, distance)=>{
|
|
7211
|
+
const radius = Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2);
|
|
7212
|
+
if (!Number.isFinite(radius) || 0 === radius) return {
|
|
7213
|
+
x: 0,
|
|
7214
|
+
y: 0
|
|
7215
|
+
};
|
|
7216
|
+
return {
|
|
7217
|
+
x: item.offsetX / radius * distance,
|
|
7218
|
+
y: item.offsetY / radius * distance
|
|
7219
|
+
};
|
|
7220
|
+
};
|
|
7221
|
+
const COLORS = [
|
|
7222
|
+
createColorItem("rgb(245,245,61)", 34.641, -20),
|
|
7223
|
+
createColorItem("rgb(245,153,61)", 20, -34.641),
|
|
7224
|
+
createColorItem("rgb(245,61,61)", 0, -40),
|
|
7225
|
+
createColorItem("rgb(245,61,153)", -20, -34.641),
|
|
7226
|
+
createColorItem("rgb(245,61,245)", -34.641, -20),
|
|
7227
|
+
createColorItem("rgb(153,61,245)", -40, 0),
|
|
7228
|
+
createColorItem("rgb(61,61,245)", -34.641, 20),
|
|
7229
|
+
createColorItem("rgb(61,153,245)", -20, 34.641),
|
|
7230
|
+
createColorItem("rgb(61,245,245)", 0, 40),
|
|
7231
|
+
createColorItem("rgb(61,245,153)", 20, 34.641),
|
|
7232
|
+
createColorItem("rgb(61,245,61)", 34.641, 20),
|
|
7233
|
+
createColorItem("rgb(153,245,61)", 40, 0),
|
|
7234
|
+
createColorItem("rgb(240,217,194)", 10, -17.3205),
|
|
7235
|
+
createColorItem("rgb(240,194,217)", -10, -17.3205),
|
|
7236
|
+
createColorItem("rgb(217,194,240)", -20, 0),
|
|
7237
|
+
createColorItem("rgb(194,217,240)", -10, 17.3205),
|
|
7238
|
+
createColorItem("rgb(194,240,217)", 10, 17.3205),
|
|
7239
|
+
createColorItem("rgb(217,240,194)", 20, 0),
|
|
7240
|
+
createColorItem("rgb(255,255,255)", 0, 0)
|
|
7241
|
+
];
|
|
7242
|
+
const RAINBOW_GRADIENT = `conic-gradient(
|
|
7243
|
+
from 0deg,
|
|
7244
|
+
rgb(245,61,61) 0deg,
|
|
7245
|
+
rgb(245,153,61) 30deg,
|
|
7246
|
+
rgb(245,245,61) 60deg,
|
|
7247
|
+
rgb(61,245,61) 120deg,
|
|
7248
|
+
rgb(61,245,245) 180deg,
|
|
7249
|
+
rgb(61,61,245) 240deg,
|
|
7250
|
+
rgb(245,61,245) 300deg,
|
|
7251
|
+
rgb(245,61,61) 360deg
|
|
7252
|
+
)`;
|
|
7253
|
+
const ColorWheelFlower = (props)=>{
|
|
7254
|
+
const context = useColorPickerContext();
|
|
7255
|
+
const [selectedIndex, setSelectedIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
|
|
7256
|
+
const [hoveredIndex, setHoveredIndex] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
|
|
7257
|
+
const reduceMotion = prefersReducedMotion();
|
|
7258
|
+
const dotTransition = reduceMotion ? {
|
|
7259
|
+
duration: 0
|
|
7260
|
+
} : {
|
|
7261
|
+
duration: motionDurations.fast,
|
|
7262
|
+
easing: motionEasings.out
|
|
7263
|
+
};
|
|
7264
|
+
const ringTransition = reduceMotion ? {
|
|
7265
|
+
duration: 0
|
|
7266
|
+
} : {
|
|
7267
|
+
duration: motionDurations.base,
|
|
7268
|
+
easing: motionEasings.out
|
|
7269
|
+
};
|
|
7270
|
+
const hoverLift = reduceMotion ? 0 : motionDistances.sm / 2;
|
|
7271
|
+
const selectLift = reduceMotion ? 0 : motionDistances.sm;
|
|
7272
|
+
let outerRingRef;
|
|
7273
|
+
let outerRingControl = null;
|
|
7274
|
+
const handleDotClick = (index)=>{
|
|
7275
|
+
if (context.disabled()) return;
|
|
7276
|
+
if (selectedIndex() === index) {
|
|
7277
|
+
setSelectedIndex(null);
|
|
7278
|
+
const whiteColor = createColorFromHsl(0, 0, 100, context.color().hsl.a);
|
|
7279
|
+
context.onChange(whiteColor);
|
|
7280
|
+
} else {
|
|
7281
|
+
setSelectedIndex(index);
|
|
7282
|
+
const color = COLORS[index];
|
|
7283
|
+
const newColor = createColorFromHsl(color.hue, color.saturation, color.lightness, context.color().hsl.a);
|
|
7284
|
+
context.onChange(newColor);
|
|
7285
|
+
}
|
|
6933
7286
|
};
|
|
6934
|
-
(
|
|
6935
|
-
|
|
6936
|
-
|
|
7287
|
+
const containerClasses = ()=>twMerge("relative w-[140px] h-[140px] flex items-center justify-center", clsx({
|
|
7288
|
+
"opacity-50 cursor-not-allowed": context.disabled()
|
|
7289
|
+
}), props.class, props.className);
|
|
7290
|
+
const outerRingBackground = ()=>{
|
|
7291
|
+
const idx = selectedIndex();
|
|
7292
|
+
return null === idx ? RAINBOW_GRADIENT : `conic-gradient(${COLORS[idx].rgb}, ${COLORS[idx].rgb})`;
|
|
7293
|
+
};
|
|
7294
|
+
const outerRingTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
|
|
7295
|
+
if (context.disabled()) return {
|
|
7296
|
+
opacity: 0.5,
|
|
7297
|
+
scale: 1
|
|
7298
|
+
};
|
|
7299
|
+
if (null !== selectedIndex()) return {
|
|
7300
|
+
opacity: 1,
|
|
7301
|
+
scale: 1.04
|
|
7302
|
+
};
|
|
7303
|
+
if (null !== hoveredIndex()) return {
|
|
7304
|
+
opacity: 0.96,
|
|
7305
|
+
scale: 1.02
|
|
7306
|
+
};
|
|
7307
|
+
return {
|
|
7308
|
+
opacity: 0.9,
|
|
7309
|
+
scale: 1
|
|
7310
|
+
};
|
|
7311
|
+
});
|
|
7312
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
|
|
7313
|
+
if (!outerRingRef) return;
|
|
7314
|
+
const target = outerRingTarget();
|
|
7315
|
+
outerRingControl?.stop();
|
|
7316
|
+
outerRingControl = runMotion(outerRingRef, readMotionState(outerRingRef), target, ringTransition);
|
|
6937
7317
|
});
|
|
6938
7318
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
|
|
6939
|
-
|
|
6940
|
-
document.removeEventListener("mouseup", handleMouseUp);
|
|
7319
|
+
outerRingControl?.stop();
|
|
6941
7320
|
});
|
|
6942
|
-
const classes = ()=>twMerge("relative w-full h-6 rounded cursor-pointer select-none", clsx({
|
|
6943
|
-
"opacity-50 cursor-not-allowed": context.disabled()
|
|
6944
|
-
}), props.class, props.className);
|
|
6945
|
-
const thumbClasses = ()=>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", clsx({
|
|
6946
|
-
"ring-2 ring-primary": isDragging()
|
|
6947
|
-
}));
|
|
6948
|
-
const gradientStyle = ()=>{
|
|
6949
|
-
const h = context.color().hsl.h;
|
|
6950
|
-
const s = context.color().hsl.s;
|
|
6951
|
-
return `linear-gradient(to right, hsl(${h}, ${s}%, 0%), hsl(${h}, ${s}%, 50%), hsl(${h}, ${s}%, 100%))`;
|
|
6952
|
-
};
|
|
6953
7321
|
return (()=>{
|
|
6954
|
-
var _el$ =
|
|
6955
|
-
_el
|
|
6956
|
-
|
|
6957
|
-
|
|
6958
|
-
"
|
|
7322
|
+
var _el$ = ColorWheelFlower_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$2.nextSibling;
|
|
7323
|
+
_el$3.style.setProperty("transform", "scale(1.1)");
|
|
7324
|
+
var _ref$ = outerRingRef;
|
|
7325
|
+
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$4) : outerRingRef = _el$4;
|
|
7326
|
+
_el$4.style.setProperty("transition", reduceMotion ? "none" : "background 500ms ease-out");
|
|
7327
|
+
_el$5.style.setProperty("transform", "scale(0.9)");
|
|
7328
|
+
_el$6.style.setProperty("background", "#0b1012");
|
|
7329
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
|
|
7330
|
+
each: COLORS,
|
|
7331
|
+
children: (item, index)=>{
|
|
7332
|
+
let motionRef;
|
|
7333
|
+
let dotControl = null;
|
|
7334
|
+
const isSelected = ()=>selectedIndex() === index();
|
|
7335
|
+
const isHovered = ()=>hoveredIndex() === index();
|
|
7336
|
+
const hasSelection = ()=>null !== selectedIndex();
|
|
7337
|
+
const hasHover = ()=>null !== hoveredIndex();
|
|
7338
|
+
const dotTarget = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
|
|
7339
|
+
if (context.disabled()) return {
|
|
7340
|
+
opacity: 0.5,
|
|
7341
|
+
scale: 1,
|
|
7342
|
+
x: 0,
|
|
7343
|
+
y: 0
|
|
7344
|
+
};
|
|
7345
|
+
if (isSelected()) {
|
|
7346
|
+
const lift = getLiftOffset(item, selectLift);
|
|
7347
|
+
return {
|
|
7348
|
+
opacity: 1,
|
|
7349
|
+
scale: 1.18,
|
|
7350
|
+
x: lift.x,
|
|
7351
|
+
y: lift.y
|
|
7352
|
+
};
|
|
7353
|
+
}
|
|
7354
|
+
if (isHovered()) {
|
|
7355
|
+
const lift = getLiftOffset(item, hoverLift);
|
|
7356
|
+
return {
|
|
7357
|
+
opacity: 1,
|
|
7358
|
+
scale: 1.1,
|
|
7359
|
+
x: lift.x,
|
|
7360
|
+
y: lift.y
|
|
7361
|
+
};
|
|
7362
|
+
}
|
|
7363
|
+
if (hasSelection()) return {
|
|
7364
|
+
opacity: 0.65,
|
|
7365
|
+
scale: 0.92,
|
|
7366
|
+
x: 0,
|
|
7367
|
+
y: 0
|
|
7368
|
+
};
|
|
7369
|
+
if (hasHover()) return {
|
|
7370
|
+
opacity: 0.85,
|
|
7371
|
+
scale: 0.96,
|
|
7372
|
+
x: 0,
|
|
7373
|
+
y: 0
|
|
7374
|
+
};
|
|
7375
|
+
return {
|
|
7376
|
+
opacity: 0.95,
|
|
7377
|
+
scale: 1,
|
|
7378
|
+
x: 0,
|
|
7379
|
+
y: 0
|
|
7380
|
+
};
|
|
7381
|
+
});
|
|
7382
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
|
|
7383
|
+
if (!motionRef) return;
|
|
7384
|
+
const target = dotTarget();
|
|
7385
|
+
dotControl?.stop();
|
|
7386
|
+
dotControl = runMotion(motionRef, readMotionState(motionRef), target, dotTransition);
|
|
7387
|
+
});
|
|
7388
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
|
|
7389
|
+
dotControl?.stop();
|
|
7390
|
+
});
|
|
7391
|
+
return (()=>{
|
|
7392
|
+
var _el$8 = ColorWheelFlower_tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild;
|
|
7393
|
+
_el$8.style.setProperty("transform", "translate(-50%, -50%)");
|
|
7394
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
|
|
7395
|
+
motionRef = el;
|
|
7396
|
+
}, _el$9);
|
|
7397
|
+
_el$0.addEventListener("blur", ()=>{
|
|
7398
|
+
if (!context.disabled()) setHoveredIndex(null);
|
|
7399
|
+
});
|
|
7400
|
+
_el$0.addEventListener("focus", ()=>{
|
|
7401
|
+
if (!context.disabled()) setHoveredIndex(index());
|
|
7402
|
+
});
|
|
7403
|
+
_el$0.addEventListener("mouseleave", ()=>{
|
|
7404
|
+
if (!context.disabled()) setHoveredIndex(null);
|
|
7405
|
+
});
|
|
7406
|
+
_el$0.addEventListener("mouseenter", ()=>{
|
|
7407
|
+
if (!context.disabled()) setHoveredIndex(index());
|
|
7408
|
+
});
|
|
7409
|
+
_el$0.$$click = ()=>handleDotClick(index());
|
|
7410
|
+
_el$0.style.setProperty("box-shadow", "0 2px 8px rgba(0,0,0,0.3)");
|
|
7411
|
+
_el$1.style.setProperty("mix-blend-mode", "overlay");
|
|
7412
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
7413
|
+
var _v$3 = `calc(50% + ${item.offsetX}px)`, _v$4 = `calc(50% + ${item.offsetY}px)`, _v$5 = context.disabled() ? -1 : 0, _v$6 = clsx("w-full h-full rounded-full", "transition-shadow duration-200 ease-out", "focus:outline-none focus:ring-2 focus:ring-white/50", "relative z-10", {
|
|
7414
|
+
"cursor-not-allowed": context.disabled(),
|
|
7415
|
+
"cursor-pointer": !context.disabled()
|
|
7416
|
+
}), _v$7 = item.rgb, _v$8 = `Select color ${item.rgb}`, _v$9 = selectedIndex() === index(), _v$0 = clsx("absolute inset-0 rounded-full border-2 border-white", "transition-opacity duration-300 ease-out"), _v$1 = selectedIndex() === index() ? "1" : "0";
|
|
7417
|
+
_v$3 !== _p$.e && (null != (_p$.e = _v$3) ? _el$8.style.setProperty("left", _v$3) : _el$8.style.removeProperty("left"));
|
|
7418
|
+
_v$4 !== _p$.t && (null != (_p$.t = _v$4) ? _el$8.style.setProperty("top", _v$4) : _el$8.style.removeProperty("top"));
|
|
7419
|
+
_v$5 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "tabindex", _p$.a = _v$5);
|
|
7420
|
+
_v$6 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$0, _p$.o = _v$6);
|
|
7421
|
+
_v$7 !== _p$.i && (null != (_p$.i = _v$7) ? _el$0.style.setProperty("background", _v$7) : _el$0.style.removeProperty("background"));
|
|
7422
|
+
_v$8 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-label", _p$.n = _v$8);
|
|
7423
|
+
_v$9 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "aria-pressed", _p$.s = _v$9);
|
|
7424
|
+
_v$0 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, _p$.h = _v$0);
|
|
7425
|
+
_v$1 !== _p$.r && (null != (_p$.r = _v$1) ? _el$1.style.setProperty("opacity", _v$1) : _el$1.style.removeProperty("opacity"));
|
|
7426
|
+
return _p$;
|
|
7427
|
+
}, {
|
|
7428
|
+
e: void 0,
|
|
7429
|
+
t: void 0,
|
|
7430
|
+
a: void 0,
|
|
7431
|
+
o: void 0,
|
|
7432
|
+
i: void 0,
|
|
7433
|
+
n: void 0,
|
|
7434
|
+
s: void 0,
|
|
7435
|
+
h: void 0,
|
|
7436
|
+
r: void 0
|
|
7437
|
+
});
|
|
7438
|
+
return _el$8;
|
|
7439
|
+
})();
|
|
7440
|
+
}
|
|
7441
|
+
}));
|
|
6959
7442
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
6960
|
-
var _v$ =
|
|
7443
|
+
var _v$ = containerClasses(), _v$2 = outerRingBackground();
|
|
6961
7444
|
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
|
|
6962
|
-
_v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el
|
|
6963
|
-
_v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "tabindex", _p$.a = _v$3);
|
|
6964
|
-
_v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-valuenow", _p$.o = _v$4);
|
|
6965
|
-
_v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
|
|
6966
|
-
_v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.n = _v$6);
|
|
6967
|
-
_v$7 !== _p$.s && (null != (_p$.s = _v$7) ? _el$2.style.setProperty("left", _v$7) : _el$2.style.removeProperty("left"));
|
|
6968
|
-
_v$8 !== _p$.h && (null != (_p$.h = _v$8) ? _el$2.style.setProperty("background-color", _v$8) : _el$2.style.removeProperty("background-color"));
|
|
7445
|
+
_v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$4.style.setProperty("background", _v$2) : _el$4.style.removeProperty("background"));
|
|
6969
7446
|
return _p$;
|
|
6970
7447
|
}, {
|
|
6971
7448
|
e: void 0,
|
|
6972
|
-
t: void 0
|
|
6973
|
-
a: void 0,
|
|
6974
|
-
o: void 0,
|
|
6975
|
-
i: void 0,
|
|
6976
|
-
n: void 0,
|
|
6977
|
-
s: void 0,
|
|
6978
|
-
h: void 0
|
|
7449
|
+
t: void 0
|
|
6979
7450
|
});
|
|
6980
7451
|
return _el$;
|
|
6981
7452
|
})();
|
|
6982
7453
|
};
|
|
6983
|
-
const
|
|
7454
|
+
const colorpicker_ColorWheelFlower = ColorWheelFlower;
|
|
6984
7455
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
|
|
6985
|
-
"
|
|
6986
|
-
"keydown"
|
|
7456
|
+
"click"
|
|
6987
7457
|
]);
|
|
7458
|
+
const ColorPickerFlowerSelector_ColorPickerFlowerSelector = ()=>[
|
|
7459
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorWheelFlower, {}),
|
|
7460
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(LightnessSlider, {})
|
|
7461
|
+
];
|
|
7462
|
+
const ColorPickerFlowerSelector = ColorPickerFlowerSelector_ColorPickerFlowerSelector;
|
|
6988
7463
|
var ColorSwatches_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), ColorSwatches_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>");
|
|
6989
7464
|
const ColorSwatches = (props)=>{
|
|
6990
7465
|
const context = useColorPickerContext();
|
|
@@ -7168,117 +7643,6 @@ const colorpicker_ColorPreview = ColorPreview;
|
|
|
7168
7643
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
|
|
7169
7644
|
"click"
|
|
7170
7645
|
]);
|
|
7171
|
-
const immediateDriver = ({ to, onUpdate, onComplete })=>{
|
|
7172
|
-
onUpdate(to);
|
|
7173
|
-
onComplete?.();
|
|
7174
|
-
return {
|
|
7175
|
-
stop: ()=>{}
|
|
7176
|
-
};
|
|
7177
|
-
};
|
|
7178
|
-
let activeDriver = immediateDriver;
|
|
7179
|
-
const setMotionDriver = (driver)=>{
|
|
7180
|
-
activeDriver = driver;
|
|
7181
|
-
};
|
|
7182
|
-
const getMotionDriver = ()=>activeDriver;
|
|
7183
|
-
const easeOutCubic = (t)=>1 - Math.pow(1 - t, 3);
|
|
7184
|
-
const easeInCubic = (t)=>t * t * t;
|
|
7185
|
-
const easeInOutCubic = (t)=>t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
|
|
7186
|
-
const resolveEase = (easing)=>{
|
|
7187
|
-
if ("function" == typeof easing) return easing;
|
|
7188
|
-
switch(easing){
|
|
7189
|
-
case "ease-in":
|
|
7190
|
-
return easeInCubic;
|
|
7191
|
-
case "ease-in-out":
|
|
7192
|
-
return easeInOutCubic;
|
|
7193
|
-
case "linear":
|
|
7194
|
-
return (t)=>t;
|
|
7195
|
-
case "ease-out":
|
|
7196
|
-
default:
|
|
7197
|
-
return easeOutCubic;
|
|
7198
|
-
}
|
|
7199
|
-
};
|
|
7200
|
-
const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
|
|
7201
|
-
const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
|
|
7202
|
-
const readOpacity = (el)=>{
|
|
7203
|
-
const value = Number.parseFloat(getComputedStyle(el).opacity);
|
|
7204
|
-
return Number.isFinite(value) ? value : 1;
|
|
7205
|
-
};
|
|
7206
|
-
const runMotion = (el, from, to, transition, onComplete)=>{
|
|
7207
|
-
const duration = resolveDuration(transition);
|
|
7208
|
-
const delay = resolveDelay(transition);
|
|
7209
|
-
const ease = resolveEase(transition?.easing);
|
|
7210
|
-
const driver = getMotionDriver();
|
|
7211
|
-
const controls = [];
|
|
7212
|
-
const shouldTransform = void 0 !== from.x || void 0 !== from.y || void 0 !== from.scale || void 0 !== to.x || void 0 !== to.y || void 0 !== to.scale;
|
|
7213
|
-
const transformState = {
|
|
7214
|
-
x: from.x ?? 0,
|
|
7215
|
-
y: from.y ?? 0,
|
|
7216
|
-
scale: from.scale ?? 1
|
|
7217
|
-
};
|
|
7218
|
-
const applyTransform = ()=>{
|
|
7219
|
-
if (!shouldTransform) return;
|
|
7220
|
-
el.style.transform = `translate3d(${transformState.x}px, ${transformState.y}px, 0) scale(${transformState.scale})`;
|
|
7221
|
-
};
|
|
7222
|
-
if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
|
|
7223
|
-
applyTransform();
|
|
7224
|
-
const animationTargets = Object.keys(to);
|
|
7225
|
-
if (0 === animationTargets.length) {
|
|
7226
|
-
onComplete?.();
|
|
7227
|
-
return {
|
|
7228
|
-
stop: ()=>{}
|
|
7229
|
-
};
|
|
7230
|
-
}
|
|
7231
|
-
let remaining = animationTargets.length;
|
|
7232
|
-
const handleComplete = ()=>{
|
|
7233
|
-
remaining -= 1;
|
|
7234
|
-
if (remaining <= 0) onComplete?.();
|
|
7235
|
-
};
|
|
7236
|
-
const start = ()=>{
|
|
7237
|
-
animationTargets.forEach((key)=>{
|
|
7238
|
-
if ("opacity" === key) {
|
|
7239
|
-
const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
|
|
7240
|
-
const control = driver({
|
|
7241
|
-
from: fromValue,
|
|
7242
|
-
to: to.opacity ?? fromValue,
|
|
7243
|
-
duration,
|
|
7244
|
-
ease,
|
|
7245
|
-
onUpdate: (latest)=>{
|
|
7246
|
-
el.style.opacity = String(latest);
|
|
7247
|
-
},
|
|
7248
|
-
onComplete: handleComplete
|
|
7249
|
-
});
|
|
7250
|
-
controls.push(control);
|
|
7251
|
-
return;
|
|
7252
|
-
}
|
|
7253
|
-
const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
|
|
7254
|
-
const toValue = to[key] ?? fromValue;
|
|
7255
|
-
const control = driver({
|
|
7256
|
-
from: fromValue,
|
|
7257
|
-
to: toValue,
|
|
7258
|
-
duration,
|
|
7259
|
-
ease,
|
|
7260
|
-
onUpdate: (latest)=>{
|
|
7261
|
-
if (!shouldTransform) return;
|
|
7262
|
-
if ("x" === key) transformState.x = latest;
|
|
7263
|
-
if ("y" === key) transformState.y = latest;
|
|
7264
|
-
if ("scale" === key) transformState.scale = latest;
|
|
7265
|
-
applyTransform();
|
|
7266
|
-
},
|
|
7267
|
-
onComplete: handleComplete
|
|
7268
|
-
});
|
|
7269
|
-
controls.push(control);
|
|
7270
|
-
});
|
|
7271
|
-
};
|
|
7272
|
-
let timeoutId = null;
|
|
7273
|
-
if (delay > 0) timeoutId = window.setTimeout(start, delay);
|
|
7274
|
-
else start();
|
|
7275
|
-
return {
|
|
7276
|
-
stop: ()=>{
|
|
7277
|
-
if (null !== timeoutId) clearTimeout(timeoutId);
|
|
7278
|
-
controls.forEach((control)=>control.stop());
|
|
7279
|
-
}
|
|
7280
|
-
};
|
|
7281
|
-
};
|
|
7282
7646
|
var MotionDiv_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
|
|
7283
7647
|
const MotionDiv_MotionDiv = (props)=>{
|
|
7284
7648
|
const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
@@ -7351,48 +7715,6 @@ const MotionDiv_MotionDiv = (props)=>{
|
|
|
7351
7715
|
})();
|
|
7352
7716
|
};
|
|
7353
7717
|
const MotionDiv = MotionDiv_MotionDiv;
|
|
7354
|
-
const prefersReducedMotion = ()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
|
|
7355
|
-
const motionDurations = {
|
|
7356
|
-
route: 0.18,
|
|
7357
|
-
routeAuth: 0.35,
|
|
7358
|
-
fast: 0.2,
|
|
7359
|
-
base: 0.3,
|
|
7360
|
-
slow: 0.45
|
|
7361
|
-
};
|
|
7362
|
-
const motionEasings = {
|
|
7363
|
-
out: "ease-out",
|
|
7364
|
-
inOut: "ease-in-out"
|
|
7365
|
-
};
|
|
7366
|
-
const motionDistances = {
|
|
7367
|
-
sm: 6,
|
|
7368
|
-
md: 12,
|
|
7369
|
-
lg: 20,
|
|
7370
|
-
slideIn: 40
|
|
7371
|
-
};
|
|
7372
|
-
const defaultMotionTokens = {
|
|
7373
|
-
durations: {
|
|
7374
|
-
...motionDurations
|
|
7375
|
-
},
|
|
7376
|
-
easings: {
|
|
7377
|
-
...motionEasings
|
|
7378
|
-
},
|
|
7379
|
-
distances: {
|
|
7380
|
-
...motionDistances
|
|
7381
|
-
}
|
|
7382
|
-
};
|
|
7383
|
-
const mergeDefined = (base, overrides)=>{
|
|
7384
|
-
const next = {
|
|
7385
|
-
...base
|
|
7386
|
-
};
|
|
7387
|
-
if (!overrides) return next;
|
|
7388
|
-
for (const [key, value] of Object.entries(overrides))if (void 0 !== value) next[key] = value;
|
|
7389
|
-
return next;
|
|
7390
|
-
};
|
|
7391
|
-
const mergeMotionTokens = (base, overrides)=>({
|
|
7392
|
-
durations: mergeDefined(base.durations, overrides?.durations),
|
|
7393
|
-
easings: mergeDefined(base.easings, overrides?.easings),
|
|
7394
|
-
distances: mergeDefined(base.distances, overrides?.distances)
|
|
7395
|
-
});
|
|
7396
7718
|
const createMotionPresets = (tokens)=>{
|
|
7397
7719
|
const durations = tokens.durations;
|
|
7398
7720
|
const easings = tokens.easings;
|
|
@@ -7593,7 +7915,7 @@ const presets_resolvePreset = (name, options)=>{
|
|
|
7593
7915
|
if (reduce) return noMotion;
|
|
7594
7916
|
return motionPresets[name] ?? noMotion;
|
|
7595
7917
|
};
|
|
7596
|
-
var ColorPicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex p-1 mb-3 bg-base-200 rounded-md"><button type=button>Gradient</button><button type=button>Wheel'), ColorPicker_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pt-2 border-t border-base-300">'), ColorPicker_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=space-y-4>"), ColorPicker_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="fixed inset-0 z-40"aria-hidden=true>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
|
|
7918
|
+
var ColorPicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex p-1 mb-3 bg-base-200 rounded-md"><button type=button>Gradient</button><button type=button>Wheel</button><button type=button>Flower'), ColorPicker_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pt-2 border-t border-base-300">'), ColorPicker_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=space-y-4>"), ColorPicker_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="fixed inset-0 z-40"aria-hidden=true>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
|
|
7597
7919
|
const DEFAULT_SWATCHES = [
|
|
7598
7920
|
"#FF6B6B",
|
|
7599
7921
|
"#4ECDC4",
|
|
@@ -7686,9 +8008,10 @@ const ColorPicker = (props)=>{
|
|
|
7686
8008
|
}));
|
|
7687
8009
|
};
|
|
7688
8010
|
const ModeSwitcher = ()=>(()=>{
|
|
7689
|
-
var _el$ = ColorPicker_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
|
|
8011
|
+
var _el$ = ColorPicker_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
|
|
7690
8012
|
_el$2.$$click = ()=>setMode("picker");
|
|
7691
8013
|
_el$3.$$click = ()=>setMode("wheel");
|
|
8014
|
+
_el$4.$$click = ()=>setMode("flower");
|
|
7692
8015
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
7693
8016
|
var _v$ = clsx("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
|
|
7694
8017
|
"bg-base-100 shadow-sm text-base-content": "picker" === mode(),
|
|
@@ -7696,13 +8019,18 @@ const ColorPicker = (props)=>{
|
|
|
7696
8019
|
}), _v$2 = clsx("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
|
|
7697
8020
|
"bg-base-100 shadow-sm text-base-content": "wheel" === mode(),
|
|
7698
8021
|
"text-base-content/60 hover:text-base-content": "wheel" !== mode()
|
|
8022
|
+
}), _v$3 = clsx("flex-1 px-3 py-1 text-xs font-medium rounded-sm transition-colors", {
|
|
8023
|
+
"bg-base-100 shadow-sm text-base-content": "flower" === mode(),
|
|
8024
|
+
"text-base-content/60 hover:text-base-content": "flower" !== mode()
|
|
7699
8025
|
});
|
|
7700
8026
|
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
|
|
7701
8027
|
_v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.t = _v$2);
|
|
8028
|
+
_v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, _p$.a = _v$3);
|
|
7702
8029
|
return _p$;
|
|
7703
8030
|
}, {
|
|
7704
8031
|
e: void 0,
|
|
7705
|
-
t: void 0
|
|
8032
|
+
t: void 0,
|
|
8033
|
+
a: void 0
|
|
7706
8034
|
});
|
|
7707
8035
|
return _el$;
|
|
7708
8036
|
})();
|
|
@@ -7726,30 +8054,32 @@ const ColorPicker = (props)=>{
|
|
|
7726
8054
|
return [
|
|
7727
8055
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ModeSwitcher, {}),
|
|
7728
8056
|
(()=>{
|
|
7729
|
-
var _el$
|
|
7730
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8057
|
+
var _el$5 = ColorPicker_tmpl$3();
|
|
8058
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
7731
8059
|
get when () {
|
|
7732
8060
|
return "picker" === mode();
|
|
7733
8061
|
},
|
|
7734
8062
|
get children () {
|
|
7735
|
-
return
|
|
7736
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_SaturationBrightness, {}),
|
|
7737
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_HueSlider, {})
|
|
7738
|
-
];
|
|
8063
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorPickerGradientSelector, {});
|
|
7739
8064
|
}
|
|
7740
8065
|
}), null);
|
|
7741
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8066
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
7742
8067
|
get when () {
|
|
7743
8068
|
return "wheel" === mode();
|
|
7744
8069
|
},
|
|
7745
8070
|
get children () {
|
|
7746
|
-
return
|
|
7747
|
-
|
|
7748
|
-
|
|
7749
|
-
|
|
8071
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerWheelSelector, {});
|
|
8072
|
+
}
|
|
8073
|
+
}), null);
|
|
8074
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
8075
|
+
get when () {
|
|
8076
|
+
return "flower" === mode();
|
|
8077
|
+
},
|
|
8078
|
+
get children () {
|
|
8079
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerFlowerSelector, {});
|
|
7750
8080
|
}
|
|
7751
8081
|
}), null);
|
|
7752
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8082
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
7753
8083
|
get when () {
|
|
7754
8084
|
return local.showAlpha;
|
|
7755
8085
|
},
|
|
@@ -7757,22 +8087,22 @@ const ColorPicker = (props)=>{
|
|
|
7757
8087
|
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(AlphaSlider, {});
|
|
7758
8088
|
}
|
|
7759
8089
|
}), null);
|
|
7760
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
7761
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8090
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorInput, {}), null);
|
|
8091
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
7762
8092
|
get when () {
|
|
7763
8093
|
return local.swatches || DEFAULT_SWATCHES;
|
|
7764
8094
|
},
|
|
7765
8095
|
get children () {
|
|
7766
|
-
var _el$
|
|
7767
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8096
|
+
var _el$6 = ColorPicker_tmpl$2();
|
|
8097
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorSwatches, {
|
|
7768
8098
|
get swatches () {
|
|
7769
8099
|
return local.swatches || DEFAULT_SWATCHES;
|
|
7770
8100
|
}
|
|
7771
8101
|
}));
|
|
7772
|
-
return _el$
|
|
8102
|
+
return _el$6;
|
|
7773
8103
|
}
|
|
7774
8104
|
}), null);
|
|
7775
|
-
return _el$
|
|
8105
|
+
return _el$5;
|
|
7776
8106
|
})()
|
|
7777
8107
|
];
|
|
7778
8108
|
}
|
|
@@ -7780,11 +8110,11 @@ const ColorPicker = (props)=>{
|
|
|
7780
8110
|
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ColorPickerContext.Provider, {
|
|
7781
8111
|
value: contextValue,
|
|
7782
8112
|
get children () {
|
|
7783
|
-
var _el$
|
|
7784
|
-
_el$
|
|
8113
|
+
var _el$7 = _tmpl$5();
|
|
8114
|
+
_el$7.$$keydown = handleKeyDown;
|
|
7785
8115
|
var _ref$ = containerRef;
|
|
7786
|
-
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$
|
|
7787
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$
|
|
8116
|
+
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$7) : containerRef = _el$7;
|
|
8117
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
|
|
7788
8118
|
get ["class"] () {
|
|
7789
8119
|
return containerClasses();
|
|
7790
8120
|
},
|
|
@@ -7795,7 +8125,7 @@ const ColorPicker = (props)=>{
|
|
|
7795
8125
|
return local.style;
|
|
7796
8126
|
}
|
|
7797
8127
|
}, others), false, true);
|
|
7798
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8128
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(colorpicker_ColorPreview, {
|
|
7799
8129
|
get color () {
|
|
7800
8130
|
return color();
|
|
7801
8131
|
},
|
|
@@ -7807,7 +8137,7 @@ const ColorPicker = (props)=>{
|
|
|
7807
8137
|
return local["aria-label"] || "Color picker";
|
|
7808
8138
|
}
|
|
7809
8139
|
}), null);
|
|
7810
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8140
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
7811
8141
|
get when () {
|
|
7812
8142
|
return isOpen() && !local.disabled;
|
|
7813
8143
|
},
|
|
@@ -7815,17 +8145,17 @@ const ColorPicker = (props)=>{
|
|
|
7815
8145
|
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(PopoverContent, {});
|
|
7816
8146
|
}
|
|
7817
8147
|
}), null);
|
|
7818
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$
|
|
8148
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
7819
8149
|
get when () {
|
|
7820
8150
|
return isOpen() && !local.disabled;
|
|
7821
8151
|
},
|
|
7822
8152
|
get children () {
|
|
7823
|
-
var _el$
|
|
7824
|
-
_el$
|
|
7825
|
-
return _el$
|
|
8153
|
+
var _el$8 = ColorPicker_tmpl$4();
|
|
8154
|
+
_el$8.$$click = ()=>setIsOpen(false);
|
|
8155
|
+
return _el$8;
|
|
7826
8156
|
}
|
|
7827
8157
|
}), null);
|
|
7828
|
-
return _el$
|
|
8158
|
+
return _el$7;
|
|
7829
8159
|
}
|
|
7830
8160
|
});
|
|
7831
8161
|
};
|
|
@@ -8629,7 +8959,7 @@ const dividerStyles = cva("flex items-center whitespace-nowrap relative", {
|
|
|
8629
8959
|
position: "center"
|
|
8630
8960
|
}
|
|
8631
8961
|
});
|
|
8632
|
-
const
|
|
8962
|
+
const Divider = (props)=>{
|
|
8633
8963
|
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
8634
8964
|
"children",
|
|
8635
8965
|
"text",
|
|
@@ -8664,8 +8994,8 @@ const Divider_Divider = (props)=>{
|
|
|
8664
8994
|
children: content
|
|
8665
8995
|
}));
|
|
8666
8996
|
};
|
|
8667
|
-
const
|
|
8668
|
-
const divider =
|
|
8997
|
+
const divider_Divider = Divider;
|
|
8998
|
+
const divider = divider_Divider;
|
|
8669
8999
|
var DockItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
|
|
8670
9000
|
const DockItem_DockItem = (props)=>{
|
|
8671
9001
|
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
@@ -14741,4 +15071,4 @@ const createRouteTransitionResolver = (options)=>{
|
|
|
14741
15071
|
return fallback ?? noMotion;
|
|
14742
15072
|
};
|
|
14743
15073
|
};
|
|
14744
|
-
export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorPicker as ColorPicker, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useDesktop, useFormValidation };
|
|
15074
|
+
export { accordion_Accordion as Accordion, alert_Alert as Alert, AlphaSlider, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, colorpicker_ColorInput as ColorInput, colorpicker_ColorPicker as ColorPicker, ColorPickerContext, ColorPickerFlowerSelector, colorpicker_ColorPickerGradientSelector as ColorPickerGradientSelector, ColorPickerWheelSelector, colorpicker_ColorPreview as ColorPreview, colorpicker_ColorSwatches as ColorSwatches, ColorWheel, colorpicker_ColorWheelFlower as ColorWheelFlower, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, colorpicker_HueSlider as HueSlider, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, LightnessSlider, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, colorpicker_SaturationBrightness as SaturationBrightness, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useColorPickerContext, useDesktop, useFormValidation };
|