@moduix/react 2.5.1 → 2.6.0

package/dist/components/badge/Badge.js

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
-import { Children, forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { forwardRef } from "react";
 import Badge_module from "./Badge.module.js";
 const Badge_BadgeLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
@@ -11,10 +10,10 @@ const Badge_BadgeLabel = /*#__PURE__*/ forwardRef(function({ className, ...props
         "data-scope": "badge",
         "data-part": "label",
         "data-slot": "badge-label",
-        className: clsx(Badge_module.label, normalizeClassName(className))
+        className: clsx(Badge_module.label, className)
     });
 });
-const Badge_BadgeRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, variant = 'default', ...props }, ref) {
+const Badge_BadgeRoot = /*#__PURE__*/ forwardRef(function({ className, variant = 'default', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
         ...props,
@@ -22,11 +21,7 @@ const Badge_BadgeRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, c
         "data-part": "root",
         "data-slot": "badge-root",
         "data-variant": variant,
-        className: clsx(Badge_module.root, normalizeClassName(className)),
-        asChild: asChild,
-        children: asChild ? children : Children.map(children, (child)=>'string' == typeof child || 'number' == typeof child ? /*#__PURE__*/ jsx(Badge_BadgeLabel, {
-                children: child
-            }) : child)
+        className: clsx(Badge_module.root, className)
     });
 });
 const Badge_BadgeDot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -37,7 +32,7 @@ const Badge_BadgeDot = /*#__PURE__*/ forwardRef(function({ className, ...props }
         "data-part": "dot",
         "data-slot": "badge-dot",
         "aria-hidden": "true",
-        className: clsx(Badge_module.dot, normalizeClassName(className))
+        className: clsx(Badge_module.dot, className)
     });
 });
 const Badge = Object.assign(Badge_BadgeRoot, {

package/dist/components/badge/Badge_module.css

@@ -7,7 +7,6 @@
     border: var(--moduix-badge-border-width, var(--moduix-border-width-sm)) solid
       var(--moduix-badge-border-color, var(--moduix-badge-default-border-color, transparent));
     border-radius: var(--moduix-badge-radius, var(--moduix-radius-full));
-    width: -moz-fit-content;
     width: fit-content;
     min-width: 0;
     max-width: 100%;
@@ -23,7 +22,6 @@
     -webkit-user-select: none;
     user-select: none;
     white-space: nowrap;
-    text-overflow: ellipsis;
     vertical-align: middle;
     transition: color var(--moduix-badge-transition, var(--moduix-transition-default)),
       background-color var(--moduix-badge-transition, var(--moduix-transition-default)),
@@ -34,39 +32,34 @@
     overflow: hidden;
   }
 
-  .root-qRQEjV:is(a, button, [role="button"]):focus-visible {
+  .root-qRQEjV:focus-visible {
     outline: var(--moduix-badge-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-          solid var(--moduix-badge-focus-ring-color, var(--moduix-color-ring));
+        solid var(--moduix-badge-focus-ring-color, var(--moduix-color-ring));
     outline-offset: var(--moduix-badge-focus-ring-offset, var(--moduix-focus-ring-offset));
   }
 
-  .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"]) {
+  .root-qRQEjV:is(a) {
     cursor: pointer;
   }
 
-  :is(.root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[data-variant="default"], .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[data-variant="secondary"], .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[data-variant="destructive"]):hover {
+  .root-qRQEjV:is(a):is([data-variant="default"], [data-variant="secondary"], [data-variant="destructive"]):hover {
     opacity: var(--moduix-badge-opacity-hover, var(--moduix-opacity-hover));
   }
 
-  .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[data-variant="outline"]:hover {
+  .root-qRQEjV:is(a)[data-variant="outline"]:hover {
     border-color: var(--moduix-badge-border-color, var(--moduix-badge-outline-border-color-hover, var(--moduix-color-primary)));
     color: var(--moduix-badge-color, var(--moduix-badge-outline-color-hover, var(--moduix-color-primary)));
   }
 
-  .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[data-variant="ghost"]:hover {
+  .root-qRQEjV:is(a)[data-variant="ghost"]:hover {
     border-color: var(--moduix-badge-border-color, var(--moduix-badge-ghost-border-color-hover, var(--moduix-color-primary)));
     color: var(--moduix-badge-color, var(--moduix-badge-ghost-color-hover, var(--moduix-color-primary)));
   }
 
-  .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[data-variant="link"]:hover {
+  .root-qRQEjV:is(a)[data-variant="link"]:hover {
     text-decoration-color: currentColor;
   }
 
-  .root-qRQEjV:is(a, button, [role="button"]):is(:disabled, [aria-disabled="true"]) {
-    cursor: not-allowed;
-    opacity: var(--moduix-badge-opacity-disabled, var(--moduix-opacity-disabled));
-  }
-
   .root-qRQEjV > svg {
     width: var(--moduix-badge-icon-size, var(--moduix-spacing-3));
     height: var(--moduix-badge-icon-size, var(--moduix-spacing-3));

package/dist/components/bleed/Bleed.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Bleed_module from "./Bleed.module.js";
 const Bleed_BleedRoot = /*#__PURE__*/ forwardRef(function({ inline = 'full', block = 'none', className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
@@ -13,7 +12,7 @@ const Bleed_BleedRoot = /*#__PURE__*/ forwardRef(function({ inline = 'full', blo
         "data-slot": "bleed-root",
         "data-inline": inline,
         "data-block": block,
-        className: clsx(Bleed_module.root, normalizeClassName(className))
+        className: clsx(Bleed_module.root, className)
     });
 });
 const Bleed = Object.assign(Bleed_BleedRoot, {

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

@@ -10,7 +10,7 @@ declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<import
     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">, "children" | "asChild"> & {
+    Path: import("react").ForwardRefExoticComponent<Omit<HTMLArkProps<"ol">, "asChild" | "children"> & {
         items: readonly BreadcrumbsPathItem[];
         separator?: ReactNode;
     } & import("react").RefAttributes<HTMLOListElement>>;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -3,58 +3,47 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { Fragment, forwardRef } from "react";
 import { ChevronRightIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Breadcrumbs_module from "./Breadcrumbs.module.js";
 const Breadcrumbs_BreadcrumbsRoot = /*#__PURE__*/ forwardRef(function({ className, 'aria-label': ariaLabel = 'Breadcrumb', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.nav, {
         ref: ref,
-        "data-scope": "breadcrumbs",
-        "data-part": "root",
-        "data-slot": "breadcrumbs-root",
         "aria-label": ariaLabel,
-        className: clsx(Breadcrumbs_module.root, normalizeClassName(className)),
-        ...props
+        ...props,
+        "data-slot": "breadcrumbs-root",
+        className: clsx(Breadcrumbs_module.root, className)
     });
 });
 const Breadcrumbs_BreadcrumbsList = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.ol, {
         ref: ref,
-        "data-scope": "breadcrumbs",
-        "data-part": "list",
+        ...props,
         "data-slot": "breadcrumbs-list",
-        className: clsx(Breadcrumbs_module.list, normalizeClassName(className)),
-        ...props
+        className: clsx(Breadcrumbs_module.list, className)
     });
 });
 const Breadcrumbs_BreadcrumbsItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
-        "data-scope": "breadcrumbs",
-        "data-part": "item",
+        ...props,
         "data-slot": "breadcrumbs-item",
-        className: clsx(Breadcrumbs_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(Breadcrumbs_module.item, className)
     });
 });
 const Breadcrumbs_BreadcrumbsLink = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.a, {
         ref: ref,
-        "data-scope": "breadcrumbs",
-        "data-part": "link",
+        ...props,
         "data-slot": "breadcrumbs-link",
-        className: clsx(Breadcrumbs_module.link, normalizeClassName(className)),
-        ...props
+        className: clsx(Breadcrumbs_module.link, className)
     });
 });
 const Breadcrumbs_BreadcrumbsPage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "breadcrumbs",
-        "data-part": "page",
+        ...props,
         "data-slot": "breadcrumbs-page",
         "aria-current": "page",
-        className: clsx(Breadcrumbs_module.page, normalizeClassName(className)),
-        ...props
+        className: clsx(Breadcrumbs_module.page, className)
     });
 });
 const Breadcrumbs_BreadcrumbsPath = /*#__PURE__*/ forwardRef(function({ items, separator, ...props }, ref) {
@@ -81,16 +70,13 @@ const Breadcrumbs_BreadcrumbsPath = /*#__PURE__*/ forwardRef(function({ items, s
         })
     });
 });
