@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Grid/index.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import styles from './Grid.module.scss';
+import * as React from "react";
+import { resolveLayoutGap } from "../../utils/layout-spacing";
+import styles from "./Grid.module.scss";
 
 // ============================================
 // Types
@@ -26,7 +27,10 @@ export interface ResponsiveColumns {
  * CSS Grid layout component with responsive columns.
  * @see https://usefragments.com/components/grid
  */
-export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'> {
+export interface GridProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "children" | "style" | "className"
+> {
   children?: React.ReactNode;
   /**
    * Number of columns.
@@ -34,31 +38,34 @@ export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
    * - An object for responsive columns: `{ base: 1, md: 2, lg: 3 }`
    * - `"auto"` for responsive auto-fill based on minChildWidth
    */
-  columns?: ColumnCount | ResponsiveColumns | 'auto';
+  columns?: ColumnCount | ResponsiveColumns | "auto";
   /** Minimum width for auto-fill columns (only used with columns="auto") */
   minChildWidth?: string;
   /** Gap between grid items. Accepts string tokens or numbers (1-8) mapping to the spacing scale */
-  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | GapScale;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | GapScale;
   /** Vertical alignment of items within their cells */
-  alignItems?: 'start' | 'center' | 'end' | 'stretch';
+  alignItems?: "start" | "center" | "end" | "stretch";
   /** Horizontal alignment of items within their cells */
-  justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+  justifyItems?: "start" | "center" | "end" | "stretch";
   /** Padding inside the grid container */
-  padding?: 'none' | 'sm' | 'md' | 'lg';
+  padding?: "none" | "sm" | "md" | "lg";
   /** Additional class name */
   className?: string;
   /** Inline styles */
   style?: React.CSSProperties;
 }
 
-export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+export interface GridItemProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "children" | "className"
+> {
   children?: React.ReactNode;
   /** Number of columns this item spans */
-  colSpan?: ColumnCount | 'full';
+  colSpan?: ColumnCount | "full";
   /** Number of rows this item spans */
   rowSpan?: 1 | 2 | 3 | 4 | 5 | 6;
   /** Override alignment for this item */
-  alignSelf?: 'start' | 'center' | 'end' | 'stretch';
+  alignSelf?: "start" | "center" | "end" | "stretch";
   /**
    * Enable CSS subgrid so children align to parent grid tracks.
    * - `true` or `"rows"` — children align to parent row tracks
@@ -66,7 +73,7 @@ export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
    * - `"both"` — children align to both row and column tracks
    * Requires the item to span multiple rows/columns for visible effect.
    */
-  subgrid?: boolean | 'rows' | 'columns' | 'both';
+  subgrid?: boolean | "rows" | "columns" | "both";
   /** Additional class name */
   className?: string;
   style?: React.CSSProperties;
@@ -76,22 +83,11 @@ export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 // Helpers
 // ============================================
 
-function isResponsiveColumns(
-  columns: GridProps['columns']
-): columns is ResponsiveColumns {
-  return typeof columns === 'object' && columns !== null;
+function isResponsiveColumns(columns: GridProps["columns"]): columns is ResponsiveColumns {
+  return typeof columns === "object" && columns !== null;
 }
 
-const gapClasses: Record<Exclude<NonNullable<GridProps['gap']>, GapScale>, string> = {
-  none: styles.gapNone,
-  xs: styles.gapXs,
-  sm: styles.gapSm,
-  md: styles.gapMd,
-  lg: styles.gapLg,
-  xl: styles.gapXl,
-};
-
-const paddingClasses: Record<NonNullable<GridProps['padding']>, string> = {
+const paddingClasses: Record<NonNullable<GridProps["padding"]>, string> = {
   none: styles.paddingNone,
   sm: styles.paddingSm,
   md: styles.paddingMd,
@@ -102,70 +98,67 @@ const paddingClasses: Record<NonNullable<GridProps['padding']>, string> = {
 // Grid Component
 // ============================================
 
-export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
-  function Grid(
-    {
-      children,
-      columns = 1,
-      minChildWidth,
-      gap = 'md',
-      alignItems,
-      justifyItems,
-      padding = 'none',
-      className,
-      style,
-      ...htmlProps
-    },
-    ref
-  ) {
-    // Determine classes and style based on columns type
-    let columnsClass: string;
-    let inlineStyle: React.CSSProperties | undefined;
-
-    if (columns === 'auto') {
-      columnsClass = styles.columnsAuto;
-      if (minChildWidth) {
-        inlineStyle = { '--fui-grid-min-child-width': minChildWidth } as React.CSSProperties;
-      }
-    } else if (isResponsiveColumns(columns)) {
-      columnsClass = styles.columnsResponsive;
-      const vars: Record<string, string> = {};
-      if (columns.base) vars['--fui-grid-cols'] = String(columns.base);
-      if (columns.sm) vars['--fui-grid-cols-sm'] = String(columns.sm);
-      if (columns.md) vars['--fui-grid-cols-md'] = String(columns.md);
-      if (columns.lg) vars['--fui-grid-cols-lg'] = String(columns.lg);
-      if (columns.xl) vars['--fui-grid-cols-xl'] = String(columns.xl);
-      inlineStyle = vars as unknown as React.CSSProperties;
-    } else {
-      columnsClass = styles[`columns${columns}`];
-    }
-
-    // Handle numeric gap via inline style
-    if (typeof gap === 'number') {
-      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` } as React.CSSProperties;
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(function Grid(
+  {
+    children,
+    columns = 1,
+    minChildWidth,
+    gap = "md",
+    alignItems,
+    justifyItems,
+    padding = "none",
+    className,
+    style,
+    ...htmlProps
+  },
+  ref
+) {
+  // Determine classes and style based on columns type
+  let columnsClass: string;
+  let inlineStyle: React.CSSProperties | undefined;
+
+  if (columns === "auto") {
+    columnsClass = styles.columnsAuto;
+    if (minChildWidth) {
+      inlineStyle = { "--fui-grid-min-child-width": minChildWidth } as React.CSSProperties;
     }
-
-    const classes = [
-      styles.grid,
-      columnsClass,
-      typeof gap === 'number' ? undefined : gapClasses[gap],
-      paddingClasses[padding],
-      alignItems && styles[`align${cap(alignItems)}`],
-      justifyItems && styles[`justify${cap(justifyItems)}`],
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
-
-    return (
-      <div {...htmlProps} ref={ref} className={classes} style={mergedStyle}>
-        {children}
-      </div>
-    );
+  } else if (isResponsiveColumns(columns)) {
+    columnsClass = styles.columnsResponsive;
+    const vars: Record<string, string> = {};
+    if (columns.base) vars["--fui-grid-cols"] = String(columns.base);
+    if (columns.sm) vars["--fui-grid-cols-sm"] = String(columns.sm);
+    if (columns.md) vars["--fui-grid-cols-md"] = String(columns.md);
+    if (columns.lg) vars["--fui-grid-cols-lg"] = String(columns.lg);
+    if (columns.xl) vars["--fui-grid-cols-xl"] = String(columns.xl);
+    inlineStyle = vars as unknown as React.CSSProperties;
+  } else {
+    columnsClass = styles[`columns${columns}`];
   }
-) as GridComponent;
+
+  inlineStyle = {
+    ...inlineStyle,
+    "--_fui-grid-gap": resolveLayoutGap(gap),
+  } as React.CSSProperties;
+
+  const classes = [
+    styles.grid,
+    columnsClass,
+    paddingClasses[padding],
+    alignItems && styles[`align${cap(alignItems)}`],
+    justifyItems && styles[`justify${cap(justifyItems)}`],
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+
+  return (
+    <div {...htmlProps} ref={ref} className={classes} style={mergedStyle}>
+      {children}
+    </div>
+  );
+}) as GridComponent;
 
 // ============================================
 // Grid.Item Sub-component
@@ -177,42 +170,29 @@ const subgridClasses: Record<string, string> = {
   both: styles.subgridBoth,
 };
 
-const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(
-  function GridItem(
-    {
-      children,
-      colSpan,
-      rowSpan,
-      alignSelf,
-      subgrid,
-      className,
-      style,
-      ...htmlProps
-    },
-    ref
-  ) {
-    const subgridClass = subgrid
-      ? subgridClasses[subgrid === true ? 'rows' : subgrid]
-      : undefined;
-
-    const classes = [
-      styles.item,
-      colSpan && (colSpan === 'full' ? styles.colSpanFull : styles[`colSpan${colSpan}`]),
-      rowSpan && styles[`rowSpan${rowSpan}`],
-      alignSelf && styles[`selfAlign${cap(alignSelf)}`],
-      subgridClass,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <div {...htmlProps} ref={ref} className={classes} style={style}>
-        {children}
-      </div>
-    );
-  }
-);
+const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(function GridItem(
+  { children, colSpan, rowSpan, alignSelf, subgrid, className, style, ...htmlProps },
+  ref
+) {
+  const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : undefined;
+
+  const classes = [
+    styles.item,
+    colSpan && (colSpan === "full" ? styles.colSpanFull : styles[`colSpan${colSpan}`]),
+    rowSpan && styles[`rowSpan${rowSpan}`],
+    alignSelf && styles[`selfAlign${cap(alignSelf)}`],
+    subgridClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div {...htmlProps} ref={ref} className={classes} style={style}>
+      {children}
+    </div>
+  );
+});
 
 // ============================================
 // Utilities
@@ -226,8 +206,9 @@ function cap(s: string): string {
 // Compound component type
 // ============================================
 
-interface GridComponent
-  extends React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>> {
+interface GridComponent extends React.ForwardRefExoticComponent<
+  GridProps & React.RefAttributes<HTMLDivElement>
+> {
   Item: typeof GridItem;
 }
 

package/src/components/Header/Header.module.scss

@@ -1,11 +1,16 @@
 @use '../../tokens/variables' as *;
 @use '../../tokens/mixins' as *;
+@use '../../recipes/action' as action;
+@use '../../recipes/layout' as layout;
+@use '../../recipes/navigation' as navigation;
+@use '../../recipes/popup' as popup;
 
 // ============================================
 // Header Root
 // ============================================
 
 .header {
+  @include navigation.properties;
   // Container query context: children respond to header width, not viewport
   @include container(fui-header);
 
@@ -19,7 +24,7 @@
 }
 
 .fixed {
-  position: sticky;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -126,18 +131,15 @@
 .navItem {
   @include button-reset;
   @include interactive-base;
-  @include text-base;
+  @include action.base;
+  @include action.size("md");
 
   display: flex;
   align-items: 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);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
   white-space: nowrap;
-  // Horizontal header chrome (button-sized), not a vertical list-nav row —
-  // keeps the larger button-height target rather than --fui-sidebar-item-height.
-  min-height: var(--fui-button-height-md, $fui-button-height-md);
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -155,14 +157,10 @@
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 
-  &:hover {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary) !important;
-    color: var(--fui-text-primary, $fui-text-primary) !important;
-  }
-
-  &:active {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary) !important;
-    color: var(--fui-text-primary, $fui-text-primary) !important;
+  &.navItem:hover,
+  &.navItem:active {
+    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+    color: var(--fui-text-primary, $fui-text-primary);
   }
 }
 
@@ -194,10 +192,9 @@
 }
 
 .navMenuPopup {
-  @include surface-elevated;
+  @include popup.container;
 
-  min-width: 10rem;
-  padding: var(--fui-space-1, $fui-space-1);
+  min-width: layout.measure("field-minimum");
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   opacity: 0;
@@ -221,12 +218,11 @@
 
 .navMenuItem {
   @include button-reset;
-  @include text-base;
+  @include popup.row;
 
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -235,8 +231,7 @@
   outline: none;
 
   &[data-highlighted] {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
+    @include popup.highlight-state;
   }
 }
 
@@ -304,12 +299,12 @@
 .trigger {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("lg");
 
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--fui-touch-lg, $fui-touch-lg);
-  height: var(--fui-touch-lg, $fui-touch-lg);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-primary, $fui-text-primary);
   flex-shrink: 0;
@@ -319,8 +314,7 @@
   }
 
   svg {
-    width: var(--fui-icon-xl, $fui-icon-xl);
-    height: var(--fui-icon-xl, $fui-icon-xl);
+    @include action.glyph("lg");
   }
 }
 
@@ -352,7 +346,7 @@
   z-index: 99;
   width: min(320px, 85vw);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
-  border-left: 1px solid var(--fui-border, $fui-border);
+  border-left: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
   display: flex;
   flex-direction: column;
   animation: mobileNavSlideIn var(--fui-transition-normal, $fui-transition-normal) ease;
@@ -363,18 +357,18 @@
   align-items: center;
   justify-content: flex-end;
   padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4);
-  border-bottom: 1px solid var(--fui-border, $fui-border);
+  border-bottom: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
 }
 
 .mobileNavClose {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
+  @include action.icon-only("md");
 
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--fui-touch-md, $fui-touch-md);
-  height: var(--fui-touch-md, $fui-touch-md);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
 
@@ -392,12 +386,11 @@
 
 .mobileNavLink {
   @include button-reset;
-  @include text-base;
+  @include navigation.row;
 
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -452,7 +445,7 @@
   padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   background-color: var(--fui-bg-primary, $fui-bg-primary);
   color: var(--fui-text-primary, $fui-text-primary);
-  border: 2px solid var(--fui-color-accent, $fui-color-accent);
+  border: var(--fui-stroke-default, 2px) solid var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   text-decoration: none;
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);

package/src/components/Header/index.tsx

@@ -8,6 +8,7 @@ import { useFocusTrap } from '../../utils/a11y';
 import { ScrollArea } from '../ScrollArea';
 import styles from './Header.module.scss';
 import { useSidebar } from '../Sidebar';
+import { POPUP_OFFSET_PX } from '../../recipes/popup';
 
 // ============================================
 // Types
@@ -495,7 +496,7 @@ function HeaderNavMenu({
             : <CaretDown size={12} className={styles.navMenuChevron} aria-hidden />}
         </BaseMenu.Trigger>
         <BaseMenu.Portal>
-          <BaseMenu.Positioner side="bottom" align="start" sideOffset={4} className={styles.navMenuPositioner}>
+          <BaseMenu.Positioner side="bottom" align="start" sideOffset={POPUP_OFFSET_PX} className={styles.navMenuPositioner}>
             <BaseMenu.Popup className={styles.navMenuPopup}>
               {children}
             </BaseMenu.Popup>

package/src/components/Icon/Icon.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../recipes/representation" as representation;
 
 .icon {
   display: inline-flex;
@@ -6,6 +7,21 @@
   justify-content: center;
   color: currentColor;
   line-height: 1;
+
+  > svg {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
+@each $size in ("xs", "sm", "md", "lg", "xl") {
+  .#{$size} {
+    @include representation.glyph($size);
+  }
+}
+
+.size2xl {
+  @include representation.glyph("2xl");
 }
 
 // Color variants (matching Badge/Alert pattern)