fix(combobox): Enhance autocomplete input with improved UX and positioning

Refactor Combobox component to provide a more intuitive and flexible
autocomplete experience. Key improvements include:

- Migrate to input-based trigger for better typing and search
- Improve positioning and portal rendering
- Optimize dropdown open/close behavior
- Enhance accessibility and interaction patterns
- Simplify search and selection mechanisms

Specific changes:
- Replace button trigger with input for direct typing
- Improve dropdown positioning and width matching
- Optimize click and focus handling
- Update icon to ChevronsUpDown for better visual cue
- Remove separate search input in favor of main input
- Add more robust outside click detection

Author: isubroto

src/components/Calendar/Calendar.styles.ts

@@ -17,12 +17,14 @@ const calendarVariants = cva(
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-primary/5 before:via-transparent before:to-accent/5",
           "before:opacity-50 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         bordered: [
           "bg-card/90 shadow-sm backdrop-blur-sm",
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-primary/3 before:to-accent/3",
           "before:opacity-50 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         glass: [
           "glass backdrop-blur-2xl",
@@ -31,6 +33,7 @@ const calendarVariants = cva(
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-white/5 before:to-transparent",
           "before:opacity-70 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         "glass-strong": [
           "glass-strong backdrop-blur-3xl",
@@ -39,14 +42,17 @@ const calendarVariants = cva(
           "before:absolute before:inset-0 before:bg-gradient-to-br",
           "before:from-white/10 before:to-transparent",
           "before:opacity-80 before:transition-opacity before:duration-500",
+          "before:pointer-events-none",
         ],
         gradient: [
           "bg-gradient-to-br from-primary/20 via-background to-accent/20",
           "border-2 border-transparent relative",
           "before:absolute before:inset-0 before:-z-10",
           "before:bg-gradient-to-r before:from-primary before:via-accent before:to-secondary",
           "before:opacity-50 before:blur-xl",
+          "before:pointer-events-none",
           "after:absolute after:inset-[2px] after:bg-background/95 after:rounded-[inherit]",
+          "after:pointer-events-none",
         ],
       },
       color: {

src/components/Calendar/index.tsx

@@ -467,6 +467,11 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, ref) => {
     const isOutside = !isSameMonth(date, currentMonth);
     const inRange = mode === "range" ? isDateInRange(date, range) : false;
 
+    // Don't render dates from adjacent months
+    if (isOutside) {
+      return <div key={index} className="h-10 w-10" />;
+    }
+
     // Determine the state with proper range handling
     let state: any = "default";
     if (disabled) {