@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-autocomplete-recipes-docs.md

@@ -0,0 +1,98 @@
+Recipes
+=======
+
+Experimental
+------------
+
+This API is experimental. It may change in the future based on usage. The team is testing if these use cases exist and see if its worth maintaining this API. If you have any questions, concerns or feedback, please reach out to the design system team.
+
+`useAutocompleteSearch`
+-----------------------
+
+`IressAutocomplete` uses the `useAutocompleteSearch` hook to provide search functionality. If provided an array of `LabelValueMeta`, it will search options based on the `label` property. To fully customise how to search the objects, pass a function instead.
+
+It has been exposed in case you need it in your application to provide custom search functionality.
+
+### Use cases
+
+1.  You want to provide filtering in a certain area of the application (eg. a table).
+
+[](./iframe.html?id=components-autocomplete-recipes--table)
+
+| Name | Gender |
+| --- | --- |
+| Person 1 | Male |
+| Person 2 | Female |
+| Person 3 | Male |
+| Person 4 | Female |
+| Person 5 | Male |
+
+```
+
+const ALL\_ROWS \= \[...Array(5).keys()\].map((number) \=> ({
+  label: \`Person ${number + 1}\`,
+  gender: number % 2 ? 'Female' : 'Male',
+}));
+export const AutocompleteSearchTable \= () \=> {
+  const \[query, setQuery\] \= useState('');
+  const { debouncedQuery, loading, results } \= useAutocompleteSearch({
+    initialOptions: ALL\_ROWS,
+    options: ALL\_ROWS,
+    query,
+  });
+  const caption \= useMemo(() \=> {
+    if (debouncedQuery && !loading) {
+      return \`Results matching ${debouncedQuery}\`;
+    }
+    return loading ? 'Searching...' : '';
+  }, \[debouncedQuery, loading\]);
+  const columns \= useMemo(() \=> {
+    const labelKey \= debouncedQuery ? 'formattedLabel' : 'label';
+    return \[
+      { key: labelKey, label: 'Name' },
+      { key: 'gender', label: 'Gender' },
+    \];
+  }, \[debouncedQuery\]);
+  return (
+    <IressStack gap\="md"\>
+      <IressInput
+        value\={query}
+        onChange\={(e) \=> setQuery(e.target.value)}
+        placeholder\="Search by name"
+      />
+      <IressTable
+        caption\={caption}
+        columns\={columns}
+        rows\={loading ? \[\] : results}
+        empty\={loading ? 'Loading...' : 'No results found'}
+        scope\="col"
+      />
+    </IressStack\>
+  );
+};
+
+```
+
+#### Parameters for useAutocompleteSearch
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| debounceThreshold | 
+\-
+
+ | \- | \- |
+| initialOptions | 
+
+\-
+
+ | \- | \- |
+| options | 
+
+\-
+
+ | \- | \- |
+| query | 
+
+\-
+
+ | \- | \- |

package/generated/docs/components_components-badge-docs.md

@@ -0,0 +1,312 @@
+Badge
+=====
+
+Overview
+--------
+
+Badges are used to highlight an item's status for quick recognition
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-badge--default)
+
+badge
+
+```
+
+<IressBadge mode\="neutral"\>
+  badge
+</IressBadge\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the badge.
+
+ReactNode
+
+
+
+ | \- | 
+
+"badge"
+
+ |
+| host | 
+
+Element to attach the badge to.
+
+ReactElement
+
+
+
+ | \- | Set object |
+| mode | 
+
+Style of the badge.
+
+union
+
+
+
+ | 
+
+'neutral'
+
+ | 
+
+"neutral"
+
+ |
+| pill | 
+
+Whether the Badge should be styled as a pill.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+Examples
+--------
+
+### Mode
+
+The `mode` prop controls the colour scheme of the badge. There are a range of options, including system and brand colours.
+
+[](./iframe.html?id=components-badge--mode)
+
+primarydangerinfosuccesswarningneutral
+
+```
+
+<IressInline gap\="sm"\>
+  <IressBadge mode\="primary"\>
+    primary  </IressBadge\>
+  <IressBadge mode\="danger"\>
+    danger  </IressBadge\>
+  <IressBadge mode\="info"\>
+    info  </IressBadge\>
+  <IressBadge mode\="success"\>
+    success  </IressBadge\>
+  <IressBadge mode\="warning"\>
+    warning  </IressBadge\>
+  <IressBadge mode\="neutral"\>
+    neutral  </IressBadge\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the badge.
+
+ReactNode
+
+
+
+ | \- | 
+
+"badge"
+
+ |
+| host | 
+
+Element to attach the badge to.
+
+ReactElement
+
+
+
+ | \- | Set object |
+| mode | 
+
+Style of the badge.
+
+union
+
+
+
+ | 
+
+'neutral'
+
+ | \- |
+| pill | 
+
+Whether the Badge should be styled as a pill.
+
+boolean
+
+
+
+ | \- | Set boolean |
+
+### Pill
+
+Setting the `pill` prop will render the badge with rounded corners. Often used for displaying numbers.
+
+[](./iframe.html?id=components-badge--pill)
+
+99+
+
+```
+
+<IressBadge
+  mode\="primary"
+  pill
+\>
+  99+
+</IressBadge\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the badge.
+
+ReactNode
+
+
+
+ | \- | 
+
+"99+"
+
+ |
+| host | 
+
+Element to attach the badge to.
+
+ReactElement
+
+
+
+ | \- | Set object |
+| mode | 
+
+Style of the badge.
+
+union
+
+
+
+ | 
+
+'neutral'
+
+ | 
+
+"primary"
+
+ |
+| pill | 
+
+Whether the Badge should be styled as a pill.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+
+### Host
+
+You can attach a badge to the top right of any component by passing the component into the badge's `host` prop.
+
+**Note:** This is for very simple use cases (eg. with a button or tab). For more complex use cases (eg. with a panel), it will be better if you position the badge yourself using CSS.
+
+[](./iframe.html?id=components-badge--host)
+
+Host button3
+
+Host tab99+
+
+```
+
+<IressInline gap\="lg"\>
+  <IressBadge
+    host\={<IressButton\>Host button</IressButton\>}
+    mode\="success"
+    pill
+  \>
+    3  </IressBadge\>
+  <IressBadge
+    host\={<IressTab active label\="Host tab"/>}
+    mode\="success"
+    pill
+  \>
+    99+  </IressBadge\>
+</IressInline\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content of the badge.
+
+ReactNode
+
+
+
+ | \- | 
+
+"badge"
+
+ |
+| host | 
+
+Element to attach the badge to.
+
+ReactElement
+
+
+
+ | \- | \- |
+| mode | 
+
+Style of the badge.
+
+union
+
+
+
+ | 
+
+'neutral'
+
+ | 
+
+"success"
+
+ |
+| pill | 
+
+Whether the Badge should be styled as a pill.
+
+boolean
+
+
+
+ | \- | FalseTrue |