components-svelte 0.1.0

package/dist/components/expandable/Expandable.svelte

@@ -0,0 +1,182 @@
+<script module lang="ts">
+  // A module-local counter gives each instance a stable ID in SSR and the browser.
+  let nextExpandableId = 0;
+</script>
+
+<script lang="ts">
+  import { onMount as onMountLifecycle } from "svelte";
+  import type { Snippet } from "svelte";
+  import { Classes } from "../../constants/selectors";
+  import Icon from "../icon/Icon.svelte";
+  import { useExpandableMemory } from "../../hooks/use-expandable-memory.svelte";
+  import { cn } from "../../utils/cn";
+
+  const EXPANDABLE_CONTENT_CLASS = "expandable-content";
+  const DEFAULT_OPENED_TEXT = "Hide";
+  const DEFAULT_CLOSED_TEXT = "Show";
+  const DEFAULT_TITLE = "child attributes";
+
+  type ExpandableProps = {
+    title?: string;
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    lazy?: boolean;
+    class?: string;
+    children?: Snippet;
+    uniqueParamId?: string;
+    onMount?: () => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    openedText?: string;
+    closedText?: string;
+    hasScrolledToAnchorRef?: { current: boolean };
+    anchor?: string;
+  };
+
+  let {
+    title = DEFAULT_TITLE,
+    defaultOpen = false,
+    onChange: onChangeProp,
+    lazy = false,
+    class: className,
+    children,
+    uniqueParamId,
+    onMount: onMountProp,
+    onOpen,
+    onClose,
+    openedText = DEFAULT_OPENED_TEXT,
+    closedText = DEFAULT_CLOSED_TEXT,
+    hasScrolledToAnchorRef,
+    anchor,
+  }: ExpandableProps = $props();
+
+  let expandableRef: HTMLDetailsElement | null = $state(null);
+  // Svelte state initializes once here, matching React useState semantics.
+  // svelte-ignore state_referenced_locally
+  const expandableMemory = useExpandableMemory(
+    () => uniqueParamId,
+    () => defaultOpen,
+    () => expandableRef
+  );
+
+  // Svelte state initializes once here, matching React useState semantics.
+  // svelte-ignore state_referenced_locally
+  let localOpen = $state(defaultOpen);
+
+  let containsAnchor = $derived(
+    Boolean(uniqueParamId && anchor?.includes(uniqueParamId))
+  );
+  let shouldOverrideForAnchor = $derived(
+    containsAnchor && !hasScrolledToAnchorRef?.current
+  );
+  let shouldUseSessionStorage = $derived(!!uniqueParamId);
+
+  let open = $derived(
+    shouldUseSessionStorage
+      ? shouldOverrideForAnchor
+        ? true
+        : expandableMemory.isInSessionStorage
+          ? expandableMemory.isExpanded
+          : defaultOpen
+      : localOpen
+  );
+
+  // Svelte state initializes once here, matching React useState semantics.
+  // svelte-ignore state_referenced_locally
+  let shouldRenderChildren = $state(open || !lazy);
+
+  // Svelte effect replaces React useLayoutEffect for rendering lazy children
+  // as soon as the expandable is opened.
+  $effect(() => {
+    if (open) {
+      shouldRenderChildren = true;
+    }
+  });
+
+  // Svelte lifecycle replaces the one-time React useEffect mount callback.
+  onMountLifecycle(() => {
+    onMountProp?.();
+  });
+
+  // Svelte has no direct equivalent of React useId; keep the generated value
+  // stable for this component instance so aria-controls remains consistent.
+  const svelteId = `expandable-${++nextExpandableId}`;
+  let contentId = $derived(
+    `${title}-${svelteId}-content`.replace(/\s+/g, "-")
+  );
+
+  function onChange(openState: boolean) {
+    shouldRenderChildren = true;
+
+    onChangeProp?.(openState);
+
+    if (openState) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }
+
+  function setOpenState(newOpenState: boolean) {
+    if (shouldUseSessionStorage) {
+      expandableMemory.onManualToggle(newOpenState);
+    } else {
+      localOpen = newOpenState;
+    }
+
+    onChange(newOpenState);
+  }
+
+  function handleToggle(event: Event) {
+    const details = event.currentTarget as HTMLDetailsElement;
+    const newState = details.open;
+    if (newState !== open) {
+      setOpenState(newState);
+    }
+  }
+</script>
+
+<details
+  bind:this={expandableRef}
+  class={cn(Classes.Expandable, "mt-4 rounded-xl border-standard", className)}
+  data-component-part="expandable"
+  data-testid={uniqueParamId ? `${uniqueParamId}-children` : undefined}
+  ontoggle={handleToggle}
+  open={open}
+>
+  <summary
+    aria-controls={contentId}
+    aria-expanded={open}
+    class={cn(
+      "not-prose flex w-full cursor-pointer flex-row content-center items-center text-sm",
+      "rounded-t-xl px-3.5 py-3 text-stone-600 hover:bg-stone-50/50 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-white/5 dark:hover:text-stone-200",
+      "list-none [&::-webkit-details-marker]:hidden",
+      !open && "rounded-b-xl"
+    )}
+    data-component-part="expandable-button"
+  >
+    <Icon
+      class={cn("size-2.5 bg-stone-400 transition-transform", open && "rotate-90")}
+      icon="angle-right"
+      overrideColor={true}
+      overrideSize={true}
+    />
+    <div class="ml-3 text-left leading-tight">
+      <p class="m-0" contenteditable="false">
+        {open ? openedText : closedText} {title}
+      </p>
+    </div>
+  </summary>
+  <div
+    class={cn(
+      EXPANDABLE_CONTENT_CLASS,
+      "mx-3 border-stone-100 border-t px-2 dark:border-white/10"
+    )}
+    data-component-part={EXPANDABLE_CONTENT_CLASS}
+    id={contentId}
+  >
+    {#if shouldRenderChildren && children}
+      {@render children()}
+    {/if}
+  </div>
+</details>

package/dist/components/expandable/Expandable.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+type ExpandableProps = {
+    title?: string;
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    lazy?: boolean;
+    class?: string;
+    children?: Snippet;
+    uniqueParamId?: string;
+    onMount?: () => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    openedText?: string;
+    closedText?: string;
+    hasScrolledToAnchorRef?: {
+        current: boolean;
+    };
+    anchor?: string;
+};
+declare const Expandable: import("svelte").Component<ExpandableProps, {}, "">;
+type Expandable = ReturnType<typeof Expandable>;
+export default Expandable;

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

@@ -0,0 +1,3 @@
+import Expandable from "./Expandable.svelte";
+export type { default as ExpandableProps } from "./Expandable.svelte";
+export { Expandable };

package/dist/components/expandable/index.js

@@ -0,0 +1,2 @@
+import Expandable from "./Expandable.svelte";
+export { Expandable };

package/dist/components/frame/Frame.svelte

@@ -0,0 +1,118 @@
+<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 { enhanceVideoProps } from "../../utils/enhance-video-props";
+
+  type FrameStyle = Record<string, string | number | undefined>;
+
+  type FrameProps = {
+    as?: "div";
+    style?: FrameStyle;
+    class?: string;
+    className?: string;
+    children?: Snippet;
+    title?: string;
+    description?: string;
+    // Svelte snippet replaces React's renderDescription callback.
+    renderDescription?: Snippet<[string]>;
+  };
+
+  let {
+    as = "div",
+    style,
+    class: classAttribute,
+    className,
+    children,
+    title,
+    description,
+    renderDescription,
+  }: FrameProps = $props();
+
+  let frameClass = $derived(classAttribute ?? className);
+
+  // Svelte style strings replace React's CSSProperties object on the DOM node.
+  function styleToString(styles: FrameStyle | undefined): string | undefined {
+    if (!styles) {
+      return undefined;
+    }
+
+    return Object.entries(styles)
+      .filter(([, value]) => value !== undefined)
+      .map(([property, value]) => {
+        const cssProperty = property.startsWith("--")
+          ? property
+          : property.replace(/[A-Z]/g, (character) => `-${character.toLowerCase()}`);
+        return `${cssProperty}:${value}`;
+      })
+      .join(";");
+  }
+
+</script>
+
+<!-- `as` remains a div because FrameProps intentionally supports only div. -->
+{#if as === "div"}
+  <div class={frameClass} data-component-part="frame-container">
+    {#if title}
+      <div class="not-prose mb-4 flex items-center space-x-2">
+        <span aria-hidden="true" class="contents">
+          <Icon
+            class="size-4 flex-none bg-stone-400 dark:bg-stone-300"
+            icon="diagram-project"
+            overrideColor={true}
+            overrideSize={true}
+          />
+        </span>
+        <p class="font-medium text-sm text-stone-700 dark:text-stone-200">
+          {title}
+        </p>
+      </div>
+    {/if}
+
+    <div
+      class={cn(
+        Classes.Frame,
+        "not-prose relative overflow-hidden rounded-2xl bg-stone-50/50 p-2 dark:bg-stone-800/25"
+      )}
+      data-component-part="frame"
+      data-name="frame"
+      style={styleToString(style)}
+    >
+      <div
+        aria-hidden="true"
+        class="mask-[linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:mask-[linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))] absolute inset-0 bg-grid-stone-200/20 dark:bg-grid-white/5"
+        data-component-part="frame-background-pattern"
+        style="background-position:10px 10px"
+      ></div>
+      <div
+        use:enhanceVideoProps
+        class="relative flex w-full justify-center overflow-hidden rounded-xl bg-white dark:bg-stone-800"
+        data-component-part="frame-content"
+      >
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+
+      {#if description}
+        <div
+          class="relative mt-3 flex w-full justify-center rounded-2xl bg-white px-8 pt-0 pb-2 text-sm text-stone-700 dark:bg-stone-800 dark:text-stone-400"
+          contenteditable="false"
+          data-component-part="frame-description"
+        >
+          {#if renderDescription}
+            {@render renderDescription(description)}
+          {:else}
+            <p>{description}</p>
+          {/if}
+        </div>
+      {/if}
+      <div
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0 rounded-2xl border border-black/5 dark:border-white/5"
+        data-component-part="frame-border"
+      ></div>
+    </div>
+  </div>
+{/if}

package/dist/components/frame/Frame.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type FrameStyle = Record<string, string | number | undefined>;
+type FrameProps = {
+    as?: "div";
+    style?: FrameStyle;
+    class?: string;
+    className?: string;
+    children?: Snippet;
+    title?: string;
+    description?: string;
+    renderDescription?: Snippet<[string]>;
+};
+declare const Frame: import("svelte").Component<FrameProps, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

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

@@ -0,0 +1,3 @@
+import Frame from "./Frame.svelte";
+export type { default as FrameProps } from "./Frame.svelte";
+export { Frame };

package/dist/components/frame/index.js

@@ -0,0 +1,2 @@
+import Frame from "./Frame.svelte";
+export { Frame };

package/dist/components/icon/Icon.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { MINTLIFY_ICONS_CDN_URL } from "../../constants/index";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import { getIconUrl, ICON_TYPES, type IconLibrary, type IconType, isBrandsIcon, type PageType } from "../../utils/icon-utils";
+  import { isAbsoluteUrl } from "../../utils/is-absolute-url";
+
+  type IconProps = {
+    icon: string;
+    iconType?: IconType;
+    class?: string;
+    color?: string;
+    colorLight?: string;
+    colorDark?: string;
+    overrideColor?: boolean;
+    size?: number;
+    overrideSize?: boolean;
+    iconLibrary?: IconLibrary;
+    basePath?: string;
+    pageType?: PageType;
+  };
+
+  let {
+    icon,
+    iconType,
+    color,
+    colorLight,
+    colorDark,
+    size,
+    class: className,
+    iconLibrary = "fontawesome",
+    basePath,
+    pageType,
+    overrideColor,
+    overrideSize,
+  }: IconProps = $props();
+
+  // Svelte style — replaces React CSSProperties
+  let style = $derived.by(() => {
+    const base: Record<string, string | number> = {
+      display: "inline-block",
+      verticalAlign: "middle",
+    };
+    if (!overrideSize) {
+      base.width = size || 16;
+      base.height = size || 16;
+    }
+    return base;
+  });
+
+  let hasLightDarkColors = $derived(!!(colorLight && colorDark));
+
+  let styleWithColors = $derived.by(() => {
+    const s: Record<string, string | number> = { ...style };
+    if (hasLightDarkColors) {
+      s["--color-light"] = colorLight!;
+      s["--color-dark"] = colorDark!;
+    }
+    return s;
+  });
+
+  let classNames = $derived(
+    cn(
+      Classes.Icon,
+      "inline",
+      !(color || hasLightDarkColors || overrideColor) && "bg-primary dark:bg-primary-light",
+      hasLightDarkColors && "bg-(--color-light) dark:bg-(--color-dark)",
+      className
+    )
+  );
+
+  let isPdf = $derived(pageType === "pdf");
+  let url = $derived(getIconUrl(icon.toLowerCase(), iconType, iconLibrary));
+
+  let isInvalidIconType = $derived(iconType ? !ICON_TYPES.includes(iconType as any) : false);
+
+  // For Svelte, we need to handle style string conversion
+  function styleToString(s: Record<string, string | number>): string {
+    return Object.entries(s)
+      .map(([k, v]) => {
+        const cssKey = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+        // Handle CSS variables --color-light
+        const key = k.startsWith("--") ? k : cssKey;
+        return `${key}:${v}`;
+      })
+      .join(";");
+  }
+
+  let isAbsoluteOrSlash = $derived(typeof icon === "string" && (isAbsoluteUrl(icon) || icon.startsWith("/")));
+  let isMintlifyCdn = $derived(isAbsoluteOrSlash && (icon.startsWith(MINTLIFY_ICONS_CDN_URL) || icon.startsWith("https://mintlify.b-cdn.net")));
+</script>
+
+{#if isInvalidIconType}
+  <!-- Svelte: log invalid iconType like React console.log -->
+  {console.log(`Invalid iconType ${iconType} expected one of: ${ICON_TYPES.join(", ")}`)}
+{/if}
+
+{#if isAbsoluteOrSlash}
+  {#if isMintlifyCdn}
+    <svg
+      class={classNames}
+      data-component-part="icon-svg"
+      style={`${styleToString(styleWithColors)}; -webkit-mask-image: url(${icon}); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(${icon}); mask-repeat: no-repeat; mask-position: center; mask-size: 100%; ${!hasLightDarkColors ? "background-color: currentColor;" : ""}`}
+    ></svg>
+  {:else}
+    {@const iconUrl = icon.startsWith("/") && basePath ? `${basePath}${icon}` : icon}
+    <img
+      alt={icon}
+      class={cn(classNames, "bg-transparent dark:bg-transparent")}
+      data-component-part="icon-image"
+      src={iconUrl}
+      style={styleToString(styleWithColors)}
+    />
+  {/if}
+{:else if isPdf}
+  <img
+    alt={icon}
+    class={cn(classNames, !(color || overrideColor || hasLightDarkColors) && "bg-stone-800 dark:bg-stone-100")}
+    data-component-part="icon-image"
+    src={url}
+    style={`background-color: transparent; ${styleToString(styleWithColors)}`}
+  />
+{:else}
+  <svg
+    class={cn(classNames, !(color || overrideColor || hasLightDarkColors) && "bg-stone-800 dark:bg-stone-100")}
+    data-component-part="icon-svg"
+    style={`${styleToString(styleWithColors)}; -webkit-mask-image: url(${url}); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(${url}); mask-repeat: no-repeat; mask-position: center; mask-size: ${iconLibrary === "lucide" && !isBrandsIcon(icon) ? "100%" : "auto"}; ${color ? `background-color: ${color};` : ""}`}
+  ></svg>
+{/if}

package/dist/components/icon/Icon.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type IconLibrary, type IconType, type PageType } from "../../utils/icon-utils";
+type IconProps = {
+    icon: string;
+    iconType?: IconType;
+    class?: string;
+    color?: string;
+    colorLight?: string;
+    colorDark?: string;
+    overrideColor?: boolean;
+    size?: number;
+    overrideSize?: boolean;
+    iconLibrary?: IconLibrary;
+    basePath?: string;
+    pageType?: PageType;
+};
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

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

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

package/dist/components/icon/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+export * from "./accordion";
+export * from "./badge";
+export * from "./callout";
+export * from "./card";
+export * from "./code-block";
+export * from "./code-group";
+export * from "./color";
+export * from "./columns";
+export * from "./expandable";
+export * from "./frame";
+export * from "./icon";
+export * from "./mermaid";
+export * from "./panel";
+export * from "./property";
+export * from "./search";
+export * from "./steps";
+export * from "./tabs";
+export * from "./tile";
+export * from "./tooltip";
+export * from "./tree";
+export * from "./update";
+export * from "./view";

package/dist/components/index.js

@@ -0,0 +1,22 @@
+export * from "./accordion";
+export * from "./badge";
+export * from "./callout";
+export * from "./card";
+export * from "./code-block";
+export * from "./code-group";
+export * from "./color";
+export * from "./columns";
+export * from "./expandable";
+export * from "./frame";
+export * from "./icon";
+export * from "./mermaid";
+export * from "./panel";
+export * from "./property";
+export * from "./search";
+export * from "./steps";
+export * from "./tabs";
+export * from "./tile";
+export * from "./tooltip";
+export * from "./tree";
+export * from "./update";
+export * from "./view";