@rdna/radiants 0.1.1 → 0.1.3

package/eslint/rules/no-pixel-border.mjs

@@ -0,0 +1,160 @@
+/**
+ * rdna/no-pixel-border
+ *
+ * Flags `border-*` (non-neutral) and `overflow-hidden` when used on
+ * pixel-cornered elements (pixel-rounded-* or pixel-corners).
+ *
+ * Why: pixel-rounded-* uses clip-path (corners) + ::after (visible border).
+ *   - Adding `border-*` creates a native CSS border that clip-path clips at edges
+ *     — borders visually cut off, especially on right/bottom.
+ *   - Adding `overflow-hidden` clips the ::after pseudo-element that draws the border
+ *     — border partially or fully disappears.
+ *
+ * Fixes:
+ *   - Remove `border-*` — ::after on pixel-rounded-* handles the visible border.
+ *   - Remove `overflow-hidden` — clip-path on pixel-rounded-* handles overflow.
+ *   - For small non-decorative elements (swatches, indicators), use `rounded-*`
+ *     (standard Tailwind radius) instead of `pixel-rounded-*` so border/overflow work normally.
+ */
+import {
+  getClassNameStrings,
+  isInsideClassNameAttribute,
+} from '../utils.mjs';
+import { pixelCorners } from '../contract.mjs';
+
+const pixelCornerPattern = pixelCorners.triggerClasses
+  .map((name) => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  .join('|');
+const PIXEL_CORNER_RE = pixelCornerPattern
+  ? new RegExp(`(?:^|\\s)(?:[\\w-]+:)*(?:${pixelCornerPattern})(?:\\s|$)`)
+  : /$a/;
+const PIXEL_CORNER_TOKEN_RE = pixelCornerPattern
+  ? new RegExp(`(?:^|\\s)((?:[\\w-]+:)*(?:${pixelCornerPattern}))(?=\\s|$)`)
+  : /$a/;
+
+// Border classes that create native CSS borders (clipped by clip-path)
+// Matches: border, border-{side}, border-{color}, border-{width} — excludes border-none/border-0/border-transparent
+const CLIPPABLE_BORDER_RE = /(?:^|\s)((?:[\w-]+:)*border(?:-(?!none|0|transparent|collapse|separate|spacing|style|hidden)[\w-]+)?)(?=\s|$)/g;
+
+// overflow-hidden clips ::after pseudo-element on pixel-cornered elements
+const OVERFLOW_HIDDEN_RE = /(?:^|\s)((?:[\w-]+:)*overflow-hidden)(?:\s|$)/;
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Ban border-* and overflow-hidden on pixel-cornered elements (pixel-rounded-*/pixel-corners). ::after handles borders; clip-path handles overflow.',
+    },
+    messages: {
+      clippedBorder:
+        '"{{cls}}" will be clipped by clip-path on this pixel-cornered element ({{corner}}). Remove it — ::after on {{corner}} renders the visible border.',
+      clippedOverflow:
+        '"overflow-hidden" clips the ::after border on this pixel-cornered element ({{corner}}). Remove it — clip-path on {{corner}} handles overflow.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name !== 'className') return;
+        checkElement(context, node);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) {
+          checkCallExpression(context, node);
+        }
+      },
+    };
+  },
+};
+
+function checkElement(context, attrNode) {
+  const strings = getClassNameStrings(attrNode.value);
+  const fullClassName = strings.map((s) => s.value).join(' ');
+
+  const hasPixelCorner = PIXEL_CORNER_RE.test(fullClassName);
+  if (!hasPixelCorner) return;
+
+  const cornerMatch = extractPixelCorner(fullClassName) ?? 'pixel-rounded';
+
+  // Check border-* classes
+  const borders = extractBorders(fullClassName);
+  for (const cls of borders) {
+    const reportNode = findStringNode(strings, cls) ?? attrNode;
+    context.report({
+      node: reportNode,
+      messageId: 'clippedBorder',
+      data: { cls, corner: cornerMatch },
+    });
+  }
+
+  // Check overflow-hidden
+  const overflowMatch = OVERFLOW_HIDDEN_RE.exec(fullClassName);
+  if (overflowMatch) {
+    const cls = overflowMatch[1].trim();
+    const reportNode = findStringNode(strings, cls) ?? attrNode;
+    context.report({
+      node: reportNode,
+      messageId: 'clippedOverflow',
+      data: { corner: cornerMatch },
+    });
+  }
+}
+
+function checkCallExpression(context, node) {
+  const strings = getClassNameStrings(node);
+  const fullClassName = strings.map((s) => s.value).join(' ');
+
+  const hasPixelCorner = PIXEL_CORNER_RE.test(fullClassName);
+  if (!hasPixelCorner) return;
+
+  const cornerMatch = extractPixelCorner(fullClassName) ?? 'pixel-rounded';
+
+  const borders = extractBorders(fullClassName);
+  for (const cls of borders) {
+    const reportNode = findStringNode(strings, cls) ?? node;
+    context.report({
+      node: reportNode,
+      messageId: 'clippedBorder',
+      data: { cls, corner: cornerMatch },
+    });
+  }
+
+  const overflowMatch = OVERFLOW_HIDDEN_RE.exec(fullClassName);
+  if (overflowMatch) {
+    const cls = overflowMatch[1].trim();
+    const reportNode = findStringNode(strings, cls) ?? node;
+    context.report({
+      node: reportNode,
+      messageId: 'clippedOverflow',
+      data: { corner: cornerMatch },
+    });
+  }
+}
+
+function extractBorders(className) {
+  const results = [];
+  CLIPPABLE_BORDER_RE.lastIndex = 0;
+  let match;
+  while ((match = CLIPPABLE_BORDER_RE.exec(className)) !== null) {
+    results.push(match[1].trim());
+  }
+  return results;
+}
+
+function findStringNode(strings, target) {
+  for (const { value, node } of strings) {
+    if (value.includes(target)) return node;
+  }
+  return null;
+}
+
+function extractPixelCorner(className) {
+  const match = className.match(PIXEL_CORNER_TOKEN_RE);
+  if (!match?.[1]) return null;
+  return match[1].replace(/^(?:[\w-]+:)+/, '');
+}
+
+export default rule;

