From fde2a55e6b7cfc23330ab9489b3b0bf563cf714d Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 11 May 2026 17:09:53 +0530
Subject: [PATCH 1/4] feat: indicator classNames and sidebar overflow

---
 .../www/src/content/docs/components/indicator/props.ts |  7 +++++--
 packages/raystack/components/indicator/indicator.tsx   | 10 ++++++++--
 .../raystack/components/sidebar/sidebar.module.css     |  1 -
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/www/src/content/docs/components/indicator/props.ts b/apps/www/src/content/docs/components/indicator/props.ts
index c2cd153a6..b24edd220 100644
--- a/apps/www/src/content/docs/components/indicator/props.ts
+++ b/apps/www/src/content/docs/components/indicator/props.ts
@@ -14,6 +14,9 @@ export interface IndicatorProps {
   /** The content to show the indicator on */
   children: React.ReactNode;
 
-  /** Additional CSS class names */
-  className?: string;
+  /** Map of classNames for internal components */
+  classNames?: {
+    /** Class for the indicator badge/dot element */
+    indicator?: string;
+  };
 }
diff --git a/packages/raystack/components/indicator/indicator.tsx b/packages/raystack/components/indicator/indicator.tsx
index d78f82688..644f92d08 100644
--- a/packages/raystack/components/indicator/indicator.tsx
+++ b/packages/raystack/components/indicator/indicator.tsx
@@ -24,10 +24,13 @@ export interface IndicatorProps
   label?: string;
   children?: ReactNode;
   'aria-label'?: string;
+  classNames?: {
+    indicator?: string;
+  };
 }
 
 export const Indicator = ({
-  className,
+  classNames,
   variant,
   label,
   children,
@@ -40,7 +43,10 @@ export const Indicator = ({
     <div className={styles.wrapper} {...props}>
       {children}
       <div
-        className={indicator({ variant, className })}
+        className={indicator({
+          variant,
+          className: classNames?.indicator
+        })}
         role='status'
         aria-label={accessibilityLabel}
       >
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index f7336f633..596e1e1ae 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -52,7 +52,6 @@
 
 .main {
   flex: 1;
-  overflow-y: auto;
   width: 100%;
   gap: var(--rs-space-6);
   align-items: flex-start;

From 8f071fd8bb8ed87abc0247b011e4a3df5ab031aa Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 11 May 2026 17:22:38 +0530
Subject: [PATCH 2/4] feat: update indicator docs

---
 apps/www/src/content/docs/components/indicator/props.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/www/src/content/docs/components/indicator/props.ts b/apps/www/src/content/docs/components/indicator/props.ts
index b24edd220..b9dd5533a 100644
--- a/apps/www/src/content/docs/components/indicator/props.ts
+++ b/apps/www/src/content/docs/components/indicator/props.ts
@@ -14,6 +14,9 @@ export interface IndicatorProps {
   /** The content to show the indicator on */
   children: React.ReactNode;
 
+  /** Additional CSS class names */
+  className?: string;
+
   /** Map of classNames for internal components */
   classNames?: {
     /** Class for the indicator badge/dot element */

From 0abbd76a2374daf0464fe2bd2200347c3208e0e7 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 11 May 2026 19:10:52 +0530
Subject: [PATCH 3/4] feat: update indicator

---
 .../src/content/docs/components/indicator/props.ts   |  4 ++--
 packages/raystack/components/indicator/indicator.tsx | 12 +++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/apps/www/src/content/docs/components/indicator/props.ts b/apps/www/src/content/docs/components/indicator/props.ts
index b9dd5533a..df0df7d98 100644
--- a/apps/www/src/content/docs/components/indicator/props.ts
+++ b/apps/www/src/content/docs/components/indicator/props.ts
@@ -19,7 +19,7 @@ export interface IndicatorProps {
 
   /** Map of classNames for internal components */
   classNames?: {
-    /** Class for the indicator badge/dot element */
-    indicator?: string;
+    /** Class for the outer container element */
+    container?: string;
   };
 }
diff --git a/packages/raystack/components/indicator/indicator.tsx b/packages/raystack/components/indicator/indicator.tsx
index 644f92d08..5c2bf6195 100644
--- a/packages/raystack/components/indicator/indicator.tsx
+++ b/packages/raystack/components/indicator/indicator.tsx
@@ -1,4 +1,4 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, cx, VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactNode } from 'react';
 
 import styles from './indicator.module.css';
@@ -25,11 +25,12 @@ export interface IndicatorProps
   children?: ReactNode;
   'aria-label'?: string;
   classNames?: {
-    indicator?: string;
+    container?: string;
   };
 }
 
 export const Indicator = ({
+  className,
   classNames,
   variant,
   label,
@@ -40,13 +41,10 @@ export const Indicator = ({
   const accessibilityLabel = ariaLabel || label || `${variant} indicator`;
 
   return (
-    <div className={styles.wrapper} {...props}>
+    <div className={cx(styles.wrapper, classNames?.container)} {...props}>
       {children}
       <div
-        className={indicator({
-          variant,
-          className: classNames?.indicator
-        })}
+        className={indicator({ variant, className })}
         role='status'
         aria-label={accessibilityLabel}
       >

From cb4bbf0932b9f4191abafcc7373d681d1f4bd5a5 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 12 May 2026 00:33:47 +0530
Subject: [PATCH 4/4] fix: sidebar css

---
 .../raystack/components/sidebar/sidebar.module.css    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
index 596e1e1ae..7f631d3aa 100644
--- a/packages/raystack/components/sidebar/sidebar.module.css
+++ b/packages/raystack/components/sidebar/sidebar.module.css
@@ -2,7 +2,7 @@
   display: flex;
   width: 220px;
   height: 100%;
-  padding: var(--rs-space-5) var(--rs-space-4);
+  padding: var(--rs-space-5) 0;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
@@ -42,17 +42,17 @@
 
 .header {
   gap: var(--rs-space-3);
-  padding: var(--rs-space-2);
+  padding: var(--rs-space-2) var(--rs-space-5) var(--rs-space-7);
   align-self: stretch;
-  border-radius: var(--rs-radius-2);
   background: var(--rs-color-background-base-primary);
   overflow: hidden;
-  margin-bottom: var(--rs-space-6);
 }
 
 .main {
   flex: 1;
-  width: 100%;
+  overflow-y: auto;
+  align-self: stretch;
+  padding: 0 var(--rs-space-4);
   gap: var(--rs-space-6);
   align-items: flex-start;
 }
@@ -67,6 +67,7 @@
 
 .footer {
   width: 100%;
+  padding: 0 var(--rs-space-4);
   gap: var(--rs-space-2);
 }