@moduix/react 2.5.1 → 2.7.0

package/dist/components/radio-group/RadioGroup.d.ts

@@ -15,6 +15,7 @@ declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGr
     ItemContext: (props: import("@ark-ui/react/radio-group").RadioGroupItemContextProps) => ReactNode;
     Label: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     Item: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemHiddenInput: import("react").ForwardRefExoticComponent<RadioGroupPrimitive.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Option: import("react").ForwardRefExoticComponent<Omit<RadioGroupOptionProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     ItemControl: import("react").ForwardRefExoticComponent<Omit<RadioGroupItemControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemText: import("react").ForwardRefExoticComponent<Omit<RadioGroupPrimitive.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/radio-group/RadioGroup.js

@@ -1,42 +1,39 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { RadioGroup, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext } from "@ark-ui/react/radio-group";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { forwardRef } from "react";
 import RadioGroup_module from "./RadioGroup.module.js";
 const RadioGroup_RadioGroupRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.Root, {
         ref: ref,
-        "data-slot": "radio-group-root",
-        className: clsx(RadioGroup_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(RadioGroup_module.root, className),
+        ...props,
+        "data-slot": "radio-group-root"
     });
 });
 const RadioGroup_RadioGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.RootProvider, {
         ref: ref,
-        "data-slot": "radio-group-root-provider",
-        className: clsx(RadioGroup_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(RadioGroup_module.root, className),
+        ...props,
+        "data-slot": "radio-group-root-provider"
     });
 });
 const RadioGroup_RadioGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.Label, {
         ref: ref,
-        "data-slot": "radio-group-label",
-        className: clsx(RadioGroup_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(RadioGroup_module.label, className),
+        ...props,
+        "data-slot": "radio-group-label"
     });
 });
-const RadioGroup_RadioGroupItem = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+const RadioGroup_RadioGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.Item, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "radio-group-item",
-        className: clsx(RadioGroup_module.item, normalizeClassName(className)),
+        className: clsx(RadioGroup_module.item, className),
         ...props,
