@nadicodeai/ui 0.20.0 → 0.21.0

package/dist/eslint/rules/no-deprecated-zod-api.js

@@ -0,0 +1,156 @@
+const LEGACY_FACTORIES = new Map([
+  ["nativeEnum", "z.enum()"],
+  ["promise", "await the value before parsing it"],
+]);
+
+const LEGACY_METHODS = {
+  number: new Map([
+    ["finite", "remove it; z.number() already rejects infinite values"],
+    ["safe", ".int()"],
+    ["step", ".multipleOf()"],
+  ]),
+  object: new Map([
+    ["merge", ".extend(other.shape)"],
+    ["passthrough", "z.looseObject()"],
+    ["strict", "z.strictObject()"],
+    ["strip", "z.object(), which strips unknown keys by default"],
+  ]),
+  string: new Map(
+    [
+      "base64",
+      "base64url",
+      "cuid",
+      "cuid2",
+      "e164",
+      "email",
+      "emoji",
+      "guid",
+      "ipv4",
+      "ipv6",
+      "jwt",
+      "ksuid",
+      "nanoid",
+      "ulid",
+      "url",
+      "uuid",
+      "uuidv4",
+      "uuidv6",
+      "uuidv7",
+      "xid",
+    ].map((name) => [name, `z.${name.startsWith("uuidv") ? "uuid" : name}()`]),
+  ),
+};
+
+for (const name of ["date", "datetime", "duration", "time"]) {
+  LEGACY_METHODS.string.set(name, `z.iso.${name}()`);
+}
+for (const name of ["cidrv4", "cidrv6"]) {
+  LEGACY_METHODS.string.set(name, `z.${name}()`);
+}
+
+function memberName(node) {
+  if (!node.computed && node.property.type === "Identifier") {
+    return node.property.name;
+  }
+  if (node.computed && node.property.type === "Literal") {
+    return typeof node.property.value === "string" ? node.property.value : undefined;
+  }
+  return undefined;
+}
+
+export const noDeprecatedZodApi = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow deprecated and legacy Zod APIs when a Zod 4 replacement exists",
+    },
+    schema: [],
+    messages: {
+      legacyFactory: "{{api}} is deprecated in Zod 4; use {{replacement}}.",
+      legacyMethod: "{{api}} is deprecated or legacy in Zod 4; use {{replacement}}.",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode;
+    const zodBindings = new Set();
+
+    function isZodBinding(identifier) {
+      for (let scope = sourceCode.getScope(identifier); scope; scope = scope.upper) {
+        const variable = scope.set.get(identifier.name);
+        if (variable) {
+          return zodBindings.has(variable);
+        }
+      }
+      return false;
+    }
+
+    function rootFactory(call) {
+      if (call.type !== "CallExpression" || call.callee.type !== "MemberExpression") {
+        return undefined;
+      }
+      const factory = memberName(call.callee);
+      if (!factory) {
+        return undefined;
+      }
+      if (call.callee.object.type === "Identifier" && isZodBinding(call.callee.object)) {
+        return factory;
+      }
+      return rootFactory(call.callee.object);
+    }
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "zod") {
+          return;
+        }
+        for (const specifier of node.specifiers) {
+          const importsNamespace = specifier.type === "ImportNamespaceSpecifier";
+          const importsZ =
+            specifier.type === "ImportSpecifier" &&
+            ((specifier.imported.type === "Identifier" && specifier.imported.name === "z") ||
+              (specifier.imported.type === "Literal" && specifier.imported.value === "z"));
+          if (!importsNamespace && !importsZ) {
+            continue;
+          }
+          for (const variable of sourceCode.getDeclaredVariables(specifier)) {
+            zodBindings.add(variable);
+          }
+        }
+      },
+
+      CallExpression(node) {
+        if (node.callee.type !== "MemberExpression") {
+          return;
+        }
+        const method = memberName(node.callee);
+        if (!method) {
+          return;
+        }
+
+        if (node.callee.object.type === "Identifier" && isZodBinding(node.callee.object)) {
+          const replacement = LEGACY_FACTORIES.get(method);
+          if (replacement) {
+            context.report({
+              node: node.callee.property,
+              messageId: "legacyFactory",
+              data: { api: `z.${method}()`, replacement },
+            });
+          }
+          return;
+        }
+
+        const factory = rootFactory(node.callee.object);
+        const family = factory === "strictObject" || factory === "looseObject" ? "object" : factory;
+        const replacement = LEGACY_METHODS[family]?.get(method);
+        if (replacement) {
+          context.report({
+            node: node.callee.property,
+            messageId: "legacyMethod",
+            data: { api: `z.${factory}().${method}()`, replacement },
+          });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,11 @@
+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-invalid-token-utility.js

@@ -0,0 +1,46 @@
+import { createRequire } from "node:module";
+
+import { tokenUtilityVisitors } from "./jsx-class-utility.js";
+
+const require = createRequire(import.meta.url);
+const generatedTheme = require("@nadicodeai/design-system/tailwind").theme.extend;
+const typographyUtilities = new Set(
+  Object.keys(generatedTheme.fontSize).map((name) => `nc-type-${name}`),
+);
+const colorTokens = new Set(Object.keys(generatedTheme.colors));
+const COLOR_UTILITY =
+  /^(?:bg|text|border|outline|ring|fill|stroke|decoration|accent|caret|divide|from|via|to|shadow)-nc-([^/]+)(?:\/.*)?$/;
+
+function withoutVariants(utility) {
+  return utility.slice(utility.lastIndexOf(":") + 1);
+}
+
+function isInvalidGeneratedUtility(utility) {
+  const unqualified = withoutVariants(utility);
+  if (unqualified.startsWith("nc-type-")) {
+    return !typographyUtilities.has(unqualified);
+  }
+
+  const color = COLOR_UTILITY.exec(unqualified);
+  return color ? !colorTokens.has(color[1]) : false;
+}
+
+export const noInvalidTokenUtility = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow token utilities that are absent from generated design-system output",
+    },
+    schema: [],
+    messages: {
+      invalidTokenUtility:
+        "{{utility}} is not generated by the installed NadicodeAI design system. Use a utility from @nadicodeai/design-system/tailwind.",
+    },
+  },
+  create(context) {
+    return tokenUtilityVisitors(context, (node, utility) => {
+      if (!isInvalidGeneratedUtility(utility)) return;
+      context.report({ node, messageId: "invalidTokenUtility", data: { utility } });
+    });
+  },
+};

