@scalepad/ui 0.1.0 → 0.2.0

package/scripts/verify-consumption.mjs

@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+/**
+ * verify-consumption
+ *
+ * Smoke test that catches the class of bug a colleague hit when consuming
+ * `@scalepad/ui` from a fresh project:
+ *
+ *   - Missing transitive peer dependencies (e.g. @tiptap/core, @tiptap/extensions)
+ *   - Vite setup gaps (vanilla-extract plugin not wired up, optimizeDeps not configured)
+ *
+ * What it does:
+ *   1. `pnpm pack` the local `@scalepad/ui` and `@scalepad/ui-utils` workspaces.
+ *   2. Create a temp Vite + React 19 project in the OS temp dir.
+ *   3. Install the local tarballs plus the required peers from the README.
+ *   4. Write a minimal `App.tsx` that imports `ThemeProvider`, `Button`,
+ *      `showToast`, and `SlashRichTextEditor` (so all the optional-peer
+ *      code paths are exercised).
+ *   5. Run `vite build`. If exit code is non-zero, this script fails.
+ *
+ * Intended use:
+ *   `pnpm --filter @scalepad/ui run verify:consumption` before publishing
+ *   a new version. Not wired into CI yet; we'll iterate on speed first.
+ */
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkgRoot = resolve(__dirname, '..');
+const monorepoRoot = resolve(pkgRoot, '..', '..');
+const utilsRoot = resolve(monorepoRoot, 'packages', 'utils');
+
+const log = (msg) => console.log(`[verify-consumption] ${msg}`);
+const die = (msg) => {
+  console.error(`[verify-consumption] FAIL: ${msg}`);
+  process.exit(1);
+};
+
+function run(cmd, args, opts = {}) {
+  const display = `${cmd} ${args.join(' ')}`;
+  log(`$ ${display} (cwd=${opts.cwd ?? process.cwd()})`);
+  const result = spawnSync(cmd, args, {
+    stdio: 'inherit',
+    encoding: 'utf8',
+    ...opts,
+  });
+  if (result.status !== 0) {
+    die(`${display} exited with status ${result.status}`);
+  }
+  return result;
+}
+
+function findTarball(dir, prefix) {
+  const matches = readdirSync(dir).filter(
+    (f) => f.startsWith(prefix) && f.endsWith('.tgz'),
+  );
+  if (matches.length === 0) {
+    die(`no ${prefix}*.tgz produced in ${dir}`);
+  }
+  if (matches.length > 1) {
+    log(`warning: multiple ${prefix}*.tgz found, using newest`);
+  }
+  // sort by mtime via spawnSync(ls -t) would be heavier; for two same-run packs,
+  // alphabetical reverse-sort gets the higher version number.
+  matches.sort().reverse();
+  return join(dir, matches[0]);
+}
+
+// 1. Pack both workspaces.
+log('packing @scalepad/ui and @scalepad/ui-utils...');
+run('pnpm', ['pack', '--pack-destination', pkgRoot], { cwd: pkgRoot });
+run('pnpm', ['pack', '--pack-destination', utilsRoot], { cwd: utilsRoot });
+
+const uiTarball = findTarball(pkgRoot, 'scalepad-ui-');
+const utilsTarball = findTarball(utilsRoot, 'scalepad-ui-utils-');
+log(`ui tarball   = ${uiTarball}`);
+log(`utils tarball= ${utilsTarball}`);
+
+// 2. Make a temp project.
+const projectDir = mkdtempSync(join(tmpdir(), 'scalepad-ui-verify-'));
+log(`temp project = ${projectDir}`);
+mkdirSync(join(projectDir, 'src'), { recursive: true });
+
+// 3. Write package.json with the README's required + optional peers.
+const projectPkg = {
+  name: 'scalepad-ui-verify',
+  private: true,
+  version: '0.0.0',
+  type: 'module',
+  scripts: {
+    build: 'vite build',
+  },
+  // Required peers only. Mantine, recharts, clsx, react-intersection-observer
+  // come in as runtime deps of @scalepad/ui — consumers do NOT install them.
+  // Tiptap is an optional peer; this smoke test exercises the rich-text editor
+  // entry points, so we install the full Tiptap set here.
+  dependencies: {
+    '@scalepad/ui': `file:${uiTarball}`,
+    '@scalepad/ui-utils': `file:${utilsTarball}`,
+    '@tanstack/react-query': '^5.0.0',
+    '@tanstack/react-table': '^8.21.3',
+    '@vanilla-extract/css': '^1.16.2',
+    dayjs: '^1.11.19',
+    'lucide-react': '^0.469.0',
+    react: '^19.0.0',
+    'react-dom': '^19.0.0',
+    '@tiptap/core': '^3.22.3',
+    '@tiptap/extensions': '^3.22.3',
+    '@tiptap/pm': '^3.22.3',
+    '@tiptap/react': '^3.22.3',
+    '@tiptap/starter-kit': '^3.22.3',
+    '@tiptap/suggestion': '^3.22.3',
+    '@tiptap/extension-blockquote': '^3.22.3',
+    '@tiptap/extension-bold': '^3.22.3',
+    '@tiptap/extension-bubble-menu': '^3.22.3',
+    '@tiptap/extension-bullet-list': '^3.22.3',
+    '@tiptap/extension-code': '^3.22.3',
+    '@tiptap/extension-code-block': '^3.22.3',
+    '@tiptap/extension-document': '^3.22.3',
+    '@tiptap/extension-dropcursor': '^3.22.3',
+    '@tiptap/extension-gapcursor': '^3.22.3',
+    '@tiptap/extension-hard-break': '^3.22.3',
+    '@tiptap/extension-heading': '^3.22.3',
+    '@tiptap/extension-horizontal-rule': '^3.22.3',
+    '@tiptap/extension-image': '^3.22.3',
+    '@tiptap/extension-italic': '^3.22.3',
+    '@tiptap/extension-link': '^3.22.3',
+    '@tiptap/extension-list': '^3.22.3',
+    '@tiptap/extension-list-item': '^3.22.3',
+    '@tiptap/extension-list-keymap': '^3.22.3',
+    '@tiptap/extension-ordered-list': '^3.22.3',
+    '@tiptap/extension-paragraph': '^3.22.3',
+    '@tiptap/extension-placeholder': '^3.22.3',
+    '@tiptap/extension-strike': '^3.22.3',
+    '@tiptap/extension-text': '^3.22.3',
+    '@tiptap/extension-underline': '^3.22.3',
+  },
+  devDependencies: {
+    '@vitejs/plugin-react': '^5.0.4',
+    '@types/react': '^19.2.2',
+    '@types/react-dom': '^19.2.1',
+    typescript: '^6.0.3',
+    vite: '^7.1.9',
+  },
+};
+writeFileSync(
+  join(projectDir, 'package.json'),
+  JSON.stringify(projectPkg, null, 2),
+);
+
+writeFileSync(
+  join(projectDir, 'tsconfig.json'),
+  JSON.stringify(
+    {
+      compilerOptions: {
+        target: 'ES2022',
+        lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+        jsx: 'react-jsx',
+        module: 'ESNext',
+        moduleResolution: 'bundler',
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        noEmit: true,
+        resolveJsonModule: true,
+        isolatedModules: true,
+      },
+      include: ['src'],
+    },
+    null,
+    2,
+  ),
+);
+
+writeFileSync(
+  join(projectDir, 'vite.config.ts'),
+  `import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { scalepadUi } from '@scalepad/ui/vite';
+
+export default defineConfig({
+  plugins: [react(), scalepadUi()],
+});
+`,
+);
+
+writeFileSync(
+  join(projectDir, 'index.html'),
+  `<!doctype html>
+<html>
+  <head><meta charset="utf-8" /><title>verify</title></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+);
+
+writeFileSync(
+  join(projectDir, 'src', 'main.tsx'),
+  `import '@mantine/core/styles.css';
+import { createRoot } from 'react-dom/client';
+import {
+  Button,
+  Notifications,
+  showSuccessToast,
+  SlashRichTextEditor,
+  ThemeProvider,
+} from '@scalepad/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Notifications />
+      <Button onClick={() => showSuccessToast({ title: 'hi', message: 'world' })}>
+        Click
+      </Button>
+      <SlashRichTextEditor commands={[]} placeholder="type" />
+    </ThemeProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);
+`,
+);
+
+// 4. Install. Use npm so we don't depend on the user's pnpm workspace config;
+//    file: deps work cleanly under npm and don't leak the monorepo's hoisting.
+log('installing in temp project (this is slow on cold cache)...');
+run('npm', ['install', '--no-audit', '--no-fund', '--legacy-peer-deps=false'], {
+  cwd: projectDir,
+});
+
+// 5. Build.
+log('building...');
+run('npx', ['vite', 'build'], { cwd: projectDir });
+
+log('OK — built successfully.');
+log(`(temp project left at ${projectDir} for inspection; delete when done)`);

package/src/ThemeProvider.tsx

@@ -7,11 +7,16 @@ 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';
+import { useMemo, type ReactNode } from 'react';
 
-import { MantineProvider, type MantineThemeOverride } from '@mantine/core';
+import {
+  localStorageColorSchemeManager,
+  MantineProvider,
+  type MantineColorScheme,
+  type MantineThemeOverride,
+} from '@mantine/core';
 
 import { mantineTheme } from './theme';
 import { semanticColorsCss } from './tokens/semantic-colors';
@@ -20,15 +25,58 @@ import { semanticTokensCss } from './tokens/semantic-tokens-css';
 export interface ThemeProviderProps {
   children: ReactNode;
   theme?: MantineThemeOverride;
+  /**
+   * Initial color scheme used when no persisted value is found. Defaults to
+   * `'auto'` so a fresh visitor follows their OS appearance preference.
+   */
+  defaultColorScheme?: MantineColorScheme;
+  /**
+   * localStorage key used to persist the user's color scheme choice. Apps that
+   * embed ThemeProvider can namespace this to keep multiple apps from sharing
+   * a key on the same origin.
+   */
+  colorSchemeStorageKey?: string;
 }
 
-export function ThemeProvider({ children, theme }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  theme,
+  defaultColorScheme = 'auto',
+  colorSchemeStorageKey = 'scalepad-ui.color-scheme',
+}: ThemeProviderProps) {
+  const colorSchemeManager = useMemo(
+    () => localStorageColorSchemeManager({ key: colorSchemeStorageKey }),
+    [colorSchemeStorageKey],
+  );
+
   return (
-    <MantineProvider theme={theme || mantineTheme}>
+    <MantineProvider
+      theme={theme || mantineTheme}
+      defaultColorScheme={defaultColorScheme}
+      colorSchemeManager={colorSchemeManager}
+    >
       {/* Inject Figma semantic color tokens as CSS custom properties */}
       <style dangerouslySetInnerHTML={{ __html: semanticColorsCss }} />
       {/* Inject semantic radius, spacing, shadows, z-index, font-family */}
       <style dangerouslySetInnerHTML={{ __html: semanticTokensCss }} />
+      {/*
+        Global font / glyph rendering. macOS defaults to subpixel
+        antialiasing which makes light text on dark surfaces look
+        bolded/blurry, and Mantine's reset sometimes overrides body-level
+        inline styles. Forcing grayscale antialiasing + optimizeLegibility
+        keeps text crisp in both light and dark mode.
+      */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            html, body {
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              text-rendering: optimizeLegibility;
+            }
+          `,
+        }}
+      />
       {/* Override Mantine Table hover to use semantic primary light */}
       <style
         dangerouslySetInnerHTML={{

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>
     );
   },
 );