@moduix/react 1.1.1 → 2.1.0

package/dist/components/popover/Popover.css

@@ -1,8 +1,9 @@
 @layer ui.components {
   .Qww_tG_trigger, .Qww_tG_closeTrigger {
     box-sizing: border-box;
-    min-height: var(--popover-control-height, var(--size-lg));
-    padding: var(--popover-control-padding-y, .5rem) var(--popover-control-padding-x, .875rem);
+    min-height: var(--popover-control-height, var(--size-md));
+    padding: var(--popover-control-padding-y, var(--spacing-1))
+      var(--popover-control-padding-x, var(--spacing-3-5));
     border: var(--popover-control-border-width, var(--border-width-sm)) solid
       var(--popover-control-border-color, var(--color-border));
     border-radius: var(--popover-control-radius, var(--radius-md));
@@ -33,9 +34,9 @@
     }
 
     &:focus-visible {
-      outline: var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm)))
+      outline: var(--popover-focus-ring-width, var(--popover-control-border-width, var(--focus-ring-inset-width, var(--border-width-sm))))
         solid var(--popover-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--popover-focus-ring-width, var(--popover-control-border-width, var(--border-width-sm))) *
+      outline-offset: calc(var(--popover-focus-ring-width, var(--popover-control-border-width, var(--focus-ring-inset-width, var(--border-width-sm)))) *
           -1);
     }
 