-const Breadcrumbs_BreadcrumbsSeparator = /*#__PURE__*/ forwardRef(function({ className, children, role = 'presentation', ...props }, ref) {
+const Breadcrumbs_BreadcrumbsSeparator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
-        "data-scope": "breadcrumbs",
-        "data-part": "separator",
+        ...props,
         "data-slot": "breadcrumbs-separator",
         "aria-hidden": "true",
-        role: role,
-        className: clsx(Breadcrumbs_module.separator, normalizeClassName(className)),
-        ...props,
+        className: clsx(Breadcrumbs_module.separator, className),
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {
             className: Breadcrumbs_module.separatorIcon
         })
@@ -99,12 +85,10 @@ const Breadcrumbs_BreadcrumbsSeparator = /*#__PURE__*/ forwardRef(function({ cla
 const Breadcrumbs_BreadcrumbsEllipsis = /*#__PURE__*/ forwardRef(function({ className, children = '...', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-scope": "breadcrumbs",
-        "data-part": "ellipsis",
+        ...props,
         "data-slot": "breadcrumbs-ellipsis",
         "aria-hidden": "true",
-        className: clsx(Breadcrumbs_module.ellipsis, normalizeClassName(className)),
-        ...props,
+        className: clsx(Breadcrumbs_module.ellipsis, className),
         children: children
     });
 });

package/dist/components/breadcrumbs/Breadcrumbs_module.css

@@ -1,12 +1,12 @@
 @layer moduix.components {
-  .root-B6shiI[data-scope="breadcrumbs"][data-part="root"] {
+  .root-B6shiI {
     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"] {
+  .list-FZ1rud {
     align-items: center;
     gap: var(--moduix-breadcrumbs-gap, var(--moduix-spacing-1));
     white-space: nowrap;
@@ -17,19 +17,18 @@
     display: flex;
   }
 
-  .list-FZ1rud[data-scope="breadcrumbs"][data-part="list"] > .item-RCrA_4:last-child {
+  .list-FZ1rud > .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;
+  .item-RCrA_4 {
     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"] {
+  .link-xaIY1W, .page-IrZ65J {
     min-width: 0;
     max-width: 100%;
     padding-inline: var(--moduix-breadcrumbs-item-padding-x, var(--moduix-spacing-1));
@@ -37,12 +36,12 @@
     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"] {
+  .link-xaIY1W, .page-IrZ65J, .ellipsis-BQEu94 {
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
-  .link-xaIY1W[data-scope="breadcrumbs"][data-part="link"] {
+  .link-xaIY1W {
     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);
@@ -53,25 +52,25 @@
   }
 
   @media (hover: hover) {
-    .link-xaIY1W[data-scope="breadcrumbs"][data-part="link"]:hover {
+    .link-xaIY1W: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 {
+  .link-xaIY1W: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"] {
+  .page-IrZ65J {
     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"] {
+  .separator-VULbp1 {
     color: var(--moduix-breadcrumbs-separator-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-breadcrumbs-separator-font-size, .875em);
     -webkit-user-select: none;
@@ -91,12 +90,11 @@
     transform: rotate(180deg);
   }
 
-  .ellipsis-BQEu94[data-scope="breadcrumbs"][data-part="ellipsis"] {
+  .ellipsis-BQEu94 {
     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/button/Button.d.ts

@@ -1,15 +1,15 @@
 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";
+    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";
+        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;

package/dist/components/button/Button.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-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, 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;
@@ -40,7 +39,7 @@ const Button_ButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className
         "data-size": size,
         "data-disabled": isDisabled ? '' : void 0,
         "data-loading": loading ? '' : void 0,
-        className: clsx(Button_module.root, normalizeClassName(className))
+        className: clsx(Button_module.root, className)
     });
 });
 const Button = Object.assign(Button_ButtonRoot, {

package/dist/components/button/Button_module.css

@@ -20,7 +20,6 @@
       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;
@@ -35,13 +34,9 @@
           -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:active:not([data-variant="link"]) {
+      transform: translateY(1px);
     }
   }
 

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

@@ -1,19 +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<HTMLElement>> & {
+    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<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>>;
-    Background: 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>>;
+        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

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Card_module from "./Card.module.js";
 const Card_CardRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', variant = 'outline', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
@@ -12,7 +11,7 @@ const Card_CardRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md'
         "data-slot": "card-root",
         "data-size": size,
         "data-variant": variant,
-        className: clsx(Card_module.root, normalizeClassName(className)),
+        className: clsx(Card_module.root, className),
         ...props
     });
 });
@@ -22,7 +21,7 @@ const Card_CardHeader = /*#__PURE__*/ forwardRef(function({ className, ...props
         "data-scope": "card",
         "data-part": "header",
         "data-slot": "card-header",
-        className: clsx(Card_module.header, normalizeClassName(className)),
+        className: clsx(Card_module.header, className),
         ...props
     });
 });
@@ -32,7 +31,7 @@ const Card_CardBody = /*#__PURE__*/ forwardRef(function({ className, ...props },
         "data-scope": "card",
         "data-part": "body",
         "data-slot": "card-body",
-        className: clsx(Card_module.body, normalizeClassName(className)),
+        className: clsx(Card_module.body, className),
         ...props
     });
 });
@@ -42,7 +41,7 @@ const Card_CardMedia = /*#__PURE__*/ forwardRef(function({ className, ...props }
         "data-scope": "card",
         "data-part": "media",
         "data-slot": "card-media",
-        className: clsx(Card_module.media, normalizeClassName(className)),
+        className: clsx(Card_module.media, className),
         ...props
     });
 });
@@ -52,7 +51,7 @@ const Card_CardBackground = /*#__PURE__*/ forwardRef(function({ className, ...pr
         "data-scope": "card",
         "data-part": "background",
         "data-slot": "card-background",
-        className: clsx(Card_module.background, normalizeClassName(className)),
+        className: clsx(Card_module.background, className),
         ...props
     });
 });
@@ -62,7 +61,7 @@ const Card_CardFooter = /*#__PURE__*/ forwardRef(function({ className, ...props
         "data-scope": "card",
         "data-part": "footer",
         "data-slot": "card-footer",
-        className: clsx(Card_module.footer, normalizeClassName(className)),
+        className: clsx(Card_module.footer, className),
         ...props
     });
 });
@@ -72,7 +71,7 @@ const Card_CardTitle = /*#__PURE__*/ forwardRef(function({ className, ...props }
         "data-scope": "card",
         "data-part": "title",
         "data-slot": "card-title",
-        className: clsx(Card_module.title, normalizeClassName(className)),
+        className: clsx(Card_module.title, className),
         ...props
     });
 });
@@ -82,7 +81,7 @@ const Card_CardDescription = /*#__PURE__*/ forwardRef(function({ className, ...p
         "data-scope": "card",
         "data-part": "description",
         "data-slot": "card-description",
-        className: clsx(Card_module.description, normalizeClassName(className)),
+        className: clsx(Card_module.description, className),
         ...props
     });
 });
