@scalepad/ui 0.1.0

package/src/components/StatCard/StatCard.css.ts

@@ -0,0 +1,70 @@
+/**
+ * StatCard component styles – vanilla-extract with semantic design tokens
+ */
+
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export const variantDefault = style({
+  backgroundColor: tokens.color.background.default,
+  borderColor: tokens.color.stroke.default,
+});
+
+export const variantInformation = style({
+  backgroundColor: tokens.color.background.informationLight,
+});
+
+export const variantSuccess = style({
+  backgroundColor: tokens.color.background.successLight,
+});
+
+export const variantDanger = style({
+  backgroundColor: tokens.color.background.dangerLight,
+});
+
+export const variantWarning = style({
+  backgroundColor: tokens.color.background.warningLight,
+});
+
+export const variantSubdued = style({
+  backgroundColor: tokens.color.background.subduedLight,
+});
+
+export const iconContainer = style({
+  borderRadius: tokens.radius.full,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+});
+
+export const iconDefault = style({
+  backgroundColor: tokens.color.background.subduedLight,
+  color: tokens.color.icon.default,
+});
+
+export const iconInformation = style({
+  backgroundColor: tokens.color.background.informationLightHover,
+  color: tokens.color.icon.informationStrong,
+});
+
+export const iconSuccess = style({
+  backgroundColor: tokens.color.background.successLightHover,
+  color: tokens.color.icon.successStrong,
+});
+
+export const iconDanger = style({
+  backgroundColor: tokens.color.background.dangerLightHover,
+  color: tokens.color.icon.dangerStrong,
+});
+
+export const iconWarning = style({
+  backgroundColor: tokens.color.background.warningLightHover,
+  color: tokens.color.icon.warningStrong,
+});
+
+export const iconSubdued = style({
+  backgroundColor: tokens.color.background.subduedLightHover,
+  color: tokens.color.icon.default,
+});

package/src/components/StatCard/StatCard.tsx

