From bb50f661ac1cab982eba640e75f1a2e168f9d3a8 Mon Sep 17 00:00:00 2001
From: preethi <smjpreethi@gmail.com>
Date: Wed, 20 Aug 2025 22:47:59 +0530
Subject: [PATCH] docs: add unstyled example for Stepper component

---
 components/doc/stepper/theming/unstyleddoc.js | 36 +++++++++++++++++++
 package-lock.json                             |  4 +--
 pages/stepper/index.js                        | 15 ++++----
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 components/doc/stepper/theming/unstyleddoc.js

diff --git a/components/doc/stepper/theming/unstyleddoc.js b/components/doc/stepper/theming/unstyleddoc.js
new file mode 100644
index 0000000000..36d8b59869
--- /dev/null
+++ b/components/doc/stepper/theming/unstyleddoc.js
@@ -0,0 +1,36 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const UnstyledDoc = (props) => {
+    const code = {
+        basic: `
+<Stepper ref={stepperRef}>
+    <StepperPanel header="Step 1">
+        <p>Content of Step 1</p>
+        <Button label="Next" onClick={() => stepperRef.current.nextCallback()} />
+    </StepperPanel>
+    <StepperPanel header="Step 2">
+        <p>Content of Step 2</p>
+        <Button label="Back" onClick={() => stepperRef.current.prevCallback()} className="mr-2" />
+        <Button label="Next" onClick={() => stepperRef.current.nextCallback()} />
+    </StepperPanel>
+    <StepperPanel header="Step 3">
+        <p>Content of Step 3</p>
+        <Button label="Back" onClick={() => stepperRef.current.prevCallback()} />
+    </StepperPanel>
+</Stepper>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Theming is implemented with <strong>pass-through properties</strong> in unstyled mode.
+                    This allows you to apply your own styling or integrate with Tailwind.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+};
diff --git a/package-lock.json b/package-lock.json
index c6bbb02a39..939ff61bf7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "primereact",
-    "version": "10.9.6",
+    "version": "10.9.7",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "primereact",
-            "version": "10.9.6",
+            "version": "10.9.7",
             "dependencies": {
                 "@docsearch/react": "3.9.0",
                 "chart.js": "4.5.0",
diff --git a/pages/stepper/index.js b/pages/stepper/index.js
index 69da8c0eb7..fcd7f4cd20 100644
--- a/pages/stepper/index.js
+++ b/pages/stepper/index.js
@@ -6,6 +6,7 @@ import { ImportDoc } from '@/components/doc/stepper/importdoc';
 import { LinearDoc } from '@/components/doc/stepper/lineardoc';
 import { Wireframe } from '@/components/doc/stepper/pt/wireframe';
 import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc';
+import { UnstyledDoc } from '@/components/doc/stepper/theming/unstyleddoc';
 import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc';
 import { VerticalDoc } from '@/components/doc/stepper/verticaldoc';
 import { HeaderDoc } from '@/components/doc/stepper/headerdoc';
@@ -70,14 +71,12 @@ const StepperDemo = () => {
         {
             id: 'unstyled',
             label: 'Unstyled',
-            description: 'Theming is implemented with the pass through properties in unstyled mode.',
-            children: [
-                {
-                    id: 'tailwind',
-                    label: 'Tailwind',
-                    component: TailwindDoc
-                }
-            ]
+            component: UnstyledDoc
+        },
+        {
+            id: 'tailwind',
+            label: 'Tailwind',
+            component: TailwindDoc
         }
     ];