@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Icon/index.tsx

@@ -1,98 +1,85 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './Icon.module.scss';
-
-// Pixel values of the shared `--fui-icon-*` ladder (also exported as CSS vars
-// from the token layer). The icon library `size` prop needs a numeric px value,
-// so the same ladder is mirrored here as the single source instead of a bespoke
-// per-component scale.
-const FUI_ICON_PX = {
-  xs: 12,
-  sm: 14,
-  md: 16,
-  lg: 20,
-  xl: 24,
-  '2xl': 32,
-} as const;
+import * as React from "react";
+import { MEASUREMENT_PROFILES, measurementPx } from "../../measurements";
+import styles from "./Icon.module.scss";
 
 type AnyIconComponent = React.ComponentType<any>;
 type IconComponentProps<TIcon extends AnyIconComponent> = React.ComponentPropsWithoutRef<TIcon>;
 
-export type IconProps<TIcon extends AnyIconComponent = AnyIconComponent> =
-  Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & {
-    /** The icon component to render */
-    icon: TIcon;
-    /** Size of the icon */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Optional style/weight hint forwarded when the icon component supports a `weight` prop */
-    weight?: string;
-    /** Semantic color variant */
-    variant?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';
-    /** @deprecated Use variant instead */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';
-    /** Additional props forwarded to the underlying icon component (typed from `icon`) */
-    iconProps?: Partial<IconComponentProps<TIcon>>;
-  };
-
-// Sourced from the shared `--fui-icon-*` ladder (12/14/16/20/24/32px) so this
-// stops being a separate hardcoded size scale. NOTE: Icon's public size names
-// are offset by one step from the icon-token names — Icon `xs/sm/md/lg/xl` map
-// to icon `xs/md/lg/xl/2xl` (skipping icon-sm=14). Preserved to keep the
-// rendered px identical for existing consumers.
-const sizeMap: Record<NonNullable<IconProps['size']>, number> = {
-  xs: FUI_ICON_PX['xs'], // 12
-  sm: FUI_ICON_PX['md'], // 16
-  md: FUI_ICON_PX['lg'], // 20
-  lg: FUI_ICON_PX['xl'], // 24
-  xl: FUI_ICON_PX['2xl'], // 32
+export type IconProps<TIcon extends AnyIconComponent = AnyIconComponent> = Omit<
+  React.HTMLAttributes<HTMLSpanElement>,
+  "color"
+> & {
+  /** The icon component to render */
+  icon: TIcon;
+  /** Size of the icon */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  /** Optional style/weight hint forwarded when the icon component supports a `weight` prop */
+  weight?: string;
+  /** Semantic color variant */
+  variant?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "accent"
+    | "success"
+    | "warning"
+    | "error";
+  /** @deprecated Use variant instead */
+  color?: "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "error";
+  /** Additional props forwarded to the underlying icon component (typed from `icon`) */
+  iconProps?: Partial<IconComponentProps<TIcon>>;
 };
 
-const IconRoot = React.forwardRef<HTMLSpanElement, IconProps>(
-  function Icon(
-    {
-      icon: IconComponent,
-      size = 'md',
-      weight = 'regular',
-      variant,
-      color,
-      iconProps,
-      className,
-      style,
-      ...htmlProps
-    },
-    ref
-  ) {
-    // Support deprecated color prop (variant takes precedence)
-    const colorVariant = variant || color;
+const iconTargets = MEASUREMENT_PROFILES.targets.icon;
+type IconSize = NonNullable<IconProps["size"]>;
 
-    const classes = [
-      styles.icon,
-      colorVariant && colorVariant !== 'default' && styles[colorVariant],
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
+const IconRoot = React.forwardRef<HTMLSpanElement, IconProps>(function Icon(
+  {
+    icon: IconComponent,
+    size = "md",
+    weight = "regular",
+    variant,
+    color,
+    iconProps,
+    className,
+    style,
+    ...htmlProps
+  },
+  ref
+) {
+  // Support deprecated color prop (variant takes precedence)
+  const colorVariant = variant || color;
 
-    const resolvedIconProps = {
-      ...(iconProps as Record<string, unknown> | undefined),
-    };
+  const classes = [
+    styles.icon,
+    size === "2xl" ? styles.size2xl : styles[size as Exclude<IconSize, "2xl">],
+    colorVariant && colorVariant !== "default" && styles[colorVariant],
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
-    // Provide sensible defaults for icon libraries that support common props.
-    if (!('size' in resolvedIconProps)) {
-      resolvedIconProps.size = sizeMap[size];
-    }
-    if (weight && !('weight' in resolvedIconProps)) {
-      resolvedIconProps.weight = weight;
-    }
+  const resolvedIconProps = {
+    ...(iconProps as Record<string, unknown> | undefined),
+  };
 
-    return (
-      <span ref={ref} {...htmlProps} className={classes} style={style}>
-        <IconComponent {...resolvedIconProps} />
-      </span>
-    );
+  // Provide sensible defaults for icon libraries that support common props.
+  if (!("size" in resolvedIconProps)) {
+    resolvedIconProps.size = measurementPx(iconTargets[size], `targets.icon.${size}`);
   }
-);
+  if (weight && !("weight" in resolvedIconProps)) {
+    resolvedIconProps.weight = weight;
+  }
+
+  return (
+    <span ref={ref} {...htmlProps} className={classes} style={style}>
+      <IconComponent {...resolvedIconProps} />
+    </span>
+  );
+});
 
 type IconComponentSignature = <TIcon extends AnyIconComponent = AnyIconComponent>(
   props: IconProps<TIcon> & React.RefAttributes<HTMLSpanElement>
@@ -100,6 +87,7 @@ type IconComponentSignature = <TIcon extends AnyIconComponent = AnyIconComponent
 
 export const Icon = Object.assign(IconRoot, {
   Root: IconRoot,
-}) as typeof IconRoot & IconComponentSignature & {
-  Root: typeof IconRoot;
-};
+}) as typeof IconRoot &
+  IconComponentSignature & {
+    Root: typeof IconRoot;
+  };

package/src/components/IconButton/IconButton.module.scss

@@ -1,17 +1,16 @@
 @use '../../tokens/variables' as *;
 @use '../../tokens/mixins' as *;
+@use '../../recipes/action';
+@use '../../recipes/target';
 
 .iconButton {
   @include button-reset;
   @include interactive-base;
+  @include action.base;
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 1 / 1;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
-  border: 1px solid transparent;
+  border: var(--fui-stroke-hairline, 1px) solid transparent;
   background-color: transparent;
   flex-shrink: 0;
 
@@ -24,37 +23,28 @@
   }
 }
 
-// Sizes — square targets share the Button height ladder so an IconButton
-// lines up with its sibling Buttons in toolbars. Icon sizing is driven by
-// the button height so a single <IconButton size="sm"><Icon /></> always
-// renders a correctly-scaled glyph without consumer math.
 .sm {
-  width: var(--fui-button-height-sm, $fui-button-height-sm);
-  height: var(--fui-button-height-sm, $fui-button-height-sm);
+  @include action.icon-only("sm");
+  @include target.hit-area("compact");
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("sm");
   }
 }
 
 .md {
-  width: var(--fui-button-height-md, $fui-button-height-md);
-  height: var(--fui-button-height-md, $fui-button-height-md);
+  @include action.icon-only("md");
 
   svg {
-    width: var(--fui-icon-md, $fui-icon-md);
-    height: var(--fui-icon-md, $fui-icon-md);
+    @include action.glyph("md");
   }
 }
 
 .lg {
-  width: var(--fui-button-height-lg, $fui-button-height-lg);
-  height: var(--fui-button-height-lg, $fui-button-height-lg);
+  @include action.icon-only("lg");
 
   svg {
-    width: var(--fui-icon-lg, $fui-icon-lg);
-    height: var(--fui-icon-lg, $fui-icon-lg);
+    @include action.glyph("lg");
   }
 }
 

package/src/components/Input/Input.module.scss

@@ -1,13 +1,34 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action";
+@use "../../recipes/field";
+@use "../../recipes/typography";
 
-// Form field wrapper (label + helper + error)
-@include form-field-wrapper;
+.wrapper {
+  @include field.wrapper;
+}
+
+.label {
+  @include field.label;
+}
+
+.required {
+  margin-inline-start: var(--fui-raw-space-2, 2px);
+  color: var(--fui-color-danger-text, $fui-color-danger-text);
+}
+
+.helper {
+  @include field.helper;
+}
+
+.helperError,
+.errorMessage {
+  @include field.error;
+}
 
 .input {
-  @include text-base;
   @include interactive-base;
-  @include field-shell;
+  @include field.shell;
 
   display: block;
   width: 100%;
@@ -17,25 +38,21 @@
   }
 
   &:focus-visible {
-    @include field-shell-focus;
+    @include field.focus-state;
   }
 }
 
