@moduix/react 2.5.1 → 2.7.0

package/dist/components/checkbox/Checkbox.js

@@ -2,40 +2,35 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext } from "@ark-ui/react/checkbox";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
+import { forwardRef } from "react";
 import { CheckIcon, IndeterminateIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Checkbox_module from "./Checkbox.module.js";
-const Checkbox_CheckboxRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+const Checkbox_CheckboxRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Root, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "checkbox-root",
-        "data-size": size,
-        className: clsx(Checkbox_module.root, normalizeClassName(className)),
+        className: clsx(Checkbox_module.root, className),
         ...props,
-        children: withHiddenInput(children, asChild)
+        "data-size": size,
+        "data-slot": "checkbox-root"
     });
 });
-const Checkbox_CheckboxRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+const Checkbox_CheckboxRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.RootProvider, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "checkbox-root-provider",
-        "data-size": size,
-        className: clsx(Checkbox_module.root, normalizeClassName(className)),
+        className: clsx(Checkbox_module.root, className),
         ...props,
-        children: withHiddenInput(children, asChild)
+        "data-size": size,
+        "data-slot": "checkbox-root-provider"
     });
 });
 const Checkbox_CheckboxIndicator = /*#__PURE__*/ forwardRef(function({ className, children, indeterminate, ...props }, ref) {
     const slot = indeterminate ? 'checkbox-indicator-indeterminate-icon' : 'checkbox-indicator-checked-icon';
     return /*#__PURE__*/ jsx(Checkbox.Indicator, {
         ref: ref,
-        "data-slot": "checkbox-indicator",
-        className: clsx(Checkbox_module.indicator, normalizeClassName(className)),
+        className: clsx(Checkbox_module.indicator, className),
         indeterminate: indeterminate,
         ...props,
+        "data-slot": "checkbox-indicator",
         children: children ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
             "data-slot": slot,
@@ -47,9 +42,9 @@ const Checkbox_CheckboxIndicator = /*#__PURE__*/ forwardRef(function({ className
 const Checkbox_CheckboxControl = /*#__PURE__*/ forwardRef(function({ children, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Control, {
         ref: ref,
-        "data-slot": "checkbox-control",
-        className: clsx(Checkbox_module.control, normalizeClassName(className)),
+        className: clsx(Checkbox_module.control, className),
         ...props,
+        "data-slot": "checkbox-control",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(Checkbox_CheckboxIndicator, {}),
@@ -60,45 +55,27 @@ const Checkbox_CheckboxControl = /*#__PURE__*/ forwardRef(function({ children, c
         })
     });
 });
-function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(CheckboxHiddenInput, {});
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    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,
-        "data-slot": "checkbox-label",
-        className: clsx(Checkbox_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(Checkbox_module.label, className),
+        ...props,
+        "data-slot": "checkbox-label"
     });
 });
 const Checkbox_CheckboxGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Checkbox.Group, {
         ref: ref,
-        "data-slot": "checkbox-group",
-        className: clsx(Checkbox_module.group, normalizeClassName(className)),
-        ...props
+        className: clsx(Checkbox_module.group, className),
+        ...props,
+        "data-slot": "checkbox-group"
     });
 });
 const Checkbox_Checkbox = Object.assign(Checkbox_CheckboxRoot, {
     Root: Checkbox_CheckboxRoot,
     RootProvider: Checkbox_CheckboxRootProvider,
     Context: Checkbox.Context,
+    HiddenInput: Checkbox.HiddenInput,
     Control: Checkbox_CheckboxControl,
     Indicator: Checkbox_CheckboxIndicator,
     Label: Checkbox_CheckboxLabel,

package/dist/components/clipboard/Clipboard.js

@@ -4,61 +4,59 @@ import { Clipboard, useClipboard, useClipboardContext } from "@ark-ui/react/clip
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CheckIcon, CopyIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Clipboard_module from "./Clipboard.module.js";
 const Clipboard_ClipboardRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Root, {
         ref: ref,
-        "data-slot": "clipboard-root",
-        className: clsx(Clipboard_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Clipboard_module.root, className),
+        ...props,
+        "data-slot": "clipboard-root"
     });
 });
 const Clipboard_ClipboardRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.RootProvider, {
         ref: ref,
-        "data-slot": "clipboard-root-provider",
-        className: clsx(Clipboard_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Clipboard_module.root, className),
+        ...props,
+        "data-slot": "clipboard-root-provider"
     });
 });
 const Clipboard_ClipboardLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Label, {
         ref: ref,
-        "data-slot": "clipboard-label",
-        className: clsx(Clipboard_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(Clipboard_module.label, className),
+        ...props,
+        "data-slot": "clipboard-label"
     });
 });
 const Clipboard_ClipboardControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Control, {
         ref: ref,
-        "data-slot": "clipboard-control",
-        className: clsx(Clipboard_module.control, normalizeClassName(className)),
-        ...props
+        className: clsx(Clipboard_module.control, className),
+        ...props,
+        "data-slot": "clipboard-control"
     });
 });
 const Clipboard_ClipboardInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Input, {
         ref: ref,
-        "data-slot": "clipboard-input",
-        className: clsx(Clipboard_module.input, normalizeClassName(className)),
-        ...props
+        className: clsx(Clipboard_module.input, className),
+        ...props,
+        "data-slot": "clipboard-input"
     });
 });
 const Clipboard_ClipboardTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Trigger, {
         ref: ref,
-        "data-slot": "clipboard-trigger",
-        className: clsx(Clipboard_module.trigger, normalizeClassName(className)),
-        ...props
+        className: clsx(Clipboard_module.trigger, className),
+        ...props,
+        "data-slot": "clipboard-trigger"
     });
 });
 const Clipboard_ClipboardIndicator = /*#__PURE__*/ forwardRef(function({ className, children, copied, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.Indicator, {
         ref: ref,
-        "data-slot": "clipboard-indicator",
-        className: clsx(Clipboard_module.indicator, normalizeClassName(className)),
+        className: clsx(Clipboard_module.indicator, className),
         copied: copied ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
             "data-slot": "clipboard-indicator-copied-icon",
@@ -66,6 +64,7 @@ const Clipboard_ClipboardIndicator = /*#__PURE__*/ forwardRef(function({ classNa
             children: /*#__PURE__*/ jsx(CheckIcon, {})
         }),
         ...props,
+        "data-slot": "clipboard-indicator",
         children: children ?? /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",
             "data-slot": "clipboard-indicator-idle-icon",
@@ -77,17 +76,18 @@ const Clipboard_ClipboardIndicator = /*#__PURE__*/ forwardRef(function({ classNa
 const Clipboard_ClipboardValueText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Clipboard.ValueText, {
         ref: ref,
-        "data-slot": "clipboard-value-text",
-        className: clsx(Clipboard_module.valueText, normalizeClassName(className)),
-        ...props
+        className: clsx(Clipboard_module.valueText, className),
+        ...props,
+        "data-slot": "clipboard-value-text"
     });
 });
-const Clipboard_ClipboardCopyText = /*#__PURE__*/ forwardRef(function({ copied = 'Copied', children = 'Copy', ...props }, ref) {
-    return /*#__PURE__*/ jsx(Clipboard_ClipboardIndicator, {
+const Clipboard_ClipboardCopyText = /*#__PURE__*/ forwardRef(function({ className, copied = 'Copied', children = 'Copy', ...props }, ref) {
+    return /*#__PURE__*/ jsx(Clipboard.Indicator, {
         ref: ref,
-        "data-slot": "clipboard-copy-text",
+        className: clsx(Clipboard_module.indicator, className),
         copied: copied,
         ...props,
+        "data-slot": "clipboard-copy-text",
         children: children
     });
 });

package/dist/components/close-button/CloseButton.js

@@ -3,7 +3,6 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { CloseIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import CloseButton_module from "./CloseButton.module.js";
 const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild, className, children, disabled, onClick, onClickCapture, type, 'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-disabled': dataDisabled, 'data-part': dataPart, 'data-scope': dataScope, 'data-slot': dataSlot, ...props }, ref) {
     const isDisabled = disabled || true === ariaDisabled || 'true' === ariaDisabled || void 0 !== dataDisabled;
@@ -35,7 +34,7 @@ const CloseButton_CloseButtonRoot = /*#__PURE__*/ forwardRef(function({ asChild,
         "data-part": dataPart ?? 'root',
         "data-slot": dataSlot ?? 'close-button-root',
         "data-disabled": dataDisabled ?? (isDisabled ? '' : void 0),
-        className: clsx(CloseButton_module.root, normalizeClassName(className)),
+        className: clsx(CloseButton_module.root, className),
         "aria-disabled": resolvedAriaDisabled,
         "aria-label": ariaLabel ?? (null == ariaLabelledBy ? 'Close' : void 0),
         "aria-labelledby": ariaLabelledBy,

package/dist/components/close-button/CloseButton_module.css

@@ -13,9 +13,7 @@
     cursor: pointer;
     transition: background-color var(--moduix-close-button-transition, var(--moduix-transition-default)),
       color var(--moduix-close-button-transition, var(--moduix-transition-default)),
-      opacity var(--moduix-close-button-transition, var(--moduix-transition-default)),
-      translate var(--moduix-close-button-transition, var(--moduix-transition-default)),
-      scale var(--moduix-close-button-transition, var(--moduix-transition-default));
+      opacity var(--moduix-close-button-transition, var(--moduix-transition-default));
     border: none;
     flex-shrink: 0;
     justify-content: center;
@@ -48,13 +46,6 @@
     opacity: .94;
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    .root-_7JLUV:active:not([data-disabled]) {
-      translate: 0 1px;
-      scale: .985;
-    }
-  }
-
   .root-_7JLUV[data-disabled] {
     cursor: default;
     pointer-events: none;

package/dist/components/collapsible/Collapsible.js

@@ -5,58 +5,55 @@ import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Collapsible_module from "./Collapsible.module.js";
 const Collapsible_CollapsibleRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Root, {
         ref: ref,
-        "data-slot": "collapsible-root",
-        className: clsx(Collapsible_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Collapsible_module.root, className),
+        ...props,
+        "data-slot": "collapsible-root"
     });
 });
 const Collapsible_CollapsibleRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.RootProvider, {
         ref: ref,
-        "data-slot": "collapsible-root-provider",
-        className: clsx(Collapsible_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Collapsible_module.root, className),
+        ...props,
+        "data-slot": "collapsible-root-provider"
     });
 });
 const Collapsible_CollapsibleTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Trigger, {
         ref: ref,
         asChild: asChild,
-        "data-slot": "collapsible-trigger",
-        className: clsx(!asChild && Collapsible_module.trigger, normalizeClassName(className)),
-        ...props
+        className: clsx(!asChild && Collapsible_module.trigger, className),
+        ...props,
+        "data-slot": "collapsible-trigger"
     });
 });
 const Collapsible_CollapsibleIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Indicator, {
         ref: ref,
-        "data-slot": "collapsible-indicator",
-        className: clsx(Collapsible_module.indicator, normalizeClassName(className)),
+        className: clsx(Collapsible_module.indicator, className),
         ...props,
+        "data-slot": "collapsible-indicator",
         children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {})
     });
 });
 const Collapsible_CollapsibleContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Collapsible.Content, {
         ref: ref,
-        "data-slot": "collapsible-content",
-        className: clsx(Collapsible_module.content, normalizeClassName(className)),
-        ...props
+        className: clsx(Collapsible_module.content, className),
+        ...props,
+        "data-slot": "collapsible-content"
     });
 });
 const Collapsible_CollapsibleBody = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-scope": "collapsible",
