@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Pagination/Pagination.module.scss

@@ -1,5 +1,7 @@
 @use '../../tokens/variables' as *;
 @use '../../tokens/mixins' as *;
+@use '../../recipes/action';
+@use '../../recipes/layout';
 
 // ============================================
 // Navigation wrapper
@@ -18,7 +20,7 @@
 .list {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
+  gap: layout.gap("xs");
   list-style: none;
   margin: 0;
   padding: 0;
@@ -30,17 +32,9 @@
 
 .item {
   @include button-reset;
-  @include text-base;
+  @include action.base;
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--fui-touch-md, $fui-touch-md);
-  height: var(--fui-touch-md, $fui-touch-md);
-  padding: 0 var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-primary, $fui-text-primary);
   cursor: pointer;
   transition:
@@ -58,12 +52,12 @@
 
 // Active page
 .itemActive {
-  background-color: var(--fui-bg-active, $fui-bg-active);
+  background-color: var(--fui-control-selected-bg, $fui-bg-active);
   color: var(--fui-text-primary, $fui-text-primary);
   font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
 
   &:hover:not(:disabled) {
-    background-color: var(--fui-bg-active, $fui-bg-active);
+    background-color: var(--fui-control-selected-bg, $fui-bg-active);
   }
 }
 
@@ -78,35 +72,48 @@
 // Nav buttons (Previous/Next)
 // ============================================
 
-.navButton {
-  svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
-  }
-}
-
 // ============================================
 // Ellipsis
 // ============================================
 
 .ellipsis {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--fui-touch-md, $fui-touch-md);
-  height: var(--fui-touch-md, $fui-touch-md);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include action.base;
+
   color: var(--fui-text-secondary, $fui-text-secondary);
   user-select: none;
 }
 
+.sm :is(.item, .ellipsis) {
+  @include action.icon-only("sm");
+}
+
+.md :is(.item, .ellipsis) {
+  @include action.icon-only("md");
+}
+
+.lg :is(.item, .ellipsis) {
+  @include action.icon-only("lg");
+}
+
+.sm .navButton svg {
+  @include action.glyph("sm");
+}
+
+.md .navButton svg {
+  @include action.glyph("md");
+}
+
+.lg .navButton svg {
+  @include action.glyph("lg");
+}
+
 // ============================================
 // Accessibility: High Contrast Mode
 // ============================================
 
 @media (prefers-contrast: more) {
   .itemActive {
-    outline: 2px solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: -2px;
+    outline: var(--fui-stroke-default, 2px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
   }
 }

package/src/components/Pagination/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useResolvedControlSize } from '../ComponentDefaults';
 import styles from './Pagination.module.scss';
 
 // ============================================
@@ -21,6 +22,8 @@ export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>,
   edgeCount?: number;
   /** Number of pages shown around current: default 1 */
   siblingCount?: number;
