@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/src/primitives/avatar.tsx

@@ -1,7 +1,32 @@
+"use client"
+
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+
 import { cn } from '@open-mercato/shared/lib/utils'
 
+/**
+ * User / entity avatar with auto-generated initials, optional photo,
+ * optional icon override, optional **status indicator** (online/away/
+ * busy/away dot per Figma `Bottom Status [1.1]`), optional **badge**
+ * slot for top-right affordances (verified check, premium icon, X to
+ * remove — per Figma `Top Status [1.1]`), and optional outer **ring**
+ * (accent / status-colored).
+ *
+ * Phase B.4 rewrite per Figma `Avatars` page (`210:4129`):
+ * - `Avatar [1.1]` (`245:18786`)
+ * - `Bottom Status [1.1]` (`245:18721`) — 5 dot tones
+ * - `Top Status [1.1]` (`245:18697`) — 6 icon-badge variants
+ * - `Avatar Group [1.1]` (`581:6198`) + `Compact Avatar Group [1.1]`
+ *   (`2906:14962`) — see `AvatarStack`.
+ *
+ * Backward compatibility (5 import sites — customers linking
+ * adapters + LinkEntityDialog + ds-v5 demo): existing
+ * `<Avatar src label size variant icon />` API stays callable
+ * verbatim. New optional props (`status`, `statusPosition`, `ring`,
+ * `badge`, `badgeClassName`) are additive.
+ */
+
 const avatarVariants = cva(
   'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold select-none',
   {
@@ -37,38 +62,213 @@ function computeInitials(label: string): string {
   return (first + last).toUpperCase()
 }
 
+// Status tone → background color class. Surface stays opaque + ringed
+// by the page background (`ring-background`) so the badge reads as
+// an overlay on top of the avatar circle.
+export type AvatarStatus =
+  | 'online'
+  | 'offline'
+  | 'busy'
+  | 'away'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+
+const AVATAR_STATUS_BG: Record<AvatarStatus, string> = {
+  online: 'bg-status-success-icon',
+  offline: 'bg-muted-foreground',
+  busy: 'bg-status-error-icon',
+  away: 'bg-status-warning-icon',
+  success: 'bg-status-success-icon',
+  warning: 'bg-status-warning-icon',
+  error: 'bg-status-error-icon',
+  info: 'bg-status-info-icon',
+}
+
+// Status dot size per avatar size — slightly less than 1/3 of the
+// avatar diameter so the dot reads but doesn't overpower.
+const AVATAR_STATUS_SIZE: Record<NonNullable<VariantProps<typeof avatarVariants>['size']>, string> = {
+  xs: 'size-1.5',
+  sm: 'size-2',
+  md: 'size-2.5',
+  lg: 'size-3',
+  xl: 'size-4',
+}
+
+// Outer ring tones (story-style highlight, selected, status outline).
+export type AvatarRingTone = 'accent' | 'success' | 'warning' | 'error' | 'muted'
+
+const AVATAR_RING_CLASS: Record<AvatarRingTone, string> = {
+  accent: 'ring-2 ring-accent-indigo ring-offset-2 ring-offset-background',
+  success: 'ring-2 ring-status-success-icon ring-offset-2 ring-offset-background',
+  warning: 'ring-2 ring-status-warning-icon ring-offset-2 ring-offset-background',
+  error: 'ring-2 ring-status-error-icon ring-offset-2 ring-offset-background',
+  muted: 'ring-2 ring-input ring-offset-2 ring-offset-background',
+}
+
 export type AvatarProps = {
   label: string
   src?: string | null
   icon?: React.ReactNode
   ariaLabel?: string
+  /** Bottom-right (default) or top-right status dot. */
+  status?: AvatarStatus
+  /** Where the status dot sits. @default 'bottom-right' */
+  statusPosition?: 'bottom-right' | 'top-right'
+  /** Outer ring affordance — pass `true` for accent (alias for
+   * `'accent'`) or a specific tone. */
+  ring?: boolean | AvatarRingTone
+  /** Custom top-right badge slot — overrides `status` when both are
+   * set with `statusPosition='top-right'`. Use for verified check
+   * icons, premium markers, "X to remove" affordances per Figma
+   * `Top Status [1.1]`. The badge content is rendered inside a
+   * `rounded-full ring-2 ring-background` shell sized relative to
+   * the avatar — pass a simple icon (`<Check className="size-3" />`)
+   * for the cleanest look. */
+  badge?: React.ReactNode
+  /** Override the badge wrapper className (size, bg, etc.). */
+  badgeClassName?: string
 } & VariantProps<typeof avatarVariants> &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'>
 
-export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
-  ({ className, label, src, icon, size, variant, ariaLabel, ...rest }, ref) => {
-    const initials = React.useMemo(() => computeInitials(label), [label])
+type AvatarCircleProps = Omit<
+  AvatarProps,
+  'status' | 'statusPosition' | 'ring' | 'badge' | 'badgeClassName'
+> & {
+  className?: string
+}
+
+// Inner div (the actual avatar circle). Implemented as forwardRef so
+// the outer Avatar wrapper can forward refs through to the rendered
+// `<div role="img">` regardless of whether it lives directly inside
+// Avatar or inside the decorated `<span data-slot="avatar-root">`
+// wrapper.
+const AvatarCircle = React.forwardRef<HTMLDivElement, AvatarCircleProps>(function AvatarCircle(
+  { className, label, src, icon, size, variant, ariaLabel, ...rest },
+  ref,
+) {
+  const initials = React.useMemo(() => computeInitials(label), [label])
+  return (
+    <div
+      ref={ref}
+      role="img"
+      aria-label={ariaLabel ?? label}
+      data-slot="avatar"
+      className={cn(avatarVariants({ size, variant }), className)}
+      {...rest}
+    >
+      {src ? (
+        <img src={src} alt="" className="size-full object-cover" aria-hidden="true" />
+      ) : icon ? (
+        <span aria-hidden="true" className="flex items-center justify-center [&>svg]:size-[55%]">
+          {icon}
+        </span>
+      ) : (
+        <span aria-hidden="true">{initials}</span>
+      )}
+    </div>
+  )
+})
+
+export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
+  const {
+    className,
+    label,
+    src,
+    icon,
+    size = 'md',
+    variant,
+    ariaLabel,
+    status,
+    statusPosition = 'bottom-right',
+    ring,
+    badge,
+    badgeClassName,
+    ...rest
+  } = props
+
+  const resolvedRingTone: AvatarRingTone | null = ring === true ? 'accent' : ring || null
+  const showStatus = status !== undefined
+  const showBadge =
+    badge !== undefined && (statusPosition === 'top-right' || !showStatus)
+  const showTopStatus = showStatus && statusPosition === 'top-right' && !showBadge
+  const showBottomStatus = showStatus && statusPosition === 'bottom-right' && badge === undefined
+
+  // Plain avatar (no overlay decorations) — preserve the original
+  // single-element output for backward compat.
+  if (!showStatus && !showBadge && !resolvedRingTone) {
     return (
-      <div
-        ref={ref}
-        role="img"
-        aria-label={ariaLabel ?? label}
-        className={cn(avatarVariants({ size, variant }), className)}
+      <AvatarCircle
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={className}
+        label={label}
+        src={src}
+        icon={icon}
+        size={size}
+        variant={variant}
+        ariaLabel={ariaLabel}
         {...rest}
-      >
-        {src ? (
-          <img src={src} alt="" className="size-full object-cover" aria-hidden="true" />
-        ) : icon ? (
-          <span aria-hidden="true" className="flex items-center justify-center [&>svg]:size-[55%]">
-            {icon}
-          </span>
-        ) : (
-          <span aria-hidden="true">{initials}</span>
-        )}
-      </div>
+      />
     )
-  },
-)
+  }
+
+  const ringClass = resolvedRingTone ? AVATAR_RING_CLASS[resolvedRingTone] : ''
+  const statusSize = AVATAR_STATUS_SIZE[size ?? 'md']
+  const statusPositionClass =
+    statusPosition === 'top-right'
+      ? '-right-0 -top-0 translate-x-1/4 -translate-y-1/4'
+      : '-right-0 -bottom-0 translate-x-1/4 translate-y-1/4'
+  const badgePositionClass = '-right-0 -top-0 translate-x-1/4 -translate-y-1/4'
+
+  return (
+    <span
+      data-slot="avatar-root"
+      className={cn('relative inline-flex shrink-0 rounded-full', ringClass)}
+    >
+      <AvatarCircle
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={className}
+        label={label}
+        src={src}
+        icon={icon}
+        size={size}
+        variant={variant}
+        ariaLabel={ariaLabel}
+        {...rest}
+      />
+      {showBottomStatus || showTopStatus ? (
+        <span
+          data-slot="avatar-status"
+          data-status={status}
+          data-position={statusPosition}
+          aria-hidden="true"
+          className={cn(
+            'absolute inline-block rounded-full ring-2 ring-background',
+            statusSize,
+            AVATAR_STATUS_BG[status as AvatarStatus],
+            statusPositionClass,
+          )}
+        />
+      ) : null}
+      {showBadge ? (
+        <span
+          data-slot="avatar-badge"
+          aria-hidden="true"
+          className={cn(
+            'absolute inline-flex items-center justify-center rounded-full ring-2 ring-background bg-background text-foreground',
+            // Default size ~40% of avatar; consumer overrides via badgeClassName.
+            size === 'xs' || size === 'sm' ? 'size-3.5' : size === 'md' ? 'size-4' : size === 'lg' ? 'size-5' : 'size-6',
+            badgePositionClass,
+            badgeClassName,
+          )}
+        >
+          {badge}
+        </span>
+      ) : null}
+    </span>
+  )
+})
 
 Avatar.displayName = 'Avatar'
 