package/dist/eslint/rules/no-native-visible-control.js

@@ -0,0 +1,86 @@
+import { isPackageOwnedPrimitive } from "./jsx-class-utility.js";
+
+const NATIVE_CONTROLS = new Set(["button", "input", "select", "textarea"]);
+
+function staticValue(node) {
+  if (node?.type === "Literal") {
+    return node.value;
+  }
+  if (node?.type === "JSXExpressionContainer") {
+    return staticValue(node.expression);
+  }
+  if (node?.type === "TemplateLiteral" && node.expressions.length === 0) {
+    return node.quasis[0]?.value.cooked;
+  }
+  return undefined;
+}
+
+function hiddenInput(node) {
+  const typeAttribute = node.attributes.find(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === "type",
+  );
+  return staticValue(typeAttribute?.value) === "hidden";
+}
+
+function isPrimitiveRenderElement(node, packagePrimitiveNames) {
+  const expression = node.parent;
+  const attribute = expression?.parent;
+  const openingElement = attribute?.parent;
+  return (
+    expression?.type === "JSXExpressionContainer" &&
+    attribute?.type === "JSXAttribute" &&
+    attribute.name.name === "render" &&
+    openingElement?.type === "JSXOpeningElement" &&
+    openingElement.name.type === "JSXIdentifier" &&
+    packagePrimitiveNames.has(openingElement.name.name)
+  );
+}
+
+export const noNativeVisibleControl = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow visible native controls in app source; use @nadicodeai/ui primitives",
+    },
+    schema: [],
+    messages: {
+      nativeVisibleControl:
+        "Use the @nadicodeai/ui primitive instead of native visible <{{element}}>.",
+    },
+  },
+  create(context) {
+    if (isPackageOwnedPrimitive(context.filename)) {
+      return {};
+    }
+    const packagePrimitiveNames = new Set();
+    return {
+      ImportDeclaration(node) {
+        if (
+          typeof node.source.value !== "string" ||
+          !node.source.value.startsWith("@nadicodeai/ui")
+        ) {
+          return;
+        }
+        for (const specifier of node.specifiers) {
+          packagePrimitiveNames.add(specifier.local.name);
+        }
+      },
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier" || !NATIVE_CONTROLS.has(node.name.name)) {
+          return;
+        }
+        if (node.name.name === "input" && hiddenInput(node)) {
+          return;
+        }
+        if (isPrimitiveRenderElement(node.parent, packagePrimitiveNames)) {
+          return;
+        }
+        context.report({
+          node: node.name,
+          messageId: "nativeVisibleControl",
+          data: { element: node.name.name },
+        });
+      },
+    };
+  },
+};

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

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,41 @@
+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-shadcn-appearance-override.js

