@triptease/design-system-mcp 0.0.3

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,184 @@
+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-combobox'];
+
+export default {
+  combobox: {
+    name: 'Combobox',
+    description:
+      'Searchable dropdown that combines a text input with a list, available as both React component and Web Component',
+    ssrSafe: true,
+    element: 'Combobox (React) / tt-combobox (Web Component)',
+    usageGuidance: {
+      whenToUse: [
+        'Lists with many options where typing to filter is helpful',
+        'Users need to search/filter through options quickly',
+        'Space is limited for displaying all options at once',
+        'Single or multiple selection needed',
+      ],
+      avoid: [
+        'Small lists where all options should be visible (consider radio buttons)',
+        'Users would benefit from seeing all options simultaneously for comparison',
+      ],
+    },
+    installation: {
+      npm: [{ name: '@triptease/tt-combobox', includesTypes: true, optional: false }],
+      cdn: [
+        {
+          name: '@triptease/tt-combobox',
+          includesTypes: false,
+          optional: false,
+          latestVersionUrl: buildCDNUrl('tt-combobox', 'latest'),
+          pinnedMajorVersionUrl: buildCDNUrl('tt-combobox', buildMajorVersion(version)),
+          pinnedVersionUrl: buildCDNUrl('tt-combobox', version),
+          guidance:
+            'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',
+        },
+      ],
+    },
+    attributes: {
+      multiselect: {
+        type: 'boolean',
+        description:
+          'Enable multi-select mode where multiple options can be selected. Value is array of strings, serialized as JSON in forms.',
+      },
+      'display-select-all': {
+        type: 'boolean',
+        description: 'Show a "Select All" option in multi-select mode. Only valid when multiselect is true.',
+      },
+      placeholder: {
+        type: 'string',
+        description: 'Placeholder text shown when no option is selected.',
+      },
+      disabled: {
+        type: 'boolean',
+        description: 'Disable the combobox. Use disabled attribute on option elements to disable specific options.',
+      },
+      invalid: {
+        type: 'boolean',
+        description: 'Mark the combobox as invalid for validation. Use with error slot to display error message.',
+      },
+      'open-upward': {
+        type: 'boolean',
+        description: 'Make the dropdown open upward instead of downward. Use when combobox is near bottom of viewport.',
+      },
+    },
+    examples: [
+      {
+        title: 'React - Single select',
+        code: `import { Combobox } from '@triptease/react/combobox';
+
+<label htmlFor="country">Country</label>
+<Combobox id="country">
+  <option value="us" slot="option">United States</option>
+  <option value="uk" slot="option">United Kingdom</option>
+  <option value="ca" slot="option">Canada</option>
+</Combobox>`,
+      },
+      {
+        title: 'React - Multi select',
+        description:
+          'Use multiselect and displaySelectAll props for multi-select with "Select All" option. Set value prop with array for default selections.',
+        code: `import { Combobox } from '@triptease/react/combobox';
+
+<label htmlFor="frameworks">Frameworks</label>
+<Combobox id="frameworks" multiselect displaySelectAll>
+  <option value="react" slot="option">React</option>
+  <option value="vue" slot="option">Vue.js</option>
+  <option value="angular" slot="option">Angular</option>
+</Combobox>`,
+      },
+      {
+        title: 'Web Component - Single select',
+        description:
+          'Basic single-select allows typing to filter options. Set value with .value property. Use disabled attribute on options to prevent selection while keeping them visible. Use placeholder attribute for guidance text.',
+        code: `import '@triptease/tt-combobox';
+
+<label for="country">Country</label>
+<tt-combobox id="country">
+  <option value="us" slot="option">United States</option>
+  <option value="uk" slot="option">United Kingdom</option>
+  <option value="ca" slot="option">Canada</option>
+</tt-combobox>`,
+      },
+      {
+        title: 'Web Component - With icon slot',
+        description: 'Use icon slot to add leading icon for visual context.',
+        code: `import '@triptease/tt-combobox';
+
+<label for="search-country">Search country</label>
+<tt-combobox id="search-country" placeholder="Type to search">
+  <span slot="icon">🔍</span>
+  <option value="us" slot="option">United States</option>
+  <option value="uk" slot="option">United Kingdom</option>
+  <option value="ca" slot="option">Canada</option>
+</tt-combobox>`,
+      },
+      {
+        title: 'Web Component - With error slot',
+        description: 'Use invalid attribute with error slot to display validation errors.',
+        code: `import '@triptease/tt-combobox';
+
+<label for="country">Country</label>
+<tt-combobox id="country" invalid>
+  <option value="us" slot="option">United States</option>
+  <option value="uk" slot="option">United Kingdom</option>
+  <option value="ca" slot="option">Canada</option>
+  <span slot="error">Please select a valid country</span>
+</tt-combobox>`,
+      },
+      {
+        title: 'Web Component - In form',
+        description: `Use with HTML forms via name attribute. Form value is JSON string (e.g., ["united-states"]). Add required for validation. Listen to change event for real-time updates.`,
+        code: `import '@triptease/tt-combobox';
+
+<form onsubmit="handleSubmit(event)">
+  <label for="country">Country</label>
+  <tt-combobox id="country" name="country" required>
+    <option value="us" slot="option">United States</option>
+    <option value="uk" slot="option">United Kingdom</option>
+    <option value="ca" slot="option">Canada</option>
+  </tt-combobox>
+  <button type="submit">Submit</button>
+</form>`,
+      },
+      {
+        title: 'Web Component - Multi select with select all',
+        description:
+          'Use multiselect and display-select-all attributes for multi-select. Set value with array. Use hidden attribute on options to hide from list.',
+        code: `import '@triptease/tt-combobox';
+
+<label for="frameworks">Frameworks</label>
+<tt-combobox id="frameworks" multiselect display-select-all>
+  <option value="react" slot="option">React</option>
+  <option value="vue" slot="option">Vue.js</option>
+  <option value="angular" slot="option">Angular</option>
+  <option value="svelte" slot="option">Svelte</option>
+</tt-combobox>`,
+      },
+      {
+        title: 'Web Component - CSS customization',
+        description: `Use CSS custom properties to customize appearance: --tt-combobox-min-width / --tt-combobox-max-width, --tt-combobox-background-color, --tt-combobox-border-color / --tt-combobox-border-width, --tt-combobox-placeholder-color, --tt-combobox-hover-background-color, --tt-combobox-option-background-color-hover, --tt-combobox-option-color-hover.`,
+        code: `import '@triptease/tt-combobox';
+
+<label for="country">Country</label>
+<tt-combobox
+  id="country"
+  placeholder="Select..."
+  style="
+    --tt-combobox-min-width: 150px;
+    --tt-combobox-max-width: 150px;
+    --tt-combobox-background-color: var(--color-surface-600);
+    --tt-combobox-border-color: var(--color-primary-500);
+    --tt-combobox-border-width: 2px;
+  ">
+  <option value="us" slot="option">United States</option>
+  <option value="uk" slot="option">United Kingdom</option>
+  <option value="ca" slot="option">Canada</option>
+</tt-combobox>`,
+      },
+    ],
+  },
+} satisfies ComponentManifest;

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

