@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/shadcn/sonner/sonner.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { CheckCircle, Info, Warning, XCircle } from "phosphor-svelte";
+
+	import { Spinner } from "../spinner/index.js";
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+	>{#snippet loadingIcon()}
+		<Spinner />
+	{/snippet}
+	{#snippet successIcon()}
+		<CheckCircle class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<XCircle class="size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<Info class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<Warning class="size-4" />
+	{/snippet}
+</Sonner>

package/src/shadcn/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.svelte";

package/src/shadcn/spinner/spinner.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { cn } from "@heyramzi/utils";
+	import { CircleNotch as SpinnerIcon } from "phosphor-svelte";
+	import type { SVGAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		role = "status",
+		// we add name, color, and stroke for compatibility with different icon libraries props
+		name,
+		color,
+		stroke,
+		"aria-label": ariaLabel = "Loading",
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<SpinnerIcon
+	{role}
+	name={name === null ? undefined : name}
+	color={color === null ? undefined : color}
+	stroke={stroke === null ? undefined : stroke}
+	aria-label={ariaLabel}
+	class={cn("size-4 animate-spin", className)}
+	{...restProps}
+/>

package/src/shadcn/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+  Root,
+  //
+  Root as Switch,
+};

package/src/shadcn/switch/switch.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		size = "default",
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	data-size={size}
+	class={cn(
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-[background-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] outline-none after:absolute after:-inset-x-3 after:top-1/2 after:h-[max(100%,2rem)] after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		className,
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform duration-[var(--duration-medium)] ease-[var(--ease-smooth-out)] rtl:data-[state=checked]:translate-x-[calc(-100%)]"
+	/>
+</SwitchPrimitive.Root>

package/src/shadcn/table/index.ts

@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+  Root,
+  Body,
+  Caption,
+  Cell,
+  Footer,
+  Head,
+  Header,
+  Row,
+  //
+  Root as Table,
+  Body as TableBody,
+  Caption as TableCaption,
+  Cell as TableCell,
+  Footer as TableFooter,
+  Head as TableHead,
+  Header as TableHeader,
+  Row as TableRow,
+};

package/src/shadcn/table/table-body.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn("[&_tr:last-child]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>

package/src/shadcn/table/table-caption.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>

package/src/shadcn/table/table-cell.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>

package/src/shadcn/table/table-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>

package/src/shadcn/table/table-head.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		"text-muted-foreground h-8 px-2 text-left align-middle text-xs font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>

package/src/shadcn/table/table-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>

package/src/shadcn/table/table-row.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		"data-[state=selected]:bg-muted transition-[background-color,transform,box-shadow] duration-[var(--duration-quick)] ease-out hover:bg-muted/20 hover:-translate-y-px hover:shadow-[0_1px_3px_rgba(0,0,0,0.04)] motion-reduce:hover:translate-y-0 motion-reduce:hover:shadow-none",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>

package/src/shadcn/table/table.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto overscroll-x-contain">
+	<!-- WHY: on a phone a four-column table squeezes every cell to ~90px and the content becomes unreadable rather than merely tight. The floor makes the -->
+	<!-- container scroll sideways instead, which keeps each column legible. Unprefixed on purpose: a caller passing its own min-w (tasks-list needs 640px -->
+	<!-- for seven columns) replaces this one through tailwind-merge, where a max-sm: default would instead win over it and shrink the table. A genuinely narrow table opts out with min-w-0. -->
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn("w-full min-w-[34rem] caption-bottom text-sm", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>

package/src/shadcn/tabs/index.ts

@@ -0,0 +1,16 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+export {
+  Root,
+  Content,
+  List,
+  Trigger,
+  //
+  Root as Tabs,
+  Content as TabsContent,
+  List as TabsList,
+  Trigger as TabsTrigger,
+};

package/src/shadcn/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("flex-1 outline-none", className)}
+	{...restProps}
+/>

package/src/shadcn/tabs/tabs-list.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+	import { slidingPill } from "../../lib/sliding-pill.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		children,
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		/** Same steps as Button: sm 28, default 32, lg 36. */
+		size?: "sm" | "default" | "lg";
+	} = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	data-size={size}
+	class={cn(
+		"bg-muted text-muted-foreground group/tabs-list relative inline-flex data-[size=sm]:h-7 data-[size=default]:h-8 data-[size=lg]:h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		className,
+	)}
+	{...restProps}
+>
+	<!-- Zero width until the attachment measures, so a server-rendered list
+	     shows the trigger's own active background and never an empty pill. -->
+	<span
+		aria-hidden="true"
+		class="bg-background dark:border-input dark:bg-input/30 pointer-events-none absolute inset-y-[3px] left-0 z-0 w-0 rounded-md border border-transparent opacity-0 shadow-sm transition-[transform,width,opacity] duration-[var(--duration-fast,250ms)] ease-[var(--ease-smooth-out,cubic-bezier(0.22,1,0.36,1))] will-change-[transform,width] motion-reduce:transition-opacity"
+		{@attach slidingPill}
+	></span>
+	{@render children?.()}
+</TabsPrimitive.List>

package/src/shadcn/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground group-data-[pill=on]/tabs-list:data-[state=active]:border-transparent group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent group-data-[pill=on]/tabs-list:data-[state=active]:shadow-none dark:group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent relative z-[1] inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm group-data-[size=sm]/tabs-list:text-[0.8rem] font-medium whitespace-nowrap after:absolute after:top-1/2 after:left-0 after:h-[max(100%,2rem)] after:w-full after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className,
+	)}
+	{...restProps}
+/>

package/src/shadcn/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("flex flex-col gap-2", className)}
+	{...restProps}
+/>

