@triptease/design-system-mcp 0.0.3

package/dist/src/manifests/components/entries/lineChart.d.ts

@@ -0,0 +1,76 @@
+declare const _default: {
+    'line-chart': {
+        name: string;
+        description: string;
+        ssrSafe: true;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        installation: {
+            npm: ({
+                name: string;
+                includesTypes: true;
+                optional: false;
+            } | {
+                name: string;
+                includesTypes: true;
+                optional: true;
+            })[];
+            cdn: ({
+                name: string;
+                includesTypes: false;
+                optional: false;
+                pinnedVersionUrl: string;
+                pinnedMajorVersionUrl: string;
+                latestVersionUrl: string;
+                guidance: string;
+            } | {
+                name: string;
+                includesTypes: false;
+                optional: true;
+                pinnedVersionUrl: string;
+                pinnedMajorVersionUrl: string;
+                latestVersionUrl: string;
+                guidance: string;
+            })[];
+        };
+        attributes: {
+            width: {
+                type: string;
+                description: string;
+            };
+            height: {
+                type: string;
+                description: string;
+            };
+            'x-axis-title': {
+                type: string;
+                description: string;
+            };
+            'y-axis-title': {
+                type: string;
+                description: string;
+            };
+            loading: {
+                type: string;
+                description: string;
+            };
+            'hide-numbers': {
+                type: string;
+                description: string;
+            };
+        };
+        examples: ({
+            title: string;
+            code: string;
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
+    };
+};
+export default _default;

package/dist/src/manifests/components/entries/lineChart.js

@@ -0,0 +1,141 @@
+import { buildCDNUrl, buildMajorVersion } from '../../../utils/buildCDNUrls.js';
+import packageJson from '../../../../package.json' with { type: 'json' };
+const latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-chart'];
+const latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];
+const latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];
+const latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];
+export default {
+    'line-chart': {
+        name: 'Line Chart - Web Component',
+        description: 'Line chart for visualizing trends over continuous data',
+        ssrSafe: true,
+        element: 'tt-line-chart',
+        usageGuidance: {
+            whenToUse: [
+                'To visualize trends along a continuous x-axis',
+                'To compare how multiple datasets for the same measure change relative to each other',
+            ],
+            avoid: [
+                'When the x-axis does not represent a continuous range (use a bar chart instead)',
+                'When there are too few data points to form a meaningful trend (use a bar chart instead)',
+                'When comparing datasets that do not have a meaningful or explainable relationship',
+            ],
+        },
+        installation: {
+            npm: [
+                { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },
+                { name: '@triptease/tt-dataset', includesTypes: true, optional: false },
+                { name: '@triptease/tt-data-point', includesTypes: true, optional: false },
+                { name: '@triptease/tt-highlight', includesTypes: true, optional: true },
+            ],
+            cdn: [
+                {
+                    name: 'tt-line-chart',
+                    includesTypes: false,
+                    optional: false,
+                    pinnedVersionUrl: buildCDNUrl('tt-line-chart', latestLineChartVersion),
+                    pinnedMajorVersionUrl: buildCDNUrl('tt-line-chart', buildMajorVersion(latestLineChartVersion)),
+                    latestVersionUrl: buildCDNUrl('tt-line-chart', 'latest'),
+                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
+                },
+                {
+                    name: 'tt-dataset',
+                    includesTypes: false,
+                    optional: false,
+                    pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),
+                    pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),
+                    latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),
+                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
+                },
+                {
+                    name: 'tt-data-point',
+                    includesTypes: false,
+                    optional: false,
+                    pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),
+                    pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),
+                    latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),
+                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
+                },
+                {
+                    name: 'tt-highlight',
+                    includesTypes: false,
+                    optional: true,
+                    pinnedVersionUrl: buildCDNUrl('tt-highlight', latestHighlightVersion),
+                    pinnedMajorVersionUrl: buildCDNUrl('tt-highlight', buildMajorVersion(latestHighlightVersion)),
+                    latestVersionUrl: buildCDNUrl('tt-highlight', 'latest'),
+                    guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
+                },
+            ],
+        },
+        attributes: {
+            width: {
+                type: 'string',
+                description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',
+            },
+            height: {
+                type: 'string',
+                description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',
+            },
+            'x-axis-title': {
+                type: 'string',
+                description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',
+            },
+            'y-axis-title': {
+                type: 'string',
+                description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',
+            },
+            loading: {
+                type: 'boolean',
+                description: 'Show loading state while data fetches. Component handles aria-busy automatically.',
+            },
+            'hide-numbers': {
+                type: 'boolean',
+                description: 'Hide y-axis numbers and tooltips. Use when numbers could mislead. Removes ARIA labels, so provide trend description.',
+            },
+        },
+        examples: [
+            {
+                title: 'Basic line chart',
+                code: `import '@triptease/tt-line-chart';
+import '@triptease/tt-dataset';
+import '@triptease/tt-data-point';
+
+<tt-line-chart id="basic-chart">
+  <tt-dataset label="2024">
+    <tt-data-point label="Jan 1" value={45}></tt-data-point>
+    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+    <tt-data-point label="Jan 3" value={52}></tt-data-point>
+  </tt-dataset>
+</tt-line-chart>`,
+            },
+            {
+                title: 'Multiple datasets',
+                description: 'Use multiple datasets to compare trends of the same measure for different groups. Limit datasets to a maximum of 4, as more datasets make the chart difficult to read and compare. The component automatically uses symbols to help identify each dataset without relying on color.',
+                code: `<tt-line-chart id="multiple-datasets" height="20rem">
+  <tt-dataset label="2025">
+    <tt-data-point label="Jan 1" value={45}></tt-data-point>
+    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+  </tt-dataset>
+  <tt-dataset label="2024">
+    <tt-data-point label="Jan 1" value={42}></tt-data-point>
+    <tt-data-point label="Jan 2" value={44}></tt-data-point>
+  </tt-dataset>
+</tt-line-chart>`,
+            },
+            {
+                title: 'With highlighted regions',
+                description: 'Use highlighted regions to draw attention to and label significant intervals. Only use when something significant occurs that may have affected the data. Use sparingly and highlight only the most important intervals to avoid clutter. Avoid overlapping regions as this can make it difficult to see where each interval starts and ends. Do not use when displaying multiple datasets if the highlight applies to only one dataset, as users may assume it applies to all.',
+                code: `import '@triptease/tt-highlight';
+
+<tt-line-chart id="highlighted-chart" height="20rem">
+  <tt-dataset label="2025">
+    <tt-data-point label="Jan 1" value={45}></tt-data-point>
+    <tt-data-point label="Jan 2" value={48}></tt-data-point>
+  </tt-dataset>
+  <tt-highlight label="Easter Boost" from="15 Mar" to="5 Apr"></tt-highlight>
+</tt-line-chart>;`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=lineChart.js.map

package/dist/src/manifests/components/entries/lineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/lineChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nconst latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\nconst latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];\n\nexport default {\n  'line-chart': {\n    name: 'Line Chart - Web Component',\n    description: 'Line chart for visualizing trends over continuous data',\n    ssrSafe: true,\n    element: 'tt-line-chart',\n    usageGuidance: {\n      whenToUse: [\n        'To visualize trends along a continuous x-axis',\n        'To compare how multiple datasets for the same measure change relative to each other',\n      ],\n      avoid: [\n        'When the x-axis does not represent a continuous range (use a bar chart instead)',\n        'When there are too few data points to form a meaningful trend (use a bar chart instead)',\n        'When comparing datasets that do not have a meaningful or explainable relationship',\n      ],\n    },\n    installation: {\n      npm: [\n        { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },\n        { name: '@triptease/tt-dataset', includesTypes: true, optional: false },\n        { name: '@triptease/tt-data-point', includesTypes: true, optional: false },\n        { name: '@triptease/tt-highlight', includesTypes: true, optional: true },\n      ],\n      cdn: [\n        {\n          name: 'tt-line-chart',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-line-chart', latestLineChartVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-line-chart', buildMajorVersion(latestLineChartVersion)),\n          latestVersionUrl: buildCDNUrl('tt-line-chart', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-dataset',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),\n          latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-data-point',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),\n          latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n        {\n          name: 'tt-highlight',\n          includesTypes: false,\n          optional: true,\n          pinnedVersionUrl: buildCDNUrl('tt-highlight', latestHighlightVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-highlight', buildMajorVersion(latestHighlightVersion)),\n          latestVersionUrl: buildCDNUrl('tt-highlight', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n        },\n      ],\n    },\n    attributes: {\n      width: {\n        type: 'string',\n        description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',\n      },\n      height: {\n        type: 'string',\n        description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',\n      },\n      'x-axis-title': {\n        type: 'string',\n        description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',\n      },\n      'y-axis-title': {\n        type: 'string',\n        description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',\n      },\n      loading: {\n        type: 'boolean',\n        description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n      },\n      'hide-numbers': {\n        type: 'boolean',\n        description:\n          'Hide y-axis numbers and tooltips. Use when numbers could mislead. Removes ARIA labels, so provide trend description.',\n      },\n    },\n    examples: [\n      {\n        title: 'Basic line chart',\n        code: `import '@triptease/tt-line-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-line-chart id=\"basic-chart\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n    <tt-data-point label=\"Jan 3\" value={52}></tt-data-point>\n  </tt-dataset>\n</tt-line-chart>`,\n      },\n      {\n        title: 'Multiple datasets',\n        description:\n          'Use multiple datasets to compare trends of the same measure for different groups. Limit datasets to a maximum of 4, as more datasets make the chart difficult to read and compare. The component automatically uses symbols to help identify each dataset without relying on color.',\n        code: `<tt-line-chart id=\"multiple-datasets\" height=\"20rem\">\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n  </tt-dataset>\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Jan 1\" value={42}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={44}></tt-data-point>\n  </tt-dataset>\n</tt-line-chart>`,\n      },\n      {\n        title: 'With highlighted regions',\n        description:\n          'Use highlighted regions to draw attention to and label significant intervals. Only use when something significant occurs that may have affected the data. Use sparingly and highlight only the most important intervals to avoid clutter. Avoid overlapping regions as this can make it difficult to see where each interval starts and ends. Do not use when displaying multiple datasets if the highlight applies to only one dataset, as users may assume it applies to all.',\n        code: `import '@triptease/tt-highlight';\n\n<tt-line-chart id=\"highlighted-chart\" height=\"20rem\">\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n    <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n  </tt-dataset>\n  <tt-highlight label=\"Easter Boost\" from=\"15 Mar\" to=\"5 Apr\"></tt-highlight>\n</tt-line-chart>;`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/entries/numberinput.d.ts

@@ -0,0 +1,52 @@
+declare const _default: {
+    numberinput: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        attributes: {
+            type: {
+                values: string[];
+                default: string;
+            };
+            'aria-invalid': {
+                type: string;
+                description: string;
+            };
+            disabled: {
+                type: string;
+                description: string;
+            };
+            placeholder: {
+                type: string;
+                description: string;
+            };
+            min: {
+                type: string;
+                description: string;
+            };
+            max: {
+                type: string;
+                description: string;
+            };
+            step: {
+                type: string;
+                description: string;
+            };
+        };
+        states: string[];
+        examples: ({
+            title: string;
+            code: string;
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
+    };
+};
+export default _default;

package/dist/src/manifests/components/entries/numberinput.js

@@ -0,0 +1,64 @@
+export default {
+    numberinput: {
+        name: 'Number Input',
+        description: 'Number input field with browser-provided increment/decrement controls',
+        element: "input[type='number']",
+        usageGuidance: {
+            whenToUse: [
+                'Collecting numeric data (age, quantity, price)',
+                'Values have clear min/max bounds',
+                'Users benefit from increment/decrement buttons',
+            ],
+            avoid: [
+                'Numbers containing formatting (phone numbers, credit cards - use text input)',
+                'Complex number validation needed',
+            ],
+        },
+        attributes: {
+            type: {
+                values: ['number'],
+                default: 'number',
+            },
+            'aria-invalid': {
+                type: 'boolean',
+                description: 'Marks input as invalid for error styling. Pair with aria-describedby to associate error messages.',
+            },
+            disabled: {
+                type: 'boolean',
+                description: 'Disables the input',
+            },
+            placeholder: {
+                type: 'string',
+                description: 'Placeholder text. Should not replace label - always provide visible label element.',
+            },
+            min: {
+                type: 'number',
+                description: 'Minimum allowed value',
+            },
+            max: {
+                type: 'number',
+                description: 'Maximum allowed value',
+            },
+            step: {
+                type: 'number',
+                description: 'Increment/decrement step size',
+            },
+        },
+        states: ['default', 'hover', 'focus', 'disabled', 'invalid'],
+        examples: [
+            {
+                title: 'Basic usage',
+                code: `<label for="hotel-count">Number of Hotels</label>
+<input id="hotel-count" type="number" />`,
+            },
+            {
+                title: 'Error state',
+                description: 'Use aria-invalid with aria-describedby to associate error messages for screen readers',
+                code: `<label for="quantity">Quantity</label>
+<input id="quantity" type="number" min="1" max="10" aria-invalid aria-describedby="quantity-error" />
+<span id="quantity-error" class="text-error">Please enter a number between 1 and 10</span>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=numberinput.js.map

package/dist/src/manifests/components/entries/numberinput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberinput.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/numberinput.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,WAAW,EAAE;QACX,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,uEAAuE;QACpF,OAAO,EAAE,sBAAsB;QAC/B,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,gDAAgD;gBAChD,kCAAkC;gBAClC,gDAAgD;aACjD;YACD,KAAK,EAAE;gBACL,8EAA8E;gBAC9E,kCAAkC;aACnC;SACF;QACD,UAAU,EAAE;YACV,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC,QAAQ,CAAC;gBAClB,OAAO,EAAE,QAAQ;aAClB;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,mGAAmG;aACtG;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,oBAAoB;aAClC;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,oFAAoF;aAClG;YACD,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,uBAAuB;aACrC;YACD,GAAG,EAAE;gBACH,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,uBAAuB;aACrC;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,+BAA+B;aAC7C;SACF;QACD,MAAM,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,CAAC;QAC5D,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;yCAC2B;aAClC;YACD;gBACE,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,uFAAuF;gBACpG,IAAI,EAAE;;2FAE6E;aACpF;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  numberinput: {\n    name: 'Number Input',\n    description: 'Number input field with browser-provided increment/decrement controls',\n    element: \"input[type='number']\",\n    usageGuidance: {\n      whenToUse: [\n        'Collecting numeric data (age, quantity, price)',\n        'Values have clear min/max bounds',\n        'Users benefit from increment/decrement buttons',\n      ],\n      avoid: [\n        'Numbers containing formatting (phone numbers, credit cards - use text input)',\n        'Complex number validation needed',\n      ],\n    },\n    attributes: {\n      type: {\n        values: ['number'],\n        default: 'number',\n      },\n      'aria-invalid': {\n        type: 'boolean',\n        description:\n          'Marks input as invalid for error styling. Pair with aria-describedby to associate error messages.',\n      },\n      disabled: {\n        type: 'boolean',\n        description: 'Disables the input',\n      },\n      placeholder: {\n        type: 'string',\n        description: 'Placeholder text. Should not replace label - always provide visible label element.',\n      },\n      min: {\n        type: 'number',\n        description: 'Minimum allowed value',\n      },\n      max: {\n        type: 'number',\n        description: 'Maximum allowed value',\n      },\n      step: {\n        type: 'number',\n        description: 'Increment/decrement step size',\n      },\n    },\n    states: ['default', 'hover', 'focus', 'disabled', 'invalid'],\n    examples: [\n      {\n        title: 'Basic usage',\n        code: `<label for=\"hotel-count\">Number of Hotels</label>\n<input id=\"hotel-count\" type=\"number\" />`,\n      },\n      {\n        title: 'Error state',\n        description: 'Use aria-invalid with aria-describedby to associate error messages for screen readers',\n        code: `<label for=\"quantity\">Quantity</label>\n<input id=\"quantity\" type=\"number\" min=\"1\" max=\"10\" aria-invalid aria-describedby=\"quantity-error\" />\n<span id=\"quantity-error\" class=\"text-error\">Please enter a number between 1 and 10</span>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/entries/radio.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    radio: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        attributes: {
+            name: {
+                type: string;
+                description: string;
+            };
+            checked: {
+                type: string;
+                description: string;
+            };
+            disabled: {
+                type: string;
+                description: string;
+            };
+        };
+        examples: {
+            title: string;
+            description: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

package/dist/src/manifests/components/entries/radio.js

@@ -0,0 +1,50 @@
+export default {
+    radio: {
+        name: 'Radio',
+        description: 'Radio button for selecting exactly one option from mutually exclusive choices',
+        element: "input[type='radio']",
+        usageGuidance: {
+            whenToUse: [
+                'Only one option can be selected from a small set',
+                'All options need to be visible at once',
+                'Comparing options side-by-side is important',
+                'Default selection is recommended',
+            ],
+            avoid: [
+                'Multiple selections allowed (use checkboxes)',
+                'Long lists of options (consider select dropdown or combobox)',
+                'Immediate action expected (use toggle or button)',
+            ],
+        },
+        attributes: {
+            name: {
+                type: 'string',
+                description: 'Groups radio buttons together. All radio buttons in a group must have the same name.',
+            },
+            checked: {
+                type: 'boolean',
+                description: 'Marks radio button as selected by default. Only one radio in a group should be checked.',
+            },
+            disabled: {
+                type: 'boolean',
+                description: 'Disables the radio button. Can be applied to individual inputs or to parent fieldset to disable all radios.',
+            },
+        },
+        examples: [
+            {
+                title: 'Radio group',
+                description: 'Use fieldset and legend for grouped radio buttons. All radios must share the same name attribute.',
+                code: `<fieldset>
+  <legend>Choose a color:</legend>
+  <input type="radio" id="radio-red" name="color" value="red" />
+  <label for="radio-red">Red</label>
+  <input type="radio" id="radio-green" name="color" value="green" />
+  <label for="radio-green">Green</label>
+  <input type="radio" id="radio-blue" name="color" value="blue" />
+  <label for="radio-blue">Blue</label>
+</fieldset>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=radio.js.map

package/dist/src/manifests/components/entries/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/radio.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,+EAA+E;QAC5F,OAAO,EAAE,qBAAqB;QAC9B,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,kDAAkD;gBAClD,wCAAwC;gBACxC,6CAA6C;gBAC7C,kCAAkC;aACnC;YACD,KAAK,EAAE;gBACL,8CAA8C;gBAC9C,8DAA8D;gBAC9D,kDAAkD;aACnD;SACF;QACD,UAAU,EAAE;YACV,IAAI,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,sFAAsF;aACpG;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,yFAAyF;aACvG;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,6GAA6G;aAChH;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,WAAW,EACT,mGAAmG;gBACrG,IAAI,EAAE;;;;;;;;YAQF;aACL;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  radio: {\n    name: 'Radio',\n    description: 'Radio button for selecting exactly one option from mutually exclusive choices',\n    element: \"input[type='radio']\",\n    usageGuidance: {\n      whenToUse: [\n        'Only one option can be selected from a small set',\n        'All options need to be visible at once',\n        'Comparing options side-by-side is important',\n        'Default selection is recommended',\n      ],\n      avoid: [\n        'Multiple selections allowed (use checkboxes)',\n        'Long lists of options (consider select dropdown or combobox)',\n        'Immediate action expected (use toggle or button)',\n      ],\n    },\n    attributes: {\n      name: {\n        type: 'string',\n        description: 'Groups radio buttons together. All radio buttons in a group must have the same name.',\n      },\n      checked: {\n        type: 'boolean',\n        description: 'Marks radio button as selected by default. Only one radio in a group should be checked.',\n      },\n      disabled: {\n        type: 'boolean',\n        description:\n          'Disables the radio button. Can be applied to individual inputs or to parent fieldset to disable all radios.',\n      },\n    },\n    examples: [\n      {\n        title: 'Radio group',\n        description:\n          'Use fieldset and legend for grouped radio buttons. All radios must share the same name attribute.',\n        code: `<fieldset>\n  <legend>Choose a color:</legend>\n  <input type=\"radio\" id=\"radio-red\" name=\"color\" value=\"red\" />\n  <label for=\"radio-red\">Red</label>\n  <input type=\"radio\" id=\"radio-green\" name=\"color\" value=\"green\" />\n  <label for=\"radio-green\">Green</label>\n  <input type=\"radio\" id=\"radio-blue\" name=\"color\" value=\"blue\" />\n  <label for=\"radio-blue\">Blue</label>\n</fieldset>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/entries/select.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    select: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        examples: {
+            title: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

package/dist/src/manifests/components/entries/select.js

@@ -0,0 +1,23 @@
+export default {
+    select: {
+        name: 'Select Input',
+        description: 'Dropdown list for selecting a single option',
+        element: 'select',
+        usageGuidance: {
+            whenToUse: ['Selecting from a list of predefined options', 'Limited screen space'],
+            avoid: ['Multiple selections (use the Combobox webcomponent)'],
+        },
+        examples: [
+            {
+                title: 'Basic select',
+                code: `<label for="reports">Select report frequency</label>
+<select name="reports">
+  <option value="daily">Daily Report</option>
+  <option value="weekly">Weekly Report</option>
+  <option value="monthly">Monthly Report</option>
+</select>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=select.js.map

package/dist/src/manifests/components/entries/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/select.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,MAAM,EAAE;QACN,IAAI,EAAE,cAAc;QACpB,WAAW,EAAE,6CAA6C;QAC1D,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE;YACb,SAAS,EAAE,CAAC,6CAA6C,EAAE,sBAAsB,CAAC;YAClF,KAAK,EAAE,CAAC,qDAAqD,CAAC;SAC/D;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,cAAc;gBACrB,IAAI,EAAE;;;;;UAKJ;aACH;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  select: {\n    name: 'Select Input',\n    description: 'Dropdown list for selecting a single option',\n    element: 'select',\n    usageGuidance: {\n      whenToUse: ['Selecting from a list of predefined options', 'Limited screen space'],\n      avoid: ['Multiple selections (use the Combobox webcomponent)'],\n    },\n    examples: [\n      {\n        title: 'Basic select',\n        code: `<label for=\"reports\">Select report frequency</label>\n<select name=\"reports\">\n  <option value=\"daily\">Daily Report</option>\n  <option value=\"weekly\">Weekly Report</option>\n  <option value=\"monthly\">Monthly Report</option>\n</select>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/entries/table.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    table: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        examples: {
+            title: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

package/dist/src/manifests/components/entries/table.js

@@ -0,0 +1,43 @@
+export default {
+    table: {
+        name: 'Table',
+        description: 'Organize and display data in rows and columns',
+        element: 'table',
+        usageGuidance: {
+            whenToUse: [
+                'Display structured data with multiple attributes',
+                'Enable comparison across data rows',
+                'Present numerical or tabular information',
+                'Show data relationships clearly',
+            ],
+            avoid: [
+                'For layout purposes (use CSS Grid or Flexbox)',
+                'When data is better visualized as a chart',
+                'For small amounts of data that could be in a list',
+                "On small screens where columns won't fit (consider alternative layouts)",
+            ],
+        },
+        examples: [
+            {
+                title: 'Basic table',
+                code: `<table>
+  <thead>
+    <tr>
+      <th>Property Name</th>
+      <th>Impressions</th>
+      <th>Revenue</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Downtown Suites</td>
+      <td>12,450</td>
+      <td>$5,760.00</td>
+    </tr>
+  </tbody>
+</table>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=table.js.map

package/dist/src/manifests/components/entries/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/table.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,WAAW,EAAE,+CAA+C;QAC5D,OAAO,EAAE,OAAO;QAChB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,kDAAkD;gBAClD,oCAAoC;gBACpC,0CAA0C;gBAC1C,iCAAiC;aAClC;YACD,KAAK,EAAE;gBACL,+CAA+C;gBAC/C,2CAA2C;gBAC3C,mDAAmD;gBACnD,yEAAyE;aAC1E;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;;;;;;;;;;;;;;;SAeL;aACF;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  table: {\n    name: 'Table',\n    description: 'Organize and display data in rows and columns',\n    element: 'table',\n    usageGuidance: {\n      whenToUse: [\n        'Display structured data with multiple attributes',\n        'Enable comparison across data rows',\n        'Present numerical or tabular information',\n        'Show data relationships clearly',\n      ],\n      avoid: [\n        'For layout purposes (use CSS Grid or Flexbox)',\n        'When data is better visualized as a chart',\n        'For small amounts of data that could be in a list',\n        \"On small screens where columns won't fit (consider alternative layouts)\",\n      ],\n    },\n    examples: [\n      {\n        title: 'Basic table',\n        code: `<table>\n  <thead>\n    <tr>\n      <th>Property Name</th>\n      <th>Impressions</th>\n      <th>Revenue</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Downtown Suites</td>\n      <td>12,450</td>\n      <td>$5,760.00</td>\n    </tr>\n  </tbody>\n</table>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

package/dist/src/manifests/components/entries/textarea.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    textarea: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        attributes: {
+            'aria-invalid': {
+                type: string;
+                description: string;
+            };
+            disabled: {
+                type: string;
+                description: string;
+            };
+            placeholder: {
+                type: string;
+                description: string;
+            };
+            rows: {
+                type: string;
+                description: string;
+            };
+        };
+        states: string[];
+        examples: ({
+            title: string;
+            code: string;
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
+    };
+};
+export default _default;