49 lines
1.1 KiB
Plaintext
49 lines
1.1 KiB
Plaintext
---
|
|
import type { HTMLTag, Polymorphic } from "astro/types";
|
|
import { tv } from "tailwind-variants";
|
|
|
|
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
|
|
/**
|
|
* Whether the item is inset (has left padding)
|
|
*/
|
|
inset?: boolean;
|
|
/**
|
|
* Whether the item is disabled
|
|
*/
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export const dropdownItem = tv({
|
|
base: [
|
|
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 transition-colors outline-none select-none",
|
|
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
"[&>svg]:size-4 [&>svg]:shrink-0",
|
|
],
|
|
variants: {
|
|
inset: {
|
|
true: "pl-8",
|
|
},
|
|
disabled: {
|
|
true: "pointer-events-none opacity-50",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
inset: false,
|
|
disabled: false,
|
|
},
|
|
});
|
|
|
|
const { class: className, inset = false, disabled = false, as: Tag = "div", ...rest } = Astro.props;
|
|
---
|
|
|
|
<Tag
|
|
class={dropdownItem({ inset, disabled, class: className })}
|
|
role="menuitem"
|
|
tabindex={disabled ? "-1" : "0"}
|
|
data-disabled={disabled ? "true" : undefined}
|
|
data-slot="dropdown-item"
|
|
{...rest}
|
|
>
|
|
<slot />
|
|
</Tag>
|