@scalepad/ui 0.1.0

package/src/components/RadioTile/RadioTile.tsx

@@ -0,0 +1,253 @@
+import type { ReactNode } from 'react';
+
+import { Box, Card, Flex } from '@mantine/core';
+
+import { tokens } from '../../theme/themeContract.css';
+import { Text } from '../Typography';
+
+import type { BodyVariant } from '../../tokens/text-styles';
+import type { BoxProps } from '../DesignSystemPrimitives';
+
+type RadioTileTone = 'default' | 'danger' | 'warning' | 'success' | 'subdued';
+type RadioTileVariant = 'default' | 'tone-filled';
+
+export interface RadioTileProps {
+  label: ReactNode;
+  description?: ReactNode;
+  checked: boolean;
+  onChange?: () => void;
+  disabled?: boolean;
+  tone?: RadioTileTone;
+  variant?: RadioTileVariant;
+  /** Overrides label typography; defaults match the original RadioTile styles. */
+  labelVariant?: BodyVariant;
+  /** Overrides description typography when `description` is set. */
+  descriptionVariant?: BodyVariant;
+  /** Controls label casing; `uppercase` renders the label in uppercase and also exposes a stable test hook. */
+  labelTransform?: 'none' | 'uppercase';
+  /** Controls the alignment of the radio tile within its container. */
+  h?: BoxProps['h'];
+}
+
+/**
+ * Selectable radio-style card used for settings choices.
+ */
+export function RadioTile({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled = false,
+  tone = 'default',
+  variant = 'default',
+  labelVariant,
+  descriptionVariant,
+  labelTransform = 'none',
+  h = '100%',
+}: RadioTileProps) {
+  const paletteByTone = {
+    default: {
+      unselectedBackground: tokens.color.background.default,
+      unselectedBorder: tokens.color.stroke.default,
+      unselectedText: tokens.color.text.default,
+      unselectedDescription: tokens.color.text.subduedDefault,
+      unselectedIndicatorBorder: tokens.color.stroke.default,
+      selectedBackground: tokens.color.background.primaryLight,
+      selectedBorder: tokens.color.stroke.primaryDefault,
+      selectedText: tokens.color.text.default,
+      selectedDescription: tokens.color.text.subduedDefault,
+      selectedIndicatorBorder: tokens.color.stroke.primaryDefault,
+      selectedDot: tokens.color.background.primaryFilled,
+    },
+    danger: {
+      unselectedBackground: tokens.color.background.dangerLight,
+      unselectedBorder: tokens.color.stroke.dangerDefault,
+      unselectedText: tokens.color.text.dangerStrong,
+      unselectedDescription: tokens.color.text.dangerStrong,
+      unselectedIndicatorBorder: tokens.color.stroke.default,
+      selectedBackground: tokens.color.background.dangerFilled,
+      selectedBorder: tokens.color.stroke.dangerDefault,
+      selectedText: tokens.color.text.inverse,
+      selectedDescription: tokens.color.text.inverse,
+      selectedIndicatorBorder: tokens.color.text.inverse,
+      selectedDot: tokens.color.background.dangerFilled,
+    },
+    warning: {
+      unselectedBackground: tokens.color.background.warningLight,
+      unselectedBorder: tokens.color.stroke.warningDefault,
+      unselectedText: tokens.color.text.warningStrong,
+      unselectedDescription: tokens.color.text.warningStrong,
+      unselectedIndicatorBorder: tokens.color.stroke.default,
+      selectedBackground: tokens.color.background.warningFilled,
+      selectedBorder: tokens.color.stroke.warningDefault,
+      selectedText: tokens.color.text.inverse,
+      selectedDescription: tokens.color.text.inverse,
+      selectedIndicatorBorder: tokens.color.text.inverse,
+      selectedDot: tokens.color.background.warningFilled,
+    },
+    success: {
+      unselectedBackground: tokens.color.background.successLight,
+      unselectedBorder: tokens.color.stroke.primaryDefault,
+      unselectedText: tokens.color.text.primaryDefault,
+      unselectedDescription: tokens.color.text.primaryDefault,
+      unselectedIndicatorBorder: tokens.color.stroke.default,
+      selectedBackground: tokens.color.background.successFilled,
+      selectedBorder: tokens.color.stroke.primaryDefault,
+      selectedText: tokens.color.text.inverse,
+      selectedDescription: tokens.color.text.inverse,
+      selectedIndicatorBorder: tokens.color.text.inverse,
+      selectedDot: tokens.color.background.successFilled,
+    },
+    subdued: {
+      unselectedBackground: tokens.color.background.subduedLight,
+      unselectedBorder: tokens.color.stroke.default,
+      unselectedText: tokens.color.text.default,
+      unselectedDescription: tokens.color.text.default,
+      unselectedIndicatorBorder: tokens.color.stroke.default,
+      selectedBackground: tokens.color.background.subduedFilled,
+      selectedBorder: tokens.color.stroke.default,
+      selectedText: tokens.color.text.inverse,
+      selectedDescription: tokens.color.text.inverse,
+      selectedIndicatorBorder: tokens.color.text.inverse,
+      selectedDot: tokens.color.background.subduedFilled,
+    },
+  } as const;
+
+  const palette = paletteByTone[tone];
+  const isToneFilled = variant === 'tone-filled';
+  const borderColor = checked
+    ? palette.selectedBorder
+    : isToneFilled
+      ? palette.unselectedBorder
+      : tokens.color.stroke.default;
+  const backgroundColor = checked
+    ? palette.selectedBackground
+    : isToneFilled
+      ? palette.unselectedBackground
+      : tokens.color.background.default;
+  const labelColor = isToneFilled
+    ? checked
+      ? palette.selectedText
+      : palette.unselectedText
+    : undefined;
+  const descriptionColor = isToneFilled
+    ? checked
+      ? palette.selectedDescription
+      : palette.unselectedDescription
+    : checked
+      ? palette.selectedDescription
+      : undefined;
+  const indicatorBorderColor = checked
+    ? palette.selectedIndicatorBorder
+    : isToneFilled
+      ? palette.unselectedIndicatorBorder
+      : tokens.color.stroke.default;
+
+  const labelTextVariant = labelVariant ?? 'caption1.strong';
+  const descriptionTextVariant = descriptionVariant ?? 'caption1';
+  const isLabelUppercase = labelTransform === 'uppercase';
+
+  return (
+    <Card
+      withBorder
+      radius="lg"
+      p="md"
+      role="radio"
+      h={h}
+      aria-checked={checked}
+      aria-disabled={disabled}
+      data-variant={variant}
+      data-tone={tone}
+      data-checked={checked ? 'true' : 'false'}
+      {...(isToneFilled ? { 'data-visual-lift': 'none' as const } : {})}
+      {...(labelVariant !== undefined
+        ? { 'data-label-variant': labelVariant }
+        : {})}
+      {...(descriptionVariant !== undefined
+        ? { 'data-description-variant': descriptionVariant }
+        : {})}
+      {...(isLabelUppercase
+        ? { 'data-label-transform': 'uppercase' as const }
+        : {})}
+      tabIndex={disabled ? -1 : 0}
+      onClick={disabled ? undefined : onChange}
+      onKeyDown={
+        disabled
+          ? undefined
+          : event => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onChange?.();
+              }
+            }
+      }
+      style={{
+        borderColor,
+        backgroundColor,
+        boxShadow: checked && isToneFilled ? 'none' : undefined,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.7 : 1,
+        transform: checked && isToneFilled ? 'none' : undefined,
+      }}
+    >
+      <Flex align="flex-start" gap="md">
+        <Box
+          mt={3}
+          w={16}
+          h={16}
+          style={{
+            borderRadius: '9999px',
+            border: `1px solid ${indicatorBorderColor}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            backgroundColor: tokens.color.background.default,
+          }}
+        >
+          {checked ? (
+            <Box
+              w={8}
+              h={8}
+              style={{
+                borderRadius: '9999px',
+                backgroundColor: checked && tokens.color.icon.primaryDefault,
+              }}
+            />
+          ) : null}
+        </Box>
+
+        <Flex direction="column" gap={2} style={{ minWidth: 0 }}>
+          <Text
+            variant={labelTextVariant}
+            c={isToneFilled ? undefined : checked ? undefined : 'text.default'}
+            style={{
+              color: labelColor,
+            }}
+          >
+            {label}
+          </Text>
+          {description ? (
+            <Text
+              variant={descriptionTextVariant}
+              c={
+                isToneFilled
+                  ? undefined
+                  : checked
+                    ? undefined
+                    : tone === 'default'
+                      ? 'text.subdued.default'
+                      : 'text.default'
+              }
+              style={{
+                color: descriptionColor,
+              }}
+            >
+              {description}
+            </Text>
+          ) : null}
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}

package/src/components/RadioTile/index.ts

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

package/src/components/RichText/FormattingToolbar.css.ts

@@ -0,0 +1,69 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+/**
+ * Default styling for the canonical `FormattingToolbar`. Matches the slim
+ * 26x26-button look Figma calls out for the slash menu and the selection
+ * bubble menu — by hosting it here, every rich-text surface (slash editor,
+ * save/cancel editor, click-to-edit field) renders the same toolbar
+ * affordances by default. Consumers can still pass their own classes via
+ * the toolbar's className props when a particular surface needs a custom
+ * background (e.g. the bubble menu's pill chrome).
+ */
+
+export const toolbar = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+  padding: '5px 8px',
+  borderBottom: `1px solid ${tokens.color.stroke.subduedDefault}`,
+});
+
+/**
+ * Used by the slash menu when the user has typed a query — the toolbar
+ * recedes so attention shifts to the filtered command list below.
+ */
+export const toolbarDimmed = style({
+  opacity: 0.5,
+});
+
+export const toolbarButton = style({
+  appearance: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 26,
+  height: 26,
+  padding: 0,
+  border: 'none',
+  background: 'transparent',
+  borderRadius: tokens.radius.sm,
+  color: tokens.color.text.default,
+  cursor: 'pointer',
+  flexShrink: 0,
+  selectors: {
+    '&:hover:not(:disabled)': {
+      backgroundColor: tokens.color.background.primaryLight,
+    },
+    '&[data-active="true"]': {
+      backgroundColor: tokens.color.background.primaryLight,
+      color: tokens.color.text.primaryDefault,
+    },
+    '&[data-active="true"]:hover:not(:disabled)': {
+      backgroundColor: tokens.color.background.primaryLightHover,
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      color: tokens.color.text.subduedDefault,
+    },
+  },
+});
+
+export const toolbarSeparator = style({
+  width: 1,
+  height: 16,
+  backgroundColor: tokens.color.stroke.subduedDefault,
+  flexShrink: 0,
+  margin: `0 ${tokens.spacing['3xs']}`,
+});

package/src/components/RichText/FormattingToolbar.tsx

@@ -0,0 +1,112 @@
+import { Fragment, type MouseEvent } from 'react';
+
+import { type Editor, type Range } from '@tiptap/react';
+
+import * as classes from './FormattingToolbar.css';
+import { Tooltip, UnstyledButton } from '../../mantine';
+
+import type { FormattingToolbarCommand } from './formattingTypes';
+
+export interface FormattingToolbarProps {
+  editor: Editor;
+  /**
+   * When supplied, toolbar buttons delete the matched range before applying
+   * formatting. Used by the slash menu to drop the `/<query>` token. Other
+   * callers omit it because the formatting target is the user's existing
+   * text selection.
+   */
+  range?: Range;
+  commands: FormattingToolbarCommand[];
+  /**
+   * Render at reduced opacity. The slash menu uses this when the user has
+   * typed a filter query so attention shifts to the field list.
+   */
+  dimmed?: boolean;
+  /** Optional override for the wrapper className. */
+  className?: string;
+  /** Optional override for the per-button className (e.g. bubble menu). */
+  buttonClassName?: string;
+  /** Optional override for the separator between groups. */
+  separatorClassName?: string;
+  ariaLabel?: string;
+}
+
+/**
+ * The canonical formatting toolbar shared by every rich-text surface in
+ * `@scalepad/ui`. Renders a horizontal run of `FormattingToolbarCommand`s
+ * with a vertical divider whenever the `group` field changes between
+ * adjacent commands. Hosting a single component here is what guarantees
+ * the editor toolbar, the slash menu's icon row, and the selection bubble
+ * menu all surface the same affordances with the same styling.
+ *
+ * Consumers can override `className`, `buttonClassName`, and
+ * `separatorClassName` when they need a custom container chrome (e.g. the
+ * bubble menu's pill background); the inner button + separator look stay
+ * consistent unless the consumer explicitly overrides them.
+ */
+export function FormattingToolbar({
+  editor,
+  range,
+  commands,
+  dimmed = false,
+  className,
+  buttonClassName,
+  separatorClassName,
+  ariaLabel = 'Formatting',
+}: FormattingToolbarProps) {
+  if (commands.length === 0) return null;
+
+  const wrapperClass = [
+    className ?? classes.toolbar,
+    dimmed ? classes.toolbarDimmed : null,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={wrapperClass} role="toolbar" aria-label={ariaLabel}>
+      {commands.map((cmd, i) => {
+        const prev = i > 0 ? commands[i - 1] : null;
+        const showSep = prev != null && prev.group !== cmd.group;
+        const Icon = cmd.icon;
+        const active = cmd.isActive(editor);
+        return (
+          <Fragment key={cmd.id}>
+            {showSep ? (
+              <span
+                aria-hidden
+                className={separatorClassName ?? classes.toolbarSeparator}
+              />
+            ) : null}
+            <Tooltip
+              label={
+                <span>
+                  {cmd.label}
+                  {cmd.markdown ? (
+                    <>
+                      {' '}
+                      <kbd>{cmd.markdown}</kbd>
+                    </>
+                  ) : null}
+                </span>
+              }
+              withinPortal
+              openDelay={250}
+            >
+              <UnstyledButton
+                type="button"
+                className={buttonClassName ?? classes.toolbarButton}
+                aria-label={cmd.label}
+                data-active={active ? 'true' : undefined}
+                onMouseDown={(e: MouseEvent) => e.preventDefault()}
+                onClick={() => cmd.run({ editor, range })}
+              >
+                <Icon size={14} />
+              </UnstyledButton>
+            </Tooltip>
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/RichText/RichTextInline.css.ts

@@ -0,0 +1,54 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export const root = style({
+  display: 'inline',
+  color: 'inherit',
+});
+
+export const empty = style({
+  color: tokens.color.text.subduedDefault,
+});
+
+export const headingStrong = style({
+  fontWeight: 700,
+});
+
+export const headingMedium = style({
+  fontWeight: 600,
+});
+
+export const blockquote = style({
+  color: tokens.color.text.subduedStrong,
+});
+
+export const code = style({
+  fontFamily: 'var(--font-family-monospace)',
+  background: tokens.color.background.subduedLight,
+  padding: '0 4px',
+  borderRadius: tokens.radius.xs,
+  fontSize: '0.95em',
+});
+
+export const link = style({
+  color: tokens.color.text.primaryDefault,
+  textDecoration: 'underline',
+});
+
+/** Bullet glyph rendered before each list item in inline mode. */
+export const bullet = style({
+  marginRight: 6,
+  color: tokens.color.text.subduedStrong,
+});
+
+/**
+ * Visible separator between sibling blocks (paragraphs, headings, lists).
+ * The `·` glyph is muted so it reads as punctuation rather than content.
+ */
+export const separator = style({
+  color: tokens.color.text.subduedDefault,
+  margin: '0 8px',
+  display: 'inline-block',
+  verticalAlign: 'middle',
+});