Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const buttonCard = tv({ base: [ "flex h-40 w-48 cursor-pointer gap-3 rounded-(--btn-radius) px-4 py-3 no-underline select-none [--btn-radius:var(--radius-sm)]", "transition-colors duration-150 ease-in-out", "hover:no-underline", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus", "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50" ], variants: { variant: { default: [ "border border-border-default bg-background-default", "hover:bg-background-subtle" ], ghost: ["border border-transparent bg-transparent", "hover:bg-background-inset"] }, insetShadow: { true: "", false: "" } }, compoundVariants: [ // raised variants draw inset depth via a ::before layer. { variant: "default", insetShadow: true, class: [ "relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[max(calc(var(--btn-radius)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']", "hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]", "active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]", "disabled:active:translate-y-0" ] } ], defaultVariants: { variant: "default", insetShadow: false } });
export type ButtonCardVariants = VariantProps<typeof buttonCard>;</script>
<script lang="ts"> import type { ResolvedPathname } from "$app/types"; import type { Component, Snippet } from "svelte"; import type { HTMLAnchorAttributes, HTMLButtonAttributes, SvelteHTMLElements } from "svelte/elements";
interface Props extends Omit<HTMLAnchorAttributes & HTMLButtonAttributes, "class" | "children"> { variant?: ButtonCardVariants["variant"]; insetShadow?: boolean; href?: ResolvedPathname; type?: "button" | "submit" | "reset"; disabled?: boolean; title?: string; description?: string; icon?: Component<SvelteHTMLElements["svg"]>; class?: string; children?: Snippet; }
let { variant = "default", insetShadow = false, href, type = "button", disabled = false, title, description, icon, class: className, children, ...rest }: Props = $props();
const classes = $derived(buttonCard({ variant, insetShadow, class: className })); const Icon = $derived(icon);</script>
{#snippet content()} <div class="flex flex-col items-start gap-1.5"> {#if title} <div class="flex flex-row items-center gap-2"> {#if Icon} <Icon class="size-4 shrink-0" aria-hidden="true" /> {/if} <span class="text-sm font-medium text-foreground-default">{title}</span> </div> {/if} {#if description} <span class="text-xs text-foreground-muted">{description}</span> {/if} </div>{/snippet}
{#if href} <a {href} class={classes} aria-disabled={disabled ? "true" : undefined} tabindex={disabled ? -1 : undefined} {...rest} > {@render (children ?? content)()} </a>{:else} <button {type} {disabled} class={classes} {...rest}> {@render (children ?? content)()} </button>{/if}