@moduix/react 2.2.4 → 2.2.5

package/dist/components/badge/Badge_module.css

@@ -1,10 +1,11 @@
 @layer moduix.components {
   .root-qRQEjV {
+    box-sizing: border-box;
     justify-content: center;
     align-items: center;
     gap: var(--moduix-badge-gap, var(--moduix-spacing-1-5));
     border: var(--moduix-badge-border-width, var(--moduix-border-width-sm)) solid
-      var(--moduix-badge-border-color, transparent);
+      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;
@@ -12,8 +13,8 @@
     max-width: 100%;
     padding-block: var(--moduix-badge-padding-y, 0);
     padding-inline: var(--moduix-badge-padding-x, var(--moduix-spacing-2-5));
-    background-color: var(--moduix-badge-bg, var(--moduix-color-primary));
-    color: var(--moduix-badge-color, var(--moduix-color-primary-foreground));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-default-bg, var(--moduix-color-primary)));
+    color: var(--moduix-badge-color, var(--moduix-badge-default-color, var(--moduix-color-primary-foreground)));
     font-size: var(--moduix-badge-font-size, var(--moduix-text-xs));
     font-weight: var(--moduix-badge-font-weight, var(--moduix-weight-medium));
     font-variant-numeric: tabular-nums;
@@ -24,37 +25,48 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: middle;
-    transition: color var(--moduix-transition-default),
-      background-color var(--moduix-transition-default),
-      border-color var(--moduix-transition-default);
+    transition: color var(--moduix-badge-transition, var(--moduix-transition-default)),
+      background-color var(--moduix-badge-transition, var(--moduix-transition-default)),
+      border-color var(--moduix-badge-transition, var(--moduix-transition-default)),
+      opacity var(--moduix-badge-transition, var(--moduix-transition-default));
     text-decoration: none;
     display: inline-flex;
     overflow: hidden;
   }
 
-  .root-qRQEjV:is(a, button, [role="button"]) {
-    cursor: pointer;
-  }
-
   .root-qRQEjV:is(a, button, [role="button"]):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));
     outline-offset: var(--moduix-badge-focus-ring-offset, var(--moduix-focus-ring-offset));
   }
 
-  :is(.root-qRQEjV:is(a, button, [role="button"])[data-variant="default"], .root-qRQEjV:is(a, button, [role="button"])[data-variant="secondary"], .root-qRQEjV:is(a, button, [role="button"])[data-variant="destructive"]):hover {
-    opacity: .9;
+  .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"]) {
+    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 {
+    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 {
+    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)));
   }
 
-  :is(.root-qRQEjV:is(a, button, [role="button"])[data-variant="outline"], .root-qRQEjV:is(a, button, [role="button"])[data-variant="ghost"]):hover {
-    border-color: var(--moduix-badge-border-color, var(--moduix-color-primary));
-    color: var(--moduix-badge-color, var(--moduix-color-primary));
+  .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[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"])[data-variant="link"]:hover {
+  .root-qRQEjV:is(a, button, [role="button"]):not(:disabled, [aria-disabled="true"])[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));
@@ -63,35 +75,38 @@
   }
 
   .root-qRQEjV[data-variant="secondary"] {
-    background-color: var(--moduix-badge-bg, var(--moduix-color-secondary));
-    color: var(--moduix-badge-color, var(--moduix-color-secondary-foreground));
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-secondary-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-secondary-bg, var(--moduix-color-secondary)));
+    color: var(--moduix-badge-color, var(--moduix-badge-secondary-color, var(--moduix-color-secondary-foreground)));
   }
 
   .root-qRQEjV[data-variant="destructive"] {
-    background-color: var(--moduix-badge-bg, var(--moduix-color-destructive));
-    color: var(--moduix-badge-color, var(--moduix-color-destructive-foreground));
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-destructive-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-destructive-bg, var(--moduix-color-destructive)));
+    color: var(--moduix-badge-color, var(--moduix-badge-destructive-color, var(--moduix-color-destructive-foreground)));
   }
 
