@brijbyte/agentic-ui 0.0.2 → 0.0.4

package/src/index.ts

@@ -2,236 +2,28 @@
 import "./styles/tokens.css";
 import "./styles/reset.css";
 
-// ─── AlertDialog ─────────────────────────────────────────────────────
-export { AlertDialog, AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from "./alert-dialog";
-export type {
-  AlertDialogProps,
-  AlertAction,
-  AlertDialogBackdropProps,
-  AlertDialogPopupProps,
-  AlertDialogTitleProps,
-  AlertDialogDescriptionProps,
-} from "./alert-dialog";
-
-// ─── ContextMenu ─────────────────────────────────────────────────────
-export {
-  ContextMenu,
-  ContextMenuPopup,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuGroup,
-  ContextMenuGroupLabel,
-} from "./context-menu";
-export type {
-  ContextMenuProps,
-  ContextMenuEntry,
-  ContextMenuItemDef,
-  ContextMenuSeparatorDef,
-  ContextMenuGroupDef,
-  ContextMenuPopupProps,
-  ContextMenuItemProps,
-  ContextMenuSeparatorProps,
-  ContextMenuGroupProps,
-  ContextMenuGroupLabelProps,
-} from "./context-menu";
-
-// ─── Button ──────────────────────────────────────────────────────────
-export { Button } from "./button";
-export type { ButtonProps, ButtonVariant, ButtonSize } from "./button";
-
-// ─── Badge ───────────────────────────────────────────────────────────
-export { Badge } from "./badge";
-export type { BadgeProps, BadgeVariant } from "./badge";
-
-// ─── Card ────────────────────────────────────────────────────────────
-export { Card, CardHeader, CardBody, CardFooter } from "./card";
-export type { CardProps, CardHeaderProps } from "./card";
-
-// ─── Input ───────────────────────────────────────────────────────────
-export { Input } from "./input";
-export type { InputProps, InputSize } from "./input";
-
-// ─── Checkbox ────────────────────────────────────────────────────────
-export { Checkbox, CheckboxRoot, CheckboxIndicator } from "./checkbox";
-export type { CheckboxProps, CheckboxRootProps, CheckboxIndicatorProps } from "./checkbox";
-
-// ─── Switch ──────────────────────────────────────────────────────────
-export { Switch, SwitchRoot, SwitchThumb } from "./switch";
-export type { SwitchProps, SwitchRootProps, SwitchThumbProps } from "./switch";
-
-// ─── Select ──────────────────────────────────────────────────────────
-export {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectPositioner,
-  SelectPopup,
-  SelectList,
-  SelectItem,
-  SelectItemText,
-  SelectItemIndicator,
-  SelectGroupContainer,
-  SelectGroupLabel,
-  SelectSeparator,
-} from "./select";
-export type {
-  SelectProps,
-  SelectOption,
-  SelectGroup,
-  SelectTriggerProps,
-  SelectValueProps,
-  SelectPositionerProps,
-  SelectPopupProps,
-  SelectListProps,
-  SelectItemProps,
-  SelectItemTextProps,
-  SelectItemIndicatorProps,
-  SelectGroupProps,
-  SelectGroupLabelProps,
-  SelectSeparatorProps,
-} from "./select";
-
-// ─── Dialog ──────────────────────────────────────────────────────────
-export { Dialog, DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogDescription, DialogClose } from "./dialog";
-export type {
-  DialogProps,
-  DialogBackdropProps,
-  DialogViewportProps,
-  DialogPopupProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
-  DialogCloseProps,
-} from "./dialog";
-
-// ─── Tooltip ─────────────────────────────────────────────────────────
-export { Tooltip, TooltipPositioner, TooltipPopup, TooltipArrow } from "./tooltip";
-export type { TooltipProps, TooltipPositionerProps, TooltipPopupProps, TooltipArrowProps } from "./tooltip";
-
-// ─── Tabs ────────────────────────────────────────────────────────────
-export { Tabs, TabsList, TabsTab, TabsPanel } from "./tabs";
-export type { TabsProps, TabItem, TabsListProps, TabsTabProps, TabsPanelProps } from "./tabs";
-
-// ─── Accordion ───────────────────────────────────────────────────────
-export { Accordion, AccordionItemPart, AccordionHeader, AccordionTrigger, AccordionPanel } from "./accordion";
-export type {
-  AccordionProps,
-  AccordionItem,
-  AccordionItemProps,
-  AccordionHeaderProps,
-  AccordionTriggerProps,
-  AccordionPanelProps,
-} from "./accordion";
-
-// ─── Progress ────────────────────────────────────────────────────────
-export { Progress, ProgressTrack, ProgressIndicator } from "./progress";
-export type { ProgressProps, ProgressStatus, ProgressSize, ProgressTrackProps, ProgressIndicatorProps } from "./progress";
-
-// ─── Toast ───────────────────────────────────────────────────────────
-export { ToastViewport, useToastManager, ToastRoot, ToastTitle, ToastDescription, ToastClose, ToastViewportPart } from "./toast";
-export type { ToastType, ToastRootProps, ToastTitleProps, ToastDescriptionProps, ToastCloseProps, ToastViewportPartProps } from "./toast";
-
-// ─── Drawer ──────────────────────────────────────────────────────────
-export {
-  Drawer,
-  DrawerBackdrop,
-  DrawerViewport,
-  DrawerPopup,
-  DrawerContent,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerClose,
-  DrawerHandleBar,
-  DrawerFooter,
-} from "./drawer";
-export type {
-  DrawerProps,
-  DrawerSide,
-  DrawerBackdropProps,
-  DrawerViewportProps,
-  DrawerPopupProps,
-  DrawerContentProps,
-  DrawerTitleProps,
-  DrawerDescriptionProps,
-  DrawerCloseProps,
-} from "./drawer";
-
-// ─── Separator ───────────────────────────────────────────────────────
-export { Separator } from "./separator";
-export type { SeparatorProps } from "./separator";
-
-// ─── Slider ──────────────────────────────────────────────────────────
-export { Slider, SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderLabel, SliderValue } from "./slider";
-export type {
-  SliderProps,
-  SliderControlProps,
-  SliderTrackProps,
-  SliderIndicatorProps,
-  SliderThumbProps,
-  SliderLabelProps,
-  SliderValueProps,
-} from "./slider";
-
-// ─── Collapsible ─────────────────────────────────────────────────────
-export { Collapsible, CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel } from "./collapsible";
-export type { CollapsibleProps, CollapsibleRootProps, CollapsibleTriggerProps, CollapsiblePanelProps } from "./collapsible";
-
-// ─── NumberField ─────────────────────────────────────────────────────
-export {
-  NumberField,
-  NumberFieldGroup,
-  NumberFieldInput,
-  NumberFieldDecrement,
-  NumberFieldIncrement,
-  NumberFieldScrubArea,
-  NumberFieldScrubAreaCursor,
-} from "./number-field";
-export type {
-  NumberFieldProps,
-  NumberFieldGroupProps,
-  NumberFieldInputProps,
-  NumberFieldDecrementProps,
-  NumberFieldIncrementProps,
-  NumberFieldScrubAreaProps,
-  NumberFieldScrubAreaCursorProps,
-} from "./number-field";
-
-// ─── Menu ────────────────────────────────────────────────────────────
-export { Menu, MenuPositioner, MenuPopup, MenuItem, MenuSeparator, MenuGroupLabel, MenuArrow, MenuItemShortcut } from "./menu";
-export type {
-  MenuProps,
-  MenuEntry,
-  MenuItemDef,
-  MenuSeparatorDef,
-  MenuGroupDef,
-  MenuPositionerProps,
-  MenuPopupProps,
-  MenuItemProps,
-  MenuSeparatorProps,
-  MenuGroupLabelProps,
-  MenuArrowProps,
-  MenuItemShortcutProps,
-} from "./menu";
-
-// ─── CSS module class name maps ───────────────────────────────────────
-// Import these to reference the hashed class names in custom CSS or tests.
-export { AlertDialogStyles } from "./alert-dialog";
-export { ContextMenuStyles } from "./context-menu";
-export { AccordionStyles } from "./accordion";
-export { BadgeStyles } from "./badge";
-export { ButtonStyles } from "./button";
-export { CardStyles } from "./card";
-export { CheckboxStyles } from "./checkbox";
-export { CollapsibleStyles } from "./collapsible";
-export { DialogStyles } from "./dialog";
-export { DrawerStyles } from "./drawer";
-export { InputStyles } from "./input";
-export { MenuStyles } from "./menu";
-export { NumberFieldStyles } from "./number-field";
-export { ProgressStyles } from "./progress";
-export { SelectStyles } from "./select";
-export { SeparatorStyles } from "./separator";
-export { SliderStyles } from "./slider";
-export { SwitchStyles } from "./switch";
-export { TabsStyles } from "./tabs";
-export { ToastStyles } from "./toast";
-export { TooltipStyles } from "./tooltip";
+export * from "./accordion";
+export * from "./alert-dialog";
+export * from "./badge";
+export * from "./button";
+export * from "./card";
+export * from "./checkbox";
+export * from "./collapsible";
+export * from "./context-menu";
+export * from "./dialog";
+export * from "./drawer";
+export * from "./input";
+export * from "./menu";
+export * from "./meter";
+export * from "./number-field";
+export * from "./popover";
+export * from "./progress";
+export * from "./radio";
+export * from "./radio-group";
+export * from "./select";
+export * from "./separator";
+export * from "./slider";
+export * from "./switch";
+export * from "./tabs";
+export * from "./toast";
+export * from "./tooltip";

package/src/input/input.tsx

@@ -9,11 +9,19 @@ export type InputSize = "sm" | "md" | "lg";
 export interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
   /** Visual size. Maps to height + font-size design tokens. Default: `"md"`. */
   size?: InputSize;
+  /** Icon or element rendered before the input text. */
   leftAdornment?: ReactNode;
+  /** Icon or element rendered after the input text. */
   rightAdornment?: ReactNode;
+  /** Applies error styling and sets `aria-invalid`. */
   invalid?: boolean;
 }
 
