fix: update shadcn input and tooltip to latest versions

[kumarayushkumar]

What

Updates input and tooltip components to the latest shadcn/ui versions that include dark: variant styles for improved dark mode support.

Changes

• Updated input component with latest dark mode variants (dark:bg-input/30, etc.)
• Updated tooltip component to latest version
• Ensures preview panel accurately reflects latest shadcn/ui component styles

Fixes #231

Summary by CodeRabbit

• Refactor

  • Reorganized Input and Tooltip UI components with improved structural consistency.

• Style

  • Enhanced Input component with additional style tokens, focus states, and accessibility variants.
  • Updated Tooltip styling and default spacing configuration.

[vercel]

@kumarayushkumar is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

The Input and Tooltip components were refactored from forwardRef-based wrappers to plain function components. Input removes ref forwarding and adds data-slot attribute with expanded classNames. Tooltip replaces static aliases with explicit functions, adding TooltipProvider composition, data-slot attributes, and adjusting default sideOffset from 4 to 0.

Changes

Cohort / File(s)	Summary
Input Component Refactor components/ui/input.tsx	Converted from React.forwardRef to plain function component. Removed ref support and displayName. Added data-slot="input" attribute. Expanded className with additional style tokens including focus and aria variants for enhanced styling.
Tooltip Component Refactor components/ui/tooltip.tsx	Replaced static Radix Tooltip aliases with explicit functional components. TooltipProvider now configures delayDuration (default 0) and forwards props. Tooltip, TooltipTrigger, and TooltipContent are now functions with data-slot attributes. TooltipContent default sideOffset changed from 4 to 0 and now renders Portal/Content composition with Arrow.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Ref forwarding removal in Input: Verify that removing ref support doesn't break existing consumers relying on ref-based access to the underlying input element.
• TooltipProvider composition change: Ensure the new wrapping pattern in Tooltip doesn't introduce unexpected nesting or provider lifecycle issues.
• Default sideOffset change: Confirm the sideOffset default value change from 4 to 0 aligns with intended design and doesn't cause visual regressions.
• Data-slot attributes: Verify these new attributes don't conflict with existing styling or testing selectors.

Poem

🐰 Plain functions hop where refs once roamed,
Data slots mark each component's home,
Tooltips nest with provider care,
Input feels light without a ref to bear,
Shadcn's latest style, now darkly fair!

Pre-merge checks and finishing touches

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: update shadcn input and tooltip to latest versions' accurately describes the main changes, which involve updating both components.
Linked Issues check	✅ Passed	The PR updates both input and tooltip components with dark mode variants and structural improvements aligning with the latest shadcn versions as requested in issue #231.
Out of Scope Changes check	✅ Passed	All changes are scoped to updating input.tsx and tooltip.tsx components to match latest shadcn versions, directly addressing issue #231's requirements.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 240f7cd and b1415a2.

📒 Files selected for processing (2)

• components/ui/input.tsx (1 hunks)
• components/ui/tooltip.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

components/ui/tooltip.tsx (1)

lib/utils.ts (1)

• cn (6-8)

components/ui/input.tsx (1)

lib/utils.ts (1)

• cn (6-8)

🔇 Additional comments (6)

components/ui/input.tsx (2)

1-3: LGTM!

Imports are correct and appropriate for the component.

---

5-19: LGTM! Changes align with PR objectives.

The Input component correctly implements the latest shadcn/ui patterns:

• Removal of forwardRef is appropriate for React 19, where ref is now a regular prop.
• Dark mode variants are present (dark:bg-input/30, dark:aria-invalid:ring-destructive/40).
• The data-slot="input" attribute aligns with modern shadcn/ui component architecture.

components/ui/tooltip.tsx (4)

1-6: LGTM!

The "use client" directive and imports are correct for a Radix UI-based tooltip component.

---

8-19: LGTM!

TooltipProvider correctly wraps the Radix primitive. The delayDuration={0} default provides immediate tooltip display, which aligns with modern UI expectations.

---

31-35: LGTM!

TooltipTrigger is correctly implemented with the data-slot attribute.

---

37-59: LGTM! Changes align with PR objectives.

TooltipContent correctly implements the latest patterns:

• sideOffset={0} default (changed from previous value) for tighter positioning
• Includes TooltipPrimitive.Arrow for the tooltip pointer
• Animation classes and color tokens provide proper styling
• The implementation supports dark mode through semantic color tokens (bg-foreground, text-background)

[kumarayushkumar]

@jnsahaj please let me what need to be fixed in this PR

[jnsahaj]

Hi! thanks for the change.

can you share a screenshot of the preview?