@usefragments/ui 1.3.3 → 1.5.0

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

@@ -3,13 +3,7 @@
   "name": "Progress",
   "description": "Visual indicator of task completion or loading state. Available in linear and circular variants.",
   "category": "feedback",
-  "tags": [
-    "progress",
-    "loading",
-    "indicator",
-    "percentage",
-    "status"
-  ],
+  "tags": ["progress", "loading", "indicator", "percentage", "status"],
   "status": "stable",
   "sourcePath": "src/components/Progress/index.tsx",
   "exportName": "Progress",
@@ -18,7 +12,8 @@
     "min: number (default: 0)",
     "max: number (default: 100)",
     "size: sm|md|lg (default: md)",
-    "variant: default|success|warning|danger (default: default)",
+    "variant: default|neutral|success|warning|danger (default: default)",
+    "role: progressbar|meter (default: progressbar)",
     "label: string",
     "showValue: boolean (default: false)",
     "formatValue: function"
@@ -47,23 +42,14 @@
       "description": "Size of the progress bar",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "variant": {
       "type": "enum",
       "description": "Color variant",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "success",
-        "warning",
-        "danger"
-      ]
+      "values": ["default", "neutral", "success", "warning", "danger"]
     },
     "label": {
       "type": "string",
@@ -99,10 +85,12 @@
       "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"
     ],
     "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"
     ]
@@ -155,17 +143,11 @@
       "showValue: boolean - display percentage",
       "Determinate display values are clamped (and invalid min/max ranges render as 0%)"
     ],
-    "a11yRules": [
-      "A11Y_PROGRESS_ROLE",
-      "A11Y_PROGRESS_VALUE"
-    ]
+    "a11yRules": ["A11Y_PROGRESS_ROLE", "A11Y_PROGRESS_VALUE"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root",
-      "Circular"
-    ]
+    "subComponents": ["Root", "Circular"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Progress/Progress.module.scss

@@ -63,6 +63,10 @@
 }
 
 // Color variants
+.indicatorNeutral {
+  background-color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
 .indicatorSuccess {
   background-color: var(--fui-color-success-text, $fui-color-success-text);
 }
@@ -94,7 +98,7 @@
 }
 
 // Complete state
-.root[data-complete] .indicator {
+.root[data-complete] .indicator:not(.indicatorNeutral) {
   background-color: var(--fui-color-success-text, $fui-color-success-text);
 }
 

package/src/components/Progress/index.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Progress as BaseProgress } from '@base-ui/react/progress';
-import styles from './Progress.module.scss';
+import * as React from "react";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import styles from "./Progress.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
-export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /** Current progress value (0-100). Null for indeterminate. */
   value?: number | null;
   /** Minimum value */
@@ -16,9 +16,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** Maximum value */
   max?: number;
   /** Size of the progress bar */
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   /** Color variant */
-  variant?: 'default' | 'success' | 'warning' | 'danger';
+  variant?: "default" | "neutral" | "success" | "warning" | "danger";
   /** Label text */
   label?: string;
   /** Show percentage value */
@@ -31,9 +31,9 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
   /** Current progress value (0-100). Null for indeterminate. */
   value?: number | null;
   /** Size of the circular progress */
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   /** Color variant */
-  variant?: 'default' | 'success' | 'warning' | 'danger';
+  variant?: "default" | "success" | "warning" | "danger";
   /** Show percentage in center */
   showValue?: boolean;
   /** Stroke width */
