@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Slider/Slider.module.scss

@@ -1,32 +1,32 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// Local component tokens
-$fui-slider-track-height: 4px !default;
-$fui-slider-thumb-size: $fui-target-size-min !default;
+@use "../../recipes/boolean-range" as boolean;
+@use "../../recipes/field" as field;
+@use "../../recipes/target" as target;
+@use "../../recipes/typography" as typography;
 
 .wrapper {
-  display: flex;
-  flex-direction: column;
+  @include field.wrapper;
 }
 
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: var(--fui-space-1, $fui-space-1);
+  margin-bottom: var(--fui-raw-space-8, 8px);
 }
 
 .label {
-  @include label-text;
+  @include typography.role("ui-standard");
 }
 
 .value {
-  font-family: var(--fui-font-mono, $fui-font-mono);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include typography.role("ui-compact");
+
   color: var(--fui-text-secondary, $fui-text-secondary);
-  min-width: 60px;
+  min-width: max-content;
   text-align: right;
+  font-variant-numeric: tabular-nums;
 }
 
 .root {
@@ -40,11 +40,12 @@ $fui-slider-thumb-size: $fui-target-size-min !default;
 }
 
 .track {
+  @include boolean.slider-track;
+
   position: relative;
-  height: var(--fui-slider-track-height, $fui-slider-track-height);
   width: 100%;
   background-color: var(--fui-form-group-bg, $fui-bg-secondary);
-  box-shadow: inset 0 0 0 1px var(--fui-form-group-border, $fui-border);
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px) var(--fui-form-group-border, $fui-border);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   cursor: pointer;
 
@@ -57,18 +58,16 @@ $fui-slider-thumb-size: $fui-target-size-min !default;
 .indicator {
   position: absolute;
   height: 100%;
-  background-color: var(--fui-field-selection-border, $fui-color-accent);
+  background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
 }
 
 .thumb {
-  @include min-target-size;
+  @include boolean.slider-thumb;
+  @include target.hit-area("compact");
 
-  position: relative;
-  width: var(--fui-slider-thumb-size, $fui-slider-thumb-size);
-  height: var(--fui-slider-thumb-size, $fui-slider-thumb-size);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  border: 1px solid var(--fui-field-selection-border, $fui-color-accent);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
   cursor: grab;
@@ -93,11 +92,14 @@ $fui-slider-thumb-size: $fui-target-size-min !default;
     cursor: not-allowed;
     opacity: 0.5;
   }
+
+  @media (pointer: coarse) {
+    --_fui-target-hit-size: #{target.hit-size("touch")};
+  }
 }
 
 .helper {
-  @include helper-text;
-  margin-top: var(--fui-space-1, $fui-space-1);
+  @include field.helper;
 }
 
 .helperError {
@@ -115,24 +117,28 @@ $fui-slider-thumb-size: $fui-target-size-min !default;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   background: var(--fui-form-group-bg, $fui-bg-secondary);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  border: 1px solid var(--fui-form-group-border, $fui-border);
-  font-family: var(--fui-font-mono, $fui-font-mono);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  line-height: 1;
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-form-group-border, $fui-border);
+  @include typography.role("ui-compact");
   box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
 }
 
