@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/auth-field-group/AuthFieldGroup.recipe.js

@@ -0,0 +1,39 @@
+import { recipe } from "../../lib/layouts/index.js";
+const authFieldGroup = recipe({
+    component: "auth-field-group",
+    element: "div",
+    slots: {
+        root: {
+            base: "auth-field-group"
+        }
+    },
+    props: {
+        gap: {
+            sm: "auth-field-group--sm",
+            md: "auth-field-group--md",
+            lg: "auth-field-group--lg"
+        }
+    },
+    defaults: {
+        gap: "md"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "auth-field-group",
+                axes: {
+                    gap: {
+                        sm: "auth-field-group--sm",
+                        md: "auth-field-group--md",
+                        lg: "auth-field-group--lg"
+                    }
+                }
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { authFieldGroup };

package/dist/components/auth-field-group/index.d.ts

@@ -1 +1,2 @@
-export { default as AuthFieldGroup, type AuthFieldGroupProps } from "./AuthFieldGroup";
+export { AuthFieldGroupLayout as default, AuthFieldGroupLayout as AuthFieldGroup, } from "./AuthFieldGroup.generated";
+export type { AuthFieldGroupProps, AuthFieldGroupGap } from "./AuthFieldGroup.generated";

package/dist/components/auth-field-group/index.js

@@ -1 +1 @@
-export { default as AuthFieldGroup } from "./AuthFieldGroup.js";
+export { AuthFieldGroupLayout as AuthFieldGroup, AuthFieldGroupLayout as default } from "./AuthFieldGroup.generated.js";

package/dist/components/auth-footer-links/AuthFooterLinks.css

@@ -0,0 +1,53 @@
+@layer components {
+  .auth-footer-links {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .auth-footer-links--left {
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  .auth-footer-links--center {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .auth-footer-links--right {
+    justify-content: flex-end;
+    text-align: right;
+  }
+
+  .auth-footer-links__link {
+    color: var(--color-primary);
+    text-underline-offset: 4px;
+    transition-property: color, text-decoration-color;
+    transition-duration: 150ms;
+  }
+
+  .auth-footer-links__link:hover {
+    color: var(--color-accent);
+    text-decoration-line: underline;
+  }
+
+  /* Presence-carrying selectors are avoided deliberately: the recipe reports
+     both directions, so `[data-disabled]` alone would also match "false". */
+  .auth-footer-links__link[data-disabled="true"] {
+    color: inherit;
+    opacity: 0.5;
+  }
+
+  a.auth-footer-links__link[data-disabled="true"] {
+    pointer-events: none;
+  }
+
+  button.auth-footer-links__link[data-disabled="true"] {
+    cursor: not-allowed;
+  }
+}

package/dist/components/auth-footer-links/AuthFooterLinks.generated.d.ts

@@ -0,0 +1,17 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./AuthFooterLinks.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type AuthFooterLinkItem = {
+    key: string;
+    label: JSX.Element | string;
+    href?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+export type AuthFooterLinksAlign = "left" | "center" | "right";
+export type AuthFooterLinksProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    items: AuthFooterLinkItem[];
+    align?: AuthFooterLinksAlign;
+};
+export declare const AuthFooterLinksLayout: __LayoutComponent<AuthFooterLinksProps>;

package/dist/components/auth-footer-links/AuthFooterLinks.generated.js

@@ -0,0 +1,58 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./AuthFooterLinks.css";
+import { For } from "solid-js";
+import { authFooterLinks } from "./AuthFooterLinks.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<a>"), _tmpl$3 = /*#__PURE__*/ template("<button>");
+const __solidLayoutAuthFooterLinksLayout = (_stable, p)=>(()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(()=>_stable.slot.root), false, true);
+        insert(_el$, createComponent(For, {
+            get each () {
+                return p.items;
+            },
+            children: (item)=>item.href ? (()=>{
+                    var _el$2 = _tmpl$2();
+                    spread(_el$2, mergeProps(()=>_stable.slot.link, {
+                        get href () {
+                            return item.href;
+                        },
+                        get ["data-disabled"] () {
+                            return item.disabled ? "true" : "false";
+                        },
+                        get ["aria-disabled"] () {
+                            return item.disabled ? "true" : void 0;
+                        },
+                        onClick: (event)=>{
+                            if (item.disabled) return void event.preventDefault();
+                            item.onClick?.();
+                        }
+                    }), false, true);
+                    insert(_el$2, ()=>item.label);
+                    return _el$2;
+                })() : (()=>{
+                    var _el$3 = _tmpl$3();
+                    spread(_el$3, mergeProps(()=>_stable.slot.link, {
+                        type: "button",
+                        get ["data-disabled"] () {
+                            return item.disabled ? "true" : "false";
+                        },
+                        get disabled () {
+                            return item.disabled;
+                        },
+                        get onClick () {
+                            return item.onClick;
+                        }
+                    }), false, true);
+                    insert(_el$3, ()=>item.label);
+                    return _el$3;
+                })()
+        }));
+        return _el$;
+    })();
+const AuthFooterLinksLayout = defineComponent({
+    recipe: authFooterLinks,
+    layout: __solidLayoutAuthFooterLinksLayout,
+    embedded: true
+});
+export { AuthFooterLinksLayout };

package/dist/components/auth-footer-links/AuthFooterLinks.recipe.d.ts

@@ -0,0 +1,22 @@
+export declare const authFooterLinks: import("solid-layouts").Recipe<{
+    readonly component: "auth-footer-links";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "auth-footer-links";
+        };
+        readonly link: {
+            readonly base: "auth-footer-links__link";
+        };
+    };
+    readonly props: {
+        readonly align: {
+            readonly left: "auth-footer-links--left";
+            readonly center: "auth-footer-links--center";
+            readonly right: "auth-footer-links--right";
+        };
+    };
+    readonly defaults: {
+        readonly align: "center";
+    };
+}>;

package/dist/components/auth-footer-links/AuthFooterLinks.recipe.js

@@ -0,0 +1,47 @@
+import { recipe } from "../../lib/layouts/index.js";
+const authFooterLinks = recipe({
+    component: "auth-footer-links",
+    element: "div",
+    slots: {
+        root: {
+            base: "auth-footer-links"
+        },
+        link: {
+            base: "auth-footer-links__link"
+        }
+    },
+    props: {
+        align: {
+            left: "auth-footer-links--left",
+            center: "auth-footer-links--center",
+            right: "auth-footer-links--right"
+        }
+    },
+    defaults: {
+        align: "center"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "auth-footer-links",
+                axes: {
+                    align: {
+                        left: "auth-footer-links--left",
+                        center: "auth-footer-links--center",
+                        right: "auth-footer-links--right"
+                    }
+                }
+            },
+            link: {
+                base: "auth-footer-links__link",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 1,
+            link: 0
+        }
+    }
+});
+export { authFooterLinks };

