@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/alert/Alert.recipe.d.ts

@@ -1,28 +1,61 @@
-export declare const CLASSES: {
-    readonly base: "alert";
-    readonly slot: {
-        readonly indicator: "alert__indicator";
-        readonly content: "alert__content";
-        readonly title: "alert__title";
-        readonly description: "alert__description";
-    };
-    readonly status: {
-        readonly default: "alert--default";
-        readonly accent: "alert--accent";
-        readonly success: "alert--success";
-        readonly warning: "alert--warning";
-        readonly danger: "alert--danger";
-    };
-};
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+/**
+ * A alert reports a condition, so it takes `state` and nothing else.
+ *
+ * There is deliberately no separate colour axis: red is a consequence of
+ * `state="danger"`, not an independent choice, and `<Alert state="success"
+ * colour="red">` should be unsayable. The component was called `Alert`, which
+ * named it after one of its own states — `status` was passed at 29 of 29 call
+ * sites because "alert" was never a state it could default to.
+ */
+export declare const alert: import("solid-layouts").Recipe<{
     readonly component: "alert";
+    readonly element: "div";
     readonly slots: {
-        readonly "alert-content": {};
-        readonly "alert-default-icon": {};
-        readonly "alert-description": {};
-        readonly "alert-indicator": {};
-        readonly "alert-root": {};
-        readonly "alert-title": {};
-        readonly root: {};
+        readonly root: {
+            readonly base: "alert";
+        };
+        readonly indicator: {
+            readonly base: "alert__indicator";
+        };
+        readonly content: {
+            readonly base: "alert__content";
+        };
+        readonly title: {
+            readonly base: "alert__title";
+        };
+        readonly description: {
+            readonly base: "alert__description";
+        };
+        readonly dismiss: {
+            readonly base: "alert__dismiss";
+        };
+    };
+    readonly props: {
+        readonly flavor: {
+            readonly neutral: "alert--flavor-neutral";
+            readonly primary: "alert--flavor-primary";
+            readonly secondary: "alert--flavor-secondary";
+            readonly accent: "alert--flavor-accent";
+            readonly destructive: "alert--flavor-destructive";
+            readonly success: "alert--flavor-success";
+            readonly warning: "alert--flavor-warning";
+            readonly info: "alert--flavor-info";
+        };
+        readonly variant: {
+            readonly solid: "alert--solid";
+            readonly soft: "alert--soft";
+            readonly outline: "alert--outline";
+            readonly ghost: "alert--ghost";
+            readonly plain: "alert--plain";
+        };
+        readonly placement: {
+            readonly inline: "alert--inline";
+            readonly banner: "alert--banner";
+        };
+    };
+    readonly defaults: {
+        readonly flavor: "neutral";
+        readonly variant: "soft";
+        readonly placement: "inline";
     };
 }>;

package/dist/components/alert/Alert.recipe.js

