@vadimcomanescu/nadicode-design-system 2.0.0 → 2.0.2

package/dist/{chunk-ALUL3PF7.js → chunk-6MFAZU4B.js}

@@ -1,7 +1,7 @@
 import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
 import { Heading } from './chunk-WI547C47.js';
 import { Input } from './chunk-AP3XXYAY.js';
-import { Label } from './chunk-LIBXYD5Q.js';
 import { GoogleIcon } from './chunk-DJTF3XFB.js';
 import { Card, CardHeader, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
 import { Button } from './chunk-7KIDDF3I.js';
@@ -82,8 +82,8 @@ function LoginBlock({
       ] }),
       !!error && /* @__PURE__ */ jsx("div", { id: "login-error", role: "alert", className: "rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive", children: error }),
       /* @__PURE__ */ jsx("form", { action, onSubmit: action ? void 0 : onLogin, "aria-describedby": error ? "login-error" : void 0, className: "grid gap-4", children: /* @__PURE__ */ jsxs(StaggerChildren, { staggerMs: FIELD_STAGGER_MS, className: "grid gap-4", children: [
-        type === "signup" && /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "fullName", children: labels.fullName }),
+        type === "signup" && /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "fullName", children: labels.fullName }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -96,8 +96,8 @@ function LoginBlock({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: labels.emailAddress }),
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "email", children: labels.emailAddress }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -113,9 +113,9 @@ function LoginBlock({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsxs(Field, { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: labels.password }),
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "password", children: labels.password }),
             type === "login" && /* @__PURE__ */ jsx(
               "a",
               {

package/dist/components/blocks/AuthLayout.js

@@ -1,6 +1,7 @@
 'use client';
-import { LoginBlock } from '../../chunk-ALUL3PF7.js';
+import { LoginBlock } from '../../chunk-6MFAZU4B.js';
 import { StaggerChildren } from '../../chunk-DQPK2XRL.js';
+import '../../chunk-RX5EUODB.js';
 import { Heading } from '../../chunk-WI547C47.js';
 import { siteConfig } from '../../chunk-A7NUWD76.js';
 import '../../chunk-AP3XXYAY.js';

package/dist/components/blocks/LoginBlock.js

@@ -1,6 +1,7 @@
 'use client';
-export { LoginBlock } from '../../chunk-ALUL3PF7.js';
+export { LoginBlock } from '../../chunk-6MFAZU4B.js';
 import '../../chunk-DQPK2XRL.js';
+import '../../chunk-RX5EUODB.js';
 import '../../chunk-WI547C47.js';
 import '../../chunk-AP3XXYAY.js';
 import '../../chunk-LIBXYD5Q.js';

package/dist/components/blocks/PasswordRecoveryBlock.js

@@ -1,9 +1,10 @@
 'use client';
 import { useSafeTimeout } from '../../chunk-MDAYDDTC.js';
 import { Spinner } from '../../chunk-ZLSWCV55.js';
+import { Field, FieldLabel } from '../../chunk-RX5EUODB.js';
 import { Separator } from '../../chunk-CUZJIDU7.js';
 import { Input } from '../../chunk-AP3XXYAY.js';
-import { Label } from '../../chunk-LIBXYD5Q.js';
+import '../../chunk-LIBXYD5Q.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../chunk-AH6YSYYT.js';
 import { Button } from '../../chunk-7KIDDF3I.js';
 import { m, fadeInUp, scaleIn } from '../../chunk-PD2YEH3H.js';
@@ -110,8 +111,8 @@ function PasswordRecoveryBlock({
       /* @__PURE__ */ jsx(CardDescription, { children: resolvedDescription })
     ] }),
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "grid gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "recovery-email", children: tShared("email") }),
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "recovery-email", children: tShared("email") }),
         /* @__PURE__ */ jsx(
           Input,
           {

package/dist/components/blocks/ResetPasswordBlock.js

@@ -1,8 +1,9 @@
 'use client';
 import { Spinner } from '../../chunk-ZLSWCV55.js';
 import { PasswordInput } from '../../chunk-UJDEGCCZ.js';
+import { Field, FieldLabel } from '../../chunk-RX5EUODB.js';
 import '../../chunk-AP3XXYAY.js';
-import { Label } from '../../chunk-LIBXYD5Q.js';
+import '../../chunk-LIBXYD5Q.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../chunk-AH6YSYYT.js';
 import { Button } from '../../chunk-7KIDDF3I.js';
 import { m, scaleIn } from '../../chunk-PD2YEH3H.js';
@@ -62,8 +63,8 @@ function ResetPasswordBlock({
       /* @__PURE__ */ jsx(CardDescription, { children: resolvedDescription })
     ] }),
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "grid gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", children: t("newPassword") }),
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "new-password", children: t("newPassword") }),
         /* @__PURE__ */ jsx(
           PasswordInput,
           {
@@ -76,8 +77,8 @@ function ResetPasswordBlock({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "confirm-password", children: t("confirmPassword") }),
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "confirm-password", children: t("confirmPassword") }),
         /* @__PURE__ */ jsx(
           PasswordInput,
           {

package/dist/components/blocks/SignUpBlock.js

@@ -1,9 +1,10 @@
 'use client';
 import { LogoIcon } from '../../chunk-GHIBG7OM.js';
+import { Field, FieldLabel } from '../../chunk-RX5EUODB.js';
 import { Heading } from '../../chunk-WI547C47.js';
 import { siteConfig } from '../../chunk-A7NUWD76.js';
 import { Input } from '../../chunk-AP3XXYAY.js';
-import { Label } from '../../chunk-LIBXYD5Q.js';
+import '../../chunk-LIBXYD5Q.js';
 import { GoogleIcon, MicrosoftIcon } from '../../chunk-DJTF3XFB.js';
 import { Button } from '../../chunk-7KIDDF3I.js';
 import '../../chunk-PD2YEH3H.js';
@@ -72,9 +73,9 @@ function LoginPage({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
             /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs(Field, { children: [
                 /* @__PURE__ */ jsx(
-                  Label,
+                  FieldLabel,
                   {
                     htmlFor: "firstname",
                     className: "block text-sm",
@@ -91,9 +92,9 @@ function LoginPage({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs(Field, { children: [
                 /* @__PURE__ */ jsx(
-                  Label,
+                  FieldLabel,
                   {
                     htmlFor: "lastname",
                     className: "block text-sm",
@@ -111,9 +112,9 @@ function LoginPage({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs(Field, { children: [
               /* @__PURE__ */ jsx(
-                Label,
+                FieldLabel,
                 {
                   htmlFor: "email",
                   className: "block text-sm",
@@ -130,9 +131,9 @@ function LoginPage({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs(Field, { children: [
               /* @__PURE__ */ jsx(
-                Label,
+                FieldLabel,
                 {
                   htmlFor: "pwd",
                   className: "text-sm",

package/dist/components/blocks/WizardBlock.js

@@ -2,9 +2,10 @@
 import '../../chunk-3NYTIDKZ.js';
 import { Step } from '../../chunk-HS7QNBCO.js';
 import { Stepper } from '../../chunk-2WEUTBDI.js';
+import { Field, FieldLabel } from '../../chunk-RX5EUODB.js';
 import { Heading } from '../../chunk-WI547C47.js';
 import { Input } from '../../chunk-AP3XXYAY.js';
-import { Label } from '../../chunk-LIBXYD5Q.js';
+import '../../chunk-LIBXYD5Q.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../chunk-AH6YSYYT.js';
 import { Button } from '../../chunk-7KIDDF3I.js';
 import '../../chunk-PD2YEH3H.js';
@@ -161,22 +162,22 @@ function WizardBlock({
       )) }),
       /* @__PURE__ */ jsxs("div", { className: "min-h-[200px] border rounded-lg p-6 bg-muted/20 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [
         activeStep === 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-            /* @__PURE__ */ jsx(Label, { children: "Username" }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { children: "Username" }),
             /* @__PURE__ */ jsx(Input, { placeholder: "jdoe" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-            /* @__PURE__ */ jsx(Label, { children: "Email" }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { children: "Email" }),
             /* @__PURE__ */ jsx(Input, { placeholder: "john@example.com" })
           ] })
         ] }),
         activeStep === 1 && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-            /* @__PURE__ */ jsx(Label, { children: "Full Name" }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { children: "Full Name" }),
             /* @__PURE__ */ jsx(Input, { placeholder: "John Doe" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-            /* @__PURE__ */ jsx(Label, { children: "Bio" }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { children: "Bio" }),
             /* @__PURE__ */ jsx(Input, { placeholder: "Tell us about yourself" })
           ] })
         ] }),

package/dist/components/blocks/user/InviteUserModal.js

@@ -1,9 +1,10 @@
 'use client';
 import { RoleBadge } from '../../../chunk-OHCQPI3W.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../chunk-WH62BE24.js';
+import { Field, FieldLabel } from '../../../chunk-RX5EUODB.js';
 import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../../../chunk-W73JAOHW.js';
 import { Input } from '../../../chunk-AP3XXYAY.js';
-import { Label } from '../../../chunk-LIBXYD5Q.js';
+import '../../../chunk-LIBXYD5Q.js';
 import '../../../chunk-KRBLVZII.js';
 import { Button } from '../../../chunk-7KIDDF3I.js';
 import '../../../chunk-6FOHUNXR.js';
@@ -180,8 +181,8 @@ function InviteUserModal({ onInvite, onInvited }) {
         /* @__PURE__ */ jsx(DialogDescription, { children: "Send an invitation to join your workspace. They will receive an email with a magic link." })
       ] }),
       /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-6 pt-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email Address" }),
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "email", children: "Email Address" }),
           /* @__PURE__ */ jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsx(MailIcon, { size: 16, className: "absolute left-4 top-2.5 text-text-tertiary" }),
             /* @__PURE__ */ jsx(
@@ -196,8 +197,8 @@ function InviteUserModal({ onInvite, onInvited }) {
           ] }),
           errors.email && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-destructive", children: errors.email.message })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Label, { children: "Role" }),
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { children: "Role" }),
           /* @__PURE__ */ jsxs(
             Select,
             {

package/eslint-rules/nadicode/config.js

@@ -80,6 +80,7 @@ export const nadicodeRules = {
   "nadicode/no-handcoded-badge": "error",
   "nadicode/no-handcoded-heading": "error",
   "nadicode/no-handcoded-empty-state": "error",
+  "nadicode/no-handcoded-field": "error",
 };
 
 function normalizePattern(pattern) {

package/eslint-rules/nadicode/index.js

@@ -67,6 +67,7 @@ import noDiyBackdropBlur from "./rules/no-diy-backdrop-blur.js";
 import noHandcodedBadge from "./rules/no-handcoded-badge.js";
 import noHandcodedHeading from "./rules/no-handcoded-heading.js";
 import noHandcodedEmptyState from "./rules/no-handcoded-empty-state.js";
+import noHandcodedField from "./rules/no-handcoded-field.js";
 
 export { nadicodeRules, createAllowlistOverrides } from "./config.js";
 
@@ -141,5 +142,6 @@ export const nadicodePlugin = {
     "no-handcoded-badge": noHandcodedBadge,
     "no-handcoded-heading": noHandcodedHeading,
     "no-handcoded-empty-state": noHandcodedEmptyState,
+    "no-handcoded-field": noHandcodedField,
   },
 };

package/eslint-rules/nadicode/rules/__tests__/no-handcoded-field.test.js

@@ -0,0 +1,110 @@
+import { RuleTester } from "eslint";
+import { describe } from "vitest";
+
+import rule from "../no-handcoded-field.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+const ERROR_MESSAGE =
+  'Use <Field> and <FieldLabel> instead of hand-coded label+control wrappers. Import from "@/components/ui/Field".';
+
+describe("no-handcoded-field", () => {
+  tester.run("no-handcoded-field", rule, {
+    valid: [
+      {
+        code: "const x = <Field><FieldLabel>Email</FieldLabel><Input /></Field>;",
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: 'const x = <div><Checkbox id="x" /><Label htmlFor="x">Accept</Label></div>;',
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: "const x = <div><Switch id=\"s\" /><Label htmlFor=\"s\">Toggle</Label></div>;",
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: "const x = <div><RadioGroupItem value=\"a\" /><Label>Option A</Label></div>;",
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: "const x = <div><Label>Name</Label><Input /></div>;",
+        filename: "/repo/src/components/ui/Field.tsx",
+      },
+      {
+        code: "const x = <div><Label>Name</Label><Input /></div>;",
+        filename: "/repo/src/__tests__/form.test.tsx",
+      },
+      {
+        code: "const x = <div><Label>Name</Label><Input /></div>;",
+        filename: "/repo/src/app/form.test.tsx",
+      },
+      {
+        code: "const x = <div><Label>Name</Label><Input /></div>;",
+        filename: "/repo/src/test/form-check.tsx",
+      },
+      {
+        code: "const x = <div><Label>Just a label</Label></div>;",
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: "const x = <FormField><Label>Email</Label><Input /></FormField>;",
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: "const x = <FormItem><Label>Email</Label><Input /></FormItem>;",
+        filename: "/repo/src/app/page.tsx",
+      },
+    ],
+    invalid: [
+      {
+        code: 'const x = <div className="space-y-2"><Label>Email</Label><Input /></div>;',
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+      {
+        code: "const x = <div><Label>Bio</Label><Textarea /></div>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+      {
+        code: "const x = <div><Label>Country</Label><Select><SelectTrigger /></Select></div>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+      {
+        code: "const x = <div><Label>Country</Label><NativeSelect /></div>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+      {
+        code: "const x = <div><Label>OTP</Label><InputOTP /></div>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+      {
+        code: "const x = <div><Label>Date</Label><DatePicker /></div>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+      {
+        code: "const x = <div><Label>Volume</Label><Slider /></div>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+      {
+        code: "const x = <div><Label>Password</Label><PasswordInput /></div>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [{ message: ERROR_MESSAGE }],
+      },
+    ],
+  });
+});

package/eslint-rules/nadicode/rules/no-handcoded-field.js

@@ -0,0 +1,120 @@
+import { getFilename, isTestFile } from "../utils.js";
+
+const FORM_CONTROLS = new Set([
+  "Input",
+  "Textarea",
+  "Select",
+  "SelectTrigger",
+  "NativeSelect",
+  "Combobox",
+  "InputOTP",
+  "RadioGroup",
+  "DatePicker",
+  "DateRangePicker",
+  "Slider",
+  "FileUpload",
+  "PasswordInput",
+  "InputGroup",
+  "TagInput",
+  "Calendar",
+]);
+
+const INLINE_LABEL_CONTROLS = new Set([
+  "Checkbox",
+  "Switch",
+  "RadioGroupItem",
+]);
+
+const FIELD_WRAPPERS = new Set([
+  "Field",
+  "FormField",
+  "FormItem",
+]);
+
+const EXEMPT_DIRS = [
+  "/components/ui/",
+  "/components/animate-ui/",
+  "/components/layout/",
+  "/src/test/",
+];
+
+const EXEMPT_FILES = [
+  "Field.tsx",
+  "FormField.tsx",
+];
+
+function isExempt(filename) {
+  if (EXEMPT_FILES.some((file) => filename.endsWith(`/${file}`))) return true;
+  return EXEMPT_DIRS.some((dir) => filename.includes(dir));
+}
+
+function getJSXElementName(node) {
+  if (node.type === "JSXIdentifier") return node.name;
+  return null;
+}
+
+function getChildElementNames(jsxElement) {
+  const names = [];
+  const children = jsxElement.children || [];
+
+  for (const child of children) {
+    if (child.type === "JSXElement" && child.openingElement) {
+      const name = getJSXElementName(child.openingElement.name);
+      if (name) names.push(name);
+    }
+  }
+
+  return names;
+}
+
+const rule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Disallow hand-coded label+control wrappers. Use Field and FieldLabel instead.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+    if (isExempt(filename) || isTestFile(filename)) return {};
+
+    return {
+      JSXElement(node) {
+        const opening = node.openingElement;
+        if (!opening || opening.name.type !== "JSXIdentifier") return;
+
+        const tagName = opening.name.name;
+
+        if (FIELD_WRAPPERS.has(tagName)) return;
+
+        const isPlainDiv = tagName === "div";
+        if (!isPlainDiv) return;
+
+        const childNames = getChildElementNames(node);
+
+        const hasLabel = childNames.includes("Label");
+        if (!hasLabel) return;
+
+        const hasInlineLabelControl = childNames.some((name) =>
+          INLINE_LABEL_CONTROLS.has(name),
+        );
+        if (hasInlineLabelControl) return;
+
+        const hasFormControl = childNames.some((name) =>
+          FORM_CONTROLS.has(name),
+        );
+        if (!hasFormControl) return;
+
+        context.report({
+          node: opening,
+          message:
+            'Use <Field> and <FieldLabel> instead of hand-coded label+control wrappers. Import from "@/components/ui/Field".',
+        });
+      },
+    };
+  },
+};
+
+export default rule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vadimcomanescu/nadicode-design-system",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
     "build": "next build",
     "start": "next start",
     "build:types": "tsc -p tsconfig.types.json && node scripts/rewrite-dist-types.mjs",
-    "build:lib": "node scripts/build-tokens-css.mjs && tsup && npm run build:types && node scripts/check-export-targets.mjs",
+    "build:lib": "node scripts/build-tokens-css.mjs && tsup && npm run build:types && node scripts/generate-catalog.mjs && node scripts/check-export-targets.mjs",
     "pack:artifact": "node scripts/pack-package-artifact.mjs",
     "exports:generate": "node scripts/generate-exports.mjs",
     "test:distribution": "node scripts/package-smoke-test.mjs",
@@ -41,8 +41,10 @@
     "ds:validate": "npm run ds:check && npm run lint && tsc --noEmit && node scripts/check-tokens-freshness.mjs && npm run build:lib && npm run test:distribution && npm run build",
     "ds:check": "node scripts/ds-check.mjs",
     "ds:task-pack": "node scripts/ds-generate-task-pack.mjs",
+    "catalog:generate": "node scripts/generate-catalog.mjs",
+    "catalog:check": "node scripts/generate-catalog.mjs --check",
     "docs:api": "node scripts/docs-generate-api.mjs",
-    "docs:check": "node scripts/docs-check.mjs",
+    "docs:check": "node scripts/docs-check.mjs && node scripts/generate-catalog.mjs --check",
     "docs:inventory": "node scripts/docs-inventory.mjs",
     "release:check": "npm run docs:check && npm run test:all",
     "release:verify": "node scripts/verify-package-release.mjs",
@@ -175,6 +177,7 @@
       "import": "./dist/index.js",
       "types": "./dist/lib-index.d.ts"
     },
+    "./catalog": "./dist/catalog.json",
     "./accordion": {
       "import": "./dist/components/ui/Accordion.js",
       "types": "./dist/components/ui/Accordion.d.ts"