@pathscale/ui 1.3.1 → 1.5.0

package/dist/components/immersive-landing/ImmersiveLandingNavigation.generated.js

@@ -0,0 +1,134 @@
+import { createComponent, delegateEvents, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { For, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./ImmersiveLanding.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template('<nav><div><div><button type=button><svg><path stroke-linecap=round stroke-linejoin=round d="M15 19l-7-7 7-7"></path></svg></button><button type=button><svg><path stroke-linecap=round stroke-linejoin=round d="M9 5l7 7-7 7">'), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<button type=button>"), _tmpl$4 = /*#__PURE__*/ template("<span>/");
+const __solidLayoutImmersiveLandingNavigation = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "pages",
+        "currentPageIndex",
+        "onPageDotClick",
+        "onPrev",
+        "onNext",
+        "isFirstPage",
+        "isLastPage",
+        "class",
+        "className",
+        "style"
+    ]);
+    const mobileArrowClasses = (disabled)=>twMerge(CLASSES.navigation.mobileArrow, disabled && CLASSES.navigation.mobileArrowDisabled);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild;
+        spread(_el$, mergeProps(()=>({
+                class: twMerge(CLASSES.navigation.base, local.class, local.className)
+            }), {
+            "aria-label": "Page navigation",
+            get style () {
+                return {
+                    bottom: "calc(0.75rem + env(safe-area-inset-bottom))",
+                    ...local.style
+                };
+            }
+        }, others), false, true);
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.navigation.shell
+            })), false, true);
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.navigation.row
+            })), false, true);
+        spread(_el$4, mergeProps({
+            get onClick () {
+                return local.onPrev;
+            },
+            get disabled () {
+                return local.isFirstPage;
+            }
+        }, ()=>({
+                class: mobileArrowClasses(local.isFirstPage)
+            }), {
+            "aria-label": "Previous page"
+        }), false, true);
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.navigation.icon
+            }), {
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            "stroke-width": "2"
+        }), true, true);
+        insert(_el$3, (()=>{
+            var _c$ = memo(()=>!!(local.pages && local.pages.length > 0));
+            return ()=>_c$() && (()=>{
+                    var _el$8 = _tmpl$2();
+                    spread(_el$8, mergeProps(()=>({
+                            class: CLASSES.navigation.dots
+                        })), false, true);
+                    insert(_el$8, createComponent(For, {
+                        get each () {
+                            return local.pages;
+                        },
+                        children: (pageId, index)=>(()=>{
+                                var _el$9 = _tmpl$3();
+                                _el$9.$$click = ()=>local.onPageDotClick(pageId);
+                                spread(_el$9, mergeProps(()=>({
+                                        class: twMerge(CLASSES.navigation.dot, index() === local.currentPageIndex && CLASSES.navigation.dotActive)
+                                    }), {
+                                    get ["aria-label"] () {
+                                        return `Go to page ${index() + 1} of ${local.pages.length}`;
+                                    },
+                                    get ["aria-current"] () {
+                                        return index() === local.currentPageIndex ? "step" : void 0;
+                                    }
+                                }), false, false);
+                                return _el$9;
+                            })()
+                    }));
+                    return _el$8;
+                })();
+        })(), _el$6);
+        insert(_el$3, (()=>{
+            var _c$2 = memo(()=>!!(local.pages && local.pages.length > 0));
+            return ()=>_c$2() && (()=>{
+                    var _el$0 = _tmpl$4(), _el$1 = _el$0.firstChild;
+                    spread(_el$0, mergeProps(()=>({
+                            class: CLASSES.navigation.counter
+                        })), false, true);
+                    insert(_el$0, ()=>(local.currentPageIndex ?? 0) + 1, _el$1);
+                    insert(_el$0, ()=>local.pages.length, null);
+                    return _el$0;
+                })();
+        })(), _el$6);
+        spread(_el$6, mergeProps({
+            get onClick () {
+                return local.onNext;
+            },
+            get disabled () {
+                return local.isLastPage;
+            }
+        }, ()=>({
+                class: mobileArrowClasses(local.isLastPage)
+            }), {
+            "aria-label": "Next page"
+        }), false, true);
+        spread(_el$7, mergeProps(()=>({
+                class: CLASSES.navigation.icon
+            }), {
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            "stroke-width": "2"
+        }), true, true);
+        return _el$;
+    })();
+};
+const ImmersiveLandingNavigation = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutImmersiveLandingNavigation,
+    embedded: true
+});
+const ImmersiveLandingNavigation_generated = ImmersiveLandingNavigation;
+delegateEvents([
+    "click"
+]);
+export default ImmersiveLandingNavigation_generated;

package/dist/components/immersive-landing/ImmersiveLandingPage.generated.d.ts

