poe-svelte-ui-lib 1.6.9 → 1.6.10

package/dist/Select/Select.svelte

@@ -1,26 +1,26 @@
 <!-- $lib/ElementUI/Select.svelte -->
 <script lang="ts" generics="T = unknown">
-  import { slide } from 'svelte/transition'
-  import { onMount } from 'svelte'
-  import type { ISelectOption, ISelectProps } from '../types'
-  import { twMerge } from 'tailwind-merge'
-  import { t } from '../locales/i18n'
+  import { slide } from "svelte/transition"
+  import { onMount } from "svelte"
+  import type { ISelectOption, ISelectProps } from "../types"
+  import { twMerge } from "tailwind-merge"
+  import { t } from "../locales/i18n"
 
   let isDropdownOpen = $state(false)
   let dropdownElement: HTMLDivElement
 
   let {
     id = crypto.randomUUID(),
-    wrapperClass = '',
+    wrapperClass = "",
     disabled = false,
-    label = { name: '', class: '' },
-    type = 'select',
+    label = { name: "", class: "" },
+    type = "select",
     value = $bindable(),
     options = [],
     onUpdate,
   }: ISelectProps<T> = $props()
 
-  let searchValue: any = $state('')
+  let searchValue: any = $state("")
   let filteredOptions = $state<ISelectOption<T>[]>([])
 
   /* Закрытие при клике вне компонента */
@@ -44,10 +44,10 @@
   })
 
   onMount(() => {
-    if (type === 'select' || type === 'input') document.addEventListener('click', handleClickOutside)
-    if (type === 'input') searchValue = value?.name ?? ''
+    if (type === "select" || type === "input") document.addEventListener("click", handleClickOutside)
+    if (type === "input") searchValue = value?.name ?? ""
     return () => {
-      if (type === 'select' || type === 'input') document.removeEventListener('click', handleClickOutside)
+      if (type === "select" || type === "input") document.removeEventListener("click", handleClickOutside)
     }
   })
 
@@ -64,7 +64,7 @@
     if (!disabled) {
       value = option
       isDropdownOpen = false
-      searchValue = option.name?.toString() ?? ''
+      searchValue = option.name?.toString() ?? ""
       filteredOptions = []
       onUpdate?.(value)
     }
