@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/components/avatar/examples.mdx

@@ -0,0 +1,95 @@
+import Avatar from './index'
+import SizeProvider from '../../primitives/sizes'
+import { Building2 } from 'lucide-react'
+
+# Picture and fallback
+
+The picture fades in once it has loaded. Without one, or when it fails, initials (or a person glyph) show on a neutral ground.
+
+<div className="flex items-center gap-3">
+  <Avatar>
+    <Avatar.Image alt="Ada Lovelace" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><radialGradient id='a' cx='.3' cy='.25' r='1'><stop stop-color='%23F5C6A5'/><stop offset='1' stop-color='%236B97FF'/></radialGradient><rect width='1' height='1' fill='url(%23a)'/></svg>" />
+    <Avatar.Fallback>AL</Avatar.Fallback>
+  </Avatar>
+  <Avatar>
+    <Avatar.Image alt="Grace Hopper" src="https://invalid.example/missing.png" />
+    <Avatar.Fallback>GH</Avatar.Fallback>
+  </Avatar>
+  <Avatar>
+    <Avatar.Fallback />
+  </Avatar>
+</div>
+
+# Pale pictures
+
+A 1px inset edge keeps a light picture from dissolving into the surface.
+
+<div className="flex items-center gap-3">
+  <Avatar>
+    <Avatar.Image alt="" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><rect width='1' height='1' fill='white'/></svg>" />
+    <Avatar.Fallback>W</Avatar.Fallback>
+  </Avatar>
+  <Avatar shape="square">
+    <Avatar.Image alt="" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><rect width='1' height='1' fill='white'/></svg>" />
+    <Avatar.Fallback>W</Avatar.Fallback>
+  </Avatar>
+</div>
+
+# Square
+
+`shape="square"` is for teams, organizations and things. It takes the shape's item radius, so pill mode rounds it further.
+
+<div className="flex items-center gap-3">
+  <Avatar shape="square">
+    <Avatar.Fallback>AC</Avatar.Fallback>
+  </Avatar>
+  <Avatar shape="square">
+    <Avatar.Fallback>
+      <Building2 size={16} strokeWidth={1.5} aria-hidden />
+    </Avatar.Fallback>
+  </Avatar>
+</div>
+
+# Sizes
+
+One control tall: 36px, and 28px in a compact region or with `size="compact"`. A size off the ladder goes through `className`.
+
+<div className="flex flex-col gap-3">
+  <div className="flex items-center gap-3">
+    <Avatar>
+      <Avatar.Fallback>AL</Avatar.Fallback>
+    </Avatar>
+    <Avatar size="compact">
+      <Avatar.Fallback>AL</Avatar.Fallback>
+    </Avatar>
+    <Avatar size="compact" className="size-5 text-micro">
+      <Avatar.Fallback>A</Avatar.Fallback>
+    </Avatar>
+  </div>
+  <SizeProvider size="compact">
+    <div className="flex items-center gap-3">
+      <Avatar>
+        <Avatar.Fallback>GH</Avatar.Fallback>
+      </Avatar>
+      <Avatar>
+        <Avatar.Fallback />
+      </Avatar>
+    </div>
+  </SizeProvider>
+</div>
+
+# A stack
+
+Overlapping avatars with a ring of the page around each.
+
+<div className="flex -space-x-2">
+  <Avatar className="ring-2 ring-background">
+    <Avatar.Fallback>AL</Avatar.Fallback>
+  </Avatar>
+  <Avatar className="ring-2 ring-background">
+    <Avatar.Fallback>GH</Avatar.Fallback>
+  </Avatar>
+  <Avatar className="ring-2 ring-background">
+    <Avatar.Fallback>+3</Avatar.Fallback>
+  </Avatar>
+</div>

package/components/avatar/index.tsx