@@ -52,7 +53,7 @@
   }
 
   .Qww_tG_content {
-    --popover-close-icon-size-effective: var(--popover-close-icon-size, 1.75rem);
+    --popover-close-icon-size-effective: var(--popover-close-icon-size, var(--spacing-7));
     --popover-close-icon-offset-effective: var(--popover-close-icon-offset, var(--spacing-3));
     --popover-header-padding-inline-end-effective: var(--popover-header-padding-inline-end, calc(var(--popover-close-icon-size-effective) + var(--popover-close-icon-offset-effective)));
     z-index: calc(var(--z-popup) + var(--layer-index, 0));
@@ -62,7 +63,7 @@
     min-width: min(var(--popover-min-width, 16rem), var(--available-width));
     max-width: min(var(--popover-max-width, 28rem), var(--available-width));
     max-height: min(var(--popover-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--popover-padding-y, 1rem) var(--popover-padding-x, 1rem);
+    padding: var(--popover-padding-y, var(--spacing-4)) var(--popover-padding-x, var(--spacing-4));
     border-radius: var(--popover-radius, var(--radius-md));
     background-color: var(--popover-bg, var(--color-popover));
     color: var(--popover-color, var(--color-popover-foreground));
@@ -75,16 +76,26 @@
     overflow: visible;
 
     &[data-state="open"] {
-      animation: Qww_tG_popover-enter var(--popover-transition, var(--duration-fast)) both;
+      animation: Qww_tG_popover-enter
+        var(--popover-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
     }
 
     &[data-state="closed"] {
-      animation: Qww_tG_popover-exit var(--popover-transition, var(--duration-fast)) both;
+      animation: Qww_tG_popover-exit
+        var(--popover-transition, var(--popup-motion-duration, var(--duration-fast)) var(--popup-motion-easing, ease))
+        both;
+    }
+
+    &:has(.Qww_tG_closeIcon) {
+      & .Qww_tG_header {
+        padding-inline-end: var(--popover-header-padding-inline-end-effective);
+      }
     }
   }
 
   .Qww_tG_arrow {
-    --arrow-size: var(--popover-arrow-size, .625rem);
+    --arrow-size: var(--popover-arrow-size, var(--spacing-2-5));
     --arrow-background: var(--popover-bg, var(--color-popover));
   }
 
@@ -113,7 +124,7 @@
   .Qww_tG_closeIcon {
     --close-button-size: var(--popover-close-icon-size-effective);
     --close-button-radius: var(--popover-close-icon-radius, var(--radius-sm));
-    --close-button-icon-size: var(--popover-close-icon-glyph-size, .875rem);
+    --close-button-icon-size: var(--popover-close-icon-glyph-size, var(--spacing-3-5));
     --close-button-bg: var(--popover-close-icon-bg, transparent);
     --close-button-bg-hover: var(--popover-close-icon-bg-hover, var(--color-accent));
     --close-button-color: var(--popover-close-icon-color, var(--color-muted-foreground));
@@ -126,7 +137,6 @@
 
   .Qww_tG_header {
     gap: var(--popover-header-gap, var(--spacing-1));
-    padding-inline-end: var(--popover-header-padding-inline-end-effective);
     display: grid;
   }
 
@@ -144,19 +154,19 @@
 
   @keyframes Qww_tG_popover-enter {
     from {
-      opacity: var(--popover-content-starting-opacity, 0);
-      translate: var(--popover-content-starting-translate-x, 0)
-        var(--popover-content-starting-translate-y, 0);
-      scale: var(--popover-content-starting-scale, var(--scale-popup));
+      opacity: var(--popover-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popover-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
+        var(--popover-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
+      scale: var(--popover-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
     }
   }
 
   @keyframes Qww_tG_popover-exit {
     to {
-      opacity: var(--popover-content-ending-opacity, 0);
-      translate: var(--popover-content-ending-translate-x, 0)
-        var(--popover-content-ending-translate-y, 0);
-      scale: var(--popover-content-ending-scale, var(--scale-popup));
+      opacity: var(--popover-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popover-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
+        var(--popover-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
+      scale: var(--popover-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
     }
   }
 }

package/dist/components/popover/Popover.js

@@ -2,9 +2,9 @@ import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Popover_module_default from "./Popover.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { Popover, usePopover } from "@ark-ui/react/popover";
 //#region src/components/popover/Popover.tsx
 const DEFAULT_CLOSE_BUTTON_LABEL = "Close popover";

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

@@ -2,7 +2,7 @@
   .ElFLgq_root {
     box-sizing: border-box;
     justify-items: center;
-    gap: var(--progress-circular-gap, .5rem);
+    gap: var(--progress-circular-gap, var(--spacing-2));
     width: var(--progress-circular-root-width, max-content);
     color: var(--progress-circular-color, var(--color-foreground));
     display: inline-grid;
@@ -24,7 +24,7 @@
   }
 
   .ElFLgq_circle {
-    --size: var(--progress-circular-size, 3rem);
+    --size: var(--progress-circular-size, var(--size-xl));
     --thickness: var(--progress-circular-thickness, .4rem);
     display: block;
     overflow: visible;

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-linear/ProgressLinear.css

@@ -1,7 +1,7 @@
 @layer ui.components {
   .Z1JBTG_root {
     box-sizing: border-box;
-    gap: var(--progress-linear-gap, .5rem);
+    gap: var(--progress-linear-gap, var(--spacing-2));
     width: var(--progress-linear-width, 12rem);
     color: var(--progress-linear-color, var(--color-foreground));
     grid-template-columns: minmax(0, 1fr) auto;

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;
@@ -26,8 +27,8 @@
 
   .ZbLWjq_overlay {
     box-sizing: border-box;
-    width: var(--qr-code-overlay-size, 2.5rem);
-    height: var(--qr-code-overlay-size, 2.5rem);
+    width: var(--qr-code-overlay-size, var(--size-lg));
+    height: var(--qr-code-overlay-size, var(--size-lg));
     padding: var(--qr-code-overlay-padding, var(--spacing-1));
     border-radius: var(--qr-code-overlay-radius, var(--radius-sm));
     background-color: var(--qr-code-overlay-bg, var(--color-background));
@@ -48,8 +49,8 @@
     justify-content: center;
     align-items: center;
     gap: var(--qr-code-download-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--qr-code-download-trigger-height, var(--button-size-md, var(--size-lg)));
-    padding-inline: var(--qr-code-download-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    min-height: var(--qr-code-download-trigger-height, var(--button-size-md, var(--size-md)));
+    padding-inline: var(--qr-code-download-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
     border: var(--qr-code-download-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
       solid
       var(--qr-code-download-trigger-border-color, var(--button-outline-border-color, var(--color-border)));
@@ -74,8 +75,8 @@
   }
 
   .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));
+    width: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, var(--spacing-4)));
+    height: var(--qr-code-download-trigger-icon-size, var(--button-icon-size, var(--spacing-4)));
     flex-shrink: 0;
   }
 
@@ -86,7 +87,7 @@
   }
 
   .ZbLWjq_downloadTrigger:focus-visible {
-    outline: var(--qr-code-download-trigger-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+    outline: var(--qr-code-download-trigger-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
       solid
       var(--qr-code-download-trigger-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
     outline-offset: calc(var(--qr-code-download-trigger-focus-ring-offset, var(--qr-code-download-trigger-border-width, var(--button-border-width, var(--border-width-sm)))) *

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

@@ -83,8 +83,8 @@
     }
 
     &[data-focus-visible] {
-      outline: var(--radio-focus-ring-width, var(--border-width-sm)) solid
-        var(--radio-focus-ring-color, var(--color-ring));
+      outline: var(--radio-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
+        solid var(--radio-focus-ring-color, var(--color-ring));
       outline-offset: var(--radio-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -99,28 +99,28 @@
     }
 
     &[data-size="xs"] {
-      --_radio-size: var(--radio-size-xs, .875rem);
-      --_radio-indicator-size: var(--radio-indicator-size-xs, .25rem);
+      --_radio-size: var(--radio-size-xs, var(--spacing-3-5));
+      --_radio-indicator-size: var(--radio-indicator-size-xs, var(--spacing-1));
     }
 
     &[data-size="sm"] {
-      --_radio-size: var(--radio-size-sm, 1rem);
-      --_radio-indicator-size: var(--radio-indicator-size-sm, .375rem);
+      --_radio-size: var(--radio-size-sm, var(--spacing-4));
+      --_radio-indicator-size: var(--radio-indicator-size-sm, var(--spacing-1-5));
     }
 
     &[data-size="md"] {
-      --_radio-size: var(--radio-size-md, 1.25rem);
-      --_radio-indicator-size: var(--radio-indicator-size-md, .5rem);
+      --_radio-size: var(--radio-size-md, var(--spacing-5));
+      --_radio-indicator-size: var(--radio-indicator-size-md, var(--spacing-2));
     }
 
     &[data-size="lg"] {
-      --_radio-size: var(--radio-size-lg, 1.5rem);
-      --_radio-indicator-size: var(--radio-indicator-size-lg, .625rem);
+      --_radio-size: var(--radio-size-lg, var(--size-xs));
+      --_radio-indicator-size: var(--radio-indicator-size-lg, var(--spacing-2-5));
     }
 
     &[data-size="xl"] {
-      --_radio-size: var(--radio-size-xl, 1.75rem);
-      --_radio-indicator-size: var(--radio-indicator-size-xl, .75rem);
+      --_radio-size: var(--radio-size-xl, var(--spacing-7));
+      --_radio-indicator-size: var(--radio-indicator-size-xl, var(--spacing-3));
     }
   }
 

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

@@ -6,23 +6,23 @@
     display: inline-flex;
 
     &[data-size="xs"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-xs, .875rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-xs, var(--spacing-3-5));
     }
 
     &[data-size="sm"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-sm, 1rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-sm, var(--spacing-4));
     }
 
     &[data-size="md"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-md, 1.25rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-md, var(--spacing-5));
     }
 
     &[data-size="lg"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-lg, 1.5rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-lg, var(--spacing-6));
     }
 
     &[data-size="xl"] {
-      --_rating-group-icon-size: var(--rating-group-icon-size-xl, 1.75rem);
+      --_rating-group-icon-size: var(--rating-group-icon-size-xl, var(--spacing-7));
     }
   }
 
@@ -72,15 +72,15 @@
     }
 
     &: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);
     }
   }
 
   .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));
+    width: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, var(--spacing-5)));
+    height: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, var(--spacing-5)));
     color: var(--rating-group-active-color, var(--color-primary));
     justify-content: center;
     align-items: center;

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