@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/index.ts

@@ -0,0 +1,587 @@
+export {
+  ThemeProvider,
+  ThemeToggle,
+  useTheme,
+  DirectionProvider,
+  useDirection,
+  type Direction,
+  type PaletteName,
+  type ResolvedTheme,
+  type ThemePreference,
+} from "./components/ThemeProvider";
+export { themeInitScript } from "./components/themeInit";
+export { faviconThemeScript, type FaviconThemePaths } from "./components/faviconTheme";
+export { BrandWordmark } from "./components/brand/BrandWordmark";
+export { MotionProvider, Reveal, Stagger, HeroEntrance, useMotionSafe, m, EASE } from "./motion/primitives";
+export {
+  useScrollyFeatures,
+  ScrollyRail,
+  progressToIndex,
+  scrollyTrackHeightVh,
+  STEPPER_MEDIA_QUERY,
+  type ScrollyFeatures,
+  type UseScrollyFeaturesOptions,
+} from "./motion/scrolly";
+export { Emblem, emblems } from "./components/emblems";
+export { StackLogo, StackRow } from "./components/StackLogo";
+export { GitHubGlyph, GoogleGlyph, LinkedInGlyph, XGlyph } from "./components/icons";
+export {
+  SocialRow,
+  DIGITHINGS_SOCIALS,
+  type SocialRowProps,
+  type SocialProfile,
+  type SocialNetwork,
+} from "./components/SocialRow";
+export {
+  AuthCard,
+  passwordStrength,
+  type AuthCardBrand,
+  type AuthCardLayout,
+  type AuthCardMode,
+  type AuthCardProps,
+  type AuthOAuthProvider,
+} from "./components/account/AuthCard";
+export { ScrollyGraph, GraphSVG } from "./components/graph";
+export {
+  ArchitectureDiagram,
+  toMermaid,
+  type ArchitectureDiagramProps,
+  type ArchAlign,
+  type ArchEdge,
+  type ArchGroup,
+  type ArchIcon,
+  type ArchJunction,
+  type ArchService,
+  type ArchSide,
+  type ArchSpec,
+} from "./components/diagrams";
+export {
+  ArchitectureSvg,
+  type ArchitectureSvgProps,
+} from "./components/diagrams";
+export {
+  ArchitectureTour,
+  type ArchitectureTourProps,
+  type TourStep,
+  type TourVariant,
+} from "./components/diagrams";
+export { camTransform, fitCamera, type CamFrame } from "./components/diagrams";
+export {
+  TerminalSchematic,
+  type SchematicLegend,
+  type SchematicNode,
+  type SchematicRow,
+  type SchematicTone,
+  type TerminalSchematicProps,
+} from "./components/diagrams";
+export {
+  Footer,
+  Colophon,
+  ModuleCard,
+  SkipLink,
+  CtaLink,
+  IconLink,
+  hrefIsCurrent,
+  isNavGroup,
+  type NavLink,
+  type NavGroup,
+  type NavItem,
+  type CtaLinkProps,
+  type IconLinkProps,
+} from "./components/chrome";
+export { NavShell, type NavShellProps } from "./components/NavShell";
+export { DocsLayout, type DocsNavGroup, type DocsNavItem, type DocsHero } from "./components/docs/DocsLayout";
+export { DocsSearch, filterDocsItems, type DocsSearchProps } from "./components/docs/DocsSearch";
+export { CodeTabs, DocsCodeBlock, type CodeSample } from "./components/docs/CodeTabs";
+export { CopyCommand, type CopyCommandProps, type CopyCommandSample } from "./components/docs/CopyCommand";
+export { EndpointDoc, MethodBadge, type DocsEndpoint, type DocsField, type DocsMethod } from "./components/docs/Endpoint";
+export { HashScrollManager } from "./navigation/HashScrollManager";
+export {
+  hashIdFromHref,
+  instantScrollToHash,
+  instantScrollToId,
+  isSamePageHashHref,
+} from "./navigation/hashScroll";
+export { Terminal, type TermLine } from "./components/Terminal";
+// Spinner — the canonical inline loading glyph (replaces the hand-rolled
+// `size-[11px] … border-current/30` span copied across reference specimens).
+export { Spinner, type SpinnerProps } from "./components/Spinner";
+
+// promoted primitives (#1415)
+export { Pricing, PricingTierCard, PrecisionTable, type PricingProps, type PricingTierCardProps, type PrecisionTableProps } from "./components/pricing/Pricing";
+export { PricingMatrix, type PricingMatrixProps, type PricingMatrixTier, type PricingMatrixGroup, type PricingMatrixRow } from "./components/pricing/PricingMatrix";
+export { NumberedStages, type NumberedStage } from "./components/stages/NumberedStages";
+export { PerfMetrics, type PerfMetric } from "./components/metrics/PerfMetrics";
+export { StatCounter, type CounterStat } from "./components/metrics/StatCounter";
+// promoted primitives (#1450)
+export { WordReveal, type WordRevealProps } from "./components/typography/WordReveal";
+export { MotionReveal, type MotionRevealProps } from "./components/typography/MotionReveal";
+export {
+  TypewriterReveal,
+  type TypewriterRevealProps,
+} from "./components/typography/TypewriterReveal";
+export { Marquee, type MarqueeItem, type MarqueeProps } from "./components/marquee/Marquee";
+export {
+  TerminalManifest,
+  type TerminalManifestRow,
+  type TerminalManifestStatus,
+  type TerminalManifestProps,
+} from "./components/TerminalManifest";
+export { DeckStack, DeckCard, type DeckStackProps, type DeckCardProps } from "./components/deck/DeckStack";
+// chat family (#1418)
+export { ChatTranscript, type ChatTranscriptProps } from "./components/chat/ChatTranscript";
+export { ChatMessage, type ChatMessageProps, type ChatRole, type ChatTone } from "./components/chat/ChatMessage";
+export { ChatStreamCursor, type ChatStreamCursorProps } from "./components/chat/ChatStreamCursor";
+export {
+  DigichatLauncher,
+  type DigichatLauncherProps,
+} from "./components/chat/DigichatLauncher";
+export { ChatMarkdown, type ChatMarkdownProps } from "./components/chat/ChatMarkdown";
+// ChatMarkdownSource is internal to ChatMarkdown — not part of the public
+// barrel (#3819). The legacy family stays exported for its remaining
+// consumers: ChatMarkdown (dashboard SafeMarkdown styling shell, digichat-ui
+// MiniMarkdown) and the ChatToolCallStatus type (digichat-ui activity view).
+// No new adoption; ChatThinking/ChatToolCall components have no importers.
+export { ChatMermaidBlock, type ChatMermaidBlockProps } from "./components/chat/ChatMermaidBlock";
+export { ChatCodeBlock, ChatCopyButton, type ChatCodeBlockProps, type ChatCopyButtonProps } from "./components/chat/ChatCodeBlock";
+export { ChatToolCall, type ChatToolCallProps, type ChatToolCallStatus, type ChatToolCallLine } from "./components/chat/ChatToolCall";
+export { ChatThinking, type ChatThinkingProps } from "./components/chat/ChatThinking";
+export {
+  ChatPlayback,
+  type ChatPlaybackProps,
+  type ChatPlaybackStep,
+  type ChatPlaybackTool,
+  type ChatPlaybackTable,
+} from "./components/chat/ChatPlayback";
+export {
+  ChatWidgetFrame,
+  ChatWidgetButton,
+  type ChatWidgetFrameProps,
+  type ChatWidgetFrameVariant,
+  type ChatWidgetButtonProps,
+  type ChatWidgetButtonTone,
+} from "./components/chat/ChatWidgetFrame";
+
+// terminal loaders — the house type-out applied to waiting. Styles:
+// @digithings-ai/ui/styles/terminal-loaders.css (needs chat-core.css first).
+export { TerminalStepCaret, type TerminalStepCaretProps } from "./components/terminal/TerminalStepCaret";
+export {
+  ContainerBootLoader,
+  CONTAINER_BOOT_STEPS,
+  type ContainerBootLoaderProps,
+} from "./components/terminal/ContainerBootLoader";
+export {
+  ChatResponseLoader,
+  CHAT_RESPONSE_STEPS,
+  CHAT_RESPONSE_HOLD_MS,
+  type ChatResponseLoaderProps,
+} from "./components/terminal/ChatResponseLoader";
+
+// digichat boot loader — the default embed warm-up animation (composer-outline
+// cube field). Styles: @digithings-ai/ui/styles/digichat-boot-loader.css.
+export {
+  DigichatBootLoader,
+  type DigichatBootLoaderProps,
+} from "./components/chat/DigichatBootLoader";
+
+// conviction family — dashboard F6 vocabulary, promoted verbatim
+export { ConvictionMeter, SignedConvictionBadge } from "./components/conviction";
+
+// contact family — Cloudflare-safe mailto link, promoted from the app forks
+export { ContactMailto, buildMailtoHref } from "./components/contact";
+
+// finance-charts family (#1450)
+export {
+  PriceChart,
+  EquityCurve,
+  DrawdownPlot,
+  useFinanceChart,
+  useFinanceChartPalette,
+  getFinancePalette,
+  readFinancePalette,
+  financeChartOptions,
+  tokenAlpha,
+  toChartTime,
+  useLightweightChart,
+  chartChromeOptions,
+  hostMonoFont,
+  toLineData,
+  timeToISO,
+  useChartTip,
+  ChartTipShell,
+  PRICE_CHART_DEMO,
+  EQUITY_CURVE_DEMO,
+  DRAWDOWN_DEMO,
+  DIGIQUANT_CHART,
+  readDigiquantChartScale,
+  type PriceChartProps,
+  type EquityCurveProps,
+  type DrawdownPlotProps,
+  type FinanceChartPalette,
+  type FinanceSeriesPoint,
+  type OhlcPoint,
+  type CrosshairLabelToken,
+  type ChartChrome,
+  type ChartTip,
+  type UseLightweightChartConfig,
+  type UseLightweightChartResult,
+  type DigiquantChartScale,
+} from "./components/finance-charts";
+
+// finance-composites family (#1450)
+export {
+  StockTicker,
+  MarketBar,
+  type MarketBarProps,
+  type MarketBarCell,
+  type MarketBarStatus,
+  OrderBook,
+  SortableTable,
+  PerformanceDashboard,
+  SyncedTearsheet,
+  type TickerItem,
+  type StockTickerProps,
+  type OrderBookLevel,
+  type OrderBookProps,
+  type SortableColumn,
+  type SortableTableProps,
+  type DashboardHeadline,
+  type DashboardRatio,
+  type DashboardAllocation,
+  type PerformanceDashboardProps,
+  type TearsheetPoint,
+  type SyncedTearsheetProps,
+} from "./components/finance-composites";
+
+// data-layout family (#1450)
+export {
+  Odometer,
+  OdometerStrip,
+  DotMatrixStat,
+  BentoGrid,
+  BentoCell,
+  CardRail,
+  ProductFrame,
+  type CardRailProps,
+  MediaFrame,
+  type MediaFrameProps,
+  FeatureCell,
+  TestimonialWall,
+  ModuleGrid,
+  treemapAreas,
+  treemapAreasConstrained,
+  treemapAnchored,
+  type ModuleGridItem,
+  type ModuleGridProps,
+  type TreemapRect,
+  type TreemapMins,
+  type OdometerStat,
+  type DotMatrixStatProps,
+  type BentoSpan,
+  type ProductFrameProps,
+  type FeatureCellProps,
+  type TestimonialQuote,
+  type TestimonialWallProps,
+} from "./components/data-layout";
+
+// effects-chrome family (#1450)
+export {
+  Pipeline,
+  RotatingPrompts,
+  StackingPanels,
+  AnnouncementBar,
+  TabStrip,
+  tabBaseId,
+  tabId,
+  tabPanelId,
+  ToastStack,
+  HorizontalScrollTrack,
+  HorizontalTrackStepper,
+  useHorizontalTrack,
+  type HorizontalScrollTrackProps,
+  type HorizontalTrackState,
+  type PipelineProps,
+  type PipelineColumn,
+  type PipelineNode,
+  type PipelineStatus,
+  type PipelineSummaryItem,
+  type RotatingPromptsProps,
+  type StackingPanelsProps,
+  type StackingPanel,
+  type AnnouncementBarProps,
+  type TabStripProps,
+  type TabItem,
+  type ToastStackProps,
+  type ToastItem,
+  type ToastTone,
+} from "./components/effects-chrome";
+
+// finance-tearsheet family (#1463) — print-grade SVG tearsheet grammar
+// (charts share one ViewWindow; the PDF pipeline re-renders them, so SVG is
+// a hard constraint — see packages/ui/CHARTS.md for the canvas split)
+export {
+  CandlestickChart,
+  TimeSeries,
+  MultiTimeSeries,
+  RiskBandStrip,
+  AllocationStepChart,
+  SignedBars,
+  ContributionReturnChart,
+  TradeReturnChart,
+  ReturnsMatrix,
+  SegToggle,
+  ChartLegend,
+  ChartResetButton,
+  KpiStrip,
+  Kpi,
+  TradeLogTable,
+  DirectionPill,
+  TearsheetCard,
+  TearsheetCardKpis,
+  TearsheetCardKpi,
+  LiveBadge,
+  LOOKBACK_OPTIONS,
+  MIN_VIEW,
+  clampView,
+  viewWindowForPreset,
+  viewWindowLastYear,
+  matchLookbackPreset,
+  viewsNear,
+  sliceByView,
+  PRINT_FULL_VIEW,
+  runTearsheetPrint,
+  isOpenTrade,
+  fmtCompact,
+  fmtPct,
+  fmtMoney,
+  fmtNum,
+  toneClass,
+  dailyReturnsFromEquity,
+  annualizedVolPct,
+  computeLivePerformanceKpis,
+  computeLiveVsMarkPct,
+  dayReturnAnchorNav,
+  derivePriceAsOfDate,
+  inceptionSignAgreesWithBase100,
+  informationRatioFromDaily,
+  olsBeta,
+  overlappingDailyReturns,
+  navHistoryForLiveOverlap,
+  relativeMetricsFromReturnSeries,
+  sinceInceptionPctFromNav,
+  MIN_OVERLAP_DAYS,
+  TEARSHEET_DEMO,
+  RISK_BANDS,
+  riskBandLabel,
+  dcaRateCopy,
+  type RiskBand,
+  type CandlestickChartProps,
+  type TimeSeriesProps,
+  type MultiTimeSeriesProps,
+  type OverlaySeries,
+  type RiskBandStripProps,
+  type AllocationStepChartProps,
+  type AllocationFillMarker,
+  type OverlayTone,
+  type ReferenceTone,
+  type ReferenceLineSpec,
+  type ReferenceBandSpec,
+  type ReferenceMarkerSpec,
+  type ChartReferences,
+  type ChartLegendKind,
+  type SignedBarsProps,
+  type ContributionReturnChartProps,
+  type ContributionReturnPoint,
+  type TradeReturnChartProps,
+  type ReturnsPeriod,
+  type MatrixMetric,
+  type ChartScale,
+  type ChartTone,
+  type ViewWindow,
+  type LookbackPreset,
+  type KpiStripProps,
+  type KpiProps,
+  type TradeLogTableProps,
+  type TradeLogColumn,
+  type TradeLogRow,
+  type TearsheetCardProps,
+  type LiveBadgeProps,
+  type TearsheetSeriesPoint,
+  type TearsheetOhlcBar,
+  type TearsheetTrade,
+  type TradeReturnBar,
+  type LiveKpiPosition,
+  type LiveKpiNavPoint,
+  type LiveKpiBenchmarkPoint,
+  type LivePerformanceKpis,
+  type LivePerformanceKpisInput,
+  StrategyTearsheet,
+  buildStrategyTearsheet,
+  seriesOrNull,
+  seriesSparkline,
+  sheetCagr,
+  type StrategySheetBar,
+  type StrategySheetMetric,
+  type StrategySheetModel,
+  type StrategySheetPoint,
+} from "./components/finance-tearsheet";
+
+// repo-activity family (#3445) — snapshot-first GitHub velocity, compact + detailed
+export {
+  RepoActivity,
+  RepoHeatmap,
+  bucketDaily,
+  levelFor,
+  fetchRepoActivityLive,
+  cloneParts,
+  grouped,
+  isoDay,
+  DEFAULT_LIVE_TIMEOUT_MS,
+  REPO_ACTIVITY_DEMO,
+  REPO_ACTIVITY_DEMO_CLONE,
+  REPO_ACTIVITY_DEMO_CONTRIBUTING,
+  REPO_ACTIVITY_DEMO_URL,
+  type HeatDay,
+  type RepoActivityProps,
+  type RepoHeatmapProps,
+  type RepoActivityLiveConfig,
+  type RepoActivitySnapshot,
+  type RepoContributor,
+  type RepoModuleRelease,
+  type RepoFeature,
+  type RepoIssueItem,
+  type RepoModuleActivity,
+  type RepoPullItem,
+  type RepoRelease,
+  type FetchRepoActivityLiveOptions,
+} from "./components/repo-activity";
+
+export { modules, edges, moduleById, type ModuleNode, type StackItem, type Tier } from "./data/modules";
+export { subsystems, subsystemById, type Subsystem } from "./data/subsystems";
+export {
+  GLOOMBERB_ATTRIBUTION,
+  GLOOMBERB_DELAY_NOTICE,
+  GLOOMBERB_TERMINAL_URL,
+  gloomberbTickerUrl,
+  readGloomberbAttribution,
+  type GloomberbAttribution,
+} from "./lib/gloomberb";
+
+// chrome (command palette) + symbols (brand marks) promotions (#1548)
+export {
+  CommandPalette,
+  type CommandPaletteProps,
+  type CommandPaletteGroup,
+  type CommandPaletteItem,
+} from "./components/command-palette";
+export {
+  DigiquantMark,
+  Wordmark,
+  type DigiquantMarkProps,
+  type WordmarkProps,
+} from "./components/symbols/marks";
+// Terminal identity — the `digi` + block-cursor lockup and the hairline display
+// cut. Supersedes `Wordmark` for new work; `Wordmark`/`Colophon` stay for the
+// surfaces already using them.
+export {
+  TerminalMark,
+  TerminalWordmark,
+  HairlineWordmark,
+  TERMINAL_CURSOR,
+  type TerminalMarkProps,
+  type TerminalWordmarkProps,
+  type HairlineWordmarkProps,
+} from "./components/symbols/terminal-marks";
+export {
+  AnimatedLockup,
+  MODULE_SUFFIXES,
+  type AnimatedLockupProps,
+} from "./components/symbols/terminal-lockup";
+
+// prose family (D1, #4429) — the shared long-form company/legal grammar
+// (PageHead / RuledList / RuledRow / Mono), promoted from digithings-web's
+// app-local `_company/prose.tsx`. Utilities only; no site/app CSS class.
+export {
+  Mono,
+  PageHead,
+  RuledList,
+  RuledRow,
+  type MonoProps,
+  type PageHeadProps,
+  type RuledListProps,
+  type RuledRowProps,
+} from "./components/prose";
+// figure family (D1, #4429) — the numbered `Fig N` figure caption.
+export { Figure, type FigureProps } from "./components/figure";
+// document family (D1, #4429) — the framed-column marketing grammar
+// (DocumentFrame / Section / PageTitle / Prose / GlyphList / GlyphRow): one
+// bordered column, hairline section separators, a small document-scale type
+// ladder, and the `[*]` + `<strong>Label</strong>` row. Utilities only; no
+// site/app CSS class, so no census entry and nothing to add to styles/.
+export {
+  DocumentFrame,
+  Section,
+  PageTitle,
+  Prose,
+  GlyphList,
+  GlyphRow,
+  type DocumentFrameProps,
+  type SectionProps,
+  type PageTitleProps,
+  type ProseProps,
+  type GlyphListProps,
+  type GlyphRowProps,
+} from "./components/document";
+
+// changelog family (D1, #4429) — the release rail: one row per release with a
+// sticky version/date aside and the shipped title in the wide column.
+export {
+  ReleaseRail,
+  type ReleaseRailItem,
+  type ReleaseRailProps,
+} from "./components/changelog";
+
+// footer family (D1, #4429) — the footer as a hairline table: one cell per
+// destination, the legal strip underneath.
+export {
+  FooterCells,
+  type FooterCell,
+  type FooterCellsProps,
+  type FooterMetaLink,
+} from "./components/footer";
+
+// page-geometry family (D1, #4429) — the persistent page structure and the
+// product-artefact depth treatment. `LayoutLines` is one fixed pair of dashed
+// vertical rules the whole page sits between; `MockupFrame` + `Mockup` + `Glow`
+// give a product shot layered depth instead of a flat border. Techniques read
+// out of launch-ui's source (MIT) and re-expressed in this kit's tokens.
+export {
+  LayoutLines,
+  Mockup,
+  MockupFrame,
+  Glow,
+} from "./components/page-geometry";
+
+// desk family (#6327) — the data-surface primitives lifted from the parked
+// digiquant app and the desk: one table (sort / filter / paginate / sticky),
+// the KPI grid and its sparkline, and the four states a payload can be in.
+export {
+  DataTable,
+  columnRoles,
+  type ColumnRole,
+  type DataTableColumn,
+  type DataTableProps,
+  type DataTableRowVariant,
+  type DataTableTone,
+  KpiGrid,
+  type KpiCell,
+  type KpiGridProps,
+  type KpiTone,
+  Sparkline,
+  type SparklineProps,
+  BlockBoundary,
+  StateBlock,
+  type BlockBoundaryProps,
+  type StateBlockProps,
+  type StateKind,
+} from "./components/desk";

