@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/custom/__tests__/settings-dialog-shell.test.tsx

@@ -0,0 +1,144 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Dialog } from '../../dialog';
+import {
+  SettingsDialogShell,
+  type SettingsNavGroup,
+} from '../settings-dialog-shell';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+function TestIcon({ className }: { className?: string }) {
+  return <span className={className} data-testid="test-icon" />;
+}
+
+const navItems: SettingsNavGroup[] = [
+  {
+    label: 'Account',
+    items: [
+      {
+        description: 'Manage profile',
+        icon: TestIcon,
+        label: 'Profile',
+        name: 'profile',
+      },
+      {
+        description: 'Security settings',
+        disabled: true,
+        icon: TestIcon,
+        label: 'Security',
+        name: 'security',
+      },
+    ],
+  },
+  {
+    label: 'Preferences',
+    items: [
+      {
+        description: 'Appearance settings',
+        icon: TestIcon,
+        label: 'Appearance',
+        name: 'appearance',
+      },
+      {
+        description: 'Forms settings',
+        icon: TestIcon,
+        label: 'Forms',
+        name: 'forms',
+      },
+    ],
+  },
+];
+
+function renderShell() {
+  function Harness() {
+    const [activeTab, setActiveTab] = useState('profile');
+
+    return (
+      <Dialog open>
+        <SettingsDialogShell
+          activeTab={activeTab}
+          keyboardNavigation
+          navItems={navItems}
+          onActiveTabChange={setActiveTab}
+        >
+          <input aria-label="Editable field" />
+          <div data-testid="active-tab">{activeTab}</div>
+        </SettingsDialogShell>
+      </Dialog>
+    );
+  }
+
+  return render(<Harness />);
+}
+
+describe('SettingsDialogShell keyboard navigation', () => {
+  beforeEach(() => {
+    window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+      addEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+      matches: false,
+      media: query,
+      onchange: null,
+      removeEventListener: vi.fn(),
+    }));
+  });
+
+  it('focuses settings search with slash and modifier search shortcuts', () => {
+    renderShell();
+
+    const dialog = screen.getByRole('dialog');
+    const searchInput = screen.getByPlaceholderText('search.search');
+
+    fireEvent.keyDown(dialog, { key: '/' });
+    expect(searchInput).toHaveFocus();
+
+    const editableInput = screen.getByLabelText('Editable field');
+    editableInput.focus();
+
+    fireEvent.keyDown(editableInput, { ctrlKey: true, key: 'f' });
+    expect(searchInput).toHaveFocus();
+  });
+
+  it('moves between enabled settings sections with Alt navigation shortcuts', () => {
+    renderShell();
+
+    const dialog = screen.getByRole('dialog');
+    const activeTab = screen.getByTestId('active-tab');
+
+    fireEvent.keyDown(dialog, { altKey: true, key: 'ArrowDown' });
+    expect(activeTab).toHaveTextContent('appearance');
+
+    fireEvent.keyDown(dialog, { altKey: true, key: 'ArrowUp' });
+    expect(activeTab).toHaveTextContent('profile');
+
+    fireEvent.keyDown(dialog, { altKey: true, key: 'End' });
+    expect(activeTab).toHaveTextContent('forms');
+
+    fireEvent.keyDown(dialog, { altKey: true, key: 'Home' });
+    expect(activeTab).toHaveTextContent('profile');
+  });
+
+  it('does not handle navigation shortcuts outside the dialog content', () => {
+    renderShell();
+
+    fireEvent.keyDown(document, { altKey: true, key: 'ArrowDown' });
+
+    expect(screen.getByTestId('active-tab')).toHaveTextContent('profile');
+  });
+
+  it('does not move sections while typing in editable fields', () => {
+    renderShell();
+
+    const editableInput = screen.getByLabelText('Editable field');
+    editableInput.focus();
+
+    fireEvent.keyDown(editableInput, { altKey: true, key: 'ArrowDown' });
+
+    expect(screen.getByTestId('active-tab')).toHaveTextContent('profile');
+  });
+});

package/src/components/ui/custom/__tests__/tuturuuu-logo.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import { TUTURUUU_LOGO_URL } from '../tuturuuu-logo';
+
+describe('Tuturuuu logo asset URL', () => {
+  it('uses the canonical hosted logo instead of a per-app relative asset', () => {
+    expect(TUTURUUU_LOGO_URL).toBe(
+      'https://tuturuuu.com/media/logos/transparent.png'
+    );
+  });
+});

package/src/components/ui/custom/autosize-textarea.tsx

