@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,262 @@
+# ToggleSwitch
+
+ToggleSwitch is used to select a boolean value.
+
+```tsx
+import { Divider } from '@primereact/ui/divider';
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-col justify-center items-center gap-2 max-w-xs mx-auto w-full ">
+            <label className="flex items-center justify-between gap-12  select-none">
+                <div className="flex-1">
+                    <div className="text-color font-bold">Email address</div>
+                    <div className="text-muted-color">Users can add email addresses to their account</div>
+                </div>
+                <ToggleSwitch.Root>
+                    <ToggleSwitch.Control>
+                        <ToggleSwitch.Handle />
+                    </ToggleSwitch.Control>
+                </ToggleSwitch.Root>
+            </label>
+            <Divider />
+            <label className="flex items-center justify-between gap-12 select-none">
+                <div className="flex-1">
+                    <div className="text-color font-bold">Two-factor authentication</div>
+                    <div className="text-muted-color">Require a verification code when signing in</div>
+                </div>
+                <ToggleSwitch.Root defaultChecked>
+                    <ToggleSwitch.Control>
+                        <ToggleSwitch.Handle />
+                    </ToggleSwitch.Control>
+                </ToggleSwitch.Root>
+            </label>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+```
+
+```tsx
+<ToggleSwitch.Root>
+    <ToggleSwitch.Control>
+        <ToggleSwitch.Handle />
+    </ToggleSwitch.Control>
+</ToggleSwitch.Root>
+```
+
+## Examples
+
+### Basic
+
+Toggles a boolean setting between enabled and disabled states.
+
+```tsx
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex justify-center items-center gap-2">
+            <label htmlFor="switch">Off</label>
+            <ToggleSwitch.Root inputId="switch">
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+            <label htmlFor="switch">On</label>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+A controlled ToggleSwitch requires managing the checked state with a state variable and handling the change event manually. This allows for complete control over the ToggleSwitch's behavior.
+
+```tsx
+'use client';
+import { ToggleSwitchRootChangeEvent } from '@primereact/ui/toggleswitch';
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+import React from 'react';
+
+export default function ControlledDemo() {
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+        <div className="flex justify-center items-center gap-2">
+            <ToggleSwitch.Root inputId="mode" checked={checked} onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)}>
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+            <label htmlFor="mode">Airplane Mode</label>
+        </div>
+    );
+}
+```
+
+### Uncontrolled
+
+For an uncontrolled ToggleSwitch component, `defaultChecked` is used to set the initial state, and the component manages its own state internally.
+
+```tsx
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+
+export default function UncontrolledDemo() {
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch.Root defaultChecked>
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+        </div>
+    );
+}
+```
+
+### Template
+
+`ToggleSwitch.Handle` also allows displaying custom content inside itself.
+
+```tsx
+'use client';
+import { Check } from '@primeicons/react/check';
+import { Times } from '@primeicons/react/times';
+import { ToggleSwitch, type ToggleSwitchHandleInstance } from '@primereact/ui/toggleswitch';
+
+export default function TemplateDemo() {
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch.Root>
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle>
+                        {(instance: ToggleSwitchHandleInstance) => {
+                            const { toggleSwitch: toggleSwitchContext } = instance;
+
+                            return <>{toggleSwitchContext?.state.checked ? <Check /> : <Times />}</>;
+                        }}
+                    </ToggleSwitch.Handle>
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+        </div>
+    );
+}
+```
+
+### Customization
+
+`ToggleSwitch` component supports customization through CSS classes. The appearance, including colors and other visual properties, can be modified by applying custom classes to the component.
+
+```tsx
+'use client';
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+import { ToggleSwitchRootChangeEvent } from '@primereact/ui/toggleswitch';
+import * as React from 'react';
+
+export default function CustomizationDemo() {
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+        <label
+            htmlFor="custom"
+            className="max-w-xs mx-auto flex items-start gap-2 bg-slate-50 hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-700 p-4 rounded-md transition-colors"
+        >
+            <div className="flex flex-col gap-1 flex-1">
+                <p className="text-medium text-slate-900 dark:text-slate-50">Try Beta Features</p>
+                <p className="text-sm text-slate-400">Experience upcoming features before they&apos;re officially released.</p>
+            </div>
+
+            <ToggleSwitch.Root inputId="custom" checked={checked} onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)}>
+                <ToggleSwitch.Control className="data-checked:bg-blue-300! bg-slate-300! dark:bg-slate-600! rounded-md!">
+                    <ToggleSwitch.Handle className="bg-slate-500! data-checked:bg-blue-900!" />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+        </label>
+    );
+}
+```
+
+### Invalid
+
+Invalid state is displayed using the `invalid` prop to indicate a failed validation. This style is useful when integrating with form validation libraries.
+
+```tsx
+'use client';
+import { ToggleSwitchRootChangeEvent } from '@primereact/ui/toggleswitch';
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+import * as React from 'react';
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch.Root
+                checked={checked}
+                onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)}
+                invalid={!checked}
+            >
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+        </div>
+    );
+}
+```
+
+### Disabled
+
+When `disabled` is present, the element cannot be edited and focused.
+
+```tsx
+import { ToggleSwitch } from '@primereact/ui/toggleswitch';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch.Root disabled>
+                <ToggleSwitch.Control>
+                    <ToggleSwitch.Handle />
+                </ToggleSwitch.Control>
+            </ToggleSwitch.Root>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [ToggleSwitch Primitive](/docs/primitive/components/toggleswitch#api) for the full sub-component API.
+
+### Hooks
+
+See [useToggleSwitch](/docs/headless/components/toggleswitch#api) for the headless hook API.
+
+### Accessibility
+
+See [ToggleSwitch Primitive](/docs/primitive/components/toggleswitch#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="ToggleSwitch" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="ToggleSwitch" category="token" />

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

@@ -0,0 +1,187 @@
+# Toolbar
+
+Toolbar is a grouping component for buttons and other content.
+
+```tsx
+import { Button } from '@primereact/ui/button';
+import { InputText } from '@primereact/ui/inputtext';
+import { Toolbar } from '@primereact/ui/toolbar';
+import { Plus } from '@primeicons/react/plus';
+import { Upload } from '@primeicons/react/upload';
+
+export default function Preview() {
+    return (
+        <div>
+            <Toolbar.Root>
+                <Toolbar.Start>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <Plus></Plus>
+                    </Button>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <i className="pi pi-print" />
+                    </Button>
+                    <Button severity="secondary" variant="text">
+                        <Upload></Upload>
+                    </Button>
+                </Toolbar.Start>
+                <Toolbar.Center>
+                    <InputText placeholder="Search" />
+                </Toolbar.Center>
+                <Toolbar.End>
+                    <Button severity="secondary" variant="outlined" size="small">
+                        Cancel
+                    </Button>
+                    <Button size="small" className="ml-2">
+                        Save
+                    </Button>
+                </Toolbar.End>
+            </Toolbar.Root>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Toolbar } from '@primereact/ui/toolbar';
+```
+
+```tsx
+<Toolbar.Root>
+    <Toolbar.Start />
+    <Toolbar.Center />
+    <Toolbar.End />
+</Toolbar.Root>
+```
+
+## Examples
+
+### Basic
+
+Combines action buttons and controls in a horizontal bar.
+
+```tsx
+import { Button } from '@primereact/ui/button';
+import { InputText } from '@primereact/ui/inputtext';
+import { Toolbar } from '@primereact/ui/toolbar';
+import { Plus } from '@primeicons/react/plus';
+import { Upload } from '@primeicons/react/upload';
+
+export default function BasicDemo() {
+    return (
+        <div>
+            <Toolbar.Root>
+                <Toolbar.Start>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <Plus></Plus>
+                    </Button>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <i className="pi pi-print" />
+                    </Button>
+                    <Button severity="secondary" variant="text">
+                        <Upload></Upload>
+                    </Button>
+                </Toolbar.Start>
+                <Toolbar.Center>
+                    <InputText placeholder="Search" />
+                </Toolbar.Center>
+                <Toolbar.End>
+                    <Button severity="secondary" variant="outlined" size="small">
+                        Cancel
+                    </Button>
+                    <Button size="small" className="ml-2">
+                        Save
+                    </Button>
+                </Toolbar.End>
+            </Toolbar.Root>
+        </div>
+    );
+}
+```
+
+### Custom
+
+A customized toolbar with navigation bar functionality.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+import { Button } from '@primereact/ui/button';
+import { Toolbar } from '@primereact/ui/toolbar';
+import { Search } from '@primeicons/react/search';
+
+export default function CustomDemo() {
+    return (
+        <Toolbar.Root
+            className="max-[768px]:flex-col max-[768px]:items-start"
+            style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}
+        >
+            <Toolbar.Start className="max-[768px]:flex-wrap gap-y-2">
+                <div className="flex items-center gap-1">
+                    <i className="pi pi-prime text-xl" style={{ color: 'var(--p-primary-400)' }} />
+                    <span className="font-bold text-lg ml-2" style={{ color: 'var(--p-surface-0)' }}>
+                        Brand
+                    </span>
+                </div>
+                <div className="ml-6 flex gap-1 flex-wrap max-[768px]:ml-0">
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Products
+                    </Button>
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Solutions
+                    </Button>
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Resources
+                    </Button>
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Pricing
+                    </Button>
+                </div>
+            </Toolbar.Start>
+            <Toolbar.End className="max-[768px]:w-full">
+                <div className="flex items-center gap-2 flex-wrap">
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        <Search />
+                    </Button>
+                    <Button severity="contrast" size="small">
+                        Get Started
+                    </Button>
+                    <Avatar.Root shape="circle" size="normal">
+                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                        <Avatar.Fallback>A</Avatar.Fallback>
+                    </Avatar.Root>
+                </div>
+            </Toolbar.End>
+        </Toolbar.Root>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/toolbar#api) for `ToolbarRoot`, `ToolbarStart`, `ToolbarCenter`, `ToolbarEnd` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/toolbar#api) for `useToolbar` hook documentation.
+
+### Accessibility
+
+See [Toolbar Primitive](/docs/primitive/components/toolbar#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Toolbar" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Toolbar" category="token" />