@brijbyte/agentic-ui 0.0.3 → 0.0.5

package/src/number-field/parts.tsx

@@ -25,6 +25,7 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
 import styles from "./number-field.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseNumberField.Group>;
 type BaseInputProps = ComponentPropsWithoutRef<typeof BaseNumberField.Input>;
@@ -33,59 +34,67 @@ type BaseIncrementProps = ComponentPropsWithoutRef<typeof BaseNumberField.Increm
 type BaseScrubAreaProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubArea>;
 type BaseScrubAreaCursorProps = ComponentPropsWithoutRef<typeof BaseNumberField.ScrubAreaCursor>;
 
-export interface NumberFieldGroupProps extends Omit<BaseGroupProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldInputProps extends Omit<BaseInputProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldDecrementProps extends Omit<BaseDecrementProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldIncrementProps extends Omit<BaseIncrementProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldScrubAreaProps extends Omit<BaseScrubAreaProps, "className"> {
-  className?: string;
-}
-export interface NumberFieldScrubAreaCursorProps extends Omit<BaseScrubAreaCursorProps, "className"> {
-  className?: string;
-}
+export interface NumberFieldGroupProps extends BaseGroupProps {}
+export interface NumberFieldInputProps extends BaseInputProps {}
+export interface NumberFieldDecrementProps extends BaseDecrementProps {}
+export interface NumberFieldIncrementProps extends BaseIncrementProps {}
+export interface NumberFieldScrubAreaProps extends BaseScrubAreaProps {}
+export interface NumberFieldScrubAreaCursorProps extends BaseScrubAreaCursorProps {}
 
 export const NumberFieldGroup = forwardRef<ComponentRef<typeof BaseNumberField.Group>, NumberFieldGroupProps>(function NumberFieldGroup(
   { className, ...props },
   ref,
 ) {
-  return <BaseNumberField.Group ref={ref} className={`${styles.group} ${className ?? ""}`} {...props} />;
+  return <BaseNumberField.Group ref={ref} className={(state) => cx(styles.group, resolveClassName(className, state))} {...props} />;
 });
 
 export const NumberFieldInput = forwardRef<ComponentRef<typeof BaseNumberField.Input>, NumberFieldInputProps>(function NumberFieldInput(
   { className, ...props },
   ref,
 ) {
-  return <BaseNumberField.Input ref={ref} className={`${styles.input} ${className ?? ""}`} {...props} />;
+  return <BaseNumberField.Input ref={ref} className={(state) => cx(styles.input, resolveClassName(className, state))} {...props} />;
 });
 
 export const NumberFieldDecrement = forwardRef<ComponentRef<typeof BaseNumberField.Decrement>, NumberFieldDecrementProps>(
   function NumberFieldDecrement({ className, ...props }, ref) {
-    return <BaseNumberField.Decrement ref={ref} className={`${styles["step-button"]} ${styles.decrement} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.Decrement
+        ref={ref}
+        className={(state) => cx(styles["step-button"], styles.decrement, resolveClassName(className, state))}
+        {...props}
+      />
+    );
   },
 );
 
 export const NumberFieldIncrement = forwardRef<ComponentRef<typeof BaseNumberField.Increment>, NumberFieldIncrementProps>(
   function NumberFieldIncrement({ className, ...props }, ref) {
-    return <BaseNumberField.Increment ref={ref} className={`${styles["step-button"]} ${styles.increment} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.Increment
+        ref={ref}
+        className={(state) => cx(styles["step-button"], styles.increment, resolveClassName(className, state))}
+        {...props}
+      />
+    );
   },
 );
 
 export const NumberFieldScrubArea = forwardRef<ComponentRef<typeof BaseNumberField.ScrubArea>, NumberFieldScrubAreaProps>(
   function NumberFieldScrubArea({ className, ...props }, ref) {
-    return <BaseNumberField.ScrubArea ref={ref} className={`${styles["scrub-area"]} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.ScrubArea ref={ref} className={(state) => cx(styles["scrub-area"], resolveClassName(className, state))} {...props} />
+    );
   },
 );
 
 export const NumberFieldScrubAreaCursor = forwardRef<ComponentRef<typeof BaseNumberField.ScrubAreaCursor>, NumberFieldScrubAreaCursorProps>(
   function NumberFieldScrubAreaCursor({ className, ...props }, ref) {
-    return <BaseNumberField.ScrubAreaCursor ref={ref} className={`${styles["scrub-area-cursor"]} ${className ?? ""}`} {...props} />;
+    return (
+      <BaseNumberField.ScrubAreaCursor
+        ref={ref}
+        className={(state) => cx(styles["scrub-area-cursor"], resolveClassName(className, state))}
+        {...props}
+      />
+    );
   },
 );

package/src/popover/index.ts

@@ -0,0 +1,14 @@
+export { Popover } from "./popover";
+export type { PopoverProps } from "./popover";
+export { PopoverStyles } from "./popover";
+
+export { PopoverPositioner, PopoverPopup, PopoverTitle, PopoverDescription, PopoverClose, PopoverArrow, PopoverViewport } from "./parts";
+export type {
+  PopoverPositionerProps,
+  PopoverPopupProps,
+  PopoverTitleProps,
+  PopoverDescriptionProps,
+  PopoverCloseProps,
+  PopoverArrowProps,
+  PopoverViewportProps,
+} from "./parts";

package/src/popover/parts.tsx

@@ -0,0 +1,105 @@
+/**
+ * Styled primitives for Popover.
+ *
+ * @example
+ * ```tsx
+ * import { Popover } from '@base-ui/react/popover';
+ * import {
+ *   PopoverPopup,
+ *   PopoverTitle,
+ *   PopoverDescription,
+ *   PopoverClose,
+ *   PopoverArrow,
+ * } from '@brijbyte/agentic-ui/popover';
+ *
+ * <Popover.Root>
+ *   <Popover.Trigger render={<button>Open</button>} />
+ *   <Popover.Portal>
+ *     <Popover.Positioner side="bottom" sideOffset={8}>
+ *       <PopoverPopup>
+ *         <PopoverArrow />
+ *         <PopoverTitle>Details</PopoverTitle>
+ *         <PopoverDescription>Supporting text here.</PopoverDescription>
+ *         <PopoverClose aria-label="Close" />
+ *       </PopoverPopup>
+ *     </Popover.Positioner>
+ *   </Popover.Portal>
+ * </Popover.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import styles from "./popover.module.css";
+import { PopupArrow } from "../shared/PopupArrow";
+import { resolveClassName, cx } from "../utils/resolveClassName";
+
+type BasePositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;
+type BaseTitleProps = ComponentPropsWithoutRef<typeof BasePopover.Title>;
+type BaseDescriptionProps = ComponentPropsWithoutRef<typeof BasePopover.Description>;
+type BaseCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;
+type BaseArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;
+type BaseViewportProps = ComponentPropsWithoutRef<typeof BasePopover.Viewport>;
+
+export interface PopoverPositionerProps extends BasePositionerProps {}
+export interface PopoverPopupProps extends BasePopupProps {}
+export interface PopoverTitleProps extends BaseTitleProps {}
+export interface PopoverDescriptionProps extends BaseDescriptionProps {}
+export interface PopoverCloseProps extends BaseCloseProps {}
+export interface PopoverArrowProps extends BaseArrowProps {}
+export interface PopoverViewportProps extends BaseViewportProps {}
+
+export const PopoverPositioner = forwardRef<ComponentRef<typeof BasePopover.Positioner>, PopoverPositionerProps>(function PopoverPositioner(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Positioner ref={ref} className={(state) => cx(styles.positioner, resolveClassName(className, state))} {...props} />;
+});
+
+export const PopoverPopup = forwardRef<ComponentRef<typeof BasePopover.Popup>, PopoverPopupProps>(function PopoverPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;
+});
+
+export const PopoverTitle = forwardRef<ComponentRef<typeof BasePopover.Title>, PopoverTitleProps>(function PopoverTitle(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;
+});
+
+export const PopoverDescription = forwardRef<ComponentRef<typeof BasePopover.Description>, PopoverDescriptionProps>(
+  function PopoverDescription({ className, ...props }, ref) {
+    return (
+      <BasePopover.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...props} />
+    );
+  },
+);
+
+export const PopoverClose = forwardRef<ComponentRef<typeof BasePopover.Close>, PopoverCloseProps>(function PopoverClose(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Close ref={ref} className={(state) => cx(styles.close, resolveClassName(className, state))} {...props} />;
+});
+
+export const PopoverViewport = forwardRef<ComponentRef<typeof BasePopover.Viewport>, PopoverViewportProps>(function PopoverViewport(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Viewport ref={ref} className={(state) => cx(styles.viewport, resolveClassName(className, state))} {...props} />;
+});
+
+export const PopoverArrow = forwardRef<ComponentRef<typeof BasePopover.Arrow>, PopoverArrowProps>(function PopoverArrow(
+  { className, children, ...props },
+  ref,
+) {
+  return (
+    <BasePopover.Arrow ref={ref} className={(state) => cx(styles.arrow, resolveClassName(className, state))} {...props}>
+      {children ?? <PopupArrow fillClass={styles["arrow-fill"]!} seamClass={styles["arrow-seam"]!} />}
+    </BasePopover.Arrow>
+  );
+});

package/src/popover/popover.module.css

@@ -0,0 +1,189 @@
+@layer components {
+  .positioner {
+    z-index: var(--z-popover);
+  }
+
+  .popup {
+    /* Arrow colour tokens consumed by .arrow-fill / .arrow-stroke below */
+    --arrow-fill: var(--color-elevated);
+    --arrow-stroke: var(--color-line);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-popover);
+    padding: var(--space-4);
+    min-width: 220px;
+    max-width: 320px;
+    outline: none;
+    transition: opacity 200ms var(--easing-ease-out);
+  }
+
+  .popup[data-starting-style] {
+    opacity: 0;
+  }
+
+  .popup[data-ending-style] {
+    opacity: 0;
+    transition: opacity 100ms var(--easing-ease-in);
+  }
+
+  /* Instant dismiss/click — skip the exit animation */
+  .popup[data-instant] {
+    transition-duration: 0ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popup[data-starting-style],
+    .popup[data-ending-style] {
+      transition: none;
+    }
+  }
+
+  /* ── Internals ──────────────────────────────────────────────────── */
+
+  .title {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+    margin: 0;
+  }
+
+  .description {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+    margin: 0;
+    margin-top: var(--space-1);
+  }
+
+  .close {
+    position: absolute;
+    top: var(--space-3);
+    right: var(--space-3);
+    width: 22px;
+    height: 22px;
+    border-radius: var(--radius-sm);
+    border: none;
+    background: transparent;
+    color: var(--color-tertiary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    flex-shrink: 0;
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard),
+      transform 100ms var(--easing-ease-out);
+  }
+
+  .close:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
+  }
+
+  .close:active {
+    transform: scale(0.94);
+  }
+
+  .close:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  /* ── Viewport ───────────────────────────────────────────────────── */
+
+  .viewport {
+    position: relative;
+    overflow: clip;
+  }
+
+  /* [data-current] and [data-previous] are direct children injected by
+     base-ui's Viewport. Both get transition so the slide is smooth. */
+  .viewport [data-current],
+  .viewport [data-previous] {
+    transition:
+      transform 200ms var(--easing-ease-out),
+      opacity 150ms var(--easing-ease-out);
+  }
+
+  /* Entering content */
+  .viewport [data-current][data-starting-style] {
+    opacity: 0;
+  }
+
+  /* Exiting content */
+  .viewport [data-previous][data-ending-style] {
+    opacity: 0;
+    transition:
+      transform 200ms var(--easing-ease-in),
+      opacity 150ms var(--easing-ease-in);
+  }
+
+  /* Slide direction: previous exits opposite, current enters from direction */
+  .viewport[data-activation-direction~="down"] [data-current][data-starting-style] {
+    transform: translateY(-6px);
+  }
+  .viewport[data-activation-direction~="down"] [data-previous][data-ending-style] {
+    transform: translateY(6px);
+  }
+
+  .viewport[data-activation-direction~="up"] [data-current][data-starting-style] {
+    transform: translateY(6px);
+  }
+  .viewport[data-activation-direction~="up"] [data-previous][data-ending-style] {
+    transform: translateY(-6px);
+  }
+
+  .viewport[data-activation-direction~="right"] [data-current][data-starting-style] {
+    transform: translateX(-6px);
+  }
+  .viewport[data-activation-direction~="right"] [data-previous][data-ending-style] {
+    transform: translateX(6px);
+  }
+
+  .viewport[data-activation-direction~="left"] [data-current][data-starting-style] {
+    transform: translateX(6px);
+  }
+  .viewport[data-activation-direction~="left"] [data-previous][data-ending-style] {
+    transform: translateX(-6px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .viewport [data-current],
+    .viewport [data-previous] {
+      transition: opacity 150ms var(--easing-ease-out);
+      transform: none !important;
+    }
+  }
+
+  /* ── Arrow ──────────────────────────────────────────────────────── */
+  .arrow {
+    display: flex;
+  }
+  .arrow[data-side="top"] {
+    bottom: -8px;
+    rotate: 180deg;
+  }
+  .arrow[data-side="bottom"] {
+    top: -8px;
+    rotate: 0deg;
+  }
+  .arrow[data-side="left"] {
+    right: -13px;
+    rotate: 90deg;
+  }
+  .arrow[data-side="right"] {
+    left: -13px;
+    rotate: -90deg;
+  }
+  .arrow-fill {
+    fill: var(--color-elevated);
+  }
+  .arrow-seam {
+    fill: var(--color-line);
+  }
+}

