components-svelte 0.1.0

package/dist/components/tooltip/Tooltip.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import { ChevronRight } from "@lucide/svelte";
+  import { Tooltip as TooltipPrimitive } from "bits-ui";
+  import type { Snippet } from "svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import { isRemoteUrl } from "../../utils/is-remote-url";
+
+  type TooltipSide = "top" | "right" | "bottom" | "left";
+  type TooltipAlign = "start" | "center" | "end";
+
+  export type TooltipProps = {
+    description?: string;
+    children?: string | Snippet<[Record<string, unknown>?]>;
+    title?: string;
+    cta?: string;
+    href?: string;
+    class?: string;
+    className?: string;
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    /**
+     * Svelte snippets do not expose the element type at runtime. Set this when
+     * the child is already an interactive element so Tooltip can render it as
+     * the Bits UI trigger, matching React's render-as-child behavior.
+     */
+    interactive?: boolean;
+  };
+
+  let {
+    description,
+    children,
+    title,
+    cta,
+    href,
+    class: classAttribute,
+    className,
+    side = "top",
+    align = "center",
+    interactive = false,
+  }: TooltipProps = $props();
+
+  let open = $state(false);
+  const hasHover = getHasHover();
+  let triggerClassName = $derived(className ?? classAttribute);
+  let ariaLabel = $derived.by(() => {
+    if (interactive) {
+      return undefined;
+    }
+
+    if (title && description) {
+      return `${title}: ${description}`;
+    }
+
+    return title || description;
+  });
+  let triggerClass = $derived(
+    cn(
+      triggerClassName,
+      !interactive &&
+        "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+    )
+  );
+
+  function getHasHover(): boolean {
+    try {
+      return matchMedia("(hover: hover)").matches;
+    } catch {
+      // assume that if the browser is too old to support matchMedia it's likely not a touch device
+      return true;
+    }
+  }
+
+  const handleClick = hasHover
+    ? undefined
+    : () => {
+        open = !open;
+      };
+
+  function handleOpenChange(nextOpen: boolean) {
+    // Base UI provides the reason separately; Bits UI exposes the resulting state.
+    // Keeping the controlled state synchronized preserves hover, Escape, and outside-press behavior.
+    open = nextOpen;
+  }
+</script>
+
+{#if children != null}
+  <TooltipPrimitive.Provider delayDuration={0}>
+    <TooltipPrimitive.Root
+      bind:open
+      disableCloseOnTriggerClick={!hasHover}
+      onOpenChange={handleOpenChange}
+    >
+      {#if interactive}
+        <TooltipPrimitive.Trigger
+          aria-label={ariaLabel}
+          class={triggerClass}
+          onclick={handleClick}
+        >
+          {#snippet child({ props })}
+            {#if typeof children === "string"}
+              <span {...props}>{children}</span>
+            {:else}
+              {@render children(props)}
+            {/if}
+          {/snippet}
+        </TooltipPrimitive.Trigger>
+      {:else}
+        <TooltipPrimitive.Trigger
+          aria-label={ariaLabel}
+          class={triggerClass}
+          onclick={handleClick}
+        >
+          {#if typeof children === "string"}
+            <span
+              class={cn(
+                Classes.Tooltip,
+                "underline decoration-2 decoration-stone-400 decoration-dotted underline-offset-4 dark:decoration-stone-500"
+              )}
+            >
+              {children}
+            </span>
+          {:else}
+            {@render children()}
+          {/if}
+        </TooltipPrimitive.Trigger>
+      {/if}
+
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+          align={align}
+          collisionPadding={8}
+          data-component-part="tooltip-content"
+          side={side}
+          sideOffset={4}
+          class="z-50 flex max-w-[16rem] flex-col gap-1 rounded-xl border border-stone-200 bg-white px-4 py-3 shadow-[0_10px_16px_-3px_rgb(10_10_10/0.05),0_3px_10px_-2px_rgb(10_10_10/0.02)] dark:border-stone-900 dark:bg-stone-950"
+        >
+          {#if title}
+            <p
+              class="font-medium text-stone-900 text-xs leading-4 dark:text-stone-200"
+              data-component-part="tooltip-title"
+            >
+              {title}
+            </p>
+          {/if}
+          {#if description}
+            <p
+              class="text-stone-600 text-xs leading-4 dark:text-stone-400"
+              data-component-part="tooltip-description"
+            >
+              {description}
+            </p>
+          {/if}
+          {#if cta && href}
+            <a
+              class="mt-2! flex items-center gap-0.5 rounded-sm font-medium text-stone-600 text-xs leading-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 dark:text-stone-400 dark:hover:text-primary-light"
+              data-component-part="tooltip-cta"
+              href={href}
+              rel={isRemoteUrl(href) ? "noreferrer" : undefined}
+              target={isRemoteUrl(href) ? "_blank" : undefined}
+            >
+              {cta}
+              <ChevronRight aria-hidden="true" class="size-3" strokeWidth={2.5} />
+            </a>
+          {/if}
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  </TooltipPrimitive.Provider>
+{/if}

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+type TooltipSide = "top" | "right" | "bottom" | "left";
+type TooltipAlign = "start" | "center" | "end";
+export type TooltipProps = {
+    description?: string;
+    children?: string | Snippet<[Record<string, unknown>?]>;
+    title?: string;
+    cta?: string;
+    href?: string;
+    class?: string;
+    className?: string;
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    /**
+     * Svelte snippets do not expose the element type at runtime. Set this when
+     * the child is already an interactive element so Tooltip can render it as
+     * the Bits UI trigger, matching React's render-as-child behavior.
+     */
+    interactive?: boolean;
+};
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export type { TooltipProps } from "./Tooltip.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";

package/dist/components/tooltip/index.js

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

package/dist/components/tree/Tree.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  // biome-ignore-all lint/complexity/noExcessiveCognitiveComplexity: TODO
+  import { onMount } from "svelte";
+  import type { Snippet } from "svelte";
+
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+
+  import { setTreeLevelContext } from "./context";
+  import {
+    getFirstChildTreeItem,
+    getParentTreeItem,
+    getSiblingFolders,
+    getTreeItemLabel,
+    getVisibleTreeItems,
+    updateRovingTabindex,
+  } from "./utils";
+
+  const TYPE_AHEAD_TIMEOUT_MS = 500;
+
+  export type TreeProps = {
+    class?: string;
+    className?: string;
+    children?: Snippet;
+  };
+
+  let {
+    class: classAttribute,
+    className,
+    children,
+  }: TreeProps = $props();
+
+  let treeElement: HTMLDivElement | null = $state(null);
+  let typeAheadBuffer = "";
+  let typeAheadTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  // Svelte setContext replaces the React TreeLevelProvider around the root children.
+  setTreeLevelContext({ level: 1, parentId: null });
+
+  onMount(() => {
+    if (!treeElement) {
+      return;
+    }
+
+    const existingFocusable = treeElement.querySelector<HTMLElement>(
+      '[role="treeitem"][tabindex="0"]'
+    );
+
+    if (!existingFocusable) {
+      const firstItem = treeElement.querySelector<HTMLElement>('[role="treeitem"]');
+      if (firstItem) {
+        updateRovingTabindex(treeElement, firstItem);
+      }
+    }
+
+    return () => {
+      if (typeAheadTimeout) {
+        clearTimeout(typeAheadTimeout);
+      }
+    };
+  });
+
+  function focusItem(item: HTMLElement | null | undefined) {
+    if (!(item && treeElement)) {
+      return;
+    }
+
+    updateRovingTabindex(treeElement, item);
+    item.focus();
+  }
+
+  function handleFocus(event: FocusEvent) {
+    const target = event.target;
+
+    if (
+      !(target instanceof HTMLElement) ||
+      target.getAttribute("role") !== "treeitem"
+    ) {
+      return;
+    }
+
+    if (treeElement) {
+      updateRovingTabindex(treeElement, target);
+    }
+  }
+
+  function handleTreeKeyDown(event: KeyboardEvent) {
+    const container = treeElement;
+    const target = event.target;
+
+    if (
+      !(container && target instanceof HTMLElement) ||
+      target.getAttribute("role") !== "treeitem"
+    ) {
+      return;
+    }
+
+    const visibleItems = getVisibleTreeItems(container);
+    const currentIndex = visibleItems.indexOf(target);
+    const isFolder = target.getAttribute("aria-expanded") !== null;
+    const isExpanded = target.getAttribute("aria-expanded") === "true";
+
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        focusItem(visibleItems[currentIndex + 1]);
+        break;
+      }
+
+      case "ArrowUp": {
+        event.preventDefault();
+        focusItem(visibleItems[currentIndex - 1]);
+        break;
+      }
+
+      case "ArrowRight": {
+        event.preventDefault();
+        if (isFolder) {
+          if (isExpanded) {
+            focusItem(getFirstChildTreeItem(target));
+          } else {
+            target.click();
+          }
+        }
+        break;
+      }
+
+      case "ArrowLeft": {
+        event.preventDefault();
+        if (isFolder && isExpanded) {
+          target.click();
+        } else {
+          focusItem(getParentTreeItem(target, container));
+        }
+        break;
+      }
+
+      case "Home": {
+        event.preventDefault();
+        focusItem(visibleItems[0]);
+        break;
+      }
+
+      case "End": {
+        event.preventDefault();
+        focusItem(visibleItems.at(-1));
+        break;
+      }
+
+      case " ":
+      case "Enter": {
+        event.preventDefault();
+        target.click();
+        break;
+      }
+
+      case "*": {
+        event.preventDefault();
+        const siblingFolders = getSiblingFolders(target, container);
+        // Preserve the original sibling-folder expansion behavior.
+        // biome-ignore lint/complexity/noForEach: TODO
+        siblingFolders.forEach((folder) => {
+          if (folder.getAttribute("aria-expanded") === "false") {
+            folder.click();
+          }
+        });
+        break;
+      }
+
+      default: {
+        if (
+          event.key.length === 1 &&
+          !event.ctrlKey &&
+          !event.metaKey &&
+          !event.altKey
+        ) {
+          event.preventDefault();
+
+          if (typeAheadTimeout) {
+            clearTimeout(typeAheadTimeout);
+          }
+
+          typeAheadBuffer += event.key.toLowerCase();
+
+          const searchString = typeAheadBuffer;
+          const startIndex = currentIndex + 1;
+          const itemsAfter = visibleItems.slice(startIndex);
+          const itemsBefore = visibleItems.slice(0, startIndex);
+          const searchOrder = [...itemsAfter, ...itemsBefore];
+
+          const match = searchOrder.find((item) => {
+            const label = getTreeItemLabel(item);
+            return label?.toLowerCase().startsWith(searchString);
+          });
+
+          if (match) {
+            focusItem(match);
+          }
+
+          typeAheadTimeout = setTimeout(() => {
+            typeAheadBuffer = "";
+          }, TYPE_AHEAD_TIMEOUT_MS);
+        }
+        break;
+      }
+    }
+  }
+
+  let treeClass = $derived(cn(Classes.Tree, classAttribute ?? className));
+</script>
+
+<!-- Svelte keeps the React tree root and delegates keyboard behavior from it. -->
+<div
+  bind:this={treeElement}
+  aria-label="File tree"
+  class={treeClass}
+  data-component-part="tree-root"
+  onfocusin={handleFocus}
+  onkeydown={handleTreeKeyDown}
+  role="tree"
+  tabindex="-1"
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/tree/Tree.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+export type TreeProps = {
+    class?: string;
+    className?: string;
+    children?: Snippet;
+};
+declare const Tree: import("svelte").Component<TreeProps, {}, "">;
+type Tree = ReturnType<typeof Tree>;
+export default Tree;

package/dist/components/tree/TreeFile.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Classes } from "../../constants/selectors";
+  import Icon from "../icon/Icon.svelte";
+  import { cn } from "../../utils/cn";
+
+  import { useTreeLevel } from "./use-tree-level";
+  import { calculatePaddingLeft } from "./utils";
+
+  export type TreeFileProps = {
+    name: string;
+  };
+
+  let { name }: TreeFileProps = $props();
+  const { level } = useTreeLevel();
+</script>
+
+<div
+  aria-level={level}
+  aria-selected={false}
+  class={cn(
+    "flex cursor-default items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-stone-700 -outline-offset-1 hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-900",
+    Classes.TreeFile
+  )}
+  data-component-part="tree-file"
+  role="treeitem"
+  style={`--padding-left:${calculatePaddingLeft(level)}`}
+  tabindex="-1"
+>
+  <span aria-hidden="true" class="contents" data-component-part="tree-file-icon">
+    <Icon
+      class="size-4 shrink-0 select-none bg-stone-700 dark:bg-stone-400"
+      icon="file"
+      iconLibrary="lucide"
+      overrideColor={true}
+    />
+  </span>
+  <span
+    class="truncate font-medium text-sm leading-5 -tracking-[0.1px]"
+    data-component-part="tree-file-title"
+    title={name}
+  >
+    {name}
+  </span>
+</div>

package/dist/components/tree/TreeFile.svelte.d.ts

@@ -0,0 +1,6 @@
+export type TreeFileProps = {
+    name: string;
+};
+declare const TreeFile: import("svelte").Component<TreeFileProps, {}, "">;
+type TreeFile = ReturnType<typeof TreeFile>;
+export default TreeFile;

package/dist/components/tree/TreeFolder.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import { Classes } from "../../constants/selectors";
+  import Icon from "../icon/Icon.svelte";
+  import { cn } from "../../utils/cn";
+
+  import { setTreeLevelContext } from "./context";
+  import { useTreeLevel } from "./use-tree-level";
+  import { calculatePaddingLeft, createTreeId } from "./utils";
+
+  export type TreeFolderProps = {
+    name: string;
+    defaultOpen?: boolean;
+    children?: Snippet;
+    openable?: boolean;
+  };
+
+  let {
+    name,
+    defaultOpen = false,
+    children,
+    openable: requestedOpenable = true,
+  }: TreeFolderProps = $props();
+
+  const uniqueId = createTreeId();
+  const nodeId = `tree-folder-${uniqueId}`;
+  const groupId = `tree-group-${uniqueId}`;
+  const { level } = useTreeLevel();
+  let openable = $derived(requestedOpenable && !!children);
+  // React's useState intentionally captures the initial defaultOpen value.
+  // svelte-ignore state_referenced_locally
+  let open = $state(openable && defaultOpen);
+
+  // Svelte context replaces the nested React TreeLevelProvider.
+  setTreeLevelContext({ level: level + 1, parentId: nodeId });
+
+  function toggleFolder() {
+    if (openable) {
+      open = !open;
+    }
+  }
+</script>
+
+<div
+  data-component-part="tree-folder"
+  role="none"
+  style={`--padding-left:${calculatePaddingLeft(level)}`}
+>
+  <!-- Preserve the React treeitem click behavior; the tree root supplies keyboard activation. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    aria-expanded={openable ? open : undefined}
+    aria-level={level}
+    aria-owns={openable && open ? groupId : undefined}
+    aria-selected={false}
+    class={cn(
+      "flex items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-stone-700 -outline-offset-1 hover:bg-stone-100 dark:text-stone-400 dark:hover:bg-stone-900",
+      openable ? "cursor-pointer" : "cursor-default",
+      Classes.TreeFolder
+    )}
+    id={nodeId}
+    onclick={openable ? toggleFolder : undefined}
+    role="treeitem"
+    tabindex="-1"
+  >
+    <span
+      aria-hidden="true"
+      class="contents"
+      data-component-part={openable && open ? "tree-folder-icon-open" : "tree-folder-icon-closed"}
+    >
+      <Icon
+        class="size-4 shrink-0 select-none bg-stone-700 dark:bg-stone-400"
+        icon={openable && open ? "folder-open" : "folder"}
+        iconLibrary="lucide"
+        overrideColor={true}
+      />
+    </span>
+    <span
+      class="truncate font-medium text-sm leading-5 -tracking-[0.1px]"
+      data-component-part="tree-folder-title"
+      title={name}
+    >
+      {name}
+    </span>
+  </div>
+
+  {#if openable && open}
+    <!-- Svelte preserves the semantic group wrapper used by the React tree. -->
+    <div
+      class="relative"
+      data-component-part="tree-folder-children-wrapper"
+      id={groupId}
+      role="group"
+    >
+      <div
+        aria-hidden="true"
+        class="absolute left-[calc((var(--padding-left)+8)*1px)] z-10 h-full w-px select-none bg-stone-200 dark:bg-stone-800"
+        data-component-part="tree-folder-children-line"
+      ></div>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/tree/TreeFolder.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+export type TreeFolderProps = {
+    name: string;
+    defaultOpen?: boolean;
+    children?: Snippet;
+    openable?: boolean;
+};
+declare const TreeFolder: import("svelte").Component<TreeFolderProps, {}, "">;
+type TreeFolder = ReturnType<typeof TreeFolder>;
+export default TreeFolder;

package/dist/components/tree/context.d.ts

@@ -0,0 +1,3 @@
+import { type TreeLevelContextValue } from "./tree-level-context";
+declare const setTreeLevelContext: (value: TreeLevelContextValue) => void;
+export { setTreeLevelContext };

package/dist/components/tree/context.js

@@ -0,0 +1,7 @@
+import { setContext } from "svelte";
+import { TREE_LEVEL_CONTEXT } from "./tree-level-context";
+// Svelte's setContext replaces the React TreeLevelProvider component.
+const setTreeLevelContext = (value) => {
+    setContext(TREE_LEVEL_CONTEXT, value);
+};
+export { setTreeLevelContext };

package/dist/components/tree/index.d.ts

@@ -0,0 +1,10 @@
+import TreeFile from "./TreeFile.svelte";
+import TreeFolder from "./TreeFolder.svelte";
+export type { TreeFileProps } from "./TreeFile.svelte";
+export type { TreeFolderProps } from "./TreeFolder.svelte";
+export type { TreeProps } from "./Tree.svelte";
+declare const Tree: import("svelte").Component<import("./Tree.svelte").TreeProps, {}, ""> & {
+    File: import("svelte").Component<import("./TreeFile.svelte").TreeFileProps, {}, "">;
+    Folder: import("svelte").Component<import("./TreeFolder.svelte").TreeFolderProps, {}, "">;
+};
+export { Tree, TreeFile, TreeFolder };

package/dist/components/tree/index.js

@@ -0,0 +1,9 @@
+import TreeFile from "./TreeFile.svelte";
+import TreeFolder from "./TreeFolder.svelte";
+import TreeRoot from "./Tree.svelte";
+// Preserve the React compound-component export for JavaScript consumers.
+const Tree = Object.assign(TreeRoot, {
+    File: TreeFile,
+    Folder: TreeFolder,
+});
+export { Tree, TreeFile, TreeFolder };

package/dist/components/tree/tree-level-context.d.ts

@@ -0,0 +1,8 @@
+type TreeLevelContextValue = {
+    level: number;
+    parentId: string | null;
+};
+declare const DEFAULT_VALUE: TreeLevelContextValue;
+declare const TREE_LEVEL_CONTEXT: unique symbol;
+export { DEFAULT_VALUE, TREE_LEVEL_CONTEXT };
+export type { TreeLevelContextValue };

package/dist/components/tree/tree-level-context.js

@@ -0,0 +1,7 @@
+const DEFAULT_VALUE = {
+    level: 1,
+    parentId: null,
+};
+// Svelte uses a shared context key in place of React's createContext value.
+const TREE_LEVEL_CONTEXT = Symbol("tree-level-context");
+export { DEFAULT_VALUE, TREE_LEVEL_CONTEXT };

package/dist/components/tree/use-tree-level.d.ts

@@ -0,0 +1,3 @@
+import { type TreeLevelContextValue } from "./tree-level-context";
+declare const useTreeLevel: () => TreeLevelContextValue;
+export { useTreeLevel };

package/dist/components/tree/use-tree-level.js

@@ -0,0 +1,5 @@
+import { getContext } from "svelte";
+import { DEFAULT_VALUE, TREE_LEVEL_CONTEXT, } from "./tree-level-context";
+// Svelte's getContext replaces React useTreeLevel/useContext.
+const useTreeLevel = () => getContext(TREE_LEVEL_CONTEXT) ?? DEFAULT_VALUE;
+export { useTreeLevel };

package/dist/components/tree/utils.d.ts

@@ -0,0 +1,9 @@
+declare const getParentTreeItem: (element: HTMLElement, container: HTMLElement) => HTMLElement | null;
+declare const getFirstChildTreeItem: (folder: HTMLElement) => HTMLElement | null;
+declare const getVisibleTreeItems: (container: HTMLElement) => HTMLElement[];
+declare const calculatePaddingLeft: (level: number) => number;
+declare const createTreeId: () => string;
+declare const getTreeItemLabel: (element: HTMLElement) => string | null;
+declare const getSiblingFolders: (element: HTMLElement, container: HTMLElement) => HTMLElement[];
+declare const updateRovingTabindex: (container: HTMLElement, target: HTMLElement) => void;
+export { getParentTreeItem, getFirstChildTreeItem, getVisibleTreeItems, calculatePaddingLeft, createTreeId, getTreeItemLabel, getSiblingFolders, updateRovingTabindex, };