@triptease/design-system-mcp 1.0.19 → 1.0.20

package/src/manifests/components/entries/dateRangePicker.ts

@@ -1,119 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-import { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';
-import packageJson from '@/../package.json' with { type: 'json' };
-
-const version = packageJson.dependencies['@triptease/tt-date-range-picker'];
-
-export default {
-  'date-range-picker': {
-    name: 'Date Range Picker',
-    description:
-      'Date range picker for selecting start and end dates, available as both React component and Web Component',
-    ssrSafe: true,
-    element: 'DateRangePicker (React) / tt-date-range-picker (Web Component)',
-    usageGuidance: {
-      whenToUse: [
-        'Users need to select a date range (bookings, reports, filters)',
-        'Start and end dates need to be validated together',
-        'Range constraints are important (min/max days in range)',
-        'Visual calendar helps users understand date spans',
-      ],
-      avoid: [
-        'Only a single date is needed (use date picker)',
-        'Dates are independent of each other (use two separate date pickers)',
-      ],
-    },
-    installationOptions: {
-      npm: [{ name: '@triptease/react/date-range-picker', includesTypes: true, optional: false }],
-      cdn: [
-        {
-          name: '@triptease/tt-date-range-picker',
-          includesTypes: false,
-          optional: false,
-          moduleFormat: 'esm',
-          latestVersionUrl: buildCDNUrl('tt-date-range-picker', 'latest'),
-          pinnedMajorVersionUrl: buildCDNUrl('tt-date-range-picker', buildMajorVersion(version)),
-          pinnedVersionUrl: buildCDNUrl('tt-date-range-picker', version),
-          guidance:
-            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
-        },
-      ],
-    },
-    examples: [
-      {
-        title: 'React - Basic',
-        description:
-          'Uncontrolled date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end props for default values. Use minDate and maxDate props to restrict dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.',
-        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';
-
-<label htmlFor="daterange">Select date range</label>
-<DateRangePicker id="daterange" />`,
-      },
-      {
-        title: 'React - Controlled',
-        description:
-          'Use controlled component with React state for dynamic behavior. Access picker.start and picker.end from onChange event.',
-        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';
-
-const [startDate, setStartDate] = useState('');
-const [endDate, setEndDate] = useState('');
-
-const handleChange = (e) => {
-  const picker = e.target;
-  setStartDate(picker.start || '');
-  setEndDate(picker.end || '');
-};
-
-<label htmlFor="daterange">Booking dates</label>
-<DateRangePicker id="daterange" start={startDate} end={endDate} onChange={handleChange} />`,
-      },
-      {
-        title: 'React - With presets',
-        description:
-          'Use PresetButton component for quick date range selection. Pass Preset enum values for common ranges. PresetButton must be child of DateRangePicker with slot="preset".',
-        code: `import { DateRangePicker, PresetButton, Preset } from '@triptease/react/date-range-picker';
-
-<label htmlFor="daterange">Travel dates</label>
-<DateRangePicker id="daterange">
-  <PresetButton slot="preset" preset={Preset.ThisWeek}>This Week</PresetButton>
-  <PresetButton slot="preset" preset={Preset.ThisMonth}>This Month</PresetButton>
-  <PresetButton slot="preset" preset={Preset.Next1Month}>Next Month</PresetButton>
-</DateRangePicker>`,
-      },
-      {
-        title: 'Web Component - Basic',
-        description:
-          'Web component date range picker. Dates are in ISO format (YYYY-MM-DD). Use start and end attributes for default values. Use mindate and maxdate attributes to restrict dates. Use disabled attribute to disable. Use open-left attribute for pickers near right edge.',
-        code: `import '@triptease/tt-date-range-picker';
-
-<label for="daterange">Select date range</label>
-<tt-date-range-picker id="daterange"></tt-date-range-picker>`,
-      },
-      {
-        title: 'Web Component - In form',
-        description: `Use with HTML forms via name attribute. Form value is JSON string: {"startDate": "2025-01-01", "endDate": "2025-01-10"}. Parse JSON to access dates.`,
-        code: `import '@triptease/tt-date-range-picker';
-
-<form onsubmit="handleSubmit(event)">
-  <label for="booking-dates">Booking dates</label>
-  <tt-date-range-picker id="booking-dates" name="booking-dates"></tt-date-range-picker>
-  <button type="submit">Submit</button>
-</form>`,
-      },
-      {
-        title: 'Web Component - With presets',
-        description: `Use tt-preset-button for quick date range selection. Place inside tt-date-range-picker with slot="preset". Set preset attribute to range type: "this-week", "next-week", "this-month", "next-month", etc.`,
-        code: `import '@triptease/tt-date-range-picker';
-import '@triptease/tt-preset-button';
-
-<label for="daterange">Travel dates</label>
-<tt-date-range-picker id="daterange">
-  <tt-preset-button slot="preset" preset="this-week">This Week</tt-preset-button>
-  <tt-preset-button slot="preset" preset="next-week">Next Week</tt-preset-button>
-  <tt-preset-button slot="preset" preset="this-month">This Month</tt-preset-button>
-  <tt-preset-button slot="preset" preset="next-month">Next Month</tt-preset-button>
-</tt-date-range-picker>`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;

package/src/manifests/components/entries/dialog.ts

@@ -1,78 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-import packageJson from '@/../package.json' with { type: 'json' };
-import { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';
-
-const version = packageJson.dependencies['@triptease/tt-dialog'];
-
-export default {
-  dialog: {
-    name: 'Dialog - Web Component',
-    description: 'Dialog component that displays content in a layer above the page',
-    ssrSafe: true,
-    element: 'tt-dialog',
-    usageGuidance: {
-      whenToUse: [
-        'User interaction is required to proceed',
-        "The task is short, self-contained or doesn't fit naturally into a page",
-        'The underlying page content should remain visible',
-        "Intentionally disrupting the user's flow is beneficial (e.g. confirmations, critical notifications)",
-      ],
-      avoid: [
-        'The content is long, complex, or scrollable (e.g. multi-step forms, detailed instructions)',
-        'The content should be shareable or linkable (prefer a dedicated page)',
-        'The information is not time-sensitive or critical (prefer toasts or inline disclosures)',
-        'The user did not initiate the interaction (unsolicited pop-ups can be frustrating)',
-      ],
-    },
-    installationOptions: {
-      npm: [{ name: '@triptease/tt-dialog', includesTypes: true, optional: false }],
-      cdn: [
-        {
-          name: 'tt-dialog',
-          includesTypes: false,
-          optional: false,
-          moduleFormat: 'esm',
-          pinnedVersionUrl: buildCDNUrl('tt-dialog', version),
-          pinnedMajorVersionUrl: buildCDNUrl('tt-dialog', buildMajorVersion(version)),
-          latestVersionUrl: buildCDNUrl('tt-dialog', 'latest'),
-          guidance:
-            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
-        },
-      ],
-    },
-    examples: [
-      {
-        title: 'Basic usage',
-        code: `<button data-theme="primary" onclick="document.querySelector('#my-dialog').show()">
-  Open Dialog
-</button>
-<tt-dialog id="my-dialog" aria-label="Example dialog">
-  <div class="container">
-    <h2>Dialog Title</h2>
-    <p>This is a basic dialog with some content.</p>
-    <button data-theme="primary" onclick="document.querySelector('#my-dialog').hide()">
-      Close
-    </button>
-  </div>
-</tt-dialog>`,
-      },
-      {
-        title: 'With CSS custom properties',
-        description:
-          'Use CSS custom properties to customize dialog positioning:\n\n- `--dialog-left-distance`: Control the horizontal position of the dialog.',
-        code: `<button data-theme="primary" onclick="document.querySelector('#positioned-dialog').show()">
-  Open Dialog
-</button>
-<tt-dialog id="positioned-dialog" aria-label="Positioned dialog" style="--dialog-left-distance: 100px;">
-  <div class="container">
-    <h2>Custom Positioned Dialog</h2>
-    <p>This dialog has custom positioning using CSS custom properties.</p>
-    <button data-theme="primary" onclick="document.querySelector('#positioned-dialog').hide()">
-      Close
-    </button>
-  </div>
-</tt-dialog>`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;

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

@@ -1,177 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-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'];
-const latestMilestoneVersion = packageJson.dependencies['@triptease/tt-milestone'];
-
-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',
-      ],
-    },
-    installationOptions: {
-      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 },
-        { name: '@triptease/tt-milestone', 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,
-          moduleFormat: 'esm',
-          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.',
-        },
-        {
-          name: 'tt-milestone',
-          includesTypes: false,
-          optional: true,
-          pinnedVersionUrl: buildCDNUrl('tt-milestone', latestMilestoneVersion),
-          pinnedMajorVersionUrl: buildCDNUrl('tt-milestone', buildMajorVersion(latestMilestoneVersion)),
-          latestVersionUrl: buildCDNUrl('tt-milestone', '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>;`,
-      },
-      {
-        title: 'With milestones',
-        description:
-          'Use milestones to draw attention to and label significant points in time on a chart. Only use when something significant occurred that may have affected the data, or to mark an important point in time (e.g. today, start, finish). Use sparingly and highlight only the most important events to avoid clutter. Avoid positioning milestones too close together as labels may overlap and become difficult to read. Do not use when displaying multiple datasets if the milestone applies to only one dataset, as users may assume it applies to all.',
-        code: `import '@triptease/tt-milestone';
-
-<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-milestone label="Todayt" value="Jan 2"></tt-milestone>
-</tt-line-chart>;`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;

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

@@ -1,66 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-
-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>`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;

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

@@ -1,53 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-
-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>`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;

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

@@ -1,24 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-
-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>`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;

package/src/manifests/components/entries/statistic.ts

@@ -1,72 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-
-export default {
-  statistic: {
-    name: 'Statistic',
-    description: 'A consistent, structured layout for displaying a statistic or a few statistics.',
-    element: 'div',
-    usageGuidance: {
-      whenToUse: [
-        'Highlight a single key metric with a label (e.g. "All Sessions: 3,000").',
-        'Surface at-a-glance KPIs on dashboards or summary cards.',
-        'Show a value alongside a status indicator (e.g. "Good", "+3 vs last month").',
-        'Provide brief contextual notes about how a value was calculated.',
-      ],
-      avoid: [
-        'When comparing multiple attributes across items, so use a Table instead.',
-        'When showing trends over time, use a chart or graph.',
-        'When the value requires significant explanation, use a more detailed content component.',
-      ],
-    },
-    examples: [
-      {
-        title: 'Basic statistic',
-        code: `
-        <div class="card">
-          <div class="statistic">
-            <p class="statistic--label">Booked Room Nights</p>
-            <p class="statistic--value">30</p>
-          </div>
-        </div>`,
-      },
-      {
-        title: 'With Indicator',
-        description:
-          'Use to highlight the status of a statistic or a change in its value. Use a badge to communicate overall status, such as “Good”, “Warning”, or “OK”. Use text to indicate change compared to a previous period, such as “+3 vs last month”. When showing change, apply the appropriate CSS color tokens to signal whether the value is positive or negative. Keep the indicator concise and directly related to the primary statistic.',
-        code: `
-         <div>
-           <div class="card">
-            <div class="statistic">
-              <p class="statistic--label">Booked Room Nights</p>
-              <p class="statistic--value">30</p>
-              <p class="badge statistic--indicator" data-theme="success">
-                Good
-              </p>
-            </div>
-            <div class="statistic">
-              <p class="statistic--label">Sessions with Search</p>
-              <p class="statistic--value">5,937</p>
-              <p class="statistic--indicator" style="color: var(--color-success-500)">
-                +30 vs last month
-              </p>
-            </div>
-          </div>   
-        </div>
-        `,
-      },
-      {
-        title: 'With Context',
-        description:
-          'Use to provide brief explanatory information about the statistic. Example scenarios: To clarify what the statistic represents, how it was calculated or how it relates to other information on the page. Keep context concise and supplementary; it should clarify the value, not compete with it. Do not recolor the value as this can draw undue attention.',
-        code: `
-        <div class="card">
-          <div class="statistic">
-            <p class="statistic--label">Booked Room Nights</p>
-            <p class="statistic--value">30</p>
-            <p class="statistic--context">Includes canceled stays</p>
-          </div>
-        </div>`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;

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

@@ -1,44 +0,0 @@
-import { ComponentManifest } from '@/manifests/components/types.js';
-
-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>`,
-      },
-    ],
-  },
-} satisfies ComponentManifest;