@@ -0,0 +1,129 @@
+/*
+ * Local addition (not part of Fluid Functionalism): a person's or a team's
+ * picture with a fallback, on Base UI's Avatar (image loading status, the
+ * fallback's delay). The 1px inset image edge follows upstream FF's media
+ * outline (see Card.Image); the image fades in on the fast tier.
+ */
+
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
+import {
+  type ComponentPropsWithoutRef,
+  type ForwardRefExoticComponent,
+  forwardRef,
+  type ReactNode,
+  type RefAttributes,
+} from 'react'
+import { useIcon } from '../../lib/icon-context'
+import { useShape } from '../../lib/shape-context'
+import { type SizeVariant, useSize } from '../../lib/size-context'
+import { cn } from '../../lib/utils'
+import { SizeProvider } from '../../primitives/sizes'
+
+// Literal tables: UnoCSS only generates the classes it can read whole.
+const BOX = { default: 'size-9', compact: 'size-7' }
+
+type AvatarImageProps = ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+
+/** The picture. It fades in once loaded; until then, or if it fails, the fallback shows. */
+const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    {...props}
+    className={cn(
+      // An outline paints over the image (an inset shadow would sit beneath it).
+      'size-full rounded-[inherit] object-cover outline outline-1 -outline-offset-1 outline-image-edge',
+      'transition-opacity duration-fast data-[starting-style]:opacity-0',
+      className,
+    )}
+  />
+))
+
+AvatarImage.displayName = 'AvatarImage'
+
+type AvatarFallbackProps = ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+
+/** Initials or an icon, shown while the image loads or when there is none. Empty, it shows a person glyph. */
+const AvatarFallback = forwardRef<HTMLSpanElement, AvatarFallbackProps>(({ className, children, ...props }, ref) => {
+  const size = useSize()
+  const User = useIcon('user')
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      {...props}
+      className={cn('flex size-full items-center justify-center rounded-[inherit]', className)}
+    >
+      {children ?? <User size={size.icon} strokeWidth={1.5} aria-hidden />}
+    </AvatarPrimitive.Fallback>
+  )
+})
+
+AvatarFallback.displayName = 'AvatarFallback'
+
+interface AvatarProps extends ComponentPropsWithoutRef<'span'> {
+  /** Pins the avatar to one step of the size ladder (36px default, 28px compact). Defaults to the surrounding SizeProvider. */
+  size?: SizeVariant
+  /** A circle for people; a square for teams, organizations and things, which takes the shape's item radius (rounded or pill). Defaults to `"circle"`. */
+  shape?: 'circle' | 'square'
+  /** Classes for the root: a size off the ladder (`size-5` in a dense row), a ground. */
+  className?: string
+  /** `Avatar.Image` and `Avatar.Fallback`. */
+  children?: ReactNode
+}
+
+type AvatarComponent = ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLSpanElement>> & {
+  Image: typeof AvatarImage
+  Fallback: typeof AvatarFallback
+}
+
+/**
+ * A picture of a person or a team, with initials or an icon when there is
+ * none.
+ *
+ * The avatar is one control tall (36px, 28px compact), so it lines up with
+ * the rows and buttons beside it, and follows the surrounding SizeProvider.
+ * Base UI's Avatar tracks the image: until it has loaded, or when it fails,
+ * the fallback shows on a neutral ground (the gray badge's accent); once it
+ * lands it fades in over the fallback. A 1px inset edge keeps a pale picture from dissolving into the
+ * surface. People are circles; `shape="square"` takes the shape context's
+ * item radius for teams and things.
+ *
+ * Statics:
+ * - `Avatar.Image` — the picture: `src`, `alt`, `onLoadingStatusChange`.
+ * - `Avatar.Fallback` — initials or an icon; empty, a person glyph. `delay`
+ *   (ms) holds it back so a fast image never flashes it.
+ *
+ * @example {@include ./examples.mdx}
+ */
+const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
+  ({ size: sizeProp, shape = 'circle', className, children, ...props }, ref) => {
+    const size = useSize(sizeProp)
+    const shapes = useShape()
+    const avatar = (
+      <AvatarPrimitive.Root
+        ref={ref}
+        {...props}
+        className={cn(
+          'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden align-middle',
+          'bg-accent text-foreground weight-medium',
+          BOX[size.variant],
+          size.text,
+          shape === 'circle' ? 'rounded-full' : shapes.item,
+          className,
+        )}
+      >
+        {children}
+      </AvatarPrimitive.Root>
+    )
+    // A size prop pins the fallback's glyph too.
+    return sizeProp ? <SizeProvider size={sizeProp}>{avatar}</SizeProvider> : avatar
+  },
+) as AvatarComponent
+
+Avatar.displayName = 'Avatar'
+
+Object.assign(Avatar, { Image: AvatarImage, Fallback: AvatarFallback })
+
+export type { AvatarFallbackProps, AvatarImageProps, AvatarProps }
+export { Avatar, AvatarFallback, AvatarImage }
+
+export default Avatar