@@ -0,0 +1,4 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import type { ImmersiveLandingPageProps } from "./types";
+declare const ImmersiveLandingPage: __LayoutComponent<ImmersiveLandingPageProps>;
+export default ImmersiveLandingPage;

package/dist/components/immersive-landing/ImmersiveLandingPage.generated.js

@@ -0,0 +1,56 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { createMemo, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { ImmersiveLandingContext } from "./ImmersiveLandingContext.js";
+import { CLASSES, componentRecipe } from "./ImmersiveLanding.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<section role=region><div>");
+const __solidLayoutImmersiveLandingPage = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "id",
+        "children",
+        "class",
+        "className",
+        "style"
+    ]);
+    const context = useContext(ImmersiveLandingContext);
+    const isActive = createMemo(()=>context?.activePage() === local.id);
+    const fadeDurationMs = 200;
+    const classes = ()=>twMerge(CLASSES.page.base, isActive() ? CLASSES.page.active : CLASSES.page.inactive, local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        spread(_el$, mergeProps({
+            get id () {
+                return local.id;
+            },
+            get ["aria-label"] () {
+                return `${local.id} section`;
+            }
+        }, ()=>({
+                class: classes()
+            }), {
+            get style () {
+                return {
+                    "transition-duration": "200ms",
+                    "transition-delay": isActive() ? `${fadeDurationMs}ms` : "0ms",
+                    ...local.style
+                };
+            },
+            get ["aria-hidden"] () {
+                return !isActive();
+            }
+        }, others), false, true);
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.page.content
+            })), false, true);
+        insert(_el$2, ()=>local.children);
+        return _el$;
+    })();
+};
+const ImmersiveLandingPage = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutImmersiveLandingPage,
+    embedded: true
+});
+const ImmersiveLandingPage_generated = ImmersiveLandingPage;
+export default ImmersiveLandingPage_generated;

package/dist/components/immersive-landing/components/CookieConsent.js

@@ -2,7 +2,7 @@ import { createComponent, insert, mergeProps, spread, template } from "solid-js/
 import { Show, createSignal, onCleanup, onMount } from "solid-js";
 import button_0 from "../../button/index.js";
 import flex from "../../flex/index.js";
