@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/avatar/index.js

@@ -1 +1 @@
-export { AvatarFallback, AvatarImage, AvatarRoot, default } from "./Avatar.js";
+export { AvatarFallback, AvatarImage, AvatarRoot, default } from "./Avatar.generated.js";

package/dist/components/badge/Badge.generated.d.ts

@@ -0,0 +1,27 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import { type JSX } from "solid-js";
+import "./Badge.css";
+interface BadgeAnchorProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+    class?: string;
+    children: JSX.Element;
+}
+declare const BadgeAnchor: __LayoutComponent<BadgeAnchorProps>;
+type BadgeColor = "default" | "accent" | "success" | "warning" | "danger";
+type BadgeVariant = "primary" | "secondary" | "soft";
+type BadgeSize = "sm" | "md" | "lg";
+type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+interface BadgeRootProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> {
+    class?: string;
+    children?: JSX.Element;
+    color?: BadgeColor;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    placement?: BadgePlacement;
+}
+declare const BadgeRoot: __LayoutComponent<BadgeRootProps>;
+interface BadgeLabelProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+    class?: string;
+}
+declare const BadgeLabel: __LayoutComponent<BadgeLabelProps>;
+export { BadgeRoot, BadgeLabel, BadgeAnchor };
+export type { BadgeRootProps, BadgeLabelProps, BadgeAnchorProps };

package/dist/components/badge/Badge.generated.js

@@ -0,0 +1,90 @@
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { clsx } from "clsx";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import "./Badge.css";
+import { CLASSES, componentRecipe } from "./Badge.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
+const __solidLayoutBadgeAnchor = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.anchor, local.class)
+            }), {
+            "data-slot": "badge-anchor"
+        }), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const BadgeAnchor = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutBadgeAnchor,
+    embedded: true
+});
+const __solidLayoutBadgeRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "color",
+        "variant",
+        "size",
+        "placement"
+    ]);
+    const classes = ()=>{
+        const size = local.size ?? "md";
+        const color = local.color ?? "default";
+        const variant = local.variant ?? "primary";
+        const placement = local.placement ?? "top-right";
+        return twMerge(clsx(CLASSES.base, CLASSES.size[size], CLASSES.color[color], CLASSES.variant[variant], CLASSES.placement[placement], local.class));
+    };
+    const badgeChildren = ()=>{
+        const c = local.children;
+        if ("string" == typeof c || "number" == typeof c) return createComponent(BadgeLabel, {
+            children: c
+        });
+        return c;
+    };
+    return (()=>{
+        var _el$2 = _tmpl$();
+        spread(_el$2, mergeProps(others, ()=>({
+                class: classes()
+            }), {
+            "data-slot": "badge"
+        }), false, true);
+        insert(_el$2, badgeChildren);
+        return _el$2;
+    })();
+};
+const BadgeRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutBadgeRoot,
+    embedded: true
+});
+const __solidLayoutBadgeLabel = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$();
+        spread(_el$3, mergeProps(()=>({
+                class: twMerge(CLASSES.slot.label, local.class)
+            }), {
+            "data-slot": "badge-label"
+        }, others), false, true);
+        insert(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const BadgeLabel = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutBadgeLabel,
+    embedded: true
+});
+export { BadgeAnchor, BadgeLabel, BadgeRoot };

package/dist/components/badge/Badge.recipe.d.ts

