Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-06-22 04:11:55 +10:00
Code Issues Packages Projects Releases Wiki Activity

Improved the Right to Left Direction implementation for relevant languages. (#2583)

Browse Source 
* Added support for right to left direction of bullet points in the page render and text editor

* Added right to left direction support by adding a toggle button in the layout and enhancing the css element of the page render to support it without affecting the default left to right direction

* Moved the Right to Life Direction Toggle feature to be integrated with the Languages section using locale

* change all occurrances of pl, pr, ml, mr, left, right to start/end equivalents

---------

Co-authored-by: Amruth Pillai <im.amruth@gmail.com>
This commit is contained in:
Ibrahim
2026-01-25 22:18:20 +05:00
committed by GitHub
parent 0c65612368
commit 3f55c24e36
125 changed files with 484 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+5 -1
View File
@@ -13,4 +13,8 @@ node_modules
!.env.example
public/sw.js
scripts/**/*.json
public/workbox-*.js
public/workbox-*.js
# Compiled translation files
/locales/*.js
!/locales/*.po
locales/af-ZA.po
Generated
BIN
View File
Binary file not shown.
locales/am-ET.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "አሳይ"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "የጎን አሞሌ"
msgstr "የጎን አሞሌ<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ar-SA.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "إظهار"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "الشريط الجانبي"
msgstr "الشريط الجانبي<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/az-AZ.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Göstər"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Yan panel"
msgstr "Yan panel<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/bg-BG.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Показване"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Странична лента"
msgstr "Странична лента<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/bn-BD.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "দেখান"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "সাইডবার"
msgstr "সাইডবার<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ca-ES.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Mostra"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Barra lateral"
msgstr "Barra lateral<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/cs-CZ.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Zobrazit"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Postranní panel"
msgstr "Postranní panel<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/da-DK.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Vis"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Sidebjælke"
msgstr "Sidebjælke<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/de-DE.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Einblenden"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Seitenleiste"
msgstr "Seitenleiste<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/el-GR.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Εμφάνιση"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Πλαϊνή μπάρα"
msgstr "Πλαϊνή μπάρα<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/es-ES.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Mostrar"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Barra lateral"
msgstr "Barra lateral<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/fa-IR.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "نمایش"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "نوار کناری"
msgstr "نوار کناری<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/fi-FI.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Näytä"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Sivupalkki"
msgstr "Sivupalkki<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/fr-FR.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Afficher"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Encart"
msgstr "Encart<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/he-IL.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "הצגה"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "סרגל צד"
msgstr "סרגל צד<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/hi-IN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "दिखाएँ"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "साइडबार"
msgstr "साइडबार<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/hu-HU.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Megjelenítés"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Oldalsáv"
msgstr "Oldalsáv<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/id-ID.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Tampilkan"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Bilah Sisi"
msgstr "Bilah Sisi<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/it-IT.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Mostra"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Barra laterale"
msgstr "Barra laterale<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ja-JP.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "表示"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "サイドバー"
msgstr "サイドバー<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/km-KH.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "បង្ហាញ"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "របារ​បាត"
msgstr "របារ​បាត<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/kn-IN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "ತೋರಿಸು"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "ಪಾರ್ಶ್ವಪಟ್ಟಿ"
msgstr "ಪಾರ್ಶ್ವಪಟ್ಟಿ<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ko-KR.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "표시"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "사이드바"
msgstr "사이드바<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/lt-LT.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Rodyti"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Šoninė juosta"
msgstr "Šoninė juosta<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/lv-LV.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Rādīt"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Sānu josla"
msgstr "Sānu josla<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ml-IN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "കാണിക്കുക"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "സൈഡ്ബാർ"
msgstr "സൈഡ്ബാർ<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/mr-IN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "दाखवा"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "बाजूची पट्टी"
msgstr "बाजूची पट्टी<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ms-MY.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Paparkan"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Panel Sisi"
msgstr "Panel Sisi<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ne-NP.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "देखाउनुहोस्"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Sidebar"
msgstr "Sidebar<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/nl-NL.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Weergeven"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Zijbalk"
msgstr "Zijbalk<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/no-NO.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Vis"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Sidepanel"
msgstr "Sidepanel<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/or-IN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "ଦେଖାନ୍ତୁ"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "ସାଇଡବାର୍"
msgstr "ସାଇଡବାର୍<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/pl-PL.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Pokaż"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Pasek boczny"
msgstr "Pasek boczny<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/pt-BR.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Mostrar"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Barra lateral"
msgstr "Barra lateral<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/pt-PT.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Mostrar"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Barra lateral"
msgstr "Barra lateral<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ro-RO.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Arată"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Bară laterală"
msgstr "Bară laterală<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ru-RU.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Показать"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Боковая панель"
msgstr "Боковая панель<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/sk-SK.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Zobraziť"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Bočný panel"
msgstr "Bočný panel<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/sq-AL.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Shfaq"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Shiriti anësor"
msgstr "Shiriti anësor<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/sr-SP.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Прикажи"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Бочна трака"
msgstr "Бочна трака<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/sv-SE.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "Visa"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "Sidofält"
msgstr "Sidofält<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/ta-IN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "காட்டு"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "சைட்பார்"
msgstr "சைட்பார்<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/te-IN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr ""
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr ""
msgstr "<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/th-TH.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr ""
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr ""
msgstr "<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/tr-TR.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr ""
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr ""
msgstr "<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/uk-UA.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr ""
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr ""
msgstr "<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/uz-UZ.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr ""
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr ""
msgstr "<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/vi-VN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr ""
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr ""
msgstr "<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/zh-CN.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "显示"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "侧边栏"
msgstr "侧边栏<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/zh-TW.po
Generated
+1 -1
View File
@@ -2017,7 +2017,7 @@ msgstr "顯示"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr "側邊欄"
msgstr "側邊欄<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
locales/zu-ZA.po
Generated
+1 -1
View File
@@ -2012,7 +2012,7 @@ msgstr ""
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/pages.tsx
msgid "Sidebar"
msgstr ""
msgstr "<<<<<<< HEAD"
#: src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx
msgid "Sidebar Width"
src/components/animation/spotlight.tsx
+8 -8
View File
@@ -33,10 +33,10 @@ export const Spotlight = ({
<motion.div
animate={{ x: [0, xOffset, 0] }}
transition={{ duration, repeat: Infinity, repeatType: "reverse", ease: "easeInOut" }}
className="pointer-events-none absolute top-0 left-0 z-40 h-svh w-svw"
className="pointer-events-none absolute start-0 top-0 z-40 h-svh w-svw"
>
<div
className="absolute top-0 left-0"
className="absolute start-0 top-0"
style={{
width: `${width}px`,
height: `${height}px`,
@@ -46,7 +46,7 @@ export const Spotlight = ({
/>
<div
className="absolute top-0 left-0 origin-top-left"
className="absolute start-0 top-0 origin-top-left"
style={{
height: `${height}px`,
width: `${smallWidth}px`,
@@ -56,7 +56,7 @@ export const Spotlight = ({
/>
<div
className="absolute top-0 left-0 origin-top-left"
className="absolute start-0 top-0 origin-top-left"
style={{
height: `${height}px`,
width: `${smallWidth}px`,
@@ -68,7 +68,7 @@ export const Spotlight = ({
<motion.div
animate={{ x: [0, -xOffset, 0] }}
className="pointer-events-none absolute top-0 right-0 z-40 h-svh w-svw"
className="pointer-events-none absolute end-0 top-0 z-40 h-svh w-svw"
transition={{
duration,
repeat: Infinity,
@@ -77,7 +77,7 @@ export const Spotlight = ({
}}
>
<div
className="absolute top-0 right-0"
className="absolute end-0 top-0"
style={{
width: `${width}px`,
height: `${height}px`,
@@ -87,7 +87,7 @@ export const Spotlight = ({
/>
<div
className="absolute top-0 right-0 origin-top-right"
className="absolute end-0 top-0 origin-top-right"
style={{
height: `${height}px`,
width: `${smallWidth}px`,
@@ -97,7 +97,7 @@ export const Spotlight = ({
/>
<div
className="absolute top-0 right-0 origin-top-right"
className="absolute end-0 top-0 origin-top-right"
style={{
height: `${height}px`,
width: `${smallWidth}px`,
src/components/input/chip-input.tsx
+2 -2
View File
@@ -89,7 +89,7 @@ export function ChipInput({ value, defaultValue = [], onChange, className, ...pr
<div className="flex flex-wrap items-center gap-1.5">
{chips.map((chip, idx) => (
<div key={chip + idx} className="relative">
<Badge variant="outline" className="flex select-none items-center gap-1 pr-1 pl-2">
<Badge variant="outline" className="flex select-none items-center gap-1 ps-2 pe-1">
<span>{chip}</span>
<button
type="button"
@@ -99,7 +99,7 @@ export function ChipInput({ value, defaultValue = [], onChange, className, ...pr
e.stopPropagation();
removeChip(idx);
}}
className="ml-0.5 hover:text-destructive focus:outline-none"
className="ms-0.5 hover:text-destructive focus:outline-none"
>
<XIcon className="size-3" />
</button>
src/components/input/rich-input.module.css
+57 -2
View File
@@ -1,6 +1,8 @@
.tiptap_content {
--list-margin: 0.25rem;
--table-border-color: var(--page-text-color);
word-wrap: break-word;
overflow-wrap: break-word;
:where(p) {
margin-top: 0.5rem;
@@ -30,14 +32,15 @@
}
:where(li) {
margin-inline-start: 1rem;
margin-top: var(--list-margin);
margin-bottom: var(--list-margin);
margin-left: 1rem;
list-style-position: outside;
}
:where(li ul li, li ol li) {
margin: var(--list-margin) 1rem;
margin-block: var(--list-margin);
margin-inline: 1rem;
}
:where(mark) {
@@ -62,6 +65,56 @@
border-right: 1px solid var(--table-border-color);
border-bottom: 1px solid var(--table-border-color);
}
/* RTL Support: Apply RTL direction when text is right-aligned */
p[style*="text-align: right"],
h1[style*="text-align: right"],
h2[style*="text-align: right"],
h3[style*="text-align: right"],
h4[style*="text-align: right"],
h5[style*="text-align: right"],
h6[style*="text-align: right"],
li[style*="text-align: right"],
ul[style*="text-align: right"],
ol[style*="text-align: right"] {
direction: rtl;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* LTR Support: Apply LTR direction when text is left-aligned */
p[style*="text-align: left"],
h1[style*="text-align: left"],
h2[style*="text-align: left"],
h3[style*="text-align: left"],
h4[style*="text-align: left"],
h5[style*="text-align: left"],
h6[style*="text-align: left"],
li[style*="text-align: left"],
ul[style*="text-align: left"],
ol[style*="text-align: left"] {
direction: ltr;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* When list items are RTL, make bullets/numbers appear on the right */
li[style*="text-align: right"] {
text-align: right;
}
/* Parent list inherits direction from its items */
ul:has(li[style*="text-align: right"]),
ol:has(li[style*="text-align: right"]) {
direction: rtl;
}
ul:has(li[style*="text-align: left"]),
ol:has(li[style*="text-align: left"]) {
direction: ltr;
}
}
.editor_content {
@@ -70,6 +123,8 @@
font-weight: var(--page-body-font-weight);
line-height: var(--page-body-line-height);
color: var(--page-text-color);
word-wrap: break-word;
overflow-wrap: break-word;
[class*="dark"] & {
--table-border-color: var(--color-foreground);
src/components/input/rich-input.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ const extensions = [
class: "rounded-md px-0.5 py-px",
},
}),
TextAlign.configure({ types: ["heading", "paragraph"] }),
TextAlign.configure({ types: ["heading", "paragraph", "listItem"] }),
TableKit.configure(),
];
src/components/input/url-input.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export function URLInput({ value, onChange, ...props }: Props) {
<InputGroupInput
value={urlValue}
className={cn(props.className, "pl-0!")}
className={cn(props.className, "ps-0!")}
onChange={handleUrlChange}
{...props}
/>
src/components/layout/breakpoint-indicator.tsx
+2 -2
View File
@@ -11,8 +11,8 @@ export function BreakpointIndicator({ position = "bottom-right" }: BreakpointInd
const isBottom = position.includes("bottom");
const top = isTop ? "top-0" : "bottom-0";
const right = isRight ? "right-0" : "left-0";
const left = isLeft ? "left-0" : "right-0";
const right = isRight ? "end-0" : "start-0";
const left = isLeft ? "start-0" : "end-0";
const bottom = isBottom ? "bottom-0" : "top-0";
return (
src/components/resume/preview.module.css
+50
View File
@@ -66,4 +66,54 @@
small {
font-size: calc(var(--page-body-font-size) * 0.9pt);
}
/* RTL Support: Apply RTL direction when text is right-aligned */
p[style*="text-align: right"],
h1[style*="text-align: right"],
h2[style*="text-align: right"],
h3[style*="text-align: right"],
h4[style*="text-align: right"],
h5[style*="text-align: right"],
h6[style*="text-align: right"],
li[style*="text-align: right"],
ul[style*="text-align: right"],
ol[style*="text-align: right"] {
direction: rtl;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* LTR Support: Apply LTR direction when text is left-aligned */
p[style*="text-align: left"],
h1[style*="text-align: left"],
h2[style*="text-align: left"],
h3[style*="text-align: left"],
h4[style*="text-align: left"],
h5[style*="text-align: left"],
h6[style*="text-align: left"],
li[style*="text-align: left"],
ul[style*="text-align: left"],
ol[style*="text-align: left"] {
direction: ltr;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
}
/* When list items are RTL, make bullets/numbers appear on the right */
li[style*="text-align: right"] {
text-align: right;
}
/* Parent list inherits direction from its items */
ul:has(li[style*="text-align: right"]),
ol:has(li[style*="text-align: right"]) {
direction: rtl;
}
ul:has(li[style*="text-align: left"]),
ol:has(li[style*="text-align: left"]) {
direction: ltr;
}
}
src/components/resume/preview.tsx
+3 -3
View File
@@ -147,7 +147,7 @@ function PageContainer({ pageIndex, pageLayout, pageClassName, showPageNumbers =
return (
<div data-page-index={pageIndex} className="relative">
{showPageNumbers && totalNumberOfPages > 1 && (
<div className="absolute -top-6 left-0 print:hidden">
<div className="absolute start-0 -top-6 print:hidden">
<span className="font-medium text-foreground text-xs">
<Trans>
Page {pageNumber} of {totalNumberOfPages}
@@ -161,7 +161,7 @@ function PageContainer({ pageIndex, pageLayout, pageClassName, showPageNumbers =
</div>
{pageHeight > maxPageHeight && (
<div className="absolute top-full left-0 mt-4 print:hidden">
<div className="absolute start-0 top-full mt-4 print:hidden">
<a
rel="noopener"
target="_blank"
@@ -177,7 +177,7 @@ function PageContainer({ pageIndex, pageLayout, pageClassName, showPageNumbers =
</AlertTitle>
<AlertDescription className="text-xs underline-offset-2 group-hover/link:underline">
<Trans>Learn more about how to fit content on a page</Trans>
<ArrowRightIcon color="currentColor" className="ml-1 inline size-3" />
<ArrowRightIcon color="currentColor" className="ms-1 inline size-3" />
</AlertDescription>
</Alert>
</a>
src/components/resume/templates/azurill.tsx
+55 -47
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -7,61 +8,68 @@ import { PagePicture } from "../shared/page-picture";
import { useResumeStore } from "../store/resume";
import type { TemplateProps } from "./types";
const sectionClassName = cn(
// Heading Decoration in Sidebar Layout
"group-data-[layout=sidebar]:[&>h6]:px-4",
"group-data-[layout=sidebar]:[&>h6]:relative",
"group-data-[layout=sidebar]:[&>h6]:inline-flex",
"group-data-[layout=sidebar]:[&>h6]:items-center",
"group-data-[layout=sidebar]:[&>h6]:before:content-['']",
"group-data-[layout=sidebar]:[&>h6]:before:absolute",
"group-data-[layout=sidebar]:[&>h6]:before:left-0",
"group-data-[layout=sidebar]:[&>h6]:before:rounded-full",
"group-data-[layout=sidebar]:[&>h6]:before:size-2",
"group-data-[layout=sidebar]:[&>h6]:before:border",
"group-data-[layout=sidebar]:[&>h6]:before:border-(--page-primary-color)",
"group-data-[layout=sidebar]:[&>h6]:after:content-['']",
"group-data-[layout=sidebar]:[&>h6]:after:absolute",
"group-data-[layout=sidebar]:[&>h6]:after:right-0",
"group-data-[layout=sidebar]:[&>h6]:after:rounded-full",
"group-data-[layout=sidebar]:[&>h6]:after:size-2",
"group-data-[layout=sidebar]:[&>h6]:after:border",
"group-data-[layout=sidebar]:[&>h6]:after:border-(--page-primary-color)",
// Section in Sidebar Layout
"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",
"group-data-[layout=sidebar]:[&_.section-item-header>div]:items-start",
// Section in Main Layout
"group-data-[layout=main]:[&>.section-content]:relative",
"group-data-[layout=main]:[&>.section-content]:ml-4",
"group-data-[layout=main]:[&>.section-content]:pl-4",
"group-data-[layout=main]:[&>.section-content]:border-l",
"group-data-[layout=main]:[&>.section-content]:border-(--page-primary-color)",
// Timeline Marker in Main Layout
"group-data-[layout=main]:[&>.section-content]:after:content-['']",
"group-data-[layout=main]:[&>.section-content]:after:absolute",
"group-data-[layout=main]:[&>.section-content]:after:top-5",
"group-data-[layout=main]:[&>.section-content]:after:left-0",
"group-data-[layout=main]:[&>.section-content]:after:size-2.5",
"group-data-[layout=main]:[&>.section-content]:after:translate-x-[-50%]",
"group-data-[layout=main]:[&>.section-content]:after:translate-y-[-50%]",
"group-data-[layout=main]:[&>.section-content]:after:rounded-full",
"group-data-[layout=main]:[&>.section-content]:after:border",
"group-data-[layout=main]:[&>.section-content]:after:border-(--page-primary-color)",
"group-data-[layout=main]:[&>.section-content]:after:bg-(--page-background-color)",
);
/**
* Template: Azurill
*/
export function AzurillTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
const sectionClassName = cn(
// Heading Decoration in Sidebar Layout
"group-data-[layout=sidebar]:[&>h6]:px-4",
"group-data-[layout=sidebar]:[&>h6]:relative",
"group-data-[layout=sidebar]:[&>h6]:inline-flex",
"group-data-[layout=sidebar]:[&>h6]:items-center",
"group-data-[layout=sidebar]:[&>h6]:before:content-['']",
"group-data-[layout=sidebar]:[&>h6]:before:absolute",
"group-data-[layout=sidebar]:[&>h6]:before:start-0",
"group-data-[layout=sidebar]:[&>h6]:before:rounded-full",
"group-data-[layout=sidebar]:[&>h6]:before:size-2",
"group-data-[layout=sidebar]:[&>h6]:before:border",
"group-data-[layout=sidebar]:[&>h6]:before:border-(--page-primary-color)",
"group-data-[layout=sidebar]:[&>h6]:after:content-['']",
"group-data-[layout=sidebar]:[&>h6]:after:absolute",
"group-data-[layout=sidebar]:[&>h6]:after:end-0",
"group-data-[layout=sidebar]:[&>h6]:after:rounded-full",
"group-data-[layout=sidebar]:[&>h6]:after:size-2",
"group-data-[layout=sidebar]:[&>h6]:after:border",
"group-data-[layout=sidebar]:[&>h6]:after:border-(--page-primary-color)",
// Section in Sidebar Layout
"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",
"group-data-[layout=sidebar]:[&_.section-item-header>div]:items-start",
// Section in Main Layout
"group-data-[layout=main]:[&>.section-content]:relative",
"group-data-[layout=main]:[&>.section-content]:ms-4",
"group-data-[layout=main]:[&>.section-content]:ps-4",
"group-data-[layout=main]:[&>.section-content]:border-s",
"group-data-[layout=main]:[&>.section-content]:border-(--page-primary-color)",
// Timeline Marker in Main Layout
"group-data-[layout=main]:[&>.section-content]:after:content-['']",
"group-data-[layout=main]:[&>.section-content]:after:absolute",
"group-data-[layout=main]:[&>.section-content]:after:top-5",
"group-data-[layout=main]:[&>.section-content]:after:start-0",
"group-data-[layout=main]:[&>.section-content]:after:size-2.5",
rtlDirection
? "group-data-[layout=main]:[&>.section-content]:after:[transform:translate(50%,-50%)]"
: "group-data-[layout=main]:[&>.section-content]:after:translate-x-[-50%]",
"group-data-[layout=main]:[&>.section-content]:after:translate-y-[-50%]",
"group-data-[layout=main]:[&>.section-content]:after:rounded-full",
"group-data-[layout=main]:[&>.section-content]:after:border",
"group-data-[layout=main]:[&>.section-content]:after:border-(--page-primary-color)",
"group-data-[layout=main]:[&>.section-content]:after:bg-(--page-background-color)",
);
return (
<div className="template-azurill page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
<div
className="template-azurill page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0"
style={{ direction: rtlDirection ? "rtl" : "ltr" }}
>
{isFirstPage && <Header />}
<div className="flex gap-x-(--page-gap-x)">
src/components/resume/templates/bronzor.tsx
+7 -1
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -21,9 +22,14 @@ const sectionClassName = cn(
export function BronzorTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-bronzor page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
<div
className="template-bronzor page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0"
style={{ direction: rtlDirection ? "rtl" : "ltr" }}
>
{isFirstPage && <Header />}
<div className="space-y-(--page-gap-y)">
src/components/resume/templates/chikorita.tsx
+8 -3
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -33,12 +34,16 @@ const sectionClassName = cn(
export function ChikoritaTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-chikorita page-content">
<div className="template-chikorita page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
{/* Sidebar Background */}
{!fullWidth && (
<div className="page-sidebar-background absolute inset-y-0 right-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)" />
<div
className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "start-0" : "end-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)`}
/>
)}
{isFirstPage && <Header />}
@@ -75,7 +80,7 @@ function Header() {
return (
<div className="page-header relative flex">
<div className="flex flex-1 items-center pt-(--page-margin-y) pl-(--page-margin-x)">
<div className="flex flex-1 items-center ps-(--page-margin-x) pt-(--page-margin-y)">
<PagePicture />
<div className="page-basics space-y-2 px-(--page-margin-x)">
src/components/resume/templates/ditgar.tsx
+20 -5
View File
@@ -1,3 +1,4 @@
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -15,10 +16,10 @@ const sectionClassName = cn(
"group-data-[layout=sidebar]:[&_.section-item-header>div]:items-start",
// Decoration Line in Section Item Header
"group-data-[layout=main]:[&_.section-item-header]:pl-2",
"group-data-[layout=main]:[&_.section-item-header]:ps-2",
"group-data-[layout=main]:[&_.section-item-header]:py-0.5",
"group-data-[layout=main]:[&_.section-item-header]:-ml-2.5",
"group-data-[layout=main]:[&_.section-item-header]:border-l-2",
"group-data-[layout=main]:[&_.section-item-header]:-ms-2.5",
"group-data-[layout=main]:[&_.section-item-header]:border-s-2",
"group-data-[layout=main]:[&_.section-item-header]:border-(--page-primary-color)",
);
@@ -28,18 +29,32 @@ const sectionClassName = cn(
export function DitgarTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
const SummaryComponent = getSectionComponent("summary", {
sectionClassName: cn(sectionClassName, "px-(--page-margin-x) pt-(--page-margin-y)"),
});
return (
<div className="template-ditgar page-content">
<div
className="template-ditgar page-content grid min-h-[inherit] grid-cols-3"
style={{ direction: rtlDirection ? "rtl" : "ltr" }}
>
{/* Sidebar Background */}
{(!fullWidth || isFirstPage) && (
<div className="page-sidebar-background absolute inset-y-0 left-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20" />
<div
className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "end-0" : "start-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20`}
/>
)}
<div
data-layout="sidebar"
className={cn("sidebar group flex flex-col", !(isFirstPage || !fullWidth) && "hidden")}
>
{isFirstPage && <Header />}
</div>
<div className="flex">
{(!fullWidth || isFirstPage) && (
<aside data-layout="sidebar" className="sidebar group z-10 flex w-(--page-sidebar-width) shrink-0 flex-col">
src/components/resume/templates/ditto.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -19,16 +20,18 @@ const sectionClassName = cn(
export function DittoTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-ditto page-content">
<div className="template-ditto page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
{isFirstPage && <Header />}
<div className="flex pt-(--page-margin-y)">
{!fullWidth && (
<aside
data-layout="sidebar"
className="group page-sidebar w-(--page-sidebar-width) shrink-0 space-y-4 overflow-x-hidden pl-(--page-margin-x)"
className="group page-sidebar w-(--page-sidebar-width) shrink-0 space-y-4 overflow-x-hidden ps-(--page-margin-x)"
>
{sidebar.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
@@ -55,7 +58,7 @@ function Header() {
<div className="page-header relative">
<div className="page-basics bg-(--page-primary-color) text-(--page-background-color)">
<div className="basics-header flex items-center">
<div className="flex w-(--page-sidebar-width) shrink-0 justify-center pl-(--page-margin-x)">
<div className="flex w-(--page-sidebar-width) shrink-0 justify-center ps-(--page-margin-x)">
<PagePicture className="absolute top-8" />
</div>
src/components/resume/templates/gengar.tsx
+7 -2
View File
@@ -1,3 +1,4 @@
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -22,12 +23,16 @@ const sectionClassName = cn(
export function GengarTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-gengar page-content">
<div className="template-gengar page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
{/* Sidebar Background */}
{(!fullWidth || isFirstPage) && (
<div className="page-sidebar-background absolute inset-y-0 left-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20" />
<div
className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "end-0" : "start-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20`}
/>
)}
<div className="flex">
src/components/resume/templates/glalie.tsx
+7 -2
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -22,12 +23,16 @@ const sectionClassName = cn(
export function GlalieTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-glalie page-content">
<div className="template-glalie page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
{/* Sidebar Background */}
{(!fullWidth || isFirstPage) && (
<div className="page-sidebar-background absolute inset-y-0 left-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20" />
<div
className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "end-0" : "start-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20`}
/>
)}
<div className="flex">
src/components/resume/templates/kakuna.tsx
+7 -1
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -18,9 +19,14 @@ const sectionClassName = cn(
export function KakunaTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-kakuna page-content space-y-4 px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
<div
className="template-kakuna page-content space-y-4 px-(--page-margin-x) py-(--page-margin-y) print:p-0"
style={{ direction: rtlDirection ? "rtl" : "ltr" }}
>
{isFirstPage && <Header />}
<main data-layout="main" className="group page-main space-y-4">
src/components/resume/templates/lapras.tsx
+5 -1
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -21,6 +22,8 @@ const sectionClassName = cn(
export function LaprasTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
const containerBorderRadius = useResumeStore((state) => Math.min(state.resume.data.picture.borderRadius, 30));
const headingNegativeMargin = useResumeStore((state) => state.resume.data.metadata.typography.heading.fontSize + 6);
@@ -31,6 +34,7 @@ export function LaprasTemplate({ pageIndex, pageLayout }: TemplateProps) {
{
"--container-border-radius": `${containerBorderRadius}pt`,
"--heading-negative-margin": `${headingNegativeMargin}pt`,
direction: rtlDirection ? "rtl" : "ltr",
} as React.CSSProperties
}
className="template-lapras page-content space-y-6 px-(--page-margin-x) pt-(--page-margin-y) print:p-0"
@@ -74,7 +78,7 @@ function Header() {
<p className="basics-headline">{basics.headline}</p>
</div>
<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-(--page-primary-color) *:border-r *:py-0.5 *:pr-2 *:last:border-r-0">
<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-(--page-primary-color) *:border-e *:py-0.5 *:pe-2 *:last:border-e-0">
{basics.email && (
<div className="basics-item-email">
<EnvelopeIcon />
src/components/resume/templates/leafish.tsx
+4 -1
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -19,9 +20,11 @@ const sectionClassName = cn(
export function LeafishTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-leafish page-content space-y-4">
<div className="template-leafish page-content space-y-4" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
{isFirstPage && <Header />}
<div className="flex gap-x-(--page-margin-x) px-(--page-margin-x) pt-(--page-margin-y)">
src/components/resume/templates/onyx.tsx
+7 -1
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -15,9 +16,14 @@ const sectionClassName = cn();
export function OnyxTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-onyx page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
<div
className="template-onyx page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0"
style={{ direction: rtlDirection ? "rtl" : "ltr" }}
>
{isFirstPage && <Header />}
<main data-layout="main" className="group page-main space-y-(--page-gap-y)">
src/components/resume/templates/pikachu.tsx
+34 -26
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -22,39 +23,46 @@ const sectionClassName = cn(
export function PikachuTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-pikachu page-content flex gap-x-(--page-margin-x) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
<aside
data-layout="sidebar"
className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-(--page-gap-y)"
>
{isFirstPage && (
<div className="flex max-w-(--page-sidebar-width) items-center justify-start">
<PagePicture />
</div>
)}
<div
className="template-pikachu page-content px-(--page-margin-x) py-(--page-margin-y) print:p-0"
style={{ direction: rtlDirection ? "rtl" : "ltr" }}
>
<div className="flex gap-x-(--page-margin-x)">
<aside
data-layout="sidebar"
className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-3"
>
{isFirstPage && (
<div className="flex items-center justify-center">
<PagePicture />
</div>
)}
{!fullWidth && (
<div className="shrink-0 space-y-(--page-gap-y) overflow-x-hidden">
{sidebar.map((section) => {
{!fullWidth && (
<div className="shrink-0 space-y-(--page-gap-y) overflow-x-hidden">
{sidebar.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
})}
</div>
)}
</aside>
<main data-layout="main" className="group page-main flex-1 space-y-(--page-margin-y)">
{isFirstPage && <Header />}
<div className="space-y-(--page-gap-y)">
{main.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
})}
</div>
)}
</aside>
<main data-layout="main" className="group page-main flex-1 space-y-(--page-margin-y)">
{isFirstPage && <Header />}
<div className="space-y-(--page-gap-y)">
{main.map((section) => {
const Component = getSectionComponent(section, { sectionClassName });
return <Component key={section} id={section} />;
})}
</div>
</main>
</main>
</div>
</div>
);
}
src/components/resume/templates/rhyhorn.tsx
+8 -2
View File
@@ -1,4 +1,5 @@
import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
import { isRTL } from "@/utils/locale";
import { cn } from "@/utils/style";
import { getSectionComponent } from "../shared/get-section-component";
import { PageIcon } from "../shared/page-icon";
@@ -18,9 +19,14 @@ const sectionClassName = cn(
export function RhyhornTemplate({ pageIndex, pageLayout }: TemplateProps) {
const isFirstPage = pageIndex === 0;
const { main, sidebar, fullWidth } = pageLayout;
const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
const rtlDirection = isRTL(locale);
return (
<div className="template-rhyhorn page-content space-y-4 px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
<div
className="template-rhyhorn page-content space-y-4 px-(--page-margin-x) py-(--page-margin-y) print:p-0"
style={{ direction: rtlDirection ? "rtl" : "ltr" }}
>
{isFirstPage && <Header />}
<main data-layout="main" className="group page-main space-y-4">
@@ -53,7 +59,7 @@ function Header() {
<p className="basics-headline">{basics.headline}</p>
</div>
<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-(--page-primary-color) *:border-r *:py-0.5 *:pr-2 *:last:border-r-0">
<div className="basics-items flex flex-wrap gap-x-2 gap-y-0.5 *:flex *:items-center *:gap-x-1.5 *:border-(--page-primary-color) *:border-e *:py-0.5 *:pe-2 *:last:border-e-0">
{basics.email && (
<div className="basics-item-email">
<EnvelopeIcon />
src/components/ui/alert.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import type * as React from "react";
import { cn } from "@/utils/style";
const alertVariants = cva(
"group/alert relative grid w-full gap-1 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 has-data-[slot=alert-action]:pr-18 *:[svg:not([class*='size-'])]:size-4 *:[svg]:row-span-2 *:[svg]:translate-y-1 *:[svg]:text-current",
"group/alert relative grid w-full gap-1 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 has-data-[slot=alert-action]:pe-18 *:[svg:not([class*='size-'])]:size-4 *:[svg]:row-span-2 *:[svg]:translate-y-1 *:[svg]:text-current",
{
variants: {
variant: {
@@ -49,7 +49,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<"div">)
}
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
return <div data-slot="alert-action" className={cn("absolute top-2.5 right-3", className)} {...props} />;
return <div data-slot="alert-action" className={cn("absolute end-3 top-2.5", className)} {...props} />;
}
export { Alert, AlertTitle, AlertDescription, AlertAction };
src/components/ui/avatar.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
<span
data-slot="avatar-badge"
className={cn(
"absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
"absolute end-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
src/components/ui/badge.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import type * as React from "react";
import { cn } from "@/utils/style";
const badgeVariants = cva(
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-4xl border border-transparent px-2 py-0.5 font-medium text-xs transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-4xl border border-transparent px-2 py-0.5 font-medium text-xs transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-start]:ps-1.5 has-data-[icon=inline-end]:pe-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
{
variants: {
variant: {
src/components/ui/button-group.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const buttonGroupVariants = cva(
variants: {
orientation: {
horizontal:
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
vertical:
"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!",
},
src/components/ui/combobox.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ function Combobox<TValue extends string | number = string>({
) : (
<>
{selectedLabel ?? placeholder}
<CaretUpDownIcon className="ml-2 shrink-0 opacity-50" />
<CaretUpDownIcon className="ms-2 shrink-0 opacity-50" />
</>
)}
</Button>
src/components/ui/command.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ function CommandDialog({
function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
return (
<div data-slot="command-input-wrapper" className="p-1 pb-0">
<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
<InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!">
<CommandPrimitive.Input
data-slot="command-input"
className={cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)}
src/components/ui/context-menu.tsx
+9 -9
View File
@@ -44,7 +44,7 @@ function ContextMenuContent({
<ContextMenuPrimitive.Content
data-slot="context-menu-content"
className={cn(
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
className,
)}
{...props}
@@ -68,7 +68,7 @@ function ContextMenuItem({
data-inset={inset}
data-variant={variant}
className={cn(
"group/context-menu-item relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
"group/context-menu-item relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-inset:ps-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
className,
)}
{...props}
@@ -89,7 +89,7 @@ function ContextMenuSubTrigger({
data-slot="context-menu-sub-trigger"
data-inset={inset}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-inset:pl-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-inset:ps-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
@@ -105,7 +105,7 @@ function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typ
<ContextMenuPrimitive.SubContent
data-slot="context-menu-sub-content"
className={cn(
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-closed:animate-out data-open:animate-in",
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-closed:animate-out data-open:animate-in",
className,
)}
{...props}
@@ -123,13 +123,13 @@ function ContextMenuCheckboxItem({
<ContextMenuPrimitive.CheckboxItem
data-slot="context-menu-checkbox-item"
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute right-2">
<span className="pointer-events-none absolute end-2">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon />
</ContextMenuPrimitive.ItemIndicator>
@@ -148,12 +148,12 @@ function ContextMenuRadioItem({
<ContextMenuPrimitive.RadioItem
data-slot="context-menu-radio-item"
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className,
)}
{...props}
>
<span className="pointer-events-none absolute right-2">
<span className="pointer-events-none absolute end-2">
<ContextMenuPrimitive.ItemIndicator>
<CheckIcon />
</ContextMenuPrimitive.ItemIndicator>
@@ -174,7 +174,7 @@ function ContextMenuLabel({
<ContextMenuPrimitive.Label
data-slot="context-menu-label"
data-inset={inset}
className={cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:pl-8", className)}
className={cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-8", className)}
{...props}
/>
);
src/components/ui/dropdown-menu.tsx
+7 -7
View File
@@ -79,7 +79,7 @@ function DropdownMenuItem({ className, inset, variant = "default", disabled, ...
data-inset={inset}
data-variant={variant}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-inset:pl-8 data-[variant=destructive]:text-destructive data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive!",
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-inset:ps-8 data-[variant=destructive]:text-destructive data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive!",
"data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive data-highlighted:bg-accent data-highlighted:text-accent-foreground dark:data-[variant=destructive]:data-highlighted:bg-destructive/20",
className,
)}
@@ -95,14 +95,14 @@ function DropdownMenuCheckboxItem({ className, children, checked, disabled, ...p
<DropdownMenuCheckboxItemPrimitive
disabled={disabled}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
className,
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<span className="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
<DropdownMenuItemIndicatorPrimitive initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }}>
<CheckIcon className="size-4" />
</DropdownMenuItemIndicatorPrimitive>
@@ -125,13 +125,13 @@ function DropdownMenuRadioItem({ className, children, disabled, ...props }: Drop
<DropdownMenuRadioItemPrimitive
disabled={disabled}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
className,
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<span className="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
<DropdownMenuItemIndicatorPrimitive layoutId="dropdown-menu-item-indicator-radio">
<CircleIcon className="size-2 fill-current" />
</DropdownMenuItemIndicatorPrimitive>
@@ -149,7 +149,7 @@ function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProp
return (
<DropdownMenuLabelPrimitive
data-inset={inset}
className={cn("px-2 py-1.5 font-medium text-sm data-inset:pl-8", className)}
className={cn("px-2 py-1.5 font-medium text-sm data-inset:ps-8", className)}
{...props}
/>
);
@@ -188,7 +188,7 @@ function DropdownMenuSubTrigger({ disabled, className, inset, children, ...props
disabled={disabled}
data-inset={inset}
className={cn(
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-inset:pl-8 data-[state=open]:text-accent-foreground",
"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-inset:ps-8 data-[state=open]:text-accent-foreground",
"data-[state=open]:**:data-[slot=chevron]:rotate-90 **:data-[slot=chevron]:transition-transform **:data-[slot=chevron]:duration-300 **:data-[slot=chevron]:ease-in-out",
"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
className,
src/components/ui/hover-card.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ function HoverCardContent({
align={align}
sideOffset={sideOffset}
className={cn(
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
className,
)}
{...props}
src/components/ui/input-group.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
data-slot="input-group"
role="group"
className={cn(
"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-ring has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-ring has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
className,
)}
{...props}
@@ -24,8 +24,8 @@ const inputGroupAddonVariants = cva(
{
variants: {
align: {
"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
"inline-start": "order-first ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem]",
"inline-end": "order-last pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem]",
"block-start":
"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
src/components/ui/multiple-combobox.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ function MultipleCombobox<TValue extends string | number = string>({
) : (
<>
<span className="truncate">{selectionCount > 0 ? `${selectionCount} selected` : placeholder}</span>
<CaretUpDownIcon aria-hidden className="ml-2 shrink-0 opacity-50" />
<CaretUpDownIcon aria-hidden className="ms-2 shrink-0 opacity-50" />
</>
);
src/components/ui/popover.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ function PopoverContent({
align={align}
sideOffset={sideOffset}
className={cn(
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 flex min-w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
"data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 flex min-w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in",
className,
)}
{...props}
src/components/ui/resizable.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ function ResizableSeparator({
<ResizablePrimitive.Separator
data-slot="resizable-handle"
className={cn(
"relative flex w-px items-center justify-center bg-transparent transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[separator='active']:bg-sky-700 data-[separator='hover']:bg-sky-700 data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
"relative flex w-px items-center justify-center bg-transparent transition-colors after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[separator='active']:bg-sky-700 data-[separator='hover']:bg-sky-700 data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
className,
)}
{...props}
src/components/ui/sheet.tsx
+2 -2
View File
@@ -50,7 +50,7 @@ function SheetContent({
data-slot="sheet-content"
data-side={side}
className={cn(
"data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-closed:animate-out data-open:animate-in data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
"data-[side=right]:data-closed:slide-out-to-end-10 data-[side=right]:data-open:slide-in-from-end-10 data-[side=left]:data-closed:slide-out-to-start-10 data-[side=left]:data-open:slide-in-from-start-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=left]:start-0 data-[side=right]:end-0 data-[side=top]:top-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-closed:animate-out data-open:animate-in data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
className,
)}
{...props}
@@ -58,7 +58,7 @@ function SheetContent({
{children}
{showCloseButton && (
<SheetPrimitive.Close data-slot="sheet-close" asChild>
<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm">
<Button variant="ghost" className="absolute end-4 top-4" size="icon-sm">
<XIcon />
<span className="sr-only">Close</span>
</Button>
src/components/ui/sidebar.tsx
+10 -10
View File
@@ -203,8 +203,8 @@ function Sidebar({
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] ease-in-out md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
? "start-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "end-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
@@ -258,12 +258,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-in-out after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-in-out after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:start-0 group-data-[side=left]:-end-4 sm:flex",
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
"group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
"[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
className,
)}
{...props}
@@ -277,7 +277,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
data-slot="sidebar-inset"
className={cn(
"relative flex w-full flex-1 flex-col bg-background",
"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-md",
"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-md",
className,
)}
{...props}
@@ -387,7 +387,7 @@ function SidebarGroupAction({
data-slot="sidebar-group-action"
data-sidebar="group-action"
className={cn(
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
"after:absolute after:-inset-2 md:after:hidden",
"group-data-[collapsible=icon]:hidden",
className,
@@ -431,7 +431,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
}
const sidebarMenuButtonVariants = cva(
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
{
variants: {
variant: {
@@ -512,7 +512,7 @@ function SidebarMenuAction({
data-slot="sidebar-menu-action"
data-sidebar="menu-action"
className={cn(
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
"absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
"after:absolute after:-inset-2 md:after:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
@@ -533,7 +533,7 @@ function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">)
data-slot="sidebar-menu-badge"
data-sidebar="menu-badge"
className={cn(
"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
"pointer-events-none absolute end-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums",
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
src/components/ui/switch.tsx
+3 -3
View File
@@ -34,7 +34,7 @@ function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, .
{thumbIcon && (
<SwitchIconPrimitive
position="thumb"
className="-translate-1/2 absolute top-1/2 left-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
className="-translate-1/2 absolute start-1/2 top-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
>
{thumbIcon}
</SwitchIconPrimitive>
@@ -44,7 +44,7 @@ function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, .
{startIcon && (
<SwitchIconPrimitive
position="left"
className="absolute top-1/2 left-0.5 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
className="absolute start-0.5 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 [&_svg]:size-[9px]"
>
{startIcon}
</SwitchIconPrimitive>
@@ -52,7 +52,7 @@ function Switch({ className, pressedWidth = 20, startIcon, endIcon, thumbIcon, .
{endIcon && (
<SwitchIconPrimitive
position="right"
className="absolute top-1/2 right-0.5 -translate-y-1/2 text-neutral-500 dark:text-neutral-400 [&_svg]:size-[9px]"
className="absolute end-0.5 top-1/2 -translate-y-1/2 text-neutral-500 dark:text-neutral-400 [&_svg]:size-[9px]"
>
{endIcon}
</SwitchIconPrimitive>
src/components/ui/tabs.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-full border border-transparent px-3 py-1 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
className,
)}
{...props}
src/components/ui/tooltip.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ function TooltipContent({
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in",
"data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in",
className,
)}
{...props}
src/dialogs/auth/enable-two-factor.tsx
+2 -2
View File
@@ -283,11 +283,11 @@ export function EnableTwoFactorDialog(_: DialogProps<"auth.two-factor.enable">)
<div className="flex items-center gap-x-2">
<Button type="button" variant="outline" onClick={handleDownloadBackupCodes} className="flex-1">
<ArrowDownIcon className="mr-2 size-4" />
<ArrowDownIcon className="me-2 size-4" />
<Trans>Download</Trans>
</Button>
<Button type="button" variant="ghost" onClick={handleCopyBackupCodes} className="flex-1">
<CopyIcon className="mr-2 size-4" />
<CopyIcon className="me-2 size-4" />
<Trans>Copy</Trans>
</Button>
</div>
src/dialogs/resume/index.tsx
+2 -2
View File
@@ -116,7 +116,7 @@ export function CreateResumeDialog(_: DialogProps<"resume.create">) {
<ResumeForm />
<DialogFooter>
<ButtonGroup aria-label="Create Resume with Options" className="gap-x-px">
<ButtonGroup aria-label="Create Resume with Options" className="gap-x-px rtl:flex-row-reverse">
<Button type="submit" disabled={isPending}>
<Trans>Create</Trans>
</Button>
@@ -331,7 +331,7 @@ function ResumeForm() {
<InputGroupAddon align="inline-start" className="hidden sm:flex">
<InputGroupText>{slugPrefix}</InputGroupText>
</InputGroupAddon>
<InputGroupInput min={1} max={64} className="pl-0!" {...field} />
<InputGroupInput min={1} max={64} className="ps-0!" {...field} />
</InputGroup>
</FormControl>
<FormMessage />
src/dialogs/resume/sections/interest.tsx
+1 -1
View File
@@ -153,7 +153,7 @@ function InterestForm() {
render={({ field }) => (
<FormItem className="shrink-0">
<FormControl>
<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-r-0!" />
<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-e-0!" />
</FormControl>
</FormItem>
)}
src/dialogs/resume/sections/profile.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ function ProfileForm() {
render={({ field }) => (
<FormItem className="shrink-0">
<FormControl>
<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-r-0!" />
<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-e-0!" />
</FormControl>
</FormItem>
)}
src/dialogs/resume/sections/skill.tsx
+1 -1
View File
@@ -159,7 +159,7 @@ function SkillForm() {
render={({ field }) => (
<FormItem className="shrink-0">
<FormControl>
<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-r-0!" />
<IconPicker {...field} popoverProps={{ modal: true }} className="rounded-r-none! border-e-0!" />
</FormControl>
</FormItem>
)}
src/routes/$username/$slug.tsx
+1 -1
View File
@@ -79,7 +79,7 @@ function RouteComponent() {
size="lg"
variant="secondary"
disabled={isPrinting}
className="fixed right-4 bottom-4 z-50 hidden rounded-full px-4 md:inline-flex print:hidden"
className="fixed end-4 bottom-4 z-50 hidden rounded-full px-4 md:inline-flex print:hidden"
onClick={handleDownload}
>
{isPrinting ? <Spinner /> : <DownloadSimpleIcon />}
src/routes/_home/-sections/donate.tsx
+4 -4
View File
@@ -131,8 +131,8 @@ export const DonationBanner = () => (
<FloatingIcon icon={HeartIcon} className="bottom-[20%] left-[20%]" delay={2.5} />
{/* Gradient Orbs */}
<div className="absolute top-1/4 -left-32 size-64 rounded-full bg-primary/5 blur-3xl" />
<div className="absolute -right-32 bottom-1/4 size-64 rounded-full bg-rose-500/5 blur-3xl" />
<div className="absolute -start-32 top-1/4 size-64 rounded-full bg-primary/5 blur-3xl" />
<div className="absolute -end-32 bottom-1/4 size-64 rounded-full bg-rose-500/5 blur-3xl" />
</div>
<div className="container relative px-8">
@@ -146,8 +146,8 @@ export const DonationBanner = () => (
>
<div aria-hidden="true" className="relative mb-6">
<PulsingHeart />
<SparkleEffect className="-top-2 -right-4" />
<SparkleEffect className="bottom-0 -left-3" />
<SparkleEffect className="-end-4 -top-2" />
<SparkleEffect className="-start-3 bottom-0" />
</div>
<motion.h2
src/routes/_home/-sections/faq.tsx
+3 -3
View File
@@ -66,11 +66,11 @@ export function FAQ() {
return (
<section
id="frequently-asked-questions"
className="flex flex-col gap-x-16 gap-y-6 p-4 md:p-8 lg:flex-row lg:gap-x-24 xl:py-16"
className="flex flex-col gap-x-16 gap-y-6 p-4 md:p-8 lg:flex-row lg:gap-x-18 xl:py-16"
>
<motion.h2
className={cn(
"font-semibold text-2xl tracking-tight md:text-4xl xl:text-5xl",
"flex-1 font-semibold text-2xl tracking-tight md:text-4xl xl:text-5xl",
"flex shrink-0 flex-wrap items-center gap-x-1.5 lg:flex-col lg:items-start",
)}
initial={{ opacity: 0, x: -20 }}
@@ -86,7 +86,7 @@ export function FAQ() {
</motion.h2>
<motion.div
className="max-w-2xl flex-1 lg:ml-auto 2xl:max-w-3xl"
className="max-w-2xl flex-2 lg:ml-auto 2xl:max-w-3xl"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}

Some files were not shown because too many files have changed in this diff Show More