@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

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

@@ -1,346 +0,0 @@
-[](#slider)Slider
-=================
-
-Overview
---------
-
-Sliders provide a visual indication of adjustable content, where the user can select a value from a range usually represented on a horizontal track.
-
-0
-
-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; }
-
-<IressSlider />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#default-value)Default value
-
-You can set the initial value of the slider using the `defaultValue` prop. If you would like to use a controlled slider, use the `value` prop and sync it with your state using `onChange`.
-
-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; }
-
-<IressSlider defaultValue\={3} />
-
-Copy
-
-### [](#min-max-and-step)Min, max and step
-
-To change the selectable values of the default slider you can change the `min`, `max` and `step` properties.
-
-For instance, if you set `min` to 10 and `max` to 100 the user is able to select any number between 10 and 100.
-
-By setting the `step` property to 10, for example, the user will only be able to select numbers in increments of ten i.e. 10, 20, 30, 40, 50, 60, 70, 80, 90, 100; as shown in the below example.
-
-10
-
-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; }
-
-<IressSlider
-  max\={100}
-  min\={10}
-  step\={10}
-/>
-
-Copy
-
-### [](#ticks-and-labels)Ticks and labels
-
-It is also possible to include ticks and labels for selectable values. This can be done by using the `tickLabels` property and providing an array of numbers and/or `TickLabel` objects.
-
-The `TickLabel` object takes value/label pairs. The value is required, however, an optional label property can be provided. If the label property is not specified, slider will display the value for the label.
-
-If you provide an array of `TickLabel` objects, the value tooltip (the one that appears above the slider's thumb) will use the label from its matching value.
-
-The `tickLabels` prop can also be set to true, in which case they will automatically be inferred from `min`, `max` and `step`.
-
-Zero
-
-Zero
-
-20
-
-40
-
-60
-
-80
-
-100
-
-120
-
-140
-
-160
-
-180
-
-All
-
-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; }
-
-<IressSlider
-  max\={200}
-  min\={0}
-  step\={20}
-  tickLabels\={\[
-    {
-      label: 'Zero',
-      value: 0
-    },
-    {
-      value: 20
-    },
-    {
-      value: 40
-    },
-    {
-      value: 60
-    },
-    {
-      value: 80
-    },
-    {
-      value: 100
-    },
-    {
-      value: 120
-    },
-    {
-      value: 140
-    },
-    {
-      value: 160
-    },
-    {
-      value: 180
-    },
-    {
-      label: 'All',
-      value: 200
-    }
-  \]}
-/>
-
-Copy
-
-### [](#flexible-ticks-and-labels)Flexible ticks and labels
-
-As of version 5, `min`, `max` and `step` is no longer automatically inferred from `tickLabels`, allowing you to have more flexible `tickLabels`.
-
-You can also use the `formatValue` prop to provide a formatted node to replace the value tooltip.
-
-\-10°C
-
-0°C  
-Hypothermia
-
-37°C  
-Normal
-
-45°C  
-Wicked witch  
-of the west
-
-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; }
-
-<IressSlider
-  min\={\-10}
-  max\={50}
-  formatValue\={(value) \=> \`${value}°C\`}
-  tickLabels\={\[
-    { value: 0, label: <\>0°C <br />Hypothermia</\> },
-    { value: 37, label: <\>37°C <br />Normal</\> },
-    { value: 45, label: <\>45°C <br />Wicked witch<br />of the west</\> },
-  \]}
-/>
-
-Copy
-
-### [](#hidden-labels)Hidden labels
-
-Specific labels can be hidden for all or specified breakpoints. This can be done by using the `hiddenOn` property in the `TickLabel` object.
-
-When a label is set to hide on a certain breakpoint, it will be hidden on the screen from that breakpoint onwards. You can reveal it on a larger breakpoint by setting the larger breakpoint to false.
-
-1.  To set the label to hide on all breakpoints you can set the xs property to true: `hiddenOn: { xs: true }`.
-2.  To only show on md and above you can `hiddenOn: { xs: true, md: false }`.
-
-#### [](#behavior-considerations)Behavior considerations
-
-*   The labels will always be available to screen readers to ensure best accessibility, as screen readers are not confined by screen space.
-*   The `ticksAndLabels` prop will still be used to match the `value` of the slider, even if its been set to be hidden on the user's screen.
-
-**xl** breakpoint (1200px - 1499px)
-
-Zero
-
-Zero
-
-20
-
-40
-
-60
-
-80
-
-100
-
-120
-
-140
-
-160
-
-180
-
-All
-
-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\>
-      <CurrentBreakpoint />
-    </IressText\>
-  </IressPanel\>
-  <IressSlider
-    max\={200}
-    min\={0}
-    step\={20}
-    tickLabels\={\[
-      {
-        label: 'Zero',
-        value: 0
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 20
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 40
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 60
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 80
-      },
-      {
-        value: 100
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 120
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 140
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 160
-      },
-      {
-        hiddenOn: {
-          xl: false,
-          xs: true
-        },
-        value: 180
-      },
-      {
-        label: 'All',
-        value: 200
-      }
-    \]}
-  />
-</IressStack\>
-
-Copy
-
-### [](#readonly)Readonly
-
-Sliders can be set to read only by using the `readonly` property. When set to read only the slider will render a read only input and display the specified value.
-
-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).
-
-Zero
-
-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; }
-
-<IressSlider
-  max\={200}
-  min\={0}
-  readonly
-  step\={20}
-  tickLabels\={\[
-    {
-      label: 'Zero',
-      value: 0
-    },
-    {
-      label: 'All',
-      value: 200
-    }
-  \]}
-  value\={0}
-/>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Default value](#default-value)
-    *   [Min, max and step](#min-max-and-step)
-    *   [Ticks and labels](#ticks-and-labels)
-    *   [Flexible ticks and labels](#flexible-ticks-and-labels)
-    *   [Hidden labels](#hidden-labels)
-    *   [Readonly](#readonly)

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

@@ -1,59 +0,0 @@
-[](#spinner)Spinner
-===================
-
-Overview
---------
-
-Spinners notify the user that a task is being processed. They indicate that the app is busy, and should be used when the user has to wait for more than a few seconds.
-
-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; }
-
-<IressSpinner screenreaderText\="Making magic happen..." />
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#standalone)Standalone
-
-When using the spinner on its own, you can define the `screenreaderText` prop to provide context to screen readers.
-
-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; }
-
-<IressSpinner screenreaderText\="Making magic happen..." />
-
-Copy
-
-### [](#message)Message
-
-You can display a message alongside the spinner. In this case, you do not need to define the `screenreaderText` prop, as you have a visible message to the user telling them what is happening.
-
-Making magic happen...
-
-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\="sm"
-  verticalAlign\="middle"
-\>
-  <IressSpinner />
-  <IressText mode\="muted"\>
-    Making magic happen...  </IressText\>
-</IressInline\>
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Examples](#examples)
-    *   [Standalone](#standalone)
-    *   [Message](#message)