npm - @triptease/design-system-mcp - Versions diffs - 0.0.6 → 1.0.0 - Mend

@triptease/design-system-mcp 0.0.6 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # @triptease/design-system-mcp
+## 1.0.0
+### Major Changes
+- Promote to v1
+## 0.0.7
+### Patch Changes
+- Improve webcomponent installation guidance
 ## 0.0.6
 ### Patch Changes

package/dist/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@triptease/design-system-mcp",
-    "version": "0.0.6",
+    "version": "1.0.0",
     "description": "MCP server for Triptease design system documentation",
     "type": "module",
     "main": "dist/src/index.js",

package/dist/src/manifests/components/entries/barChart.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ declare const _default: {
             whenToUse: string[];
             avoid: string[];
         };
-        installation: {
+        installationOptions: {
             npm: ({
                 name: string;
                 includesTypes: true;
@@ -22,6 +22,7 @@ declare const _default: {
                 name: string;
                 includesTypes: false;
                 optional: false;
+                moduleFormat: string;
                 pinnedVersionUrl: string;
                 pinnedMajorVersionUrl: string;
                 latestVersionUrl: string;

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

@@ -22,7 +22,7 @@ export default {
                 'When the user can expand the date range to very large periods, making bars inappropriate',
             ],
         },
-        installation: {
+        installationOptions: {
             npm: [
                 { name: '@triptease/tt-bar-chart', includesTypes: true, optional: false },
                 { name: '@triptease/tt-dataset', includesTypes: true, optional: false },
@@ -34,6 +34,7 @@ export default {
                     name: 'tt-bar-chart',
                     includesTypes: false,
                     optional: false,
+                    moduleFormat: "esm",
                     pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),
                     latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),
@@ -43,6 +44,7 @@ export default {
                     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'),
@@ -52,6 +54,7 @@ export default {
                     name: 'tt-data-point',
                     includesTypes: false,
                     optional: false,
+                    moduleFormat: "esm",
                     pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),
                     latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"barChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/barChart.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,qBAAqB,GAAG,WAAW,CAAC,YAAY,CAAC,yBAAyB,CAAC,CAAC;AAClF,MAAM,oBAAoB,GAAG,WAAW,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;AAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;AAEpF,eAAe;IACb,WAAW,EAAE;QACX,IAAI,EAAE,2BAA2B;QACjC,WAAW,EAAE,kDAAkD;QAC/D,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,cAAc;QACvB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,gDAAgD;gBAChD,oEAAoE;gBACpE,wHAAwH;gBACxH,kEAAkE;aACnE;YACD,KAAK,EAAE;gBACL,4DAA4D;gBAC5D,mFAAmF;gBACnF,0FAA0F;aAC3F;SACF;QACD,~~YAAY~~,EAAE;~~YACZ~~,GAAG,EAAE;gBACH,EAAE,IAAI,EAAE,yBAAyB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;gBACzE,EAAE,IAAI,EAAE,uBAAuB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;gBACvE,EAAE,IAAI,EAAE,0BAA0B,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAC1E,EAAE,IAAI,EAAE,yBAAyB,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;aACzE;YACD,GAAG,EAAE;gBACH;oBACE,IAAI,EAAE,cAAc;oBACpB,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,gBAAgB,EAAE,WAAW,CAAC,cAAc,EAAE,qBAAqB,CAAC;oBACpE,qBAAqB,EAAE,WAAW,CAAC,cAAc,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,CAAC;oBAC5F,gBAAgB,EAAE,WAAW,CAAC,cAAc,EAAE,QAAQ,CAAC;oBACvD,QAAQ,EACN,8GAA8G;iBACjH;gBACD;oBACE,IAAI,EAAE,YAAY;oBAClB,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,gBAAgB,EAAE,WAAW,CAAC,YAAY,EAAE,oBAAoB,CAAC;oBACjE,qBAAqB,EAAE,WAAW,CAAC,YAAY,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;oBACzF,gBAAgB,EAAE,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC;oBACrD,QAAQ,EACN,yHAAyH;iBAC5H;gBACD;oBACE,IAAI,EAAE,eAAe;oBACrB,aAAa,EAAE,KAAK;oBACpB,QAAQ,EAAE,KAAK;oBACf,gBAAgB,EAAE,WAAW,CAAC,eAAe,EAAE,sBAAsB,CAAC;oBACtE,qBAAqB,EAAE,WAAW,CAAC,eAAe,EAAE,iBAAiB,CAAC,sBAAsB,CAAC,CAAC;oBAC9F,gBAAgB,EAAE,WAAW,CAAC,eAAe,EAAE,QAAQ,CAAC;oBACxD,QAAQ,EACN,yHAAyH;iBAC5H;aACF;SACF;QACD,UAAU,EAAE;YACV,KAAK,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,qEAAqE;aACnF;YACD,MAAM,EAAE;gBACN,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,sEAAsE;aACpF;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,sEAAsE;aACpF;YACD,cAAc,EAAE;gBACd,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,sEAAsE;aACpF;YACD,SAAS,EAAE;gBACT,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;gBAClC,WAAW,EAAE,qDAAqD;aACnE;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EACT,uGAAuG;aAC1G;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,mFAAmF;aACjG;SACF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,iBAAiB;gBACxB,IAAI,EAAE;;;;;;;;;;gBAUE;aACT;YACD;gBACE,KAAK,EAAE,mBAAmB;gBAC1B,WAAW,EACT,gMAAgM;gBAClM,IAAI,EAAE;;;;;;;;;gBASE;aACT;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 latestBarChartVersion = packageJson.dependencies['@triptease/tt-bar-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\n\nexport default {\n 'bar-chart': {\n name: 'Bar Chart - Web Component',\n description: 'Bar chart for comparing values across categories',\n ssrSafe: true,\n element: 'tt-bar-chart',\n usageGuidance: {\n whenToUse: [\n 'To compare size between two or more categories',\n 'To show values that can be ranked in ascending or descending order',\n 'To show short, discrete periods of time, when comparing individual periods matters more than showing a long-term trend',\n 'To compare multiple datasets (series) across the same categories',\n ],\n avoid: [\n 'When the number of datapoints makes the chart hard to read',\n 'When showing long, continuous trends over time (use a line or area chart instead)',\n 'When the user can expand the date range to very large periods, making bars inappropriate',\n ],\n },\n ~~installation~~: {\n npm: [\n { name: '@triptease/tt-bar-chart', includesTypes: true, optional: false },\n { name: '@triptease/tt-dataset', includesTypes: true, optional: false },\n { name: '@triptease/tt-data-point', includesTypes: true, optional: false },\n { name: '@triptease/tt-highlight', includesTypes: true, optional: true },\n ],\n cdn: [\n {\n name: 'tt-bar-chart',\n includesTypes: false,\n optional: false,\n pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),\n latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-dataset',\n includesTypes: false,\n optional: false,\n pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),\n latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-data-point',\n includesTypes: false,\n optional: false,\n pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),\n latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n ],\n },\n attributes: {\n width: {\n type: 'string',\n description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',\n },\n height: {\n type: 'string',\n description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',\n },\n 'x-axis-title': {\n type: 'string',\n description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',\n },\n 'y-axis-title': {\n type: 'string',\n description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',\n },\n direction: {\n type: 'enum',\n values: ['horizontal', 'vertical'],\n description: 'Bar orientation. Use vertical for time series data.',\n },\n stacked: {\n type: 'boolean',\n description:\n 'Stack datasets vertically. Use when datasets contribute to meaningful total. Limit to 6 datasets max.',\n },\n loading: {\n type: 'boolean',\n description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n },\n },\n examples: [\n {\n title: 'Basic bar chart',\n code: `import '@triptease/tt-bar-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-bar-chart id=\"basic-chart\">\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Total Opens\" value={2600}></tt-data-point>\n <tt-data-point label=\"Total Clicks\" value={355}></tt-data-point>\n <tt-data-point label=\"Bookings\" value={76}></tt-data-point>\n </tt-dataset>\n</tt-bar-chart>`,\n },\n {\n title: 'Multiple datasets',\n description:\n 'Use multiple datasets to compare the same categories across different groups or time periods. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare.',\n code: `<tt-bar-chart id=\"multiple-datasets-chart\" height=\"30rem\">\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Total Bookings\" value={7}></tt-data-point>\n <tt-data-point label=\"Total Clicks\" value={4}></tt-data-point>\n </tt-dataset>\n <tt-dataset label=\"2025\">\n <tt-data-point label=\"Total Bookings\" value={2}></tt-data-point>\n <tt-data-point label=\"Total Clicks\" value={3}></tt-data-point>\n </tt-dataset>\n</tt-bar-chart>`,\n },\n ],\n },\n} satisfies ComponentManifest;\n"]}
1	+ {"version":3,"file":"barChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/barChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nconst latestBarChartVersion = packageJson.dependencies['@triptease/tt-bar-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\n\nexport default {\n 'bar-chart': {\n name: 'Bar Chart - Web Component',\n description: 'Bar chart for comparing values across categories',\n ssrSafe: true,\n element: 'tt-bar-chart',\n usageGuidance: {\n whenToUse: [\n 'To compare size between two or more categories',\n 'To show values that can be ranked in ascending or descending order',\n 'To show short, discrete periods of time, when comparing individual periods matters more than showing a long-term trend',\n 'To compare multiple datasets (series) across the same categories',\n ],\n avoid: [\n 'When the number of datapoints makes the chart hard to read',\n 'When showing long, continuous trends over time (use a line or area chart instead)',\n 'When the user can expand the date range to very large periods, making bars inappropriate',\n ],\n },\n installationOptions: {\n npm: [\n { name: '@triptease/tt-bar-chart', includesTypes: true, optional: false },\n { name: '@triptease/tt-dataset', includesTypes: true, optional: false },\n { name: '@triptease/tt-data-point', includesTypes: true, optional: false },\n { name: '@triptease/tt-highlight', includesTypes: true, optional: true },\n ],\n cdn: [\n {\n name: 'tt-bar-chart',\n includesTypes: false,\n optional: false,\n moduleFormat: \"esm\",\n pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),\n latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-dataset',\n includesTypes: false,\n optional: false,\n moduleFormat: \"esm\",\n pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),\n latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-data-point',\n includesTypes: false,\n optional: false,\n moduleFormat: \"esm\",\n pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),\n latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n ],\n },\n attributes: {\n width: {\n type: 'string',\n description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',\n },\n height: {\n type: 'string',\n description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',\n },\n 'x-axis-title': {\n type: 'string',\n description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',\n },\n 'y-axis-title': {\n type: 'string',\n description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',\n },\n direction: {\n type: 'enum',\n values: ['horizontal', 'vertical'],\n description: 'Bar orientation. Use vertical for time series data.',\n },\n stacked: {\n type: 'boolean',\n description:\n 'Stack datasets vertically. Use when datasets contribute to meaningful total. Limit to 6 datasets max.',\n },\n loading: {\n type: 'boolean',\n description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n },\n },\n examples: [\n {\n title: 'Basic bar chart',\n code: `import '@triptease/tt-bar-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-bar-chart id=\"basic-chart\">\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Total Opens\" value={2600}></tt-data-point>\n <tt-data-point label=\"Total Clicks\" value={355}></tt-data-point>\n <tt-data-point label=\"Bookings\" value={76}></tt-data-point>\n </tt-dataset>\n</tt-bar-chart>`,\n },\n {\n title: 'Multiple datasets',\n description:\n 'Use multiple datasets to compare the same categories across different groups or time periods. Limit datasets to a maximum of 6, as more datasets make the chart difficult to read and compare.',\n code: `<tt-bar-chart id=\"multiple-datasets-chart\" height=\"30rem\">\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Total Bookings\" value={7}></tt-data-point>\n <tt-data-point label=\"Total Clicks\" value={4}></tt-data-point>\n </tt-dataset>\n <tt-dataset label=\"2025\">\n <tt-data-point label=\"Total Bookings\" value={2}></tt-data-point>\n <tt-data-point label=\"Total Clicks\" value={3}></tt-data-point>\n </tt-dataset>\n</tt-bar-chart>`,\n },\n ],\n },\n} satisfies ComponentManifest;\n"]}

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

@@ -8,7 +8,7 @@ declare const _default: {
             whenToUse: string[];
             avoid: string[];
         };
-        installation: {
+        installationOptions: {
             npm: {
                 name: string;
                 includesTypes: true;
@@ -18,6 +18,7 @@ declare const _default: {
                 name: string;
                 includesTypes: false;
                 optional: false;
+                moduleFormat: string;
                 latestVersionUrl: string;
                 pinnedMajorVersionUrl: string;
                 pinnedVersionUrl: string;

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

@@ -19,13 +19,14 @@ export default {
                 'Users would benefit from seeing all options simultaneously for comparison',
             ],
         },
-        installation: {
+        installationOptions: {
             npm: [{ name: '@triptease/tt-combobox', includesTypes: true, optional: false }],
             cdn: [
                 {
                     name: '@triptease/tt-combobox',
                     includesTypes: false,
                     optional: false,
+                    moduleFormat: "esm",
                     latestVersionUrl: buildCDNUrl('tt-combobox', 'latest'),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-combobox', buildMajorVersion(version)),
                     pinnedVersionUrl: buildCDNUrl('tt-combobox', version),

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

	@@ -1 +1 @@
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"]}
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,mBAAmB,EAAE;YACnB,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,YAAY,EAAE,KAAK;oBACnB,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 installationOptions: {\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 moduleFormat: \"esm\",\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 CHANGED Viewed

@@ -8,7 +8,7 @@ declare const _default: {
             whenToUse: string[];
             avoid: string[];
         };
-        installation: {
+        installationOptions: {
             npm: {
                 name: string;
                 includesTypes: true;
@@ -18,6 +18,7 @@ declare const _default: {
                 name: string;
                 includesTypes: false;
                 optional: false;
+                moduleFormat: string;
                 latestVersionUrl: string;
                 pinnedMajorVersionUrl: string;
                 pinnedVersionUrl: string;

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

@@ -16,13 +16,14 @@ export default {
             ],
             avoid: ['Date ranges are needed (use date range picker)'],
         },
-        installation: {
+        installationOptions: {
             npm: [{ name: '@triptease/tt-date-picker', includesTypes: true, optional: false }],
             cdn: [
                 {
                     name: '@triptease/tt-date-picker',
                     includesTypes: false,
                     optional: false,
+                    moduleFormat: "esm",
                     latestVersionUrl: buildCDNUrl('tt-date-picker', 'latest'),
                     pinnedMajorVersionUrl: buildCDNUrl('tt-date-picker', buildMajorVersion(version)),
                     pinnedVersionUrl: buildCDNUrl('tt-date-picker', version),

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

	@@ -1 +1 @@
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"]}
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,mBAAmB,EAAE;YACnB,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,YAAY,EAAE,KAAK;oBACnB,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 installationOptions: {\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 moduleFormat: \"esm\",\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 CHANGED Viewed

@@ -8,7 +8,7 @@ declare const _default: {
             whenToUse: string[];
             avoid: string[];
         };
-        installation: {
+        installationOptions: {
             npm: {
                 name: string;
                 includesTypes: true;
@@ -18,6 +18,7 @@ declare const _default: {
                 name: string;
                 includesTypes: false;
                 optional: false;
+                moduleFormat: string;
                 latestVersionUrl: string;
                 pinnedMajorVersionUrl: string;
                 pinnedVersionUrl: string;

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

@@ -19,13 +19,14 @@ export default {
                 'Dates are independent of each other (use two separate date pickers)',
             ],
         },
-        installation: {
+        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),

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

	@@ -1 +1 @@
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"]}
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,mBAAmB,EAAE;YACnB,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,YAAY,EAAE,KAAK;oBACnB,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 installationOptions: {\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 moduleFormat: \"esm\",\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 CHANGED Viewed

@@ -8,7 +8,7 @@ declare const _default: {
             whenToUse: string[];
             avoid: string[];
         };
-        installation: {
+        installationOptions: {
             npm: {
                 name: string;
                 includesTypes: true;
@@ -18,6 +18,7 @@ declare const _default: {
                 name: string;
                 includesTypes: false;
                 optional: false;
+                moduleFormat: string;
                 pinnedVersionUrl: string;
                 pinnedMajorVersionUrl: string;
                 latestVersionUrl: string;

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

@@ -21,13 +21,14 @@ export default {
                 'The user did not initiate the interaction (unsolicited pop-ups can be frustrating)',
             ],
         },
-        installation: {
+        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'),

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

	@@ -1 +1 @@
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"]}
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,mBAAmB,EAAE;YACnB,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,YAAY,EAAE,KAAK;oBACnB,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 installationOptions: {\n npm: [{ name: '@triptease/tt-dialog', includesTypes: true, optional: false }],\n cdn: [\n {\n name: 'tt-dialog',\n includesTypes: false,\n optional: false,\n moduleFormat: \"esm\",\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"]}

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

@@ -8,7 +8,7 @@ declare const _default: {
             whenToUse: string[];
             avoid: string[];
         };
-        installation: {
+        installationOptions: {
             npm: ({
                 name: string;
                 includesTypes: true;
@@ -26,6 +26,16 @@ declare const _default: {
                 pinnedMajorVersionUrl: string;
                 latestVersionUrl: string;
                 guidance: string;
+                moduleFormat?: undefined;
+            } | {
+                name: string;
+                includesTypes: false;
+                optional: false;
+                moduleFormat: string;
+                pinnedVersionUrl: string;
+                pinnedMajorVersionUrl: string;
+                latestVersionUrl: string;
+                guidance: string;
             } | {
                 name: string;
                 includesTypes: false;
@@ -34,6 +44,7 @@ declare const _default: {
                 pinnedMajorVersionUrl: string;
                 latestVersionUrl: string;
                 guidance: string;
+                moduleFormat?: undefined;
             })[];
         };
         attributes: {

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

@@ -21,7 +21,7 @@ export default {
                 'When comparing datasets that do not have a meaningful or explainable relationship',
             ],
         },
-        installation: {
+        installationOptions: {
             npm: [
                 { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },
                 { name: '@triptease/tt-dataset', includesTypes: true, optional: false },
@@ -42,6 +42,7 @@ export default {
                     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'),

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

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

package/dist/src/manifests/components/types.d.ts CHANGED Viewed

@@ -17,8 +17,9 @@ interface CDNPackage extends PackageInstallationBase {
     latestVersionUrl: string;
     pinnedMajorVersionUrl: string;
     pinnedVersionUrl: string;
+    moduleFormat?: string;
 }
-interface Installation {
+interface InstallationOptions {
     npm?: NPMPackage[];
     cdn?: CDNPackage[];
 }
@@ -45,7 +46,7 @@ export interface ComponentConfig {
     ssrSafe?: boolean;
     element: string;
     usageGuidance?: UsageGuidance;
-    installation?: Installation;
+    installationOptions?: InstallationOptions;
     dataAttributes?: Record<string, DataAttribute>;
     classes?: Record<string, string>;
     attributes?: Record<string, HTMLAttribute>;

package/dist/src/manifests/components/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/manifests/components/types.ts"],"names":[],"mappings":"","sourcesContent":["interface UsageGuidance {\n whenToUse: string[];\n bestPractices?: string[];\n accessibility?: string[];\n avoid?: string[];\n}\n\ninterface PackageInstallationBase {\n includesTypes: boolean;\n optional: boolean;\n guidance?: string;\n}\n\ninterface NPMPackage extends PackageInstallationBase {\n name: string;\n}\n\ninterface CDNPackage extends PackageInstallationBase {\n name: string;\n latestVersionUrl: string;\n pinnedMajorVersionUrl: string;\n pinnedVersionUrl: string;\n}\n\ninterface ~~Installation~~ {\n npm?: NPMPackage[];\n cdn?: CDNPackage[];\n}\n\ninterface DataAttribute {\n type: string;\n values?: (string \| undefined)[];\n default?: string;\n description: string;\n}\n\ninterface HTMLAttribute {\n type?: string;\n values?: string[];\n default?: string;\n description?: string;\n}\n\ninterface ExampleUsage {\n title: string;\n description?: string;\n code: string;\n}\n\nexport interface ComponentConfig {\n name: string;\n description: string;\n ssrSafe?: boolean;\n element: string;\n usageGuidance?: UsageGuidance;\n ~~installation~~?: ~~Installation~~;\n dataAttributes?: Record<string, DataAttribute>;\n classes?: Record<string, string>;\n attributes?: Record<string, HTMLAttribute>;\n states?: string[];\n examples?: ExampleUsage[];\n}\n\nexport type ComponentManifest = Record<string, ComponentConfig>;\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/manifests/components/types.ts"],"names":[],"mappings":"","sourcesContent":["interface UsageGuidance {\n whenToUse: string[];\n bestPractices?: string[];\n accessibility?: string[];\n avoid?: string[];\n}\n\ninterface PackageInstallationBase {\n includesTypes: boolean;\n optional: boolean;\n guidance?: string;\n}\n\ninterface NPMPackage extends PackageInstallationBase {\n name: string;\n}\n\ninterface CDNPackage extends PackageInstallationBase {\n name: string;\n latestVersionUrl: string;\n pinnedMajorVersionUrl: string;\n pinnedVersionUrl: string;\n moduleFormat?: string;\n}\n\ninterface InstallationOptions {\n npm?: NPMPackage[];\n cdn?: CDNPackage[];\n}\n\ninterface DataAttribute {\n type: string;\n values?: (string \| undefined)[];\n default?: string;\n description: string;\n}\n\ninterface HTMLAttribute {\n type?: string;\n values?: string[];\n default?: string;\n description?: string;\n}\n\ninterface ExampleUsage {\n title: string;\n description?: string;\n code: string;\n}\n\nexport interface ComponentConfig {\n name: string;\n description: string;\n ssrSafe?: boolean;\n element: string;\n usageGuidance?: UsageGuidance;\n installationOptions?: InstallationOptions;\n dataAttributes?: Record<string, DataAttribute>;\n classes?: Record<string, string>;\n attributes?: Record<string, HTMLAttribute>;\n states?: string[];\n examples?: ExampleUsage[];\n}\n\nexport type ComponentManifest = Record<string, ComponentConfig>;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@triptease/design-system-mcp",
-  "version": "0.0.6",
+  "version": "1.0.0",
   "description": "MCP server for Triptease design system documentation",
   "type": "module",
   "main": "dist/src/index.js",

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

@@ -25,7 +25,7 @@ export default {
         'When the user can expand the date range to very large periods, making bars inappropriate',
       ],
     },
-    installation: {
+    installationOptions: {
       npm: [
         { name: '@triptease/tt-bar-chart', includesTypes: true, optional: false },
         { name: '@triptease/tt-dataset', includesTypes: true, optional: false },
@@ -37,6 +37,7 @@ export default {
           name: 'tt-bar-chart',
           includesTypes: false,
           optional: false,
+          moduleFormat: "esm",
           pinnedVersionUrl: buildCDNUrl('tt-bar-chart', latestBarChartVersion),
           pinnedMajorVersionUrl: buildCDNUrl('tt-bar-chart', buildMajorVersion(latestBarChartVersion)),
           latestVersionUrl: buildCDNUrl('tt-bar-chart', 'latest'),
@@ -47,6 +48,7 @@ export default {
           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'),
@@ -57,6 +59,7 @@ export default {
           name: 'tt-data-point',
           includesTypes: false,
           optional: false,
+          moduleFormat: "esm",
           pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),
           pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),
           latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),

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

@@ -23,13 +23,14 @@ export default {
         'Users would benefit from seeing all options simultaneously for comparison',
       ],
     },
-    installation: {
+    installationOptions: {
       npm: [{ name: '@triptease/tt-combobox', includesTypes: true, optional: false }],
       cdn: [
         {
           name: '@triptease/tt-combobox',
           includesTypes: false,
           optional: false,
+          moduleFormat: "esm",
           latestVersionUrl: buildCDNUrl('tt-combobox', 'latest'),
           pinnedMajorVersionUrl: buildCDNUrl('tt-combobox', buildMajorVersion(version)),
           pinnedVersionUrl: buildCDNUrl('tt-combobox', version),

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

@@ -19,13 +19,14 @@ export default {
       ],
       avoid: ['Date ranges are needed (use date range picker)'],
     },
-    installation: {
+    installationOptions: {
       npm: [{ name: '@triptease/tt-date-picker', includesTypes: true, optional: false }],
       cdn: [
         {
           name: '@triptease/tt-date-picker',
           includesTypes: false,
           optional: false,
+          moduleFormat: "esm",
           latestVersionUrl: buildCDNUrl('tt-date-picker', 'latest'),
           pinnedMajorVersionUrl: buildCDNUrl('tt-date-picker', buildMajorVersion(version)),
           pinnedVersionUrl: buildCDNUrl('tt-date-picker', version),

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

@@ -23,13 +23,14 @@ export default {
         'Dates are independent of each other (use two separate date pickers)',
       ],
     },
-    installation: {
+    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),

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

@@ -24,13 +24,14 @@ export default {
         'The user did not initiate the interaction (unsolicited pop-ups can be frustrating)',
       ],
     },
-    installation: {
+    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'),

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

@@ -24,7 +24,7 @@ export default {
         'When comparing datasets that do not have a meaningful or explainable relationship',
       ],
     },
-    installation: {
+    installationOptions: {
       npm: [
         { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },
         { name: '@triptease/tt-dataset', includesTypes: true, optional: false },
@@ -46,6 +46,7 @@ export default {
           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'),

package/src/manifests/components/types.ts CHANGED Viewed

@@ -20,9 +20,10 @@ interface CDNPackage extends PackageInstallationBase {
   latestVersionUrl: string;
   pinnedMajorVersionUrl: string;
   pinnedVersionUrl: string;
+  moduleFormat?: string;
 }
-interface Installation {
+interface InstallationOptions {
   npm?: NPMPackage[];
   cdn?: CDNPackage[];
 }
@@ -53,7 +54,7 @@ export interface ComponentConfig {
   ssrSafe?: boolean;
   element: string;
   usageGuidance?: UsageGuidance;
-  installation?: Installation;
+  installationOptions?: InstallationOptions;
   dataAttributes?: Record<string, DataAttribute>;
   classes?: Record<string, string>;
   attributes?: Record<string, HTMLAttribute>;