@scalepad/ui 0.1.0 → 0.1.1

package/README.md

@@ -25,7 +25,7 @@ pnpm add @mantine/core@9.0.1 @mantine/dates@9.0.1 @mantine/hooks@9.0.1 \
   @tiptap/extension-link@3.22.3 @tiptap/extension-placeholder@3.22.3 \
   @tiptap/extension-underline@3.22.3 @tiptap/pm@3.22.3 @tiptap/react@3.22.3 \
   @tiptap/starter-kit@3.22.3 @tiptap/suggestion@3.22.3 \
-  @vanilla-extract/css@^1.16.2 clsx@^2.1.1 dayjs@^1.11.19 geist@^1.5.1 \
+  @vanilla-extract/css@^1.16.2 clsx@^2.1.1 dayjs@^1.11.19 \
   lucide-react@^0.469.0 react@^19.0.0 react-dom@^19.0.0 \
   react-intersection-observer@^10.0.0 recharts@^3.6.0
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalepad/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "sideEffects": false,
   "description": "ScalePad LM Design System — React + Mantine 9 + vanilla-extract component library",
@@ -58,7 +58,6 @@
     "@vanilla-extract/css": "^1.16.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
-    "geist": "^1.5.1",
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -102,7 +101,6 @@
     "@vitest/coverage-v8": "^4.0.17",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
-    "geist": "^1.5.1",
     "lucide-react": "^0.469.0",
     "playwright": "^1.57.0",
     "prop-types": "^15.8.1",

package/src/ThemeProvider.tsx

@@ -7,7 +7,7 @@ import '@mantine/notifications/styles.css';
 // oxlint-disable-next-line import/no-unassigned-import
 import '@mantine/schedule/styles.css';
 // oxlint-disable-next-line import/no-unassigned-import
-import './assets/geist-fonts.css';
+import './inter-font';
 
 import type { ReactNode } from 'react';
 

package/src/components/Anchor/Anchor.css.ts

