@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Skeleton/index.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import styles from './Skeleton.module.scss';
+import * as React from "react";
+import styles from "./Skeleton.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
 export type SkeletonVariant =
-  | 'text'      // Single line of text, height: 1em
-  | 'heading'   // Heading text, height: 1.5em
-  | 'avatar'    // Circular, uses size prop
-  | 'button'    // Button shape, uses size prop
-  | 'input'     // Form input height
-  | 'rect';     // Rectangle, requires explicit dimensions or fill
+  | "text" // Single line of text, height: 1em
+  | "heading" // Heading text, height: 1.5em
+  | "avatar" // Circular, uses size prop
+  | "button" // Button shape, uses size prop
+  | "input" // Form input height
+  | "rect"; // Rectangle, requires explicit dimensions or fill
 
-export type SkeletonSize = 'sm' | 'md' | 'lg';
+export type SkeletonSize = "sm" | "md" | "lg";
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -22,7 +22,7 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   variant?: SkeletonVariant;
   /**
-   * Size variant for avatar/button. Ignored for text/heading/input.
+   * Size variant for avatar, button, and input placeholders.
    * @default 'md'
    */
   size?: SkeletonSize;
@@ -42,7 +42,7 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Border radius override. Auto-determined for most variants.
    */
-  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+  radius?: "none" | "sm" | "md" | "lg" | "full";
   /**
    * Disable animation for reduced motion preference.
    * @default false
@@ -50,7 +50,7 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   static?: boolean;
 }
 
-export interface SkeletonTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface SkeletonTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /** Number of text lines to render */
   lines?: number;
   /**
@@ -60,59 +60,60 @@ export interface SkeletonTextProps extends Omit<React.HTMLAttributes<HTMLDivElem
    */
   lastLineWidth?: number;
   /** Gap between lines. Uses spacing tokens. */
-  gap?: 'sm' | 'md';
+  gap?: "sm" | "md";
 }
 
 // ============================================
 // Component
 // ============================================
 
-const SkeletonBase = React.forwardRef<HTMLDivElement, SkeletonProps>(
-  function SkeletonBase(
-    {
-      variant = 'rect',
-      size = 'md',
-      width,
-      height,
-      fill = false,
-      radius,
-      static: isStatic = false,
-      className,
-      ...htmlProps
-    },
-    ref
-  ) {
-    const classes = [
-      styles.skeleton,
-      styles[variant],
-      variant === 'avatar' && styles[`avatar-${size}`],
-      variant === 'button' && styles[`button-${size}`],
-      fill && styles.fill,
-      radius && styles[`radius-${radius}`],
-      isStatic && styles.static,
-      className,
-    ].filter(Boolean).join(' ');
-
-    const style: React.CSSProperties = {};
-
-    if (width !== undefined) {
-      style.width = typeof width === 'number' ? `${width}px` : width;
-    }
-    if (height !== undefined) {
-      style.height = typeof height === 'number' ? `${height}px` : height;
-    }
+const SkeletonBase = React.forwardRef<HTMLDivElement, SkeletonProps>(function SkeletonBase(
+  {
+    variant = "rect",
+    size = "md",
+    width,
+    height,
+    fill = false,
+    radius,
+    static: isStatic = false,
+    className,
+    ...htmlProps
+  },
+  ref
+) {
+  const classes = [
+    styles.skeleton,
+    styles[variant],
+    variant === "avatar" && styles[`avatar-${size}`],
+    variant === "button" && styles[`button-${size}`],
+    variant === "input" && styles[`input-${size}`],
+    fill && styles.fill,
+    radius && styles[`radius-${radius}`],
+    isStatic && styles.static,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
-    return (
-      <div
-        ref={ref}
-        {...htmlProps}
-        className={classes}
-        style={Object.keys(style).length > 0 ? style : undefined}
-        aria-hidden="true"
-      />
-    );
+  const style: React.CSSProperties = {};
+
+  if (width !== undefined) {
+    style.width = typeof width === "number" ? `${width}px` : width;
+  }
+  if (height !== undefined) {
+    style.height = typeof height === "number" ? `${height}px` : height;
   }
-);
+
+  return (
+    <div
+      ref={ref}
+      {...htmlProps}
+      className={classes}
+      style={Object.keys(style).length > 0 ? style : undefined}
+      aria-hidden="true"
+    />
+  );
+});
 
 // ============================================
 // Skeleton.Text - Multi-line text skeleton
@@ -121,15 +122,13 @@ const SkeletonBase = React.forwardRef<HTMLDivElement, SkeletonProps>(
 function SkeletonText({
   lines = 3,
   lastLineWidth = 80,
-  gap = 'sm',
+  gap = "sm",
   className,
   ...htmlProps
 }: SkeletonTextProps) {
-  const containerClasses = [
-    styles.textContainer,
-    styles[`gap-${gap}`],
-    className,
-  ].filter(Boolean).join(' ');
+  const containerClasses = [styles.textContainer, styles[`gap-${gap}`], className]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <div {...htmlProps} className={containerClasses} aria-hidden="true">
@@ -152,21 +151,15 @@ function SkeletonText({
 // ============================================
 
 function SkeletonCircle({
-  size = 'md',
+  size = "md",
   className,
 }: {
   size?: SkeletonSize | number;
   className?: string;
 }) {
-  if (typeof size === 'number') {
+  if (typeof size === "number") {
     return (
-      <SkeletonBase
-        variant="rect"
-        width={size}
-        height={size}
-        radius="full"
-        className={className}
-      />
+      <SkeletonBase variant="rect" width={size} height={size} radius="full" className={className} />
     );
   }
   return <SkeletonBase variant="avatar" size={size} className={className} />;

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,8 +40,9 @@ $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);
@@ -62,13 +63,11 @@ $fui-slider-thumb-size: $fui-target-size-min !default;
 }
 
 .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-field-selection-border, $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.module.scss

@@ -1,7 +1,9 @@
-@use '../../tokens/variables' as *;
+@use "../../recipes/layout";
+@use "../../tokens/variables" as *;
 
 .stack {
   display: flex;
+  gap: var(--fui-stack-gap, #{layout.gap("md")});
 }
 
 // Direction
@@ -22,42 +24,39 @@
   }
 
   @media (min-width: 768px) {
-    flex-direction: var(--fui-stack-direction-md, var(--fui-stack-direction-sm, var(--fui-stack-direction, column)));
+    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))));
+    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)))));
+    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) {
     gap: var(--fui-stack-gap-sm, var(--fui-stack-gap, 0));
@@ -68,11 +67,20 @@
   }
 
   @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))));
+    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)))));
+    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 +133,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);
+}
+
+@media (min-width: 640px) {
+  .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);
+  }
+}
+
+@media (min-width: 768px) {
+  .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);
+  }
+}
+
+@media (min-width: 1024px) {
+  .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);
+  }
+}
+
+@media (min-width: 1280px) {
+  .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);
+  }
 }