@usefragments/ui 1.5.4 → 1.6.0

package/src/components/Command/Command.module.scss

@@ -1,55 +1,48 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
-
-// ============================================
-// Command container
-// ============================================
+@use "../../tokens/variables" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/field" as field;
+@use "../../recipes/popup" as popup;
+@use "../../recipes/typography" as typography;
 
 .command {
-  @include surface-elevated;
+  @include popup.container;
 
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 }
 
-// ============================================
-// Input area
-// ============================================
-
 .inputWrapper {
-  @include field-shell;
+  @include field.size("md");
+  @include field.shell;
 
   display: flex;
   align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: 0 var(--fui-space-2, $fui-space-2);
-  margin: var(--fui-space-2, $fui-space-2);
-  height: var(--fui-input-height, $fui-input-height);
+  gap: var(--fui-popup-row-content-gap);
+  margin-block-end: var(--fui-popup-container-inset);
 
   &:focus-within {
-    @include field-shell-focus;
+    @include field.focus-state;
   }
 
   svg {
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
+    inline-size: action.icon-size("md");
+    block-size: action.icon-size("md");
+    flex: 0 0 auto;
     color: var(--fui-text-secondary, $fui-text-secondary);
   }
 }
 
 .input {
-  @include text-base;
-
   flex: 1;
+  min-inline-size: 0;
+  padding: 0;
   border: none;
-  background: transparent;
   outline: none;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-primary, $fui-text-primary);
-  padding: 0;
+  background: transparent;
+  font: inherit;
+  letter-spacing: inherit;
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -62,91 +55,68 @@
   }
 }
 
-// ============================================
-// List area
-// ============================================
-
 .list {
-  overflow-y: auto;
-  max-height: 300px; // scroll viewport cap (no spacing token at this size)
-  padding: var(--fui-space-1, $fui-space-1);
+  @include popup.viewport;
 }
 
-// ============================================
-// Item
-// ============================================
-
 .item {
-  @include popup-item;
+  @include popup.row;
 
-  // Command items pair an icon with a label; a slightly wider gap than the default
-  // popup-item reads better here.
-  gap: var(--fui-space-2, $fui-space-2);
-  text-align: left;
+  text-align: start;
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
+  }
+
+  > svg {
+    inline-size: var(--fui-popup-indicator-box);
+    block-size: var(--fui-popup-indicator-box);
+    flex: 0 0 auto;
   }
 }
 
-// Keyboard-active row (cmdk-style roving selection) uses the same neutral highlight.
 .itemActive {
-  @include popup-item-highlight;
+  @include popup.highlight-state;
 }
 
 .itemDisabled {
-  @include popup-item-disabled;
+  @include popup.disabled-state;
 }
 
-// ============================================
-// Group
-// ============================================
+.group:not(:first-child)::before {
+  @include popup.group-separator;
 
-.group {
-  &:not(:first-child) {
-    margin-top: var(--fui-space-1, $fui-space-1);
-  }
+  content: "";
+  display: block;
 }
 
 .groupHeading {
-  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);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  @include popup.group-label;
 }
 
-// ============================================
-// Empty state
-// ============================================
-
 .empty {
-  padding: var(--fui-space-3, $fui-space-3);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include typography.role("body-compact");
+
+  padding-block: var(--fui-popup-row-block-inset);
+  padding-inline: var(--fui-popup-row-inline-inset);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-align: center;
 }
 
-// ============================================
-// Separator
-// ============================================
-
 .separator {
-  height: 1px;
-  margin: var(--fui-space-1, $fui-space-1) 0;
-  background-color: var(--fui-border, $fui-border);
+  @include popup.group-separator;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
 @media (prefers-contrast: more) {
   .command {
-    border-width: 2px;
+    border-color: var(--fui-text-primary, $fui-text-primary);
+    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
   }
 
   .itemActive {
-    outline: 2px solid var(--fui-color-accent, $fui-color-accent);
-    outline-offset: -2px;
+    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
+      var(--fui-color-accent, $fui-color-accent);
+    outline-offset: calc(-1 * var(--fui-focus-ring-width, $fui-focus-ring-width));
   }
 }

package/src/components/ConversationList/ConversationList.module.scss

@@ -1,5 +1,7 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/representation" as representation;
+@use "../../recipes/typography" as typography;
 
 // ============================================
 // Conversation List Root
@@ -23,8 +25,8 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-3, $fui-space-3);
+  gap: layout.gap("md");
+  padding: layout.gap("lg");
   min-height: 100%;
   // Own the full height of the conversation. As a shrinkable flex item it was
   // squashed to the height of the scroll port while its messages overflowed