package/src/shadcn/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+  Root,
+  //
+  Root as Textarea,
+};

package/src/shadcn/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "@heyramzi/utils";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border bg-transparent px-2.5 py-2 text-base shadow-field transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+		className,
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/src/shadcn/toggle/index.ts

@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+  toggleVariants,
+  type ToggleSize,
+  type ToggleVariant,
+  type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+  Root,
+  //
+  Root as Toggle,
+};

package/src/shadcn/toggle/toggle.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
+			},
+			size: {
+				// Same steps as Button: sm 28, default 32, lg 36. 40 went with the scale.
+				default: "h-8 min-w-8 px-2",
+				sm: "h-7 min-w-7 px-1.5",
+				lg: "h-9 min-w-9 px-2.5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

package/src/shadcn/toggle-group/index.ts

@@ -0,0 +1,10 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+
+export {
+  Root,
+  Item,
+  //
+  Root as ToggleGroup,
+  Item as ToggleGroupItem,
+};

package/src/shadcn/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "@heyramzi/utils";
+	import { type ToggleVariants, toggleVariants } from "../toggle/index.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx.variant || variant}
+	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-s-md data-[spacing=0]:last:rounded-e-md data-[spacing=0]:data-[variant=outline]:border-s-0 data-[spacing=0]:data-[variant=outline]:first:border-s",
+		className,
+	)}
+	{value}
+	{...restProps}
+/>

package/src/shadcn/toggle-group/toggle-group.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+	import type { VariantProps } from "tailwind-variants";
+	import { toggleVariants } from "../toggle/index.js";
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
+		setContext("toggleGroup", props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<Required<ToggleGroupContext>>("toggleGroup");
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		spacing = 0,
+		variant = "default",
+		...restProps
+	}: ToggleGroupPrimitive.RootProps & ToggleVariants & { spacing?: number } = $props();
+
+	// WHY: getters, so an item reads the group's current props, not the ones it mounted with.
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	data-spacing={spacing}
+	style={`--gap: ${spacing}`}
+	class={cn(
+		"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+		className,
+	)}
+	{...restProps}
+/>

package/src/shadcn/tooltip/context.ts

@@ -0,0 +1,16 @@
+import { getContext, hasContext, setContext } from "svelte";
+
+const KEY = Symbol.for("upsys.tooltip.provider");
+
+/** Marks the subtree as already inside a Tooltip.Provider. */
+export function markTooltipProvider(): void {
+  setContext(KEY, true);
+}
+
+/**
+ * bits-ui keeps the delay and the skip window on the provider, so tooltips share
+ * a group only when they share one. The root used to mount its own every time.
+ */
+export function hasTooltipProvider(): boolean {
+  return hasContext(KEY) && getContext(KEY) === true;
+}