@pathscale/ui 1.3.0 → 1.4.0

package/README.md

@@ -36,7 +36,7 @@ import "@pathscale/ui/index.css";
 
 export const Example = () => (
   <Flex direction="col" gap="sm">
-    <Button color="primary" size="md">Primary</Button>
+    <Button variant="primary" size="md">Primary</Button>
   </Flex>
 );
 ```
@@ -81,8 +81,12 @@ The rules that hold across every component — worth two minutes before your fir
 
 - **Booleans are HeroUI-style `is*`**: `isDisabled`, `isOpen`, `isInvalid`, `isPending`,
   `isIconOnly`. Native `disabled` is honored too.
-- **Sizes** are `xs | sm | md | lg | xl`. **Colors** are
-  `neutral | primary | secondary | accent | info | success | warning | error | ghost`.
+- **Sizes and variants are per-component.** `Button` takes
+  `variant` (`primary | secondary | tertiary | outline | ghost | danger | danger-soft`)
+  and `size` (`sm | md | lg`); a smaller set of components — `Badge`, `Chip`, `Avatar`,
+  `Spinner`, `Toggle`, the progress components — take `color` instead. Check the
+  component's own types, or the [showcase](https://js.software), rather than assuming a
+  shared union.
 - **Both `class` and `className` work** everywhere, and your classes win — they are merged
   last via twMerge.
 - **Controlled/uncontrolled come in triples**: `isOpen/defaultOpen/onOpenChange`,

package/dist/components/accordion/Accordion.generated.d.ts

@@ -0,0 +1,51 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Accordion.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type AccordionSelectionMode = "single" | "multiple";
+export type AccordionVariant = "default" | "surface";
+export type AccordionValue = string | string[];
+export type AccordionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    selectionMode?: AccordionSelectionMode;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: string[]) => void;
+    hideSeparator?: boolean;
+    variant?: AccordionVariant;
+    isDisabled?: boolean;
+    disabled?: boolean;
+};
+export type AccordionItemProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    value?: string;
+    children?: JSX.Element;
+    isDisabled?: boolean;
+    disabled?: boolean;
+};
+export type AccordionTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    showIndicator?: boolean;
+    indicator?: JSX.Element;
+};
+export type AccordionContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    keepMounted?: boolean;
+};
+export type AccordionIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const AccordionRoot: __LayoutComponent<AccordionRootProps>;
+declare const AccordionItem: __LayoutComponent<AccordionItemProps>;
+declare const AccordionTrigger: __LayoutComponent<AccordionTriggerProps>;
+declare const AccordionContent: __LayoutComponent<AccordionContentProps>;
+declare const AccordionIndicator: __LayoutComponent<AccordionIndicatorProps>;
+declare const Accordion: __LayoutComponent<AccordionRootProps> & {
+    Root: __LayoutComponent<AccordionRootProps>;
+    Item: __LayoutComponent<AccordionItemProps>;
+    Trigger: __LayoutComponent<AccordionTriggerProps>;
+    Content: __LayoutComponent<AccordionContentProps>;
+    Indicator: __LayoutComponent<AccordionIndicatorProps>;
+};
+export default Accordion;
+export { Accordion, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, AccordionIndicator, };
+export type { AccordionRootProps as AccordionProps };

package/dist/components/accordion/Accordion.generated.js

@@ -0,0 +1,386 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Accordion.css";
+import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Accordion.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div><div>"), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template('<svg fill=none role=presentation viewBox="0 0 24 24"width=100% height=100%><path d="M6 9L12 15L18 9"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
+const normalizeAccordionValue = (value, selectionMode)=>{
+    if (void 0 === value) return [];
+    const raw = Array.isArray(value) ? value : [
+        value
+    ];
+    const normalized = Array.from(new Set(raw.map((entry)=>String(entry))));
+    return "single" === selectionMode ? normalized.slice(0, 1) : normalized;
+};
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const AccordionContext = createContext();
+const AccordionItemContext = createContext();
+const __solidLayoutAccordionRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "selectionMode",
+        "value",
+        "defaultValue",
+        "onValueChange",
+        "hideSeparator",
+        "variant",
+        "isDisabled",
+        "disabled",
+        "ref"
+    ]);
+    const selectionMode = ()=>local.selectionMode ?? "single";
+    const variant = ()=>local.variant ?? "default";
+    const hideSeparator = ()=>Boolean(local.hideSeparator);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const [internalValue, setInternalValue] = createSignal(normalizeAccordionValue(local.defaultValue, selectionMode()));
+    const selectedValues = createMemo(()=>void 0 !== local.value ? normalizeAccordionValue(local.value, selectionMode()) : normalizeAccordionValue(internalValue(), selectionMode()));
+    const isItemExpanded = (value)=>selectedValues().includes(value);
+    const setSelectedValues = (nextValues)=>{
+        const normalizedNextValues = normalizeAccordionValue(nextValues, selectionMode());
+        if (void 0 === local.value) setInternalValue(normalizedNextValues);
+        local.onValueChange?.(normalizedNextValues);
+    };
+    const toggleItem = (value)=>{
+        if (isDisabled()) return;
+        const currentValues = selectedValues();
+        const isExpanded = currentValues.includes(value);
+        if ("single" === selectionMode()) return void setSelectedValues(isExpanded ? [] : [
+            value
+        ]);
+        const next = new Set(currentValues);
+        if (isExpanded) next.delete(value);
+        else next.add(value);
+        setSelectedValues(Array.from(next));
+    };
+    let rootRef;
+    const handleTriggerKeyDown = (event, currentTarget)=>{
+        if ("ArrowDown" !== event.key && "ArrowUp" !== event.key && "Home" !== event.key && "End" !== event.key) return;
+        if (!rootRef) return;
+        const triggers = Array.from(rootRef.querySelectorAll('[data-slot="accordion-trigger"]')).filter((trigger)=>!trigger.disabled && "true" !== trigger.getAttribute("aria-disabled"));
+        if (!triggers.length) return;
+        const currentIndex = triggers.indexOf(currentTarget);
+        if (currentIndex < 0) return;
+        event.preventDefault();
+        if ("Home" === event.key) return void triggers[0]?.focus();
+        if ("End" === event.key) return void triggers[triggers.length - 1]?.focus();
+        const direction = "ArrowDown" === event.key ? 1 : -1;
+        const nextIndex = (currentIndex + direction + triggers.length) % triggers.length;
+        triggers[nextIndex]?.focus();
+    };
+    const contextValue = {
+        selectionMode,
+        variant,
+        hideSeparator,
+        isDisabled,
+        isItemExpanded,
+        toggleItem,
+        handleTriggerKeyDown
+    };
+    return createComponent(AccordionContext.Provider, {
+        value: contextValue,
+        get children () {
+            var _el$ = _tmpl$();
+            use((node)=>{
+                rootRef = node;
+                if ("function" == typeof local.ref) local.ref(node);
+            }, _el$);
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.class, local.className)
+                }), {
+                "data-slot": "accordion",
+                get ["data-selection-mode"] () {
+                    return selectionMode();
+                },
+                get ["data-hide-separator"] () {
+                    return hideSeparator() ? "true" : void 0;
+                },
+                get ["data-variant"] () {
+                    return variant();
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const AccordionRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAccordionRoot,
+    embedded: true
+});
+const __solidLayoutAccordionItem = (_stable, p)=>{
+    const accordion = useContext(AccordionContext);
+    const [local, others] = splitProps(p, [
+        "value",
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isDisabled",
+        "disabled"
+    ]);
+    const uniqueId = createUniqueId();
+    const itemValue = ()=>local.value ?? uniqueId;
+    const triggerId = ()=>`accordion-trigger-${uniqueId}`;
+    const contentId = ()=>`accordion-content-${uniqueId}`;
+    const isExpanded = ()=>accordion?.isItemExpanded(itemValue()) ?? false;
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(accordion?.isDisabled());
+    const toggle = ()=>{
+        if (isDisabled()) return;
+        accordion?.toggleItem(itemValue());
+    };
+    const itemContextValue = {
+        value: itemValue,
+        triggerId,
+        contentId,
+        isExpanded,
+        isDisabled,
+        toggle
+    };
+    return createComponent(AccordionItemContext.Provider, {
+        value: itemContextValue,
+        get children () {
+            var _el$2 = _tmpl$();
+            spread(_el$2, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.Item.base, isExpanded() && CLASSES.Item.flag.expanded, isDisabled() && CLASSES.Item.flag.disabled, accordion?.hideSeparator() && CLASSES.Item.flag.hideSeparator, local.class, local.className)
+                }), {
+                "data-slot": "accordion-item",
+                get ["data-expanded"] () {
+                    return isExpanded() ? "true" : "false";
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$2, ()=>local.children);
+            return _el$2;
+        }
+    });
+};
+const AccordionItem = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAccordionItem,
+    embedded: true
+});
+const __solidLayoutAccordionTrigger = (_stable, p)=>{
+    const accordion = useContext(AccordionContext);
+    const item = useContext(AccordionItemContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick",
+        "onKeyDown",
+        "type",
+        "showIndicator",
+        "indicator"
+    ]);
+    const isDisabled = ()=>Boolean(item?.isDisabled());
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented || isDisabled()) return;
+        item?.toggle();
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented || isDisabled()) return;
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            item?.toggle();
+            return;
+        }
+        accordion?.handleTriggerKeyDown(event, event.currentTarget);
+    };
+    return (()=>{
+        var _el$3 = _tmpl$2();
+        spread(_el$3, mergeProps(others, {
+            get id () {
+                return item?.triggerId();
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.Trigger.base, local.class, local.className)
+            }), {
+            "data-slot": "accordion-trigger",
+            get ["data-expanded"] () {
+                return item?.isExpanded() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-expanded"] () {
+                return item?.isExpanded() ? "true" : "false";
+            },
+            get ["aria-controls"] () {
+                return item?.contentId();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        insert(_el$3, ()=>local.children, null);
+        insert(_el$3, createComponent(Show, {
+            get when () {
+                return false !== local.showIndicator;
+            },
+            get children () {
+                return createComponent(AccordionIndicator, {
+                    get children () {
+                        return local.indicator;
+                    }
+                });
+            }
+        }), null);
+        return _el$3;
+    })();
+};
+const AccordionTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAccordionTrigger,
+    embedded: true
+});
+const __solidLayoutAccordionContent = (_stable, p)=>{
+    const item = useContext(AccordionItemContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "keepMounted"
+    ]);
+    const expanded = ()=>Boolean(item?.isExpanded());
+    const keepMounted = ()=>local.keepMounted ?? true;
+    if (!keepMounted() && !expanded()) return null;
+    return (()=>{
+        var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild;
+        spread(_el$4, mergeProps(others, {
+            get id () {
+                return item?.contentId();
+            },
+            role: "region"
+        }, ()=>({
+                class: twMerge(CLASSES.Content.base, expanded() && CLASSES.Content.flag.expanded, local.class, local.className)
+            }), {
+            "data-slot": "accordion-content",
+            get ["data-expanded"] () {
+                return expanded() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-hidden"] () {
+                return expanded() ? "false" : "true";
+            },
+            get ["aria-labelledby"] () {
+                return item?.triggerId();
+            }
+        }), false, true);
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.Body.base
+            }), {
+            "data-slot": "accordion-body"
+        }), false, true);
+        spread(_el$6, mergeProps(()=>({
+                class: CLASSES.BodyInner.base
+            }), {
+            "data-slot": "accordion-body-inner"
+        }), false, true);
+        insert(_el$6, ()=>local.children);
+        return _el$4;
+    })();
+};
+const AccordionContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAccordionContent,
+    embedded: true
+});
+const __solidLayoutAccordionIndicator = (_stable, p)=>{
+    const item = useContext(AccordionItemContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const expanded = ()=>Boolean(item?.isExpanded());
+    return (()=>{
+        var _el$7 = _tmpl$4();
+        spread(_el$7, mergeProps(others, {
+            "aria-hidden": "true"
+        }, ()=>({
+                class: twMerge(CLASSES.Indicator.base, expanded() && CLASSES.Indicator.flag.expanded, local.class, local.className)
+            }), {
+            "data-slot": "accordion-indicator",
+            get ["data-expanded"] () {
+                return expanded() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$7, ()=>local.children ?? _tmpl$5());
+        return _el$7;
+    })();
+};
+const AccordionIndicator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutAccordionIndicator,
+    embedded: true
+});
+const Accordion = Object.assign(AccordionRoot, {
+    Root: AccordionRoot,
+    Item: AccordionItem,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+    Indicator: AccordionIndicator
+});
+const Accordion_generated = Accordion;
+export default Accordion_generated;
+export { Accordion, AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger };

package/dist/components/accordion/Accordion.recipe.d.ts

@@ -0,0 +1,51 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "accordion";
+        readonly variant: {
+            readonly default: "accordion--default";
+            readonly surface: "accordion--surface";
+        };
+    };
+    readonly Item: {
+        readonly base: "accordion__item";
+        readonly flag: {
+            readonly expanded: "accordion__item--expanded";
+            readonly disabled: "accordion__item--disabled";
+            readonly hideSeparator: "accordion__item--hide-separator";
+        };
+    };
+    readonly Trigger: {
+        readonly base: "accordion__trigger";
+    };
+    readonly Indicator: {
+        readonly base: "accordion__indicator";
+        readonly flag: {
+            readonly expanded: "accordion__indicator--expanded";
+        };
+    };
+    readonly Content: {
+        readonly base: "accordion__content";
+        readonly flag: {
+            readonly expanded: "accordion__content--expanded";
+        };
+    };
+    readonly Body: {
+        readonly base: "accordion__body";
+    };
+    readonly BodyInner: {
+        readonly base: "accordion__body-inner";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "accordion";
+    readonly slots: {
+        readonly accordion: {};
+        readonly "accordion-body": {};
+        readonly "accordion-body-inner": {};
+        readonly "accordion-content": {};
+        readonly "accordion-indicator": {};
+        readonly "accordion-item": {};
+        readonly "accordion-trigger": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/accordion/Accordion.recipe.js

@@ -0,0 +1,100 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "accordion",
+        variant: {
+            default: "accordion--default",
+            surface: "accordion--surface"
+        }
+    },
+    Item: {
+        base: "accordion__item",
+        flag: {
+            expanded: "accordion__item--expanded",
+            disabled: "accordion__item--disabled",
+            hideSeparator: "accordion__item--hide-separator"
+        }
+    },
+    Trigger: {
+        base: "accordion__trigger"
+    },
+    Indicator: {
+        base: "accordion__indicator",
+        flag: {
+            expanded: "accordion__indicator--expanded"
+        }
+    },
+    Content: {
+        base: "accordion__content",
+        flag: {
+            expanded: "accordion__content--expanded"
+        }
+    },
+    Body: {
+        base: "accordion__body"
+    },
+    BodyInner: {
+        base: "accordion__body-inner"
+    }
+};
+const componentRecipe = recipe({
+    component: "accordion",
+    slots: {
+        accordion: {},
+        "accordion-body": {},
+        "accordion-body-inner": {},
+        "accordion-content": {},
+        "accordion-indicator": {},
+        "accordion-item": {},
+        "accordion-trigger": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            accordion: {
+                base: "",
+                axes: {}
+            },
+            "accordion-body": {
+                base: "",
+                axes: {}
+            },
+            "accordion-body-inner": {
+                base: "",
+                axes: {}
+            },
+            "accordion-content": {
+                base: "",
+                axes: {}
+            },
+            "accordion-indicator": {
+                base: "",
+                axes: {}
+            },
+            "accordion-item": {
+                base: "",
+                axes: {}
+            },
+            "accordion-trigger": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            accordion: 0,
+            "accordion-body": 1,
+            "accordion-body-inner": 2,
+            "accordion-content": 3,
+            "accordion-indicator": 4,
+            "accordion-item": 5,
+            "accordion-trigger": 6,
+            root: 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default, Accordion, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, AccordionIndicator, type AccordionProps, type AccordionRootProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, type AccordionIndicatorProps, type AccordionSelectionMode, type AccordionVariant, type AccordionValue, } from "./Accordion";
+export { default, Accordion, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, AccordionIndicator, type AccordionProps, type AccordionRootProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, type AccordionIndicatorProps, type AccordionSelectionMode, type AccordionVariant, type AccordionValue, } from "./Accordion.generated";

package/dist/components/accordion/index.js

@@ -1,3 +1 @@
-import { Accordion as external_Accordion_js_Accordion, AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger } from "./Accordion.js";
-export default external_Accordion_js_Accordion;
-export { AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger, external_Accordion_js_Accordion as Accordion };
+export { Accordion, AccordionContent, AccordionIndicator, AccordionItem, AccordionRoot, AccordionTrigger, default } from "./Accordion.generated.js";

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

@@ -0,0 +1,35 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Alert.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type AlertStatus = "default" | "accent" | "success" | "warning" | "danger";
+export type AlertRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    status?: AlertStatus;
+    children: JSX.Element;
+};
+export type AlertIndicatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type AlertContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type AlertTitleProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type AlertDescriptionProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+declare const AlertRoot: __LayoutComponent<AlertRootProps>;
+declare const AlertIndicator: __LayoutComponent<AlertIndicatorProps>;
+declare const AlertContent: __LayoutComponent<AlertContentProps>;
+declare const AlertTitle: __LayoutComponent<AlertTitleProps>;
+declare const AlertDescription: __LayoutComponent<AlertDescriptionProps>;
+declare const Alert: __LayoutComponent<AlertRootProps> & {
+    Root: __LayoutComponent<AlertRootProps>;
+    Indicator: __LayoutComponent<AlertIndicatorProps>;
+    Content: __LayoutComponent<AlertContentProps>;
+    Title: __LayoutComponent<AlertTitleProps>;
+    Description: __LayoutComponent<AlertDescriptionProps>;
+};
+export default Alert;
+export { AlertRoot, AlertIndicator, AlertContent, AlertTitle, AlertDescription };