@orcado/yoyui 0.0.1

package/components/doc/accessibility/introductiondoc.js

@@ -0,0 +1,56 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function IntroductionDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p className="notification">
+                    Accessibility is a major concern of the Prime UI libraries and PrimeReact is no exception. PrimeTek teams have initiated a significant process to review and enhance the accessibility features of the components. This guide
+                    documents the foundation of the general guidelines that PrimeReact will follow and each component documentation will have a separate <b>Accessibility</b> section that states the keyboard support, screen reader compatibility, the
+                    implementation details along with tips to achieve WCAG compliancy. This work has been completed for PrimeVue and PrimeNG and currently being ported to PrimeReact to be finalized in Q4 2023.
+                </p>
+                <p>
+                    According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are
+                    crucial to ensure content can be consumed by anyone.
+                </p>
+                <p>Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories;</p>
+            </DocSectionText>
+
+            <h3>Visual Impairments</h3>
+            <p className="doc-section-description">
+                Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page
+                developers are required to make sure content is readable by the readers. Popular readers are{' '}
+                <a href="https://www.nvaccess.org" alt="NVDA Reader">
+                    NVDA
+                </a>
+                ,{' '}
+                <a href="https://www.freedomscientific.com/Products/software/JAWS/" alt="JAWS Reader">
+                    JAWS
+                </a>{' '}
+                and{' '}
+                <a href="https://www.chromevox.com" alt="ChromeVox Reader">
+                    ChromeVox
+                </a>
+                .
+            </p>
+
+            <h3>Hearing Impairments</h3>
+            <p className="doc-section-description">
+                Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is
+                providing textual alternatives, transcripts and captions for content with audio.
+            </p>
+
+            <h3>Mobility Impairments</h3>
+            <p className="doc-section-description">
+                People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a
+                trackpad remain as solutions for people who are not able to utilize a mouse.
+            </p>
+
+            <h3>Cognitive Impairments</h3>
+            <p className="doc-section-description">
+                Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive
+                impairments result in better design for any user.
+            </p>
+        </>
+    );
+}

package/components/doc/accessibility/semantichtmldoc.js

