components-svelte 0.1.0

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

@@ -0,0 +1,32 @@
+import Step from "./Step.svelte";
+declare const Steps: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+    titleSize?: import("./constants").StepTitleSize;
+    class?: string;
+    className?: string;
+}, {}, ""> & {
+    Item: import("svelte").Component<{
+        icon?: string | import("svelte").Snippet;
+        stepNumber?: number | `${number}`;
+        iconType?: import("../../utils/icon-utils").IconType;
+        iconLibrary?: import("../../utils/icon-utils").IconLibrary;
+        title: string | import("svelte").Snippet;
+        children?: string | import("svelte").Snippet;
+        titleSize?: import("./constants").StepTitleSize;
+        class?: string;
+        className?: string;
+        isLast?: boolean;
+        id?: string;
+        noAnchor?: boolean;
+        scrollElementIntoView?: (id: string) => void;
+        onCopyAnchorLink?: (id: string | undefined) => void;
+        onRegisterHeading?: (id: string, rect: DOMRect) => void;
+        onUnregisterHeading?: (id: string) => void;
+        _hasContext?: boolean;
+    }, {}, "">;
+};
+export type { StepTitleSize } from "./constants";
+export { STEP_TITLE_SIZES } from "./constants";
+export type { default as StepProps } from "./Step.svelte";
+export type { default as StepsProps } from "./Steps.svelte";
+export { Step, Steps };

package/dist/components/steps/index.js

