@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Toast/Toast.module.scss

@@ -1,19 +1,25 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// ============================================
-// Toast Container
-// ============================================
+@use "../../recipes/feedback" as feedback;
 
 .container {
   position: fixed;
-  // Sits above all overlays (Dialog/Drawer 50-51, Menu/Popover 52, Tooltip 60).
-  z-index: 70;
+  z-index: var(--fui-feedback-toast-layer, 70);
   display: flex;
   flex-direction: column;
-  gap: var(--fui-space-2, $fui-space-2);
-  max-width: 420px;
-  width: calc(100% - var(--fui-space-4, $fui-space-4) * 2);
+  gap: var(--fui-feedback-stack-gap, var(--fui-raw-space-8, 8px));
+  inline-size: min(
+    var(--fui-feedback-toast-max-inline, 400px),
+    calc(
+      100% - var(
+          --fui-feedback-viewport-inset-left,
+          max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+        ) - var(
+          --fui-feedback-viewport-inset-right,
+          max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+        )
+    )
+  );
   pointer-events: none;
 
   > * {
@@ -21,65 +27,40 @@
   }
 }
 
-// Position variants
 .topleft {
-  top: var(--fui-space-4, $fui-space-4);
-  left: var(--fui-space-4, $fui-space-4);
+  @include feedback.viewport-stack("top-left");
 }
 
 .topcenter {
-  top: var(--fui-space-4, $fui-space-4);
-  left: 50%;
-  transform: translateX(-50%);
+  @include feedback.viewport-stack("top-center");
 }
 
 .topright {
-  top: var(--fui-space-4, $fui-space-4);
-  right: var(--fui-space-4, $fui-space-4);
+  @include feedback.viewport-stack("top-right");
 }
 
 .bottomleft {
-  bottom: var(--fui-space-4, $fui-space-4);
-  left: var(--fui-space-4, $fui-space-4);
-  flex-direction: column-reverse;
+  @include feedback.viewport-stack("bottom-left");
 }
 
 .bottomcenter {
-  bottom: var(--fui-space-4, $fui-space-4);
-  left: 50%;
-  transform: translateX(-50%);
-  flex-direction: column-reverse;
+  @include feedback.viewport-stack("bottom-center");
 }
 
 .bottomright {
-  bottom: var(--fui-space-4, $fui-space-4);
-  right: var(--fui-space-4, $fui-space-4);
-  flex-direction: column-reverse;
+  @include feedback.viewport-stack("bottom-right");
 }
 
-// ============================================
-// Toast Item
-// ============================================
-
 .toast {
-  display: flex;
-  // Single-line toasts (title only) read best vertically centered; toasts
-  // with a description are multi-line and top-align — see `:has(.description)`.
-  align-items: center;
-  gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  @include feedback.transient;
+
   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);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
-  font-family: var(--fui-font-sans, $fui-font-sans);
-
-  // Animation
   animation: toastEnter var(--fui-transition-normal, $fui-transition-normal);
 }
 
-// With a description the toast is multi-line: top-align icon/close to the
-// first line rather than the block centre.
 .toast:has(.description) {
   align-items: flex-start;
 }