package/eslint/rules/no-raw-radius.mjs

@@ -0,0 +1,106 @@
+/**
+ * rdna/no-raw-radius
+ * Bans arbitrary border-radius values in className and style props.
+ * Use RDNA radius tokens (rounded-xs, rounded-sm, rounded-md, rounded-full) instead.
+ */
+import {
+  getClassNameStrings,
+  getObjectPropertyKey,
+  getStaticStringValue,
+  getStyleObjectExpression,
+  isAllowedCssVar,
+  isDynamicTemplateLiteral,
+  isInsideClassNameAttribute,
+  ARBITRARY_RADIUS_CLASS,
+} from '../utils.mjs';
+
+const radiusStyleProps = new Set([
+  'borderRadius',
+  'borderTopLeftRadius', 'borderTopRightRadius',
+  'borderBottomLeftRadius', 'borderBottomRightRadius',
+]);
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban arbitrary border-radius values; require RDNA radius tokens',
+    },
+    messages: {
+      arbitraryRadius:
+        'Arbitrary radius "{{raw}}" in className. Use an RDNA radius utility (rounded-xs, rounded-sm, rounded-md, rounded-full).',
+      hardcodedRadiusStyle:
+        'Hardcoded border-radius in style prop ({{prop}}). Use a Tailwind radius utility class instead.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className') checkClassName(context, node.value);
+        if (node.name.name === 'style') checkStyleObject(context, node.value);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) checkClassName(context, node);
+      },
+    };
+  },
+};
+
+function checkClassName(context, valueNode) {
+  if (!valueNode) return;
+  const strings = getClassNameStrings(valueNode);
+  for (const { value, node } of strings) {
+    ARBITRARY_RADIUS_CLASS.lastIndex = 0;
+    let match;
+    while ((match = ARBITRARY_RADIUS_CLASS.exec(value)) !== null) {
+      context.report({
+        node,
+        messageId: 'arbitraryRadius',
+        data: { raw: match[0] },
+      });
+    }
+  }
+}
+
+function checkStyleObject(context, valueNode) {
+  const expr = getStyleObjectExpression(valueNode);
+  if (!expr) return;
+
+  for (const prop of expr.properties) {
+    const key = getObjectPropertyKey(prop);
+    if (!radiusStyleProps.has(key)) continue;
+
+    const val = prop.value;
+    if (val.type === 'Literal' && typeof val.value === 'number') {
+      context.report({
+        node: val,
+        messageId: 'hardcodedRadiusStyle',
+        data: { prop: key },
+      });
+      continue;
+    }
+
+    const staticString = getStaticStringValue(val);
+    if (staticString !== null) {
+      if (isAllowedCssVar(staticString, 'radius-')) continue;
+      context.report({
+        node: val,
+        messageId: 'hardcodedRadiusStyle',
+        data: { prop: key },
+      });
+      continue;
+    }
+
+    if (isDynamicTemplateLiteral(val)) {
+      context.report({
+        node: val,
+        messageId: 'hardcodedRadiusStyle',
+        data: { prop: key },
+      });
+    }
+  }
+}
+
+export default rule;