@@ -0,0 +1,201 @@
+import type { ComponentType, ReactNode } from 'react';
+
+import { clsx } from 'clsx';
+
+import { Box, Card, Group, Stack } from '../DesignSystemPrimitives';
+import { Text, Title } from '../Typography';
+import * as classes from './StatCard.css';
+
+type StatCardVariant =
+  | 'default'
+  | 'information'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'subdued'
+  | 'destructive';
+type StatCardLayout = 'left' | 'centered';
+type StatCardIconSize = 'lg' | 'md' | 'sm';
+type SemanticStatCardVariant =
+  | 'default'
+  | 'information'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'subdued';
+type StatCardIconComponent = ComponentType<{ size?: number | string }>;
+
+const cardVariantClassNames: Record<SemanticStatCardVariant, string> = {
+  default: classes.variantDefault,
+  information: classes.variantInformation,
+  success: classes.variantSuccess,
+  danger: classes.variantDanger,
+  warning: classes.variantWarning,
+  subdued: classes.variantSubdued,
+};
+
+const iconVariantClassNames: Record<SemanticStatCardVariant, string> = {
+  default: classes.iconDefault,
+  information: classes.iconInformation,
+  success: classes.iconSuccess,
+  danger: classes.iconDanger,
+  warning: classes.iconWarning,
+  subdued: classes.iconSubdued,
+};
+
+const toSemanticVariant = (
+  variant: StatCardVariant,
+): SemanticStatCardVariant => {
+  if (variant === 'destructive') {
+    return 'danger';
+  }
+
+  return variant;
+};
+
+const iconSizePx: Record<StatCardIconSize, number> = {
+  lg: 44,
+  md: 36,
+  sm: 24,
+};
+
+const iconGlyphSizePx: Record<StatCardIconSize, number> = {
+  lg: 24,
+  md: 20,
+  sm: 14,
+};
+
+export interface StatCardProps {
+  /**
+   * The title of the statistic
+   */
+  title: string;
+  /**
+   * The main value/number to display
+   */
+  value: string | number;
+  /**
+   * Optional subtitle or additional information
+   */
+  subtitle?: string;
+  /**
+   * Optional footer content rendered beneath the subtitle.
+   * Use for trend pills, sparklines, or other supporting UI.
+   */
+  children?: ReactNode;
+  /**
+   * Visual variant of the card
+   * @default 'default'
+   */
+  variant?: StatCardVariant;
+  /**
+   * Card content alignment
+   * @default 'left'
+   */
+  layout?: StatCardLayout;
+  /**
+   * Icon component to display (for example: icon={Monitor})
+   */
+  icon?: StatCardIconComponent;
+  /**
+   * Icon container size
+   * @default 'md'
+   */
+  iconSize?: StatCardIconSize;
+  /**
+   * Optional small rounded-square swatch rendered before the title. Takes any
+   * CSS color value — pass a design-system token value for consistency.
+   * Ignored when `icon` is also provided (the icon slot wins).
+   */
+  accentColor?: string;
+}
+
+/**
+ * StatCard component
+ * Displays a statistic with semantic variants and layout options
+ */
+export function StatCard({
+  title,
+  value,
+  subtitle,
+  children,
+  variant = 'default',
+  layout = 'left',
+  icon,
+  iconSize = 'md',
+  accentColor,
+}: StatCardProps) {
+  const semanticVariant = toSemanticVariant(variant);
+  const cardClassName = cardVariantClassNames[semanticVariant];
+  const iconClassName = iconVariantClassNames[semanticVariant];
+  const iconContainerSize = iconSizePx[iconSize];
+  const iconGlyphSize = iconGlyphSizePx[iconSize];
+  const Icon = icon;
+
+  let withBorder = false;
+  if (semanticVariant === 'default') {
+    withBorder = true;
+  }
+
+  let align: 'flex-start' | 'center' = 'flex-start';
+  let titleGroupJustify: 'flex-start' | 'center' = 'flex-start';
+  let textAlign: 'left' | 'center' = 'left';
+  if (layout === 'centered') {
+    align = 'center';
+    titleGroupJustify = 'center';
+    textAlign = 'center';
+  }
+
+  return (
+    <Card
+      padding="lg"
+      radius="lg"
+      withBorder={withBorder}
+      className={cardClassName}
+    >
+      <Stack gap="sm" align={align}>
+        <Group
+          gap="sm"
+          align="center"
+          justify={titleGroupJustify}
+          wrap="nowrap"
+        >
+          {Icon ? (
+            <Box
+              className={clsx(classes.iconContainer, iconClassName)}
+              style={{
+                width: `${iconContainerSize}px`,
+                height: `${iconContainerSize}px`,
+              }}
+            >
+              <Icon size={iconGlyphSize} />
+            </Box>
+          ) : accentColor ? (
+            <Box
+              aria-hidden
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 2,
+                backgroundColor: accentColor,
+                flexShrink: 0,
+              }}
+            />
+          ) : null}
+          <Text variant="caption1" c="text.subdued.strong" ta={textAlign}>
+            {title}
+          </Text>
+        </Group>
+        <Title variant="heading2" order={2} ta={textAlign}>
+          {value}
+        </Title>
+        {subtitle && (
+          <Text variant="caption1" c="text.subdued.default" ta={textAlign}>
+            {subtitle}
+          </Text>
+        )}
+        {children}
+      </Stack>
+    </Card>
+  );
+}

package/src/components/StatCard/index.ts

@@ -0,0 +1 @@
+export { StatCard, type StatCardProps } from './StatCard';

package/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+
+import { Badge, type BadgeProps, type BadgeSize } from '../Badge';
+
+export type StatusBadgeTone =
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'destructive'
+  | 'neutral';
+
+export interface StatusBadgeProps {
+  /**
+   * Semantic tone of the status. Drives both the Badge variant and the dot color.
+   */
+  tone: StatusBadgeTone;
+  /**
+   * Status label to render (e.g. "Active", "In progress").
+   */
+  children: ReactNode;
+  /**
+   * Badge size
+   * @default 'sm'
+   */
+  size?: BadgeSize;
+}
+
+const toneToVariant: Record<StatusBadgeTone, BadgeProps['variant']> = {
+  success: 'success',
+  warning: 'warning',
+  info: 'info',
+  destructive: 'destructive',
+  neutral: 'secondary',
+};
+
+function StatusDot() {
+  return (
+    <span
+      data-testid="statusbadge-dot"
+      aria-hidden="true"
+      style={{
+        display: 'inline-block',
+        width: 6,
+        height: 6,
+        borderRadius: '50%',
+        backgroundColor: 'currentColor',
+      }}
+    />
+  );
+}
+
+/**
+ * StatusBadge renders a tone-coded pill with a leading dot. Thin wrapper around
+ * Badge for the Budgets-style line-item status column (Active / In progress /
+ * Planned / Expired / …).
+ */
+export function StatusBadge({ tone, children, size = 'sm' }: StatusBadgeProps) {
+  return (
+    <Badge
+      data-testid="statusbadge-root"
+      data-variant={toneToVariant[tone]}
+      variant={toneToVariant[tone]}
+      roundness="round"
+      size={size}
+      leftSection={<StatusDot />}
+    >
+      {children}
+    </Badge>
+  );
+}

