195 lines
3.6 KiB
Plaintext
195 lines
3.6 KiB
Plaintext
import {
|
|
colorVariants
|
|
} from "./chunk-GQT3YUX3.mjs";
|
|
import {
|
|
tv
|
|
} from "./chunk-UWE6H66T.mjs";
|
|
import {
|
|
dataFocusVisibleClasses,
|
|
translateCenterClasses
|
|
} from "./chunk-GH5E4FQB.mjs";
|
|
|
|
// src/components/avatar.ts
|
|
var avatar = tv({
|
|
slots: {
|
|
base: [
|
|
"flex",
|
|
"relative",
|
|
"justify-center",
|
|
"items-center",
|
|
"box-border",
|
|
"overflow-hidden",
|
|
"align-middle",
|
|
"text-white",
|
|
"z-0",
|
|
...dataFocusVisibleClasses
|
|
],
|
|
img: [
|
|
"flex",
|
|
"object-cover",
|
|
"w-full",
|
|
"h-full",
|
|
"transition-opacity",
|
|
"!duration-500",
|
|
"opacity-0",
|
|
"data-[loaded=true]:opacity-100"
|
|
],
|
|
fallback: [...translateCenterClasses, "flex", "items-center", "justify-center"],
|
|
name: [...translateCenterClasses, "font-normal", "text-center", "text-inherit"],
|
|
icon: [
|
|
...translateCenterClasses,
|
|
"flex",
|
|
"items-center",
|
|
"justify-center",
|
|
"text-inherit",
|
|
"w-full",
|
|
"h-full"
|
|
]
|
|
},
|
|
variants: {
|
|
size: {
|
|
sm: {
|
|
base: "w-8 h-8 text-tiny"
|
|
},
|
|
md: {
|
|
base: "w-10 h-10 text-tiny"
|
|
},
|
|
lg: {
|
|
base: "w-14 h-14 text-small"
|
|
}
|
|
},
|
|
color: {
|
|
default: {
|
|
base: colorVariants.solid.default
|
|
},
|
|
primary: {
|
|
base: colorVariants.solid.primary
|
|
},
|
|
secondary: {
|
|
base: colorVariants.solid.secondary
|
|
},
|
|
success: {
|
|
base: colorVariants.solid.success
|
|
},
|
|
warning: {
|
|
base: colorVariants.solid.warning
|
|
},
|
|
danger: {
|
|
base: colorVariants.solid.danger
|
|
}
|
|
},
|
|
radius: {
|
|
none: {
|
|
base: "rounded-none"
|
|
},
|
|
sm: {
|
|
base: "rounded-small"
|
|
},
|
|
md: {
|
|
base: "rounded-medium"
|
|
},
|
|
lg: {
|
|
base: "rounded-large"
|
|
},
|
|
full: {
|
|
base: "rounded-full"
|
|
}
|
|
},
|
|
isBordered: {
|
|
true: {
|
|
base: "ring-2 ring-offset-2 ring-offset-background dark:ring-offset-background-dark"
|
|
}
|
|
},
|
|
isDisabled: {
|
|
true: {
|
|
base: "opacity-disabled"
|
|
}
|
|
},
|
|
isInGroup: {
|
|
true: {
|
|
base: [
|
|
"-ms-2 data-[hover=true]:-translate-x-3 rtl:data-[hover=true]:translate-x-3 transition-transform",
|
|
"data-[focus-visible=true]:-translate-x-3 rtl:data-[focus-visible=true]:translate-x-3"
|
|
]
|
|
}
|
|
},
|
|
isInGridGroup: {
|
|
true: {
|
|
base: "m-0 data-[hover=true]:translate-x-0"
|
|
}
|
|
},
|
|
disableAnimation: {
|
|
true: {
|
|
base: "transition-none",
|
|
img: "transition-none"
|
|
},
|
|
false: {}
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: "md",
|
|
color: "default",
|
|
radius: "full"
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
color: "default",
|
|
isBordered: true,
|
|
class: {
|
|
base: "ring-default"
|
|
}
|
|
},
|
|
{
|
|
color: "primary",
|
|
isBordered: true,
|
|
class: {
|
|
base: "ring-primary"
|
|
}
|
|
},
|
|
{
|
|
color: "secondary",
|
|
isBordered: true,
|
|
class: {
|
|
base: "ring-secondary"
|
|
}
|
|
},
|
|
{
|
|
color: "success",
|
|
isBordered: true,
|
|
class: {
|
|
base: "ring-success"
|
|
}
|
|
},
|
|
{
|
|
color: "warning",
|
|
isBordered: true,
|
|
class: {
|
|
base: "ring-warning"
|
|
}
|
|
},
|
|
{
|
|
color: "danger",
|
|
isBordered: true,
|
|
class: {
|
|
base: "ring-danger"
|
|
}
|
|
}
|
|
]
|
|
});
|
|
var avatarGroup = tv({
|
|
slots: {
|
|
base: "flex items-center justify-center h-auto w-max",
|
|
count: "hover:-translate-x-0"
|
|
},
|
|
variants: {
|
|
isGrid: {
|
|
true: "inline-grid grid-cols-4 gap-3"
|
|
}
|
|
}
|
|
});
|
|
|
|
export {
|
|
avatar,
|
|
avatarGroup
|
|
};
|