poe-svelte-ui-lib 0.2.0 → 1.0.0

package/dist/Graph/Graph.svelte

@@ -0,0 +1,270 @@
+<!-- $lib/ElementsUI/Graph.svelte -->
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import Select from '../Select/Select.svelte'
+  import type { IGraphDataObject, IGraphProps, ISelectOption } from '../types'
+
+  /* Инициализация пропсов с дефолтными значениями */
+  let {
+    id = { name: '', value: crypto.randomUUID() },
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    streamingData = { data: [], timestamp: Date.now() },
+    isTest = false,
+  }: IGraphProps = $props()
+
+  /* Состояние компонента */
+  let graphData = $state<{ id: string; points: { x: number; y: number }[]; color: string; name: string }[]>([])
+  let currentValues = $state<number[]>([])
+  let container: HTMLDivElement
+  let canvas: HTMLCanvasElement
+  let ctx: CanvasRenderingContext2D
+  let width = $state(600)
+  let height = $state(125)
+
+  /* Константы и настройки */
+  const REFRESH_OPTIONS: ISelectOption[] = [
+    { id: 'RefreshOption-AUTO', name: 'AUTO', value: 0, class: '' },
+    { id: 'RefreshOption-10', name: '10', value: 10, class: '' },
+    { id: 'RefreshOption-25', name: '25', value: 25, class: '' },
+    { id: 'RefreshOption-50', name: '50', value: 50, class: '' },
+    { id: 'RefreshOption-100', name: '100', value: 100, class: '' },
+    { id: 'RefreshOption-250', name: '250', value: 250, class: '' },
+    { id: 'RefreshOption-500', name: '500', value: 500, class: '' },
+    { id: 'RefreshOption-1000', name: '1000', value: 1000, class: '' },
+    { id: 'RefreshOption-5000', name: '5000', value: 5000, class: '' },
+  ]
+  // const REFRESH_OPTIONS = [10, 25, 50, 100, 250, 500, 1000, 5000]
+  const SCALE_OPTIONS: ISelectOption[] = [
+    { id: 'ScaleOption-50', name: '50', value: 50, class: '' },
+    { id: 'ScaleOption-100', name: '100', value: 100, class: '' },
+    { id: 'ScaleOption-500', name: '500', value: 500, class: '' },
+    { id: 'ScaleOption-1000', name: '1000', value: 1000, class: '' },
+    { id: 'ScaleOption-2000', name: '2000', value: 2000, class: '' },
+  ]
+  // const SCALE_OPTIONS = [50, 100, 500, 1000, 2000]
+  let selectedRefreshRate = $state(0)
+  let selectedScale = $state(100)
+  const maxDataPoints = $derived(selectedRefreshRate == 0 ? 20 : 100)
+  const defaultColors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899']
+
+  let previousDataTimestamp: number = $state(0)
+
+  /* Инициализация данных графиков */
+  const initializeGraphData = () => {
+    if (typeof streamingData === 'string') {
+      streamingData = JSON.parse(streamingData)
+    }
+    if (!streamingData.data || streamingData.data.length === 0) {
+      graphData = []
+      currentValues = []
+      return
+    }
+    const newGraphData = (streamingData.data as IGraphDataObject[]).slice(0, 6).map((d, i) => {
+      const existingData = graphData.find((g) => g.name === d.name) || graphData[i]
+      return {
+        id: existingData?.id || crypto.randomUUID(),
+        points: existingData?.points || [],
+        color: d.color || defaultColors[i % defaultColors.length],
+        name: d.name || `Value ${i}`,
+      }
+    })
+    if (JSON.stringify(graphData) !== JSON.stringify(newGraphData)) {
+      graphData = newGraphData
+      currentValues = (streamingData.data as IGraphDataObject[]).map((d) => d.value || 0)
+    }
+  }
+
+  /* Вызываем инициализацию при монтировании и при изменении streamingData */
+  onMount(initializeGraphData)
+  $effect(() => {
+    initializeGraphData()
+  })
+
+  /* Обработка входящих данных */
+  let intervalId: ReturnType<typeof setInterval>
+  $effect(() => {
+    clearInterval(intervalId)
+    if (selectedRefreshRate > 0 && streamingData.data && streamingData.data.length > 0) {
+      intervalId = setInterval(() => {
+        let newValues
+        if (isTest) newValues = graphData.map(() => Math.random() * 100 - 50)
+        else newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
+        const now = Date.now()
+        newValues.forEach((value, i) => {
+          if (!graphData[i]) return
+          graphData[i].points.push({ x: now, y: value })
+          if (graphData[i].points.length > maxDataPoints) {
+            graphData[i].points.shift()
+          }
+          currentValues[i] = value
+        })
+        drawAllGraphs()
+      }, selectedRefreshRate)
+    } else if (selectedRefreshRate == 0 && streamingData.data && streamingData.data.length > 0 && !isTest) {
+      intervalId = setInterval(() => {
+        if (previousDataTimestamp < (streamingData.timestamp ?? Date.now())) {
+          let newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
+
+          newValues.forEach((value, i) => {
+            if (!graphData[i]) return
+            graphData[i].points.push({ x: streamingData.timestamp ?? Date.now(), y: value })
+            if (graphData[i].points.length > maxDataPoints) {
+              graphData[i].points.shift()
+            }
+            currentValues[i] = value
+          })
+          drawAllGraphs()
+          previousDataTimestamp = streamingData.timestamp ?? Date.now()
+        }
+      }, 10)
+    }
+    console.log(streamingData.data)
+    return () => clearInterval(intervalId)
+  })
+
+  let resizeObserver: ResizeObserver
+  $effect(() => {
+    if (!container || !canvas) return
+    const dpr = window.devicePixelRatio || 1
+    resizeObserver = new ResizeObserver(() => {
+      const rect = container.getBoundingClientRect()
+      width = rect.width
+      height = rect.height
+      canvas.width = width * dpr
+      canvas.height = height * dpr
+      canvas.style.width = `${width}px`
+      canvas.style.height = `${height}px`
+      ctx = canvas.getContext('2d')!
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      drawAllGraphs()
+    })
+    resizeObserver.observe(container)
+    return () => resizeObserver.disconnect()
+  })
+
+  const drawAllGraphs = () => {
+    if (!ctx) return
+    ctx.clearRect(0, 0, width, height)
+
+    const padding = {
+      top: 10,
+      right: 10,
+      bottom: 20,
+      left: 35,
+    }
+
+    const graphWidth = width - padding.left - padding.right
+    const graphHeight = height - padding.top - padding.bottom
+
+    const allPoints = graphData.flatMap((g) => g.points)
+    const minX = Math.min(...allPoints.map((p) => p.x))
+    const maxX = Math.max(...allPoints.map((p) => p.x))
+    const timeSpan = maxX - minX || 1
+
+    // Функции преобразования координат с учетом отступов
+    const getX = (x: number) => padding.left + ((x - minX) / timeSpan) * graphWidth
+    const getY = (y: number) => padding.top + graphHeight - (((y / selectedScale) * graphHeight) / 2 + graphHeight / 2)
+
+    /* Сетка X */
+    ctx.strokeStyle = '#777'
+    ctx.fillStyle = '#777'
+    ctx.lineWidth = 0.5
+    ctx.font = '10px monospace'
+    ctx.textAlign = 'center'
+
+    const now = Date.now()
+    for (let i = 0; i <= 10; i++) {
+      const t = minX + (i / 10) * timeSpan
+      const x = getX(t)
+      const secondsAgo = ((t - now) / 1000).toFixed(0)
+      ctx.beginPath()
+      ctx.moveTo(x, padding.top)
+      ctx.lineTo(x, height - padding.bottom)
+      ctx.stroke()
+      ctx.textBaseline = 'top'
+      ctx.fillText(`${secondsAgo}s`, x, height - padding.bottom + 2)
+    }
+
+    /* Сетка Y */
+    ctx.textAlign = 'right'
+    ctx.textBaseline = 'middle'
+    const ySteps = 8
+    for (let i = 0; i <= ySteps; i++) {
+      const yVal = selectedScale - (i * 2 * selectedScale) / ySteps
+      const y = getY(yVal)
+      ctx.beginPath()
+      ctx.moveTo(padding.left, y)
+      ctx.lineTo(width - padding.right, y)
+      ctx.stroke()
+      ctx.fillText(`${yVal.toFixed(0)}`, padding.left - 5, y)
+    }
+
+    /* Отрисовка графиков */
+    ctx.lineWidth = 2
+    graphData.forEach(({ points, color }) => {
+      if (points.length < 2) return
+      ctx.strokeStyle = color
+      ctx.beginPath()
+      ctx.moveTo(getX(points[0].x), getY(points[0].y))
+      for (let i = 1; i < points.length - 1; i++) {
+        const p1 = points[i]
+        const p2 = points[i + 1]
+        const xc2 = (p1.x + p2.x) / 2
+        const yc2 = (p1.y + p2.y) / 2
+        ctx.quadraticCurveTo(getX(p1.x), getY(p1.y), getX(xc2), getY(yc2))
+      }
+      const last = points[points.length - 1]
+      ctx.lineTo(getX(last.x), getY(last.y))
+      ctx.stroke()
+    })
+  }
+</script>
+
+<div id={id.value} class={`relative flex w-full flex-col items-center justify-center ${wrapperClass}`}>
+  {#if label.name}
+    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+  {/if}
+
+  <div class="flex w-full flex-row gap-4">
+    <!-- График -->
+    <div bind:this={container} class="h-64 flex-grow overflow-hidden rounded-md border border-gray-200">
+      <canvas class="h-full w-full bg-[var(--back-color)]" bind:this={canvas}></canvas>
+    </div>
+
+    <!-- Панель настроек -->
+    <div class="flex w-48 flex-col gap-2">
+      <!-- Развертка по горизонтали -->
+      <Select
+        label={{ name: 'Refresh rate', class: '' }}
+        options={REFRESH_OPTIONS}
+        value={REFRESH_OPTIONS.find((o) => o.value == selectedRefreshRate)}
+        onUpdate={(value) => (selectedRefreshRate = value.value as number)}
+      />
+
+      <!-- Масштаб по вертикали -->
+      <Select
+        label={{ name: 'Scale' }}
+        options={SCALE_OPTIONS}
+        value={REFRESH_OPTIONS.find((o) => o.value == selectedScale)}
+        onUpdate={(value) => (selectedScale = value.value as number)}
+      />
+
+      <!-- Переменные и их значение -->
+      <div>
+        <h5 class="px-4">Values</h5>
+        <table class="w-full font-mono text-sm">
+          <tbody>
+            {#each graphData as data, i (i)}
+              <tr>
+                <td><div class="mr-2 h-4 w-4 rounded-full" style="background-color: {data.color}"></div></td>
+                <td class="w-24 truncate text-left font-semibold">{(streamingData.data as IGraphDataObject[])?.[i]?.name}</td>
+                <td class="w-16 text-right">{currentValues[i].toFixed(2)}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/Graph/Graph.svelte.d.ts

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

package/dist/Graph/GraphProps.svelte

@@ -0,0 +1,56 @@
+<!-- $lib/ElementsUI/SwitchProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import type { UIComponent, IGraphProps } from '../types'
+  import * as UI from '../index'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IGraphProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(
+    DeviceVariables.map((variable: { value: string; name: string }) => ({
+      id: variable.name,
+      value: variable.value,
+      name: `${variable.value} | ${variable.name}`,
+    })),
+  )
+
+  /* Обновление свойства */
+  const updateProperty = (path: string, value: string | object) => {
+    const newProperties = JSON.parse(JSON.stringify(component.properties))
+    const parts = path.split('.')
+    let obj = newProperties
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]
+      if (!obj[part]) obj[part] = {}
+      obj = obj[part]
+    }
+
+    obj[parts[parts.length - 1]] = value
+    onPropertyChange(newProperties)
+  }
+</script>
+
+{#if component && component.properties}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('service.constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        onUpdate={(value) => {
+          updateProperty('id.name', (value.name as string).split('|')[1].trim())
+          updateProperty('id.value', value.value as string)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2"></div>
+    <div class="flex w-1/3 flex-col px-2"></div>
+  </div>
+{/if}

package/dist/Graph/GraphProps.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { UIComponent, IGraphProps } from '../types';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IGraphProps>;
+    };
+    onPropertyChange: (value: string | object) => void;
+};
+declare const GraphProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type GraphProps = ReturnType<typeof GraphProps>;
+export default GraphProps;