package/eslint/rules/no-raw-shadow.mjs

@@ -0,0 +1,142 @@
+/**
+ * rdna/no-raw-shadow
+ * Bans arbitrary shadow values in className and style props.
+ * Use RDNA elevation/shadow tokens (shadow-resting, shadow-raised, shadow-floating, etc.) instead.
+ */
+import { shadows } from '../contract.mjs';
+import {
+  getClassNameStrings,
+  getObjectPropertyKey,
+  getStaticStringValue,
+  getStyleObjectExpression,
+  isAllowedCssVar,
+  isDynamicTemplateLiteral,
+  isInsideClassNameAttribute,
+  ARBITRARY_SHADOW_CLASS,
+} from '../utils.mjs';
+
+const allowedShadowTokens = [
+  ...shadows.validStandard,
+  ...shadows.validPixel,
+  ...shadows.validGlow,
+].join(', ');
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban arbitrary shadow values; require RDNA elevation/shadow tokens',
+    },
+    messages: {
+      arbitraryShadow:
+        `Arbitrary shadow "{{raw}}" in className. Use an RDNA shadow utility (${allowedShadowTokens}).`,
+      hardcodedShadowStyle:
+        'Hardcoded boxShadow in style prop. Use a CSS variable: var(--shadow-*).',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className') checkClassName(context, node.value);
+        if (node.name.name === 'style') checkStyleObject(context, node.value);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) checkClassName(context, node);
+      },
+    };
+  },
+};
+
+function checkClassName(context, valueNode) {
+  if (!valueNode) return;
+  const strings = getClassNameStrings(valueNode);
+  for (const { value, node } of strings) {
+    ARBITRARY_SHADOW_CLASS.lastIndex = 0;
+    let match;
+    while ((match = ARBITRARY_SHADOW_CLASS.exec(value)) !== null) {
+      context.report({
+        node,
+        messageId: 'arbitraryShadow',
+        data: { raw: match[0] },
+      });
+    }
+  }
+}
+
+function checkStyleObject(context, valueNode) {
+  const expr = getStyleObjectExpression(valueNode);
+  if (!expr) return;
+
+  for (const prop of expr.properties) {
+    const key = getObjectPropertyKey(prop);
+    if (key !== 'boxShadow' && key !== 'filter') continue;
+
+    const val = prop.value;
+    const staticString = getStaticStringValue(val);
+    if (staticString !== null) {
+      if (key === 'boxShadow') {
+        if (isAllowedCssVar(staticString, 'shadow-')) continue;
+      } else {
+        if (!staticString.includes('drop-shadow(')) continue;
+        if (hasOnlyTokenizedDropShadows(staticString)) continue;
+      }
+      context.report({
+        node: val,
+        messageId: 'hardcodedShadowStyle',
+      });
+      continue;
+    }
+
+    if (
+      isDynamicTemplateLiteral(val) &&
+      (key === 'boxShadow' || context.sourceCode.getText(val).includes('drop-shadow('))
+    ) {
+      context.report({
+        node: val,
+        messageId: 'hardcodedShadowStyle',
+      });
+    }
+  }
+}
+
+function hasOnlyTokenizedDropShadows(value) {
+  const args = extractFunctionArguments(value, 'drop-shadow');
+  if (args.length === 0) return false;
+  return args.every(arg => isAllowedCssVar(arg, 'shadow-'));
+}
+
+function extractFunctionArguments(value, functionName) {
+  const args = [];
+  const prefix = `${functionName}(`;
+  let searchStart = 0;
+
+  while (searchStart < value.length) {
+    const start = value.indexOf(prefix, searchStart);
+    if (start === -1) break;
+
+    let depth = 1;
+    let index = start + prefix.length;
+    const argStart = index;
+
+    while (index < value.length && depth > 0) {
+      const char = value[index];
+      if (char === '(') {
+        depth += 1;
+      } else if (char === ')') {
+        depth -= 1;
+      }
+      index += 1;
+    }
+
+    if (depth !== 0) return [];
+
+    args.push(value.slice(argStart, index - 1).trim());
+    searchStart = index;
+  }
+
+  return args;
+}
+
+export default rule;

