@moduix/react 2.5.0 → 2.6.0

package/dist/components/aspect-ratio/AspectRatio.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 AspectRatio_module from "./AspectRatio.module.js";
 const AspectRatio_AspectRatioRoot = /*#__PURE__*/ forwardRef(function({ ratio, className, style, ...props }, ref) {
     if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError('AspectRatio `ratio` must be a finite number greater than zero.');
@@ -12,7 +11,7 @@ const AspectRatio_AspectRatioRoot = /*#__PURE__*/ forwardRef(function({ ratio, c
         "data-scope": "aspect-ratio",
         "data-part": "root",
         "data-slot": "aspect-ratio-root",
-        className: clsx(AspectRatio_module.root, normalizeClassName(className)),
+        className: clsx(AspectRatio_module.root, className),
         style: {
             ...style,
             '--_aspect-ratio-value': ratio

package/dist/components/aspect-ratio/AspectRatio_module.css

@@ -4,21 +4,8 @@
     box-sizing: border-box;
     width: 100%;
     aspect-ratio: var(--_aspect-ratio-value);
-    border-radius: var(--moduix-aspect-ratio-radius, var(--moduix-radius-md));
     display: block;
     position: relative;
-    overflow: hidden;
-  }
-
-  .root-_8OMdK > :where(img, video, iframe, canvas, svg) {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  .root-_8OMdK > iframe {
-    border: 0;
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { Avatar as AvatarPrimitive, useAvatar, useAvatarContext } from '@ark-ui/react/avatar';
-import { type ComponentProps, type ReactNode } from 'react';
+import { type ComponentProps } from 'react';
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type AvatarRootProps = ComponentProps<typeof AvatarPrimitive.Root> & {
     size?: AvatarSize;
@@ -7,14 +7,11 @@ type AvatarRootProps = ComponentProps<typeof AvatarPrimitive.Root> & {
 type AvatarRootProviderProps = ComponentProps<typeof AvatarPrimitive.RootProvider> & {
     size?: AvatarSize;
 };
-type AvatarFallbackProps = ComponentProps<typeof AvatarPrimitive.Fallback> & {
-    name?: string;
-};
 declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<Omit<AvatarRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Context: (props: AvatarPrimitive.ContextProps) => ReactNode;
+    Context: (props: AvatarPrimitive.ContextProps) => import("react").ReactNode;
     Image: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.ImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
-    Fallback: import("react").ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Fallback: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.FallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 };
 export { Avatar, useAvatar, useAvatarContext };

package/dist/components/avatar/Avatar.js

@@ -1,57 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Avatar, useAvatar, useAvatarContext } from "@ark-ui/react/avatar";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Avatar_module from "./Avatar.module.js";
-const graphemeSegmenter = new Intl.Segmenter(void 0, {
-    granularity: 'grapheme'
-});
-const getFirstGrapheme = (value)=>{
-    const [firstGrapheme] = graphemeSegmenter.segment(value);
-    return firstGrapheme?.segment ?? '';
-};
-const getInitials = (name)=>{
-    const parts = name.trim().split(/\s+/).filter(Boolean);
-    const firstName = parts[0] ?? '';
-    const lastName = parts.length > 1 ? parts[parts.length - 1] : '';
-    return firstName && lastName ? `${getFirstGrapheme(firstName)}${getFirstGrapheme(lastName)}` : getFirstGrapheme(firstName);
-};
-function AvatarFallbackIcon() {
-    return /*#__PURE__*/ jsxs("svg", {
-        "aria-hidden": "true",
-        focusable: "false",
-        "data-slot": "avatar-fallback-icon",
-        className: Avatar_module.fallbackIcon,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        children: [
-            /*#__PURE__*/ jsx("circle", {
-                cx: "12",
-                cy: "8",
-                r: "5"
-            }),
-            /*#__PURE__*/ jsx("path", {
-                d: "M20 21a8 8 0 0 0-16 0"
-            })
-        ]
-    });
-}
-const getFallbackContent = (children, name)=>{
-    if (null != children) return children;
-    const initials = name ? getInitials(name) : '';
-    return initials || /*#__PURE__*/ jsx(AvatarFallbackIcon, {});
-};
 const Avatar_AvatarRoot = /*#__PURE__*/ forwardRef(function({ className, size, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.Root, {
         ref: ref,
         "data-slot": "avatar-root",
         "data-size": size,
-        className: clsx(Avatar_module.root, normalizeClassName(className)),
+        className: clsx(Avatar_module.root, className),
         ...props
     });
 });
@@ -60,7 +17,7 @@ const Avatar_AvatarRootProvider = /*#__PURE__*/ forwardRef(function({ className,
         ref: ref,
         "data-slot": "avatar-root-provider",
         "data-size": size,
-        className: clsx(Avatar_module.root, normalizeClassName(className)),
+        className: clsx(Avatar_module.root, className),
         ...props
     });
 });
@@ -68,17 +25,17 @@ const Avatar_AvatarImage = /*#__PURE__*/ forwardRef(function({ className, ...pro
     return /*#__PURE__*/ jsx(Avatar.Image, {
         ref: ref,
         "data-slot": "avatar-image",
-        className: clsx(Avatar_module.image, normalizeClassName(className)),
+        className: clsx(Avatar_module.image, className),
         ...props
     });
 });
-const Avatar_AvatarFallback = /*#__PURE__*/ forwardRef(function({ children, className, name, ...props }, ref) {
+const Avatar_AvatarFallback = /*#__PURE__*/ forwardRef(function({ children, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Avatar.Fallback, {
         ref: ref,
         "data-slot": "avatar-fallback",
-        className: clsx(Avatar_module.fallback, normalizeClassName(className)),
+        className: clsx(Avatar_module.fallback, className),
         ...props,
-        children: getFallbackContent(children, name)
+        children: children
     });
 });
 const Avatar_Avatar = Object.assign(Avatar_AvatarRoot, {

package/dist/components/avatar/Avatar.module.js

@@ -2,7 +2,6 @@ import "./Avatar_module.css";
 const Avatar_module = {
     root: "root-qlUdBE",
     image: "image-eMihfZ",
-    fallback: "fallback-UO951k",
-    fallbackIcon: "fallbackIcon-OJh0sm"
+    fallback: "fallback-UO951k"
 };
 export default Avatar_module;

package/dist/components/avatar/Avatar_module.css

@@ -74,11 +74,5 @@
   .fallback-UO951k[data-state="hidden"] {
     display: none;
   }
-
-  .fallbackIcon-OJh0sm {
-    width: var(--moduix-avatar-fallback-icon-size, 55%);
-    height: var(--moduix-avatar-fallback-icon-size, 55%);
-    flex-shrink: 0;
-  }
 }
 

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

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

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);
     }
   }