@@ -0,0 +1,163 @@
+/**
+ * Anchor component styles – vanilla-extract with semantic design tokens.
+ *
+ * Anchor is a polymorphic component that renders as `<a>` (default) or
+ * `<button>`. It covers two related use cases with the same visual model:
+ * inline links inside body copy, and text-only "buttons" (no fill, no
+ * border) like the mockup's "Generate" / "Regenerate".
+ *
+ * Typography is driven entirely by `variant` (BodyVariant) — one class per
+ * variant generated from `textStyleVariants`. There is no inline `fz`/`fw`
+ * forwarding; the variant class is the only path that sets typography.
+ */
+
+import { style, styleVariants } from '@vanilla-extract/css';
+
+import { textStyleVariants, type BodyVariant } from '../../tokens/text-styles';
+import { mantineVars } from '../../theme/mantineVars';
+import { tokens } from '../../theme/themeContract.css';
+
+const focusRing = {
+  outline: `2px solid ${tokens.color.stroke.focusStrong}`,
+  outlineOffset: 2,
+  borderRadius: tokens.radius.sm,
+} as const;
+
+/**
+ * Base styles applied to every Anchor: clear underline at rest (the design
+ * system's links underline only on interaction), reset background/border so
+ * `component="button"` looks identical to `<a>`, and apply the focus ring
+ * + hover underline.
+ */
+export const root = style({
+  backgroundColor: 'transparent',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  textDecoration: 'none',
+  textDecorationThickness: '1px',
+  textUnderlineOffset: '2px',
+  transition: 'color 150ms ease, text-decoration-color 150ms ease',
+  selectors: {
+    '&:hover': {
+      textDecoration: 'underline',
+    },
+    '&:focus-visible': focusRing,
+  },
+});
+
+/**
+ * One class per BodyVariant — typography is generated from the same
+ * `textStyleVariants` source that `Text` and `Title` use, so they cannot
+ * drift.
+ */
+export const variant = styleVariants(textStyleVariants, styles => ({
+  fontFamily: styles.fontFamily,
+  fontWeight: styles.fontWeight,
+  fontSize: styles.fontSize,
+  lineHeight: styles.lineHeight,
+  letterSpacing: styles.letterSpacing,
+  textTransform: 'textTransform' in styles ? styles.textTransform : undefined,
+})) satisfies Record<BodyVariant, string>;
+
+/**
+ * One class per AnchorTone. Color at rest + hover. The `:hover` underline
+ * comes from `root`; tone classes only set `color`. Dark-mode overrides
+ * pin to the same semantic tokens (which already swap per theme via the
+ * theme contract).
+ */
+export const tone = styleVariants({
+  default: {
+    color: tokens.color.text.default,
+    selectors: {
+      '&:hover': { color: tokens.color.text.primaryDefault },
+      '&:focus-visible': { color: tokens.color.text.primaryDefault },
+      [`${mantineVars.darkSelector} &`]: { color: tokens.color.text.default },
+    },
+  },
+  primary: {
+    color: tokens.color.text.primaryDefault,
+    selectors: {
+      '&:hover': { color: tokens.color.text.primaryLight },
+      '&:focus-visible': { color: tokens.color.text.primaryLight },
+      [`${mantineVars.darkSelector} &`]: {
+        color: tokens.color.text.primaryDefault,
+      },
+    },
+  },
+  danger: {
+    color: tokens.color.text.dangerDefault,
+    selectors: {
+      '&:hover': { color: tokens.color.text.dangerStrong },
+      '&:focus-visible': { color: tokens.color.text.dangerStrong },
+      [`${mantineVars.darkSelector} &`]: {
+        color: tokens.color.text.dangerDefault,
+      },
+    },
+  },
+  subdued: {
+    color: tokens.color.text.subduedStrong,
+    selectors: {
+      '&:hover': { color: tokens.color.text.default },
+      '&:focus-visible': { color: tokens.color.text.default },
+      [`${mantineVars.darkSelector} &`]: {
+        color: tokens.color.text.subduedStrong,
+      },
+    },
+  },
+});
+
+/**
+ * Layout for the case where `leftSection` and/or `rightSection` is set.
+ * Without icons we leave the root as plain inline text so it flows
+ * naturally inside a paragraph.
+ */
+export const withIcons = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'baseline',
+});
+
+/** Gap between icon section(s) and label, sized to match Figma `Anchor`. */
+export const gap = styleVariants({
+  xs: { gap: 4 },
+  sm: { gap: 4 },
+  md: { gap: 6 },
+  lg: { gap: 6 },
+});
+
+/**
+ * Wrapper around left / right icon nodes. `display: inline-flex` keeps the
+ * icon visually centered with the label without forcing the caller to wrap
+ * their lucide icon themselves.
+ */
+export const iconSection = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexShrink: 0,
+});
+
+/**
+ * Disabled state — used by both `<a aria-disabled>` and `<button disabled>`.
+ * `pointer-events: none` neutralises hover/click without removing focus
+ * ability when needed (e.g. screenreader can still navigate to the
+ * `aria-disabled` link).
+ */
+export const disabled = style({
+  color: tokens.color.text.disabledDefault,
+  cursor: 'not-allowed',
+  pointerEvents: 'none',
+  selectors: {
+    '&:hover': {
+      textDecoration: 'none',
+      color: tokens.color.text.disabledDefault,
+    },
+    '&:focus-visible': {
+      color: tokens.color.text.disabledDefault,
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      color: tokens.color.text.disabledDefault,
+    },
+  },
+});

package/src/components/Anchor/Anchor.figma.tsx

@@ -0,0 +1,57 @@
+import figma from '@figma/code-connect';
+
+import { Anchor } from './Anchor';
+
+/**
+ * Code Connect mapping for the LM Design System `Anchor` component_set
+ * (formerly `Link Button`, renamed to keep design + code names aligned).
+ *
+ * The component_set lives on page `Anchor` (node `842:44446`) in
+ * `LM Design System` (`VCLfybgU3OaUUPrQdBaVmP`). Variants exposed:
+ *
+ * - `Variant`: Default | Primary | Danger | Subdued — color tone.
+ * - `Size`:    Mini | Small | Default | Large       — icon-gap scale.
+ * - `Roundness`, `State` (Default | Hover & Active | Focus | Disabled):
+ *   not surfaced as code props. Hover / focus / disabled are interaction
+ *   state; `Roundness` only changes the focus-ring shape.
+ * - Boolean-gated icon swaps `Show left icon` + `⮑ Left icon` and
+ *   `Show right icon` + `⮑ Right icon` map to `leftSection` / `rightSection`.
+ */
+figma.connect(
+  Anchor,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=842-44446',
+  {
+    props: {
+      tone: figma.enum('Variant', {
+        Default: 'default',
+        Primary: 'primary',
+        Danger: 'danger',
+        Subdued: 'subdued',
+      }),
+      size: figma.enum('Size', {
+        Default: 'md',
+        Large: 'lg',
+        Small: 'sm',
+        Mini: 'xs',
+      }),
+      leftSection: figma.boolean('Show left icon', {
+        true: figma.instance('⮑ Left icon'),
+        false: undefined,
+      }),
+      rightSection: figma.boolean('Show right icon', {
+        true: figma.instance('⮑ Right icon'),
+        false: undefined,
+      }),
+    },
+    example: props => (
+      <Anchor
+        tone={props.tone}
+        size={props.size}
+        leftSection={props.leftSection}
+        rightSection={props.rightSection}
+      >
+        Label
+      </Anchor>
+    ),
+  },
+);