package/eslint/rules/no-removed-aliases.mjs

@@ -0,0 +1,61 @@
+/**
+ * rdna/no-removed-aliases
+ * Bans usage of removed token alias names.
+ * Scans all string literals and template literals for var(--removed-alias).
+ */
+import { tokenMap } from '../contract.mjs';
+
+const removedAliases = tokenMap.removedAliases;
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban removed RDNA token aliases',
+    },
+    messages: {
+      removedAlias:
+        'Removed token alias "{{alias}}" found. This token was removed from RDNA. Check DESIGN.md for the current equivalent.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    function checkString(node, value) {
+      for (const alias of removedAliases) {
+        let startIndex = value.indexOf(alias);
+        while (startIndex !== -1) {
+          const endIndex = startIndex + alias.length;
+          const prevChar = value[startIndex - 1] ?? '';
+          const nextChar = value[endIndex] ?? '';
+          const hasTokenBoundary = !/[\w-]/.test(prevChar) && !/[\w-]/.test(nextChar);
+
+          if (hasTokenBoundary) {
+            context.report({
+              node,
+              messageId: 'removedAlias',
+              data: { alias },
+            });
+          }
+
+          startIndex = value.indexOf(alias, endIndex);
+        }
+      }
+    }
+
+    return {
+      Literal(node) {
+        if (typeof node.value === 'string') {
+          checkString(node, node.value);
+        }
+      },
+      TemplateLiteral(node) {
+        for (const quasi of node.quasis) {
+          checkString(quasi, quasi.value.raw);
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint/rules/no-viewport-breakpoints-in-window-layout.mjs

@@ -0,0 +1,62 @@
+/**
+ * rdna/no-viewport-breakpoints-in-window-layout
+ * Bans viewport breakpoint prefixes (sm:, md:, lg:, xl:, 2xl:) in className
+ * strings. In RadOS window content, viewport breakpoints fire on the browser
+ * viewport, not the window container. Use container queries (@sm:, @md:) instead.
+ *
+ * Scoping: Enable this rule only for files inside RadOS window content via
+ * eslint config file patterns. The rule itself does not self-scope by filepath.
+ */
+import { getClassNameStrings, isInsideClassNameAttribute } from '../utils.mjs';
+
+const VIEWPORT_BP_PREFIXES = ['sm:', 'md:', 'lg:', 'xl:', '2xl:'];
+
+function isViewportBreakpointClass(token) {
+  // Container query variants start with @: @sm:, @md: — not viewport breakpoints
+  if (token.startsWith('@')) return false;
+  return VIEWPORT_BP_PREFIXES.some(bp => token.startsWith(bp) || token.includes(':' + bp.slice(0, -1) + ':'));
+}
+
+const rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Ban viewport breakpoint prefixes in window layout; use container queries instead',
+    },
+    messages: {
+      viewportBreakpoint:
+        'Viewport breakpoint "{{raw}}" does not respond to window size. Use a container query variant (@sm:, @md:, etc.) instead.',
+    },
+    schema: [],
+  },
+
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className') checkClassName(context, node.value);
+      },
+      CallExpression(node) {
+        if (!isInsideClassNameAttribute(node)) checkClassName(context, node);
+      },
+    };
+  },
+};
+
+function checkClassName(context, valueNode) {
+  if (!valueNode) return;
+  const strings = getClassNameStrings(valueNode);
+  for (const { value, node } of strings) {
+    const tokens = value.split(/\s+/).filter(Boolean);
+    for (const token of tokens) {
+      if (isViewportBreakpointClass(token)) {
+        context.report({
+          node,
+          messageId: 'viewportBreakpoint',
+          data: { raw: token },
+        });
+      }
+    }
+  }
+}
+
+export default rule;

package/eslint/rules/prefer-rdna-components.mjs