package/components/badge/change-demo.tsx

@@ -0,0 +1,29 @@
+/*
+ * Local addition (not part of Fluid Functionalism): the docs stage of the
+ * Badge page's change morph. A Badge that steps through a list of props each
+ * time its button is pressed, so the example stays hook-free.
+ */
+
+import { useState } from 'react'
+import Button from '../button'
+import Badge, { type BadgeProps } from './index'
+
+interface ChangeDemoProps {
+  /** The badge's props, one entry per press; after the last it starts over. */
+  steps: BadgeProps[]
+  /** Label of the button that steps. */
+  label?: string
+}
+
+export default function ChangeDemo({ steps, label = 'Next' }: ChangeDemoProps) {
+  const [at, setAt] = useState(0)
+
+  return (
+    <div className="flex items-center gap-3">
+      <Button variant="tertiary" size="compact" onClick={() => setAt((at + 1) % steps.length)}>
+        {label}
+      </Button>
+      <Badge {...steps[at]} />
+    </div>
+  )
+}

package/components/badge/examples.mdx

@@ -0,0 +1,120 @@
+import Badge from './index'
+import ChangeDemo from './change-demo'
+
+# Solid
+
+The default variant: a tinted background in the badge's color.
+
+<div className="flex flex-wrap items-center gap-2">
+  <Badge color="violet">Fiction</Badge>
+  <Badge color="amber">Science</Badge>
+  <Badge color="green">Philosophy</Badge>
+  <Badge color="blue">History</Badge>
+  <Badge color="rose">Poetry</Badge>
+</div>
+
+# Dot
+
+`variant="dot"` keeps a neutral bordered badge and shows the color as an
+indicator dot.
+
+<div className="flex flex-wrap items-center gap-2">
+  <Badge variant="dot" color="violet">Fiction</Badge>
+  <Badge variant="dot" color="amber">Science</Badge>
+  <Badge variant="dot" color="green">Philosophy</Badge>
+  <Badge variant="dot" color="blue">History</Badge>
+  <Badge variant="dot" color="rose">Poetry</Badge>
+</div>
+
+# Outline
+
+`variant="outline"` is the dot badge's neutral frame without the dot: a label
+that carries no status.
+
+<div className="flex flex-wrap items-center gap-2">
+  <Badge variant="outline">Draft</Badge>
+  <Badge variant="outline">v2.4</Badge>
+  <Badge variant="outline" size="compact">Archived</Badge>
+</div>
+
+# Status mapping
+
+Hosts with a shadcn-style badge map its variants onto a hue: default and
+secondary → `gray`, destructive → `red`, success → `green`, outline →
+`variant="outline"`. The tint stays a wash with foreground text, never a solid
+fill.
+
+<div className="flex flex-wrap items-center gap-2">
+  <Badge color="gray">Default</Badge>
+  <Badge color="gray">Secondary</Badge>
+  <Badge color="red">Destructive</Badge>
+  <Badge color="green">Success</Badge>
+  <Badge variant="outline">Outline</Badge>
+</div>
+
+# Colors
+
+All seventeen palette colors, solid and dot.
+
+<div className="flex flex-col gap-3">
+  <div className="flex flex-wrap items-center gap-2">
+    {['gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'].map((c) => (
+      <Badge key={c} color={c}>
+        {c.charAt(0).toUpperCase() + c.slice(1)}
+      </Badge>
+    ))}
+  </div>
+  <div className="flex flex-wrap items-center gap-2">
+    {['gray', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'].map((c) => (
+      <Badge key={c} variant="dot" color={c}>
+        {c.charAt(0).toUpperCase() + c.slice(1)}
+      </Badge>
+    ))}
+  </div>
+</div>
+
+# Compact
+
+`size="compact"` steps the badge down the size ladder (20px tall, 11px
+text) for dense rows and table cells.
+
+<div className="flex flex-wrap items-center gap-2">
+  <Badge size="compact" color="blue">History</Badge>
+  <Badge size="compact" variant="dot" color="green">Philosophy</Badge>
+  <Badge size="compact">Draft</Badge>
+</div>
+
+# Changes
+
+Press a button. A new label springs the badge to its new width while the
+text crossfades, a new color fades in, and the dot slides in or out with
+the variant. `ChangeDemo` is a docs stage: a Badge that steps through its
+`steps` on each press.
+
+<div className="flex w-48 flex-col items-start gap-3">
+  <ChangeDemo
+    label="Add one"
+    steps={[
+      { color: 'red', children: 8 },
+      { color: 'red', children: 9 },
+      { color: 'red', children: 10 },
+      { color: 'red', children: 99 },
+      { color: 'red', children: '99+' },
+    ]}
+  />
+  <ChangeDemo
+    label="Advance"
+    steps={[
+      { children: 'Draft' },
+      { color: 'amber', children: 'In review' },
+      { color: 'green', children: 'Published' },
+    ]}
+  />
+  <ChangeDemo
+    label="Sync"
+    steps={[
+      { color: 'blue', children: 'Syncing' },
+      { variant: 'dot', color: 'green', children: 'Synced' },
+    ]}
+  />
+</div>

