@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,385 @@
+# IconField
+
+IconField wraps an input and an icon.
+
+```tsx
+import { CreditCard, Eye, Lock, Times } from '@primeicons/react';
+import { Search } from '@primeicons/react/search';
+import { Spinner } from '@primeicons/react/spinner';
+import { IconField } from '@primereact/ui/iconfield';
+import { InputText } from '@primereact/ui/inputtext';
+import { InputPassword } from '@primereact/ui/inputpassword';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-col gap-4 max-w-3xs w-full mx-auto">
+            <IconField.Root>
+                <IconField.Inset>
+                    <Search />
+                </IconField.Inset>
+                <InputText fluid placeholder="Search for everything" />
+                <IconField.Inset>
+                    <kbd className="text-xs font-medium leading-none!">⌘+K</kbd>
+                </IconField.Inset>
+            </IconField.Root>
+            <IconField.Root>
+                <InputText fluid variant="filled" placeholder="Processing..." />
+                <IconField.Inset>
+                    <Spinner className="animate-spin" />
+                </IconField.Inset>
+            </IconField.Root>
+            <IconField.Root>
+                <IconField.Inset>
+                    <CreditCard />
+                </IconField.Inset>
+                <InputText fluid defaultValue="4352" />
+                <IconField.Inset>
+                    <Times />
+                </IconField.Inset>
+            </IconField.Root>
+            <IconField.Root>
+                <IconField.Inset>
+                    <img
+                        alt="US"
+                        src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
+                        className="flag flag-us"
+                        style={{ width: '20px', height: '13.5px' }}
+                    />
+                </IconField.Inset>
+                <InputText fluid placeholder="+1 (___) ___-____" />
+            </IconField.Root>
+            <IconField.Root>
+                <IconField.Inset>
+                    <Lock />
+                </IconField.Inset>
+                <InputPassword variant="filled" fluid defaultValue="12345678" placeholder="Enter your password" />
+                <IconField.Inset>
+                    <Eye />
+                </IconField.Inset>
+            </IconField.Root>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { IconField } from '@primereact/ui/iconfield';
+```
+
+```tsx
+<IconField.Root>
+    <IconField.Inset />
+</IconField.Root>
+```
+
+## Examples
+
+### Basic
+
+An input field with an embedded leading or trailing icon.
+
+```tsx
+import { Search } from '@primeicons/react/search';
+import { Spinner } from '@primeicons/react/spinner';
+import { IconField } from '@primereact/ui/iconfield';
+import { InputText } from '@primereact/ui/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex flex-wrap justify-center gap-4">
+            <IconField.Root>
+                <IconField.Inset>
+                    <Search />
+                </IconField.Inset>
+                <InputText placeholder="Search" />
+            </IconField.Root>
+            <IconField.Root>
+                <InputText variant="filled" />
+                <IconField.Inset>
+                    <Spinner className="animate-spin" />
+                </IconField.Inset>
+            </IconField.Root>
+        </div>
+    );
+}
+```
+
+### Float Label
+
+FloatLabel visually integrates a label with its form element. Visit [FloatLabel](/docs/components/floatlabel) documentation for more information.
+
+```tsx
+'use client';
+import { FloatLabel } from '@primereact/ui/floatlabel';
+import { IconField } from '@primereact/ui/iconfield';
+import { InputText } from '@primereact/ui/inputtext';
+import { Label } from '@primereact/ui/label';
+import * as React from 'react';
+import { Search } from '@primeicons/react/search';
+
+export default function FloatLabelDemo() {
+    const [value1, setValue1] = React.useState('');
+    const [value2, setValue2] = React.useState('');
+    const [value3, setValue3] = React.useState('');
+
+    return (
+        <div className="flex flex-wrap justify-center items-end gap-4">
+            <FloatLabel>
+                <IconField.Root>
+                    <IconField.Inset>
+                        <Search />
+                    </IconField.Inset>
+                    <InputText
+                        value={value1}
+                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)}
+                        id="over_label"
+                        autoComplete="off"
+                    />
+                </IconField.Root>
+                <Label htmlFor="over_label">Over Label</Label>
+            </FloatLabel>
+
+            <FloatLabel variant="in">
+                <IconField.Root>
+                    <IconField.Inset>
+                        <Search />
+                    </IconField.Inset>
+                    <InputText
+                        value={value2}
+                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)}
+                        id="in_label"
+                        autoComplete="off"
+                        variant="filled"
+                    />
+                </IconField.Root>
+                <Label htmlFor="in_label">In Label</Label>
+            </FloatLabel>
+
+            <FloatLabel variant="on">
+                <IconField.Root>
+                    <IconField.Inset>
+                        <Search />
+                    </IconField.Inset>
+                    <InputText
+                        value={value3}
+                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)}
+                        id="on_label"
+                        autoComplete="off"
+                    />
+                </IconField.Root>
+                <Label htmlFor="on_label">On Label</Label>
+            </FloatLabel>
+        </div>
+    );
+}
+```
+
+### Ifta Label
+
+IftaLabel is used to create infield top aligned labels. Visit [IftaLabel](/docs/components/iftalabel) documentation for more information.
+
+```tsx
+'use client';
+import { IconField } from '@primereact/ui/iconfield';
+import { IftaLabel } from '@primereact/ui/iftalabel';
+import { InputText } from '@primereact/ui/inputtext';
+import { Label } from '@primereact/ui/label';
+import * as React from 'react';
+import { Check } from '@primeicons/react/check';
+import { Envelope } from '@primeicons/react/envelope';
+
+export default function IftaLabelDemo() {
+    const [value, setValue] = React.useState('');
+
+    return (
+        <div className="flex justify-center">
+            <IftaLabel>
+                <IconField.Root>
+                    <IconField.Inset>
+                        <Envelope />
+                    </IconField.Inset>
+                    <InputText
+                        id="email"
+                        value={value}
+                        onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
+                        autoComplete="off"
+                        variant="filled"
+                    />
+                    <IconField.Inset>
+                        <Check />
+                    </IconField.Inset>
+                </IconField.Root>
+                <Label htmlFor="email">Email</Label>
+            </IftaLabel>
+        </div>
+    );
+}
+```
+
+### Clickable
+
+Icons inside IconField.Inset can be interactive with event handlers like onClick.
+
+```tsx
+'use client';
+import { IconField } from '@primereact/ui/iconfield';
+import { InputText } from '@primereact/ui/inputtext';
+import * as React from 'react';
+import { Search } from '@primeicons/react/search';
+import { Times } from '@primeicons/react/times';
+
+export default function ClickableDemo() {
+    const [value, setValue] = React.useState('PrimeReact');
+
+    return (
+        <div className="flex flex-wrap justify-center gap-4">
+            <IconField.Root>
+                <IconField.Inset>
+                    <Search />
+                </IconField.Inset>
+                <InputText value={value} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)} placeholder="Search" />
+                <IconField.Inset>
+                    <Times className="cursor-pointer" onClick={() => setValue('')} />
+                </IconField.Inset>
+            </IconField.Root>
+        </div>
+    );
+}
+```
+
+### Sizes
+
+IconField is compatible with the size setting of the input field.
+
+```tsx
+import { Lock } from '@primeicons/react/lock';
+import { Search } from '@primeicons/react/search';
+import { Spinner } from '@primeicons/react/spinner';
+import { User } from '@primeicons/react/user';
+import { IconField } from '@primereact/ui/iconfield';
+import { InputText } from '@primereact/ui/inputtext';
+
+export default function SizesDemo() {
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <IconField.Root>
+                <IconField.Inset>
+                    <Search />
+                </IconField.Inset>
+                <InputText placeholder="Small" size="small" />
+            </IconField.Root>
+
+            <IconField.Root>
+                <InputText placeholder="Normal" />
+                <IconField.Inset>
+                    <User />
+                </IconField.Inset>
+            </IconField.Root>
+
+            <IconField.Root>
+                <IconField.Inset>
+                    <Lock />
+                </IconField.Inset>
+                <InputText placeholder="Large" size="large" />
+                <IconField.Inset>
+                    <Spinner className="animate-spin" />
+                </IconField.Inset>
+            </IconField.Root>
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+IconField.Root and IconField.Inset do not require any roles and attributes.
+
+### Keyboard Support
+
+Component does not include any interactive elements.
+
+
+# IconField API
+
+API documentation for IconField component
+
+## IconFieldRoot
+
+### Props
+
+<DocTable name="IconFieldRoot" category="api" type="props" />
+
+### State
+
+<DocTable name="IconFieldRoot" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="IconFieldRoot" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="IconFieldRoot" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="IconFieldRoot" category="api" type="types" />
+
+## IconFieldInset
+
+### Props
+
+<DocTable name="IconFieldInset" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="IconFieldInset" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="IconFieldInset" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="IconFieldInset" category="api" type="types" />
+
+## useIconField
+
+### Props
+
+<DocTable name="useIconField" category="api" type="props" />
+
+### State
+
+<DocTable name="useIconField" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="useIconField" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="useIconField" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="useIconField" category="api" type="types" />
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="IconField" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="IconField" category="token" />

package/data/llms/styled/components/iftalabel/api.json

@@ -0,0 +1,237 @@
+[
+  {
+    "name": "IftaLabel",
+    "source": "apps/showcase/assets/apidoc/iftalabel.json",
+    "data": {
+      "description": "IftaLabel is used to create infield top aligned labels.",
+      "interfaces": {
+        "IftaLabelPassThrough": {
+          "description": "Defines passthrough(pt) options of IftaLabel component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "IftaLabelPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "IftaLabelProps": {
+          "description": "Defines valid properties in IftaLabel component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<IftaLabelInstance, UseIftaLabelProps, IftaLabelPassThrough>",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<unknown>",
+              "default": "",
+              "description": "The reference to the component instance."
+            },
+            {
+              "name": "pIf",
+              "type": "boolean",
+              "default": "true",
+              "description": "Whether the component should be rendered."
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | ((instance?: IftaLabelInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: IftaLabelInstance) => string)",
+              "default": "",
+              "description": "The class name to apply to the component."
+            },
+            {
+              "name": "as",
+              "type": "string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>",
+              "default": "",
+              "description": "The component type to render."
+            },
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the component should be rendered as a child component."
+            },
+            {
+              "name": "instance",
+              "type": "IftaLabelInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<IftaLabelPassThrough>",
+              "default": "",
+              "description": "The pass-through props to pass to the component."
+            },
+            {
+              "name": "ptOptions",
+              "type": "PassThroughOptions",
+              "default": "",
+              "description": "The pass-through options to pass to the component."
+            },
+            {
+              "name": "unstyled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the component should be rendered without classes."
+            },
+            {
+              "name": "dt",
+              "type": "unknown",
+              "default": "",
+              "description": "The design token to use for the component."
+            },
+            {
+              "name": "styles",
+              "type": "StylesOptions<ComponentInstance>",
+              "default": "",
+              "description": "The styles to use for the component."
+            },
+            {
+              "name": "render",
+              "type": "(instance: IftaLabelInstance) => ReactNode",
+              "default": "",
+              "description": "The render function to render the component with instance access."
+            },
+            {
+              "name": "children",
+              "type": "any",
+              "default": "",
+              "description": "The children to render.\n\nAccepts  `React.ReactNode`  for static content or a render function  `(instance: I) => React.ReactNode`  for instance access.\nTyped as  `any`  to avoid JSX type errors when used directly in templates."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "IftaLabelState": {
+          "description": "Defines valid state in IftaLabel component.",
+          "relatedProp": "",
+          "extendedTypes": "UseIftaLabelState",
+          "props": [],
+          "methods": []
+        },
+        "IftaLabelExposes": {
+          "description": "Defines the methods and properties exposed by IftaLabel component.",
+          "relatedProp": "",
+          "extendedTypes": "UseIftaLabelExposes",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseIftaLabelRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "IftaLabelPassThroughType": {
+          "description": "Defines passthrough(pt) options type in IftaLabel component.",
+          "values": "PassThroughType<IftaLabelInstance, E>"
+        },
+        "IftaLabelClassNamesType": {
+          "description": "Type representing the CSS class names used in the IftaLabel component.",
+          "values": "typeof IftaLabelClassNames[keyof typeof IftaLabelClassNames]"
+        },
+        "IftaLabelInstance": {
+          "description": "Instance of IftaLabel component.",
+          "values": "ComponentInstance<IftaLabelProps, IftaLabelState, IftaLabelExposes>"
+        }
+      },
+      "variables": {
+        "IftaLabelClassNames": {
+          "description": "Defines the CSS class names used in the IftaLabel component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-iftalabel",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  },
+  {
+    "name": "useIftaLabel",
+    "source": "apps/showcase/assets/apidoc/useiftalabel.json",
+    "data": {
+      "description": "The useIftaLabel manages the state and functionality of a label component.",
+      "interfaces": {
+        "UseIftaLabelProps": {
+          "description": "Defines valid properties in useIftaLabel.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseIftaLabelState": {
+          "description": "Defines valid state in useIftaLabel.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseIftaLabelRootProps": {
+          "description": "Data attribute props for the IftaLabel root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "string",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "string",
+              "default": "",
+              "description": "Component part identifier."
+            }
+          ],
+          "methods": []
+        },
+        "UseIftaLabelExposes": {
+          "description": "Defines the methods and properties exposed by useIftaLabel.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseIftaLabelRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseIftaLabelInstance": {
+          "description": "Instance of useIftaLabel headless.",
+          "values": "HeadlessInstance<UseIftaLabelProps, UseIftaLabelState, UseIftaLabelExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]