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

feat(Badge): handle icon and avatar props (#2497)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Malik-Jouda
2024-11-05 20:34:40 +02:00
committed by GitHub
parent a97c511279
commit 2d52834529
9 changed files with 338 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/content/3.components/badge.md
View File

@@ -68,6 +68,54 @@ slots:
---
::
### Icon
Use the `icon` prop to show an [Icon](/components/icon) inside the Badge.
::component-code
---
props:
icon: i-heroicons-rocket-launch
size: md
color: primary
variant: solid
slots:
default: Badge
---
::
Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
::component-code
---
props:
trailingIcon: i-heroicons-arrow-right
size: md
slots:
default: Badge
---
::
### Avatar
Use the `avatar` prop to show an [Avatar](/components/avatar) inside the Badge.
::component-code
---
prettier: true
props:
avatar:
src: 'https://github.com/nuxt.png'
size: md
color: neutral
variant: outline
slots:
default: |
Badge
---
::
## Examples
### `class` prop

27
playground/app/pages/components/badge.vue
View File

@@ -14,13 +14,36 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
</UBadge>
</div>
<div class="flex items-center gap-2">
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" />
<UBadge v-for="variant in variants" :key="variant" icon="i-heroicons-rocket-launch" :label="upperFirst(variant)" :variant="variant" />
</div>
<div class="flex items-center gap-2">
<UBadge v-for="variant in variants" :key="variant" :label="upperFirst(variant)" :variant="variant" color="neutral" />
<UBadge
v-for="variant in variants"
:key="variant"
icon="i-heroicons-rocket-launch"
:label="upperFirst(variant)"
:variant="variant"
color="neutral"
/>
</div>
<div class="flex items-center gap-2">
<UBadge
v-for="variant in variants"
:key="variant"
:avatar="{ src: 'https://github.com/benjamincanac.png' }"
:label="upperFirst(variant)"
:variant="variant"
color="neutral"
/>
</div>
<div class="flex items-center gap-2 ms-[-56px]">
<UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
</div>
<div class="flex items-center gap-2 ms-[-86px]">
<UBadge v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Badge" :size="size" />
</div>
<div class="flex items-center gap-2 ms-[-86px]">
<UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />
</div>
</div>
</template>

33
src/runtime/components/Badge.vue
View File

@@ -3,6 +3,8 @@ import { tv, type VariantProps } from 'tailwind-variants'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/badge'
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
import type { AvatarProps } from '../types'
const appConfig = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
@@ -10,7 +12,7 @@ const badge = tv({ extend: tv(theme), ...(appConfig.ui?.badge || {}) })
type BadgeVariants = VariantProps<typeof badge>
export interface BadgeProps {
export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
/**
* The element or component this component should render as.
* @defaultValue 'span'
@@ -21,26 +23,51 @@ export interface BadgeProps {
variant?: BadgeVariants['variant']
size?: BadgeVariants['size']
class?: any
ui?: Partial<typeof badge.slots>
}
export interface BadgeSlots {
leading(props?: {}): any
default(props?: {}): any
trailing(props?: {}): any
}
</script>
<script setup lang="ts">
import { computed } from 'vue'
import { Primitive } from 'radix-vue'
import { useComponentIcons } from '../composables/useComponentIcons'
import UIcon from './Icon.vue'
const props = withDefaults(defineProps<BadgeProps>(), {
as: 'span'
})
defineSlots<BadgeSlots>()
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const ui = computed(() => badge({
color: props.color,
variant: props.variant,
size: props.size
}))
</script>
<template>
<Primitive :as="as" :class="badge({ color, variant, size, class: props.class })">
<Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
<slot name="leading">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
<slot>
{{ label }}
<span v-if="label" :class="ui.label({ class: props.ui?.label })">
{{ label }}
</span>
</slot>
<slot name="trailing">
<UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
</Primitive>
</template>

30
src/theme/badge.ts
View File

@@ -1,7 +1,14 @@
import type { ModuleOptions } from '../module'
export default (options: Required<ModuleOptions>) => ({
base: 'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center',
slots: {
base: 'rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center',
label: 'truncate',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailingIcon: 'shrink-0'
},
variants: {
color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
@@ -14,9 +21,24 @@ export default (options: Required<ModuleOptions>) => ({
subtle: ''
},
size: {
sm: 'text-xs px-1.5 py-0.5',
md: 'text-xs px-2 py-1',
lg: 'text-sm px-2 py-1'
sm: {
base: 'text-xs px-1.5 py-0.5 gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'text-xs px-2 py-1 gap-1',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
lg: {
base: 'text-sm px-2 py-1 gap-1.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
}
}
},
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({

12
test/components/Badge.spec.ts
View File

@@ -15,8 +15,18 @@ describe('Badge', () => {
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Badge', size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Badge', variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { label: 'Badge', variant, color: 'neutral' } }]),
['with icon', { props: { icon: 'i-heroicons-rocket-launch' } }],
['with leading and icon', { props: { leading: true, icon: 'i-heroicons-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-heroicons-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-heroicons-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-heroicons-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-heroicons-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-heroicons-arrow-right' } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }]
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: BadgeProps, slots?: Partial<BadgeSlots> }) => {
const html = await ComponentRender(nameOrHtml, options, Badge)
expect(html).toMatchSnapshot()

101
test/components/__snapshots__/Badge-vue.spec.ts.snap
View File

@@ -1,31 +1,102 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Badge > renders with as correctly 1`] = `"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</div>"`;
exports[`Badge > renders with as correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if--><span class="truncate">Badge</span>
<!--v-if-->
</div>"
`;
exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)] rounded-full font-bold">Badge</span>"`;
exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Default slot</span>"`;
exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span>
<!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"
`;
exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with avatar correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span>
<!--v-if-->
<!--v-if--></span>"
`;
exports[`Badge > renders with neutral variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with class correctly 1`] = `
"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)] rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with neutral variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]">Badge</span>"`;
exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if-->Default slot<!--v-if--></span>"`;
exports[`Badge > renders with neutral variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">Badge</span>"`;
exports[`Badge > renders with icon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
exports[`Badge > renders with neutral variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]">Badge</span>"`;
exports[`Badge > renders with label correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50">Badge</span>"`;
exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
exports[`Badge > renders with primary variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">Badge</span>"`;
exports[`Badge > renders with leading slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Leading slot<!--v-if--><!--v-if--></span>"`;
exports[`Badge > renders with primary variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
exports[`Badge > renders with primary variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">Badge</span>"`;
exports[`Badge > renders with neutral variant outline correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size lg correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-sm px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant soft correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size md correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant solid correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size sm correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-1.5 py-0.5 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant subtle correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant outline correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant soft correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant solid correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant subtle correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size lg correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size md correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size sm correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-1.5 py-0.5 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if-->Trailing slot</span>"`;
exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;

117
test/components/__snapshots__/Badge.spec.ts.snap
View File

@@ -1,31 +1,118 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Badge > renders with as correctly 1`] = `"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</div>"`;
exports[`Badge > renders with as correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if--><span class="truncate">Badge</span>
<!--v-if-->
</div>"
`;
exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)] rounded-full font-bold">Badge</span>"`;
exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-heroicons:arrow-left shrink-0 size-4" aria-hidden="true"></span>
<!--v-if-->
<!--v-if--></span>"
`;
exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Default slot</span>"`;
exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span>
<!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"
`;
exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with avatar correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"></span></span>
<!--v-if-->
<!--v-if--></span>"
`;
exports[`Badge > renders with neutral variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with class correctly 1`] = `
"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)] rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with neutral variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]">Badge</span>"`;
exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if-->Default slot<!--v-if--></span>"`;
exports[`Badge > renders with neutral variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">Badge</span>"`;
exports[`Badge > renders with icon correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-heroicons:rocket-launch shrink-0 size-4" aria-hidden="true"></span>
<!--v-if-->
<!--v-if--></span>"
`;
exports[`Badge > renders with neutral variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]">Badge</span>"`;
exports[`Badge > renders with label correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant outline correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50">Badge</span>"`;
exports[`Badge > renders with leading and icon correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-heroicons:arrow-left shrink-0 size-4" aria-hidden="true"></span>
<!--v-if-->
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant soft correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">Badge</span>"`;
exports[`Badge > renders with leading slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Leading slot<!--v-if--><!--v-if--></span>"`;
exports[`Badge > renders with primary variant solid correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with leadingIcon correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-heroicons:arrow-left shrink-0 size-4" aria-hidden="true"></span>
<!--v-if-->
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant subtle correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">Badge</span>"`;
exports[`Badge > renders with neutral variant outline correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size lg correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-sm px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant soft correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size md correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant solid correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size sm correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-1.5 py-0.5 bg-[var(--ui-primary)] text-[var(--ui-bg)]">Badge</span>"`;
exports[`Badge > renders with neutral variant subtle correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg-elevated)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant outline correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/50"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant soft correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant solid correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with primary variant subtle correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size lg correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size md correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with size sm correctly 1`] = `
"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-1.5 py-0.5 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><span class="truncate">Badge</span>
<!--v-if--></span>"
`;
exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if-->Trailing slot</span>"`;
exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)] text-[var(--ui-bg)]"><!--v-if--><!--v-if--><span class="iconify i-heroicons:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;

10
test/components/__snapshots__/Table-vue.spec.ts.snap
View File

@@ -147,7 +147,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">success</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">ken99@yahoo.com</div>
</td>
@@ -179,7 +179,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">success</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">Abe45@gmail.com</div>
</td>
@@ -211,7 +211,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">processing</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">Monserrat44@gmail.com</div>
</td>
@@ -243,7 +243,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">success</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">Silas22@gmail.com</div>
</td>
@@ -275,7 +275,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-error)]/10 text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/25 capitalize">failed</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-error)]/10 text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">carmella@hotmail.com</div>
</td>

10
test/components/__snapshots__/Table.spec.ts.snap
View File

@@ -147,7 +147,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">success</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">ken99@yahoo.com</div>
</td>
@@ -179,7 +179,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">success</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">Abe45@gmail.com</div>
</td>
@@ -211,7 +211,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">processing</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">Monserrat44@gmail.com</div>
</td>
@@ -243,7 +243,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize">success</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">Silas22@gmail.com</div>
</td>
@@ -275,7 +275,7 @@ exports[`Table > renders with columns correctly 1`] = `
</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 bg-[var(--ui-error)]/10 text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/25 capitalize">failed</span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center text-xs px-2 py-1 gap-1 bg-[var(--ui-error)]/10 text-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="lowercase">carmella@hotmail.com</div>
</td>