@moduix/react 1.1.1 → 2.0.0

package/dist/components/progress-linear/ProgressLinear.d.ts

@@ -4,11 +4,14 @@ import { Progress } from "@ark-ui/react/progress";
 declare const ProgressLinear: import("react").ForwardRefExoticComponent<Omit<Progress.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<Progress.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<Progress.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: Progress.ContextProps) => import("react").ReactNode;
   Label: import("react").ForwardRefExoticComponent<Omit<Progress.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Progress.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Track: import("react").ForwardRefExoticComponent<Omit<Progress.TrackProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Range: import("react").ForwardRefExoticComponent<Omit<Progress.RangeProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   View: import("react").ForwardRefExoticComponent<Omit<Progress.ViewProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  useProgress: (props?: import("@ark-ui/react/progress").UseProgressProps) => import("@ark-ui/react/progress").UseProgressReturn;
+  useProgressContext: () => import("@ark-ui/react/progress").UseProgressContext;
 };
 //#endregion
 export { ProgressLinear };

package/dist/components/progress-linear/ProgressLinear.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import ProgressLinear_module_default from "./ProgressLinear.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { Progress } from "@ark-ui/react/progress";
+import { jsx } from "react/jsx-runtime";
+import { Progress, useProgress, useProgressContext } from "@ark-ui/react/progress";
 //#region src/components/progress-linear/ProgressLinear.tsx
 const ProgressLinearRoot = forwardRef(function ProgressLinearRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Progress.Root, {
@@ -64,11 +64,14 @@ const ProgressLinearView = forwardRef(function ProgressLinearView({ className, .
 const ProgressLinear = Object.assign(ProgressLinearRoot, {
 	Root: ProgressLinearRoot,
 	RootProvider: ProgressLinearRootProvider,
+	Context: Progress.Context,
 	Label: ProgressLinearLabel,
 	ValueText: ProgressLinearValueText,
 	Track: ProgressLinearTrack,
 	Range: ProgressLinearRange,
-	View: ProgressLinearView
+	View: ProgressLinearView,
+	useProgress,
+	useProgressContext
 });
 //#endregion
 export { ProgressLinear };

package/dist/components/qr-code/QrCode.css

@@ -13,8 +13,9 @@
 
   .ZbLWjq_frame {
     box-sizing: border-box;
-    width: var(--qr-code-size, 8rem);
-    height: var(--qr-code-size, 8rem);
+    width: min(var(--qr-code-size, 8rem), 100%);
+    aspect-ratio: 1;
+    height: auto;
     color: inherit;
     fill: var(--qr-code-fill, currentColor);
     display: block;

package/dist/components/qr-code/QrCode.d.ts

@@ -1,4 +1,4 @@
-import { QrCode } from "@ark-ui/react/qr-code";
+import { QrCode, useQrCode } from "@ark-ui/react/qr-code";
 
 //#region src/components/qr-code/QrCode.d.ts
 declare const QrCode$1: import("react").ForwardRefExoticComponent<Omit<QrCode.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
@@ -10,4 +10,4 @@ declare const QrCode$1: import("react").ForwardRefExoticComponent<Omit<QrCode.Ro
   DownloadTrigger: import("react").ForwardRefExoticComponent<Omit<QrCode.DownloadTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
-export { QrCode$1 as QrCode };
+export { QrCode$1 as QrCode, useQrCode };

package/dist/components/qr-code/QrCode.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import QrCode_module_default from "./QrCode.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { QrCode } from "@ark-ui/react/qr-code";
+import { jsx } from "react/jsx-runtime";
+import { QrCode, useQrCode } from "@ark-ui/react/qr-code";
 //#region src/components/qr-code/QrCode.tsx
 const QrCodeRoot = forwardRef(function QrCodeRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(QrCode.Root, {
@@ -62,4 +62,4 @@ const QrCode$1 = Object.assign(QrCodeRoot, {
 	DownloadTrigger: QrCodeDownloadTrigger
 });
 //#endregion
-export { QrCode$1 as QrCode };
+export { QrCode$1 as QrCode, useQrCode };

package/dist/components/qr-code/index.d.ts

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

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

@@ -1,20 +1,24 @@
-import { ComponentProps } from "react";
-import { RadioGroup } from "@ark-ui/react/radio-group";
+import { ComponentProps, ReactNode } from "react";
+import { RadioGroup, useRadioGroup } from "@ark-ui/react/radio-group";
 
 //#region src/components/radio-group/RadioGroup.d.ts
 type RadioGroupItemControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type RadioGroupItemControlProps = ComponentProps<typeof RadioGroup.ItemControl> & {
   size?: RadioGroupItemControlSize;
 };
+type RadioGroupOptionProps = Omit<ComponentProps<typeof RadioGroup.Item>, 'asChild' | 'children'> & {
+  children: ReactNode;
+  size?: RadioGroupItemControlSize;
+};
 declare const RadioGroup$1: import("react").ForwardRefExoticComponent<Omit<RadioGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<RadioGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<RadioGroup.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Label: import("react").ForwardRefExoticComponent<Omit<RadioGroup.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<RadioGroup.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  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<RadioGroup.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  ItemHiddenInput: import("react").ForwardRefExoticComponent<Omit<RadioGroup.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   Indicator: import("react").ForwardRefExoticComponent<Omit<RadioGroup.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 //#endregion
-export { RadioGroup$1 as RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize };
+export { RadioGroup$1 as RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize, type RadioGroupOptionProps, useRadioGroup };

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

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import RadioGroup_module_default from "./RadioGroup.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { RadioGroup } from "@ark-ui/react/radio-group";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroup, useRadioGroup } from "@ark-ui/react/radio-group";
 //#region src/components/radio-group/RadioGroup.tsx
 const RadioGroupRoot = forwardRef(function RadioGroupRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(RadioGroup.Root, {
@@ -29,12 +29,21 @@ const RadioGroupLabel = forwardRef(function RadioGroupLabel({ className, ...prop
 		...props
 	});
 });
-const RadioGroupItem = forwardRef(function RadioGroupItem({ className, ...props }, ref) {
+const RadioGroupItem = forwardRef(function RadioGroupItem({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(RadioGroup.Item, {
 		ref,
+		asChild,
 		"data-slot": "radio-group-item",
 		className: clsx(RadioGroup_module_default.item, normalizeClassName(className)),
-		...props
+		...props,
+		children: withItemHiddenInput(children, asChild)
+	});
+});
+const RadioGroupOption = forwardRef(function RadioGroupOption({ children, size, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(RadioGroupItem, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(RadioGroupItemControl, { size }), /* @__PURE__ */ jsx(RadioGroupItemText, { children })]
 	});
 });
 const RadioGroupItemControl = forwardRef(function RadioGroupItemControl({ className, size = "md", ...props }, ref) {
@@ -54,13 +63,12 @@ const RadioGroupItemText = forwardRef(function RadioGroupItemText({ className, .
 		...props
 	});
 });
-const RadioGroupItemHiddenInput = forwardRef(function RadioGroupItemHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, {
-		ref,
-		"data-slot": "radio-group-item-hidden-input",
-		...props
-	});
-});
+function withItemHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, { "data-slot": "radio-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 RadioGroupIndicator = forwardRef(function RadioGroupIndicator({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(RadioGroup.Indicator, {
 		ref,
@@ -74,10 +82,10 @@ const RadioGroup$1 = Object.assign(RadioGroupRoot, {
 	RootProvider: RadioGroupRootProvider,
 	Label: RadioGroupLabel,
 	Item: RadioGroupItem,
+	Option: RadioGroupOption,
 	ItemControl: RadioGroupItemControl,
 	ItemText: RadioGroupItemText,
-	ItemHiddenInput: RadioGroupItemHiddenInput,
 	Indicator: RadioGroupIndicator
 });
 //#endregion
-export { RadioGroup$1 as RadioGroup };
+export { RadioGroup$1 as RadioGroup, useRadioGroup };

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

@@ -1,2 +1,2 @@
-import { RadioGroup, RadioGroupItemControlProps, RadioGroupItemControlSize } from "./RadioGroup.js";
-export { RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize };
+import { RadioGroup, RadioGroupItemControlProps, RadioGroupItemControlSize, RadioGroupOptionProps, useRadioGroup } from "./RadioGroup.js";
+export { RadioGroup, type RadioGroupItemControlProps, type RadioGroupItemControlSize, type RadioGroupOptionProps, useRadioGroup };

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

@@ -72,9 +72,9 @@
     }
 
     &: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);
     }
   }
 

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/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

@@ -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,6 +137,11 @@
     &[data-scrolling] {
       transition-duration: 0s;
     }
+
+    .xqtLha_root[data-variant="always"] & {
+      opacity: var(--scroll-area-scrollbar-visible-opacity, 1);
+      pointer-events: auto;
+    }
   }
 
   .xqtLha_thumb {

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/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/index.d.ts

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

package/dist/components/select/Select.css

@@ -1,8 +1,10 @@
 @layer ui.components {
   @keyframes FGbIOa_select-content-open {
     from {
-      opacity: var(--select-content-closed-opacity, 0);
-      transform: scale(var(--select-content-closed-scale, var(--scale-popup)));
+      opacity: var(--select-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--select-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -18,8 +20,9 @@
     }
 
     to {
-      opacity: var(--select-content-closed-opacity, 0);
-      transform: scale(var(--select-content-closed-scale, var(--scale-popup)));
+      opacity: var(--select-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--select-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
@@ -145,7 +148,7 @@
     transform: translateY(-50%);
   }
 
-  .FGbIOa_indicator, .FGbIOa_clearTrigger {
+  .FGbIOa_indicator {
     box-sizing: border-box;
     width: var(--select-action-size, 1.5rem);
     height: var(--select-action-size, 1.5rem);
@@ -184,16 +187,18 @@
   }
 
   .FGbIOa_clearTrigger {
-    cursor: pointer;
+    --close-button-size: var(--select-action-size, 1.5rem);
+    --close-button-icon-size: var(--select-icon-size, 1rem);
+    --close-button-radius: var(--select-action-radius, var(--radius-sm));
+    --close-button-bg: var(--select-action-bg, transparent);
+    --close-button-bg-hover: var(--select-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--select-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--select-action-color-hover, var(--color-foreground));
+    --close-button-transition: var(--select-transition, var(--transition-default));
     pointer-events: auto;
 
-    &:not(:is([disabled], [data-disabled])) {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-action-bg-hover, var(--color-muted));
-          color: var(--select-action-color-hover, var(--color-foreground));
-        }
-      }
+    &[hidden] {
+      display: none;
     }
   }
 
@@ -224,11 +229,15 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: FGbIOa_select-content-open var(--select-transition, var(--transition-default));
+      animation: FGbIOa_select-content-open
+        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: FGbIOa_select-content-closed var(--select-transition, var(--transition-default));
+      animation: FGbIOa_select-content-closed
+        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
       pointer-events: none;
     }
   }