@@ -18,6 +18,7 @@ export const useAutosizeTextArea = ({
   minHeight = 0,
 }: UseAutosizeTextAreaProps) => {
   const [init, setInit] = React.useState(true);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: triggerAutoSize is needed to trigger the effect
   React.useEffect(() => {
     // We need to reset the height momentarily to get the correct scrollHeight for the textarea
     const offsetBorder = 2;
@@ -39,7 +40,7 @@ export const useAutosizeTextArea = ({
         textAreaRef.style.height = `${scrollHeight + offsetBorder}px`;
       }
     }
-  }, [init, minHeight, maxHeight, textAreaRef, triggerAutoSize]);
+  }, [triggerAutoSize, init, minHeight, maxHeight, textAreaRef]);
 };
 
 export type AutosizeTextAreaRef = {
@@ -97,7 +98,7 @@ export const AutosizeTextarea = React.forwardRef<
         value={value}
         ref={textAreaRef}
         className={cn(
-          'scrollbar-none flex w-full overflow-auto rounded-md border border-input bg-background px-3 py-2 text-sm ring-0 ring-transparent outline-hidden placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          'scrollbar-none flex w-full overflow-auto rounded-md border border-input bg-background px-3 py-2 text-sm outline-hidden ring-0 ring-transparent placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         onChange={(e) => {

package/src/components/ui/custom/calendar/core.tsx

@@ -1,18 +1,22 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import { MonthView } from './month-view';
-import { WorkspaceUserAttendance } from './utils';
+import type { WorkspaceUserAttendance } from './utils';
 import { YearView } from './year-view';
-import { useEffect, useState } from 'react';
 
 interface CalendarProps {
   locale: string;
   initialDate?: Date;
   attendanceData?: WorkspaceUserAttendance[];
-  // eslint-disable-next-line no-unused-vars
+
   onDateClick?: (date: Date) => void;
+
+  onDayHeaderClick?: (dayIndex: number, monthDate: Date) => void;
   hideControls?: boolean;
   hideYear?: boolean;
+  /** When true, hides days from previous and next months to reduce visual clutter */
+  hideOutsideMonthDays?: boolean;
 }
 
 export const Calendar: React.FC<CalendarProps> = ({
@@ -20,8 +24,10 @@ export const Calendar: React.FC<CalendarProps> = ({
   initialDate,
   attendanceData,
   onDateClick,
+  onDayHeaderClick,
   hideControls = false,
   hideYear = false,
+  hideOutsideMonthDays = false,
 }) => {
   const [currentDate, setCurrentDate] = useState(initialDate || new Date());
   const [viewMode, setViewMode] = useState<'month' | 'year'>('month');
@@ -46,9 +52,11 @@ export const Calendar: React.FC<CalendarProps> = ({
       setCurrentDate={setCurrentDate}
       attendanceData={attendanceData}
       onDateClick={onDateClick}
+      onDayHeaderClick={onDayHeaderClick}
       onYearViewClick={handleYearViewClick}
       hideControls={hideControls}
       hideYear={hideYear}
+      hideOutsideMonthDays={hideOutsideMonthDays}
     />
   ) : (
     <YearView

package/src/components/ui/custom/calendar/day-cell.tsx

@@ -1,74 +1,88 @@
+import { cn } from '@tuturuuu/utils/format';
+import { isAfter } from 'date-fns';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../tooltip';
 import {
-  WorkspaceUserAttendance,
   getAttendanceGroupNames,
   isCurrentMonth,
   isDateAbsent,
   isDateAttended,
+  type WorkspaceUserAttendance,
 } from './utils';
-import { cn } from '@tuturuuu/utils/format';
-import { isAfter } from 'date-fns';
-import { Fragment } from 'react';
 
 export const DayCell: React.FC<{
   day: Date;
   currentDate: Date;
   today: Date;
   attendanceData?: WorkspaceUserAttendance[];
-  // eslint-disable-next-line no-unused-vars
+
   onDateClick?: (date: Date) => void;
-}> = ({ day, currentDate, today, attendanceData, onDateClick }) => {
-  if (!isCurrentMonth(day, currentDate))
-    return (
-      <div className="flex flex-none cursor-default justify-center rounded border border-transparent p-2 font-semibold text-foreground/20 transition duration-300 md:rounded-lg">
-        {day.getDate()}
-      </div>
-    );
+  /** When true, hides days from previous and next months to reduce visual clutter */
+  hideOutsideMonthDays?: boolean;
+}> = ({
+  day,
+  currentDate,
+  today,
+  attendanceData,
+  onDateClick,
+  hideOutsideMonthDays = false,
+}) => {
+  const isInCurrentMonth = isCurrentMonth(day, currentDate);
+
+  // If hideOutsideMonthDays is true and day is not in current month, don't render anything
+  if (hideOutsideMonthDays && !isInCurrentMonth) {
+    return <div className="flex flex-none justify-center p-2"></div>;
+  }
+
+  // Cache attendance checks
+  const isAttended = isDateAttended(day, attendanceData);
+  const isAbsent = isDateAbsent(day, attendanceData);
+  const hasAttendance = isAttended || isAbsent;
 
-  if (
-    !isDateAttended(day, attendanceData) &&
-    !isDateAbsent(day, attendanceData)
-  )
+  if (!hasAttendance) {
     return (
       <button
+        type="button"
         onClick={onDateClick ? () => onDateClick(day) : undefined}
         className={cn(
-          'flex flex-none cursor-default justify-center rounded border bg-foreground/5 p-2 font-semibold text-foreground/40 transition duration-300 hover:cursor-pointer md:rounded-lg dark:bg-foreground/10',
+          'flex flex-none justify-center rounded border bg-foreground/5 p-2 font-semibold transition duration-300 hover:cursor-pointer md:rounded-lg dark:bg-foreground/10',
           isAfter(day, today) &&
-            'cursor-not-allowed opacity-50 hover:cursor-not-allowed'
+            'cursor-not-allowed! opacity-50 hover:cursor-not-allowed!',
+          !isInCurrentMonth &&
+            'bg-foreground/3 text-foreground/40 dark:bg-foreground/5',
+          isInCurrentMonth && 'text-foreground/40'
         )}
       >
         {day.getDate()}
       </button>
     );
+  }
 
   return (
-    <Fragment>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            onClick={onDateClick ? () => onDateClick(day) : undefined}
-            className={`flex flex-none cursor-pointer justify-center rounded border p-2 font-semibold transition duration-300 md:rounded-lg ${
-              isDateAttended(day, attendanceData)
-                ? 'border-green-500/30 bg-green-500/10 text-green-600 dark:border-green-300/20 dark:bg-green-300/20 dark:text-green-300'
-                : isDateAbsent(day, attendanceData)
-                  ? 'border-red-500/30 bg-red-500/10 text-red-600 dark:border-red-300/20 dark:bg-red-300/20 dark:text-red-300'
-                  : 'bg-foreground/5 text-foreground/40 dark:bg-foreground/10'
-            }`}
-          >
-            {day.getDate()}
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>
-          {getAttendanceGroupNames(day, attendanceData).map(
-            (groupName, idx) => (
-              <div key={groupName + idx} className="flex items-center gap-1">
-                <span className="text-xs font-semibold">{groupName}</span>
-              </div>
-            )
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          onClick={onDateClick ? () => onDateClick(day) : undefined}
+          className={cn(
+            'flex flex-none cursor-pointer justify-center rounded border p-2 font-semibold transition duration-300 md:rounded-lg',
+            isAttended
+              ? 'border-dynamic-green/30 bg-dynamic-green/10 text-dynamic-green dark:border-dynamic-green/20 dark:bg-dynamic-green/20'
+              : isAbsent
+                ? 'border-dynamic-red/30 bg-dynamic-red/10 text-dynamic-red dark:border-dynamic-red/20 dark:bg-dynamic-red/20'
+                : 'bg-foreground/5 text-foreground/40 dark:bg-foreground/10',
+            !isInCurrentMonth && 'opacity-60'
           )}
-        </TooltipContent>
-      </Tooltip>
-    </Fragment>
+        >
+          {day.getDate()}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {getAttendanceGroupNames(day, attendanceData).map((groupName, idx) => (
+          <div key={groupName + idx} className="flex items-center gap-1">
+            <span className="font-semibold text-xs">{groupName}</span>
+          </div>
+        ))}
+      </TooltipContent>
+    </Tooltip>
   );
 };

package/src/components/ui/custom/calendar/month-header.tsx

@@ -1,6 +1,6 @@
-import { Button } from '../../button';
+import { ChevronLeft, ChevronRight } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '../../button';
 
 export const MonthHeader: React.FC<{
   thisYear: number;
@@ -23,16 +23,14 @@ export const MonthHeader: React.FC<{
 }) => (
   <div
     className={cn(
-      'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xl font-bold md:text-2xl',
+      'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 font-bold text-xl md:text-2xl',
       hideControls || 'mb-4'
     )}
   >
     <div className="flex items-center gap-1">
       {hideYear || thisYear}
-      {hideYear || (
-        <div className="mx-2 h-4 w-[1px] rotate-[30deg] bg-foreground/20" />
-      )}
-      <span className="text-lg font-semibold md:text-xl">{thisMonth}</span>
+      {hideYear || <div className="mx-2 h-4 w-px rotate-30 bg-foreground/20" />}
+      <span className="font-semibold text-lg md:text-xl">{thisMonth}</span>
     </div>
     {!hideControls && (
       <div className="flex items-center gap-1">

package/src/components/ui/custom/calendar/month-view.tsx

@@ -1,30 +1,36 @@
+import { startOfDay } from 'date-fns';
+import { useMemo } from 'react';
 import { Separator } from '../../separator';
 import { TooltipProvider } from '../../tooltip';
 import { DayCell } from './day-cell';
 import { MonthHeader } from './month-header';
-import { WorkspaceUserAttendance } from './utils';
-import { startOfDay } from 'date-fns';
-import { useMemo } from 'react';
+import type { WorkspaceUserAttendance } from './utils';
 
 export const MonthView: React.FC<{
   locale: string;
   currentDate: Date;
   setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
   attendanceData?: WorkspaceUserAttendance[];
-  // eslint-disable-next-line no-unused-vars
+
   onDateClick?: (date: Date) => void;
+
+  onDayHeaderClick?: (dayIndex: number, monthDate: Date) => void;
   onYearViewClick: () => void;
   hideControls?: boolean;
   hideYear?: boolean;
+  /** When true, hides days from previous and next months to reduce visual clutter */
+  hideOutsideMonthDays?: boolean;
 }> = ({
   locale,
   currentDate,
   setCurrentDate,
   attendanceData,
   onDateClick,
+  onDayHeaderClick,
   onYearViewClick,
   hideControls = false,
   hideYear = false,
+  hideOutsideMonthDays = false,
 }) => {
   const thisYear = currentDate.getFullYear();
   const thisMonth = currentDate.toLocaleString(locale, {
@@ -35,7 +41,7 @@ export const MonthView: React.FC<{
   const days = useMemo(
     () =>
       Array.from({ length: 7 }, (_, i) => {
-        let newDay = new Date(currentDate);
+        const newDay = new Date(currentDate);
         newDay.setDate(currentDate.getDate() - currentDate.getDay() + i + 1);
         return newDay.toLocaleString(locale, { weekday: 'narrow' });
       }),
@@ -45,13 +51,13 @@ export const MonthView: React.FC<{
   const daysInMonth = useMemo(
     () =>
       Array.from({ length: 42 }, (_, i) => {
-        let newDay = new Date(
+        const newDay = new Date(
           currentDate.getFullYear(),
           currentDate.getMonth(),
           1
         );
-        let dayOfWeek = newDay.getDay();
-        let adjustment = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+        const dayOfWeek = newDay.getDay();
+        const adjustment = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
         newDay.setDate(newDay.getDate() - adjustment + i);
         return newDay;
       }),
@@ -83,7 +89,12 @@ export const MonthView: React.FC<{
           {days.map((day, idx) => (
             <div
               key={`day-${idx}`}
-              className="flex flex-none cursor-default justify-center rounded bg-foreground/5 p-2 font-semibold transition duration-300 md:rounded-lg"
+              className={`flex flex-none justify-center rounded bg-foreground/5 p-2 font-semibold transition duration-300 md:rounded-lg ${
+                onDayHeaderClick
+                  ? 'cursor-pointer hover:bg-foreground/10'
+                  : 'cursor-default'
+              }`}
+              onClick={() => onDayHeaderClick?.(idx, currentDate)}
             >
               {day}
             </div>
@@ -100,6 +111,7 @@ export const MonthView: React.FC<{
                 today={today}
                 attendanceData={attendanceData}
                 onDateClick={onDateClick}
+                hideOutsideMonthDays={hideOutsideMonthDays}
               />
             ))}
           </TooltipProvider>

package/src/components/ui/custom/calendar/year-calendar.tsx

@@ -1,17 +1,25 @@
 'use client';
 
-import { Calendar } from './core';
-import { WorkspaceUserAttendance } from './utils';
+import { ChevronLeft, ChevronRight } from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useState } from 'react';
+import { Calendar } from './core';
+import type { WorkspaceUserAttendance } from './utils';
 
 interface YearCalendarProps {
   locale: string;
   initialDate?: Date;
   attendanceData?: WorkspaceUserAttendance[];
-  // eslint-disable-next-line no-unused-vars
+
   onDateClick?: (date: Date) => void;
+
+  onDayHeaderClick?: (dayIndex: number, monthDate: Date) => void;
+  /** When true, hides days from previous and next months to reduce visual clutter */
+  hideOutsideMonthDays?: boolean;
+  /** Maximum date - prevents navigating to years beyond this date */
+  maxDate?: Date;
+  /** Minimum date - prevents navigating to years before this date */
+  minDate?: Date;
 }
 
 export const YearCalendar: React.FC<YearCalendarProps> = ({
@@ -19,14 +27,35 @@ export const YearCalendar: React.FC<YearCalendarProps> = ({
   initialDate,
   attendanceData,
   onDateClick,
+  onDayHeaderClick,
+  hideOutsideMonthDays = false,
+  maxDate,
+  minDate,
 }) => {
-  const [currentYear, setCurrentYear] = useState(
-    initialDate?.getFullYear() || new Date().getFullYear()
-  );
+  const [currentYear, setCurrentYear] = useState(() => {
+    const year = initialDate?.getFullYear() || new Date().getFullYear();
+    if (minDate && year < minDate.getFullYear()) {
+      return minDate.getFullYear();
+    }
+    if (maxDate && year > maxDate.getFullYear()) {
+      return maxDate.getFullYear();
+    }
+    return year;
+  });
 
   const handlePrevYear = () => setCurrentYear(currentYear - 1);
   const handleNextYear = () => setCurrentYear(currentYear + 1);
 
+  // Determine if next year button should be disabled based on maxDate
+  const isNextYearDisabled = maxDate
+    ? currentYear >= maxDate.getFullYear()
+    : false;
+
+  // Determine if previous year button should be disabled based on minDate
+  const isPrevYearDisabled = minDate
+    ? currentYear <= minDate.getFullYear()
+    : false;
+
   const months = Array.from(
     { length: 12 },
     (_, i) => new Date(currentYear, i, 1)
@@ -34,13 +63,23 @@ export const YearCalendar: React.FC<YearCalendarProps> = ({
 
   return (
     <div>
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 rounded-lg border bg-foreground/5 p-4 text-xl font-bold md:text-2xl">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 rounded-lg border bg-foreground/5 p-4 font-bold text-xl md:text-2xl">
         <div className="flex items-center gap-1">{currentYear}</div>
         <div className="flex items-center gap-1">
-          <Button size="xs" variant="secondary" onClick={handlePrevYear}>
+          <Button
+            size="xs"
+            variant="secondary"
+            onClick={handlePrevYear}
+            disabled={isPrevYearDisabled}
+          >
             <ChevronLeft className="h-6 w-6" />
           </Button>
-          <Button size="xs" variant="secondary" onClick={handleNextYear}>
+          <Button
+            size="xs"
+            variant="secondary"
+            onClick={handleNextYear}
+            disabled={isNextYearDisabled}
+          >
             <ChevronRight className="h-6 w-6" />
           </Button>
         </div>
@@ -54,7 +93,9 @@ export const YearCalendar: React.FC<YearCalendarProps> = ({
               initialDate={month}
               attendanceData={attendanceData}
               onDateClick={onDateClick}
+              onDayHeaderClick={onDayHeaderClick}
               hideControls
+              hideOutsideMonthDays={hideOutsideMonthDays}
             />
           </div>
         ))}

package/src/components/ui/custom/calendar/year-view.tsx

@@ -1,12 +1,13 @@
-import { Button } from '../../button';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
 import { useMemo } from 'react';
+import { Button } from '../../button';
 
 export const YearView: React.FC<{
   locale: string;
   currentDate: Date;
   setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
-  // eslint-disable-next-line no-unused-vars
+
   handleMonthClick: (month: number) => void;
 }> = ({ locale, currentDate, setCurrentDate, handleMonthClick }) => {
   const thisYear = currentDate.getFullYear();
@@ -30,7 +31,7 @@ export const YearView: React.FC<{
 
   return (
     <div>
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xl font-bold md:text-2xl">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 font-bold text-xl md:text-2xl">
         <div className="flex items-center gap-1">{thisYear}</div>
         <div className="flex items-center gap-1">
           <Button size="xs" variant="secondary" onClick={handlePrev}>
@@ -45,9 +46,12 @@ export const YearView: React.FC<{
       <div className="grid grid-cols-3 gap-4">
         {months.map((month, idx) => (
           <button
+            type="button"
             key={`month-${idx}`}
             onClick={() => handleMonthClick(month.getMonth())}
-            className="flex flex-none cursor-pointer justify-center rounded bg-foreground/5 p-4 font-semibold transition duration-300 hover:bg-foreground/10"
+            className={cn(
+              'flex flex-none cursor-pointer justify-center rounded bg-foreground/5 p-4 font-semibold transition duration-300 hover:bg-foreground/10'
+            )}
           >
             {month.toLocaleString(locale, { month: 'long' })}
           </button>