@lovett/ui 0.0.4 → 0.0.5

package/src/allocation-sparkbar.tsx

@@ -0,0 +1,90 @@
+/**
+ * AllocationSparkbar — a compact per-period bar strip.
+ *
+ * New in ADR-123 (Budget Flighting redesign). Renders one bar per period
+ * (month), height proportional to the value; a zero/paused period renders
+ * short + dashed in a muted tone. Each bar can tint from its own token (e.g. a
+ * flight-group color), falling back to `baseColorVar`. Optional single-letter
+ * labels sit under each bar.
+ *
+ * Token discipline: colors come only from public token *names* via
+ * `rgb(var(--token) / a)`. No literals. Layout sizes use the spacing scale.
+ */
+
+export interface AllocationSparkbarProps {
+  /** Per-period amounts. A value of 0 is treated as paused (short + dashed). */
+  values: number[]
+  /** Base token name for normal bars, e.g. `--folder-teal`. Includes `--`. */
+  baseColorVar: string
+  /** Optional per-period token name (e.g. a flight-group color). `null`/
+   *  `undefined` falls back to `baseColorVar`. Length should match `values`. */
+  colorVars?: (string | null | undefined)[]
+  /** Optional short labels under each bar (e.g. `['J','F','M']`). */
+  labels?: string[]
+  /** Optional per-bar tooltip text (native `title`). */
+  titles?: string[]
+  /** Strip height in px. Default 36. */
+  height?: number
+  className?: string
+}
+
+export function AllocationSparkbar({
+  values,
+  baseColorVar,
+  colorVars,
+  labels,
+  titles,
+  height = 36,
+  className,
+}: AllocationSparkbarProps) {
+  const max = Math.max(...values, 1)
+  return (
+    <div
+      className={className}
+      style={{ display: 'flex', gap: 'var(--space-1)', alignItems: 'flex-end', height }}
+    >
+      {values.map((value, i) => {
+        const paused = value === 0
+        const barH = paused ? 4 : 8 + (value / max) * (height - 12)
+        const colorVar = colorVars?.[i] ?? baseColorVar
+        return (
+          <div
+            key={i}
+            title={titles?.[i]}
+            style={{
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 'var(--space-1)',
+              minWidth: 0,
+            }}
+          >
+            <div
+              style={{
+                width: '100%',
+                height: barH,
+                borderRadius: 'var(--radius-xs)',
+                background: paused
+                  ? 'rgb(var(--text-muted) / 0.18)'
+                  : `rgb(var(${colorVar}) / 0.67)`,
+                border: paused
+                  ? '1px dashed rgb(var(--text-muted) / 0.4)'
+                  : 'none',
+                transition: 'background var(--dur-fast, 120ms)',
+              }}
+            />
+            {labels?.[i] !== undefined && (
+              <span
+                className="text-[9.5px] font-semibold tracking-[0.02em]"
+                style={{ color: 'rgb(var(--text-muted))' }}
+              >
+                {labels[i]}
+              </span>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/floating-status-bar.tsx

@@ -0,0 +1,112 @@
+/**
+ * FloatingStatusBar — a bottom-center floating status + summary + action bar.
+ *
+ * Promoted in ADR-123 (Budget Flighting redesign). The lens's budget tracker
+ * and the creative-checker recon's "StatusFooter" both want this shape, so it
+ * graduates to @lovett/ui. A tone dot + label, an optional secondary meta, an
+ * optional summary node after a divider, and an optional single action slot.
+ *
+ * Honors `prefers-reduced-motion`: the entrance fade/slide is applied only
+ * under `motion-safe`. Token discipline: all colors via public tokens.
+ */
+
+import type { ReactNode } from 'react'
+
+import { cn } from './lib/utils'
+
+export type FloatingStatusTone =
+  | 'neutral'
+  | 'accent'
+  | 'success'
+  | 'warning'
+  | 'destructive'
+  | 'info'
+
+const TONE_VAR: Record<FloatingStatusTone, string> = {
+  neutral: '--text-secondary',
+  accent: '--accent',
+  success: '--success',
+  warning: '--warning',
+  destructive: '--destructive',
+  info: '--info',
+}
+
+export interface FloatingStatusBarProps {
+  /** Tone for the status dot + label color. */
+  tone: FloatingStatusTone
+  /** Primary status label (tone-colored, bold). */
+  label: ReactNode
+  /** Optional muted text after the label (e.g. a percentage). */
+  meta?: ReactNode
+  /** Optional summary node shown after a vertical divider (e.g. `$X → $Y`). */
+  summary?: ReactNode
+  /** Optional single action element (typically a secondary Button). */
+  action?: ReactNode
+  /** Override the fixed positioning (e.g. to embed in a story). Default fixed
+   *  bottom-center. */
+  className?: string
+}
+
+export function FloatingStatusBar({
+  tone,
+  label,
+  meta,
+  summary,
+  action,
+  className,
+}: FloatingStatusBarProps) {
+  const toneColor = `rgb(var(${TONE_VAR[tone]}))`
+  return (
+    <div
+      role="status"
+      className={cn(
+        'fixed bottom-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-3.5 px-3.5 py-2.5',
+        'motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2',
+        className,
+      )}
+      style={{
+        background: 'rgb(var(--bg-card))',
+        border: '1px solid rgb(var(--border-card))',
+        borderRadius: 'var(--radius-xl)',
+        boxShadow: 'var(--shadow-lg)',
+      }}
+    >
+      <div className="flex items-center gap-2">
+        <span
+          aria-hidden
+          className="size-2 shrink-0 rounded-full"
+          style={{ background: toneColor }}
+        />
+        <span className="text-[12.5px] font-bold" style={{ color: toneColor }}>
+          {label}
+        </span>
+        {meta !== undefined && (
+          <span
+            className="text-[11px] tabular-nums"
+            style={{ color: 'rgb(var(--text-tertiary))' }}
+          >
+            {meta}
+          </span>
+        )}
+      </div>
+
+      {summary !== undefined && (
+        <>
+          <span
+            aria-hidden
+            className="h-[18px] w-px"
+            style={{ background: 'rgb(var(--border))' }}
+          />
+          <span
+            className="text-[11.5px]"
+            style={{ color: 'rgb(var(--text-tertiary))' }}
+          >
+            {summary}
+          </span>
+        </>
+      )}
+
+      {action}
+    </div>
+  )
+}

package/src/index.ts

@@ -23,6 +23,7 @@ export { default as BrandLogoTile, type BrandLogoTileProps, type BrandLogoTileSi
 export { default as ProfileSection, type ProfileSectionProps } from './profile-section'
 export { default as ChipNav, type ChipNavItem } from './chip-nav'
 export { default as CompletionRing, type CompletionRingProps } from './completion-ring'
+export { default as MicrosoftLogo, type MicrosoftLogoProps } from './microsoft-logo'
 export { default as Choropleth, type ChoroplethProps } from './choropleth'
 export {
   default as PageShell,
@@ -76,6 +77,16 @@ export { MetricCard, type MetricCardProps, type MetricCardTone } from './metric-
 export { ProgressBar, type ProgressBarProps } from './progress-bar'
 export { StepLoader, type StepLoaderProps, type StepLoaderStep } from './step-loader'
 export { Badge, type BadgeProps, type BadgeTone } from './badge'
+export { TokenBadge, type TokenBadgeProps } from './token-badge'
+export {
+  AllocationSparkbar,
+  type AllocationSparkbarProps,
+} from './allocation-sparkbar'
+export {
+  FloatingStatusBar,
+  type FloatingStatusBarProps,
+  type FloatingStatusTone,
+} from './floating-status-bar'
 export { StatsGrid, type StatsGridProps } from './stats-grid'
 export {
   SortableTable,

package/src/microsoft-logo.tsx

@@ -0,0 +1,33 @@
+/**
+ * MicrosoftLogo — the Microsoft four-square brand mark, for "Sign in with
+ * Microsoft" SSO buttons (ADR-124 D8). Lucide has no Microsoft glyph, so this
+ * is a bespoke SVG primitive — which `@lovett/ui` is the one allowed home for
+ * (CLAUDE.md §2/§6). The four square colours are Microsoft's required brand
+ * colours (per their identity guidelines); they are intrinsic to the mark, not
+ * theme tokens, exactly like BrandLogoTile's imagery — so they live here as
+ * literals rather than `tokens.css` variables.
+ */
+
+export interface MicrosoftLogoProps {
+  /** Square size in px. Default 18 (matches a control-height button glyph). */
+  size?: number
+  className?: string
+}
+
+export default function MicrosoftLogo({ size = 18, className }: MicrosoftLogoProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 21 21"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect x="1" y="1" width="9" height="9" fill="#f25022" />
+      <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
+      <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
+      <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
+    </svg>
+  )
+}

package/src/token-badge.tsx

@@ -0,0 +1,92 @@
+/**
+ * TokenBadge — tinted, token-driven category badge.
+ *
+ * Promoted in ADR-123 (Budget Flighting redesign) from the lens-local
+ * `TacticBadge`. Distinct from `<Badge>`: Badge carries only the 6 fixed
+ * semantic tones (success / warning / …); TokenBadge tints from ANY public
+ * token base name, so a categorical palette like `--folder-*` (tactic colors,
+ * flight-group colors) works. The lens keeps a thin `TacticBadge` wrapper that
+ * passes the matching `--folder-*` token.
+ *
+ * Token discipline: the only color input is a public token *name*; fill/border/
+ * text are derived from it via `rgb(var(--token) / a)`. No literals.
+ */
+
+import type { ReactNode } from 'react'
+
+import { cn } from './lib/utils'
+
+export interface TokenBadgeProps {
+  /** Public token name to tint from, e.g. `--folder-teal`, `--accent`,
+   *  `--success`. Must include the leading `--`. */
+  colorVar: string
+  children: ReactNode
+  /** `soft` = tinted fill (default). `outline` = transparent fill + tinted
+   *  border. */
+  variant?: 'soft' | 'outline'
+  /** Optional leading status dot in the token color. Ignored when `icon` set. */
+  dot?: boolean
+  /** Optional leading icon (12–14px expected). */
+  icon?: ReactNode
+  /** `sm` (10px) · `md` (11px, default) · `lg` (12px, taller). */
+  size?: 'sm' | 'md' | 'lg'
+  /** Pill (`full`) vs squared category tag (`tag`, default). */
+  shape?: 'tag' | 'pill'
+  /** Uppercase + wider tracking for short category codes (PRG, YT…). */
+  uppercase?: boolean
+  className?: string
+}
+
+const SIZE_CLASS: Record<NonNullable<TokenBadgeProps['size']>, string> = {
+  sm: 'h-[18px] px-1.5 text-[10px]',
+  md: 'h-5 px-2 text-[11px]',
+  lg: 'h-[22px] px-2.5 text-xs',
+}
+
+export function TokenBadge({
+  colorVar,
+  children,
+  variant = 'soft',
+  dot = false,
+  icon,
+  size = 'md',
+  shape = 'tag',
+  uppercase = false,
+  className,
+}: TokenBadgeProps) {
+  const solid = `rgb(var(${colorVar}))`
+  const style =
+    variant === 'outline'
+      ? {
+          background: 'transparent',
+          color: solid,
+          boxShadow: `inset 0 0 0 1px rgb(var(${colorVar}) / 0.4)`,
+        }
+      : { background: `rgb(var(${colorVar}) / 0.12)`, color: solid }
+
+  return (
+    <span
+      className={cn(
+        'inline-flex w-fit shrink-0 items-center gap-1 font-bold whitespace-nowrap',
+        uppercase && 'uppercase tracking-[0.06em]',
+        SIZE_CLASS[size],
+        className,
+      )}
+      style={{
+        ...style,
+        borderRadius:
+          shape === 'pill' ? 'var(--radius-full)' : 'var(--radius-xs)',
+      }}
+    >
+      {dot && !icon ? (
+        <span
+          aria-hidden
+          className="size-1.5 shrink-0 rounded-full"
+          style={{ background: 'currentColor' }}
+        />
+      ) : null}
+      {icon && <span className="flex shrink-0 items-center">{icon}</span>}
+      {children}
+    </span>
+  )
+}