-        children: withItemHiddenInput(children, asChild)
+        "data-slot": "radio-group-item"
     });
 });
 const RadioGroup_RadioGroupOption = /*#__PURE__*/ forwardRef(function({ children, size, ...props }, ref) {
@@ -44,6 +41,7 @@ const RadioGroup_RadioGroupOption = /*#__PURE__*/ forwardRef(function({ children
         ref: ref,
         ...props,
         children: [
+            /*#__PURE__*/ jsx(RadioGroup.ItemHiddenInput, {}),
             /*#__PURE__*/ jsx(RadioGroup_RadioGroupItemControl, {
                 size: size
             }),
@@ -56,39 +54,26 @@ const RadioGroup_RadioGroupOption = /*#__PURE__*/ forwardRef(function({ children
 const RadioGroup_RadioGroupItemControl = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.ItemControl, {
         ref: ref,
-        "data-slot": "radio-group-item-control",
         "data-size": size,
-        className: clsx(RadioGroup_module.itemControl, normalizeClassName(className)),
-        ...props
+        className: clsx(RadioGroup_module.itemControl, className),
+        ...props,
+        "data-slot": "radio-group-item-control"
     });
 });
 const RadioGroup_RadioGroupItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.ItemText, {
         ref: ref,
-        "data-slot": "radio-group-item-text",
-        className: clsx(RadioGroup_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(RadioGroup_module.itemText, className),
+        ...props,
+        "data-slot": "radio-group-item-text"
     });
 });
-function withItemHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(RadioGroup.ItemHiddenInput, {
-        "data-slot": "radio-group-item-hidden-input"
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
-}
 const RadioGroup_RadioGroupIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RadioGroup.Indicator, {
         ref: ref,
-        "data-slot": "radio-group-indicator",
-        className: clsx(RadioGroup_module.indicator, normalizeClassName(className)),
-        ...props
+        className: clsx(RadioGroup_module.indicator, className),
+        ...props,
+        "data-slot": "radio-group-indicator"
     });
 });
 const RadioGroup_RadioGroup = Object.assign(RadioGroup_RadioGroupRoot, {
@@ -98,6 +83,7 @@ const RadioGroup_RadioGroup = Object.assign(RadioGroup_RadioGroupRoot, {
     ItemContext: RadioGroup.ItemContext,
     Label: RadioGroup_RadioGroupLabel,
     Item: RadioGroup_RadioGroupItem,
+    ItemHiddenInput: RadioGroup.ItemHiddenInput,
     Option: RadioGroup_RadioGroupOption,
     ItemControl: RadioGroup_RadioGroupItemControl,
     ItemText: RadioGroup_RadioGroupItemText,

package/dist/components/radio-group/RadioGroup_module.css

@@ -23,7 +23,6 @@
     gap: var(--moduix-radio-gap, var(--moduix-spacing-2));
     vertical-align: middle;
     cursor: pointer;
-    width: -moz-fit-content;
     width: fit-content;
     display: inline-flex;
   }

package/dist/components/rating-group/RatingGroup.d.ts

@@ -15,6 +15,7 @@ declare const RatingGroup: import("react").ForwardRefExoticComponent<Omit<Rating
     Root: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     RootProvider: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Context: (props: RatingGroupPrimitive.ContextProps) => ReactNode;
+    HiddenInput: import("react").ForwardRefExoticComponent<RatingGroupPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Label: import("react").ForwardRefExoticComponent<Omit<RatingGroupPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
     Control: import("react").ForwardRefExoticComponent<Omit<RatingGroupPrimitive.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<Omit<RatingGroupPrimitive.ItemProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/rating-group/RatingGroup.js

@@ -2,65 +2,60 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/react/rating-group";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
+import { forwardRef } from "react";
 import { RatingStarIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import RatingGroup_module from "./RatingGroup.module.js";
-const RatingGroup_RatingGroupRoot = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+const RatingGroup_RatingGroupRoot = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.Root, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "rating-group-root",
         "data-size": size,
-        className: clsx(RatingGroup_module.root, normalizeClassName(className)),
+        className: clsx(RatingGroup_module.root, className),
         ...props,
-        children: withHiddenInput(children, asChild)
+        "data-slot": "rating-group-root"
     });
 });
-const RatingGroup_RatingGroupRootProvider = /*#__PURE__*/ forwardRef(function({ asChild, children, className, size = 'md', ...props }, ref) {
+const RatingGroup_RatingGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, size = 'md', ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.RootProvider, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "rating-group-root-provider",
         "data-size": size,
-        className: clsx(RatingGroup_module.root, normalizeClassName(className)),
+        className: clsx(RatingGroup_module.root, className),
         ...props,
-        children: withHiddenInput(children, asChild)
+        "data-slot": "rating-group-root-provider"
     });
 });
 const RatingGroup_RatingGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.Label, {
         ref: ref,
-        "data-slot": "rating-group-label",
-        className: clsx(RatingGroup_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(RatingGroup_module.label, className),
+        ...props,
+        "data-slot": "rating-group-label"
     });
 });
 const RatingGroup_RatingGroupControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.Control, {
         ref: ref,
-        "data-slot": "rating-group-control",
-        className: clsx(RatingGroup_module.control, normalizeClassName(className)),
-        ...props
+        className: clsx(RatingGroup_module.control, className),
+        ...props,
+        "data-slot": "rating-group-control"
     });
 });
 const RatingGroup_RatingGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(RatingGroup.Item, {
         ref: ref,
-        "data-slot": "rating-group-item",
-        className: clsx(RatingGroup_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(RatingGroup_module.item, className),
+        ...props,
+        "data-slot": "rating-group-item"
     });
 });
 const RatingGroup_RatingGroupItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     const { half, highlighted } = useRatingGroupItemContext();
     return /*#__PURE__*/ jsx("span", {
         ref: ref,
-        "data-slot": "rating-group-item-indicator",
         "data-half": half ? '' : void 0,
         "data-highlighted": highlighted ? '' : void 0,
-        className: clsx(RatingGroup_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(RatingGroup_module.itemIndicator, className),
         ...props,
+        "data-slot": "rating-group-item-indicator",
         children: children ?? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(RatingStarIcon, {
@@ -75,19 +70,6 @@ const RatingGroup_RatingGroupItemIndicator = /*#__PURE__*/ forwardRef(function({
         })
     });
 });
-function withHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(RatingGroup.HiddenInput, {
-        "data-slot": "rating-group-hidden-input"
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
-}
 function RatingGroupItems({ children }) {
     return /*#__PURE__*/ jsx(Fragment, {
         children: /*#__PURE__*/ jsx(RatingGroup.Context, {
@@ -102,6 +84,7 @@ const RatingGroup_RatingGroup = Object.assign(RatingGroup_RatingGroupRoot, {
     Root: RatingGroup_RatingGroupRoot,
     RootProvider: RatingGroup_RatingGroupRootProvider,
     Context: RatingGroup.Context,
+    HiddenInput: RatingGroup.HiddenInput,
     Label: RatingGroup_RatingGroupLabel,
     Control: RatingGroup_RatingGroupControl,
     Item: RatingGroup_RatingGroupItem,

package/dist/components/rating-group/RatingGroup_module.css

@@ -73,7 +73,7 @@
     pointer-events: none;
   }
 
-  .item-KSLnDf[data-focus-visible], .item-KSLnDf:focus-visible {
+  .item-KSLnDf[data-focus-visible] {
     outline: var(--moduix-rating-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-rating-group-focus-ring-color, var(--moduix-color-ring));
     outline-offset: var(--moduix-rating-group-focus-ring-offset, var(--moduix-border-width-sm));

package/dist/components/scroll-area/ScrollArea.js

@@ -3,7 +3,6 @@ import { jsx } from "react/jsx-runtime";
 import { ScrollArea, useScrollArea, useScrollAreaContext } from "@ark-ui/react/scroll-area";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import ScrollArea_module from "./ScrollArea.module.js";
 const ScrollArea_ScrollAreaRoot = /*#__PURE__*/ forwardRef(function({ className, fade, variant = 'hover', ...props }, ref) {
     return /*#__PURE__*/ jsx(ScrollArea.Root, {
@@ -12,7 +11,7 @@ const ScrollArea_ScrollAreaRoot = /*#__PURE__*/ forwardRef(function({ className,
         "data-slot": "scroll-area-root",
         "data-fade": fade ? '' : void 0,
         "data-variant": variant,
-        className: clsx(ScrollArea_module.root, normalizeClassName(className))
+        className: clsx(ScrollArea_module.root, className)
     });
 });
 const ScrollArea_ScrollAreaRootProvider = /*#__PURE__*/ forwardRef(function({ className, fade, variant = 'hover', ...props }, ref) {
@@ -22,7 +21,7 @@ const ScrollArea_ScrollAreaRootProvider = /*#__PURE__*/ forwardRef(function({ cl
         "data-slot": "scroll-area-root-provider",
         "data-fade": fade ? '' : void 0,
         "data-variant": variant,
-        className: clsx(ScrollArea_module.root, normalizeClassName(className))
+        className: clsx(ScrollArea_module.root, className)
     });
 });
 const ScrollArea_ScrollAreaViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -30,7 +29,7 @@ const ScrollArea_ScrollAreaViewport = /*#__PURE__*/ forwardRef(function({ classN
         ref: ref,
         ...props,
         "data-slot": "scroll-area-viewport",
-        className: clsx(ScrollArea_module.viewport, normalizeClassName(className))
+        className: clsx(ScrollArea_module.viewport, className)
     });
 });
 const ScrollArea_ScrollAreaContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -38,7 +37,7 @@ const ScrollArea_ScrollAreaContent = /*#__PURE__*/ forwardRef(function({ classNa
         ref: ref,
         ...props,
         "data-slot": "scroll-area-content",
-        className: clsx(ScrollArea_module.content, normalizeClassName(className))
+        className: clsx(ScrollArea_module.content, className)
     });
 });
 const ScrollArea_ScrollAreaScrollbar = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -46,7 +45,7 @@ const ScrollArea_ScrollAreaScrollbar = /*#__PURE__*/ forwardRef(function({ class
         ref: ref,
         ...props,
         "data-slot": "scroll-area-scrollbar",
-        className: clsx(ScrollArea_module.scrollbar, normalizeClassName(className))
+        className: clsx(ScrollArea_module.scrollbar, className)
     });
 });
 const ScrollArea_ScrollAreaThumb = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -54,7 +53,7 @@ const ScrollArea_ScrollAreaThumb = /*#__PURE__*/ forwardRef(function({ className
         ref: ref,
         ...props,
         "data-slot": "scroll-area-thumb",
-        className: clsx(ScrollArea_module.thumb, normalizeClassName(className))
+        className: clsx(ScrollArea_module.thumb, className)
     });
 });
 const ScrollArea_ScrollAreaCorner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
@@ -62,7 +61,7 @@ const ScrollArea_ScrollAreaCorner = /*#__PURE__*/ forwardRef(function({ classNam
         ref: ref,
         ...props,
         "data-slot": "scroll-area-corner",
-        className: clsx(ScrollArea_module.corner, normalizeClassName(className))
+        className: clsx(ScrollArea_module.corner, className)
     });
 });
 const ScrollArea_ScrollArea = Object.assign(ScrollArea_ScrollAreaRoot, {

package/dist/components/segment-group/SegmentGroup.d.ts

@@ -16,6 +16,7 @@ declare const SegmentGroup: import("react").ForwardRefExoticComponent<Omit<Segme
     ItemContext: (props: SegmentGroupPrimitive.ItemContextProps) => ReactNode;
     Label: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     Item: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemHiddenInput: import("react").ForwardRefExoticComponent<SegmentGroupPrimitive.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
     ItemControl: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ItemText: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     Indicator: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/segment-group/SegmentGroup.js

@@ -1,11 +1,10 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useFieldContext } from "@ark-ui/react/field";
 import { useFieldsetContext } from "@ark-ui/react/fieldset";
 import { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "@ark-ui/react/segment-group";
 import { clsx } from "clsx";
-import { Children, cloneElement, forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import { forwardRef } from "react";
 import SegmentGroup_module from "./SegmentGroup.module.js";
 function omitUndefined(props) {
     return Object.fromEntries(Object.entries(props).filter(([, value])=>void 0 !== value));
@@ -22,7 +21,7 @@ function SegmentGroup_useSegmentGroup(props) {
     });
 }
 const SegmentGroup_SegmentGroupRoot = /*#__PURE__*/ forwardRef(function({ className, defaultValue, disabled, form, id, ids, invalid, name, onValueChange, orientation = 'horizontal', readOnly, required, value, ...props }, ref) {
-    const segmentGroup = SegmentGroup_useSegmentGroup(omitUndefined({
+    const segmentGroup = SegmentGroup_useSegmentGroup({
         defaultValue,
         disabled,
         form,
@@ -35,76 +34,61 @@ const SegmentGroup_SegmentGroupRoot = /*#__PURE__*/ forwardRef(function({ classN
         readOnly,
         required,
         value
-    }));
+    });
     return /*#__PURE__*/ jsx(SegmentGroup.RootProvider, {
         ref: ref,
         value: segmentGroup,
-        "data-slot": "segment-group-root",
-        className: clsx(SegmentGroup_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(SegmentGroup_module.root, className),
+        ...props,
+        "data-slot": "segment-group-root"
     });
 });
 const SegmentGroup_SegmentGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(SegmentGroup.RootProvider, {
         ref: ref,
-        "data-slot": "segment-group-root-provider",
-        className: clsx(SegmentGroup_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(SegmentGroup_module.root, className),
+        ...props,
+        "data-slot": "segment-group-root-provider"
     });
 });
 const SegmentGroup_SegmentGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(SegmentGroup.Label, {
         ref: ref,
-        "data-slot": "segment-group-label",
-        className: clsx(SegmentGroup_module.label, normalizeClassName(className)),
-        ...props
+        className: clsx(SegmentGroup_module.label, className),
+        ...props,
+        "data-slot": "segment-group-label"
     });
 });
-const SegmentGroup_SegmentGroupItem = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+const SegmentGroup_SegmentGroupItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(SegmentGroup.Item, {
         ref: ref,
-        asChild: asChild,
-        "data-slot": "segment-group-item",
-        className: clsx(SegmentGroup_module.item, normalizeClassName(className)),
+        className: clsx(SegmentGroup_module.item, className),
         ...props,
-        children: withItemHiddenInput(children, asChild)
+        "data-slot": "segment-group-item"
     });
 });
 const SegmentGroup_SegmentGroupItemControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(SegmentGroup.ItemControl, {
         ref: ref,
-        "data-slot": "segment-group-item-control",
-        className: clsx(SegmentGroup_module.itemControl, normalizeClassName(className)),
-        ...props
+        className: clsx(SegmentGroup_module.itemControl, className),
+        ...props,
+        "data-slot": "segment-group-item-control"
     });
 });
 const SegmentGroup_SegmentGroupItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(SegmentGroup.ItemText, {
         ref: ref,
-        "data-slot": "segment-group-item-text",
-        className: clsx(SegmentGroup_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(SegmentGroup_module.itemText, className),
+        ...props,
+        "data-slot": "segment-group-item-text"
     });
 });
-function withItemHiddenInput(children, asChild) {
-    const hiddenInput = /*#__PURE__*/ jsx(SegmentGroup.ItemHiddenInput, {
-        "data-slot": "segment-group-item-hidden-input"
-    });
-    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            children,
-            hiddenInput
-        ]
-    });
-    const child = Children.only(children);
-    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
-}
 const SegmentGroup_SegmentGroupIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(SegmentGroup.Indicator, {
         ref: ref,
-        "data-slot": "segment-group-indicator",
-        className: clsx(SegmentGroup_module.indicator, normalizeClassName(className)),
-        ...props
+        className: clsx(SegmentGroup_module.indicator, className),
+        ...props,
+        "data-slot": "segment-group-indicator"
     });
 });
 function SegmentGroupItems({ items }) {
@@ -115,7 +99,8 @@ function SegmentGroupItems({ items }) {
                 /*#__PURE__*/ jsx(SegmentGroup_SegmentGroupItemText, {
                     children: label
                 }),
-                /*#__PURE__*/ jsx(SegmentGroup_SegmentGroupItemControl, {})
+                /*#__PURE__*/ jsx(SegmentGroup_SegmentGroupItemControl, {}),
+                /*#__PURE__*/ jsx(SegmentGroup.ItemHiddenInput, {})
             ]
         }, value));
 }