-  .root-qRQEjV[data-variant="outline"], .root-qRQEjV[data-variant="ghost"], .root-qRQEjV[data-variant="link"] {
-    background-color: var(--moduix-badge-bg, transparent);
-  }
-
-  .root-qRQEjV[data-variant="outline"], .root-qRQEjV[data-variant="ghost"] {
-    color: var(--moduix-badge-color, var(--moduix-color-foreground));
+  .root-qRQEjV[data-variant="outline"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-outline-border-color, var(--moduix-color-border)));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-outline-bg, transparent));
+    color: var(--moduix-badge-color, var(--moduix-badge-outline-color, var(--moduix-color-foreground)));
   }
 
-  .root-qRQEjV[data-variant="outline"] {
-    border-color: var(--moduix-badge-border-color, var(--moduix-color-border));
+  .root-qRQEjV[data-variant="ghost"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-ghost-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-ghost-bg, transparent));
+    color: var(--moduix-badge-color, var(--moduix-badge-ghost-color, var(--moduix-color-foreground)));
   }
 
   .root-qRQEjV[data-variant="link"] {
+    border-color: var(--moduix-badge-border-color, var(--moduix-badge-link-border-color, transparent));
+    background-color: var(--moduix-badge-bg, var(--moduix-badge-link-bg, transparent));
     min-height: auto;
-    color: var(--moduix-badge-color, var(--moduix-color-primary));
+    color: var(--moduix-badge-color, var(--moduix-badge-link-color, var(--moduix-color-primary)));
     text-decoration: underline;
     -webkit-text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
     text-decoration-color: color-mix(in oklab, currentColor 55%, transparent);
     text-underline-offset: var(--moduix-badge-link-underline-offset, .15em);
-    border-color: #0000;
     border-radius: 0;
     padding-block: .125em;
     padding-inline: 0;

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

@@ -5,17 +5,15 @@ type BreadcrumbsPathItem = {
     key?: Key;
     label: ReactNode;
 };
-type BreadcrumbsPathProps = Omit<HTMLArkProps<'ol'>, 'children'> & {
-    items: readonly BreadcrumbsPathItem[];
-    separator?: ReactNode;
-};
-declare function BreadcrumbsPath({ items, separator, ...props }: BreadcrumbsPathProps): import("react").JSX.Element;
 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: typeof BreadcrumbsPath;
+    Path: import("react").ForwardRefExoticComponent<Omit<HTMLArkProps<"ol">, "children" | "asChild"> & {
+        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>>;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -57,8 +57,9 @@ const Breadcrumbs_BreadcrumbsPage = /*#__PURE__*/ forwardRef(function({ classNam
         ...props
     });
 });
-function BreadcrumbsPath({ items, separator, ...props }) {
+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;
@@ -79,7 +80,7 @@ function BreadcrumbsPath({ items, separator, ...props }) {
             }, item.key ?? index);
         })
     });
