From 4d53212956e0c0929a2bd6722c4f7435f56c1d52 Mon Sep 17 00:00:00 2001 From: LuizGarbini Date: Mon, 26 Jan 2026 13:06:47 -0300 Subject: [PATCH 1/3] refactor(calendar): enhance calendar component styling and structure - Updated class names for improved layout and responsiveness. - Removed unused components to streamline the code. --- apps/web/next-env.d.ts | 2 +- packages/ui/src/components/ui/calendar.tsx | 28 ++++++++++++---------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts index c4e7c0eb..a3e4680c 100644 --- a/apps/web/next-env.d.ts +++ b/apps/web/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import './.next/types/routes.d.ts' +import './.next/dev/types/routes.d.ts' // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx index c1affc35..3dfc67b4 100644 --- a/packages/ui/src/components/ui/calendar.tsx +++ b/packages/ui/src/components/ui/calendar.tsx @@ -17,18 +17,28 @@ function Calendar({ }: CalendarProps) { return ( - orientation === 'left' ? ( - - ) : ( - - ), - }} {...props} /> ) From 25d7d793dbd18ca0d1b53c2a1bc75ee1f8f48ab0 Mon Sep 17 00:00:00 2001 From: LuizGarbini Date: Mon, 26 Jan 2026 14:10:57 -0300 Subject: [PATCH 2/3] refactor(calendar): improve dropdown styling and add custom Chevron components - Updated dropdown class names for better styling and responsiveness. - Introduced custom Chevron components for navigation within the calendar. - Enhanced layout structure for dropdowns and month captions. --- packages/ui/src/components/ui/calendar.tsx | 25 +++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx index 3dfc67b4..8ef9d69f 100644 --- a/packages/ui/src/components/ui/calendar.tsx +++ b/packages/ui/src/components/ui/calendar.tsx @@ -23,7 +23,7 @@ function Calendar({ classNames={{ months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0', month: 'space-y-4', - month_caption: 'flex w-full justify-center gap-2 pt-1 relative items-center', + month_caption: 'flex justify-center gap-2 pt-1 relative items-center', caption_label: 'text-sm font-medium hidden', nav: 'space-x-1 flex items-center', button_previous: cn( @@ -31,9 +31,19 @@ function Calendar({ 'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100' ), - dropdown:'rounded-md border border-input bg-background px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring', + dropdown: cn( + buttonVariants({ variant: 'outline' }), + 'h-auto w-full appearance-none !bg-background', + 'hover:bg-background focus:bg-background active:bg-background', + 'bg-[length:12px] bg-[right_10px_center] bg-no-repeat pr-8 pl-3', + "dark:bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1aa%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E')]", + "bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%2371717a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E')]" + ), + - dropdowns:'flex w-full items-center gap-2', + // dropdown:'rounded-md border border-input bg-background px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring', + + dropdowns:'grid grid-cols-2 gap-2', dropdown_root:'w-full' , months_dropdown: 'w-full px-3 py-2', years_dropdown: 'w-full px-3 py-2', @@ -66,6 +76,15 @@ function Calendar({ hidden: 'invisible', ...classNames, }} + components={{ + Chevron: ({ orientation }) => + orientation === 'left' ? ( + + ) : ( + + ), + }} + {...props} /> ) From d49ace8fd6c4274f6fd463755e3fcadc922046ac Mon Sep 17 00:00:00 2001 From: LuizGarbini Date: Mon, 26 Jan 2026 14:12:36 -0300 Subject: [PATCH 3/3] refactor(calendar): clean up calendar component styling and remove commented code - Removed unnecessary whitespace and commented-out code for improved readability. - Streamlined dropdown class names for consistency with recent styling updates. --- packages/ui/src/components/ui/calendar.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx index 8ef9d69f..ab37ce23 100644 --- a/packages/ui/src/components/ui/calendar.tsx +++ b/packages/ui/src/components/ui/calendar.tsx @@ -30,7 +30,6 @@ function Calendar({ buttonVariants({ variant: 'outline' }), 'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100' ), - dropdown: cn( buttonVariants({ variant: 'outline' }), 'h-auto w-full appearance-none !bg-background', @@ -39,10 +38,6 @@ function Calendar({ "dark:bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1aa%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E')]", "bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%2371717a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E')]" ), - - - // dropdown:'rounded-md border border-input bg-background px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring', - dropdowns:'grid grid-cols-2 gap-2', dropdown_root:'w-full' , months_dropdown: 'w-full px-3 py-2',