@pathscale/ui 2.4.0 → 2.6.0

package/dist/components/breadcrumb/Breadcrumb.recipe.d.ts

@@ -6,7 +6,7 @@ export declare const CLASSES: {
         readonly base: readonly ["breadcrumb__item", "breadcrumb__link", "breadcrumb__separator"];
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "breadcrumb";
     readonly slots: {
         readonly breadcrumb: {};

package/dist/components/button/Button.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Button.css";
-import { type JSX } from "solid-js";
+import { type JSX } from "@solidjs/web";
 import type { Flavor, IconSlotProps, Radius, Size, State, UIBaseProps, Variant, Width } from "../vocabulary";
 export type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "type"> & UIBaseProps & IconSlotProps & {
     variant?: Variant;
@@ -11,6 +11,22 @@ export type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "col
     width?: Width | "square";
     radius?: Radius;
     type?: "button" | "submit" | "reset";
+    /**
+     * Renders an anchor instead of a button, and navigates.
+     *
+     * A link that looks like a button is the single most common thing every
+     * app in the fleet was reaching outside the library for, because `Button`
+     * was a `<button>` and `Link`'s variants are underline treatments rather
+     * than fills. Both spellings existed and neither was this one, so call
+     * sites wrote the raw classes instead.
+     *
+     * It is a real anchor: middle-click, right-click, open-in-new-tab and
+     * "copy link address" all work, which is exactly what a `<button>` with an
+     * onClick handler takes away.
+     */
+    href?: string;
+    target?: JSX.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+    rel?: string;
     children?: JSX.Element;
 };
 export declare const ButtonLayout: __LayoutComponent<ButtonProps>;

package/dist/components/button/Button.generated.js

@@ -1,71 +1,86 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Dynamic, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Button.css";
 import { Show } from "solid-js";
 import { button as external_Button_recipe_js_button } from "./Button.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<button>");
+import { buttonElement, buttonHref, buttonRel } from "./Button.interactions.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutButtonLayout = (_stable, p)=>{
     const loading = ()=>"loading" === p.state;
     const inert = ()=>loading() || "disabled" === p.state || Boolean(p.disabled);
-    return (()=>{
-        var _el$ = _tmpl$2();
-        spread(_el$, mergeProps(()=>_stable.slot.root, {
-            get type () {
-                return p.type ?? "button";
-            },
-            get disabled () {
-                return inert();
-            },
-            get ["aria-disabled"] () {
-                return inert() ? "true" : "false";
-            },
-            get ["aria-busy"] () {
-                return loading() ? "true" : void 0;
-            },
-            get ["data-state"] () {
-                return p.state ?? "default";
-            },
-            get ["data-flavor"] () {
-                return p.flavor ?? "primary";
-            }
-        }), false, true);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return loading();
-            },
-            get children () {
-                var _el$2 = _tmpl$();
-                spread(_el$2, mergeProps(()=>_stable.slot.spinner, {
-                    "aria-hidden": "true"
-                }), false, false);
-                return _el$2;
-            }
-        }), null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return p.startIcon;
-            },
-            get children () {
-                var _el$3 = _tmpl$();
-                spread(_el$3, mergeProps(()=>_stable.slot.startIcon), false, true);
-                insert(_el$3, ()=>p.startIcon);
-                return _el$3;
-            }
-        }), null);
-        insert(_el$, ()=>_stable.children, null);
-        insert(_el$, createComponent(Show, {
-            get when () {
-                return p.endIcon;
-            },
-            get children () {
-                var _el$4 = _tmpl$();
-                spread(_el$4, mergeProps(()=>_stable.slot.endIcon), false, true);
-                insert(_el$4, ()=>p.endIcon);
-                return _el$4;
-            }
-        }), null);
-        return _el$;
-    })();
+    const element = ()=>buttonElement(p.href);
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return element();
+        }
+    }, ()=>_stable.slot.root, {
+        get type () {
+            return memo(()=>"a" === element())() ? void 0 : p.type ?? "button";
+        },
+        get href () {
+            return buttonHref(p.href, inert());
+        },
+        get target () {
+            return memo(()=>"a" === element())() ? p.target : void 0;
+        },
+        get rel () {
+            return memo(()=>"a" === element())() ? buttonRel(p.rel, p.target) : void 0;
+        },
+        get disabled () {
+            return memo(()=>"a" === element())() ? void 0 : inert();
+        },
+        get ["aria-disabled"] () {
+            return inert() ? "true" : "false";
+        },
+        get ["aria-busy"] () {
+            return loading() ? "true" : void 0;
+        },
+        get ["data-state"] () {
+            return p.state ?? "default";
+        },
+        get ["data-flavor"] () {
+            return p.flavor ?? "primary";
+        },
+        get children () {
+            return [
+                createComponent(Show, {
+                    get when () {
+                        return loading();
+                    },
+                    get children () {
+                        var _el$ = _tmpl$();
+                        spread(_el$, mergeProps(()=>_stable.slot.spinner, {
+                            "aria-hidden": "true"
+                        }), false);
+                        return _el$;
+                    }
+                }),
+                createComponent(Show, {
+                    get when () {
+                        return p.startIcon;
+                    },
+                    get children () {
+                        var _el$2 = _tmpl$();
+                        spread(_el$2, mergeProps(()=>_stable.slot.startIcon), true);
+                        insert(_el$2, ()=>p.startIcon);
+                        return _el$2;
+                    }
+                }),
+                memo(()=>_stable.children),
+                createComponent(Show, {
+                    get when () {
+                        return p.endIcon;
+                    },
+                    get children () {
+                        var _el$3 = _tmpl$();
+                        spread(_el$3, mergeProps(()=>_stable.slot.endIcon), true);
+                        insert(_el$3, ()=>p.endIcon);
+                        return _el$3;
+                    }
+                })
+            ];
+        }
+    }));
 };
 const ButtonLayout = defineComponent({
     recipe: external_Button_recipe_js_button,

package/dist/components/button/Button.interactions.d.ts

@@ -0,0 +1,28 @@
+/**
+ * What `href` decides, as three functions.
+ *
+ * A `.layout.tsx` binds free identifiers to props, so anything with a rule in
+ * it belongs beside the markup rather than inside it. These are also the parts
+ * worth testing, and the repository's tests are pure: there is no DOM in the
+ * suite, by choice.
+ */
+/** An anchor when there is somewhere to go, a button otherwise. */
+export declare const buttonElement: (href: string | undefined) => "a" | "button";
+/**
+ * The destination, unless the control is inert.
+ *
+ * There is no `disabled` on an anchor. Keeping the `href` and refusing the
+ * click leaves it focusable, activatable by Enter, and still offering "open in
+ * new tab" from the context menu - a disabled control that is not disabled.
+ * Removing the attribute is what makes it inert; `aria-disabled` is how it is
+ * announced.
+ */
+export declare const buttonHref: (href: string | false | undefined, inert: boolean) => string | undefined;
+/**
+ * `rel` for a link, defaulted for new tabs.
+ *
+ * A `target="_blank"` without `noopener` hands the opening document to the
+ * destination. Defaulted rather than forced, so a caller who means `me` or
+ * `nofollow` still gets it.
+ */
+export declare const buttonRel: (rel: string | false | undefined, target: string | false | undefined) => string | undefined;

package/dist/components/button/Button.interactions.js

@@ -0,0 +1,4 @@
+const buttonElement = (href)=>"string" == typeof href ? "a" : "button";
+const buttonHref = (href, inert)=>"string" != typeof href || inert ? void 0 : href;
+const buttonRel = (rel, target)=>(rel || void 0) ?? ("_blank" === target ? "noopener noreferrer" : void 0);
+export { buttonElement, buttonHref, buttonRel };

package/dist/components/button/Button.recipe.d.ts

@@ -8,7 +8,7 @@
  * flavor defaults to primary: <Button> is the call to action, which is what
  * the fleet's 215 primary call sites were already asking for.
  */
-export declare const button: import("solid-layouts").Recipe<{
+export declare const button: import("solid-layouts/solid-2").Recipe<{
     readonly component: "button";
     readonly element: "button";
     readonly slots: {

package/dist/components/button-group/ButtonGroup.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ButtonGroup.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Size, Variant, State, UIBaseProps } from "../vocabulary";
 export type ButtonGroupOrientation = "horizontal" | "vertical";
 export type ButtonGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {

package/dist/components/button-group/ButtonGroup.generated.js

@@ -1,55 +1,44 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ButtonGroup.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ButtonGroup.recipe.js";
 import { ButtonGroupContext } from "./context.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
 const __solidLayoutButtonGroupRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "orientation",
-        "size",
-        "variant",
-        "state",
-        "fullWidth",
-        "role"
-    ]);
-    const orientation = ()=>local.orientation ?? "horizontal";
-    return createComponent(ButtonGroupContext.Provider, {
+    const others = omit(p, "children", "class", "dataTheme", "style", "orientation", "size", "variant", "state", "fullWidth", "role");
+    const orientation = ()=>p.orientation ?? "horizontal";
+    return createComponent(ButtonGroupContext, {
         value: {
-            size: ()=>local.size,
-            variant: ()=>local.variant,
-            isDisabled: ()=>"disabled" === local.state,
-            fullWidth: ()=>local.fullWidth
+            size: ()=>p.size,
+            variant: ()=>p.variant,
+            isDisabled: ()=>"disabled" === p.state,
+            fullWidth: ()=>p.fullWidth
         },
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.orientation[orientation()], local.fullWidth && CLASSES.Root.flag.fullWidth, local.class)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.orientation[orientation()], p.fullWidth && CLASSES.Root.flag.fullWidth, p.class)
                 }), {
                 "data-slot": "button-group",
                 get ["data-orientation"] () {
                     return orientation();
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 },
                 get role () {
-                    return local.role ?? "group";
+                    return p.role ?? "group";
                 },
                 get ["aria-disabled"] () {
-                    return "disabled" === local.state ? "true" : void 0;
+                    return "disabled" === p.state ? "true" : void 0;
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -60,28 +49,22 @@ const ButtonGroupRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutButtonGroupSeparator = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps(others, {
-            "aria-hidden": "true"
-        }, ()=>({
-                class: twMerge(CLASSES.Separator.base, local.class)
-            }), {
-            "data-slot": "button-group-separator",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, false);
-        return _el$2;
-    })();
+    const others = omit(p, "class", "dataTheme", "style");
+    var _el$2 = _tmpl$2();
+    spread(_el$2, mergeProps(others, {
+        "aria-hidden": "true"
+    }, ()=>({
+            class: twMerge(CLASSES.Separator.base, p.class)
+        }), {
+        "data-slot": "button-group-separator",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), false);
+    return _el$2;
 };
 const ButtonGroupSeparator = defineComponent({
     recipe: componentRecipe,

package/dist/components/button-group/ButtonGroup.recipe.d.ts

@@ -13,7 +13,7 @@ export declare const CLASSES: {
         readonly base: "button-group__separator";
     };
 };
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "button-group";
     readonly slots: {
         readonly "button-group": {};

package/dist/components/button-group/context.d.ts

@@ -5,4 +5,4 @@ export type ButtonGroupContextValue = {
     isDisabled: () => boolean | undefined;
     fullWidth: () => boolean | undefined;
 };
-export declare const ButtonGroupContext: import("solid-js").Context<ButtonGroupContextValue | undefined>;
+export declare const ButtonGroupContext: import("solid-js").Context<ButtonGroupContextValue>;

package/dist/components/calendar/Calendar.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Calendar.css";
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type CalendarSelectionMode } from "../../hooks/date";
 import type { UIBaseProps, State } from "../vocabulary";
 export type CalendarWeekdayFormat = "narrow" | "short" | "long";