@heyramzi/ui 0.0.0-stage → 6.0.1

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,59 @@
+<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();
+
+	setToggleGroupCtx({
+		variant,
+		size,
+		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;
+}

package/src/shadcn/tooltip/index.ts

@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
+
+export {
+  Root,
+  Trigger,
+  Content,
+  Provider,
+  Portal,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+  Provider as TooltipProvider,
+  Portal as TooltipPortal,
+};

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 6,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"t-dropdown z-50 w-fit max-w-xs rounded-lg border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-raised select-none outline-none",
+			"has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</TooltipPrimitive.Content>
+</TooltipPortal>

package/src/shadcn/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/src/shadcn/tooltip/tooltip-provider.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { markTooltipProvider } from "./context.js";
+
+	// The first tooltip waits, so a pointer crossing a toolbar does not trail a
+	// line of them. The next one inside the skip window arrives with no wait.
+	let {
+		delayDuration = 400,
+		skipDelayDuration = 300,
+		...restProps
+	}: TooltipPrimitive.ProviderProps = $props();
+
+	markTooltipProvider();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {skipDelayDuration} {...restProps} />

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/src/shadcn/tooltip/tooltip.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import TooltipProvider from "./tooltip-provider.svelte";
+	import { hasTooltipProvider } from "./context.js";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+
+	// Mount a provider only when nothing above has. A nested one shadows the outer
+	// scope, which is how a group of tooltips loses its shared skip window.
+	const standalone = !hasTooltipProvider();
+</script>
+
+{#if standalone}
+	<TooltipProvider>
+		<TooltipPrimitive.Root bind:open {...restProps} />
+	</TooltipProvider>
+{:else}
+	<TooltipPrimitive.Root bind:open {...restProps} />
+{/if}