@@ -87,7 +287,10 @@ export function AvatarStack({ children, max = 4, size = 'md', className }: Avata
   const overflow = items.length - max
 
   return (
-    <div className={cn('flex items-center [&>*:not(:first-child)]:-ml-2 [&>*]:ring-2 [&>*]:ring-background', className)}>
+    <div
+      data-slot="avatar-stack"
+      className={cn('flex items-center [&>*:not(:first-child)]:-ml-2 [&>*]:ring-2 [&>*]:ring-background', className)}
+    >
       {visible}
       {overflow > 0 && (
         <Avatar label={`+${overflow}`} size={size} variant="monochrome" className="-ml-2" />

package/src/primitives/badge.tsx

@@ -1,14 +1,48 @@
+"use client"
+
 import * as React from 'react'
+import { X } from 'lucide-react'
 import { cva, type VariantProps } from 'class-variance-authority'
+
 import { cn } from '@open-mercato/shared/lib/utils'
 
+/**
+ * Status / category pill primitive. Phase B.8 rewrite per Figma
+ * `Badge` page (`119:2863`) — `Badge [1.1]` (`118:2324`, color + size
+ * matrix) and `Status Badge [1.1]` (`171:5100`, semantic-colored
+ * status pills).
+ *
+ * Backward compatibility (83 import sites — biggest cascade in v5):
+ * - The complete `variant` union (`default | secondary | destructive
+ *   | outline | muted | success | warning | info | neutral | error`)
+ *   stays callable verbatim.
+ * - Every existing import-site renders identically — no padding
+ *   bump, no font-weight delta, no color change.
+ * - `className` passthrough works for every variant.
+ *
+ * New (additive):
+ * - `size: 'sm' | 'default' | 'lg'` — text-xs / text-xs / text-sm
+ *   typography ladder with matching px/py padding.
+ * - `dot: boolean` — leading 6px dot in the variant's accent color
+ *   (status-style "● Active" pattern per Figma).
+ * - `removable: boolean` + `onRemove` — trailing X icon-button for
+ *   tag-style dismissible badges.
+ * - `brand` variant — brand-violet/10 tint per `Tag` brand variant
+ *   (kept distinct from generic info / neutral — used for renewal
+ *   tags, custom views).
+ */
+
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+  'inline-flex items-center gap-1 rounded-full border font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   {
     variants: {
       variant: {
         default: 'border-transparent bg-primary text-primary-foreground shadow',
         secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        // Kept verbatim from the base contract — BC guarantee in spec
+        // 2026-05-13-ds-foundation-v5.md mandates existing variants must
+        // render byte-identically. For the soft error-toned look, use
+        // the new `error` variant below.
         destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
         outline: 'text-foreground',
         muted: 'border-transparent bg-muted text-muted-foreground',
@@ -17,19 +51,120 @@ const badgeVariants = cva(
         info: 'border-status-info-border bg-status-info-bg text-status-info-text',
         neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',
         error: 'border-status-error-border bg-status-error-bg text-status-error-text',
+        // Phase B.8 addition — brand-violet tinted pill for custom
+        // views / renewal tags. Mirrors `Tag` brand variant.
+        brand: 'border-brand-violet/30 bg-brand-violet/10 text-brand-violet',
+      },
+      size: {
+        sm: 'px-2 py-0.5 text-[10px]',
+        default: 'px-2.5 py-0.5 text-xs',
+        lg: 'px-3 py-1 text-sm',
       },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'default',
     },
-  }
+  },
 )
 
-export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>
+// Leading-dot tone per variant. Uses the icon-color end of the status
+// token palette so the dot reads against the soft tinted background.
+const BADGE_DOT_TONE: Record<NonNullable<VariantProps<typeof badgeVariants>['variant']>, string> = {
+  default: 'bg-primary-foreground',
+  secondary: 'bg-secondary-foreground',
+  destructive: 'bg-status-error-icon',
+  outline: 'bg-foreground',
+  muted: 'bg-muted-foreground',
+  success: 'bg-status-success-icon',
+  warning: 'bg-status-warning-icon',
+  info: 'bg-status-info-icon',
+  neutral: 'bg-muted-foreground',
+  error: 'bg-status-error-icon',
+  brand: 'bg-brand-violet',
+}
+
+// Leading-dot size per badge size.
+const BADGE_DOT_SIZE: Record<NonNullable<VariantProps<typeof badgeVariants>['size']>, string> = {
+  sm: 'size-1.5',
+  default: 'size-1.5',
+  lg: 'size-2',
+}
 
-export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({ className, variant, ...props }, ref) => (
-  <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
-))
+export type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>
+export type BadgeSize = NonNullable<VariantProps<typeof badgeVariants>['size']>
+
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof badgeVariants> & {
+    /** Leading status dot in the variant's accent tone. */
+    dot?: boolean
+    /** Trailing X icon-button for tag-style dismissible badges.
+     * Renders only when `removable` is true. */
+    removable?: boolean
+    /** Click handler for the remove button. Required when `removable`
+     * is true. */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void
+    /** Accessible label for the remove button. Default `'Remove'`. */
+    removeAriaLabel?: string
+  }
+
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      dot = false,
+      removable = false,
+      onRemove,
+      removeAriaLabel = 'Remove',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedVariant = (variant ?? 'default') as BadgeVariant
+    const resolvedSize = (size ?? 'default') as BadgeSize
+    return (
+      <div
+        ref={ref}
+        data-slot="badge"
+        data-variant={resolvedVariant}
+        data-size={resolvedSize}
+        className={cn(badgeVariants({ variant, size }), className)}
+        {...props}
+      >
+        {dot ? (
+          <span
+            data-slot="badge-dot"
+            aria-hidden="true"
+            className={cn(
+              'inline-block shrink-0 rounded-full',
+              BADGE_DOT_SIZE[resolvedSize],
+              BADGE_DOT_TONE[resolvedVariant],
+            )}
+          />
+        ) : null}
+        {children}
+        {removable ? (
+          <button
+            type="button"
+            data-slot="badge-remove"
+            aria-label={removeAriaLabel}
+            onClick={onRemove}
+            className={cn(
+              '-mr-0.5 ml-0.5 inline-flex shrink-0 items-center justify-center rounded-full outline-none transition-opacity',
+              'opacity-70 hover:opacity-100 focus-visible:opacity-100',
+              resolvedSize === 'lg' ? 'size-4' : 'size-3.5',
+            )}
+          >
+            <X aria-hidden="true" className={resolvedSize === 'lg' ? 'size-3' : 'size-2.5'} />
+          </button>
+        ) : null}
+      </div>
+    )
+  },
+)
 
 Badge.displayName = 'Badge'
 