+  /** Visible action size. Resolves through ComponentDefaults when omitted. */
+  size?: 'sm' | 'md' | 'lg';
 }
 
 export interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -191,10 +194,12 @@ function PaginationRoot({
   onPageChange,
   edgeCount = 1,
   siblingCount = 1,
+  size: sizeProp,
   className,
   'aria-label': ariaLabel,
   ...htmlProps
 }: PaginationProps) {
+  const size = useResolvedControlSize(sizeProp);
   const totalPages = Math.max(0, Math.floor(rawTotalPages));
   const [uncontrolledPage, setUncontrolledPage] = React.useState(() =>
     totalPages > 0 ? clamp(defaultPage, 1, totalPages) : 1
@@ -228,7 +233,7 @@ function PaginationRoot({
       <nav
         {...htmlProps}
         aria-label={ariaLabel ?? 'Pagination'}
-        className={[styles.pagination, className].filter(Boolean).join(' ')}
+        className={[styles.pagination, styles[size], className].filter(Boolean).join(' ')}
       />
     );
   }
@@ -238,7 +243,7 @@ function PaginationRoot({
       <nav
         {...htmlProps}
         aria-label={ariaLabel ?? 'Pagination'}
-        className={[styles.pagination, className].filter(Boolean).join(' ')}
+        className={[styles.pagination, styles[size], className].filter(Boolean).join(' ')}
       >
         <ul className={styles.list}>
           {children}

package/src/components/Popover/Popover.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Popover",
-  "description": "Rich content overlay anchored to a trigger element. Use for forms, detailed information, or interactive content that should stay in context.",
-  "category": "feedback",
-  "tags": [
-    "popover",
-    "overlay",
-    "dropdown",
-    "floating",
-    "contextual"
-  ],
+  "description": "Anchors interactive content to a trigger without blocking the page.",
+  "category": "overlays",
+  "tags": ["popover", "overlay", "dropdown", "floating", "contextual"],
   "status": "stable",
   "sourcePath": "src/components/Popover/index.tsx",
   "exportName": "Popover",
@@ -51,24 +45,23 @@
   },
   "usage": {
     "when": [
-      "Inline editing forms",
-      "Rich preview content",
-      "Filter panels",
-      "Date/color pickers",
-      "Content that needs more space than a tooltip"
+      "Editing a value in place",
+      "Previews richer than a line of text",
+      "Filter and picker panels",
+      "Content that outgrows a tooltip"
     ],
     "whenNot": [
-      "Simple hints (use Tooltip)",
-      "Action lists (use Menu)",
-      "Blocking user interaction (use Dialog)",
-      "System notifications (use Toast or Alert)"
+      "A short hint (use Tooltip)",
+      "A list of actions (use Menu)",
+      "Anything that must block the page (use Dialog)",
+      "Feedback the user does not act on (use Toast or Alert)"
     ],
     "guidelines": [
-      "Keep popover content focused and minimal",
-      "Include a clear way to close (X button or action buttons)",
-      "Position to avoid covering important content",
-      "Use arrow to visually connect popover to trigger",
-      "Popover.Trigger and Popover.Close support asChild for links/router-link components (single valid element child required)"
+      "One job per panel",
+      "Always give the user a visible way out",
+      "Pick a side that does not cover what the user just clicked",
+      "Add the arrow when the trigger is not obvious",
+      "asChild on Trigger and Close needs a single element child"
     ],
     "accessibility": [
       "Focus is moved to popover content on open",
@@ -79,27 +72,27 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Basic popover with content",
+      "description": "Title, body, and a close control.",
       "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Open Popover</Button>\n  </Popover.Trigger>\n  <Popover.Content>\n    <Popover.Close />\n    <Popover.Title>Popover Title</Popover.Title>\n    <Popover.Description>\n      This is a popover with some content. It can contain text, forms, or other elements.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"
     },
     {
       "name": "With Form",
-      "description": "Popover containing a form",
+      "description": "Enough room to edit a value in place.",
       "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Edit Name</Button>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Close />\n    <Popover.Title>Edit Name</Popover.Title>\n    <Popover.Body>\n      <Input label=\"Display Name\" placeholder=\"Enter name\" />\n    </Popover.Body>\n    <Popover.Footer>\n      <Popover.Close asChild>\n        <Button variant=\"secondary\" size=\"sm\">Cancel</Button>\n      </Popover.Close>\n      <Button variant=\"primary\" size=\"sm\">Save</Button>\n    </Popover.Footer>\n  </Popover.Content>\n</Popover>"
     },
     {
       "name": "With Arrow",
-      "description": "Popover with pointing arrow",
+      "description": "The arrow ties the panel back to its trigger.",
       "code": "<Popover>\n  <Popover.Trigger asChild>\n    <Button variant=\"secondary\">Info</Button>\n  </Popover.Trigger>\n  <Popover.Content arrow>\n    <Popover.Title>Quick Tip</Popover.Title>\n    <Popover.Description>\n      This popover has an arrow pointing to its trigger element.\n    </Popover.Description>\n  </Popover.Content>\n</Popover>"
     },
     {
       "name": "Positions",
-      "description": "Popover on different sides",
+      "description": "Flips to the opposite side when space runs out.",
       "code": "<div style={{ display: 'flex', gap: '16px', padding: '60px' }}>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"secondary\">Top</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"top\" size=\"sm\">\n      <Popover.Description>Popover on top</Popover.Description>\n    </Popover.Content>\n  </Popover>\n  <Popover>\n    <Popover.Trigger asChild>\n      <Button variant=\"secondary\">Bottom</Button>\n    </Popover.Trigger>\n    <Popover.Content side=\"bottom\" size=\"sm\">\n      <Popover.Description>Popover on bottom</Popover.Description>\n    </Popover.Content>\n  </Popover>\n</div>"
     },
     {
       "name": "Link Trigger",
-      "description": "Use asChild with a non-button trigger element",
+      "description": "asChild lets a link open it.",
       "code": "<Popover>\n  <Popover.Trigger asChild>\n    <a href=\"#popover-help\">Open help</a>\n  </Popover.Trigger>\n  <Popover.Content size=\"sm\">\n    <Popover.Description>Popover trigger can be an anchor when using asChild.</Popover.Description>\n  </Popover.Content>\n</Popover>"
     }
   ],
@@ -128,27 +121,12 @@
       "Popover.Trigger / Popover.Close asChild support non-button children",
       "Popover.Content side: top|bottom|left|right - position"
     ],
-    "a11yRules": [
-      "A11Y_POPOVER_FOCUS",
-      "A11Y_POPOVER_ESCAPE",
-      "A11Y_TARGET_SIZE_MIN"
-    ]
+    "a11yRules": ["A11Y_POPOVER_FOCUS", "A11Y_POPOVER_ESCAPE", "A11Y_TARGET_SIZE_MIN"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Trigger",
-      "Content",
-      "Close",
-      "Title",
-      "Description",
-      "Body",
-      "Footer"
-    ],
-    "requiredChildren": [
-      "Trigger",
-      "Content"
-    ],
+    "subComponents": ["Trigger", "Content", "Close", "Title", "Description", "Body", "Footer"],
+    "requiredChildren": ["Trigger", "Content"],
     "commonPatterns": [
       "<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content><Popover.Close /><Popover.Title>{title}</Popover.Title><Popover.Description>{description}</Popover.Description></Popover.Content></Popover>",
       "<Popover><Popover.Trigger asChild><a href=\"#help\">Open help</a></Popover.Trigger><Popover.Content>...</Popover.Content></Popover>"

package/src/components/Popover/Popover.module.scss

@@ -1,28 +1,19 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/overlay" as overlay;
 
-// Local component tokens
-$fui-arrow-size: 10px !default;
-
-// Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, 52);
   outline: none;
 }
 
-// Popup container
 .popup {
-  @include surface-elevated;
-  @include text-base;
-
-  min-width: 12rem;
-  max-width: 24rem;
-  padding: var(--fui-space-2, $fui-space-2);
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+  @include overlay.anchored-surface("md");
 
-  // Animation
+  position: relative;
   opacity: 0;
-  transform: scale(0.95) translateY(-$fui-anim-offset-sm);
+  transform: scale(0.95) translateY(calc(-1 * var(--fui-anim-offset-sm, #{$fui-anim-offset-sm})));
   transform-origin: var(--transform-origin);
   transition:
     opacity var(--fui-transition-fast, $fui-transition-fast),
@@ -35,22 +26,22 @@ $fui-arrow-size: 10px !default;
 
   &[data-starting-style] {
     opacity: 0;
-    transform: scale(0.95) translateY(-$fui-anim-offset-sm);
+    transform: scale(0.95) translateY(calc(-1 * var(--fui-anim-offset-sm, #{$fui-anim-offset-sm})));
   }
 
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0.95) translateY($fui-anim-offset-sm);
+    transform: scale(0.95) translateY(var(--fui-anim-offset-sm, #{$fui-anim-offset-sm}));
   }
 
-  // Adjust animation direction based on side
   &[data-side="top"] {
     &[data-starting-style] {
-      transform: scale(0.95) translateY($fui-anim-offset-sm);
+      transform: scale(0.95) translateY(var(--fui-anim-offset-sm, #{$fui-anim-offset-sm}));
     }
 
     &[data-ending-style] {
-      transform: scale(0.95) translateY(-$fui-anim-offset-sm);
+      transform: scale(0.95)
+        translateY(calc(-1 * var(--fui-anim-offset-sm, #{$fui-anim-offset-sm})));
     }
   }
 
@@ -63,49 +54,33 @@ $fui-arrow-size: 10px !default;
   }
 }
 
-// Size variants
 .sm {
-  padding: var(--fui-space-3, $fui-space-3);
-  max-width: 16rem;
-}
-
-.md {
-  // Default styles
+  @include overlay.anchored-size("sm");
 }
 
 .lg {
-  padding: var(--fui-space-6, $fui-space-6);
-  max-width: 32rem;
+  @include overlay.anchored-size("lg");
 }
 
-// Title
 .title {
-  margin: 0 0 var(--fui-space-1, $fui-space-1);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+  @include overlay.anchored-title;
+
+  margin: 0 0 var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
 }
 
-// Description
 .description {
+  @include overlay.description;
+
   margin: 0;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
-// Close button
 .close {
   @include button-reset;
   @include interactive-base;
-  @include touch-target;
+  @include overlay.close;
 
-  position: absolute;
-  top: var(--fui-space-2, $fui-space-2);
-  right: var(--fui-space-2, $fui-space-2);
-  width: 1.5rem;
-  height: 1.5rem;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
 
@@ -115,18 +90,22 @@ $fui-arrow-size: 10px !default;
   }
 
   svg {
-    width: 0.875rem;
-    height: 0.875rem;
+    inline-size: action.icon-size("sm");
+    block-size: action.icon-size("sm");
   }
 }
 
-// Arrow
+.popup:has(.close) .title {
+  padding-inline-end: calc(
+    #{action.track("sm")} + var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+  );
+}
+
 .arrow {
-  width: $fui-arrow-size;
-  height: $fui-arrow-size;
-  transform: rotate(45deg);
+  @include overlay.arrow-box;
+
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 
   &[data-side="top"] {
     border-top: none;
@@ -134,56 +113,42 @@ $fui-arrow-size: 10px !default;
   }
 
   &[data-side="bottom"] {
-    border-bottom: none;
     border-right: none;
+    border-bottom: none;
   }
 
   &[data-side="left"] {
-    border-left: none;
     border-bottom: none;
+    border-left: none;
   }
 
   &[data-side="right"] {
-    border-right: none;
     border-top: none;
+    border-right: none;
   }
 }
 
-// Body content area
 .body {
-  margin-top: var(--fui-space-3, $fui-space-3);
+  margin-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
 }
 
-// Footer for actions
 .footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--fui-space-2, $fui-space-2);
-  margin-top: var(--fui-space-4, $fui-space-4);
-  padding-top: var(--fui-space-3, $fui-space-3);
-  border-top: 1px solid var(--fui-border, $fui-border);
+  gap: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
+  margin-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
+  padding-block-start: var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px));
+  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
-  .popup {
+  .popup,
+  .popup[data-starting-style],
+  .popup[data-ending-style],
+  .popup[data-side="top"][data-starting-style],
+  .popup[data-side="top"][data-ending-style] {
     transition: none;
     transform: none;
-
-    &[data-starting-style],
-    &[data-ending-style] {
-      transform: none;
-    }
-
-    &[data-side="top"] {
-      &[data-starting-style],
-      &[data-ending-style] {
-        transform: none;
-      }
-    }
   }
 }

package/src/components/Progress/Progress.contract.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Progress",
-  "description": "Visual indicator of task completion or loading state. Available in linear and circular variants.",
+  "description": "Shows how far along a task is, as a bar or a ring.",
   "category": "feedback",
   "tags": ["progress", "loading", "indicator", "percentage", "status"],
   "status": "stable",
@@ -70,56 +70,60 @@
   },
   "usage": {
     "when": [
-      "Showing upload/download progress",
-      "Displaying task completion percentage",
-      "Form completion indicators",
-      "Loading states with known duration"
+      "Upload and download progress",
+      "Percentage of a task finished",
+      "How much of a form is filled in",
+      "Waits where you know the duration"
     ],
     "whenNot": [
-      "Unknown loading duration (use Spinner)",
-      "Step-based progress (use Stepper)",
-      "Status without percentage (use Badge)"
+      "You cannot say how long — use Loading",
+      "Discrete steps — use a stepper",
+      "Status with no number — use Badge"
     ],
     "guidelines": [
-      "Use determinate progress when you know the completion percentage",
-      "Use indeterminate for unknown durations",
-      "Include a label for context when the purpose isnt obvious",
-      "Use appropriate color variants for success/warning/danger states",
-      "Use variant=\"neutral\" with role=\"meter\" for magnitude or distribution values where reaching the maximum is not a success state",
-      "Determinate values are clamped to the min/max range for display"
+      "Pass a value when you know the percentage; pass null when you do not",
+      "Add a label whenever the bar alone leaves the purpose unclear",
+      "success, warning, and danger carry state, not decoration",
+      "variant=\"neutral\" with role=\"meter\" for a magnitude where full is not success",
+      "Values outside min and max are clamped before display"
     ],
     "accessibility": [
-      "Uses role=\"progressbar\" with aria-valuenow",
-      "Accepts role=\"meter\" for scalar measurements within a known range",
-      "Label is associated with the progress bar",
-      "State changes are announced to screen readers"
+      "Reports role=\"progressbar\" with aria-valuenow",
+      "role=\"meter\" is accepted for scalar readings inside a known range",
+      "The label is tied to the bar",
+      "Value changes are announced as they happen"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic progress bar with percentage",
-      "code": "<Progress value={60} label=\"Uploading...\" showValue />"
+      "description": "Determinate bar with its percentage spelled out.",
+      "code": "<Progress value={60} label=\"Uploading…\" showValue />"
     },
     {
       "name": "Variants",
-      "description": "Different color variants for different states",
-      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <Progress value={75} variant=\"default\" label=\"Processing\" showValue />\n  <Progress value={100} variant=\"success\" label=\"Complete\" showValue />\n  <Progress value={80} variant=\"warning\" label=\"Almost full\" showValue />\n  <Progress value={95} variant=\"danger\" label=\"Storage critical\" showValue />\n</div>"
+      "description": "Colour carries state: normal, done, tight, critical.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <Progress value={75} variant=\"default\" label=\"Processing\" showValue />\n  <Progress value={100} variant=\"success\" label=\"Complete\" showValue />\n  <Progress value={80} variant=\"warning\" label=\"Almost full\" showValue />\n  <Progress value={95} variant=\"danger\" label=\"Storage critical\" showValue />\n</Stack>"
+    },
+    {
+      "name": "Meter",
+      "description": "A reading where hitting the top is not a win.",
+      "code": "<Progress\n  value={42}\n  variant=\"neutral\"\n  role=\"meter\"\n  label=\"Seats used\"\n  showValue\n/>"
     },
     {
       "name": "Sizes",
-      "description": "Different progress bar sizes",
-      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <Progress value={50} size=\"sm\" label=\"Small\" />\n  <Progress value={50} size=\"md\" label=\"Medium\" />\n  <Progress value={50} size=\"lg\" label=\"Large\" />\n</div>"
+      "description": "Thin for table rows, thick when the bar is the point.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\">\n  <Progress value={50} size=\"sm\" label=\"Small\" />\n  <Progress value={50} size=\"md\" label=\"Medium\" />\n  <Progress value={50} size=\"lg\" label=\"Large\" />\n</Stack>"
     },
     {
       "name": "Indeterminate",
-      "description": "Loading state with unknown duration",
-      "code": "<Progress value={null} label=\"Loading...\" />"
+      "description": "value={null} sweeps instead of filling.",
+      "code": "<Progress value={null} label=\"Loading…\" />"
     },
     {
       "name": "Circular",
-      "description": "Circular progress indicator",
-      "code": "<div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>\n  <CircularProgress value={25} size=\"sm\" />\n  <CircularProgress value={50} size=\"md\" showValue />\n  <CircularProgress value={75} size=\"lg\" showValue variant=\"success\" />\n  <CircularProgress value={null} size=\"md\" />\n</div>"
+      "description": "Same value in a ring, for tiles and compact chrome.",
+      "code": "import { CircularProgress } from '@/components/Progress';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"lg\" align=\"center\">\n  <CircularProgress value={25} size=\"sm\" />\n  <CircularProgress value={50} size=\"md\" showValue />\n  <CircularProgress value={75} size=\"lg\" showValue variant=\"success\" />\n  <CircularProgress value={null} size=\"md\" />\n</Stack>"
     }
   ],
   "relations": [