@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/card/Card.recipe.d.ts

@@ -1,34 +1,120 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "card";
+/**
+ * Card absorbs Surface and GlassPanel.
+ *
+ * The old single `variant` conflated three unrelated things, which is why a
+ * separate `shadow` prop grew beside it (17 sites of `shadow="xl"` against 26
+ * of `variant="shadow"`). They are split so each axis means one thing:
+ *
+ *   variant    the fill treatment, shared with every other component
+ *   elevation  how far off the page it sits
+ *   material   what it is made of
+ *
+ * Fleet mapping: bordered=62 -> variant outline, shadow=26 -> elevation,
+ * flat=6 -> variant plain, and GlassPanel's 50 sites -> material glass.
+ *
+ * GlassPanel also carried a collapsible header, chevron and content machinery.
+ * Not one call site in 13 apps used any of it — only size (49), tone (7),
+ * highlight (6) and interactive (1) — so it is dropped rather than ported.
+ */
+export declare const card: import("solid-layouts").Recipe<{
+    readonly component: "card";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "card";
+        };
+    };
+    readonly props: {
         readonly variant: {
-            readonly default: "card--default";
-            readonly flat: "card--flat";
-            readonly bordered: "card--bordered";
-            readonly shadow: "card--shadow";
+            readonly solid: "card--solid";
+            readonly soft: "card--soft";
+            readonly outline: "card--outline";
+            readonly ghost: "card--ghost";
+            readonly plain: "card--plain";
+        };
+        readonly material: {
+            readonly solid: "card--material-solid";
+            readonly glass: "card--material-glass";
+        };
+        readonly elevation: {
+            readonly none: "card--elevation-none";
+            readonly sm: "card--elevation-sm";
+            readonly md: "card--elevation-md";
+            readonly lg: "card--elevation-lg";
+        };
+        readonly flavor: {
+            readonly neutral: "card--flavor-neutral";
+            readonly primary: "card--flavor-primary";
+            readonly secondary: "card--flavor-secondary";
+            readonly accent: "card--flavor-accent";
+        };
+        readonly state: {
+            readonly info: "card--state-info";
+            readonly success: "card--state-success";
+            readonly warning: "card--state-warning";
+            readonly danger: "card--state-danger";
+        };
+        readonly padding: {
+            readonly none: "card--padding-none";
+            readonly xs: "card--padding-xs";
+            readonly sm: "card--padding-sm";
+            readonly md: "card--padding-md";
+            readonly lg: "card--padding-lg";
+            readonly xl: "card--padding-xl";
+        };
+        readonly radius: {
+            readonly none: "card--radius-none";
+            readonly sm: "card--radius-sm";
+            readonly md: "card--radius-md";
+            readonly lg: "card--radius-lg";
+            readonly full: "card--radius-full";
         };
-        readonly flag: {
-            readonly isHoverable: "card--hoverable";
-            readonly isPressable: "card--pressable";
+        readonly isInteractive: {
+            readonly true: "card--interactive";
+            readonly false: "";
         };
     };
-    readonly Header: {
-        readonly base: "card__header";
+    readonly defaults: {
+        readonly variant: "plain";
+        readonly material: "solid";
+        readonly elevation: "none";
+        readonly flavor: "neutral";
+        readonly padding: "md";
+        readonly radius: "lg";
     };
-    readonly Body: {
-        readonly base: "card__body";
+}>;
+/**
+ * The compound parts carry their own recipes rather than sharing the root's.
+ *
+ * A Layout must render every slot its recipe declares, so one shared recipe
+ * would force each part to render all four. Their padding still comes from the
+ * root, through descendant selectors keyed on `card--padding-*`, so the parts
+ * stay in step without needing the root's props.
+ */
+export declare const cardHeader: import("solid-layouts").Recipe<{
+    readonly component: "card-header";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "card__header";
+        };
     };
-    readonly Footer: {
-        readonly base: "card__footer";
+}>;
+export declare const cardBody: import("solid-layouts").Recipe<{
+    readonly component: "card-body";
+    readonly element: "div";
+    readonly slots: {
+        readonly root: {
+            readonly base: "card__body";
+        };
     };
-};
-export declare const componentRecipe: import("solid-layouts").Recipe<{
-    readonly component: "card";
+}>;
+export declare const cardFooter: import("solid-layouts").Recipe<{
+    readonly component: "card-footer";
+    readonly element: "div";
     readonly slots: {
-        readonly card: {};
-        readonly "card-body": {};
-        readonly "card-footer": {};
-        readonly "card-header": {};
-        readonly root: {};
+        readonly root: {
+            readonly base: "card__footer";
+        };
     };
 }>;

package/dist/components/card/Card.recipe.js

@@ -1,68 +1,193 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    Root: {
-        base: "card",
+const card = recipe({
+    component: "card",
+    element: "div",
+    slots: {
+        root: {
+            base: "card"
+        }
+    },
+    props: {
         variant: {
-            default: "card--default",
-            flat: "card--flat",
-            bordered: "card--bordered",
-            shadow: "card--shadow"
+            solid: "card--solid",
+            soft: "card--soft",
+            outline: "card--outline",
+            ghost: "card--ghost",
+            plain: "card--plain"
+        },
+        material: {
+            solid: "card--material-solid",
+            glass: "card--material-glass"
+        },
+        elevation: {
+            none: "card--elevation-none",
+            sm: "card--elevation-sm",
+            md: "card--elevation-md",
+            lg: "card--elevation-lg"
+        },
+        flavor: {
+            neutral: "card--flavor-neutral",
+            primary: "card--flavor-primary",
+            secondary: "card--flavor-secondary",
+            accent: "card--flavor-accent"
         },
-        flag: {
-            isHoverable: "card--hoverable",
-            isPressable: "card--pressable"
+        state: {
+            info: "card--state-info",
+            success: "card--state-success",
+            warning: "card--state-warning",
+            danger: "card--state-danger"
+        },
+        padding: {
+            none: "card--padding-none",
+            xs: "card--padding-xs",
+            sm: "card--padding-sm",
+            md: "card--padding-md",
+            lg: "card--padding-lg",
+            xl: "card--padding-xl"
+        },
+        radius: {
+            none: "card--radius-none",
+            sm: "card--radius-sm",
+            md: "card--radius-md",
+            lg: "card--radius-lg",
+            full: "card--radius-full"
+        },
+        isInteractive: {
+            true: "card--interactive",
+            false: ""
         }
     },
-    Header: {
-        base: "card__header"
+    defaults: {
+        variant: "plain",
+        material: "solid",
+        elevation: "none",
+        flavor: "neutral",
+        padding: "md",
+        radius: "lg"
     },
-    Body: {
-        base: "card__body"
-    },
-    Footer: {
-        base: "card__footer"
+    _layouts: {
+        slots: {
+            root: {
+                base: "card",
+                axes: {
+                    variant: {
+                        solid: "card--solid",
+                        soft: "card--soft",
+                        outline: "card--outline",
+                        ghost: "card--ghost",
+                        plain: "card--plain"
+                    },
+                    material: {
+                        solid: "card--material-solid",
+                        glass: "card--material-glass"
+                    },
+                    elevation: {
+                        none: "card--elevation-none",
+                        sm: "card--elevation-sm",
+                        md: "card--elevation-md",
+                        lg: "card--elevation-lg"
+                    },
+                    flavor: {
+                        neutral: "card--flavor-neutral",
+                        primary: "card--flavor-primary",
+                        secondary: "card--flavor-secondary",
+                        accent: "card--flavor-accent"
+                    },
+                    state: {
+                        info: "card--state-info",
+                        success: "card--state-success",
+                        warning: "card--state-warning",
+                        danger: "card--state-danger"
+                    },
+                    padding: {
+                        none: "card--padding-none",
+                        xs: "card--padding-xs",
+                        sm: "card--padding-sm",
+                        md: "card--padding-md",
+                        lg: "card--padding-lg",
+                        xl: "card--padding-xl"
+                    },
+                    radius: {
+                        none: "card--radius-none",
+                        sm: "card--radius-sm",
+                        md: "card--radius-md",
+                        lg: "card--radius-lg",
+                        full: "card--radius-full"
+                    },
+                    isInteractive: {
+                        true: "card--interactive",
+                        false: ""
+                    }
+                }
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
     }
-};
-const componentRecipe = recipe({
-    component: "card",
+});
+const cardHeader = recipe({
+    component: "card-header",
+    element: "div",
     slots: {
-        card: {},
-        "card-body": {},
-        "card-footer": {},
-        "card-header": {},
-        root: {}
+        root: {
+            base: "card__header"
+        }
     },
     _layouts: {
         slots: {
-            card: {
-                base: "",
-                axes: {}
-            },
-            "card-body": {
-                base: "",
-                axes: {}
-            },
-            "card-footer": {
-                base: "",
+            root: {
+                base: "card__header",
                 axes: {}
-            },
-            "card-header": {
-                base: "",
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 3
+        }
+    }
+});
+const cardBody = recipe({
+    component: "card-body",
+    element: "div",
+    slots: {
+        root: {
+            base: "card__body"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "card__body",
                 axes: {}
-            },
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 1
+        }
+    }
+});
+const cardFooter = recipe({
+    component: "card-footer",
+    element: "div",
+    slots: {
+        root: {
+            base: "card__footer"
+        }
+    },
+    _layouts: {
+        slots: {
             root: {
-                base: "",
+                base: "card__footer",
                 axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            card: 0,
-            "card-body": 1,
-            "card-footer": 2,
-            "card-header": 3,
-            root: 4
+            root: 2
         }
     }
 });
-export { CLASSES, componentRecipe };
+export { card, cardBody, cardFooter, cardHeader };

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

@@ -1 +1,16 @@
-export { default, Card, CardRoot, CardHeader, CardBody, CardFooter, type CardProps, type CardVariant, type CardRootProps, type CardHeaderProps, type CardBodyProps, type CardFooterProps, } from "./Card.generated";
+import { CardHeaderLayout, CardBodyLayout, CardFooterLayout } from "./Card.generated";
+/**
+ * `Card.Body` is used at 92 call sites across 7 apps, so the compound statics
+ * are reattached here. The parts carry their own recipes, which is why this
+ * cannot happen inside the Layout template.
+ */
+declare const Card: import("solid-js").Component<import("./Card.generated").CardProps> & {
+    Root: import("solid-js").Component<import("./Card.generated").CardProps>;
+    Header: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
+    Body: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
+    Content: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
+    Footer: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
+};
+export { Card as default, Card, CardHeaderLayout as CardHeader, CardBodyLayout as CardBody, CardFooterLayout as CardFooter };
+export type { CardProps, CardSectionProps, CardMaterial, CardElevation } from "./Card.generated";
+export { card, cardHeader, cardBody, cardFooter } from "./Card.recipe";

package/dist/components/card/index.js

@@ -1 +1,11 @@
-export { Card, CardBody, CardFooter, CardHeader, CardRoot, default } from "./Card.generated.js";
+import { CardBodyLayout, CardFooterLayout, CardHeaderLayout, CardLayout } from "./Card.generated.js";
+const Card = Object.assign(CardLayout, {
+    Root: CardLayout,
+    Header: CardHeaderLayout,
+    Body: CardBodyLayout,
+    Content: CardBodyLayout,
+    Footer: CardFooterLayout
+});
+export { card, cardBody, cardFooter, cardHeader } from "./Card.recipe.js";
+export default Card;
+export { Card, CardBodyLayout as CardBody, CardFooterLayout as CardFooter, CardHeaderLayout as CardHeader };

package/dist/components/chatbubble/ChatBubble.css

@@ -122,43 +122,43 @@
     transform: rotateY(180deg);
   }
 
-  .chatbubble__message--neutral {
+  .chatbubble__message--flavor-neutral {
     background-color: var(--color-base-300);
     color: var(--color-base-content);
   }
 
-  .chatbubble__message--primary {
+  .chatbubble__message--flavor-primary {
     background-color: var(--color-primary);
     color: var(--color-primary-content);
   }
 
-  .chatbubble__message--secondary {
+  .chatbubble__message--flavor-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
   }
 
-  .chatbubble__message--accent {
+  .chatbubble__message--flavor-accent {
     background-color: var(--color-accent);
     color: var(--color-accent-content);
   }
 
-  .chatbubble__message--info {
-    background-color: var(--color-info);
-    color: var(--color-info-content);
+  .chatbubble__message--flavor-destructive {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
   }
 
-  .chatbubble__message--success {
+  .chatbubble__message--flavor-success {
     background-color: var(--color-success);
     color: var(--color-success-content);
   }
 
-  .chatbubble__message--warning {
+  .chatbubble__message--flavor-warning {
     background-color: var(--color-warning);
     color: var(--color-warning-content);
   }
 
-  .chatbubble__message--error {
-    background-color: var(--color-error);
-    color: var(--color-error-content);
+  .chatbubble__message--flavor-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
   }
 }

package/dist/components/chatbubble/ChatBubble.generated.d.ts

@@ -1,8 +1,8 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ChatBubble.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ChatBubbleProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
+import type { UIBaseProps } from "../vocabulary";
+export type ChatBubbleProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     end?: boolean;
 };
 declare const _default: __LayoutComponent<ChatBubbleProps> & {

package/dist/components/chatbubble/ChatBubble.generated.js

@@ -15,10 +15,9 @@ const __solidLayoutChatBubble = (_stable, p)=>{
         "end",
         "dataTheme",
         "class",
-        "className",
         "style"
     ]);
-    const classes = createMemo(()=>twMerge(CLASSES.base, local.end ? CLASSES.align.end : CLASSES.align.start, local.class, local.className));
+    const classes = createMemo(()=>twMerge(CLASSES.base, local.end ? CLASSES.align.end : CLASSES.align.start, local.class));
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, {

package/dist/components/chatbubble/ChatBubble.recipe.d.ts

@@ -11,15 +11,15 @@ export declare const CLASSES: {
         readonly message: "chatbubble__message";
         readonly time: "chatbubble__time";
     };
-    readonly color: {
-        readonly neutral: "chatbubble__message--neutral";
-        readonly primary: "chatbubble__message--primary";
-        readonly secondary: "chatbubble__message--secondary";
-        readonly accent: "chatbubble__message--accent";
-        readonly info: "chatbubble__message--info";
-        readonly success: "chatbubble__message--success";
-        readonly warning: "chatbubble__message--warning";
-        readonly error: "chatbubble__message--error";
+    readonly flavor: {
+        readonly neutral: "chatbubble__message--flavor-neutral";
+        readonly primary: "chatbubble__message--flavor-primary";
+        readonly secondary: "chatbubble__message--flavor-secondary";
+        readonly accent: "chatbubble__message--flavor-accent";
+        readonly destructive: "chatbubble__message--flavor-destructive";
+        readonly success: "chatbubble__message--flavor-success";
+        readonly warning: "chatbubble__message--flavor-warning";
+        readonly info: "chatbubble__message--flavor-info";
     };
 };
 export declare const componentRecipe: import("solid-layouts").Recipe<{

package/dist/components/chatbubble/ChatBubble.recipe.js

@@ -12,15 +12,15 @@ const CLASSES = {
         message: "chatbubble__message",
         time: "chatbubble__time"
     },
-    color: {
-        neutral: "chatbubble__message--neutral",
-        primary: "chatbubble__message--primary",
-        secondary: "chatbubble__message--secondary",
-        accent: "chatbubble__message--accent",
-        info: "chatbubble__message--info",
-        success: "chatbubble__message--success",
-        warning: "chatbubble__message--warning",
-        error: "chatbubble__message--error"
+    flavor: {
+        neutral: "chatbubble__message--flavor-neutral",
+        primary: "chatbubble__message--flavor-primary",
+        secondary: "chatbubble__message--flavor-secondary",
+        accent: "chatbubble__message--flavor-accent",
+        destructive: "chatbubble__message--flavor-destructive",
+        success: "chatbubble__message--flavor-success",
+        warning: "chatbubble__message--flavor-warning",
+        info: "chatbubble__message--flavor-info"
     }
 };
 const componentRecipe = recipe({

package/dist/components/chatbubble/ChatBubbleAvatar.generated.d.ts

@@ -1,10 +1,10 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import type { AvatarRootProps } from "../avatar";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type ChatBubbleAvatarProps = {
     src?: string;
     alt?: string;
     fallback?: string;
-} & Omit<AvatarRootProps, "children"> & IComponentBaseProps;
+} & Omit<AvatarRootProps, "children"> & UIBaseProps;
 declare const ChatBubbleAvatar: __LayoutComponent<ChatBubbleAvatarProps>;
 export default ChatBubbleAvatar;

package/dist/components/chatbubble/ChatBubbleAvatar.generated.js

@@ -7,14 +7,14 @@ const __solidLayoutChatBubbleAvatar = (_stable, p)=>createComponent(avatar, merg
         get size () {
             return p.size ?? "sm";
         },
-        get color () {
-            return p.color;
+        get flavor () {
+            return p.flavor;
         },
         get variant () {
             return p.variant;
         }
     }, ()=>({
-            class: twMerge(CLASSES.slot.avatar, p.class, p.className)
+            class: twMerge(CLASSES.slot.avatar, p.class)
         }), {
         get dataTheme () {
             return p.dataTheme;

package/dist/components/chatbubble/ChatBubbleFooter.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ChatBubbleFooterProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+import type { UIBaseProps } from "../vocabulary";
+export type ChatBubbleFooterProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const ChatBubbleFooter: __LayoutComponent<ChatBubbleFooterProps>;
 export default ChatBubbleFooter;

package/dist/components/chatbubble/ChatBubbleFooter.generated.js

@@ -6,13 +6,12 @@ import { CLASSES, componentRecipe } from "./ChatBubble.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutChatBubbleFooter = (_stable, p)=>{
     const [local, others] = splitProps(p, [
-        "class",
-        "className"
+        "class"
     ]);
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.footer, local.class, local.className)
+                class: twMerge(CLASSES.slot.footer, local.class)
             })), false, false);
         return _el$;
     })();

package/dist/components/chatbubble/ChatBubbleHeader.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ChatBubbleHeaderProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
+import type { UIBaseProps } from "../vocabulary";
+export type ChatBubbleHeaderProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps;
 declare const ChatBubbleHeader: __LayoutComponent<ChatBubbleHeaderProps>;
 export default ChatBubbleHeader;

package/dist/components/chatbubble/ChatBubbleHeader.generated.js

@@ -6,13 +6,12 @@ import { CLASSES, componentRecipe } from "./ChatBubble.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutChatBubbleHeader = (_stable, p)=>{
     const [local, others] = splitProps(p, [
-        "class",
-        "className"
+        "class"
     ]);
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.header, local.class, local.className)
+                class: twMerge(CLASSES.slot.header, local.class)
             })), false, false);
         return _el$;
     })();

package/dist/components/chatbubble/ChatBubbleMessage.generated.d.ts

@@ -1,8 +1,8 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type ChatBubbleMessageProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
-    color?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";
+import type { UIBaseProps, Flavor } from "../vocabulary";
+export type ChatBubbleMessageProps = JSX.HTMLAttributes<HTMLDivElement> & UIBaseProps & {
+    flavor?: Flavor;
 };
 declare const ChatBubbleMessage: __LayoutComponent<ChatBubbleMessageProps>;
 export default ChatBubbleMessage;