-import { CLASSES } from "../ImmersiveLanding.classes.js";
+import { CLASSES } from "../ImmersiveLanding.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<p id=cookie-consent-message>"), _tmpl$2 = /*#__PURE__*/ template("<button type=button>"), _tmpl$3 = /*#__PURE__*/ template("<div role=dialog aria-modal=false aria-labelledby=cookie-consent-message><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2 id=cookie-manage-title>"), _tmpl$5 = /*#__PURE__*/ template("<label><span></span><input type=checkbox checked disabled>"), _tmpl$6 = /*#__PURE__*/ template("<label><span></span><input type=checkbox>"), _tmpl$7 = /*#__PURE__*/ template("<div role=dialog aria-modal=true aria-labelledby=cookie-manage-title><div>");
 const defaultTexts = {
     message: "We use cookies to improve your experience. You can accept all cookies or manage your preferences.",

package/dist/components/immersive-landing/components/FirefoxPWABanner.js

@@ -4,7 +4,7 @@ import button_0 from "../../button/index.js";
 import card from "../../card/index.js";
 import flex from "../../flex/index.js";
 import icon from "../../icon/index.js";
-import { CLASSES } from "../ImmersiveLanding.classes.js";
+import { CLASSES } from "../ImmersiveLanding.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3 id=pwa-unsupported-title>"), _tmpl$3 = /*#__PURE__*/ template("<p>"), _tmpl$4 = /*#__PURE__*/ template("<div aria-labelledby=pwa-unsupported-title>");
 const defaultTexts = {
     title: "Install App on Firefox",

package/dist/components/immersive-landing/components/PWAInstallPrompt.js

@@ -3,7 +3,7 @@ import { Show, createSignal, onCleanup, onMount } from "solid-js";
 import button_0 from "../../button/index.js";
 import card from "../../card/index.js";
 import flex from "../../flex/index.js";
-import { CLASSES } from "../ImmersiveLanding.classes.js";
+import { CLASSES } from "../ImmersiveLanding.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><img>"), _tmpl$2 = /*#__PURE__*/ template("<h3 id=pwa-install-title>"), _tmpl$3 = /*#__PURE__*/ template("<p>"), _tmpl$4 = /*#__PURE__*/ template("<div role=dialog aria-modal=false aria-labelledby=pwa-install-title>");
 const DISMISS_DURATION = 604800000;
 const defaultTexts = {

package/dist/components/immersive-landing/index.d.ts

@@ -1,5 +1,5 @@
 import "./ImmersiveLanding.css";
-export { default } from "./ImmersiveLanding";
+export { default } from "./ImmersiveLanding.generated";
 export { useImmersiveLanding } from "./useImmersiveLanding";
 export { ImmersiveLandingContext, useImmersiveLandingContext } from "./ImmersiveLandingContext";
 export { CookieConsent } from "./components/CookieConsent";

package/dist/components/immersive-landing/index.js

@@ -1,5 +1,5 @@
 import "./ImmersiveLanding.css";
-export { default } from "./ImmersiveLanding.js";
+export { default } from "./ImmersiveLanding.generated.js";
 export { useImmersiveLanding } from "./useImmersiveLanding.js";
 export { ImmersiveLandingContext, useImmersiveLandingContext } from "./ImmersiveLandingContext.js";
 export { CookieConsent } from "./components/CookieConsent.js";

package/dist/components/input/Input.generated.js

@@ -0,0 +1,320 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Input.css";
+import { Show, createContext, createUniqueId, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Input.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<div><input>"), _tmpl$4 = /*#__PURE__*/ template("<label>"), _tmpl$5 = /*#__PURE__*/ template("<p>");
+const InputContext = createContext();
+const __solidLayoutInputRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "size",
+        "fullWidth",
+        "isDisabled",
+        "isInvalid",
+        "dataTheme"
+    ]);
+    const baseId = createUniqueId();
+    const size = ()=>local.size ?? "md";
+    const isDisabled = ()=>Boolean(local.isDisabled);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    return createComponent(InputContext.Provider, {
+        value: {
+            fieldId: ()=>`${baseId}-field`,
+            helperId: ()=>`${baseId}-helper`,
+            size,
+            isDisabled,
+            isInvalid,
+            fullWidth
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.base, fullWidth() && CLASSES.flag.fullWidthRoot, local.class, local.className)
+                }), {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "input-root"
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const InputRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputRoot,
+    embedded: true
+});
+const __solidLayoutInputField = (_stable, p)=>{
+    const ctx = useContext(InputContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "size",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "fullWidth",
+        "startIcon",
+        "endIcon",
+        "dataTheme",
+        "id",
+        "aria-invalid"
+    ]);
+    const size = ()=>local.size ?? ctx?.size() ?? "md";
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(ctx?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || Boolean(ctx?.isInvalid());
+    const fullWidth = ()=>Boolean(local.fullWidth) || Boolean(ctx?.fullWidth());
+    const inputId = ()=>local.id ?? ctx?.fieldId();
+    const ariaInvalid = ()=>local["aria-invalid"] ?? (isInvalid() ? true : void 0);
+    const controlClasses = ()=>twMerge(CLASSES.slot.control, CLASSES.size[size()], fullWidth() && CLASSES.flag.fullWidthControl, isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class, local.className);
+    return (()=>{
+        var _el$2 = _tmpl$3(), _el$4 = _el$2.firstChild;
+        spread(_el$2, mergeProps(()=>({
+                class: controlClasses()
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "input-control",
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-invalid"] () {
+                return isInvalid() ? "true" : "false";
+            }
+        }), false, true);
+        insert(_el$2, createComponent(Show, {
+            get when () {
+                return local.startIcon;
+            },
+            get children () {
+                var _el$3 = _tmpl$2();
+                spread(_el$3, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                    }), {
+                    "data-slot": "input-start-icon"
+                }), false, true);
+                insert(_el$3, ()=>local.startIcon);
+                return _el$3;
+            }
+        }), _el$4);
+        spread(_el$4, mergeProps(others, {
+            get id () {
+                return inputId();
+            }
+        }, ()=>({
+                class: CLASSES.slot.field
+            }), {
+            get disabled () {
+                return isDisabled();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["aria-invalid"] () {
+                return ariaInvalid();
+            },
+            "data-slot": "input-field"
+        }), false, false);
+        insert(_el$2, createComponent(Show, {
+            get when () {
+                return local.endIcon;
+            },
+            get children () {
+                var _el$5 = _tmpl$2();
+                spread(_el$5, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                    }), {
+                    "data-slot": "input-end-icon"
+                }), false, true);
+                insert(_el$5, ()=>local.endIcon);
+                return _el$5;
+            }
+        }), null);
+        return _el$2;
+    })();
+};
+const InputField = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputField,
+    embedded: true
+});
+const __solidLayoutInputLabel = (_stable, p)=>{
+    const ctx = useContext(InputContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "for",
+        "children"
+    ]);
+    return (()=>{
+        var _el$6 = _tmpl$4();
+        spread(_el$6, mergeProps(others, {
+            get ["for"] () {
+                return local.for ?? ctx?.fieldId();
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.label, local.class, local.className)
+            }), {
+            "data-slot": "input-label"
+        }), false, true);
+        insert(_el$6, ()=>local.children);
+        return _el$6;
+    })();
+};
+const InputLabel = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputLabel,
+    embedded: true
+});
+const __solidLayoutInputHelper = (_stable, p)=>{
+    const ctx = useContext(InputContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "invalid",
+        "id",
+        "children"
+    ]);
+    const invalid = ()=>Boolean(local.invalid) || Boolean(ctx?.isInvalid());
+    return (()=>{
+        var _el$7 = _tmpl$5();
+        spread(_el$7, mergeProps(others, {
+            get id () {
+                return local.id ?? ctx?.helperId();
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.helper, invalid() && CLASSES.flag.helperInvalid, local.class, local.className)
+            }), {
+            "data-slot": "input-helper"
+        }), false, true);
+        insert(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const InputHelper = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputHelper,
+    embedded: true
+});
+const __solidLayoutInputBase = (_stable, p)=>{
+    const generatedId = createUniqueId();
+    const [local, fieldProps] = splitProps(p, [
+        "id",
+        "size",
+        "fullWidth",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "label",
+        "helperText",
+        "errorMessage",
+        "class",
+        "className",
+        "aria-invalid",
+        "dataTheme"
+    ]);
+    const inputId = ()=>local.id ?? `${generatedId}-input`;
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || null != local.errorMessage;
+    const helperContent = ()=>local.errorMessage ?? local.helperText;
+    const hasHelper = ()=>null != helperContent();
+    const helperId = ()=>`${inputId()}-helper`;
+    return createComponent(InputRoot, {
+        get size () {
+            return local.size;
+        },
+        get fullWidth () {
+            return local.fullWidth ?? true;
+        },
+        get isDisabled () {
+            return isDisabled();
+        },
+        get isInvalid () {
+            return isInvalid();
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get children () {
+            return [
+                createComponent(Show, {
+                    get when () {
+                        return local.label;
+                    },
+                    get children () {
+                        return createComponent(InputLabel, {
+                            get children () {
+                                return local.label;
+                            }
+                        });
+                    }
+                }),
+                createComponent(InputField, mergeProps(fieldProps, {
+                    get id () {
+                        return inputId();
+                    },
+                    get size () {
+                        return local.size;
+                    },
+                    get isDisabled () {
+                        return isDisabled();
+                    },
+                    get isInvalid () {
+                        return isInvalid();
+                    },
+                    get ["aria-describedby"] () {
+                        return memo(()=>!!hasHelper())() ? helperId() : void 0;
+                    }
+                }, ()=>({
+                        class: local.class
+                    }), {
+                    get className () {
+                        return local.className;
+                    },
+                    get dataTheme () {
+                        return local.dataTheme;
+                    }
+                })),
+                createComponent(Show, {
+                    get when () {
+                        return hasHelper();
+                    },
+                    get children () {
+                        return createComponent(InputHelper, {
+                            get id () {
+                                return helperId();
+                            },
+                            get invalid () {
+                                return isInvalid();
+                            },
+                            get children () {
+                                return helperContent();
+                            }
+                        });
+                    }
+                })
+            ];
+        }
+    });
+};
+const InputBase = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputBase,
+    embedded: true
+});
+const Input = Object.assign(InputBase, {
+    Root: InputRoot,
+    Field: InputField,
+    Label: InputLabel,
+    Helper: InputHelper
+});
+const Input_generated = Input;
+export default Input_generated;

package/dist/components/input/Input.recipe.d.ts

@@ -0,0 +1,37 @@
+export declare const CLASSES: {
+    readonly base: "input-root";
+    readonly slot: {
+        readonly control: "input-control";
+        readonly field: "input-field";
+        readonly label: "input-label";
+        readonly helper: "input-helper";
+        readonly icon: "input__icon";
+        readonly iconStart: "input__icon--start";
+        readonly iconEnd: "input__icon--end";
+    };
+    readonly size: {
+        readonly sm: "input-control--sm";
+        readonly md: "input-control--md";
+        readonly lg: "input-control--lg";
+    };
+    readonly flag: {
+        readonly fullWidthRoot: "input-root--full-width";
+        readonly fullWidthControl: "input-control--full-width";
+        readonly invalid: "input-control--invalid";
+        readonly disabled: "input-control--disabled";
+        readonly helperInvalid: "input-helper--invalid";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "input";
+    readonly slots: {
+        readonly "input-control": {};
+        readonly "input-end-icon": {};
+        readonly "input-field": {};
+        readonly "input-helper": {};
+        readonly "input-label": {};
+        readonly "input-root": {};
+        readonly "input-start-icon": {};
+        readonly root: {};
+    };
+}>;