Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const kbd = tv({ base: "inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-sm border px-1 pb-3xs font-sans typography-paragraph-mini not-italic select-none", variants: { inverted: { false: "border-border-default bg-background-default text-foreground-default shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)]", true: "border-inverse-border bg-inverse-background text-inverse-foreground shadow-[inset_0_-2px_0_0_var(--color-inverse-shadow-inner)]" } }, defaultVariants: { inverted: false } });
export type KbdVariants = VariantProps<typeof kbd>;</script>
<script lang="ts"> import type { Snippet } from "svelte";
interface Props { inverted?: boolean; class?: string; children: Snippet; }
let { inverted = false, class: className, children }: Props = $props();</script>
<kbd class={kbd({ inverted, class: className })}>{@render children()}</kbd>