@moduix/react 1.1.0 → 2.0.0

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._6aTNoq_root {
+  .Jh_n9a_root {
     gap: var(--rating-group-root-gap, var(--spacing-1));
     color: var(--rating-group-color, var(--color-muted-foreground));
     flex-direction: column;
@@ -26,7 +26,7 @@
     }
   }
 
-  ._6aTNoq_label {
+  .Jh_n9a_label {
     color: var(--rating-group-label-color, var(--color-foreground));
     font-size: var(--rating-group-label-font-size, var(--text-sm));
     font-weight: var(--rating-group-label-font-weight, var(--weight-semibold));
@@ -38,7 +38,7 @@
     }
   }
 
-  ._6aTNoq_control {
+  .Jh_n9a_control {
     align-items: center;
     gap: var(--rating-group-gap, var(--spacing-1));
     display: inline-flex;
@@ -48,7 +48,7 @@
     }
   }
 
-  ._6aTNoq_item {
+  .Jh_n9a_item {
     border-radius: var(--radius-sm);
     color: inherit;
     cursor: pointer;
@@ -72,13 +72,13 @@
     }
 
     &:focus-visible {
-      outline: var(--rating-group-focus-ring-width, var(--border-width-sm)) solid
-        var(--rating-group-focus-ring-color, var(--color-ring));
-      outline-offset: var(--rating-group-focus-ring-offset, var(--border-width-sm));
+      outline: var(--rating-group-focus-ring-width, 0) solid
+        var(--rating-group-focus-ring-color, transparent);
+      outline-offset: var(--rating-group-focus-ring-offset, 0);
     }
   }
 