package/src/components/StatusBadge/index.ts

@@ -0,0 +1,2 @@
+export { StatusBadge } from './StatusBadge';
+export type { StatusBadgeProps, StatusBadgeTone } from './StatusBadge';

package/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,67 @@
+import { Box } from '@mantine/core';
+
+/**
+ * Common status types used across the application
+ */
+export type DeviceStatus = 'online' | 'offline' | 'unknown';
+export type DeploymentStatus = 'success' | 'failed';
+
+/**
+ * Maps common status values to StatusIndicator variants
+ * - 'online' | 'success' → 'default'
+ * - 'offline' | 'failed' | 'unknown' → 'error'
+ */
+export function getStatusVariant(
+  status: DeviceStatus | DeploymentStatus,
+): 'default' | 'error' {
+  return status === 'online' || status === 'success' ? 'default' : 'error';
+}
+
+export interface StatusIndicatorProps {
+  /**
+   * The visual variant to display
+   * - 'default': Green indicator with light border (positive states)
+   * - 'error': Red indicator with light border (negative states)
+   */
+  variant: 'default' | 'error';
+  /**
+   * Size of the status indicator in pixels
+   * @default 16
+   */
+  size?: number;
+  /**
+   * Accessible label for screen readers
+   * Required to ensure semantic accuracy in different contexts
+   * Examples: 'Online', 'Success', 'Active', 'Healthy', 'Offline', 'Failed', 'Error'
+   */
+  label: string;
+}
+
+/**
+ * StatusIndicator component
+ * Displays a circular status indicator with color-coded states
+ * Matches Figma design with Default and Error variants
+ */
+export function StatusIndicator({
+  variant,
+  size = 16,
+  label,
+}: StatusIndicatorProps) {
+  // Map variant to colors (matching Figma design tokens)
+  const isDefault = variant === 'default';
+  const bgColor = isDefault ? 'green.6' : 'red.7';
+
+  return (
+    <Box
+      w={size}
+      h={size}
+      bg={bgColor}
+      role="status"
+      aria-label={label}
+      style={{
+        borderRadius: '50%',
+        border: '4px solid var(--color-stroke-default)',
+      }}
+    />
+  );
+}

package/src/components/StatusIndicator/index.ts

@@ -0,0 +1,6 @@
+export { StatusIndicator, getStatusVariant } from './StatusIndicator';
+export type {
+  StatusIndicatorProps,
+  DeviceStatus,
+  DeploymentStatus,
+} from './StatusIndicator';

package/src/components/SubNavigation/SubNavigation.css.ts

@@ -0,0 +1,72 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+import { textStyleVariants } from '../../tokens/text-styles';
+
+export const root = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingInline: tokens.spacing.sm,
+  paddingBlock: tokens.spacing.xs,
+  borderBottom: `1px solid ${tokens.color.stroke.default}`,
+  gap: tokens.spacing.md,
+  flexShrink: 0,
+});
+
+export const items = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing.md,
+});
+
+export const actions = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing.xs,
+});
+
+const itemBase = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: tokens.spacing.xs,
+  paddingInline: tokens.spacing.xs,
+  paddingBlock: tokens.spacing['3xs'],
+  borderRadius: tokens.radius.md,
+  cursor: 'pointer',
+  textDecoration: 'none',
+  border: 'none',
+  background: 'transparent',
+  color: tokens.color.text.subduedDefault,
+  ...textStyleVariants['body1.strong'],
+  fontFamily: 'inherit',
+  transition: 'background-color 150ms ease, color 150ms ease',
+  selectors: {
+    '&:hover': {
+      backgroundColor: tokens.color.background.subduedUltralight,
+      color: tokens.color.text.subduedStrong,
+    },
+  },
+});
+
+export const item = itemBase;
+
+export const itemActive = style({
+  backgroundColor: tokens.color.background.primaryLight,
+  color: tokens.color.text.primaryDefault,
+  selectors: {
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLightHover,
+      color: tokens.color.text.primaryDefault,
+    },
+  },
+});
+
+export const itemIcon = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: 20,
+  height: 20,
+});