package/src/components/Anchor/Anchor.tsx

@@ -1,3 +1,33 @@
+/**
+ * Design System Anchor Component
+ *
+ * Polymorphic — renders as `<a>` by default and `component="button"` for
+ * action triggers (e.g. inline "Generate" / "Regenerate" actions). Covers
+ * both inline links and text-only "buttons" with one component.
+ *
+ * Typography is locked to the design-system body variants (no `fz`/`fw`/
+ * `lh`/etc. forwarded). Color is controlled via `tone`; use `c` only for
+ * one-off escapes (e.g. `c="inherit"` to flow color from parent).
+ *
+ * @example Inline link
+ * ```tsx
+ * <Anchor href="/clients/123">Open client</Anchor>
+ * ```
+ *
+ * @example Text-only button (mockup pattern)
+ * ```tsx
+ * <Anchor
+ *   component="button"
+ *   type="button"
+ *   tone="primary"
+ *   leftSection={<RefreshCcw size={14} />}
+ *   onClick={onRegenerate}
+ * >
+ *   Regenerate link
+ * </Anchor>
+ * ```
+ */
+
 import { forwardRef, type ReactNode } from 'react';
 
 import {
@@ -5,39 +35,110 @@ import {
   createPolymorphicComponent,
   type AnchorProps as MantineAnchorProps,
 } from '@mantine/core';
+import { clsx } from 'clsx';
 
-import { textStyleVariants, type BodyVariant } from '../../tokens/text-styles';
 import { resolveColorToken } from '../../utils/color-props';
+import type { TypographyStyleProp } from '../../utils/typography-props';
+
+import * as classes from './Anchor.css';
+
+import type { BodyVariant, TextColor } from '../../tokens';
 
-import type { TextColor } from '../../tokens/color-types';
+export type AnchorTone = 'default' | 'primary' | 'danger' | 'subdued';
 
-type TypographyStyleProps = 'fw' | 'fz' | 'size' | 'lh' | 'ff' | 'lts' | 'fs';
+/**
+ * Box size — controls the icon-to-label gap. Typography is independent and
+ * comes from `variant`. Maps to Figma `Anchor`'s `Size` property
+ * (Mini/Small/Default/Large).
+ */
+export type AnchorSize = 'xs' | 'sm' | 'md' | 'lg';
 
 export type AnchorProps = Omit<
   MantineAnchorProps,
-  TypographyStyleProps | 'c' | 'children'
+  TypographyStyleProp | 'c' | 'children' | 'variant' | 'color'
 > & {
+  /** Typography variant from the design system. Default `body1`. */
   variant?: BodyVariant;
+  /**
+   * Color tone. Maps to the Figma `Anchor` component's `Variant` property.
+   * Default `primary` (matches Mantine's link-green default and existing
+   * `<Anchor component="button">` usage).
+   */
+  tone?: AnchorTone;
+  /** Box size — controls icon gap. Default `md`. */
+  size?: AnchorSize;
+  /** Optional icon node rendered before the label. */
+  leftSection?: ReactNode;
+  /** Optional icon node rendered after the label. */
+  rightSection?: ReactNode;
+  /**
+   * Disabled state. For `<a>` renders `aria-disabled` and removes hover;
+   * for `<button>` adds the native `disabled` attribute.
+   */
+  disabled?: boolean;
+  /**
+   * Color override. Use sparingly — `tone` should cover semantic cases.
+   * `inherit` flows the color from the parent (e.g. inside a tinted `<Text>`).
+   */
   c?: TextColor | 'inherit';
   children?: ReactNode;
 };
 
 const AnchorBase = forwardRef<HTMLAnchorElement, AnchorProps>(
-  ({ variant = 'body1', c, ...rest }, ref) => {
-    const variantStyles = textStyleVariants[variant];
-    const resolvedC = resolveColorToken(c);
+  (
+    {
+      variant = 'body1',
+      tone = 'primary',
+      size = 'md',
+      leftSection,
+      rightSection,
+      disabled,
+      className,
+      children,
+      c,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasIcons = leftSection != null || rightSection != null;
+    // Mantine forwards arbitrary `component` via polymorphic typing.
+    // Narrow at runtime so we can apply the right disabled semantics
+    // (native `disabled` for `<button>`, `aria-disabled` for `<a>`).
+    const isButton = (rest as { component?: unknown }).component === 'button';
+
+    const cls = clsx(
+      classes.root,
+      classes.variant[variant],
+      classes.tone[tone],
+      hasIcons && classes.withIcons,
+      hasIcons && classes.gap[size],
+      disabled && classes.disabled,
+      className,
+    );
+
+    const resolvedC = c !== undefined ? resolveColorToken(c) : undefined;
 
     return (
       <MantineAnchor
         ref={ref}
-        fw={variantStyles.fontWeight}
-        fz={variantStyles.fontSize}
-        lh={variantStyles.lineHeight}
-        lts={variantStyles.letterSpacing}
-        ff={variantStyles.fontFamily}
+        className={cls}
         c={resolvedC}
+        aria-disabled={!isButton && disabled ? true : undefined}
+        {...(isButton && disabled ? { disabled: true } : {})}
         {...rest}
-      />
+      >
+        {leftSection != null && (
+          <span className={classes.iconSection} aria-hidden>
+            {leftSection}
+          </span>
+        )}
+        {children}
+        {rightSection != null && (
+          <span className={classes.iconSection} aria-hidden>
+            {rightSection}
+          </span>
+        )}
+      </MantineAnchor>
     );
   },
 );

package/src/components/Anchor/index.ts

@@ -1,2 +1,2 @@
 export { Anchor } from './Anchor';
-export type { AnchorProps } from './Anchor';
+export type { AnchorProps, AnchorSize, AnchorTone } from './Anchor';

package/src/components/FilterMenu/FilterSubMenuTypes/SearchableFilterSubmenu.tsx

@@ -193,12 +193,16 @@ export function SearchableFilterSubmenu({
         ) : displayedItems.length > 0 ? (
           <>
             {displayedItems.map(item => (
+              // Toggling flows through the Checkbox's native onChange (input
+              // click + label click both delegate there). We deliberately
+              // don't put `onClick` on Menu.Item: Mantine's Checkbox renders
+              // its label as a `<label for=input>` whose click event keeps
+              // bubbling after delegating to the input, so a Menu.Item.onClick
+              // would catch the bubbled event and fire a second toggle that
+              // net-cancels the first. `onKeyDown` for space stays so the
+              // row can still be toggled when focused via keyboard.
               <Menu.Item
                 key={item.id}
-                onClick={e => {
-                  e.stopPropagation();
-                  toggleItem(item.id);
-                }}
                 closeMenuOnClick={false}
                 onKeyDown={e => {
                   if (e.key === ' ') {
@@ -212,7 +216,6 @@ export function SearchableFilterSubmenu({
                   <Checkbox
                     checked={selectedIds.has(item.id)}
                     onChange={() => toggleItem(item.id)}
-                    onClick={e => e.stopPropagation()}
                     size="sm"
                     label={item.name}
                   />

package/src/components/FilterMenu/helpers.ts

@@ -14,8 +14,11 @@ export function extractFilterValue(
   );
 
   if (schema.type === 'boolean') {
-    // Boolean filters: true if category exists and has items, false otherwise
-    return category ? category.items.length > 0 : false;
+    // Boolean filters are binary — they have no concept of items. The
+    // canonical writer (`createFilterCategory`) emits a stub `{id, name:'True'}`
+    // entry, but external consumers also produce the category with `items: []`,
+    // so we treat presence of the category as the on-state.
+    return Boolean(category);
   }
 
   if (schema.type === 'multi-select') {

package/src/components/Typography/Text.tsx

@@ -31,15 +31,13 @@ import {
   type TextStyleDefinition,
 } from '../../tokens';
 import { resolveColorToken } from '../../utils/color-props';
+import type { TypographyStyleProp } from '../../utils/typography-props';
 
 import type { TextColor } from '../../tokens';
 
-/** Typography styling props that are controlled by the variant and should not be set directly */
-type TypographyStyleProps = 'fw' | 'fz' | 'size' | 'lh' | 'ff' | 'lts' | 'fs';
-
 export type TextProps = Omit<
   MantineTextProps,
-  TypographyStyleProps | 'c' | 'children'
+  TypographyStyleProp | 'c' | 'children'
 > & {
   /** Text style variant from the design system. Defaults to 'body1'. */
   variant?: BodyVariant;

package/src/components/Typography/Title.tsx

@@ -24,12 +24,10 @@ import {
   type HeadingVariant,
 } from '../../tokens/text-styles';
 import { resolveColorToken } from '../../utils/color-props';
+import type { TypographyStyleProp } from '../../utils/typography-props';
 
 import type { TextColor } from '../../tokens/color-types';
 
-/** Typography styling props that are controlled by the variant and should not be set directly */
-type TypographyStyleProps = 'fw' | 'fz' | 'size' | 'lh' | 'ff' | 'lts' | 'fs';
-
 const variantToOrder: Record<HeadingVariant, TitleOrder> = {
   heading1: 1,
   heading2: 2,
@@ -40,7 +38,7 @@ const variantToOrder: Record<HeadingVariant, TitleOrder> = {
 
 export type TitleProps = Omit<
   MantineTitleProps,
-  TypographyStyleProps | 'c' | 'children' | 'order'
+  TypographyStyleProp | 'c' | 'children' | 'order'
 > & {
   /** Heading style variant from the design system. */
   variant?: HeadingVariant;

package/src/index.ts

@@ -30,7 +30,7 @@ export type {
   FilterCategory,
 } from './components/AppliedFiltersManagerBar';
 export { Anchor } from './components/Anchor';
-export type { AnchorProps } from './components/Anchor';
+export type { AnchorProps, AnchorSize, AnchorTone } from './components/Anchor';
 export { Badge } from './components/Badge';
 export type { BadgeProps } from './components/Badge';
 export { BulkActionBar } from './components/BulkActionBar';

package/src/inter-font.ts

@@ -0,0 +1,21 @@
+// Inject the Inter font from Google Fonts as a `<link rel="stylesheet">`.
+//
+// Loading the stylesheet via JS instead of `import './foo.css'` keeps the
+// design system robust against consumer bundlers that don't resolve `.css`
+// files inside `node_modules/@scalepad/ui`. Idempotent — safe to import
+// from multiple entry points.
+
+const INTER_FONT_LINK_ID = 'scalepad-ui-inter-font';
+const INTER_FONT_HREF =
+  'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap';
+
+if (
+  typeof document !== 'undefined' &&
+  !document.getElementById(INTER_FONT_LINK_ID)
+) {
+  const link = document.createElement('link');
+  link.id = INTER_FONT_LINK_ID;
+  link.rel = 'stylesheet';
+  link.href = INTER_FONT_HREF;
+  document.head.appendChild(link);
+}

package/src/utils/typography-props.ts

@@ -0,0 +1,19 @@
+/**
+ * Mantine typography style props that the design system intentionally locks
+ * down. Components driven by a `variant` (e.g. `Text`, `Title`, `Anchor`)
+ * Omit this set from their public props so callers can't bypass the variant
+ * system with one-off `fz="20px"` or `fw={700}` overrides.
+ *
+ * Internally those components also avoid forwarding these props to the
+ * underlying Mantine element — the variant is the only path that can set
+ * typography.
+ */
+export type TypographyStyleProp =
+  | 'fw'
+  | 'fz'
+  | 'size'
+  | 'lh'
+  | 'ff'
+  | 'lts'
+  | 'fs'
+  | 'tt';

package/src/geist-fonts.ts

@@ -1,48 +0,0 @@
-// Import Geist font files as URLs
-import geistSansItalicFont from './assets/Geist-Italic[wght].ttf?url';
-import geistSansFont from './assets/Geist[wght].ttf?url';
-import geistMonoItalicFont from './assets/GeistMono-Italic[wght].ttf?url';
-import geistMonoFont from './assets/GeistMono[wght].ttf?url';
-
-// Inject @font-face rules (only once)
-if (
-  typeof document !== 'undefined' &&
-  !document.getElementById('geist-fonts')
-) {
-  const style = document.createElement('style');
-  style.id = 'geist-fonts';
-  style.textContent = `
-    @font-face {
-      font-family: 'Geist Sans';
-      src: url('${geistSansFont}') format('truetype');
-      font-weight: 100 900;
-      font-style: normal;
-      font-display: swap;
-    }
-
-    @font-face {
-      font-family: 'Geist Sans';
-      src: url('${geistSansItalicFont}') format('truetype');
-      font-weight: 100 900;
-      font-style: italic;
-      font-display: swap;
-    }
-
-    @font-face {
-      font-family: 'Geist Mono';
-      src: url('${geistMonoFont}') format('truetype');
-      font-weight: 100 900;
-      font-style: normal;
-      font-display: swap;
-    }
-
-    @font-face {
-      font-family: 'Geist Mono';
-      src: url('${geistMonoItalicFont}') format('truetype');
-      font-weight: 100 900;
-      font-style: italic;
-      font-display: swap;
-    }
-  `;
-  document.head.appendChild(style);
-}