@@ -43,27 +45,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-3, $fui-space-3);
+  gap: layout.gap("sm");
+  padding: layout.gap("md");
   color: var(--fui-text-secondary, $fui-text-secondary);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-}
-
-.spinner {
-  animation: spin 1s linear infinite;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  @include typography.role("caption");
 }
 
 // ============================================
@@ -73,19 +58,19 @@
 .dateSeparator {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-2, $fui-space-2) 0;
+  gap: layout.gap("sm");
+  padding-block: layout.gap("sm");
 }
 
 .dateSeparatorLine {
   flex: 1;
-  height: 1px;
+  height: var(--fui-stroke-hairline, 1px);
   background-color: var(--fui-border, $fui-border);
 }
 
 .dateSeparatorText {
-  @include helper-text;
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+  @include typography.role("ui-compact");
+
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
   text-transform: uppercase;
@@ -99,8 +84,8 @@
 .typingIndicator {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-2, $fui-space-2);
+  gap: layout.gap("sm");
+  padding: layout.gap("sm");
 }
 
 .withoutAvatar {
@@ -112,61 +97,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  inline-size: representation.avatar-size("sm");
+  block-size: representation.avatar-size("sm");
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   color: var(--fui-text-secondary, $fui-text-secondary);
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
 }
 
 .typingContent {
   display: flex;
   align-items: center;
-  gap: calc(var(--fui-space-px, $fui-space-px) * 4);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding-block: layout.gap("sm");
+  padding-inline: layout.gap("md");
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
 }
-
-.typingDot {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--fui-radius-full, $fui-radius-full);
-  background-color: var(--fui-text-tertiary, $fui-text-tertiary);
-  animation: bounce 1.4s ease-in-out infinite;
-
-  &:nth-child(1) {
-    animation-delay: 0s;
-  }
-
-  &:nth-child(2) {
-    animation-delay: 0.2s;
-  }
-
-  &:nth-child(3) {
-    animation-delay: 0.4s;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-    opacity: 0.6;
-  }
-}
-
-@keyframes bounce {
-  0%,
-  60%,
-  100% {
-    transform: translateY(0);
-    opacity: 0.4;
-  }
-  30% {
-    transform: translateY(-$fui-anim-offset-sm);
-    opacity: 1;
-  }
-}

package/src/components/ConversationList/index.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import styles from './ConversationList.module.scss';
-import { Loading } from '../Loading';
+import * as React from "react";
+import styles from "./ConversationList.module.scss";
+import { Loading } from "../Loading";
 
 // ============================================
 // Types
 // ============================================
 
-export type AutoScrollBehavior = boolean | 'smart';
+export type AutoScrollBehavior = boolean | "smart";
 
 export interface ConversationListProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Message components */
