arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): improve RTL support (#2433)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Malik-Jouda
2024-10-28 22:37:01 +02:00
committed by GitHub
parent e82a82d812
commit 94c49186e1
50 changed files with 2375 additions and 2375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/accordion.ts
View File

@@ -8,7 +8,7 @@ export default {
body: 'text-sm pb-3.5',
leadingIcon: 'shrink-0 size-5',
trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
label: 'text-left break-words'
label: 'text-start break-words'
},
variants: {
disabled: {

8
src/theme/carousel.ts
View File

@@ -22,10 +22,10 @@ export default (options: Required<ModuleOptions>) => ({
next: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90'
},
horizontal: {
container: 'flex-row -ml-4',
item: 'pl-4',
prev: '-left-12 top-1/2 -translate-y-1/2',
next: '-right-12 top-1/2 -translate-y-1/2'
container: 'flex-row -ms-4',
item: 'ps-4',
prev: '-start-12 top-1/2 -translate-y-1/2',
next: '-end-12 top-1/2 -translate-y-1/2'
}
},
active: {

2
src/theme/command-palette.ts
View File

@@ -21,7 +21,7 @@ export default (options: Required<ModuleOptions>) => ({
itemTrailingHighlightedIcon: 'shrink-0 size-5 text-[var(--ui-text-dimmed)] hidden group-data-highlighted:inline-flex',
itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
itemTrailingKbdsSize: 'md',
itemLabel: 'truncate space-x-1',
itemLabel: 'truncate space-x-1 rtl:space-x-reverse',
itemLabelBase: 'text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]',
itemLabelPrefix: 'text-[var(--ui-text)]',
itemLabelSuffix: 'text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]'

42
src/theme/input.ts
View File

@@ -17,40 +17,40 @@ export default (options: Required<ModuleOptions>) => ({
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'pl-2',
trailing: 'pr-2',
leading: 'ps-2',
trailing: 'pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leading: 'ps-2.5',
trailing: 'pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'pl-3',
trailing: 'pr-3',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'pl-3',
trailing: 'pr-3',
leading: 'ps-3',
trailing: 'pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
@@ -80,7 +80,7 @@ export default (options: Required<ModuleOptions>) => ({
true: ''
},
type: {
file: 'file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
file: 'file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
}
},
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -102,43 +102,43 @@ export default (options: Required<ModuleOptions>) => ({
}, {
leading: true,
size: 'xs',
class: 'pl-7'
class: 'ps-7'
}, {
leading: true,
size: 'sm',
class: 'pl-8'
class: 'ps-8'
}, {
leading: true,
size: 'md',
class: 'pl-9'
class: 'ps-9'
}, {
leading: true,
size: 'lg',
class: 'pl-10'
class: 'ps-10'
}, {
leading: true,
size: 'xl',
class: 'pl-11'
class: 'ps-11'
}, {
trailing: true,
size: 'xs',
class: 'pr-7'
class: 'pe-7'
}, {
trailing: true,
size: 'sm',
class: 'pr-8'
class: 'pe-8'
}, {
trailing: true,
size: 'md',
class: 'pr-9'
class: 'pe-9'
}, {
trailing: true,
size: 'lg',
class: 'pr-10'
class: 'pe-10'
}, {
trailing: true,
size: 'xl',
class: 'pr-11'
class: 'pe-11'
}, {
loading: true,
leading: true,

2
src/theme/modal.ts
View File

@@ -7,7 +7,7 @@ export default {
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
title: 'text-[var(--ui-text-highlighted)] font-semibold',
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
close: 'absolute top-4 right-4'
close: 'absolute top-4 end-4'
},
variants: {
transition: {

10
src/theme/navigation-menu.ts
View File

@@ -17,7 +17,7 @@ export default (options: Required<ModuleOptions>) => ({
linkLabelExternalIcon: 'inline-block size-3 align-top text-[var(--ui-text-dimmed)]',
childList: '',
childItem: '',
childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-left',
childLink: 'group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start',
childLinkWrapper: 'flex flex-col items-start',
childLinkIcon: 'size-5 shrink-0',
childLinkLabel: 'font-semibold text-sm relative inline-flex',
@@ -61,8 +61,8 @@ export default (options: Required<ModuleOptions>) => ({
vertical: {
root: 'flex-col',
link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
childList: 'ml-5 border-l border-[var(--ui-border)]',
childItem: 'pl-1.5 -ml-px'
childList: 'ms-5 border-s border-[var(--ui-border)]',
childItem: 'ps-1.5 -ms-px'
}
},
active: {
@@ -97,8 +97,8 @@ export default (options: Required<ModuleOptions>) => ({
highlight: true,
orientation: 'vertical',
class: {
item: 'px-1.5 -ml-px',
link: 'after:absolute after:-left-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
item: 'px-1.5 -ms-px',
link: 'after:absolute after:-start-1.5 after:inset-y-0.5 after:block after:w-px after:rounded-full'
}
}, {
disabled: false,

2
src/theme/slideover.ts
View File

@@ -7,7 +7,7 @@ export default {
footer: 'flex items-center gap-1.5 p-4 sm:px-6',
title: 'text-[var(--ui-text-highlighted)] font-semibold',
description: 'mt-1 text-[var(--ui-text-muted)] text-sm',
close: 'absolute top-4 right-4'
close: 'absolute top-4 end-4'
},
variants: {
side: {

12
src/theme/switch.ts
View File

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
root: 'relative flex items-start',
base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]', options.theme.transitions && 'transition-colors duration-200'],
container: 'flex items-center',
thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center',
icon: ['absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
wrapper: 'ms-2',
label: 'block font-medium text-[var(--ui-text)]',
@@ -26,31 +26,31 @@ export default (options: Required<ModuleOptions>) => ({
xs: {
base: 'w-7',
container: 'h-4',
thumb: 'size-3 data-[state=checked]:translate-x-3',
thumb: 'size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
wrapper: 'text-xs'
},
sm: {
base: 'w-8',
container: 'h-4',
thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
wrapper: 'text-xs'
},
md: {
base: 'w-9',
container: 'h-5',
thumb: 'size-4 data-[state=checked]:translate-x-4',
thumb: 'size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
wrapper: 'text-sm'
},
lg: {
base: 'w-10',
container: 'h-5',
thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5',
wrapper: 'text-sm'
},
xl: {
base: 'w-11',
container: 'h-6',
thumb: 'size-5 data-[state=checked]:translate-x-5',
thumb: 'size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5',
wrapper: 'text-base'
}
},

4
src/theme/table.ts
View File

@@ -7,8 +7,8 @@ export default (options: Required<ModuleOptions>) => ({
thead: 'relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]',
tbody: 'divide-y divide-[var(--ui-border)]',
tr: 'data-[selected=true]:bg-[var(--ui-bg-elevated)]/50',
th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pr-0',
td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pr-0',
th: 'px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0',
td: 'p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0',
empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]'
},
variants: {

4
src/theme/tabs.ts
View File

@@ -92,8 +92,8 @@ export default (options: Required<ModuleOptions>) => ({
orientation: 'vertical',
variant: 'link',
class: {
list: 'border-l -ml-px',
indicator: '-left-px w-px'
list: 'border-s -ms-px',
indicator: '-start-px w-px'
}
}, ...(options.theme.colors || []).map((color: string) => ({
color,

2
src/theme/tooltip.ts
View File

@@ -3,7 +3,7 @@ export default {
content: 'flex items-center gap-1 bg-[var(--ui-bg)] text-[var(--ui-text-highlighted)] shadow rounded-[var(--ui-radius)] ring ring-[var(--ui-border)] h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
arrow: 'fill-[var(--ui-border)]',
text: 'truncate',
kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`,
kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5`,
kbdsSize: 'sm'
}
}