package/src/lib/base-path.ts

@@ -0,0 +1,60 @@
+/**
+ * The base path the digichat app is served under (DIG-5121).
+ *
+ * The digichat app is served under `/chat` on digithings.ai. This package is
+ * shared with the marketing sites, which are served at the root, so the base
+ * path is EMPTY by default and only the digichat build carries one.
+ *
+ * The value comes from the same build-time variable the app reads
+ * (`NEXT_PUBLIC_DIGICHAT_BASE_PATH`): Next inlines `NEXT_PUBLIC_*` into every
+ * module of the bundle, so the browser gets the value the app was built with.
+ * The app's own copy lives in apps/digichat/src/lib/base-path.ts and reads
+ * the same variable — one value, two names for it, never two values.
+ *
+ * Why this file exists: the shared components make calls into the app's own
+ * API (the artifacts panel is the one that matters), and a root-absolute
+ * path ("/api/conversations/…") works while the app is at the root and 404s
+ * the moment it is served under a base path.
+ */
+
+/**
+ * The base path, or "" when the app is served at the root.
+ *
+ * Normalised the same way the app's own copy is (no trailing slash), so the
+ * two helpers always produce the same path for the same input.
+ *
+ * The read is the same one the app's own copy does (apps/digichat/src/lib/
+ * base-path.ts), and for the same reason: `process.env.NEXT_PUBLIC_*` is
+ * inlined into the bundle by the framework, so the browser gets the value the
+ * app was built with. It is NOT guarded by `typeof process` on purpose — a
+ * guard that reads "process is missing" in the browser would swallow the
+ * inlined value and silently serve the app at the root, which is exactly the
+ * bug this file exists to prevent.
+ */
+export const BASE_PATH: string = (process.env.NEXT_PUBLIC_DIGICHAT_BASE_PATH ?? "")
+  .trim()
+  .replace(/\/+$/, "");
+
+/**
+ * Prefix a path with the base path.
+ *
+ * The one way to write a path into the app from this package. A root-relative
+ * path that skips it breaks under a base path.
+ */
+export function p(path: string): string {
+  return `${BASE_PATH}${path}`;
+}
+
+/**
+ * The path without the base path.
+ *
+ * The mirror of `p`: a URL the app produced (already prefixed) has to be
+ * turned back into the app's own path before it can be matched against the
+ * app's route shape. With no base path this is the identity.
+ */
+export function stripBasePath(path: string): string {
+  if (!BASE_PATH) return path;
+  if (path === BASE_PATH) return "/";
+  if (path.startsWith(`${BASE_PATH}/`)) return path.slice(BASE_PATH.length);
+  return path;
+}

package/src/lib/cx.ts

@@ -0,0 +1,25 @@
+/**
+ * Class joiners. Deliberately NOT tailwind-merge: base-vs-call-site utility
+ * conflicts are resolved by layering instead — every default a call site may
+ * override lives in `@layer components`, where the app's utilities layer wins.
+ *
+ * Relocated from the retired controls layer (#4306) — ContactMailto is the
+ * surviving consumer.
+ */
+export const cx = (...parts: Array<string | false | null | undefined>): string =>
+  parts.filter(Boolean).join(" ");
+
+/**
+ * Composes a base class string with a Base UI `className` prop, which may be
+ * a plain string or a `(state) => string` resolver — the function form is
+ * preserved so state-driven classes keep working through the wrappers.
+ */
+export function cxBase<State>(
+  base: string,
+  className?: string | ((state: State) => string | undefined),
+): string | ((state: State) => string) {
+  if (typeof className === "function") {
+    return (state: State) => cx(base, className(state));
+  }
+  return cx(base, className);
+}