@@ -126,6 +111,7 @@ const SegmentGroup_SegmentGroup = Object.assign(SegmentGroup_SegmentGroupRoot, {
     ItemContext: SegmentGroup.ItemContext,
     Label: SegmentGroup_SegmentGroupLabel,
     Item: SegmentGroup_SegmentGroupItem,
+    ItemHiddenInput: SegmentGroup.ItemHiddenInput,
     ItemControl: SegmentGroup_SegmentGroupItemControl,
     ItemText: SegmentGroup_SegmentGroupItemText,
     Indicator: SegmentGroup_SegmentGroupIndicator,

package/dist/components/segment-group/SegmentGroup_module.css

@@ -71,6 +71,10 @@
     .item-YWqgii:hover:not([data-readonly], [data-disabled]) {
       color: var(--moduix-segment-group-item-color-hover, var(--moduix-color-foreground));
     }
+
+    .item-YWqgii:hover:not([data-readonly], [data-disabled])[data-state="checked"] {
+      color: var(--moduix-segment-group-item-color-hover, var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground)));
+    }
   }
 
   .item-YWqgii[data-state="checked"] {

package/dist/components/select/Select.d.ts

@@ -1,12 +1,8 @@
 import { Select as SelectPrimitive, type SelectRootComponent as ArkSelectRootComponent, type SelectRootProviderComponent as ArkSelectRootProviderComponent, useSelect, useSelectContext, useSelectItemContext } from '@ark-ui/react/select';
 import type { ComponentProps, ReactNode } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
-type SelectNativeFormControl = 'select' | 'input';
-type SelectRootOwnProps = OverlayPortalProps & {
-    nativeFormControl?: SelectNativeFormControl;
-};
-type SelectRootComponent = ArkSelectRootComponent<SelectRootOwnProps>;
-type SelectRootProviderComponent = ArkSelectRootProviderComponent<SelectRootOwnProps>;
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
+type SelectRootComponent = ArkSelectRootComponent<OverlayPortalProps>;
+type SelectRootProviderComponent = ArkSelectRootProviderComponent<OverlayPortalProps>;
 type SelectFieldProps = Omit<ComponentProps<typeof SelectPrimitive.Control>, 'asChild' | 'children'> & {
     clearLabel?: string;
     indicator?: ReactNode;
@@ -16,6 +12,7 @@ declare const Select: SelectRootComponent & {
     Root: SelectRootComponent;
     RootProvider: SelectRootProviderComponent;
     Context: <T extends unknown>(props: SelectPrimitive.ContextProps<T>) => ReactNode;
+    HiddenSelect: import("react").ForwardRefExoticComponent<SelectPrimitive.HiddenSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
     ItemContext: (props: SelectPrimitive.ItemContextProps) => ReactNode;
     useSelect: <T extends unknown>(props: import("@ark-ui/react/select").UseSelectProps<T>) => import("@ark-ui/react/select").UseSelectReturn<T>;
     useSelectContext: () => import("@ark-ui/react/select").UseSelectContext<any>;