@@ -87,37 +68,25 @@
 @keyframes toastEnter {
   from {
     opacity: 0;
-    transform: translateY($fui-anim-offset-md) scale(0.96);
+    transform: translateY(var(--fui-anim-offset-md, #{$fui-anim-offset-md})) scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }
 
-// ============================================
-// Variant Styles
-// ============================================
-
-.default {
-  .icon {
-    color: var(--fui-text-secondary, $fui-text-secondary);
-  }
+.default .icon {
+  color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
 .success {
   background: var(--fui-color-success-bg, $fui-color-success-bg);
   border-color: var(--fui-color-success-border, $fui-color-success-border);
 
-  .title {
-    color: var(--fui-color-success-text, $fui-color-success-text);
-  }
-
-  .description {
-    color: var(--fui-color-success-text, $fui-color-success-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-success-text, $fui-color-success-text);
   }
@@ -127,15 +96,8 @@
   background: var(--fui-color-danger-bg, $fui-color-danger-bg);
   border-color: var(--fui-color-danger-border, $fui-color-danger-border);
 
-  .title {
-    color: var(--fui-color-danger-text, $fui-color-danger-text);
-  }
-
-  .description {
-    color: var(--fui-color-danger-text, $fui-color-danger-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-danger-text, $fui-color-danger-text);
   }
@@ -145,15 +107,8 @@
   background: var(--fui-color-warning-bg, $fui-color-warning-bg);
   border-color: var(--fui-color-warning-border, $fui-color-warning-border);
 
-  .title {
-    color: var(--fui-color-warning-text, $fui-color-warning-text);
-  }
-
-  .description {
-    color: var(--fui-color-warning-text, $fui-color-warning-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-warning-text, $fui-color-warning-text);
   }
@@ -163,78 +118,59 @@
   background: var(--fui-color-info-bg, $fui-color-info-bg);
   border-color: var(--fui-color-info-border, $fui-color-info-border);
 
-  .title {
-    color: var(--fui-color-info-text, $fui-color-info-text);
-  }
-
-  .description {
-    color: var(--fui-color-info-text, $fui-color-info-text);
-    opacity: 0.8;
-  }
-
+  .title,
+  .description,
   .icon {
     color: var(--fui-color-info-text, $fui-color-info-text);
   }
 }
 
-// ============================================
-// Toast Parts
-// ============================================
+.success .description,
+.error .description,
+.warning .description,
+.info .description {
+  opacity: 0.8;
+}
 
 .icon {
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
+  @include feedback.icon;
 
   svg {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
   }
 }
 
-// Nudge the icon to meet the first line only in multi-line toasts; centered
-// single-line toasts need no offset.
 .toast:has(.description) .icon {
-  margin-top: 1px;
+  margin-block-start: var(--fui-stroke-hairline, 1px);
 }
 
 .content {
+  display: grid;
   flex: 1;
-  min-width: 0;
+  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
+  min-inline-size: 0;
 }
 
 .title {
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  @include feedback.title;
+
   color: var(--fui-text-primary, $fui-text-primary);
-  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
 }
 
 .description {
-  margin-top: 2px;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include feedback.body;
+
   color: var(--fui-text-secondary, $fui-text-secondary);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
 }
 
-// ============================================
-// Action Button
-// ============================================
-
 .action {
+  @include button-reset;
+  @include feedback.compact-action;
+
   flex-shrink: 0;
-  @include min-target-size;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  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-color-accent, $fui-color-accent);
-  background: transparent;
-  border: none;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  color: var(--fui-color-accent, $fui-color-accent);
   cursor: pointer;
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
 
@@ -247,20 +183,11 @@
   }
 }
 
-// ============================================
-// Close Button
-// ============================================
-
 .close {
+  @include button-reset;
+  @include feedback.close;
+
   flex-shrink: 0;
-  @include touch-target;
-
-  width: 1.5rem;
-  height: 1.5rem;
-  margin: -2px -4px -2px 0;
-  padding: 0;
-  background: transparent;
-  border: none;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   cursor: pointer;
@@ -269,8 +196,8 @@
     color var(--fui-transition-fast, $fui-transition-fast);
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: var(--_fui-action-icon-size);
+    block-size: var(--_fui-action-icon-size);
   }
 
   &:hover {
@@ -283,10 +210,6 @@
   }
 }
 
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
   .toast {
     animation: none;

package/src/components/Toggle/index.ts

@@ -0,0 +1,7 @@
+/** @deprecated Import `Switch` from `../Switch` instead. */
+export {
+  Switch,
+  type SwitchProps,
+  Switch as Toggle,
+  type SwitchProps as ToggleProps,
+} from "../Switch";

package/src/components/ToggleGroup/ToggleGroup.contract.json

@@ -1,16 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "ToggleGroup",
-  "description": "A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.",
-  "category": "forms",
-  "tags": [
-    "toggle",
-    "group",
-    "fragmented",
-    "control",
-    "tabs",
-    "switch"
-  ],
+  "description": "Picks exactly one option from a short row of toggle buttons.",
+  "category": "actions",
+  "tags": ["toggle", "group", "fragmented", "control", "tabs", "switch"],
   "status": "stable",
   "sourcePath": "src/components/ToggleGroup/index.tsx",
   "exportName": "ToggleGroup",
@@ -22,7 +15,7 @@
     "children: node (required)",
     "variant: default|pills|outline|outlined (default: default)",
     "size: sm|md|lg (default: md)",
-    "gap: sm|none|xs (default: xs)",
+    "gap: sm|none|xs (default: xs for pills; none otherwise)",
     "selectionMode: single (default: single)"
   ],
   "props": {
@@ -56,105 +49,89 @@
       "description": "Visual style",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "pills",
-        "outline",
-        "outlined"
-      ]
+      "values": ["default", "pills", "outline", "outlined"]
     },
     "size": {
       "type": "enum",
       "description": "Size variant",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "gap": {
       "type": "enum",
-      "description": "Gap between items (pills/outline variants)",
-      "default": "xs",
+      "description": "Gap between items in the pills variant. Connected variants intentionally ignore gaps.",
       "required": false,
-      "values": [
-        "sm",
-        "none",
-        "xs"
-      ]
+      "values": ["sm", "none", "xs"]
     },
     "selectionMode": {
       "type": "enum",
       "description": "Selection behavior",
       "default": "single",
       "required": false,
-      "values": [
-        "single"
-      ]
+      "values": ["single"]
     }
   },
   "usage": {
     "when": [
       "Switching between mutually exclusive views or modes",
-      "Selecting one option from a small set (2-5 options)",
-      "Fragmented controls like view switchers",
-      "Filter or sort options"
+      "Choosing one of two to five options",
+      "View switchers and segmented filters"
     ],
     "whenNot": [
-      "Multiple selections allowed (use Checkbox group)",
-      "Many options (use Select or RadioGroup)",
-      "Navigation between pages (use Tabs)",
-      "On/off toggle (use Switch component)"
+      "More than one can be picked — use a Checkbox group",
+      "More than five options — use Select or RadioGroup",
+      "Moving between pages — use Tabs",
+      "A single on/off — use Switch"
     ],
     "guidelines": [
-      "Keep options to 2-5 items for clarity",
-      "Use clear, concise labels",
-      "Consider icons for common actions (grid/list view)",
-      "Ensure adequate touch targets on mobile"
+      "Two to five items",
+      "Labels short enough to scan in one pass",
+      "Icons work for well-known modes like grid and list",
+      "default for an inset tonal rail, pills for an open filter cluster, outlined for connected segments",
+      "Keep targets at least 24px on touch"
     ],
     "accessibility": [
-      "Uses role=\"radiogroup\" for single-selection semantics",
-      "Each item has role=\"radio\" with aria-checked",
-      "Keyboard navigable with Tab and arrow keys",
-      "Focus visible on active item"
+      "The group is a radiogroup; each item is a radio with aria-checked",
+      "Arrow keys move between items, Tab enters and leaves the group",
+      "Icon-only items still need an aria-label",
+      "Focus stays visible on the selected item"
     ]
   },
   "examples": [
     {
       "name": "Default",
-      "description": "Basic toggle group",
+      "description": "Inset tonal rail; the selected segment lifts.",
       "code": "<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"left\">Left</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"center\">Center</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"right\">Right</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "Pills Variant",
-      "description": "Pill-shaped toggle buttons",
+      "name": "Pills",
+      "description": "Detached rounded buttons for open filter clusters.",
       "code": "<ToggleGroup value={value} onChange={setValue} variant=\"pills\">\n  <ToggleGroup.Item value=\"all\">All</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"active\">Active</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"completed\">Completed</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "Outline Variant",
-      "description": "Outlined toggle buttons",
+      "name": "Outlined",
+      "description": "Bordered segments sharing one continuous edge.",
       "code": "<ToggleGroup value={value} onChange={setValue} variant=\"outlined\">\n  <ToggleGroup.Item value=\"day\">Day</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"week\">Week</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"month\">Month</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
       "name": "Uncontrolled",
-      "description": "Use defaultValue for simple single-select state",
+      "description": "defaultValue when nothing outside needs the selection.",
       "code": "<ToggleGroup defaultValue=\"list\">\n  <ToggleGroup.Item value=\"grid\">Grid</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\">List</ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
       "name": "Sizes",
-      "description": "Different size variants",
-      "code": "<ToggleGroup value={value} onChange={setValue} size=\"sm\">\n  <ToggleGroup.Item value=\"a\">Small</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"b\">Size</ToggleGroup.Item>\n</ToggleGroup>\n<ToggleGroup value={value} onChange={setValue} size=\"md\">\n  <ToggleGroup.Item value=\"a\">Medium</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"b\">Size</ToggleGroup.Item>\n</ToggleGroup>"
+      "description": "sm for toolbars, lg where the rail anchors a page.",
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"column\" gap=\"md\" align=\"start\">\n  <ToggleGroup defaultValue=\"a\" size=\"sm\">\n    <ToggleGroup.Item value=\"a\">Small</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n  <ToggleGroup defaultValue=\"a\" size=\"md\">\n    <ToggleGroup.Item value=\"a\">Medium</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n  <ToggleGroup defaultValue=\"a\" size=\"lg\">\n    <ToggleGroup.Item value=\"a\">Large</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"b\">Rail</ToggleGroup.Item>\n  </ToggleGroup>\n</Stack>"
     },
     {
       "name": "View Switcher",
-      "description": "Common pattern for switching between views",
-      "code": "<ToggleGroup value={view} onChange={setView} size=\"sm\">\n  <ToggleGroup.Item value=\"grid\"><GridIcon /></ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\"><ListIcon /></ToggleGroup.Item>\n</ToggleGroup>"
+      "description": "Icon-only modes, each named for screen readers.",
+      "code": "import { SquaresFour as GridIcon, ListBullets as ListIcon } from '@phosphor-icons/react';\n\n<ToggleGroup value={view} onChange={setView} size=\"sm\">\n  <ToggleGroup.Item value=\"grid\" aria-label=\"Grid view\">\n    <GridIcon aria-hidden />\n  </ToggleGroup.Item>\n  <ToggleGroup.Item value=\"list\" aria-label=\"List view\">\n    <ListIcon aria-hidden />\n  </ToggleGroup.Item>\n</ToggleGroup>"
     },
     {
-      "name": "With Disabled Item",
-      "description": "Toggle group with a disabled option",
+      "name": "Disabled Item",
+      "description": "One option locked out; the rest stay reachable.",
       "code": "<ToggleGroup value={value} onChange={setValue}>\n  <ToggleGroup.Item value=\"basic\">Basic</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"pro\">Pro</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"enterprise\" disabled>Enterprise</ToggleGroup.Item>\n</ToggleGroup>"
     }
   ],
@@ -182,20 +159,15 @@
       "onChange: (value: string) => void - change handler (or onValueChange)",
       "children: ToggleGroup.Item[] - toggle items",
       "variant: default|pills|outline|outlined - visual style (outlined aliases outline)",
-      "size: sm|md - size variant",
-      "gap: none|xs|sm - spacing",
+      "size: sm|md|lg - size variant",
+      "gap: none|xs|sm - pills spacing (xs by default; connected variants remain gapless)",
       "selectionMode: single (default: single)"
     ],
-    "a11yRules": [
-      "A11Y_GROUP_ROLE",
-      "A11Y_KEYBOARD_ACCESSIBLE"
-    ]
+    "a11yRules": ["A11Y_GROUP_ROLE", "A11Y_KEYBOARD_ACCESSIBLE"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Item"
-    ]
+    "subComponents": ["Item"]
   },
   "provenance": {
     "source": "migrated",