components-svelte 0.1.0

package/dist/components/code-block/BaseCodeBlock.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+  import CodeFooter from "./CodeFooter.svelte";
+  import type { CodeBlockProps } from "./types";
+  import { cn } from "../../utils/cn";
+  import {
+    getShikiHighlightedHtml,
+    type ShikiHighlightedHtmlArgs,
+  } from "../../utils/shiki";
+  import { useCalculateCodeLines } from "../../utils/shiki/lib";
+  import { getShikiBackgroundColors } from "../../utils/shiki/get-shiki-background-colors";
+
+  export type BaseCodeBlockProps = CodeBlockProps & {
+    isParentCodeGroup?: boolean;
+    shouldHighlight?: boolean;
+    forceExtract?: boolean;
+    codeString?: string;
+  };
+
+  const SMALL_EXPANDABLE_NUMBER_OF_LINES = 7;
+  const SMALL_EXPANDABLE_HEIGHT_OFFSET = 30;
+  const EXPANDED_HEIGHT_OFFSET = 40;
+  const SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT = 45;
+  const DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT = 190;
+
+  let {
+    expandable = false,
+    shouldHighlight = true,
+    children,
+    filename,
+    isParentCodeGroup,
+    isSmallText,
+    numberOfLines,
+    codeBlockTheme = "system",
+    codeBlockThemeObject = "system",
+    codeString = "",
+    class: className,
+    focus,
+    highlight,
+    language,
+    lang,
+    wrap,
+    lines,
+  }: BaseCodeBlockProps = $props();
+
+  function parseLineNumbers(value: string | undefined): number[] {
+    if (!value) {
+      return [];
+    }
+
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+
+  let focusLines = $derived(parseLineNumbers(focus));
+  let highlightLines = $derived(parseLineNumbers(highlight));
+  let opts = $derived.by(() => {
+    const options: {
+      highlightedLines?: number[];
+      focusedLines?: number[];
+    } = {};
+
+    if (highlightLines.length > 0) {
+      options.highlightedLines = highlightLines;
+    }
+    if (focusLines.length > 0) {
+      options.focusedLines = focusLines;
+    }
+
+    return options;
+  });
+
+  let selectedLang = $derived(lang || language);
+  let html = $state<string | undefined>();
+  // Keep the request counter non-reactive. It guards stale async results but
+  // must not become a dependency of the highlighting effect that increments it.
+  let highlightRequest = 0;
+
+  $effect(() => {
+    const request: string | undefined | Promise<string | undefined> =
+      selectedLang
+        ? getShikiHighlightedHtml({
+            codeString,
+            codeBlockTheme: codeBlockThemeObject,
+            language: shouldHighlight ? selectedLang : "text",
+            opts,
+          } satisfies ShikiHighlightedHtmlArgs)
+        : getShikiHighlightedHtml({
+            codeString,
+            codeBlockTheme: codeBlockThemeObject,
+            className: shouldHighlight ? className : "lang-text",
+            opts,
+          } satisfies ShikiHighlightedHtmlArgs);
+
+    const requestId = highlightRequest + 1;
+    highlightRequest = requestId;
+
+    if (request instanceof Promise) {
+      html = undefined;
+      void request.then((result) => {
+        if (requestId === highlightRequest) {
+          html = result;
+        }
+      });
+    } else {
+      html = request;
+    }
+  });
+
+  let resolvedNumberOfLines = $derived(
+    useCalculateCodeLines(html, numberOfLines)
+  );
+  let isExpanded = $state(false);
+  let calculatedHeight = $state(0);
+  let contentRef = $state<HTMLDivElement>();
+
+  $effect(() => {
+    const currentContentRef = contentRef;
+    if (!currentContentRef || !expandable) {
+      return;
+    }
+
+    const rafId = requestAnimationFrame(() => {
+      if (contentRef === currentContentRef) {
+        calculatedHeight =
+          currentContentRef.scrollHeight +
+          (resolvedNumberOfLines &&
+          resolvedNumberOfLines < SMALL_EXPANDABLE_NUMBER_OF_LINES
+            ? SMALL_EXPANDABLE_HEIGHT_OFFSET
+            : EXPANDED_HEIGHT_OFFSET);
+      }
+    });
+
+    return () => cancelAnimationFrame(rafId);
+  });
+
+  function toggleExpanded() {
+    isExpanded = !isExpanded;
+  }
+
+  let height = $derived.by(() => {
+    if (expandable) {
+      if (isExpanded) {
+        return calculatedHeight + "px";
+      }
+      if (
+        resolvedNumberOfLines &&
+        resolvedNumberOfLines < SMALL_EXPANDABLE_NUMBER_OF_LINES
+      ) {
+        return SMALL_EXPANDABLE_CODE_BLOCK_HEIGHT + "px";
+      }
+      return DEFAULT_EXPANDABLE_CODE_BLOCK_HEIGHT + "px";
+    }
+    if (isParentCodeGroup) {
+      return "100%";
+    }
+    return "auto";
+  });
+
+  let isFocusEnabled = $derived(focusLines.length > 0);
+  let isHighlightEnabled = $derived(highlightLines.length > 0);
+  let shikiBackgroundColors = $derived(
+    getShikiBackgroundColors(codeBlockTheme, html, codeString)
+  );
+  let showFadeOverlay = $derived(
+    !(wrap || isHighlightEnabled || expandable) && focusLines.length === 0
+  );
+
+  function styleToString(
+    styles: Record<string, string | number | undefined>
+  ): string {
+    return Object.entries(styles)
+      .filter(([, value]) => value !== undefined)
+      .map(([key, value]) => key + ":" + value)
+      .join(";");
+  }
+
+  let rootStyle = $derived(
+    styleToString({
+      "font-variant-ligatures": "none",
+      height,
+      "background-color": shikiBackgroundColors?.light,
+      "--shiki-dark-bg": shikiBackgroundColors?.dark,
+    })
+  );
+  let fadeStyle = $derived(
+    styleToString({
+      "--fade-color-light": shikiBackgroundColors?.light,
+      "--fade-color-dark": shikiBackgroundColors?.dark,
+    })
+  );
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex: scrollable code blocks must be keyboard-focusable -->
+<div
+  class={cn(
+    "children:!my-0 children:!shadow-none children:!bg-transparent relative h-full w-0 min-w-full max-w-full rounded-[14px] px-4 py-3.5 text-sm leading-6 dark:bg-codeblock",
+    "code-block-background overflow-x-auto transition-[height] duration-300 ease-in-out",
+    "**:outline-0 **:ring-0 **:focus:outline-0 **:focus:ring-0",
+    filename ? "rounded-[14px]" : "rounded-2xl",
+    codeBlockTheme === "system" ? "bg-white" : "bg-codeblock",
+    (expandable || isParentCodeGroup) && "overflow-auto",
+    expandable && (isExpanded ? "overflow-y-auto" : "overflow-y-hidden"),
+    wrap
+      ? "code-block-wrap overflow-x-hidden whitespace-pre-wrap"
+      : "overflow-x-auto",
+    lines && "has-line-numbers",
+    isFocusEnabled && "has-focused",
+    isHighlightEnabled && "has-highlighted",
+    codeBlockTheme === "system"
+      ? "scrollbar-code-system"
+      : "scrollbar-code-dark"
+  )}
+  data-component-part="code-block-root"
+  style={rootStyle}
+  tabindex={0}
+>
+<div
+    class={cn(
+      "font-mono",
+      wrap ? "whitespace-pre-wrap" : "whitespace-pre",
+      isParentCodeGroup && "h-full flex-none text-sm",
+      isSmallText ? "text-xs leading-[1.35rem]" : "leading-6"
+    )}
+    bind:this={contentRef}
+    data-component-part={isParentCodeGroup ? "code-group-tab-content" : undefined}
+  >
+    {#if html}
+      {@html html}
+    {:else if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+{#if showFadeOverlay}
+  <div aria-hidden="true" data-fade-overlay style={fadeStyle}></div>
+{/if}
+
+{#if expandable}
+  <CodeFooter
+    isExpanded={isExpanded}
+    numberOfLines={resolvedNumberOfLines}
+    toggleExpanded={toggleExpanded}
+  />
+{/if}

package/dist/components/code-block/BaseCodeBlock.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CodeBlockProps } from "./types";
+export type BaseCodeBlockProps = CodeBlockProps & {
+    isParentCodeGroup?: boolean;
+    shouldHighlight?: boolean;
+    forceExtract?: boolean;
+    codeString?: string;
+};
+declare const BaseCodeBlock: import("svelte").Component<BaseCodeBlockProps, {}, "">;
+type BaseCodeBlock = ReturnType<typeof BaseCodeBlock>;
+export default BaseCodeBlock;

package/dist/components/code-block/CodeBlock.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import { CODE_GROUP_CONTEXT, type CodeGroupContext } from "../code-group/context";
+  import { getContext, untrack } from "svelte";
+  import { getCodeString } from "../../utils/shiki/lib";
+  import BaseCodeBlock from "./BaseCodeBlock.svelte";
+  import CodeHeader from "./CodeHeader.svelte";
+  import CopyToClipboardButton from "./CopyToClipboardButton.svelte";
+  import type {
+    CodeBlockProps as CodeBlockPropsFromTypes,
+    CopyToClipboardButtonProps,
+  } from "./types";
+
+  export type CodeBlockProps = CodeBlockPropsFromTypes;
+
+  let {
+    filename,
+    children,
+    class: className,
+    icon,
+    lang,
+    language,
+    wrap,
+    lines,
+    expandable,
+    highlight,
+    focus,
+    numberOfLines,
+    hideAskAiButton,
+    isSmallText,
+    feedbackModalOpen,
+    anchorRef,
+    codeBlockTheme = "system",
+    codeBlockThemeObject = "system",
+    askAiButton,
+    feedbackButton,
+    copyButtonProps,
+  }: CodeBlockProps = $props();
+
+  let codeSourceRef = $state<HTMLDivElement>();
+  let extractedCode = $state("");
+  let rootRef = $state<HTMLDivElement>();
+  const codeGroupContext = getContext<CodeGroupContext | undefined>(CODE_GROUP_CONTEXT);
+  const codeGroupChildId = Symbol("code-group-child");
+
+  $effect(() => {
+    if (!codeSourceRef) {
+      return;
+    }
+
+    const nextCode = codeSourceRef.textContent ?? "";
+    if (nextCode !== extractedCode) {
+      extractedCode = nextCode;
+    }
+  });
+
+  let codeString = $derived(getCodeString(extractedCode, className, true));
+  let hasGrayBackgroundContainer = $derived(!!filename || !!icon);
+
+  // Register the CodeBlock with a parent CodeGroup — replaces React child inspection.
+  $effect(() => {
+    if (!codeGroupContext) {
+      return;
+    }
+
+    const child = {
+      id: codeGroupChildId,
+      filename,
+      icon,
+      lang,
+      class: className,
+      language,
+      wrap,
+      lines,
+      expandable,
+      highlight,
+      focus,
+      numberOfLines,
+      isSmallText,
+      feedbackModalOpen,
+      anchorRef,
+      codeBlockTheme,
+      codeBlockThemeObject,
+      askAiButton,
+      feedbackButton,
+      copyButtonProps,
+      children,
+      codeString,
+    };
+
+    // Keep the child subscribed to its own props without subscribing it to the
+    // parent's reactive child array while registration mutates that array.
+    untrack(() => codeGroupContext.register(child));
+
+    return () => untrack(() => codeGroupContext.unregister(codeGroupChildId));
+  });
+
+  $effect(() => {
+    if (anchorRef && rootRef) {
+      anchorRef.current = rootRef;
+    }
+  });
+</script>
+
+<div
+  aria-hidden="true"
+  class="hidden"
+  bind:this={codeSourceRef}
+>
+  {#if children}{@render children()}{/if}
+</div>
+
+{#if !codeGroupContext}
+  <div
+    bind:this={rootRef}
+    class={cn(
+      Classes.CodeBlock,
+      "not-prose group relative mt-5 mb-8 rounded-2xl",
+      codeBlockTheme === "system" &&
+        "codeblock-light dark:twoslash-dark border border-stone-950/10 bg-stone-50 text-stone-950 dark:border-white/10 dark:bg-white/5 dark:text-stone-50",
+      codeBlockTheme === "dark" &&
+        "codeblock-dark twoslash-dark dark:twoslash-dark bg-codeblock text-stone-50 ring-1 ring-transparent dark:bg-white/5 dark:ring-white/[0.14]",
+      hasGrayBackgroundContainer
+        ? "p-0.5"
+        : "bg-transparent dark:bg-transparent",
+      feedbackModalOpen && "border border-primary dark:border-primary-light",
+      className
+    )}
+    {...(hasGrayBackgroundContainer
+      ? { "data-has-header": "" }
+      : { "data-has-floating-buttons": "" })}
+  >
+    {#if hasGrayBackgroundContainer}
+      <CodeHeader
+        codeBlockTheme={codeBlockTheme}
+        filename={filename}
+        icon={icon}
+      >
+        {#snippet children()}
+          {#if feedbackButton}{@render feedbackButton()}{/if}
+          <CopyToClipboardButton
+            codeBlockTheme={codeBlockTheme}
+            textToCopy={codeString}
+            {...(copyButtonProps as Omit<CopyToClipboardButtonProps, "textToCopy">)}
+          />
+          {#if askAiButton}{@render askAiButton()}{/if}
+        {/snippet}
+      </CodeHeader>
+    {:else}
+      <div
+        class="absolute top-3 right-4 flex items-center gap-1.5"
+        data-floating-buttons
+      >
+        {#if feedbackButton}{@render feedbackButton()}{/if}
+        <CopyToClipboardButton
+          codeBlockTheme={codeBlockTheme}
+          textToCopy={codeString}
+          {...(copyButtonProps as Omit<CopyToClipboardButtonProps, "textToCopy">)}
+        />
+        {#if askAiButton}{@render askAiButton()}{/if}
+      </div>
+    {/if}
+
+    <BaseCodeBlock
+      class={className}
+      codeBlockTheme={codeBlockTheme}
+      codeBlockThemeObject={codeBlockThemeObject}
+      codeString={codeString}
+      expandable={expandable}
+      filename={filename}
+      focus={focus}
+      forceExtract
+      highlight={highlight}
+      isSmallText={isSmallText}
+      lang={lang}
+      language={language}
+      lines={lines}
+      numberOfLines={numberOfLines}
+      wrap={wrap}
+    >
+      {#if children}{@render children()}{/if}
+    </BaseCodeBlock>
+  </div>
+{/if}

package/dist/components/code-block/CodeBlock.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { CodeBlockProps as CodeBlockPropsFromTypes } from "./types";
+export type CodeBlockProps = CodeBlockPropsFromTypes;
+declare const CodeBlock: import("svelte").Component<CodeBlockPropsFromTypes, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/code-block/CodeFooter.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Ellipsis } from "@lucide/svelte";
+
+  export type CodeFooterProps = {
+    numberOfLines: number | undefined;
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+  };
+
+  let {
+    numberOfLines,
+    isExpanded,
+    toggleExpanded,
+  }: CodeFooterProps = $props();
+</script>
+
+{#if numberOfLines}
+  <div
+    class="flex items-center px-3 py-1 font-medium text-stone-500 text-xs hover:text-stone-600 dark:text-stone-400 dark:hover:text-stone-300"
+    data-component-part="code-block-footer"
+  >
+    <button
+      class="flex flex-1 items-center gap-1.5 py-1.5"
+      data-component-part="code-block-footer-button"
+      onclick={toggleExpanded}
+      type="button"
+    >
+      <Ellipsis class="size-3.5 shrink-0 text-stone-500 dark:text-stone-400" />
+      {isExpanded
+        ? "Collapse"
+        : "See all " + numberOfLines + " line" + (numberOfLines === 1 ? "" : "s")}
+    </button>
+  </div>
+{/if}

package/dist/components/code-block/CodeFooter.svelte.d.ts

@@ -0,0 +1,8 @@
+export type CodeFooterProps = {
+    numberOfLines: number | undefined;
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+};
+declare const CodeFooter: import("svelte").Component<CodeFooterProps, {}, "">;
+type CodeFooter = ReturnType<typeof CodeFooter>;
+export default CodeFooter;

package/dist/components/code-block/CodeHeader.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Icon from "../icon/Icon.svelte";
+  import { Classes } from "../../constants/selectors";
+  import { cn } from "../../utils/cn";
+  import type { CodeBlockTheme } from "../../utils/shiki/code-styling";
+
+  export type CodeHeaderProps = {
+    filename?: string;
+    icon?: string;
+    codeBlockTheme?: CodeBlockTheme;
+    children?: Snippet;
+  };
+
+  let {
+    filename,
+    icon,
+    codeBlockTheme = "system",
+    children,
+  }: CodeHeaderProps = $props();
+</script>
+
+<div
+  class="flex rounded-t-[14px] py-1 pr-2.5 pl-4 font-medium text-stone-400 text-xs leading-6"
+  data-component-part="code-block-header"
+>
+  <div
+    class={cn(
+      "flex min-w-0 grow-0 items-center gap-1.5 text-stone-700 dark:text-stone-300",
+      codeBlockTheme === "dark" && "text-stone-300"
+    )}
+    data-component-part="code-block-header-filename"
+  >
+    {#if icon}
+      <Icon
+        class={cn(
+          "size-3.5 shrink-0 bg-stone-500 dark:bg-stone-400",
+          Classes.CodeBlockIcon
+        )}
+        icon={icon}
+        iconType="regular"
+        overrideColor
+      />
+    {/if}
+    {#if filename}
+      <span class="mr-2 min-w-0 truncate">{filename}</span>
+    {/if}
+  </div>
+  <div class="flex flex-1 items-center justify-end gap-1.5">
+    {#if children}{@render children()}{/if}
+  </div>
+</div>

package/dist/components/code-block/CodeHeader.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { CodeBlockTheme } from "../../utils/shiki/code-styling";
+export type CodeHeaderProps = {
+    filename?: string;
+    icon?: string;
+    codeBlockTheme?: CodeBlockTheme;
+    children?: Snippet;
+};
+declare const CodeHeader: import("svelte").Component<CodeHeaderProps, {}, "">;
+type CodeHeader = ReturnType<typeof CodeHeader>;
+export default CodeHeader;

package/dist/components/code-block/CopyToClipboardButton.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { copyToClipboard } from "../../utils/copy-to-clipboard";
+  import type { CopyToClipboardButtonProps } from "./types";
+  import { cn } from "../../utils/cn";
+
+  const DEFAULT_COPY_BUTTON_ARIA_LABEL = "Copy the contents from the code block";
+  const DEFAULT_TOOLTIP_COPY_TEXT = "Copy";
+  const DEFAULT_TOOLTIP_COPIED_TEXT = "Copied!";
+
+  let {
+    textToCopy,
+    onCopied,
+    class: className,
+    showTooltip = true,
+    codeBlockTheme,
+    copyButtonAriaLabel = DEFAULT_COPY_BUTTON_ARIA_LABEL,
+    tooltipCopyText = DEFAULT_TOOLTIP_COPY_TEXT,
+    tooltipCopiedText = DEFAULT_TOOLTIP_COPIED_TEXT,
+    ...buttonProps
+  }: CopyToClipboardButtonProps = $props();
+
+  let isCopiedActive = $state(false);
+  let isDisabled = $state(false);
+  let trimmedTextToCopy = $derived(textToCopy.trim());
+
+  $effect(() => {
+    // Hide copy button if the browser does not support it
+    const canCopy =
+      typeof window === "undefined" ||
+      !!navigator.clipboard?.writeText ||
+      typeof document.execCommand === "function";
+
+    if (!canCopy) {
+      console.warn(
+        "The browser's Clipboard API and copy fallback are unavailable."
+      );
+      isDisabled = true;
+    } else {
+      isDisabled = false;
+    }
+  });
+
+  async function onCopy() {
+    const result = await copyToClipboard(trimmedTextToCopy);
+    if (onCopied) {
+      onCopied(result, trimmedTextToCopy);
+    }
+    if (result === "success") {
+      isCopiedActive = true;
+      setTimeout(() => {
+        isCopiedActive = false;
+      }, 2000);
+    }
+  }
+</script>
+
+{#if trimmedTextToCopy && !isDisabled}
+  <div class={cn("relative z-10 select-none", className)}>
+    <button
+      {...buttonProps}
+      aria-label={copyButtonAriaLabel}
+      class="peer group/copy-button flex size-[26px] items-center justify-center rounded-md backdrop-blur"
+      data-testid="copy-code-button"
+      onclick={onCopy}
+      type="button"
+    >
+      {#if isCopiedActive}
+        <svg
+          class={cn(
+            "size-4",
+            codeBlockTheme === "system" && "fill-primary dark:fill-primary-light",
+            codeBlockTheme === "dark" && "fill-primary-light"
+          )}
+          fill="none"
+          height="11"
+          role="img"
+          viewBox="0 0 16 11"
+          width="16"
+        >
+          <title>Copied</title>
+          <path d="M14.7813 1.21873C15.0751 1.51248 15.0751 1.98748 14.7813 2.2781L6.53135 10.5312C6.2376 10.825 5.7626 10.825 5.47197 10.5312L1.21885 6.28123C0.925098 5.98748 0.925098 5.51248 1.21885 5.22185C1.5126 4.93123 1.9876 4.9281 2.27822 5.22185L5.99697 8.9406L13.7188 1.21873C14.0126 0.924976 14.4876 0.924976 14.7782 1.21873H14.7813Z" />
+        </svg>
+      {:else}
+        <svg
+          class={cn(
+            "size-4",
+            codeBlockTheme === "system" &&
+              "text-stone-400 group-hover/copy-button:text-stone-500 dark:text-white/40 dark:group-hover/copy-button:text-white/60",
+            codeBlockTheme === "dark" &&
+              "text-white/40 group-hover/copy-button:text-white/60"
+          )}
+          fill="none"
+          height="18"
+          viewBox="0 0 18 18"
+          width="18"
+        >
+          <title>Copy</title>
+          <path
+            d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </svg>
+      {/if}
+    </button>
+    {#if showTooltip}
+      <div
+        aria-hidden="true"
+        class="absolute top-11 left-1/2 -translate-x-1/2 -translate-y-1/2 transform whitespace-nowrap rounded-lg bg-primary-dark px-1.5 py-0.5 text-tooltip-foreground text-xs opacity-0 peer-hover:opacity-100"
+      >
+        {isCopiedActive ? tooltipCopiedText : tooltipCopyText}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/code-block/CopyToClipboardButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CopyToClipboardButtonProps } from "./types";
+declare const CopyToClipboardButton: import("svelte").Component<CopyToClipboardButtonProps, {}, "">;
+type CopyToClipboardButton = ReturnType<typeof CopyToClipboardButton>;
+export default CopyToClipboardButton;