Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const error = tv({ slots: { root: "overflow-hidden rounded-sm border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20", header: "flex items-center gap-2", icon: "shrink-0", label: "min-w-0", toggle: "flex w-full items-center gap-2 border-t border-border-danger text-foreground-danger transition-colors hover:text-foreground-danger-strong dark:border-border-danger/60", chevron: "shrink-0 transition-transform", body: "border-t border-border-danger font-mono text-foreground-danger-strong dark:border-border-danger/60" }, variants: { size: { small: { header: "px-3 py-2 typography-paragraph-small", icon: "size-4", toggle: "px-3 py-2 typography-paragraph-small", chevron: "size-4", body: "px-3 py-2 typography-paragraph-small" }, large: { header: "px-4 py-3 typography-paragraph-large", icon: "size-5", toggle: "px-4 py-3 typography-paragraph-small", chevron: "size-4", body: "px-4 py-3 typography-paragraph-small" } } }, defaultVariants: { size: "small" } });
export type ErrorVariants = VariantProps<typeof error>;</script>
<script lang="ts"> import type { Snippet } from "svelte"; import type { HTMLAttributes } from "svelte/elements"; import OctagonAlert from "$icon/octagon-alert"; import ChevronRight from "$icon/chevron-right";
interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> { /** The error message shown next to the icon; renders nothing when absent. */ label?: string; size?: ErrorVariants["size"]; class?: string; /** Optional collapsible content revealed by a "Show code" toggle. */ children?: Snippet; }
let { label, size = "small", class: className, children, ...rest }: Props = $props();
let open = $state(false); $effect(() => { if (!label) open = false; });
const classes = $derived(error({ size }));</script>
{#if label} <div class={classes.root({ class: className })} role="alert" {...rest}> <div class={classes.header()}> <OctagonAlert class={classes.icon()} aria-hidden="true" /> <span class={classes.label()}>{label}</span> </div>
{#if children} <button type="button" class={classes.toggle()} onclick={() => (open = !open)}> <ChevronRight class="{classes.chevron()} {open ? 'rotate-90' : ''}" aria-hidden="true" /> <span>Show code</span> </button> {#if open} <div class={classes.body()}> {@render children()} </div> {/if} {/if} </div>{/if}