@usefragments/ui 1.5.3 → 1.6.0

package/src/components/Tabs/index.tsx

@@ -65,7 +65,7 @@ export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 // ============================================
 
 const TabsVariantContext = React.createContext<"underline" | "pills">("underline");
-const TabsSizeContext = React.createContext<ControlSize>("sm");
+const TabsSizeContext = React.createContext<ControlSize>("md");
 
 // ============================================
 // Components
@@ -82,7 +82,7 @@ function TabsRoot({
   className,
   ...htmlProps
 }: TabsProps) {
-  const size = useResolvedControlSize(sizeProp, "sm");
+  const size = useResolvedControlSize(sizeProp);
   const classes = [styles.root, className].filter(Boolean).join(" ");
 
   return (

package/src/components/Text/Text.module.scss

@@ -1,5 +1,6 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
+@use "../../recipes/typography" as typography;
 
 .text {
   font-family: var(--fui-font-sans, $fui-font-sans);
@@ -9,7 +10,25 @@
 
 // Variants
 .variant-section-label {
-  @include section-label-text;
+  @include typography.role("ui-compact");
+}
+
+@each $role
+  in (
+    "caption",
+    "ui-compact",
+    "ui-standard",
+    "body-compact",
+    "body-relaxed",
+    "title-sm",
+    "title-md",
+    "title-lg",
+    "code"
+  )
+{
+  .role-#{$role} {
+    @include typography.role($role);
+  }
 }
 
 // Font sizes

package/src/components/Text/index.tsx

@@ -5,28 +5,32 @@ import styles from './Text.module.scss';
  * Typography component for rendering text with consistent styling.
  * @see https://usefragments.com/components/text
  */
-export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+export type TextRole =
+  | 'caption'
+  | 'ui-compact'
+  | 'ui-standard'
+  | 'body-compact'
+  | 'body-relaxed'
+  | 'title-sm'
+  | 'title-md'
+  | 'title-lg'
+  | 'code';
+
+export type TextSize = '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+export type TextFont = 'sans' | 'mono';
+export type TextTracking = 'normal' | 'tight' | 'tighter' | 'tightest';
+
+type TextSharedProps = Omit<React.HTMLAttributes<HTMLElement>, 'color' | 'role'> & {
   children: React.ReactNode;
   /** HTML element to render.
    * @default "span" */
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small' | 'mark' | 'del' | 'ins' | 'sub' | 'sup' | 'time' | 'address' | 'blockquote' | 'cite' | 'code' | 'abbr';
-  /** Preset text variant */
-  variant?: 'section-label';
-  /** Font size. Steps up the scale: 2xs (10), xs (12), sm/base (14), md (15 prose body),
-   * lg (20), xl (24), 2xl (30), 3xl (36 page title), 4xl (48 hero).
-   * @see https://usefragments.com/components/text#sizes */
-  size?: '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-  /** Font weight.
-   * @default "normal" */
-  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
   /** Text color. `"muted"` is an alias for `"tertiary"`. `"success" | "warning" | "danger"`
    * are for a run of text that carries a state on its own; prefer Badge or Alert when the
    * state deserves a container.
    * @default "primary" */
   color?: 'primary' | 'secondary' | 'tertiary' | 'muted' | 'success' | 'warning' | 'danger';
-  /** Font family.
-   * @default "sans" */
-  font?: 'sans' | 'mono';
   /** Truncate text with ellipsis when it overflows */
   truncate?: boolean;
   /** Number of lines before truncating (requires truncate=true) */
@@ -34,22 +38,42 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
   /** Letter-spacing preset. `"tight"` suits dense UI chrome labels (-0.01em);
    * `"tighter"` suits headings and stat values (-0.02em); `"tightest"` suits
    * display numerics (-0.025em). Omit for the font's default tracking. */
-  letterSpacing?: 'normal' | 'tight' | 'tighter' | 'tightest';
   /** Use tabular (fixed-width) numerals so digits align in columns. Ideal for
    * stat values, tables, timestamps, and any updating number. */
   tabularNums?: boolean;
-}
+};
+
+type TextRoleProps = {
+  role: TextRole;
+  size?: never;
+  variant?: never;
+  weight?: never;
+  font?: never;
+  letterSpacing?: never;
+};
+
+type TextLegacyScaleProps = {
+  role?: never;
+  size?: TextSize;
+  variant?: 'section-label';
+  weight?: TextWeight;
+  font?: TextFont;
+  letterSpacing?: TextTracking;
+};
+
+export type TextProps = TextSharedProps & (TextRoleProps | TextLegacyScaleProps);
 
 const TextRoot = React.forwardRef<HTMLElement, TextProps>(
   function Text(
     {
       children,
       as: Component = 'span',
+      role,
       variant,
       size,
       weight,
       color,
-      font = 'sans',
+      font,
       truncate,
       lineClamp,
       letterSpacing,
@@ -60,16 +84,27 @@ const TextRoot = React.forwardRef<HTMLElement, TextProps>(
     },
     ref
   ) {
+    const ignoredLegacyProps = role
+      ? [size, variant, weight, font, letterSpacing].some((value) => value !== undefined)
+      : false;
+
+    if (process.env.NODE_ENV !== 'production' && ignoredLegacyProps) {
+      console.warn(
+        '[Text] Semantic role takes precedence over size, variant, weight, font, and letterSpacing.'
+      );
+    }
+
     const classes = [
       styles.text,
-      variant && styles[`variant-${variant}`],
-      size && styles[`size-${size}`],
-      weight && styles[`weight-${weight}`],
+      role && styles[`role-${role}`],
+      !role && variant && styles[`variant-${variant}`],
+      !role && size && styles[`size-${size}`],
+      !role && weight && styles[`weight-${weight}`],
       color && styles[`color-${color}`],
-      font === 'mono' && styles.mono,
+      !role && font === 'mono' && styles.mono,
       truncate && styles.truncate,
       lineClamp && styles.lineClamp,
-      letterSpacing && styles[`tracking-${letterSpacing}`],
+      !role && letterSpacing && styles[`tracking-${letterSpacing}`],
       tabularNums && styles.tabularNums,
       className,
     ]

package/src/components/Textarea/Textarea.module.scss

@@ -1,64 +1,87 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
+@use "../../recipes/field";
+@use "../../recipes/layout";
+@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, #{measurements.raw-space(2)});
+  color: var(--fui-color-danger-text, $fui-color-danger-text);
+}
+
+.helper {
+  @include field.helper;
+}
+
+.helperError,
+.errorMessage {
+  @include field.error;
+}
 
 .textarea {
-  @include text-base;
   @include interactive-base;
-  @include field-shell;
+  @include field.shell;
 
   display: block;
   width: 100%;
-  min-height: var(--fui-input-height, $fui-input-height);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
-  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
-  font-family: inherit;
+  min-block-size: max(
+    var(--_fui-field-track),
+    calc(
+      var(--_fui-textarea-min-rows) * 1lh + 2 * var(--_fui-textarea-block-inset) + 2 *
+        var(--_fui-field-stroke)
+    )
+  );
+  max-block-size: calc(
+    var(--_fui-textarea-max-rows) * 1lh + 2 * var(--_fui-textarea-block-inset) + 2 *
+      var(--_fui-field-stroke)
+  );
+  padding-block: var(--_fui-textarea-block-inset);
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
   }
 
   &:focus-visible {
-    @include field-shell-focus;
+    @include field.focus-state;
   }
 
+  // Single-line: same track as Input — height lock, horizontal pad only.
   &[rows="1"] {
-    height: var(--fui-input-height, $fui-input-height);
-    min-height: var(--fui-input-height, $fui-input-height);
-    padding-block: var(--fui-space-2, $fui-space-2);
+    block-size: var(--_fui-field-track);
+    min-block-size: var(--_fui-field-track);
+    padding-block: calc(
+      (var(--_fui-field-track) - 1lh - 2 * var(--_fui-field-stroke)) / 2
+    );
     overflow-y: hidden;
   }
 }
 
 // Size variants
 .sm {
-  min-height: var(--fui-input-height-sm, $fui-input-height-sm);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include field.size("sm");
 
-  &[rows="1"] {
-    height: var(--fui-input-height-sm, $fui-input-height-sm);
-    min-height: var(--fui-input-height-sm, $fui-input-height-sm);
-    padding-block: var(--fui-space-1, $fui-space-1);
-  }
+  --_fui-textarea-block-inset: var(--fui-raw-space-6, #{measurements.raw-space(6)});
 }
 
 .md {
-  // Default size
+  @include field.size("md");
+
+  --_fui-textarea-block-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
 .lg {
-  min-height: var(--fui-input-height-lg, $fui-input-height-lg);
-  padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4);
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
+  @include field.size("lg");
 
-  &[rows="1"] {
-    height: var(--fui-input-height-lg, $fui-input-height-lg);
-    min-height: var(--fui-input-height-lg, $fui-input-height-lg);
-    padding-block: var(--fui-space-2, $fui-space-2);
-  }
+  --_fui-textarea-block-inset: var(--fui-raw-space-10, #{measurements.raw-space(10)});
 }
 
 // Resize variants
@@ -81,7 +104,7 @@
 // Error state via aria-invalid attribute (replaces JS class toggle: `error && styles.error`)
 .error,
 .textarea[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);
@@ -115,12 +138,8 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  gap: var(--fui-space-2, $fui-space-2);
-  min-height: calc(
-    var(--fui-font-size-xs, #{$fui-font-size-xs}) *
-      var(--fui-line-height-normal, #{$fui-line-height-normal}) +
-      var(--fui-space-1, #{$fui-space-1})
-  );
+  gap: layout.gap("sm");
+  min-block-size: typography.line-height("caption");
 
   &:empty {
     display: none;
@@ -129,9 +148,10 @@
 
 // Character counter
 .charCount {
-  @include helper-text;
-  margin-top: var(--fui-space-1, $fui-space-1);
-  margin-left: auto;
+  @include typography.role("caption");
+
+  margin-block-start: var(--fui-field-message-gap);
+  margin-inline-start: auto;
   font-family: var(--fui-font-mono, $fui-font-mono);
   white-space: nowrap;
 }

package/src/components/Textarea/index.tsx

@@ -127,17 +127,10 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(functi
     .filter(Boolean)
     .join(" ");
 
-  // Calculate min/max height based on rows: N text lines (line-height-normal)
-  // plus the field's vertical padding (space-3 total ≈ 1.5rem at the 14px root).
-  const rowLine = "var(--fui-line-height-normal, 1.5) * 1em";
-  const rowPad = "var(--fui-space-3, 1.5rem)";
-  const textareaInlineStyle: React.CSSProperties = {};
-  if (minRows) {
-    textareaInlineStyle.minHeight = `calc(${minRows} * ${rowLine} + ${rowPad})`;
-  }
-  if (maxRows) {
-    textareaInlineStyle.maxHeight = `calc(${maxRows} * ${rowLine} + ${rowPad})`;
-  }
+  const textareaInlineStyle = {
+    "--_fui-textarea-min-rows": minRows ?? 1,
+    "--_fui-textarea-max-rows": maxRows ?? 9999,
+  } as React.CSSProperties;
 
   return (
     <div
@@ -177,7 +170,7 @@ const TextareaRoot = React.forwardRef<HTMLTextAreaElement, TextareaProps>(functi
         onBlur={(e) => onBlur?.(e)}
         onFocus={(e) => onFocus?.(e)}
         className={textareaClasses}
-        style={Object.keys(textareaInlineStyle).length > 0 ? textareaInlineStyle : undefined}
+        style={textareaInlineStyle}
       />
       <div className={styles.footer}>
         {helperText && (

package/src/components/Theme/context.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import * as React from "react";
+
+export type ThemeMode = "light" | "dark" | "system";
+
+export interface UseThemeReturn {
+  /** Current theme mode setting */
+  mode: ThemeMode;
+  /** Set the theme mode */
+  setMode: (mode: ThemeMode) => void;
+  /** Resolved mode (never 'system', always 'light' or 'dark') */
+  resolvedMode: "light" | "dark";
+  /** System preference detected from prefers-color-scheme */
+  systemPreference: "light" | "dark";
+  /** Toggle between light and dark (skips system) */
+  toggleMode: () => void;
+}
+
+export type ThemeContextValue = UseThemeReturn;
+
+export const ThemeContext = React.createContext<ThemeContextValue | null>(null);
+
+/**
+ * Hook to access theme context.
+ */
+export function useTheme(): UseThemeReturn {
+  const context = React.useContext(ThemeContext);
+
+  if (!context) {
+    // Return safe defaults when used outside provider.
+    return {
+      mode: "system",
+      setMode: () => {},
+      resolvedMode: "light",
+      systemPreference: "light",
+      toggleMode: () => {},
+    };
+  }
+
+  return context;
+}