@moduix/react 2.1.0 → 2.2.4

package/dist/components/breadcrumbs/Breadcrumbs_module.css

@@ -0,0 +1,105 @@
+@layer moduix.components {
+  .root-B6shiI[data-scope="breadcrumbs"][data-part="root"] {
+    max-width: var(--moduix-breadcrumbs-max-width, 100%);
+    color: var(--moduix-breadcrumbs-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-breadcrumbs-font-size, var(--moduix-text-sm));
+    line-height: var(--moduix-breadcrumbs-line-height, var(--moduix-line-height-text-sm));
+  }
+
+  .list-FZ1rud[data-scope="breadcrumbs"][data-part="list"] {
+    align-items: center;
+    gap: var(--moduix-breadcrumbs-gap, var(--moduix-spacing-1));
+    white-space: nowrap;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .list-FZ1rud[data-scope="breadcrumbs"][data-part="list"] > .item-RCrA_4:last-child {
+    max-width: var(--moduix-breadcrumbs-item-max-width, 16rem);
+    flex: auto;
+  }
+
+  .item-RCrA_4[data-scope="breadcrumbs"][data-part="item"] {
+    flex: 0 auto;
+    align-items: center;
+    min-width: 0;
+    display: inline-flex;
+  }
+
+  .link-xaIY1W[data-scope="breadcrumbs"][data-part="link"], .page-IrZ65J[data-scope="breadcrumbs"][data-part="page"] {
+    min-width: 0;
+    max-width: 100%;
+    padding-inline: var(--moduix-breadcrumbs-item-padding-x, var(--moduix-spacing-1));
+    white-space: nowrap;
+    display: block;
+  }
+
+  .link-xaIY1W[data-scope="breadcrumbs"][data-part="link"], .page-IrZ65J[data-scope="breadcrumbs"][data-part="page"], .ellipsis-BQEu94[data-scope="breadcrumbs"][data-part="ellipsis"] {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .link-xaIY1W[data-scope="breadcrumbs"][data-part="link"] {
+    color: var(--moduix-breadcrumbs-link-color, var(--moduix-color-muted-foreground));
+    -webkit-text-decoration: var(--moduix-breadcrumbs-link-text-decoration, none);
+    text-decoration: var(--moduix-breadcrumbs-link-text-decoration, none);
+    text-underline-offset: var(--moduix-breadcrumbs-link-underline-offset, .2em);
+    border-radius: var(--moduix-breadcrumbs-link-radius, var(--moduix-radius-sm));
+    transition: var(--moduix-breadcrumbs-link-transition, var(--moduix-transition-default));
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    .link-xaIY1W[data-scope="breadcrumbs"][data-part="link"]:hover {
+      color: var(--moduix-breadcrumbs-link-color-hover, var(--moduix-color-foreground));
+      -webkit-text-decoration: var(--moduix-breadcrumbs-link-text-decoration-hover, none);
+      text-decoration: var(--moduix-breadcrumbs-link-text-decoration-hover, none);
+    }
+  }
+
+  .link-xaIY1W[data-scope="breadcrumbs"][data-part="link"]:focus-visible {
+    box-shadow: 0 0 0
+        var(--moduix-breadcrumbs-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        var(--moduix-breadcrumbs-focus-ring-color, var(--moduix-color-ring));
+  }
+
+  .page-IrZ65J[data-scope="breadcrumbs"][data-part="page"] {
+    color: var(--moduix-breadcrumbs-page-color, var(--moduix-color-foreground));
+    font-weight: var(--moduix-breadcrumbs-page-font-weight, var(--moduix-weight-medium));
+  }
+
+  .separator-VULbp1[data-scope="breadcrumbs"][data-part="separator"] {
+    color: var(--moduix-breadcrumbs-separator-color, var(--moduix-color-muted-foreground));
+    font-size: var(--moduix-breadcrumbs-separator-font-size, .875em);
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+  }
+
+  .separatorIcon-Te8UH5 {
+    width: var(--moduix-breadcrumbs-separator-icon-size, 1em);
+    height: var(--moduix-breadcrumbs-separator-icon-size, 1em);
+    flex: none;
+  }
+
+  [dir="rtl"] .separatorIcon-Te8UH5 {
+    transform: rotate(180deg);
+  }
+
+  .ellipsis-BQEu94[data-scope="breadcrumbs"][data-part="ellipsis"] {
+    min-width: var(--moduix-breadcrumbs-ellipsis-size, var(--moduix-spacing-4));
+    min-height: var(--moduix-breadcrumbs-ellipsis-size, var(--moduix-spacing-4));
+    padding-inline: var(--moduix-breadcrumbs-item-padding-x, var(--moduix-spacing-1));
+    color: var(--moduix-breadcrumbs-ellipsis-color, var(--moduix-color-muted-foreground));
+    border-radius: var(--moduix-breadcrumbs-ellipsis-radius, var(--moduix-radius-sm));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}
+

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

@@ -1,2 +1 @@
-import { Breadcrumbs } from "./Breadcrumbs.js";
-export { Breadcrumbs };
+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

@@ -1,20 +1,18 @@
-//#region src/components/button/Button.d.ts
 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>>;
+} & 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>>;
 };
-//#endregion
-export { Button };
+export { Button };

package/dist/components/button/Button.js

@@ -1,33 +1,41 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import Button_module_default from "./Button.module.js";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/button/Button.tsx
-const ButtonRoot = forwardRef(function ButtonRoot({ asChild, className, disabled, loading = false, 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 nativeDisabled = asChild ? void 0 : loading || disabled;
-	const resolvedAriaBusy = loading ? true : ariaBusy;
-	const resolvedAriaDisabled = loading ? true : ariaDisabled;
-	const isDisabled = disabled || loading || resolvedAriaDisabled === true || resolvedAriaDisabled === "true";
-	return /* @__PURE__ */ jsx(ark.button, {
-		ref,
-		asChild,
-		type: asChild ? type : type ?? "button",
-		disabled: nativeDisabled,
-		"aria-busy": resolvedAriaBusy,
-		"aria-disabled": resolvedAriaDisabled,
-		...props,
-		"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: clsx(Button_module_default.root, normalizeClassName(className))
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import Button_module from "./Button.module.js";
+const Button_ButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, disabled, loading = false, onClick, 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,
+        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: clsx(Button_module.root, normalizeClassName(className))
+    });
+});
+const Button = Object.assign(Button_ButtonRoot, {
+    Root: Button_ButtonRoot
 });
-const Button = Object.assign(ButtonRoot, { Root: ButtonRoot });
-//#endregion
 export { Button };

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

@@ -1,5 +1,5 @@
-import './Button.css';
-//#region src/components/button/Button.module.css
-var Button_module_default = { "root": "NbN_ya_root" };
-//#endregion
-export { Button_module_default as default };
+import "./Button_module.css";
+const Button_module = {
+    root: "root-RR_712"
+};
+export default Button_module;

package/dist/components/button/Button_module.css

@@ -0,0 +1,230 @@
+@layer moduix.components {
+  .root-RR_712 {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--moduix-button-content-gap, var(--moduix-spacing-2));
+    border: var(--moduix-button-border-width, var(--moduix-border-width-sm)) solid transparent;
+    border-radius: var(--moduix-button-radius, var(--moduix-radius-md));
+    color: var(--moduix-button-color, var(--moduix-color-foreground));
+    appearance: none;
+    font: inherit;
+    font-size: var(--moduix-button-font-size, var(--moduix-text-sm));
+    font-weight: var(--moduix-button-font-weight, var(--moduix-weight-medium));
+    line-height: var(--moduix-button-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color var(--moduix-button-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-button-transition, var(--moduix-transition-default)),
+      color var(--moduix-button-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-button-transition, var(--moduix-transition-default)),
+      box-shadow var(--moduix-button-transition, var(--moduix-transition-default)),
+      transform var(--moduix-button-transition, var(--moduix-transition-default));
+    background-color: #0000;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .root-RR_712:focus-visible {
+    outline: var(--moduix-button-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-button-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: calc(var(--moduix-button-focus-ring-offset, var(--moduix-button-border-width, var(--moduix-border-width-sm))) *
+          -1);
+  }
+
+  .root-RR_712:active:not([data-disabled]) {
+    opacity: .94;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .root-RR_712:active:not([data-disabled]):not([data-variant="link"]) {
+      transform: translateY(1px) scale(.985);
+    }
+  }
+
+  .root-RR_712[data-disabled] {
+    opacity: var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled));
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .root-RR_712[data-loading] {
+    cursor: progress;
+  }
+
+  .root-RR_712 > :where(svg) {
+    width: var(--moduix-button-icon-size, var(--moduix-spacing-4));
+    height: var(--moduix-button-icon-size, var(--moduix-spacing-4));
+    flex-shrink: 0;
+  }
+
+  .root-RR_712 [data-icon="inline-start"], .root-RR_712 [data-icon="inline-end"] {
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .root-RR_712[data-variant="default"] {
+    border-color: var(--moduix-button-default-border-color, var(--moduix-color-primary));
+    background-color: var(--moduix-button-default-bg, var(--moduix-color-primary));
+    color: var(--moduix-button-default-color, var(--moduix-color-primary-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="default"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-default-bg-hover, color-mix(in srgb,
+              var(--moduix-button-default-bg, var(--moduix-color-primary)) 88%,
+              black));
+    }
+  }
+
+  .root-RR_712[data-variant="outline"] {
+    border-color: var(--moduix-button-outline-border-color, var(--moduix-color-border));
+    background-color: var(--moduix-button-outline-bg, var(--moduix-color-background));
+    color: var(--moduix-button-outline-color, var(--moduix-color-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="outline"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-outline-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-RR_712[data-variant="secondary"] {
+    border-color: var(--moduix-button-secondary-border-color, var(--moduix-color-secondary));
+    background-color: var(--moduix-button-secondary-bg, var(--moduix-color-secondary));
+    color: var(--moduix-button-secondary-color, var(--moduix-color-secondary-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="secondary"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-secondary-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-RR_712[data-variant="destructive"] {
+    border-color: var(--moduix-button-destructive-border-color, var(--moduix-color-destructive));
+    background-color: var(--moduix-button-destructive-bg, var(--moduix-color-destructive));
+    color: var(--moduix-button-destructive-color, var(--moduix-color-destructive-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="destructive"]:not([data-disabled]):hover {
+      filter: brightness(var(--moduix-button-destructive-hover-brightness, .96));
+    }
+  }
+
+  .root-RR_712[data-variant="destructive-outline"] {
+    border-color: var(--moduix-button-destructive-outline-border-color, var(--moduix-color-destructive));
+    background-color: var(--moduix-button-destructive-outline-bg, var(--moduix-color-background));
+    color: var(--moduix-button-destructive-outline-color, var(--moduix-color-destructive));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="destructive-outline"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-destructive-outline-bg-hover, var(--moduix-color-destructive));
+      color: var(--moduix-button-destructive-outline-color-hover, var(--moduix-button-destructive-color, var(--moduix-color-destructive-foreground)));
+    }
+  }
+
+  .root-RR_712[data-variant="ghost"] {
+    border-color: var(--moduix-button-ghost-border-color, transparent);
+    background-color: var(--moduix-button-ghost-bg, transparent);
+    color: var(--moduix-button-ghost-color, var(--moduix-color-foreground));
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="ghost"]:not([data-disabled]):hover {
+      background-color: var(--moduix-button-ghost-bg-hover, var(--moduix-color-accent));
+    }
+  }
+
+  .root-RR_712[data-variant="link"] {
+    color: var(--moduix-button-link-color, var(--moduix-color-primary));
+    -webkit-text-decoration: var(--moduix-button-link-text-decoration, underline);
+    text-decoration: var(--moduix-button-link-text-decoration, underline);
+    text-underline-offset: var(--moduix-button-link-underline-offset, .25em);
+    background-color: #0000;
+    border-color: #0000;
+    padding-inline: 0;
+  }
+
+  @media (hover: hover) {
+    .root-RR_712[data-variant="link"]:not([data-disabled]):hover {
+      color: var(--moduix-button-link-color-hover, var(--moduix-color-foreground));
+    }
+  }
+
+  .root-RR_712[data-size="xs"] {
+    min-height: var(--moduix-button-size-xs, var(--moduix-size-xs));
+    padding-block: var(--moduix-button-padding-y-xs, var(--moduix-spacing-0-5));
+    padding-inline: var(--moduix-button-padding-x-xs, var(--moduix-spacing-2-5));
+    font-size: var(--moduix-button-font-size-xs, var(--moduix-text-xs));
+    line-height: var(--moduix-button-line-height-xs, var(--moduix-line-height-text-xs));
+  }
+
+  .root-RR_712[data-size="sm"] {
+    min-height: var(--moduix-button-size-sm, var(--moduix-size-sm));
+    padding-block: var(--moduix-button-padding-y-sm, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-button-padding-x-sm, var(--moduix-spacing-3));
+    font-size: var(--moduix-button-font-size-sm, var(--moduix-text-sm));
+    line-height: var(--moduix-button-line-height-sm, var(--moduix-line-height-text-sm));
+  }
+
+  .root-RR_712[data-size="md"] {
+    min-height: var(--moduix-button-size-md, var(--moduix-size-md));
+    padding-block: var(--moduix-button-padding-y-md, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-button-padding-x-md, var(--moduix-spacing-4));
+    font-size: var(--moduix-button-font-size-md, var(--moduix-text-sm));
+    line-height: var(--moduix-button-line-height-md, var(--moduix-line-height-text-sm));
+  }
+
+  .root-RR_712[data-size="lg"] {
+    min-height: var(--moduix-button-size-lg, var(--moduix-size-lg));
+    padding-block: var(--moduix-button-padding-y-lg, var(--moduix-spacing-1-5));
+    padding-inline: var(--moduix-button-padding-x-lg, var(--moduix-spacing-5));
+    font-size: var(--moduix-button-font-size-lg, var(--moduix-text-md));
+    line-height: var(--moduix-button-line-height-lg, var(--moduix-line-height-text-md));
+  }
+
+  .root-RR_712[data-size="xl"] {
+    min-height: var(--moduix-button-size-xl, var(--moduix-size-xl));
+    padding-block: var(--moduix-button-padding-y-xl, var(--moduix-spacing-2));
+    padding-inline: var(--moduix-button-padding-x-xl, var(--moduix-spacing-6));
+    font-size: var(--moduix-button-font-size-xl, var(--moduix-text-lg));
+    line-height: var(--moduix-button-line-height-xl, var(--moduix-line-height-text-lg));
+  }
+
+  .root-RR_712[data-size="icon-sm"], .root-RR_712[data-size="icon-md"], .root-RR_712[data-size="icon-lg"] {
+    gap: 0;
+    padding: 0;
+  }
+
+  .root-RR_712[data-size="icon-sm"] {
+    width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+    min-width: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+    height: var(--moduix-button-size-icon-sm, var(--moduix-size-sm));
+  }
+
+  .root-RR_712[data-size="icon-md"] {
+    width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+    min-width: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+    height: var(--moduix-button-size-icon-md, var(--moduix-size-md));
+  }
+
+  .root-RR_712[data-size="icon-lg"] {
+    width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+    min-width: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+    height: var(--moduix-button-size-icon-lg, var(--moduix-size-lg));
+  }
+
+  .root-RR_712[data-variant="link"] {
+    min-height: 0;
+    padding-block: 0;
+  }
+}
+

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

@@ -1,20 +1,18 @@
-//#region src/components/card/Card.d.ts
 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>>;
-  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>>;
+} & import("react").RefAttributes<HTMLElement>> & {
+    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<HTMLElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Media: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Action: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
 };
-//#endregion
-export { Card };
+export { Card };