@triptease/design-system-mcp 0.0.3

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

@@ -0,0 +1,176 @@
+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>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/combobox.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;AAEnE,eAAe;IACb,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU;QAChB,WAAW,EACT,iHAAiH;QACnH,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,gDAAgD;QACzD,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,2DAA2D;gBAC3D,qDAAqD;gBACrD,qDAAqD;gBACrD,qCAAqC;aACtC;YACD,KAAK,EAAE;gBACL,0EAA0E;gBAC1E,2EAA2E;aAC5E;SACF;QACD,YAAY,EAAE;YACZ,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC/E,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,wBAAwB;oBAC9B,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,gBAAgB,EAAE,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC;oBACtD,qBAAqB,EAAE,WAAW,CAAC,aAAa,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAC7E,gBAAgB,EAAE,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC;oBACrD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,UAAU,EAAE;YACV,WAAW,EAAE;gBACX,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,0HAA0H;aAC7H;YACD,oBAAoB,EAAE;gBACpB,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,uFAAuF;aACrG;YACD,WAAW,EAAE;gBACX,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,oDAAoD;aAClE;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,8FAA8F;aAC5G;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,4FAA4F;aAC1G;YACD,aAAa,EAAE;gBACb,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,kGAAkG;aAChH;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,IAAI,EAAE;;;;;;;YAOF;aACL;YACD;gBACE,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EACT,yIAAyI;gBAC3I,IAAI,EAAE;;;;;;;YAOF;aACL;YACD;gBACE,KAAK,EAAE,+BAA+B;gBACtC,WAAW,EACT,sNAAsN;gBACxN,IAAI,EAAE;;;;;;;eAOC;aACR;YACD;gBACE,KAAK,EAAE,gCAAgC;gBACvC,WAAW,EAAE,uDAAuD;gBACpE,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,iCAAiC;gBACxC,WAAW,EAAE,qEAAqE;gBAClF,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,yBAAyB;gBAChC,WAAW,EAAE,yKAAyK;gBACtL,IAAI,EAAE;;;;;;;;;;QAUN;aACD;YACD;gBACE,KAAK,EAAE,8CAA8C;gBACrD,WAAW,EACT,8IAA8I;gBAChJ,IAAI,EAAE;;;;;;;;eAQC;aACR;YACD;gBACE,KAAK,EAAE,mCAAmC;gBAC1C,WAAW,EAAE,sVAAsV;gBACnW,IAAI,EAAE;;;;;;;;;;;;;;;;eAgBC;aACR;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-combobox'];\n\nexport default {\n  combobox: {\n    name: 'Combobox',\n    description:\n      'Searchable dropdown that combines a text input with a list, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'Combobox (React) / tt-combobox (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Lists with many options where typing to filter is helpful',\n        'Users need to search/filter through options quickly',\n        'Space is limited for displaying all options at once',\n        'Single or multiple selection needed',\n      ],\n      avoid: [\n        'Small lists where all options should be visible (consider radio buttons)',\n        'Users would benefit from seeing all options simultaneously for comparison',\n      ],\n    },\n    installation: {\n      npm: [{ name: '@triptease/tt-combobox', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-combobox',\n          includesTypes: false,\n          optional: false,\n          latestVersionUrl: buildCDNUrl('tt-combobox', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-combobox', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-combobox', version),\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      multiselect: {\n        type: 'boolean',\n        description:\n          'Enable multi-select mode where multiple options can be selected. Value is array of strings, serialized as JSON in forms.',\n      },\n      'display-select-all': {\n        type: 'boolean',\n        description: 'Show a \"Select All\" option in multi-select mode. Only valid when multiselect is true.',\n      },\n      placeholder: {\n        type: 'string',\n        description: 'Placeholder text shown when no option is selected.',\n      },\n      disabled: {\n        type: 'boolean',\n        description: 'Disable the combobox. Use disabled attribute on option elements to disable specific options.',\n      },\n      invalid: {\n        type: 'boolean',\n        description: 'Mark the combobox as invalid for validation. Use with error slot to display error message.',\n      },\n      'open-upward': {\n        type: 'boolean',\n        description: 'Make the dropdown open upward instead of downward. Use when combobox is near bottom of viewport.',\n      },\n    },\n    examples: [\n      {\n        title: 'React - Single select',\n        code: `import { Combobox } from '@triptease/react/combobox';\n\n<label htmlFor=\"country\">Country</label>\n<Combobox id=\"country\">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</Combobox>`,\n      },\n      {\n        title: 'React - Multi select',\n        description:\n          'Use multiselect and displaySelectAll props for multi-select with \"Select All\" option. Set value prop with array for default selections.',\n        code: `import { Combobox } from '@triptease/react/combobox';\n\n<label htmlFor=\"frameworks\">Frameworks</label>\n<Combobox id=\"frameworks\" multiselect displaySelectAll>\n  <option value=\"react\" slot=\"option\">React</option>\n  <option value=\"vue\" slot=\"option\">Vue.js</option>\n  <option value=\"angular\" slot=\"option\">Angular</option>\n</Combobox>`,\n      },\n      {\n        title: 'Web Component - Single select',\n        description:\n          '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.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox id=\"country\">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - With icon slot',\n        description: 'Use icon slot to add leading icon for visual context.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"search-country\">Search country</label>\n<tt-combobox id=\"search-country\" placeholder=\"Type to search\">\n  <span slot=\"icon\">🔍</span>\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - With error slot',\n        description: 'Use invalid attribute with error slot to display validation errors.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox id=\"country\" invalid>\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n  <span slot=\"error\">Please select a valid country</span>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - In form',\n        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.`,\n        code: `import '@triptease/tt-combobox';\n\n<form onsubmit=\"handleSubmit(event)\">\n  <label for=\"country\">Country</label>\n  <tt-combobox id=\"country\" name=\"country\" required>\n    <option value=\"us\" slot=\"option\">United States</option>\n    <option value=\"uk\" slot=\"option\">United Kingdom</option>\n    <option value=\"ca\" slot=\"option\">Canada</option>\n  </tt-combobox>\n  <button type=\"submit\">Submit</button>\n</form>`,\n      },\n      {\n        title: 'Web Component - Multi select with select all',\n        description:\n          'Use multiselect and display-select-all attributes for multi-select. Set value with array. Use hidden attribute on options to hide from list.',\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"frameworks\">Frameworks</label>\n<tt-combobox id=\"frameworks\" multiselect display-select-all>\n  <option value=\"react\" slot=\"option\">React</option>\n  <option value=\"vue\" slot=\"option\">Vue.js</option>\n  <option value=\"angular\" slot=\"option\">Angular</option>\n  <option value=\"svelte\" slot=\"option\">Svelte</option>\n</tt-combobox>`,\n      },\n      {\n        title: 'Web Component - CSS customization',\n        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.`,\n        code: `import '@triptease/tt-combobox';\n\n<label for=\"country\">Country</label>\n<tt-combobox\n  id=\"country\"\n  placeholder=\"Select...\"\n  style=\"\n    --tt-combobox-min-width: 150px;\n    --tt-combobox-max-width: 150px;\n    --tt-combobox-background-color: var(--color-surface-600);\n    --tt-combobox-border-color: var(--color-primary-500);\n    --tt-combobox-border-width: 2px;\n  \">\n  <option value=\"us\" slot=\"option\">United States</option>\n  <option value=\"uk\" slot=\"option\">United Kingdom</option>\n  <option value=\"ca\" slot=\"option\">Canada</option>\n</tt-combobox>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    'date-picker': {
+        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;
+            }[];
+        };
+        examples: {
+            title: string;
+            description: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

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

@@ -0,0 +1,67 @@
+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>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=datePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datePicker.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/datePicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC;AAEtE,eAAe;IACb,aAAa,EAAE;QACb,IAAI,EAAE,aAAa;QACnB,WAAW,EAAE,8FAA8F;QAC3G,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,qDAAqD;QAC9D,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,6CAA6C;gBAC7C,oCAAoC;gBACpC,+CAA+C;gBAC/C,6CAA6C;aAC9C;YACD,KAAK,EAAE,CAAC,gDAAgD,CAAC;SAC1D;QACD,YAAY,EAAE;YACZ,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,2BAA2B,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAClF,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,2BAA2B;oBACjC,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,gBAAgB,EAAE,WAAW,CAAC,gBAAgB,EAAE,QAAQ,CAAC;oBACzD,qBAAqB,EAAE,WAAW,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAChF,gBAAgB,EAAE,WAAW,CAAC,gBAAgB,EAAE,OAAO,CAAC;oBACxD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,eAAe;gBACtB,WAAW,EACT,yMAAyM;gBAC3M,IAAI,EAAE;;;yBAGW;aAClB;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EACT,uHAAuH;gBACzH,IAAI,EAAE;;;;;;;;;GASX;aACI;YACD;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,WAAW,EACT,+MAA+M;gBACjN,IAAI,EAAE;;;4CAG8B;aACrC;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-date-picker'];\n\nexport default {\n  'date-picker': {\n    name: 'Date Picker',\n    description: 'Date picker for selecting a single date, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'DatePicker (React) / tt-date-picker (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Users need to select a specific single date',\n        'Date format needs to be consistent',\n        'Calendar visualization helps users pick dates',\n        'Date constraints are needed (min/max dates)',\n      ],\n      avoid: ['Date ranges are needed (use date range picker)'],\n    },\n    installation: {\n      npm: [{ name: '@triptease/tt-date-picker', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-date-picker',\n          includesTypes: false,\n          optional: false,\n          latestVersionUrl: buildCDNUrl('tt-date-picker', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-date-picker', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-date-picker', version),\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    examples: [\n      {\n        title: 'React - Basic',\n        description:\n          '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.',\n        code: `import { DatePicker } from '@triptease/react/date-picker';\n\n<label htmlFor=\"date\">Select a date</label>\n<DatePicker id=\"date\" />`,\n      },\n      {\n        title: 'React - Controlled',\n        description:\n          'Use controlled component with React state for dynamic behavior. Value prop and onChange handler manage the selection.',\n        code: `import { DatePicker } from '@triptease/react/date-picker';\n\nconst [selectedDate, setSelectedDate] = useState('');\n\n<label htmlFor=\"date\">Event date</label>\n<DatePicker\n  id=\"date\"\n  value={selectedDate}\n  onChange={(e) => setSelectedDate(e.target.value)}\n/>`,\n      },\n      {\n        title: 'Web Component - Basic',\n        description:\n          '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.',\n        code: `import '@triptease/tt-date-picker';\n\n<label for=\"date\">Select a date</label>\n<tt-date-picker id=\"date\"></tt-date-picker>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -0,0 +1,34 @@
+declare const _default: {
+    'date-range-picker': {
+        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;
+            }[];
+        };
+        examples: {
+            title: string;
+            description: string;
+            code: string;
+        }[];
+    };
+};
+export default _default;

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

@@ -0,0 +1,110 @@
+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>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=dateRangePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dateRangePicker.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/dateRangePicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,iCAAiC,CAAC,CAAC;AAE5E,eAAe;IACb,mBAAmB,EAAE;QACnB,IAAI,EAAE,mBAAmB;QACzB,WAAW,EACT,0GAA0G;QAC5G,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,gEAAgE;QACzE,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,gEAAgE;gBAChE,mDAAmD;gBACnD,yDAAyD;gBACzD,mDAAmD;aACpD;YACD,KAAK,EAAE;gBACL,gDAAgD;gBAChD,qEAAqE;aACtE;SACF;QACD,YAAY,EAAE;YACZ,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,oCAAoC,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC3F,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,iCAAiC;oBACvC,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,gBAAgB,EAAE,WAAW,CAAC,sBAAsB,EAAE,QAAQ,CAAC;oBAC/D,qBAAqB,EAAE,WAAW,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBACtF,gBAAgB,EAAE,WAAW,CAAC,sBAAsB,EAAE,OAAO,CAAC;oBAC9D,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,eAAe;gBACtB,WAAW,EACT,iPAAiP;gBACnP,IAAI,EAAE;;;mCAGqB;aAC5B;YACD;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EACT,yHAAyH;gBAC3H,IAAI,EAAE;;;;;;;;;;;;2FAY6E;aACpF;YACD;gBACE,KAAK,EAAE,sBAAsB;gBAC7B,WAAW,EACT,yKAAyK;gBAC3K,IAAI,EAAE;;;;;;;mBAOK;aACZ;YACD;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,WAAW,EACT,uQAAuQ;gBACzQ,IAAI,EAAE;;;6DAG+C;aACtD;YACD;gBACE,KAAK,EAAE,yBAAyB;gBAChC,WAAW,EAAE,sJAAsJ;gBACnK,IAAI,EAAE;;;;;;QAMN;aACD;YACD;gBACE,KAAK,EAAE,8BAA8B;gBACrC,WAAW,EAAE,2MAA2M;gBACxN,IAAI,EAAE;;;;;;;;;wBASU;aACjB;SACF;KACF;CAC0B,CAAC","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 version = packageJson.dependencies['@triptease/tt-date-range-picker'];\n\nexport default {\n  'date-range-picker': {\n    name: 'Date Range Picker',\n    description:\n      'Date range picker for selecting start and end dates, available as both React component and Web Component',\n    ssrSafe: true,\n    element: 'DateRangePicker (React) / tt-date-range-picker (Web Component)',\n    usageGuidance: {\n      whenToUse: [\n        'Users need to select a date range (bookings, reports, filters)',\n        'Start and end dates need to be validated together',\n        'Range constraints are important (min/max days in range)',\n        'Visual calendar helps users understand date spans',\n      ],\n      avoid: [\n        'Only a single date is needed (use date picker)',\n        'Dates are independent of each other (use two separate date pickers)',\n      ],\n    },\n    installation: {\n      npm: [{ name: '@triptease/react/date-range-picker', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: '@triptease/tt-date-range-picker',\n          includesTypes: false,\n          optional: false,\n          latestVersionUrl: buildCDNUrl('tt-date-range-picker', 'latest'),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-date-range-picker', buildMajorVersion(version)),\n          pinnedVersionUrl: buildCDNUrl('tt-date-range-picker', version),\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    examples: [\n      {\n        title: 'React - Basic',\n        description:\n          '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.',\n        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';\n\n<label htmlFor=\"daterange\">Select date range</label>\n<DateRangePicker id=\"daterange\" />`,\n      },\n      {\n        title: 'React - Controlled',\n        description:\n          'Use controlled component with React state for dynamic behavior. Access picker.start and picker.end from onChange event.',\n        code: `import { DateRangePicker } from '@triptease/react/date-range-picker';\n\nconst [startDate, setStartDate] = useState('');\nconst [endDate, setEndDate] = useState('');\n\nconst handleChange = (e) => {\n  const picker = e.target;\n  setStartDate(picker.start || '');\n  setEndDate(picker.end || '');\n};\n\n<label htmlFor=\"daterange\">Booking dates</label>\n<DateRangePicker id=\"daterange\" start={startDate} end={endDate} onChange={handleChange} />`,\n      },\n      {\n        title: 'React - With presets',\n        description:\n          'Use PresetButton component for quick date range selection. Pass Preset enum values for common ranges. PresetButton must be child of DateRangePicker with slot=\"preset\".',\n        code: `import { DateRangePicker, PresetButton, Preset } from '@triptease/react/date-range-picker';\n\n<label htmlFor=\"daterange\">Travel dates</label>\n<DateRangePicker id=\"daterange\">\n  <PresetButton slot=\"preset\" preset={Preset.ThisWeek}>This Week</PresetButton>\n  <PresetButton slot=\"preset\" preset={Preset.ThisMonth}>This Month</PresetButton>\n  <PresetButton slot=\"preset\" preset={Preset.Next1Month}>Next Month</PresetButton>\n</DateRangePicker>`,\n      },\n      {\n        title: 'Web Component - Basic',\n        description:\n          '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.',\n        code: `import '@triptease/tt-date-range-picker';\n\n<label for=\"daterange\">Select date range</label>\n<tt-date-range-picker id=\"daterange\"></tt-date-range-picker>`,\n      },\n      {\n        title: 'Web Component - In form',\n        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.`,\n        code: `import '@triptease/tt-date-range-picker';\n\n<form onsubmit=\"handleSubmit(event)\">\n  <label for=\"booking-dates\">Booking dates</label>\n  <tt-date-range-picker id=\"booking-dates\" name=\"booking-dates\"></tt-date-range-picker>\n  <button type=\"submit\">Submit</button>\n</form>`,\n      },\n      {\n        title: 'Web Component - With presets',\n        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.`,\n        code: `import '@triptease/tt-date-range-picker';\nimport '@triptease/tt-preset-button';\n\n<label for=\"daterange\">Travel dates</label>\n<tt-date-range-picker id=\"daterange\">\n  <tt-preset-button slot=\"preset\" preset=\"this-week\">This Week</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"next-week\">Next Week</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"this-month\">This Month</tt-preset-button>\n  <tt-preset-button slot=\"preset\" preset=\"next-month\">Next Month</tt-preset-button>\n</tt-date-range-picker>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}

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

@@ -0,0 +1,38 @@
+declare const _default: {
+    dialog: {
+        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;
+                pinnedVersionUrl: string;
+                pinnedMajorVersionUrl: string;
+                latestVersionUrl: string;
+                guidance: string;
+            }[];
+        };
+        examples: ({
+            title: string;
+            code: string;
+            description?: undefined;
+        } | {
+            title: string;
+            description: string;
+            code: string;
+        })[];
+    };
+};
+export default _default;

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

@@ -0,0 +1,73 @@
+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)',
+            ],
+        },
+        installation: {
+            npm: [{ name: '@triptease/tt-dialog', includesTypes: true, optional: false }],
+            cdn: [
+                {
+                    name: 'tt-dialog',
+                    includesTypes: false,
+                    optional: false,
+                    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>`,
+            },
+        ],
+    },
+};
+//# sourceMappingURL=dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/dialog.ts"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,MAAM,OAAO,GAAG,WAAW,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAAC;AAEjE,eAAe;IACb,MAAM,EAAE;QACN,IAAI,EAAE,wBAAwB;QAC9B,WAAW,EAAE,kEAAkE;QAC/E,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,WAAW;QACpB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,yCAAyC;gBACzC,wEAAwE;gBACxE,mDAAmD;gBACnD,qGAAqG;aACtG;YACD,KAAK,EAAE;gBACL,4FAA4F;gBAC5F,uEAAuE;gBACvE,yFAAyF;gBACzF,oFAAoF;aACrF;SACF;QACD,YAAY,EAAE;YACZ,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,sBAAsB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC7E,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,WAAW;oBACjB,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,gBAAgB,EAAE,WAAW,CAAC,WAAW,EAAE,OAAO,CAAC;oBACnD,qBAAqB,EAAE,WAAW,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;oBAC3E,gBAAgB,EAAE,WAAW,CAAC,WAAW,EAAE,QAAQ,CAAC;oBACpD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE;;;;;;;;;;;aAWD;aACN;YACD;gBACE,KAAK,EAAE,4BAA4B;gBACnC,WAAW,EACT,0IAA0I;gBAC5I,IAAI,EAAE;;;;;;;;;;;aAWD;aACN;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\n\nconst version = packageJson.dependencies['@triptease/tt-dialog'];\n\nexport default {\n  dialog: {\n    name: 'Dialog - Web Component',\n    description: 'Dialog component that displays content in a layer above the page',\n    ssrSafe: true,\n    element: 'tt-dialog',\n    usageGuidance: {\n      whenToUse: [\n        'User interaction is required to proceed',\n        \"The task is short, self-contained or doesn't fit naturally into a page\",\n        'The underlying page content should remain visible',\n        \"Intentionally disrupting the user's flow is beneficial (e.g. confirmations, critical notifications)\",\n      ],\n      avoid: [\n        'The content is long, complex, or scrollable (e.g. multi-step forms, detailed instructions)',\n        'The content should be shareable or linkable (prefer a dedicated page)',\n        'The information is not time-sensitive or critical (prefer toasts or inline disclosures)',\n        'The user did not initiate the interaction (unsolicited pop-ups can be frustrating)',\n      ],\n    },\n    installation: {\n      npm: [{ name: '@triptease/tt-dialog', includesTypes: true, optional: false }],\n      cdn: [\n        {\n          name: 'tt-dialog',\n          includesTypes: false,\n          optional: false,\n          pinnedVersionUrl: buildCDNUrl('tt-dialog', version),\n          pinnedMajorVersionUrl: buildCDNUrl('tt-dialog', buildMajorVersion(version)),\n          latestVersionUrl: buildCDNUrl('tt-dialog', '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    examples: [\n      {\n        title: 'Basic usage',\n        code: `<button data-theme=\"primary\" onclick=\"document.querySelector('#my-dialog').show()\">\n  Open Dialog\n</button>\n<tt-dialog id=\"my-dialog\" aria-label=\"Example dialog\">\n  <div class=\"container\">\n    <h2>Dialog Title</h2>\n    <p>This is a basic dialog with some content.</p>\n    <button data-theme=\"primary\" onclick=\"document.querySelector('#my-dialog').hide()\">\n      Close\n    </button>\n  </div>\n</tt-dialog>`,\n      },\n      {\n        title: 'With CSS custom properties',\n        description:\n          'Use CSS custom properties to customize dialog positioning:\\n\\n- `--dialog-left-distance`: Control the horizontal position of the dialog.',\n        code: `<button data-theme=\"primary\" onclick=\"document.querySelector('#positioned-dialog').show()\">\n  Open Dialog\n</button>\n<tt-dialog id=\"positioned-dialog\" aria-label=\"Positioned dialog\" style=\"--dialog-left-distance: 100px;\">\n  <div class=\"container\">\n    <h2>Custom Positioned Dialog</h2>\n    <p>This dialog has custom positioning using CSS custom properties.</p>\n    <button data-theme=\"primary\" onclick=\"document.querySelector('#positioned-dialog').hide()\">\n      Close\n    </button>\n  </div>\n</tt-dialog>`,\n      },\n    ],\n  },\n} satisfies ComponentManifest;\n"]}