@heyramzi/ui 0.0.0-stage → 1.53.0

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}

package/src/shadcn/trace/index.ts

@@ -0,0 +1,29 @@
+import CollapsibleContent from "./trace-collapsible-content.svelte";
+import CollapsibleTrigger from "./trace-collapsible-trigger.svelte";
+import Collapsible from "./trace-collapsible.svelte";
+import Description from "./trace-description.svelte";
+import Icon from "./trace-icon.svelte";
+import Title from "./trace-title.svelte";
+import Root from "./trace.svelte";
+import Line, { type TraceLineStatus } from "./trace-line.svelte";
+
+export {
+  Root,
+  Line,
+  Icon,
+  Title,
+  Description,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  type TraceLineStatus,
+  //
+  Root as Trace,
+  Line as TraceLine,
+  Icon as TraceIcon,
+  Title as TraceTitle,
+  Description as TraceDescription,
+  Collapsible as TraceCollapsible,
+  CollapsibleTrigger as TraceCollapsibleTrigger,
+  CollapsibleContent as TraceCollapsibleContent,
+};

package/src/shadcn/trace/trace-collapsible-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Collapsible from "../collapsible/index.js";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<CollapsiblePrimitive.ContentProps> = $props();
+</script>
+
+<Collapsible.Content
+	bind:ref
+	data-slot="trace-collapsible-content"
+	class="duration-200 min-w-0 overflow-hidden [--bits-accordion-content-height:var(--bits-collapsible-content-height)] data-open:animate-accordion-down data-closed:animate-accordion-up"
+	{...restProps}
+>
+	<div
+		data-slot="trace-collapsible-content-inner"
+		class={cn(
+			"mt-2 mb-1 ml-[calc(--spacing(2)_-_1px)] border-l pr-1 pl-4 leading-relaxed min-w-0 wrap-break-word text-muted-foreground",
+			className
+		)}
+	>
+		{@render children?.()}
+	</div>
+</Collapsible.Content>

package/src/shadcn/trace/trace-collapsible-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Collapsible from "../collapsible/index.js";
+	import { CaretRight } from "phosphor-svelte";
+	import { cn, type WithoutChild } from "@heyramzi/utils";
+	import TraceIcon from "./trace-icon.svelte";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<CollapsiblePrimitive.TriggerProps> = $props();
+</script>
+
+<Collapsible.Trigger
+	bind:ref
+	data-slot="trace-collapsible-trigger"
+	class={cn(
+		"gap-1 rounded-md focus-visible:ring-3 focus-visible:ring-ring/50 group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left text-muted-foreground transition-colors outline-none hover:text-foreground has-[[data-status=error]]:text-destructive",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<TraceIcon class="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
+		<CaretRight />
+	</TraceIcon>
+</Collapsible.Trigger>

package/src/shadcn/trace/trace-collapsible.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Collapsible from "../collapsible/index.js";
+	import { cn } from "@heyramzi/utils";
+	import type { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		class: className,
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<Collapsible.Root
+	bind:ref
+	bind:open
+	data-slot="trace-collapsible"
+	class={cn("flex w-full min-w-0 flex-col", className)}
+	{...restProps}
+/>

package/src/shadcn/trace/trace-description.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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-description"
+	class={cn("shrink-0 text-muted-foreground/70 tabular-nums", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace-icon.svelte

@@ -0,0 +1,24 @@
+<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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-icon"
+	aria-hidden="true"
+	class={cn(
+		"size-4 [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace-line.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	export type TraceLineStatus = "running" | "error" | "pending";
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		status,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+		status?: TraceLineStatus;
+	} = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-line"
+	data-status={status}
+	class={cn(
+		"gap-2 text-sm flex w-fit max-w-full min-w-0 items-center text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace-title.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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="trace-title"
+	class={cn("min-w-0 truncate motion-reduce:shimmer-none", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/trace/trace.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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="trace"
+	class={cn(
+		"gap-2 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50 flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>