@@ -0,0 +1,56 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SemanticHTMLDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular <i>div</i>{' '}
+                    elements with classes are used. Consider the following example that do not mean too much for readers.
+                </p>
+            </DocSectionText>
+
+            <CodeHighlight>
+                {`
+<div className="header">
+    <div className="header-text">Header</div>
+</div>
+
+<div className="nav"></div>
+
+<div className="main">
+    <div className="content">
+    </div>
+
+    <div className="sidebar">
+    </div>
+</div>
+
+<div className="footer">
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
+            <CodeHighlight>
+                {`
+<header>
+    <h1>Header</h1>
+</header>
+
+<nav></nav>
+
+<main>
+    <article></article>
+
+    <aside></aside>
+</main>
+
+<footer>
+</footer>
+`}
+            </CodeHighlight>
+        </>
+    );
+}

package/components/doc/accessibility/waiariadoc.js

@@ -0,0 +1,81 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function WAIAriaDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components
+                    such as a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeReact. These types of
+                    components must provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized.
+                </p>
+                <p>
+                    ARIA consists of roles, properties and attributes. <b>Roles</b> define what the element is mainly used for e.g. <i>checkbox</i>, <i>dialog</i>, <i>tablist</i> whereas <b>States</b> and <b>Properties</b> define the metadata of the
+                    element like <i>aria-checked</i>, <i>aria-disabled</i>.
+                </p>
+
+                <p>Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.</p>
+            </DocSectionText>
+            <CodeHighlight>
+                {`
+<input type="checkbox" value="Prime" name="ui" checked>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot
+                be read by a reader.
+            </p>
+            <CodeHighlight>
+                {`
+<div className="fancy-checkbox">
+    {checked && <i className="checked-icon"></i>}
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with htmlFor.
+            </p>
+            <CodeHighlight>
+                {`
+<span id="chk-label">Remember Me</span>
+<div className="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
+    onClick="() => toggle()" onKeyDown="(e) => e.keyCode === 32 && toggle()">
+    {checked && <i className="checked-icon"></i>}
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the
+                usage of <i>p-hidden-accessible</i>
+                that hides the elements from the user but not from the screen reader.
+            </p>
+            <CodeHighlight>
+                {`
+<label htmlFor="chkbox">Remember Me</label>
+<div className="fancy-checkbox" onClick="() => toggle()">
+    <input className="p-hidden-accessible" type="checkbox" id="chkbox" onFocus="() => updateParentVisuals()" onBlur="() => updateParentVisuals()"
+        onKeyDown="(e) => e.keyCode === 32 && updateParentVisuals()">
+    {checked && <i className="checked-icon"></i>}
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">A working sample is the PrimeReact checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
+
+            <div className="card flex align-items-center justify-content-center">
+                <label htmlFor="binary" className="mr-2">
+                    Remember Me
+                </label>
+                <Checkbox inputId="binary" checked={checked} onChange={(e) => setChecked(e.checked)} />
+            </div>
+        </>
+    );
+}

package/components/doc/accessibility/wcagdoc.js

@@ -0,0 +1,26 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function WCAGDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Correct page structure with the aid of assistive technologies are the core ingridients for an accessible web content. HTML is based on an accessible foundation, form controls can be used by keyboard by default and semantic HTML is
+                    easier to be processed by a screen reader.
+                </p>
+                <p>
+                    <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" alt="WCAG Website">
+                        WCAG
+                    </a>{' '}
+                    refers to <strong>Web Content Accessibility Guideline</strong>, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more
+                    accessible. PrimeReact components aim high level of WCAG compliancy in the near future.
+                </p>
+
+                <p>
+                    Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are <a href="https://www.section508.gov/manage/laws-and-policies/">Section 508</a> in the US and{' '}
+                    <a href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">Web Accessibility Directive</a> of the European Union.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}

package/components/doc/accordion/accessibilitydoc.js

@@ -0,0 +1,78 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
+                value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerProps</i> property.
+            </p>
+            <p>
+                The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.
+            </p>
+
+            <h3>Header 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>Moves focus to the next the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}

package/components/doc/accordion/basicdoc.js

@@ -0,0 +1,144 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Accordion activeIndex={0}>
+    <AccordionTab header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
+            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+            Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
+            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </AccordionTab>
+</Accordion>
+        `,
+        javascript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Accordion consists of one or more AccordionTab elements which are collapsed by default. Tab to expand initially can be defined with the <i>activeIndex</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Accordion activeIndex={0}>
+                    <AccordionTab header="Header I">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header II">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header III">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </AccordionTab>
+                </Accordion>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

package/components/doc/accordion/controlleddoc.js

@@ -0,0 +1,177 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+import { Button } from '@/components/lib/button/Button';
+import { useState } from 'react';
+
+export function ControlledDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(null);
+
+    const code = {
+        basic: `
+<div className="flex flex-wrap justify-content-end gap-2 mb-3">
+    <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+    <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+    <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+</div>
+<Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+    <AccordionTab header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+            Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </AccordionTab>
+</Accordion>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Button } from 'primereact/button';
+
+export default function ControlledDoc() {
+    const [activeIndex, setActiveIndex] = useState();
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+            </div>
+            <Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Button } from 'primereact/button';
+
+export default function ControlledDoc() {
+    const [activeIndex, setActiveIndex] = useState<number | number[]>();
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+            </div>
+            <Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Accordion can be controlled programmatically using a binding to <i>activeIndex</i> along with <i>onTabChange</i> event to update the active index.
+                </p>
+            </DocSectionText>
+            <div className="accordion-demo">
+                <div className="card">
+                    <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                        <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                        <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                        <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+                    </div>
+                    <Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                        <AccordionTab header="Header I">
+                            <p className="m-0">
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                                id est laborum.
+                            </p>
+                        </AccordionTab>
+                        <AccordionTab header="Header II">
+                            <p className="m-0">
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                            </p>
+                        </AccordionTab>
+                        <AccordionTab header="Header III">
+                            <p className="m-0">
+                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
+                                in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
+                                minus.
+                            </p>
+                        </AccordionTab>
+                    </Accordion>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}