+.wrapper[data-invalid] .track {
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
+    var(--fui-color-danger-text, $fui-color-danger-text);
+}
+
 // ============================================
 // Accessibility: High Contrast Mode
 // ============================================
 
 @media (prefers-contrast: more) {
   .track {
-    border: 1px solid var(--fui-text-primary, $fui-text-primary);
+    border: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
   }
 
   .thumb {
-    border-width: 3px;
+    outline: var(--fui-stroke-default, 2px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: var(--fui-stroke-hairline, 1px);
   }
 }
 

package/src/components/Stack/Stack.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Stack",
-  "description": "Flexible layout component for arranging children in rows or columns with consistent spacing. Supports responsive direction and gap.",
+  "description": "Stacks children in a row or column with one consistent gap.",
   "category": "layout",
-  "tags": [
-    "stack",
-    "layout",
-    "flex",
-    "spacing",
-    "responsive"
-  ],
+  "tags": ["stack", "layout", "flex", "spacing", "responsive"],
   "status": "stable",
   "sourcePath": "src/components/Stack/index.tsx",
   "exportName": "Stack",
@@ -47,24 +41,13 @@
       "type": "enum",
       "description": "Cross-axis alignment",
       "required": false,
-      "values": [
-        "start",
-        "center",
-        "end",
-        "stretch",
-        "baseline"
-      ]
+      "values": ["start", "center", "end", "stretch", "baseline"]
     },
     "justify": {
       "type": "enum",
       "description": "Main-axis alignment",
       "required": false,
-      "values": [
-        "start",
-        "center",
-        "end",
-        "between"
-      ]
+      "values": ["start", "center", "end", "between"]
     },
     "wrap": {
       "type": "boolean",
@@ -108,22 +91,21 @@
   },
   "usage": {
     "when": [
-      "Arranging elements in a row or column",
-      "Creating consistent spacing between items",
-      "Building responsive layouts",
-      "Simple flexbox-based arrangements"
+      "Spacing a short row or column of elements",
+      "Any one-directional flexbox arrangement",
+      "Layouts that flip direction at a breakpoint"
     ],
     "whenNot": [
-      "Complex grid layouts (use Grid)",
-      "Button-specific grouping (use ButtonGroup)",
-      "Page-level layout (use AppShell)"
+      "Two-dimensional layouts (use Grid)",
+      "Grouping buttons into one control (use ButtonGroup)",
+      "Page shell regions (use AppShell)"
     ],
     "guidelines": [
-      "Use semantic elements via the \"as\" prop when appropriate",
-      "Leverage responsive props for mobile-first layouts",
-      "Keep spacing consistent within related sections",
-      "Consider alignment for visual balance",
-      "Pass DOM attributes (id, role, aria-*, data-*, event handlers) directly to Stack root when needed"
+      "Set gap once on the parent instead of margins on children",
+      "Numeric gaps (1-8) map to the same spacing scale as the tokens",
+      "direction, gap, and align all accept per-breakpoint objects",
+      "Use as=\"nav\" or as=\"ul\" so the markup stays semantic",
+      "separator draws dividers without extra elements"
     ],
     "accessibility": [
       "Use semantic elements (nav, section, etc.) via \"as\" prop",
@@ -134,42 +116,37 @@
   "examples": [
     {
       "name": "Vertical Stack",
-      "description": "Default column layout",
-      "code": "<Stack gap=\"sm\">\n  <Badge>Item 1</Badge>\n  <Badge>Item 2</Badge>\n  <Badge>Item 3</Badge>\n</Stack>"
+      "description": "Children flow top to bottom — the default.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"sm\">\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">One</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Two</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Three</Box>\n</Stack>"
     },
     {
       "name": "Horizontal Stack",
-      "description": "Row layout",
-      "code": "<Stack direction=\"row\" gap=\"sm\">\n  <Badge>Item 1</Badge>\n  <Badge>Item 2</Badge>\n  <Badge>Item 3</Badge>\n</Stack>"
+      "description": "Children flow left to right.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\">\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">One</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Two</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Three</Box>\n</Stack>"
     },
     {
       "name": "Gap Sizes",
-      "description": "Different spacing options",
-      "code": "<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap=\"xs\">\n    <Badge variant=\"info\">XS</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\">\n    <Badge variant=\"info\">SM</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"md\">\n    <Badge variant=\"info\">MD</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"lg\">\n    <Badge variant=\"info\">LG</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n</Stack>"
-    },
-    {
-      "name": "Numeric Gap",
-      "description": "Using number values (1-8) mapped to the spacing scale",
-      "code": "<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap={2}>\n    <Badge variant=\"info\">Gap 2</Badge>\n    <Badge variant=\"info\">Gap 2</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap={4}>\n    <Badge variant=\"info\">Gap 4</Badge>\n    <Badge variant=\"info\">Gap 4</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap={6}>\n    <Badge variant=\"info\">Gap 6</Badge>\n    <Badge variant=\"info\">Gap 6</Badge>\n  </Stack>\n</Stack>"
+      "description": "One spacing token sets every gap in the stack.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap=\"xs\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">xs</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">xs</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">sm</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">sm</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"md\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">md</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">md</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"lg\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">lg</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">lg</Box>\n  </Stack>\n</Stack>"
     },
     {
       "name": "Alignment",
-      "description": "Cross-axis and main-axis alignment",
-      "code": "<Stack gap=\"md\">\n  <Stack direction=\"row\" gap=\"sm\" justify=\"between\" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>\n    <Badge>Start</Badge>\n    <Badge>End</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\" justify=\"center\" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>\n    <Badge>Centered</Badge>\n  </Stack>\n</Stack>"
+      "description": "justify positions children along the main axis.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"md\">\n  <Box width=\"240px\" border rounded=\"sm\" padding=\"sm\">\n    <Stack direction=\"row\" gap=\"sm\" justify=\"between\">\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">Start</Box>\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">End</Box>\n    </Stack>\n  </Box>\n  <Box width=\"240px\" border rounded=\"sm\" padding=\"sm\">\n    <Stack direction=\"row\" gap=\"sm\" justify=\"center\">\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">Centered</Box>\n    </Stack>\n  </Box>\n</Stack>"
     },
     {
       "name": "Responsive",
-      "description": "Direction changes at breakpoints",
+      "description": "Swap direction and gap per breakpoint with an object value.",
       "code": "<Stack\n  direction={{ base: 'column', md: 'row' }}\n  gap={{ base: 'sm', md: 'lg' }}\n>\n  <Button variant=\"secondary\">First</Button>\n  <Button variant=\"secondary\">Second</Button>\n  <Button variant=\"secondary\">Third</Button>\n</Stack>"
     },
     {
       "name": "With Separator",
-      "description": "Default line separator between items",
-      "code": "<Stack gap=\"md\" separator>\n  <div>Section One</div>\n  <div>Section Two</div>\n  <div>Section Three</div>\n</Stack>"
+      "description": "Draws a divider between each child.",
+      "code": "import { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Stack gap=\"md\" separator>\n  <Text>Section one</Text>\n  <Text>Section two</Text>\n  <Text>Section three</Text>\n</Stack>"
     },
     {
       "name": "Semantic Element",
-      "description": "Using nav element for navigation",
+      "description": "The as prop renders a real nav, section, or list element.",
       "code": "<Stack as=\"nav\" direction=\"row\" gap=\"md\">\n  <Button variant=\"ghost\" size=\"sm\">Home</Button>\n  <Button variant=\"ghost\" size=\"sm\">About</Button>\n  <Button variant=\"ghost\" size=\"sm\">Contact</Button>\n</Stack>"
     }
   ],
@@ -201,15 +178,11 @@
       "as: string - HTML element",
       "Pass-through DOM props supported on the root (id, role, aria-*, data-*, handlers)"
     ],
-    "a11yRules": [
-      "A11Y_SEMANTIC_ELEMENTS"
-    ]
+    "a11yRules": ["A11Y_SEMANTIC_ELEMENTS"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Stack/Stack.module.scss

@@ -1,7 +1,10 @@
-@use '../../tokens/variables' as *;
+@use "../../recipes/layout";
+@use "../../tokens/mixins" as *;
+@use "../../tokens/variables" as *;
 
 .stack {
   display: flex;
+  gap: var(--fui-stack-gap, #{layout.gap("md")});
 }
 
 // Direction
@@ -17,62 +20,68 @@
 .directionResponsive {
   flex-direction: var(--fui-stack-direction, column);
 
-  @media (min-width: 640px) {
+  @include breakpoint-sm {
     flex-direction: var(--fui-stack-direction-sm, var(--fui-stack-direction, column));
   }
 
-  @media (min-width: 768px) {
-    flex-direction: var(--fui-stack-direction-md, var(--fui-stack-direction-sm, var(--fui-stack-direction, column)));
+  @include breakpoint-md {
+    flex-direction: var(
+      --fui-stack-direction-md,
+      var(--fui-stack-direction-sm, var(--fui-stack-direction, column))
+    );
   }
 
-  @media (min-width: 1024px) {
-    flex-direction: var(--fui-stack-direction-lg, var(--fui-stack-direction-md, var(--fui-stack-direction-sm, var(--fui-stack-direction, column))));
+  @include breakpoint-lg {
+    flex-direction: var(
+      --fui-stack-direction-lg,
+      var(
+        --fui-stack-direction-md,
+        var(--fui-stack-direction-sm, var(--fui-stack-direction, column))
+      )
+    );
   }
 
-  @media (min-width: 1280px) {
-    flex-direction: var(--fui-stack-direction-xl, var(--fui-stack-direction-lg, var(--fui-stack-direction-md, var(--fui-stack-direction-sm, var(--fui-stack-direction, column)))));
+  @include breakpoint-xl {
+    flex-direction: var(
+      --fui-stack-direction-xl,
+      var(
+        --fui-stack-direction-lg,
+        var(
+          --fui-stack-direction-md,
+          var(--fui-stack-direction-sm, var(--fui-stack-direction, column))
+        )
+      )
+    );
   }
 }
 
-// Gap sizes
-.gap-xs {
-  gap: var(--fui-space-1, $fui-space-1);
-}
-
-.gap-sm {
-  gap: var(--fui-space-2, $fui-space-2);
-}
-
-.gap-md {
-  gap: var(--fui-space-3, $fui-space-3);
-}
-
-.gap-lg {
-  gap: var(--fui-space-4, $fui-space-4);
-}
-
-.gap-xl {
-  gap: var(--fui-space-6, $fui-space-6);
-}
-
 // Responsive gap
 .gapResponsive {
-  gap: var(--fui-stack-gap, 0);
+  gap: var(--fui-stack-gap, #{layout.gap("none")});
 
-  @media (min-width: 640px) {
+  @include breakpoint-sm {
     gap: var(--fui-stack-gap-sm, var(--fui-stack-gap, 0));
   }
 
-  @media (min-width: 768px) {
+  @include breakpoint-md {
     gap: var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)));
   }
 
-  @media (min-width: 1024px) {
-    gap: var(--fui-stack-gap-lg, var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0))));
+  @include breakpoint-lg {
+    gap: var(
+      --fui-stack-gap-lg,
+      var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)))
+    );
   }
 
-  @media (min-width: 1280px) {
-    gap: var(--fui-stack-gap-xl, var(--fui-stack-gap-lg, var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)))));
+  @include breakpoint-xl {
+    gap: var(
+      --fui-stack-gap-xl,
+      var(
+        --fui-stack-gap-lg,
+        var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)))
+      )
+    );
   }
 }
 
