From b955f8aa01c80df2f7b1d836171b0a404a2b78b6 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 30 Mar 2026 14:37:14 +0530
Subject: [PATCH 1/2] fix: styles and improper tooltip usage

---
 .../raystack/components/calendar/calendar.tsx | 25 ++++++++++---------
 .../input-field/input-field.module.css        |  4 +--
 .../components/select/select.module.css       |  3 +--
 .../components/text-area/text-area.module.css |  2 +-
 .../components/text-area/text-area.tsx        | 13 +++++++---
 packages/raystack/figma/tooltip.figma.tsx     |  7 +++++-
 6 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/raystack/components/calendar/calendar.tsx b/packages/raystack/components/calendar/calendar.tsx
index 1e4c92991..94746af5e 100644
--- a/packages/raystack/components/calendar/calendar.tsx
+++ b/packages/raystack/components/calendar/calendar.tsx
@@ -149,23 +149,24 @@ export const Calendar = function ({
           const hasDateInfo = Boolean(dateComponent);
 
           return (
-            <Tooltip
-              side='top'
-              disabled={loadingData || !showTooltip || !message}
-              message={message}
-            >
-              <button
-                {...buttonProps}
-                className={cx(
-                  buttonProps.className,
-                  hasDateInfo && styles.dayButtonWithInfo
-                )}
+            <Tooltip disabled={loadingData || !showTooltip || !message}>
+              <Tooltip.Trigger
+                render={
+                  <button
+                    {...buttonProps}
+                    className={cx(
+                      buttonProps.className,
+                      hasDateInfo && styles.dayButtonWithInfo
+                    )}
+                  />
+                }
               >
                 {hasDateInfo && (
                   <div className={styles.dayInfo}>{dateComponent}</div>
                 )}
                 <span className={styles.dayNumber}>{buttonProps.children}</span>
-              </button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>{message}</Tooltip.Content>
             </Tooltip>
           );
         },
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input-field/input-field.module.css
index 429f22809..52b5eac63 100644
--- a/packages/raystack/components/input-field/input-field.module.css
+++ b/packages/raystack/components/input-field/input-field.module.css
@@ -27,7 +27,7 @@
   width: 100%;
   position: relative;
   border-radius: var(--rs-radius-2);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   background: var(--rs-color-background-base-primary);
   transition: all 0.2s ease;
   box-sizing: border-box;
@@ -310,4 +310,4 @@
 .input-error-wrapper.variant-borderless:hover,
 .input-error-wrapper.variant-borderless:focus-within {
   border-color: transparent;
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
index 7c4e3c729..3c0f72367 100644
--- a/packages/raystack/components/select/select.module.css
+++ b/packages/raystack/components/select/select.module.css
@@ -71,11 +71,10 @@
   user-select: none;
   -webkit-user-select: none;
   transition: all 0.2s ease;
-  box-shadow: var(--rs-shadow-feather);
 }
 
 .trigger-outline {
-  border: 0.5px solid var(--rs-color-border-base-secondary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
 }
 
 .trigger-text {
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
index 2c822f275..3b892532a 100644
--- a/packages/raystack/components/text-area/text-area.module.css
+++ b/packages/raystack/components/text-area/text-area.module.css
@@ -56,7 +56,7 @@
   width: 100%;
   min-height: 64px;
   background-color: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   border-radius: var(--rs-radius-2);
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
diff --git a/packages/raystack/components/text-area/text-area.tsx b/packages/raystack/components/text-area/text-area.tsx
index 9adca43f6..25cc4976f 100644
--- a/packages/raystack/components/text-area/text-area.tsx
+++ b/packages/raystack/components/text-area/text-area.tsx
@@ -51,10 +51,15 @@ function TextArea({
             {!required && <span className={styles.optional}>(optional)</span>}
           </label>
           {infoTooltip && (
-            <Tooltip message={infoTooltip} side='right'>
-              <span className={styles.helpIcon}>
-                <InfoCircledIcon />
-              </span>
+            <Tooltip>
+              <Tooltip.Trigger
+                render={
+                  <span className={styles.helpIcon}>
+                    <InfoCircledIcon />
+                  </span>
+                }
+              />
+              <Tooltip.Content side='right'>{infoTooltip}</Tooltip.Content>
             </Tooltip>
           )}
         </div>
diff --git a/packages/raystack/figma/tooltip.figma.tsx b/packages/raystack/figma/tooltip.figma.tsx
index 2220d3abd..8b58cee8b 100644
--- a/packages/raystack/figma/tooltip.figma.tsx
+++ b/packages/raystack/figma/tooltip.figma.tsx
@@ -6,5 +6,10 @@ figma.connect(Tooltip, '<FIGMA_LINK>?node-id=3598-25261', {
   props: {
     message: figma.textContent('Tooltip text')
   },
-  example: props => <Tooltip {...props}>TOOLTIP_TRIGGER</Tooltip>
+  example: props => (
+    <Tooltip>
+      <Tooltip.Trigger render={<button />}>TOOLTIP_TRIGGER</Tooltip.Trigger>
+      <Tooltip.Content>{props.message}</Tooltip.Content>
+    </Tooltip>
+  )
 });

From cbe12b2d681792a61ef687deb484466551aba17c Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Mon, 30 Mar 2026 14:42:38 +0530
Subject: [PATCH 2/2] fix: update tooltip usages to compound component pattern

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../raystack/components/calendar/calendar.tsx    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/raystack/components/calendar/calendar.tsx b/packages/raystack/components/calendar/calendar.tsx
index 94746af5e..e21bf8664 100644
--- a/packages/raystack/components/calendar/calendar.tsx
+++ b/packages/raystack/components/calendar/calendar.tsx
@@ -158,14 +158,16 @@ export const Calendar = function ({
                       buttonProps.className,
                       hasDateInfo && styles.dayButtonWithInfo
                     )}
-                  />
+                  >
+                    {hasDateInfo && (
+                      <div className={styles.dayInfo}>{dateComponent}</div>
+                    )}
+                    <span className={styles.dayNumber}>
+                      {buttonProps.children}
+                    </span>
+                  </button>
                 }
-              >
-                {hasDateInfo && (
-                  <div className={styles.dayInfo}>{dateComponent}</div>
-                )}
-                <span className={styles.dayNumber}>{buttonProps.children}</span>
-              </Tooltip.Trigger>
+              />
               <Tooltip.Content side='top'>{message}</Tooltip.Content>
             </Tooltip>
           );