poe-svelte-ui-lib 1.0.6 → 1.0.7

package/dist/{FileAttach/FileAttach.svelte.d.ts → FileAttach.svelte.d.ts}

@@ -17,6 +17,6 @@ interface FileInputProps {
     currentImage?: string | null;
     onChange?: (event: Event, file: File | null) => void;
 }
-declare const FileAttach: import("svelte").Component<FileInputProps, {}, "">;
+declare const FileAttach: import("svelte").Component<FileInputProps, {}, "currentImage">;
 type FileAttach = ReturnType<typeof FileAttach>;
 export default FileAttach;

package/dist/Graph/Graph.svelte

@@ -6,7 +6,7 @@
 
   /* Инициализация пропсов с дефолтными значениями */
   let {
-    id = { name: '', value: crypto.randomUUID() },
+    id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
     streamingData = { data: [], timestamp: Date.now() },
@@ -63,7 +63,7 @@
       return {
         id: existingData?.id || crypto.randomUUID(),
         points: existingData?.points || [],
-        color: d.color || defaultColors[i % defaultColors.length],
+        color: defaultColors[i % defaultColors.length],
         name: d.name || `Value ${i}`,
       }
     })
@@ -219,7 +219,7 @@
   }
 </script>
 
-<div id={id.value} class={`relative flex w-full flex-col items-center justify-center ${wrapperClass}`}>
+<div {id} 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}

package/dist/Graph/GraphProps.svelte

@@ -0,0 +1,41 @@
+<!-- $lib/ElementsUI/SwitchProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import { type UIComponent, type IGraphProps, updateProperty } from '../types'
+  import * as UI from '..'
+
+  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 && Array.isArray(DeviceVariables)
+      ? DeviceVariables.map((variable) => ({
+          id: variable.name,
+          value: variable.value,
+          name: `${variable.value} | ${variable.name}`,
+        }))
+      : [],
+  )
+</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('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        onUpdate={(value) => {
+          updateProperty('id', value.value as string, component, onPropertyChange)
+        }}
+      />
+    </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, type 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

@@ -3,23 +3,22 @@
   import { onMount } from 'svelte'
   import { fly } from 'svelte/transition'
   import type { IInputProps } from '../types'
+  import { twMerge } from 'tailwind-merge'
 
   let {
-    id = { name: '', value: crypto.randomUUID() },
+    id = crypto.randomUUID(),
     wrapperClass = '',
     label = { name: '', class: '' },
     disabled = false,
     readonly = false,
     value = $bindable(),
     type = 'text',
-    autocomplete = 'off',
+    placeholder = '',
     componentClass = '',
     maxlength = 100,
-    number = { minNum: -1000000, maxNum: 1000000, step: 1 },
     textareaRows = 3,
-    copyButton = false,
-    regExp = '^[\\s\\S]*$',
-    help = { placeholder: '', info: '' },
+    number = { minNum: -1000000, maxNum: Infinity, step: 1 },
+    help = { info: '', autocomplete: 'off', copyButton: false, regExp: '^[\\s\\S]*$' },
     onUpdate = () => {},
   }: IInputProps = $props()
 
@@ -27,20 +26,6 @@
   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
@@ -53,7 +38,7 @@
     const match = pattern.match(/^\/(.*)\/([gimsuy]*)$/)
     return match ? new RegExp(match[1], match[2]) : new RegExp(pattern)
   }
-  let RegExpObj = $derived(() => parseRegExp(regExp))
+  let RegExpObj = $derived(() => parseRegExp(help.regExp ?? ''))
   let isValid = $derived(RegExpObj().test(typeof value === 'string' ? value : String(value)))
 
   const handleInputChange = (value: string | number) => {
@@ -67,28 +52,30 @@
   }
 </script>
 
