diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8a538e..42fbcaa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,421 +1,280 @@
 # Changelog
 
+## [1.3.8](https://github.com/justdlabs/inertia.ts/compare/v1.3.7...v1.3.8) (2024-12-26)
+
 ## [1.3.7](https://github.com/justdlabs/inertia.ts/compare/v1.3.6...v1.3.7) (2024-12-17)
 
 ## [1.3.6](https://github.com/justdlabs/inertia.ts/compare/1.3.7...v1.3.6) (2024-12-17)
 
-
 ### Bug Fixes
 
-* add config ([12f123c](https://github.com/justdlabs/inertia.ts/commit/12f123c1f4313188ae10d9956b346c8f806681a9))
-* deps ([bf0bcf0](https://github.com/justdlabs/inertia.ts/commit/bf0bcf08d7557dbc49f4be54267f82bf722e8669))
-* fix deps ([ed112da](https://github.com/justdlabs/inertia.ts/commit/ed112dafc0c94771b83103fe45ac36dcb52d473c))
-* fix deps ([22316a2](https://github.com/justdlabs/inertia.ts/commit/22316a2726db6c8b798be65d3da3504e27efee39))
-
-
+- add config ([12f123c](https://github.com/justdlabs/inertia.ts/commit/12f123c1f4313188ae10d9956b346c8f806681a9))
+- deps ([bf0bcf0](https://github.com/justdlabs/inertia.ts/commit/bf0bcf08d7557dbc49f4be54267f82bf722e8669))
+- fix deps ([ed112da](https://github.com/justdlabs/inertia.ts/commit/ed112dafc0c94771b83103fe45ac36dcb52d473c))
+- fix deps ([22316a2](https://github.com/justdlabs/inertia.ts/commit/22316a2726db6c8b798be65d3da3504e27efee39))
 
 ## [1.3.7](https://github.com/justdlabs/inertia.ts/compare/1.3.6...1.3.7) (2024-12-17)
 
-
 ### Bug Fixes
 
-* fix ([72de2e7](https://github.com/justdlabs/inertia.ts/commit/72de2e7f864d9f828d4ae097563396ef96710033))
-
-
+- fix ([72de2e7](https://github.com/justdlabs/inertia.ts/commit/72de2e7f864d9f828d4ae097563396ef96710033))
 
 ## [1.3.6](https://github.com/justdlabs/inertia.ts/compare/1.3.5...1.3.6) (2024-12-17)
 
-
 ### Bug Fixes
 
-* bump to beta 8 of tailwindcss ([163a8e3](https://github.com/justdlabs/inertia.ts/commit/163a8e3d503cb0f2f2d4772ada0853e5398d1acb))
-* sync ([73709ec](https://github.com/justdlabs/inertia.ts/commit/73709ec8f4650c8e618e23ed7d516d54bb0e8448))
-
-
+- bump to beta 8 of tailwindcss ([163a8e3](https://github.com/justdlabs/inertia.ts/commit/163a8e3d503cb0f2f2d4772ada0853e5398d1acb))
+- sync ([73709ec](https://github.com/justdlabs/inertia.ts/commit/73709ec8f4650c8e618e23ed7d516d54bb0e8448))
 
 ## [1.3.5](https://github.com/justdlabs/inertia.ts/compare/1.3.4...1.3.5) (2024-12-16)
 
-
 ### Bug Fixes
 
-* add bun to actions ([61be853](https://github.com/justdlabs/inertia.ts/commit/61be85394c620cf504e25cd553e7bedfc2f4f7a9))
-
-
+- add bun to actions ([61be853](https://github.com/justdlabs/inertia.ts/commit/61be85394c620cf504e25cd553e7bedfc2f4f7a9))
 
 ## [1.3.4](https://github.com/justdlabs/inertia.ts/compare/1.3.3...1.3.4) (2024-12-16)
 
-
 ### Bug Fixes
 
-* fix actions ([47e3a74](https://github.com/justdlabs/inertia.ts/commit/47e3a745e3668ed145d341d381948369bae4cab1))
-
-
+- fix actions ([47e3a74](https://github.com/justdlabs/inertia.ts/commit/47e3a745e3668ed145d341d381948369bae4cab1))
 
 ## [1.3.3](https://github.com/justdlabs/inertia.ts/compare/1.3.2...1.3.3) (2024-12-16)
 
-
 ### Bug Fixes
 
-* input error should not use cn from primitive ([cb816f7](https://github.com/justdlabs/inertia.ts/commit/cb816f7caf6a11f9c7f1d38b8f7e8012bc7aec21))
-
-
+- input error should not use cn from primitive ([cb816f7](https://github.com/justdlabs/inertia.ts/commit/cb816f7caf6a11f9c7f1d38b8f7e8012bc7aec21))
 
 ## [1.3.2](https://github.com/justdlabs/inertia.ts/compare/1.3.1...1.3.2) (2024-12-16)
 
-
 ### Bug Fixes
 
-* fix actions to use legacy ([0b691e5](https://github.com/justdlabs/inertia.ts/commit/0b691e538fd53ef7ddd6f35a866f9b6ea6a7f2b0))
-
-
+- fix actions to use legacy ([0b691e5](https://github.com/justdlabs/inertia.ts/commit/0b691e538fd53ef7ddd6f35a866f9b6ea6a7f2b0))
 
 ## [1.3.1](https://github.com/justdlabs/inertia.ts/compare/1.3.0...1.3.1) (2024-12-16)
 
-
-
 # [1.3.0](https://github.com/justdlabs/inertia.ts/compare/1.2.0...1.3.0) (2024-12-16)
 
-
 ### Bug Fixes
 
-* little thing ([d7a113c](https://github.com/justdlabs/inertia.ts/commit/d7a113c59f7f29a1103e19c9d71b82296d5758d5))
-
+- little thing ([d7a113c](https://github.com/justdlabs/inertia.ts/commit/d7a113c59f7f29a1103e19c9d71b82296d5758d5))
 
 ### Features
 
-* upgrade to react 19 and tailwindcss beta 7 ([afb1cdc](https://github.com/justdlabs/inertia.ts/commit/afb1cdcd98b06126cdb233cb5f6cc2861767c995))
-
-
+- upgrade to react 19 and tailwindcss beta 7 ([afb1cdc](https://github.com/justdlabs/inertia.ts/commit/afb1cdcd98b06126cdb233cb5f6cc2861767c995))
 
 # [1.2.0](https://github.com/justdlabs/inertia.ts/compare/1.1.8...1.2.0) (2024-12-14)
 
-
 ### Features
 
-* upgrade to inertia v2 ([fee9000](https://github.com/justdlabs/inertia.ts/commit/fee9000a614d5bfaddda6b39ac8eba392d667443))
-
-
+- upgrade to inertia v2 ([fee9000](https://github.com/justdlabs/inertia.ts/commit/fee9000a614d5bfaddda6b39ac8eba392d667443))
 
 ## [1.1.8](https://github.com/justdlabs/inertia.ts/compare/1.1.7...1.1.8) (2024-11-20)
 
-
 ### Bug Fixes
 
-* make it better ([a2c9f43](https://github.com/justdlabs/inertia.ts/commit/a2c9f43a1ee4b8db22bff2dbea5b1de847103303))
-
-
+- make it better ([a2c9f43](https://github.com/justdlabs/inertia.ts/commit/a2c9f43a1ee4b8db22bff2dbea5b1de847103303))
 
 ## [1.1.7](https://github.com/justdlabs/inertia.ts/compare/1.1.6...1.1.7) (2024-11-18)
 
-
 ### Bug Fixes
 
-* upgrade icons ([1606bf0](https://github.com/justdlabs/inertia.ts/commit/1606bf09cfa65ba464a0b42b9d7f0dd2b4c8d9c9))
-
-
+- upgrade icons ([1606bf0](https://github.com/justdlabs/inertia.ts/commit/1606bf09cfa65ba464a0b42b9d7f0dd2b4c8d9c9))
 
 ## [1.1.6](https://github.com/justdlabs/inertia.ts/compare/1.1.5...1.1.6) (2024-11-18)
 
-
 ### Bug Fixes
 
-* syncing ([1d8f16e](https://github.com/justdlabs/inertia.ts/commit/1d8f16eedeafbc623f69833910740ae36bad2f74))
-
-
+- syncing ([1d8f16e](https://github.com/justdlabs/inertia.ts/commit/1d8f16eedeafbc623f69833910740ae36bad2f74))
 
 ## [1.1.5](https://github.com/justdlabs/inertia.ts/compare/1.1.4...1.1.5) (2024-11-18)
 
-
 ### Bug Fixes
 
-* formatting ([fecdd87](https://github.com/justdlabs/inertia.ts/commit/fecdd8733d0a6fdcdd0e8317199fdea2110ba0e4))
-* upgrade ([3f13735](https://github.com/justdlabs/inertia.ts/commit/3f137357d3052ec02fa637af347d282ddf604e9b))
-
-
+- formatting ([fecdd87](https://github.com/justdlabs/inertia.ts/commit/fecdd8733d0a6fdcdd0e8317199fdea2110ba0e4))
+- upgrade ([3f13735](https://github.com/justdlabs/inertia.ts/commit/3f137357d3052ec02fa637af347d282ddf604e9b))
 
 ## [1.1.4](https://github.com/justdlabs/inertia.ts/compare/1.1.3...1.1.4) (2024-10-26)
 
-
 ### Bug Fixes
 
-* bump ([f18e3da](https://github.com/justdlabs/inertia.ts/commit/f18e3daa3948c628cda5da5dd8f6bef5454e70af))
-
-
+- bump ([f18e3da](https://github.com/justdlabs/inertia.ts/commit/f18e3daa3948c628cda5da5dd8f6bef5454e70af))
 
 ## [1.1.3](https://github.com/justdlabs/inertia.ts/compare/1.1.2...1.1.3) (2024-10-26)
 
-
 ### Bug Fixes
 
-* **app-navbar:** remove max-w-2xl ([1c92708](https://github.com/justdlabs/inertia.ts/commit/1c92708413feda1fc39c02d7b8c0b72b9c59f454))
-* sync navbar ([ebaa12d](https://github.com/justdlabs/inertia.ts/commit/ebaa12df839f89fa79d123379bf9bd45ab646b25))
-
-
+- **app-navbar:** remove max-w-2xl ([1c92708](https://github.com/justdlabs/inertia.ts/commit/1c92708413feda1fc39c02d7b8c0b72b9c59f454))
+- sync navbar ([ebaa12d](https://github.com/justdlabs/inertia.ts/commit/ebaa12df839f89fa79d123379bf9bd45ab646b25))
 
 ## [1.1.2](https://github.com/justdlabs/inertia.ts/compare/1.1.1...1.1.2) (2024-10-24)
 
-
 ### Bug Fixes
 
-* fix the navbar ([26859f4](https://github.com/justdlabs/inertia.ts/commit/26859f44dafa5519f46cb88235c3362b8c426548))
-
-
+- fix the navbar ([26859f4](https://github.com/justdlabs/inertia.ts/commit/26859f44dafa5519f46cb88235c3362b8c426548))
 
 ## [1.1.1](https://github.com/justdlabs/inertia.ts/compare/1.1.0...1.1.1) (2024-10-22)
 
-
-
 # [1.1.0](https://github.com/justdlabs/inertia.ts/compare/1.0.34...1.1.0) (2024-10-22)
 
-
 ### Bug Fixes
 
-* bump ([9cd9ba5](https://github.com/justdlabs/inertia.ts/commit/9cd9ba563d2107e603e2f68e46aa120a7a02454b))
-
+- bump ([9cd9ba5](https://github.com/justdlabs/inertia.ts/commit/9cd9ba563d2107e603e2f68e46aa120a7a02454b))
 
 ### Features
 
-* sync justd ([5ccf885](https://github.com/justdlabs/inertia.ts/commit/5ccf885ca9f09e85e004acc07b006a7b500c1c7c))
-
-
+- sync justd ([5ccf885](https://github.com/justdlabs/inertia.ts/commit/5ccf885ca9f09e85e004acc07b006a7b500c1c7c))
 
 ## [1.0.34](https://github.com/justdlabs/inertia.ts/compare/1.0.33...1.0.34) (2024-10-17)
 
-
 ### Bug Fixes
 
-* add flash message to page props ([5693438](https://github.com/justdlabs/inertia.ts/commit/5693438f098252f157fc3edc8f8d285e7a7fe479))
-
-
+- add flash message to page props ([5693438](https://github.com/justdlabs/inertia.ts/commit/5693438f098252f157fc3edc8f8d285e7a7fe479))
 
 ## [1.0.33](https://github.com/justdlabs/inertia.ts/compare/1.0.32...1.0.33) (2024-10-17)
 
-
 ### Bug Fixes
 
-* improve the global.d.ts file ([626f55c](https://github.com/justdlabs/inertia.ts/commit/626f55cfc4a5e6f3a17d04db1e95ee37025d0f83))
-
-
+- improve the global.d.ts file ([626f55c](https://github.com/justdlabs/inertia.ts/commit/626f55cfc4a5e6f3a17d04db1e95ee37025d0f83))
 
 ## [1.0.32](https://github.com/justdlabs/inertia.ts/compare/1.0.31...1.0.32) (2024-10-16)
 
-
 ### Bug Fixes
 
-* fix routing ssr ([829693d](https://github.com/justdlabs/inertia.ts/commit/829693d03508e0f483c157e988c5350cd04dd39b))
-
-
+- fix routing ssr ([829693d](https://github.com/justdlabs/inertia.ts/commit/829693d03508e0f483c157e988c5350cd04dd39b))
 
 ## [1.0.31](https://github.com/justdlabs/inertia.ts/compare/1.0.30...1.0.31) (2024-10-16)
 
-
 ### Bug Fixes
 
-* add run to composer.json ([ad00c97](https://github.com/justdlabs/inertia.ts/commit/ad00c975d4cb8ee502fb03c920cd2b1122adb9f9))
-
-
+- add run to composer.json ([ad00c97](https://github.com/justdlabs/inertia.ts/commit/ad00c975d4cb8ee502fb03c920cd2b1122adb9f9))
 
 ## [1.0.30](https://github.com/justdlabs/inertia.ts/compare/1.0.29...1.0.30) (2024-10-16)
 
-
 ### Bug Fixes
 
-* fix app.tsx ([bacb103](https://github.com/justdlabs/inertia.ts/commit/bacb103bf0293d4ddaf68391a55b5337bdc59674))
-
-
+- fix app.tsx ([bacb103](https://github.com/justdlabs/inertia.ts/commit/bacb103bf0293d4ddaf68391a55b5337bdc59674))
 
 ## [1.0.29](https://github.com/justdlabs/inertia.ts/compare/1.0.28...1.0.29) (2024-10-16)
 
-
 ### Bug Fixes
 
-* add ziggy location to inertia middleware ([a40dbc6](https://github.com/justdlabs/inertia.ts/commit/a40dbc68fe0650f9f6b8756067932521e45f805b))
-
-
+- add ziggy location to inertia middleware ([a40dbc6](https://github.com/justdlabs/inertia.ts/commit/a40dbc68fe0650f9f6b8756067932521e45f805b))
 
 ## [1.0.28](https://github.com/justdlabs/inertia.ts/compare/1.0.27...1.0.28) (2024-10-14)
 
-
 ### Bug Fixes
 
-* fix prettier ([0d32de2](https://github.com/justdlabs/inertia.ts/commit/0d32de2abe4d90fddf448997df697f037bca945b))
-
-
+- fix prettier ([0d32de2](https://github.com/justdlabs/inertia.ts/commit/0d32de2abe4d90fddf448997df697f037bca945b))
 
 ## [1.0.27](https://github.com/justdlabs/inertia.ts/compare/1.0.26...1.0.27) (2024-10-14)
 
-
 ### Bug Fixes
 
-* fix providers ([a8fdfb9](https://github.com/justdlabs/inertia.ts/commit/a8fdfb9af7549f1aa448b2e942cca2d6d44c8dfb))
-
-
+- fix providers ([a8fdfb9](https://github.com/justdlabs/inertia.ts/commit/a8fdfb9af7549f1aa448b2e942cca2d6d44c8dfb))
 
 ## [1.0.26](https://github.com/justdlabs/inertia.ts/compare/1.0.25...1.0.26) (2024-10-13)
 
-
 ### Bug Fixes
 
-* bumping vendor ([d992964](https://github.com/justdlabs/inertia.ts/commit/d99296422ce7d4bbc8707fc3c505cf0ff6976ed1))
-
-
+- bumping vendor ([d992964](https://github.com/justdlabs/inertia.ts/commit/d99296422ce7d4bbc8707fc3c505cf0ff6976ed1))
 
 ## [1.0.25](https://github.com/justdlabs/inertia.ts/compare/1.0.24...1.0.25) (2024-10-13)
 
-
 ### Bug Fixes
 
-* update to latest justd components ([a7aa011](https://github.com/justdlabs/inertia.ts/commit/a7aa011b5b3d4f22d09c0bf06a0c293897ff3c15))
-
-
+- update to latest justd components ([a7aa011](https://github.com/justdlabs/inertia.ts/commit/a7aa011b5b3d4f22d09c0bf06a0c293897ff3c15))
 
 ## [1.0.24](https://github.com/justdlabs/inertia.ts/compare/1.0.23...1.0.24) (2024-10-08)
 
-
 ### Bug Fixes
 
-* lfg ([c2cd08f](https://github.com/justdlabs/inertia.ts/commit/c2cd08fcf3872fecc789b10b45c9822639a36a71))
-
-
+- lfg ([c2cd08f](https://github.com/justdlabs/inertia.ts/commit/c2cd08fcf3872fecc789b10b45c9822639a36a71))
 
 ## [1.0.23](https://github.com/justdlabs/inertia.ts/compare/1.0.22...1.0.23) (2024-10-07)
 
-
 ### Bug Fixes
 
-* fix t ([9d444ba](https://github.com/justdlabs/inertia.ts/commit/9d444bae7133801275e48fce4688642815755242))
-* upgrade the rac to latest version and sync justd ([9484b63](https://github.com/justdlabs/inertia.ts/commit/9484b63031af882983e33733d0c78adefdb95803))
-
-
+- fix t ([9d444ba](https://github.com/justdlabs/inertia.ts/commit/9d444bae7133801275e48fce4688642815755242))
+- upgrade the rac to latest version and sync justd ([9484b63](https://github.com/justdlabs/inertia.ts/commit/9484b63031af882983e33733d0c78adefdb95803))
 
 ## [1.0.22](https://github.com/justdlabs/inertia.ts/compare/1.0.21...1.0.22) (2024-09-16)
 
-
-
 ## [1.0.21](https://github.com/justdlabs/inertia.ts/compare/1.0.20...1.0.21) (2024-09-16)
 
-
 ### Bug Fixes
 
-* fix touch target not being installed ([172d58e](https://github.com/justdlabs/inertia.ts/commit/172d58e58b0bc1c103bd9f3ae4a87bbb774e6dc7))
-
-
+- fix touch target not being installed ([172d58e](https://github.com/justdlabs/inertia.ts/commit/172d58e58b0bc1c103bd9f3ae4a87bbb774e6dc7))
 
 ## [1.0.20](https://github.com/justdlabs/inertia.ts/compare/1.0.19...1.0.20) (2024-09-16)
 
-
 ### Bug Fixes
 
-* bump packages ([9a9c2d1](https://github.com/justdlabs/inertia.ts/commit/9a9c2d15ef9cbccb9f104760c2ea9bb2aa9ee03f))
-* refactor all components ([11ea304](https://github.com/justdlabs/inertia.ts/commit/11ea304cba7b5b80c669fd967ed48b47fc339efa))
-
-
+- bump packages ([9a9c2d1](https://github.com/justdlabs/inertia.ts/commit/9a9c2d15ef9cbccb9f104760c2ea9bb2aa9ee03f))
+- refactor all components ([11ea304](https://github.com/justdlabs/inertia.ts/commit/11ea304cba7b5b80c669fd967ed48b47fc339efa))
 
 ## [1.0.19](https://github.com/justdlabs/inertia.ts/compare/1.0.18...1.0.19) (2024-09-12)
 
-
-
 ## [1.0.18](https://github.com/justdlabs/inertia.ts/compare/1.0.17...1.0.18) (2024-09-09)
 
-
-
 ## [1.0.17](https://github.com/justdlabs/inertia.ts/compare/1.0.16...1.0.17) (2024-09-07)
 
-
 ### Bug Fixes
 
-* move theme switcher to menu sub ([cac009d](https://github.com/justdlabs/inertia.ts/commit/cac009d266be9c5586ecf1446f3e6859af2e237e))
-
-
+- move theme switcher to menu sub ([cac009d](https://github.com/justdlabs/inertia.ts/commit/cac009d266be9c5586ecf1446f3e6859af2e237e))
 
 ## [1.0.16](https://github.com/justdlabs/inertia.ts/compare/1.0.15...1.0.16) (2024-09-06)
 
-
 ### Bug Fixes
 
-* bump ([049a347](https://github.com/justdlabs/inertia.ts/commit/049a347323942bccbd54e3b7081a315a49436d40))
-
-
+- bump ([049a347](https://github.com/justdlabs/inertia.ts/commit/049a347323942bccbd54e3b7081a315a49436d40))
 
 ## [1.0.15](https://github.com/justdlabs/inertia.ts/compare/1.0.14...1.0.15) (2024-09-01)
 
-
-
 ## [1.0.14](https://github.com/justdlabs/inertia.ts/compare/1.0.13...1.0.14) (2024-08-22)
 
-
-
 ## [1.0.13](https://github.com/justdlabs/inertia.ts/compare/1.0.12...1.0.13) (2024-08-13)
 
-
 ### Bug Fixes
 
-* fix cmd installation ([4472e9f](https://github.com/justdlabs/inertia.ts/commit/4472e9f599976968594ce3ef1825a186f89910ca))
-
-
+- fix cmd installation ([4472e9f](https://github.com/justdlabs/inertia.ts/commit/4472e9f599976968594ce3ef1825a186f89910ca))
 
 ## [1.0.12](https://github.com/justdlabs/inertia.ts/compare/1.0.11...1.0.12) (2024-08-13)
 
-
 ### Bug Fixes
 
-* bump ([9fb1857](https://github.com/justdlabs/inertia.ts/commit/9fb1857d1ca0947d8376787d5f4bdf09c3a8f7d1))
-* bump again ([e42a8d3](https://github.com/justdlabs/inertia.ts/commit/e42a8d361270f1232901067b3fa35869e17ee12b))
-
-
+- bump ([9fb1857](https://github.com/justdlabs/inertia.ts/commit/9fb1857d1ca0947d8376787d5f4bdf09c3a8f7d1))
+- bump again ([e42a8d3](https://github.com/justdlabs/inertia.ts/commit/e42a8d361270f1232901067b3fa35869e17ee12b))
 
 ## [1.0.11](https://github.com/justdlabs/inertia.ts/compare/1.0.10...1.0.11) (2024-08-13)
 
-
 ### Bug Fixes
 
-* sync ([46772c9](https://github.com/justdlabs/inertia.ts/commit/46772c90832ca53facd6225fc02d529d12d99b2f))
-* sync latest justd components ([5506cb3](https://github.com/justdlabs/inertia.ts/commit/5506cb3501c97a42d0705af3ebf6df53cff11175))
-
-
+- sync ([46772c9](https://github.com/justdlabs/inertia.ts/commit/46772c90832ca53facd6225fc02d529d12d99b2f))
+- sync latest justd components ([5506cb3](https://github.com/justdlabs/inertia.ts/commit/5506cb3501c97a42d0705af3ebf6df53cff11175))
 
 ## [1.0.10](https://github.com/justdlabs/inertia.ts/compare/1.0.9...1.0.10) (2024-08-11)
 
-
-
 ## [1.0.9](https://github.com/justdlabs/inertia.ts/compare/1.0.8...1.0.9) (2024-08-10)
 
-
-
 ## [1.0.8](https://github.com/justdlabs/inertia.ts/compare/1.0.7...1.0.8) (2024-08-10)
 
-
-
 ## [1.0.7](https://github.com/justdlabs/inertia.ts/compare/1.0.6...1.0.7) (2024-08-08)
 
-
-
 ## [1.0.6](https://github.com/justdlabs/inertia.ts/compare/1.0.5...1.0.6) (2024-08-07)
 
-
-
 ## [1.0.5](https://github.com/justdlabs/inertia.ts/compare/1.0.4...1.0.5) (2024-08-07)
 
-
-
 ## [1.0.4](https://github.com/justdlabs/inertia.ts/compare/1.0.3...1.0.4) (2024-08-06)
 
-
-
 ## [1.0.3](https://github.com/justdlabs/inertia.ts/compare/1.0.2...1.0.3) (2024-08-05)
 
-
-
 ## [1.0.2](https://github.com/justdlabs/inertia.ts/compare/1.0.1...1.0.2) (2024-08-04)
 
-
-
 ## [1.0.1](https://github.com/justdlabs/inertia.ts/compare/ac5b3945c2cb5576a908939a2b9420b9db05d411...1.0.1) (2024-08-04)
 
-
 ### Bug Fixes
 
-* make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411))
+- make all automate ([ac5b394](https://github.com/justdlabs/inertia.ts/commit/ac5b3945c2cb5576a908939a2b9420b9db05d411))
 
 ## <small>1.3.7 (2024-12-17)</small>
 
diff --git a/bun.lockb b/bun.lockb
index bd4a019..44142dd 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/composer.lock b/composer.lock
index 5901433..d4c87ba 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
     "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
     "This file is @generated automatically"
   ],
-  "content-hash": "77fadc747a2eb7ff8fc31cb8520fb04d",
+  "content-hash": "8e818d0458333ec1a467d9486c82218c",
   "packages": [
     {
       "name": "amphp/amp",
@@ -209,16 +209,16 @@
     },
     {
       "name": "amphp/dns",
-      "version": "v2.2.0",
+      "version": "v2.3.0",
       "source": {
         "type": "git",
         "url": "https://github.com/amphp/dns.git",
-        "reference": "758266b0ea7470e2e42cd098493bc6d6c7100cf7"
+        "reference": "166c43737cef1b77782c648a9d9ed11ee0c9859f"
       },
       "dist": {
         "type": "zip",
-        "url": "https://api.github.com/repos/amphp/dns/zipball/758266b0ea7470e2e42cd098493bc6d6c7100cf7",
-        "reference": "758266b0ea7470e2e42cd098493bc6d6c7100cf7",
+        "url": "https://api.github.com/repos/amphp/dns/zipball/166c43737cef1b77782c648a9d9ed11ee0c9859f",
+        "reference": "166c43737cef1b77782c648a9d9ed11ee0c9859f",
         "shasum": ""
       },
       "require": {
@@ -226,9 +226,10 @@
         "amphp/byte-stream": "^2",
         "amphp/cache": "^2",
         "amphp/parser": "^1",
-        "amphp/windows-registry": "^1.0.1",
+        "amphp/process": "^2",
         "daverandom/libdns": "^2.0.2",
         "ext-filter": "*",
+        "ext-json": "*",
         "php": ">=8.1",
         "revolt/event-loop": "^1 || ^0.2"
       },
@@ -274,7 +275,7 @@
       "keywords": ["amp", "amphp", "async", "client", "dns", "resolve"],
       "support": {
         "issues": "https://github.com/amphp/dns/issues",
-        "source": "https://github.com/amphp/dns/tree/v2.2.0"
+        "source": "https://github.com/amphp/dns/tree/v2.3.0"
       },
       "funding": [
         {
@@ -282,20 +283,20 @@
           "type": "github"
         }
       ],
-      "time": "2024-06-02T19:54:12+00:00"
+      "time": "2024-12-21T01:15:34+00:00"
     },
     {
       "name": "amphp/parallel",
-      "version": "v2.3.0",
+      "version": "v2.3.1",
       "source": {
         "type": "git",
         "url": "https://github.com/amphp/parallel.git",
-        "reference": "9777db1460d1535bc2a843840684fb1205225b87"
+        "reference": "5113111de02796a782f5d90767455e7391cca190"
       },
       "dist": {
         "type": "zip",
-        "url": "https://api.github.com/repos/amphp/parallel/zipball/9777db1460d1535bc2a843840684fb1205225b87",
-        "reference": "9777db1460d1535bc2a843840684fb1205225b87",
+        "url": "https://api.github.com/repos/amphp/parallel/zipball/5113111de02796a782f5d90767455e7391cca190",
+        "reference": "5113111de02796a782f5d90767455e7391cca190",
         "shasum": ""
       },
       "require": {
@@ -350,7 +351,7 @@
       "keywords": ["async", "asynchronous", "concurrent", "multi-processing", "multi-threading"],
       "support": {
         "issues": "https://github.com/amphp/parallel/issues",
-        "source": "https://github.com/amphp/parallel/tree/v2.3.0"
+        "source": "https://github.com/amphp/parallel/tree/v2.3.1"
       },
       "funding": [
         {
@@ -358,7 +359,7 @@
           "type": "github"
         }
       ],
-      "time": "2024-09-14T19:16:14+00:00"
+      "time": "2024-12-21T01:56:09+00:00"
     },
     {
       "name": "amphp/parser",
@@ -721,56 +722,6 @@
       ],
       "time": "2024-08-03T19:31:26+00:00"
     },
-    {
-      "name": "amphp/windows-registry",
-      "version": "v1.0.1",
-      "source": {
-        "type": "git",
-        "url": "https://github.com/amphp/windows-registry.git",
-        "reference": "0d569e8f256cca974e3842b6e78b4e434bf98306"
-      },
-      "dist": {
-        "type": "zip",
-        "url": "https://api.github.com/repos/amphp/windows-registry/zipball/0d569e8f256cca974e3842b6e78b4e434bf98306",
-        "reference": "0d569e8f256cca974e3842b6e78b4e434bf98306",
-        "shasum": ""
-      },
-      "require": {
-        "amphp/byte-stream": "^2",
-        "amphp/process": "^2",
-        "php": ">=8.1"
-      },
-      "require-dev": {
-        "amphp/php-cs-fixer-config": "^2",
-        "psalm/phar": "^5.4"
-      },
-      "type": "library",
-      "autoload": {
-        "psr-4": {
-          "Amp\\WindowsRegistry\\": "src"
-        }
-      },
-      "notification-url": "https://packagist.org/downloads/",
-      "license": ["MIT"],
-      "authors": [
-        {
-          "name": "Niklas Keller",
-          "email": "me@kelunik.com"
-        }
-      ],
-      "description": "Windows Registry Reader.",
-      "support": {
-        "issues": "https://github.com/amphp/windows-registry/issues",
-        "source": "https://github.com/amphp/windows-registry/tree/v1.0.1"
-      },
-      "funding": [
-        {
-          "url": "https://github.com/amphp",
-          "type": "github"
-        }
-      ],
-      "time": "2024-01-30T23:01:51+00:00"
-    },
     {
       "name": "brick/math",
       "version": "0.12.1",
@@ -1928,16 +1879,16 @@
     },
     {
       "name": "laravel/framework",
-      "version": "v11.35.1",
+      "version": "v11.36.1",
       "source": {
         "type": "git",
         "url": "https://github.com/laravel/framework.git",
-        "reference": "dcfa130ede1a6fa4343dc113410963e791ad34fb"
+        "reference": "df06f5163f4550641fdf349ebc04916a61135a64"
       },
       "dist": {
         "type": "zip",
-        "url": "https://api.github.com/repos/laravel/framework/zipball/dcfa130ede1a6fa4343dc113410963e791ad34fb",
-        "reference": "dcfa130ede1a6fa4343dc113410963e791ad34fb",
+        "url": "https://api.github.com/repos/laravel/framework/zipball/df06f5163f4550641fdf349ebc04916a61135a64",
+        "reference": "df06f5163f4550641fdf349ebc04916a61135a64",
         "shasum": ""
       },
       "require": {
@@ -1958,7 +1909,7 @@
         "guzzlehttp/uri-template": "^1.0",
         "laravel/prompts": "^0.1.18|^0.2.0|^0.3.0",
         "laravel/serializable-closure": "^1.3|^2.0",
-        "league/commonmark": "^2.2.1",
+        "league/commonmark": "^2.6",
         "league/flysystem": "^3.25.1",
         "league/flysystem-local": "^3.25.1",
         "league/uri": "^7.5.1",
@@ -1973,7 +1924,7 @@
         "symfony/console": "^7.0.3",
         "symfony/error-handler": "^7.0.3",
         "symfony/finder": "^7.0.3",
-        "symfony/http-foundation": "^7.0.3",
+        "symfony/http-foundation": "^7.2.0",
         "symfony/http-kernel": "^7.0.3",
         "symfony/mailer": "^7.0.3",
         "symfony/mime": "^7.0.3",
@@ -2134,7 +2085,7 @@
         "issues": "https://github.com/laravel/framework/issues",
         "source": "https://github.com/laravel/framework"
       },
-      "time": "2024-12-12T18:25:58+00:00"
+      "time": "2024-12-17T22:32:08+00:00"
     },
     {
       "name": "laravel/prompts",
@@ -2193,16 +2144,16 @@
     },
     {
       "name": "laravel/sanctum",
-      "version": "v4.0.6",
+      "version": "v4.0.7",
       "source": {
         "type": "git",
         "url": "https://github.com/laravel/sanctum.git",
-        "reference": "9e069e36d90b1e1f41886efa0fe9800a6b354694"
+        "reference": "698064236a46df016e64a7eb059b1414e0b281df"
       },
       "dist": {
         "type": "zip",
-        "url": "https://api.github.com/repos/laravel/sanctum/zipball/9e069e36d90b1e1f41886efa0fe9800a6b354694",
-        "reference": "9e069e36d90b1e1f41886efa0fe9800a6b354694",
+        "url": "https://api.github.com/repos/laravel/sanctum/zipball/698064236a46df016e64a7eb059b1414e0b281df",
+        "reference": "698064236a46df016e64a7eb059b1414e0b281df",
         "shasum": ""
       },
       "require": {
@@ -2245,20 +2196,20 @@
         "issues": "https://github.com/laravel/sanctum/issues",
         "source": "https://github.com/laravel/sanctum"
       },
-      "time": "2024-11-26T21:18:33+00:00"
+      "time": "2024-12-11T16:40:21+00:00"
     },
     {
       "name": "laravel/serializable-closure",
-      "version": "v2.0.0",
+      "version": "v2.0.1",
       "source": {
         "type": "git",
         "url": "https://github.com/laravel/serializable-closure.git",
-        "reference": "0d8d3d8086984996df86596a86dea60398093a81"
+        "reference": "613b2d4998f85564d40497e05e89cb6d9bd1cbe8"
       },
       "dist": {
         "type": "zip",
-        "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/0d8d3d8086984996df86596a86dea60398093a81",
-        "reference": "0d8d3d8086984996df86596a86dea60398093a81",
+        "url": "https://api.github.com/repos/laravel/serializable-closure/zipball/613b2d4998f85564d40497e05e89cb6d9bd1cbe8",
+        "reference": "613b2d4998f85564d40497e05e89cb6d9bd1cbe8",
         "shasum": ""
       },
       "require": {
@@ -2300,7 +2251,7 @@
         "issues": "https://github.com/laravel/serializable-closure/issues",
         "source": "https://github.com/laravel/serializable-closure"
       },
-      "time": "2024-11-19T01:38:44+00:00"
+      "time": "2024-12-16T15:26:28+00:00"
     },
     {
       "name": "laravel/tinker",
@@ -2972,16 +2923,16 @@
     },
     {
       "name": "nesbot/carbon",
-      "version": "3.8.2",
+      "version": "3.8.3",
       "source": {
         "type": "git",
         "url": "https://github.com/briannesbitt/Carbon.git",
-        "reference": "e1268cdbc486d97ce23fef2c666dc3c6b6de9947"
+        "reference": "f01cfa96468f4c38325f507ab81a4f1d2cd93cfe"
       },
       "dist": {
         "type": "zip",
-        "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/e1268cdbc486d97ce23fef2c666dc3c6b6de9947",
-        "reference": "e1268cdbc486d97ce23fef2c666dc3c6b6de9947",
+        "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/f01cfa96468f4c38325f507ab81a4f1d2cd93cfe",
+        "reference": "f01cfa96468f4c38325f507ab81a4f1d2cd93cfe",
         "shasum": ""
       },
       "require": {
@@ -3011,15 +2962,15 @@
       "bin": ["bin/carbon"],
       "type": "library",
       "extra": {
-        "branch-alias": {
-          "dev-master": "3.x-dev",
-          "dev-2.x": "2.x-dev"
-        },
         "laravel": {
           "providers": ["Carbon\\Laravel\\ServiceProvider"]
         },
         "phpstan": {
           "includes": ["extension.neon"]
+        },
+        "branch-alias": {
+          "dev-2.x": "2.x-dev",
+          "dev-master": "3.x-dev"
         }
       },
       "autoload": {
@@ -3062,7 +3013,7 @@
           "type": "tidelift"
         }
       ],
-      "time": "2024-11-07T17:46:48+00:00"
+      "time": "2024-12-21T18:03:19+00:00"
     },
     {
       "name": "nette/schema",
@@ -6804,31 +6755,33 @@
     },
     {
       "name": "tijsverkoyen/css-to-inline-styles",
-      "version": "v2.2.7",
+      "version": "v2.3.0",
       "source": {
         "type": "git",
         "url": "https://github.com/tijsverkoyen/CssToInlineStyles.git",
-        "reference": "83ee6f38df0a63106a9e4536e3060458b74ccedb"
+        "reference": "0d72ac1c00084279c1816675284073c5a337c20d"
       },
       "dist": {
         "type": "zip",
-        "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/83ee6f38df0a63106a9e4536e3060458b74ccedb",
-        "reference": "83ee6f38df0a63106a9e4536e3060458b74ccedb",
+        "url": "https://api.github.com/repos/tijsverkoyen/CssToInlineStyles/zipball/0d72ac1c00084279c1816675284073c5a337c20d",
+        "reference": "0d72ac1c00084279c1816675284073c5a337c20d",
         "shasum": ""
       },
       "require": {
         "ext-dom": "*",
         "ext-libxml": "*",
-        "php": "^5.5 || ^7.0 || ^8.0",
-        "symfony/css-selector": "^2.7 || ^3.0 || ^4.0 || ^5.0 || ^6.0 || ^7.0"
+        "php": "^7.4 || ^8.0",
+        "symfony/css-selector": "^5.4 || ^6.0 || ^7.0"
       },
       "require-dev": {
-        "phpunit/phpunit": "^4.8.35 || ^5.7 || ^6.0 || ^7.5 || ^8.5.21 || ^9.5.10"
+        "phpstan/phpstan": "^2.0",
+        "phpstan/phpstan-phpunit": "^2.0",
+        "phpunit/phpunit": "^8.5.21 || ^9.5.10"
       },
       "type": "library",
       "extra": {
         "branch-alias": {
-          "dev-master": "2.2.x-dev"
+          "dev-master": "2.x-dev"
         }
       },
       "autoload": {
@@ -6849,9 +6802,9 @@
       "homepage": "https://github.com/tijsverkoyen/CssToInlineStyles",
       "support": {
         "issues": "https://github.com/tijsverkoyen/CssToInlineStyles/issues",
-        "source": "https://github.com/tijsverkoyen/CssToInlineStyles/tree/v2.2.7"
+        "source": "https://github.com/tijsverkoyen/CssToInlineStyles/tree/v2.3.0"
       },
-      "time": "2023-12-08T13:03:43+00:00"
+      "time": "2024-12-21T16:25:41+00:00"
     },
     {
       "name": "vlucas/phpdotenv",
diff --git a/package.json b/package.json
index 0135711..1004132 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@inertiajs/react": "^2.0.0",
     "@release-it/bumper": "^6.0.1",
-    "@release-it/conventional-changelog": "^9.0.3",
-    "@types/react": "^19.0.1",
+    "@release-it/conventional-changelog": "^9.0.4",
+    "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
@@ -24,7 +24,7 @@
     "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "release-it": "^17.10.0",
+    "release-it": "^17.11.0",
     "tailwindcss": "^4.0.0-beta.8",
     "typescript": "^5.7.2",
     "vite-plugin-watch": "^0.3.1"
@@ -33,16 +33,16 @@
     "@tailwindcss/vite": "^4.0.0-beta.8",
     "@types/node": "^22.10.2",
     "clsx": "^2.1.1",
-    "justd-icons": "^1.10.4",
+    "justd-icons": "^1.10.8",
     "motion": "^11.15.0",
     "react": "^19.0.0",
     "react-aria-components": "^1.5.0",
     "react-dom": "^19.0.0",
     "sonner": "^1.7.1",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "vite": "^6.0.3"
+    "vite": "^6.0.6"
   },
-  "version": "1.3.7"
+  "version": "1.3.8"
 }
diff --git a/resources/js/components/ui/avatar.tsx b/resources/js/components/ui/avatar.tsx
index a471e43..70da228 100644
--- a/resources/js/components/ui/avatar.tsx
+++ b/resources/js/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-import { tv } from 'tailwind-variants';
+import { type VariantProps, tv } from 'tailwind-variants';
 
 const avatar = tv({
   base: [
     'inline-grid shrink-0 align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1',
-    'outline-1 -outline-offset-1 outline-fg/(--ring-opacity)'
+    '-outline-offset-1 outline-1 outline-fg/(--ring-opacity)'
   ],
   variants: {
     shape: {
@@ -11,6 +11,7 @@ const avatar = tv({
       circle: 'rounded-full *:rounded-full'
     },
     size: {
+      'extra-small': 'size-5 *:size-5',
       small: 'size-6 *:size-6',
       medium: 'size-8 *:size-8',
       large: 'size-10 *:size-10',
@@ -19,10 +20,8 @@ const avatar = tv({
   }
 });
 
-interface AvatarProps {
+interface AvatarProps extends VariantProps<typeof avatar> {
   src?: string | null;
-  shape?: 'square' | 'circle';
-  size?: 'small' | 'medium' | 'large' | 'extra-large';
   initials?: string;
   alt?: string;
   className?: string;
@@ -57,3 +56,4 @@ const Avatar = ({
 };
 
 export { Avatar };
+export type { AvatarProps };
diff --git a/resources/js/components/ui/button.tsx b/resources/js/components/ui/button.tsx
index ce03017..57409d0 100644
--- a/resources/js/components/ui/button.tsx
+++ b/resources/js/components/ui/button.tsx
@@ -10,67 +10,65 @@ import { focusButtonStyles } from './primitive';
 const buttonStyles = tv({
   extend: focusButtonStyles,
   base: [
-    'kbt32x before:absolute after:absolute box-border relative no-underline isolate inline-flex items-center justify-center gap-x-2 border font-medium',
+    'kbt32x relative flex items-center justify-center gap-x-2 border font-medium',
     'forced-colors:[--button-icon:ButtonText] forced-colors:data-hovered:[--button-icon:ButtonText]',
-    '*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-(--button-icon)'
+    '*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-1 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:text-current/60'
   ],
   variants: {
     intent: {
       primary: [
-        'text-primary-fg [--button-bg:var(--color-primary)] [--button-border:var(--color-primary)] [--button-hover-overlay:var(--color-primary-fg)]/10',
-        '[--button-icon:var(--color-primary-fg)]/60 data-pressed:[--button-icon:var(--color-primary-fg)]/80 data-hovered:[--button-icon:var(--color-primary-fg)]/80'
+        'outline-primary [--btn-bg:theme(--color-primary/95%)] [--btn-border:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] dark:[--btn-bg:theme(--color-primary/90%)]',
+        '[--btn-bg-hovered:theme(--color-primary/87%)] [--btn-border-hovered:theme(--color-primary/87%)] dark:[--btn-bg-hovered:theme(--color-primary)] dark:[--btn-border-hovered:theme(--color-primary)]',
+        'inset-shadow-primary-fg/20 data-hovered:inset-shadow-primary-fg/25 data-pressed:inset-shadow-primary-fg/20'
       ],
       secondary: [
-        'text-secondary-fg [--button-bg:var(--color-secondary)] dark:[--button-bg:var(--color-secondary)] [--button-border:var(--color-secondary-fg)]/10 [--button-hover-overlay:color-mix(in_oklab,var(--color-secondary)_95%,white_5%)] data-data-pressed:[--button-border:var(--color-secondary-fg)]/15 data-hovered:[--button-border:var(--color-secondary-fg)]/15',
-        '[--button-icon:var(--color-secondary-fg)]/60 data-pressed:[--button-icon:var(--color-secondary-fg)] data-hovered:[--button-icon:var(--color-secondary-fg)]'
+        '[--btn-bg:theme(--color-secondary/95%)] [--btn-border:theme(--color-secondary-fg/10%)] [--btn-fg:var(--color-secondary-fg)] dark:[--btn-bg:theme(--color-secondary/85%)] dark:[--btn-border:theme(--color-secondary-fg/7%)]',
+        '[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_60%,white_20%)] dark:[--btn-bg-hovered:color-mix(in_oklab,var(--color-secondary)_96%,white_4%)]',
+        'inset-shadow-white/15 data-hovered:inset-shadow-white/20 data-pressed:inset-shadow-white/15'
       ],
       warning: [
-        'text-warning-fg outline-warning [--button-bg:var(--color-warning)] [--button-border:var(--color-warning)] [--button-hover-overlay:color-mix(in_oklab,var(--color-warning)_90%,white_10%)]',
-        '[--button-icon:var(--color-warning-fg)]/60 data-pressed:[--button-icon:var(--color-warning-fg)]/80 data-hovered:[--button-icon:var(--color-warning-fg)]/80'
+        '[--btn-warning:theme(--color-warning/97%)]',
+        '[--btn-warning-hovered:color-mix(in_oklab,var(--color-warning)_85%,white_15%)]',
+        'dark:[--btn-warning-hovered:color-mix(in_oklab,var(--color-warning)_90%,white_10%)]',
+        'outline-warning [--btn-bg:var(--btn-warning)] [--btn-border:var(--btn-warning)] [--btn-fg:var(--color-warning-fg)]',
+        '[--btn-bg-hovered:var(--btn-warning-hovered)] [--btn-border-hovered:var(--btn-warning-hovered)]',
+        'inset-shadow-white/25 data-hovered:inset-shadow-white/30 data-pressed:inset-shadow-white/25'
       ],
       danger: [
-        'text-danger-fg outline-danger [--button-bg:var(--color-danger)] [--button-border:var(--color-danger)] [--button-hover-overlay:var(--color-danger-fg)]/10',
-        '[--button-icon:var(--color-white)]/60 data-pressed:[--button-icon:var(--color-danger-fg)]/80 data-hovered:[--button-icon:var(--color-danger-fg)]/80'
+        'outline-danger [--btn-bg:var(--color-danger)] [--btn-border:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] dark:[--btn-bg:var(--color-danger)]',
+        '[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_93%,white_7%)]',
+        'dark:[--btn-danger-hovered:color-mix(in_oklab,var(--color-danger)_96%,white_4%)]',
+        '[--btn-bg-hovered:var(--btn-danger-hovered)] [--btn-border-hovered:var(--btn-danger-hovered)]',
+        'inset-shadow-danger-fg/30 data-hovered:inset-shadow-danger-fg/35 data-pressed:inset-shadow-danger-fg/30'
       ]
     },
     appearance: {
       solid: [
-        'border-transparent bg-(--button-border)',
-        'before:inset-0 before:-z-10 before:bg-(--button-bg) before:shadow-sm data-disabled:before:shadow-none',
-        'after:shadow-[shadow:inset_0_1px_theme(--color-white/15%)] data-pressed:after:bg-(--button-hover-overlay) data-hovered:after:bg-(--button-hover-overlay) data-disabled:after:shadow-none after:inset-0 after:-z-10',
-        'dark:after:-inset-px dark:before:hidden dark:border-white/5 dark:bg-(--button-bg)'
+        'inset-ring-0 dark:inset-ring dark:border-0',
+        'inset-ring-(--btn-border) inset-shadow-2xs border-(--btn-border) bg-(--btn-bg) text-(--btn-fg)',
+        'data-hovered:bg-(--btn-bg-hovered) data-hovered:ring-(--btn-border-hovered) data-hovered:*:data-[slot=icon]:text-current/90',
+        'data-pressed:border-(--btn-border) data-pressed:bg-(--btn-bg) data-pressed:*:data-[slot=icon]:text-current'
       ],
-      outline: [
-        'border-border data-hovered:border-secondary-fg/10 data-pressed:border-secondary-fg/10 data-hovered:bg-secondary/90 text-secondary-fg',
-        '[--button-icon:var(--color-secondary-fg)]/50 data-hovered:[--button-icon:var(--color-fg)]',
-        'data-pressed:bg-secondary/90 data-pressed:[--button-icon:var(--color-secondary-fg)]'
-      ],
-      plain: [
-        'border-transparent text-secondary-fg [--button-icon:var(--color-secondary-fg)]/50',
-        'data-hovered:[--button-icon:var(--color-secondary-fg)] data-hovered:bg-secondary',
-        'data-pressed:[--button-icon:var(--color-secondary-fg)] data-pressed:bg-secondary'
-      ]
+      outline: ['border data-hovered:bg-secondary data-pressed:bg-secondary'],
+      plain: ['border-transparent data-hovered:bg-secondary data-pressed:bg-secondary']
     },
     size: {
-      'extra-small':
-        'h-8 px-[calc(calc(var(--spacing)*3)-1px)] py-[calc(calc(var(--spacing)*1)-1px)] text-xs/4 lg:text-[0.800rem]/4',
-      small: 'h-9 px-[calc(calc(var(--spacing)*4)-1px)] py-[calc(calc(var(--spacing)*1.5)-1px)] text-sm/5 sm:text-sm/5',
-      medium: 'h-10 px-[calc(calc(var(--spacing)*4)-1px)] py-[calc(calc(var(--spacing)*2)-1px)] text-base sm:text-sm/6',
-      large:
-        'h-10 *:data-[slot=icon]:mx-[-3px] sm:h-11 px-[calc(calc(var(--spacing)*4)-1px)] sm:px-[calc(calc(var(--spacing)*5)-1px)] py-[calc(calc(var(--spacing)*2.5)-1px)] text-base lg:text-base/7 sm:*:data-[slot=icon]:size-5',
+      'extra-small': 'h-8 px-[calc(var(--spacing)*2.7)] text-xs/4 lg:text-[0.800rem]/4',
+      small: 'h-9 px-3.5 text-sm/5 sm:text-sm/5',
+      medium: 'h-10 px-4 text-base sm:text-sm/6',
+      large: 'h-11 px-4.5 text-base *:data-[slot=icon]:mx-[-1.5px] sm:*:data-[slot=icon]:size-5 lg:text-base/7',
       'square-petite': 'size-9 shrink-0 **:data-[slot=icon]:text-current'
     },
     shape: {
-      square:
-        'rounded-lg before:rounded-[calc(var(--radius-lg)-1px)] after:rounded-[calc(var(--radius-lg)-1px)] dark:after:rounded-lg',
-      circle: 'rounded-full before:rounded-full after:rounded-full'
+      square: 'rounded-lg',
+      circle: 'rounded-full'
     },
     isDisabled: {
-      false: 'forced-colors:data-disabled:text-[GrayText] cursor-pointer',
-      true: 'cursor-default opacity-60 forced-colors:data-disabled:text-[GrayText]'
+      false: 'cursor-pointer forced-colors:data-disabled:text-[GrayText]',
+      true: 'inset-shadow-none cursor-default border-0 opacity-50 ring-0 dark:inset-ring-0 forced-colors:data-disabled:text-[GrayText]'
     },
     isPending: {
-      true: 'cursor-default'
+      true: 'cursor-default opacity-50'
     }
   },
   defaultVariants: {
@@ -110,4 +108,5 @@ const Button = ({ className, intent, appearance, size, shape, ref, ...props }: B
   );
 };
 
-export { Button, ButtonPrimitive, buttonStyles, type ButtonProps };
+export { Button, ButtonPrimitive, buttonStyles };
+export type { ButtonProps };
diff --git a/resources/js/components/ui/card.tsx b/resources/js/components/ui/card.tsx
index b451d5d..4c9c8f8 100644
--- a/resources/js/components/ui/card.tsx
+++ b/resources/js/components/ui/card.tsx
@@ -5,13 +5,13 @@ import { Heading } from './heading';
 const card = tv({
   slots: {
     root: [
-      'xrkr rounded-lg bg-bg xkd2 has-[table]:**:data-[slot=card-footer]:border-t **:data-[slot=table-header]:bg-muted/50 has-[table]:overflow-hidden border text-fg shadow-xs **:[table]:overflow-hidden'
+      'xrkr xkd2 rounded-lg border bg-bg text-fg shadow-xs has-[table]:overflow-hidden **:data-[slot=table-header]:bg-muted/50 has-[table]:**:data-[slot=card-footer]:border-t **:[table]:overflow-hidden'
     ],
     header: 'flex flex-col gap-y-1 px-6 py-5',
-    title: 'sm:leading-6 leading-none font-semibold tracking-tight',
+    title: 'font-semibold leading-none tracking-tight sm:leading-6',
     description: 'text-muted-fg text-sm',
     content:
-      'px-6 pb-6 has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 [&:has(table)+[data-slot=card-footer]]:py-5 has-[table]:border-t **:data-[slot=table-cell]:px-6 **:data-[slot=table-column]:px-6',
+      'px-6 pb-6 has-[table]:border-t has-[[data-slot=table-header]]:bg-muted/40 has-[table]:p-0 **:data-[slot=table-cell]:px-6 **:data-[slot=table-column]:px-6 [&:has(table)+[data-slot=card-footer]]:py-5',
     footer: 'flex items-center p-6 pt-0'
   }
 });
diff --git a/resources/js/components/ui/checkbox.tsx b/resources/js/components/ui/checkbox.tsx
index 0a74758..dc8a554 100644
--- a/resources/js/components/ui/checkbox.tsx
+++ b/resources/js/components/ui/checkbox.tsx
@@ -42,7 +42,7 @@ const checkboxStyles = tv({
 });
 
 const boxStyles = tv({
-  base: 'flex size-4 *:data-[slot=icon]:size-3 shrink-0 items-center justify-center rounded border border-input text-bg transition',
+  base: 'flex size-4 shrink-0 items-center justify-center rounded border border-input text-bg transition *:data-[slot=icon]:size-3',
   variants: {
     isSelected: {
       false: 'bg-muted',
@@ -101,3 +101,4 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
 };
 
 export { Checkbox, CheckboxGroup };
+export type { CheckboxGroupProps, CheckboxProps };
diff --git a/resources/js/components/ui/container.tsx b/resources/js/components/ui/container.tsx
index 50e5e0f..c8caf97 100644
--- a/resources/js/components/ui/container.tsx
+++ b/resources/js/components/ui/container.tsx
@@ -23,3 +23,4 @@ const Container = ({ className, intent, ref, ...props }: ContainerProps) => (
 );
 
 export { Container };
+export type { ContainerProps };
diff --git a/resources/js/components/ui/dialog.tsx b/resources/js/components/ui/dialog.tsx
index 6fe27f3..0cb67f4 100644
--- a/resources/js/components/ui/dialog.tsx
+++ b/resources/js/components/ui/dialog.tsx
@@ -11,18 +11,18 @@ import { Button, type ButtonProps } from './button';
 const dialogStyles = tv({
   slots: {
     root: [
-      'relative peer group/dialog flex max-h-[inherit] not-has-data-[slot=dialog-body]:**:data-[slot=dialog-header]:pb-0 [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] flex-col overflow-hidden outline-hidden'
+      'peer group/dialog relative flex max-h-[inherit] flex-col overflow-hidden outline-hidden [scrollbar-width:thin] not-has-data-[slot=dialog-body]:**:data-[slot=dialog-header]:pb-0 [&::-webkit-scrollbar]:size-0.5'
     ],
-    header: 'relative flex flex-col gap-0.5 sm:gap-1 p-4 sm:p-6',
-    description: 'text-sm text-muted-fg',
+    header: 'relative flex flex-col gap-0.5 p-4 sm:gap-1 sm:p-6',
+    description: 'text-muted-fg text-sm',
     body: [
       'has-[input]:pb-1',
-      'flex flex-1 isolate flex-col overflow-auto px-4 sm:px-6',
+      'isolate flex flex-1 flex-col overflow-auto px-4 sm:px-6',
       'max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height,0px)-var(--dialog-footer-height,0px))]'
     ],
-    footer: 'mt-auto flex isolate flex-col-reverse justify-between gap-3 sm:flex-row p-4 sm:p-6',
+    footer: 'isolate mt-auto flex flex-col-reverse justify-between gap-3 p-4 sm:flex-row sm:p-6',
     closeIndicator:
-      'close absolute right-1 top-1 sm:right-2 sm:top-2 data-focused:outline-hidden data-focused:bg-secondary data-hovered:bg-secondary grid place-content-center rounded-xl sm:rounded-md data-focus-visible:ring-1 data-focus-visible:ring-primary size-8 sm:size-7 z-50'
+      'close absolute top-1 right-1 z-50 grid size-8 place-content-center rounded-xl data-focused:bg-secondary data-hovered:bg-secondary data-focused:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary sm:top-2 sm:right-2 sm:size-7 sm:rounded-md'
   }
 });
 
@@ -79,23 +79,26 @@ const titleStyles = tv({
   }
 });
 
-interface TitleProps extends Omit<HeadingProps, 'level'> {
+interface DialogTitleProps extends Omit<HeadingProps, 'level'> {
   level?: 1 | 2 | 3 | 4;
+  ref?: React.Ref<HTMLHeadingElement>;
 }
-
-const Title = ({ level = 2, className, ...props }: TitleProps) => (
-  <Heading slot="title" level={level} className={titleStyles({ level, className })} {...props} />
+const Title = ({ level = 2, className, ref, ...props }: DialogTitleProps) => (
+  <Heading slot="title" level={level} ref={ref} className={titleStyles({ level, className })} {...props} />
 );
 
-const Description = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={description({ className })} {...props} />
+type DialogDescriptionProps = React.ComponentProps<'div'>;
+const Description = ({ className, ref, ...props }: DialogDescriptionProps) => (
+  <div className={description({ className })} ref={ref} {...props} />
 );
 
-const Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div data-slot="dialog-body" className={body({ className })} {...props} />
+type DialogBodyProps = React.ComponentProps<'div'>;
+const Body = ({ className, ref, ...props }: DialogBodyProps) => (
+  <div data-slot="dialog-body" ref={ref} className={body({ className })} {...props} />
 );
 
-const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+type DialogFooterProps = React.ComponentProps<'div'>;
+const Footer = ({ className, ...props }: DialogFooterProps) => {
   const footerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -119,8 +122,8 @@ const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) =
   return <div ref={footerRef} data-slot="dialog-footer" className={footer({ className })} {...props} />;
 };
 
-const Close = ({ className, appearance = 'outline', ...props }: ButtonProps) => {
-  return <Button slot="close" className={className} appearance={appearance} {...props} />;
+const Close = ({ className, appearance = 'outline', ref, ...props }: ButtonProps) => {
+  return <Button slot="close" className={className} ref={ref} appearance={appearance} {...props} />;
 };
 
 interface CloseButtonIndicatorProps extends ButtonProps {
@@ -160,3 +163,11 @@ Dialog.Close = Close;
 Dialog.CloseIndicator = CloseIndicator;
 
 export { Dialog };
+export type {
+  CloseButtonIndicatorProps,
+  DialogBodyProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogTitleProps
+};
diff --git a/resources/js/components/ui/dropdown.tsx b/resources/js/components/ui/dropdown.tsx
index 3554f66..7a3c475 100644
--- a/resources/js/components/ui/dropdown.tsx
+++ b/resources/js/components/ui/dropdown.tsx
@@ -15,11 +15,11 @@ import { tv } from 'tailwind-variants';
 
 const dropdownItemStyles = tv({
   base: [
-    'group text-fg forced-colors:text-[LinkText] flex cursor-default forced-color-adjust-none select-none items-center gap-x-1.5 rounded-[calc(var(--radius-lg)-1px)] py-2 px-2.5 relative text-base outline outline-0 forced-color:text-[Highlight] sm:text-sm',
+    'group relative flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius-lg)-1px)] px-2.5 py-2 forced-color:text-[Highlight] text-base text-fg outline outline-0 forced-color-adjust-none sm:text-sm forced-colors:text-[LinkText]',
     'has-submenu:data-open:data-danger:bg-danger/20 has-submenu:data-open:data-danger:text-danger',
     'data-has-submenu:data-open:bg-accent data-has-submenu:data-open:text-accent-fg data-has-submenu:data-open:*:data-[slot=icon]:text-accent-fg data-has-submenu:data-open:*:[.text-muted-fg]:text-accent-fg',
     '**:data-[slot=avatar]:-mr-0.5 **:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:size-5',
-    '**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-hovered:**:data-[slot=icon]:text-accent-fg data-focused:**:data-[slot=icon]:text-accent-fg data-danger:**:data-[slot=icon]:text-danger/70 data-focused:data-danger:**:data-[slot=icon]:text-danger-fg',
+    'data-danger:**:data-[slot=icon]:text-danger/70 data-focused:**:data-[slot=icon]:text-accent-fg data-hovered:**:data-[slot=icon]:text-accent-fg **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0 **:data-[slot=icon]:text-muted-fg data-focused:data-danger:**:data-[slot=icon]:text-danger-fg',
     'data-[slot=menu-radio]:*:data-[slot=icon]:size-3',
     'forced-colors:**:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focused:**:data-[slot=icon]:text-[Canvas] '
   ],
@@ -30,9 +30,9 @@ const dropdownItemStyles = tv({
     isFocused: {
       false: 'data-danger:text-danger',
       true: [
-        'bg-accent text-accent-fg forced-colors:text-[HighlightText] forced-colors:bg-[Highlight]',
+        'bg-accent text-accent-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]',
         'data-danger:bg-danger data-danger:text-danger-fg',
-        '[&_.text-muted-fg]:text-accent-fg/80 data-[slot=label]:text-accent-fg data-[slot=description]:text-accent-fg'
+        'data-[slot=description]:text-accent-fg data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80'
       ]
     }
   }
@@ -40,9 +40,9 @@ const dropdownItemStyles = tv({
 
 const dropdownSectionStyles = tv({
   slots: {
-    section: "first:-mt-[5px] xss3 flex flex-col gap-y-0.5 after:content-[''] after:block after:h-[4px]",
+    section: "first:-mt-[5px] xss3 flex flex-col gap-y-0.5 after:block after:h-[4px] after:content-['']",
     header:
-      'text-sm font-medium text-muted-fg px-4 py-2 truncate min-w-(--trigger-width) sticky -top-[5px] bg-muted -mb-0.5 -mx-1.5 z-10 supports-[-moz-appearance:none]:bg-muted border-y [&+*]:mt-1'
+      '-top-[5px] -mb-0.5 -mx-1.5 sticky z-10 min-w-(--trigger-width) truncate border-y bg-muted px-4 py-2 font-medium text-muted-fg text-sm supports-[-moz-appearance:none]:bg-muted [&+*]:mt-1'
   }
 });
 
@@ -61,7 +61,9 @@ const DropdownSection = <T extends object>({ className, ...props }: DropdownSect
   );
 };
 
-const DropdownItem = ({ className, ...props }: ListBoxItemProps) => {
+type DropdownItemProps = ListBoxItemProps;
+
+const DropdownItem = ({ className, ...props }: DropdownItemProps) => {
   const textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
   return (
     <ListBoxItemPrimitive
@@ -73,12 +75,12 @@ const DropdownItem = ({ className, ...props }: ListBoxItemProps) => {
     >
       {composeRenderProps(props.children, (children, { isSelected }) => (
         <>
-          <span className="flex flex-1 gap-2 items-center font-normal truncate group-data-selected:font-medium">
+          <span className="flex flex-1 items-center gap-2 truncate font-normal group-data-selected:font-medium">
             {children}
           </span>
 
           {isSelected && (
-            <span className="absolute right-2 top-3 lg:top-2.5">
+            <span className="absolute top-3 right-2 lg:top-2.5">
               <IconCheck />
             </span>
           )}
@@ -88,7 +90,7 @@ const DropdownItem = ({ className, ...props }: ListBoxItemProps) => {
   );
 };
 
-interface DropdownItemSlot extends TextProps {
+interface DropdownItemDetailProps extends TextProps {
   label?: TextProps['children'];
   description?: TextProps['children'];
   classNames?: {
@@ -97,7 +99,7 @@ interface DropdownItemSlot extends TextProps {
   };
 }
 
-const DropdownItemDetails = ({ label, description, classNames, ...props }: DropdownItemSlot) => {
+const DropdownItemDetails = ({ label, description, classNames, ...props }: DropdownItemDetailProps) => {
   const { slot, children, title, ...restProps } = props;
 
   return (
@@ -123,3 +125,4 @@ const DropdownItemDetails = ({ label, description, classNames, ...props }: Dropd
 
 // Note: This is not exposed component, but it's used in other components to render dropdowns.
 export { DropdownItem, DropdownItemDetails, DropdownSection, dropdownItemStyles, dropdownSectionStyles };
+export type { DropdownItemDetailProps, DropdownItemProps, DropdownSectionProps };
diff --git a/resources/js/components/ui/field.tsx b/resources/js/components/ui/field.tsx
index 75bdb58..069ebc3 100644
--- a/resources/js/components/ui/field.tsx
+++ b/resources/js/components/ui/field.tsx
@@ -1,9 +1,7 @@
-import { forwardRef } from 'react';
-
 import type {
-  FieldErrorProps,
+  FieldErrorProps as FieldErrorPrimitiveProps,
   GroupProps,
-  InputProps,
+  InputProps as InputPrimitiveProps,
   LabelProps,
   TextFieldProps as TextFieldPrimitiveProps,
   TextProps,
@@ -34,9 +32,9 @@ const fieldStyles = tv({
   slots: {
     description: 'text-pretty text-base/6 text-muted-fg sm:text-sm/6',
     label: 'w-fit cursor-default font-medium text-secondary-fg text-sm',
-    fieldError: 'text-sm/6 text-danger forced-colors:text-[Mark]',
+    fieldError: 'text-danger text-sm/6 forced-colors:text-[Mark]',
     input: [
-      'w-full min-w-0 [&::-ms-reveal]:hidden bg-transparent py-2 px-2.5 text-base text-fg placeholder-muted-fg outline-hidden data-focused:outline-hidden sm:text-sm'
+      'w-full min-w-0 bg-transparent px-2.5 py-2 text-base text-fg placeholder-muted-fg outline-hidden data-focused:outline-hidden sm:text-sm [&::-ms-reveal]:hidden'
     ]
   }
 });
@@ -49,12 +47,14 @@ const Label = ({ className, ...props }: LabelProps) => {
 
 interface DescriptionProps extends TextProps {
   isWarning?: boolean;
+  ref?: React.RefObject<HTMLElement>;
 }
 
-const Description = ({ className, ...props }: DescriptionProps) => {
+const Description = ({ ref, className, ...props }: DescriptionProps) => {
   const isWarning = props.isWarning ?? false;
   return (
     <Text
+      ref={ref}
       {...props}
       slot="description"
       className={description({ className: isWarning ? 'text-warning' : className })}
@@ -62,14 +62,17 @@ const Description = ({ className, ...props }: DescriptionProps) => {
   );
 };
 
-const FieldError = ({ className, ...props }: FieldErrorProps) => {
-  return <FieldErrorPrimitive {...props} className={composeTailwindRenderProps(className, fieldError())} />;
+interface FieldErrorProps extends FieldErrorPrimitiveProps {
+  ref?: React.RefObject<HTMLElement>;
+}
+const FieldError = ({ className, ref, ...props }: FieldErrorProps) => {
+  return <FieldErrorPrimitive ref={ref} {...props} className={composeTailwindRenderProps(className, fieldError())} />;
 };
 
 const fieldGroupStyles = tv({
   base: [
-    'group border border-input transition h-10 duration-200 ease-out overflow-hidden rounded-lg flex items-center',
-    'group-data-invalid:focus-within:border-danger focus-within:ring-4 group-data-invalid:focus-within:ring-danger/20',
+    'group flex h-10 items-center overflow-hidden rounded-lg border border-input transition duration-200 ease-out',
+    'focus-within:ring-4 group-data-invalid:focus-within:border-danger group-data-invalid:focus-within:ring-danger/20',
     '[&>[role=progressbar]]:mr-2.5',
     '**:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0',
     '*:data-[slot=suffix]:mr-2.5 *:data-[slot=suffix]:text-muted-fg',
@@ -98,10 +101,12 @@ const FieldGroup = ({ className, ...props }: GroupProps) => {
   );
 };
 
-const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+interface InputProps extends InputPrimitiveProps {
+  ref?: React.RefObject<HTMLInputElement>;
+}
+const Input = ({ className, ref, ...props }: InputProps) => {
   return <InputPrimitive ref={ref} {...props} className={composeTailwindRenderProps(className, input())} />;
-});
-
-Input.displayName = 'Input';
+};
 
-export { Description, FieldError, FieldGroup, Input, Label, type FieldProps };
+export { Description, FieldError, FieldGroup, Input, Label };
+export type { FieldErrorProps, FieldProps, InputProps };
diff --git a/resources/js/components/ui/form.tsx b/resources/js/components/ui/form.tsx
index a3c0027..5ec069d 100644
--- a/resources/js/components/ui/form.tsx
+++ b/resources/js/components/ui/form.tsx
@@ -1,8 +1,12 @@
-import type { FormProps } from 'react-aria-components';
+import type { FormProps as FormPrimitiveProps } from 'react-aria-components';
 import { Form as FormPrimitive } from 'react-aria-components';
 
-const Form = (props: FormProps) => {
-  return <FormPrimitive {...props} />;
+interface FormProps extends FormPrimitiveProps {
+  ref?: React.RefObject<HTMLFormElement>;
+}
+const Form = ({ ref, ...props }: FormProps) => {
+  return <FormPrimitive ref={ref} {...props} />;
 };
 
 export { Form };
+export type { FormProps };
diff --git a/resources/js/components/ui/heading.tsx b/resources/js/components/ui/heading.tsx
index 10ce0e2..33aea73 100644
--- a/resources/js/components/ui/heading.tsx
+++ b/resources/js/components/ui/heading.tsx
@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 const headingStyles = tv({
-  base: 'font-sans tracking-tight text-fg',
+  base: 'font-sans text-fg tracking-tight',
   variants: {
     level: {
       1: 'font-bold text-xl sm:text-2xl',
@@ -41,3 +41,4 @@ const Heading = ({ className, tracking = 'normal', level = 1, ...props }: Headin
 };
 
 export { Heading };
+export type { HeadingProps };
diff --git a/resources/js/components/ui/index.ts b/resources/js/components/ui/index.ts
index 579b17d..14b13de 100644
--- a/resources/js/components/ui/index.ts
+++ b/resources/js/components/ui/index.ts
@@ -9,8 +9,10 @@ export * from './field';
 export * from './form';
 export * from './grid';
 export * from './heading';
+export * from './keyboard';
 export * from './link';
 export * from './list-box';
+export * from './loader';
 export * from './menu';
 export * from './modal';
 export * from './navbar';
@@ -23,3 +25,4 @@ export * from './sheet';
 export * from './table';
 export * from './text-field';
 export * from './toast';
+export * from './visually-hidden';
diff --git a/resources/js/components/ui/keyboard.tsx b/resources/js/components/ui/keyboard.tsx
index 97593d5..7c1a202 100644
--- a/resources/js/components/ui/keyboard.tsx
+++ b/resources/js/components/ui/keyboard.tsx
@@ -5,8 +5,8 @@ const keyboardStyles = tv({
   slots: {
     base: '-mr-1 ml-auto hidden items-center lg:inline-flex',
     kbd: [
-      'text-center font-sans capitalize text-muted-fg group-data-focused:text-fg forced-colors:group-data-focused:text-[HighlightText]',
-      'inline-grid min-h-5 min-w-[2ch] place-content-center rounded group-data-hovered:text-fg group-data-disabled:opacity-50 font-sans text-[.75rem] uppercase group-data-focused:opacity-90'
+      'text-center font-sans text-current/70 capitalize group-data-focused:text-fg forced-colors:group-data-focused:text-[HighlightText]',
+      'inline-grid min-h-5 min-w-[2ch] place-content-center rounded font-sans text-[.75rem] uppercase group-data-hovered:text-fg group-data-disabled:opacity-50 group-data-focused:opacity-90'
     ]
   }
 });
@@ -33,4 +33,5 @@ const Keyboard = ({ keys, classNames, className, ...props }: KeyboardProps) => {
   );
 };
 
-export { Keyboard, type KeyboardProps };
+export { Keyboard };
+export type { KeyboardProps };
diff --git a/resources/js/components/ui/link.tsx b/resources/js/components/ui/link.tsx
index 012c232..114e406 100644
--- a/resources/js/components/ui/link.tsx
+++ b/resources/js/components/ui/link.tsx
@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants';
 
 const linkStyles = tv({
   base: [
-    'relative data-focus-visible:outline-2 outline-offset-2 outline-0 data-focused:outline-hidden outline-primary transition-colors',
-    'forced-colors:outline-[Highlight] forced-colors:data-disabled:text-[GrayText] data-disabled:data-focus-visible:outline-0',
+    'relative outline-0 outline-primary outline-offset-2 transition-colors data-focus-visible:outline-2 data-focused:outline-hidden',
+    'data-disabled:data-focus-visible:outline-0 forced-colors:outline-[Highlight] forced-colors:data-disabled:text-[GrayText]',
     'disabled:cursor-default data-disabled:opacity-60'
   ],
   variants: {
@@ -21,11 +21,13 @@ const linkStyles = tv({
 
 interface LinkProps extends LinkPrimitiveProps {
   intent?: 'primary' | 'secondary' | 'unstyled';
+  ref?: React.RefObject<HTMLAnchorElement>;
 }
 
-const Link = ({ className, ...props }: LinkProps) => {
+const Link = ({ className, ref, ...props }: LinkProps) => {
   return (
     <LinkPrimitive
+      ref={ref}
       {...props}
       className={composeRenderProps(className, (className, ...renderProps) =>
         linkStyles({ ...renderProps, intent: props.intent, className })
@@ -36,4 +38,5 @@ const Link = ({ className, ...props }: LinkProps) => {
   );
 };
 
-export { Link, LinkPrimitive, type LinkPrimitiveProps, type LinkProps };
+export { Link };
+export type { LinkProps };
diff --git a/resources/js/components/ui/list-box.tsx b/resources/js/components/ui/list-box.tsx
index 80b45b8..a381c36 100644
--- a/resources/js/components/ui/list-box.tsx
+++ b/resources/js/components/ui/list-box.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/utils/classes';
 import { DropdownItemDetails, DropdownSection } from './dropdown';
 
 const listBoxStyles = tv({
-  base: 'flex max-h-96 [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin] w-full gap-y-1 min-w-56 flex-col overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden'
+  base: 'flex max-h-96 w-full min-w-56 flex-col gap-y-1 overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5'
 });
 
 const ListBox = <T extends object>({ className, ...props }: ListBoxProps<T>) => (
@@ -19,23 +19,23 @@ const ListBox = <T extends object>({ className, ...props }: ListBoxProps<T>) =>
 );
 
 const listBoxItemStyles = tv({
-  base: 'lbi cursor-pointer relative rounded-[calc(var(--radius-lg)-1px)] p-2 text-base outline-hidden sm:text-sm',
+  base: 'lbi relative cursor-pointer rounded-[calc(var(--radius-lg)-1px)] p-2 text-base outline-hidden sm:text-sm',
   variants: {
     isFocusVisible: {
       true: 'bg-secondary text-accent-fg text-accent-fg/70'
     },
     isHovered: {
-      true: 'bg-accent [&:hover_[slot=label]]:text-accent-fg [&:hover_[slot=description]]:text-accent-fg/70 text-accent-fg [&_.text-muted-fg]:text-accent-fg/80'
+      true: 'bg-accent text-accent-fg [&:hover_[slot=description]]:text-accent-fg/70 [&:hover_[slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80'
     },
     isFocused: {
-      true: '**:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80 bg-accent text-accent-fg'
+      true: 'bg-accent text-accent-fg **:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80'
     },
     isSelected: {
-      true: '**:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80 bg-accent text-accent-fg'
+      true: 'bg-accent text-accent-fg **:data-[slot=icon]:text-accent-fg **:data-[slot=label]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80'
     },
     isDragging: { true: 'cursor-grabbing bg-secondary text-secondary-fg' },
     isDisabled: {
-      true: 'opacity-70 cursor-default text-muted-fg'
+      true: 'cursor-default text-muted-fg opacity-70'
     }
   }
 });
@@ -59,7 +59,7 @@ const Item = <T extends object>({ children, className, ...props }: ItemProps<T>)
       )}
     >
       {(values) => (
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <>
             {values.allowsDragging && (
               <IconHamburger
@@ -75,7 +75,7 @@ const Item = <T extends object>({ children, className, ...props }: ItemProps<T>)
               {typeof children === 'function' ? children(values) : children}
 
               {values.isSelected && (
-                <span className="absolute right-2 top-3 lg:top-2.5 animate-in">
+                <span className="absolute top-3 right-2 animate-in lg:top-2.5">
                   <IconCheck />
                 </span>
               )}
@@ -107,4 +107,5 @@ ListBox.ItemDetails = DropdownItemDetails;
 ListBox.Item = Item;
 ListBox.Picker = ListBoxPicker;
 
-export { ListBox, listBoxStyles, type ListBoxPickerProps };
+export { ListBox, listBoxStyles };
+export type { ListBoxPickerProps };
diff --git a/resources/js/components/ui/menu.tsx b/resources/js/components/ui/menu.tsx
index 26d636c..fe150b0 100644
--- a/resources/js/components/ui/menu.tsx
+++ b/resources/js/components/ui/menu.tsx
@@ -5,7 +5,7 @@ import type {
   ButtonProps,
   MenuItemProps as MenuItemPrimitiveProps,
   MenuProps as MenuPrimitiveProps,
-  MenuSectionProps,
+  MenuSectionProps as MenuSectionPrimitiveProps,
   MenuTriggerProps as MenuTriggerPrimitiveProps,
   PopoverProps,
   SeparatorProps
@@ -57,10 +57,10 @@ const SubMenu = ({ delay = 0, ...props }) => (
 
 const menuStyles = tv({
   slots: {
-    menu: 'max-h-[calc(var(--visual-viewport-height)-10rem)] sm:max-h-[inherit] overflow-auto rounded-xl p-1 outline-hidden [clip-path:inset(0_0_0_0_round_calc(var(--radius-lg)-2px))]',
-    popover: 'z-50 sm:min-w-40 p-0 outline-hidden shadow-xs',
+    menu: 'max-h-[calc(var(--visual-viewport-height)-10rem)] overflow-auto rounded-xl p-1 outline-hidden [clip-path:inset(0_0_0_0_round_calc(var(--radius-lg)-2px))] sm:max-h-[inherit]',
+    popover: 'z-50 p-0 shadow-xs outline-hidden sm:min-w-40',
     trigger: [
-      'inline relative text-left data-focused:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary data-pressed:outline-hidden'
+      'relative inline text-left data-focused:outline-hidden data-pressed:outline-hidden data-focus-visible:ring-1 data-focus-visible:ring-primary'
     ]
   }
 });
@@ -69,10 +69,11 @@ const { menu, popover, trigger } = menuStyles();
 
 interface MenuTriggerProps extends ButtonProps {
   className?: string;
+  ref?: React.Ref<HTMLButtonElement>;
 }
 
-const Trigger = ({ className, ...props }: MenuTriggerProps) => (
-  <Button data-slot="menu-trigger" className={trigger({ className })} {...props}>
+const MenuTrigger = ({ className, ref, ...props }: MenuTriggerProps) => (
+  <Button ref={ref} data-slot="menu-trigger" className={trigger({ className })} {...props}>
     {(values) => <>{typeof props.children === 'function' ? props.children(values) : props.children}</>}
   </Button>
 );
@@ -84,7 +85,7 @@ interface MenuContentProps<T> extends Omit<PopoverProps, 'children' | 'style'>,
   respectScreen?: boolean;
 }
 
-const Content = <T extends object>({
+const MenuContent = <T extends object>({
   className,
   showArrow = false,
   popoverClassName,
@@ -129,7 +130,7 @@ const Item = ({ className, isDanger = false, children, ...props }: MenuItemProps
       {(values) => (
         <>
           {typeof children === 'function' ? children(values) : children}
-          {values.hasSubmenu && <IconChevronLgRight className="ml-auto gpfw size-3.5" />}
+          {values.hasSubmenu && <IconChevronLgRight className="gpfw ml-auto size-3.5" />}
         </>
       )}
     </MenuItem>
@@ -151,17 +152,21 @@ const MenuHeader = ({ className, separator = false, ...props }: MenuHeaderProps)
   />
 );
 
-const MenuSeparator = ({ className, ...props }: SeparatorProps) => (
-  <Separator className={cn('-mx-1 my-1 h-px border-b', className)} {...props} />
+interface MenuSeparatorProps extends SeparatorProps {
+  ref?: React.Ref<HTMLDivElement>;
+}
+
+const MenuSeparator = ({ className, ref, ...props }: MenuSeparatorProps) => (
+  <Separator ref={ref} className={cn('-mx-1 my-1 h-px border-b', className)} {...props} />
 );
 
-const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
+const MenuItemCheckbox = ({ className, children, ...props }: MenuItemProps) => (
   <Item className={composeTailwindRenderProps(className, 'relative pr-8')} {...props}>
     {(values) => (
       <>
         {typeof children === 'function' ? children(values) : children}
         {values.isSelected && (
-          <span className="flex absolute right-2 justify-center items-center size-4 shrink-0 animate-in">
+          <span className="absolute right-2 flex size-4 shrink-0 animate-in items-center justify-center">
             <IconCheck />
           </span>
         )}
@@ -170,7 +175,7 @@ const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
   </Item>
 );
 
-const Radio = ({ children, ...props }: MenuItemProps) => (
+const MenuItemRadio = ({ children, ...props }: MenuItemProps) => (
   <Item {...props}>
     {(values) => (
       <>
@@ -191,13 +196,13 @@ const Radio = ({ children, ...props }: MenuItemProps) => (
 
 const { section, header } = dropdownSectionStyles();
 
-interface SectionProps<T> extends MenuSectionProps<T> {
+interface MenuSectionProps<T> extends MenuSectionPrimitiveProps<T> {
+  ref?: React.Ref<HTMLDivElement>;
   title?: string;
 }
-
-const Section = <T extends object>({ className, ...props }: SectionProps<T>) => {
+const Section = <T extends object>({ className, ref, ...props }: MenuSectionProps<T>) => {
   return (
-    <MenuSection className={section({ className })} {...props}>
+    <MenuSection ref={ref} className={section({ className })} {...props}>
       {'title' in props && <Header className={header()}>{props.title}</Header>}
       <Collection items={props.items}>{props.children}</Collection>
     </MenuSection>
@@ -205,17 +210,18 @@ const Section = <T extends object>({ className, ...props }: SectionProps<T>) =>
 };
 
 Menu.Primitive = MenuPrimitive;
-Menu.Content = Content;
+Menu.Content = MenuContent;
 Menu.Header = MenuHeader;
 Menu.Item = Item;
-Menu.Content = Content;
+Menu.Content = MenuContent;
 Menu.Keyboard = Keyboard;
-Menu.Checkbox = Checkbox;
-Menu.Radio = Radio;
+Menu.Checkbox = MenuItemCheckbox;
+Menu.Radio = MenuItemRadio;
 Menu.Section = Section;
 Menu.Separator = MenuSeparator;
-Menu.Trigger = Trigger;
+Menu.Trigger = MenuTrigger;
 Menu.ItemDetails = DropdownItemDetails;
 Menu.Submenu = SubMenu;
 
-export { Menu, type MenuContentProps };
+export { Menu };
+export type { MenuContentProps, MenuItemProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps };
diff --git a/resources/js/components/ui/modal.tsx b/resources/js/components/ui/modal.tsx
index 3bb46d4..b0c7a58 100644
--- a/resources/js/components/ui/modal.tsx
+++ b/resources/js/components/ui/modal.tsx
@@ -6,33 +6,33 @@ import { Dialog } from './dialog';
 
 const overlay = tv({
   base: [
-    'fixed left-0 top-0 isolate z-50 h-(--visual-viewport-height) w-full',
-    'flex justify-end items-end sm:justify-center sm:items-center text-center bg-fg/15 dark:bg-bg/40',
+    'fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full',
+    'flex items-end justify-end bg-fg/15 text-center sm:items-center sm:justify-center dark:bg-bg/40',
     '[--visual-viewport-vertical-padding:16px] sm:[--visual-viewport-vertical-padding:32px]'
   ],
   variants: {
     isBlurred: {
-      true: 'supports-backdrop-filter:backdrop-blur supports-backdrop-filter:bg-bg/15 bg-bg dark:supports-backdrop-filter:bg-bg/40'
+      true: 'bg-bg supports-backdrop-filter:bg-bg/15 supports-backdrop-filter:backdrop-blur dark:supports-backdrop-filter:bg-bg/40'
     },
     isEntering: {
-      true: 'ease-out animate-in duration-200 fade-in'
+      true: 'fade-in animate-in duration-200 ease-out'
     },
     isExiting: {
-      true: 'duration-150 ease-in animate-out fade-out'
+      true: 'fade-out animate-out duration-150 ease-in'
     }
   }
 });
 const content = tv({
   base: [
-    'max-h-full w-full rounded-t-2xl ring-1 ring-fg/5 bg-overlay text-overlay-fg text-left align-middle shadow-lg',
-    'dark:ring-border sm:rounded-2xl overflow-hidden'
+    'max-h-full w-full rounded-t-2xl bg-overlay text-left align-middle text-overlay-fg shadow-lg ring-1 ring-fg/5',
+    'overflow-hidden sm:rounded-2xl dark:ring-border'
   ],
   variants: {
     isEntering: {
-      true: ['animate-in ease-out fade-in duration-200 slide-in-from-bottom', 'sm:zoom-in-95 sm:slide-in-from-bottom-0']
+      true: ['fade-in slide-in-from-bottom animate-in duration-200 ease-out', 'sm:zoom-in-95 sm:slide-in-from-bottom-0']
     },
     isExiting: {
-      true: ['duration-150 ease-in animate-out slide-out-to-bottom sm:slide-out-to-bottom-0 sm:zoom-out-95']
+      true: ['slide-out-to-bottom sm:slide-out-to-bottom-0 sm:zoom-out-95 animate-out duration-150 ease-in']
     },
     size: {
       xs: 'sm:max-w-xs',
diff --git a/resources/js/components/ui/navbar.tsx b/resources/js/components/ui/navbar.tsx
index ac8cdce..4025809 100644
--- a/resources/js/components/ui/navbar.tsx
+++ b/resources/js/components/ui/navbar.tsx
@@ -4,11 +4,11 @@ import { IconHamburger } from 'justd-icons';
 import { LayoutGroup, motion } from 'motion/react';
 import type { LinkProps } from 'react-aria-components';
 import { Link, composeRenderProps } from 'react-aria-components';
-import { tv } from 'tailwind-variants';
+import { type VariantProps, tv } from 'tailwind-variants';
 
 import { cn } from '@/utils/classes';
 import { useMediaQuery } from '@/utils/use-media-query';
-import { Button } from './button';
+import { Button, type ButtonProps } from './button';
 import { composeTailwindRenderProps } from './primitive';
 import { Sheet } from './sheet';
 
@@ -36,19 +36,19 @@ function useNavbar() {
   return context;
 }
 
-interface NavbarProviderProps extends React.ComponentProps<'header'>, NavbarOptions {
+interface NavbarProps extends React.ComponentProps<'header'>, NavbarOptions {
   defaultOpen?: boolean;
   isOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
 }
 
 const navbarStyles = tv({
-  base: 'relative @container isolate flex w-full flex-col',
+  base: '@container relative isolate flex w-full flex-col',
   variants: {
     intent: {
-      floating: 'pt-2 px-2.5',
+      floating: 'px-2.5 pt-2',
       navbar: '',
-      inset: 'bg-bg min-h-svh'
+      inset: 'min-h-svh bg-navbar dark:bg-bg'
     }
   }
 });
@@ -63,8 +63,8 @@ const Navbar = ({
   isSticky = false,
   intent = 'navbar',
   ...props
-}: NavbarProviderProps) => {
-  const isCompact = useMediaQuery('(max-width: 768px)');
+}: NavbarProps) => {
+  const isCompact = useMediaQuery('(max-width: 765px)');
   const [_open, _setOpen] = useState(defaultOpen);
   const open = openProp ?? _open;
 
@@ -106,32 +106,32 @@ const Navbar = ({
 
 const navStyles = tv({
   base: [
-    'hidden h-(--navbar-height) [--navbar-height:3.5rem] px-4 group peer md:flex items-center w-full',
-    '[&>div]:max-w-[1680px] md:[&>div]:flex [&>div]:items-center [&>div]:w-full [&>div]:mx-auto'
+    'group peer @md:flex hidden h-(--navbar-height) w-full items-center px-4 [--navbar-height:3.5rem]',
+    '[&>div]:mx-auto @md:[&>div]:flex [&>div]:w-full [&>div]:max-w-[1680px] [&>div]:items-center'
   ],
   variants: {
     isSticky: {
-      true: 'sticky z-40 top-0'
+      true: 'sticky top-0 z-40'
     },
     intent: {
       floating:
-        'bg-navbar text-navbar-fg w-full max-w-7xl 2xl:max-w-(--breakpoint-2xl) mx-auto border rounded-xl md:px-4',
-      navbar: 'bg-navbar text-navbar-fg border-b md:px-6',
+        'mx-auto w-full max-w-7xl rounded-xl border bg-navbar @md:px-4 text-navbar-fg 2xl:max-w-(--breakpoint-2xl)',
+      navbar: 'border-b bg-navbar @md:px-6 text-navbar-fg',
       inset: [
-        'mx-auto dark:md:px-6',
-        '2xl:[&>div]:max-w-(--breakpoint-2xl) md:[&>div]:flex [&>div]:items-center [&>div]:w-full [&>div]:mx-auto'
+        'mx-auto @md:px-6',
+        '[&>div]:mx-auto @md:[&>div]:flex [&>div]:w-full [&>div]:items-center 2xl:[&>div]:max-w-(--breakpoint-2xl)'
       ]
     }
   }
 });
 
-interface NavbarProps extends React.ComponentProps<'div'> {
+interface NavbarNavProps extends React.ComponentProps<'div'> {
   intent?: 'navbar' | 'floating' | 'inset';
   isSticky?: boolean;
   side?: 'left' | 'right';
 }
 
-const Nav = ({ className, ...props }: NavbarProps) => {
+const NavbarNav = ({ className, ref, ...props }: NavbarNavProps) => {
   const { isCompact, side, intent, isSticky, open, setOpen } = useNavbar();
 
   if (isCompact) {
@@ -146,23 +146,27 @@ const Nav = ({ className, ...props }: NavbarProps) => {
           }}
           isFloat={intent === 'floating'}
         >
-          <Sheet.Body className="px-2 md:px-4">{props.children}</Sheet.Body>
+          <Sheet.Body className="@md:px-4 px-2">{props.children}</Sheet.Body>
         </Sheet.Content>
       </Sheet>
     );
   }
 
   return (
-    <div data-navbar-nav="true" className={navStyles({ isSticky, intent, className })} {...props}>
+    <div data-navbar-nav="true" ref={ref} className={navStyles({ isSticky, intent, className })} {...props}>
       <div>{props.children}</div>
     </div>
   );
 };
 
-const Trigger = ({ className, onPress, ...props }: React.ComponentProps<typeof Button>) => {
+interface NavbarTriggerProps extends ButtonProps {
+  ref?: React.RefObject<HTMLButtonElement>;
+}
+const NavbarTrigger = ({ className, onPress, ref, ...props }: NavbarTriggerProps) => {
   const { toggleNavbar } = useNavbar();
   return (
     <Button
+      ref={ref}
       data-navbar-trigger="true"
       appearance="plain"
       aria-label={props['aria-label'] || 'Toggle Navbar'}
@@ -198,24 +202,24 @@ const Section = ({ className, ...props }: React.ComponentProps<'div'>) => {
 
 const navItemStyles = tv({
   base: [
-    'relative no-underline cursor-pointer md:text-sm px-2 flex forced-colors:outline-0 items-center gap-x-2 *:data-[slot=icon]:-mx-0.5 text-muted-fg outline-hidden forced-colors:data-disabled:text-[GrayText] forced-colors:transform-none transition-colors',
-    'data-hovered:text-fg data-focused:text-fg data-pressed:text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary',
+    '*:data-[slot=icon]:-mx-0.5 relative flex cursor-pointer items-center gap-x-2 px-2 @md:text-sm text-muted-fg no-underline outline-hidden transition-colors forced-colors:transform-none forced-colors:outline-0 forced-colors:data-disabled:text-[GrayText]',
+    'data-focused:text-fg data-hovered:text-fg data-pressed:text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary',
     '**:data-[slot=chevron]:size-4 **:data-[slot=chevron]:transition-transform',
     'data-pressed:**:data-[slot=chevron]:rotate-180 *:data-[slot=icon]:size-4 *:data-[slot=icon]:shrink-0',
-    'data-disabled:opacity-50 data-disabled:cursor-default data-disabled:forced-colors:text-[GrayText]'
+    'data-disabled:cursor-default data-disabled:opacity-50 data-disabled:forced-colors:text-[GrayText]'
   ],
   variants: {
     isCurrent: {
-      true: 'text-navbar-fg cursor-default'
+      true: 'cursor-default text-navbar-fg'
     }
   }
 });
 
-interface ItemProps extends LinkProps {
+interface NavbarItemProps extends LinkProps {
   isCurrent?: boolean;
 }
 
-const Item = ({ className, isCurrent, ...props }: ItemProps) => {
+const Item = ({ className, isCurrent, ...props }: NavbarItemProps) => {
   const { intent, isCompact } = useNavbar();
   return (
     <Link
@@ -247,31 +251,34 @@ const Logo = ({ className, ...props }: LinkProps) => {
     <Link
       className={composeTailwindRenderProps(
         className,
-        'flex items-center gap-x-2 px-2 py-4 text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary data-focused:outline-hidden md:mr-4 md:px-0 md:py-0'
+        'relative @md:mr-4 flex items-center gap-x-2 @md:px-0 px-2 @md:py-0 py-4 text-fg data-focus-visible:outline-1 data-focus-visible:outline-primary data-focused:outline-hidden'
       )}
       {...props}
     />
   );
 };
 
-const Flex = ({ className, ...props }: React.ComponentProps<'div'>) => {
-  return <div className={cn('flex items-center gap-2 md:gap-3', className)} {...props} />;
+const Flex = ({ className, ref, ...props }: React.ComponentProps<'div'>) => {
+  return <div ref={ref} className={cn('flex items-center @md:gap-3 gap-2', className)} {...props} />;
 };
 
 const compactStyles = tv({
-  base: 'md:hidden flex peer-has-[[data-navbar-intent=floating]]:border bg-navbar text-navbar-fg justify-between',
+  base: 'flex @md:hidden justify-between bg-navbar text-navbar-fg peer-has-[[data-navbar-intent=floating]]:border',
   variants: {
     intent: {
-      floating: 'border h-12 rounded-lg px-3.5',
-      inset: 'h-14 px-4',
+      floating: 'h-12 rounded-lg border px-3.5',
+      inset: 'h-14 border-b px-4',
       navbar: 'h-14 border-b px-4'
     }
   }
 });
 
-const Compact = ({ className, ...props }: React.ComponentProps<'div'>) => {
+interface NavbarCompactProps extends React.ComponentProps<'div'>, VariantProps<typeof compactStyles> {
+  ref?: React.RefObject<HTMLDivElement>;
+}
+const NavbarCompact = ({ className, ref, ...props }: NavbarCompactProps) => {
   const { intent } = useNavbar();
-  return <div className={compactStyles({ intent, className })} {...props} />;
+  return <div ref={ref} className={compactStyles({ intent, className })} {...props} />;
 };
 
 const insetStyles = tv({
@@ -279,31 +286,33 @@ const insetStyles = tv({
   variants: {
     intent: {
       floating: '',
-      inset: 'bg-muted/40 md:rounded-lg md:shadow-xs md:ring-1 md:ring-fg/15 md:dark:ring-border',
+      inset: '@md:rounded-lg bg-bg @md:shadow-xs @md:ring-1 @md:ring-fg/15 dark:bg-navbar @md:dark:ring-border',
       navbar: ''
     }
   }
 });
 
-const Inset = ({ className, ...props }: React.ComponentProps<'div'>) => {
+const Inset = ({ className, ref, ...props }: React.ComponentProps<'div'>) => {
   const { intent } = useNavbar();
   return (
     <main
+      ref={ref}
       data-navbar-intent={intent}
-      className={cn('flex flex-1 flex-col', intent === 'inset' && 'pb-2 md:px-2', className)}
+      className={cn('flex flex-1 flex-col', intent === 'inset' && 'bg-navbar @md:px-2 pb-2 dark:bg-bg', className)}
     >
       <div className={insetStyles({ intent, className })}>{props.children}</div>
     </main>
   );
 };
 
-Navbar.Nav = Nav;
+Navbar.Nav = NavbarNav;
 Navbar.Inset = Inset;
-Navbar.Compact = Compact;
+Navbar.Compact = NavbarCompact;
 Navbar.Flex = Flex;
-Navbar.Trigger = Trigger;
+Navbar.Trigger = NavbarTrigger;
 Navbar.Logo = Logo;
 Navbar.Item = Item;
 Navbar.Section = Section;
 
 export { Navbar };
+export type { NavbarCompactProps, NavbarItemProps, NavbarNavProps, NavbarProps, NavbarTriggerProps };
diff --git a/resources/js/components/ui/pagination.tsx b/resources/js/components/ui/pagination.tsx
index c97c50a..e7a24a5 100644
--- a/resources/js/components/ui/pagination.tsx
+++ b/resources/js/components/ui/pagination.tsx
@@ -5,19 +5,11 @@ import {
   IconChevronsLgRight,
   IconDotsHorizontal
 } from 'justd-icons';
-import {
-  ListBox,
-  ListBoxItem,
-  type ListBoxItemProps,
-  type ListBoxProps,
-  ListBoxSection,
-  type SectionProps,
-  Separator,
-  composeRenderProps
-} from 'react-aria-components';
-import { tv } from 'tailwind-variants';
+import type { ListBoxItemProps, ListBoxProps, ListBoxSectionProps } from 'react-aria-components';
+import { ListBox, ListBoxItem, ListBoxSection, Separator, composeRenderProps } from 'react-aria-components';
 
 import { cn } from '@/utils/classes';
+import { tv } from 'tailwind-variants';
 import { buttonStyles } from './button';
 
 const paginationStyles = tv({
@@ -26,15 +18,15 @@ const paginationStyles = tv({
     section: 'flex h-9 gap-[5px]',
     list: 'flex flex-row items-center gap-[5px]',
     itemButton:
-      'data-data-focus-visible:border-primary text-fg font-normal cursor-pointer data-data-focus-visible:bg-primary/10 data-data-focus-visible:ring-4 data-data-focus-visible:ring-primary/20',
-    itemLabel: 'h-9 px-3.5 tabular-nums grid place-content-center',
-    itemSeparator: 'h-9 grid place-content-center',
+      'cursor-pointer font-normal text-fg data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focus-visible:ring-4 data-focus-visible:ring-primary/20',
+    itemLabel: 'grid h-9 place-content-center px-3.5 tabular-nums',
+    itemSeparator: 'grid h-9 place-content-center',
     itemEllipsis:
-      'flex items-center justify-center data-data-focus-visible:border-primary rounded-lg border border-transparent data-focused:outline-hidden size-9 data-data-focus-visible:bg-primary/10 data-data-focus-visible:ring-4 data-data-focus-visible:ring-primary/20',
+      'flex size-9 items-center justify-center rounded-lg border border-transparent data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focused:outline-hidden data-focus-visible:ring-4 data-focus-visible:ring-primary/20',
     itemEllipsisIcon: 'flex size-9 items-center justify-center',
     defaultItem:
-      'data-data-focus-visible:border-primary tabular-nums font-normal cursor-pointer disabled:cursor-default data-data-focus-visible:bg-primary/10 data-data-focus-visible:ring-4 data-data-focus-visible:ring-primary/20 disabled:opacity-100',
-    itemSeparatorLine: 'h-5 w-[1.5px] bg-secondary-fg/40 rotate-[14deg] shrink-0'
+      'cursor-pointer font-normal tabular-nums disabled:cursor-default disabled:opacity-100 data-focus-visible:border-primary data-focus-visible:bg-primary/10 data-focus-visible:ring-4 data-focus-visible:ring-primary/20',
+    itemSeparatorLine: 'h-5 w-[1.5px] shrink-0 rotate-[14deg] bg-secondary-fg/40'
   }
 });
 
@@ -51,17 +43,25 @@ const {
   itemSeparatorLine
 } = paginationStyles();
 
-const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
-  <nav aria-label="pagination" className={pagination({ className })} {...props} />
+type PagginationProps = React.ComponentProps<'nav'>;
+const Pagination = ({ className, ref, ...props }: PagginationProps) => (
+  <nav aria-label="pagination" ref={ref} className={pagination({ className })} {...props} />
 );
 
-const PaginationSection = <T extends object>({ className, ...props }: SectionProps<T>) => (
-  <ListBoxSection {...props} className={section({ className })} />
+interface PaginationSectionProps<T> extends ListBoxSectionProps<T> {
+  ref?: React.RefObject<HTMLElement>;
+}
+const PaginationSection = <T extends object>({ className, ref, ...props }: PaginationSectionProps<T>) => (
+  <ListBoxSection ref={ref} {...props} className={section({ className })} />
 );
 
-const List = <T extends object>({ className, ...props }: ListBoxProps<T>) => {
+interface PaginationListProps<T> extends ListBoxProps<T> {
+  ref?: React.RefObject<HTMLDivElement>;
+}
+const List = <T extends object>({ className, ref, ...props }: PaginationListProps<T>) => {
   return (
     <ListBox
+      ref={ref}
       orientation="horizontal"
       aria-label={props['aria-label'] || 'Pagination'}
       layout="grid"
@@ -89,11 +89,11 @@ interface PaginationItemProps extends ListBoxItemProps {
   shape?: 'square' | 'circle';
   appearance?: 'solid' | 'outline' | 'plain';
   isCurrent?: boolean;
-  variant?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next';
+  segment?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next';
 }
 
 const Item = ({
-  variant = 'default',
+  segment = 'default',
   size = 'small',
   appearance = 'outline',
   intent,
@@ -108,7 +108,7 @@ const Item = ({
   const renderPaginationIndicator = (indicator: React.ReactNode) =>
     renderListItem(
       {
-        textValue: variant,
+        textValue: segment,
         'aria-current': isCurrent ? 'page' : undefined,
         isDisabled: isCurrent,
         className: cn(
@@ -124,7 +124,7 @@ const Item = ({
       indicator
     );
 
-  switch (variant) {
+  switch (segment) {
     case 'label':
       return renderListItem(
         {
@@ -189,3 +189,4 @@ Pagination.List = List;
 Pagination.Section = PaginationSection;
 
 export { Pagination };
+export type { PagginationProps, PaginationItemProps, PaginationListProps, PaginationSectionProps };
diff --git a/resources/js/components/ui/popover.tsx b/resources/js/components/ui/popover.tsx
index 312d03d..8f354c4 100644
--- a/resources/js/components/ui/popover.tsx
+++ b/resources/js/components/ui/popover.tsx
@@ -18,31 +18,33 @@ import { tv } from 'tailwind-variants';
 
 import { useMediaQuery } from '@/utils/use-media-query';
 import { twMerge } from 'tailwind-merge';
+import type { DialogBodyProps, DialogFooterProps, DialogHeaderProps, DialogTitleProps } from './dialog';
 import { Dialog } from './dialog';
 
-const Popover = ({ children, ...props }: DialogTriggerProps) => {
+type PopoverProps = DialogTriggerProps;
+const Popover = ({ children, ...props }: PopoverProps) => {
   return <DialogTrigger {...props}>{children}</DialogTrigger>;
 };
 
-const Title = ({ level = 2, className, ...props }: React.ComponentProps<typeof Dialog.Title>) => (
+const Title = ({ level = 2, className, ...props }: DialogTitleProps) => (
   <Dialog.Title className={twMerge('sm:leading-none', level === 2 && 'sm:text-lg', className)} {...props} />
 );
 
-const Header = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const Header = ({ className, ...props }: DialogHeaderProps) => (
   <Dialog.Header className={twMerge('sm:p-4', className)} {...props} />
 );
 
-const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const Footer = ({ className, ...props }: DialogFooterProps) => (
   <Dialog.Footer className={twMerge('sm:p-4', className)} {...props} />
 );
 
-const Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <Dialog.Body className={twMerge('sm:px-4', className)} {...props} />
+const Body = ({ className, ref, ...props }: DialogBodyProps) => (
+  <Dialog.Body ref={ref} className={twMerge('sm:px-4', className)} {...props} />
 );
 
 const content = tv({
   base: [
-    'max-w-xs transition-transform peer-not-has-[data=dialog-header]:p-4 rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs dark:backdrop-saturate-200 sm:text-sm sm:max-w-3xl forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5 [scrollbar-width:thin]'
+    'max-w-xs rounded-xl border bg-overlay bg-clip-padding text-overlay-fg shadow-xs transition-transform [scrollbar-width:thin] peer-not-has-[data=dialog-header]:p-4 sm:max-w-3xl sm:text-sm dark:backdrop-saturate-200 forced-colors:bg-[Canvas] [&::-webkit-scrollbar]:size-0.5'
   ],
   variants: {
     isPicker: { true: 'max-h-72 min-w-(--trigger-width) overflow-y-auto p-0', false: 'min-w-80' },
@@ -53,13 +55,13 @@ const content = tv({
     },
     isEntering: {
       true: [
-        'duration-100 ease-out animate-in fade-in',
+        'fade-in animate-in duration-100 ease-out',
         'data-[placement=left]:slide-in-from-right-1 data-[placement=right]:slide-in-from-left-1 data-[placement=top]:slide-in-from-bottom-1 data-[placement=bottom]:slide-in-from-top-1'
       ]
     },
     isExiting: {
       true: [
-        'duration-50 ease-in animate-out fade-out',
+        'fade-out animate-out duration-50 ease-in',
         'data-[placement=left]:slide-out-to-right-1 data-[placement=right]:slide-out-to-left-1 data-[placement=top]:slide-out-to-bottom-1 data-[placement=bottom]:slide-out-to-top-1'
       ]
     }
@@ -68,28 +70,28 @@ const content = tv({
 
 const drawer = tv({
   base: [
-    'fixed max-h-full bottom-0 top-auto z-50 w-full bg-overlay max-w-2xl border border-b-transparent outline-hidden'
+    'fixed top-auto bottom-0 z-50 max-h-full w-full max-w-2xl border border-b-transparent bg-overlay outline-hidden'
   ],
   variants: {
     isMenu: {
-      true: 'p-0 [&_[role=dialog]]:*:not-has-[[data-slot=dialog-body]]:px-1 rounded-t-xl',
-      false: 'py-4 rounded-t-2xl'
+      true: 'rounded-t-xl p-0 [&_[role=dialog]]:*:not-has-[[data-slot=dialog-body]]:px-1',
+      false: 'rounded-t-2xl py-4'
     },
     isEntering: {
       true: [
-        '[will-change:transform] [transition:transform_0.5s_cubic-bezier(0.32,_0.72,_0,_1)]',
-        'animate-in duration-200 fade-in-0 slide-in-from-bottom-56',
+        '[transition:transform_0.5s_cubic-bezier(0.32,_0.72,_0,_1)] [will-change:transform]',
+        'fade-in-0 slide-in-from-bottom-56 animate-in duration-200',
         '[transition:translate3d(0,_100%,_0)]',
         'sm:slide-in-from-bottom-auto sm:slide-in-from-top-[20%]'
       ]
     },
     isExiting: {
-      true: 'duration-200 ease-in animate-out slide-out-to-bottom-56'
+      true: 'slide-out-to-bottom-56 animate-out duration-200 ease-in'
     }
   }
 });
 
-interface PopoverProps
+interface PopoverContentProps
   extends Omit<React.ComponentProps<typeof Modal>, 'children'>,
     Omit<PopoverPrimitiveProps, 'children' | 'className'>,
     Omit<ModalOverlayProps, 'className'> {
@@ -102,7 +104,13 @@ interface PopoverProps
   className?: string | ((values: { defaultClassName?: string }) => string);
 }
 
-const Content = ({ respectScreen = true, children, showArrow = true, className, ...props }: PopoverProps) => {
+const PopoverContent = ({
+  respectScreen = true,
+  children,
+  showArrow = true,
+  className,
+  ...props
+}: PopoverContentProps) => {
   const isMobile = useMediaQuery('(max-width: 600px)');
   const popoverContext = useSlottedContext(PopoverContext)!;
   const isMenuTrigger = popoverContext?.trigger === 'MenuTrigger';
@@ -112,7 +120,7 @@ const Content = ({ respectScreen = true, children, showArrow = true, className,
   const effectiveOffset = isSubmenuTrigger ? offset - 5 : offset;
   return isMobile && respectScreen ? (
     <ModalOverlay
-      className="fixed top-0 left-0 z-50 w-full isolate h-(--visual-viewport-height) bg-overlay/10 [--visual-viewport-vertical-padding:16px]"
+      className="fixed top-0 left-0 isolate z-50 h-(--visual-viewport-height) w-full bg-overlay/10 [--visual-viewport-vertical-padding:16px]"
       {...props}
       isDismissable
     >
@@ -124,7 +132,7 @@ const Content = ({ respectScreen = true, children, showArrow = true, className,
         <Dialog
           role="dialog"
           aria-label={isMenu ? 'Menu' : props['aria-label']}
-          className="p-0 sm:p-0 touch-none data-focused:outline-hidden"
+          className="touch-none p-0 data-focused:outline-hidden sm:p-0"
         >
           {children}
         </Dialog>
@@ -158,7 +166,7 @@ const Content = ({ respectScreen = true, children, showArrow = true, className,
   );
 };
 
-const Picker = ({ children, className, ...props }: PopoverProps) => {
+const Picker = ({ children, className, ...props }: PopoverContentProps) => {
   return (
     <PopoverPrimitive
       {...props}
@@ -178,7 +186,7 @@ const Picker = ({ children, className, ...props }: PopoverProps) => {
 Popover.Primitive = PopoverPrimitive;
 Popover.Trigger = Dialog.Trigger;
 Popover.Close = Dialog.Close;
-Popover.Content = Content;
+Popover.Content = PopoverContent;
 Popover.Description = Dialog.Description;
 Popover.Body = Body;
 Popover.Footer = Footer;
@@ -186,4 +194,5 @@ Popover.Header = Header;
 Popover.Picker = Picker;
 Popover.Title = Title;
 
-export { Popover, content };
+export { Popover };
+export type { PopoverContentProps, PopoverProps };
diff --git a/resources/js/components/ui/primitive.tsx b/resources/js/components/ui/primitive.tsx
index 34356b2..0d07ce7 100644
--- a/resources/js/components/ui/primitive.tsx
+++ b/resources/js/components/ui/primitive.tsx
@@ -11,8 +11,8 @@ function composeTailwindRenderProps<T>(
 
 const focusRing = tv({
   variants: {
-    isFocused: { true: 'ring-4 ring-ring/20 outline-hidden' },
-    isFocusVisible: { true: 'ring-4 ring-ring/20 outline-hidden' },
+    isFocused: { true: 'outline-hidden ring-4 ring-ring/20 data-invalid:ring-danger/20' },
+    isFocusVisible: { true: 'outline-hidden ring-4 ring-ring/20' },
     isInvalid: { true: 'ring-4 ring-danger/20' }
   }
 });
@@ -26,7 +26,7 @@ const focusStyles = tv({
 });
 
 const focusButtonStyles = tv({
-  base: 'outline outline-ring forced-colors:outline-[Highlight] outline-offset-2',
+  base: 'outline outline-ring outline-offset-2 forced-colors:outline-[Highlight]',
   variants: {
     isFocusVisible: {
       false: 'outline-0',
diff --git a/resources/js/components/ui/select.tsx b/resources/js/components/ui/select.tsx
index b61a567..f26c8be 100644
--- a/resources/js/components/ui/select.tsx
+++ b/resources/js/components/ui/select.tsx
@@ -1,15 +1,9 @@
-import type { Placement } from '@react-types/overlays';
 import { IconChevronLgDown } from 'justd-icons';
-import {
-  Button,
-  Select as SelectPrimitive,
-  type SelectProps as SelectPrimitiveProps,
-  SelectValue,
-  type ValidationResult,
-  composeRenderProps
-} from 'react-aria-components';
+import type { ListBoxProps, SelectProps as SelectPrimitiveProps, ValidationResult } from 'react-aria-components';
+import { Button, Select as SelectPrimitive, SelectValue, composeRenderProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
+import type { Placement } from '@react-types/overlays';
 import { DropdownItem, DropdownItemDetails, DropdownSection } from './dropdown';
 import { Description, FieldError, Label } from './field';
 import { ListBox } from './list-box';
@@ -19,7 +13,7 @@ import { composeTailwindRenderProps, focusStyles } from './primitive';
 const selectTriggerStyles = tv({
   extend: focusStyles,
   base: [
-    'btr **:data-[slot=icon]:size-4 group-data-disabled:opacity-50 flex h-10 w-full cursor-default items-center gap-4 rounded-lg border border-input py-2 pl-3 pr-2 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:shadow-none',
+    'btr flex h-10 w-full cursor-default items-center gap-4 rounded-lg border border-input py-2 pr-2 pl-3 text-start shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition **:data-[slot=icon]:size-4 group-data-disabled:opacity-50 dark:shadow-none',
     'group-data-open:border-ring/70 group-data-open:ring-4 group-data-open:ring-ring/20',
     'text-fg group-data-invalid:border-danger group-data-invalid:ring-danger/20 forced-colors:group-data-invalid:border-[Mark]'
   ],
@@ -59,29 +53,29 @@ const Select = <T extends object>({
   );
 };
 
-interface ListProps<T extends object> {
+interface ListProps<T extends object> extends ListBoxProps<T> {
   items?: Iterable<T>;
   placement?: Placement;
   children: React.ReactNode | ((item: T) => React.ReactNode);
   className?: string;
 }
 
-const List = <T extends object>({ className, children, items, placement }: ListProps<T>) => {
+const List = <T extends object>({ className, children, items, placement, ...props }: ListProps<T>) => {
   return (
-    <Popover.Picker className={className} trigger="Select" placement={placement}>
-      <ListBox.Picker aria-label="items" items={items}>
+    <Popover.Picker className={className} placement={placement}>
+      <ListBox.Picker aria-label="items" items={items} {...props}>
         {children}
       </ListBox.Picker>
     </Popover.Picker>
   );
 };
 
-interface TriggerProps extends React.ComponentProps<typeof Button> {
+interface SelectTriggerProps extends React.ComponentProps<typeof Button> {
   prefix?: React.ReactNode;
   className?: string;
 }
 
-const Trigger = ({ className, ...props }: TriggerProps) => {
+const SelectTrigger = ({ className, ...props }: SelectTriggerProps) => {
   return (
     <Button
       className={composeRenderProps(className, (className, renderProps) =>
@@ -92,13 +86,10 @@ const Trigger = ({ className, ...props }: TriggerProps) => {
       )}
     >
       {props.prefix && <span className="-mr-1">{props.prefix}</span>}
-      <SelectValue
-        aria-placeholder="xxxxx"
-        className="flex-1 text-base data-placeholder:text-muted-fg sm:text-sm [&_[slot=description]]:hidden"
-      />
+      <SelectValue className="flex-1 text-base data-placeholder:text-muted-fg sm:text-sm [&_[slot=description]]:hidden" />
       <IconChevronLgDown
         aria-hidden
-        className="duration-300 size-4 shrink-0 text-muted-fg group-data-open:rotate-180 group-data-open:text-fg group-data-disabled:opacity-50 forced-colors:text-[ButtonText] forced-colors:group-data-disabled:text-[GrayText]"
+        className="size-4 shrink-0 text-muted-fg duration-300 group-data-open:rotate-180 group-data-open:text-fg group-data-disabled:opacity-50 forced-colors:text-[ButtonText] forced-colors:group-data-disabled:text-[GrayText]"
       />
     </Button>
   );
@@ -107,7 +98,8 @@ const Trigger = ({ className, ...props }: TriggerProps) => {
 Select.OptionDetails = DropdownItemDetails;
 Select.Option = DropdownItem;
 Select.Section = DropdownSection;
-Select.Trigger = Trigger;
+Select.Trigger = SelectTrigger;
 Select.List = List;
 
 export { Select };
+export type { SelectProps, SelectTriggerProps };
diff --git a/resources/js/components/ui/separator.tsx b/resources/js/components/ui/separator.tsx
index 39791b8..6974706 100644
--- a/resources/js/components/ui/separator.tsx
+++ b/resources/js/components/ui/separator.tsx
@@ -2,7 +2,7 @@ import { Separator as Divider, type SeparatorProps as DividerProps } from 'react
 import { tv } from 'tailwind-variants';
 
 const separatorStyles = tv({
-  base: 'bg-border shrink-0 forced-colors:bg-[ButtonBorder]',
+  base: 'shrink-0 bg-border forced-colors:bg-[ButtonBorder]',
   variants: {
     orientation: {
       horizontal: 'h-px w-full',
@@ -16,7 +16,7 @@ const separatorStyles = tv({
 
 interface SeparatorProps extends DividerProps {
   className?: string;
-  ref?: React.RefObject<DividerProps>;
+  ref?: React.RefObject<HTMLDivElement>;
 }
 
 const Separator = ({ className, ref, ...props }: SeparatorProps) => {
@@ -33,3 +33,4 @@ const Separator = ({ className, ref, ...props }: SeparatorProps) => {
 };
 
 export { Separator };
+export type { SeparatorProps };
diff --git a/resources/js/components/ui/sheet.tsx b/resources/js/components/ui/sheet.tsx
index 1b6de66..b75e519 100644
--- a/resources/js/components/ui/sheet.tsx
+++ b/resources/js/components/ui/sheet.tsx
@@ -6,17 +6,17 @@ import { Dialog } from './dialog';
 
 const overlayStyles = tv({
   base: [
-    'fixed top-0 left-0 w-full bg-fg/15 dark:bg-bg/40 h-(--visual-viewport-height) isolate z-50 flex items-center justify-center p-4'
+    'fixed top-0 left-0 isolate z-50 flex h-(--visual-viewport-height) w-full items-center justify-center bg-fg/15 p-4 dark:bg-bg/40'
   ],
   variants: {
     isBlurred: {
-      true: 'backdrop-blur bg-bg/15 dark:bg-bg/40'
+      true: 'bg-bg/15 backdrop-blur dark:bg-bg/40'
     },
     isEntering: {
-      true: 'animate-in fade-in duration-300 ease-out'
+      true: 'fade-in animate-in duration-300 ease-out'
     },
     isExiting: {
-      true: 'animate-out fade-out duration-200 ease-in'
+      true: 'fade-out animate-out duration-200 ease-in'
     }
   }
 });
@@ -38,21 +38,21 @@ const generateCompoundVariants = (sides: Array<Sides>) => {
 };
 
 const contentStyles = tv({
-  base: 'fixed z-50 grid gap-4 bg-overlay border-fg/5 dark:border-border text-overlay-fg shadow-lg transition ease-in-out',
+  base: 'fixed z-50 grid gap-4 border-fg/5 bg-overlay text-overlay-fg shadow-lg transition ease-in-out dark:border-border',
   variants: {
     isEntering: {
-      true: 'duration-300 animate-in '
+      true: 'animate-in duration-300 '
     },
     isExiting: {
-      true: 'duration-200 animate-out'
+      true: 'animate-out duration-200'
     },
     side: {
-      top: 'inset-x-0 top-0 rounded-b-2xl border-b data-entering:slide-in-from-top data-exiting:slide-out-to-top',
+      top: 'data-entering:slide-in-from-top data-exiting:slide-out-to-top inset-x-0 top-0 rounded-b-2xl border-b',
       bottom:
-        'inset-x-0 bottom-0 rounded-t-2xl border-t data-entering:slide-in-from-bottom data-exiting:slide-out-to-bottom',
-      left: 'inset-y-0 left-0 h-auto w-[18rem] sm:w-[19rem] sm:w-3/4 overflow-y-auto border-r data-entering:slide-in-from-left data-exiting:slide-out-to-left sm:max-w-xs',
+        'data-entering:slide-in-from-bottom data-exiting:slide-out-to-bottom inset-x-0 bottom-0 rounded-t-2xl border-t',
+      left: 'data-entering:slide-in-from-left data-exiting:slide-out-to-left inset-y-0 left-0 h-auto w-[18rem] overflow-y-auto border-r sm:w-3/4 sm:w-[19rem] sm:max-w-xs',
       right:
-        'inset-y-0 right-0 h-auto w-[18rem] sm:w-[19rem] sm:w-3/4 overflow-y-auto border-l data-entering:slide-in-from-right data-exiting:slide-out-to-right sm:max-w-xs'
+        'data-entering:slide-in-from-right data-exiting:slide-out-to-right inset-y-0 right-0 h-auto w-[18rem] overflow-y-auto border-l sm:w-3/4 sm:w-[19rem] sm:max-w-xs'
     },
     isFloat: {
       false: 'border-fg/20 dark:border-border',
@@ -62,7 +62,8 @@ const contentStyles = tv({
   compoundVariants: generateCompoundVariants(['top', 'bottom', 'left', 'right'])
 });
 
-const Sheet = (props: DialogTriggerProps) => {
+type SheetProps = DialogTriggerProps;
+const Sheet = (props: SheetProps) => {
   return <DialogTrigger {...props} />;
 };
 
@@ -83,7 +84,7 @@ interface SheetContentProps
   };
 }
 
-const Content = ({
+const SheetContent = ({
   classNames,
   isBlurred = false,
   isDismissable = true,
@@ -133,7 +134,7 @@ const Content = ({
 
 Sheet.Trigger = Dialog.Trigger;
 Sheet.Footer = Dialog.Footer;
-Sheet.Content = Content;
+Sheet.Content = SheetContent;
 Sheet.Header = Dialog.Header;
 Sheet.Title = Dialog.Title;
 Sheet.Description = Dialog.Description;
@@ -141,3 +142,4 @@ Sheet.Body = Dialog.Body;
 Sheet.Close = Dialog.Close;
 
 export { Sheet };
+export type { SheetContentProps, SheetProps, Sides };
diff --git a/resources/js/components/ui/table.tsx b/resources/js/components/ui/table.tsx
index 62c61ff..e9ac6f7 100644
--- a/resources/js/components/ui/table.tsx
+++ b/resources/js/components/ui/table.tsx
@@ -5,9 +5,9 @@ import type {
   CellProps,
   ColumnProps,
   ColumnResizerProps,
+  TableHeaderProps as HeaderProps,
   RowProps,
   TableBodyProps,
-  TableHeaderProps,
   TableProps as TablePrimitiveProps
 } from 'react-aria-components';
 import {
@@ -31,14 +31,14 @@ import { Checkbox } from './checkbox';
 
 const table = tv({
   slots: {
-    root: 'min-w-full table **:data-drop-target:border **:data-drop-target:border-primary w-full caption-bottom border-spacing-0 text-sm outline-hidden',
-    header: 'border-b x32',
-    row: 'tr group relative cursor-default border-b text-fg/70 outline-hidden ring-primary data-focused:ring-0 data-focus-visible:ring-1 data-selected:bg-subtle data-selected:data-hovered:bg-subtle/50 dark:data-selected:data-hovered:bg-subtle/60',
+    root: 'table w-full min-w-full caption-bottom border-spacing-0 text-sm outline-hidden **:data-drop-target:border **:data-drop-target:border-primary',
+    header: 'x32 border-b',
+    row: 'tr group relative cursor-default border-b text-fg/70 outline-hidden ring-primary data-selected:data-hovered:bg-subtle/50 data-selected:bg-subtle data-focus-visible:ring-1 data-focused:ring-0 dark:data-selected:data-hovered:bg-subtle/60',
     cellIcon:
-      'flex-none rounded bg-secondary text-fg *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:transition-transform *:data-[slot=icon]:duration-200 size-[1.15rem] grid place-content-center shrink-0',
+      'grid size-[1.15rem] flex-none shrink-0 place-content-center rounded bg-secondary text-fg *:data-[slot=icon]:size-3.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:transition-transform *:data-[slot=icon]:duration-200',
     columnResizer: [
-      'touch-none absolute [&[data-resizing]>div]:bg-primary right-0 top-0 bottom-0 w-px px-1 grid place-content-center',
-      'data-[resizable-direction=both]:cursor-ew-resize &[data-resizable-direction=left]:cursor-e-resize &[data-resizable-direction=right]:cursor-w-resize'
+      'absolute top-0 right-0 bottom-0 grid w-px touch-none place-content-center px-1 [&[data-resizing]>div]:bg-primary',
+      '&[data-resizable-direction=left]:cursor-e-resize &[data-resizable-direction=right]:cursor-w-resize data-[resizable-direction=both]:cursor-ew-resize'
     ]
   }
 });
@@ -58,7 +58,7 @@ const useTableContext = () => React.useContext(TableContext);
 
 const Table = ({ children, className, ...props }: TableProps) => (
   <TableContext.Provider value={props}>
-    <div className="overflow-auto relative w-full">
+    <div className="relative w-full overflow-auto">
       {props.allowResize ? (
         <ResizableTableContainer className="overflow-auto">
           <TablePrimitive {...props} className={root({ className })}>
@@ -84,7 +84,7 @@ const ColumnResizer = ({ className, ...props }: ColumnResizerProps) => (
       })
     )}
   >
-    <div className="py-3 w-px h-full bg-border" />
+    <div className="h-full w-px bg-border py-3" />
   </ColumnResizerPrimitive>
 );
 
@@ -97,7 +97,7 @@ interface TableCellProps extends CellProps {
 }
 
 const cellStyles = tv({
-  base: 'whitespace-nowrap group px-3 py-3 outline-hidden',
+  base: 'group whitespace-nowrap px-3 py-3 outline-hidden',
   variants: {
     allowResize: {
       true: 'overflow-hidden truncate'
@@ -114,7 +114,7 @@ const TableCell = ({ children, className, ...props }: TableCellProps) => {
 };
 
 const columnStyles = tv({
-  base: 'whitespace-nowrap relative allows-sorting:cursor-pointer px-3 py-3 text-left data-dragging:cursor-grabbing font-medium outline-hidden [&:has([slot=selection])]:pr-0',
+  base: 'relative allows-sorting:cursor-pointer whitespace-nowrap px-3 py-3 text-left font-medium outline-hidden data-dragging:cursor-grabbing [&:has([slot=selection])]:pr-0',
   variants: {
     isResizable: {
       true: 'overflow-hidden truncate'
@@ -154,17 +154,18 @@ const TableColumn = ({ isResizable = false, className, ...props }: TableColumnPr
   );
 };
 
-interface HeaderProps<T extends object> extends TableHeaderProps<T> {
+interface TableHeaderProps<T extends object> extends HeaderProps<T> {
   className?: string;
+  ref?: React.Ref<HTMLTableSectionElement>;
 }
 
-const Header = <T extends object>({ children, className, columns, ...props }: HeaderProps<T>) => {
+const Header = <T extends object>({ children, ref, className, columns, ...props }: TableHeaderProps<T>) => {
   const { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
   return (
-    <TableHeader data-slot="table-header" {...props} className={header({ className })}>
+    <TableHeader data-slot="table-header" ref={ref} className={header({ className })} {...props}>
       {allowsDragging && <Column className="w-0" />}
       {selectionBehavior === 'toggle' && (
-        <Column className="pl-4 w-0">{selectionMode === 'multiple' && <Checkbox slot="selection" />}</Column>
+        <Column className="w-0 pl-4">{selectionMode === 'multiple' && <Checkbox slot="selection" />}</Column>
       )}
       <Collection items={columns}>{children}</Collection>
     </TableHeader>
@@ -173,12 +174,14 @@ const Header = <T extends object>({ children, className, columns, ...props }: He
 
 interface TableRowProps<T extends object> extends RowProps<T> {
   className?: string;
+  ref?: React.Ref<HTMLTableRowElement>;
 }
 
-const TableRow = <T extends object>({ children, className, columns, id, ...props }: TableRowProps<T>) => {
+const TableRow = <T extends object>({ children, className, columns, id, ref, ...props }: TableRowProps<T>) => {
   const { selectionBehavior, allowsDragging } = useTableOptions();
   return (
     <Row
+      ref={ref}
       data-slot="table-row"
       id={id}
       {...props}
@@ -190,8 +193,8 @@ const TableRow = <T extends object>({ children, className, columns, id, ...props
       })}
     >
       {allowsDragging && (
-        <Cell className="pr-0 group cursor-grab ring-primary data-dragging:cursor-grabbing">
-          <Button className="relative py-1.5 pl-3.5 bg-transparent text-muted-fg data-pressed:text-fg" slot="drag">
+        <Cell className="group cursor-grab pr-0 ring-primary data-dragging:cursor-grabbing">
+          <Button className="relative bg-transparent py-1.5 pl-3.5 text-muted-fg data-pressed:text-fg" slot="drag">
             <IconHamburger />
           </Button>
         </Cell>
@@ -200,7 +203,7 @@ const TableRow = <T extends object>({ children, className, columns, id, ...props
         <Cell className="pl-4">
           <span
             aria-hidden
-            className="hidden absolute inset-y-0 left-0 w-0.5 h-full bg-primary group-data-selected:block"
+            className="absolute inset-y-0 left-0 hidden h-full w-0.5 bg-primary group-data-selected:block"
           />
           <Checkbox slot="selection" />
         </Cell>
@@ -217,3 +220,4 @@ Table.Header = Header;
 Table.Row = TableRow;
 
 export { Table };
+export type { TableBodyProps, TableCellProps, TableColumnProps, TableProps, TableRowProps };
diff --git a/resources/js/components/ui/text-field.tsx b/resources/js/components/ui/text-field.tsx
index 208d646..cb57321 100644
--- a/resources/js/components/ui/text-field.tsx
+++ b/resources/js/components/ui/text-field.tsx
@@ -97,4 +97,5 @@ const TextField = ({
   );
 };
 
-export { TextField, TextFieldPrimitive, type TextFieldProps };
+export { TextField };
+export type { TextFieldProps };
diff --git a/resources/js/components/ui/toast.tsx b/resources/js/components/ui/toast.tsx
index 1fba629..ea0958c 100644
--- a/resources/js/components/ui/toast.tsx
+++ b/resources/js/components/ui/toast.tsx
@@ -34,8 +34,8 @@ const Toast = ({ ...props }: ToasterProps) => {
             'has-data-description:**:data-title:font-medium [&:has([data-description])_[data-title]]:text-base!',
             'has-data-[slot=icon]:**:data-content:pl-0',
             'has-data-button:*:data-content:mb-10',
-            'has-data-button:**:data-close-button:hidden! w-full flex p-4 rounded-xl',
-            'backdrop-blur-3xl inset-ring-1 inset-ring-current/10'
+            'has-data-button:**:data-close-button:hidden! flex w-full rounded-xl p-4',
+            'inset-ring-1 inset-ring-current/10 backdrop-blur-3xl'
           ),
           icon: 'absolute top-[0.2rem] [--toast-icon-margin-end:7px] *:data-[slot=icon]:text-fg *:data-[slot=icon]:size-4.5 **:data-[slot=icon]:text-current',
           title: '',
@@ -69,3 +69,4 @@ const Toast = ({ ...props }: ToasterProps) => {
 };
 
 export { Toast };
+export type { ToasterProps };
diff --git a/resources/js/layouts/app-navbar.tsx b/resources/js/layouts/app-navbar.tsx
index fb20869..a008762 100644
--- a/resources/js/layouts/app-navbar.tsx
+++ b/resources/js/layouts/app-navbar.tsx
@@ -2,7 +2,16 @@ import { PagePropsData } from '@/types';
 import { usePage } from '@inertiajs/react';
 import { useTheme } from 'components/theme-provider';
 import { ThemeSwitcher } from 'components/theme-switcher';
-import { IconBrandJustd, IconBrandLaravel, IconChevronDown, IconColorSwatch, IconSettings } from 'justd-icons';
+import {
+  IconArrowUpRight,
+  IconBrandJustd,
+  IconBrandLaravel,
+  IconChevronDown,
+  IconColors,
+  IconColorSwatch,
+  IconPackage,
+  IconSettings
+} from 'justd-icons';
 import React from 'react';
 import { Selection } from 'react-aria-components';
 import { Avatar, Button, Menu, Navbar, Separator } from 'ui';
@@ -17,30 +26,6 @@ const navigations = [
     name: 'About',
     textValue: 'About',
     href: '/about'
-  },
-  {
-    name: 'Github',
-    textValue: 'Github Repository',
-    href: 'https://github.com/irsyadadl/inertia.ts',
-    className: 'justify-between'
-  },
-  {
-    name: 'Components',
-    textValue: 'Just D. Components',
-    href: 'https://getjustd.com',
-    className: 'justify-between'
-  },
-  {
-    name: 'Colors',
-    textValue: 'Just D. Colors',
-    href: 'https://getjustd.com/colors',
-    className: 'justify-between'
-  },
-  {
-    name: 'Templates',
-    textValue: 'Next.js Template',
-    href: 'https://irsyad.co/s',
-    className: 'justify-between'
   }
 ];
 
@@ -61,7 +46,36 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na
               {item.name}
             </Navbar.Item>
           ))}
+          <Menu>
+            <Navbar.Item className="group">
+              Resources...
+              <IconChevronDown className="duration-200 size-4 ml-2 group-data-pressed:rotate-180" />
+            </Navbar.Item>
+            <Menu.Content className="sm:min-w-48">
+              <Menu.Item target="_blank" href="https://getjustd.com/components">
+                <IconPackage />
+                Components
+                <IconArrowUpRight className="ml-auto" />
+              </Menu.Item>
+              <Menu.Item target="_blank" href="https://getjustd.com/icons">
+                <IconBrandJustd />
+                Icons
+                <IconArrowUpRight className="ml-auto" />
+              </Menu.Item>
+              <Menu.Item target="_blank" href="https://getjustd.com/themes">
+                <IconColors />
+                Themes
+                <IconArrowUpRight className="ml-auto" />
+              </Menu.Item>
+              <Menu.Item target="_blank" href="https://getjustd.com/colors">
+                <IconColorSwatch />
+                Colors
+                <IconArrowUpRight className="ml-auto" />
+              </Menu.Item>
+            </Menu.Content>
+          </Menu>
         </Navbar.Section>
+
         <Navbar.Section className="hidden ml-auto gap-x-1 lg:flex">
           {!auth.user && <ThemeSwitcher />}
           {auth.user ? (
diff --git a/resources/js/pages/home.tsx b/resources/js/pages/home.tsx
index 57e4a16..0cfa79f 100644
--- a/resources/js/pages/home.tsx
+++ b/resources/js/pages/home.tsx
@@ -14,11 +14,11 @@ import { Card, Container, Grid, Link } from 'ui';
 
 const items = [
   {
-    name: 'Just D.',
+    name: 'Justd',
     url: 'https://getjustd.com',
     icon: IconBrandJustd,
     description:
-      ' Just D. is a chill set of React components, built on top of React Aria Components, all about keeping the web accessible.'
+      ' Justd is a chill set of React components, built on top of React Aria Components, all about keeping the web accessible.'
   },
   {
     name: 'Inertia.ts',