@moduix/react 1.1.0 → 2.0.0

package/dist/components/progress-circular/ProgressCircular.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .Y0NE0q_root {
+  .ElFLgq_root {
     box-sizing: border-box;
     justify-items: center;
     gap: var(--progress-circular-gap, .5rem);
@@ -8,14 +8,14 @@
     display: inline-grid;
   }
 
-  .Y0NE0q_label {
+  .ElFLgq_label {
     font-size: var(--progress-circular-label-font-size, var(--text-sm));
     font-weight: var(--progress-circular-label-font-weight, var(--weight-regular));
     line-height: var(--progress-circular-label-line-height, var(--line-height-text-sm));
     color: var(--progress-circular-label-color, currentColor);
   }
 
-  .Y0NE0q_valueText {
+  .ElFLgq_valueText {
     font-size: var(--progress-circular-value-text-font-size, var(--text-sm));
     font-weight: var(--progress-circular-value-text-font-weight, var(--weight-medium));
     line-height: var(--progress-circular-value-text-line-height, var(--line-height-text-sm));
@@ -23,18 +23,18 @@
     text-align: center;
   }
 
-  .Y0NE0q_circle {
+  .ElFLgq_circle {
     --size: var(--progress-circular-size, 3rem);
     --thickness: var(--progress-circular-thickness, .4rem);
     display: block;
     overflow: visible;
   }
 
-  .Y0NE0q_circleTrack {
+  .ElFLgq_circleTrack {
     stroke: var(--progress-circular-track-bg, var(--color-muted));
   }
 
-  .Y0NE0q_circleRange {
+  .ElFLgq_circleRange {
     stroke: var(--progress-circular-range-bg, var(--color-primary));
     stroke-linecap: var(--progress-circular-range-linecap, round);
     transition: stroke-dashoffset
@@ -52,11 +52,11 @@
     }
   }
 
-  .Y0NE0q_view {
+  .ElFLgq_view {
     display: contents;
   }
 
-  @keyframes Y0NE0q_progress-circular-indeterminate {
+  @keyframes ElFLgq_progress-circular-indeterminate {
     from {
       transform: rotate(-90deg);
     }

package/dist/components/progress-circular/ProgressCircular.d.ts

@@ -1,15 +1,21 @@
+import { ComponentProps } from "react";
 import { Progress } from "@ark-ui/react/progress";
 
 //#region src/components/progress-circular/ProgressCircular.d.ts
+type ProgressCircularRingProps = Omit<ComponentProps<typeof Progress.Circle>, 'asChild' | 'children'>;
 declare const ProgressCircular: 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>>;
   Circle: import("react").ForwardRefExoticComponent<Omit<Progress.CircleProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
   CircleTrack: import("react").ForwardRefExoticComponent<Omit<Progress.CircleTrackProps & import("react").RefAttributes<SVGCircleElement>, "ref"> & import("react").RefAttributes<SVGCircleElement>>;
   CircleRange: import("react").ForwardRefExoticComponent<Omit<Progress.CircleRangeProps & import("react").RefAttributes<SVGCircleElement>, "ref"> & import("react").RefAttributes<SVGCircleElement>>;
+  Ring: import("react").ForwardRefExoticComponent<Omit<ProgressCircularRingProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
   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 { ProgressCircular };

package/dist/components/progress-circular/ProgressCircular.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import ProgressCircular_module_default from "./ProgressCircular.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, jsxs } from "react/jsx-runtime";
+import { Progress, useProgress, useProgressContext } from "@ark-ui/react/progress";
 //#region src/components/progress-circular/ProgressCircular.tsx
 const ProgressCircularRoot = forwardRef(function ProgressCircularRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Progress.Root, {
@@ -61,6 +61,13 @@ const ProgressCircularCircleRange = forwardRef(function ProgressCircularCircleRa
 		...props
 	});
 });
+const ProgressCircularRing = forwardRef(function ProgressCircularRing(props, ref) {
+	return /* @__PURE__ */ jsxs(ProgressCircularCircle, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(ProgressCircularCircleTrack, {}), /* @__PURE__ */ jsx(ProgressCircularCircleRange, {})]
+	});
+});
 const ProgressCircularView = forwardRef(function ProgressCircularView({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Progress.View, {
 		ref,
@@ -72,12 +79,16 @@ const ProgressCircularView = forwardRef(function ProgressCircularView({ classNam
 const ProgressCircular = Object.assign(ProgressCircularRoot, {
 	Root: ProgressCircularRoot,
 	RootProvider: ProgressCircularRootProvider,
+	Context: Progress.Context,
 	Label: ProgressCircularLabel,
 	ValueText: ProgressCircularValueText,
 	Circle: ProgressCircularCircle,
 	CircleTrack: ProgressCircularCircleTrack,
 	CircleRange: ProgressCircularCircleRange,
-	View: ProgressCircularView
+	Ring: ProgressCircularRing,
+	View: ProgressCircularView,
+	useProgress,
+	useProgressContext
 });
 //#endregion
 export { ProgressCircular };

package/dist/components/progress-circular/ProgressCircular.module.js

@@ -1,14 +1,14 @@
 import './ProgressCircular.css';
 //#region src/components/progress-circular/ProgressCircular.module.css
 var ProgressCircular_module_default = {
-	"circle": "Y0NE0q_circle",
-	"circleRange": "Y0NE0q_circleRange",
-	"circleTrack": "Y0NE0q_circleTrack",
-	"label": "Y0NE0q_label",
-	"progress-circular-indeterminate": "Y0NE0q_progress-circular-indeterminate",
-	"root": "Y0NE0q_root",
-	"valueText": "Y0NE0q_valueText",
-	"view": "Y0NE0q_view"
+	"circle": "ElFLgq_circle",
+	"circleRange": "ElFLgq_circleRange",
+	"circleTrack": "ElFLgq_circleTrack",
+	"label": "ElFLgq_label",
+	"progress-circular-indeterminate": "ElFLgq_progress-circular-indeterminate",
+	"root": "ElFLgq_root",
+	"valueText": "ElFLgq_valueText",
+	"view": "ElFLgq_view"
 };
 //#endregion
 export { ProgressCircular_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .fteJNa_root {
+  .Z1JBTG_root {
     box-sizing: border-box;
     gap: var(--progress-linear-gap, .5rem);
     width: var(--progress-linear-width, 12rem);
@@ -15,14 +15,14 @@
     }
   }
 
-  .fteJNa_label {
+  .Z1JBTG_label {
     font-size: var(--progress-linear-label-font-size, var(--text-sm));
     font-weight: var(--progress-linear-label-font-weight, var(--weight-regular));
     line-height: var(--progress-linear-label-line-height, var(--line-height-text-sm));
     color: var(--progress-linear-label-color, currentColor);
   }
 
-  .fteJNa_valueText {
+  .Z1JBTG_valueText {
     font-size: var(--progress-linear-value-text-font-size, var(--text-sm));
     font-weight: var(--progress-linear-value-text-font-weight, var(--weight-regular));
     line-height: var(--progress-linear-value-text-line-height, var(--line-height-text-sm));
@@ -31,7 +31,7 @@
     justify-self: end;
   }
 
-  .fteJNa_track {
+  .Z1JBTG_track {
     width: 100%;
     height: var(--progress-linear-track-height, .5rem);
     border-radius: var(--progress-linear-track-radius, var(--radius-full));
@@ -50,7 +50,7 @@
     }
   }
 
-  .fteJNa_range {
+  .Z1JBTG_range {
     border-radius: var(--progress-linear-range-radius, inherit);
     background-color: var(--progress-linear-range-bg, var(--color-primary));
     height: 100%;
@@ -80,11 +80,11 @@
     }
   }
 
-  .fteJNa_view {
+  .Z1JBTG_view {
     display: contents;
   }
 
-  @keyframes fteJNa_progress-linear-indeterminate {
+  @keyframes Z1JBTG_progress-linear-indeterminate {
     from {
       transform: translateX(-100%);
     }
@@ -94,7 +94,7 @@
     }
   }
 
-  @keyframes fteJNa_progress-linear-indeterminate-vertical {
+  @keyframes Z1JBTG_progress-linear-indeterminate-vertical {
     from {
       transform: translateY(100%);
     }

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/progress-linear/ProgressLinear.module.js

@@ -1,14 +1,14 @@
 import './ProgressLinear.css';
 //#region src/components/progress-linear/ProgressLinear.module.css
 var ProgressLinear_module_default = {
-	"label": "fteJNa_label",
-	"progress-linear-indeterminate": "fteJNa_progress-linear-indeterminate",
-	"progress-linear-indeterminate-vertical": "fteJNa_progress-linear-indeterminate-vertical",
-	"range": "fteJNa_range",
-	"root": "fteJNa_root",
-	"track": "fteJNa_track",
-	"valueText": "fteJNa_valueText",
-	"view": "fteJNa_view"
+	"label": "Z1JBTG_label",
+	"progress-linear-indeterminate": "Z1JBTG_progress-linear-indeterminate",
+	"progress-linear-indeterminate-vertical": "Z1JBTG_progress-linear-indeterminate-vertical",
+	"range": "Z1JBTG_range",
+	"root": "Z1JBTG_root",
+	"track": "Z1JBTG_track",
+	"valueText": "Z1JBTG_valueText",
+	"view": "Z1JBTG_view"
 };
 //#endregion
 export { ProgressLinear_module_default as default };

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

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .B15lta_root {
+  .ZbLWjq_root {
     box-sizing: border-box;
     align-items: center;
     gap: var(--qr-code-gap, var(--spacing-3));
@@ -11,20 +11,21 @@
     position: relative;
   }
 
-  .B15lta_frame {
+  .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;
   }
 
-  .B15lta_pattern {
+  .ZbLWjq_pattern {
     fill: inherit;
   }
 
-  .B15lta_overlay {
+  .ZbLWjq_overlay {
     box-sizing: border-box;
     width: var(--qr-code-overlay-size, 2.5rem);
     height: var(--qr-code-overlay-size, 2.5rem);
@@ -37,13 +38,13 @@
     display: inline-flex;
   }
 
-  .B15lta_overlay :where(img, svg) {
+  .ZbLWjq_overlay :where(img, svg) {
     object-fit: contain;
     width: 100%;
     height: 100%;
   }
 
-  .B15lta_downloadTrigger {
+  .ZbLWjq_downloadTrigger {
     box-sizing: border-box;
     justify-content: center;
     align-items: center;
@@ -73,19 +74,19 @@
     display: inline-flex;
   }
 
-  .B15lta_downloadTrigger :where(svg) {
+  .ZbLWjq_downloadTrigger :where(svg) {
     width: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, 1rem));
     height: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, 1rem));
     flex-shrink: 0;
   }
 
   @media (hover: hover) {
-    .B15lta_downloadTrigger:hover:not(:disabled, [data-disabled]) {
+    .ZbLWjq_downloadTrigger:hover:not(:disabled, [data-disabled]) {
       background-color: var(--qr-code-download-trigger-bg-hover, var(--button-outline-bg-hover, var(--color-accent)));
     }
   }
 
-  .B15lta_downloadTrigger:focus-visible {
+  .ZbLWjq_downloadTrigger:focus-visible {
     outline: var(--qr-code-download-trigger-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
       solid
       var(--qr-code-download-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
@@ -93,7 +94,7 @@
         -1);
   }
 
-  .B15lta_downloadTrigger:disabled, .B15lta_downloadTrigger[data-disabled] {
+  .ZbLWjq_downloadTrigger:disabled, .ZbLWjq_downloadTrigger[data-disabled] {
     pointer-events: none;
     opacity: var(--qr-code-disabled-opacity, var(--button-disabled-opacity, var(--opacity-disabled)));
   }

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/QrCode.module.js

@@ -1,11 +1,11 @@
 import './QrCode.css';
 //#region src/components/qr-code/QrCode.module.css
 var QrCode_module_default = {
-	"downloadTrigger": "B15lta_downloadTrigger",
-	"frame": "B15lta_frame",
-	"overlay": "B15lta_overlay",
-	"pattern": "B15lta_pattern",
-	"root": "B15lta_root"
+	"downloadTrigger": "ZbLWjq_downloadTrigger",
+	"frame": "ZbLWjq_frame",
+	"overlay": "ZbLWjq_overlay",
+	"pattern": "ZbLWjq_pattern",
+	"root": "ZbLWjq_root"
 };
 //#endregion
 export { QrCode_module_default as default };

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.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  ._6pRuhq_root {
+  .ECSf4W_root {
     gap: var(--radio-group-gap, var(--spacing-2));
     color: var(--radio-group-color, var(--color-foreground));
     flex-direction: column;
@@ -11,14 +11,14 @@
     }
   }
 
-  ._6pRuhq_label {
+  .ECSf4W_label {
     color: var(--radio-group-label-color, var(--radio-group-color, var(--color-foreground)));
     font-size: var(--radio-group-label-font-size, var(--text-sm));
     font-weight: var(--radio-group-label-font-weight, var(--weight-semibold));
     line-height: var(--radio-group-label-line-height, var(--line-height-text-sm));
   }
 
-  ._6pRuhq_item {
+  .ECSf4W_item {
     align-items: center;
     gap: var(--radio-gap, var(--spacing-2));
     vertical-align: middle;
@@ -32,7 +32,7 @@
     }
   }
 
-  ._6pRuhq_itemControl {
+  .ECSf4W_itemControl {
     box-sizing: border-box;
     -webkit-appearance: none;
     appearance: none;
@@ -124,14 +124,14 @@
     }
   }
 
-  ._6pRuhq_itemText {
+  .ECSf4W_itemText {
     color: var(--radio-label-color, var(--color-foreground));
     font-size: var(--radio-label-font-size, var(--text-sm));
     font-weight: var(--radio-label-font-weight, var(--weight-medium));
     line-height: var(--radio-label-line-height, var(--line-height-text-sm));
   }
 
-  ._6pRuhq_indicator {
+  .ECSf4W_indicator {
     top: var(--top);
     left: var(--left);
     width: var(--width);

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/RadioGroup.module.js

@@ -1,12 +1,12 @@
 import './RadioGroup.css';
 //#region src/components/radio-group/RadioGroup.module.css
 var RadioGroup_module_default = {
-	"indicator": "_6pRuhq_indicator",
-	"item": "_6pRuhq_item",
-	"itemControl": "_6pRuhq_itemControl",
-	"itemText": "_6pRuhq_itemText",
-	"label": "_6pRuhq_label",
-	"root": "_6pRuhq_root"
+	"indicator": "ECSf4W_indicator",
+	"item": "ECSf4W_item",
+	"itemControl": "ECSf4W_itemControl",
+	"itemText": "ECSf4W_itemText",
+	"label": "ECSf4W_label",
+	"root": "ECSf4W_root"
 };
 //#endregion
 export { RadioGroup_module_default as default };

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