-<div class="bg-max relative flex w-full flex-col items-center {type === 'text-area' ? 'h-full' : ''} {wrapperClass}">
+<div class={twMerge(`bg-max ${type === 'text-area' ? 'h-full' : ''} relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+    <h5 class={twMerge(`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
+        class={twMerge(
+          `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}"
+              ${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' : ''} 
+              ${help.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}
+        {id}
+        {placeholder}
         {disabled}
-        {autocomplete}
+        autocomplete={help?.autocomplete}
         oninput={(e) => handleInputChange((e.currentTarget as HTMLInputElement).value)}
         type={type === 'password' ? (showPassword ? 'text' : 'password') : type === 'number' ? 'number' : 'text'}
         {maxlength}
@@ -100,19 +87,21 @@
     {: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}"
+        class={twMerge(
+          `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' : ''}
+            ${help.copyButton ? 'pr-8' : ''}`,
+          componentClass,
+        )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-        id={id.value}
+        {id}
         {disabled}
         {maxlength}
         rows={textareaRows}
-        placeholder={help?.placeholder}
+        {placeholder}
         {readonly}
         oninput={(e) => handleInputChange((e.currentTarget as HTMLTextAreaElement).value)}
       ></textarea>
@@ -146,7 +135,7 @@
       </button>
     {/if}
 
-    {#if copyButton && (type === 'text' || type === 'text-area')}
+    {#if help.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' : ''}"
@@ -215,13 +204,19 @@
     {#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)}
+        class="button-info absolute left-2 flex border-none bg-transparent {type === 'text-area' ? 'top-2' : ''} {disabled
+          ? 'opacity-50'
+          : 'cursor-pointer'}"
+        onmouseenter={() => (showInfo = true)}
+        onmouseleave={() => (showInfo = false)}
         aria-label={showInfo ? 'Скрыть инфо' : 'Показать инфо'}
       >
         <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"
-            ><circle cx="12" cy="12" r="10" stroke-width="1.3" /><path stroke-width="1.5" d="M12 16v-4.5" /><path stroke-width="1.8" d="M12 8.012v-.01" /></g
+            ><circle cx="12" cy="12" r="10" stroke-width="1.3" /><path stroke-width="1.5" d="M12 16v-4.5" /><path
+              stroke-width="1.8"
+              d="M12 8.012v-.01"
+            /></g
           ></svg
         >
       </button>
@@ -229,8 +224,7 @@
       {#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));"
+          class="absolute top-1/2 left-10 z-50 w-auto -translate-y-1/2 rounded bg-[var(--container-color)] px-2 py-1 shadow-lg"
         >
           {help?.info}
         </div>

package/dist/Input/InputProps.svelte

@@ -0,0 +1,205 @@
+<!-- $lib/ElementsUI/InputProps.svelte -->
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { t } from '../locales/i18n'
+  import type { IInputProps, UIComponent, ISelectOption } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IInputProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  let isValidRegExp = $state(true)
+  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS: ISelectOption<string>[] = $derived(
+    DeviceVariables && Array.isArray(DeviceVariables)
+      ? DeviceVariables.map((variable) => ({
+          id: variable.name,
+          value: variable.value,
+          name: `${variable.value} | ${variable.name}`,
+        }))
+      : [],
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.componentClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+    ),
+  )
+
+  const initialAlign = $derived(
+    $optionsStore.ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+
+  /* Обновление свойства */
+  const updateProperty = (path: string, value: string | object | boolean | number | RegExp) => {
+    const newProperties = JSON.parse(JSON.stringify(component.properties))
+    if (path === 'regExp') {
+      try {
+        let regex: RegExp
+        if (typeof value === 'string') {
+          const pattern = value.match(/^\/(.*)\/([gimsuy]*)$/)
+
+          regex = pattern ? new RegExp(pattern[1], pattern[2]) : new RegExp(value)
+          if (pattern === null) return
+          regex.test('')
+        } else {
+          throw new Error('Invalid RegExp type')
+        }
+
+        newProperties.regExp = regex
+        isValidRegExp = true
+      } catch (error) {
+        console.warn('Invalid RegExp:', error)
+        newProperties.regExp = typeof value === 'string' ? value : String(value)
+        isValidRegExp = false
+        return
+      }
+    }
+
+    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)
+  }
+
+  const handleOptionColorChange = (color: string) => {
+    let componentClass = component.properties.componentClass || ''
+
+    componentClass = componentClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('bg-'))
+      .join(' ')
+
+    if (color) {
+      componentClass += ` ${color}`
+    }
+
+    updateProperty('componentClass', componentClass)
+  }
+</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('constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        onUpdate={(selectedOption) => {
+          if (selectedOption && selectedOption.name) {
+            updateProperty('id', selectedOption.value as string)
+            updateProperty('eventHandler.Variables', selectedOption.value as string)
+          }
+        }}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        options={$optionsStore.INPUT_TYPE_OPTIONS}
+        type="buttons"
+        value={$optionsStore.INPUT_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'text'))}
+        onUpdate={(selectedOption) => updateProperty('type', selectedOption.value as string)}
+      />
+      {#if component.properties.type === 'text' || component.properties.type === 'password' || component.properties.type === 'text-area'}
+        <UI.Input
+          label={{ name: $t('constructor.props.maxlenght') }}
+          value={component.properties.maxlength}
+          onUpdate={(value) => updateProperty('maxlength', value as string)}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.regexp') }}
+          value={component.properties.help.regExp}
+          maxlength={150}
+          help={{ info: $t('constructor.props.regexp.info') }}
+          componentClass={isValidRegExp === false ? '!border-2 !border-red-400' : ''}
+          onUpdate={(value) => updateProperty('help.regExp', value)}
+        />
+      {:else if component.properties.type === 'number' && !component.properties.readonly && !component.properties.disabled}
+        <UI.Input
+          label={{ name: $t('constructor.props.minnum') }}
+          value={component.properties.number.minNum as number}
+          type="number"
+          onUpdate={(value) => {
+            // if ((value as number) >= component.properties.number.maxNum) {
+            //   value = component.properties.number.maxNum - component.properties.number.step
+            // }
+            updateProperty('number.minNum', Number(value))
+          }}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.maxnum') }}
+          value={component.properties.number.maxNum as number}
+          type="number"
+          onUpdate={(value) => {
+            // if ((value as number) <= component.properties.number.minNum) {
+            //   value = component.properties.number.minNum + component.properties.number.step
+            // }
+            updateProperty('number.maxNum', Number(value))
+          }}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.step') }}
+          value={component.properties.number.step as number}
+          type="number"
+          onUpdate={(value) => updateProperty('number.step', Number(value))}
+        />
+      {/if}
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.placeholder') }}
+        value={component.properties.placeholder as string}
+        onUpdate={(value) => updateProperty('placeholder', value)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.info') }}
+        value={component.properties.help.info as string}
+        onUpdate={(value) => updateProperty('help.info', value)}
+      />
+      <UI.Switch
+        label={{ name: $t('constructor.props.readonly') }}
+        value={component.properties.readonly ? 2 : 1}
+        onChange={(value) => updateProperty('readonly', value === 2)}
+      />
+      <UI.Switch
+        label={{ name: $t('constructor.props.copy') }}
+        value={component.properties.help.copyButton ? 2 : 1}
+        onChange={(value) => updateProperty('help.copyButton', value === 2)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('label.class', `${component.properties.label.class} ${option.value}`)}
+      />
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => handleOptionColorChange(option.value as string)}
+      />
+    </div>
+  </div>
+{/if}

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

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

package/dist/Modal.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte'
+  import { fade, scale } from 'svelte/transition'
+  import { twMerge } from 'tailwind-merge'
+  import CrossIcon from './libIcons/CrossIcon.svelte'
+
+  let {
+    isOpen = $bindable(false),
+    title,
+    wrapperClass = '',
+    main,
+    footer,
+    onCancel = () => (isOpen = false),
+  }: {
+    isOpen?: boolean
+    title?: string
+    wrapperClass?: string
+    main: Snippet
+    footer?: Snippet
+    onCancel?: () => void
+  } = $props()
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') isOpen = false
+  }
+
+  onMount(() => {
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  })
+</script>
+
+{#if isOpen}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" transition:fade={{ duration: 200 }}>
+    <div
+      class={twMerge(`flex w-300 flex-col overflow-hidden rounded-2xl bg-[var(--back-color)] text-center`, wrapperClass)}
+      transition:scale={{ duration: 250, start: 0.8 }}
+    >
+      <div class="flex items-end justify-between bg-[var(--field-color)] px-6 py-3">
+        <h4>{title}</h4>
+        <button class="h-6 w-6 cursor-pointer" onclick={onCancel}> <CrossIcon /> </button>
+      </div>
+
+      <div class="flex h-full w-full flex-col overflow-auto p-2">
+        {@render main?.()}
+      </div>
+      {#if footer}
+        <div class="flex flex-row-reverse justify-between bg-[var(--field-color)] p-1.5">
+          {@render footer?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/Modal.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    isOpen?: boolean;
+    title?: string;
+    wrapperClass?: string;
+    main: Snippet;
+    footer?: Snippet;
+    onCancel?: () => void;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "isOpen">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/ProgressBar/ProgressBar.svelte

@@ -1,48 +1,50 @@
 <!-- $lib/ElementsUI/ProgressBar.svelte -->
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge'
   import type { IProgressBarProps } from '../types'
 
   let {
-    id = { name: '', value: crypto.randomUUID() },
+    id = crypto.randomUUID(),
     label = { name: '', class: '' },
     value = $bindable(0),
-    range = {
-      min: 0,
-      max: 100,
+    number = {
+      minNum: 0,
+      maxNum: 100,
       units: '%',
     },
     wrapperClass = '',
   }: IProgressBarProps = $props()
 
-  let numericValue = $state(0)
-  const min = $derived(range.min ?? 0)
-  const max = $derived(range.max ?? 100)
+  const min = $derived(number.minNum ?? 0)
+  const max = $derived(number.maxNum ?? 100)
 
-  $effect(() => {
-    if (typeof value === 'number' && !isNaN(value)) {
-      numericValue = Math.max(min, Math.min(max, value))
-    } else if (typeof value === 'string') {
-      const parsedValue = parseFloat(value)
-      if (!isNaN(parsedValue)) {
-        numericValue = Math.max(min, Math.min(max, parsedValue))
+  let numericValue = $derived(
+    (() => {
+      if (typeof value === 'number' && !isNaN(value)) {
+        return Math.max(min, Math.min(max, value))
+      } else if (typeof value === 'string') {
+        const parsedValue = parseFloat(value)
+        if (!isNaN(parsedValue)) {
+          return Math.max(min, Math.min(max, parsedValue))
+        }
+      } else {
+        return min
       }
-    } else {
-      numericValue = min
-    }
-  })
+    })(),
+  )
 
   let progressPercent = $derived((((value as number) - min) / (max - min)) * 100)
 </script>
 
-<div id={id.value} class={`relative flex w-full flex-col items-center ${wrapperClass}`}>
+<div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
-    <h5 class={`mb-1 w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+    <h5 class={twMerge(`mb-1 w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
   <div class="flex w-full flex-col items-center">
     <div class="relative h-2 w-full rounded bg-gray-400">
       <div class="absolute top-0 left-0 h-full rounded bg-[var(--bg-color)]" style="width: {progressPercent}%;"></div>
     </div>
-    <span class="ml-2 font-semibold">{numericValue.toFixed(2)}{range.units}</span>
+    <span class="ml-2 font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
   </div>
 </div>