From d12e33dda91a25045bdbe9cf4969da1a919e8930 Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Wed, 13 Aug 2025 00:34:03 +0530 Subject: [PATCH 1/4] added height animations for accordion component --- app/global.css | 28 ++++++++++++++++++++++++++++ components/retroui/Accordion.tsx | 4 ++-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/app/global.css b/app/global.css index 9e3943e..6599617 100644 --- a/app/global.css +++ b/app/global.css @@ -157,3 +157,31 @@ code.hljs { .hljs-emphasis { font-style: italic; } + +/* Generic expand/collapse height for radix animations */ +@keyframes expand-height { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +} + +@keyframes collapse-height { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +} + +/* Attribute-targeted helpers for Radix state */ +.collapsible-height[data-state="open"] { + animation: expand-height 300ms ease-out both; +} + +.collapsible-height[data-state="closed"] { + animation: collapse-height 300ms ease-out both; +} diff --git a/components/retroui/Accordion.tsx b/components/retroui/Accordion.tsx index 700a0fb..8673b78 100644 --- a/components/retroui/Accordion.tsx +++ b/components/retroui/Accordion.tsx @@ -49,10 +49,10 @@ const AccordionContent = React.forwardRef< >(({ className, children, ...props }, ref) => ( -
{children}
+
{children}
 )); From e48b1f691257572efbadcbd1f34e1968456a7987 Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Wed, 13 Aug 2025 00:59:49 +0530 Subject: [PATCH 2/4] improve keyframes code quality --- app/global.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/app/global.css b/app/global.css index 6599617..dbc40f1 100644 --- a/app/global.css +++ b/app/global.css @@ -177,11 +177,24 @@ code.hljs { } } +/* Reduced motion fallback */ +@media (prefers-reduced-motion: reduce) { + .collapsible-height[data-state="open"], + .collapsible-height[data-state="closed"] { + animation: none; + height: auto; + } +} + /* Attribute-targeted helpers for Radix state */ +.collapsible-height { + will-change: height; +} + .collapsible-height[data-state="open"] { - animation: expand-height 300ms ease-out both; + animation: expand-height 300ms ease-out; } .collapsible-height[data-state="closed"] { - animation: collapse-height 300ms ease-out both; + animation: collapse-height 300ms ease-out; } From 2a6d0bf68099e533697d4e44df5ed865ff877cea Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Tue, 19 Aug 2025 02:56:33 +0530 Subject: [PATCH 3/4] added tw-animate-css library --- package.json | 1 + pnpm-lock.yaml | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/package.json b/package.json index 5627c29..54bf0ec 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "shadcn": "2.4.0-canary.10", "sonner": "^2.0.3", "tailwind-merge": "^2.5.3", + "tw-animate-css": "^1.3.7", "unist-builder": "^4.0.0", "unist-util-visit": "^5.0.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8808b2d..c85ca62 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -110,6 +110,9 @@ importers: tailwind-merge: specifier: ^2.5.3 version: 2.5.4 + tw-animate-css: + specifier: ^1.3.7 + version: 1.3.7 unist-builder: specifier: ^4.0.0 version: 4.0.0 @@ -4276,6 +4279,9 @@ packages: tslib@2.8.0: resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==} + tw-animate-css@1.3.7: + resolution: {integrity: sha512-lvLb3hTIpB5oGsk8JmLoAjeCHV58nKa2zHYn8yWOoG5JJusH3bhJlF2DLAZ/5NmJ+jyH3ssiAx/2KmbhavJy/A==} + typanion@3.14.0: resolution: {integrity: sha512-ZW/lVMRabETuYCd9O9ZvMhAh8GslSqaUjxmK/JLPCh6l73CvLBiuXswj/+7LdnWOgYsQ130FqLzFz5aGT4I3Ug==} @@ -9193,6 +9199,8 @@ snapshots: tslib@2.8.0: {} + tw-animate-css@1.3.7: {} + typanion@3.14.0: {} type-check@0.4.0: From fb6a001b9b19e66c03de751b7c15c2163f98e9d9 Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Tue, 19 Aug 2025 02:57:00 +0530 Subject: [PATCH 4/4] use tw-animate-css classes for accordion height animations --- app/global.css | 42 +------------------------------- components/retroui/Accordion.tsx | 2 +- 2 files changed, 2 insertions(+), 42 deletions(-) diff --git a/app/global.css b/app/global.css index dbc40f1..c99e634 100644 --- a/app/global.css +++ b/app/global.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@import "tw-animate-css"; @custom-variant dark (&:where(.dark, .dark *)); @@ -157,44 +158,3 @@ code.hljs { .hljs-emphasis { font-style: italic; } - -/* Generic expand/collapse height for radix animations */ -@keyframes expand-height { - from { - height: 0; - } - to { - height: var(--radix-accordion-content-height); - } -} - -@keyframes collapse-height { - from { - height: var(--radix-accordion-content-height); - } - to { - height: 0; - } -} - -/* Reduced motion fallback */ -@media (prefers-reduced-motion: reduce) { - .collapsible-height[data-state="open"], - .collapsible-height[data-state="closed"] { - animation: none; - height: auto; - } -} - -/* Attribute-targeted helpers for Radix state */ -.collapsible-height { - will-change: height; -} - -.collapsible-height[data-state="open"] { - animation: expand-height 300ms ease-out; -} - -.collapsible-height[data-state="closed"] { - animation: collapse-height 300ms ease-out; -} diff --git a/components/retroui/Accordion.tsx b/components/retroui/Accordion.tsx index 8673b78..c327fe3 100644 --- a/components/retroui/Accordion.tsx +++ b/components/retroui/Accordion.tsx @@ -49,7 +49,7 @@ const AccordionContent = React.forwardRef< >(({ className, children, ...props }, ref) => (
{children}