package/dist/components/auth-footer-links/index.d.ts

@@ -1 +1,2 @@
-export { default as AuthFooterLinks, type AuthFooterLinksProps, type AuthFooterLinkItem, } from "./AuthFooterLinks";
+export { AuthFooterLinksLayout as default, AuthFooterLinksLayout as AuthFooterLinks, } from "./AuthFooterLinks.generated";
+export type { AuthFooterLinksProps, AuthFooterLinkItem, AuthFooterLinksAlign, } from "./AuthFooterLinks.generated";

package/dist/components/auth-footer-links/index.js

@@ -1 +1 @@
-export { default as AuthFooterLinks } from "./AuthFooterLinks.js";
+export { AuthFooterLinksLayout as AuthFooterLinks, AuthFooterLinksLayout as default } from "./AuthFooterLinks.generated.js";

package/dist/components/auth-message/AuthMessage.css

@@ -0,0 +1,6 @@
+@layer components {
+  .auth-message {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}

package/dist/components/auth-message/AuthMessage.generated.d.ts

@@ -0,0 +1,9 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./AuthMessage.css";
+import { type JSX } from "solid-js";
+import type { Flavor, UIBaseProps } from "../vocabulary";
+export type AuthMessageProps = UIBaseProps & {
+    message?: JSX.Element | string | null;
+    flavor?: Flavor;
+};
+export declare const AuthMessageLayout: __LayoutComponent<AuthMessageProps>;

package/dist/components/auth-message/AuthMessage.generated.js

@@ -0,0 +1,27 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./AuthMessage.css";
+import { Show } from "solid-js";
+import alert_0 from "../alert/index.js";
+import { authMessage } from "./AuthMessage.recipe.js";
+const __solidLayoutAuthMessageLayout = (_stable, p)=>createComponent(Show, {
+        get when () {
+            return memo(()=>null != p.message)() && "" !== p.message;
+        },
+        get children () {
+            return createComponent(alert_0, mergeProps(()=>_stable.slot.root, {
+                get flavor () {
+                    return p.flavor ?? "destructive";
+                },
+                get children () {
+                    return p.message;
+                }
+            }));
+        }
+    });
+const AuthMessageLayout = defineComponent({
+    recipe: authMessage,
+    layout: __solidLayoutAuthMessageLayout,
+    embedded: true
+});
+export { AuthMessageLayout };

package/dist/components/auth-message/AuthMessage.recipe.d.ts

@@ -0,0 +1,9 @@
+export declare const authMessage: import("solid-layouts").Recipe<{
+    readonly component: "auth-message";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "auth-message";
+        };
+    };
+}>;

