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

feat(module)!: migrate to reka-ui (#2448)

Browse Source
This commit is contained in:
Benjamin Canac
2024-12-03 16:11:32 +01:00
committed by GitHub
parent c440c91a29
commit 81ac076219
229 changed files with 13487 additions and 13466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/button.ts
View File

@@ -3,7 +3,7 @@ import { buttonGroupVariant } from './button-group'
export default (options: Required<ModuleOptions>) => ({
slots: {
base: ['rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme.transitions && 'transition-colors'],
base: ['rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme.transitions && 'transition-colors'],
label: 'truncate',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',

2
src/theme/checkbox.ts
View File

@@ -3,7 +3,7 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative flex items-start',
base: 'shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
base: 'shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2',
container: 'flex items-center',
wrapper: 'ms-2',
icon: 'shrink-0 size-full',

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

@@ -5,8 +5,8 @@ export default (options: Required<ModuleOptions>) => ({
root: 'flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]',
input: '[&>input]:h-12',
close: '',
content: 'relative overflow-hidden',
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
content: 'relative overflow-hidden flex flex-col',
viewport: 'relative divide-y divide-[var(--ui-border)] scroll-py-1 overflow-y-auto flex-1 focus:outline-none',
group: 'p-1 isolate',
empty: 'py-6 text-center text-sm text-[var(--ui-text-muted)]',
label: 'px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]',

2
src/theme/context-menu.ts
View File

@@ -2,7 +2,7 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
content: 'min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out]',
content: 'min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
group: 'p-1 isolate',
label: 'w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]',
separator: '-mx-1 my-1 h-px bg-[var(--ui-border)]',

7
src/theme/input-menu.ts
View File

@@ -8,7 +8,7 @@ export default (options: Required<ModuleOptions>) => {
base: () => ['rounded-[calc(var(--ui-radius)*1.5)]', options.theme.transitions && 'transition-colors'],
trailing: 'group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
arrow: 'fill-[var(--ui-border)]',
content: 'max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
content: 'max-h-60 w-[var(--reka-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
group: 'p-1 isolate',
empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',
@@ -33,7 +33,6 @@ export default (options: Required<ModuleOptions>) => {
multiple: {
true: {
root: 'flex-wrap',
base: '',
tagsInput: 'border-0 bg-transparent placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
},
false: {
@@ -102,12 +101,12 @@ export default (options: Required<ModuleOptions>) => {
color,
multiple: true,
variant: ['outline', 'subtle'],
class: `has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--${color})]`
class: `has-focus-visible:ring-2 has-focus-visible:ring-[var(--ui-${color})]`
})), {
color: 'neutral',
multiple: true,
variant: ['outline', 'subtle'],
class: 'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--ui-border-inverted)]'
class: 'has-focus-visible:ring-2 has-focus-visible:ring-[var(--ui-border-inverted)]'
}]
}, input(options))
}

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

@@ -25,7 +25,7 @@ export default (options: Required<ModuleOptions>) => ({
childLinkDescription: 'text-sm text-[var(--ui-text-muted)]',
separator: 'px-2 h-px bg-[var(--ui-border)]',
viewportWrapper: 'absolute top-full left-0 flex w-full justify-center',
viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full transition-[width,height] origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--reka-navigation-menu-viewport-height)] w-full transition-[width,height] origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
content: 'absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]',
indicator: 'data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
arrow: 'relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]'

2
src/theme/radio-group.ts
View File

@@ -6,7 +6,7 @@ export default (options: Required<ModuleOptions>) => ({
fieldset: 'flex',
legend: 'mb-1 block font-medium text-[var(--ui-text)]',
item: 'flex items-start',
base: 'rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-[var(--ui-bg)]',
base: 'rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2',
indicator: 'flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full',
container: 'flex items-center',
wrapper: 'ms-2',

2
src/theme/select-menu.ts
View File

@@ -5,8 +5,6 @@ import select from './select'
export default (options: Required<ModuleOptions>) => {
return defu({
slots: {
value: 'truncate',
placeholder: 'truncate text-[var(--ui-text-dimmed)]',
input: 'border-b border-[var(--ui-border)]'
}
}, select(options))

5
src/theme/select.ts
View File

@@ -8,9 +8,10 @@ export default (options: Required<ModuleOptions>) => {
slots: {
root: () => undefined,
base: () => ['relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
value: 'truncate group-data-placeholder:text-[var(--ui-text-dimmed)]',
value: 'truncate pointer-events-none',
placeholder: 'truncate text-[var(--ui-text-dimmed)]',
arrow: 'fill-[var(--ui-border)]',
content: 'max-h-60 w-[var(--radix-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
content: 'max-h-60 w-[var(--reka-popper-anchor-width)] bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
viewport: 'divide-y divide-[var(--ui-border)] scroll-py-1',
group: 'p-1 isolate',
empty: 'py-2 text-center text-sm text-[var(--ui-text-muted)]',

4
src/theme/slider.ts
View File

@@ -5,13 +5,13 @@ export default (options: Required<ModuleOptions>) => ({
root: 'relative flex items-center select-none touch-none',
track: 'relative bg-[var(--ui-bg-accented)] overflow-hidden rounded-full grow',
range: 'absolute rounded-full',
thumb: 'rounded-full bg-[var(--ui-bg)] ring-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2'
thumb: 'rounded-full bg-[var(--ui-bg)] ring-2 focus-visible:outline-2 focus-visible:outline-offset-2'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
range: `bg-[var(--ui-${color})]`,
thumb: `ring-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]`
thumb: `ring-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]/50`
}])),
neutral: {
range: 'bg-[var(--ui-bg-inverted)]',

8
src/theme/switch.ts
View File

@@ -3,9 +3,9 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
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'],
base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 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 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center',
thumb: 'group pointer-events-none 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)]',
@@ -14,11 +14,11 @@ export default (options: Required<ModuleOptions>) => ({
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
base: `data-[state=checked]:bg-[var(--ui-${color})] focus-visible:ring-[var(--ui-${color})]`,
base: `data-[state=checked]:bg-[var(--ui-${color})] focus-visible:outline-[var(--ui-${color})]`,
icon: `group-data-[state=checked]:text-[var(--ui-${color})]`
}])),
neutral: {
base: 'data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:ring-[var(--ui-border-inverted)]',
base: 'data-[state=checked]:bg-[var(--ui-bg-inverted)] focus-visible:outline-[var(--ui-border-inverted)]',
icon: 'group-data-[state=checked]:text-[var(--ui-text-highlighted)]'
}
},

6
src/theme/tabs.ts
View File

@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
root: 'flex items-center gap-2',
list: 'relative flex p-1 group',
indicator: 'absolute transition-[translate,width] duration-200',
trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.theme.transitions && 'transition-colors'],
trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-[var(--ui-text-muted)] hover:data-[state=inactive]:text-[var(--ui-text)] font-medium rounded-[calc(var(--ui-radius)*1.5)] disabled:cursor-not-allowed disabled:opacity-75 focus:outline-hidden', options.theme.transitions && 'transition-colors'],
content: 'focus:outline-none w-full',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
@@ -32,12 +32,12 @@ export default (options: Required<ModuleOptions>) => ({
horizontal: {
root: 'flex-col',
list: 'w-full',
indicator: 'left-0 w-[var(--radix-tabs-indicator-size)] translate-x-[var(--radix-tabs-indicator-position)]',
indicator: 'left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]',
trigger: 'justify-center'
},
vertical: {
list: 'flex-col',
indicator: 'top-0 h-[var(--radix-tabs-indicator-size)] translate-y-[var(--radix-tabs-indicator-position)]'
indicator: 'top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]'
}
},
size: {

4
src/theme/toaster.ts
View File

@@ -45,10 +45,10 @@ export default {
}
}, {
swipeDirection: ['left', 'right'],
class: 'data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0'
class: 'data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0'
}, {
swipeDirection: ['up', 'down'],
class: 'data-[swipe=move]:translate-y-[var(--radix-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--radix-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0'
class: 'data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0'
}],
defaultVariants: {
position: 'bottom-right'