@stubber/ui 1.0.0

package/dist/components/PrimaryButton.svelte

@@ -0,0 +1,182 @@
+<script>
+  export let label = "";
+  export let color = "primary";
+  export let variant = "regular"; // "regular" | "secondary" | "ghost | "secondary-transparent"
+  export let icon = "";
+  export let width = "fit"; // "fit" | "full";
+  export let disabled = false;
+  export let type = "button"; // "button" | "submit" | "reset";
+
+  let widthClass = "";
+  $: switch (width) {
+    case "fit":
+      widthClass = "w-fit";
+      break;
+    case "full":
+      widthClass = "w-full";
+      break;
+  }
+
+  let colorClass = "";
+  $: switch (color) {
+    case "primary":
+      if (variant == "secondary") {
+        colorClass =
+          "text-primary-500 bg-white border border-primary-500 hover:bg-primary-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-primary-500 bg-white hover:bg-primary-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-primary-500 bg-transparent border border-primary-500 hover:bg-primary-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-primary-500 hover:text-primary-400 active:text-primary-500";
+      } else {
+        colorClass = "text-white bg-primary-500 hover:bg-primary-400 active:bg-primary-500";
+      }
+      break;
+    //TODO: This is not correct
+    case "surface":
+      if (variant == "secondary") {
+        colorClass = "text-surface-900 bg-white border border-surface-50";
+      } else if (variant == "ghost") {
+        colorClass = "text-surface-900 bg-white hover:bg-surface-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass = "text-surface-900 bg-transparent border border-surface-50 ";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-surface-900 hover:text-surface-700 active:text-surface-900";
+      } else {
+        colorClass = "text-surface-900 bg-surface-50";
+      }
+      break;
+    case "success":
+      if (variant == "secondary") {
+        colorClass =
+          "text-success-500 bg-white border border-success-500 hover:bg-success-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-success-500 bg-white hover:bg-success-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-success-500 bg-transparent border border-success-500 hover:bg-success-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-success-500 hover:text-success-400 active:text-success-500";
+      } else {
+        colorClass = "text-white bg-success-500 hover:bg-success-400 active:bg-success-500";
+      }
+      break;
+    case "warning":
+      if (variant == "secondary") {
+        colorClass =
+          "text-warning-500 bg-white border border-warning-500 hover:bg-warning-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-warning-500 bg-white hover:bg-warning-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-warning-500 bg-transparent border border-warning-500 hover:bg-warning-50 active:bg-white";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-warning-500 hover:text-warning-400 active:text-warning-500";
+      } else {
+        colorClass = "text-white bg-warning-500 hover:bg-warning-400 active:bg-warning-500";
+      }
+      break;
+    case "danger":
+      if (variant == "secondary") {
+        colorClass =
+          "text-danger-500 bg-white border border-danger-500 hover:bg-danger-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-danger-500 bg-white hover:bg-danger-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-danger-500 bg-white border border-danger-500 hover:bg-danger-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-danger-500 hover:text-danger-400 active:text-danger-500";
+      } else {
+        colorClass = "text-white bg-danger-500 hover:bg-danger-400 active:bg-danger-500";
+      }
+      break;
+    case "info":
+      if (variant == "secondary") {
+        colorClass =
+          "text-info-500 bg-white border border-info-500 hover:bg-info-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-info-500 bg-white hover:bg-info-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-info-500 bg-transparent border border-info-500 hover:bg-info-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-info-500 hover:text-info-400 active:text-info-500";
+      } else {
+        colorClass = "text-surface-900 bg-info-500 hover:bg-info-400 active:bg-info-500";
+      }
+      break;
+    case "highlight":
+      if (variant == "secondary") {
+        colorClass =
+          "text-highlight-500 bg-white border border-highlight-500 hover:bg-highlight-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-highlight-500 bg-white hover:bg-highlight-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-highlight-500 bg-transparent border border-highlight-500 hover:bg-highlight-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-highlight-500 hover:text-highlight-400 active:text-highlight-500";
+      } else {
+        colorClass =
+          "text-surface-900 bg-highlight-500 hover:bg-highlight-400 active:bg-highlight-500";
+      }
+      break;
+    case "unicorn":
+      if (variant == "secondary") {
+        colorClass =
+          "text-unicorn-500 bg-white border border-unicorn-500 hover:bg-unicorn-50 active:bg-white";
+      } else if (variant == "ghost") {
+        colorClass = "text-unicorn-500 bg-white hover:bg-unicorn-50 active:bg-white";
+      } else if (variant == "secondary-transparent") {
+        colorClass =
+          "text-unicorn-500 bg-transparent border border-unicorn-500 hover:bg-unicorn-50 active:bg-transparent";
+      } else if (variant == "ghost-transparent") {
+        colorClass = "text-unicorn-500 hover:text-unicorn-400 active:text-unicorn-500";
+      } else {
+        colorClass = "text-white bg-unicorn-500 hover:bg-unicorn-400 active:bg-unicorn-500";
+      }
+      break;
+  }
+
+  let disabledClass = "";
+  $: switch (variant) {
+    case "regular":
+      disabledClass = "disabled:text-white disabled:bg-surface-100";
+      break;
+    case "secondary":
+      disabledClass =
+        "disabled:text-surface-100 disabled:bg-white disabled:border disabled:border-surface-100";
+      break;
+    case "ghost":
+      disabledClass = "disabled:text-surface-100 disabled:bg-white";
+      break;
+    case "secondary-transparent":
+      disabledClass =
+        "disabled:text-surface-100 disabled:bg-transparent disabled:border disabled:border-surface-100";
+      break;
+    case "ghost-transparent":
+      disabledClass = "disabled:text-surface-100";
+      break;
+  }
+</script>
+
+<button
+  on:mouseout
+  on:mouseover
+  on:focus
+  on:blur
+  on:click
+  {type}
+  {disabled}
+  class="h-10 px-4 box-border rounded-lg space-x-2.5 {widthClass} {colorClass} {disabledClass}"
+>
+  {#if icon}
+    <i class={icon} />
+  {/if}
+  {#if label}
+    <span class="text-button font-normal">{label}</span>
+  {/if}
+</button>

package/dist/components/PrimaryButton.svelte.d.ts

@@ -0,0 +1,47 @@
+/** @typedef {typeof __propDef.props}  PrimaryButtonProps */
+/** @typedef {typeof __propDef.events}  PrimaryButtonEvents */
+/** @typedef {typeof __propDef.slots}  PrimaryButtonSlots */
+export default class PrimaryButton extends SvelteComponent<{
+    label?: string | undefined;
+    color?: string | undefined;
+    variant?: string | undefined;
+    icon?: string | undefined;
+    width?: string | undefined;
+    disabled?: boolean | undefined;
+    type?: string | undefined;
+}, {
+    mouseout: MouseEvent;
+    mouseover: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PrimaryButtonProps = typeof __propDef.props;
+export type PrimaryButtonEvents = typeof __propDef.events;
+export type PrimaryButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        color?: string | undefined;
+        variant?: string | undefined;
+        icon?: string | undefined;
+        width?: string | undefined;
+        disabled?: boolean | undefined;
+        type?: string | undefined;
+    };
+    events: {
+        mouseout: MouseEvent;
+        mouseover: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/ProfileMenu.svelte

@@ -0,0 +1,58 @@
+<script>
+  import StubberIcon from "../assets/stubber-icon.svg";
+  import DocsIcon from "../assets/docs-icon.svg";
+  import PrimaryButton from "./PrimaryButton.svelte";
+  import Chip from "./Chip.svelte";
+  import { createEventDispatcher } from "svelte";
+  import Tooltip from "./Tooltip.svelte";
+
+  export let manageLink = "";
+  export let documentationLink = "";
+  export let profileName = "";
+  export let stubberhandle = "";
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div class="w-[230px] [&>*]:w-full border border-surface-100 rounded-lg">
+  <div class="p-2.5 bg-surface-50 flex flex-col items-center rounded-t-lg">
+    <img class="mt-5 mb-[23px]" width="25px" src={StubberIcon} alt="stubber" />
+    <h3 class="mb-2 text-heading-6 font-normal text-center text-surface-900">{profileName}</h3>
+    <Tooltip>
+      <span slot="subject">
+        <Chip
+          on:click={() => dispatch("copystubberhandle")}
+          label={stubberhandle}
+          color="success"
+        />
+      </span>
+      <span slot="tooltip"> Copy stubberhandle </span>
+    </Tooltip>
+    <a class="mt-[17px] w-full" href={manageLink}>
+      <PrimaryButton label="Manage Stubber" variant="secondary-transparent" width="full" />
+    </a>
+  </div>
+  <a href={documentationLink}>
+    <div class="p-2.5 bg-white border-b border-surface-100">
+      <button
+        class="w-full flex items-center h-[40px] space-x-4 text-surface-900 hover:bg-surface-50 rounded-lg"
+      >
+        <button class="h-10 flex justify-center items-center aspect-square">
+          <img height="16px" src={DocsIcon} alt="stubber docs" />
+        </button>
+        <span class="text-button font-normal">Documentation</span>
+      </button>
+    </div>
+  </a>
+  <div class="p-2.5 bg-white rounded-b-lg">
+    <button
+      on:click={() => dispatch("logout")}
+      class="w-full flex items-center h-[40px] space-x-4 text-surface-900 hover:bg-surface-50 rounded-lg"
+    >
+      <button class="h-10 aspect-square">
+        <i class="far fa-arrow-right-from-bracket" />
+      </button>
+      <span class="text-button font-normal">Log out</span>
+    </button>
+  </div>
+</div>

package/dist/components/ProfileMenu.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  ProfileMenuProps */
+/** @typedef {typeof __propDef.events}  ProfileMenuEvents */
+/** @typedef {typeof __propDef.slots}  ProfileMenuSlots */
+export default class ProfileMenu extends SvelteComponent<{
+    manageLink?: string | undefined;
+    documentationLink?: string | undefined;
+    profileName?: string | undefined;
+    stubberhandle?: string | undefined;
+}, {
+    copystubberhandle: CustomEvent<any>;
+    logout: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ProfileMenuProps = typeof __propDef.props;
+export type ProfileMenuEvents = typeof __propDef.events;
+export type ProfileMenuSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        manageLink?: string | undefined;
+        documentationLink?: string | undefined;
+        profileName?: string | undefined;
+        stubberhandle?: string | undefined;
+    };
+    events: {
+        copystubberhandle: CustomEvent<any>;
+        logout: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/SideNav/SideNavExample.svelte

@@ -0,0 +1,47 @@
+<!--
+    This component is an example of what SideNav usage would look like. Storybook does not have support have support for Svelte slots,
+    so in order to have a story for this component, we need to create a new component that builds the SideNav with the appropriate slots.
+
+    This component is *not* exported to the npm package.
+-->
+<script>
+  import SideNavItem from "./SideNavItem.svelte";
+  import SideNavTitle from "./SideNavTitle.svelte";
+</script>
+
+<div class="p-4 bg-[#F0F6FC]">
+  <SideNavTitle title="General" />
+  <SideNavItem label="Recent" href="/" icon="far fa-home" />
+  <SideNavItem label="Archive" href="/" icon="far fa-archive" />
+  <SideNavItem label="By Stub" href="/" icon="far fa-tilde" />
+
+  <SideNavItem label="Folders" href="/" icon="far fa-folder">
+    <SideNavItem label="Folder A" href="/sub-item-1" icon="far fa-folder">
+      <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+      <SideNavItem label="Folder A" href="/sub-item-1" icon="far fa-folder" indent_children={false}>
+        <SideNavItem
+          label="Folder A"
+          href="/sub-item-1"
+          icon="far fa-folder"
+          indent_children={false}
+        >
+          <SideNavItem
+            label="Folder A"
+            href="/sub-item-1"
+            icon="far fa-folder"
+            indent_children={false}
+          >
+            <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+            <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+            <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+          </SideNavItem>
+          <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+          <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+        </SideNavItem>
+        <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+        <SideNavItem label="Sub Sub Item 1" href="/sub-sub-item-1" icon="far fa-file" />
+      </SideNavItem>
+    </SideNavItem>
+    <SideNavItem label="Sub Item 2" href="/sub-item-2" icon="far fa-file" />
+  </SideNavItem>
+</div>

package/dist/components/SideNav/SideNavExample.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SideNavExampleProps */
+/** @typedef {typeof __propDef.events}  SideNavExampleEvents */
+/** @typedef {typeof __propDef.slots}  SideNavExampleSlots */
+export default class SideNavExample extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SideNavExampleProps = typeof __propDef.props;
+export type SideNavExampleEvents = typeof __propDef.events;
+export type SideNavExampleSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/SideNav/SideNavItem.svelte

@@ -0,0 +1,54 @@
+<script>
+  export let label;
+  export let href;
+  export let icon;
+  export let indent_children = true;
+  export let is_selected = false;
+
+  //states
+  let is_expanded = false;
+
+  function handle_click() {
+    is_expanded = !is_expanded;
+  }
+</script>
+
+<!-- If $$slots.default == true, then it means this SideNavItem is a group item, i.e it has child elements in <slots/> -->
+
+<button
+  on:click={handle_click}
+  class="group h-10 my-2.5 w-full flex items-center {is_selected
+    ? 'bg-white'
+    : 'bg-transparent hover:bg-white hover:bg-opacity-[0.5]'} rounded-lg hover:bg active:bg-white"
+>
+  {#if $$slots.default}
+    <div class="h-10 pl-2 w-2.5 flex items-center justify-center">
+      <i class="fas fa-caret-right {is_expanded ? 'rotate down' : 'rotate'}" />
+    </div>
+  {/if}
+  <a class="{$$slots.default ? '' : 'pl-2.5'} w-full flex items-center" {href}>
+    <div class="text-surface-900 w-fit flex items-center">
+      <div class="h-10 aspect-square flex items-center justify-center">
+        <i class={icon} />
+      </div>
+      <span class="text-button font-normal">
+        {label}
+      </span>
+    </div>
+  </a>
+</button>
+{#if $$slots.default && is_expanded}
+  <div class={indent_children === true ? "ml-4" : ""}>
+    <slot />
+  </div>
+{/if}
+
+<style>
+  .rotate {
+    transition: all 75ms linear;
+  }
+
+  .rotate.down {
+    transform: rotate(90deg);
+  }
+</style>

package/dist/components/SideNav/SideNavItem.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  SideNavItemProps */
+/** @typedef {typeof __propDef.events}  SideNavItemEvents */
+/** @typedef {typeof __propDef.slots}  SideNavItemSlots */
+export default class SideNavItem extends SvelteComponent<{
+    label: any;
+    icon: any;
+    href: any;
+    indent_children?: boolean | undefined;
+    is_selected?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SideNavItemProps = typeof __propDef.props;
+export type SideNavItemEvents = typeof __propDef.events;
+export type SideNavItemSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label: any;
+        icon: any;
+        href: any;
+        indent_children?: boolean | undefined;
+        is_selected?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/components/SideNav/SideNavTitle.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let title;
+</script>
+
+<div class="h-10 w-full flex items-center">
+  <h2 class="text-small font-normal text-surface-700">{title}</h2>
+</div>

package/dist/components/SideNav/SideNavTitle.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SideNavTitleProps */
+/** @typedef {typeof __propDef.events}  SideNavTitleEvents */
+/** @typedef {typeof __propDef.slots}  SideNavTitleSlots */
+export default class SideNavTitle extends SvelteComponent<{
+    title: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SideNavTitleProps = typeof __propDef.props;
+export type SideNavTitleEvents = typeof __propDef.events;
+export type SideNavTitleSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Tabs.svelte

@@ -0,0 +1,102 @@
+<script>import { Tabs } from "bits-ui";
+import { faCog, faClipboard, faListAlt, faBell, faGauge, faStar, faLink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/svelte-fontawesome";
+import { onMount } from "svelte";
+let underlineStyle = {
+  width: "0px",
+  transform: "translateX(0px)"
+};
+const updateUnderlinePosition = () => {
+  const activeTab = document.querySelector('.tabs-trigger[data-state="active"]');
+  if (activeTab) {
+    underlineStyle = {
+      width: `${activeTab.offsetWidth}px`,
+      transform: `translateX(${activeTab.offsetLeft}px)`
+    };
+  }
+};
+onMount(() => {
+  updateUnderlinePosition();
+});
+function handleTabChange() {
+  updateUnderlinePosition();
+}
+</script>
+  
+  <div class="pt-6 px-2">
+    <Tabs.Root
+      value="details"
+      class="w-full border-b border-gray-200"
+      on:change={handleTabChange}
+    >
+      <Tabs.List class="relative flex w-full space-x-6 text-sm font-light">
+        <div
+          class="absolute bottom-0 h-[1px] bg-black transition-all duration-300"
+          style="width: {underlineStyle.width}; transform: {underlineStyle.transform};"
+        ></div>
+        <Tabs.Trigger
+          value="details"
+          class="tabs-trigger inline-flex items-center space-x-1 pb-2 transition-colors data-[state=active]:text-black"
+          on:click={handleTabChange}
+        >
+          <FontAwesomeIcon icon={faCog} size="xs" />
+          <span>Details</span>
+        </Tabs.Trigger>
+  
+        <Tabs.Trigger
+          value="fields"
+          class="tabs-trigger inline-flex items-center space-x-1 pb-2 transition-colors data-[state=active]:text-black"
+          on:click={handleTabChange}
+        >
+          <FontAwesomeIcon icon={faClipboard} size="xs" />
+          <span>Fields <span class="text-[0.75rem]">(13)</span></span>
+        </Tabs.Trigger>
+  
+        <Tabs.Trigger
+          value="tasks"
+          class="tabs-trigger inline-flex items-center space-x-1 pb-2 transition-colors data-[state=active]:text-black"
+          on:click={handleTabChange}
+        >
+          <FontAwesomeIcon icon={faListAlt} size="xs" />
+          <span>Tasks <span class="text-[0.75rem]">(4)</span></span>
+        </Tabs.Trigger>
+  
+        <Tabs.Trigger
+          value="notifications"
+          class="tabs-trigger inline-flex items-center space-x-1 pb-2 transition-colors data-[state=active]:text-black"
+          on:click={handleTabChange}
+        >
+          <FontAwesomeIcon icon={faBell} size="xs" />
+          <span>Notifications <span class="text-[0.75rem]">(0)</span></span>
+        </Tabs.Trigger>
+  
+        <Tabs.Trigger
+          value="metrics"
+          class="tabs-trigger inline-flex items-center space-x-1 pb-2 transition-colors data-[state=active]:text-black"
+          on:click={handleTabChange}
+        >
+          <FontAwesomeIcon icon={faGauge} size="xs" />
+          <span>Metrics <span class="text-[0.75rem]">(0)</span></span>
+        </Tabs.Trigger>
+  
+        <Tabs.Trigger
+          value="ai"
+          class="tabs-trigger inline-flex items-center space-x-1 pb-2 transition-colors data-[state=active]:text-black"
+          on:click={handleTabChange}
+        >
+          <FontAwesomeIcon icon={faStar} size="xs" />
+          <span>AI</span>
+        </Tabs.Trigger>
+  
+        <Tabs.Trigger
+          value="webhooks"
+          class="tabs-trigger inline-flex items-center space-x-1 pb-2 transition-colors data-[state=active]:text-black"
+          on:click={handleTabChange}
+        >
+          <FontAwesomeIcon icon={faLink} size="xs" />
+          <span>Webhooks</span>
+        </Tabs.Trigger>
+      </Tabs.List>
+    </Tabs.Root>
+  </div>
+  

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};