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

package/generated/docs/components_patterns-form-recipes-docs.md

@@ -29,8 +29,24 @@ Email
 
 Submit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressCol,
+  IressContainer,
+  IressDivider,
+  IressForm,
+  IressFormField,
+  IressInput,
+  IressModal,
+  IressRow,
+  IressStack,
+  IressTable,
+  IressText,
+} from '@/main';
+import { useState } from 'react';
+import { type FieldValues } from 'react-hook-form';
 export const WithReadonlyDataForm \= () \=> {
   const \[values, setValues\] \= useState<FieldValues\>({
     firstName: 'Leia',
@@ -161,8 +177,27 @@ Dependents
 
 Edit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressCol,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressIcon,
+  IressInline,
+  IressInput,
+  IressRow,
+  IressSelect,
+  IressStack,
+  IressText,
+  IressToasterProvider,
+  useToaster,
+} from '@/main';
+import { useState } from 'react';
+import { type FieldValues } from 'react-hook-form';
+import { type FormControlValue } from '@/main';
 const Form \= () \=> {
   const dependentOptions \= \[
     { value: 0, label: '0' },
@@ -324,8 +359,16 @@ Here is an example showcasing a form using the native form constraints API to ac
 
 Sign up
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressInput,
+  IressButton,
+  IressField,
+  IressAlert,
+  type InputBaseElement,
+} from '@/main';
+import { useState } from 'react';
 export const NativeValidationForm \= () \=> {
   const \[formData, setFormData\] \= useState({
     name: '',
@@ -444,8 +487,23 @@ Save
 
 Submit main formSubmit all forms
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressDivider,
+  IressFieldGroup,
+  IressForm,
+  IressFormField,
+  IressFormValidationSummary,
+  IressInline,
+  IressInput,
+  IressModal,
+  IressPanel,
+  IressStack,
+  IressTable,
+} from '@/main';
+import { useState } from 'react';
 interface FormData {
   name: string;
 }
@@ -598,8 +656,28 @@ Add Dependant
 
 Submit All
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressDivider,
+  IressFieldGroup,
+  IressFormField,
+  IressInline,
+  IressInput,
+  IressPanel,
+  IressStack,
+  IressText,
+  IressIcon,
+  IressCloseButton,
+  IressHookForm,
+} from '@/main';
+import {
+  useFieldArray,
+  useForm,
+  type Control,
+  type UseFormGetValues,
+} from 'react-hook-form';
 interface Client {
   name: string | undefined;
   salary: number | undefined;
@@ -723,12 +801,12 @@ const DependantSection: React.FC<DependantProps\> \= ({
   );
 };
 export const FormGroups \= () \=> {
-  const form \= IressHookForm.useForm<FormValues\>({
+  const form \= useForm<FormValues\>({
     defaultValues: defaultValues,
     mode: 'onBlur',
   });
   const { control, getValues } \= form;
-  const { fields, append, update, remove } \= IressHookForm.useFieldArray({
+  const { fields, append, update, remove } \= useFieldArray({
     name: 'dependants',
     control,
   });
@@ -805,8 +883,17 @@ Sender
 
 Recipient
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressExpander,
+  IressForm,
+  IressFormField,
+  type IressFormProps,
+  IressInput,
+  IressStack,
+} from '@/main';
+import { useState } from 'react';
 interface FieldValues {
   name?: string;
   email?: string;
@@ -886,10 +973,10 @@ array
  | \- | Choose option...nonesimplesupportedControlsreadOnly |
 | Show React Hook Forms itemsReact Hook Forms | Show React Hook Forms items |
 
-Conditional fields (useWatch)
------------------------------
+Conditional fields (`useWatch`)
+-------------------------------
 
-When you have fields that are conditionally shown, you can use the `IressForm.useWatch` hook to watch the value of another field and conditionally render the field.
+When you have fields that are conditionally shown, you can use the `useWatch` hook to watch the value of another field and conditionally render the field.
 
 **Notes:**
 
@@ -900,7 +987,7 @@ When you have fields that are conditionally shown, you can use the `IressForm.us
 Conditional fields using `useWatch`
 -----------------------------------
 
-This example demonstrates how to use the `IressForm.useWatch()` hook to watch the value of a field and conditionally render other fields based on that value.
+This example demonstrates how to use the `useWatch()` hook to watch the value of a field and conditionally render other fields based on that value.
 
 \*RequiredSelect fields to show
 
@@ -910,8 +997,18 @@ Email
 
 Submit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressCheckbox,
+  IressCheckboxGroup,
+  IressForm,
+  IressFormField,
+  type IressFormProps,
+  IressInput,
+  IressText,
+} from '@/main';
+import { useWatch } from 'react-hook-form';
 interface FieldValues {
   show?: string\[\];
   name?: string;
@@ -920,15 +1017,14 @@ interface FieldValues {
 /\*\*
  \* Conditional fields need to be rendered in a sub-component, to allow it to use the \`useWatch\` \* hook to watch the value of the field dictating the display of conditional fields. \*/
 const FormSectionWithConditionalFields \= () \=> {
-  const show \= IressForm.useWatch<FieldValues\>({ name: 'show' });
+  const show \= useWatch<FieldValues\>({ name: 'show' });
   return (
     <IressText\>
       <h2\>
         Conditional fields using <code\>useWatch</code\>
       </h2\>
       <p\>
-        This example demonstrates how to use the{' '}
-        <code\>IressForm.useWatch()</code\> hook to watch the value of a field and        conditionally render other fields based on that value.      </p\>
+        This example demonstrates how to use the <code\>useWatch()</code\> hook to        watch the value of a field and conditionally render other fields based        on that value.      </p\>
       <IressFormField
         name\="show"
         label\="Select fields to show"
@@ -1020,10 +1116,18 @@ Visible Input
 
 Submit
 
-```
+Hide codedrawOpen in CodeSandbox
 
+import {
+  IressButton,
+  IressFormField,
+  IressHookForm,
+  IressInput,
+  IressStack,
+} from '@/main';
+import { useForm } from 'react-hook-form';
 export const HiddenInputsForm \= () \=> {
-  const form \= IressForm.useForm();
+  const form \= useForm();
   const { register } \= form;
   // This is a hidden input field that the user cannot see or interact with.
   // This is the recommended way to handle hidden inputs in Iress forms.
@@ -1108,8 +1212,22 @@ Submit
 
 * * *
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressStack,
+  IressRow,
+  IressCol,
+  IressFormField,
+  IressInputCurrency,
+  IressSelect,
+  IressButton,
+  IressText,
+  IressDivider,
+  IressHookForm,
+} from '@/main';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
 interface FormData {
   primaryField: string;
   dependentField: string;
@@ -1142,7 +1260,7 @@ const validateBudgetInput \= (
 };
 export const ValidationDependOnOtherFields \= () \=> {
   const \[submitted, setSubmitted\] \= useState<FormData | undefined\>(undefined);
-  const form \= IressForm.useForm<FormData\>({
+  const form \= useForm<FormData\>({
     defaultValues: {
       primaryField: '',
       dependentField: '',
@@ -1282,10 +1400,22 @@ Upload
 
 Submit
 
-```
-
+Hide codedrawOpen in CodeSandbox
+
+import {
+  IressButton,
+  IressForm,
+  IressInput,
+  IressFormField,
+  IressStack,
+  IressIcon,
+  IressText,
+  IressPanel,
+  IressInline,
+  type IressInputProps,
+} from '@/main';
 import React, { useState } from 'react';
-
+import { useDropzone } from 'react-dropzone';
 interface TranscriptFormValues {
   transcript: TranscriptData | string;
 }

package/generated/docs/components_patterns-loading-docs.md

@@ -16,8 +16,21 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 [](./iframe.html?id=patterns-loading--wizard)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -263,8 +276,11 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 Update
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
+import { IressButton, IressLoading, IressStack } from '@/main';
+import { useCallback, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 const API \= {
   chart: async () \=>
     new Promise<boolean\>((resolve) \=> {
@@ -426,7 +442,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 This is taking longer than expected...
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading pattern\="default" />
 
@@ -533,7 +549,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
     ...
     
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading
   messageList\={{
@@ -713,8 +729,21 @@ In the news
 
 Loading...
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressCard,
+  IressCol,
+  IressContainer,
+  IressDivider,
+  IressInline,
+  IressLoading,
+  IressRow,
+  IressSkeleton,
+  IressStack,
+  IressText,
+} from '@/main';
+import { type ReactNode, useEffect, useState } from 'react';
 const API \= {
   criticalContent: async () \=>
     new Promise<ReactNode\>((resolve) \=> {
@@ -900,7 +929,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 [](./iframe.html?id=patterns-loading-patterns-startup--start-up)
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressLoading
   messageList\={{
@@ -1080,7 +1109,7 @@ This is taking longer than expected...
 
 Cancel
 
-Hide codeRefresh
+Hide codedrawOpen in CodeSandboxRefresh
 
 <IressInline gap\="sm"\>
   <IressLoading
@@ -1202,8 +1231,21 @@ The wizard example can be translated to use `IressLoadingSuspense` as follows (i
 
 [](./iframe.html?id=patterns-loading-suspense--suspense)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
+import { IressLoadingSuspense } from '../LoadingSuspense';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1377,8 +1419,21 @@ number
 
 [](./iframe.html?id=patterns-loading-suspense--fast-suspense)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
+import { IressLoadingSuspense } from '../LoadingSuspense';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1601,8 +1656,21 @@ Here you can see how a wizard can use the `IressLoading` component at different
 
 [](./iframe.html?id=patterns-loading--wizard)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }
@@ -1754,8 +1822,21 @@ export const LoadingWizard \= () \=> {
 
 [](./iframe.html?id=patterns-loading--fast-wizard)
 
-Hide codeRefresh
-
+Hide codedrawOpen in CodeSandboxRefresh
+
+import {
+  IressButton,
+  IressContainer,
+  IressForm,
+  IressFormField,
+  IressInputCurrency,
+  IressLoading,
+  IressPanel,
+  IressStack,
+  IressText,
+} from '@/main';
+import { useDeferredValue, useEffect, useState } from 'react';
+import retirementGraph from './retirement-graph.png';
 interface PageProps {
   setPage: (page: number) \=> void;
 }

package/generated/docs/components_patterns-shadow-docs.md

@@ -16,7 +16,7 @@ This component is new, please provide feedback to the Frontend Enablement team i
 
 [](./iframe.html?id=patterns-shadow--shadow)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressShadow\>
   <IressPanel\>
@@ -113,7 +113,7 @@ It has similar props to the `IressProvider`, however it will apply the styles to
 
 [](./iframe.html?id=patterns-shadow--shadow)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressShadow\>
   <IressPanel\>

package/generated/docs/components_sandbox-docs.md

@@ -0,0 +1,4 @@
+Redirecting to CodeSandbox...
+-----------------------------
+
+[Click here to open CodeSandbox](https://codesandbox.io/api/v1/sandboxes/define?parameters=N4IgZglgNgpgziAXKCA7AJjAHgOgC5xZKgDGA9qnjJUiBALYAOZATngAQBKMAhiR2BZl67AOQte_UQG4AOqgbM2XSXgAiAeQCy7QcLES-eALTphAehJQI1PDPmLWHYOwCSEuHAAKPVDCgANG4e3kIAbhCYLOwAvrpCIqIAAhAhxmSe5pFwxuRMFLZw9gr5ysmp8DkZcFnoOXnMfpQ16BBweObtAJ6wOCSexfLm5uzw1pSmbTwARrDGflgm4zDshvzGEoLwABbmFFBdxthKJg0FzfLkqO3sAIKMjOwAvOwAFACUzwB87MDy7KsYHgAK4sVDsAA87kqPj8UHY0wA5k9ZCAeFA8KivtDPOw1PAIIjwQBlLrtGAiWH-CHmHHeXz-L5yVAxZnybhGTRaPqGKicMhkPCvMwkYH0Ww4RFAgCisHFlAAQl1XOhXuIBXZ3gBCd44CQYGAsV7_SEc_g4Yl4FgQfhaMiYL4mgFQkJecKRQ2O8EAn0Q-6Pcxen2Q2mu91RIMhs14C1Wm14O0OgLyd7MkABOhwBVoHgsLpIMDouAwGIZtCYXDbPD0KDEEBXKg0RAgCFVmuR1u8dCR514CB4WDYkJ4glE9ik8n0Gl9gcwDvmbZdjvTe1dHuQ1phdiRFEgISCrE0zfzlfoNfyGltqBe9OZ7OoXP5xCFqDF0sgRh8ADWPClOAAVnAFB1g2ti0H83qopgjDUJgqAkDYcCoogvxOuwqJrJiSDoSAUA8FQ7Sosm3oAhhqimMIyE4XhBFYcRwaoikaTVLU9TCI0hRUai6KMNsPCoiaMTyDEt5tPej4FkWJYxDEQA).

package/generated/docs/components_styling-props-colour-docs.md

@@ -16,7 +16,7 @@ Below is an example of a component using `bg` and `color` to create a featured p
 
 This is a featured panel, in case you want to highlight something important or draw attention to a specific piece of content.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   bg\="colour.primary.fill"
@@ -61,7 +61,7 @@ Below is an example of using the `color` prop to highlight text throughout a com
 
 Sometimes actions are **successful**, and sometimes they are **dangerous**.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel\>
   <p\>

package/generated/docs/components_styling-props-elevation-docs.md

@@ -16,7 +16,7 @@ The `layerStyle` prop allows you to draw attention to certain parts of the scree
 
 This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel layerStyle\="elevation.raised"\>
   This panel is raised. This is useful for creating a visual hierarchy and drawing attention to important content.
@@ -46,7 +46,7 @@ It can be set to `true` to enable focus styles when the element is focused using
 
 This element will have focus styles applied when it is focused. This is useful for accessibility and keyboard navigation.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   focusable\="true"

package/generated/docs/components_styling-props-radius-docs.md

@@ -10,11 +10,11 @@ The `borderRadius` prop allows you to change the border radius of any component.
 
 [](./iframe.html?id=styling-props-radius--border-radius)
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressInput
   borderRadius\="radius.system.layout"
-  p\="spacing.400"
+  p\="spacing.4"
   placeholder\="Search everything"
   textStyle\="typography.body.lg"
 />
@@ -40,7 +40,7 @@ In some cases you may need to remove the border-radius to achieve design require
 
 No radius here
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   bg\="alt"

package/generated/docs/components_styling-props-reference-docs.md

@@ -42,7 +42,7 @@ Styling props reference
 | [textStyle](/?path=/docs/styling-props-typography--docs#textStyle) | font | [Typography](/?path=/docs/foundations-tokens-typography--docs) | Yes |
 | [width](/?path=/docs/styling-props-sizing--docs#inputwidths) | width | N/A | Yes |
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <StylingPropsReferenceTable gap\="md" />
 
@@ -108,7 +108,7 @@ If you have been using the utility classes from previous versions of IDS (eg. `i
 
 <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">&lt;IressPanel className="iress-m--sm" /&gt;</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">&lt;IressPanel m="sm" /&gt;</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer oldValue\={\`<IressPanel className="iress-m--sm" />\`} newValue\={\`<IressPanel m="sm" />\`} />
@@ -140,7 +140,7 @@ If you have been using the internal component tokens (eg. `--iress-background-co
 
 <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">&lt;IressPanel style={{ '--iress-background-color': 'var(--iress-g-success-color)' }} /&gt;</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">&lt;IressPanel bg="colour.system.success.fill" /&gt;</pre></td></tr></tbody></table>
 
-```
+Hide codedrawOpen in CodeSandbox
 
 {
   render: () \=> <DiffViewer oldValue\={\`<IressPanel style={{ '--iress-background-color': 'var(--iress-g-success-color)' }} />\`} newValue\={\`<IressPanel bg="colour.system.success.fill" />\`} />

package/generated/docs/components_styling-props-screen-readers-docs.md

@@ -12,7 +12,7 @@ The `srOnly` prop allows you to set a component to be only visible on screen rea
 
 Hello screen readers
 
-Show code
+Show codedrawOpen in CodeSandbox
 
 #### Props
 
@@ -33,7 +33,7 @@ The `srOnly` prop is responsive, allowing you to show content on larger screens
 
 This content is visible on large screens and screen readers
 
-Show code
+Show codedrawOpen in CodeSandbox
 
 #### Props
 

package/generated/docs/components_styling-props-sizing-docs.md

@@ -34,7 +34,7 @@ For variable data entry, you can use percentage widths. These are usually used i
 
 Credit card number wide panel
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressPanel
   bg\="alt"
@@ -74,7 +74,7 @@ In some cases however, you may want to restrain the width even further (for exam
 
 This container is extra readable cause its maxWidth is set to: `container.md`.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressContainer
   bg\="alt"
@@ -122,7 +122,7 @@ Iress was founded in **1993** in Melbourne, Australia. The company's initial pro
 
 In **2000**, Iress listed on the **Australian Stock Exchange (ASX)** under the ticker **IRE**, signaling its growth beyond market data services.
 
-```
+Hide codedrawOpen in CodeSandbox
 
 <IressContainer
   bg\="alt"