@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/ui/avatar-stack.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from '../../utils/cn';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
-import { useLoadingScope } from './loading-scope';
+import { LoadingItems, useLoadingScope } from './loading-scope';
 import { SquareAvatar } from './square-avatar';
 
 /**
@@ -51,6 +51,9 @@ export interface AvatarStackProps {
    *  Default "Assignees". */
   label?: string;
   className?: string;
+  /** The people are still being read: the stack draws its skeleton, `slots ?? max` faces of its size. A loading scope
+   *  does the same. */
+  loading?: boolean;
 }
 
 /** Face diameter and how far each later face tucks under the previous one — the
@@ -72,9 +75,12 @@ const overlapClass = (size: AvatarStackSize) => (size === 'xs' ? '-ml-2' : '-ml-
 const slotsWidthStyle = (size: AvatarStackSize, slots?: number) =>
   slots ? { width: SIZE_PX[size] + (slots - 1) * (SIZE_PX[size] - OVERLAP_PX[size]) } : undefined;
 
+/** Faces a stack shows when the host states no `max`, and so the faces it draws while its people are read. */
+const AVATAR_STACK_MAX_FACES = 3;
+
 /** A stack while its people are read: `count` overlapped circles of the faces' size. */
-export function AvatarStackSkeleton({
-  count = 3,
+function AvatarStackSkeleton({
+  count = AVATAR_STACK_MAX_FACES,
   size = 'md',
   slots,
   className,
@@ -90,31 +96,33 @@ export function AvatarStackSkeleton({
       className={cn(STACK_ROW_CLASS, slots && 'shrink-0', className)}
       style={slotsWidthStyle(size, slots)}
     >
-      {Array.from({ length: count }, (_, i) => (
-        <UnifiedSkeleton
-          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton faces never reorder
-          key={i}
-          variant="circular"
-          className={cn('relative shrink-0 ring-2 ring-ods-card', i > 0 && overlapClass(size))}
-          width={SIZE_PX[size]}
-          height={SIZE_PX[size]}
-        />
-      ))}
+      <LoadingItems count={count}>
+        {i => (
+          <UnifiedSkeleton
+            data-loading-item
+            variant="circular"
+            className={cn('relative shrink-0 ring-2 ring-ods-card', i > 0 && overlapClass(size))}
+            width={SIZE_PX[size]}
+            height={SIZE_PX[size]}
+          />
+        )}
+      </LoadingItems>
     </div>
   );
 }
 
 export function AvatarStack({
   people,
-  max = 3,
+  max = AVATAR_STACK_MAX_FACES,
   slots,
   total,
   size = 'md',
   ringClassName = 'ring-ods-card',
   label = 'Assignees',
   className,
+  loading: loadingProp,
 }: AvatarStackProps) {
-  const loading = useLoadingScope();
+  const loading = useLoadingScope() || !!loadingProp;
   if (loading) return <AvatarStackSkeleton count={slots ?? max} size={size} slots={slots} className={className} />;
   if (people.length === 0) return null;
   const groupSize = Math.max(total ?? people.length, people.length);
@@ -136,6 +144,7 @@ export function AvatarStack({
       {visible.map((person, i) => (
         <SquareAvatar
           key={person.key ?? `${person.name}-${i}`}
+          data-loading-item
           variant="round"
           size={size}
           src={person.avatarUrl ?? undefined}

package/src/components/ui/badge.tsx

@@ -5,6 +5,7 @@ import type { HTMLAttributes } from 'react';
 
 import { cn } from '../../utils/cn';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 const badgeVariants = cva(
   // Weight from the ODS token. Scale stays at 12px rather than the `text-h6`
@@ -27,9 +28,14 @@ const badgeVariants = cva(
   },
 );
 
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  /** The badge's text is still being read: it draws its loading form (also inside a loading scope). */
+  loading?: boolean;
+}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+/** A badge; while its text is read (`loading`, or a loading scope) its own loading form, the badge's box. */
+function Badge({ className, variant, loading, ...props }: BadgeProps) {
+  if (useLoadingScope() || loading) return <BadgeSkeleton className={className} />;
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
@@ -47,4 +53,4 @@ function BadgeSkeleton({ className }: { className?: string }) {
   );
 }
 
-export { Badge, BadgeSkeleton, badgeVariants };
+export { Badge, badgeVariants };

package/src/components/ui/breadcrumb.tsx

@@ -5,6 +5,8 @@ import { ChevronRight, MoreHorizontal } from 'lucide-react';
 import { type ComponentProps, type ComponentPropsWithoutRef, type ReactNode, forwardRef } from 'react';
 
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
 
 const Breadcrumb = forwardRef<
   HTMLElement,
@@ -35,8 +37,13 @@ const BreadcrumbLink = forwardRef<
   HTMLAnchorElement,
   ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean;
+    /** The link's label is still being read: a bar the height of its line (also inside a loading scope). */
+    loading?: boolean;
   }
->(({ asChild, className, ...props }, ref) => {
+>(({ asChild, className, loading, ...props }, ref) => {
+  const inScope = useLoadingScope();
+  // ONE switch: while its label is read the link is a bar the height of its line (`text-h6`).
+  if (inScope || loading) return <UnifiedSkeleton as="span" className={cn('inline-block h-5 w-16', className)} />;
   const Comp = asChild ? Slot : 'a';
 
   return <Comp ref={ref} className={cn('transition-colors hover:text-ods-text-primary', className)} {...props} />;

package/src/components/ui/button/button-styles.ts

@@ -125,3 +125,82 @@ export const BUTTON_SIZE_CLASS = {
 } as const;
 
 export type ButtonSizeKey = keyof typeof BUTTON_SIZE_CLASS;
+
+const KIND_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus';
+const KIND_FOCUS_INSET =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus';
+
+/**
+ * The button KINDS that are not a plain push button: each owns its whole box and look, which no `size` changes, and
+ * is reused by every control of its kind. A kind's selected / open / invalid state is read from the element's own
+ * attributes, never from a class at the call site:
+ *
+ *  - `data-state="active"` (Radix's convention): the selected row, tab or chip;
+ *  - `data-state="open"` / `aria-expanded="true"`: the field whose popup is open;
+ *  - `data-invalid`: the field that failed validation (the marker every field exposes);
+ *  - `aria-pressed="true"`: the pressed chip.
+ *
+ * A call site's `className` on a kind is layout only (width, flex, position, margin).
+ */
+export const BUTTON_KIND_CLASS = {
+  // A control drawn as a form field (a date picker's, a searchable select's, a popup's trigger): Input's box, border
+  // and states, the value on the left.
+  field: [
+    'flex w-full items-center gap-[var(--spacing-system-xsf)] border px-[var(--spacing-system-sf)] text-left',
+    'h-11 rounded-[6px] md:h-12',
+    'border-ods-border bg-ods-card text-ods-text-primary text-h4 transition-colors duration-200',
+    'enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active',
+    'data-[state=open]:border-ods-accent aria-expanded:border-ods-accent',
+    'data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error',
+    'disabled:cursor-not-allowed disabled:bg-ods-bg disabled:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled',
+    'outline-none focus-visible:border-ods-accent',
+    '[&_svg]:shrink-0',
+  ].join(' '),
+  // A clickable row of a list, a menu or a navigation: full width, its content on the left, the hover and the
+  // selected surface of the list.
+  row: [
+    'flex w-full items-center gap-[var(--spacing-system-s)] rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left',
+    'bg-transparent text-ods-text-primary text-h4 transition-colors duration-150',
+    'hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-active',
+    'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-transparent',
+    KIND_FOCUS_INSET,
+    '[&_svg]:shrink-0',
+  ].join(' '),
+  // A tab of a tab strip or a tab list: secondary until it is the open one. A strip that marks its open and hovered
+  // tab with the accent fade (the admin strip) says so on each tab with `data-emphasis="fade"`. ODS colour vars hold
+  // hex values, so a Tailwind alpha modifier would produce no CSS; color-mix() derives the 10% stop from the token.
+  tab: [
+    'group relative flex shrink-0 items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
+    'bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200',
+    'hover:text-ods-text-primary data-[state=active]:text-ods-text-primary',
+    'data-[emphasis=fade]:data-[state=active]:bg-gradient-to-b data-[emphasis=fade]:data-[state=active]:from-transparent data-[emphasis=fade]:data-[state=active]:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]',
+    'data-[emphasis=fade]:hover:bg-gradient-to-b data-[emphasis=fade]:hover:from-transparent data-[emphasis=fade]:hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]',
+    'disabled:cursor-not-allowed disabled:text-ods-text-disabled',
+    KIND_FOCUS_INSET,
+    '[&_svg]:shrink-0',
+  ].join(' '),
+  // A choice drawn as a pill (a filter, a quick question, an answer option): bordered, the accent when picked.
+  chip: [
+    'inline-flex h-8 items-center gap-[var(--spacing-system-xxs)] rounded-full border px-[var(--spacing-system-sf)]',
+    'border-ods-border bg-ods-card text-ods-text-primary text-h6 transition-colors duration-200',
+    'hover:border-ods-border-hover hover:bg-ods-bg-hover',
+    'aria-pressed:border-ods-accent data-[state=active]:border-ods-accent',
+    'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-ods-card',
+    KIND_FOCUS,
+    '[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0',
+  ].join(' '),
+  // A whole card or tile that is one click target (a card's hit area, a media tile, a summary that expands): the
+  // content is the look; the button gives it the click, the keyboard and the focus ring.
+  card: ['relative block w-full rounded-md text-left text-ods-text-primary', KIND_FOCUS].join(' '),
+  // A cell of a bar (a header's or a chat's top bar): the bar's full height, an icon or a short label, secondary
+  // until hovered or pressed.
+  cell: [
+    'flex h-full shrink-0 items-center justify-center gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-m)]',
+    'bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200',
+    'hover:bg-ods-bg-hover hover:text-ods-text-primary aria-pressed:text-ods-accent aria-expanded:text-ods-text-primary data-[state=active]:text-ods-accent',
+    KIND_FOCUS_INSET,
+    '[&_svg]:h-6 [&_svg]:w-6 [&_svg]:shrink-0',
+  ].join(' '),
+} as const;
+
+export type ButtonKind = keyof typeof BUTTON_KIND_CLASS;

package/src/components/ui/button/button.tsx

@@ -5,8 +5,11 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
+import { loadingItemProps } from '../loading-scope';
 import {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS,
+  type ButtonKind,
   buttonSurfaceClasses,
   outlineBorderClasses,
   splitDividerColorClasses,
@@ -38,6 +41,14 @@ const buttonVariants = cva(
         glyph: buttonSurfaceClasses.glyph,
         overlay: buttonSurfaceClasses.overlay,
         link: buttonSurfaceClasses.link,
+        // The kinds that are not a plain push button own their whole box (`BUTTON_KIND_CLASS`); resolved
+        // before this map is read, so `size` never reaches them. The entries only type the prop.
+        field: '',
+        row: '',
+        tab: '',
+        chip: '',
+        card: '',
+        cell: '',
       },
       size: BUTTON_SIZE_CLASS,
       // Label typography axis (Figma 133-740). `bold` is the classic h3-bold
@@ -69,6 +80,23 @@ const buttonVariants = cva(
     compoundVariants: [
       // The trailing half as an icon button is the design's 40px chevron cell, at every breakpoint.
       { attach: 'end', size: 'icon', class: 'w-10 px-0 md:w-10' },
+      { attach: 'end', size: 'small', class: 'w-6 px-0 md:w-8' },
+      // The seam between two attached halves of a filled button: a 1px darker edge on the trailing half.
+      {
+        attach: 'end',
+        variant: 'accent',
+        class: cn('border-l', splitDividerColorClasses.accent, 'disabled:border-ods-disabled'),
+      },
+      {
+        attach: 'end',
+        variant: 'destructive',
+        class: cn('border-l', splitDividerColorClasses.destructive, 'disabled:border-ods-disabled'),
+      },
+      {
+        attach: 'end',
+        variant: 'warning',
+        class: cn('border-l', splitDividerColorClasses.warning, 'disabled:border-ods-disabled'),
+      },
       { size: 'small', class: '[&_svg]:h-4 [&_svg]:w-4' },
       // Comes after the size classes, so cn()'s tailwind-merge resolves the
       // ods-typography group in favour of text-h4.
@@ -264,10 +292,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
   ref,
 ) {
   const isDisabled = disabled || loading;
+  const kind = variant && variant in BUTTON_KIND_CLASS ? (variant as ButtonKind) : null;
 
   // splitIcon is only supported for default/small sizes. With other sizes
   // (icon, small-legacy) we silently fall back to the normal layout.
-  const useSplitLayout = !!splitIcon && (size === 'default' || size === 'small' || size === undefined);
+  const useSplitLayout = !kind && !!splitIcon && (size === 'default' || size === 'small' || size === undefined);
 
   if (useSplitLayout) {
     const safeSize = size ?? 'default';
@@ -321,6 +350,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
           // The click still reaches the caller (a download is what analytics counts).
           onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
           aria-label={props['aria-label']}
+          {...loadingItemProps(props)}
         >
           {splitContent}
         </Link>
@@ -355,6 +385,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
           tabIndex={isDisabled ? -1 : undefined}
           className={cn(shellClasses, isDisabled && 'pointer-events-none')}
           onClick={splitAnchor.onClick}
+          // A list's markers (`data-loading-item`) survive on an anchor too.
+          {...loadingItemProps(props)}
         >
           {splitContent}
         </Link>
@@ -368,7 +400,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
     );
   }
 
-  const classes = cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
+  const classes = kind
+    ? cn(BUTTON_KIND_CLASS[kind], loading && 'relative', fullWidth && 'w-full', className)
+    : cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
 
   // asChild: consumer fully controls the rendered element; we just stamp our classes.
   if (asChild) {

package/src/components/ui/button/index.ts

@@ -1,3 +1,3 @@
 export * from './button';
 export * from './split-button';
-export { BUTTON_SIZE_CLASS, type ButtonSizeKey } from './button-styles';
+export { BUTTON_KIND_CLASS, BUTTON_SIZE_CLASS, type ButtonKind, type ButtonSizeKey } from './button-styles';

package/src/components/ui/button/split-button.tsx

@@ -1,89 +1,15 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
 import React from 'react';
-import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
-import { buttonSurfaceClasses, splitDividerColorClasses, splitGlyphSizeClasses } from './button-styles';
+import { Button } from './button';
 
-// Two independent interactive halves: each a `<button>` or `<a>`. The seam is
-// a 1px border on the left edge of the icon half, colored per variant. For a
-// single-target variant (decorative trailing icon), use `<Button splitIcon>`.
+// Two independent interactive halves, each the lib's `Button` (a `<button>`, or a link with `href`) attached to the
+// other (`attach="start"` / `"end"`): one surface with a seam. For a single-target variant (decorative trailing icon),
+// use `<Button splitIcon>`.
 
-const splitHalfBase = [
-  'relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]',
-  'whitespace-nowrap transition-colors duration-200',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:z-10',
-  'disabled:pointer-events-none',
-  '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-];
-
-const splitHalfVariants = cva(splitHalfBase, {
-  variants: {
-    variant: {
-      accent: buttonSurfaceClasses.accent,
-      outline: buttonSurfaceClasses.outline, // Outline border lives in compoundVariants so we can omit the seam edge.
-      transparent: buttonSurfaceClasses.transparent,
-      destructive: buttonSurfaceClasses.destructive,
-      warning: buttonSurfaceClasses.warning,
-    },
-    size: {
-      default: `h-10 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 md:h-12 ${splitGlyphSizeClasses}`,
-      small: 'h-6 px-[var(--spacing-system-xs)] text-h5 md:h-8 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4',
-    },
-    side: { main: '', icon: '' },
-    soloOnMobile: { true: '', false: '' },
-  },
-  compoundVariants: [
-    // Rounded corners + per-variant seam. The icon-side's left border is the divider.
-    { variant: 'accent', side: 'main', class: 'rounded-l-md' },
-    {
-      variant: 'accent',
-      side: 'icon',
-      class: cn(
-        'rounded-r-md border-l',
-        splitDividerColorClasses.accent,
-        'disabled:border-ods-disabled aria-disabled:border-ods-disabled',
-      ),
-    },
-    { variant: 'destructive', side: 'main', class: 'rounded-l-md' },
-    {
-      variant: 'destructive',
-      side: 'icon',
-      class: cn(
-        'rounded-r-md border-l',
-        splitDividerColorClasses.destructive,
-        'disabled:border-ods-disabled aria-disabled:border-ods-disabled',
-      ),
-    },
-    { variant: 'warning', side: 'main', class: 'rounded-l-md' },
-    {
-      variant: 'warning',
-      side: 'icon',
-      class: cn(
-        'rounded-r-md border-l',
-        splitDividerColorClasses.warning,
-        'disabled:border-ods-disabled aria-disabled:border-ods-disabled',
-      ),
-    },
-    { variant: 'outline', side: 'main', class: 'rounded-l-md border-y border-l border-ods-border' },
-    { variant: 'outline', side: 'icon', class: 'rounded-r-md border border-ods-border' },
-    { variant: 'transparent', side: 'main', class: 'rounded-md' },
-    { variant: 'transparent', side: 'icon', class: cn('rounded-md', splitDividerColorClasses.transparent) },
-
-    // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
-    { side: 'icon', size: 'default', class: 'w-10 px-0' },
-    { side: 'icon', size: 'small', class: 'w-6 px-0 md:w-8' },
-
-    { side: 'icon', soloOnMobile: true, class: 'max-md:hidden' },
-    { side: 'main', soloOnMobile: true, class: 'max-md:rounded-r-md' },
-    { variant: 'outline', side: 'main', soloOnMobile: true, class: 'max-md:border-r' },
-  ],
-  defaultVariants: { variant: 'accent', size: 'default', side: 'main', soloOnMobile: false },
-});
-
-type SplitButtonVariant = NonNullable<VariantProps<typeof splitHalfVariants>['variant']>;
-type SplitButtonSize = NonNullable<VariantProps<typeof splitHalfVariants>['size']>;
+type SplitButtonVariant = 'accent' | 'outline' | 'transparent' | 'destructive' | 'warning';
+type SplitButtonSize = 'default' | 'small';
 
 interface SplitButtonIconAction {
   icon: React.ReactNode;
@@ -157,30 +83,23 @@ function Half({
   ariaLabel,
   children,
 }: HalfOptions) {
-  const classes = cn(splitHalfVariants({ variant, size, side, soloOnMobile }), grow && 'flex-1');
-
-  if (href) {
-    return (
-      <Link
-        href={href}
-        prefetch={prefetch}
-        target={openInNewTab ? '_blank' : undefined}
-        rel={openInNewTab ? 'noopener noreferrer' : undefined}
-        aria-disabled={disabled || undefined}
-        tabIndex={disabled ? -1 : undefined}
-        aria-label={ariaLabel}
-        className={cn(classes, disabled && 'pointer-events-none')}
-        onClick={onClick}
-      >
-        {children}
-      </Link>
-    );
-  }
-
   return (
-    <button type={type} className={classes} disabled={disabled} aria-label={ariaLabel} onClick={onClick}>
+    <Button
+      type={type}
+      variant={variant}
+      size={side === 'main' ? size : size === 'small' ? 'small' : 'icon'}
+      attach={side === 'main' ? 'start' : 'end'}
+      href={href}
+      openInNewTab={openInNewTab}
+      prefetch={prefetch}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      // Layout only: the main half fills the group's free space; a new-tab icon half is dropped below md.
+      className={cn(grow && 'flex-1', side === 'icon' && soloOnMobile && 'max-md:hidden')}
+    >
       {children}
-    </button>
+    </Button>
   );
 }