@iress-oss/ids-mcp-server 6.0.0-alpha.2 → 6.0.0-alpha.4

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

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 Option 1Option 2Option 3Option 4Option 5
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSelect\>
   <option value\="1"\>
@@ -141,7 +141,7 @@ Individual options can be passed directly into `IressSelect` using the native `o
 
 Option 1Option 2Option 3Option 4Option 5
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSelect\>
   <option value\="1"\>
@@ -247,7 +247,7 @@ 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 codedrawOpen in CodeSandbox
 
 <IressSelect\>
   <optgroup label\="Group 1"\>
@@ -369,7 +369,7 @@ If you would like to introduce options with non-string values, you can use the `
 
 Option 1Option 2Group 1 / Option 1Group 1 / Option 2Group 1 / Option 3
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSelect\>
   <IressSelectOption value\={1}\>
@@ -477,7 +477,7 @@ A default placeholder option can be set using the `placeholder` prop.
 
 Please select an optionOption 1Option 2Option 3Option 4Option 5
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSelect placeholder\="Please select an option"\>
   <option value\="1"\>
@@ -583,7 +583,7 @@ An option can be selected by using either the `defaultValue` prop for uncontroll
 
 Option 1Option 2Option 3Option 4Option 5
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSelect defaultValue\={3}\>
   <option value\="1"\>