-}
+});
 const Breadcrumbs_BreadcrumbsSeparator = /*#__PURE__*/ forwardRef(function({ className, children, role = 'presentation', ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.li, {
         ref: ref,
@@ -112,7 +113,7 @@ const Breadcrumbs = Object.assign(Breadcrumbs_BreadcrumbsRoot, {
     List: Breadcrumbs_BreadcrumbsList,
     Item: Breadcrumbs_BreadcrumbsItem,
     Link: Breadcrumbs_BreadcrumbsLink,
-    Path: BreadcrumbsPath,
+    Path: Breadcrumbs_BreadcrumbsPath,
     Page: Breadcrumbs_BreadcrumbsPage,
     Separator: Breadcrumbs_BreadcrumbsSeparator,
     Ellipsis: Breadcrumbs_BreadcrumbsEllipsis

package/dist/components/breadcrumbs/Breadcrumbs_module.css

@@ -48,7 +48,7 @@
     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));
+    transition: color var(--moduix-breadcrumbs-link-transition, var(--moduix-transition-default));
     outline: none;
   }
 

package/dist/components/button/Button.js

@@ -4,7 +4,7 @@ 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, 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 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;
@@ -17,6 +17,14 @@ const Button_ButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className
         "aria-busy": resolvedAriaBusy,
         "aria-disabled": resolvedAriaDisabled,
         ...props,
+        onClickCapture: (event)=>{
+            if (isDisabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            onClickCapture?.(event);
+        },
         onClick: (event)=>{
             if (isDisabled) {
                 event.preventDefault();

package/dist/components/button/Button_module.css

@@ -61,13 +61,6 @@
     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));

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

@@ -9,6 +9,7 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react
     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>>;

package/dist/components/card/Card.js

@@ -46,6 +46,16 @@ const Card_CardMedia = /*#__PURE__*/ forwardRef(function({ className, ...props }
         ...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: clsx(Card_module.background, normalizeClassName(className)),
+        ...props
+    });
+});
 const Card_CardFooter = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
@@ -101,6 +111,7 @@ const Card = Object.assign(Card_CardRoot, {
     Header: Card_CardHeader,
     Body: Card_CardBody,
     Media: Card_CardMedia,
+    Background: Card_CardBackground,
     Footer: Card_CardFooter,
     Title: Card_CardTitle,
     Description: Card_CardDescription,

package/dist/components/card/Card.module.js

@@ -5,6 +5,7 @@ const Card_module = {
     body: "body-eUwDjL",
     footer: "footer-QbUloO",
     media: "media-ARRUMe",
+    background: "background-AxFCfZ",
     title: "title-E5XltJ",
     description: "description-sVGJRZ",
     action: "action-LB386d",

package/dist/components/card/Card_module.css

@@ -1,18 +1,19 @@
 @layer moduix.components {
   .root-aWX0Lo {
-    --moduix-card-padding-default: var(--moduix-card-spacing, var(--moduix-card-padding, var(--moduix-spacing-6)));
-    --moduix-card-section-spacing-default: var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4)));
-    --moduix-card-title-font-size-default: var(--moduix-card-title-font-size, var(--moduix-text-lg));
-    --moduix-card-title-line-height-default: var(--moduix-card-title-line-height, var(--moduix-line-height-text-lg));
+    --_card-padding-default: var(--moduix-card-spacing, var(--moduix-card-padding, var(--moduix-spacing-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(--moduix-card-border-width-default, var(--moduix-border-width-sm)))
-      solid var(--moduix-card-border-color, var(--moduix-color-border));
+    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)));
     border-radius: var(--moduix-card-radius, var(--moduix-radius-lg));
-    background-color: var(--moduix-card-bg, var(--moduix-card-bg-default, var(--moduix-color-card)));
+    background-color: var(--moduix-card-bg, var(--_card-bg-default, var(--moduix-color-card)));
     width: 100%;
     min-width: 0;
-    color: var(--moduix-card-color, var(--moduix-color-card-foreground));
-    box-shadow: var(--moduix-card-shadow, var(--moduix-card-shadow-default, none));
+    color: var(--moduix-card-color, var(--_card-color-default, var(--moduix-color-card-foreground)));
+    box-shadow: var(--moduix-card-shadow, var(--_card-shadow-default, none));
     flex-direction: column;
     display: flex;
     position: relative;
@@ -22,28 +23,56 @@
     text-decoration: none;
   }
 
+  .root-aWX0Lo:is(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
+    outline: var(--moduix-card-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
+        solid var(--moduix-card-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-card-focus-ring-offset, var(--moduix-border-width-sm));
+  }
+
   .root-aWX0Lo[data-size="sm"] {
-    --moduix-card-padding-default: var(--moduix-card-spacing-sm, var(--moduix-card-spacing, var(--moduix-card-padding-sm, var(--moduix-spacing-4))));
-    --moduix-card-section-spacing-default: var(--moduix-card-spacing-sm, var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4))));
-    --moduix-card-title-font-size-default: var(--moduix-card-title-font-size-sm, var(--moduix-text-md));
-    --moduix-card-title-line-height-default: var(--moduix-card-title-line-height-sm, var(--moduix-line-height-text-md));
+    --_card-padding-default: var(--moduix-card-spacing-sm, var(--moduix-card-spacing, var(--moduix-card-padding-sm, var(--moduix-spacing-4))));
+    --_card-section-spacing-default: var(--moduix-card-spacing-sm, 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-sm, var(--moduix-text-md));
+    --_card-title-line-height-default: var(--moduix-card-title-line-height-sm, var(--moduix-line-height-text-md));
   }
 
   .root-aWX0Lo[data-size="lg"] {
-    --moduix-card-padding-default: var(--moduix-card-spacing-lg, var(--moduix-card-spacing, var(--moduix-card-padding-lg, var(--moduix-spacing-8))));
-    --moduix-card-section-spacing-default: var(--moduix-card-spacing-lg, var(--moduix-card-spacing, var(--moduix-card-body-padding-top, var(--moduix-spacing-4))));
-    --moduix-card-title-font-size-default: var(--moduix-card-title-font-size-lg, var(--moduix-text-xl));
-    --moduix-card-title-line-height-default: var(--moduix-card-title-line-height-lg, var(--moduix-line-height-text-xl));
+    --_card-padding-default: var(--moduix-card-spacing-lg, var(--moduix-card-spacing, var(--moduix-card-padding-lg, var(--moduix-spacing-8))));
+    --_card-section-spacing-default: var(--moduix-card-spacing-lg, 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-lg, var(--moduix-text-xl));
+    --_card-title-line-height-default: var(--moduix-card-title-line-height-lg, var(--moduix-line-height-text-xl));
   }
 
   .root-aWX0Lo[data-variant="elevated"] {
-    --moduix-card-border-width-default: 0;
-    --moduix-card-shadow-default: var(--moduix-shadow-md);
+    --_card-bg-default: var(--moduix-card-elevated-bg, var(--moduix-color-card));
+    --_card-border-color-default: var(--moduix-card-elevated-border-color, transparent);
+    --_card-border-width-default: var(--moduix-card-elevated-border-width, 0);
+    --_card-color-default: var(--moduix-card-elevated-color, var(--moduix-color-card-foreground));
+    --_card-shadow-default: var(--moduix-card-elevated-shadow, var(--moduix-shadow-md));
+  }
+
+  .root-aWX0Lo[data-variant="outline"] {
+    --_card-bg-default: var(--moduix-card-outline-bg, var(--moduix-color-card));
+    --_card-border-color-default: var(--moduix-card-outline-border-color, var(--moduix-color-border));
+    --_card-border-width-default: var(--moduix-card-outline-border-width, var(--moduix-border-width-sm));
+    --_card-color-default: var(--moduix-card-outline-color, var(--moduix-color-card-foreground));
+    --_card-shadow-default: var(--moduix-card-outline-shadow, none);
   }
 
   .root-aWX0Lo[data-variant="subtle"] {
-    --moduix-card-border-width-default: 0;
-    --moduix-card-bg-default: var(--moduix-color-muted);
+    --_card-bg-default: var(--moduix-card-subtle-bg, var(--moduix-color-muted));
+    --_card-border-color-default: var(--moduix-card-subtle-border-color, transparent);
+    --_card-border-width-default: var(--moduix-card-subtle-border-width, 0);
+    --_card-color-default: var(--moduix-card-subtle-color, var(--moduix-color-card-foreground));
+    --_card-shadow-default: var(--moduix-card-subtle-shadow, none);
+  }
+
+  .root-aWX0Lo:has( > [data-scope="card"][data-part="background"]) {
+    isolation: isolate;
+  }
+
+  .root-aWX0Lo:has( > [data-scope="card"][data-part="background"]) > :not([data-scope="card"][data-part="background"]) {
+    z-index: 1;
   }
 
   .root-aWX0Lo:has([data-scope="card"][data-part="link"]) :where(a, button, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):not([data-scope="card"][data-part="link"]) {
@@ -54,13 +83,13 @@
   .header-F5Ms8N, .body-eUwDjL, .footer-QbUloO {
     box-sizing: border-box;
     min-width: 0;
-    padding-inline: var(--moduix-card-padding-default);
+    padding-inline: var(--_card-padding-default);
   }
 
   .header-F5Ms8N {
     column-gap: var(--moduix-card-action-gap, var(--moduix-spacing-2));
     row-gap: var(--moduix-card-header-gap, var(--moduix-spacing-1));
-    padding-block: var(--moduix-card-padding-default) 0;
+    padding-block: var(--_card-padding-default) 0;
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
   }
@@ -82,8 +111,29 @@
     display: block;
   }
 
