@moduix/solid-tailwind 1.0.0

package/dist/components/badge/Badge.jsx

@@ -0,0 +1,46 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const badgeVariants = cva('inline-flex min-h-5 w-fit max-w-full min-w-0 items-center justify-center gap-1.5 overflow-hidden rounded-full border px-2.5 align-middle font-medium text-xs tabular-nums whitespace-nowrap no-underline select-none transition-[color,background-color,border-color,opacity] duration-200 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-0.5 focus-visible:outline-ring motion-reduce:transition-none [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0 [a&]:cursor-pointer', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:opacity-90',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:opacity-90',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground [a&]:hover:opacity-90',
+            outline: 'border-border bg-transparent text-foreground [a&]:hover:border-primary [a&]:hover:text-primary',
+            ghost: 'border-transparent bg-transparent text-foreground [a&]:hover:border-primary [a&]:hover:text-primary',
+            link: 'min-h-auto rounded-none border-transparent bg-transparent px-0 py-[0.125em] text-primary underline decoration-[color-mix(in_oklab,currentColor_55%,transparent)] underline-offset-[0.15em] [text-decoration-thickness:from-font] [a&]:hover:decoration-current'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+function BadgeLabel(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span {...others} data-scope="badge" data-part="label" data-slot="badge-label" class={cn('min-w-0 overflow-hidden text-ellipsis', local.class)}/>;
+}
+function BadgeRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'variant'
+    ]);
+    return <ark.span {...others} data-scope="badge" data-part="root" data-slot="badge-root" data-variant={local.variant ?? 'default'} class={cn(badgeVariants({
+        variant: local.variant
+    }), local.class)}/>;
+}
+function BadgeDot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.span {...others} data-scope="badge" data-part="dot" data-slot="badge-dot" aria-hidden="true" class={cn('size-1.5 shrink-0 rounded-full bg-current', local.class)}/>;
+}
+const Badge = Object.assign(BadgeRoot, {
+    Root: BadgeRoot,
+    Label: BadgeLabel,
+    Dot: BadgeDot
+});
+export { Badge };

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

@@ -0,0 +1 @@
+export { Badge } from './Badge.js';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./Badge.js";

package/dist/components/badge/index.jsx

@@ -0,0 +1 @@
+export { Badge } from "./Badge.jsx";

package/dist/components/bleed/Bleed.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+type BleedAmount = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BleedInline = BleedAmount | 'full';
+type BleedRootProps = HTMLArkProps<'div'> & {
+    inline?: BleedInline;
+    block?: BleedAmount;
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    'data-inline'?: string;
+    'data-block'?: string;
+};
+declare function BleedRoot(props: BleedRootProps): import("solid-js").JSX.Element;
+declare const Bleed: typeof BleedRoot & {
+    Root: typeof BleedRoot;
+};
+export { Bleed };

package/dist/components/bleed/Bleed.js

@@ -0,0 +1,68 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const bleedVariants = cva('m-0 box-border', {
+    variants: {
+        inline: {
+            none: null,
+            xs: '-mx-1',
+            sm: '-mx-2',
+            md: '-mx-3',
+            lg: '-mx-4',
+            xl: '-mx-6',
+            full: 'mx-[calc(50%_-_50vi)] [inline-size:100vi]'
+        },
+        block: {
+            none: null,
+            xs: '-my-1',
+            sm: '-my-2',
+            md: '-my-3',
+            lg: '-my-4',
+            xl: '-my-6'
+        }
+    },
+    defaultVariants: {
+        inline: 'full',
+        block: 'none'
+    }
+});
+function BleedRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'block',
+        'class',
+        'inline',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-inline',
+        'data-block'
+    ]);
+    return createComponent(ark.div, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "bleed",
+        "data-part": "root",
+        "data-slot": "bleed-root",
+        get ["data-inline"] () {
+            return local.inline ?? 'full';
+        },
+        get ["data-block"] () {
+            return local.block ?? 'none';
+        },
+        get ["class"] () {
+            return cn(bleedVariants({
+                inline: local.inline,
+                block: local.block
+            }), local.class);
+        }
+    }));
+}
+const Bleed = Object.assign(BleedRoot, {
+    Root: BleedRoot
+});
+export { Bleed };

