@moduix/react 1.1.0

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

@@ -0,0 +1,147 @@
+@layer ui.components {
+  ._6pRuhq_root {
+    gap: var(--radio-group-gap, var(--spacing-2));
+    color: var(--radio-group-color, var(--color-foreground));
+    flex-direction: column;
+    display: flex;
+    position: relative;
+
+    &[data-disabled] {
+      cursor: default;
+    }
+  }
+
+  ._6pRuhq_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 {
+    align-items: center;
+    gap: var(--radio-gap, var(--spacing-2));
+    vertical-align: middle;
+    cursor: pointer;
+    width: fit-content;
+    display: inline-flex;
+
+    &[data-disabled] {
+      cursor: default;
+      opacity: var(--radio-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._6pRuhq_itemControl {
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--_radio-size, 1.25rem);
+    height: var(--_radio-size, 1.25rem);
+    border: var(--radio-border-width, var(--border-width-sm)) solid
+      var(--radio-border-color, var(--color-border));
+    border-radius: var(--radius-full);
+    background-color: var(--radio-bg, var(--color-background));
+    color: var(--radio-indicator-color, var(--color-primary-foreground));
+    user-select: none;
+    transition: background-color var(--radio-transition, var(--transition-default)),
+      border-color var(--radio-transition, var(--transition-default)),
+      border-width var(--radio-transition, var(--transition-default)),
+      color var(--radio-transition, var(--transition-default)),
+      opacity var(--radio-transition, var(--transition-default));
+    outline: 0;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    line-height: 0;
+    display: inline-flex;
+    position: relative;
+
+    &:before {
+      width: var(--_radio-indicator-size, .5rem);
+      height: var(--_radio-indicator-size, .5rem);
+      border: var(--radio-indicator-border-width, 0) solid
+        var(--radio-indicator-border-color, currentColor);
+      border-radius: var(--radio-indicator-radius, var(--radius-full));
+      content: "";
+      opacity: 0;
+      transition: opacity var(--radio-transition, var(--transition-default)),
+        transform var(--radio-transition, var(--transition-default));
+      background-color: currentColor;
+      display: block;
+      transform: scale(.6);
+    }
+
+    &[data-state="checked"] {
+      border-color: var(--radio-border-color-checked, var(--color-primary));
+      background-color: var(--radio-bg-checked, var(--color-primary));
+
+      &:before {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    &[data-focus-visible] {
+      outline: var(--radio-focus-ring-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));
+    }
+
+    @media (hover: hover) {
+      &[data-state="unchecked"]:not([data-readonly], [data-disabled]):hover {
+        background-color: var(--radio-bg-hover, var(--color-accent));
+      }
+    }
+
+    &[data-readonly], &[data-disabled] {
+      cursor: default;
+    }
+
+    &[data-size="xs"] {
+      --_radio-size: var(--radio-size-xs, .875rem);
+      --_radio-indicator-size: var(--radio-indicator-size-xs, .25rem);
+    }
+
+    &[data-size="sm"] {
+      --_radio-size: var(--radio-size-sm, 1rem);
+      --_radio-indicator-size: var(--radio-indicator-size-sm, .375rem);
+    }
+
+    &[data-size="md"] {
+      --_radio-size: var(--radio-size-md, 1.25rem);
+      --_radio-indicator-size: var(--radio-indicator-size-md, .5rem);
+    }
+
+    &[data-size="lg"] {
+      --_radio-size: var(--radio-size-lg, 1.5rem);
+      --_radio-indicator-size: var(--radio-indicator-size-lg, .625rem);
+    }
+
+    &[data-size="xl"] {
+      --_radio-size: var(--radio-size-xl, 1.75rem);
+      --_radio-indicator-size: var(--radio-indicator-size-xl, .75rem);
+    }
+  }
+
+  ._6pRuhq_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 {
+    top: var(--top);
+    left: var(--left);
+    width: var(--width);
+    height: var(--height);
+    border-radius: var(--radio-indicator-radius, var(--radius-full));
+    background-color: var(--radio-bg-checked, var(--color-primary));
+    opacity: var(--radio-group-indicator-opacity, .12);
+    pointer-events: none;
+    transition: var(--transition-property, translate)
+      var(--radio-transition, var(--transition-default));
+    position: absolute;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { ComponentProps } from "react";
+import { RadioGroup } 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;
+};
+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>>;
+  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 };

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

@@ -0,0 +1,83 @@
+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";
+//#region src/components/radio-group/RadioGroup.tsx
+const RadioGroupRoot = forwardRef(function RadioGroupRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.Root, {
+		ref,
+		"data-slot": "radio-group-root",
+		className: clsx(RadioGroup_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const RadioGroupRootProvider = forwardRef(function RadioGroupRootProvider({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.RootProvider, {
+		ref,
+		"data-slot": "radio-group-root-provider",
+		className: clsx(RadioGroup_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const RadioGroupLabel = forwardRef(function RadioGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.Label, {
+		ref,
+		"data-slot": "radio-group-label",
+		className: clsx(RadioGroup_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const RadioGroupItem = forwardRef(function RadioGroupItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.Item, {
+		ref,
+		"data-slot": "radio-group-item",
+		className: clsx(RadioGroup_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const RadioGroupItemControl = forwardRef(function RadioGroupItemControl({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.ItemControl, {
+		ref,
+		"data-slot": "radio-group-item-control",
+		"data-size": size,
+		className: clsx(RadioGroup_module_default.itemControl, normalizeClassName(className)),
+		...props
+	});
+});
+const RadioGroupItemText = forwardRef(function RadioGroupItemText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.ItemText, {
+		ref,
+		"data-slot": "radio-group-item-text",
+		className: clsx(RadioGroup_module_default.itemText, normalizeClassName(className)),
+		...props
+	});
+});
+const RadioGroupItemHiddenInput = forwardRef(function RadioGroupItemHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, {
+		ref,
+		"data-slot": "radio-group-item-hidden-input",
+		...props
+	});
+});
+const RadioGroupIndicator = forwardRef(function RadioGroupIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup.Indicator, {
+		ref,
+		"data-slot": "radio-group-indicator",
+		className: clsx(RadioGroup_module_default.indicator, normalizeClassName(className)),
+		...props
+	});
+});
+const RadioGroup$1 = Object.assign(RadioGroupRoot, {
+	Root: RadioGroupRoot,
+	RootProvider: RadioGroupRootProvider,
+	Label: RadioGroupLabel,
+	Item: RadioGroupItem,
+	ItemControl: RadioGroupItemControl,
+	ItemText: RadioGroupItemText,
+	ItemHiddenInput: RadioGroupItemHiddenInput,
+	Indicator: RadioGroupIndicator
+});
+//#endregion
+export { RadioGroup$1 as RadioGroup };

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

@@ -0,0 +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"
+};
+//#endregion
+export { RadioGroup_module_default as default };

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

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

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

@@ -0,0 +1,133 @@
+@layer ui.components {
+  ._6aTNoq_root {
+    gap: var(--rating-group-root-gap, var(--spacing-1));
+    color: var(--rating-group-color, var(--color-muted-foreground));
+    flex-direction: column;
+    display: inline-flex;
+
+    &[data-size="xs"] {
+      --_rating-group-icon-size: var(--rating-group-icon-size-xs, .875rem);
+    }
+
+    &[data-size="sm"] {
+      --_rating-group-icon-size: var(--rating-group-icon-size-sm, 1rem);
+    }
+
+    &[data-size="md"] {
+      --_rating-group-icon-size: var(--rating-group-icon-size-md, 1.25rem);
+    }
+
+    &[data-size="lg"] {
+      --_rating-group-icon-size: var(--rating-group-icon-size-lg, 1.5rem);
+    }
+
+    &[data-size="xl"] {
+      --_rating-group-icon-size: var(--rating-group-icon-size-xl, 1.75rem);
+    }
+  }
+
+  ._6aTNoq_label {
+    color: var(--rating-group-label-color, var(--color-foreground));
+    font-size: var(--rating-group-label-font-size, var(--text-sm));
+    font-weight: var(--rating-group-label-font-weight, var(--weight-semibold));
+    line-height: var(--rating-group-label-line-height, var(--line-height-text-sm));
+    user-select: none;
+
+    &[data-disabled] {
+      opacity: var(--rating-group-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._6aTNoq_control {
+    align-items: center;
+    gap: var(--rating-group-gap, var(--spacing-1));
+    display: inline-flex;
+
+    &[data-disabled] {
+      opacity: var(--rating-group-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  ._6aTNoq_item {
+    border-radius: var(--radius-sm);
+    color: inherit;
+    cursor: pointer;
+    transition: color var(--rating-group-transition, var(--transition-default)),
+      opacity var(--rating-group-transition, var(--transition-default));
+    background-color: #0000;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+    display: inline-flex;
+
+    &[data-readonly], &[data-disabled] {
+      cursor: default;
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+    }
+
+    &: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));
+    }
+  }
+
+  ._6aTNoq_itemIndicator {
+    width: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
+    height: var(--_rating-group-icon-size, var(--rating-group-icon-size-md, 1.25rem));
+    color: var(--rating-group-active-color, var(--color-primary));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+      transition: color var(--rating-group-transition, var(--transition-default)),
+        fill var(--rating-group-transition, var(--transition-default)),
+        stroke var(--rating-group-transition, var(--transition-default)),
+        clip-path var(--rating-group-transition, var(--transition-default));
+      flex: none;
+    }
+
+    &[data-half] ._6aTNoq_iconFg {
+      clip-path: inset(0 50% 0 0);
+    }
+
+    &:not([data-highlighted]) ._6aTNoq_iconFg {
+      clip-path: inset(0 100% 0 0);
+    }
+  }
+
+  ._6aTNoq_item[data-half] ._6aTNoq_iconFg {
+    clip-path: inset(0 50% 0 0);
+  }
+
+  ._6aTNoq_item:not([data-highlighted]) ._6aTNoq_iconFg {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  ._6aTNoq_iconBg {
+    color: var(--rating-group-color, var(--color-muted-foreground));
+    fill: #0000;
+    stroke: currentColor;
+    position: absolute;
+    inset: 0;
+  }
+
+  ._6aTNoq_iconFg {
+    color: var(--rating-group-active-color, var(--color-primary));
+    fill: currentColor;
+    stroke: currentColor;
+    clip-path: inset(0);
+    position: absolute;
+    inset: 0;
+  }
+}

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

@@ -0,0 +1,23 @@
+import { ComponentProps } from "react";
+import { RatingGroup } from "@ark-ui/react/rating-group";
+
+//#region src/components/rating-group/RatingGroup.d.ts
+type RatingGroupSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type RatingGroupRootProps = ComponentProps<typeof RatingGroup.Root> & {
+  size?: RatingGroupSize;
+};
+type RatingGroupRootProviderProps = ComponentProps<typeof RatingGroup.RootProvider> & {
+  size?: RatingGroupSize;
+};
+type RatingGroupItemIndicatorProps = ComponentProps<'span'>;
+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>>;
+  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>>;
+  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>>;
+};
+//#endregion
+export { RatingGroup$1 as RatingGroup, type RatingGroupItemIndicatorProps, type RatingGroupRootProps, type RatingGroupRootProviderProps, type RatingGroupSize };

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

@@ -0,0 +1,86 @@
+import { RatingStarIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { normalizeClassName } from "../../lib/moduix/normalizeClassName.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";
+//#region src/components/rating-group/RatingGroup.tsx
+const RatingGroupRoot = forwardRef(function RatingGroupRoot({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(RatingGroup.Root, {
+		ref,
+		"data-slot": "rating-group-root",
+		"data-size": size,
+		className: clsx(RatingGroup_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const RatingGroupRootProvider = forwardRef(function RatingGroupRootProvider({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(RatingGroup.RootProvider, {
+		ref,
+		"data-slot": "rating-group-root-provider",
+		"data-size": size,
+		className: clsx(RatingGroup_module_default.root, normalizeClassName(className)),
+		...props
+	});
+});
+const RatingGroupLabel = forwardRef(function RatingGroupLabel({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RatingGroup.Label, {
+		ref,
+		"data-slot": "rating-group-label",
+		className: clsx(RatingGroup_module_default.label, normalizeClassName(className)),
+		...props
+	});
+});
+const RatingGroupControl = forwardRef(function RatingGroupControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RatingGroup.Control, {
+		ref,
+		"data-slot": "rating-group-control",
+		className: clsx(RatingGroup_module_default.control, normalizeClassName(className)),
+		...props
+	});
+});
+const RatingGroupItem = forwardRef(function RatingGroupItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RatingGroup.Item, {
+		ref,
+		"data-slot": "rating-group-item",
+		className: clsx(RatingGroup_module_default.item, normalizeClassName(className)),
+		...props
+	});
+});
+const RatingGroupItemIndicator = forwardRef(function RatingGroupItemIndicator({ className, children, ...props }, ref) {
+	const { half, highlighted } = useRatingGroupItemContext();
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "rating-group-item-indicator",
+		"data-half": half ? "" : void 0,
+		"data-highlighted": highlighted ? "" : void 0,
+		className: clsx(RatingGroup_module_default.itemIndicator, normalizeClassName(className)),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RatingStarIcon, {
+			"data-slot": "rating-group-item-indicator-bg",
+			className: RatingGroup_module_default.iconBg
+		}), /* @__PURE__ */ jsx(RatingStarIcon, {
+			"data-slot": "rating-group-item-indicator-fg",
+			className: RatingGroup_module_default.iconFg
+		})] })
+	});
+});
+const RatingGroupHiddenInput = forwardRef(function RatingGroupHiddenInput(props, ref) {
+	return /* @__PURE__ */ jsx(RatingGroup.HiddenInput, {
+		ref,
+		"data-slot": "rating-group-hidden-input",
+		...props
+	});
+});
+const RatingGroup$1 = Object.assign(RatingGroupRoot, {
+	Root: RatingGroupRoot,
+	RootProvider: RatingGroupRootProvider,
+	Label: RatingGroupLabel,
+	Control: RatingGroupControl,
+	Item: RatingGroupItem,
+	ItemIndicator: RatingGroupItemIndicator,
+	HiddenInput: RatingGroupHiddenInput
+});
+//#endregion
+export { RatingGroup$1 as RatingGroup };

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

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

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

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