You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.7 KiB
TypeScript
94 lines
1.7 KiB
TypeScript
import { cva } from "class-variance-authority";
|
|
|
|
const base = [
|
|
"inline-flex",
|
|
"items-center",
|
|
"justify-between",
|
|
"border-2",
|
|
"border-mono-border",
|
|
"py-1.5",
|
|
"px-2",
|
|
"rounded-lg",
|
|
"focus:outline-none",
|
|
"focus:border-mono-primary",
|
|
];
|
|
|
|
const viewport = ["p-1"];
|
|
|
|
const content = [
|
|
"relative",
|
|
"max-h-96",
|
|
"min-w-[8rem]",
|
|
// "py-1.5",
|
|
// "px-2",
|
|
"border-2",
|
|
"border-mono-border",
|
|
"overflow-hidden",
|
|
"rounded-lg",
|
|
"bg-white",
|
|
|
|
// Animation
|
|
"data-[state=open]:animate-in",
|
|
"data-[state=closed]:animate-out",
|
|
"data-[state=closed]:fade-out-0",
|
|
"data-[state=open]:fade-in-0",
|
|
"data-[state=closed]:zoom-out-95",
|
|
"data-[state=open]:zoom-in-95",
|
|
"data-[side=bottom]:slide-in-from-top-2",
|
|
"data-[side=left]:slide-in-from-right-2",
|
|
"data-[side=right]:slide-in-from-left-2",
|
|
"data-[side=top]:slide-in-from-bottom-2",
|
|
];
|
|
|
|
const scroll = [
|
|
"flex",
|
|
"cursor-default",
|
|
"items-center",
|
|
"justify-center",
|
|
"py-1",
|
|
];
|
|
|
|
const indicator = [
|
|
"absolute",
|
|
"top-1/2",
|
|
"-translate-y-1/2",
|
|
"right-2",
|
|
"inline-flex",
|
|
"items-center",
|
|
"justify-center",
|
|
];
|
|
|
|
const selectStyles = cva(base, {
|
|
variants: {
|
|
fullWidth: {
|
|
true: "w-full",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
fullWidth: false,
|
|
},
|
|
});
|
|
|
|
const item = [
|
|
"relative",
|
|
"flex",
|
|
"w-full",
|
|
"cursor-default",
|
|
"select-none",
|
|
"items-center",
|
|
"py-0.5",
|
|
"px-2",
|
|
"rounded-sm",
|
|
"data-[disabled]:pointer-events-none",
|
|
"data-[disabled]:text-mono-text/50",
|
|
"outline-none",
|
|
"focus:rounded-md",
|
|
"focus:bg-mono-primary",
|
|
"focus:text-white",
|
|
"focus:border-mono-primary",
|
|
];
|
|
|
|
const itemStyles = cva(item);
|
|
|
|
export { selectStyles, itemStyles, viewport, content, indicator, scroll };
|