package/src/primitives/button-group.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * Joined / connected button group per Figma `Button Group [1.1]`
+ * (component set id `199961:1616` in DS Open Mercato). Renders an outer
+ * rounded border with N children that touch each other to share an
+ * internal separator line. Use for related actions on the same row
+ * (Save / Save & New / overflow ellipsis) or compact view-mode toggles.
+ *
+ * `ButtonGroup` is for *related actions* (each does something different).
+ * For mutually-exclusive selection states (only one selected at a time)
+ * use `SegmentedControl` instead.
+ *
+ * The wrapper takes a `size` (2xs / sm / default) that controls the outer
+ * radius per Figma — `2xs` = `rounded-sm` (Figma 2X-Small 24, radius 6),
+ * `sm` and `default` = `rounded-md` (Figma X-Small 32 + Small 36, radius 8).
+ * Same-row sizing convention from `packages/ui/AGENTS.md` still applies:
+ * every child Button / IconButton inside the group MUST share the same
+ * `size` prop as the group itself.
+ *
+ * Visual joining is handled at the wrapper level via descendant CSS
+ * selectors — children render normally, the wrapper strips their own
+ * corners, shadow, and outer borders, and adds an internal separator
+ * (`border-r` / `border-b`) between siblings. This way no `cloneElement`
+ * is required and any element that accepts a `className` (Button,
+ * IconButton, LinkButton, asChild wrappers, etc.) can be a group member.
+ *
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button>Save</Button>
+ *   <Button>Save & New</Button>
+ *   <IconButton aria-label="More"><MoreHorizontal /></IconButton>
+ * </ButtonGroup>
+ *
+ * <ButtonGroup orientation="vertical" size="sm">
+ *   <Button variant="outline">Up</Button>
+ *   <Button variant="outline">Down</Button>
+ * </ButtonGroup>
+ * ```
+ */
+const buttonGroupVariants = cva(
+  // Outer chrome: rounded shell + border + clipped corners + shared shadow.
+  // Descendant rules collapse children into segments:
+  //   * strip own corners / shadow / outer border on every child
+  //   * raise focus-visible above neighbours so the focus ring is not clipped
+  //   * separator: border-r (horizontal) or border-b (vertical) on every
+  //     child except the last one
+  'inline-flex w-fit border border-input bg-background shadow-xs overflow-hidden ' +
+    "[&>*]:rounded-none [&>*]:shadow-none [&>*]:border-0 " +
+    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10 " +
+    'disabled:opacity-50',
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          'flex-row [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-input',
+        vertical:
+          'flex-col [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-input',
+      },
+      size: {
+        // Figma `2X-Small (24)` → cornerRadius 6 → DS `rounded-sm` (6px).
+        '2xs': 'rounded-sm',
+        // Figma `X-Small (32)` → cornerRadius 8 → DS `rounded-md` (8px).
+        sm: 'rounded-md',
+        // Figma `Small (36)` → cornerRadius 8 → DS `rounded-md` (8px).
+        default: 'rounded-md',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof buttonGroupVariants> & {
+    /** Forwarded to the wrapper's `aria-label` for screen-reader context. */
+    'aria-label'?: string
+  }
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, orientation, size, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="button-group"
+      role="group"
+      className={cn(buttonGroupVariants({ orientation, size }), className)}
+      {...props}
+    />
+  ),
+)
+ButtonGroup.displayName = 'ButtonGroup'
+
+export { buttonGroupVariants }