@nadicodeai/ui 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -63,7 +63,7 @@
     "@assistant-ui/react": "0.15.1",
     "@assistant-ui/react-markdown": "0.14.8",
     "@base-ui/react": "^1.6.0",
-    "@nadicodeai/design-system": "1.0.2",
+    "@nadicodeai/design-system": "1.1.0",
     "@paper-design/shaders": "0.0.78",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -94,18 +94,19 @@
   "devDependencies": {
     "@iconify-json/logos": "^1.2.11",
     "@iconify/utils": "^3.1.4",
+    "@nadicodeai/eslint-plugin": "*",
     "@stryker-mutator/core": "9.6.1",
     "@stryker-mutator/vitest-runner": "9.6.1",
     "@tailwindcss/postcss": "^4.3.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
     "axe-core": "^4.12.0",
     "eslint": "^9.39.4",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.15",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "shadcn": "4.13.0",
     "tailwindcss": "^4.3.1",
     "typescript": "^5",

package/dist/eslint/rules/no-design-system-src-import.js

@@ -1,11 +0,0 @@
-import { bannedSourceRootMatcher, createSrcImportRule } from "./src-import-boundary.js";
-
-/** @type {import('eslint').Rule.RuleModule} */
-export const noDesignSystemSrcImport = createSrcImportRule({
-  description:
-    "Disallow deep imports from @nadicodeai/design-system source paths in apps and UI consumers",
-  bannedMessage: "Import @nadicodeai/design-system through published exports only, not {{value}}.",
-  // The package dir is `design-system/`, so relative paths carry the shorter
-  // `design-system/src` marker rather than the scoped specifier.
-  isBanned: bannedSourceRootMatcher("design-system/src"),
-});

package/dist/eslint/rules/no-raw-color-utility.js

@@ -1,109 +0,0 @@
-import {
-  classUtilities,
-  isPackageOwnedPrimitive,
-  staticStringFragments,
-} from "./jsx-class-utility.js";
-
-const COLOR_NAMES = new Set([
-  "black",
-  "white",
-  "slate",
-  "gray",
-  "zinc",
-  "neutral",
-  "stone",
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-  "nc",
-]);
-const COLOR_UTILITY =
-  /^(?:bg|text|border|outline|ring|fill|stroke|decoration|accent|caret|divide|from|via|to|shadow)-(\[.+\]|[^/]+)(?:\/.*)?$/;
-const COLOR_VALUE_PROPERTIES = new Set([
-  "accentColor",
-  "background",
-  "backgroundColor",
-  "borderColor",
-  "caretColor",
-  "color",
-  "fill",
-  "outlineColor",
-  "stopColor",
-  "stroke",
-  "textDecorationColor",
-]);
-
-function withoutVariants(utility) {
-  return utility.slice(utility.lastIndexOf(":") + 1);
-}
-
-function isRawColorUtility(utility) {
-  const match = COLOR_UTILITY.exec(withoutVariants(utility));
-  if (!match) {
-    return false;
-  }
-  const color = match[1];
-  if (color.startsWith("[")) {
-    return (
-      /var\(--nc-/i.test(color) ||
-      /^\[(?:#|(?:rgba?|hsla?|oklch|oklab|hwb|color-mix)\(|(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|black|white)\])/i.test(
-        color,
-      )
-    );
-  }
-  return COLOR_NAMES.has(color.split("-")[0]);
-}
-
-function propertyName(node) {
-  if (!node || node.computed) return undefined;
-  if (node.key.type === "Identifier") return node.key.name;
-  if (node.key.type === "Literal" && typeof node.key.value === "string") return node.key.value;
-  return undefined;
-}
-
-export const noRawColorUtility = {
-  meta: {
-    type: "problem",
-    docs: {
-      description:
-        "Disallow raw Tailwind colors and canonical color values in app source; use semantic design tokens",
-    },
-    schema: [],
-    messages: {
-      rawColorUtility: "Use a semantic color role instead of raw color value {{utility}}.",
-    },
-  },
-  create(context) {
-    if (isPackageOwnedPrimitive(context.filename)) return {};
-
-    return {
-      JSXAttribute(node) {
-        for (const utility of classUtilities(node, context)) {
-          if (!isRawColorUtility(utility)) continue;
-          context.report({ node, messageId: "rawColorUtility", data: { utility } });
-        }
-      },
-      Property(node) {
-        if (!COLOR_VALUE_PROPERTIES.has(propertyName(node))) return;
-        for (const value of staticStringFragments(node.value, context)) {
-          if (!/var\(--nc-/i.test(value)) continue;
-          context.report({ node, messageId: "rawColorUtility", data: { utility: value } });
-        }
-      },
-    };
-  },
-};

package/dist/eslint/rules/no-raw-focus-ring-width.js

@@ -1,30 +0,0 @@
-import { classUtilities } from "./jsx-class-utility.js";
-
-function isRawFocusRingWidth(utility) {
-  const base = utility.slice(utility.lastIndexOf(":") + 1);
-  return utility.includes("focus") && /^ring-(?:[1-9]\d*|px)$/.test(base);
-}
-
-export const noRawFocusRingWidth = {
-  meta: {
-    type: "problem",
-    docs: {
-      description: "Require the design-system focus-ring width on every focus surface",
-    },
-    schema: [],
-    messages: {
-      rawFocusRingWidth:
-        "Use ring-[length:var(--ring-width-focus)] instead of raw focus-ring width {{utility}}.",
-    },
-  },
-  create(context) {
-    return {
-      JSXAttribute(node) {
-        for (const utility of classUtilities(node, context)) {
-          if (!isRawFocusRingWidth(utility)) continue;
-          context.report({ node, messageId: "rawFocusRingWidth", data: { utility } });
-        }
-      },
-    };
-  },
-};

package/dist/eslint/rules/no-raw-logo-import.js

@@ -1,41 +0,0 @@
-import { createSrcImportRule } from "./src-import-boundary.js";
-
-const BANNED_PATTERNS = [
-  "@nadicodeai/design-system/assets/logo-mark",
-  "@nadicodeai/design-system/assets/logo-wordmark",
-  "@nadicodeai/design-system/assets/logo-geometry",
-  "logo-mark.svg",
-  "logo-wordmark.svg",
-];
-
-// Only the single brand adapter in @nadicodeai/ui may import the raw logo
-// assets. A bare "/components/brand.tsx" suffix would also whitelist a future
-// website/portal `components/brand.tsx`, letting an app bypass BrandMark —
-// pin the full package-relative path instead.
-const ALLOWED_SUFFIXES = ["@nadicodeai/ui/src/components/brand.tsx"];
-
-function isAllowedFile(filename) {
-  const normalized = filename.replaceAll("\\", "/");
-  return ALLOWED_SUFFIXES.some((suffix) => normalized.endsWith(suffix));
-}
-
-function matchesBanned(value) {
-  return typeof value === "string" && BANNED_PATTERNS.some((pattern) => value.includes(pattern));
-}
-
-const rawLogoImportRule = createSrcImportRule({
-  description: "Disallow direct logo asset imports outside the BrandMark/BrandWordmark adapter",
-  bannedMessage:
-    "Import logo assets only through BrandMark/BrandWordmark from @nadicodeai/ui/components/brand (found {{value}}).",
-  isBanned: matchesBanned,
-});
-
-export const noRawLogoImport = {
-  ...rawLogoImportRule,
-  create(context) {
-    if (isAllowedFile(context.filename)) {
-      return {};
-    }
-    return rawLogoImportRule.create(context);
-  },
-};

package/dist/eslint/rules/no-ui-src-import.js

@@ -1,10 +0,0 @@
-import { bannedSourceRootMatcher, createSrcImportRule } from "./src-import-boundary.js";
-
-/** @type {import('eslint').Rule.RuleModule} */
-export const noUiSrcImport = createSrcImportRule({
-  description: "Disallow deep imports from @nadicodeai/ui/src/* in consumer apps",
-  bannedMessage: "Import @nadicodeai/ui through package exports only, not {{value}}.",
-  // The package sits at a repo-root dir literally named `@nadicodeai/ui/`, so
-  // relative paths carry the full `@nadicodeai/ui/src` marker too.
-  isBanned: bannedSourceRootMatcher("@nadicodeai/ui/src"),
-});

package/dist/eslint/rules/src-import-boundary.js

@@ -1,207 +0,0 @@
-/**
- * Shared machinery for the source-import boundary rules
- * (`no-ui-src-import`, `no-design-system-src-import`). Both resolve a module
- * specifier — static string, template/concatenation, const-propagated
- * identifier, TS type assertion — and report when a banned package source
- * path appears in it, across static imports, dynamic `import()`,
- * `require()`/`module.require()`, and TypeScript `import type`/`import =`.
- * Factoring it here keeps the two rules from drifting apart.
- */
-
-/**
- * Match a banned source root anywhere in the specifier, at a path boundary:
- * the root followed by `/` (a deep import) or at the end of the string (the
- * root itself). Substring-anywhere so relative paths (`../../@scope/pkg/src/x`),
- * node_modules paths, and loader-prefixed specifiers (`!!raw-loader!…/src/x`)
- * are all caught.
- * @param {string} root
- * @returns {(value: string) => boolean}
- */
-export function bannedSourceRootMatcher(root) {
-  return (value) => {
-    const index = value.indexOf(root);
-    if (index === -1) {
-      return false;
-    }
-    const nextChar = value[index + root.length];
-    return nextChar === undefined || nextChar === "/";
-  };
-}
-
-/**
- * @param {object} options
- * @param {string} options.description
- * @param {string} options.bannedMessage
- * @param {(value: string) => boolean} options.isBanned
- * @returns {import('eslint').Rule.RuleModule}
- */
-export function createSrcImportRule({ description, bannedMessage, isBanned }) {
-  return {
-    meta: {
-      type: "problem",
-      docs: { description },
-      messages: { banned: bannedMessage },
-      schema: [],
-    },
-    create(context) {
-      const sourceCode = context.sourceCode;
-
-      function findVariable(node, name) {
-        for (let scope = sourceCode.getScope(node); scope; scope = scope.upper) {
-          const variable = scope.set.get(name);
-          if (variable) {
-            return variable;
-          }
-        }
-        return undefined;
-      }
-
-      function isUnshadowed(node, name) {
-        const variable = findVariable(node, name);
-        return !variable || variable.defs.length === 0;
-      }
-
-      // `const require = createRequire(import.meta.url)` is the only real
-      // require in this all-ESM repo, so it must not be treated as a shadow.
-      function isCreateRequireInit(init) {
-        if (init?.type !== "CallExpression") {
-          return false;
-        }
-        const callee = init.callee;
-        if (callee.type === "Identifier") {
-          return callee.name === "createRequire";
-        }
-        return (
-          callee.type === "MemberExpression" &&
-          !callee.computed &&
-          callee.property.type === "Identifier" &&
-          callee.property.name === "createRequire"
-        );
-      }
-
-      function isRequire(node, name) {
-        const variable = findVariable(node, name);
-        if (!variable || variable.defs.length === 0) {
-          return true;
-        }
-        if (variable.defs.length === 1) {
-          const definition = variable.defs[0];
-          if (
-            definition.type === "Variable" &&
-            definition.parent?.kind === "const" &&
-            definition.node.id?.type === "Identifier" &&
-            isCreateRequireInit(definition.node.init)
-          ) {
-            return true;
-          }
-        }
-        return false;
-      }
-
-      function staticSpecifier(node, seenVariables = new Set()) {
-        if (node?.type === "Literal" && typeof node.value === "string") {
-          return node.value;
-        }
-        if (node?.type === "TemplateLiteral") {
-          let value = node.quasis[0]?.value.cooked ?? "";
-          for (let index = 0; index < node.expressions.length; index += 1) {
-            const expressionValue = staticSpecifier(node.expressions[index], seenVariables);
-            const followingText = node.quasis[index + 1]?.value.cooked;
-            if (expressionValue === undefined || followingText === undefined) {
-              return undefined;
-            }
-            value += expressionValue + followingText;
-          }
-          return value;
-        }
-        if (node?.type === "BinaryExpression" && node.operator === "+") {
-          const left = staticSpecifier(node.left, seenVariables);
-          const right = staticSpecifier(node.right, seenVariables);
-          return left === undefined || right === undefined ? undefined : left + right;
-        }
-        if (node?.type === "Identifier") {
-          const variable = findVariable(node, node.name);
-          const definition = variable?.defs.length === 1 ? variable.defs[0] : undefined;
-          if (
-            !variable ||
-            seenVariables.has(variable) ||
-            definition?.type !== "Variable" ||
-            definition.parent?.kind !== "const" ||
-            definition.node.id?.type !== "Identifier" ||
-            !definition.node.init
-          ) {
-            return undefined;
-          }
-
-          const nextSeenVariables = new Set(seenVariables);
-          nextSeenVariables.add(variable);
-          return staticSpecifier(definition.node.init, nextSeenVariables);
-        }
-        if (
-          node?.type === "TSAsExpression" ||
-          node?.type === "TSSatisfiesExpression" ||
-          node?.type === "TSNonNullExpression"
-        ) {
-          return staticSpecifier(node.expression, seenVariables);
-        }
-        return undefined;
-      }
-
-      function checkValue(node, value) {
-        if (typeof value === "string" && isBanned(value)) {
-          context.report({
-            node,
-            messageId: "banned",
-            data: { value },
-          });
-        }
-      }
-
-      function check(node) {
-        checkValue(node, staticSpecifier(node.source));
-      }
-
-      function memberPropertyName(node) {
-        if (!node.computed && node.property.type === "Identifier") {
-          return node.property.name;
-        }
-        return staticSpecifier(node.property);
-      }
-
-      function checkRequire(node) {
-        const isBareRequire =
-          node.callee.type === "Identifier" &&
-          node.callee.name === "require" &&
-          isRequire(node.callee, "require");
-        const isModuleRequire =
-          node.callee.type === "MemberExpression" &&
-          node.callee.object.type === "Identifier" &&
-          node.callee.object.name === "module" &&
-          isUnshadowed(node.callee.object, "module") &&
-          memberPropertyName(node.callee) === "require";
-
-        if (isBareRequire || isModuleRequire) {
-          checkValue(node, staticSpecifier(node.arguments[0]));
-        }
-      }
-
-      function checkTypeScriptImportEquals(node) {
-        if (node.moduleReference.type === "TSExternalModuleReference") {
-          checkValue(node, staticSpecifier(node.moduleReference.expression));
-        }
-      }
-
-      return {
-        ImportDeclaration: check,
-        ImportExpression: check,
-        CallExpression: checkRequire,
-        // `export { X } from "…/src/…"` and `export * from …` are consumer deep
-        // imports too; a source-less `export {}` has no node.source.
-        ExportNamedDeclaration: check,
-        ExportAllDeclaration: check,
-        TSImportType: check,
-        TSImportEqualsDeclaration: checkTypeScriptImportEquals,
-      };
-    },
-  };
-}