package/dist/components/auth-message/AuthMessage.recipe.js

@@ -0,0 +1,23 @@
+import { recipe } from "../../lib/layouts/index.js";
+const authMessage = recipe({
+    component: "auth-message",
+    element: "div",
+    slots: {
+        root: {
+            base: "auth-message"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "auth-message",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { authMessage };

package/dist/components/auth-message/index.d.ts

@@ -0,0 +1,2 @@
+export { AuthMessageLayout as default, AuthMessageLayout as AuthMessage } from "./AuthMessage.generated";
+export type { AuthMessageProps } from "./AuthMessage.generated";

package/dist/components/auth-message/index.js

@@ -0,0 +1 @@
+export { AuthMessageLayout as AuthMessage, AuthMessageLayout as default } from "./AuthMessage.generated.js";

package/dist/components/auth-powered-by/AuthPoweredBy.css

@@ -0,0 +1,61 @@
+@layer components {
+  .auth-powered-by {
+    display: flex;
+    width: 100%;
+  }
+
+  .auth-powered-by--left {
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  .auth-powered-by--center {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .auth-powered-by--right {
+    justify-content: flex-end;
+    text-align: right;
+  }
+
+  .auth-powered-by--subtle {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    opacity: 0.7;
+  }
+
+  .auth-powered-by--card {
+    border: var(--border, 1px) solid var(--color-base-300);
+    border-radius: 0.375rem;
+    padding: 0.25rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .auth-powered-by--inline {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .auth-powered-by__link {
+    text-underline-offset: 4px;
+    transition-property: color, text-decoration-color;
+    transition-duration: 150ms;
+  }
+
+  .auth-powered-by__link:hover {
+    text-decoration-line: underline;
+  }
+
+  .auth-powered-by__content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .auth-powered-by__logo {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+}

package/dist/components/auth-powered-by/AuthPoweredBy.generated.d.ts

@@ -0,0 +1,14 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./AuthPoweredBy.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type AuthPoweredByAlign = "left" | "center" | "right";
+export type AuthPoweredByVariant = "subtle" | "card" | "inline";
+export type AuthPoweredByProps = UIBaseProps & {
+    label?: string;
+    logo?: JSX.Element;
+    href?: string;
+    align?: AuthPoweredByAlign;
+    variant?: AuthPoweredByVariant;
+};
+export declare const AuthPoweredByLayout: __LayoutComponent<AuthPoweredByProps>;

package/dist/components/auth-powered-by/AuthPoweredBy.generated.js

@@ -0,0 +1,41 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./AuthPoweredBy.css";
+import { Show } from "solid-js";
+import { authPoweredBy } from "./AuthPoweredBy.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><a><span><span>");
+const DEFAULT_LABEL = "Secure Auth by Honey";
+const DEFAULT_HREF = "https://honey.id/";
+const __solidLayoutAuthPoweredByLayout = (_stable, p)=>(()=>{
+        var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.firstChild;
+        spread(_el$, mergeProps(()=>_stable.slot.root), false, true);
+        spread(_el$2, mergeProps(()=>_stable.slot.link, {
+            get href () {
+                return p.href ?? DEFAULT_HREF;
+            },
+            target: "_blank",
+            rel: "noopener noreferrer"
+        }), false, true);
+        spread(_el$3, mergeProps(()=>_stable.slot.content), false, true);
+        insert(_el$3, createComponent(Show, {
+            get when () {
+                return p.logo;
+            },
+            get children () {
+                var _el$4 = _tmpl$();
+                spread(_el$4, mergeProps(()=>_stable.slot.logo, {
+                    "aria-hidden": "true"
+                }), false, true);
+                insert(_el$4, ()=>p.logo);
+                return _el$4;
+            }
+        }), _el$5);
+        insert(_el$5, ()=>p.label ?? DEFAULT_LABEL);
+        return _el$;
+    })();
+const AuthPoweredByLayout = defineComponent({
+    recipe: authPoweredBy,
+    layout: __solidLayoutAuthPoweredByLayout,
+    embedded: true
+});
+export { AuthPoweredByLayout };

package/dist/components/auth-powered-by/AuthPoweredBy.recipe.d.ts

@@ -0,0 +1,34 @@
+export declare const authPoweredBy: import("solid-layouts").Recipe<{
+    readonly component: "auth-powered-by";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "auth-powered-by";
+        };
+        readonly link: {
+            readonly base: "auth-powered-by__link";
+        };
+        readonly content: {
+            readonly base: "auth-powered-by__content";
+        };
+        readonly logo: {
+            readonly base: "auth-powered-by__logo";
+        };
+    };
+    readonly props: {
+        readonly align: {
+            readonly left: "auth-powered-by--left";
+            readonly center: "auth-powered-by--center";
+            readonly right: "auth-powered-by--right";
+        };
+        readonly variant: {
+            readonly subtle: "auth-powered-by--subtle";
+            readonly card: "auth-powered-by--card";
+            readonly inline: "auth-powered-by--inline";
+        };
+    };
+    readonly defaults: {
+        readonly align: "center";
+        readonly variant: "subtle";
+    };
+}>;

package/dist/components/auth-powered-by/AuthPoweredBy.recipe.js

@@ -0,0 +1,74 @@
+import { recipe } from "../../lib/layouts/index.js";
+const authPoweredBy = recipe({
+    component: "auth-powered-by",
+    element: "div",
+    slots: {
+        root: {
+            base: "auth-powered-by"
+        },
+        link: {
+            base: "auth-powered-by__link"
+        },
+        content: {
+            base: "auth-powered-by__content"
+        },
+        logo: {
+            base: "auth-powered-by__logo"
+        }
+    },
+    props: {
+        align: {
+            left: "auth-powered-by--left",
+            center: "auth-powered-by--center",
+            right: "auth-powered-by--right"
+        },
+        variant: {
+            subtle: "auth-powered-by--subtle",
+            card: "auth-powered-by--card",
+            inline: "auth-powered-by--inline"
+        }
+    },
+    defaults: {
+        align: "center",
+        variant: "subtle"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "auth-powered-by",
+                axes: {
+                    align: {
+                        left: "auth-powered-by--left",
+                        center: "auth-powered-by--center",
+                        right: "auth-powered-by--right"
+                    },
+                    variant: {
+                        subtle: "auth-powered-by--subtle",
+                        card: "auth-powered-by--card",
+                        inline: "auth-powered-by--inline"
+                    }
+                }
+            },
+            link: {
+                base: "auth-powered-by__link",
+                axes: {}
+            },
+            content: {
+                base: "auth-powered-by__content",
+                axes: {}
+            },
+            logo: {
+                base: "auth-powered-by__logo",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 3,
+            link: 1,
+            content: 0,
+            logo: 2
+        }
+    }
+});
+export { authPoweredBy };

package/dist/components/auth-powered-by/index.d.ts

@@ -1 +1,2 @@
-export { default as AuthPoweredBy, type AuthPoweredByProps } from "./AuthPoweredBy";
+export { AuthPoweredByLayout as default, AuthPoweredByLayout as AuthPoweredBy, } from "./AuthPoweredBy.generated";
+export type { AuthPoweredByProps, AuthPoweredByAlign, AuthPoweredByVariant, } from "./AuthPoweredBy.generated";

package/dist/components/auth-powered-by/index.js

@@ -1 +1 @@
-export { default as AuthPoweredBy } from "./AuthPoweredBy.js";
+export { AuthPoweredByLayout as AuthPoweredBy, AuthPoweredByLayout as default } from "./AuthPoweredBy.generated.js";

package/dist/components/auth-submit-button/AuthSubmitButton.css

@@ -0,0 +1,5 @@
+@layer components {
+  .auth-submit-button {
+    margin-block-start: 0;
+  }
+}

package/dist/components/auth-submit-button/AuthSubmitButton.generated.d.ts

@@ -0,0 +1,14 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./AuthSubmitButton.css";
+import type { JSX } from "solid-js";
+import type { Flavor, Size, State, Variant, Width, UIBaseProps } from "../vocabulary";
+export type AuthSubmitButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled" | "type"> & UIBaseProps & {
+    children: JSX.Element;
+    type?: "button" | "submit" | "reset";
+    variant?: Variant;
+    flavor?: Flavor;
+    state?: State;
+    size?: Size;
+    width?: Width;
+};
+export declare const AuthSubmitButtonLayout: __LayoutComponent<AuthSubmitButtonProps>;

package/dist/components/auth-submit-button/AuthSubmitButton.generated.js

@@ -0,0 +1,34 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./AuthSubmitButton.css";
+import button_0 from "../button/index.js";
+import { authSubmitButton } from "./AuthSubmitButton.recipe.js";
+const __solidLayoutAuthSubmitButtonLayout = (_stable, p)=>createComponent(button_0, mergeProps(()=>_stable.slot.root, {
+        get type () {
+            return p.type ?? "submit";
+        },
+        get variant () {
+            return p.variant ?? "solid";
+        },
+        get flavor () {
+            return p.flavor ?? "primary";
+        },
+        get size () {
+            return p.size;
+        },
+        get width () {
+            return p.width ?? "full";
+        },
+        get state () {
+            return p.state ?? "default";
+        },
+        get children () {
+            return _stable.children;
+        }
+    }));
+const AuthSubmitButtonLayout = defineComponent({
+    recipe: authSubmitButton,
+    layout: __solidLayoutAuthSubmitButtonLayout,
+    embedded: true
+});
+export { AuthSubmitButtonLayout };

package/dist/components/auth-submit-button/AuthSubmitButton.recipe.d.ts

@@ -0,0 +1,9 @@
+export declare const authSubmitButton: import("solid-layouts").Recipe<{
+    readonly component: "auth-submit-button";
+    readonly element: "button";
+    readonly slots: {
+        readonly root: {
+            readonly base: "auth-submit-button";
+        };
+    };
+}>;