package/components/badge/index.tsx

@@ -0,0 +1,225 @@
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `registry/default/badge.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications:
+ * - `"use client"` directive dropped (no RSC here).
+ * - `@/lib/*` imports rewritten to relative `../../lib/*` paths.
+ * - `BadgeProps` re-declares `variant` (inherited from cva's VariantProps
+ *   upstream) and carries the FF docs API-table descriptions on every prop,
+ *   so modo's parser lists them; types are unchanged for callers.
+ * - TSDoc with the FF docs page's examples added above the component;
+ *   `export default Badge` added.
+ * - Styling reads DS tokens (AGENTS.md styling): `text-[Npx]` →
+ *   `text-<role>[-compact]`; `font-medium` → `weight-medium`; literal colors →
+ *   color tokens.
+ * - Changes animate (local, in the morph layer's language): a new label or
+ *   variant springs the badge from its old width to its new one on
+ *   `spring.moderate` (the content clipped on the way) while the label
+ *   crossfades with Toast's blur; a color fades over `duration-moderate`, and
+ *   the dot scales in and out with the label sliding to make room. The content
+ *   sits in one inner span that carries the morph, so the root keeps the
+ *   caller's `style`.
+ * - `badgeColors`, `badgeVariants` and the size aliases moved to `variants.ts`
+ *   (server-callable, no JSX or hooks) and re-exported from here.
+ * - Variant `outline` (local): the dot badge's neutral hairline frame without
+ *   the dot; it draws no color, so `color` has no effect on it.
+ */
+
+import type { VariantProps } from 'class-variance-authority'
+import { AnimatePresence, animate, motion } from 'motion/react'
+import { forwardRef, type HTMLAttributes, type ReactNode, useLayoutEffect, useRef } from 'react'
+import { useReduceMotion } from '../../lib/reduced-motion'
+import { useShape } from '../../lib/shape-context'
+import { useSizeVariant } from '../../lib/size-context'
+import { spring } from '../../lib/springs'
+import { cn } from '../../lib/utils'
+import {
+  type BadgeColor,
+  type BadgeSize,
+  type BadgeSizeCanonical,
+  type BadgeVariant,
+  badgeColors,
+  badgeVariants,
+  legacySizeAliases,
+} from './variants'
+
+const { exit: _exit, ...enter } = spring.moderate
+
+/** The label as text, when it is text: the key its crossfade runs on. */
+function textOf(node: ReactNode) {
+  const parts = Array.isArray(node) ? node : [node]
+  if (parts.every(part => typeof part === 'string' || typeof part === 'number')) return parts.join('')
+}
+
+/* Width morph (local): when the label or the variant changes, the content
+   span springs from its old width to its new one instead of jumping, and the
+   badge follows it. By the time the change commits the span already has its
+   new width, so a ResizeObserver keeps the resting one. At rest the inline
+   width is dropped. */
+function useWidthMorph(change: string) {
+  const content = useRef<HTMLSpanElement>(null)
+  const rest = useRef(0)
+  const live = useRef<number | null>(null)
+  const reduced = useReduceMotion()
+
+  useLayoutEffect(() => {
+    const el = content.current
+    if (!el) return
+    const observer = new ResizeObserver(() => {
+      if (live.current === null) rest.current = el.offsetWidth
+    })
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  useLayoutEffect(() => {
+    const el = content.current
+    const from = live.current ?? rest.current
+    if (!el || !from) return
+    el.style.width = ''
+    const to = el.offsetWidth
+    rest.current = to
+    live.current = null
+    if (reduced || from === to) return
+    const write = (width: number) => {
+      live.current = width
+      el.style.width = `${width}px`
+    }
+    write(from)
+    const controls = animate(from, to, {
+      ...enter,
+      onUpdate: write,
+      onComplete: () => {
+        live.current = null
+        el.style.width = ''
+      },
+    })
+    return () => controls.stop()
+  }, [change, reduced])
+
+  return content
+}
+
+interface BadgeProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,
+    Omit<VariantProps<typeof badgeVariants>, 'size'> {
+  /** Visual style. Solid uses a tinted background; dot shows a colored indicator; outline is the dot badge's neutral hairline frame without the dot (it ignores `color`). Defaults to `"solid"`. */
+  variant?: 'solid' | 'dot' | 'outline'
+  /** Step on the size ladder (see Sizes). Legacy sm/md/lg values resolve as aliases (sm → compact; md/lg → default). Defaults to the surrounding SizeProvider, else `"default"`. */
+  size?: 'default' | 'compact' | 'sm' | 'md' | 'lg'
+  /** Color from the Tailwind palette: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, blue, indigo, violet, purple, fuchsia, pink, rose. Defaults to `"gray"`. */
+  color?: BadgeColor
+}
+
+/**
+ * Compact label for status, category, or metadata. Supports solid, dot and
+ * outline variants with Tailwind colors.
+ *
+ * Solid badges tint their background with the chosen color mixed into the
+ * page background (gray uses the accent token); dot badges keep a neutral
+ * border and show the color as a small indicator; outline badges are the
+ * neutral frame alone, for a label that carries no status. The badge rides the size
+ * ladder — `size` pins it, otherwise it follows the surrounding SizeProvider
+ * — and takes its corner radius from the shape context. Changes animate: a
+ * new label or variant springs the width while the label crossfades, and a
+ * new color fades in. The palette is also exported as `badgeColors`, the class
+ * recipe as `badgeVariants` (both callable on the server).
+ *
+ * Status labels pick a hue rather than a fill of their own: a destructive or
+ * error label is `color="red"`, a success label `color="green"`, a secondary
+ * or default one `color="gray"`, and a neutral outlined one
+ * `variant="outline"` (see the Status mapping example).
+ *
+ * @example {@include ./examples.mdx}
+ */
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'solid', size: sizeProp, color = 'gray', children, style, ...props }, ref) => {
+    const shape = useShape()
+    // Resolve the size: explicit prop (legacy aliases mapped onto the
+    // canonical ladder) > surrounding SizeProvider > default.
+    const contextSize = useSizeVariant()
+    const size: BadgeSizeCanonical = sizeProp
+      ? (legacySizeAliases[sizeProp] ?? (sizeProp as BadgeSizeCanonical))
+      : contextSize === 'compact'
+        ? 'compact'
+        : 'default'
+    const colorValue = badgeColors[color]
+    const isSolid = variant === 'solid'
+    const dotSize = size === 'compact' ? 6 : 7
+
+    const colorStyle = isSolid
+      ? color === 'gray'
+        ? { backgroundColor: 'var(--accent)', color: 'var(--foreground)' }
+        : {
+            color: 'var(--foreground)',
+            backgroundColor: `color-mix(in srgb, ${colorValue} 15%, var(--background))`,
+          }
+      : {}
+
+    const dotColor = color === 'gray' ? 'var(--muted-foreground)' : colorValue
+    const label = textOf(children)
+    const content = useWidthMorph(`${variant} ${size} ${label}`)
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          badgeVariants({ variant, size }),
+          shape.item,
+          'transition-[background-color] duration-moderate',
+          className,
+        )}
+        style={{ ...colorStyle, ...style }}
+        {...props}
+      >
+        {/* The morphing box: it may shrink below its content while the width
+            springs (min-w-0), clipping it sideways only, and it positions
+            whatever pops out of the flow on its way out. */}
+        <span ref={content} className="relative inline-flex min-w-0 items-center gap-[inherit] overflow-x-clip">
+          <AnimatePresence mode="popLayout" initial={false}>
+            {variant === 'dot' && (
+              <motion.span
+                key="dot"
+                className="shrink-0 rounded-full transition-[background-color] duration-moderate"
+                style={{
+                  width: dotSize,
+                  height: dotSize,
+                  backgroundColor: dotColor,
+                }}
+                initial={{ opacity: 0, scale: 0 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0, transition: spring.moderate.exit }}
+                transition={enter}
+              />
+            )}
+          </AnimatePresence>
+          <AnimatePresence mode="popLayout" initial={false}>
+            {/* text-box needs a block container — the badge root is a flex
+                container, so the label gets its own span. Height is fixed
+                (h-*), so trimming only recenters the letterforms. */}
+            <motion.span
+              key={label ?? 'label'}
+              layout="position"
+              className="[text-box:trim-both_cap_alphabetic]"
+              initial={{ opacity: 0, filter: 'blur(4px)' }}
+              // At rest the label keeps no filter, which would make it its own stacking context.
+              animate={{ opacity: 1, filter: 'blur(0px)', transitionEnd: { filter: 'none' } }}
+              exit={{ opacity: 0, filter: 'blur(4px)', transition: spring.moderate.exit }}
+              transition={enter}
+            >
+              {children}
+            </motion.span>
+          </AnimatePresence>
+        </span>
+      </span>
+    )
+  },
+)
+
+Badge.displayName = 'Badge'
+
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeVariant }
+export { Badge, badgeColors, badgeVariants }
+
+export default Badge

