@moduix/react-tailwind 1.0.0

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/react/avatar";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+const avatarVariants = cva('relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted align-middle font-medium text-foreground select-none', {
+    variants: {
+        size: {
+            xs: 'size-control-xs text-xs',
+            sm: 'size-control-sm text-sm',
+            md: 'size-control-md text-md',
+            lg: 'size-control-lg text-lg',
+            xl: 'size-control-xl text-lg'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Root, {
+        ref: ref,
+        "data-slot": "avatar-root",
+        "data-size": size,
+        className: cn(avatarVariants({
+            size
+        }), className),
+        ...props
+    });
+});
+const Avatar_AvatarRootProvider = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.RootProvider, {
+        ref: ref,
+        "data-slot": "avatar-root-provider",
+        "data-size": size,
+        className: cn(avatarVariants({
+            size
+        }), className),
+        ...props
+    });
+});
+const Avatar_AvatarImage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Image, {
+        ref: ref,
+        "data-slot": "avatar-image",
+        className: cn('block size-full rounded-[inherit] object-cover object-center data-[state=hidden]:hidden', className),
+        ...props
+    });
+});
+const Avatar_AvatarFallback = /*#__PURE__*/ forwardRef(function({ children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Avatar.Fallback, {
+        ref: ref,
+        "data-slot": "avatar-fallback",
+        className: cn('inline-flex size-full items-center justify-center rounded-[inherit] bg-[inherit] data-[state=hidden]:hidden', className),
+        ...props,
+        children: children
+    });
+});
+const Avatar_Avatar = Object.assign(Avatar_AvatarRoot, {
+    Root: Avatar_AvatarRoot,
+    RootProvider: Avatar_AvatarRootProvider,
+    Context: Avatar.Context,
+    Image: Avatar_AvatarImage,
+    Fallback: Avatar_AvatarFallback
+});
+export { Avatar_Avatar as Avatar, useAvatar, useAvatarContext };

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

@@ -0,0 +1 @@
+export { Avatar, useAvatar, useAvatarContext } from './Avatar.js';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, useAvatar, useAvatarContext } from "./Avatar.js";

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

@@ -0,0 +1,11 @@
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    variant?: BadgeVariant;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        variant?: BadgeVariant;
+    } & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Dot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { Badge };

package/dist/components/badge/Badge.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+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'
+    }
+});
+const Badge_BadgeLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        ...props,
+        "data-scope": "badge",
+        "data-part": "label",
+        "data-slot": "badge-label",
+        className: cn('min-w-0 overflow-hidden text-ellipsis', className)
+    });
+});
+const Badge_BadgeRoot = /*#__PURE__*/ forwardRef(function({ className, variant = 'default', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        ...props,
+        "data-scope": "badge",
+        "data-part": "root",
+        "data-slot": "badge-root",
+        "data-variant": variant,
+        className: cn(badgeVariants({
+            variant
+        }), className)
+    });
+});
+const Badge_BadgeDot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        ...props,
+        "data-scope": "badge",
+        "data-part": "dot",
+        "data-slot": "badge-dot",
+        "aria-hidden": "true",
+        className: cn('size-1.5 shrink-0 rounded-full bg-current', className)
+    });
+});
+const Badge = Object.assign(Badge_BadgeRoot, {
+    Root: Badge_BadgeRoot,
+    Label: Badge_BadgeLabel,
+    Dot: Badge_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/bleed/Bleed.d.ts

@@ -0,0 +1,12 @@
+type BleedAmount = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BleedInline = BleedAmount | 'full';
+declare const Bleed: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    inline?: BleedInline;
+    block?: BleedAmount;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        inline?: BleedInline;
+        block?: BleedAmount;
+    } & import("react").RefAttributes<HTMLElement>>;
+};
+export { Bleed };