package/dist/components/bleed/Bleed.jsx

@@ -0,0 +1,50 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+const bleedVariants = cva('m-0 box-border', {
+    variants: {
+        inline: {
+            none: null,
+            xs: '-mx-1',
+            sm: '-mx-2',
+            md: '-mx-3',
+            lg: '-mx-4',
+            xl: '-mx-6',
+            full: 'mx-[calc(50%_-_50vi)] [inline-size:100vi]'
+        },
+        block: {
+            none: null,
+            xs: '-my-1',
+            sm: '-my-2',
+            md: '-my-3',
+            lg: '-my-4',
+            xl: '-my-6'
+        }
+    },
+    defaultVariants: {
+        inline: 'full',
+        block: 'none'
+    }
+});
+function BleedRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'block',
+        'class',
+        'inline',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'data-inline',
+        'data-block'
+    ]);
+    return <ark.div asChild={local.asChild} {...others} data-scope="bleed" data-part="root" data-slot="bleed-root" data-inline={local.inline ?? 'full'} data-block={local.block ?? 'none'} class={cn(bleedVariants({
+        inline: local.inline,
+        block: local.block
+    }), local.class)}/>;
+}
+const Bleed = Object.assign(BleedRoot, {
+    Root: BleedRoot
+});
+export { Bleed };

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

@@ -0,0 +1 @@
+export * from './Bleed.js';

package/dist/components/bleed/index.js

@@ -0,0 +1 @@
+export * from "./Bleed.js";

package/dist/components/bleed/index.jsx

@@ -0,0 +1 @@
+export * from "./Bleed.jsx";

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