@@ -0,0 +1,39 @@
+export declare const CLASSES: {
+    readonly base: "badge";
+    readonly slot: {
+        readonly anchor: "badge-anchor";
+        readonly label: "badge__label";
+    };
+    readonly size: {
+        readonly sm: "badge--sm";
+        readonly md: "badge--md";
+        readonly lg: "badge--lg";
+    };
+    readonly color: {
+        readonly default: "badge--default";
+        readonly accent: "badge--accent";
+        readonly success: "badge--success";
+        readonly warning: "badge--warning";
+        readonly danger: "badge--danger";
+    };
+    readonly variant: {
+        readonly primary: "badge--primary";
+        readonly secondary: "badge--secondary";
+        readonly soft: "badge--soft";
+    };
+    readonly placement: {
+        readonly "top-right": "badge--top-right";
+        readonly "top-left": "badge--top-left";
+        readonly "bottom-right": "badge--bottom-right";
+        readonly "bottom-left": "badge--bottom-left";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "badge";
+    readonly slots: {
+        readonly badge: {};
+        readonly "badge-anchor": {};
+        readonly "badge-label": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/badge/Badge.recipe.js

@@ -0,0 +1,68 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "badge",
+    slot: {
+        anchor: "badge-anchor",
+        label: "badge__label"
+    },
+    size: {
+        sm: "badge--sm",
+        md: "badge--md",
+        lg: "badge--lg"
+    },
+    color: {
+        default: "badge--default",
+        accent: "badge--accent",
+        success: "badge--success",
+        warning: "badge--warning",
+        danger: "badge--danger"
+    },
+    variant: {
+        primary: "badge--primary",
+        secondary: "badge--secondary",
+        soft: "badge--soft"
+    },
+    placement: {
+        "top-right": "badge--top-right",
+        "top-left": "badge--top-left",
+        "bottom-right": "badge--bottom-right",
+        "bottom-left": "badge--bottom-left"
+    }
+};
+const componentRecipe = recipe({
+    component: "badge",
+    slots: {
+        badge: {},
+        "badge-anchor": {},
+        "badge-label": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            badge: {
+                base: "",
+                axes: {}
+            },
+            "badge-anchor": {
+                base: "",
+                axes: {}
+            },
+            "badge-label": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            badge: 0,
+            "badge-anchor": 1,
+            "badge-label": 2,
+            root: 3
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,9 +1,9 @@
-import { BadgeAnchor, BadgeLabel, BadgeRoot } from "./Badge";
-declare const Badge: ((props: import("./Badge").BadgeRootProps) => import("solid-js").JSX.Element) & {
-    Anchor: (props: import("./Badge").BadgeAnchorProps) => import("solid-js").JSX.Element;
-    Label: (props: import("./Badge").BadgeLabelProps) => import("solid-js").JSX.Element;
-    Root: (props: import("./Badge").BadgeRootProps) => import("solid-js").JSX.Element;
+import { BadgeAnchor, BadgeLabel, BadgeRoot } from "./Badge.generated";
+declare const Badge: import("solid-js").Component<import("./Badge.generated").BadgeRootProps> & {
+    Anchor: import("solid-js").Component<import("./Badge.generated").BadgeAnchorProps>;
+    Label: import("solid-js").Component<import("./Badge.generated").BadgeLabelProps>;
+    Root: import("solid-js").Component<import("./Badge.generated").BadgeRootProps>;
 };
 export default Badge;
 export { Badge, BadgeRoot, BadgeLabel, BadgeAnchor };
-export type { BadgeRootProps, BadgeRootProps as BadgeProps, BadgeLabelProps, BadgeAnchorProps, } from "./Badge";
+export type { BadgeRootProps, BadgeRootProps as BadgeProps, BadgeLabelProps, BadgeAnchorProps, } from "./Badge.generated";

package/dist/components/badge/index.js

@@ -1,4 +1,4 @@
-import { BadgeAnchor, BadgeLabel, BadgeRoot } from "./Badge.js";
+import { BadgeAnchor, BadgeLabel, BadgeRoot } from "./Badge.generated.js";
 const Badge = Object.assign(BadgeRoot, {
     Anchor: BadgeAnchor,
     Label: BadgeLabel,

package/dist/components/breadcrumbs/Breadcrumbs.generated.d.ts

@@ -0,0 +1,21 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Breadcrumbs.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type BreadcrumbsRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    separator?: JSX.Element;
+};
+export type BreadcrumbsItemProps = Omit<JSX.HTMLAttributes<HTMLLIElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+    href?: string;
+    isCurrent?: boolean;
+};
+declare const BreadcrumbsRoot: __LayoutComponent<BreadcrumbsRootProps>;
+declare const BreadcrumbsItem: __LayoutComponent<BreadcrumbsItemProps>;
+declare const Breadcrumbs: __LayoutComponent<BreadcrumbsRootProps> & {
+    Root: __LayoutComponent<BreadcrumbsRootProps>;
+    Item: __LayoutComponent<BreadcrumbsItemProps>;
+};
+export default Breadcrumbs;
+export { BreadcrumbsRoot, BreadcrumbsItem };

package/dist/components/breadcrumbs/Breadcrumbs.generated.js

@@ -0,0 +1,145 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Breadcrumbs.css";
+import { Show, createContext, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Breadcrumbs.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=breadcrumbs-separator fill=none height=12 viewBox="0 0 24 24"width=12 xmlns=http://www.w3.org/2000/svg><path d="M9 18l6-6-6-6"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ template("<nav>"), _tmpl$3 = /*#__PURE__*/ template("<a>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<li>");
+const BreadcrumbsContext = createContext();
+const useBreadcrumbsContext = ()=>{
+    const ctx = useContext(BreadcrumbsContext);
+    if (!ctx) throw new Error("Breadcrumbs.Item must be used within <Breadcrumbs>");
+    return ctx;
+};
+const ChevronRight = ()=>_tmpl$();
+const __solidLayoutBreadcrumbsRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "separator",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = {
+        separator: ()=>local.separator
+    };
+    return createComponent(BreadcrumbsContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$2 = _tmpl$2();
+            spread(_el$2, mergeProps(others, {
+                "aria-label": "Breadcrumbs"
+            }, ()=>({
+                    class: twMerge(CLASSES.Root.base, local.class, local.className)
+                }), {
+                "data-slot": "breadcrumbs",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$2, ()=>local.children);
+            return _el$2;
+        }
+    });
+};
+const BreadcrumbsRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutBreadcrumbsRoot,
+    embedded: true
+});
+const [ITEM_CLASS, LINK_CLASS, SEPARATOR_CLASS] = CLASSES.Item.base;
+const __solidLayoutBreadcrumbsItem = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "href",
+        "isCurrent",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = useBreadcrumbsContext();
+    return (()=>{
+        var _el$3 = _tmpl$5();
+        spread(_el$3, mergeProps(others, ()=>({
+                class: twMerge(ITEM_CLASS, local.class, local.className)
+            }), {
+            "data-slot": "breadcrumbs-item",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$3, createComponent(Show, {
+            get when () {
+                return memo(()=>!!local.href)() && !local.isCurrent;
+            },
+            get fallback () {
+                return (()=>{
+                    var _el$6 = _tmpl$4();
+                    spread(_el$6, mergeProps({
+                        class: LINK_CLASS
+                    }, {
+                        "data-slot": "breadcrumbs-link",
+                        get ["data-current"] () {
+                            return local.isCurrent ? "true" : void 0;
+                        },
+                        get ["aria-current"] () {
+                            return local.isCurrent ? "page" : void 0;
+                        }
+                    }), false, true);
+                    insert(_el$6, ()=>local.children);
+                    return _el$6;
+                })();
+            },
+            get children () {
+                var _el$4 = _tmpl$3();
+                spread(_el$4, mergeProps({
+                    get href () {
+                        return local.href;
+                    }
+                }, {
+                    class: LINK_CLASS
+                }, {
+                    "data-slot": "breadcrumbs-link"
+                }), false, true);
+                insert(_el$4, ()=>local.children);
+                return _el$4;
+            }
+        }), null);
+        insert(_el$3, createComponent(Show, {
+            get when () {
+                return !local.isCurrent;
+            },
+            get children () {
+                var _el$5 = _tmpl$4();
+                spread(_el$5, mergeProps({
+                    class: SEPARATOR_CLASS
+                }, {
+                    "data-slot": "breadcrumbs-separator"
+                }), false, true);
+                insert(_el$5, ()=>ctx.separator() ?? createComponent(ChevronRight, {}));
+                return _el$5;
+            }
+        }), null);
+        return _el$3;
+    })();
+};
+const BreadcrumbsItem = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutBreadcrumbsItem,
+    embedded: true
+});
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+    Root: BreadcrumbsRoot,
+    Item: BreadcrumbsItem
+});
+const Breadcrumbs_generated = Breadcrumbs;
+export default Breadcrumbs_generated;
+export { BreadcrumbsItem, BreadcrumbsRoot };

package/dist/components/breadcrumbs/Breadcrumbs.recipe.d.ts

@@ -0,0 +1,18 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "breadcrumbs";
+    };
+    readonly Item: {
+        readonly base: readonly ["breadcrumbs__item", "breadcrumbs__link", "breadcrumbs__separator"];
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "breadcrumbs";
+    readonly slots: {
+        readonly breadcrumbs: {};
+        readonly "breadcrumbs-item": {};
+        readonly "breadcrumbs-link": {};
+        readonly "breadcrumbs-separator": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/breadcrumbs/Breadcrumbs.recipe.js

@@ -0,0 +1,56 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "breadcrumbs"
+    },
+    Item: {
+        base: [
+            "breadcrumbs__item",
+            "breadcrumbs__link",
+            "breadcrumbs__separator"
+        ]
+    }
+};
+const componentRecipe = recipe({
+    component: "breadcrumbs",
+    slots: {
+        breadcrumbs: {},
+        "breadcrumbs-item": {},
+        "breadcrumbs-link": {},
+        "breadcrumbs-separator": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            breadcrumbs: {
+                base: "",
+                axes: {}
+            },
+            "breadcrumbs-item": {
+                base: "",
+                axes: {}
+            },
+            "breadcrumbs-link": {
+                base: "",
+                axes: {}
+            },
+            "breadcrumbs-separator": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            breadcrumbs: 0,
+            "breadcrumbs-item": 1,
+            "breadcrumbs-link": 2,
+            "breadcrumbs-separator": 3,
+            root: 4
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default as Breadcrumbs, BreadcrumbsRoot, BreadcrumbsItem, type BreadcrumbsRootProps, type BreadcrumbsItemProps, } from "./Breadcrumbs";
+export { default as Breadcrumbs, BreadcrumbsRoot, BreadcrumbsItem, type BreadcrumbsRootProps, type BreadcrumbsItemProps, } from "./Breadcrumbs.generated";

package/dist/components/breadcrumbs/index.js

@@ -1 +1 @@
-export { BreadcrumbsItem, BreadcrumbsRoot, default as Breadcrumbs } from "./Breadcrumbs.js";
+export { BreadcrumbsItem, BreadcrumbsRoot, default as Breadcrumbs } from "./Breadcrumbs.generated.js";

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

@@ -0,0 +1,20 @@
+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;
+};
+declare const Button: __LayoutComponent<ButtonProps>;
+export default Button;
+export type { ButtonProps };

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

@@ -0,0 +1,105 @@
+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";
+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);
+    return (()=>{
+        var _el$ = _tmpl$2();
+        spread(_el$, mergeProps(others, {
+            get type () {
+                return local.type ?? "button";
+            }
+        }, ()=>({
+                class: classes()
+            }), {
+            "data-slot": "button",
+            get ["data-pending"] () {
+                return local.isPending ? "true" : "false";
+            },
+            get disabled () {
+                return disabled();
+            },
+            get ["aria-disabled"] () {
+                return disabled() ? "true" : "false";
+            }
+        }), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return local.isPending;
+            },
+            get children () {
+                var _el$2 = _tmpl$();
+                spread(_el$2, mergeProps(()=>({
+                        class: CLASSES.slot.spinner
+                    }), {
+                    "data-slot": "spinner",
+                    "aria-hidden": "true"
+                }), false, false);
+                return _el$2;
+            }
+        }), null);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return local.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);
+                return _el$3;
+            }
+        }), null);
+        insert(_el$, ()=>local.children, null);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return local.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);
+                return _el$4;
+            }
+        }), null);
+        return _el$;
+    })();
+};
+const Button = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutButton,
+    embedded: true
+});
+const Button_generated = Button;
+export default Button_generated;

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

@@ -0,0 +1,37 @@
+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<{
+    readonly component: "button";
+    readonly slots: {
+        readonly button: {};
+        readonly "button-end-icon": {};
+        readonly "button-start-icon": {};
+        readonly root: {};
+        readonly spinner: {};
+    };
+}>;