+/**
+ * Text input with optional left and right adornment slots. Extends the
+ * native `<input>` API — replaces the numeric `size` attribute with a
+ * token-based size prop.
+ */
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   { size = "md", leftAdornment, rightAdornment, invalid, className, ...props },
   ref,

package/src/menu/menu.module.css

@@ -14,8 +14,8 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     min-width: 200px;
-    transform-origin: var(--transform-origin);
     outline: none;
+    transition: opacity 150ms var(--easing-ease-out);
   }
   @supports (backdrop-filter: blur(12px)) {
     .popup {
@@ -25,17 +25,10 @@
   }
   .popup[data-starting-style] {
     opacity: 0;
-    transform: scale(0.95);
-    transition:
-      opacity 150ms var(--easing-ease-out),
-      transform 150ms var(--easing-ease-out);
   }
   .popup[data-ending-style] {
     opacity: 0;
-    transform: scale(0.98);
-    transition:
-      opacity 75ms var(--easing-ease-in),
-      transform 75ms var(--easing-ease-in);
+    transition: opacity 75ms var(--easing-ease-in);
   }
   /* ─── Item ───────────────────────────────────────────────────────── */
   .item {
@@ -136,7 +129,7 @@
   .arrow-fill {
     fill: var(--color-overlay);
   }
-  .arrow-stroke {
+  .arrow-seam {
     fill: var(--color-line);
   }
 }

package/src/menu/menu.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode, ReactElement } from "react";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import styles from "./menu.module.css";
+import { PopupArrow } from "../shared/PopupArrow";
 
 // ─── Types ──────────────────────────────────────────────────────────────────
 
@@ -28,40 +29,21 @@ export type MenuEntry = MenuItemDef | MenuSeparatorDef | MenuGroupDef;
 export interface MenuProps {
   /** The button/element that opens the menu. */
   trigger: ReactElement;
+  /** Array of menu entries: items, separators, and groups. */
   items: MenuEntry[];
-  /** @default "bottom" */
+  /** Which edge of the trigger the menu appears on. @default "bottom" */
   side?: "top" | "bottom" | "left" | "right";
-  /** @default "start" */
+  /** Alignment along the side axis. @default "start" */
   align?: "start" | "center" | "end";
-  /** @default 4 */
+  /** Gap between the trigger and the menu popup in pixels. @default 4 */
   sideOffset?: number;
-  /** controlled open state */
+  /** Controlled open state. */
   open?: boolean;
+  /** Called when the menu opens or closes. */
   onOpenChange?: (open: boolean) => void;
   className?: string;
 }
 
-// ─── Arrow SVG ─────────────────────────────────────────────────────────────
-
-function ArrowSvg() {
-  return (
-    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" aria-hidden>
-      <path
-        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
-        className={styles["arrow-fill"]}
-      />
-      <path
-        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
-        className={styles["arrow-stroke"]}
-      />
-      <path
-        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
-        className={styles["arrow-stroke"]}
-      />
-    </svg>
-  );
-}
-
 // ─── Item renderer ──────────────────────────────────────────────────────────
 
 function renderEntry(entry: MenuEntry, index: number): ReactNode {
@@ -88,6 +70,11 @@ function renderEntry(entry: MenuEntry, index: number): ReactNode {
 
 // ─── High-level Menu ────────────────────────────────────────────────────────
 
+/**
+ * A dropdown list of actions with full keyboard navigation. Supports
+ * separators, groups, and keyboard shortcuts. Items can be disabled
+ * individually.
+ */
 export function Menu({ trigger, items, side = "bottom", align = "start", sideOffset = 4, className, onOpenChange, ...props }: MenuProps) {
   return (
     <BaseMenu.Root onOpenChange={onOpenChange as never} {...props}>
@@ -96,7 +83,7 @@ export function Menu({ trigger, items, side = "bottom", align = "start", sideOff
         <BaseMenu.Positioner className={`${styles.positioner} ${className ?? ""}`} side={side} align={align} sideOffset={sideOffset}>
           <BaseMenu.Popup className={styles.popup}>
             <BaseMenu.Arrow className={styles.arrow}>
-              <ArrowSvg />
+              <PopupArrow fillClass={styles["arrow-fill"]!} seamClass={styles["arrow-seam"]!} />
             </BaseMenu.Arrow>
             {items.map((entry, i) => renderEntry(entry, i))}
           </BaseMenu.Popup>

package/src/meter/circular-meter.tsx

@@ -0,0 +1,114 @@
+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 CircularMeterSize = "sm" | "md" | "lg";
+
+export interface CircularMeterProps {
+  /** Current value. Must be between `min` and `max`. */
+  value: number;
+  /** @default 0 */
+  min?: number;
+  /** @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 stroke 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 shown below the value inside the circle. */
+  label?: ReactNode;
+  /** Show the formatted value inside the circle. @default false */
+  showValue?: boolean;
+  /** `Intl.NumberFormatOptions` for value formatting. */
+  format?: Intl.NumberFormatOptions;
+  size?: CircularMeterSize;
+  className?: string;
+}
+
+const SIZES: Record<CircularMeterSize, { diameter: number; strokeWidth: number }> = {
+  sm: { diameter: 56, strokeWidth: 5 },
+  md: { diameter: 80, strokeWidth: 7 },
+  lg: { diameter: 112, strokeWidth: 9 },
+};
+
+export function CircularMeter({
+  value,
+  min = 0,
+  max = 100,
+  low,
+  high,
+  optimum = "high",
+  label,
+  showValue = false,
+  format,
+  size = "md",
+  className = "",
+}: CircularMeterProps) {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const state = getMeterState(clampedValue, min, max, low, high, optimum);
+
+  const { diameter, strokeWidth } = SIZES[size];
+  const radius = (diameter - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - (clampedValue - min) / (max - min));
+  const center = diameter / 2;
+
+  return (
+    <BaseMeter.Root
+      value={clampedValue}
+      min={min}
+      max={max}
+      {...(format !== undefined && { format })}
+      className={`${styles["circular-root"]} ${styles[`circular-${size}`]} ${className}`}
+    >
+      <div style={{ position: "relative", width: diameter, height: diameter }}>
+        <svg
+          width={diameter}
+          height={diameter}
+          viewBox={`0 0 ${diameter} ${diameter}`}
+          className={styles["circular-svg"]}
+          aria-hidden="true"
+        >
+          {/* Background track ring */}
+          <circle cx={center} cy={center} r={radius} strokeWidth={strokeWidth} className={styles["circular-track"]} />
+          {/* Value arc — origin at 12 o'clock */}
+          <circle
+            cx={center}
+            cy={center}
+            r={radius}
+            strokeWidth={strokeWidth}
+            strokeDasharray={circumference}
+            strokeDashoffset={dashOffset}
+            className={styles["circular-indicator"]}
+            data-meter-state={state}
+            style={{ transform: "rotate(-90deg)", transformOrigin: "center" }}
+          />
+        </svg>
+
+        {(showValue || label != null) && (
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {showValue && <BaseMeter.Value className={styles["circular-value"]} />}
+            {label != null && <BaseMeter.Label className={styles["circular-label"]}>{label}</BaseMeter.Label>}
+          </div>
+        )}
+      </div>
+    </BaseMeter.Root>
+  );
+}

package/src/meter/index.ts

@@ -0,0 +1,9 @@
+export { Meter } from "./meter";
+export type { MeterProps, MeterSize } from "./meter";
+export { MeterStyles } from "./meter";
+
+export { CircularMeter } from "./circular-meter";
+export type { CircularMeterProps, CircularMeterSize } from "./circular-meter";
+
+export { MeterTrack, MeterIndicator, MeterLabel, MeterValue } from "./parts";
+export type { MeterTrackProps, MeterIndicatorProps, MeterLabelProps, MeterValueProps } from "./parts";

package/src/meter/meter.module.css

@@ -0,0 +1,162 @@
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1-5);
+    width: 100%;
+  }
+
+  /* ── Label row ──────────────────────────────────────────────────── */
+
+  .label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+  }
+
+  .label {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+  }
+
+  .value {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+  }
+
+  /* ── Track (the outer bar) ──────────────────────────────────────── */
+
+  .track {
+    position: relative;
+    width: 100%;
+    background-color: var(--color-surface-3);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+  }
+
+  .track-sm {
+    height: 4px;
+  }
+  .track-md {
+    height: 6px;
+  }
+  .track-lg {
+    height: 8px;
+  }
+
+  /* ── Indicator (the fill) ───────────────────────────────────────── */
+
+  .indicator {
+    height: 100%;
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    transition: width var(--duration-slower) var(--easing-standard);
+  }
+
+  /* Threshold-based colours — driven by data attributes set in JS */
+  .indicator[data-meter-state="optimum"] {
+    background-color: var(--color-success-solid);
+  }
+  .indicator[data-meter-state="suboptimal"] {
+    background-color: var(--color-warning-solid);
+  }
+  .indicator[data-meter-state="critical"] {
+    background-color: var(--color-error-solid);
+  }
+
+  /* ── Tick marks for low / high thresholds ───────────────────────── */
+
+  .tick {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: var(--color-canvas);
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  /* ── Circular gauge ─────────────────────────────────────────────── */
+
+  .circular-root {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-1-5);
+  }
+
+  .circular-svg {
+    overflow: visible;
+  }
+
+  /* Track ring */
+  .circular-track {
+    fill: none;
+    stroke: var(--color-surface-3);
+  }
+
+  /* Value arc */
+  .circular-indicator {
+    fill: none;
+    stroke: var(--color-accent);
+    stroke-linecap: round;
+    transition: stroke-dashoffset var(--duration-slower) var(--easing-standard);
+  }
+
+  .circular-indicator[data-meter-state="optimum"] {
+    stroke: var(--color-success-solid);
+  }
+  .circular-indicator[data-meter-state="suboptimal"] {
+    stroke: var(--color-warning-solid);
+  }
+  .circular-indicator[data-meter-state="critical"] {
+    stroke: var(--color-error-solid);
+  }
+
+  /* Centre text stack */
+  .circular-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-0-5);
+  }
+
+  .circular-value {
+    font-family: var(--font-mono);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    line-height: 1;
+  }
+
+  .circular-label {
+    font-family: var(--font-mono);
+    color: var(--color-secondary);
+    line-height: 1;
+  }
+
+  /* Size variants */
+  .circular-sm .circular-value {
+    font-size: var(--font-size-sm);
+  }
+  .circular-sm .circular-label {
+    font-size: var(--font-size-xs);
+  }
+  .circular-md .circular-value {
+    font-size: var(--font-size-xl);
+  }
+  .circular-md .circular-label {
+    font-size: var(--font-size-xs);
+  }
+  .circular-lg .circular-value {
+    font-size: var(--font-size-2xl);
+  }
+  .circular-lg .circular-label {
+    font-size: var(--font-size-sm);
+  }
+}