@koobiq/react-components 0.0.1-beta.9 → 0.1.0

package/dist/components/Popover/PopoverInner.js

@@ -0,0 +1,143 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, cloneElement, isValidElement } from "react";
+import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
+import { useOverlayTrigger, usePopover, Overlay } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./Popover.module.css.js";
+import { normalizeInlineSize } from "./utils.js";
+import { Dialog } from "../Dialog/Dialog.js";
+const PopoverInner = (props) => {
+  const {
+    offset = 0,
+    size = "medium",
+    crossOffset = 0,
+    hideArrow = false,
+    containerPadding = 12,
+    arrowBoundaryOffset = 20,
+    placement: placementProp = "top",
+    maxBlockSize = 480,
+    type = "dialog",
+    state,
+    control,
+    children,
+    anchorRef,
+    slotProps,
+    className,
+    isNonModal,
+    popoverRef,
+    portalContainer,
+    hideCloseButton,
+    disableFocusManagement,
+    disableExitOnEscapeKeyDown,
+    shouldCloseOnInteractOutside,
+    ...other
+  } = props;
+  const showArrow = !hideArrow;
+  const domRef = useDOMRef(popoverRef);
+  const controlRef = useRef(null);
+  const openState = state.isOpen;
+  const [opened, { on, off }] = useBoolean(openState);
+  const { triggerProps, overlayProps } = useOverlayTrigger(
+    { type },
+    { ...state, isOpen: openState }
+  );
+  const {
+    popoverProps,
+    underlayProps,
+    arrowProps: arrowPropsCommon,
+    placement
+  } = usePopover(
+    {
+      ...props,
+      offset,
+      isNonModal,
+      crossOffset,
+      containerPadding,
+      popoverRef: domRef,
+      arrowBoundaryOffset,
+      maxHeight: maxBlockSize,
+      placement: placementProp,
+      shouldCloseOnInteractOutside,
+      triggerRef: anchorRef || controlRef,
+      isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
+    },
+    { ...state, isOpen: openState || opened }
+  );
+  const resolvedChildren = () => {
+    if (typeof children === "function")
+      return cloneElement(children({ close: state.close }), overlayProps);
+    if (isValidElement(children)) return cloneElement(children, overlayProps);
+    return children;
+  };
+  const arrowProps = mergeProps(
+    { className: s.arrow },
+    arrowPropsCommon,
+    slotProps?.arrow
+  );
+  const dialogProps = mergeProps(
+    {
+      role: "dialog",
+      hideCloseButton,
+      className: s.dialog,
+      onClose: state.close
+    },
+    slotProps?.dialog
+  );
+  const backdropProps = mergeProps(
+    { className: s.underlay },
+    slotProps?.backdrop,
+    underlayProps
+  );
+  const transitionProps = mergeProps(
+    {
+      timeout: 120,
+      onEnter: on,
+      onExited: off,
+      appear: true,
+      in: openState,
+      nodeRef: domRef,
+      unmountOnExit: true
+    },
+    slotProps?.transition
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    control?.({
+      ref: controlRef,
+      ...triggerProps
+    }),
+    /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsxs(
+      Overlay,
+      {
+        portalContainer,
+        disableFocusManagement,
+        children: [
+          /* @__PURE__ */ jsx("div", { ...backdropProps }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: domRef,
+              "data-size": size,
+              "data-arrow": showArrow,
+              "data-placement": placement,
+              "data-transition": transition,
+              className: clsx(s.base, s[size], className),
+              ...mergeProps(popoverProps, other),
+              style: {
+                ...props.style,
+                ...popoverProps.style,
+                "--popover-inline-size": normalizeInlineSize(size)
+              },
+              children: [
+                showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
+                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() }) : resolvedChildren() })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  PopoverInner
+};

package/dist/components/Popover/index.d.ts

@@ -1,4 +1,17 @@
 export * from './Popover';
 export * from './types';
-export { DialogHeader, DialogFooter, DialogContent } from '../Dialog';
-export { DialogHeader as PopoverHeader, DialogContent as PopoverContent, DialogFooter as PopoverFooter, } from '../Dialog';
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Header` instead.
+ */
+export declare const PopoverHeader: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogHeaderProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Body` instead.
+ */
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @deprecated
+ * This component has been deprecated, please use `Popover.Footer` instead.
+ */
+export declare const PopoverFooter: import("react").ForwardRefExoticComponent<Omit<import("../Dialog").DialogFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/index.js

@@ -0,0 +1,9 @@
+import { Dialog } from "../Dialog/Dialog.js";
+const PopoverHeader = Dialog.Header;
+const PopoverContent = Dialog.Body;
+const PopoverFooter = Dialog.Footer;
+export {
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader
+};

package/dist/components/Popover/types.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactElement, ReactNode, Ref, RefObject } from 'react';
-import type { ButtonOptions } from '@koobiq/react-primitives';
+import type { OverlayTriggerState, ButtonOptions } from '@koobiq/react-primitives';
+import type { TransitionProps } from 'react-transition-group/Transition';
 import type { DialogProps } from '../Dialog';
 export type PopoverPropContent = ReactNode | ((props: {
     close(): void;
@@ -11,24 +12,34 @@ export declare const popoverPropPlacement: readonly ["bottom", "bottom start", "
 export type PopoverPropPlacement = (typeof popoverPropPlacement)[number];
 export declare const popoverPropSize: readonly ["small", "medium", "large"];
 export type PopoverPropSize = (typeof popoverPropSize)[number] | CSSProperties['inlineSize'];
+export declare const popoverPropType: readonly ["dialog", "menu", "listbox", "tree", "grid"];
+export type PopoverPropType = (typeof popoverPropType)[number];
+type PopoverDeprecatedProps = {
+    /**
+     * If `true`, the component is shown.
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
+    open?: boolean;
+};
 export type PopoverProps = {
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: boolean;
     /** The default open state. Use when the component is not controlled. */
     defaultOpen?: boolean;
     /** The content of the component. */
     children?: PopoverPropContent;
-    /** The render function of the control for displaying the modal window. */
+    /** The render function of the control for displaying the popover. */
     control?: PopoverPropControl;
     /**
      * Component width size.
-     * @default medium
-     * */
+     * @default 'medium'
+     */
     size?: PopoverPropSize;
     /**
      * If `true`, the close button isn't shown.
      * @default false
-     * */
+     */
     hideCloseButton?: boolean;
     /** Handler that is called when the modal's open state changes. */
     onOpenChange?: (open: boolean) => void;
@@ -44,6 +55,8 @@ export type PopoverProps = {
     disableExitOnEscapeKeyDown?: boolean;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /**
@@ -53,15 +66,15 @@ export type PopoverProps = {
     disableFocusManagement?: boolean;
     /**
      * The placement of the element with respect to its anchor element.
-     * @default top
-     * */
+     * @default 'top'
+     */
     placement?: PopoverPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
     anchorRef?: RefObject<HTMLElement | null>;
     /**
      * If `true`, the arrow isn't shown.
      * @default false
-     * */
+     */
     hideArrow?: boolean;
     /**
      * Whether the popover is non-modal, i.e. elements outside the popover may be
@@ -102,10 +115,22 @@ export type PopoverProps = {
      * By default, onClose will always be called on interaction outside the popover ref.
      */
     shouldCloseOnInteractOutside?: (element: Element) => boolean;
+    type?: PopoverPropType;
+    /**
+     * The maxBlockSize specified for the overlay element.
+     * @default 480
+     */
+    maxBlockSize?: number;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;
         arrow?: ComponentPropsWithRef<'div'>;
         backdrop?: ComponentPropsWithRef<'div'>;
+        transition?: Partial<TransitionProps<HTMLElement>>;
     };
-};
+} & PopoverDeprecatedProps;
+export type PopoverInnerProps = {
+    state: OverlayTriggerState;
+    popoverRef?: Ref<HTMLDivElement>;
+} & Omit<PopoverProps, 'ref'>;
+export {};

package/dist/components/Popover/types.js

@@ -13,7 +13,15 @@ const popoverPropPlacement = [
   "end bottom"
 ];
 const popoverPropSize = ["small", "medium", "large"];
+const popoverPropType = [
+  "dialog",
+  "menu",
+  "listbox",
+  "tree",
+  "grid"
+];
 export {
   popoverPropPlacement,
-  popoverPropSize
+  popoverPropSize,
+  popoverPropType
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -16,9 +16,9 @@ const ProgressBar = forwardRef(
       style,
       ...other
     } = props;
-    const indeterminate = variant === "indeterminate" || !isNotNil(value);
+    const isIndeterminate = variant === "indeterminate" || !isNotNil(value);
     const setProgressTrackStyles = () => {
-      if (indeterminate) return void 0;
+      if (isIndeterminate) return void 0;
       const translateX = Math.max(
         -maxValue,
         Math.min(minValue, (value || minValue) - maxValue)
@@ -33,10 +33,10 @@ const ProgressBar = forwardRef(
         value,
         minValue,
         maxValue,
-        indeterminate,
-        "data-variant": indeterminate ? "indeterminate" : "determinate",
+        isIndeterminate,
+        "data-variant": isIndeterminate ? "indeterminate" : "determinate",
         style: { ...style, ...setProgressTrackStyles() },
-        className: clsx(s.base, indeterminate && s.indeterminate, className),
+        className: clsx(s.base, isIndeterminate && s.indeterminate, className),
         ...other,
         ref,
         children: /* @__PURE__ */ jsx(

package/dist/components/ProgressBar/types.d.ts

@@ -1,34 +1,22 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
+import type { ProgressBarBaseProps as ProgressBarBasePrimitiveProps } from '@koobiq/react-primitives';
 export declare const progressBarPropVariant: readonly ["indeterminate", "determinate"];
 export type ProgressBarPropVariant = (typeof progressBarPropVariant)[number];
-export type ProgressBarBaseProps = {
+export type ProgressBarBaseProps = ExtendableComponentPropsWithRef<{
     children?: never;
-    /**
-     * The current value (controlled).
-     * @default 0
-     */
-    value?: number;
-    /**
-     * The smallest value allowed for the input.
-     * @default 0
-     */
-    minValue?: number;
-    /**
-     * The largest value allowed for the input.
-     * @default 100
-     */
-    maxValue?: number;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * The variant to use. Use indeterminate or query when there is no progress value.
-     * @default determinate
-     * */
+     * @default 'determinate'
+     */
     variant?: ProgressBarPropVariant;
     /** The props used for each slot inside. */
     slotProps?: {
         fill?: ComponentPropsWithRef<'span'>;
     };
-};
-export type ProgressBarProps = ExtendableComponentPropsWithRef<ProgressBarBaseProps, 'div'>;
+}, 'div'>;
+export type ProgressBarProps = ExtendableProps<ProgressBarBaseProps, Omit<ProgressBarBasePrimitiveProps, 'children' | 'isIndeterminate' | 'label' | 'formatOptions' | 'valueLabel'>>;

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -16,7 +16,7 @@ const ProgressSpinner = forwardRef((props, ref) => {
     slotProps,
     ...other
   } = props;
-  const indeterminate = variant === "indeterminate" || !isNotNil(value);
+  const isIndeterminate = variant === "indeterminate" || !isNotNil(value);
   const [sizeOfPixels, strokeWidth, radius, strokeDasharray] = useMemo(
     () => getSvgParamsBySize(size),
     [size]
@@ -28,13 +28,13 @@ const ProgressSpinner = forwardRef((props, ref) => {
       "data-size": size,
       minValue,
       maxValue,
-      indeterminate,
-      "data-variant": indeterminate ? "indeterminate" : "determinate",
-      className: clsx(s.base, indeterminate && s.indeterminate, className),
+      isIndeterminate,
+      "data-variant": isIndeterminate ? "indeterminate" : "determinate",
+      className: clsx(s.base, isIndeterminate && s.indeterminate, className),
       ...other,
       ref,
       children: ({ percentage = 0 }) => {
-        const progress = indeterminate ? 75 : percentage;
+        const progress = isIndeterminate ? 75 : percentage;
         return /* @__PURE__ */ jsx(
           "svg",
           {

package/dist/components/ProgressSpinner/types.d.ts

@@ -1,41 +1,29 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
+import type { ProgressBarBaseProps as ProgressBarBasePrimitiveProps } from '@koobiq/react-primitives';
 export declare const progressSpinnerPropSize: readonly ["compact", "big"];
 export type ProgressSpinnerPropSize = (typeof progressSpinnerPropSize)[number];
 export declare const progressSpinnerPropVariant: readonly ["indeterminate", "determinate"];
 export type ProgressSpinnerPropVariant = (typeof progressSpinnerPropVariant)[number];
-export type ProgressSpinnerBaseProps = {
+export type ProgressSpinnerBaseProps = ExtendableComponentPropsWithRef<{
     children?: never;
-    /**
-     * The current value (controlled).
-     * @default 0
-     */
-    value?: number;
     /**
      * Size.
-     * @default compact
-     * */
-    size?: ProgressSpinnerPropSize;
-    /**
-     * The smallest value allowed for the input.
-     * @default 0
+     * @default 'compact'
      */
-    minValue?: number;
-    /**
-     * The largest value allowed for the input.
-     * @default 100
-     */
-    maxValue?: number;
+    size?: ProgressSpinnerPropSize;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * The variant to use. Use indeterminate or query when there is no progress value.
-     * @default determinate
-     * */
+     * @default 'determinate'
+     */
     variant?: ProgressSpinnerPropVariant;
     /** The props used for each slot inside. */
     slotProps?: {
         spin?: ComponentPropsWithRef<'svg'>;
     };
-};
-export type ProgressSpinnerProps = ExtendableComponentPropsWithRef<ProgressSpinnerBaseProps, 'div'>;
+}, 'div'>;
+export type ProgressSpinnerProps = ExtendableProps<ProgressSpinnerBaseProps, Omit<ProgressBarBasePrimitiveProps, 'children' | 'isIndeterminate' | 'label' | 'formatOptions' | 'valueLabel'>>;

package/dist/components/Provider/Provider.d.ts

@@ -1,6 +1,6 @@
 import type { Breakpoints, ProviderProps } from './types';
 export declare const defaultBreakpoints: Breakpoints;
 export declare const Provider: {
-    ({ breakpoints, breakpointsFallback, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ breakpoints, breakpointsFallback, children, router, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/Provider.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { I18nProvider } from "@koobiq/react-primitives";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I18nProvider, RouterProvider } from "@koobiq/react-core";
 import { BreakpointsProvider } from "./BreakpointsProvider.js";
 import { ProviderContext } from "./ProviderContext.js";
 const defaultBreakpoints = {
@@ -21,13 +21,17 @@ const Provider = ({
   breakpoints = defaultBreakpoints,
   breakpointsFallback,
   children,
+  router,
   locale
-}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsxs(
   BreakpointsProvider,
   {
     breakpoints,
     defaultMatches: breakpointsFallback,
-    children
+    children: [
+      router?.navigate && /* @__PURE__ */ jsx(RouterProvider, { ...router, children }),
+      !router?.navigate && children
+    ]
   }
 ) }) });
 Provider.displayName = "Provider";

package/dist/components/Provider/types.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { I18nProviderProps } from '@koobiq/react-primitives';
+import type { I18nProviderProps, RouterProvider } from '@koobiq/react-core';
 export type Breakpoints = {
     xs?: number;
     s?: number;
@@ -18,4 +18,6 @@ export type ProviderProps = {
     breakpointsFallback?: boolean[];
     /** The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Defaults to the browser/OS language setting. */
     locale?: I18nProviderProps['locale'];
+    /** Configuration object for routing. If provided, wraps children in a RouterProvider. */
+    router?: Omit<Parameters<typeof RouterProvider>[0], 'children'>;
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps, clsx } from "@koobiq/react-core";
 import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
 import { RadioGroupLabel } from "./components/RadioGroupLabel/RadioGroupLabel.js";
@@ -9,9 +10,48 @@ import { RadioGroupDescription } from "./components/RadioGroupDescription/RadioG
 import { flex } from "../layout/flex/flex.js";
 const RadioGroup = forwardRef(
   (props, ref) => {
-    const { size, label, children, slotProps, description, orientation } = props;
+    const {
+      size,
+      label,
+      children,
+      slotProps,
+      description,
+      orientation,
+      isInvalid: isInvalidProp,
+      isDisabled: isDisabledProp,
+      isRequired: isRequiredProp,
+      isReadOnly: isReadOnlyProp,
+      disabled,
+      error,
+      readonly,
+      required
+    } = props;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isInvalid = isInvalidProp ?? error ?? false;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    const isRequired = isRequiredProp ?? required ?? false;
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'RadioGroup: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "error" in props) {
+      deprecate(
+        'RadioGroup: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+      deprecate(
+        'RadioGroup: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "required" in props) {
+      deprecate(
+        'RadioGroup: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+      );
+    }
     const commonRootProps = mergeProps(
-      props,
+      { ...props, isDisabled, isInvalid, isReadOnly, isRequired },
       {
         className: clsx(
           flex({

package/dist/components/RadioGroup/components/Radio/Radio.d.ts

@@ -1,12 +1,15 @@
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/radio").AriaRadioProps, "isDisabled">, "disabled"> & {
-    disabled?: boolean;
-} & {
-    caption?: string;
+import { type RadioProps as RadioPropsPrimitive } from '@koobiq/react-primitives';
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "slotProps" | "data-testid" | "labelPlacement"> & {
+    children?: import("react").ReactNode;
     size?: import("./types").RadioPropSize;
     labelPlacement?: import("./types").RadioPropLabelPlacement;
     className?: string;
+    style?: import("react").CSSProperties;
+    'data-testid'?: string | number;
     slotProps?: {
         circle?: import("react").ComponentPropsWithRef<"span">;
         label?: import("react").ComponentPropsWithRef<"span">;
     };
+} & {
+    disabled?: boolean;
 } & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/RadioGroup/components/Radio/Radio.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
 import { IconCircleXs16 } from "@koobiq/react-icons";
 import { Radio as Radio$1 } from "@koobiq/react-primitives";
@@ -10,33 +11,57 @@ const Radio = forwardRef(
     const {
       labelPlacement = "end",
       size: sizeProp,
+      isDisabled: isDisabledProp,
+      disabled,
       children,
       slotProps,
       className,
       ...other
     } = props;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'Radio: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
     const { size: sizeState } = useRadioGroupState();
     const size = sizeProp || sizeState || "normal";
     const commonProps = {
-      className: ({ error, checked, hovered, disabled, focusVisible }) => clsx(
+      isDisabled,
+      className: ({
+        isInvalid,
+        isSelected,
+        isHovered,
+        isDisabled: isDisabled2,
+        isFocusVisible
+      }) => clsx(
         s.base,
         s[size],
-        error && s.error,
-        checked && s.checked,
-        hovered && s.hovered,
-        disabled && s.disabled,
         s[labelPlacement],
-        focusVisible && s.focusVisible,
+        isInvalid && s.invalid,
+        isHovered && s.hovered,
+        isDisabled2 && s.disabled,
+        isSelected && s.selected,
+        isFocusVisible && s.focusVisible,
         className
       ),
       ...other
     };
     const circleProps = mergeProps({ className: s.circle }, slotProps?.circle);
     const labelProps = slotProps?.label;
-    return /* @__PURE__ */ jsxs(Radio$1, { ...commonProps, ref, children: [
-      /* @__PURE__ */ jsx("span", { ...circleProps, children: /* @__PURE__ */ jsx(IconCircleXs16, { className: s.icon }) }),
-      isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Radio$1,
+      {
+        ...commonProps,
+        "data-size": size,
+        "data-label-placement": labelPlacement,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx("span", { ...circleProps, children: /* @__PURE__ */ jsx(IconCircleXs16, { className: s.icon }) }),
+          isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
+        ]
+      }
+    );
   }
 );
 Radio.displayName = "Radio";