@@ -0,0 +1,191 @@
+import {
+  classUtilities,
+  isPackageOwnedPrimitive,
+  openingElementClassUtilities,
+} from "./jsx-class-utility.js";
+
+function withoutVariants(utility) {
+  return utility.slice(utility.lastIndexOf(":") + 1);
+}
+
+function isTypographySize(utility) {
+  return /^text-(?:xs|sm|base|lg|xl|[2-9]xl|\[[\d.]+(?:px|rem|em|%|lh)\])$/.test(utility);
+}
+
+function isTextLayoutUtility(utility) {
+  return /^text-(?:left|center|right|justify|start|end|balance|pretty|clip|ellipsis)$/.test(
+    utility,
+  );
+}
+
+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",
+  "background",
+  "foreground",
+  "card",
+  "popover",
+  "primary",
+  "secondary",
+  "muted",
+  "accent",
+  "destructive",
+  "border",
+  "input",
+  "ring",
+  "focus",
+]);
+
+function hasColorValue(utility, prefix) {
+  if (!utility.startsWith(prefix)) {
+    return false;
+  }
+  const value = utility.slice(prefix.length).split("/")[0];
+  return value.startsWith("[") || COLOR_NAMES.has(value.split("-")[0]);
+}
+
+function isBorderMechanic(utility) {
+  return /^(?:border(?:-(?:[xy]|[trblse]{1,2}|[0-9]+|px|dashed|dotted|double|hidden|none))?)$/.test(
+    utility,
+  );
+}
+
+function isBorderRemoval(utility) {
+  return /^border(?:-[xytrblse]{1,2})?-(?:0|none|\[(?:length:)?0(?:px|rem|em|%)?\])$/.test(utility);
+}
+
+function isRingOrOutlineMechanic(utility) {
+  return /^(?:ring(?:-(?:[0-9]+|inset|offset(?:-[0-9]+)?))?|outline(?:-(?:none|[0-9]+|offset-[0-9]+))?)$/.test(
+    utility,
+  );
+}
+
+function isAppearanceUtility(utility) {
+  const base = withoutVariants(utility);
+  return (
+    /^appearance-/.test(base) ||
+    /^bg-/.test(base) ||
+    isBorderRemoval(base) ||
+    (base.startsWith("border") && !isBorderMechanic(base) && hasColorValue(base, "border-")) ||
+    /^shadow(?:-|$)/.test(base) ||
+    /^rounded(?:-|$)/.test(base) ||
+    ((base.startsWith("ring") || base.startsWith("outline")) &&
+      !isRingOrOutlineMechanic(base) &&
+      (hasColorValue(base, "ring-") || hasColorValue(base, "outline-"))) ||
+    /^opacity-/.test(base) ||
+    (/^text-/.test(base) && !isTypographySize(base) && !isTextLayoutUtility(base))
+  );
+}
+
+function isProhibitedAppearanceUtility(utility, { cardRoot = false } = {}) {
+  const base = withoutVariants(utility);
+  return isAppearanceUtility(utility) && (!isBorderRemoval(base) || cardRoot);
+}
+
+function targetsSharedSlot(utility) {
+  return utility.includes("data-slot") || utility.includes("data-[slot");
+}
+
+function targetsCardSlot(utility) {
+  return (
+    /data-slot=(?:card|["']card["'])(?=\])/.test(utility) ||
+    /data-\[slot=(?:card|["']card["'])\]/.test(utility)
+  );
+}
+
+export const noShadcnAppearanceOverride = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow app callers repainting imported shadcn primitives; compose their structural layout only",
+    },
+    schema: [],
+    messages: {
+      appearanceOverride:
+        "Do not repaint an imported @nadicodeai/ui primitive with {{utility}}; use its semantic variant or package primitive.",
+    },
+  },
+  create(context) {
+    if (isPackageOwnedPrimitive(context.filename)) {
+      return {};
+    }
+
+    const sharedPrimitiveNames = new Set();
+    const sharedCardRootNames = new Set();
+    const isSharedPrimitive = (node) =>
+      node?.type === "JSXOpeningElement" &&
+      node.name.type === "JSXIdentifier" &&
+      sharedPrimitiveNames.has(node.name.name);
+    const isSharedCardRoot = (node) =>
+      node?.type === "JSXOpeningElement" &&
+      node.name.type === "JSXIdentifier" &&
+      sharedCardRootNames.has(node.name.name);
+    return {
+      ImportDeclaration(node) {
+        if (
+          typeof node.source.value !== "string" ||
+          !node.source.value.startsWith("@nadicodeai/ui/components/")
+        ) {
+          return;
+        }
+        for (const specifier of node.specifiers) {
+          sharedPrimitiveNames.add(specifier.local.name);
+          if (
+            node.source.value === "@nadicodeai/ui/components/card" &&
+            specifier.type === "ImportSpecifier" &&
+            specifier.imported.name === "Card"
+          ) {
+            sharedCardRootNames.add(specifier.local.name);
+          }
+        }
+      },
+      JSXOpeningElement(node) {
+        if (!isSharedPrimitive(node)) return;
+        for (const utility of openingElementClassUtilities(node, context)) {
+          if (
+            utility &&
+            isProhibitedAppearanceUtility(utility, { cardRoot: isSharedCardRoot(node) })
+          ) {
+            context.report({ node, messageId: "appearanceOverride", data: { utility } });
+          }
+        }
+      },
+      JSXAttribute(node) {
+        if (isSharedPrimitive(node.parent)) return;
+        for (const utility of classUtilities(node, context)) {
+          if (
+            !targetsSharedSlot(utility) ||
+            !isProhibitedAppearanceUtility(utility, { cardRoot: targetsCardSlot(utility) })
+          ) {
+            continue;
+          }
+          context.report({ node, messageId: "appearanceOverride", data: { utility } });
+        }
+      },
+    };
+  },
+};