@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Prompt/Prompt.module.scss

@@ -1,5 +1,9 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/target" as target;
+@use "../../recipes/typography" as typography;
 
 // ============================================
 // Prompt Root
@@ -16,7 +20,7 @@
   // Beam border — rotating conic gradient clipped to a 1px border
   &::before,
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
@@ -25,7 +29,7 @@
 
   // Gradient layer (behind everything)
   &::before {
-    inset: -1px;
+    inset: calc(-1 * var(--fui-stroke-hairline, 1px));
     z-index: 0;
     background: conic-gradient(
       from var(--beam-angle, 0deg) at 50% 50%,
@@ -38,14 +42,16 @@
       transparent 75%,
       transparent 100%
     );
-    animation: beam-rotate 4s linear infinite;
+    // Ambient loop: twice the shimmer beat, kept on the token scale.
+    animation: beam-rotate calc(var(--fui-duration-shimmer, #{$fui-duration-shimmer}) * 2) linear
+      infinite;
     opacity: 0.6;
     transition: opacity var(--fui-transition-normal, $fui-transition-normal);
   }
 
   // Mask layer — covers the interior, leaving only the 1px border visible
   &::after {
-    inset: 1px;
+    inset: var(--fui-stroke-hairline, 1px);
     z-index: 1;
     background: var(--fui-bg-elevated, $fui-bg-elevated);
   }
@@ -72,12 +78,16 @@
 }
 
 @keyframes beam-rotate {
-  from { --beam-angle: 0deg; }
-  to { --beam-angle: 360deg; }
+  from {
+    --beam-angle: 0deg;
+  }
+  to {
+    --beam-angle: 360deg;
+  }
 }
 
 @property --beam-angle {
-  syntax: '<angle>';
+  syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
 }
@@ -89,7 +99,7 @@
   left: 50%;
   transform: translateX(-50%);
   width: calc(100% - var(--fui-space-8, $fui-space-8));
-  max-width: 800px;
+  max-width: layout.measure("page-narrow");
   z-index: 100;
   box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 }
@@ -104,7 +114,7 @@
   margin-left: auto;
   margin-right: auto;
   width: calc(100% - var(--fui-prompt-inset-left, 0px) - var(--fui-space-8, $fui-space-8));
-  max-width: 800px;
+  max-width: layout.measure("page-narrow");
   z-index: 100;
   box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 
@@ -140,15 +150,6 @@
   --_control-padding: var(--fui-space-2, #{$fui-space-2});
   --_chip-padding: var(--fui-space-1, #{$fui-space-1});
 
-  // Composer controls are compact, but still need enough visual weight to read
-  // as one deliberate toolbar. The xs button token is the dense 32px control
-  // height in every density preset; scoping all three inputs to it keeps
-  // selects, attach, action and submit controls on one optical grid without a
-  // one-off dimension.
-  --fui-target-size-min: var(--fui-button-height-xs, #{$fui-button-height-xs});
-  --fui-button-height-sm: var(--fui-button-height-xs, #{$fui-button-height-xs});
-  --fui-input-height-sm: var(--fui-button-height-xs, #{$fui-button-height-xs});
-
   border-color: transparent;
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
 
@@ -284,19 +285,6 @@
     }
   }
 
-  // Round affordances track the scoped target size rather than the 2rem they
-  // are given for a form.
-  .submit,
-  .actionButton {
-    width: var(--fui-target-size-min);
-    height: var(--fui-target-size-min);
-
-    svg {
-      width: var(--fui-icon-md, $fui-icon-md);
-      height: var(--fui-icon-md, $fui-icon-md);
-    }
-  }
-
   // Attach's glyph reaches the leading ink gutter through its own control
   // padding. Give the filled Submit shape the same inset at the trailing edge
   // so the two visible affordances balance across the toolbar.
@@ -311,8 +299,10 @@
 
 .textarea {
   @include button-reset;
-  @include text-base;
+  @include typography.role("body-compact");
 
+  // button-reset marks pressables select-none; typed text must stay selectable.
+  user-select: text;
   display: block;
   width: 100%;
   min-height: var(--fui-input-height, $fui-input-height);
@@ -321,7 +311,6 @@
   border: none;
   resize: none;
   overflow-y: auto;
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -357,20 +346,16 @@
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
   border-radius: var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg) 0 0;
   padding: var(--fui-space-0-75, $fui-space-0-75) var(--fui-space-0-75, $fui-space-0-75) 0;
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   border-bottom: none;
 }
 
 .tabButton {
   @include button-reset;
+  @include action.base;
+  @include action.size("sm");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0 0;
-  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-tertiary, $fui-text-tertiary);
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
@@ -380,10 +365,14 @@
   &:hover {
     color: var(--fui-text-primary, $fui-text-primary);
   }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
 }
 
 .tabButtonActive {
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  background-color: var(--fui-control-selected-bg, $fui-bg-active);
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
@@ -398,7 +387,7 @@
   gap: var(--fui-space-2, $fui-space-2);
   padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border-top: 1px solid var(--fui-border, $fui-border);
+  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 }
 
 // ============================================
@@ -426,16 +415,12 @@
 .actionButton {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("md");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   color: var(--fui-text-primary, $fui-text-primary);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -446,8 +431,7 @@
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    @include action.glyph("md");
   }
 }
 