@@ -61,7 +61,7 @@ export function useOptionalConversationList() {
 export function useConversationList() {
   const context = useOptionalConversationList();
   if (!context) {
-    throw new Error('useConversationList must be used within a ConversationList');
+    throw new Error("useConversationList must be used within a ConversationList");
   }
   return context;
 }
@@ -77,20 +77,19 @@ function formatDateSeparator(date: Date): string {
   const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
 
   if (dateOnly.getTime() === today.getTime()) {
-    return 'Today';
+    return "Today";
   }
   if (dateOnly.getTime() === yesterday.getTime()) {
-    return 'Yesterday';
+    return "Yesterday";
   }
 
   return date.toLocaleDateString(undefined, {
-    weekday: 'long',
-    month: 'long',
-    day: 'numeric',
+    weekday: "long",
+    month: "long",
+    day: "numeric",
   });
 }
 
-
 // ============================================
 // Sub-components
 // ============================================
@@ -103,7 +102,7 @@ function DateSeparator({
 }: DateSeparatorProps) {
   const formatted = customFormat ? customFormat(date) : formatDateSeparator(date);
 
-  const classes = [styles.dateSeparator, className].filter(Boolean).join(' ');
+  const classes = [styles.dateSeparator, className].filter(Boolean).join(" ");
 
   return (
     <div {...htmlProps} className={classes} role="separator">
@@ -115,25 +114,28 @@ function DateSeparator({
 }
 
 function TypingIndicator({
-  name = 'Assistant',
+  name = "Assistant",
   avatar,
   className,
   ...htmlProps
 }: TypingIndicatorProps) {
   const showAvatar = (useOptionalConversationList()?.showAvatars ?? true) && Boolean(avatar);
-  const classes = [
-    styles.typingIndicator,
-    !showAvatar && styles.withoutAvatar,
-    className,
-  ].filter(Boolean).join(' ');
+  const classes = [styles.typingIndicator, !showAvatar && styles.withoutAvatar, className]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <div {...htmlProps} className={classes} role="status" aria-label={`${name} is typing`}>
       {showAvatar && <div className={styles.typingAvatar}>{avatar}</div>}
       <div className={styles.typingContent}>
-        <span className={styles.typingDot} />
-        <span className={styles.typingDot} />
-        <span className={styles.typingDot} />
+        <Loading
+          size="sm"
+          variant="dots"
+          color="muted"
+          label=""
+          role="presentation"
+          aria-hidden="true"
+        />
       </div>
     </div>
   );
@@ -146,7 +148,7 @@ function TypingIndicator({
 function ConversationListRoot({
   children,
   showAvatars = true,
-  autoScroll = 'smart',
+  autoScroll = "smart",
   onScrollTop,
   loadingHistory = false,
   emptyState,
@@ -170,7 +172,7 @@ function ConversationListRoot({
   }, [scrollBottomThreshold]);
 
   // Scroll to bottom
-  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = 'smooth') => {
+  const scrollToBottom = React.useCallback((behavior: ScrollBehavior = "smooth") => {
     const container = containerRef.current;
     if (!container) return;
 
@@ -181,21 +183,24 @@ function ConversationListRoot({
   }, []);
 
   // Handle scroll events
-  const handleScroll = React.useCallback((event: React.UIEvent<HTMLDivElement>) => {
-    userOnScroll?.(event);
-    if (event.defaultPrevented) return;
-
-    const container = containerRef.current;
-    if (!container) return;
-
-    // Update near-bottom status for smart scroll
-    isNearBottomRef.current = checkIsNearBottom();
-
-    // Check for scroll-to-top (history loading)
-    if (onScrollTop && container.scrollTop <= scrollTopThreshold) {
-      onScrollTop(event);
-    }
-  }, [checkIsNearBottom, onScrollTop, scrollTopThreshold, userOnScroll]);
+  const handleScroll = React.useCallback(
+    (event: React.UIEvent<HTMLDivElement>) => {
+      userOnScroll?.(event);
+      if (event.defaultPrevented) return;
+
+      const container = containerRef.current;
+      if (!container) return;
+
+      // Update near-bottom status for smart scroll
+      isNearBottomRef.current = checkIsNearBottom();
+
+      // Check for scroll-to-top (history loading)
+      if (onScrollTop && container.scrollTop <= scrollTopThreshold) {
+        onScrollTop(event);
+      }
+    },
+    [checkIsNearBottom, onScrollTop, scrollTopThreshold, userOnScroll]
+  );
 
   // Keep the reader at the newest content as the conversation grows.
   //
@@ -214,32 +219,27 @@ function ConversationListRoot({
     // growth, and overlapping smooth scrolls fight each other into a stutter.
     // The context's scrollToBottom() stays smooth for deliberate jumps.
     const observer = new ResizeObserver(() => {
-      if (autoScroll === true || isNearBottomRef.current) scrollToBottom('instant');
+      if (autoScroll === true || isNearBottomRef.current) scrollToBottom("instant");
     });
     observer.observe(content);
     return () => observer.disconnect();
   }, [autoScroll, scrollToBottom]);
 
-  const contextValue = React.useMemo<ConversationListContextValue>(() => ({
-    scrollToBottom,
-    showAvatars,
-  }), [scrollToBottom, showAvatars]);
+  const contextValue = React.useMemo<ConversationListContextValue>(
+    () => ({
+      scrollToBottom,
+      showAvatars,
+    }),
+    [scrollToBottom, showAvatars]
+  );
 
   const hasChildren = React.Children.count(children) > 0;
 
-  const classes = [
-    styles.conversationList,
-    className,
-  ].filter(Boolean).join(' ');
+  const classes = [styles.conversationList, className].filter(Boolean).join(" ");
 
   return (
     <ConversationListContext.Provider value={contextValue}>
-      <div
-        {...htmlProps}
-        ref={containerRef}
-        className={classes}
-        onScroll={handleScroll}
-      >
+      <div {...htmlProps} ref={containerRef} className={classes} onScroll={handleScroll}>
         {loadingHistory && (
           <div className={styles.loadingHistory}>
             <Loading size="md" variant="spinner" color="muted" label="Loading history" />
@@ -264,8 +264,4 @@ export const ConversationList = Object.assign(ConversationListRoot, {
   TypingIndicator,
 });
 
-export {
-  ConversationListRoot,
-  DateSeparator,
-  TypingIndicator,
-};
+export { ConversationListRoot, DateSeparator, TypingIndicator };