@@ -92,7 +91,7 @@ const Card_CardAction = /*#__PURE__*/ forwardRef(function({ className, ...props
         "data-scope": "card",
         "data-part": "action",
         "data-slot": "card-action",
-        className: clsx(Card_module.action, normalizeClassName(className)),
+        className: clsx(Card_module.action, className),
         ...props
     });
 });
@@ -102,7 +101,7 @@ const Card_CardLink = /*#__PURE__*/ forwardRef(function({ className, ...props },
         "data-scope": "card",
         "data-part": "link",
         "data-slot": "card-link",
-        className: clsx(Card_module.link, normalizeClassName(className)),
+        className: clsx(Card_module.link, className),
         ...props
     });
 });

package/dist/components/card/Card_module.css

@@ -4,7 +4,6 @@
     --_card-section-spacing-default: var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4)));
     --_card-title-font-size-default: var(--moduix-card-title-font-size, var(--moduix-text-lg));
     --_card-title-line-height-default: var(--moduix-card-title-line-height, var(--moduix-line-height-text-lg));
-    box-sizing: border-box;
     border: var(--moduix-card-border-width, var(--_card-border-width-default, var(--moduix-border-width-sm)))
       solid
       var(--moduix-card-border-color, var(--_card-border-color-default, var(--moduix-color-border)));
