@pathscale/ui 2.1.1 → 2.2.0

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

@@ -1,20 +1,16 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Button.css";
 import { type JSX } from "solid-js";
-import { CLASSES } from "./Button.recipe";
-export type ButtonVariant = keyof typeof CLASSES.variant;
-export type ButtonSize = keyof typeof CLASSES.size;
-type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    isIconOnly?: boolean;
-    fullWidth?: boolean;
-    isDisabled?: boolean;
-    isPending?: boolean;
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
-    className?: string;
+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;
+    flavor?: Flavor;
+    state?: State;
+    size?: Size;
+    /** `square` is icon-only: as wide as it is tall, at whatever size it is. */
+    width?: Width | "square";
+    radius?: Radius;
+    type?: "button" | "submit" | "reset";
+    children?: JSX.Element;
 };
-declare const Button: __LayoutComponent<ButtonProps>;
-export default Button;
-export type { ButtonProps };
+export declare const ButtonLayout: __LayoutComponent<ButtonProps>;

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

@@ -1,62 +1,41 @@
 import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./Button.css";
-import { Show, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { ButtonGroupContext } from "../button-group/context.js";
-import { CLASSES, componentRecipe } from "./Button.recipe.js";
+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>");
-const __solidLayoutButton = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "variant",
-        "size",
-        "isIconOnly",
-        "fullWidth",
-        "isDisabled",
-        "isPending",
-        "startIcon",
-        "endIcon",
-        "type"
-    ]);
-    const buttonGroupContext = useContext(ButtonGroupContext);
-    const variant = ()=>local.variant ?? buttonGroupContext?.variant() ?? "primary";
-    const size = ()=>local.size ?? buttonGroupContext?.size() ?? "md";
-    const fullWidth = ()=>local.fullWidth ?? buttonGroupContext?.fullWidth();
-    const disabled = ()=>Boolean(local.isDisabled ?? buttonGroupContext?.isDisabled()) || Boolean(local.isPending);
-    const classes = ()=>twMerge(CLASSES.base, CLASSES.variant[variant()], CLASSES.size[size()], local.isIconOnly && CLASSES.flag.isIconOnly, fullWidth() && CLASSES.flag.fullWidth, local.class, local.className);
+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(others, {
+        spread(_el$, mergeProps(()=>_stable.slot.root, {
             get type () {
-                return local.type ?? "button";
-            }
-        }, ()=>({
-                class: classes()
-            }), {
-            "data-slot": "button",
-            get ["data-pending"] () {
-                return local.isPending ? "true" : "false";
+                return p.type ?? "button";
             },
             get disabled () {
-                return disabled();
+                return inert();
             },
             get ["aria-disabled"] () {
-                return disabled() ? "true" : "false";
+                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 local.isPending;
+                return loading();
             },
             get children () {
                 var _el$2 = _tmpl$();
-                spread(_el$2, mergeProps(()=>({
-                        class: CLASSES.slot.spinner
-                    }), {
-                    "data-slot": "spinner",
+                spread(_el$2, mergeProps(()=>_stable.slot.spinner, {
                     "aria-hidden": "true"
                 }), false, false);
                 return _el$2;
@@ -64,42 +43,33 @@ const __solidLayoutButton = (_stable, p)=>{
         }), null);
         insert(_el$, createComponent(Show, {
             get when () {
-                return local.startIcon;
+                return p.startIcon;
             },
             get children () {
                 var _el$3 = _tmpl$();
-                spread(_el$3, mergeProps(()=>({
-                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                    }), {
-                    "data-slot": "button-start-icon"
-                }), false, true);
-                insert(_el$3, ()=>local.startIcon);
+                spread(_el$3, mergeProps(()=>_stable.slot.startIcon), false, true);
+                insert(_el$3, ()=>p.startIcon);
                 return _el$3;
             }
         }), null);
-        insert(_el$, ()=>local.children, null);
+        insert(_el$, ()=>_stable.children, null);
         insert(_el$, createComponent(Show, {
             get when () {
-                return local.endIcon;
+                return p.endIcon;
             },
             get children () {
                 var _el$4 = _tmpl$();
-                spread(_el$4, mergeProps(()=>({
-                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                    }), {
-                    "data-slot": "button-end-icon"
-                }), false, true);
-                insert(_el$4, ()=>local.endIcon);
+                spread(_el$4, mergeProps(()=>_stable.slot.endIcon), false, true);
+                insert(_el$4, ()=>p.endIcon);
                 return _el$4;
             }
         }), null);
         return _el$;
     })();
 };
-const Button = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutButton,
+const ButtonLayout = defineComponent({
+    recipe: external_Button_recipe_js_button,
+    layout: __solidLayoutButtonLayout,
     embedded: true
 });
-const Button_generated = Button;
-export default Button_generated;
+export { ButtonLayout };

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

@@ -1,37 +1,84 @@
-export declare const CLASSES: {
-    readonly base: "button";
-    readonly variant: {
-        readonly primary: "button--primary";
-        readonly secondary: "button--secondary";
-        readonly tertiary: "button--tertiary";
-        readonly outline: "button--outline";
-        readonly ghost: "button--ghost";
-        readonly danger: "button--danger";
-        readonly "danger-soft": "button--danger-soft";
-    };
-    readonly size: {
-        readonly sm: "button--sm";
-        readonly md: "button--md";
-        readonly lg: "button--lg";
-    };
-    readonly flag: {
-        readonly isIconOnly: "button--icon-only";
-        readonly fullWidth: "button--full-width";
-    };
-    readonly slot: {
-        readonly spinner: "button__spinner";
-        readonly icon: "button__icon";
-        readonly iconStart: "button__icon--start";
-        readonly iconEnd: "button__icon--end";
-    };
-};
-export declare const componentRecipe: import("solid-layouts").Recipe<{
+/**
+ * Flavor or state picks the accent; variant decides how it is spent.
+ *
+ * Flavor and state hold disjoint values and both write `--button-accent`,
+ * with state declared second so it wins on source order. A condition
+ * outranks a preference, so a destructive primary button reads destructive.
+ *
+ * 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<{
     readonly component: "button";
+    readonly element: "button";
     readonly slots: {
-        readonly button: {};
-        readonly "button-end-icon": {};
-        readonly "button-start-icon": {};
-        readonly root: {};
-        readonly spinner: {};
+        readonly root: {
+            readonly base: "button";
+        };
+        readonly spinner: {
+            readonly base: "button__spinner";
+        };
+        readonly startIcon: {
+            readonly base: "button__icon button__icon--start";
+        };
+        readonly endIcon: {
+            readonly base: "button__icon button__icon--end";
+        };
+    };
+    readonly props: {
+        readonly variant: {
+            readonly solid: "button--solid";
+            readonly soft: "button--soft";
+            readonly outline: "button--outline";
+            readonly ghost: "button--ghost";
+            readonly plain: "button--plain";
+        };
+        readonly flavor: {
+            readonly neutral: "button--flavor-neutral";
+            readonly primary: "button--flavor-primary";
+            readonly secondary: "button--flavor-secondary";
+            readonly accent: "button--flavor-accent";
+            readonly destructive: "button--flavor-destructive";
+            readonly success: "button--flavor-success";
+            readonly warning: "button--flavor-warning";
+            readonly info: "button--flavor-info";
+        };
+        readonly state: {
+            readonly default: "";
+            readonly loading: "button--state-loading";
+            readonly error: "button--state-error";
+            readonly invalid: "button--state-invalid";
+            readonly disabled: "button--state-disabled";
+            readonly hidden: "button--state-hidden";
+        };
+        readonly size: {
+            readonly xs: "button--xs";
+            readonly sm: "button--sm";
+            readonly md: "button--md";
+            readonly lg: "button--lg";
+            readonly xl: "button--xl";
+        };
+        readonly width: {
+            readonly auto: "";
+            readonly full: "button--width-full";
+            readonly fit: "button--width-fit";
+            readonly screen: "button--width-screen";
+            readonly square: "button--width-square";
+        };
+        readonly radius: {
+            readonly none: "button--radius-none";
+            readonly sm: "button--radius-sm";
+            readonly md: "button--radius-md";
+            readonly lg: "button--radius-lg";
+            readonly full: "button--radius-full";
+        };
+    };
+    readonly defaults: {
+        readonly variant: "solid";
+        readonly flavor: "primary";
+        readonly state: "default";
+        readonly size: "sm";
+        readonly width: "auto";
+        readonly radius: "full";
     };
 }>;

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

@@ -1,71 +1,150 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "button",
-    variant: {
-        primary: "button--primary",
-        secondary: "button--secondary",
-        tertiary: "button--tertiary",
-        outline: "button--outline",
-        ghost: "button--ghost",
-        danger: "button--danger",
-        "danger-soft": "button--danger-soft"
-    },
-    size: {
-        sm: "button--sm",
-        md: "button--md",
-        lg: "button--lg"
-    },
-    flag: {
-        isIconOnly: "button--icon-only",
-        fullWidth: "button--full-width"
-    },
-    slot: {
-        spinner: "button__spinner",
-        icon: "button__icon",
-        iconStart: "button__icon--start",
-        iconEnd: "button__icon--end"
-    }
-};
-const componentRecipe = recipe({
+const Button_recipe_button = recipe({
     component: "button",
+    element: "button",
     slots: {
-        button: {},
-        "button-end-icon": {},
-        "button-start-icon": {},
-        root: {},
-        spinner: {}
+        root: {
+            base: "button"
+        },
+        spinner: {
+            base: "button__spinner"
+        },
+        startIcon: {
+            base: "button__icon button__icon--start"
+        },
+        endIcon: {
+            base: "button__icon button__icon--end"
+        }
+    },
+    props: {
+        variant: {
+            solid: "button--solid",
+            soft: "button--soft",
+            outline: "button--outline",
+            ghost: "button--ghost",
+            plain: "button--plain"
+        },
+        flavor: {
+            neutral: "button--flavor-neutral",
+            primary: "button--flavor-primary",
+            secondary: "button--flavor-secondary",
+            accent: "button--flavor-accent",
+            destructive: "button--flavor-destructive",
+            success: "button--flavor-success",
+            warning: "button--flavor-warning",
+            info: "button--flavor-info"
+        },
+        state: {
+            default: "",
+            loading: "button--state-loading",
+            error: "button--state-error",
+            invalid: "button--state-invalid",
+            disabled: "button--state-disabled",
+            hidden: "button--state-hidden"
+        },
+        size: {
+            xs: "button--xs",
+            sm: "button--sm",
+            md: "button--md",
+            lg: "button--lg",
+            xl: "button--xl"
+        },
+        width: {
+            auto: "",
+            full: "button--width-full",
+            fit: "button--width-fit",
+            screen: "button--width-screen",
+            square: "button--width-square"
+        },
+        radius: {
+            none: "button--radius-none",
+            sm: "button--radius-sm",
+            md: "button--radius-md",
+            lg: "button--radius-lg",
+            full: "button--radius-full"
+        }
+    },
+    defaults: {
+        variant: "solid",
+        flavor: "primary",
+        state: "default",
+        size: "sm",
+        width: "auto",
+        radius: "full"
     },
     _layouts: {
         slots: {
-            button: {
-                base: "",
-                axes: {}
-            },
-            "button-end-icon": {
-                base: "",
-                axes: {}
+            root: {
+                base: "button",
+                axes: {
+                    variant: {
+                        solid: "button--solid",
+                        soft: "button--soft",
+                        outline: "button--outline",
+                        ghost: "button--ghost",
+                        plain: "button--plain"
+                    },
+                    flavor: {
+                        neutral: "button--flavor-neutral",
+                        primary: "button--flavor-primary",
+                        secondary: "button--flavor-secondary",
+                        accent: "button--flavor-accent",
+                        destructive: "button--flavor-destructive",
+                        success: "button--flavor-success",
+                        warning: "button--flavor-warning",
+                        info: "button--flavor-info"
+                    },
+                    state: {
+                        default: "",
+                        loading: "button--state-loading",
+                        error: "button--state-error",
+                        invalid: "button--state-invalid",
+                        disabled: "button--state-disabled",
+                        hidden: "button--state-hidden"
+                    },
+                    size: {
+                        xs: "button--xs",
+                        sm: "button--sm",
+                        md: "button--md",
+                        lg: "button--lg",
+                        xl: "button--xl"
+                    },
+                    width: {
+                        auto: "",
+                        full: "button--width-full",
+                        fit: "button--width-fit",
+                        screen: "button--width-screen",
+                        square: "button--width-square"
+                    },
+                    radius: {
+                        none: "button--radius-none",
+                        sm: "button--radius-sm",
+                        md: "button--radius-md",
+                        lg: "button--radius-lg",
+                        full: "button--radius-full"
+                    }
+                }
             },
-            "button-start-icon": {
-                base: "",
+            spinner: {
+                base: "button__spinner",
                 axes: {}
             },
-            root: {
-                base: "",
+            startIcon: {
+                base: "button__icon button__icon--start",
                 axes: {}
             },
-            spinner: {
-                base: "",
+            endIcon: {
+                base: "button__icon button__icon--end",
                 axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            button: 0,
-            "button-end-icon": 1,
-            "button-start-icon": 2,
-            root: 3,
-            spinner: 4
+            root: 1,
+            spinner: 2,
+            startIcon: 3,
+            endIcon: 0
         }
     }
 });
-export { CLASSES, componentRecipe };
+export { Button_recipe_button as button };

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

@@ -1,2 +1,3 @@
-export { default } from "./Button.generated";
-export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.generated";
+export { ButtonLayout as default, ButtonLayout as Button } from "./Button.generated";
+export type { ButtonProps } from "./Button.generated";
+export { button } from "./Button.recipe";

package/dist/components/button/index.js

@@ -1 +1,2 @@
-export { default } from "./Button.generated.js";
+export { ButtonLayout as Button, ButtonLayout as default } from "./Button.generated.js";
+export { button } from "./Button.recipe.js";

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

@@ -1,18 +1,17 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ButtonGroup.css";
 import { type JSX } from "solid-js";
-import type { ButtonSize, ButtonVariant } from "../button";
-import type { IComponentBaseProps } from "../types";
+import type { Size, Variant, State, UIBaseProps } from "../vocabulary";
 export type ButtonGroupOrientation = "horizontal" | "vertical";
-export type ButtonGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type ButtonGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children?: JSX.Element;
     orientation?: ButtonGroupOrientation;
-    size?: ButtonSize;
-    variant?: ButtonVariant;
-    isDisabled?: boolean;
+    size?: Size;
+    variant?: Variant;
+    state?: State;
     fullWidth?: boolean;
 };
-export type ButtonGroupSeparatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps;
+export type ButtonGroupSeparatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & UIBaseProps;
 declare const ButtonGroupRoot: __LayoutComponent<ButtonGroupRootProps>;
 declare const ButtonGroupSeparator: __LayoutComponent<ButtonGroupSeparatorProps>;
 declare const ButtonGroup: __LayoutComponent<ButtonGroupRootProps> & {

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

@@ -10,13 +10,12 @@ const __solidLayoutButtonGroupRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "orientation",
         "size",
         "variant",
-        "isDisabled",
+        "state",
         "fullWidth",
         "role"
     ]);
@@ -25,13 +24,13 @@ const __solidLayoutButtonGroupRoot = (_stable, p)=>{
         value: {
             size: ()=>local.size,
             variant: ()=>local.variant,
-            isDisabled: ()=>local.isDisabled,
+            isDisabled: ()=>"disabled" === local.state,
             fullWidth: ()=>local.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, local.className)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.orientation[orientation()], local.fullWidth && CLASSES.Root.flag.fullWidth, local.class)
                 }), {
                 "data-slot": "button-group",
                 get ["data-orientation"] () {
@@ -47,7 +46,7 @@ const __solidLayoutButtonGroupRoot = (_stable, p)=>{
                     return local.role ?? "group";
                 },
                 get ["aria-disabled"] () {
-                    return local.isDisabled ? "true" : void 0;
+                    return "disabled" === local.state ? "true" : void 0;
                 }
             }), false, true);
             insert(_el$, ()=>local.children);
@@ -63,7 +62,6 @@ const ButtonGroupRoot = defineComponent({
 const __solidLayoutButtonGroupSeparator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -72,7 +70,7 @@ const __solidLayoutButtonGroupSeparator = (_stable, p)=>{
         spread(_el$2, mergeProps(others, {
             "aria-hidden": "true"
         }, ()=>({
-                class: twMerge(CLASSES.Separator.base, local.class, local.className)
+                class: twMerge(CLASSES.Separator.base, local.class)
             }), {
             "data-slot": "button-group-separator",
             get ["data-theme"] () {

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

@@ -1,7 +1,7 @@
-import type { ButtonSize, ButtonVariant } from "../button";
+import type { Size, Variant } from "../vocabulary";
 export type ButtonGroupContextValue = {
-    size: () => ButtonSize | undefined;
-    variant: () => ButtonVariant | undefined;
+    size: () => Size | undefined;
+    variant: () => Variant | undefined;
     isDisabled: () => boolean | undefined;
     fullWidth: () => boolean | undefined;
 };

package/dist/components/calendar/Calendar.css

@@ -39,7 +39,7 @@
     width: 1.5rem;
     height: 1.5rem;
     border: 0;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background: transparent;
     color: var(--color-accent);
     cursor: var(--cursor-interactive, pointer);
@@ -65,8 +65,8 @@
 
   .calendar__nav-button:focus-visible,
   .calendar__nav-button[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   .calendar__nav-button:disabled,
@@ -127,7 +127,7 @@
     height: 2rem;
     margin: 0 auto;
     border: 0;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background: transparent;
     color: var(--color-base-content);
     cursor: var(--cursor-interactive, pointer);
@@ -151,8 +151,8 @@
   .calendar__cell:focus-visible,
   .calendar__cell--focused,
   .calendar__cell[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   .calendar__cell--today {
@@ -178,7 +178,7 @@
   .calendar__cell--range-end {
     background-color: var(--color-accent);
     color: var(--color-accent-foreground);
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
   }
 
   .calendar__cell--range-start .calendar__day,
@@ -199,7 +199,7 @@
   }
 
   .calendar__cell--range-start.calendar__cell--range-end {
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
   }
 
   .calendar__cell:active:not(:disabled),