@pathscale/ui 0.0.44 → 0.0.45

package/dist/index.js

@@ -6823,12 +6823,13 @@ const Label = (props)=>{
     })();
 };
 const form_Label = Label;
-const FormValidationContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const FormValidationContext_FormValidationContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 function useFormValidation() {
-    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(FormValidationContext);
-    if (!context) throw new Error("useFormValidation must be used within a ValidatedForm");
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(FormValidationContext_FormValidationContext);
+    if (!context) throw new Error("useFormValidation must be used within a Form.Validated component. Make sure your component is wrapped in <Form.Validated>...</Form.Validated>");
     return context;
 }
+const FormValidationContext = FormValidationContext_FormValidationContext;
 function ValidatedForm(props) {
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -6836,7 +6837,7 @@ function ValidatedForm(props) {
         "onSubmit",
         "initialValues"
     ]);
-    const { form, errors, touched, data, isValid, isSubmitting } = (0, __WEBPACK_EXTERNAL_MODULE__felte_solid_6a709b1d__.createForm)({
+    const felteForm = (0, __WEBPACK_EXTERNAL_MODULE__felte_solid_6a709b1d__.createForm)({
         initialValues: local.initialValues,
         extend: [
             (0, __WEBPACK_EXTERNAL_MODULE__felte_validator_zod_bb07151a__.validator)({
@@ -6845,13 +6846,35 @@ function ValidatedForm(props) {
         ],
         onSubmit: local.onSubmit
     });
+    const { form, data, errors, warnings, touched, isValid, isSubmitting, isDirty, isValidating, interacted, reset, validate, setData, setFields, setTouched, setErrors, setWarnings, setIsDirty, setIsSubmitting, setInteracted, createSubmitHandler, setInitialValues, addField, unsetField, resetField, swapFields, moveField } = felteForm;
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
     const contextValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+            data,
             errors,
+            warnings,
             touched,
-            data,
             isValid,
-            isSubmitting
+            isSubmitting,
+            isDirty,
+            isValidating,
+            interacted,
+            reset,
+            validate,
+            setData,
+            setFields,
+            setTouched,
+            setErrors,
+            setWarnings,
+            setIsDirty,
+            setIsSubmitting,
+            setInteracted,
+            createSubmitHandler: createSubmitHandler,
+            setInitialValues,
+            addField: addField,
+            unsetField: unsetField,
+            resetField: resetField,
+            swapFields: swapFields,
+            moveField: moveField
         }));
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(FormValidationContext.Provider, {
         get value () {
@@ -8853,14 +8876,84 @@ const steps_Steps = Object.assign(Steps, {
     Step: Step
 });
 const steps = steps_Steps;
-var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><svg class="absolute inset-0 w-full h-full z-0"viewBox="0 0 400 400"preserveAspectRatio="xMidYMid slice"xmlns=http://www.w3.org/2000/svg><defs><linearGradient gradientTransform="rotate(63, 0.5, 0.5)"x1=50% y1=0% x2=50% y2=100%><stop stop-opacity=1 offset=0%></stop><stop stop-opacity=1 offset=100%></stop></linearGradient><filter x=-20% y=-20% width=140% height=140% filterUnits=objectBoundingBox primitiveUnits=userSpaceOnUse color-interpolation-filters=sRGB><feTurbulence type=fractalNoise numOctaves=2 seed=10 stitchTiles=stitch result=turbulence></feTurbulence><feGaussianBlur in=turbulence result=blur></feGaussianBlur><feBlend in=SourceGraphic in2=blur result=blend></feBlend></filter></defs><rect width=400 height=400></rect></svg><div class="relative z-10 h-full w-full">'), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
-function parseHSL(hslString) {
-    const match = hslString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
-    if (!match) return null;
+var SvgBackground_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><svg class="absolute inset-0 w-full h-full z-0"viewBox="0 0 400 400"preserveAspectRatio="xMidYMid slice"xmlns=http://www.w3.org/2000/svg><defs><linearGradient gradientTransform="rotate(63, 0.5, 0.5)"x1=50% y1=0% x2=50% y2=100%><stop stop-opacity=1 offset=0%></stop><stop stop-opacity=1 offset=100%></stop></linearGradient></defs><rect width=400 height=400></rect></svg><div class="relative z-10 h-full w-full">'), SvgBackground_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><filter x=-20% y=-20% width=140% height=140% filterUnits=objectBoundingBox primitiveUnits=userSpaceOnUse color-interpolation-filters=sRGB></svg>", false, true, false), SvgBackground_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feGaussianBlur in=SourceGraphic result=blur></svg>", false, true, false), SvgBackground_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feTurbulence type=fractalNoise numOctaves=2 seed=10 stitchTiles=stitch result=turbulence></svg>", false, true, false), SvgBackground_tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feGaussianBlur in=turbulence result=blur></svg>", false, true, false), SvgBackground_tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<svg><feBlend in=SourceGraphic in2=blur result=blend></svg>", false, true, false), SvgBackground_tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute inset-0 z-5">');
+function hexToHsl(hex) {
+    hex = hex.replace('#', '');
+    const r = parseInt(hex.substr(0, 2), 16) / 255;
+    const g = parseInt(hex.substr(2, 2), 16) / 255;
+    const b = parseInt(hex.substr(4, 2), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch(max){
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
     return {
-        h: parseInt(match[1]),
-        s: parseInt(match[2]),
-        l: parseInt(match[3])
+        h: Math.round(360 * h),
+        s: Math.round(100 * s),
+        l: Math.round(100 * l)
+    };
+}
+function parseColor(colorString) {
+    const hslMatch = colorString.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
+    if (hslMatch) return {
+        h: parseInt(hslMatch[1]),
+        s: parseInt(hslMatch[2]),
+        l: parseInt(hslMatch[3])
+    };
+    const hexMatch = colorString.match(/^#?([a-fA-F0-9]{6})$/);
+    if (hexMatch) return hexToHsl(colorString);
+    const rgbMatch = colorString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (rgbMatch) {
+        const r = parseInt(rgbMatch[1]) / 255;
+        const g = parseInt(rgbMatch[2]) / 255;
+        const b = parseInt(rgbMatch[3]) / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch(max){
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return {
+            h: Math.round(360 * h),
+            s: Math.round(100 * s),
+            l: Math.round(100 * l)
+        };
+    }
+    return {
+        h: 0,
+        s: 0,
+        l: 0
     };
 }
 function interpolateHue(h1, h2, t) {
@@ -8874,7 +8967,7 @@ function generateStableId() {
     return `svg-bg-${++instanceCounter}-${Date.now()}`;
 }
 function SvgBackground(props) {
-    const { colorStart = 'hsl(129, 100%, 72%)', colorEnd = 'hsl(227, 100%, 50%)', opacity = 1, blurIntensity = 36, turbulenceFrequency = 0.007, animated = false, animationSpeed = 1, class: className = '', style = {}, children, darkness = 0 } = props;
+    const { colorStart = '#000000', colorEnd = '#333333', opacity = 1, blurIntensity = 36, turbulenceFrequency = 0.007, animated = false, animationSpeed = 1, class: className = '', style = {}, children, darkness = 0 } = props;
     const [animationTime, setAnimationTime] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(0);
     let animationFrame = null;
     let gradientStop1Ref;
@@ -8882,6 +8975,12 @@ function SvgBackground(props) {
     let turbulenceRef;
     const gradientId = `gradient-${generateStableId()}`;
     const filterId = `filter-${generateStableId()}`;
+    const shouldUseFilters = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>blurIntensity > 0 && turbulenceFrequency > 0.001);
+    const isGrayscaleColors = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const startHSL = parseColor(colorStart);
+        const endHSL = parseColor(colorEnd);
+        return startHSL.s < 15 && endHSL.s < 15;
+    });
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
         if (animated) {
             const animate = ()=>{
@@ -8894,8 +8993,8 @@ function SvgBackground(props) {
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
         if (animationFrame) cancelAnimationFrame(animationFrame);
     });
-    const startHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseHSL(colorStart));
-    const endHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseHSL(colorEnd));
+    const startHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseColor(colorStart));
+    const endHSL = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>parseColor(colorEnd));
     const animatedColors = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
         if (!animated) return {
             color1: colorStart,
@@ -8930,16 +9029,14 @@ function SvgBackground(props) {
         let color2 = colorEnd;
         const start = startHSL();
         const end = endHSL();
-        if (start && end) {
-            const h1 = interpolateHue(start.h, end.h, colorMix);
-            const s1 = start.s + (end.s - start.s) * colorMix;
-            const l1 = start.l + (end.l - start.l) * colorMix;
-            const h2 = interpolateHue(start.h, end.h, colorMix2);
-            const s2 = start.s + (end.s - start.s) * colorMix2;
-            const l2 = start.l + (end.l - start.l) * colorMix2;
-            color1 = `hsl(${Math.round(h1)}, ${Math.round(s1)}%, ${Math.round(l1)}%)`;
-            color2 = `hsl(${Math.round(h2)}, ${Math.round(s2)}%, ${Math.round(l2)}%)`;
-        }
+        const h1 = interpolateHue(start.h, end.h, colorMix);
+        const s1 = start.s + (end.s - start.s) * colorMix;
+        const l1 = start.l + (end.l - start.l) * colorMix;
+        const h2 = interpolateHue(start.h, end.h, colorMix2);
+        const s2 = start.s + (end.s - start.s) * colorMix2;
+        const l2 = start.l + (end.l - start.l) * colorMix2;
+        color1 = `hsl(${Math.round(h1)}, ${Math.round(s1)}%, ${Math.round(l1)}%)`;
+        color2 = `hsl(${Math.round(h2)}, ${Math.round(s2)}%, ${Math.round(l2)}%)`;
         const turbFreq1 = turbulenceFrequency + 0.01 * turbulenceFrequency * turbMix1;
         const turbFreq2 = 0.4 * turbulenceFrequency + 0.01 * turbulenceFrequency * turbMix2;
         return {
@@ -8960,34 +9057,62 @@ function SvgBackground(props) {
             ...style
         }));
     return (()=>{
-        var _el$ = SvgBackground_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$3.nextSibling, _el$10 = _el$2.nextSibling;
+        var _el$ = SvgBackground_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$3.nextSibling, _el$8 = _el$2.nextSibling;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, `relative ${className}`);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", gradientId);
         var _ref$ = gradientStop1Ref;
         "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$5) : gradientStop1Ref = _el$5;
         var _ref$2 = gradientStop2Ref;
         "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$6) : gradientStop2Ref = _el$6;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "id", filterId);
-        var _ref$3 = turbulenceRef;
-        "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$8) : turbulenceRef = _el$8;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "stdDeviation", `${blurIntensity} ${blurIntensity}`);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "mode", "color-dodge");
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "fill", `url(#${gradientId})`);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "filter", `url(#${filterId})`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!shouldUseFilters());
+            return ()=>_c$() && (()=>{
+                    var _el$9 = SvgBackground_tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$9, "id", filterId);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (()=>{
+                        var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isGrayscaleColors());
+                        return ()=>_c$2() ? (()=>{
+                                var _el$0 = SvgBackground_tmpl$3();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$0, "stdDeviation", `${0.3 * blurIntensity} ${0.3 * blurIntensity}`);
+                                return _el$0;
+                            })() : [
+                                (()=>{
+                                    var _el$1 = SvgBackground_tmpl$4();
+                                    var _ref$3 = turbulenceRef;
+                                    "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$1) : turbulenceRef = _el$1;
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "baseFrequency", `${animatedColors().turbFreq1} ${animatedColors().turbFreq2}`));
+                                    return _el$1;
+                                })(),
+                                (()=>{
+                                    var _el$10 = SvgBackground_tmpl$5();
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "stdDeviation", `${blurIntensity} ${blurIntensity}`);
+                                    return _el$10;
+                                })(),
+                                (()=>{
+                                    var _el$11 = SvgBackground_tmpl$6();
+                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "mode", "color-dodge");
+                                    return _el$11;
+                                })()
+                            ];
+                    })());
+                    return _el$9;
+                })();
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "fill", `url(#${gradientId})`);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, darkness > 0 && (()=>{
-            var _el$11 = SvgBackground_tmpl$2();
-            _el$11.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
-            _el$11.style.setProperty("pointer-events", "none");
-            return _el$11;
-        })(), _el$10);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, children);
+            var _el$12 = SvgBackground_tmpl$7();
+            _el$12.style.setProperty("background-color", `rgba(0, 0, 0, ${darkness})`);
+            _el$12.style.setProperty("pointer-events", "none");
+            return _el$12;
+        })(), _el$8);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, children);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = backgroundStyle(), _v$2 = opacity.toString(), _v$3 = animatedColors().color1, _v$4 = animatedColors().color2, _v$5 = `${animatedColors().turbFreq1} ${animatedColors().turbFreq2}`;
+            var _v$ = backgroundStyle(), _v$2 = opacity.toString(), _v$3 = animatedColors().color1, _v$4 = animatedColors().color2, _v$5 = shouldUseFilters() ? `url(#${filterId})` : 'none';
             _p$.e = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$, _p$.e);
             _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("opacity", _v$2) : _el$2.style.removeProperty("opacity"));
             _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "stop-color", _p$.a = _v$3);
             _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "stop-color", _p$.o = _v$4);
-            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "baseFrequency", _p$.i = _v$5);
+            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "filter", _p$.i = _v$5);
             return _p$;
         }, {
             e: void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pathscale/ui",
-	"version": "0.0.44",
+	"version": "0.0.45",
 	"author": "pathscale",
 	"repository": {
 		"type": "git",