package/dist/components/bleed/Bleed.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+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'
+    }
+});
+const Bleed_BleedRoot = /*#__PURE__*/ forwardRef(function({ inline = 'full', block = 'none', className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        ...props,
+        "data-scope": "bleed",
+        "data-part": "root",
+        "data-slot": "bleed-root",
+        "data-inline": inline,
+        "data-block": block,
+        className: cn(bleedVariants({
+            inline,
+            block
+        }), className)
+    });
+});
+const Bleed = Object.assign(Bleed_BleedRoot, {
+    Root: Bleed_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/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLArkProps } from '@ark-ui/react/factory';
+import type { Key, ReactNode } from 'react';
+type BreadcrumbsPathItem = {
+    href?: string;
+    key?: Key;
+    label: ReactNode;
+};
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLOListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Path: import("react").ForwardRefExoticComponent<Omit<HTMLArkProps<"ol">, "asChild" | "children"> & {
+        items: readonly BreadcrumbsPathItem[];
+        separator?: ReactNode;
+    } & import("react").RefAttributes<HTMLOListElement>>;
+    Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLLIElement>>;
+    Ellipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { Fragment, forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+import { ChevronRightIcon } from "../../internal/icons/ui/index.js";
+const Breadcrumbs_BreadcrumbsRoot = /*#__PURE__*/ forwardRef(function({ className, 'aria-label': ariaLabel = 'Breadcrumb', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.nav, {
+        ref: ref,
+        "aria-label": ariaLabel,
+        ...props,
+        "data-slot": "breadcrumbs-root",
+        className: cn('max-w-full text-sm text-muted-foreground', className)
+    });
+});
+const Breadcrumbs_BreadcrumbsList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.ol, {
+        ref: ref,
+        ...props,
+        "data-slot": "breadcrumbs-list",
+        className: 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", className)
+    });
+});
+const Breadcrumbs_BreadcrumbsItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.li, {
+        ref: ref,
+        ...props,
+        "data-slot": "breadcrumbs-item",
+        className: cn('inline-flex min-w-0 items-center', className)
+    });
+});
+const Breadcrumbs_BreadcrumbsLink = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.a, {
+        ref: ref,
+        ...props,
+        "data-slot": "breadcrumbs-link",
+        className: 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', className)
+    });
+});
+const Breadcrumbs_BreadcrumbsPage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        ...props,
+        "data-slot": "breadcrumbs-page",
+        "aria-current": "page",
+        className: cn('block max-w-full min-w-0 truncate px-1 font-medium text-foreground', className)
+    });
+});
+const Breadcrumbs_BreadcrumbsPath = /*#__PURE__*/ forwardRef(function({ items, separator, ...props }, ref) {
+    return /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsList, {
+        ref: ref,
+        ...props,
+        children: items.map((item, index)=>{
+            const isLastItem = index === items.length - 1;
+            return /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsItem, {
+                        children: isLastItem ? /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsPage, {
+                            children: item.label
+                        }) : /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsLink, {
+                            href: item.href,
+                            children: item.label
+                        })
+                    }),
+                    isLastItem ? null : /*#__PURE__*/ jsx(Breadcrumbs_BreadcrumbsSeparator, {
+                        children: separator
+                    })
+                ]
+            }, item.key ?? index);
+        })
+    });
+});
+const Breadcrumbs_BreadcrumbsSeparator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.li, {
+        ref: ref,
+        ...props,
+        "data-slot": "breadcrumbs-separator",
+        "aria-hidden": "true",
+        className: cn('inline-flex items-center text-[length:0.875em] leading-none text-muted-foreground select-none', className),
+        children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {
+            className: "size-[1em] flex-none rtl:rotate-180"
+        })
+    });
+});
+const Breadcrumbs_BreadcrumbsEllipsis = /*#__PURE__*/ forwardRef(function({ className, children = '...', ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.span, {
+        ref: ref,
+        ...props,
+        "data-slot": "breadcrumbs-ellipsis",
+        "aria-hidden": "true",
+        className: cn('inline-flex min-h-4 min-w-4 items-center justify-center overflow-hidden px-1 text-ellipsis text-muted-foreground', className),
+        children: children
+    });
+});
+const Breadcrumbs = Object.assign(Breadcrumbs_BreadcrumbsRoot, {
+    Root: Breadcrumbs_BreadcrumbsRoot,
+    List: Breadcrumbs_BreadcrumbsList,
+    Item: Breadcrumbs_BreadcrumbsItem,
+    Link: Breadcrumbs_BreadcrumbsLink,
+    Path: Breadcrumbs_BreadcrumbsPath,
+    Page: Breadcrumbs_BreadcrumbsPage,
+    Separator: Breadcrumbs_BreadcrumbsSeparator,
+    Ellipsis: Breadcrumbs_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/button/Button.d.ts

@@ -0,0 +1,18 @@
+declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    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;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        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;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { Button };

package/dist/components/button/Button.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+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 appearance-none transition-[background-color,border-color,color,opacity,transform] duration-200 ease-in-out select-none whitespace-nowrap focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring 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 [&>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 Button_ButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, disabled, loading = false, onClick, onClickCapture, size = 'md', type, 'data-scope': dataScope = 'button', 'data-part': dataPart = 'root', 'data-slot': dataSlot, variant = 'default', 'aria-busy': ariaBusy, 'aria-disabled': ariaDisabled, ...props }, ref) {
+    const isDisabled = disabled || loading || true === ariaDisabled || 'true' === ariaDisabled;
+    const nativeDisabled = asChild ? void 0 : isDisabled;
+    const resolvedAriaBusy = loading ? true : ariaBusy;
+    const resolvedAriaDisabled = isDisabled ? true : ariaDisabled;
+    return /*#__PURE__*/ jsx(ark.button, {
+        ref: ref,
+        asChild: asChild,
+        type: asChild ? type : type ?? 'button',
+        disabled: nativeDisabled,
+        "aria-busy": resolvedAriaBusy,
+        "aria-disabled": resolvedAriaDisabled,
+        ...props,
+        onClickCapture: (event)=>{
+            if (isDisabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            onClickCapture?.(event);
+        },
+        onClick: (event)=>{
+            if (isDisabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            onClick?.(event);
+        },
+        "data-scope": dataScope,
+        "data-part": dataPart,
+        "data-slot": dataSlot ?? 'button-root',
+        "data-variant": variant,
+        "data-size": size,
+        "data-disabled": isDisabled ? '' : void 0,
+        "data-loading": loading ? '' : void 0,
+        className: cn(buttonVariants({
+            variant,
+            size
+        }), className)
+    });
+});
+const Button = Object.assign(Button_ButtonRoot, {
+    Root: Button_ButtonRoot
+});
+export { Button };

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

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

package/dist/components/button/index.js

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

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

@@ -0,0 +1,19 @@
+declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'elevated' | 'outline' | 'subtle';
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
+        size?: 'sm' | 'md' | 'lg';
+        variant?: 'elevated' | 'outline' | 'subtle';
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Media: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Background: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Action: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLAnchorElement>>;
+};
+export { Card };

package/dist/components/card/Card.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../internal/cn.js";
+const cardRootVariants = cva('group/card relative flex w-full min-w-0 flex-col rounded-lg text-card-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring has-[>[data-slot=card-background]]:isolate [&:has(>[data-slot=card-background])>*:not([data-slot=card-background])]:z-1 [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:relative [&:has([data-slot=card-link])_:is(a,button,input,select,textarea,[role=button],[role=checkbox],[role=menuitem],[role=switch],[tabindex]:not([tabindex=-1])):not([data-slot=card-link])]:z-1', {
+    variants: {
+        variant: {
+            elevated: 'border-0 bg-card shadow-md',
+            outline: 'border border-border bg-card',
+            subtle: 'border-0 bg-muted'
+        }
+    },
+    defaultVariants: {
+        variant: 'outline'
+    }
+});
+const Card_CardRoot = /*#__PURE__*/ forwardRef(function({ className, size, variant, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "root",
+        "data-slot": "card-root",
+        "data-size": size ?? 'md',
+        "data-variant": variant ?? 'outline',
+        className: cn(cardRootVariants({
+            variant
+        }), className),
+        ...props
+    });
+});
+const Card_CardHeader = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "header",
+        "data-slot": "card-header",
+        className: cn('grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1 px-6 pt-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pt-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-4', className),
+        ...props
+    });
+});
+const Card_CardBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "body",
+        "data-slot": "card-body",
+        className: cn('min-w-0 px-6 pt-4 pb-6 text-sm wrap-anywhere text-muted-foreground group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 first:pt-6 group-data-[size=lg]/card:first:pt-8 group-data-[size=sm]/card:first:pt-4', className),
+        ...props
+    });
+});
+const Card_CardMedia = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "media",
+        "data-slot": "card-media",
+        className: cn('min-w-0 overflow-hidden rounded-ss-[inherit] rounded-se-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:w-full [&>picture]:block [&>picture>img]:w-full', className),
+        ...props
+    });
+});
+const Card_CardBackground = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "background",
+        "data-slot": "card-background",
+        className: cn('absolute inset-0 z-0 overflow-hidden rounded-[inherit] [&>:is(img,picture,video,canvas,svg,iframe)]:size-full [&>:is(img,picture,video,canvas,svg,iframe)]:object-cover [&>picture]:block [&>picture>img]:size-full [&>picture>img]:object-cover', className),
+        ...props
+    });
+});
+const Card_CardFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "footer",
+        "data-slot": "card-footer",
+        className: cn('flex min-w-0 flex-wrap items-center gap-2 px-6 pb-6 group-data-[size=lg]/card:px-8 group-data-[size=lg]/card:pb-8 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4', className),
+        ...props
+    });
+});
+const Card_CardTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.h3, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "title",
+        "data-slot": "card-title",
+        className: cn('col-start-1 min-w-0 text-lg font-semibold wrap-anywhere group-data-[size=lg]/card:text-xl group-data-[size=sm]/card:text-md', className),
+        ...props
+    });
+});
+const Card_CardDescription = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.p, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "description",
+        "data-slot": "card-description",
+        className: cn('col-start-1 min-w-0 text-sm wrap-anywhere text-muted-foreground', className),
+        ...props
+    });
+});
+const Card_CardAction = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "action",
+        "data-slot": "card-action",
+        className: cn('relative z-1 col-start-2 row-span-2 row-start-1 inline-flex items-start justify-end gap-2 justify-self-end', className),
+        ...props
+    });
+});
+const Card_CardLink = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.a, {
+        ref: ref,
+        "data-scope": "card",
+        "data-part": "link",
+        "data-slot": "card-link",
+        className: cn('static text-inherit no-underline after:absolute after:inset-0 after:z-0 after:rounded-lg focus-visible:outline-0 focus-visible:after:outline-2 focus-visible:after:outline-offset-1 focus-visible:after:outline-ring', className),
+        ...props
+    });
+});
+const Card = Object.assign(Card_CardRoot, {
+    Root: Card_CardRoot,
+    Header: Card_CardHeader,
+    Body: Card_CardBody,
+    Media: Card_CardMedia,
+    Background: Card_CardBackground,
+    Footer: Card_CardFooter,
+    Title: Card_CardTitle,
+    Description: Card_CardDescription,
+    Action: Card_CardAction,
+    Link: Card_CardLink
+});
+export { Card };

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

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

package/dist/components/card/index.js

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