package/dist/Input/Input.svelte

@@ -0,0 +1,239 @@
+<!-- $lib/ElementsUI/Input.svelte -->
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { fly } from 'svelte/transition'
+  import type { IInputProps } from '../types'
+  import { t } from '../locales/i18n'
+
+  let {
+    id = { name: '', value: crypto.randomUUID() },
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    disabled = false,
+    readonly = false,
+    value = $bindable(),
+    type = 'text',
+    autocomplete = 'off',
+    componentClass = '',
+    maxlength = 100,
+    number = { minNum: -1000000, maxNum: 1000000, step: 1 },
+    textareaRows = 3,
+    copyButton = false,
+    regExp = '^[\\s\\S]*$',
+    help = { placeholder: '', info: '' },
+    onUpdate = () => {},
+  }: IInputProps = $props()
+
+  let showPassword = $state(false)
+  let showInfo = $state(false)
+  let isCopied = $state(false)
+
+  /* Закрытие INFO при клике вне компонента */
+  onMount(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (!target.closest('.info-container') && !target.closest('.button-info')) {
+        showInfo = false
+      }
+    }
+    window.addEventListener('click', handleClickOutside)
+    return () => {
+      window.removeEventListener('click', handleClickOutside)
+    }
+  })
+
+  $effect(() => {
+    if (type === 'number') {
+      if (value === undefined || value === null || value === '') value = number.minNum
+    }
+  })
+
+  /* Обработка регулярного выражения */
+  const parseRegExp = (pattern: string | RegExp): RegExp => {
+    if (pattern instanceof RegExp) return pattern
+    const match = pattern.match(/^\/(.*)\/([gimsuy]*)$/)
+    return match ? new RegExp(match[1], match[2]) : new RegExp(pattern)
+  }
+  let RegExpObj = $derived(() => parseRegExp(regExp))
+  let isValid = $derived(RegExpObj().test(typeof value === 'string' ? value : String(value)))
+
+  const handleInputChange = (value: string | number) => {
+    if (type === 'number') {
+      const numValue = typeof value === 'string' ? parseFloat(value.replace(',', '.')) : Number(value)
+      if (!isNaN(numValue)) onUpdate?.(numValue)
+      else onUpdate?.(value as string)
+    } else {
+      onUpdate?.(value as string)
+    }
+  }
+</script>
+
+<div class="bg-max relative flex w-full flex-col items-center {type === 'text-area' ? 'h-full' : ''} {wrapperClass}">
+  {#if label.name}
+    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+  {/if}
+
+  <div class="relative flex w-full items-center {type === 'text-area' ? 'h-full' : ''}">
+    {#if type === 'text' || type === 'password' || type === 'number'}
+      <input
+        bind:value
+        class="w-full rounded-2xl border px-4 py-1 text-center transition-all duration-300 outline-none focus:border-blue-400
+              [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
+              {isValid ? 'border-[var(--border-color)]' : '!border-red-400 shadow-[0_0_6px_var(--red-color)]'}
+              {disabled ? 'opacity-50' : 'hover:shadow-md'} 
+              {readonly ? '' : 'hover:shadow-md'}
+              {help?.info ? 'pl-8' : ''} 
+              {copyButton || type === 'password' || type === 'number' ? 'pr-8' : ''}
+              {componentClass}"
+        style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+        id={id.value}
+        placeholder={help?.placeholder}
+        {disabled}
+        {autocomplete}
+        oninput={(e) => handleInputChange((e.currentTarget as HTMLInputElement).value)}
+        type={type === 'password' ? (showPassword ? 'text' : 'password') : type === 'number' ? 'number' : 'text'}
+        {maxlength}
+        min={number?.minNum}
+        max={number?.maxNum}
+        step={number?.step}
+        {readonly}
+      />
+    {:else if type === 'text-area'}
+      <textarea
+        bind:value
+        class="h-full w-full resize-y rounded-2xl border border-[var(--border-color)] px-2 py-1 text-center font-mono transition-all duration-300 outline-none focus:border-blue-400
+            {isValid ? 'border-[var(--border-color)]' : '!border-red-400 shadow-[0_0_6px_var(--red-color)]'}
+            {disabled ? 'opacity-50' : 'hover:shadow-md'} 
+            {readonly ? '' : 'hover:shadow-md'}
+            {help?.info ? 'pl-8' : ''}
+            {copyButton ? 'pr-8' : ''}
+            {componentClass}"
+        style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+        id={id.value}
+        {disabled}
+        {maxlength}
+        rows={textareaRows}
+        placeholder={help?.placeholder}
+        {readonly}
+        oninput={(e) => handleInputChange((e.currentTarget as HTMLTextAreaElement).value)}
+      ></textarea>
+    {/if}
+
+    {#if type === 'password' && !disabled}
+      <button
+        type="button"
+        class="absolute right-2 flex cursor-pointer border-none bg-transparent"
+        onclick={() => (showPassword = !showPassword)}
+        aria-label={showPassword ? 'Скрыть пароль' : 'Показать пароль'}
+      >
+        {#if showPassword}
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
+            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+              <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0" />
+              <path d="M21 12q-3.6 6-9 6t-9-6q3.6-6 9-6t9 6" />
+            </g>
+          </svg>
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
+            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+              <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+              <path d="M16.681 16.673A8.7 8.7 0 0 1 12 18q-5.4 0-9-6q1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6q-1 1.665-2.138 2.87M3 3l18 18" />
+            </g>
+          </svg>
+        {/if}
+      </button>
+    {/if}
+
+    {#if copyButton && (type === 'text' || type === 'text-area')}
+      <button
+        type="button"
+        class="absolute right-2 flex cursor-pointer border-none bg-transparent {type === 'text-area' ? 'top-2' : ''}"
+        onclick={(e) => {
+          e.preventDefault()
+          navigator.clipboard.writeText(value as string)
+          isCopied = true
+          setTimeout(() => (isCopied = false), 1000)
+        }}
+        aria-label="Копировать текст"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24">
+          <g fill="none" stroke="currentColor" stroke-width="1.5">
+            <path
+              d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
+            />
+            <path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
+          </g>
+        </svg>
+      </button>
+
+      {#if isCopied}
+        <div
+          class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-[var(--green-color)] px-2 py-1 text-sm shadow-lg"
+          transition:fly={{ x: 10, duration: 200 }}
+        >
+          {$t('component.input.copy')}
+        </div>
+      {/if}
+    {/if}
+
+    {#if type === 'number' && !readonly && !disabled}
+      <div class="absolute right-0 flex h-full w-8 flex-col items-center justify-center rounded-r-2xl border-l border-[var(--border-color)]">
+        <button
+          class="flex h-1/2 w-full items-center rounded-tr-2xl border-b border-[var(--border-color)] pl-2 transition-colors duration-150 hover:bg-[var(--gray-color)]/30 active:bg-[var(--gray-color)]/10"
+          onclick={() => {
+            if (!number.maxNum || !number.step) return
+            if (Number(value) + number.step >= number.maxNum) {
+              value = number.maxNum
+              onUpdate?.(value as number)
+              return
+            }
+            value = Number(value) + (number.step ?? 1)
+            onUpdate?.(value as number)
+          }}
+          aria-label="Увеличить">+</button
+        >
+
+        <button
+          class="flex h-1/2 w-full items-center rounded-br-2xl pl-2 transition-colors duration-150 hover:bg-[var(--gray-color)]/30 active:bg-[var(--gray-color)]/10"
+          onclick={() => {
+            if (number.minNum === null || number.minNum === undefined || !number.step) return
+            if (Number(value) - number.step <= number.minNum) {
+              value = number.minNum
+              onUpdate?.(value as number)
+              return
+            }
+            value = Number(value) - (number.step ?? 1)
+            onUpdate?.(value as number)
+          }}
+          aria-label="Уменьшить">−</button
+        >
+      </div>
+    {/if}
+
+    {#if help.info}
+      <button
+        type="button"
+        class="button-info absolute left-2 flex border-none bg-transparent {type === 'text-area' ? 'top-2' : ''} {disabled ? 'opacity-50' : 'cursor-pointer'}"
+        onclick={() => (showInfo = !showInfo)}
+        aria-label={showInfo ? 'Скрыть инфо' : 'Показать инфо'}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" height="1.5rem" width="1.5rem" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M12 16.5q.214 0 .357-.144T12.5 16v-4.5q0-.213-.144-.356T11.999 11t-.356.144t-.143.356V16q0 .213.144.356t.357.144M12 9.577q.262 0 .439-.177t.176-.438t-.177-.439T12 8.346t-.438.177t-.177.439t.177.438t.438.177M12.003 21q-1.867 0-3.51-.708q-1.643-.709-2.859-1.924t-1.925-2.856T3 12.003t.709-3.51Q4.417 6.85 5.63 5.634t2.857-1.925T11.997 3t3.51.709q1.643.708 2.859 1.922t1.925 2.857t.709 3.509t-.708 3.51t-1.924 2.859t-2.856 1.925t-3.509.709M12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"
+          />
+        </svg>
+      </button>
+
+      {#if showInfo}
+        <div
+          transition:fly={{ x: -15, duration: 250 }}
+          class="info-container absolute z-50 w-auto rounded px-2 py-1 shadow-lg"
+          style="left: 2.5rem; top: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--yellow-color) 20%, var(--back-color));"
+        >
+          {help?.info}
+        </div>
+      {/if}
+    {/if}
+  </div>
+</div>

package/dist/Input/Input.svelte.d.ts

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