Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<script module lang="ts"> import { tv } from "tailwind-variants";
export const segment = tv({ base: "relative z-10 transition-[color] duration-150 hover:bg-transparent", variants: { selected: { true: "text-foreground-default", false: "text-foreground-muted hover:text-foreground-default" }, painted: { true: "bg-background-default shadow-sm edge-ring-inset hover:bg-background-default", false: "" }, collapsed: { true: "max-sm:pr-2.25", false: "" } } });</script>
<script lang="ts"> import type { ComponentProps } from "svelte"; import Button from "#lib/components/ui/Button.svelte"; import { getSegmentedControl } from "#lib/components/ui/SegmentedControl.svelte";
type Props = Omit<ComponentProps<typeof Button>, "variant" | "href" | "role" | "value"> & { value: string; collapsible?: boolean; };
let { value, collapsible = false, class: className, onclick, children, ...rest }: Props = $props();
const control = getSegmentedControl(); const selected = $derived(control.value === value); const href = $derived(control.href?.(value));
const select = (event: MouseEvent) => { onclick?.(event as Parameters<NonNullable<typeof onclick>>[0]); if (event.defaultPrevented) return; if ( href && (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) ) return; control.select(value); };</script>
<Button data-testid="segment" {...rest} variant="ghost" {href} role={href ? undefined : "radio"} aria-checked={href ? undefined : selected} aria-current={href && selected ? "page" : undefined} tabindex={href || selected ? undefined : -1} data-segment={value} onclick={select} class={segment({ selected, painted: selected && !control.ready, collapsed: collapsible && !selected, class: className })}> {#if collapsible && children} <span class={selected ? undefined : "max-sm:sr-only"}>{@render children()}</span> {:else} {@render children?.()} {/if}</Button>