@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.1

package/generated/docs/components-tabset-docs.md

@@ -1,341 +0,0 @@
-[](#tab-set)Tab Set
-===================
-
-Overview
---------
-
-Tabs are used to display modular pieces of related data that do not need to be compared or accessed simultaneously.
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTabSet\>
-  <IressTab label\="Address"\>
-    Address information goes here  </IressTab\>
-  <IressTab label\="Employment"\>
-    Employment information goes here  </IressTab\>
-  <IressTab label\="History"\>
-    Medical history goes here  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-The `IressTabSet` is a wrapper for `IressTab` components to make a up a set of tabs.
-
-**Note:** The `mapTabs` helper function, originally used to map tabs to its sub-components, is now deprecated. Instead, you can use `array.map` to map the tabs to `IressTab`.
-
-### [](#navigation)Navigation
-
-You can use the `IressTabSet` component to create tab navigation to control an area of the page, or even navigate between different pages.
-
-Address
-
-Employment
-
-History
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTabSet\>
-  <IressTab label\="Address" />
-  <IressTab label\="Employment" />
-  <IressTab label\="History" />
-</IressTabSet\>
-
-Copy
-
-### [](#with-children-prop)With `children` prop
-
-Using the `children` prop will automatically inject the content as a tab panel when active, along with appropriate attributes for accessibility, ensuring the tab and its associated panel can be navigated by screenreaders.
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTabSet\>
-  <IressTab label\="Address"\>
-    Address information goes here  </IressTab\>
-  <IressTab label\="Employment"\>
-    Employment information goes here  </IressTab\>
-  <IressTab label\="History"\>
-    Medical history goes here  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#default-selected)Default selected
-
-If you would like to set a tab by default, use the `defaultSelected` prop.
-
-Address
-
-Employment
-
-History
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTabSet defaultSelected\={2}\>
-  <IressTab label\="Address" />
-  <IressTab label\="Employment" />
-  <IressTab label\="History" />
-</IressTabSet\>
-
-Copy
-
-### [](#controlled)Controlled
-
-You can use state to control the active tab by setting the `selected` property to which tab you would like to select. This should be the `value` of the tab you would like to select, or if you do not use the `value` prop, it's index.
-
-Change to last tab
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressButton,
-  IressStack,
-  IressTab,
-  IressTabSet,
-  IressTabSetProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const TabsUsingState \= () \=> {
-  const \[selected, setSelected\] \= useState<number\>();
-  return (
-    <IressStack gutter\={IressStack.Gutter.Md}\>
-      <IressButton onClick\={() \=> setSelected(selected \=== 2 ? 0 : 2)}\>
-        {selected \=== 2 ? \`Back to first tab\` : \`Change to last tab\`}
-      </IressButton\>
-      <IressTabSet
-        
-        selected\={selected}
-        onChange\={({ index }) \=> setSelected(index)}
-      \>
-        <IressTab label\="Address"\>Address information goes here</IressTab\>
-        <IressTab label\="Employment"\>Employment information goes here</IressTab\>
-        <IressTab label\="History"\>Medical history goes here</IressTab\>
-      </IressTabSet\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#layout)Layout
-
-`IressTabSet` controls the layout of the tab buttons. These will always appear at the top of the tab container, and can be aligned to the left (default), centrally or to the right via the `layout` prop.
-
-top-left
---------
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-top-center
-----------
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-top-right
----------
-
-Address
-
-Employment
-
-History
-
-Address information goes here
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressStack gutter\="md"\>
-  <IressPanel\>
-    <IressText element\="h2"\>
-      top-left    </IressText\>
-    <IressTabSet layout\="top-left"\>
-      <IressTab label\="Address"\>
-        Address information goes here      </IressTab\>
-      <IressTab label\="Employment"\>
-        Employment information goes here      </IressTab\>
-      <IressTab label\="History"\>
-        Medical history goes here      </IressTab\>
-    </IressTabSet\>
-  </IressPanel\>
-  <IressPanel\>
-    <IressText element\="h2"\>
-      top-center    </IressText\>
-    <IressTabSet layout\="top-center"\>
-      <IressTab label\="Address"\>
-        Address information goes here      </IressTab\>
-      <IressTab label\="Employment"\>
-        Employment information goes here      </IressTab\>
-      <IressTab label\="History"\>
-        Medical history goes here      </IressTab\>
-    </IressTabSet\>
-  </IressPanel\>
-  <IressPanel\>
-    <IressText element\="h2"\>
-      top-right    </IressText\>
-    <IressTabSet layout\="top-right"\>
-      <IressTab label\="Address"\>
-        Address information goes here      </IressTab\>
-      <IressTab label\="Employment"\>
-        Employment information goes here      </IressTab\>
-      <IressTab label\="History"\>
-        Medical history goes here      </IressTab\>
-    </IressTabSet\>
-  </IressPanel\>
-</IressStack\>
-
-Copy
-
-### [](#lazy-loading)Lazy Loading
-
-As of version 5, tabs can be lazy loaded. However, to ensure they work correctly you will need to set the `value` prop on each `IressTab`, as shown in this example.
-
-Toggle tabs
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressButton,
-  IressStack,
-  IressTab,
-  IressTabSet,
-  IressTabSetProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const TabsLazyLoading \= () \=> {
-  const \[loadTabs, setLoadTabs\] \= useState<boolean\>();
-  return (
-    <IressStack gutter\="md"\>
-      <IressButton onClick\={() \=> setLoadTabs(!loadTabs)}\>
-        Toggle tabs      </IressButton\>
-      <IressTabSet {...{
-  defaultSelected: 'medical',
-}}\>
-        {loadTabs && (
-          <\>
-            <IressTab label\="Address" value\="address"\>
-              Address information goes here            </IressTab\>
-            <IressTab label\="Employment" value\="employment"\>
-              Employment information goes here            </IressTab\>
-            <IressTab label\="Medical history" value\="medical"\>
-              Medical history goes here            </IressTab\>
-          </\>
-        )}
-      </IressTabSet\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#badges-and-icons)Badges and icons
-
-You can add rich content into the `label` of the `IressTab` to customise the tab further.
-
-Some common examples include:
-
-*   Adding a badge to the tab button.
-*   Adding icons to the tab button.
-
-Notes:
-
-*   For best accessibility, the `IressTab` component will find the first focusable element inside the custom label to add the tab role.
-
-Address
-
-3
-
-Employment
-
-History
-
-Address information goes here
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTabSet\>
-  <IressBadge
-    host\={<IressTab label\="Address"\>Address information goes here</IressTab\>}
-    mode\="info"
-    pill
-  \>
-    3  </IressBadge\>
-  <IressTab label\={<IressInline gutter\="sm"\><IressIcon name\="user" />{' '}Employment</IressInline\>}\>
-    Employment information goes here  </IressTab\>
-  <IressTab label\="History"\>
-    Medical history goes here  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Navigation](#navigation)
-    *   [With children prop](#with-children-prop)
-*   [Examples](#examples)
-    *   [Default selected](#default-selected)
-    *   [Controlled](#controlled)
-    *   [Layout](#layout)
-    *   [Lazy Loading](#lazy-loading)
-    *   [Badges and icons](#badges-and-icons)

package/generated/docs/components-tabset-tab-docs.md

@@ -1,86 +0,0 @@
-[](#tab)Tab
-===========
-
-Overview
---------
-
-A tab is an interactive element that controls the display of other content, usually a panel
-
-Tab
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTab label\="Tab" />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#active)Active
-
-The tab can be set to active using the `active` prop.
-
-**Note:** If you are using `IressTabSet`, you should use the `selected` prop on the `IressTabSet` to set the active state of its `<IressTab />` children, as the `active` prop will be ignored.
-
-Tab
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTab
-  active
-  label\="Tab"
-/>
-
-Copy
-
-### [](#value)Value
-
-A tab can have a unique value set to it, used to determine its active state in a `IressTabSet` component. The value is not visible to end users.
-
-Tab with value
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTabSet\>
-  <IressTab
-    label\="Tab with value"
-    value\="some-tab-name"
-  />
-</IressTabSet\>
-
-Copy
-
-### [](#panel)Panel
-
-A tab can set its `children` when used inside an `IressTabSet` component, and it will render as its panel. If the tab is not used inside an `IressTabSet` component, `children` will not render.
-
-Tab
-
-Some content for this tab
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTabSet\>
-  <IressTab label\="Tab"\>
-    Some content for this tab  </IressTab\>
-</IressTabSet\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Active](#active)
-    *   [Value](#value)
-    *   [Panel](#panel)

package/generated/docs/components-tag-docs.md

@@ -1,115 +0,0 @@
-[](#tag)Tag
-===========
-
-Overview
---------
-
-Tags represent individual units in a group of selected items.
-
-Tag
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTag\>
-  Tag
-</IressTag\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-### [](#deleting-tags)Deleting tags
-
-The delete button will not automatically remove the tag from the screen. Instead it will trigger the `onDelete` event. Use this event within your app to handle the display of tags.
-
-The text a screen reader will announce defaults to "Delete" but can be changed using the `deleteButtonText` prop.
-
-Tag 1
-
-Tag 2
-
-Tag 3
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-import {
-  IressButton,
-  IressButtonProps,
-  IressIcon,
-  IressInline,
-  IressTag,
-  IressTagProps,
-} from '@iress-oss/ids-components';
-import { useState } from 'react';
-export const TagDeletion \= (args: IressTagProps) \=> {
-  const \[tags, setTags\] \= useState(\['Tag 1', 'Tag 2', 'Tag 3'\]);
-  const handleAdd: IressButtonProps\['onClick'\] \= () \=> {
-    setTags(\[...tags, \`Tag ${tags.length + 1}\`\]);
-  };
-  const handleDelete: IressTagProps\['onDelete'\] \= (tag) \=> {
-    setTags((existingTags) \=>
-      existingTags.filter((existingTag) \=> existingTag !== tag),
-    );
-  };
-  return (
-    <IressInline gutter\="sm" verticalAlign\="middle"\>
-      {tags.map((tag) \=> (
-        <IressTag
-          {...args}
-          key\={tag}
-          deleteButtonText\={args.deleteButtonText ?? \`Delete ${tag}\`}
-          onDelete\={handleDelete}
-        \>
-          {tag}
-        </IressTag\>
-      ))}
-      <IressButton onClick\={handleAdd}\>
-        <IressIcon name\="plus" />
-      </IressButton\>
-    </IressInline\>
-  );
-};
-
-Copy
-
-[](#iresstaginput)IressTagInput
--------------------------------
-
-* * *
-
-Beta
-
-New component
-
-This component is new, please provide feedback to the IDS team if you encounter any issues.
-
-`IressTagInput` allows you to manage multiple tags, and is often used for managing email addresses, domains or other simple metadata that does not have to be selected from a list.
-
-If you need to manage tags that are selected from a existing list, use `IressRichSelect` with the `multiple` prop.
-
-Tag
-
-Hide code
-
-\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
-
-<IressTagInput
-  defaultValue\={\[
-    'Tag'
-  \]}
- />
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [Deleting tags](#deleting-tags)
-*   [IressTagInput](#iresstaginput)