@scalepad/ui 0.1.0

package/src/components/Button/Button.figma.tsx

@@ -0,0 +1,74 @@
+import figma from '@figma/code-connect';
+
+import { Button } from './Button';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=9%3A1071',
+  {
+    props: {
+      variant: figma.enum('Variant', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Outline: 'outline',
+        Ghost: 'ghost',
+        Destructive: 'destructive',
+        'Outline Inverse': 'outline-inverse',
+      }),
+      roundness: figma.enum('Roundness', {
+        Default: 'default',
+        Round: 'round',
+      }),
+      size: figma.enum('Size', {
+        md: 'md',
+        lg: 'lg',
+        sm: 'sm',
+        xs: 'xs',
+      }),
+      // No matching props could be found for these Figma properties:
+      // "showLeftIcon": figma.boolean('Show left icon'),
+      // "showRightIcon": figma.boolean('Show right icon'),
+      // "leftIcon": figma.instance('⮑ Left Content'),
+      // "rightIcon": figma.instance('⮑ Right Content'),
+      // "roundness": figma.enum('Roundness', {
+      //   "Default": "default",
+      //   "Round": "round"
+      // }),
+      // "variant": figma.enum('Variant', {
+      //   "Primary": "primary",
+      //   "Secondary": "secondary",
+      //   "Outline": "outline",
+      //   "Ghost": "ghost",
+      //   "Destructive": "destructive",
+      //   "Ghost Muted": "ghost-muted"
+      // }),
+      // "size": figma.enum('Size', {
+      //   "Regular": "regular",
+      //   "Large": "large",
+      //   "Small": "small",
+      //   "Mini": "mini"
+      // }),
+      // "state": figma.enum('State', {
+      //   "Default": "default",
+      //   "Hover & Active": "hover---active",
+      //   "Focus": "focus",
+      //   "Disabled": "disabled"
+      // })
+    },
+    example: props => (
+      <Button
+        variant={props.variant}
+        roundness={props.roundness}
+        size={props.size}
+      />
+    ),
+  },
+);

package/src/components/Button/Button.tsx

@@ -0,0 +1,84 @@
+import { forwardRef } from 'react';
+
+import {
+  createPolymorphicComponent,
+  Button as MantineButton,
+  type ButtonProps as MantineButtonProps,
+} from '@mantine/core';
+
+import * as classes from './Button.css';
+
+export type ButtonVariants =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'outline'
+  | 'outline-inverse'
+  | 'ghost'
+  | 'ghost-muted'
+  | 'destructive';
+
+export interface ButtonProps extends MantineButtonProps {
+  /** Button variant from Figma design system */
+  variant?: ButtonVariants;
+  roundness?: 'default' | 'round';
+}
+
+const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', className, ...props }, ref) => {
+    // Map our custom variants to Mantine variants
+    let $variant: 'filled' | 'outline' | 'subtle' = 'filled';
+    let $color = props.color;
+    let customClassName = className;
+
+    if (variant === 'primary') {
+      $variant = 'filled';
+      $color = 'dark';
+      customClassName = `${classes.primaryButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'secondary') {
+      $variant = 'filled';
+      $color = 'gray';
+      customClassName = `${classes.secondaryButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'tertiary') {
+      $variant = 'filled';
+      customClassName = `${classes.tertiaryButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'destructive') {
+      $variant = 'filled';
+      $color = 'red';
+      customClassName = `${classes.destructiveButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'outline') {
+      $variant = 'outline';
+      customClassName = `${classes.outlineButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'ghost') {
+      $variant = 'subtle';
+      customClassName = `${classes.ghostButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'ghost-muted') {
+      $variant = 'subtle';
+      customClassName = `${classes.ghostMutedButton}${className ? ` ${className}` : ''}`;
+    } else if (variant === 'outline-inverse') {
+      $variant = 'outline';
+      $color = 'white';
+      customClassName = `${classes.outlineInverseButton}${className ? ` ${className}` : ''}`;
+    }
+
+    return (
+      <MantineButton
+        ref={ref}
+        variant={$variant}
+        color={$color}
+        className={customClassName}
+        {...props}
+        radius={props.roundness === 'round' ? 'full' : 'lg'}
+        fz={props.fz ?? 'sm'}
+        lh={props.lh ?? 21}
+        fw={props.fw ?? 600}
+      />
+    );
+  },
+);
+
+ButtonBase.displayName = 'Button';
+
+export const Button = createPolymorphicComponent<'button', ButtonProps>(
+  ButtonBase,
+);

package/src/components/Button/index.ts

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

package/src/components/Charts/ChartTooltip.figma.tsx

@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect';
+
+import { ChartTooltip } from './ChartTooltip';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  ChartTooltip,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=133%3A14788',
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "side": figma.enum('Side', {
+      //   "Top": "top",
+      //   "Bottom": "bottom",
+      //   "Left": "left",
+      //   "Right": "right"
+      // })
+    },
+    example: _props => (
+      <ChartTooltip
+        active
+        payload={[{ value: 42, payload: { date: '2026-04-08', value: 42 } }]}
+      />
+    ),
+  },
+);