package/src/components/SubNavigation/SubNavigation.tsx

@@ -0,0 +1,104 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ReactNode,
+} from 'react';
+
+import { Text } from '../Typography';
+import * as classes from './SubNavigation.css';
+
+// ---------------------------------------------------------------------------
+// SubNavigation root
+// ---------------------------------------------------------------------------
+
+export interface SubNavigationProps {
+  children: ReactNode;
+  className?: string;
+}
+
+function SubNavigationRoot({ children, className }: SubNavigationProps) {
+  return (
+    <nav className={`${classes.root}${className ? ` ${className}` : ''}`}>
+      {children}
+    </nav>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// SubNavigation.Items – wraps the left-aligned navigation items
+// ---------------------------------------------------------------------------
+
+function SubNavigationItems({ children }: { children: ReactNode }) {
+  return <div className={classes.items}>{children}</div>;
+}
+
+// ---------------------------------------------------------------------------
+// SubNavigation.Actions – wraps trailing actions on the right side
+// ---------------------------------------------------------------------------
+
+function SubNavigationActions({ children }: { children: ReactNode }) {
+  return <div className={classes.actions}>{children}</div>;
+}
+
+// ---------------------------------------------------------------------------
+// SubNavigation.Item – polymorphic (renders as <button> by default,
+// accepts `component` to render as a TanStack Router Link etc.)
+// ---------------------------------------------------------------------------
+
+type SubNavigationItemOwnProps = {
+  icon?: ReactNode;
+  label: string;
+  active?: boolean;
+};
+
+type PolymorphicProps<C extends ElementType> = SubNavigationItemOwnProps &
+  Omit<
+    ComponentPropsWithoutRef<C>,
+    keyof SubNavigationItemOwnProps | 'component'
+  > & {
+    component?: C;
+  };
+
+function SubNavigationItemInner<C extends ElementType = 'button'>({
+  component,
+  icon,
+  label,
+  active = false,
+  className,
+  ...rest
+}: PolymorphicProps<C>) {
+  const Component: ElementType = component ?? 'button';
+  const combinedClassName = [
+    classes.item,
+    active ? classes.itemActive : '',
+    className ?? '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Component className={combinedClassName} {...rest}>
+      {icon && <span className={classes.itemIcon}>{icon}</span>}
+      <Text variant="body1.strong" c="inherit">
+        {label}
+      </Text>
+    </Component>
+  );
+}
+
+// Typed as a generic function component so callers get inference on `component`
+const SubNavigationItem = SubNavigationItemInner as <
+  C extends ElementType = 'button',
+>(
+  props: PolymorphicProps<C>,
+) => ReactNode;
+
+// ---------------------------------------------------------------------------
+// Compound export
+// ---------------------------------------------------------------------------
+
+export const SubNavigation = Object.assign(SubNavigationRoot, {
+  Items: SubNavigationItems,
+  Item: SubNavigationItem,
+  Actions: SubNavigationActions,
+});

package/src/components/SubNavigation/index.ts

@@ -0,0 +1,2 @@
+export { SubNavigation } from './SubNavigation';
+export type { SubNavigationProps } from './SubNavigation';

package/src/components/SuspenseLoader.tsx

@@ -0,0 +1,22 @@
+import { Center, Loader } from '@mantine/core';
+
+import { zIndex } from '../tokens';
+
+/**
+ * Fixed-position loader for Suspense boundaries
+ * Always centers on screen regardless of where the Suspense boundary is
+ */
+export function SuspenseLoader() {
+  return (
+    <Center
+      pos="fixed"
+      top={0}
+      left={0}
+      right={0}
+      bottom={0}
+      style={{ zIndex: zIndex.loading }}
+    >
+      <Loader size="lg" />
+    </Center>
+  );
+}