package/src/popover/popover.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode, ReactElement } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import styles from "./popover.module.css";
+import { PopupArrow } from "../shared/PopupArrow";
+
+export interface PopoverProps {
+  /** The trigger element — rendered as-is, receives the popover open/close handler. */
+  trigger: ReactElement;
+  /** Optional heading rendered at the top of the popup. */
+  title?: ReactNode;
+  /** Optional supporting text rendered below the title. */
+  description?: ReactNode;
+  /** Body content of the popover. */
+  children?: ReactNode;
+  /** Which side of the trigger to open on. @default "bottom" */
+  side?: "top" | "bottom" | "left" | "right";
+  /** Alignment relative to the trigger. @default "center" */
+  align?: "start" | "center" | "end";
+  /** Gap between trigger and popup in px. @default 8 */
+  sideOffset?: number;
+  /** Show a close (×) button in the top-right corner. @default false */
+  dismissible?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Uncontrolled default open state. */
+  defaultOpen?: boolean;
+  /** Called when the popover opens or closes. */
+  onOpenChange?: (open: boolean, eventDetails: unknown) => void;
+}
+
+function XIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M2 2L10 10M10 2L2 10" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/**
+ * Floating content panel anchored to a trigger. Scales from the trigger's
+ * edge and repositions automatically to avoid viewport overflow. Supports
+ * title, description, close button, and arbitrary body content.
+ */
+export function Popover({
+  trigger,
+  title,
+  description,
+  children,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  dismissible = false,
+  onOpenChange,
+  ...props
+}: PopoverProps) {
+  return (
+    <BasePopover.Root onOpenChange={onOpenChange as never} {...props}>
+      <BasePopover.Trigger render={trigger} />
+      <BasePopover.Portal>
+        <BasePopover.Positioner className={styles.positioner} side={side} align={align} sideOffset={sideOffset} arrowPadding={8}>
+          <BasePopover.Popup className={styles.popup}>
+            <BasePopover.Arrow className={styles.arrow}>
+              <PopupArrow fillClass={styles["arrow-fill"]!} seamClass={styles["arrow-seam"]!} />
+            </BasePopover.Arrow>
+            {dismissible && (
+              <BasePopover.Close className={styles.close} aria-label="Close">
+                <XIcon />
+              </BasePopover.Close>
+            )}
+            {title && <BasePopover.Title className={styles.title}>{title}</BasePopover.Title>}
+            {description && <BasePopover.Description className={styles.description}>{description}</BasePopover.Description>}
+            {children}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    </BasePopover.Root>
+  );
+}
+
+export { styles as PopoverStyles };

