Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const link = tv({ base: "inline-flex cursor-pointer items-center gap-1 no-underline transition-colors duration-150 ease-in-out select-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2", variants: { variant: { default: "text-foreground-link-default hover:text-foreground-link-hover focus-visible:outline-border-focus", success: "text-foreground-link-success hover:text-foreground-link-success-hover focus-visible:outline-foreground-link-success", warning: "text-foreground-link-warning hover:text-foreground-link-warning-hover focus-visible:outline-foreground-link-warning", danger: "text-foreground-link-danger hover:text-foreground-link-danger-hover focus-visible:outline-foreground-link-danger", // takes its color from whatever it sits in, for a link inside a row of // plain text that should read as text until you hover it inherit: "text-inherit focus-visible:outline-border-focus" }, size: { regular: "", small: "typography-paragraph-small" }, disabled: { true: "pointer-events-none opacity-50", false: "" } }, defaultVariants: { variant: "default", size: "regular", disabled: false } });
export type LinkVariants = VariantProps<typeof link>;</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?: LinkVariants["variant"]; size?: LinkVariants["size"]; href?: ResolvedPathname; type?: "button" | "submit" | "reset"; disabled?: boolean; iconLeft?: Component<SvelteHTMLElements["svg"]>; iconRight?: Component<SvelteHTMLElements["svg"]>; class?: string; children?: Snippet; }
let { variant = "default", size = "regular", href, type = "button", disabled = false, iconLeft, iconRight, class: className, children, ...rest }: Props = $props();
const classes = $derived(link({ variant, size, disabled, class: className })); const iconSize = $derived(size === "small" ? "size-3" : "size-4");</script>
{#if href} <a {href} class={classes} aria-disabled={disabled ? "true" : undefined} tabindex={disabled ? -1 : undefined} {...rest} > {#if iconLeft} {@const IconLeft = iconLeft} <IconLeft class={iconSize} aria-hidden="true" /> {/if} {#if children} {@render children()} {/if} {#if iconRight} {@const IconRight = iconRight} <IconRight class={iconSize} aria-hidden="true" /> {/if} </a>{:else} <button {type} {disabled} class={classes} {...rest}> {#if iconLeft} {@const IconLeft = iconLeft} <IconLeft class={iconSize} aria-hidden="true" /> {/if} {#if children} {@render children()} {/if} {#if iconRight} {@const IconRight = iconRight} <IconRight class={iconSize} aria-hidden="true" /> {/if} </button>{/if}