@@ -0,0 +1,146 @@
+/**
+ * rdna/prefer-rdna-components
+ * Bans raw HTML elements when an RDNA component equivalent exists.
+ * v1 is intentionally capability-aware:
+ * - always bans button, textarea, select, dialog, details, label, meter, progress, hr
+ * - bans input only for text-like inputs and missing type
+ * - exempts native-only controls like file, checkbox, radio, date, hidden
+ * - suppresses summary when nested inside details (one diagnostic for the pair)
+ * No auto-fix — replacement requires prop mapping.
+ */
+import { componentMap, textLikeInputTypes } from '../contract.mjs';
+import { isRadiantsInternal } from '../utils.mjs';
+
+const bannedElements = new Set(Object.keys(componentMap));
+const textLikeInputTypesSet = new Set(textLikeInputTypes);
+
+const rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prefer RDNA components over raw HTML elements',
+    },
+    messages: {
+      preferRdnaComponent:
+        'Use RDNA <{{component}}> instead of raw <{{element}}>. Import from {{importPath}}.{{note}}',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          exemptPaths: {
+            type: 'array',
+            items: { type: 'string' },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const exemptPaths = options.exemptPaths || [];
+    const filename = context.filename || context.getFilename();
+
+    // Check if file is exempt
+    const isExempt = exemptPaths.some(pattern => {
+      // Simple glob matching — check if filename contains the core path
+      if (pattern.includes('*')) {
+        // Use basic pattern matching
+        const regexStr = pattern
+          .replace(/\*\*/g, '<<DOUBLESTAR>>')
+          .replace(/\*/g, '[^/]*')
+          .replace(/<<DOUBLESTAR>>/g, '.*');
+        return new RegExp(regexStr).test(filename);
+      }
+      return filename.includes(pattern);
+    });
+
+    if (isExempt || isRadiantsInternal(filename)) return {};
+
+    return {
+      JSXOpeningElement(node) {
+        const name = node.name;
+        // Only check simple element names (not member expressions like Foo.Bar)
+        if (name.type !== 'JSXIdentifier') return;
+
+        const element = name.name;
+        // JSX elements starting with lowercase are HTML elements
+        if (element[0] !== element[0].toLowerCase()) return;
+
+        if (!bannedElements.has(element)) return;
+        if (element === 'input' && !isTextLikeInput(node)) return;
+
+        // Suppress <summary> when it's nested inside <details>, since
+        // the <details> diagnostic already covers the replacement (Collapsible).
+        // Walk up past JSXFragment nodes to handle <details><>...<summary/></><details>.
+        if (element === 'summary' && isInsideElement(node, 'details')) {
+          return;
+        }
+
+        const mapping = componentMap[element];
+        context.report({
+          node,
+          messageId: 'preferRdnaComponent',
+          data: {
+            component: mapping.component,
+            element,
+            importPath: mapping.import,
+            note: mapping.note ? ` (${mapping.note})` : '',
+          },
+        });
+      },
+    };
+  },
+};
+
+function isInsideElement(jsxOpeningNode, parentElementName) {
+  let current = jsxOpeningNode.parent; // JSXElement
+  while (current) {
+    // Walk past JSXFragment wrappers
+    if (current.type === 'JSXFragment') {
+      current = current.parent;
+      continue;
+    }
+    if (
+      current.type === 'JSXElement' &&
+      current.openingElement?.name?.type === 'JSXIdentifier' &&
+      current.openingElement.name.name === parentElementName
+    ) {
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+}
+
+function isTextLikeInput(node) {
+  const typeAttr = node.attributes.find(
+    attr =>
+      attr.type === 'JSXAttribute' &&
+      attr.name &&
+      attr.name.name === 'type'
+  );
+
+  if (!typeAttr || !typeAttr.value) return true;
+
+  if (typeAttr.value.type === 'Literal' && typeof typeAttr.value.value === 'string') {
+    return textLikeInputTypesSet.has(typeAttr.value.value);
+  }
+
+  if (typeAttr.value.type === 'JSXExpressionContainer') {
+    const expr = typeAttr.value.expression;
+    if (expr.type === 'Literal' && typeof expr.value === 'string') {
+      return textLikeInputTypesSet.has(expr.value);
+    }
+
+    // Dynamic input types are conservative violations because they may resolve
+    // to text-like controls at runtime and bypass the wrapper policy.
+    return true;
+  }
+
+  return true;
+}
+
+export default rule;