@scalepad/ui 0.2.0 → 0.2.1

package/README.md

@@ -119,10 +119,11 @@ export default defineConfig({
 });
 ```
 
-The preset wires up two things consumers commonly miss:
+The preset wires up three things consumers commonly miss:
 
 1. The vanilla-extract Vite plugin (`@vanilla-extract/vite-plugin`), so every `.css.ts` file inside `node_modules/@scalepad/ui` is compiled at build time.
 2. `optimizeDeps.exclude: ['@scalepad/ui']` + `optimizeDeps.include: ['@mantine/dates', '@mantine/schedule', '@tiptap/react', 'dayjs', 'fast-deep-equal', 'prop-types']`, which together let Vite's esbuild pre-bundling step succeed (it can't ingest `.css.ts` files on its own) and ensure the transitive CommonJS deps reached through the excluded package still get pre-bundled.
+3. A narrowly-scoped Rollup `onLog` filter that drops the noisy `"default" is not exported by …/rrule/dist/esm/index.js` warning (also seen as `[IMPORT_IS_UNDEFINED] Import 'default' will always be undefined …` on older Rollup versions) emitted from `@mantine/schedule`'s `rrule` import. The warning is a static-analysis false positive — Mantine's source explicitly handles both module shapes (`"default" in rruleAll ? rruleAll.default.RRule : rruleAll.RRule`), so the dead branch is tree-shaken away at runtime. The filter is scoped to (importer is `@mantine/schedule` + message mentions `rrule`); other missing-export warnings still surface.
 
 You can extend the include list or pass options through to the vanilla-extract plugin:
 
@@ -149,7 +150,27 @@ import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [react(), vanillaExtractPlugin()],
+  plugins: [
+    react(),
+    vanillaExtractPlugin(),
+    {
+      // See README troubleshooting → "IMPORT_IS_UNDEFINED warning from rrule".
+      // Mantine's import is defensive; the flagged branch is dead code under
+      // rrule's ESM build, so the warning is safe to drop. Match on importer
+      // + message (not on `log.code`) because Rollup emits this under both
+      // `MISSING_EXPORT` and `IMPORT_IS_UNDEFINED` in different versions.
+      name: 'suppress-mantine-schedule-rrule-warning',
+      onLog(level, log) {
+        if (
+          level === 'warn' &&
+          (log.id ?? '').includes('@mantine/schedule') &&
+          /\brrule\b/.test(log.message ?? '')
+        ) {
+          return false;
+        }
+      },
+    },
+  ],
   optimizeDeps: {
     exclude: ['@scalepad/ui'],
     include: [
@@ -272,6 +293,23 @@ The vanilla-extract Vite plugin isn't wired up, or the package is being pre-bund
 - Use the preset: `import { scalepadUi } from '@scalepad/ui/vite'`, OR
 - If wiring manually, make sure your `vite.config.ts` has BOTH `vanillaExtractPlugin()` in `plugins` AND `optimizeDeps.exclude: ['@scalepad/ui']`. Missing either one will fail.
 
+### `[IMPORT_IS_UNDEFINED] Import 'default' will always be undefined because there is no matching export in 'node_modules/rrule/dist/esm/index.js'`
+
+`@mantine/schedule` reads `rruleAll.default.RRule`, but `rrule@2.x` only has a `default` export on its CJS build (`dist/es5/rrule.js`), not its ESM build (`dist/esm/index.js`). Vite resolves `rrule` via its `module` field, so the static-analysis warning fires on every build — even when the scheduler is never imported.
+
+The warning is a false positive. Mantine's source is explicitly defensive about both module shapes:
+
+```js
+const RRule = "default" in rruleAll ? rruleAll.default.RRule : rruleAll.RRule;
+```
+
+Under the ESM build, `"default" in rruleAll` is `false`, the `.default.RRule` branch is dead code, Rollup tree-shakes it away, and only `rruleAll.RRule` runs at runtime — which resolves correctly. Nothing breaks; the message is just noise.
+
+Either:
+
+- Use the preset (it adds a narrowly-scoped Rollup `onLog` filter for exactly this warning), OR
+- If wiring manually, add the same filter — see the small `suppress-mantine-schedule-rrule-warning` plugin in the manual-setup snippet above.
+
 ### `The requested module '…@mantine/dates' does not provide an export named '…'` (or similar from `@tiptap/react`, `dayjs`, `prop-types`)
 
 These are CommonJS-or-mixed-module deps that Vite's dep scanner can't walk through once `@scalepad/ui` is excluded from pre-bundling. Either:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalepad/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "sideEffects": false,
   "description": "ScalePad LM Design System — React + Mantine 9 + vanilla-extract component library",

package/scripts/verify-consumption.mjs

@@ -52,6 +52,22 @@ function run(cmd, args, opts = {}) {
   return result;
 }
 
+function runCapture(cmd, args, opts = {}) {
+  const display = `${cmd} ${args.join(' ')}`;
+  log(`$ ${display} (cwd=${opts.cwd ?? process.cwd()})`);
+  const result = spawnSync(cmd, args, {
+    stdio: ['inherit', 'pipe', 'pipe'],
+    encoding: 'utf8',
+    ...opts,
+  });
+  process.stdout.write(result.stdout ?? '');
+  process.stderr.write(result.stderr ?? '');
+  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'),
@@ -234,9 +250,26 @@ run('npm', ['install', '--no-audit', '--no-fund', '--legacy-peer-deps=false'], {
   cwd: projectDir,
 });
 
-// 5. Build.
+// 5. Build. Capture output so we can assert no known-problematic Vite warnings
+//    snuck back in (they don't fail the build by default, so a plain run won't
+//    catch a regression).
 log('building...');
-run('npx', ['vite', 'build'], { cwd: projectDir });
+const buildResult = runCapture('npx', ['vite', 'build'], { cwd: projectDir });
+const buildOutput = `${buildResult.stdout ?? ''}\n${buildResult.stderr ?? ''}`;
+
+// Regression guard for the rrule / @mantine/schedule warning. The
+// `scalepadUi()` preset aliases `rrule` to its CJS UMD entry so this warning
+// shouldn't appear. See README → Troubleshooting → IMPORT_IS_UNDEFINED.
+if (
+  buildOutput.includes('IMPORT_IS_UNDEFINED') ||
+  /node_modules\/rrule\/dist\/esm\/index\.js/.test(buildOutput)
+) {
+  die(
+    'detected rrule IMPORT_IS_UNDEFINED warning in build output — the ' +
+      'scalepadUi() preset should be aliasing rrule to rrule/dist/es5/rrule.js. ' +
+      'See packages/ui/src/vite.js.',
+  );
+}
 
-log('OK — built successfully.');
+log('OK — built successfully (no known-problematic warnings).');
 log(`(temp project left at ${projectDir} for inspection; delete when done)`);

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

@@ -53,7 +53,7 @@ export const root = style({
  * drift.
  */
 export const variant = styleVariants(textStyleVariants, styles => ({
-  fontFamily: styles.fontFamily,
+  ...(styles.fontFamily != null && { fontFamily: styles.fontFamily }),
   fontWeight: styles.fontWeight,
   fontSize: styles.fontSize,
   lineHeight: styles.lineHeight,

package/src/components/ColorInput/ColorInput.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+
+import { ColorInput } from './ColorInput';
+
+/**
+ * Code Connect mapping for the LM Design System `ColorInput` (node 4265:237).
+ *
+ * The Figma component_set has `Size` (Small / Regular / Large) and `State`
+ * (Empty / Value / Focus / Error / Error Focus / Disabled) axes. We
+ * intentionally don't map the size axis: in code the component follows the
+ * `TextInput` chrome (single default size, overridable via `size`), and
+ * Figma will be re-aligned to match later. Only the boolean-ish state axes
+ * map cleanly today (`disabled`, `error`).
+ */
+figma.connect(
+  ColorInput,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=4265%3A237',
+  {
+    props: {
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      error: figma.enum('State', {
+        Error: 'Invalid color',
+        'Error Focus': 'Invalid color',
+      }),
+    },
+    example: props => (
+      <ColorInput disabled={props.disabled} error={props.error} />
+    ),
+  },
+);

package/src/components/ColorInput/ColorInput.tsx

@@ -0,0 +1,94 @@
+/**
+ * ColorInput component
+ *
+ * Thin wrapper around Mantine's `ColorInput` that mirrors the conventions of
+ * our `TextInput` wrapper (`size='sm'`, `radius='lg'`, `format='hex'`) and
+ * pre-loads the swatch grid with `AVATAR_PALETTE` — the 50-color list
+ * `@scalepad/ui` already uses for identity chips. Reusing the same palette
+ * here keeps every "pick a color" surface in the app consistent without
+ * making consumers wire `swatches` themselves.
+ *
+ * Visual chrome (height, padding, radius, focus ring, error state, disabled
+ * state) intentionally follows `TextInput` rather than the standalone Figma
+ * ColorInput frame. Figma will be aligned later.
+ *
+ * @example
+ * ```tsx
+ * <ColorInput
+ *   label="Brand color"
+ *   value={color}
+ *   onChange={setColor}
+ * />
+ * ```
+ *
+ * @example Custom swatches
+ * ```tsx
+ * <ColorInput
+ *   swatches={['#ff0000', '#00ff00', '#0000ff']}
+ *   swatchesPerRow={3}
+ * />
+ * ```
+ */
+
+import { forwardRef, useMemo } from 'react';
+
+import {
+  ColorInput as MantineColorInput,
+  type ColorInputProps as MantineColorInputProps,
+} from '@mantine/core';
+
+import { AVATAR_PALETTE } from '../../utils/avatar';
+
+/**
+ * Default swatch grid for `ColorInput`. Mirrors `AVATAR_PALETTE` and is
+ * exported so consumers can compose it with extra brand-specific swatches
+ * (`swatches={[...DEFAULT_COLOR_INPUT_SWATCHES, '#abc123']}`).
+ */
+export const DEFAULT_COLOR_INPUT_SWATCHES: readonly string[] = AVATAR_PALETTE;
+
+/**
+ * Default number of swatches per row. 10 columns × 5 rows fits the 50-entry
+ * `AVATAR_PALETTE` cleanly without forcing the popover wider than the input.
+ */
+export const DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW = 10;
+
+export interface ColorInputProps extends MantineColorInputProps {}
+
+export const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
+  (
+    {
+      className,
+      size = 'sm',
+      radius = 'lg',
+      format = 'hex',
+      swatches,
+      swatchesPerRow = DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW,
+      ...props
+    },
+    ref,
+  ) => {
+    // `swatches` is mutated by Mantine internals in some flows, so feed it a
+    // fresh array (not the frozen palette constant) when defaulting.
+    const resolvedSwatches = useMemo(
+      () => swatches ?? [...DEFAULT_COLOR_INPUT_SWATCHES],
+      [swatches],
+    );
+
+    return (
+      <MantineColorInput
+        ref={ref}
+        size={size}
+        radius={radius}
+        format={format}
+        swatches={resolvedSwatches}
+        swatchesPerRow={swatchesPerRow}
+        classNames={{
+          input: className,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+ColorInput.displayName = 'ColorInput';

package/src/components/ColorInput/index.ts

@@ -0,0 +1,6 @@
+export {
+  ColorInput,
+  DEFAULT_COLOR_INPUT_SWATCHES,
+  DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW,
+} from './ColorInput';
+export type { ColorInputProps } from './ColorInput';

package/src/components/Select/Select.css.ts

@@ -36,13 +36,18 @@ export const selectButton = style({
   overflow: 'hidden',
   transition: 'border-color 0.15s ease',
   selectors: {
-    '&:hover': {
+    '&:hover:not(:disabled)': {
       borderColor: tokens.color.stroke.subduedStrong,
     },
-    '&:focus': focusRing,
-    '&:active': {
+    '&:focus:not(:disabled)': focusRing,
+    '&:active:not(:disabled)': {
       borderColor: tokens.color.stroke.strong,
     },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.6,
+      backgroundColor: tokens.color.background.disabledDefault,
+    },
     [`${mantineVars.darkSelector} &`]: {
       borderColor: tokens.color.stroke.default,
       backgroundColor: tokens.color.background.default,

package/src/components/Select/Select.tsx

@@ -35,6 +35,11 @@ export interface SelectProps {
    * Validation error message displayed below the select
    */
   error?: string;
+  /**
+   * Disable the select trigger. When disabled, the dropdown cannot be opened
+   * and the button is excluded from the focus order.
+   */
+  disabled?: boolean;
 }
 
 /**
@@ -55,7 +60,10 @@ export interface SelectProps {
  * ```
  */
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
-  ({ labelPrefix, data, value, onChange, placeholder, w, error }, ref) => {
+  (
+    { labelPrefix, data, value, onChange, placeholder, w, error, disabled },
+    ref,
+  ) => {
     const id = useId();
     const errorId = error ? `${id}-error` : undefined;
     const combobox = useCombobox({
@@ -88,11 +96,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             <button
               ref={ref}
               type="button"
+              disabled={disabled}
               className={styles.selectButton}
               onClick={() => combobox.toggleDropdown()}
               aria-haspopup="listbox"
               aria-expanded={combobox.dropdownOpened}
               aria-invalid={!!error}
+              aria-disabled={disabled || undefined}
               aria-describedby={errorId}
               style={
                 w ? { width: typeof w === 'number' ? `${w}px` : w } : undefined

package/src/index.ts

@@ -287,6 +287,12 @@ export type {
 export type { JSONContent } from '@tiptap/react';
 
 // Input components with Figma design specifications
+export {
+  ColorInput,
+  DEFAULT_COLOR_INPUT_SWATCHES,
+  DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW,
+} from './components/ColorInput';
+export type { ColorInputProps } from './components/ColorInput';
 export { CommentComposer } from './components/CommentComposer';
 export type { CommentComposerProps } from './components/CommentComposer';
 export { MultiSelect } from './components/MultiSelect';

package/src/tokens/index.ts

@@ -1,6 +1,10 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Figma Design Tokens
+ * Design tokens that mirror the LM Design System Figma file
+ * (https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System).
+ *
+ * Source of truth lives in Figma; edit these files by hand to mirror Figma
+ * changes and use the Figma MCP (`get_design_context`, `search_design_system`)
+ * to fetch authoritative values.
  */
 
 export * from './colors';

package/src/tokens/text-styles.ts

@@ -1,6 +1,11 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Generated from: packages/figma-tokens/source/text-styles.json + typography.json
+ * Text-style variants synced from the LM Design System Figma file
+ * (https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System).
+ *
+ * Source of truth lives in Figma; edit this file by hand to mirror Figma
+ * changes. The Figma MCP is the canonical way to fetch the latest values —
+ * use `get_design_context` on the relevant text-style node before changing
+ * sizes / weights / line-heights / letter-spacing.
  */
 
 import { rem } from '@mantine/core';
@@ -73,6 +78,27 @@ export const textStyleVariants = {
     lineHeight: rem('21px'),
     letterSpacing: 0,
   },
+  body2: {
+    fontFamily: undefined,
+    fontWeight: 400,
+    fontSize: rem('16px'),
+    lineHeight: rem('23px'),
+    letterSpacing: 0,
+  },
+  'body2.strong': {
+    fontFamily: undefined,
+    fontWeight: 500,
+    fontSize: rem('16px'),
+    lineHeight: rem('23px'),
+    letterSpacing: 0,
+  },
+  'body2.stronger': {
+    fontFamily: undefined,
+    fontWeight: 600,
+    fontSize: rem('16px'),
+    lineHeight: rem('23px'),
+    letterSpacing: 0,
+  },
   caption1: {
     fontFamily: undefined,
     fontWeight: 400,
@@ -166,6 +192,9 @@ export type BodyVariant =
   | 'body1'
   | 'body1.strong'
   | 'body1.stronger'
+  | 'body2'
+  | 'body2.strong'
+  | 'body2.stronger'
   | 'caption1'
   | 'caption1.strong'
   | 'caption1.stronger'

package/src/vite.js

@@ -1,7 +1,7 @@
 /**
  * Vite preset for `@scalepad/ui`.
  *
- * @scalepad/ui ships as TypeScript + vanilla-extract source. Two things must
+ * @scalepad/ui ships as TypeScript + vanilla-extract source. Three things must
  * be wired into a consumer's Vite config for it to load cleanly:
  *
  *   1. The vanilla-extract Vite plugin, so every `.css.ts` file the package
@@ -14,8 +14,24 @@
  *        - `include: [...]` for the CommonJS transitive deps Vite's scanner
  *          stops walking through once the package is excluded from
  *          pre-bundling.
+ *   3. A narrowly-scoped Rollup `onLog` filter that suppresses the
+ *      `MISSING_EXPORT` / `IMPORT_IS_UNDEFINED` warning emitted from
+ *      `@mantine/schedule`'s `rrule` import (Rollup uses the former in
+ *      current versions and the latter in older ones for the same root
+ *      cause). The warning is a static-analysis false positive: the Mantine
+ *      source does
  *
- * This preset wraps both into a single plugin so consumers can do:
+ *        const RRule = "default" in rruleAll ? rruleAll.default.RRule : rruleAll.RRule;
+ *
+ *      which is explicitly defensive about both module shapes. Under rrule's
+ *      ESM build the `default` branch is dead code (Rollup tree-shakes it
+ *      away); only `rruleAll.RRule` runs and it resolves correctly. Rollup
+ *      still flags the dead branch at scan time, producing a noisy warning on
+ *      every build. The filter is scoped to (importer is `@mantine/schedule`
+ *      + message mentions `rrule`) so unrelated missing-export / undefined-
+ *      import warnings still surface.
+ *
+ * This preset wraps all three into a single plugin so consumers can do:
  *
  *     import { scalepadUi } from '@scalepad/ui/vite';
  *
@@ -53,14 +69,30 @@ export const SCALEPAD_UI_OPTIMIZE_DEPS_INCLUDE = Object.freeze([
   'prop-types',
 ]);
 
+/**
+ * True iff `log` is the known-noisy rrule / @mantine/schedule warning
+ * described in the file header. Rollup emits this under more than one code
+ * depending on which static-analysis pass catches it first — `MISSING_EXPORT`
+ * ("default" is not exported by …) and `IMPORT_IS_UNDEFINED` (Import
+ * `default` will always be undefined …) are both seen in the wild for the
+ * exact same import. We match by (importer is @mantine/schedule + message
+ * mentions rrule), which is tight enough that unrelated missing-export
+ * warnings still surface but loose enough to survive Rollup version drift.
+ */
+function isRruleScheduleDeadBranchWarning(log) {
+  if (!log) return false;
+  const importer = log.id ?? log.loc?.file ?? '';
+  const message = log.message ?? '';
+  return importer.includes('@mantine/schedule') && /\brrule\b/.test(message);
+}
+
 export function scalepadUi(options = {}) {
-  const includeFromOptions =
-    options.optimizeDepsIncludeOverride ?? [
-      ...SCALEPAD_UI_OPTIMIZE_DEPS_INCLUDE,
-      ...(options.optimizeDepsInclude ?? []),
-    ];
+  const includeFromOptions = options.optimizeDepsIncludeOverride ?? [
+    ...SCALEPAD_UI_OPTIMIZE_DEPS_INCLUDE,
+    ...(options.optimizeDepsInclude ?? []),
+  ];
 
-  const optimizeDepsPlugin = {
+  const presetPlugin = {
     name: '@scalepad/ui/vite-preset',
     config: () => ({
       optimizeDeps: {
@@ -68,12 +100,21 @@ export function scalepadUi(options = {}) {
         include: includeFromOptions,
       },
     }),
+    // Rollup plugin hook (Rollup 4+, used by Vite 5+). Returning `false`
+    // suppresses the log without clobbering the consumer's own `onwarn` or
+    // any other plugin's `onLog` — Rollup chains every plugin's handler.
+    onLog(level, log) {
+      if (level === 'warn' && isRruleScheduleDeadBranchWarning(log)) {
+        return false;
+      }
+      return undefined;
+    },
   };
 
   const veResult = vanillaExtractPlugin(options.vanillaExtract);
   const vePlugins = Array.isArray(veResult) ? veResult : [veResult];
 
-  return [...vePlugins, optimizeDepsPlugin];
+  return [...vePlugins, presetPlugin];
 }
 
 export default scalepadUi;