@@ -125,12 +134,75 @@
   background-color: var(--fui-border, $fui-border);
 
   &[data-orientation="horizontal"] {
-    height: 1px;
+    height: var(--fui-stroke-hairline, 1px);
     width: 100%;
   }
 
   &[data-orientation="vertical"] {
-    width: 1px;
+    width: var(--fui-stroke-hairline, 1px);
+    align-self: stretch;
+  }
+}
+
+.directionResponsive[data-direction-base="row"] > .separator {
+  width: var(--fui-stroke-hairline, 1px);
+  height: auto;
+  align-self: stretch;
+}
+
+.directionResponsive[data-direction-base="column"] > .separator {
+  width: 100%;
+  height: var(--fui-stroke-hairline, 1px);
+}
+
+@include breakpoint-sm {
+  .directionResponsive[data-direction-sm="row"] > .separator {
+    width: var(--fui-stroke-hairline, 1px);
+    height: auto;
+    align-self: stretch;
+  }
+
+  .directionResponsive[data-direction-sm="column"] > .separator {
+    width: 100%;
+    height: var(--fui-stroke-hairline, 1px);
+  }
+}
+
+@include breakpoint-md {
+  .directionResponsive[data-direction-md="row"] > .separator {
+    width: var(--fui-stroke-hairline, 1px);
+    height: auto;
+    align-self: stretch;
+  }
+
+  .directionResponsive[data-direction-md="column"] > .separator {
+    width: 100%;
+    height: var(--fui-stroke-hairline, 1px);
+  }
+}
+
+@include breakpoint-lg {
+  .directionResponsive[data-direction-lg="row"] > .separator {
+    width: var(--fui-stroke-hairline, 1px);
+    height: auto;
     align-self: stretch;
   }
+
+  .directionResponsive[data-direction-lg="column"] > .separator {
+    width: 100%;
+    height: var(--fui-stroke-hairline, 1px);
+  }
+}
+
+@include breakpoint-xl {
+  .directionResponsive[data-direction-xl="row"] > .separator {
+    width: var(--fui-stroke-hairline, 1px);
+    height: auto;
+    align-self: stretch;
+  }
+
+  .directionResponsive[data-direction-xl="column"] > .separator {
+    width: 100%;
+    height: var(--fui-stroke-hairline, 1px);
+  }
 }