@triptease/design-system-mcp 1.2.10 → 1.2.12

package/dist/index.js

@@ -7656,11 +7656,11 @@ function datetimeRegex(args) {
   regex = `${regex}(${opts.join("|")})`;
   return new RegExp(`^${regex}$`);
 }
-function isValidIP(ip, version8) {
-  if ((version8 === "v4" || !version8) && ipv4Regex.test(ip)) {
+function isValidIP(ip, version10) {
+  if ((version10 === "v4" || !version10) && ipv4Regex.test(ip)) {
     return true;
   }
-  if ((version8 === "v6" || !version8) && ipv6Regex.test(ip)) {
+  if ((version10 === "v6" || !version10) && ipv6Regex.test(ip)) {
     return true;
   }
   return false;
@@ -7687,11 +7687,11 @@ function isValidJWT(jwt2, alg) {
     return false;
   }
 }
-function isValidCidr(ip, version8) {
-  if ((version8 === "v4" || !version8) && ipv4CidrRegex.test(ip)) {
+function isValidCidr(ip, version10) {
+  if ((version10 === "v4" || !version10) && ipv4CidrRegex.test(ip)) {
     return true;
   }
-  if ((version8 === "v6" || !version8) && ipv6CidrRegex.test(ip)) {
+  if ((version10 === "v6" || !version10) && ipv6CidrRegex.test(ip)) {
     return true;
   }
   return false;
@@ -11644,10 +11644,10 @@ var nanoid = /^[a-zA-Z0-9_-]{21}$/;
 var duration = /^P(?:(\d+W)|(?!.*W)(?=\d|T\d)(\d+Y)?(\d+M)?(\d+D)?(T(?=\d)(\d+H)?(\d+M)?(\d+([.,]\d+)?S)?)?)$/;
 var extendedDuration = /^[-+]?P(?!$)(?:(?:[-+]?\d+Y)|(?:[-+]?\d+[.,]\d+Y$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:(?:[-+]?\d+W)|(?:[-+]?\d+[.,]\d+W$))?(?:(?:[-+]?\d+D)|(?:[-+]?\d+[.,]\d+D$))?(?:T(?=[\d+-])(?:(?:[-+]?\d+H)|(?:[-+]?\d+[.,]\d+H$))?(?:(?:[-+]?\d+M)|(?:[-+]?\d+[.,]\d+M$))?(?:[-+]?\d+(?:[.,]\d+)?S)?)??$/;
 var guid = /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})$/;
-var uuid = (version8) => {
-  if (!version8)
+var uuid = (version10) => {
+  if (!version10)
     return /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-8][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/;
-  return new RegExp(`^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-${version8}[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})$`);
+  return new RegExp(`^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-${version10}[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})$`);
 };
 var uuid4 = /* @__PURE__ */ uuid(4);
 var uuid6 = /* @__PURE__ */ uuid(6);
@@ -23302,7 +23302,7 @@ var StdioServerTransport = class {
 // package.json
 var package_default = {
   name: "@triptease/design-system-mcp",
-  version: "1.2.10",
+  version: "1.2.12",
   description: "MCP server for Triptease design system documentation",
   type: "module",
   main: "dist/index.js",
@@ -23323,23 +23323,25 @@ var package_default = {
     node: ">=18.0.0"
   },
   componentVersions: {
-    "@triptease/stylesheet": "2.1.4",
+    "@triptease/stylesheet": "2.1.9",
     "@triptease/tt-bar-chart": "1.1.3",
     "@triptease/tt-combobox": "5.7.4",
     "@triptease/tt-data-point": "1.1.1",
     "@triptease/tt-dataset": "1.1.1",
-    "@triptease/tt-date-picker": "6.3.1",
-    "@triptease/tt-date-range-picker": "6.4.1",
-    "@triptease/tt-dialog": "5.2.1",
+    "@triptease/tt-date-picker": "6.3.5",
+    "@triptease/tt-date-range-picker": "6.5.4",
+    "@triptease/tt-dialog": "5.2.2",
     "@triptease/tt-highlight": "1.1.1",
     "@triptease/tt-line-chart": "1.1.3",
     "@triptease/tt-milestone": "1.1.1",
     "@triptease/tt-paginator": "1.0.7",
     "@triptease/tt-table-wrapper": "1.0.6",
-    "@triptease/tt-tabs": "1.1.0"
+    "@triptease/tt-tabs": "1.1.0",
+    "@triptease/tt-repeat-date-picker": "1.0.0",
+    "@triptease/tt-weekday-picker": "1.0.1"
   },
   dependencies: {
-    "@triptease/stylesheet": "2.1.8"
+    "@triptease/stylesheet": "2.1.9"
   },
   devDependencies: {
     "@modelcontextprotocol/sdk": "1.26.0",
@@ -24015,10 +24017,10 @@ var card_default = {
 };
 
 // src/utils/buildCDNUrls.ts
-var buildCDNUrl = (componentName, version8) => {
-  return `https://cdn.design-system.triptease.io/${componentName}/${version8}/${componentName}.js`;
+var buildCDNUrl = (componentName, version10) => {
+  return `https://cdn.design-system.triptease.io/${componentName}/${version10}/${componentName}.js`;
 };
-var buildMajorVersion = (version8) => `${version8.split(".")[0]}.x.x`;
+var buildMajorVersion = (version10) => `${version10.split(".")[0]}.x.x`;
 
 // src/manifests/components/entries/table.ts
 var tableWrapperVersion = package_default.componentVersions["@triptease/tt-table-wrapper"];
@@ -24601,7 +24603,7 @@ var datePicker_default = {
     examples: [
       {
         title: "Basic usage",
-        description: "Date picker for selecting a single date. Value is in ISO format (YYYY-MM-DD). Use mindate and maxdate attributes to restrict selectable dates.",
+        description: "Date picker for selecting a single date. Value is in ISO format (YYYY-MM-DD). Use mindate and maxdate attributes to restrict selectable dates. The calendar opens below the input by default and automatically opens above if there is insufficient space below the viewport.",
         code: `<label for="date-basic">Select a date</label>
 <tt-date-picker id="date-basic"></tt-date-picker>`
       },
@@ -24686,7 +24688,7 @@ var dateRangePicker_default = {
     examples: [
       {
         title: "Basic usage",
-        description: "Date range picker for selecting start and end dates. Dates are in ISO format (YYYY-MM-DD). Use start and end attributes for default values. Use mindate and maxdate attributes to restrict dates.",
+        description: "Date range picker for selecting start and end dates. Dates are in ISO format (YYYY-MM-DD). Use start and end attributes for default values. Use mindate and maxdate attributes to restrict dates. The calendar opens below the input by default and automatically opens above if there is insufficient space below the viewport.",
         code: `<label for="daterange-basic">Select date range</label>
 <tt-date-range-picker id="daterange-basic"></tt-date-range-picker>`
       },
@@ -25524,6 +25526,215 @@ var paginator_default = {
   }
 };
 
+// src/manifests/components/entries/weekdayPicker.ts
+var version8 = package_default.componentVersions["@triptease/tt-weekday-picker"];
+var weekdayPicker_default = {
+  "weekday-picker": {
+    name: "Weekday Picker",
+    description: "A weekday picker lets users select one or more days of the week. Days are represented as lowercase strings (sunday through saturday), ordered from Sunday. In single mode value is a string; in multi mode it is a string array in week order.",
+    ssrSafe: true,
+    element: "tt-weekday-picker",
+    usageGuidance: {
+      whenToUse: [
+        "A user needs to choose one or more days of the week"
+      ],
+      avoid: [
+        "A specific calendar date is needed \u2014 use the Date Picker instead",
+        "The choice is binary (e.g. weekdays vs. weekends) \u2014 a select or radio group may be clearer"
+      ],
+      accessibility: [
+        'The component uses role="toolbar" with role="radio" buttons (single mode) or role="checkbox" buttons (multi mode). The Toolbar pattern is used because the buttons need arrow key navigation within a single tab stop, and because single mode must allow deselection \u2014 which a native radio group does not support',
+        'Always associate a visible label using a <label for="..."> element \u2014 the component does not render its own label',
+        "Use aria-describedby to associate error messages or helper text with the component",
+        "Arrow keys navigate between day buttons; Space selects or deselects the focused button"
+      ]
+    },
+    installationOptions: {
+      npm: [{ name: "@triptease/tt-weekday-picker", includesTypes: true, optional: false }],
+      cdn: [
+        {
+          name: "@triptease/tt-weekday-picker",
+          includesTypes: false,
+          optional: false,
+          moduleFormat: "esm",
+          latestVersionUrl: buildCDNUrl("tt-weekday-picker", "latest"),
+          pinnedMajorVersionUrl: buildCDNUrl("tt-weekday-picker", buildMajorVersion(version8)),
+          pinnedVersionUrl: buildCDNUrl("tt-weekday-picker", version8),
+          guidance: "Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code."
+        }
+      ]
+    },
+    attributes: {
+      name: { type: "string", description: "Form field name, used in form data submission" },
+      value: {
+        type: "string | string[]",
+        description: `In single mode, a string day name or empty string (e.g. "friday"). The HTML attribute accepts a single day name. In multi mode, an array of string day names in week order (e.g. ["monday", "wednesday", "friday"]). The HTML attribute accepts a comma-separated string (e.g. "monday,wednesday,friday") or a JSON array string (e.g. '["monday","wednesday","friday"]'). Valid day names: sunday, monday, tuesday, wednesday, thursday, friday, saturday`
+      },
+      multiple: { type: "boolean", description: "Enables multi-select mode; omit for single-select" },
+      disabled: { type: "boolean", description: "Disables all day buttons" },
+      required: { type: "boolean", description: "Marks the field as required for form validation" },
+      invalid: {
+        type: "boolean",
+        description: "Shows the error outline. The component never sets this automatically \u2014 the consumer controls it entirely. When using a form library, pass the library's error state here (e.g. invalid={!!errors.day} in React Hook Form)."
+      },
+      "aria-labelledby": { type: "string", description: "ID of an element that labels the picker group" },
+      "aria-describedby": { type: "string", description: "ID of an element providing helper or error text" }
+    },
+    events: {
+      change: {
+        description: "Fired whenever a day is selected or deselected. Read the value property to get the updated value.",
+        bubbles: true
+      }
+    },
+    examples: [
+      {
+        title: "Basic usage",
+        code: `<label for="checkin-day">Check-in day</label>
+<tt-weekday-picker id="checkin-day" name="checkin-day"></tt-weekday-picker>`
+      },
+      {
+        title: "Multiple selection",
+        description: "Use multiple selection when a rule or configuration applies to more than one day of the week. Add the multiple attribute to enable this mode.",
+        code: `<label for="campaign-days">Campaign active days</label>
+<tt-weekday-picker id="campaign-days" name="campaign-days" multiple></tt-weekday-picker>`
+      },
+      {
+        title: "With preselected value",
+        description: "Set the value attribute to pre-select a day on render. In single mode, pass a single day name. In multi mode, pass a comma-separated string or a JSON array string.",
+        code: `<label for="arrival-day">Preferred arrival day</label>
+<tt-weekday-picker id="arrival-day" name="arrival-day" value="friday"></tt-weekday-picker>
+
+<label for="promo-days">Promotional rate days</label>
+<tt-weekday-picker id="promo-days" name="promo-days" multiple value="monday,wednesday,friday"></tt-weekday-picker>`
+      },
+      {
+        title: "Required with error message",
+        description: "Use required when a day selection is mandatory. The error outline is controlled entirely by the invalid attribute \u2014 the component never shows it automatically. Set invalid when your form validation decides the field is in error, and clear it when it is not. Like a native required input, the component sets a browser validation message, but this produces a disruptive tooltip. Always provide a visible inline error message instead and associate it using aria-describedby.",
+        code: `<label for="required-day">Check-in day</label>
+<tt-weekday-picker id="required-day" name="checkin-day" required aria-describedby="required-day-error"></tt-weekday-picker>
+<span id="required-day-error">Please select a check-in day</span>`
+      },
+      {
+        title: "With event handler",
+        description: "Use the change event when a selection should take effect immediately rather than on form submission \u2014 for example, auto-saving a preference, live-filtering results, or updating a UI preview. Read event.target.value to get the updated value.",
+        code: `<label for="targeting-days">Onsite message active days</label>
+<tt-weekday-picker id="targeting-days" multiple></tt-weekday-picker>
+
+<script>
+  document.getElementById('targeting-days').addEventListener('change', (e) => {
+    console.log('Selected days:', e.target.value);
+  });
+</script>`
+      },
+      {
+        title: "Disabled",
+        description: "Use the disabled state when day selection is temporarily unavailable. If the field will never be available to this user, consider hiding it entirely rather than disabling it.",
+        code: `<label for="locked-day">Check-in day</label>
+<tt-weekday-picker id="locked-day" name="locked-day" value="saturday" disabled></tt-weekday-picker>`
+      }
+    ]
+  }
+};
+
+// src/manifests/components/entries/repeatDatePicker.ts
+var version9 = package_default.componentVersions["@triptease/tt-repeat-date-picker"];
+var repeatDatePicker_default = {
+  "repeat-date-picker": {
+    name: "Repeat Date Picker",
+    description: "A repeat date picker lets users define a date range and optionally schedule it to repeat on a regular basis. The form value is a JSON-encoded { dates, infinite } object. infinite is true only when repeat is on with no defined end condition; it is false when repeat is off or a finite list of occurrences has been set.",
+    ssrSafe: true,
+    element: "tt-repeat-date-picker",
+    usageGuidance: {
+      whenToUse: [
+        "A user needs to schedule a recurring campaign, promotion, or event across multiple date ranges",
+        "A booking offer or rate plan applies to several periods that follow a predictable pattern"
+      ],
+      avoid: [
+        "A single, one-off date range is needed \u2014 use the Date Range Picker instead",
+        "Only a single date (not a range) is needed \u2014 use the Date Picker instead"
+      ],
+      accessibility: [
+        'Always associate a visible label using a <label for="..."> element \u2014 the component does not render its own label',
+        "The repeat option groups are wrapped in fieldset and legend elements, which screen readers announce as named groups"
+      ]
+    },
+    installationOptions: {
+      npm: [{ name: "@triptease/tt-repeat-date-picker", includesTypes: true, optional: false }],
+      cdn: [
+        {
+          name: "@triptease/tt-repeat-date-picker",
+          includesTypes: false,
+          optional: false,
+          moduleFormat: "esm",
+          latestVersionUrl: buildCDNUrl("tt-repeat-date-picker", "latest"),
+          pinnedMajorVersionUrl: buildCDNUrl("tt-repeat-date-picker", buildMajorVersion(version9)),
+          pinnedVersionUrl: buildCDNUrl("tt-repeat-date-picker", version9),
+          guidance: "Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code."
+        }
+      ]
+    },
+    attributes: {
+      name: { type: "string", description: "Form field name used in form data submission" },
+      mindate: { type: "string", description: "Earliest selectable date in YYYY-MM-DD format. Passed through to the internal date range picker." },
+      maxdate: { type: "string", description: "Latest selectable date in YYYY-MM-DD format. Passed through to the internal date range picker." },
+      required: {
+        type: "boolean",
+        description: "Marks the field as required. Reports valueMissing when no date range has been selected"
+      },
+      disabled: { type: "boolean", description: "Disables the date range picker and the repeat checkbox" }
+    },
+    events: {
+      change: {
+        description: "Fired whenever the selected range, repeat settings, or end condition changes. Read the value property to get the updated { dates, infinite } object.",
+        bubbles: true
+      }
+    },
+    examples: [
+      {
+        title: "Basic usage",
+        code: `<label for="promo-dates">Promotional period</label>
+<tt-repeat-date-picker id="promo-dates" name="repeat-dates"></tt-repeat-date-picker>`
+      },
+      {
+        title: "Date constraints",
+        description: "Use mindate and maxdate to restrict which dates the user can select. Set mindate when the range cannot start before a certain date \u2014 for example, today for a future-only promotion. Set maxdate when the range must end before a certain date \u2014 for example, the end of a campaign window.",
+        code: `<label for="promo-dates">Promotional period</label>
+<tt-repeat-date-picker id="promo-dates" name="repeat-dates" mindate="2026-01-01" maxdate="2026-12-31"></tt-repeat-date-picker>`
+      },
+      {
+        title: "Disabled",
+        description: "Use the disabled state when scheduling is temporarily unavailable. If scheduling will never be available to this user, consider hiding the component entirely rather than disabling it.",
+        code: `<label for="promo-dates">Promotional period</label>
+<tt-repeat-date-picker id="promo-dates" name="repeat-dates" disabled></tt-repeat-date-picker>`
+      },
+      {
+        title: "Required",
+        description: "Use required when a schedule must be provided before the form can be submitted. Like a native required input, the component sets a browser validation message, but this produces a disruptive tooltip. Always provide a visible inline error message instead and associate it using aria-describedby.",
+        code: `<form id="required-form" novalidate>
+  <label for="promo-dates">Promotional period</label>
+  <tt-repeat-date-picker id="promo-dates" name="repeat-dates" required aria-describedby="repeat-dates-error"></tt-repeat-date-picker>
+  <span id="repeat-dates-error" hidden>Please select a date range</span>
+  <button type="submit">Submit</button>
+</form>
+
+<script>
+  document.getElementById('required-form').addEventListener('submit', (e) => {
+    e.preventDefault();
+    const errorEl = document.getElementById('repeat-dates-error');
+    if (!e.currentTarget.checkValidity()) {
+      errorEl.hidden = false;
+      return;
+    }
+    errorEl.hidden = true;
+    const value = JSON.parse(new FormData(e.currentTarget).get('repeat-dates'));
+    console.log(value); // { dates: [...], infinite: false }
+  });
+</script>`
+      }
+    ]
+  }
+};
+
 // src/manifests/components/index.ts
 var componentManifest = {
   ...button_default,
@@ -25547,7 +25758,9 @@ var componentManifest = {
   ...statistic_default,
   ...banner_default,
   ...tabs_default,
-  ...paginator_default
+  ...paginator_default,
+  ...weekdayPicker_default,
+  ...repeatDatePicker_default
 };
 
 // src/resources/components/list.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triptease/design-system-mcp",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "MCP server for Triptease design system documentation",
   "type": "module",
   "main": "dist/index.js",
@@ -21,23 +21,25 @@
     "node": ">=18.0.0"
   },
   "componentVersions": {
-    "@triptease/stylesheet": "2.1.4",
+    "@triptease/stylesheet": "2.1.9",
     "@triptease/tt-bar-chart": "1.1.3",
     "@triptease/tt-combobox": "5.7.4",
     "@triptease/tt-data-point": "1.1.1",
     "@triptease/tt-dataset": "1.1.1",
-    "@triptease/tt-date-picker": "6.3.1",
-    "@triptease/tt-date-range-picker": "6.4.1",
-    "@triptease/tt-dialog": "5.2.1",
+    "@triptease/tt-date-picker": "6.3.5",
+    "@triptease/tt-date-range-picker": "6.5.4",
+    "@triptease/tt-dialog": "5.2.2",
     "@triptease/tt-highlight": "1.1.1",
     "@triptease/tt-line-chart": "1.1.3",
     "@triptease/tt-milestone": "1.1.1",
     "@triptease/tt-paginator": "1.0.7",
     "@triptease/tt-table-wrapper": "1.0.6",
-    "@triptease/tt-tabs": "1.1.0"
+    "@triptease/tt-tabs": "1.1.0",
+    "@triptease/tt-repeat-date-picker": "1.0.0",
+    "@triptease/tt-weekday-picker": "1.0.1"
   },
   "dependencies": {
-    "@triptease/stylesheet": "2.1.8"
+    "@triptease/stylesheet": "2.1.9"
   },
   "devDependencies": {
     "@modelcontextprotocol/sdk": "1.26.0",