@@ -0,0 +1,73 @@
+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-picker'];
+
+export default {
+  'date-picker': {
+    name: 'Date Picker',
+    description: 'Date picker for selecting a single date, available as both React component and Web Component',
+    ssrSafe: true,
+    element: 'DatePicker (React) / tt-date-picker (Web Component)',
+    usageGuidance: {
+      whenToUse: [
+        'Users need to select a specific single date',
+        'Date format needs to be consistent',
+        'Calendar visualization helps users pick dates',
+        'Date constraints are needed (min/max dates)',
+      ],
+      avoid: ['Date ranges are needed (use date range picker)'],
+    },
+    installation: {
+      npm: [{ name: '@triptease/tt-date-picker', includesTypes: true, optional: false }],
+      cdn: [
+        {
+          name: '@triptease/tt-date-picker',
+          includesTypes: false,
+          optional: false,
+          latestVersionUrl: buildCDNUrl('tt-date-picker', 'latest'),
+          pinnedMajorVersionUrl: buildCDNUrl('tt-date-picker', buildMajorVersion(version)),
+          pinnedVersionUrl: buildCDNUrl('tt-date-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 picker. Value is in ISO format (YYYY-MM-DD). Use minDate and maxDate props to restrict selectable dates. Use disabled prop to disable. Use openLeft prop for pickers near right edge.',
+        code: `import { DatePicker } from '@triptease/react/date-picker';
+
+<label htmlFor="date">Select a date</label>
+<DatePicker id="date" />`,
+      },
+      {
+        title: 'React - Controlled',
+        description:
+          'Use controlled component with React state for dynamic behavior. Value prop and onChange handler manage the selection.',
+        code: `import { DatePicker } from '@triptease/react/date-picker';
+
+const [selectedDate, setSelectedDate] = useState('');
+
+<label htmlFor="date">Event date</label>
+<DatePicker
+  id="date"
+  value={selectedDate}
+  onChange={(e) => setSelectedDate(e.target.value)}
+/>`,
+      },
+      {
+        title: 'Web Component - Basic',
+        description:
+          'Web component date picker. Value is in ISO format (YYYY-MM-DD). 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-picker';
+
+<label for="date">Select a date</label>
+<tt-date-picker id="date"></tt-date-picker>`,
+      },
+    ],
+  },
+} satisfies ComponentManifest;

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

@@ -0,0 +1,118 @@
+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)',
+      ],
+    },
+    installation: {
+      npm: [{ name: '@triptease/react/date-range-picker', includesTypes: true, optional: false }],
+      cdn: [
+        {
+          name: '@triptease/tt-date-range-picker',
+          includesTypes: false,
+          optional: false,
+          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;