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

feat(CheckboxGroup): new component (#3862)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
This commit is contained in:
TribeWeb
2025-04-22 17:03:27 +01:00
committed by GitHub
parent 22edfd708a
commit 9c3d53a02d
29 changed files with 4087 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/theme/checkbox.ts
View File

@@ -3,17 +3,46 @@ 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-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2',
container: 'flex items-center',
wrapper: 'ms-2',
base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
indicator: 'flex items-center justify-center size-full text-inverted',
icon: 'shrink-0 size-full',
wrapper: 'w-full',
label: 'block font-medium text-default',
description: 'text-muted'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `focus-visible:outline-${color}`])),
neutral: 'focus-visible:outline-inverted'
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
base: `focus-visible:outline-${color}`,
indicator: `bg-${color}`
}])),
neutral: {
base: 'focus-visible:outline-inverted',
indicator: 'bg-inverted'
}
},
variant: {
list: {
root: ''
},
card: {
root: 'border border-muted rounded-lg'
}
},
indicator: {
start: {
root: 'flex-row',
wrapper: 'ms-2'
},
end: {
root: 'flex-row-reverse',
wrapper: 'me-2'
},
hidden: {
base: 'sr-only',
wrapper: 'text-center'
}
},
size: {
xs: {
@@ -58,17 +87,38 @@ export default (options: Required<ModuleOptions>) => ({
true: ''
}
},
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
color,
checked: true,
class: `ring-2 ring-${color} bg-${color}`
})), {
color: 'neutral',
checked: true,
class: 'ring-2 ring-inverted bg-inverted'
}],
compoundVariants: [
{ size: 'xs', variant: 'card', class: { root: 'p-2.5' } },
{ size: 'sm', variant: 'card', class: { root: 'p-3' } },
{ size: 'md', variant: 'card', class: { root: 'p-3.5' } },
{ size: 'lg', variant: 'card', class: { root: 'p-4' } },
{ size: 'xl', variant: 'card', class: { root: 'p-4.5' } },
...(options.theme.colors || []).map((color: string) => ({
color,
variant: 'card',
class: {
root: `has-data-[state=checked]:border-${color}`
}
})),
{
color: 'neutral',
variant: 'card',
class: {
root: 'has-data-[state=checked]:border-inverted'
}
},
{
variant: 'card',
disabled: true,
class: {
root: 'cursor-not-allowed opacity-75'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary'
color: 'primary',
variant: 'list',
indicator: 'start'
}
})