package/src/progress/parts.tsx

@@ -17,16 +17,15 @@ import { forwardRef } from "react";
 import type { ComponentRef, ComponentPropsWithoutRef } from "react";
 import { Progress as BaseProgress } from "@base-ui/react/progress";
 import styles from "./progress.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
 
 type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseProgress.Track>;
 type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseProgress.Indicator>;
 
-export interface ProgressTrackProps extends Omit<BaseTrackProps, "className"> {
-  className?: string;
+export interface ProgressTrackProps extends BaseTrackProps {
   size?: "sm" | "md" | "lg";
 }
-export interface ProgressIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
-  className?: string;
+export interface ProgressIndicatorProps extends BaseIndicatorProps {
   status?: "default" | "success" | "warning" | "error";
 }
 
@@ -34,7 +33,13 @@ export const ProgressTrack = forwardRef<ComponentRef<typeof BaseProgress.Track>,
   { className, size = "md", ...props },
   ref,
 ) {
-  return <BaseProgress.Track ref={ref} className={`${styles.track} ${styles[`track-${size}`]} ${className ?? ""}`} {...props} />;
+  return (
+    <BaseProgress.Track
+      ref={ref}
+      className={(state) => cx(styles.track, styles[`track-${size}`], resolveClassName(className, state))}
+      {...props}
+    />
+  );
 });
 
 export const ProgressIndicator = forwardRef<ComponentRef<typeof BaseProgress.Indicator>, ProgressIndicatorProps>(function ProgressIndicator(
@@ -44,7 +49,9 @@ export const ProgressIndicator = forwardRef<ComponentRef<typeof BaseProgress.Ind
   return (
     <BaseProgress.Indicator
       ref={ref}
-      className={[styles.indicator, status !== "default" ? styles[`indicator-${status}`] : "", className ?? ""].filter(Boolean).join(" ")}
+      className={(state) =>
+        cx(styles.indicator, status !== "default" ? styles[`indicator-${status}`] : undefined, resolveClassName(className, state))
+      }
       {...props}
     />
   );

package/src/progress/progress.tsx

@@ -5,15 +5,26 @@ export type ProgressStatus = "default" | "success" | "warning" | "error";
 export type ProgressSize = "sm" | "md" | "lg";
 
 export interface ProgressProps {
+  /** Current progress value. `null` for indeterminate state. */
   value?: number | null;
+  /** Maximum value (the "complete" end). @default 100 */
   max?: number;
+  /** Accessible label shown above the bar. */
   label?: string;
+  /** Display the percentage next to the label. @default false */
   showValue?: boolean;
+  /** Semantic colour for the progress fill. @default "default" */
   status?: ProgressStatus;
+  /** Bar thickness. @default "md" */
   size?: ProgressSize;
   className?: string;
 }
 
+/**
+ * Linear progress indicator with optional label and percentage display.
+ * Pass `value={null}` for an indeterminate animated state. Use `status`
+ * to apply semantic colour to the fill.
+ */
 export function Progress({ value = null, max = 100, label, showValue = false, status = "default", size = "md", className }: ProgressProps) {
   const percentage = value != null ? Math.round((value / max) * 100) : null;
 

package/src/radio/index.ts

@@ -0,0 +1,6 @@
+export { Radio } from "./radio";
+export type { RadioProps } from "./radio";
+export { RadioStyles } from "./radio";
+
+export { RadioRoot, RadioIndicator } from "./parts";
+export type { RadioRootProps, RadioIndicatorProps } from "./parts";

package/src/radio/parts.tsx

@@ -0,0 +1,42 @@
+/**
+ * Styled primitives for Radio (single item).
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup } from '@base-ui/react/radio-group';
+ * import { RadioRoot, RadioIndicator } from '@brijbyte/agentic-ui/radio';
+ *
+ * <RadioGroup defaultValue="a">
+ *   <label htmlFor="opt-a">
+ *     <RadioRoot id="opt-a" value="a">
+ *       <RadioIndicator />
+ *     </RadioRoot>
+ *     Option A
+ *   </label>
+ * </RadioGroup>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import styles from "./radio.module.css";
+import { resolveClassName, cx } from "../utils/resolveClassName";
+
+type BaseRootProps = ComponentPropsWithoutRef<typeof BaseRadio.Root>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseRadio.Indicator>;
+
+export interface RadioRootProps extends BaseRootProps {}
+export interface RadioIndicatorProps extends BaseIndicatorProps {}
+
+export const RadioRoot = forwardRef<ComponentRef<typeof BaseRadio.Root>, RadioRootProps>(function RadioRoot({ className, ...props }, ref) {
+  return <BaseRadio.Root ref={ref} className={(state) => cx(styles.radio, resolveClassName(className, state))} {...props} />;
+});
+
+export const RadioIndicator = forwardRef<ComponentRef<typeof BaseRadio.Indicator>, RadioIndicatorProps>(function RadioIndicator(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <BaseRadio.Indicator ref={ref} keepMounted className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />
+  );
+});