package/components/badge/variants.ts

@@ -0,0 +1,73 @@
+/*
+ * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
+ * `registry/default/badge.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
+ * Local modifications:
+ * - The palette (`badgeColors`), the class recipe (`badgeVariants`) and the size
+ *   aliases, split out of `index.tsx` so server code can call them: no JSX, hooks
+ *   or contexts here. `index.tsx` re-exports them.
+ * - Styling reads DS tokens (see `index.tsx`).
+ * - Variant `outline` (local): the dot badge's neutral hairline frame without the dot.
+ */
+
+import { cva } from 'class-variance-authority'
+
+const badgeColors = {
+  gray: 'var(--badge-gray)',
+  red: 'var(--badge-red)',
+  orange: 'var(--badge-orange)',
+  amber: 'var(--badge-amber)',
+  yellow: 'var(--badge-yellow)',
+  lime: 'var(--badge-lime)',
+  green: 'var(--badge-green)',
+  emerald: 'var(--badge-emerald)',
+  teal: 'var(--badge-teal)',
+  cyan: 'var(--badge-cyan)',
+  blue: 'var(--badge-blue)',
+  indigo: 'var(--badge-indigo)',
+  violet: 'var(--badge-violet)',
+  purple: 'var(--badge-purple)',
+  fuchsia: 'var(--badge-fuchsia)',
+  pink: 'var(--badge-pink)',
+  rose: 'var(--badge-rose)',
+} as const
+
+type BadgeColor = keyof typeof badgeColors
+
+type BadgeVariant = 'solid' | 'dot' | 'outline'
+
+const badgeVariants = cva('inline-flex items-center weight-medium whitespace-nowrap', {
+  variants: {
+    variant: {
+      solid: '',
+      dot: 'border border-border text-foreground',
+      // The dot badge without its dot: a neutral hairline label.
+      outline: 'border border-border text-foreground',
+    },
+    // The two-step size ladder shared by every control — see /docs/sizes.
+    size: {
+      default: 'h-6 px-2.5 text-caption gap-1.5',
+      compact: 'h-5 px-2 text-caption-compact gap-1',
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'default',
+  },
+})
+
+type BadgeSizeCanonical = 'default' | 'compact'
+
+/** Public size values: the canonical two-size scale plus the pre-sizes-system
+ *  aliases, kept so existing call sites keep compiling. Aliases resolve onto
+ *  the canonical ladder (sm → compact; md/lg → default). */
+type BadgeSize = BadgeSizeCanonical | 'sm' | 'md' | 'lg'
+
+const legacySizeAliases: Partial<Record<BadgeSize, BadgeSizeCanonical>> = {
+  sm: 'compact',
+  md: 'default',
+  lg: 'default',
+}
+
+export type { BadgeColor, BadgeSize, BadgeSizeCanonical, BadgeVariant }
+export { badgeColors, badgeVariants, legacySizeAliases }