@@ -458,16 +442,13 @@
 .modeButton {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.size("sm");
+  @include target.hit-area("compact");
 
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -481,7 +462,7 @@
 
 .modeButtonActive {
   color: var(--fui-text-primary, $fui-text-primary);
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+  background-color: var(--fui-control-selected-bg, $fui-bg-active);
 }
 
 // ============================================
@@ -495,15 +476,11 @@
 .attach {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("sm");
+  @include target.hit-area("compact");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  // The target size rather than a spacing step, so it tracks whatever scale
-  // the surface around it has established.
-  width: var(--fui-target-size-min, $fui-target-size-min);
-  height: var(--fui-target-size-min, $fui-target-size-min);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
@@ -523,8 +500,7 @@
   }
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("sm");
   }
 }
 
@@ -547,19 +523,19 @@
 // Sized off the same target as everything else in the bar, so a chip and a
 // control are the same height and the card has one horizontal rhythm.
 .attachment {
-  --_chip-height: var(--fui-target-size-min, #{$fui-target-size-min});
+  --_chip-height: #{action.track("sm")};
 
   display: inline-flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
   height: var(--_chip-height);
-  max-width: 15rem;
+  max-width: layout.measure("composer-item");
   padding-inline: var(--fui-space-1, $fui-space-1);
   // Outlined rather than filled. A chip sits on whatever surface the prompt is
   // using, and on an elevated card the raised fill is the same value as the
   // card itself — so the object would disappear exactly where it is most
   // likely to be used. An edge reads on any of them.
-  border: 1px solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
@@ -597,13 +573,11 @@
 .attachmentRemove {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("micro");
+  @include target.hit-area("compact");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  width: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
-  height: calc(var(--_chip-height) - var(--fui-space-1, #{$fui-space-1}));
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   background-color: transparent;
   color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -614,8 +588,7 @@
   }
 
   svg {
-    width: var(--fui-icon-xs, $fui-icon-xs);
-    height: var(--fui-icon-xs, $fui-icon-xs);
+    @include action.glyph("micro");
   }
 }
 
@@ -634,7 +607,7 @@
 // must not push the submit button off the row. Select's ghost trigger already
 // allows shrinking and ellipsises its value; this only caps how far it grows.
 .select {
-  max-width: 15rem;
+  max-width: layout.measure("composer-item");
 }
 
 // ============================================
@@ -642,7 +615,9 @@
 // ============================================
 
 .usage {
-  @include helper-text;
+  @include typography.role("caption");
+
+  color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
 }
 
@@ -653,12 +628,9 @@
 .submit {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("md");
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   // A neutral inverse keeps send visibly primary without spending the product
   // accent, which may already encode agent state.
@@ -679,8 +651,7 @@
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    @include action.glyph("md");
   }
 }
 

package/src/components/Prompt/index.tsx

@@ -437,9 +437,6 @@ function PromptTextarea({
     onFiles,
   } = usePromptContext();
 
-  const lineHeight = 1.5;
-  const padding = 12; // top + bottom padding in pixels
-
   const adjustHeight = React.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea || !autoResize) return;
@@ -450,8 +447,12 @@ function PromptTextarea({
     // Calculate min and max heights based on rows
     const computedStyle = window.getComputedStyle(textarea);
     const fontSize = parseFloat(computedStyle.fontSize);
-    const minHeight = minRows * fontSize * lineHeight + padding;
-    const maxHeight = maxRows * fontSize * lineHeight + padding;
+    const computedLineHeight = parseFloat(computedStyle.lineHeight);
+    const lineHeight = Number.isFinite(computedLineHeight) ? computedLineHeight : fontSize * 1.5;
+    const paddingBlock =
+      parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
+    const minHeight = minRows * lineHeight + paddingBlock;
+    const maxHeight = maxRows * lineHeight + paddingBlock;
 
     // Set the height, clamped to min/max
     const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);

package/src/components/RadioGroup/RadioGroup.contract.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "RadioGroup",
-  "description": "Single selection from a list of mutually exclusive options",
-  "category": "forms",
+  "description": "Selects one option from a mutually exclusive set.",
+  "category": "inputs",
   "tags": ["form", "radio", "selection", "options"],
   "status": "stable",
   "sourcePath": "src/components/RadioGroup/index.tsx",
@@ -115,63 +115,62 @@
   },
   "usage": {
     "when": [
-      "User must select exactly one option from a small set",
-      "Options are mutually exclusive",
-      "All options should be visible at once",
-      "2-5 options available"
+      "Exactly one answer out of two to five",
+      "Options rule each other out",
+      "Every option should be visible without opening anything"
     ],
     "whenNot": [
-      "Multiple selections allowed (use Checkbox group)",
-      "Many options (use Select)",
-      "Binary on/off choice (use Switch)",
-      "Options need to be searchable (use Combobox)"
+      "Several answers allowed (use a Checkbox group)",
+      "Long lists (use Select)",
+      "A single on/off (use Switch)",
+      "Options need searching (use Combobox)"
     ],
     "guidelines": [
-      "Always have one option pre-selected when possible",
-      "Order options logically (alphabetical, frequency, etc.)",
-      "Keep option labels concise",
-      "Use helperText on RadioGroup.Item for complex options"
+      "Pre-select a sensible default whenever one exists",
+      "Order options predictably: alphabetical, by frequency, or by cost",
+      "Keep labels short",
+      "Put the trade-off in each item's helperText"
     ],
     "accessibility": [
-      "Group must have an accessible label",
-      "Use arrow keys to navigate between options",
-      "Selected option should be clearly indicated"
+      "The group carries its own label",
+      "Arrow keys move between options",
+      "The selected option reads as checked"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic radio group with labels",
+      "description": "Three options stacked, the first already chosen.",
       "code": "<RadioGroup defaultValue=\"option1\" label=\"Select an option\">\n  <RadioGroup.Item value=\"option1\" label=\"Option 1\" />\n  <RadioGroup.Item value=\"option2\" label=\"Option 2\" />\n  <RadioGroup.Item value=\"option3\" label=\"Option 3\" />\n</RadioGroup>"
     },
     {
       "name": "With Helper Text",
-      "description": "Radio items with additional context",
+      "description": "Each option carries the trade-off under its label.",
       "code": "<RadioGroup defaultValue=\"standard\" label=\"Shipping Method\">\n  <RadioGroup.Item\n    value=\"standard\"\n    label=\"Standard\"\n    helperText=\"5-7 business days\"\n  />\n  <RadioGroup.Item\n    value=\"express\"\n    label=\"Express\"\n    helperText=\"2-3 business days\"\n  />\n  <RadioGroup.Item\n    value=\"overnight\"\n    label=\"Overnight\"\n    helperText=\"Next business day\"\n  />\n</RadioGroup>"
     },
     {
       "name": "Horizontal",
-      "description": "Side-by-side layout",
+      "description": "One row — good for short labels like sizes.",
       "code": "<RadioGroup orientation=\"horizontal\" defaultValue=\"small\" label=\"Size\">\n  <RadioGroup.Item value=\"small\" label=\"S\" />\n  <RadioGroup.Item value=\"medium\" label=\"M\" />\n  <RadioGroup.Item value=\"large\" label=\"L\" />\n  <RadioGroup.Item value=\"xlarge\" label=\"XL\" />\n</RadioGroup>"
     },
     {
       "name": "With Group Helper Text",
-      "description": "Group-level helper text",
+      "description": "One note under the whole group instead of per option.",
       "code": "<RadioGroup defaultValue=\"standard\" label=\"Plan\" helperText=\"You can change your plan at any time\">\n  <RadioGroup.Item value=\"free\" label=\"Free\" />\n  <RadioGroup.Item value=\"standard\" label=\"Standard\" />\n  <RadioGroup.Item value=\"pro\" label=\"Pro\" />\n</RadioGroup>"
     },
     {
       "name": "With Error",
-      "description": "Validation error state (string shows error message)",
+      "description": "Passing a string to error tints the group and prints the reason.",
       "code": "<RadioGroup label=\"Required selection\" error=\"Please select an option\">\n  <RadioGroup.Item value=\"a\" label=\"Option A\" />\n  <RadioGroup.Item value=\"b\" label=\"Option B\" />\n</RadioGroup>"
     },
     {
       "name": "Disabled",
-      "description": "Non-interactive state",
+      "description": "The choice stays visible but nothing can change it.",
       "code": "<RadioGroup disabled defaultValue=\"locked\" label=\"Locked selection\">\n  <RadioGroup.Item value=\"locked\" label=\"This is locked\" />\n  <RadioGroup.Item value=\"other\" label=\"Cannot select\" />\n</RadioGroup>"
     },
     {
       "name": "Styling Targets",
-      "description": "Use explicit class names for wrapper/group/item styling hooks",
+      "description": "Named class hooks for the wrapper, the group, and each item.",
       "code": "<RadioGroup\n  defaultValue=\"a\"\n  label=\"Display mode\"\n  wrapperClassName=\"demo-radio-wrapper\"\n  groupClassName=\"demo-radio-group\"\n>\n  <RadioGroup.Item value=\"a\" label=\"Compact\" controlClassName=\"demo-radio-control\" contentClassName=\"demo-radio-content\" />\n  <RadioGroup.Item value=\"b\" label=\"Comfortable\" />\n</RadioGroup>"
     }
   ],