@@ -48,52 +48,51 @@ function ProgressRoot({
   value = null,
   min = 0,
   max = 100,
-  size = 'md',
-  variant = 'default',
+  size = "md",
+  variant = "default",
   label,
   showValue = false,
   formatValue,
   className,
-  'aria-label': ariaLabel,
-  'aria-valuetext': ariaValueText,
+  role,
+  "aria-label": ariaLabel,
+  "aria-valuetext": ariaValueText,
   ...htmlProps
 }: ProgressProps) {
   const isIndeterminate = value === null;
   const range = max - min;
-  const normalizedPercentage = isIndeterminate
-    ? 0
-    : range <= 0
-      ? 0
-      : ((value - min) / range) * 100;
+  const normalizedPercentage = isIndeterminate ? 0 : range <= 0 ? 0 : ((value - min) / range) * 100;
   const percentage = isIndeterminate
     ? 0
     : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));
 
   const trackClasses = [
     styles.track,
-    size === 'sm' && styles.trackSm,
-    size === 'md' && styles.trackMd,
-    size === 'lg' && styles.trackLg,
-  ].filter(Boolean).join(' ');
+    size === "sm" && styles.trackSm,
+    size === "md" && styles.trackMd,
+    size === "lg" && styles.trackLg,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   const indicatorClasses = [
     styles.indicator,
-    variant === 'success' && styles.indicatorSuccess,
-    variant === 'warning' && styles.indicatorWarning,
-    variant === 'danger' && styles.indicatorDanger,
+    variant === "neutral" && styles.indicatorNeutral,
+    variant === "success" && styles.indicatorSuccess,
+    variant === "warning" && styles.indicatorWarning,
+    variant === "danger" && styles.indicatorDanger,
     isIndeterminate && styles.indicatorIndeterminate,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(" ");
 
-  const rootClasses = [styles.root, className].filter(Boolean).join(' ');
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
 
-  const displayValue = formatValue
-    ? formatValue(percentage)
-    : `${percentage}%`;
+  const displayValue = formatValue ? formatValue(percentage) : `${percentage}%`;
 
   // Default value text for screen readers
-  const effectiveValueText = ariaValueText || (
-    isIndeterminate ? 'Loading' : `${percentage} percent`
-  );
+  const effectiveValueText =
+    ariaValueText || (isIndeterminate ? "Loading" : `${percentage} percent`);
 
   return (
     <BaseProgress.Root
@@ -102,20 +101,15 @@ function ProgressRoot({
       min={min}
       max={max}
       className={rootClasses}
-      aria-label={ariaLabel || (label ? undefined : 'Progress')}
+      role={role ?? "progressbar"}
+      aria-label={ariaLabel || (label ? undefined : "Progress")}
       aria-valuetext={effectiveValueText}
       aria-busy={isIndeterminate}
     >
       {(label || showValue) && (
         <div className={styles.header}>
-          {label && (
-            <BaseProgress.Label className={styles.label}>
-              {label}
-            </BaseProgress.Label>
-          )}
-          {showValue && !isIndeterminate && (
-            <span className={styles.value}>{displayValue}</span>
-          )}
+          {label && <BaseProgress.Label className={styles.label}>{label}</BaseProgress.Label>}
+          {showValue && !isIndeterminate && <span className={styles.value}>{displayValue}</span>}
         </div>
       )}
       <BaseProgress.Track className={trackClasses}>
@@ -140,14 +134,14 @@ const CIRCLE_SIZES = {
 
 function CircularProgressRoot({
   value = null,
-  size = 'md',
-  variant = 'default',
+  size = "md",
+  variant = "default",
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-valuetext': ariaValueText,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-valuetext": ariaValueText,
   ...htmlProps
 }: CircularProgressProps) {
   const isIndeterminate = value === null;
@@ -160,26 +154,24 @@ function CircularProgressRoot({
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - (percentage / 100) * circumference;
 
-  const sizeClass = size === 'sm' ? styles.circularSm
-    : size === 'lg' ? styles.circularLg
-    : styles.circularMd;
+  const sizeClass =
+    size === "sm" ? styles.circularSm : size === "lg" ? styles.circularLg : styles.circularMd;
 
   const indicatorClasses = [
     styles.circularIndicator,
-    variant === 'success' && styles.circularIndicatorSuccess,
-    variant === 'warning' && styles.circularIndicatorWarning,
-    variant === 'danger' && styles.circularIndicatorDanger,
+    variant === "success" && styles.circularIndicatorSuccess,
+    variant === "warning" && styles.circularIndicatorWarning,
+    variant === "danger" && styles.circularIndicatorDanger,
     isIndeterminate && styles.circularIndicatorIndeterminate,
-  ].filter(Boolean).join(' ');
-
-  const rootClasses = [styles.circular, sizeClass, className]
+  ]
     .filter(Boolean)
-    .join(' ');
+    .join(" ");
+
+  const rootClasses = [styles.circular, sizeClass, className].filter(Boolean).join(" ");
 
   // Default value text for screen readers
-  const effectiveValueText = ariaValueText || (
-    isIndeterminate ? 'Loading' : `${Math.round(percentage)} percent`
-  );
+  const effectiveValueText =
+    ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
 
   return (
     <BaseProgress.Root
@@ -220,11 +212,13 @@ function CircularProgressRoot({
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
           strokeDashoffset={isIndeterminate ? undefined : offset}
-          style={isIndeterminate ? { transformOrigin: 'center' } : undefined}
+          style={isIndeterminate ? { transformOrigin: "center" } : undefined}
         />
       </svg>
       {showValue && !isIndeterminate && (
-        <span className={styles.circularValue} aria-hidden="true">{Math.round(percentage)}%</span>
+        <span className={styles.circularValue} aria-hidden="true">
+          {Math.round(percentage)}%
+        </span>
       )}
     </BaseProgress.Root>
   );

package/src/components/Prompt/Prompt.contract.json

@@ -27,7 +27,10 @@
     "maxRows: number (default: 8)",
     "autoResize: boolean (default: true)",
     "submitOnEnter: boolean (default: true)",
-    "variant: default|fixed|sticky (default: default)"
+    "variant: default|fixed|sticky (default: default)",
+    "appearance: panel|seamless (default: panel)",
+    "onFiles: function",
+    "accept: string"
   ],
   "props": {
     "children": {
@@ -108,6 +111,26 @@
         "fixed",
         "sticky"
       ]
+    },
+    "onFiles": {
+      "type": "function",
+      "description": "Called with files added by the attach button, a paste, or a drop anywhere on the card. Providing it enables all three.",
+      "required": false
+    },
+    "accept": {
+      "type": "string",
+      "description": "accept filter for the attach button's picker, e.g. \"image/*\"",
+      "required": false
+    },
+    "appearance": {
+      "type": "enum",
+      "description": "How the card is divided up. \"panel\" keeps the toolbar as a filled footer under a rule; \"seamless\" makes the whole card one writing surface with the controls floating on it.",
+      "default": "panel",
+      "required": false,
+      "values": [
+        "panel",
+        "seamless"
+      ]
     }
   },
   "usage": {
@@ -126,6 +149,14 @@
       "Use loading state during API calls",
       "Prompt.Textarea forwards native textarea props (autoComplete, inputMode, aria-*, data-*, handlers)",
       "Prompt.Textarea composes your onChange/onKeyDown handlers with built-in submit and auto-resize behavior",
+      "Use appearance=\"seamless\" for agent composers where the controls should float on the writing surface rather than sit in a footer",
+      "Seamless controls share the dense 32px token scale with body-sized labels and standard glyphs so mixed Prompt.Select, Prompt.Attach and Prompt.Submit rows remain optically aligned",
+      "Seamless secondary controls keep transparent hover and open states so they read as inline tools; only Prompt.Submit carries a persistent filled shape",
+      "Seamless Prompt.Submit mirrors the trailing ink gutter established by Prompt.Attach at the leading edge",
+      "Prompt.Submit uses a neutral inverse surface by default so the primary action stays visible without consuming semantic brand color",
+      "Use Prompt.ModeButton for a setting you toggle and Prompt.Select for one you pick from a list",
+      "Wire onFiles once: the attach button, pasting a screenshot and dropping on the card all go through it",
+      "Render Prompt.Attachments above Prompt.Textarea — attachments are part of the message, not a setting on it",
       "Consider showing usage/token limits for AI contexts"
     ],
     "accessibility": [
@@ -150,6 +181,11 @@
       "description": "Shows token usage indicator",
       "code": "<Prompt onSubmit={(value) => console.log(value)}>\n  <Prompt.Textarea />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.ActionButton aria-label=\"Add attachment\">\n        +\n      </Prompt.ActionButton>\n      <Prompt.ModeButton active>Auto</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Usage>52% used</Prompt.Usage>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
     },
+    {
+      "name": "Agent Composer",
+      "description": "Seamless surface with the scope of the run chosen on the toolbar",
+      "code": "<Prompt\n  appearance=\"seamless\"\n  submitOnEnter={false}\n  minRows={3}\n  onSubmit={(value) => console.log(value)}\n>\n  <Prompt.Textarea placeholder=\"What should be true when this is done?\" />\n  <Prompt.Toolbar>\n    <Prompt.Actions>\n      <Prompt.Select\n        aria-label=\"Model\"\n        defaultValue=\"claude-opus-4-8\"\n        options={[{ value: 'claude-opus-4-8', label: 'Opus 4.8' }, { value: 'claude-sonnet-5', label: 'Sonnet 5' }]}\n      />\n      <Prompt.ModeButton>Plan</Prompt.ModeButton>\n    </Prompt.Actions>\n    <Prompt.Info>\n      <Prompt.Submit />\n    </Prompt.Info>\n  </Prompt.Toolbar>\n</Prompt>"
+    },
     {
       "name": "Loading State",
       "description": "During API submission",
@@ -200,6 +236,9 @@
       "Info",
       "ActionButton",
       "ModeButton",
+      "Select",
+      "Attach",
+      "Attachments",
       "Usage",
       "Submit"
     ]