@@ -0,0 +1,6 @@
+import Step from "./Step.svelte";
+import StepsRoot from "./Steps.svelte";
+// Preserve the React compound-component export for JavaScript consumers.
+const Steps = Object.assign(StepsRoot, { Item: Step });
+export { STEP_TITLE_SIZES } from "./constants";
+export { Step, Steps };

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,254 @@
+<script module lang="ts">
+  let nextTabsId = 0;
+</script>
+
+<script lang="ts">
+  import { setContext } from "svelte";
+  import type { Snippet } from "svelte";
+  import Icon from "../icon/Icon.svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import type { IconLibrary, IconType } from "../../utils/icon-utils";
+  import { TABS_CONTEXT, type TabsContext, type TabsItemRecord } from "./context";
+
+  const DEFAULT_TAB_TITLE = "Tab Title";
+
+  type TabsProps = {
+    children?: Snippet;
+    defaultTabIndex?: number;
+    onTabChange?: (tabIndex: number) => void;
+    class?: string;
+    className?: string;
+    borderBottom?: boolean;
+    ariaLabel?: string;
+    panelsRef?: { current: HTMLDivElement | null };
+  };
+
+  let {
+    children,
+    defaultTabIndex = 0,
+    onTabChange,
+    class: classAttribute,
+    className,
+    borderBottom,
+    ariaLabel,
+    panelsRef,
+  }: TabsProps = $props();
+
+  const uniqueId = `tabs-${++nextTabsId}`;
+
+  let items = $state<TabsItemRecord[]>([]);
+  // Svelte state captures defaultTabIndex only during the initial mount, matching the original behavior.
+  // svelte-ignore state_referenced_locally
+  let activeTabIndex = $state(Math.max(0, defaultTabIndex));
+  let tabRefs = $state<(HTMLLIElement | null)[]>([]);
+  let panelsElement = $state<HTMLDivElement | null>(null);
+
+  function register(item: TabsItemRecord) {
+    const existingIndex = items.findIndex((existing) => existing.id === item.id);
+    if (existingIndex === -1) {
+      items = [...items, item];
+    } else {
+      const nextItems = [...items];
+      nextItems[existingIndex] = item;
+      items = nextItems;
+    }
+  }
+
+  function unregister(id: symbol) {
+    items = items.filter((item) => item.id !== id);
+  }
+
+  const tabsContext: TabsContext = { register, unregister };
+  setContext(TABS_CONTEXT, tabsContext);
+
+  function slugify(value: string): string {
+    return value
+      .toLowerCase()
+      .trim()
+      .replace(/[^\w\s-]/g, "")
+      .replace(/[\s_-]+/g, "-")
+      .replace(/^-+|-+$/g, "");
+  }
+
+  let tabIds = $derived(
+    items.map((item, index) => {
+      if (item.customId) {
+        return item.customId;
+      }
+
+      const tabTitle = item.title ?? DEFAULT_TAB_TITLE;
+      return `${uniqueId}-${slugify(tabTitle)}-${index}`;
+    })
+  );
+
+  let selectedIndex = $derived(
+    items.length > 0
+      ? Math.max(0, Math.min(Number(activeTabIndex), items.length - 1))
+      : 0
+  );
+
+  $effect(() => {
+    if (items.length > 0 && activeTabIndex >= items.length) {
+      activeTabIndex = items.length - 1;
+    }
+  });
+
+  $effect(() => {
+    if (panelsRef) {
+      panelsRef.current = panelsElement;
+    }
+  });
+
+  function handleTabClick(index: number) {
+    if (index === activeTabIndex) {
+      return;
+    }
+
+    activeTabIndex = index;
+    onTabChange?.(index);
+  }
+
+  function focusTab(index: number) {
+    setTimeout(() => {
+      tabRefs[index]?.focus();
+    }, 0);
+  }
+
+  function handleKeyDown(event: KeyboardEvent, currentIndex: number) {
+    const tabCount = items.length;
+    if (tabCount === 0) {
+      return;
+    }
+
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      event.preventDefault();
+      const newIndex =
+        event.key === "ArrowLeft"
+          ? (currentIndex - 1 + tabCount) % tabCount
+          : (currentIndex + 1) % tabCount;
+      handleTabClick(newIndex);
+      focusTab(newIndex);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleTabClick(currentIndex);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      handleTabClick(0);
+      focusTab(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      const lastIndex = tabCount - 1;
+      handleTabClick(lastIndex);
+      focusTab(lastIndex);
+    }
+  }
+
+  let rootClass = $derived(
+    cn(
+      Classes.Tabs,
+      "tabs tab-container",
+      borderBottom && "border-stone-200 border-b pb-6 dark:border-stone-700",
+      classAttribute ?? className
+    )
+  );
+</script>
+
+<!--
+  Mint app integration:
+  - Wrap with a tab-state helper for URL hash sync, tab sync across components, and localStorage persistence
+  - The tab-state helper provides activeIndex and setActiveIndex for hash, sync, and persistence updates
+  - Connect onTabChange to setActiveIndex for full integration
+  - Pass panelsRef and use it to implement findInPanels for DOM-based navigation
+  - The component renders role="tabpanel" and aria-controls attributes used by DOM-based tab navigation
+-->
+
+{#if children}
+  <div aria-hidden="true" class="hidden">{@render children()}</div>
+{/if}
+
+  {#if items.length > 0}
+  <div class={rootClass}>
+    <!-- Svelte keeps the tablist on the semantic ul used by the original component. -->
+    <ul
+      aria-label={ariaLabel ?? "Tabs"}
+      class="not-prose mb-6 flex min-w-full flex-none gap-x-6 overflow-auto border-stone-200 border-b pb-px dark:border-stone-700"
+      data-component-part="tabs-list"
+      role="tablist"
+    >
+      {#each items as item, index (item.id)}
+        {@const title = item.title ?? DEFAULT_TAB_TITLE}
+        {@const isActive = index === selectedIndex}
+        <!-- The original component uses the li as the complete tab control; keep that DOM contract. -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+        <li
+          bind:this={tabRefs[index]}
+          aria-controls={`panel-${tabIds[index]}`}
+          aria-selected={isActive}
+          class="cursor-pointer"
+          data-child-heading-ids={item.childHeadingIds}
+          data-child-tab-ids={item.childTabIds}
+          data-component-part="tab"
+          data-tab-index={index}
+          id={tabIds[index]}
+          onclick={(event) => {
+            event.stopPropagation();
+            handleTabClick(index);
+          }}
+          onkeydown={(event) => handleKeyDown(event, index)}
+          role="tab"
+          tabindex={isActive ? 0 : -1}
+        >
+          <div
+            class={cn(
+              "-mb-px flex max-w-max items-center gap-1.5 whitespace-nowrap border-b pt-3 pb-2.5 font-semibold text-sm leading-6",
+              isActive
+                ? "border-current text-primary dark:text-primary-light"
+                : "border-transparent text-stone-900 hover:border-stone-300 dark:text-stone-200 dark:hover:border-stone-700"
+            )}
+            data-active={isActive}
+            data-component-part="tab-button"
+            data-testid={`tab-${title}`}
+          >
+            {#if item.icon}
+              <Icon
+                class={cn(
+                  "size-4 shrink-0",
+                  isActive
+                    ? "bg-primary dark:bg-primary-light"
+                    : "bg-stone-900 dark:bg-stone-200",
+                  Classes.TabIcon
+                )}
+                icon={item.icon}
+                iconLibrary={item.iconLibrary}
+                iconType={item.iconType}
+                overrideColor={true}
+              />
+            {/if}
+            {title}
+          </div>
+        </li>
+      {/each}
+    </ul>
+    <div bind:this={panelsElement} data-component-part="tabs-panels">
+      {#each items as item, index (item.id)}
+        {@const isActive = index === selectedIndex}
+        <div
+          aria-hidden={!isActive}
+          aria-labelledby={tabIds[index]}
+          class={cn("prose dark:prose-invert overflow-x-auto", !isActive && "hidden")}
+          data-component-part="tab-content"
+          id={`panel-${tabIds[index]}`}
+          role="tabpanel"
+          tabindex={isActive ? 0 : -1}
+        >
+          {#if typeof item.children === "string"}
+            {item.children}
+          {:else if item.children}
+            {@render item.children()}
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+type TabsProps = {
+    children?: Snippet;
+    defaultTabIndex?: number;
+    onTabChange?: (tabIndex: number) => void;
+    class?: string;
+    className?: string;
+    borderBottom?: boolean;
+    ariaLabel?: string;
+    panelsRef?: {
+        current: HTMLDivElement | null;
+    };
+};
+declare const Tabs: import("svelte").Component<TabsProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/tabs/TabsItem.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { getContext, untrack } from "svelte";
+  import type { Snippet } from "svelte";
+  import type { IconLibrary, IconType } from "../../utils/icon-utils";
+  import { TABS_CONTEXT, type TabsContext } from "./context";
+
+  type TabsItemProps = {
+    id?: string;
+    title: string;
+    icon?: string;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    children?: string | Snippet;
+    "data-child-tab-ids"?: string;
+    "data-child-heading-ids"?: string;
+  };
+
+  let {
+    id: customId,
+    title,
+    icon,
+    iconType,
+    iconLibrary,
+    children,
+    "data-child-tab-ids": childTabIds,
+    "data-child-heading-ids": childHeadingIds,
+  }: TabsItemProps = $props();
+
+  const tabsContext = getContext<TabsContext | undefined>(TABS_CONTEXT);
+  const itemId = Symbol("tabs-item");
+
+  // TabsItem is intentionally markup-free, preserving the original fragment-only item.
+  $effect(() => {
+    if (!tabsContext) {
+      return;
+    }
+
+    const item = {
+      id: itemId,
+      customId,
+      title,
+      icon,
+      iconType,
+      iconLibrary,
+      children,
+      childTabIds,
+      childHeadingIds,
+    };
+
+    // Track item prop changes, but never subscribe this effect to the parent's
+    // reactive items array while registration mutates it.
+    untrack(() => tabsContext.register(item));
+
+    return () => untrack(() => tabsContext.unregister(itemId));
+  });
+</script>

package/dist/components/tabs/TabsItem.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { IconLibrary, IconType } from "../../utils/icon-utils";
+type TabsItemProps = {
+    id?: string;
+    title: string;
+    icon?: string;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    children?: string | Snippet;
+    "data-child-tab-ids"?: string;
+    "data-child-heading-ids"?: string;
+};
+declare const TabsItem: import("svelte").Component<TabsItemProps, {}, "">;
+type TabsItem = ReturnType<typeof TabsItem>;
+export default TabsItem;

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { IconLibrary, IconType } from "../../utils/icon-utils";
+type TabsItemRecord = {
+    id: symbol;
+    customId?: string;
+    title: string;
+    icon?: string;
+    iconType?: IconType;
+    iconLibrary?: IconLibrary;
+    children?: string | Snippet;
+    childTabIds?: string;
+    childHeadingIds?: string;
+};
+type TabsContext = {
+    register: (item: TabsItemRecord) => void;
+    unregister: (id: symbol) => void;
+};
+declare const TABS_CONTEXT: unique symbol;
+export type { TabsContext, TabsItemRecord };
+export { TABS_CONTEXT };

package/dist/components/tabs/context.js

@@ -0,0 +1,2 @@
+const TABS_CONTEXT = Symbol("tabs-context");
+export { TABS_CONTEXT };

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

@@ -0,0 +1,27 @@
+import TabsItem from "./TabsItem.svelte";
+declare const Tabs: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+    defaultTabIndex?: number;
+    onTabChange?: (tabIndex: number) => void;
+    class?: string;
+    className?: string;
+    borderBottom?: boolean;
+    ariaLabel?: string;
+    panelsRef?: {
+        current: HTMLDivElement | null;
+    };
+}, {}, ""> & {
+    Item: import("svelte").Component<{
+        id?: string;
+        title: string;
+        icon?: string;
+        iconType?: import("../../utils/icon-utils").IconType;
+        iconLibrary?: import("../../utils/icon-utils").IconLibrary;
+        children?: string | import("svelte").Snippet;
+        "data-child-tab-ids"?: string;
+        "data-child-heading-ids"?: string;
+    }, {}, "">;
+};
+export type { default as TabsProps } from "./Tabs.svelte";
+export type { default as TabsItemProps } from "./TabsItem.svelte";
+export { Tabs, TabsItem };

package/dist/components/tabs/index.js

@@ -0,0 +1,5 @@
+import TabsItem from "./TabsItem.svelte";
+import TabsRoot from "./Tabs.svelte";
+// Preserve the React compound-component export for JavaScript consumers.
+const Tabs = Object.assign(TabsRoot, { Item: TabsItem });
+export { Tabs, TabsItem };

package/dist/components/tile/Tile.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import { isRemoteUrl } from "../../utils/is-remote-url";
+
+  const SIZE = 24;
+  const PLUS_SIZE = 10;
+  const CENTER = SIZE / 2;
+
+  const createPlusPattern = (color: string) => {
+    const svg = `
+    <svg width="${SIZE}" height="${SIZE}" xmlns="http://www.w3.org/2000/svg">
+      <g opacity="0.5">
+        <line x1="${CENTER}" y1="${CENTER - PLUS_SIZE / 2}" x2="${CENTER}" y2="${CENTER + PLUS_SIZE / 2}"
+              stroke="${color}" stroke-width="1" stroke-linecap="round"/>
+        <line x1="${CENTER - PLUS_SIZE / 2}" y1="${CENTER}" x2="${CENTER + PLUS_SIZE / 2}" y2="${CENTER}"
+              stroke="${color}" stroke-width="1" stroke-linecap="round"/>
+      </g>
+    </svg>
+  `;
+
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  };
+
+  const LIGHT_PATTERN = createPlusPattern("#F0F0F0");
+  const DARK_PATTERN = createPlusPattern("#232323");
+  const BG_SIZE = `${SIZE}px ${SIZE}px`;
+
+  export type TileProps = {
+    href: string;
+    children?: string | Snippet;
+    title?: string;
+    description?: string;
+    class?: string;
+    className?: string;
+  };
+
+  let {
+    href,
+    children,
+    title,
+    description,
+    class: classAttribute,
+    className,
+  }: TileProps = $props();
+
+  let tileClass = $derived(
+    cn(
+      Classes.Tile,
+      "group not-prose flex w-full min-w-0 cursor-pointer flex-col items-center justify-center gap-1",
+      className ?? classAttribute
+    )
+  );
+  let isExternalLink = $derived(isRemoteUrl(href));
+  let hasText = $derived(!!title || !!description);
+  const backgroundPatternClasses = cn(
+    "pointer-events-none size-full select-none bg-center bg-repeat-round [grid-area:1/1]",
+    "after:absolute after:left-0 after:h-full after:w-[7px] after:bg-stone-50 after:content-[''] dark:after:bg-stone-900",
+    "before:absolute before:right-0 before:h-full before:w-[7px] before:bg-stone-50 before:content-[''] dark:before:bg-stone-900"
+  );
+</script>
+
+<!-- Svelte keeps the React anchor as the root so the complete tile remains clickable. -->
+<a
+  class={tileClass}
+  href={href}
+  rel={isExternalLink ? "noreferrer" : undefined}
+  target={isExternalLink ? "_blank" : undefined}
+>
+  <div
+    class="relative grid h-[170px] w-full place-items-center overflow-hidden rounded-2xl bg-stone-50 py-1 dark:bg-stone-900"
+    data-component-part="tile-children-container"
+  >
+    <div
+      aria-hidden="true"
+      class={cn(backgroundPatternClasses, "block dark:hidden")}
+      data-component-part="tile-background-light"
+      style={`background-image:url("${LIGHT_PATTERN}");background-size:${BG_SIZE}`}
+    ></div>
+    <div
+      aria-hidden="true"
+      class={cn(backgroundPatternClasses, "hidden dark:block")}
+      data-component-part="tile-background-dark"
+      style={`background-image:url("${DARK_PATTERN}");background-size:${BG_SIZE}`}
+    ></div>
+    <div
+      class="flex size-full items-center justify-center p-8 [grid-area:1/1] [&_svg]:h-auto [&_svg]:max-h-full [&_svg]:w-auto [&_svg]:max-w-full"
+      data-component-part="tile-children-inner-container"
+    >
+      {#if typeof children === "string"}
+        {children}
+      {:else if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+
+  {#if hasText}
+    <div
+      class="flex w-full min-w-0 flex-col items-center justify-center gap-1 p-2"
+      data-component-part="tile-text-container"
+    >
+      {#if title}
+        <p
+          class="m-0 max-w-full truncate font-medium text-base text-stone-900 tracking-[-0.2px] dark:text-stone-200"
+          data-component-part="tile-title"
+          title={title}
+        >
+          {title}
+        </p>
+      {/if}
+      {#if description}
+        <p
+          class="m-0 max-w-full truncate font-normal text-sm text-stone-600 tracking-[-0.1px] dark:text-stone-400"
+          data-component-part="tile-description"
+          title={description}
+        >
+          {description}
+        </p>
+      {/if}
+    </div>
+  {/if}
+</a>

package/dist/components/tile/Tile.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+export type TileProps = {
+    href: string;
+    children?: string | Snippet;
+    title?: string;
+    description?: string;
+    class?: string;
+    className?: string;
+};
+declare const Tile: import("svelte").Component<TileProps, {}, "">;
+type Tile = ReturnType<typeof Tile>;
+export default Tile;

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

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

package/dist/components/tile/index.js

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