[FEATURE] Add Live Search and Color Swatch Grid

[durvaakadam]

Add Live Search and Color Swatch Grid

Problem / Motivation

Currently, our UI library lacks two interactive components that are frequently needed in demos and production screens:

1. A searchable dropdown with keyboard accessibility.
2. A responsive color swatch grid with selection and copy-to-clipboard functionality.

These components improve the usability of the UI library and provide ready-to-use interactive elements for future screens.

Proposed Solution

• Implement a Live Search component (live-search.tsx) with:
  • Keyboard navigation
  • Debounced input
  • Customizable rendering of items
• Implement a Color Swatch Grid component (color-swatch-grid.tsx) with:
  • Responsive layout
  • Selection callback
  • Copy-to-clipboard support
• Update components.tsx to import and register these components in the demo list.

Acceptance Criteria

• live-search.tsx and color-swatch-grid.tsx files added to the UI components folder.
• Components correctly imported and demo entries added in components.tsx.
• Project builds successfully with TypeScript (npm run build) with no errors.
• Components are responsive and accessible.

Next Steps (Optional)

• Refine component styles to fully match the design system (Tailwind tokens, theme colors).
• Add unit tests or Storybook stories for both components.
• Move demo/sample data into a shared fixture for consistency across demos.

[github-actions]

Welcome, @durvaakadam! Thanks for raising the issue.
Soon the maintainers/owner will review it and provide you with feedback/suggestions.
Make sure to star this awesome repository and follow the account!

• DevUI