+  .background-AxFCfZ {
+    z-index: 0;
+    border-radius: inherit;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .background-AxFCfZ > :where(img, video, canvas, svg, iframe), .background-AxFCfZ > picture > img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .background-AxFCfZ > picture {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
   .body-eUwDjL {
-    padding-block: var(--moduix-card-section-spacing-default) var(--moduix-card-padding-default);
+    padding-block: var(--_card-section-spacing-default) var(--_card-padding-default);
     color: var(--moduix-card-body-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-card-body-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-card-body-line-height, var(--moduix-line-height-text-sm));
@@ -91,11 +141,11 @@
   }
 
   .body-eUwDjL:first-child {
-    padding-block-start: var(--moduix-card-padding-default);
+    padding-block-start: var(--_card-padding-default);
   }
 
   .body-eUwDjL > :first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   .body-eUwDjL > :last-child {
@@ -105,7 +155,7 @@
   .footer-QbUloO {
     align-items: center;
     gap: var(--moduix-card-footer-gap, var(--moduix-spacing-2));
-    padding-block: 0 var(--moduix-card-padding-default);
+    padding-block: 0 var(--_card-padding-default);
     flex-wrap: wrap;
     display: flex;
   }
@@ -113,9 +163,9 @@
   .title-E5XltJ {
     min-width: 0;
     color: var(--moduix-card-title-color, currentColor);
-    font-size: var(--moduix-card-title-font-size-default);
+    font-size: var(--_card-title-font-size-default);
     font-weight: var(--moduix-card-title-font-weight, var(--moduix-weight-semibold));
-    line-height: var(--moduix-card-title-line-height-default);
+    line-height: var(--_card-title-line-height-default);
     overflow-wrap: anywhere;
     grid-column: 1;
     margin: 0;

package/dist/components/carousel/Carousel_module.css

@@ -141,15 +141,15 @@
     background-color: var(--moduix-carousel-indicator-bg, color-mix(in oklab, var(--moduix-color-muted) 84%, var(--moduix-color-background) 16%));
     cursor: pointer;
     opacity: .88;
-    transition: inline-size var(--moduix-transition-fast),
-      block-size var(--moduix-transition-fast),
+    transition: width var(--moduix-transition-fast),
+      height var(--moduix-transition-fast),
       background-color var(--moduix-transition-fast),
       opacity var(--moduix-transition-fast);
     border: 0;
     padding: 0;
   }
 
-  .indicator-cjLdPK:not(:disabled, [data-disabled], [data-readonly]):hover {
+  .indicator-cjLdPK:not(:disabled, [data-disabled], [data-readonly], [data-current]):hover {
     background-color: var(--moduix-carousel-indicator-bg-hover, color-mix(in oklab, var(--moduix-color-muted) 56%, var(--moduix-color-foreground) 44%));
   }
 
@@ -176,8 +176,8 @@
   }
 
   .autoplayTrigger-h1Iihy {
-    --moduix-carousel-autoplay-trigger-min-width-fallback: calc(var(--moduix-size-md) + var(--moduix-spacing-3));
-    min-width: var(--moduix-carousel-autoplay-trigger-min-width, var(--moduix-carousel-autoplay-trigger-min-width-fallback));
+    --_carousel-autoplay-trigger-min-width-fallback: calc(var(--moduix-size-md) + var(--moduix-spacing-3));
+    min-width: var(--moduix-carousel-autoplay-trigger-min-width, var(--_carousel-autoplay-trigger-min-width-fallback));
   }
 
   .autoplayIndicator-MQFp2o {
@@ -196,6 +196,28 @@
     font-size: var(--moduix-carousel-progress-text-font-size, var(--moduix-text-sm));
     line-height: var(--moduix-line-height-text-sm);
     font-variant-numeric: tabular-nums;
+    direction: ltr;
+    unicode-bidi: isolate;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .itemGroup-a7LtFI {
+      scroll-behavior: auto;
+    }
+
+    .prevTrigger-TQv4Ak, .nextTrigger-PkJ3_8, .autoplayTrigger-h1Iihy, .indicator-cjLdPK {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .indicator-cjLdPK {
+      background-color: buttontext;
+    }
+
+    .indicator-cjLdPK[data-current] {
+      background-color: highlight;
+    }
   }
 }
 

package/dist/components/checkbox/Checkbox.js

@@ -61,9 +61,7 @@ const Checkbox_CheckboxControl = /*#__PURE__*/ forwardRef(function({ children, c
     });
 });
 function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(Checkbox.HiddenInput, {
-        "data-slot": "checkbox-hidden-input"
-    });
+    const hiddenInput = /*#__PURE__*/ jsx(CheckboxHiddenInput, {});
     if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             children,
@@ -73,6 +71,14 @@ function withHiddenInput(children, asChild) {
     const child = Children.only(children);
     return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
+function CheckboxHiddenInput() {
+    const checkbox = useCheckboxContext();
+    const readOnly = void 0 !== checkbox.getRootProps()['data-readonly'];
+    return /*#__PURE__*/ jsx(Checkbox.HiddenInput, {
+        "aria-readonly": readOnly || void 0,
+        "data-slot": "checkbox-hidden-input"
+    });
+}
 const Checkbox_CheckboxLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Label, {
         ref: ref,

package/dist/components/checkbox/Checkbox_module.css

@@ -3,7 +3,7 @@
     align-items: center;
     gap: var(--moduix-checkbox-gap, var(--moduix-spacing-2));
     vertical-align: middle;
-    color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
+    color: var(--moduix-checkbox-label-color, var(--moduix-checkbox-group-color, var(--moduix-color-foreground)));
     cursor: pointer;
     display: inline-flex;
   }
@@ -62,13 +62,21 @@
   }
 
   .control-UQ7BTk[data-invalid][data-focus-visible] {
-    outline-color: var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive));
+    outline-color: var(--moduix-checkbox-focus-ring-color-invalid, var(--moduix-checkbox-border-color-invalid, var(--moduix-color-destructive)));
   }
 
   @media (hover: hover) {
     .control-UQ7BTk[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
       background-color: var(--moduix-checkbox-bg-hover, var(--moduix-color-accent));
     }
+
+    .control-UQ7BTk:is([data-state="checked"], [data-state="indeterminate"])[data-hover]:not([data-readonly], [data-disabled]) {
+      background-color: var(--moduix-checkbox-bg-checked-hover, var(--moduix-checkbox-bg-checked, var(--moduix-color-primary)));
+    }
+
+    .control-UQ7BTk:is([data-state="checked"], [data-state="indeterminate"])[data-hover]:not([data-readonly], [data-disabled])[data-invalid] {
+      background-color: var(--moduix-checkbox-bg-invalid-hover, var(--moduix-checkbox-bg-invalid, var(--moduix-color-destructive)));
+    }
   }
 
   .root-HuLdBM[data-size="xs"] .control-UQ7BTk {
@@ -121,7 +129,7 @@
   }
 
   .label-YzjPY9 {
-    color: var(--moduix-checkbox-label-color, var(--moduix-color-foreground));
+    color: var(--moduix-checkbox-label-color, var(--moduix-checkbox-group-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-checkbox-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-checkbox-label-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-checkbox-label-line-height, var(--moduix-line-height-text-sm));

package/dist/components/clipboard/Clipboard_module.css

@@ -68,7 +68,7 @@
     color: var(--moduix-clipboard-input-readonly-color, var(--moduix-input-readonly-color, var(--moduix-clipboard-input-color, var(--moduix-color-foreground))));
   }
 
-  .input-POor1w[data-disabled] {
+  .input-POor1w:is(:disabled, [data-disabled]) {
     pointer-events: none;
     opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-input-disabled-opacity, var(--moduix-opacity-disabled)));
   }
@@ -104,6 +104,8 @@
       opacity
         var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
       box-shadow
+        var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default))),
+      transform
         var(--moduix-clipboard-transition, var(--moduix-button-transition, var(--moduix-transition-default)));
     flex-shrink: 0;
     display: inline-flex;
@@ -129,6 +131,16 @@
           -1);
   }
 
+  .trigger-dngdJp:active:not(:disabled, [data-disabled]) {
+    opacity: .94;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .trigger-dngdJp:active:not(:disabled, [data-disabled]) {
+      transform: translateY(1px) scale(.985);
+    }
+  }
+
   .trigger-dngdJp:is(:disabled, [data-disabled]) {
     pointer-events: none;
     opacity: var(--moduix-clipboard-disabled-opacity, var(--moduix-button-disabled-opacity, var(--moduix-opacity-disabled)));