@@ -0,0 +1,30 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type BreadcrumbsPathItem = {
+    href?: string;
+    key?: string | number;
+    label: JSX.Element;
+};
+type BreadcrumbsPathProps = Omit<HTMLArkProps<'ol'>, 'asChild' | 'children'> & {
+    items: readonly BreadcrumbsPathItem[];
+    separator?: JSX.Element;
+};
+declare function BreadcrumbsRoot(props: HTMLArkProps<'nav'>): JSX.Element;
+declare function BreadcrumbsList(props: HTMLArkProps<'ol'>): JSX.Element;
+declare function BreadcrumbsItem(props: HTMLArkProps<'li'>): JSX.Element;
+declare function BreadcrumbsLink(props: HTMLArkProps<'a'>): JSX.Element;
+declare function BreadcrumbsPage(props: HTMLArkProps<'span'>): JSX.Element;
+declare function BreadcrumbsPath(props: BreadcrumbsPathProps): JSX.Element;
+declare function BreadcrumbsSeparator(props: HTMLArkProps<'li'>): JSX.Element;
+declare function BreadcrumbsEllipsis(props: HTMLArkProps<'span'>): JSX.Element;
+declare const Breadcrumbs: typeof BreadcrumbsRoot & {
+    Root: typeof BreadcrumbsRoot;
+    List: typeof BreadcrumbsList;
+    Item: typeof BreadcrumbsItem;
+    Link: typeof BreadcrumbsLink;
+    Path: typeof BreadcrumbsPath;
+    Page: typeof BreadcrumbsPage;
+    Separator: typeof BreadcrumbsSeparator;
+    Ellipsis: typeof BreadcrumbsEllipsis;
+};
+export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,158 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+function BreadcrumbsRoot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'class'
+    ]);
+    return createComponent(ark.nav, mergeProps({
+        get ["aria-label"] () {
+            return memo(()=>void 0 === local['aria-label'])() ? 'Breadcrumb' : local['aria-label'];
+        }
+    }, others, {
+        "data-slot": "breadcrumbs-root",
+        get ["class"] () {
+            return cn('max-w-full text-sm text-muted-foreground', local.class);
+        }
+    }));
+}
+function BreadcrumbsList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.ol, mergeProps(others, {
+        "data-slot": "breadcrumbs-list",
+        get ["class"] () {
+            return cn("flex min-w-0 items-center gap-1 whitespace-nowrap [&>[data-slot='breadcrumbs-item']:last-child]:max-w-64 [&>[data-slot='breadcrumbs-item']:last-child]:flex-auto", local.class);
+        }
+    }));
+}
+function BreadcrumbsItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.li, mergeProps(others, {
+        "data-slot": "breadcrumbs-item",
+        get ["class"] () {
+            return cn('inline-flex min-w-0 items-center', local.class);
+        }
+    }));
+}
+function BreadcrumbsLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.a, mergeProps(others, {
+        "data-slot": "breadcrumbs-link",
+        get ["class"] () {
+            return cn('block max-w-full min-w-0 truncate rounded-sm px-1 text-muted-foreground no-underline underline-offset-[0.2em] transition-[color] duration-200 ease-in-out outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class);
+        }
+    }));
+}
+function BreadcrumbsPage(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-slot": "breadcrumbs-page",
+        "aria-current": "page",
+        get ["class"] () {
+            return cn('block max-w-full min-w-0 truncate px-1 font-medium text-foreground', local.class);
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function BreadcrumbsPath(props) {
+    const [local, others] = splitProps(props, [
+        'items',
+        'separator'
+    ]);
+    return createComponent(BreadcrumbsList, mergeProps(others, {
+        get children () {
+            return createComponent(For, {
+                get each () {
+                    return local.items;
+                },
+                children: (item, index)=>{
+                    const isLastItem = ()=>index() === local.items.length - 1;
+                    return [
+                        createComponent(BreadcrumbsItem, {
+                            get children () {
+                                return memo(()=>!!isLastItem())() ? createComponent(BreadcrumbsPage, {
+                                    get children () {
+                                        return item.label;
+                                    }
+                                }) : createComponent(BreadcrumbsLink, {
+                                    get href () {
+                                        return item.href;
+                                    },
+                                    get children () {
+                                        return item.label;
+                                    }
+                                });
+                            }
+                        }),
+                        memo(()=>memo(()=>!isLastItem())() ? createComponent(BreadcrumbsSeparator, {
+                                get children () {
+                                    return local.separator;
+                                }
+                            }) : null)
+                    ];
+                }
+            });
+        }
+    }));
+}
+function BreadcrumbsSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ark.li, mergeProps(others, {
+        "data-slot": "breadcrumbs-separator",
+        "aria-hidden": "true",
+        get ["class"] () {
+            return cn('inline-flex items-center text-[length:0.875em] leading-none text-muted-foreground select-none', local.class);
+        },
+        get children () {
+            return resolvedChildren() ?? createComponent(ChevronRightIcon, {
+                class: "size-[1em] flex-none rtl:rotate-180"
+            });
+        }
+    }));
+}
+function BreadcrumbsEllipsis(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return createComponent(ark.span, mergeProps(others, {
+        "data-slot": "breadcrumbs-ellipsis",
+        "aria-hidden": "true",
+        get ["class"] () {
+            return cn('inline-flex min-h-4 min-w-4 items-center justify-center overflow-hidden px-1 text-ellipsis text-muted-foreground', local.class);
+        },
+        get children () {
+            return memo(()=>void 0 === resolvedChildren())() ? '...' : resolvedChildren();
+        }
+    }));
+}
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+    Root: BreadcrumbsRoot,
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+    Path: BreadcrumbsPath,
+    Page: BreadcrumbsPage,
+    Separator: BreadcrumbsSeparator,
+    Ellipsis: BreadcrumbsEllipsis
+});
+export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,88 @@
+import { ark } from "@ark-ui/solid/factory";
+import { For, children, splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronRightIcon } from "../../internal/icons/ui/Icons.jsx";
+function BreadcrumbsRoot(props) {
+    const [local, others] = splitProps(props, [
+        'aria-label',
+        'class'
+    ]);
+    return <ark.nav aria-label={void 0 === local['aria-label'] ? 'Breadcrumb' : local['aria-label']} {...others} data-slot="breadcrumbs-root" class={cn('max-w-full text-sm text-muted-foreground', local.class)}/>;
+}
+function BreadcrumbsList(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.ol {...others} data-slot="breadcrumbs-list" class={cn("flex min-w-0 items-center gap-1 whitespace-nowrap [&>[data-slot='breadcrumbs-item']:last-child]:max-w-64 [&>[data-slot='breadcrumbs-item']:last-child]:flex-auto", local.class)}/>;
+}
+function BreadcrumbsItem(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.li {...others} data-slot="breadcrumbs-item" class={cn('inline-flex min-w-0 items-center', local.class)}/>;
+}
+function BreadcrumbsLink(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return <ark.a {...others} data-slot="breadcrumbs-link" class={cn('block max-w-full min-w-0 truncate rounded-sm px-1 text-muted-foreground no-underline underline-offset-[0.2em] transition-[color] duration-200 ease-in-out outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none [@media(hover:hover)]:hover:text-foreground', local.class)}/>;
+}
+function BreadcrumbsPage(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    return <ark.span {...others} data-slot="breadcrumbs-page" aria-current="page" class={cn('block max-w-full min-w-0 truncate px-1 font-medium text-foreground', local.class)}>
+      {local.children}
+    </ark.span>;
+}
+function BreadcrumbsPath(props) {
+    const [local, others] = splitProps(props, [
+        'items',
+        'separator'
+    ]);
+    return <BreadcrumbsList {...others}>
+      <For each={local.items}>
+        {(item, index)=>{
+        const isLastItem = ()=>index() === local.items.length - 1;
+        return <>
+              <BreadcrumbsItem>
+                {isLastItem() ? <BreadcrumbsPage>{item.label}</BreadcrumbsPage> : <BreadcrumbsLink href={item.href}>{item.label}</BreadcrumbsLink>}
+              </BreadcrumbsItem>
+              {!isLastItem() ? <BreadcrumbsSeparator>{local.separator}</BreadcrumbsSeparator> : null}
+            </>;
+    }}
+      </For>
+    </BreadcrumbsList>;
+}
+function BreadcrumbsSeparator(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ark.li {...others} data-slot="breadcrumbs-separator" aria-hidden="true" class={cn('inline-flex items-center text-[length:0.875em] leading-none text-muted-foreground select-none', local.class)}>
+      {resolvedChildren() ?? <ChevronRightIcon class="size-[1em] flex-none rtl:rotate-180"/>}
+    </ark.li>;
+}
+function BreadcrumbsEllipsis(props) {
+    const [local, others] = splitProps(props, [
+        'children',
+        'class'
+    ]);
+    const resolvedChildren = children(()=>local.children);
+    return <ark.span {...others} data-slot="breadcrumbs-ellipsis" aria-hidden="true" class={cn('inline-flex min-h-4 min-w-4 items-center justify-center overflow-hidden px-1 text-ellipsis text-muted-foreground', local.class)}>
+      {void 0 === resolvedChildren() ? '...' : resolvedChildren()}
+    </ark.span>;
+}
+const Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+    Root: BreadcrumbsRoot,
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+    Path: BreadcrumbsPath,
+    Page: BreadcrumbsPage,
+    Separator: BreadcrumbsSeparator,
+    Ellipsis: BreadcrumbsEllipsis
+});
+export { Breadcrumbs };

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

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs.js';

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1 @@
+export { Breadcrumbs } from "./Breadcrumbs.js";

