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

feat(Alert/Toast)!: add orientation prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-02-05 13:36:46 +01:00
parent cd0a9d39d8
commit 2c192ac145
15 changed files with 659 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/theme/alert.ts
View File

@@ -3,14 +3,14 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5',
wrapper: 'min-w-0 flex-1 flex flex-col gap-1',
wrapper: 'min-w-0 flex-1 flex flex-col',
title: 'text-sm font-medium',
description: 'text-sm opacity-90',
icon: 'shrink-0 size-5',
avatar: 'shrink-0',
avatarSize: '2xl',
actions: 'flex flex-wrap gap-1.5 shrink-0',
close: 'p-0.5'
close: 'p-0'
},
variants: {
color: {
@@ -23,14 +23,19 @@ export default (options: Required<ModuleOptions>) => ({
soft: '',
subtle: ''
},
multiline: {
true: {
root: 'items-start',
actions: 'items-start mt-1'
},
false: {
orientation: {
horizontal: {
root: 'items-center',
actions: 'items-center'
},
vertical: {
root: 'items-start',
actions: 'items-start mt-2.5'
}
},
title: {
true: {
description: 'mt-1'
}
}
},

21
src/theme/toast.ts
View File

@@ -3,7 +3,7 @@ import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
slots: {
root: 'relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none',
wrapper: 'w-0 flex-1 flex flex-col gap-1',
wrapper: 'w-0 flex-1 flex flex-col',
title: 'text-sm font-medium text-[var(--ui-text-highlighted)]',
description: 'text-sm text-[var(--ui-text-muted)]',
icon: 'shrink-0 size-5',
@@ -11,7 +11,7 @@ export default (options: Required<ModuleOptions>) => ({
avatarSize: '2xl',
actions: 'flex gap-1.5 shrink-0',
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
close: 'p-0.5'
close: 'p-0'
},
variants: {
color: {
@@ -26,14 +26,19 @@ export default (options: Required<ModuleOptions>) => ({
progress: 'bg-[var(--ui-bg-inverted)]'
}
},
multiline: {
true: {
root: 'items-start',
actions: 'items-start mt-1'
},
false: {
orientation: {
horizontal: {
root: 'items-center',
actions: 'items-center'
},
vertical: {
root: 'items-start',
actions: 'items-start mt-2.5'
}
},
title: {
true: {
description: 'mt-1'
}
}
},