@@ -81,7 +80,6 @@
   }
 
   .header-F5Ms8N, .body-eUwDjL, .footer-QbUloO {
-    box-sizing: border-box;
     min-width: 0;
     padding-inline: var(--_card-padding-default);
   }
@@ -101,16 +99,12 @@
     overflow: hidden;
   }
 
-  .media-ARRUMe > :where(img, picture, video, canvas, svg, iframe) {
+  .media-ARRUMe > :where(img, picture, video, canvas, svg, iframe), .media-ARRUMe > picture > img {
     width: 100%;
     max-width: 100%;
     display: block;
   }
 
-  .media-ARRUMe > picture > img {
-    display: block;
-  }
-
   .background-AxFCfZ {
     z-index: 0;
     border-radius: inherit;
@@ -144,14 +138,6 @@
     padding-block-start: var(--_card-padding-default);
   }
 
-  .body-eUwDjL > :first-child {
-    margin-block-start: 0;
-  }
-
-  .body-eUwDjL > :last-child {
-    margin-bottom: 0;
-  }
-
   .footer-QbUloO {
     align-items: center;
     gap: var(--moduix-card-footer-gap, var(--moduix-spacing-2));
@@ -168,7 +154,6 @@
     line-height: var(--_card-title-line-height-default);
     overflow-wrap: anywhere;
     grid-column: 1;
-    margin: 0;
   }
 
   .description-sVGJRZ {
@@ -178,7 +163,6 @@
     line-height: var(--moduix-card-description-line-height, var(--moduix-line-height-text-sm));
     overflow-wrap: anywhere;
     grid-column: 1;
-    margin: 0;
   }
 
   .action-LB386d {