-  ._6aTNoq_itemIndicator {
+  .Jh_n9a_itemIndicator {
     width: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
     height: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
     color: var(--rating-group-active-color, var(--color-primary));
@@ -97,24 +97,24 @@
       flex: none;
     }
 
-    &[data-half] ._6aTNoq_iconFg {
+    &[data-half] .Jh_n9a_iconFg {
       clip-path: inset(0 50% 0 0);
     }
 
-    &:not([data-highlighted]) ._6aTNoq_iconFg {
+    &:not([data-highlighted]) .Jh_n9a_iconFg {
       clip-path: inset(0 100% 0 0);
     }
   }
 
-  ._6aTNoq_item[data-half] ._6aTNoq_iconFg {
+  .Jh_n9a_item[data-half] .Jh_n9a_iconFg {
     clip-path: inset(0 50% 0 0);
   }
 
-  ._6aTNoq_item:not([data-highlighted]) ._6aTNoq_iconFg {
+  .Jh_n9a_item:not([data-highlighted]) .Jh_n9a_iconFg {
     clip-path: inset(0 100% 0 0);
   }
 
-  ._6aTNoq_iconBg {
+  .Jh_n9a_iconBg {
     color: var(--rating-group-color, var(--color-muted-foreground));
     fill: #0000;
     stroke: currentColor;
@@ -122,7 +122,7 @@
     inset: 0;
   }
 
-  ._6aTNoq_iconFg {
+  .Jh_n9a_iconFg {
     color: var(--rating-group-active-color, var(--color-primary));
     fill: currentColor;
     stroke: currentColor;

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

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
-import { RatingGroup } from "@ark-ui/react/rating-group";
+import { ComponentProps, ReactNode } from "react";
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/react/rating-group";
 
 //#region src/components/rating-group/RatingGroup.d.ts
 type RatingGroupSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -10,14 +10,21 @@ type RatingGroupRootProviderProps = ComponentProps<typeof RatingGroup.RootProvid
   size?: RatingGroupSize;
 };
 type RatingGroupItemIndicatorProps = ComponentProps<'span'>;
+declare function RatingGroupItems({
+  children
+}: {
+  children?: ReactNode;
+}): import("react").JSX.Element;
 declare const RatingGroup$1: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<RatingGroupRootProviderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: RatingGroup.ContextProps) => ReactNode;
   Label: import("react").ForwardRefExoticComponent<Omit<RatingGroup.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<RatingGroup.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<RatingGroup.ItemProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  ItemContext: (props: RatingGroup.ItemContextProps) => ReactNode;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<RatingGroup.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Items: typeof RatingGroupItems;
 };
 //#endregion
-export { RatingGroup$1 as RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize };
+export { RatingGroup$1 as RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };

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

@@ -1,27 +1,31 @@
-import { RatingStarIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { RatingStarIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import RatingGroup_module_default from "./RatingGroup.module.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { RatingGroup, useRatingGroupItemContext } from "@ark-ui/react/rating-group";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "@ark-ui/react/rating-group";
 //#region src/components/rating-group/RatingGroup.tsx
-const RatingGroupRoot = forwardRef(function RatingGroupRoot({ className, size = "md", ...props }, ref) {
+const RatingGroupRoot = forwardRef(function RatingGroupRoot({ asChild, children, className, size = "md", ...props }, ref) {
 	return /* @__PURE__ */ jsx(RatingGroup.Root, {
 		ref,
+		asChild,
 		"data-slot": "rating-group-root",
 		"data-size": size,
 		className: clsx(RatingGroup_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
-const RatingGroupRootProvider = forwardRef(function RatingGroupRootProvider({ className, size = "md", ...props }, ref) {
+const RatingGroupRootProvider = forwardRef(function RatingGroupRootProvider({ asChild, children, className, size = "md", ...props }, ref) {
 	return /* @__PURE__ */ jsx(RatingGroup.RootProvider, {
 		ref,
+		asChild,
 		"data-slot": "rating-group-root-provider",
 		"data-size": size,
 		className: clsx(RatingGroup_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const RatingGroupLabel = forwardRef(function RatingGroupLabel({ className, ...props }, ref) {
@@ -57,7 +61,7 @@ const RatingGroupItemIndicator = forwardRef(function RatingGroupItemIndicator({
 		"data-highlighted": highlighted ? "" : void 0,
 		className: clsx(RatingGroup_module_default.itemIndicator, normalizeClassName(className)),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RatingStarIcon, {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RatingStarIcon, {
 			"data-slot": "rating-group-item-indicator-bg",
 			className: RatingGroup_module_default.iconBg
 		}), /* @__PURE__ */ jsx(RatingStarIcon, {
@@ -66,21 +70,28 @@ const RatingGroupItemIndicator = forwardRef(function RatingGroupItemIndicator({
 		})] })
 	});
 });
-const RatingGroupHiddenInput = forwardRef(function RatingGroupHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(RatingGroup.HiddenInput, {
-		ref,
-		"data-slot": "rating-group-hidden-input",
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(RatingGroup.HiddenInput, { "data-slot": "rating-group-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
+function RatingGroupItems({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(RatingGroup.Context, { children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(RatingGroupItem, {
+		index: item,
+		children: children ?? /* @__PURE__ */ jsx(RatingGroupItemIndicator, {})
+	}, item)) }) });
+}
 const RatingGroup$1 = Object.assign(RatingGroupRoot, {
 	Root: RatingGroupRoot,
 	RootProvider: RatingGroupRootProvider,
+	Context: RatingGroup.Context,
 	Label: RatingGroupLabel,
 	Control: RatingGroupControl,
 	Item: RatingGroupItem,
+	ItemContext: RatingGroup.ItemContext,
 	ItemIndicator: RatingGroupItemIndicator,
-	HiddenInput: RatingGroupHiddenInput
+	Items: RatingGroupItems
 });
 //#endregion
-export { RatingGroup$1 as RatingGroup };
+export { RatingGroup$1 as RatingGroup, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };

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

@@ -1,13 +1,13 @@
 import './RatingGroup.css';
 //#region src/components/rating-group/RatingGroup.module.css
 var RatingGroup_module_default = {
-	"control": "_6aTNoq_control",
-	"iconBg": "_6aTNoq_iconBg",
-	"iconFg": "_6aTNoq_iconFg",
-	"item": "_6aTNoq_item",
-	"itemIndicator": "_6aTNoq_itemIndicator",
-	"label": "_6aTNoq_label",
-	"root": "_6aTNoq_root"
+	"control": "Jh_n9a_control",
+	"iconBg": "Jh_n9a_iconBg",
+	"iconFg": "Jh_n9a_iconFg",
+	"item": "Jh_n9a_item",
+	"itemIndicator": "Jh_n9a_itemIndicator",
+	"label": "Jh_n9a_label",
+	"root": "Jh_n9a_root"
 };
 //#endregion
 export { RatingGroup_module_default as default };

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

@@ -1,2 +1,2 @@
-import { RatingGroup, RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize } from "./RatingGroup.js";
-export { RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize };
+import { RatingGroup, RatingGroupItemIndicatorProps, RatingGroupRootProps, RatingGroupRootProviderProps, RatingGroupSize, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext } from "./RatingGroup.js";
+export { RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize, useRatingGroup, useRatingGroupContext, useRatingGroupItemContext };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._2HrnkW_root {
+  .xqtLha_root {
     box-sizing: border-box;
     width: var(--scroll-area-width, 100%);
     height: var(--scroll-area-height, 100%);
@@ -9,7 +9,7 @@
     position: relative;
   }
 
-  ._2HrnkW_viewport {
+  .xqtLha_viewport {
     box-sizing: border-box;
     border-radius: var(--scroll-area-radius, var(--radius-md));
     background-color: var(--scroll-area-bg, transparent);
@@ -35,7 +35,7 @@
       display: none;
     }
 
-    ._2HrnkW_root[data-fade] & {
+    .xqtLha_root[data-fade] & {
       mask-image: var(--_scroll-area-block-fade-mask);
       mask-repeat: no-repeat;
     }
@@ -47,13 +47,13 @@
     }
   }
 
-  ._2HrnkW_content {
+  .xqtLha_content {
     box-sizing: border-box;
     padding: var(--scroll-area-content-padding, 0);
     display: block;
   }
 
-  ._2HrnkW_scrollbar {
+  .xqtLha_scrollbar {
     --_scroll-area-scrollbar-margin: var(--scroll-area-scrollbar-margin, var(--spacing-1));
     --_scroll-area-scrollbar-hit-area-size: var(--scroll-area-scrollbar-hit-area-size, var(--spacing-5));
     box-sizing: border-box;
@@ -65,8 +65,8 @@
     user-select: none;
     touch-action: none;
     transition: opacity var(--scroll-area-transition, var(--transition-default)),
-      width var(--scroll-area-transition, var(--transition-slow)),
-      height var(--scroll-area-transition, var(--transition-slow));
+      width var(--scroll-area-thumb-hover-transition, var(--transition-fast)),
+      height var(--scroll-area-thumb-hover-transition, var(--transition-fast));
     justify-content: center;
     display: flex;
     position: absolute;
@@ -137,9 +137,14 @@
     &[data-scrolling] {
       transition-duration: 0s;
     }
+
+    .xqtLha_root[data-variant="always"] & {
+      opacity: var(--scroll-area-scrollbar-visible-opacity, 1);
+      pointer-events: auto;
+    }
   }
 
-  ._2HrnkW_thumb {
+  .xqtLha_thumb {
     box-sizing: border-box;
     border-radius: var(--scroll-area-thumb-radius, var(--radius-full));
     background-color: var(--scroll-area-thumb-bg, var(--color-border));
@@ -155,7 +160,7 @@
     }
   }
 
-  ._2HrnkW_corner {
+  .xqtLha_corner {
     box-sizing: border-box;
     background-color: var(--scroll-area-corner-bg, var(--scroll-area-scrollbar-bg, transparent));
   }

package/dist/components/scroll-area/ScrollArea.d.ts

@@ -4,9 +4,11 @@ import { ScrollArea } from "@ark-ui/react/scroll-area";
 //#region src/components/scroll-area/ScrollArea.d.ts
 type ModuixScrollAreaRootProps = ComponentProps<typeof ScrollArea.Root> & {
   fade?: boolean;
+  variant?: 'hover' | 'always';
 };
 type ModuixScrollAreaRootProviderProps = ComponentProps<typeof ScrollArea.RootProvider> & {
   fade?: boolean;
+  variant?: 'hover' | 'always';
 };
 declare const ScrollArea$1: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<ModuixScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -16,6 +18,7 @@ declare const ScrollArea$1: import("react").ForwardRefExoticComponent<Omit<Modui
   Scrollbar: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Thumb: import("react").ForwardRefExoticComponent<Omit<ScrollArea.ThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Corner: import("react").ForwardRefExoticComponent<Omit<ScrollArea.CornerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  useScrollArea: (props?: import("@ark-ui/react/scroll-area").UseScrollAreaProps) => import("@ark-ui/react/scroll-area").UseScrollAreaReturn;
 };
 //#endregion
 export { type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, ScrollArea$1 as ScrollArea };

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

@@ -1,24 +1,26 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import ScrollArea_module_default from "./ScrollArea.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { ScrollArea } from "@ark-ui/react/scroll-area";
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea, useScrollArea } from "@ark-ui/react/scroll-area";
 //#region src/components/scroll-area/ScrollArea.tsx
-const ScrollAreaRoot = forwardRef(function ScrollAreaRoot({ className, fade, ...props }, ref) {
+const ScrollAreaRoot = forwardRef(function ScrollAreaRoot({ className, fade, variant = "hover", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ScrollArea.Root, {
 		ref,
 		"data-slot": "scroll-area-root",
 		"data-fade": fade ? "" : void 0,
+		"data-variant": variant,
 		className: clsx(ScrollArea_module_default.root, normalizeClassName(className)),
 		...props
 	});
 });
-const ScrollAreaRootProvider = forwardRef(function ScrollAreaRootProvider({ className, fade, ...props }, ref) {
+const ScrollAreaRootProvider = forwardRef(function ScrollAreaRootProvider({ className, fade, variant = "hover", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ScrollArea.RootProvider, {
 		ref,
 		"data-slot": "scroll-area-root-provider",
 		"data-fade": fade ? "" : void 0,
+		"data-variant": variant,
 		className: clsx(ScrollArea_module_default.root, normalizeClassName(className)),
 		...props
 	});
@@ -70,7 +72,8 @@ const ScrollArea$1 = Object.assign(ScrollAreaRoot, {
 	Content: ScrollAreaContent,
 	Scrollbar: ScrollAreaScrollbar,
 	Thumb: ScrollAreaThumb,
-	Corner: ScrollAreaCorner
+	Corner: ScrollAreaCorner,
+	useScrollArea
 });
 //#endregion
-export { ScrollArea$1 as ScrollArea };
+export { ScrollArea$1 as ScrollArea, useScrollArea };

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

@@ -1,12 +1,12 @@
 import './ScrollArea.css';
 //#region src/components/scroll-area/ScrollArea.module.css
 var ScrollArea_module_default = {
-	"content": "_2HrnkW_content",
-	"corner": "_2HrnkW_corner",
-	"root": "_2HrnkW_root",
-	"scrollbar": "_2HrnkW_scrollbar",
-	"thumb": "_2HrnkW_thumb",
-	"viewport": "_2HrnkW_viewport"
+	"content": "xqtLha_content",
+	"corner": "xqtLha_corner",
+	"root": "xqtLha_root",
+	"scrollbar": "xqtLha_scrollbar",
+	"thumb": "xqtLha_thumb",
+	"viewport": "xqtLha_viewport"
 };
 //#endregion
 export { ScrollArea_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .wkt6sG_root {
+  ._3r0tBa_root {
     box-sizing: border-box;
     isolation: isolate;
     max-width: var(--segment-group-max-width, 100%);
@@ -28,7 +28,7 @@
     }
   }
 
-  .wkt6sG_label {
+  ._3r0tBa_label {
     z-index: 1;
     color: var(--segment-group-label-color, var(--segment-group-color, var(--color-foreground)));
     font-size: var(--segment-group-label-font-size, var(--text-sm));
@@ -38,7 +38,7 @@
     position: relative;
   }
 
-  .wkt6sG_item {
+  ._3r0tBa_item {
     box-sizing: border-box;
     z-index: 1;
     justify-content: center;
@@ -94,16 +94,16 @@
     }
   }
 
-  .wkt6sG_itemControl {
+  ._3r0tBa_itemControl {
     display: none;
   }
 
-  .wkt6sG_itemText {
+  ._3r0tBa_itemText {
     z-index: 1;
     position: relative;
   }
 
-  .wkt6sG_indicator {
+  ._3r0tBa_indicator {
     --transition-duration: var(--segment-group-indicator-transition-duration, var(--duration-normal));
     --transition-timing-function: var(--segment-group-indicator-transition-timing-function, var(--ease-in-out));
     z-index: 0;

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

@@ -1,6 +1,16 @@
-import { SegmentGroup } from "@ark-ui/react/segment-group";
+import { ReactNode } from "react";
+import { SegmentGroup, useSegmentGroup } from "@ark-ui/react/segment-group";
 
 //#region src/components/segment-group/SegmentGroup.d.ts
+declare function SegmentGroupItems({
+  items
+}: {
+  items: readonly {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+  }[];
+}): import("react").JSX.Element[];
 declare const SegmentGroup$1: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -8,8 +18,8 @@ declare const SegmentGroup$1: import("react").ForwardRefExoticComponent<Omit<Seg
   Item: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   ItemControl: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  ItemHiddenInput: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Items: typeof SegmentGroupItems;
 };
 //#endregion
-export { SegmentGroup$1 as SegmentGroup };
+export { SegmentGroup$1 as SegmentGroup, useSegmentGroup };

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

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import SegmentGroup_module_default from "./SegmentGroup.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { SegmentGroup } from "@ark-ui/react/segment-group";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { SegmentGroup, useSegmentGroup } from "@ark-ui/react/segment-group";
 //#region src/components/segment-group/SegmentGroup.tsx
 const SegmentGroupRoot = forwardRef(function SegmentGroupRoot({ className, orientation = "horizontal", ...props }, ref) {
 	return /* @__PURE__ */ jsx(SegmentGroup.Root, {
@@ -30,12 +30,14 @@ const SegmentGroupLabel = forwardRef(function SegmentGroupLabel({ className, ...
 		...props
 	});
 });
-const SegmentGroupItem = forwardRef(function SegmentGroupItem({ className, ...props }, ref) {
+const SegmentGroupItem = forwardRef(function SegmentGroupItem({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SegmentGroup.Item, {
 		ref,
+		asChild,
 		"data-slot": "segment-group-item",
 		className: clsx(SegmentGroup_module_default.item, normalizeClassName(className)),
-		...props
+		...props,
+		children: withItemHiddenInput(children, asChild)
 	});
 });
 const SegmentGroupItemControl = forwardRef(function SegmentGroupItemControl({ className, ...props }, ref) {
@@ -54,13 +56,12 @@ const SegmentGroupItemText = forwardRef(function SegmentGroupItemText({ classNam
 		...props
 	});
 });
-const SegmentGroupItemHiddenInput = forwardRef(function SegmentGroupItemHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, {
-		ref,
-		"data-slot": "segment-group-item-hidden-input",
-		...props
-	});
-});
+function withItemHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, { "data-slot": "segment-group-item-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const SegmentGroupIndicator = forwardRef(function SegmentGroupIndicator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(SegmentGroup.Indicator, {
 		ref,
@@ -69,6 +70,13 @@ const SegmentGroupIndicator = forwardRef(function SegmentGroupIndicator({ classN
 		...props
 	});
 });
+function SegmentGroupItems({ items }) {
+	return items.map(({ value, label, disabled }) => /* @__PURE__ */ jsxs(SegmentGroupItem, {
+		value,
+		disabled,
+		children: [/* @__PURE__ */ jsx(SegmentGroupItemText, { children: label }), /* @__PURE__ */ jsx(SegmentGroupItemControl, {})]
+	}, value));
+}
 const SegmentGroup$1 = Object.assign(SegmentGroupRoot, {
 	Root: SegmentGroupRoot,
 	RootProvider: SegmentGroupRootProvider,
@@ -76,8 +84,8 @@ const SegmentGroup$1 = Object.assign(SegmentGroupRoot, {
 	Item: SegmentGroupItem,
 	ItemControl: SegmentGroupItemControl,
 	ItemText: SegmentGroupItemText,
-	ItemHiddenInput: SegmentGroupItemHiddenInput,
-	Indicator: SegmentGroupIndicator
+	Indicator: SegmentGroupIndicator,
+	Items: SegmentGroupItems
 });
 //#endregion
-export { SegmentGroup$1 as SegmentGroup };
+export { SegmentGroup$1 as SegmentGroup, useSegmentGroup };

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

@@ -1,12 +1,12 @@
 import './SegmentGroup.css';
 //#region src/components/segment-group/SegmentGroup.module.css
 var SegmentGroup_module_default = {
-	"indicator": "wkt6sG_indicator",
-	"item": "wkt6sG_item",
-	"itemControl": "wkt6sG_itemControl",
-	"itemText": "wkt6sG_itemText",
-	"label": "wkt6sG_label",
-	"root": "wkt6sG_root"
+	"indicator": "_3r0tBa_indicator",
+	"item": "_3r0tBa_item",
+	"itemControl": "_3r0tBa_itemControl",
+	"itemText": "_3r0tBa_itemText",
+	"label": "_3r0tBa_label",
+	"root": "_3r0tBa_root"
 };
 //#endregion
 export { SegmentGroup_module_default as default };

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

@@ -1,2 +1,2 @@
-import { SegmentGroup } from "./SegmentGroup.js";
-export { SegmentGroup };
+import { SegmentGroup, useSegmentGroup } from "./SegmentGroup.js";
+export { SegmentGroup, useSegmentGroup };