@triptease/design-system-mcp 0.0.3

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

@@ -0,0 +1,125 @@
+import { buildCDNUrl, buildMajorVersion } from '../../../utils/buildCDNUrls.js';
+import packageJson from '../../../../package.json' with { type: 'json' };
+const latestBarChartVersion = packageJson.dependencies['@triptease/tt-bar-chart'];
+const latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];
+const latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];
+export default {
+    'bar-chart': {
+        name: 'Bar Chart - Web Component',
+        description: 'Bar chart for comparing values across categories',
+        ssrSafe: true,
+        element: 'tt-bar-chart',
+        usageGuidance: {
+            whenToUse: [
+                'To compare size between two or more categories',
+                'To show values that can be ranked in ascending or descending order',
+                'To show short, discrete periods of time, when comparing individual periods matters more than showing a long-term trend',
+                'To compare multiple datasets (series) across the same categories',
+            ],
+            avoid: [
+                'When the number of datapoints makes the chart hard to read',
+                'When showing long, continuous trends over time (use a line or area chart instead)',
+                'When the user can expand the date range to very large periods, making bars inappropriate',
+            ],
+        },
+        installation: {
+            npm: [
+                { name: '@triptease/tt-bar-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-bar-chart',
+                    includesTypes: false,
+                    optional: false,
+                    pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),
+                    pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),
+                    latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),
+                    guidance: 'Prefer pinned major version URL to avoid 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.',
+                },
+            ],
+        },
+        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.',
+            },
+            direction: {
+                type: 'enum',
+                values: ['horizontal', 'vertical'],
+                description: 'Bar orientation. Use vertical for time series data.',
+            },
+            stacked: {
+                type: 'boolean',
+                description: 'Stack datasets vertically. Use when datasets contribute to meaningful total. Limit to 6 datasets max.',
+            },
+            loading: {
+                type: 'boolean',
+                description: 'Show loading state while data fetches. Component handles aria-busy automatically.',
+            },
+        },
+        examples: [
+            {
+                title: 'Basic bar chart',
+                code: `import '@triptease/tt-bar-chart';
+import '@triptease/tt-dataset';
+import '@triptease/tt-data-point';
+
+<tt-bar-chart id="basic-chart">
+  <tt-dataset label="2024">
+    <tt-data-point label="Total Opens" value={2600}></tt-data-point>
+    <tt-data-point label="Total Clicks" value={355}></tt-data-point>
+    <tt-data-point label="Bookings" value={76}></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`,
+            },
+            {
+                title: 'Multiple datasets',
+                description: 'Use multiple datasets to compare the same categories across different groups or time periods. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare.',
+                code: `<tt-bar-chart id="multiple-datasets-chart" height="30rem">
+  <tt-dataset label="2024">
+    <tt-data-point label="Total Bookings" value={7}></tt-data-point>
+    <tt-data-point label="Total Clicks" value={4}></tt-data-point>
+  </tt-dataset>
+  <tt-dataset label="2025">
+    <tt-data-point label="Total Bookings" value={2}></tt-data-point>
+    <tt-data-point label="Total Clicks" value={3}></tt-data-point>
+  </tt-dataset>
+</tt-bar-chart>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=barChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"barChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/barChart.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 latestBarChartVersion = packageJson.dependencies['@triptease/tt-bar-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\n\nexport default {\n  'bar-chart': {\n    name: 'Bar Chart - Web Component',\n    description: 'Bar chart for comparing values across categories',\n    ssrSafe: true,\n    element: 'tt-bar-chart',\n    usageGuidance: {\n      whenToUse: [\n        'To compare size between two or more categories',\n        'To show values that can be ranked in ascending or descending order',\n        'To show short, discrete periods of time, when comparing individual periods matters more than showing a long-term trend',\n        'To compare multiple datasets (series) across the same categories',\n      ],\n      avoid: [\n        'When the number of datapoints makes the chart hard to read',\n        'When showing long, continuous trends over time (use a line or area chart instead)',\n        'When the user can expand the date range to very large periods, making bars inappropriate',\n      ],\n    },\n    installation: {\n      npm: [\n        { name: '@triptease/tt-bar-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-bar-chart',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),\n          latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),\n          guidance:\n            'Prefer pinned major version URL to avoid 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    },\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      direction: {\n        type: 'enum',\n        values: ['horizontal', 'vertical'],\n        description: 'Bar orientation. Use vertical for time series data.',\n      },\n      stacked: {\n        type: 'boolean',\n        description:\n          'Stack datasets vertically. Use when datasets contribute to meaningful total. Limit to 6 datasets max.',\n      },\n      loading: {\n        type: 'boolean',\n        description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n      },\n    },\n    examples: [\n      {\n        title: 'Basic bar chart',\n        code: `import '@triptease/tt-bar-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-bar-chart id=\"basic-chart\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Total Opens\" value={2600}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={355}></tt-data-point>\n    <tt-data-point label=\"Bookings\" value={76}></tt-data-point>\n  </tt-dataset>\n</tt-bar-chart>`,\n      },\n      {\n        title: 'Multiple datasets',\n        description:\n          'Use multiple datasets to compare the same categories across different groups or time periods. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare.',\n        code: `<tt-bar-chart id=\"multiple-datasets-chart\" height=\"30rem\">\n  <tt-dataset label=\"2024\">\n    <tt-data-point label=\"Total Bookings\" value={7}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={4}></tt-data-point>\n  </tt-dataset>\n  <tt-dataset label=\"2025\">\n    <tt-data-point label=\"Total Bookings\" value={2}></tt-data-point>\n    <tt-data-point label=\"Total Clicks\" value={3}></tt-data-point>\n  </tt-dataset>\n</tt-bar-chart>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -0,0 +1,40 @@
+declare const _default: {
+    button: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        dataAttributes: {
+            'data-theme': {
+                type: string;
+                values: string[];
+                default: string;
+                description: string;
+            };
+            'data-loading': {
+                type: string;
+                values: (string | undefined)[];
+                description: string;
+            };
+        };
+        classes: {
+            small: string;
+            large: string;
+        };
+        attributes: {
+            disabled: {
+                type: string;
+                description: string;
+            };
+        };
+        states: string[];
+        examples: {
+            title: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

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

@@ -0,0 +1,59 @@
+export default {
+    button: {
+        name: 'Button',
+        description: 'Interactive button component with multiple themes and states',
+        element: 'button',
+        usageGuidance: {
+            whenToUse: [
+                'Submitting forms',
+                'Triggering actions (save, delete, confirm)',
+                'Opening modals or dialogs',
+                'Navigation to a new page or state',
+            ],
+            avoid: [
+                'For navigation to external pages (use links instead)',
+                'To display non-interactive information (use text or badges)',
+            ],
+        },
+        dataAttributes: {
+            'data-theme': {
+                type: 'enum',
+                values: [
+                    'primary',
+                    'secondary',
+                    'tertiary',
+                    'suggestion',
+                    'inline',
+                    'destructive-primary',
+                    'destructive-secondary',
+                    'destructive-tertiary',
+                ],
+                default: 'primary',
+                description: 'Visual theme of the button. Use primary for main actions, secondary for supporting actions, tertiary for minimal emphasis. Use destructive themes for actions that cannot be undone (delete, remove). All themes work with disabled and data-loading attributes.',
+            },
+            'data-loading': {
+                type: 'boolean',
+                values: ['true', undefined],
+                description: 'Shows loading spinner. Always pair with aria-busy for accessibility.',
+            },
+        },
+        classes: {
+            small: 'Smaller button size for compact interfaces',
+            large: 'Larger button size for emphasis',
+        },
+        attributes: {
+            disabled: {
+                type: 'boolean',
+                description: 'Disables the button. Pair with aria-disabled for accessibility.',
+            },
+        },
+        states: ['default', 'hover', 'focus', 'disabled', 'loading'],
+        examples: [
+            {
+                title: 'Basic usage',
+                code: `<button>Click Me</button>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/button.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,8DAA8D;QAC3E,OAAO,EAAE,QAAQ;QACjB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,kBAAkB;gBAClB,4CAA4C;gBAC5C,2BAA2B;gBAC3B,mCAAmC;aACpC;YACD,KAAK,EAAE;gBACL,sDAAsD;gBACtD,6DAA6D;aAC9D;SACF;QACD,cAAc,EAAE;YACd,YAAY,EAAE;gBACZ,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE;oBACN,SAAS;oBACT,WAAW;oBACX,UAAU;oBACV,YAAY;oBACZ,QAAQ;oBACR,qBAAqB;oBACrB,uBAAuB;oBACvB,sBAAsB;iBACvB;gBACD,OAAO,EAAE,SAAS;gBAClB,WAAW,EACT,kQAAkQ;aACrQ;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC;gBAC3B,WAAW,EAAE,sEAAsE;aACpF;SACF;QACD,OAAO,EAAE;YACP,KAAK,EAAE,4CAA4C;YACnD,KAAK,EAAE,iCAAiC;SACzC;QACD,UAAU,EAAE;YACV,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,iEAAiE;aAC/E;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,2BAA2B;aAClC;SACF;KACF;CAC0B,CAAC","sourcesContent":["import type { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  button: {\n    name: 'Button',\n    description: 'Interactive button component with multiple themes and states',\n    element: 'button',\n    usageGuidance: {\n      whenToUse: [\n        'Submitting forms',\n        'Triggering actions (save, delete, confirm)',\n        'Opening modals or dialogs',\n        'Navigation to a new page or state',\n      ],\n      avoid: [\n        'For navigation to external pages (use links instead)',\n        'To display non-interactive information (use text or badges)',\n      ],\n    },\n    dataAttributes: {\n      'data-theme': {\n        type: 'enum',\n        values: [\n          'primary',\n          'secondary',\n          'tertiary',\n          'suggestion',\n          'inline',\n          'destructive-primary',\n          'destructive-secondary',\n          'destructive-tertiary',\n        ],\n        default: 'primary',\n        description:\n          'Visual theme of the button. Use primary for main actions, secondary for supporting actions, tertiary for minimal emphasis. Use destructive themes for actions that cannot be undone (delete, remove). All themes work with disabled and data-loading attributes.',\n      },\n      'data-loading': {\n        type: 'boolean',\n        values: ['true', undefined],\n        description: 'Shows loading spinner. Always pair with aria-busy for accessibility.',\n      },\n    },\n    classes: {\n      small: 'Smaller button size for compact interfaces',\n      large: 'Larger button size for emphasis',\n    },\n    attributes: {\n      disabled: {\n        type: 'boolean',\n        description: 'Disables the button. Pair with aria-disabled for accessibility.',\n      },\n    },\n    states: ['default', 'hover', 'focus', 'disabled', 'loading'],\n    examples: [\n      {\n        title: 'Basic usage',\n        code: `<button>Click Me</button>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -0,0 +1,20 @@
+declare const _default: {
+    card: {
+        name: string;
+        description: string;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        classes: {
+            card: string;
+            'card-dataview': string;
+        };
+        examples: {
+            title: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

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

@@ -0,0 +1,34 @@
+export default {
+    card: {
+        name: 'Card',
+        description: 'Container component that groups related content and actions in a visually distinct area',
+        element: 'div',
+        usageGuidance: {
+            whenToUse: [
+                'Display related information as a single unit',
+                'Create scannable layouts with multiple content items',
+                'Group content with associated actions',
+                'Highlight content that users can interact with',
+            ],
+            avoid: [
+                'For single pieces of text (use standard layout instead)',
+                "When visual separation isn't needed",
+                'In dense data tables or lists',
+            ],
+        },
+        classes: {
+            card: 'Standard card with padding',
+            'card-dataview': 'Card optimized for displaying metrics/data',
+        },
+        examples: [
+            {
+                title: 'Basic card',
+                code: `<div class="card">
+  <h3>Card Title</h3>
+  <p>Card content goes here...</p>
+</div>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/card.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,WAAW,EAAE,yFAAyF;QACtG,OAAO,EAAE,KAAK;QACd,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,8CAA8C;gBAC9C,sDAAsD;gBACtD,uCAAuC;gBACvC,gDAAgD;aACjD;YACD,KAAK,EAAE;gBACL,yDAAyD;gBACzD,qCAAqC;gBACrC,+BAA+B;aAChC;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,4BAA4B;YAClC,eAAe,EAAE,4CAA4C;SAC9D;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE;;;OAGP;aACA;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  card: {\n    name: 'Card',\n    description: 'Container component that groups related content and actions in a visually distinct area',\n    element: 'div',\n    usageGuidance: {\n      whenToUse: [\n        'Display related information as a single unit',\n        'Create scannable layouts with multiple content items',\n        'Group content with associated actions',\n        'Highlight content that users can interact with',\n      ],\n      avoid: [\n        'For single pieces of text (use standard layout instead)',\n        \"When visual separation isn't needed\",\n        'In dense data tables or lists',\n      ],\n    },\n    classes: {\n      card: 'Standard card with padding',\n      'card-dataview': 'Card optimized for displaying metrics/data',\n    },\n    examples: [\n      {\n        title: 'Basic card',\n        code: `<div class=\"card\">\n  <h3>Card Title</h3>\n  <p>Card content goes here...</p>\n</div>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

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

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

@@ -0,0 +1,64 @@
+export default {
+    checkbox: {
+        name: 'Checkbox',
+        description: 'Checkbox input for multiple selections',
+        element: "input[type='checkbox']",
+        usageGuidance: {
+            whenToUse: [
+                'Multiple independent choices can be selected',
+                'Turning a single option on or off',
+                'Selecting items from a list (e.g., filters, preferences)',
+                'Accepting terms and conditions',
+            ],
+            avoid: [
+                'Only one option can be selected (use radio buttons)',
+                'Immediate action is expected (use toggle switch)',
+                'Very long lists (consider combobox with multi-select or grouping options)',
+            ],
+        },
+        attributes: {
+            disabled: {
+                type: 'boolean',
+                description: 'Disables the checkbox. Can be applied to individual inputs or to parent fieldset to disable all checkboxes.',
+            },
+            'aria-invalid': {
+                type: 'boolean',
+                description: 'Marks checkbox as invalid for error styling. Pair with aria-describedby to associate error messages.',
+            },
+            checked: {
+                type: 'boolean',
+                description: 'Marks checkbox as checked by default',
+            },
+        },
+        examples: [
+            {
+                title: 'Checkbox group',
+                description: 'Use fieldset and legend for grouped checkboxes',
+                code: `<fieldset>
+  <legend>Choose colors:</legend>
+  <input type="checkbox" id="checkbox-red" name="color" value="red" />
+  <label for="checkbox-red">Red</label>
+  <input type="checkbox" id="checkbox-green" name="color" value="green" />
+  <label for="checkbox-green">Green</label>
+  <input type="checkbox" id="checkbox-blue" name="color" value="blue" />
+  <label for="checkbox-blue">Blue</label>
+</fieldset>`,
+            },
+            {
+                title: 'Error state',
+                description: 'Use aria-invalid with aria-describedby to associate error messages. Apply to all checkboxes in the group and provide a single error message.',
+                code: `<fieldset>
+  <legend>Choose colors:</legend>
+  <input type="checkbox" id="checkbox-red" name="color" value="red" aria-invalid aria-describedby="choose-color-error-message" />
+  <label for="checkbox-red">Red</label>
+  <input type="checkbox" id="checkbox-green" name="color" value="green" aria-invalid aria-describedby="choose-color-error-message" />
+  <label for="checkbox-green">Green</label>
+  <input type="checkbox" id="checkbox-blue" name="color" value="blue" aria-invalid aria-describedby="choose-color-error-message" />
+  <label for="checkbox-blue">Blue</label>
+  <p id="choose-color-error-message" class="text-error">Please select at least one color</p>
+</fieldset>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/checkbox.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU;QAChB,WAAW,EAAE,wCAAwC;QACrD,OAAO,EAAE,wBAAwB;QACjC,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,8CAA8C;gBAC9C,mCAAmC;gBACnC,0DAA0D;gBAC1D,gCAAgC;aACjC;YACD,KAAK,EAAE;gBACL,qDAAqD;gBACrD,kDAAkD;gBAClD,2EAA2E;aAC5E;SACF;QACD,UAAU,EAAE;YACV,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,6GAA6G;aAChH;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,sGAAsG;aACzG;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,sCAAsC;aACpD;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,gBAAgB;gBACvB,WAAW,EAAE,gDAAgD;gBAC7D,IAAI,EAAE;;;;;;;;YAQF;aACL;YACD;gBACE,KAAK,EAAE,aAAa;gBACpB,WAAW,EACT,8IAA8I;gBAChJ,IAAI,EAAE;;;;;;;;;YASF;aACL;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n  checkbox: {\n    name: 'Checkbox',\n    description: 'Checkbox input for multiple selections',\n    element: \"input[type='checkbox']\",\n    usageGuidance: {\n      whenToUse: [\n        'Multiple independent choices can be selected',\n        'Turning a single option on or off',\n        'Selecting items from a list (e.g., filters, preferences)',\n        'Accepting terms and conditions',\n      ],\n      avoid: [\n        'Only one option can be selected (use radio buttons)',\n        'Immediate action is expected (use toggle switch)',\n        'Very long lists (consider combobox with multi-select or grouping options)',\n      ],\n    },\n    attributes: {\n      disabled: {\n        type: 'boolean',\n        description:\n          'Disables the checkbox. Can be applied to individual inputs or to parent fieldset to disable all checkboxes.',\n      },\n      'aria-invalid': {\n        type: 'boolean',\n        description:\n          'Marks checkbox as invalid for error styling. Pair with aria-describedby to associate error messages.',\n      },\n      checked: {\n        type: 'boolean',\n        description: 'Marks checkbox as checked by default',\n      },\n    },\n    examples: [\n      {\n        title: 'Checkbox group',\n        description: 'Use fieldset and legend for grouped checkboxes',\n        code: `<fieldset>\n  <legend>Choose colors:</legend>\n  <input type=\"checkbox\" id=\"checkbox-red\" name=\"color\" value=\"red\" />\n  <label for=\"checkbox-red\">Red</label>\n  <input type=\"checkbox\" id=\"checkbox-green\" name=\"color\" value=\"green\" />\n  <label for=\"checkbox-green\">Green</label>\n  <input type=\"checkbox\" id=\"checkbox-blue\" name=\"color\" value=\"blue\" />\n  <label for=\"checkbox-blue\">Blue</label>\n</fieldset>`,\n      },\n      {\n        title: 'Error state',\n        description:\n          'Use aria-invalid with aria-describedby to associate error messages. Apply to all checkboxes in the group and provide a single error message.',\n        code: `<fieldset>\n  <legend>Choose colors:</legend>\n  <input type=\"checkbox\" id=\"checkbox-red\" name=\"color\" value=\"red\" aria-invalid aria-describedby=\"choose-color-error-message\" />\n  <label for=\"checkbox-red\">Red</label>\n  <input type=\"checkbox\" id=\"checkbox-green\" name=\"color\" value=\"green\" aria-invalid aria-describedby=\"choose-color-error-message\" />\n  <label for=\"checkbox-green\">Green</label>\n  <input type=\"checkbox\" id=\"checkbox-blue\" name=\"color\" value=\"blue\" aria-invalid aria-describedby=\"choose-color-error-message\" />\n  <label for=\"checkbox-blue\">Blue</label>\n  <p id=\"choose-color-error-message\" class=\"text-error\">Please select at least one color</p>\n</fieldset>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -0,0 +1,64 @@
+declare const _default: {
+    combobox: {
+        name: string;
+        description: string;
+        ssrSafe: true;
+        element: string;
+        usageGuidance: {
+            whenToUse: string[];
+            avoid: string[];
+        };
+        installation: {
+            npm: {
+                name: string;
+                includesTypes: true;
+                optional: false;
+            }[];
+            cdn: {
+                name: string;
+                includesTypes: false;
+                optional: false;
+                latestVersionUrl: string;
+                pinnedMajorVersionUrl: string;
+                pinnedVersionUrl: string;
+                guidance: string;
+            }[];
+        };
+        attributes: {
+            multiselect: {
+                type: string;
+                description: string;
+            };
+            'display-select-all': {
+                type: string;
+                description: string;
+            };
+            placeholder: {
+                type: string;
+                description: string;
+            };
+            disabled: {
+                type: string;
+                description: string;
+            };
+            invalid: {
+                type: string;
+                description: string;
+            };
+            'open-upward': {
+                type: string;
+                description: string;
+            };
+        };
+        examples: ({
+            title: string;
+            code: string;
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
+    };
+};
+export default _default;