-// Size variants — shared control-size path (matches Select/DatePicker)
+// Size variants — shared control-size + field-padding path
 .sm {
-  @include control-size("sm", "input");
+  @include field.size("sm");
 }
 
 .md {
-  @include control-size("md", "input");
+  @include field.size("md");
 }
 
 .lg {
-  @include control-size("lg", "input");
-}
-
-.labelSm {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include field.size("lg");
 }
 
 // Error state via :has() — detects aria-invalid on the input element.
@@ -43,7 +60,7 @@
 // The .error class is kept as a fallback for direct usage.
 .error,
 .input[aria-invalid] {
-  border-color: var(--fui-color-danger-text, $fui-color-danger-text);
+  @include field.invalid-state;
 
   &:focus-visible {
     border-color: var(--fui-color-danger-text, $fui-color-danger-text);
@@ -80,40 +97,36 @@
   position: relative;
   display: flex;
   align-items: center;
-
-  // Auto-detect shortcut kbd via :has() — replaces JS class toggle: `shortcut && styles.hasShortcut`
-  &:has(> .shortcut):not(.hasAdornment) .input {
-    padding-right: var(--fui-kbd-reserved-width, 2.714rem);
-    padding-left: var(--fui-space-2, $fui-space-2);
-  }
+  width: 100%;
 }
 
-// Adornment container — wraps input with start/end adornments inside field-shell border
-.hasAdornment {
-  @include field-shell;
+// Adornments and shortcuts share one painted shell. The input remains the
+// semantic control while every sibling participates intrinsically in layout.
+.hasAdornment,
+.inputContainer:has(> .shortcut) {
+  @include field.size("md");
+  @include field.shell;
 
-  height: var(--fui-input-height, $fui-input-height);
-  min-height: var(--fui-target-size-min, $fui-target-size-min);
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: 0 var(--fui-space-2, $fui-space-2);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
+  gap: action.gap("md");
 
   &:has(.sm) {
-    height: var(--fui-input-height-sm, $fui-input-height-sm);
+    @include field.size("sm");
+
+    gap: action.gap("sm");
   }
 
-  &:has(.lg) {
-    height: var(--fui-input-height-lg, $fui-input-height-lg);
+  &:has(.md) {
+    @include field.size("md");
   }
 
-  &:has(> .shortcut) {
-    padding-right: calc(
-      var(--fui-space-2, #{$fui-space-2}) + var(--fui-kbd-reserved-width, 2.714rem)
-    );
+  &:has(.lg) {
+    @include field.size("lg");
+
+    gap: action.gap("lg");
   }
 
   &:focus-within {
-    @include field-shell-focus;
+    @include field.focus-state;
   }
 
   // Strip the input's own shell when inside adornment container
@@ -122,7 +135,7 @@
     height: 100%;
     border: none;
     background: transparent;
-    padding: 0;
+    padding-inline: 0;
     box-shadow: none;
 
     &:focus-visible {
@@ -133,7 +146,7 @@
 
   // Error state on adornment container
   &:has(.error) {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
+    @include field.invalid-state;
 
     &:focus-within {
       border-color: var(--fui-color-danger-text, $fui-color-danger-text);
@@ -159,36 +172,35 @@
   color: var(--fui-text-secondary, $fui-text-secondary);
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("md");
   }
 }
 
-// Kept as fallback for direct usage
-.hasShortcut {
-  padding-right: var(--fui-kbd-reserved-width, 2.714rem);
+.hasAdornment:has(.sm) .adornment svg {
+  @include action.glyph("sm");
+}
+
+.hasAdornment:has(.lg) .adornment svg {
+  @include action.glyph("lg");
 }
 
 .shortcut {
-  position: absolute;
-  right: var(--fui-space-1, $fui-space-1);
-  top: 50%;
-  transform: translateY(-50%);
+  @include typography.role("caption");
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--fui-kbd-gap, calc(var(--fui-space-px, #{$fui-space-px}) * 2));
-  min-width: var(--fui-kbd-min-width, 1.714rem);
-  height: var(--fui-kbd-height, 1.286rem);
-  padding: 0 var(--fui-kbd-padding-x, $fui-space-0-75);
+  flex: 0 0 auto;
+  gap: var(--fui-raw-space-2, 2px);
+  min-inline-size: var(--fui-raw-space-24, 24px);
+  block-size: var(--fui-raw-space-20, 20px);
+  margin-inline-start: auto;
+  padding-inline: var(--fui-raw-space-4, 4px);
   font-family: var(--fui-font-mono, $fui-font-mono);
-  font-size: var(--fui-kbd-font-size, $fui-font-size-2xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  line-height: 1;
   font-variant-numeric: tabular-nums;
   color: var(--fui-kbd-color, var(--fui-text-tertiary, #{$fui-text-tertiary}));
   background: var(--fui-kbd-bg, var(--fui-bg-elevated, #{$fui-bg-elevated}));
-  border: 1px solid var(--fui-kbd-border, var(--fui-border, #{$fui-border}));
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-kbd-border, var(--fui-border, #{$fui-border}));
   border-radius: var(--fui-kbd-radius, var(--fui-radius-sm, #{$fui-radius-sm}));
   box-shadow: var(--fui-kbd-shadow, none);
   pointer-events: none;

package/src/components/Input/index.tsx

@@ -179,7 +179,6 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(function Input(
     styles[size],
     error && styles.error,
     success && styles.success,
-    shortcut && styles.hasShortcut,
     inputClassName,
   ]
     .filter(Boolean)
@@ -194,7 +193,7 @@ const InputRoot = React.forwardRef<HTMLInputElement, InputProps>(function Input(
     .join(" ");
 
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
-  const labelClasses = [styles.label, size === "sm" && styles.labelSm].filter(Boolean).join(" ");
+  const labelClasses = styles.label;
 
   const sharedInputProps = {
     ...nativeInputProps,

package/src/components/Link/Link.module.scss

@@ -1,15 +1,14 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/action";
+@use "../../recipes/prose";
 
 .link {
   @include interactive-base;
+  @include action.inline;
+  @include prose.link;
 
   display: inline;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  text-decoration: none;
   cursor: pointer;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
 
@@ -46,7 +45,7 @@
 // Underline styles
 .underline-always {
   text-decoration: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: var(--fui-raw-space-2);
 }
 
 .underline-hover {
@@ -54,7 +53,7 @@
 
   &:hover {
     text-decoration: underline;
-    text-underline-offset: 2px;
+    text-underline-offset: var(--fui-raw-space-2);
   }
 }
 

package/src/components/List/List.module.scss

@@ -1,50 +1,48 @@
-@use '../../tokens/variables' as *;
+@use "../../tokens/variables" as *;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/prose" as prose;
 
 .list {
   margin: 0;
   padding: 0;
-  display: flex;
-  flex-direction: column;
 }
 
 // Variants
 .none {
-  list-style: none;
+  @include prose.list("none");
 }
 
 .disc {
-  list-style: disc;
-  padding-left: var(--fui-space-2, $fui-space-2);
+  @include prose.list("disc");
 }
 
 .decimal {
-  list-style: decimal;
-  padding-left: var(--fui-space-2, $fui-space-2);
+  @include prose.list("decimal");
 }
 
 .icon {
-  list-style: none;
+  @include prose.list("icon");
 }
 
 // Gap variants
 .gap-none {
-  gap: 0;
+  row-gap: layout.gap("none");
 }
 
 .gap-xs {
-  gap: var(--fui-space-1, $fui-space-1);
+  row-gap: layout.gap("xs");
 }
 
 .gap-sm {
-  gap: var(--fui-space-2, $fui-space-2);
+  row-gap: layout.gap("sm");
 }
 
 .gap-md {
-  gap: var(--fui-space-3, $fui-space-3);
+  row-gap: layout.gap("md");
 }
 
 .gap-lg {
-  gap: var(--fui-space-4, $fui-space-4);
+  row-gap: layout.gap("lg");
 }
 
 // List item
@@ -53,19 +51,16 @@
 }
 
 .iconItem {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--fui-space-2, $fui-space-2);
+  align-items: start;
 }
 
 .iconWrapper {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+  min-inline-size: var(--fui-raw-space-12);
 }
 
 .itemContent {
-  flex: 1;
+  min-inline-size: 0;
 }

package/src/components/List/index.tsx

@@ -79,18 +79,12 @@ function ListItem({ children, icon, className, style, ...htmlProps }: ListItemPr
     .filter(Boolean)
     .join(' ');
 
-  if (variant === 'icon' && icon) {
-    return (
-      <li {...htmlProps} className={classes} style={style}>
-        <span className={styles.iconWrapper}>{icon}</span>
-        <span className={styles.itemContent}>{children}</span>
-      </li>
-    );
-  }
-
   return (
     <li {...htmlProps} className={classes} style={style}>
-      {children}
+      {variant === 'icon' && icon ? (
+        <span className={styles.iconWrapper}>{icon}</span>
+      ) : null}
+      <span className={styles.itemContent}>{children}</span>
     </li>
   );
 }