@brijbyte/agentic-ui 0.0.2 → 0.0.4

package/src/meter/meter.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import styles from "./meter.module.css";
+import { getMeterState } from "./meterState";
+
+export type MeterSize = "sm" | "md" | "lg";
+
+export interface MeterProps {
+  /** Current value. Must be between `min` and `max`. */
+  value: number;
+  /** Minimum value of the range. @default 0 */
+  min?: number;
+  /** Maximum value of the range. @default 100 */
+  max?: number;
+  /** Upper boundary of the low zone. Values ≤ this are "low". */
+  low?: number;
+  /** Lower boundary of the high zone. Values ≥ this are "high". */
+  high?: number;
+  /**
+   * Which zone is optimal — determines fill colour:
+   * - `"high"` (default) → high=green, mid=amber, low=red   (battery, signal)
+   * - `"low"`            → low=green, mid=amber, high=red   (CPU load, disk)
+   * - `"mid"`            → mid=green, low/high=amber         (temperature)
+   */
+  optimum?: "low" | "mid" | "high";
+  /** Accessible + visible label. */
+  label?: ReactNode;
+  /** Show the formatted value next to the label. @default false */
+  showValue?: boolean;
+  /** `Intl.NumberFormatOptions` for value formatting. */
+  format?: Intl.NumberFormatOptions;
+  /** Show tick marks at low/high threshold positions. @default false */
+  showTicks?: boolean;
+  /** Bar thickness. @default "md" */
+  size?: MeterSize;
+  className?: string;
+}
+
+/**
+ * Displays a scalar measurement within a known range. Use `low` / `high` /
+ * `optimum` thresholds to colour the fill based on whether the value is in
+ * an optimal, suboptimal, or critical zone.
+ */
+export function Meter({
+  value,
+  min = 0,
+  max = 100,
+  low,
+  high,
+  optimum = "high",
+  label,
+  showValue = false,
+  format,
+  showTicks = false,
+  size = "md",
+  className = "",
+}: MeterProps) {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const state = getMeterState(clampedValue, min, max, low, high, optimum);
+  const lowPct = low != null ? ((low - min) / (max - min)) * 100 : null;
+  const highPct = high != null ? ((high - min) / (max - min)) * 100 : null;
+
+  return (
+    <BaseMeter.Root
+      value={clampedValue}
+      min={min}
+      max={max}
+      {...(format !== undefined && { format })}
+      className={`${styles.root} ${className}`}
+    >
+      {(label != null || showValue) && (
+        <div className={styles["label-row"]}>
+          {label != null && <BaseMeter.Label className={styles.label}>{label}</BaseMeter.Label>}
+          {showValue && <BaseMeter.Value className={styles.value} />}
+        </div>
+      )}
+      <BaseMeter.Track className={`${styles.track} ${styles[`track-${size}`]}`}>
+        <BaseMeter.Indicator className={styles.indicator} data-meter-state={state} />
+        {showTicks && lowPct != null && <div className={styles.tick} style={{ left: `${lowPct}%` }} />}
+        {showTicks && highPct != null && <div className={styles.tick} style={{ left: `${highPct}%` }} />}
+      </BaseMeter.Track>
+    </BaseMeter.Root>
+  );
+}
+
+export { styles as MeterStyles };

package/src/meter/meterState.ts

@@ -0,0 +1,29 @@
+/**
+ * Derives the semantic zone from value + thresholds,
+ * following the HTML <meter> spec colouring algorithm.
+ *
+ * Returns undefined when no thresholds are defined (plain accent colour).
+ */
+export function getMeterState(
+  value: number,
+  min: number,
+  max: number,
+  low: number | undefined,
+  high: number | undefined,
+  optimum: "low" | "mid" | "high",
+): "optimum" | "suboptimal" | "critical" | undefined {
+  if (low === undefined && high === undefined) return undefined;
+
+  const effectiveLow = low ?? min;
+  const effectiveHigh = high ?? max;
+
+  const zone: "low" | "mid" | "high" = value <= effectiveLow ? "low" : value >= effectiveHigh ? "high" : "mid";
+
+  if (zone === optimum) return "optimum";
+
+  // "mid" optimum → no critical zone, extremes are equally suboptimal
+  if (optimum === "mid") return "suboptimal";
+
+  // "low" or "high" optimum → adjacent zone = suboptimal, far end = critical
+  return zone === "mid" ? "suboptimal" : "critical";
+}

package/src/meter/parts.tsx

