@primereact/mcp 11.0.0-rc.2

package/data/llms/styled/components/skeleton.md

@@ -0,0 +1,226 @@
+# Skeleton
+
+Skeleton is a placeholder to display instead of the actual content.
+
+```tsx
+import { Skeleton } from '@primereact/ui/skeleton';
+
+export default function Preview() {
+    return (
+        <div className="max-w-xs mx-auto flex flex-col gap-3">
+            <Skeleton borderRadius="0.75rem" className="aspect-video h-auto! w-full" />
+            <div className="flex gap-3">
+                <Skeleton shape="circle" size="2.25rem" />
+                <div className="flex-1 flex flex-col gap-1.5 py-0.5">
+                    <Skeleton width="100%" borderRadius="4px" className="h-auto! flex-1" />
+                    <Skeleton width="60%" borderRadius="4px" className="h-auto! flex-1" />
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Skeleton } from '@primereact/ui/skeleton';
+```
+
+```tsx
+<Skeleton />
+```
+
+## Examples
+
+### Basic
+
+Placeholder shapes that mimic content layout during loading.
+
+```tsx
+import { Skeleton } from '@primereact/ui/skeleton';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex gap-4 max-w-xs mx-auto">
+            <Skeleton shape="circle" size="2.5rem" />
+            <div className="flex-1 flex flex-col gap-1.5 py-0.5">
+                <Skeleton width="100%" borderRadius="4px" className="h-auto! flex-1" />
+                <Skeleton width="90%" borderRadius="4px" className="h-auto! flex-1" />
+            </div>
+        </div>
+    );
+}
+```
+
+### Card
+
+Sample Card implementation using different `Skeleton` components and Tailwind CSS utilities.
+
+```tsx
+import { Skeleton } from '@primereact/ui/skeleton';
+
+export default function ShapesDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <div className="max-w-sm w-full space-y-4">
+                <div className="flex items-start gap-4">
+                    <Skeleton shape="circle" size="3.5rem" />
+                    <div className="flex-1">
+                        <div className="flex items-center justify-between">
+                            <Skeleton width="40%" height="1.5rem" />
+                        </div>
+                        <div className="space-y-1.5 mt-3">
+                            <Skeleton width="100%" borderRadius="4px" />
+                            <Skeleton width="90%" borderRadius="4px" />
+                        </div>
+                        <Skeleton className="mt-4 aspect-video w-full h-auto!" />
+                        <div className="flex items-center gap-4 mt-4">
+                            <Skeleton width="4rem" height="1.75rem" />
+                            <Skeleton width="4rem" height="1.75rem" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+### Shapes
+
+Various shapes and sizes can be created using styling properties like `shape`, `width`, `height`, `size`, `borderRadius` and `className`.
+
+```tsx
+import { Skeleton } from '@primereact/ui/skeleton';
+
+export default function ShapesDemo() {
+    return (
+        <div>
+            <div className="flex flex-col items-start gap-8 max-w-sm">
+                <div className="w-full">
+                    <h5>Circle</h5>
+                    <div className="flex items-end gap-4">
+                        <Skeleton shape="circle" size="5rem" />
+                        <Skeleton shape="circle" size="4rem" />
+                        <Skeleton shape="circle" size="3rem" />
+                        <Skeleton shape="circle" size="2rem" />
+                    </div>
+                </div>
+                <div className="w-full">
+                    <h5>Square</h5>
+                    <div className="flex items-end gap-4">
+                        <Skeleton size="5rem" />
+                        <Skeleton size="4rem" />
+                        <Skeleton size="3rem" />
+                        <Skeleton size="2rem" />
+                    </div>
+                </div>
+                <div className="w-full">
+                    <h5>Rectangle</h5>
+                    <div className="flex flex-col gap-2 w-full">
+                        <Skeleton />
+                        <Skeleton width="12rem" />
+                        <Skeleton width="7rem" />
+                        <Skeleton height="4rem" />
+                        <Skeleton width="12rem" height="4rem" />
+                    </div>
+                </div>
+                <div className="w-full">
+                    <h5>Rounded</h5>
+                    <div className="flex flex-col gap-2 w-full">
+                        <Skeleton borderRadius="16px" />
+                        <Skeleton width="12rem" borderRadius="16px" />
+                        <Skeleton width="7rem" borderRadius="16px" />
+                        <Skeleton height="4rem" borderRadius="16px" />
+                        <Skeleton width="12rem" height="4rem" borderRadius="16px" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+### Color
+
+Customize the background color of the skeleton.
+
+```tsx
+import { Skeleton } from '@primereact/ui/skeleton';
+
+export default function ColorDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <div className="max-w-sm w-full space-y-4">
+                <Skeleton borderRadius="4px" className="bg-blue-500 dark:bg-blue-700" />
+                <Skeleton borderRadius="4px" className="bg-red-500 dark:bg-red-700" />
+                <Skeleton
+                    borderRadius="4px"
+                    className="bg-blue-100 dark:bg-blue-950 after:bg-[linear-gradient(90deg,rgba(255,255,255,0.01)_0%,oklch(0.82_0.18_260)_50%,rgba(255,255,255,0.01)_100%)] dark:after:bg-[linear-gradient(90deg,rgba(255,255,255,0)_0%,oklch(0.42_0.18_260)_50%,rgba(255,255,255,0)_100%)]"
+                />
+                <Skeleton
+                    borderRadius="4px"
+                    className="bg-red-100 dark:bg-red-950 after:bg-[linear-gradient(90deg,rgba(255,255,255,0.01)_0%,oklch(63.7%_0.237_25.331)_50%,rgba(255,255,255,0.01)_100%)] dark:after:bg-[linear-gradient(90deg,rgba(255,255,255,0)_0%,oklch(63.7%_0.237_25.331)_50%,rgba(255,255,255,0)_100%)]"
+                />
+            </div>
+        </div>
+    );
+}
+```
+
+### Grid
+
+Sample Grid implementation using different Skeleton components and Tailwind CSS utilities.
+
+```tsx
+import { Skeleton } from '@primereact/ui/skeleton';
+
+export default function GridDemo() {
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8">
+            {Array.from({ length: 6 }).map((_, index) => (
+                <div key={index} className="p-4 rounded-lg bg-surface-50 dark:bg-surface-800/75">
+                    <Skeleton width="100%" height="10rem" className="" />
+                    <div className="mt-4 flex items-start gap-3">
+                        <Skeleton shape="circle" size="2.5rem" />
+                        <div className="flex-1 flex flex-col gap-2">
+                            <Skeleton width="100%" borderRadius="4px" />
+                            <Skeleton width="90%" borderRadius="4px" />
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/skeleton#api) for sub-component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/skeleton#api) for hook documentation.
+
+### Accessibility
+
+See [Skeleton Primitive](/docs/primitive/components/skeleton#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Skeleton" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Skeleton" category="token" />

package/data/llms/styled/components/slider.md

@@ -0,0 +1,453 @@
+# Slider
+
+Slider is a component to provide input with a drag handle.
+
+```tsx
+'use client';
+import { Slider, type SliderRootChangeEvent } from '@primereact/ui/slider';
+import * as React from 'react';
+
+export default function Preview() {
+    const [progress, setProgress] = React.useState(128);
+
+    const DURATION = 225;
+    const totalSeconds = Math.floor(progress);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const currentTime = `${minutes}:${String(seconds).padStart(2, '0')}`;
+
+    return (
+        <div className="flex items-center gap-4 justify-center mx-auto w-full">
+            <img
+                className="h-20 w-auto rounded-lg"
+                src="https://images.unsplash.com/photo-1531777992189-ad52457fbe93?w=200&h=200&fit=crop&auto=format"
+                alt="Ivory by Soft Landing"
+            />
+            <div className="w-full max-w-3xs">
+                <div>
+                    <div className="text-lg font-bold text-color">Ivory</div>
+                    <div className="text-surface-500">Soft Landing</div>
+                </div>
+
+                <div className="flex items-center gap-4 mt-2">
+                    <span className="text-sm tabular-nums text-surface-500">{currentTime}</span>
+                    <Slider.Root
+                        value={progress}
+                        onValueChange={(e: SliderRootChangeEvent) => setProgress(e.value as number)}
+                        min={0}
+                        max={DURATION}
+                        className="flex-1"
+                    >
+                        <Slider.Track>
+                            <Slider.Range />
+                        </Slider.Track>
+                        <Slider.Handle />
+                    </Slider.Root>
+                    <span className="text-sm tabular-nums text-surface-500">3:45</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+## Usage
+
+```tsx
+import { Slider } from '@primereact/ui/slider';
+```
+
+```tsx
+<Slider.Root>
+    <Slider.Track>
+        <Slider.Range />
+    </Slider.Track>
+    <Slider.Handle />
+</Slider.Root>
+```
+
+## Examples
+
+### Basic
+
+Select a numeric value by dragging a handle along a track.
+
+```tsx
+import { Slider } from '@primereact/ui/slider';
+
+export default function BasicDemo() {
+    return (
+        <Slider.Root defaultValue={50} className="max-w-3xs mx-auto w-full">
+            <Slider.Track>
+                <Slider.Range />
+            </Slider.Track>
+            <Slider.Handle />
+        </Slider.Root>
+    );
+}
+```
+
+### Step
+
+Size of each movement is defined with the `step` property.
+
+```tsx
+import { Slider } from '@primereact/ui/slider';
+
+export default function StepDemo() {
+    return (
+        <Slider.Root defaultValue={20} step={20} className="max-w-3xs mx-auto w-full">
+            <Slider.Track>
+                <Slider.Range />
+            </Slider.Track>
+            <Slider.Handle />
+        </Slider.Root>
+    );
+}
+```
+
+### Range
+
+Slider provides two handles to define two values. In range mode, value should be an array instead of a single value.
+
+```tsx
+import { Slider } from '@primereact/ui/slider';
+
+export default function RangeDemo() {
+    return (
+        <Slider.Root defaultValue={[20, 80]} className="max-w-3xs mx-auto w-full">
+            <Slider.Track>
+                <Slider.Range />
+            </Slider.Track>
+            <Slider.Handle index={0} />
+            <Slider.Handle index={1} />
+        </Slider.Root>
+    );
+}
+```
+
+### Handles Distance
+
+```tsx
+import { Slider } from '@primereact/ui/slider';
+
+export default function HandlesDistanceDemo() {
+    return (
+        <Slider.Root defaultValue={[20, 80]} className="max-w-3xs mx-auto w-full" minStepsBetweenHandles={20}>
+            <Slider.Track>
+                <Slider.Range />
+            </Slider.Track>
+            <Slider.Handle index={0} />
+            <Slider.Handle index={1} />
+        </Slider.Root>
+    );
+}
+```
+
+### Vertical
+
+Default layout of slider is `horizontal`, use `orientation` property for the alternative `vertical` mode.
+
+```tsx
+import { Slider } from '@primereact/ui/slider';
+
+export default function VerticalDemo() {
+    return (
+        <div className="grid grid-cols-3 h-56 gap-4 w-fit mx-auto">
+            {sliders.map((item, index) => (
+                <div key={item} className="flex flex-col items-center justify-center gap-3">
+                    <Slider.Root defaultValue={Math.max(Math.random() * 100, 0)} orientation="vertical" key={index}>
+                        <Slider.Track>
+                            <Slider.Range />
+                        </Slider.Track>
+                        <Slider.Handle />
+                    </Slider.Root>
+                    <span className="font-mono text-xs uppercase text-surface-500">{item}</span>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+const sliders = ['Bass', 'Mid', 'Treble'];
+```
+
+### Disabled
+
+When `disabled` is present, the element cannot be edited and focused.
+
+```tsx
+import { Slider } from '@primereact/ui/slider';
+
+export default function DisabledDemo() {
+    return (
+        <div className="max-w-3xs w-full mx-auto space-y-12">
+            <div>
+                <h5 className="mb-2 text-sm font-medium">Disabled Slider</h5>
+                <Slider.Root defaultValue={50} disabled>
+                    <Slider.Track>
+                        <Slider.Range />
+                    </Slider.Track>
+                    <Slider.Handle />
+                </Slider.Root>
+            </div>
+
+            <div>
+                <h5 className="mb-2 text-sm font-medium">Disabled All Handles</h5>
+                <Slider.Root defaultValue={[20, 80]} disabled>
+                    <Slider.Track>
+                        <Slider.Range />
+                    </Slider.Track>
+                    <Slider.Handle index={0} />
+                    <Slider.Handle index={1} />
+                </Slider.Root>
+            </div>
+
+            <div>
+                <h5 className="mb-2 text-sm font-medium">Disabled Single Handle</h5>
+                <Slider.Root defaultValue={[20, 80]}>
+                    <Slider.Track>
+                        <Slider.Range />
+                    </Slider.Track>
+                    <Slider.Handle index={0} disabled />
+                    <Slider.Handle index={1} />
+                </Slider.Root>
+            </div>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+```tsx
+'use client';
+import { InputNumber, type InputNumberRootValueChangeEvent } from '@primereact/ui/inputnumber';
+import { Slider } from '@primereact/ui/slider';
+import { SliderRootChangeEvent } from '@primereact/ui/slider';
+import * as React from 'react';
+
+export default function ControlledDemo() {
+    const [value, setValue] = React.useState(50);
+
+    return (
+        <div className="max-w-3xs w-full mx-auto">
+            <InputNumber.Root
+                value={value}
+                onValueChange={(e: InputNumberRootValueChangeEvent) => setValue(e.value as number)}
+                fluid
+                className="mb-4"
+            >
+                <InputNumber.Input />
+            </InputNumber.Root>
+            <Slider.Root value={value} onValueChange={(e: SliderRootChangeEvent) => setValue(e.value as number)} className="w-full">
+                <Slider.Track>
+                    <Slider.Range />
+                </Slider.Track>
+                <Slider.Handle />
+            </Slider.Root>
+        </div>
+    );
+}
+```
+
+### Value Change
+
+```tsx
+'use client';
+import { Slider, type SliderRootChangeEvent } from '@primereact/ui/slider';
+import * as React from 'react';
+
+export default function ValueChangeDemo() {
+    const [value, setValue] = React.useState(50);
+    const [endValue, setEndValue] = React.useState(50);
+
+    return (
+        <div className="max-w-3xs mx-auto w-full flex flex-col items-center space-y-4">
+            <div className="text-sm text-surface-500 font-mono">onValueChange: {value}</div>
+
+            <div className="text-sm text-surface-500 font-mono"> onValueChangeEnd: {endValue}</div>
+            <Slider.Root
+                value={value}
+                onValueChange={(e: SliderRootChangeEvent) => setValue(e.value as number)}
+                onValueChangeEnd={(e: SliderRootChangeEvent) => setEndValue(e.value as number)}
+                className="w-full"
+            >
+                <Slider.Track>
+                    <Slider.Range />
+                </Slider.Track>
+                <Slider.Handle />
+            </Slider.Root>
+        </div>
+    );
+}
+```
+
+### Custom
+
+```tsx
+'use client';
+import { VolumeUp } from '@primeicons/react';
+import { Slider, type SliderTrackInstance } from '@primereact/ui/slider';
+
+export default function CustomDemo() {
+    return (
+        <div className="max-w-xs mx-auto w-full space-y-16">
+            <Slider.Root defaultValue={50}>
+                <Slider.Track className="h-2! bg-blue-100! dark:bg-blue-950!">
+                    <Slider.Range className="bg-blue-500!" />
+                </Slider.Track>
+                <Slider.Handle className="before:hidden! border-2! border-blue-500! bg-surface-0! dark:bg-surface-900! rotate-45! rounded-md!" />
+            </Slider.Root>
+
+            <Slider.Root defaultValue={50}>
+                <Slider.Track className="h-2! bg-amber-100! dark:bg-amber-950!">
+                    <Slider.Range className="bg-amber-500!" />
+                </Slider.Track>
+                <Slider.Handle className="before:hidden! w-4! h-5! border-2! border-amber-500! bg-surface-0! dark:bg-surface-900! rounded-sm!" />
+            </Slider.Root>
+
+            <Slider.Root defaultValue={50} className="h-8! rounded-full!">
+                <Slider.Track className="h-full! rounded-full! border border-surface-100 dark:border-surface-900 bg-surface-100! dark:bg-surface-900!">
+                    {({ slider }: SliderTrackInstance) => {
+                        return (
+                            <>
+                                <VolumeUp className="text-surface-400 absolute left-2 top-1/2 -translate-y-1/2 z-10" />
+                                <Slider.Range
+                                    className="rounded-full! bg-surface-0!"
+                                    style={{ width: `clamp(2rem, calc(${slider?.state.value}% + 1rem), 100%)` }}
+                                >
+                                    <Slider.Handle
+                                        style={{ insetBlockStart: '50%', insetInlineStart: 'auto', insetInlineEnd: '0', translate: '0 -50%' }}
+                                        className="z-20 h-[calc(100%+2px)]! dark:h-full! aspect-square! w-auto! before:hidden! bg-surface-0! border! border-surface-200! shadow-sm"
+                                    />
+                                </Slider.Range>
+                            </>
+                        );
+                    }}
+                </Slider.Track>
+            </Slider.Root>
+
+            <Slider.Root defaultValue={50}>
+                <Slider.Track className="h-8! flex! items-center gap-1 w-full bg-transparent! cursor-grab active:cursor-grabbing">
+                    {({ slider }: SliderTrackInstance) => {
+                        return (
+                            <>
+                                <span
+                                    className="bg-linear-to-r from-sky-200 via-indigo-200 to-blue-400 h-full rounded-full"
+                                    style={{ width: `calc(${slider?.state.value}% - 1.25rem)` }}
+                                />
+                                <Slider.Handle
+                                    style={{ insetInlineStart: 'auto', translate: 'auto' }}
+                                    className="relative! before:hidden! size-8! shrink-0 bg-surface-0! dark:bg-surface-800! border border-surface-200! dark:border-surface-700! shadow-sm"
+                                />
+                                <span
+                                    className="h-full bg-surface-100 dark:bg-surface-900 rounded-full"
+                                    style={{ width: `calc(100% - ${slider?.state.value}% - 1.25rem)` }}
+                                />
+                            </>
+                        );
+                    }}
+                </Slider.Track>
+            </Slider.Root>
+        </div>
+    );
+}
+```
+
+### Filter
+
+Image filter implementation using multiple sliders.
+
+```tsx
+'use client';
+import { Slider } from '@primereact/ui/slider';
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
+import Image from 'next/image';
+import { SliderRootChangeEvent } from '@primereact/ui/slider';
+import * as React from 'react';
+
+export default function FilterDemo() {
+    const [filter, setFilter] = React.useState(0);
+    const [filterValues, setFilterValues] = React.useState([100, 100, 0]);
+
+    const filterStyle = React.useMemo(() => {
+        return {
+            filter: `contrast(${filterValues[0]}%) brightness(${filterValues[1]}%) sepia(${filterValues[2]}%)`
+        };
+    }, [filterValues]);
+
+    return (
+        <div className="flex flex-col items-center justify-center">
+            <Image
+                alt="user header"
+                className="w-80 rounded mb-6"
+                src="https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg"
+                style={filterStyle}
+                width={320}
+                height={240}
+            />
+            <ToggleButtonGroup value={filter} onValueChange={(e: ToggleButtonGroupValueChangeEvent) => setFilter(e.value as number)}>
+                <ToggleButton.Root value={0}>
+                    <ToggleButton.Indicator>Contrast</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value={1}>
+                    <ToggleButton.Indicator>Brightness</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value={2}>
+                    <ToggleButton.Indicator>Sepia</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+            <Slider.Root
+                value={filterValues[filter]}
+                onValueChange={(e: SliderRootChangeEvent) =>
+                    setFilterValues((prev) => {
+                        const updated = [...prev];
+
+                        updated[filter] = e.value as number;
+
+                        return updated;
+                    })
+                }
+                className="max-w-56 mt-4"
+                min={0}
+                max={200}
+            >
+                <Slider.Track>
+                    <Slider.Range />
+                </Slider.Track>
+                <Slider.Handle />
+            </Slider.Root>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Slider Primitive](/docs/primitive/components/slider#api) for the sub-component API reference.
+
+### Hooks
+
+See [useSlider](/docs/headless/components/slider#api) for the headless hook API reference.
+
+### Accessibility
+
+See [Slider Primitive](/docs/primitive/components/slider#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Slider" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Slider" category="token" />