package/src/components/Charts/ChartTooltip.tsx

@@ -0,0 +1,101 @@
+import { Box, Flex } from '@mantine/core';
+
+import { toDate } from '@scalepad/ui-utils/date';
+
+import { tokens } from '../../theme/themeContract.css';
+import { Text } from '../Typography';
+import * as classes from './TrendAreaChart.css';
+
+/**
+ * Payload item from recharts tooltip
+ */
+interface TooltipPayloadItem {
+  value?: number;
+  payload: {
+    date: string;
+    value: number;
+  };
+}
+
+export interface ChartTooltipProps {
+  /**
+   * Whether the tooltip is active/visible (passed by recharts)
+   */
+  active?: boolean;
+  /**
+   * Payload data from recharts (passed by recharts)
+   */
+  payload?: TooltipPayloadItem[];
+  /**
+   * Label for the value in tooltip (e.g., "Users", "Minutes")
+   */
+  valueLabel?: string;
+  /**
+   * Optional formatter for tooltip values
+   */
+  formatValue?: (value: number) => string;
+  /**
+   * Optional formatter for date labels
+   */
+  formatDate?: (date: string) => string;
+  /**
+   * Color for the indicator dot
+   */
+  color?: string;
+}
+
+/**
+ * Custom tooltip component for TrendAreaChart
+ * Matches Figma design with white background, border, and consistent typography
+ */
+export function ChartTooltip({
+  active,
+  payload,
+  valueLabel = 'Value',
+  formatValue,
+  formatDate,
+  color = tokens.color.stroke.primaryDefault,
+}: ChartTooltipProps) {
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+
+  const data = payload[0];
+  const date = data.payload.date as string;
+  const value = data.value as number;
+
+  // Format date - default to "Mon DD, YYYY" format
+  const formattedDate = formatDate
+    ? formatDate(date)
+    : toDate(date).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      });
+
+  // Format value - default to number with comma separators
+  const formattedValue = formatValue
+    ? formatValue(value)
+    : value.toLocaleString();
+
+  return (
+    <Box className={classes.tooltip}>
+      {/* Date header */}
+      <Text variant="caption2.stronger" mb="xs">
+        {formattedDate}
+      </Text>
+
+      {/* Value row with color dot */}
+      <Flex gap="xs" align="center">
+        <Box
+          className={classes.tooltipDot}
+          style={{ backgroundColor: color }}
+        />
+        <Text variant="caption2" c="text.subdued.default" style={{ flex: 1 }}>
+          {valueLabel}
+        </Text>
+        <Text variant="caption2.stronger">{formattedValue}</Text>
+      </Flex>
+    </Box>
+  );
+}

package/src/components/Charts/MiniBarSparkline.tsx

@@ -0,0 +1,75 @@
+import { Bar, BarChart, ResponsiveContainer } from 'recharts';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export type SparklineTone = 'success' | 'destructive' | 'neutral';
+
+export interface MiniBarSparklineProps {
+  /**
+   * Series of numeric values rendered left-to-right as bars.
+   */
+  data: number[];
+  /**
+   * Width in pixels.
+   * @default 100
+   */
+  width?: number;
+  /**
+   * Height in pixels.
+   * @default 28
+   */
+  height?: number;
+  /**
+   * Explicit bar color. Takes precedence over `tone`.
+   */
+  color?: string;
+  /**
+   * Semantic tone used to pick a default bar color. Ignored if `color` is set.
+   * @default 'success'
+   */
+  tone?: SparklineTone;
+  /**
+   * Accessible label for screen readers.
+   */
+  ariaLabel?: string;
+}
+
+const toneColors: Record<SparklineTone, string> = {
+  success: tokens.color.background.successFilled,
+  destructive: tokens.color.background.dangerFilled,
+  neutral: tokens.color.background.subduedFilled,
+};
+
+/**
+ * MiniBarSparkline — compact inline bar chart with no axes, grid, or tooltip.
+ * Designed to live inside a StatCard footer alongside a TrendBadge.
+ */
+export function MiniBarSparkline({
+  data,
+  width = 100,
+  height = 28,
+  color,
+  tone = 'success',
+  ariaLabel,
+}: MiniBarSparklineProps) {
+  const fill = color ?? toneColors[tone];
+  const chartData = data.map((value, index) => ({ index, value }));
+
+  return (
+    <div
+      role="img"
+      aria-label={ariaLabel}
+      style={{ width, height, lineHeight: 0 }}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={chartData}
+          margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+          barCategoryGap={2}
+        >
+          <Bar dataKey="value" fill={fill} radius={[2, 2, 0, 0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}