@@ -0,0 +1,72 @@
+/**
+ * Styled primitives for Meter.
+ *
+ * @example
+ * ```tsx
+ * import { Meter } from '@base-ui/react/meter';
+ * import { MeterTrack, MeterIndicator, MeterLabel, MeterValue } from '@brijbyte/agentic-ui/meter';
+ *
+ * <Meter.Root value={68} min={0} max={100}>
+ *   <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+ *     <MeterLabel>Storage</MeterLabel>
+ *     <MeterValue />
+ *   </div>
+ *   <MeterTrack>
+ *     <MeterIndicator />
+ *   </MeterTrack>
+ * </Meter.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import styles from "./meter.module.css";
+
+type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseMeter.Track>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseMeter.Indicator>;
+type BaseLabelProps = ComponentPropsWithoutRef<typeof BaseMeter.Label>;
+type BaseValueProps = ComponentPropsWithoutRef<typeof BaseMeter.Value>;
+
+export interface MeterTrackProps extends Omit<BaseTrackProps, "className"> {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+export interface MeterIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+  className?: string;
+  /** Threshold state — controls fill colour. Set automatically by the high-level Meter wrapper. */
+  "data-meter-state"?: "optimum" | "suboptimal" | "critical";
+}
+export interface MeterLabelProps extends Omit<BaseLabelProps, "className"> {
+  className?: string;
+}
+export interface MeterValueProps extends Omit<BaseValueProps, "className"> {
+  className?: string;
+}
+
+export const MeterTrack = forwardRef<ComponentRef<typeof BaseMeter.Track>, MeterTrackProps>(function MeterTrack(
+  { className, size = "md", ...props },
+  ref,
+) {
+  return <BaseMeter.Track ref={ref} className={`${styles.track} ${styles[`track-${size}`]} ${className ?? ""}`} {...props} />;
+});
+
+export const MeterIndicator = forwardRef<ComponentRef<typeof BaseMeter.Indicator>, MeterIndicatorProps>(function MeterIndicator(
+  { className, ...props },
+  ref,
+) {
+  return <BaseMeter.Indicator ref={ref} className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+});
+
+export const MeterLabel = forwardRef<ComponentRef<typeof BaseMeter.Label>, MeterLabelProps>(function MeterLabel(
+  { className, ...props },
+  ref,
+) {
+  return <BaseMeter.Label ref={ref} className={`${styles.label} ${className ?? ""}`} {...props} />;
+});
+
+export const MeterValue = forwardRef<ComponentRef<typeof BaseMeter.Value>, MeterValueProps>(function MeterValue(
+  { className, ...props },
+  ref,
+) {
+  return <BaseMeter.Value ref={ref} className={`${styles.value} ${className ?? ""}`} {...props} />;
+});

package/src/number-field/number-field.tsx

@@ -6,17 +6,29 @@ import styles from "./number-field.module.css";
 export interface NumberFieldProps {
   /** Visible label text. When present a scrub-area is also rendered. */
   label?: ReactNode;
+  /** Initial value (uncontrolled). */
   defaultValue?: number;
+  /** Current value (controlled). `null` when the field is empty. */
   value?: number | null;
+  /** Called when the value changes. */
   onValueChange?: (value: number | null) => void;
+  /** Minimum allowed value. */
   min?: number;
+  /** Maximum allowed value. */
   max?: number;
+  /** Increment/decrement step size. @default 1 */
   step?: number;
+  /** Prevent interaction. */
   disabled?: boolean;
+  /** Allow reading but not editing. */
   readOnly?: boolean;
+  /** Mark the field as required for form validation. */
   required?: boolean;
+  /** HTML name attribute for form submission. */
   name?: string;
+  /** `Intl.NumberFormatOptions` for display formatting. */
   format?: Intl.NumberFormatOptions;
+  /** Allow changing the value by scrolling the mouse wheel. */
   allowWheelScrub?: boolean;
   className?: string;
 }
@@ -45,6 +57,10 @@ function ScrubCursorIcon() {
   );
 }
 
+/**
+ * A numeric input with stepper buttons and a scrub area. Supports min/max
+ * clamping, step size, locale-aware formatting, and keyboard/scroll input.
+ */
 export function NumberField({ label, className, onValueChange, ...props }: NumberFieldProps) {
   const id = useId();
 

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,120 @@
+/**
+ * Styled primitives for Popover.
+ *
+ * Use these when you need full control over the popover's behaviour
+ * (controlled state, custom positioning, anchor overrides) while keeping
+ * all agentic-ui styles applied.
+ *
+ * @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";
+
+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 Omit<BasePositionerProps, "className"> {
+  className?: string;
+}
+export interface PopoverPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface PopoverTitleProps extends Omit<BaseTitleProps, "className"> {
+  className?: string;
+}
+export interface PopoverDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
+  className?: string;
+}
+export interface PopoverCloseProps extends Omit<BaseCloseProps, "className"> {
+  className?: string;
+}
+export interface PopoverArrowProps extends Omit<BaseArrowProps, "className"> {
+  className?: string;
+}
+export interface PopoverViewportProps extends Omit<BaseViewportProps, "className"> {
+  className?: string;
+}
+
+export const PopoverPositioner = forwardRef<ComponentRef<typeof BasePopover.Positioner>, PopoverPositionerProps>(function PopoverPositioner(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} {...props} />;
+});
+
+export const PopoverPopup = forwardRef<ComponentRef<typeof BasePopover.Popup>, PopoverPopupProps>(function PopoverPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const PopoverTitle = forwardRef<ComponentRef<typeof BasePopover.Title>, PopoverTitleProps>(function PopoverTitle(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Title ref={ref} className={`${styles.title} ${className ?? ""}`} {...props} />;
+});
+
+export const PopoverDescription = forwardRef<ComponentRef<typeof BasePopover.Description>, PopoverDescriptionProps>(
+  function PopoverDescription({ className, ...props }, ref) {
+    return <BasePopover.Description ref={ref} className={`${styles.description} ${className ?? ""}`} {...props} />;
+  },
+);
+
+export const PopoverClose = forwardRef<ComponentRef<typeof BasePopover.Close>, PopoverCloseProps>(function PopoverClose(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Close ref={ref} className={`${styles.close} ${className ?? ""}`} {...props} />;
+});
+
+export const PopoverViewport = forwardRef<ComponentRef<typeof BasePopover.Viewport>, PopoverViewportProps>(function PopoverViewport(
+  { className, ...props },
+  ref,
+) {
+  return <BasePopover.Viewport ref={ref} className={`${styles.viewport} ${className ?? ""}`} {...props} />;
+});
+
+export const PopoverArrow = forwardRef<ComponentRef<typeof BasePopover.Arrow>, PopoverArrowProps>(function PopoverArrow(
+  { className, children, ...props },
+  ref,
+) {
+  return (
+    <BasePopover.Arrow ref={ref} className={`${styles.arrow} ${className ?? ""}`} {...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/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";