@@ -73,17 +73,17 @@
   const handleSearch = (inputValue: string) => {
     searchValue = inputValue
 
-    if (inputValue.trim() === '') {
+    if (inputValue.trim() === "") {
       isDropdownOpen = false
       filteredOptions = []
     } else {
-      filteredOptions = options.filter((option) => {
-        const optionName = option.name?.toString() || ''
+      filteredOptions = options.filter(option => {
+        const optionName = option.name?.toString() || ""
         return optionName.toLowerCase().includes(inputValue.toLowerCase())
       })
       isDropdownOpen = filteredOptions.length > 0
 
-      const selectedFromList = options.find((option) => option.name?.toString() === searchValue)
+      const selectedFromList = options.find(option => option.name?.toString() === searchValue)
 
       if (!selectedFromList) {
         const newOption: ISelectOption<T> = {
@@ -91,7 +91,6 @@
           name: searchValue,
           value: searchValue as T,
         }
-
         value = newOption
         onUpdate?.(newOption)
       } else {
@@ -106,50 +105,47 @@
   {#if label.name}
     <h5 class={twMerge(`w-full px-4`, label.class)}>{label.name}</h5>
   {/if}
-  {#if type === 'select'}
+  {#if type === "select"}
     <button
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-      value={value?.value ? String(value.value) : ''}
+      value={value?.value ? String(value.value) : ""}
       class={twMerge(
         `w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
-        ${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}`,
+        ${disabled ? "opacity-50" : "cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"}`,
         value?.class,
       )}
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); "
       onclick={toggleDropdown}
       aria-haspopup="true"
       aria-expanded={isDropdownOpen}
-      {disabled}
-    >
-      {value?.name || $t('common.select_tag')}
+      {disabled}>
+      {value?.name || $t("common.select_tag")}
     </button>
 
     {#if isDropdownOpen}
       <div
         class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
         style="width: calc(100% - 1.8rem);"
-        transition:slide={{ duration: 250 }}
-      >
+        transition:slide={{ duration: 250 }}>
         {#each options as option, index (option.id)}
           <button
             id={option.id}
-            value={option?.value ? String(option.value) : ''}
+            value={option?.value ? String(option.value) : ""}
             class={twMerge(
               `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
-              ${index === options.length - 1 ? 'rounded-b-2xl' : ''} `,
+              ${index === options.length - 1 ? "rounded-b-2xl" : ""} `,
               option.class,
             )}
-            onclick={(e) => selectOption(option, e)}
+            onclick={e => selectOption(option, e)}
             {disabled}
             style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); 
-            "
-          >
+            ">
             {option.name}
           </button>
         {/each}
       </div>
     {/if}
-  {:else if type === 'buttons'}
+  {:else if type === "buttons"}
     <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full w-full flex-row justify-center rounded-full">
       {#each options as option, index (option.id)}
         <button
@@ -161,9 +157,8 @@
             ${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
             option.class,
           )} bg-(--bg-color)"
-          onclick={(e) => selectOption(option, e)}
-          disabled={option.disabled}
-        >
+          onclick={e => selectOption(option, e)}
+          disabled={option.disabled}>
           <span class="flex flex-row items-center justify-center gap-4">
             {#if option.name}
               <div class="flex-1">
@@ -174,47 +169,42 @@
         </button>
       {/each}
     </div>
-  {:else if type === 'input'}
+  {:else if type === "input"}
     <input
       bind:value={searchValue}
       class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)]
           transition duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
-          {disabled
-        ? 'cursor-not-allowed opacity-50'
-        : 'cursor-text'} border-(--bg-color) focus:border-(--blue-color) hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"
+          {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--bg-color) focus:border-(--blue-color) hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
       id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       {disabled}
-      oninput={(e) => handleSearch((e.currentTarget as HTMLInputElement).value)}
-      onclick={(e) => {
-        if (searchValue == '') {
+      oninput={e => handleSearch((e.currentTarget as HTMLInputElement).value)}
+      onclick={e => {
+        if (searchValue == "") {
           filteredOptions = options
           isDropdownOpen = true
         }
-      }}
-    />
+      }} />
 
     {#if isDropdownOpen}
       <div
         class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--bg-color) shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
         style="width: calc(100% - 1.8rem);"
-        transition:slide={{ duration: 250 }}
-      >
+        transition:slide={{ duration: 250 }}>
         {#each filteredOptions as option, index (option.id)}
           <button
             id={option.id}
-            value={option?.value ? String(option.value) : ''}
+            value={option?.value ? String(option.value) : ""}
             class={twMerge(
               `flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
-              ${index === filteredOptions.length - 1 ? 'rounded-b-2xl' : ''} `,
+              ${index === filteredOptions.length - 1 ? "rounded-b-2xl" : ""} `,
               option.class,
             )}
-            onclick={(e) => selectOption(option, e)}
+            onclick={e => selectOption(option, e)}
             {disabled}
             style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); 
-            "
-          >
+            ">
             {option.name}
           </button>
         {/each}

package/dist/Select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ISelectProps } from '../types';
+import type { ISelectProps } from "../types";
 declare class __sveltets_Render<T = unknown> {
     props(): ISelectProps<T>;
     events(): {};

package/dist/Slider/Slider.svelte

@@ -1,45 +1,44 @@
 <!-- $lib/ElementsUI/Slider.svelte -->
 <script lang="ts">
-  import type { ISliderProps } from '../types'
-  import { twMerge } from 'tailwind-merge'
-  import { onDestroy, onMount } from 'svelte'
+  import type { ISliderProps } from "../types"
+  import { twMerge } from "tailwind-merge"
 
   let {
     id = crypto.randomUUID(),
-    wrapperClass = '',
-    label = { name: '', class: '' },
-    type = 'single',
+    wrapperClass = "",
+    label = { name: "", class: "" },
+    type = "single",
     value = 0,
     number = { minNum: 0, maxNum: 10, step: 1 },
     disabled = false,
     onUpdate = () => {},
   }: ISliderProps = $props()
 
-  const isRange = $derived(type === 'range' || (Array.isArray(value) && value.length === 2))
+  const isRange = $derived(type === "range" || (Array.isArray(value) && value.length === 2))
 
   const maxDigits = $derived(String(number.maxNum ?? 100).length)
   const valueWidth = $derived(`${maxDigits + 1}ch`) /* +1 на запас */
 
   /* Инициализация значений с проверкой типа */
-  let singleValue = $derived(!isRange && typeof value === 'number' ? value : number.minNum)
+  let singleValue = $derived(!isRange && typeof value === "number" ? value : number.minNum)
   let lowerValue = $derived(isRange && Array.isArray(value) ? value[0] : number.minNum)
   let upperValue = $derived(isRange && Array.isArray(value) ? value[1] : number.maxNum)
 
-  let activeRound: 'floor' | 'ceil' = $state('floor')
+  let activeRound: "floor" | "ceil" = $state("floor")
 
   let centerNum = $derived(lowerValue + Math[activeRound](Math.abs(upperValue - lowerValue) / 2 / number.step) * number.step)
 
   $effect(() => {
     if (value === undefined || value === null) {
-      if (type === 'single' && !value) value = number.minNum
-      if (type === 'range' && !value) value = [number.minNum, number.maxNum]
+      if (type === "single" && !value) value = number.minNum
+      if (type === "range" && !value) value = [number.minNum, number.maxNum]
     }
   })
 
-  const adjustValue = (target: 'lower' | 'upper' | 'single', direction: 'increment' | 'decrement') => {
-    const stepValue = direction === 'increment' ? number.step : -number.step
-    if (isRange && target !== 'single') {
-      if (target === 'lower') {
+  const adjustValue = (target: "lower" | "upper" | "single", direction: "increment" | "decrement") => {
+    const stepValue = direction === "increment" ? number.step : -number.step
+    if (isRange && target !== "single") {
+      if (target === "lower") {
         lowerValue = roundToClean(Math.max(number.minNum, Math.min(lowerValue + stepValue, upperValue)))
         lowerValue = roundToClean(lowerValue == upperValue ? upperValue - number.step : lowerValue)
       } else {
@@ -57,7 +56,7 @@
     if (Array.isArray(value)) {
       lowerValue = value[0]
       upperValue = value[1]
-    } else if (typeof value === 'number') {
+    } else if (typeof value === "number") {
       singleValue = value
     }
   })
@@ -83,8 +82,7 @@
   <!-- Слайдер -->
   <div
     id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
-    class="relative flex h-8 w-full items-center justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
-  >
+    class="relative flex h-8 w-full items-center justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}">
     {#if isRange}
       {@const userAgent = navigator.userAgent}
 
@@ -97,12 +95,12 @@
           bind:value={lowerValue}
           oninput={disabled
             ? undefined
-            : (e) => {
+            : e => {
                 const newValue = Math.min(Number((e.target as HTMLInputElement).value), upperValue)
                 lowerValue = roundToClean(newValue == upperValue ? upperValue - number.step : newValue)
                 onUpdate([lowerValue, upperValue])
               }}
-          onmousedown={() => (activeRound = 'ceil')}
+          onmousedown={() => (activeRound = "ceil")}
           {disabled}
           class={twMerge(
             `basis-[calc(${(Math.abs(centerNum - number.minNum) / Math.abs(number.maxNum - number.minNum)) * 100}%+2rem+5px)] h-8 w-full appearance-none overflow-hidden 
@@ -117,9 +115,9 @@
               [&::-webkit-slider-thumb]:rounded-full
               [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
-              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
-                ? '[&::-webkit-slider-thumb]:ring-[6.5px]'
-                : '[&::-webkit-slider-thumb]:ring-[5px] '
+              userAgent.includes("iOS") || userAgent.includes("iPhone") || userAgent.includes("iPad")
+                ? "[&::-webkit-slider-thumb]:ring-[6.5px]"
+                : "[&::-webkit-slider-thumb]:ring-[5px] "
             }
             [&::-moz-range-thumb]:relative 
             [&::-moz-range-thumb]:ml-[-0.4rem]
@@ -134,8 +132,7 @@
             `[&::-moz-range-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem] 
               [&::-webkit-slider-thumb]:shadow-[calc(100rem+0.5rem)_0_0_100rem]`,
           )}
-          style="color: var(--bg-color); flex-basis: {`calc(${(Math.abs(centerNum - number.minNum) / Math.abs(number.maxNum - number.minNum)) * 100}% + 2rem + 5px)`};"
-        />
+          style="color: var(--bg-color); flex-basis: {`calc(${(Math.abs(centerNum - number.minNum) / Math.abs(number.maxNum - number.minNum)) * 100}% + 2rem + 5px)`};" />
         <input
           type="range"
           min={centerNum}
@@ -144,12 +141,12 @@
           bind:value={upperValue}
           oninput={disabled
             ? undefined
-            : (e) => {
+            : e => {
                 const newValue = Math.max(Number((e.target as HTMLInputElement).value), lowerValue)
                 upperValue = roundToClean(newValue == lowerValue ? newValue + number.step : upperValue)
                 onUpdate([lowerValue, upperValue])
               }}
-          onmousedown={() => (activeRound = 'floor')}
+          onmousedown={() => (activeRound = "floor")}
           {disabled}
           class={twMerge(
             `basis-[calc(${100 - (Math.abs(centerNum - number.minNum) / Math.abs(number.maxNum - number.minNum)) * 100}%+2rem+5px)] h-8 w-full  appearance-none overflow-hidden  
@@ -164,9 +161,9 @@
               [&::-webkit-slider-thumb]:rounded-full
               [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
-              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
-                ? '[&::-webkit-slider-thumb]:ring-[6.5px]'
-                : '[&::-webkit-slider-thumb]:ring-[5px] '
+              userAgent.includes("iOS") || userAgent.includes("iPhone") || userAgent.includes("iPad")
+                ? "[&::-webkit-slider-thumb]:ring-[6.5px]"
+                : "[&::-webkit-slider-thumb]:ring-[5px] "
             }
             [&::-moz-range-thumb]:relative 
             [&::-moz-range-thumb]:ml-[-0.4rem]
@@ -181,8 +178,7 @@
             `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
               [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
           )}
-          style="color: var(--bg-color); flex-basis: {`calc(${(1 - Math.abs(centerNum - number.minNum) / Math.abs(number.maxNum - number.minNum)) * 100}% + 2rem + 5px)`};"
-        />
+          style="color: var(--bg-color); flex-basis: {`calc(${(1 - Math.abs(centerNum - number.minNum) / Math.abs(number.maxNum - number.minNum)) * 100}% + 2rem + 5px)`};" />
       </div>
     {:else}
       {@const userAgent = navigator.userAgent}
@@ -209,9 +205,9 @@
               [&::-webkit-slider-thumb]:rounded-full
             [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
             ${
-              userAgent.includes('iOS') || userAgent.includes('iPhone') || userAgent.includes('iPad')
-                ? 'pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]'
-                : 'pl-3 [&::-webkit-slider-thumb]:ring-[5px]'
+              userAgent.includes("iOS") || userAgent.includes("iPhone") || userAgent.includes("iPad")
+                ? "pl-3.5 [&::-webkit-slider-thumb]:ring-[6.5px]"
+                : "pl-3 [&::-webkit-slider-thumb]:ring-[5px]"
             }
             [&::-moz-range-thumb]:relative 
             [&::-moz-range-thumb]:ml-[-0.4rem]
@@ -226,53 +222,42 @@
             `[&::-moz-range-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem] 
               [&::-webkit-slider-thumb]:shadow-[calc(100rem*-1-0.5rem)_0_0_100rem]`,
           )}
-          style="color: var(--bg-color);"
-        />
+          style="color: var(--bg-color);" />
       </div>
     {/if}
   </div>
 
   <!-- Кнопки управления -->
-  <div class={`mt-3 flex w-full ${isRange ? 'justify-between' : 'justify-center'} gap-2`}>
+  <div class={`mt-3 flex w-full ${isRange ? "justify-between" : "justify-center"} gap-2`}>
     {#if isRange}
-      {#each ['lower', 'upper'] as type (type)}
-        <div
-          class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? 'opacity-70' : ''}`}
-          style="background-color: var(--bg-color)"
-        >
+      {#each ["lower", "upper"] as type (type)}
+        <div class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? "opacity-70" : ""}`} style="background-color: var(--bg-color)">
           <button
             class="h-full w-4 {disabled ? '' : 'cursor-pointer'}"
-            onclick={disabled ? undefined : () => adjustValue(type as 'lower' | 'upper', 'decrement')}
-            disabled={disabled || (type === 'lower' ? lowerValue <= number.minNum : upperValue <= lowerValue)}>−</button
-          >
+            onclick={disabled ? undefined : () => adjustValue(type as "lower" | "upper", "decrement")}
+            disabled={disabled || (type === "lower" ? lowerValue <= number.minNum : upperValue <= lowerValue)}>−</button>
           <span class="inline-block text-center tabular-nums" style={`width: ${valueWidth}`}>
-            {type === 'lower' ? lowerValue : upperValue}
+            {type === "lower" ? lowerValue : upperValue}
           </span>
           <button
             class="h-full w-4 {disabled ? '' : 'cursor-pointer'}"
-            onclick={disabled ? undefined : () => adjustValue(type as 'lower' | 'upper', 'increment')}
-            disabled={disabled || (type === 'lower' ? lowerValue >= upperValue : upperValue >= number.maxNum)}>+</button
-          >
+            onclick={disabled ? undefined : () => adjustValue(type as "lower" | "upper", "increment")}
+            disabled={disabled || (type === "lower" ? lowerValue >= upperValue : upperValue >= number.maxNum)}>+</button>
         </div>
       {/each}
     {:else}
-      <div
-        class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? 'opacity-70' : ''}`}
-        style="background-color: var(--bg-color)"
-      >
+      <div class={`flex items-center justify-center gap-2 rounded-full px-2 ${disabled ? "opacity-70" : ""}`} style="background-color: var(--bg-color)">
         <button
           class="h-full w-4 {disabled ? '' : 'cursor-pointer'}"
-          onclick={disabled ? undefined : () => adjustValue('single', 'decrement')}
-          disabled={disabled || singleValue <= number.minNum}>−</button
-        >
+          onclick={disabled ? undefined : () => adjustValue("single", "decrement")}
+          disabled={disabled || singleValue <= number.minNum}>−</button>
         <span class="inline-block text-center tabular-nums" style={`width: ${valueWidth}`}>
           {singleValue}
         </span>
         <button
           class="h-full w-4 {disabled ? '' : 'cursor-pointer'}"
-          onclick={disabled ? undefined : () => adjustValue('single', 'increment')}
-          disabled={disabled || singleValue >= number.maxNum}>+</button
-        >
+          onclick={disabled ? undefined : () => adjustValue("single", "increment")}
+          disabled={disabled || singleValue >= number.maxNum}>+</button>
       </div>
     {/if}
   </div>

package/dist/Slider/Slider.svelte.d.ts

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

package/dist/Tabs/Tabs.svelte

@@ -1,27 +1,26 @@
 <script lang="ts">
-  import type { ITabsProps } from '../types'
-  import { onMount } from 'svelte'
-  import { twMerge } from 'tailwind-merge'
+  import type { ITabsProps } from "../types"
+  import { twMerge } from "tailwind-merge"
 
   let {
     id = crypto.randomUUID(),
-    wrapperClass = '',
+    wrapperClass = "",
     size = { width: 12, height: 6 },
     activeTab = 0,
     items = [
       {
-        name: 'tab 1',
+        name: "tab 1",
         icon: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"\r\n  ><path\r\n    fill="none"\r\n    stroke="currentColor"\r\n    stroke-linecap="round"\r\n    stroke-linejoin="round"\r\n    stroke-width="1.5"\r\n    d="M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78"\r\n  /></svg\r\n>\r\n',
-        class: '',
+        class: "",
       },
-      { name: 'tab 2', icon: '', class: 'bg-red' },
+      { name: "tab 2", icon: "", class: "bg-red" },
     ],
     children,
     apiArray = [],
     Components,
   }: ITabsProps = $props()
 
-  const isCol = $derived(!!items.find((item) => item.class?.startsWith('flex-col')))
+  const isCol = $derived(!!items.find(item => item.class?.startsWith("flex-col")))
 
   let currentTabIndex: number = $derived(activeTab)
 </script>
@@ -29,26 +28,24 @@
 <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full h-full flex flex-col rounded-2xl bg-(--back-color) overflow-hidden">
   <!-- Вкладки -->
   <div
-    class="{twMerge(`bg-blue z-50 flex h-fit items-center rounded-t-2xl overflow-x-auto px-1`, wrapperClass)} 
-     bg-(--bg-color)"
-  >
+    class="{twMerge(`bg-blue z-40 flex h-fit items-center rounded-t-2xl overflow-x-auto px-1`, wrapperClass)} 
+     bg-(--bg-color)">
     {#each items as item, index}
       <button
         class={twMerge(
-          `tab mt-1 flex min-w-fit cursor-pointer items-center justify-center gap-0 self-end rounded-t-2xl px-5 py-2.5 ${isCol && items.find((item) => item.icon) ? 'h-20' : 'gap-2'}`,
+          `tab mt-1 flex min-w-fit cursor-pointer items-center justify-center gap-0 self-end rounded-t-2xl px-5 py-2.5 ${isCol && items.find(item => item.icon) ? "h-20" : "gap-2"}`,
           item.class,
-          index === currentTabIndex ? twMerge('bg-(--back-color) text-blue-500', item.class) : 'bg-(--bg-color) text-gray-500',
+          index === currentTabIndex ? twMerge("bg-(--back-color) text-blue-500", item.class) : "bg-(--bg-color) text-gray-500",
         )}
         style="width: {item.class
           ?.split(' ')
           .find((cls: string) => cls.startsWith('w-'))
           ?.replace('w-[', '')
           .slice(0, -1)};"
-        onclick={() => (currentTabIndex = index)}
-      >
+        onclick={() => (currentTabIndex = index)}>
         {#if item?.icon}
           <span class="flex h-7 w-7 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
-            {#if typeof item.icon === 'string'}
+            {#if typeof item.icon === "string"}
               {@html item.icon}
             {:else}
               {@const IconComponent = item.icon}
@@ -61,22 +58,20 @@
         {/if}
       </button>
       <span
-        class="{isCol && items.find((item) => item.icon) ? 'h-9' : 'h-4'} w-0 border border-l {index !== items.length - 1 &&
+        class="{isCol && items.find(item => item.icon) ? 'h-9' : 'h-4'} w-0 border border-l {index !== items.length - 1 &&
         index !== currentTabIndex &&
         index !== currentTabIndex - 1
           ? 'border-gray-500'
-          : 'border-(--bg-color)'}"
-      ></span>
+          : 'border-(--bg-color)'}"></span>
     {/each}
   </div>
 
   <!-- Контент вкладки -->
   <div
     class="grid flex-1 overflow-y-scroll w-full gap-2 rounded-2xl bg-(--back-color) p-4"
-    style="grid-template-columns: repeat({size.width || 1}, minmax(0, 1fr)); grid-template-rows: repeat({size.height || 1}, auto);"
-  >
+    style="grid-template-columns: repeat({size.width || 1}, minmax(0, 1fr)); grid-template-rows: repeat({size.height || 1}, auto);">
     {#if Components}
-      {#each (apiArray ?? []).filter((c) => c.id.endsWith(`${currentTabIndex}`)) as comp}
+      {#each (apiArray ?? []).filter(c => c.id.endsWith(`${currentTabIndex}`)) as comp}
         {@render Components(comp, false)}
       {/each}
     {:else if children}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "license": "MIT",
   "type": "module",
   "scripts": {