-        "data-part": "body",
-        "data-slot": "collapsible-body",
-        className: clsx(Collapsible_module.body, normalizeClassName(className)),
-        ...props
+        className: clsx(Collapsible_module.body, className),
+        ...props,
+        "data-slot": "collapsible-body"
     });
 });
 const Collapsible_Collapsible = Object.assign(Collapsible_CollapsibleRoot, {

package/dist/components/collapsible/Collapsible_module.css

@@ -45,7 +45,7 @@
     border-radius: var(--moduix-collapsible-trigger-radius, 0);
     width: 100%;
     padding-block: var(--moduix-collapsible-trigger-padding-y, var(--moduix-spacing-1));
-    padding-inline: var(--moduix-collapsible-trigger-padding-x, var(--moduix-spacing-2));
+    padding-inline: var(--moduix-collapsible-trigger-padding-x, 0);
     background-color: var(--moduix-collapsible-trigger-bg, transparent);
     color: var(--moduix-collapsible-trigger-color, var(--moduix-collapsible-color, var(--moduix-color-foreground)));
     font: inherit;
@@ -113,7 +113,6 @@
   }
 
   .content-dHAw0w {
-    --collapsed-height: 0;
     box-sizing: border-box;
     color: var(--moduix-collapsible-content-color, var(--moduix-color-muted-foreground));
     font-size: var(--moduix-collapsible-content-font-size, var(--moduix-text-sm));
@@ -142,7 +141,7 @@
   .body-TpC0eh {
     gap: var(--moduix-collapsible-body-gap, var(--moduix-spacing-2));
     min-width: 0;
-    padding: var(--moduix-collapsible-body-padding, var(--moduix-spacing-2));
+    padding: var(--moduix-collapsible-body-padding, 0);
     display: grid;
   }
 
@@ -153,7 +152,6 @@
 
     .content-dHAw0w[data-state] {
       animation-duration: 1ms;
-      animation-delay: 0s;
     }
   }
 }

package/dist/components/color-picker/ColorPicker.d.ts

@@ -1,12 +1,13 @@
 import { ColorPicker as ColorPickerPrimitive, parseColor, useColorPicker, useColorPickerContext } from '@ark-ui/react/color-picker';
-import type { ComponentProps, ReactNode } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
+import type { ComponentProps } from 'react';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
 type ColorPickerRootProps = ComponentProps<typeof ColorPickerPrimitive.Root> & OverlayPortalProps;
 type ColorPickerRootProviderProps = ComponentProps<typeof ColorPickerPrimitive.RootProvider> & OverlayPortalProps;
 declare const ColorPicker: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Root: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<Omit<ColorPickerRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Context: (props: ColorPickerPrimitive.ContextProps) => ReactNode;
+    Context: (props: ColorPickerPrimitive.ContextProps) => import("react").ReactNode;
+    HiddenInput: import("react").ForwardRefExoticComponent<ColorPickerPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Trigger: import("react").ForwardRefExoticComponent<Omit<ColorPickerPrimitive.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;