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

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

@@ -1,456 +0,0 @@
-[](#select)Select
-=================
-
-Overview
---------
-
-Selects allow users to interact with data and select from a predetermined list of options.
-
-Option 1Option 2Option 3Option 4Option 5
-
-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; }
-
-<IressSelect\>
-  <option value\="1"\>
-    Option 1  </option\>
-  <option value\="2"\>
-    Option 2  </option\>
-  <option value\="3"\>
-    Option 3  </option\>
-  <option value\="4"\>
-    Option 4  </option\>
-  <option value\="5"\>
-    Option 5  </option\>
-</IressSelect\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-Selects allow users to interact with data and select from a predetermined list of options, usually when you are constrained for space and have a limited number of options to choose from.
-
-### [](#when-to-use)When To Use
-
-*   If you have less than 5 options to choose from, consider using `IressRadioGroup` instead.
-*   If you need to display rich content in your selects (eg. icons and metadata), you can use `IressRichSelect`.
-*   Otherwise, `IressSelect` is the way to go.
-
-[](#examples)Examples
----------------------
-
-### [](#options)Options
-
-Individual options can be passed directly into `IressSelect` using the native `option` element.
-
-**Note:** The `mapSelectOptions` helper function, originally used to map options to `<option>` elements, is now deprecated. Instead, you can use `array.map` to map the options to `<option>` elements.
-
-Option 1Option 2Option 3Option 4Option 5
-
-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; }
-
-<IressSelect\>
-  <option value\="1"\>
-    Option 1  </option\>
-  <option value\="2"\>
-    Option 2  </option\>
-  <option value\="3"\>
-    Option 3  </option\>
-  <option value\="4"\>
-    Option 4  </option\>
-  <option value\="5"\>
-    Option 5  </option\>
-</IressSelect\>
-
-Copy
-
-### [](#option-groups)Option groups
-
-Just like the native `<select />` element, `IressSelect` supports option groups.
-
-Group 1 / Option 1Group 1 / Option 2Group 1 / Option 3Group 1 / Option 4Group 1 / Option 5Group 2 / Option 1Group 2 / Option 2Group 2 / Option 3Group 2 / Option 4Group 2 / Option 5
-
-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; }
-
-<IressSelect\>
-  <optgroup label\="Group 1"\>
-    <option value\="1-1"\>
-      Group 1 / Option 1    </option\>
-    <option value\="1-2"\>
-      Group 1 / Option 2    </option\>
-    <option value\="1-3"\>
-      Group 1 / Option 3    </option\>
-    <option value\="1-4"\>
-      Group 1 / Option 4    </option\>
-    <option value\="1-5"\>
-      Group 1 / Option 5    </option\>
-  </optgroup\>
-  <optgroup label\="Group 2"\>
-    <option value\="2-1"\>
-      Group 2 / Option 1    </option\>
-    <option value\="2-2"\>
-      Group 2 / Option 2    </option\>
-    <option value\="2-3"\>
-      Group 2 / Option 3    </option\>
-    <option value\="2-4"\>
-      Group 2 / Option 4    </option\>
-    <option value\="2-5"\>
-      Group 2 / Option 5    </option\>
-  </optgroup\>
-</IressSelect\>
-
-Copy
-
-### [](#non-string-values)Non-string values
-
-If you would like to introduce options with non-string values, you can use the `IressSelectOption` component to define your options.
-
-**Note:** Since the `onChange` event of a select relies on strings, it will try to find a string representation of the value. If you are using non-string values, you will need to ensure the `toString` conversion is unique per option.
-
-Option 1Option 2Group 1 / Option 1Group 1 / Option 2Group 1 / Option 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; }
-
-<IressSelect\>
-  <IressSelectOption value\={1}\>
-    Option 1  </IressSelectOption\>
-  <IressSelectOption value\={2}\>
-    Option 2  </IressSelectOption\>
-  <optgroup label\="Group 1"\>
-    <IressSelectOption value\="1-1"\>
-      Group 1 / Option 1    </IressSelectOption\>
-    <IressSelectOption value\="1-2"\>
-      Group 1 / Option 2    </IressSelectOption\>
-    <IressSelectOption value\="1-3"\>
-      Group 1 / Option 3    </IressSelectOption\>
-  </optgroup\>
-</IressSelect\>
-
-Copy
-
-### [](#placeholder)Placeholder
-
-A default placeholder option can be set using the `placeholder` prop.
-
-Please select an optionOption 1Option 2Option 3Option 4Option 5
-
-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; }
-
-<IressSelect placeholder\="Please select an option"\>
-  <option value\="1"\>
-    Option 1  </option\>
-  <option value\="2"\>
-    Option 2  </option\>
-  <option value\="3"\>
-    Option 3  </option\>
-  <option value\="4"\>
-    Option 4  </option\>
-  <option value\="5"\>
-    Option 5  </option\>
-</IressSelect\>
-
-Copy
-
-### [](#selected-option)Selected option
-
-An option can be selected by using either the `defaultValue` prop for uncontrolled components, or the `value` prop for controlled components.
-
-Option 1Option 2Option 3Option 4Option 5
-
-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; }
-
-<IressSelect defaultValue\={3}\>
-  <option value\="1"\>
-    Option 1  </option\>
-  <option value\="2"\>
-    Option 2  </option\>
-  <option value\="3"\>
-    Option 3  </option\>
-  <option value\="4"\>
-    Option 4  </option\>
-  <option value\="5"\>
-    Option 5  </option\>
-</IressSelect\>
-
-Copy
-
-### [](#sizing)Sizing
-
-Selects can be resized to suit a specific number of characters. This sets an expectation of what data is to be presented; for example using the `16` width for a credit card number.
-
-Widths can also be set as a percentage, allowing the input to take up a proportion of the width of its container.
-
-2Option 1Option 2Option 3Option 4Option 5
-
-4Option 1Option 2Option 3Option 4Option 5
-
-6Option 1Option 2Option 3Option 4Option 5
-
-8Option 1Option 2Option 3Option 4Option 5
-
-10Option 1Option 2Option 3Option 4Option 5
-
-12Option 1Option 2Option 3Option 4Option 5
-
-16Option 1Option 2Option 3Option 4Option 5
-
-25percOption 1Option 2Option 3Option 4Option 5
-
-50percOption 1Option 2Option 3Option 4Option 5
-
-75percOption 1Option 2Option 3Option 4Option 5
-
-100percOption 1Option 2Option 3Option 4Option 5
-
-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"\>
-  <div\>
-    <IressSelect
-      placeholder\="2"
-      width\="2"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="4"
-      width\="4"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="6"
-      width\="6"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="8"
-      width\="8"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="10"
-      width\="10"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="12"
-      width\="12"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="16"
-      width\="16"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="25perc"
-      width\="25perc"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="50perc"
-      width\="50perc"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="75perc"
-      width\="75perc"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-  <div\>
-    <IressSelect
-      placeholder\="100perc"
-      width\="100perc"
-    \>
-      <option value\="1"\>
-        Option 1      </option\>
-      <option value\="2"\>
-        Option 2      </option\>
-      <option value\="3"\>
-        Option 3      </option\>
-      <option value\="4"\>
-        Option 4      </option\>
-      <option value\="5"\>
-        Option 5      </option\>
-    </IressSelect\>
-  </div\>
-</IressStack\>
-
-Copy
-
-### [](#readonly)Readonly
-
-Unlike the standard HTML `select` element, the `IressSelect` component can be set to `readonly`. In this case, an `IressReadonly` component will render the selected label text, while the selected value is rendered in a hidden HTML `input` element for form submission.
-
-If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](?path=/docs/components-readonly--docs).
-
-Option 2
-
-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; }
-
-<IressSelect
-  readonly
-  value\="2"
-\>
-  <option value\="1"\>
-    Option 1  </option\>
-  <option value\="2"\>
-    Option 2  </option\>
-  <option value\="3"\>
-    Option 3  </option\>
-  <option value\="4"\>
-    Option 4  </option\>
-  <option value\="5"\>
-    Option 5  </option\>
-</IressSelect\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [When To Use](#when-to-use)
-*   [Examples](#examples)
-    *   [Options](#options)
-    *   [Option groups](#option-groups)
-    *   [Non-string values](#non-string-values)
-    *   [Placeholder](#placeholder)
-    *   [Selected option](#selected-option)
-    *   [Sizing](#sizing)
-    *   [Readonly](#readonly)

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

@@ -1,214 +0,0 @@
-[](#skeleton)Skeleton
-=====================
-
-Overview
---------
-
-Skeletons can increase perceived performance for users. As opposed to spinners, skeletons make it feel as though things are happening/loading immediately, then the information is incrementally displayed on the screen.
-
-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; }
-
-<IressSkeleton />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#modes)Modes
-
-The `mode` prop can be set to `text` (default), `rect` or `circle`.
-
-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"\>
-  <IressSkeleton mode\="text" />
-  <IressSkeleton
-    height\="100px"
-    mode\="rect"
-  />
-  <IressSkeleton
-    height\="100px"
-    mode\="circle"
-    width\="100px"
-  />
-</IressStack\>
-
-Copy
-
-### [](#text)Text
-
-`text` mode allows you to use `IressSkeleton` in place of `IressText` and keep the same sizing. To achieve this you can use `text` mode in conjunction with the `textVariant` prop.
-
-`text` also accepts the width prop but does not use the `height` prop like other modes. The height is achieved through font size and line height.
-
-Toggle load
-
-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 { useState } from 'react';
-import {
-  IressButton,
-  IressSkeleton,
-  IressSkeletonProps,
-  IressStack,
-  IressText,
-  TEXT\_VARIANTS,
-} from '@iress-oss/ids-components';
-export const SkeletonText \= () \=> {
-  const \[loading, setLoading\] \= useState(true);
-  return (
-    <IressStack gutter\={IressStack.Gutter.Md}\>
-      <IressButton onClick\={() \=> setLoading(!loading)}\>
-        Toggle load      </IressButton\>
-      <IressStack gutter\={IressStack.Gutter.Xs}\>
-        {TEXT\_VARIANTS.map((textVariant) \=> \[
-          loading && <IressSkeleton {...{
-  mode: 'text',
-}} textVariant\={textVariant} />,
-          !loading && (
-            <IressText variant\={textVariant}\>{textVariant}</IressText\>
-          ),
-        \])}
-      </IressStack\>
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#rect)Rect
-
-`rect` mode allows you to use `IressSkeleton` in place of block elements, a good example would be in place of images.
-
-`rect` accepts both `width` and `height` props for sizing. It will default to 100% and a theme defined fallback height (`--iress-skeleton-bone-fallback-height`).
-
-Toggle load
-
-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 { useState } from 'react';
-import {
-  IressButton,
-  IressPlaceholder,
-  IressSkeleton,
-  IressSkeletonProps,
-  IressStack,
-} from '@iress-oss/ids-components';
-export const SkeletonRect \= () \=> {
-  const \[loading, setLoading\] \= useState(true);
-  return (
-    <IressStack gutter\={IressStack.Gutter.Md}\>
-      <IressButton onClick\={() \=> setLoading(!loading)}\>
-        Toggle load      </IressButton\>
-      {loading && <IressSkeleton {...{
-  mode: 'rect',
-  width: '250',
-  height: '150',
-}} />}
-      {!loading && <IressPlaceholder {...{
-  mode: 'rect',
-  width: '250',
-  height: '150',
-}}\>Image</IressPlaceholder\>}
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#circle)Circle
-
-`circle` mode allows you to use `IressSkeleton` in place of circular elements, a good example would be for profile images.
-
-`circle` accepts both `width` and `height` props for sizing. It will default to 100% and a theme defined fallback height (`--iress-skeleton-bone-fallback-height`).
-
-Toggle load
-
-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 { useState } from 'react';
-import {
-  IressButton,
-  IressPlaceholder,
-  IressSkeleton,
-  IressSkeletonProps,
-  IressStack,
-} from '@iress-oss/ids-components';
-export const SkeletonCircle \= () \=> {
-  const \[loading, setLoading\] \= useState(true);
-  return (
-    <IressStack gutter\={IressStack.Gutter.Md}\>
-      <IressButton onClick\={() \=> setLoading(!loading)}\>
-        Toggle load      </IressButton\>
-      {loading && <IressSkeleton {...{
-  mode: 'circle',
-  width: '150',
-  height: '150',
-}} />}
-      {!loading && (
-        <IressPlaceholder {...{
-  mode: 'circle',
-  width: '150',
-  height: '150',
-}} style\={{ borderRadius: '50%' }}\>
-          Image        </IressPlaceholder\>
-      )}
-    </IressStack\>
-  );
-};
-
-Copy
-
-### [](#size)Size
-
-`width` and `height` props can be used to match the layout of the loaded content.
-
-These props accept any unit of dimension, but if no unit is provided it will default to pixels.
-
-**Note:** `height` will be ignored for text mode as this is calculated using the `IressText` component.
-
-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; }
-
-<IressInline gutter\="md"\>
-  <IressSkeleton
-    height\="150"
-    mode\="rect"
-    width\="150"
-  />
-  <IressSkeleton
-    height\="150"
-    mode\="circle"
-    width\="150"
-  />
-  <IressSkeleton
-    height\="150"
-    mode\="text"
-    width\="150"
-  />
-</IressInline\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Modes](#modes)
-    *   [Text](#text)
-    *   [Rect](#rect)
-    *   [Circle](#circle)
-    *   [Size](#size)