@@ -1,72 +1,113 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "alert",
-    slot: {
-        indicator: "alert__indicator",
-        content: "alert__content",
-        title: "alert__title",
-        description: "alert__description"
-    },
-    status: {
-        default: "alert--default",
-        accent: "alert--accent",
-        success: "alert--success",
-        warning: "alert--warning",
-        danger: "alert--danger"
-    }
-};
-const componentRecipe = recipe({
+const Alert_recipe_alert = recipe({
     component: "alert",
+    element: "div",
     slots: {
-        "alert-content": {},
-        "alert-default-icon": {},
-        "alert-description": {},
-        "alert-indicator": {},
-        "alert-root": {},
-        "alert-title": {},
-        root: {}
+        root: {
+            base: "alert"
+        },
+        indicator: {
+            base: "alert__indicator"
+        },
+        content: {
+            base: "alert__content"
+        },
+        title: {
+            base: "alert__title"
+        },
+        description: {
+            base: "alert__description"
+        },
+        dismiss: {
+            base: "alert__dismiss"
+        }
+    },
+    props: {
+        flavor: {
+            neutral: "alert--flavor-neutral",
+            primary: "alert--flavor-primary",
+            secondary: "alert--flavor-secondary",
+            accent: "alert--flavor-accent",
+            destructive: "alert--flavor-destructive",
+            success: "alert--flavor-success",
+            warning: "alert--flavor-warning",
+            info: "alert--flavor-info"
+        },
+        variant: {
+            solid: "alert--solid",
+            soft: "alert--soft",
+            outline: "alert--outline",
+            ghost: "alert--ghost",
+            plain: "alert--plain"
+        },
+        placement: {
+            inline: "alert--inline",
+            banner: "alert--banner"
+        }
+    },
+    defaults: {
+        flavor: "neutral",
+        variant: "soft",
+        placement: "inline"
     },
     _layouts: {
         slots: {
-            "alert-content": {
-                base: "",
-                axes: {}
-            },
-            "alert-default-icon": {
-                base: "",
-                axes: {}
+            root: {
+                base: "alert",
+                axes: {
+                    flavor: {
+                        neutral: "alert--flavor-neutral",
+                        primary: "alert--flavor-primary",
+                        secondary: "alert--flavor-secondary",
+                        accent: "alert--flavor-accent",
+                        destructive: "alert--flavor-destructive",
+                        success: "alert--flavor-success",
+                        warning: "alert--flavor-warning",
+                        info: "alert--flavor-info"
+                    },
+                    variant: {
+                        solid: "alert--solid",
+                        soft: "alert--soft",
+                        outline: "alert--outline",
+                        ghost: "alert--ghost",
+                        plain: "alert--plain"
+                    },
+                    placement: {
+                        inline: "alert--inline",
+                        banner: "alert--banner"
+                    }
+                }
             },
-            "alert-description": {
-                base: "",
+            indicator: {
+                base: "alert__indicator",
                 axes: {}
             },
-            "alert-indicator": {
-                base: "",
+            content: {
+                base: "alert__content",
                 axes: {}
             },
-            "alert-root": {
-                base: "",
+            title: {
+                base: "alert__title",
                 axes: {}
             },
-            "alert-title": {
-                base: "",
+            description: {
+                base: "alert__description",
                 axes: {}
             },
-            root: {
-                base: "",
+            dismiss: {
+                base: "alert__dismiss",
                 axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            "alert-content": 0,
-            "alert-default-icon": 1,
-            "alert-description": 2,
-            "alert-indicator": 3,
-            "alert-root": 4,
-            "alert-title": 5,
-            root: 6
+            root: 4,
+            indicator: 3,
+            content: 0,
+            title: 5,
+            description: 1,
+            dismiss: 2
         }
     }
 });
-export { CLASSES, componentRecipe };
+export { Alert_recipe_alert as alert };

package/dist/components/alert/index.d.ts

@@ -1 +1,3 @@
-export { default, AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription, type AlertStatus, type AlertRootProps, type AlertIndicatorProps, type AlertContentProps, type AlertTitleProps, type AlertDescriptionProps, } from "./Alert.generated";
+export { AlertLayout as default, AlertLayout as Alert } from "./Alert.generated";
+export type { AlertProps, AlertPlacement } from "./Alert.generated";
+export { alert } from "./Alert.recipe";

package/dist/components/alert/index.js

@@ -1 +1,2 @@
-export { AlertContent, AlertDescription, AlertIndicator, AlertRoot, AlertTitle, default } from "./Alert.generated.js";
+export { AlertLayout as Alert, AlertLayout as default } from "./Alert.generated.js";
+export { alert } from "./Alert.recipe.js";

package/dist/components/auth-card/AuthCard.css

@@ -0,0 +1,44 @@
+@layer components {
+  .auth-card {
+    width: 100%;
+    max-width: 28rem;
+  }
+
+  .auth-card__body {
+    gap: 1.25rem;
+  }
+
+  .auth-card__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .auth-card__headings {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .auth-card__title {
+    font-size: 1.25rem;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+
+  .auth-card__description {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    opacity: 0.7;
+  }
+
+  .auth-card__branding {
+    flex-shrink: 0;
+  }
+
+  .auth-card__footer {
+    justify-content: flex-start;
+  }
+}

package/dist/components/auth-card/AuthCard.generated.d.ts

@@ -0,0 +1,12 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./AuthCard.css";
+import { type JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type AuthCardProps = UIBaseProps & {
+    title?: JSX.Element;
+    description?: JSX.Element;
+    children: JSX.Element;
+    footer?: JSX.Element;
+    brandingSlot?: JSX.Element;
+};
+export declare const AuthCardLayout: __LayoutComponent<AuthCardProps>;

package/dist/components/auth-card/{AuthCard.js → AuthCard.generated.js}

@@ -1,96 +1,83 @@
-import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
-import { Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./AuthCard.css";
+import { Show } from "solid-js";
 import card from "../card/index.js";
-var _tmpl$ = /*#__PURE__*/ template('<h2 class="text-xl font-semibold leading-tight">'), _tmpl$2 = /*#__PURE__*/ template('<p class="text-sm opacity-70">'), _tmpl$3 = /*#__PURE__*/ template("<div class=shrink-0>"), _tmpl$4 = /*#__PURE__*/ template('<div class="flex items-start justify-between gap-3"><div class="min-w-0 space-y-1">');
-const AuthCard = (props)=>{
-    const [local, others] = splitProps(props, [
-        "title",
-        "description",
-        "children",
-        "footer",
-        "brandingSlot",
-        "bodyClass",
-        "class",
-        "className",
-        "dataTheme"
-    ]);
-    return createComponent(card, mergeProps(others, {
-        variant: "shadow"
-    }, ()=>({
-            class: twMerge("w-full max-w-md", local.class, local.className)
-        }), {
-        get ["data-theme"] () {
-            return local.dataTheme;
-        },
-        "data-slot": "auth-card",
+import { authCard } from "./AuthCard.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<h2>"), _tmpl$2 = /*#__PURE__*/ template("<p>"), _tmpl$3 = /*#__PURE__*/ template("<div>"), _tmpl$4 = /*#__PURE__*/ template("<div><div>");
+const __solidLayoutAuthCardLayout = (_stable, p)=>createComponent(card, mergeProps(()=>_stable.slot.root, {
+        elevation: "md",
         get children () {
             return [
-                createComponent(card.Body, {
-                    get ["class"] () {
-                        return twMerge("gap-5", local.bodyClass);
-                    },
+                createComponent(card.Body, mergeProps(()=>_stable.slot.body, {
                     get children () {
                         return [
                             createComponent(Show, {
                                 get when () {
-                                    return local.title || local.description || local.brandingSlot;
+                                    return p.title || p.description || p.brandingSlot;
                                 },
                                 get children () {
                                     var _el$ = _tmpl$4(), _el$2 = _el$.firstChild;
+                                    spread(_el$, mergeProps(()=>_stable.slot.header), false, true);
+                                    spread(_el$2, mergeProps(()=>_stable.slot.headings), false, true);
                                     insert(_el$2, createComponent(Show, {
                                         get when () {
-                                            return local.title;
+                                            return p.title;
                                         },
                                         get children () {
                                             var _el$3 = _tmpl$();
-                                            insert(_el$3, ()=>local.title);
+                                            spread(_el$3, mergeProps(()=>_stable.slot.title), false, true);
+                                            insert(_el$3, ()=>p.title);
                                             return _el$3;
                                         }
                                     }), null);
                                     insert(_el$2, createComponent(Show, {
                                         get when () {
-                                            return local.description;
+                                            return p.description;
                                         },
                                         get children () {
                                             var _el$4 = _tmpl$2();
-                                            insert(_el$4, ()=>local.description);
+                                            spread(_el$4, mergeProps(()=>_stable.slot.description), false, true);
+                                            insert(_el$4, ()=>p.description);
                                             return _el$4;
                                         }
                                     }), null);
                                     insert(_el$, createComponent(Show, {
                                         get when () {
-                                            return local.brandingSlot;
+                                            return p.brandingSlot;
                                         },
                                         get children () {
                                             var _el$5 = _tmpl$3();
-                                            insert(_el$5, ()=>local.brandingSlot);
+                                            spread(_el$5, mergeProps(()=>_stable.slot.branding), false, true);
+                                            insert(_el$5, ()=>p.brandingSlot);
                                             return _el$5;
                                         }
                                     }), null);
                                     return _el$;
                                 }
                             }),
-                            memo(()=>local.children)
+                            memo(()=>_stable.children)
                         ];
                     }
-                }),
+                })),
                 createComponent(Show, {
                     get when () {
-                        return local.footer;
+                        return p.footer;
                     },
                     get children () {
-                        return createComponent(card.Footer, {
-                            class: "justify-start",
+                        return createComponent(card.Footer, mergeProps(()=>_stable.slot.footer, {
                             get children () {
-                                return local.footer;
+                                return p.footer;
                             }
-                        });
+                        }));
                     }
                 })
             ];
         }
     }));
-};
-const auth_card_AuthCard = AuthCard;
-export default auth_card_AuthCard;
+const AuthCardLayout = defineComponent({
+    recipe: authCard,
+    layout: __solidLayoutAuthCardLayout,
+    embedded: true
+});
+export { AuthCardLayout };

package/dist/components/auth-card/AuthCard.recipe.d.ts

@@ -0,0 +1,30 @@
+export declare const authCard: import("solid-layouts").Recipe<{
+    readonly component: "auth-card";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "auth-card";
+        };
+        readonly body: {
+            readonly base: "auth-card__body";
+        };
+        readonly header: {
+            readonly base: "auth-card__header";
+        };
+        readonly headings: {
+            readonly base: "auth-card__headings";
+        };
+        readonly title: {
+            readonly base: "auth-card__title";
+        };
+        readonly description: {
+            readonly base: "auth-card__description";
+        };
+        readonly branding: {
+            readonly base: "auth-card__branding";
+        };
+        readonly footer: {
+            readonly base: "auth-card__footer";
+        };
+    };
+}>;

package/dist/components/auth-card/AuthCard.recipe.js

@@ -0,0 +1,79 @@
+import { recipe } from "../../lib/layouts/index.js";
+const authCard = recipe({
+    component: "auth-card",
+    element: "div",
+    slots: {
+        root: {
+            base: "auth-card"
+        },
+        body: {
+            base: "auth-card__body"
+        },
+        header: {
+            base: "auth-card__header"
+        },
+        headings: {
+            base: "auth-card__headings"
+        },
+        title: {
+            base: "auth-card__title"
+        },
+        description: {
+            base: "auth-card__description"
+        },
+        branding: {
+            base: "auth-card__branding"
+        },
+        footer: {
+            base: "auth-card__footer"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "auth-card",
+                axes: {}
+            },
+            body: {
+                base: "auth-card__body",
+                axes: {}
+            },
+            header: {
+                base: "auth-card__header",
+                axes: {}
+            },
+            headings: {
+                base: "auth-card__headings",
+                axes: {}
+            },
+            title: {
+                base: "auth-card__title",
+                axes: {}
+            },
+            description: {
+                base: "auth-card__description",
+                axes: {}
+            },
+            branding: {
+                base: "auth-card__branding",
+                axes: {}
+            },
+            footer: {
+                base: "auth-card__footer",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 6,
+            body: 0,
+            header: 4,
+            headings: 5,
+            title: 7,
+            description: 2,
+            branding: 1,
+            footer: 3
+        }
+    }
+});
+export { authCard };

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

@@ -1 +1,2 @@
-export { default as AuthCard, type AuthCardProps } from "./AuthCard";
+export { AuthCardLayout as default, AuthCardLayout as AuthCard } from "./AuthCard.generated";
+export type { AuthCardProps } from "./AuthCard.generated";

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

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

package/dist/components/auth-field-group/AuthFieldGroup.css

@@ -0,0 +1,19 @@
+@layer components {
+  .auth-field-group {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .auth-field-group--sm {
+    gap: 0.75rem;
+  }
+
+  .auth-field-group--md {
+    gap: 1rem;
+  }
+
+  .auth-field-group--lg {
+    gap: 1.5rem;
+  }
+}

package/dist/components/auth-field-group/AuthFieldGroup.generated.d.ts

@@ -0,0 +1,10 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./AuthFieldGroup.css";
+import type { JSX } from "solid-js";
+import type { UIBaseProps } from "../vocabulary";
+export type AuthFieldGroupGap = "sm" | "md" | "lg";
+export type AuthFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
+    gap?: AuthFieldGroupGap;
+};
+export declare const AuthFieldGroupLayout: __LayoutComponent<AuthFieldGroupProps>;

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

@@ -0,0 +1,17 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./AuthFieldGroup.css";
+import { authFieldGroup } from "./AuthFieldGroup.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutAuthFieldGroupLayout = (_stable, p)=>(()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(()=>_stable.slot.root), false, true);
+        insert(_el$, ()=>_stable.children);
+        return _el$;
+    })();
+const AuthFieldGroupLayout = defineComponent({
+    recipe: authFieldGroup,
+    layout: __solidLayoutAuthFieldGroupLayout,
+    embedded: true
+});
+export { AuthFieldGroupLayout };

package/dist/components/auth-field-group/AuthFieldGroup.recipe.d.ts

@@ -0,0 +1,19 @@
+export declare const authFieldGroup: import("solid-layouts").Recipe<{
+    readonly component: "auth-field-group";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "auth-field-group";
+        };
+    };
+    readonly props: {
+        readonly gap: {
+            readonly sm: "auth-field-group--sm";
+            readonly md: "auth-field-group--md";
+            readonly lg: "auth-field-group--lg";
+        };
+    };
+    readonly defaults: {
+        readonly gap: "md";
+    };
+}>;