@@ -715,7 +715,7 @@ Widths can also be set as a percentage, allowing the input to take up a proporti
 
 100percOption 1Option 2Option 3Option 4Option 5
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <div\>
@@ -1000,7 +1000,7 @@ If you need more control over the read-only state (for example, rendering a styl
 
 Option 2
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSelect
   readOnly

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

@@ -16,7 +16,7 @@ This component has been recently updated with new props. The props have been mar
 
 [](./iframe.html?id=components-skeleton--default)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSkeleton />
 
@@ -70,7 +70,7 @@ The `mode` prop can be set to `text` (default), `rect` or `circle`.
 
 [](./iframe.html?id=components-skeleton--mode)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressSkeleton mode\="text" />
@@ -135,7 +135,7 @@ string
 
 Toggle load
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import { useState } from 'react';
 import {
@@ -144,7 +144,7 @@ import {
   type IressSkeletonProps,
   IressStack,
   IressText,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { TEXT\_STYLES } from '@theme-preset/tokens/textStyles';
 export const SkeletonText \= () \=> {
   const \[loading, setLoading\] \= useState(true);
@@ -223,7 +223,7 @@ string
 
 Toggle load
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import { useState } from 'react';
 import {
@@ -232,7 +232,7 @@ import {
   IressSkeleton,
   type IressSkeletonProps,
   IressStack,
-} from '@iress-oss/ids-components';
+} from '@/main';
 export const SkeletonRect \= (<'rect'\>) \=> {
   const \[loading, setLoading\] \= useState(true);
   return (
@@ -311,7 +311,7 @@ string
 
 Toggle load
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import { useState } from 'react';
 import {
@@ -320,7 +320,7 @@ import {
   IressSkeleton,
   type IressSkeletonProps,
   IressStack,
-} from '@iress-oss/ids-components';
+} from '@/main';
 export const SkeletonCircle \= (<'circle'\>) \=> {
   const \[loading, setLoading\] \= useState(true);
   return (
@@ -402,7 +402,7 @@ These props accept any unit of dimension, but if no unit is provided it will def
 
 [](./iframe.html?id=components-skeleton--size)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInline gap\="md"\>
   <IressSkeleton

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

@@ -10,7 +10,7 @@ A common use case of the skeleton component is within a card component. Below ar
 
 Toggle load
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import { useState } from 'react';
 import {
@@ -19,7 +19,7 @@ import {
   IressSkeleton,
   IressStack,
   IressText,
-} from '@iress-oss/ids-components';
+} from '@/main';
 const CARD\_LINE\_SIZES \= \['100%', '91%', '95%', '89%', '83%'\];
 const CardLoading \= () \=> (
   <IressCard

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

@@ -16,7 +16,7 @@ This component has been recently updated with new props. The props have been mar
 
 [](./iframe.html?id=components-skiplink--skip-link)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressContainer\>
   <IressSkipLink

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

@@ -26,7 +26,7 @@ Read more
 
 Toggle slideout
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showSlideout } \= useSlideout();
@@ -256,9 +256,9 @@ You can use state to control the slideout by setting the `show` property to `tru
 
 Show slideout using state
 
-```
+Hide codedrawOpen in CodeSandbox
 
-import { IressButton, IressSlideout, type IressSlideoutProps } from '@iress-oss/ids-components';
+import { IressButton, IressSlideout, type IressSlideoutProps } from '@/main';
 import { useState } from 'react';
 export const SlideoutUsingState \= () \=> {
   const \[show, setShow\] \= useState(false);
@@ -466,8 +466,15 @@ To use, wrap your `<App/>` or the component that you want to use the `useSlideou
 
 Show slideout using provider
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressSlideout,
+  type IressSlideoutProps,
+  IressSlideoutProvider,
+  useSlideout,
+} from '@/main';
 const SLIDEOUT\_ID \= 'storybook-slideout';
 export const App \= (slideoutProps: IressSlideoutProps) \=> (
   <IressSlideoutProvider\>
@@ -531,7 +538,7 @@ Slideouts can be used in two modes - `overlay` and `push`. In `overlay` mode the
 
 Overlay slideoutPush slideout
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showSlideout } \= useSlideout();
@@ -584,7 +591,7 @@ const Story \= () \=> {
           {\`Be aware though that push will only work on larger screens (>1200px); on smaller screens the slideout will overlay the content.\`}
         </p\>
         <IressPanel bg\="alt"\>
-          <kn />
+          <Ln />
         </IressPanel\>
       </IressText\>
     </IressSlideout\>
@@ -789,8 +796,15 @@ Slideouts can appear from the left or the right of the screen. The default is ri
 
 rightleft
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressInline,
+  IressSlideout,
+  IressSlideoutProvider,
+  useSlideout,
+} from '@/main';
 const Slideouts \= () \=> {
   const { showSlideout } \= useSlideout();
   return (
@@ -996,12 +1010,19 @@ The width of your slideout can be set using the `size` prop. By default it is `s
 
 smmd
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressInline,
+  IressSlideout,
+  IressSlideoutProvider,
+  useSlideout,
+} from '@/main';
 const Slideouts \= () \=> {
   const { showSlideout } \= useSlideout();
   return (
-    <IressInline gap\="spacing.400"\>
+    <IressInline gap\="spacing.4"\>
       <IressButton onClick\={() \=> showSlideout('sm')}\>sm</IressButton\>
       <IressSlideout id\="sm" size\="sm"\>
         Small slideout      </IressSlideout\>
@@ -1207,7 +1228,7 @@ The `footer` prop is used to set content that should appear underneath the main
 
 Show slideout with footer
 
-```
+Hide codedrawOpen in CodeSandbox
 
 const Story \= () \=> {
   const { showSlideout } \= useSlideout();
@@ -1435,7 +1456,7 @@ Show slideout
 
 Almost before was mighty present had him time. But scorching counsel if mine dote men have or, one yet from pangs and for and despair there. If below nor but the name these deemed oh..
 
-```
+Hide codedrawOpen in CodeSandbox
 
 import {
   IressStack,
@@ -1443,7 +1464,7 @@ import {
   IressText,
   IressSlideout,
   type IressSlideoutProps,
-} from '@iress-oss/ids-components';
+} from '@/main';
 import { useRef, useState } from 'react';
 import { cssVars } from '@iress-oss/ids-tokens';
 export const AbsolutePositionSlideout \= () \=> {
@@ -1705,7 +1726,7 @@ New
 
 <table class="css-1n5o7vh-diff-container"><tbody><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { render, waitFor, screen } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">import { idsFireEvent, componentLoad } from '@iress/ids-react-test-utils';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">import { userEvent } from '@testing-library/user-event';</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">test('opening and closing a slideout', async () =&gt; {</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await componentLoad([</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByRole('button', { name: /open slideout/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'slideout-trigger',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">    'slideout',</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // activate slideout</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  ]);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const slideout = await screen.findByRole('complementary'); // this assumes the slideout has the role="complementary"</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const trigger = screen.getByTestId('slideout-trigger');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const slideout = screen.getByTestId('slideout');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  // In version 5, you can only interact with the slideout once it has been loaded here.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-10regm7-empty-line"><pre></pre></td><td class="css-vl0irh-content css-10regm7-empty-line"><pre class="css-o1u8iu-content-text"></pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // In version 4, you can already interact with the slideout here as its in the DOM at this stage.</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  // activate slideout</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(trigger);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(slideout).toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text"> </pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">  // close slideout</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByTestId('slideout__close-button');</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  const closeButton = screen.getByRole('button', { name: /close/i });</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  idsFireEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await userEvent.click(closeButton);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-rq9a2a-diff-removed"><pre>-</pre></td><td class="css-vl0irh-content css-rq9a2a-diff-removed"><pre class="css-o1u8iu-content-text">  await waitFor(() =&gt; expect(slideout).not.toBeVisible());</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker css-cnnxkz-diff-added"><pre>+</pre></td><td class="css-vl0irh-content css-cnnxkz-diff-added"><pre class="css-o1u8iu-content-text">  await waitForElementToBeRemoved(slideout);</pre></td></tr><tr class="css-1n7ec1i-line"><td class="css-17vezug-marker"><pre></pre></td><td class="css-vl0irh-content"><pre class="css-o1u8iu-content-text">});</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer allowModeChange oldValue\={\`import { render, waitFor, screen } from '@testing-library/react';

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

@@ -18,7 +18,7 @@ This component has been recently updated with new props. The props have been mar
 
 0
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSlider />
 
@@ -147,7 +147,7 @@ You can set the initial value of the slider using the `defaultValue` prop. If yo
 
 3
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSlider defaultValue\={3} />
 
@@ -276,7 +276,7 @@ By setting the `step` property to 10, for example, the user will only be able to
 
 10
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSlider
   max\={100}
@@ -433,7 +433,7 @@ Zero
 
 All
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSlider
   max\={200}
@@ -669,7 +669,7 @@ Normal
 Wicked witch  
 of the west
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSlider
   min\={\-10}
@@ -863,12 +863,12 @@ Zero
 
 All
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressStack gap\="md"\>
   <IressPanel bg\="alt"\>
     <IressText\>
-      <kn />
+      <Ln />
     </IressText\>
   </IressPanel\>
   <IressSlider
@@ -1128,7 +1128,7 @@ If you need more control over the read-only state (for example, rendering a styl
 
 Zero
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSlider
   max\={200}

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

@@ -16,7 +16,7 @@ This component has been recently updated with new props. The props have been mar
 
 [](./iframe.html?id=components-spinner--standalone)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSpinner screenreaderText\="Making magic happen..." />
 
@@ -44,7 +44,7 @@ When using the spinner on its own, you can define the `screenreaderText` prop to
 
 [](./iframe.html?id=components-spinner--standalone)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressSpinner screenreaderText\="Making magic happen..." />
 
@@ -70,7 +70,7 @@ You can display a message alongside the spinner. In this case, you do not need t
 
 Making magic happen...
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInline
   gap\="sm"