package/dist/components/breadcrumbs/index.jsx

@@ -0,0 +1 @@
+export { Breadcrumbs } from "./Breadcrumbs.jsx";

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

@@ -0,0 +1,16 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+import type { JSX } from 'solid-js';
+type ButtonRootProps = HTMLArkProps<'button'> & {
+    loading?: boolean;
+    variant?: 'default' | 'outline' | 'secondary' | 'destructive' | 'destructive-outline' | 'ghost' | 'link';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon-sm' | 'icon-md' | 'icon-lg';
+    'data-scope'?: string;
+    'data-part'?: string;
+    'data-slot'?: string;
+    onClickCapture?: (event: MouseEvent) => void;
+};
+declare function ButtonRoot(props: ButtonRootProps): JSX.Element;
+declare const Button: typeof ButtonRoot & {
+    Root: typeof ButtonRoot;
+};
+export { Button };

package/dist/components/button/Button.js

@@ -0,0 +1,124 @@
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { useFocusVisible } from "@ark-ui/solid";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 rounded-md border text-sm font-medium no-underline outline-0 appearance-none transition-[background-color,border-color,color,opacity,transform] duration-200 ease-in-out select-none whitespace-nowrap data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 data-loading:cursor-progress motion-reduce:transition-none motion-safe:[&:not([data-variant='link']):active]:translate-y-px [&:focus[data-focus-visible]]:-outline-offset-1 [&:focus[data-focus-visible]]:outline-2 [&:focus[data-focus-visible]]:outline-ring [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: 'border-primary bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,black)]',
+            outline: 'border-border bg-background text-foreground hover:bg-accent',
+            secondary: 'border-secondary bg-secondary text-secondary-foreground hover:bg-accent',
+            destructive: 'border-destructive bg-destructive text-destructive-foreground hover:brightness-[0.96]',
+            'destructive-outline': 'border-destructive bg-background text-destructive hover:bg-destructive hover:text-destructive-foreground',
+            ghost: 'border-transparent bg-transparent text-foreground hover:bg-accent',
+            link: 'border-transparent bg-transparent text-primary underline underline-offset-[0.25em] hover:text-foreground'
+        },
+        size: {
+            xs: 'min-h-control-xs px-2.5 py-0.5 text-xs',
+            sm: 'min-h-control-sm px-3 py-1 text-sm',
+            md: 'min-h-control-md px-4 py-1 text-sm',
+            lg: 'min-h-control-lg px-5 py-1.5 text-md',
+            xl: 'min-h-control-xl px-6 py-2 text-lg',
+            'icon-sm': 'size-control-sm min-w-control-sm gap-0 p-0',
+            'icon-md': 'size-control-md min-w-control-md gap-0 p-0',
+            'icon-lg': 'size-control-lg min-w-control-lg gap-0 p-0'
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'link',
+            class: 'min-h-0 py-0'
+        }
+    ],
+    defaultVariants: {
+        variant: 'default',
+        size: 'md'
+    }
+});
+const ArkButton = ark.button;
+function ButtonRoot(props) {
+    const focusVisible = useFocusVisible();
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'disabled',
+        'loading',
+        'onClick',
+        'onClickCapture',
+        'size',
+        'type',
+        'data-scope',
+        'data-part',
+        'data-slot',
+        'variant',
+        'aria-busy',
+        'aria-disabled'
+    ]);
+    const isDisabled = ()=>local.disabled || local.loading || true === local['aria-disabled'] || 'true' === local['aria-disabled'];
+    const handleClickCapture = (event)=>{
+        if (isDisabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        local.onClickCapture?.(event);
+    };
+    return createComponent(ArkButton, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        get type () {
+            return memo(()=>!!local.asChild)() ? local.type : local.type ?? 'button';
+        },
+        get disabled () {
+            return memo(()=>!!local.asChild)() ? void 0 : isDisabled();
+        },
+        get ["aria-busy"] () {
+            return memo(()=>!!local.loading)() ? true : local['aria-busy'];
+        },
+        get ["aria-disabled"] () {
+            return memo(()=>!!isDisabled())() ? true : local['aria-disabled'];
+        },
+        "oncapture:click": handleClickCapture,
+        get onClick () {
+            return local.onClick;
+        },
+        get ["data-scope"] () {
+            return local['data-scope'] ?? 'button';
+        },
+        get ["data-part"] () {
+            return local['data-part'] ?? 'root';
+        },
+        get ["data-slot"] () {
+            return local['data-slot'] ?? 'button-root';
+        },
+        get ["data-variant"] () {
+            return local.variant ?? 'default';
+        },
+        get ["data-size"] () {
+            return local.size ?? 'md';
+        },
+        get ["data-disabled"] () {
+            return isDisabled() ? '' : void 0;
+        },
+        get ["data-focus-visible"] () {
+            return focusVisible() ? '' : void 0;
+        },
+        get ["data-loading"] () {
+            return local.loading ? '' : void 0;
+        },
+        get ["class"] () {
+            return cn(buttonVariants({
+                variant: local.variant,
+                size: local.size
+            }), local.class);
+        }
+    }));
+}
+const Button = Object.assign(ButtonRoot, {
+    Root: ButtonRoot
+});
+export { Button };