feat: add BottomNavigation component and polyfill Buffer for Node v24…

.nvmrc

@@ -0,0 +1 @@
+20

components/doc/bottomnavigation/accessibilitydoc.js

@@ -0,0 +1,69 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                BottomNavigation component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor
+                elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. The active item also includes <i>aria-current</i>.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Adds focus to the active menuitem when focus moves in to the component, if there is already a focused menuitem moves the focus out of the component based on the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}

components/doc/bottomnavigation/basicdoc.js

@@ -0,0 +1,74 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { BottomNavigation } from '@/components/lib/bottomnavigation/BottomNavigation';
+
+export function BasicDoc(props) {
+    const items = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    const code = {
+        basic: `
+<BottomNavigation model={items} />
+        `,
+        javascript: `
+import React from 'react';
+import { BottomNavigation } from 'primereact/bottomnavigation';
+
+export default function BasicDemo() {
+    const items = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <BottomNavigation model={items} style={{ maxWidth: '30rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { BottomNavigation } from 'primereact/bottomnavigation';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <BottomNavigation model={items} style={{ maxWidth: '30rem' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    BottomNavigation uses the common <i>MenuItem</i> model to define the available destinations.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <BottomNavigation model={items} style={{ maxWidth: '30rem' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/bottomnavigation/controlleddoc.js

@@ -0,0 +1,78 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { BottomNavigation } from '@/components/lib/bottomnavigation/BottomNavigation';
+import { useState } from 'react';
+
+export function ControlledDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(2);
+    const items = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    const code = {
+        basic: `
+<BottomNavigation model={items} activeIndex={activeIndex} onChange={(e) => setActiveIndex(e.index)} />
+        `,
+        javascript: `
+import { useState } from 'react';
+import { BottomNavigation } from 'primereact/bottomnavigation';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState(2);
+    const items = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <BottomNavigation model={items} activeIndex={activeIndex} onChange={(e) => setActiveIndex(e.index)} style={{ maxWidth: '30rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import { useState } from 'react';
+import { BottomNavigation } from 'primereact/bottomnavigation';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState<number>(2);
+    const items: MenuItem[] = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <BottomNavigation model={items} activeIndex={activeIndex} onChange={(e) => setActiveIndex(e.index)} style={{ maxWidth: '30rem' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Active item can be controlled with <i>activeIndex</i> and <i>onChange</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <BottomNavigation model={items} activeIndex={activeIndex} onChange={(e) => setActiveIndex(e.index)} style={{ maxWidth: '30rem' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/bottomnavigation/displaydoc.js

@@ -0,0 +1,84 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { BottomNavigation } from '@/components/lib/bottomnavigation/BottomNavigation';
+
+export function DisplayDoc(props) {
+    const items = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    const code = {
+        basic: `
+<BottomNavigation model={items} activeItemDisplay="raised" />
+<BottomNavigation model={items} activeItemDisplay="highlight" indicator="dot" />
+<BottomNavigation model={items} activeItemDisplay="plain" indicator="bar" />
+<BottomNavigation model={items} showLabels={false} indicator="dot" />
+        `,
+        javascript: `
+import React from 'react';
+import { BottomNavigation } from 'primereact/bottomnavigation';
+
+export default function DisplayDemo() {
+    const items = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    return (
+        <div className="card flex flex-column align-items-center gap-4">
+            <BottomNavigation model={items} activeItemDisplay="raised" style={{ maxWidth: '30rem' }} />
+            <BottomNavigation model={items} activeItemDisplay="highlight" indicator="dot" style={{ maxWidth: '30rem' }} />
+            <BottomNavigation model={items} activeItemDisplay="plain" indicator="bar" style={{ maxWidth: '30rem' }} />
+            <BottomNavigation model={items} showLabels={false} indicator="dot" style={{ maxWidth: '30rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { BottomNavigation } from 'primereact/bottomnavigation';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function DisplayDemo() {
+    const items: MenuItem[] = [
+        { label: 'Home', icon: 'pi pi-home' },
+        { label: 'Wallet', icon: 'pi pi-credit-card' },
+        { label: 'Send', icon: 'pi pi-send' },
+        { label: 'Card', icon: 'pi pi-id-card' },
+        { label: 'Profile', icon: 'pi pi-user' }
+    ];
+
+    return (
+        <div className="card flex flex-column align-items-center gap-4">
+            <BottomNavigation model={items} activeItemDisplay="raised" style={{ maxWidth: '30rem' }} />
+            <BottomNavigation model={items} activeItemDisplay="highlight" indicator="dot" style={{ maxWidth: '30rem' }} />
+            <BottomNavigation model={items} activeItemDisplay="plain" indicator="bar" style={{ maxWidth: '30rem' }} />
+            <BottomNavigation model={items} showLabels={false} indicator="dot" style={{ maxWidth: '30rem' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Active item display, indicator and labels are independent options, allowing multiple visual combinations.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-4">
+                <BottomNavigation model={items} activeItemDisplay="raised" style={{ maxWidth: '30rem' }} />
+                <BottomNavigation model={items} activeItemDisplay="highlight" indicator="dot" style={{ maxWidth: '30rem' }} />
+                <BottomNavigation model={items} activeItemDisplay="plain" indicator="bar" style={{ maxWidth: '30rem' }} />
+                <BottomNavigation model={items} showLabels={false} indicator="dot" style={{ maxWidth: '30rem' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/bottomnavigation/importdoc.js

@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { BottomNavigation } from 'primereact/bottomnavigation';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}

components/doc/bottomnavigation/pt/wireframe.js

@@ -0,0 +1,9 @@
+export function Wireframe() {
+    return (
+        <div className="pt-4">
+            <div className="doc-pt-container">
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="bottomnavigation" />
+            </div>
+        </div>
+    );
+}