poe-svelte-ui-lib 1.1.15 → 1.1.17

package/dist/Accordion/Accordion.svelte

@@ -21,14 +21,14 @@
   {id}
   class={twMerge(
     `${outline ? 'border-none' : 'rounded-xl hover:shadow-md'} w-full
-    border border-[var(--border-color)] bg-[var(--container-color)] p-0 transition-shadow duration-250`,
+    border border-(--border-color) bg-(--container-color) p-0 transition-shadow duration-250`,
     wrapperClass,
   )}
   transition:slide={{ duration: 250 }}
 >
   <button
     class="flex w-full cursor-pointer items-center justify-between p-4 transition-shadow duration-250
-    {outline ? 'border-b border-[var(--border-color)]' : ''}"
+    {outline ? 'border-b border-(--border-color)' : ''}"
     onclick={toggle}
   >
     <div class="flex w-full items-center">
@@ -67,7 +67,7 @@
 
   {#if isOpen}
     <div
-      class="grid w-full p-4 sm:p-3 {image ? 'gap-x-2' : 'gap-2'} {outline ? '' : 'border-t border-[var(--border-color)]'}"
+      class="grid w-full p-4 sm:p-3 {image ? 'gap-x-2' : 'gap-2'} {outline ? '' : 'border-t border-(--border-color)'}"
       transition:slide={{ duration: 250 }}
       style="grid-template-columns: repeat({size.width || 10}, minmax(0, 1fr)); 
           grid-template-rows: repeat({size.height || 2}, {image ? 'minmax(6.5rem, auto)' : 'auto'});

package/dist/Accordion/AccordionProps.svelte

@@ -24,7 +24,7 @@
   const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
 
   const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
@@ -57,7 +57,7 @@
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
       />
     </div>
@@ -69,8 +69,8 @@
             {#snippet main()}
               <div class="grid grid-cols-3">
                 {#each ICONS as category}
-                  <div class="relative m-1.5 rounded-xl border-2 border-[var(--border-color)] p-3">
-                    <div class="absolute -top-3.5 bg-[var(--back-color)] px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
                     <div class="grid grid-cols-3 place-items-center gap-2">
                       {#each category[1] as icon}
                         <button
@@ -180,8 +180,8 @@
             {#snippet main()}
               <div class="grid grid-cols-3">
                 {#each ICONS as category}
-                  <div class="relative m-1.5 rounded-xl border-2 border-[var(--border-color)] p-3">
-                    <div class="absolute -top-3.5 bg-[var(--back-color)] px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
                     <div class="grid grid-cols-3 place-items-center gap-2">
                       {#each category[1] as icon}
                         <button

package/dist/Button/Button.svelte

@@ -12,7 +12,7 @@
     disabled = false,
     content = {
       name: '',
-      info: '',
+      info: { text: '', side: 'top' },
       icon: null,
     },
     keyBind,
@@ -64,25 +64,25 @@
   })
 </script>
 
-<div class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
+<div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
   <div class="relative flex w-full grow items-center">
     <button
       {id}
       class="{twMerge(
         `relative m-0 inline-block w-full items-center rounded-2xl 
         px-2 py-1 font-semibold  transition duration-200 select-none
-        ${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-[var(--bg-color)] '}
+        ${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) '}
         ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer  active:scale-97'} `,
         componentClass,
-      )} bg-[var(--bg-color)]"
+      )} bg-(--bg-color)"
       onclick={handleClick}
       {disabled}
       aria-label={content.name}
       onmouseenter={() => {
-        if (content.info) showInfo = true
+        if (content.info?.text) showInfo = true
       }}
       onmouseleave={() => {
-        if (content.info) showInfo = false
+        if (content.info?.text) showInfo = false
       }}
     >
       <span class=" flex flex-row items-center justify-center gap-2">
@@ -113,15 +113,41 @@
       </span>
     </button>
 
-    {#if showInfo}
+    {#if showInfo && content.info?.side === 'top'}
       <div
         transition:fly={{ y: -15, duration: 300 }}
-        class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-[var(--container-color)] px-3 py-1 text-sm shadow-lg"
+        class="absolute bottom-full left-1/2 z-50 mb-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
         style="transform: translateX(-50%);"
       >
-        {content.info}
-        <!-- Треугольная стрелка -->
-        <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-[var(--container-color)]"></div>
+        {content.info?.text}
+        <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
+      </div>
+    {:else if showInfo && content.info?.side === 'bottom'}
+      <div
+        transition:fly={{ y: 15, duration: 300 }}
+        class="absolute top-full left-1/2 z-50 mt-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        style="transform: translateX(-50%);"
+      >
+        {content.info?.text}
+        <div class="absolute bottom-full left-1/2 h-2 w-2 -translate-x-1/2 translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
+      </div>
+    {:else if showInfo && content.info?.side === 'left'}
+      <div
+        transition:fly={{ x: 15, duration: 300 }}
+        class="absolute top-1/2 right-full z-50 mr-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        style="transform: translateY(-50%);"
+      >
+        {content.info?.text}
+        <div class="absolute top-1/2 -right-2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
+      </div>
+    {:else if showInfo && content.info?.side === 'right'}
+      <div
+        transition:fly={{ x: -15, duration: 300 }}
+        class="absolute top-1/2 left-full z-50 ml-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
+        style="transform: translateY(-50%);"
+      >
+        {content.info?.text}
+        <div class="absolute top-1/2 -left-2 h-2 w-2 translate-x-1/2 -translate-y-1/2 -rotate-45 transform bg-(--container-color)"></div>
       </div>
     {/if}
   </div>

package/dist/Button/ButtonProps.svelte

@@ -77,7 +77,7 @@
         onUpdate={(value) => updateProperty('eventHandler.Argument', value as string, component, onPropertyChange)}
       />
 
-      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value !== 'SET'}
+      {#if (component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave') || Header.value === 'SET'}
         <UI.Input
           label={{ name: $t('constructor.props.value') }}
           value={component.properties.eventHandler.Value}
@@ -153,8 +153,8 @@
       />
       <UI.Input
         label={{ name: $t('constructor.props.info') }}
-        value={component.properties.content.info}
-        onUpdate={(value) => updateProperty('content.info', value as string, component, onPropertyChange)}
+        value={component.properties.content.info.text}
+        onUpdate={(value) => updateProperty('content.info.text', value as string, component, onPropertyChange)}
       />
       <UI.Input
         label={{ name: $t('constructor.props.svgicon') }}

package/dist/ColorPicker/ColorPicker.svelte

@@ -189,7 +189,7 @@
         tabindex={null}
         onmousedown={(e) => handleDrag(e, 'white')}
       >
-        <div class="absolute inset-0 bg-gradient-to-r from-black to-white"></div>
+        <div class="absolute inset-0 bg-linear-to-r from-black to-white"></div>
         {#if mode === 'white'}
           <div
             class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -20,7 +20,7 @@
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
@@ -59,7 +59,7 @@
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
       />
     </div>

package/dist/ComponentExample.svelte

@@ -13,13 +13,13 @@
   <div class="flex-1 overflow-y-auto">
     {@render component()}
   </div>
-  <div class=" border-t border-gray-500"></div>
-  <div class="h-fit" transition:fade={{ duration: 200 }}>
+  <div class="border-t border-gray-500"></div>
+  <div class="max-h-[70%]" transition:fade={{ duration: 200 }}>
     {@render componentProps()}
     <div class="relative mt-3">
       <UI.Button
         wrapperClass="absolute top-3 right-5 w-6"
-        content={{ icon: isCopied ? '<div class="rounded-md bg-[var(--green-color)] shadow-lg px-1">✓</div>' : CopyButton }}
+        content={{ icon: isCopied ? '<div class="rounded-md bg-(--green-color) shadow-lg px-1">✓</div>' : CopyButton }}
         onClick={() => {
           isCopied = true
           setTimeout(() => (isCopied = false), 1000)

package/dist/FileAttach/FileAttach.svelte

@@ -59,7 +59,7 @@
     <div class="relative">
       <button
         class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'} 
-        bg-[var(--back-color)] shadow-sm transition duration-250 hover:shadow-md
+        bg-(--back-color) shadow-sm transition duration-250 hover:shadow-md
         {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
         style={`height: ${imageSize.height}; width: ${imageSize.width}`}
         onclick={triggerFileInput}
@@ -85,9 +85,9 @@
       <input
         {id}
         type="file"
-        class={`h-8.5 w-full rounded-2xl bg-[var(--back-color)] font-semibold shadow-sm transition duration-250 hover:shadow-md
-          ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} file:h-full file:w-1/3 file:cursor-pointer 
-          file:border-none file:bg-[var(--blue-color)] invalid:border-red-400 invalid:shadow-[0_0_6px_var(--red-color)]`}
+        class={`h-8.5 w-full rounded-2xl bg-(--back-color) font-semibold shadow-sm transition duration-250 hover:shadow-md
+          ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} invalid:shadow-[0_0_6px(--red-color) file:h-full file:w-1/3 
+          file:cursor-pointer file:border-none file:bg-(--blue-color) invalid:border-red-400`}
         {accept}
         {disabled}
         onchange={handleFileChange}

package/dist/Graph/Graph.svelte

@@ -225,8 +225,8 @@
 
   <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 bind:this={container} class="h-64 grow overflow-hidden rounded-md border border-gray-200">
+      <canvas class="h-full w-full bg-(--back-color)" bind:this={canvas}></canvas>
     </div>
 
     <!-- Панель настроек -->

package/dist/Graph/GraphProps.svelte

@@ -3,8 +3,6 @@
   import { t } from '../locales/i18n'
   import { type UIComponent, type IGraphProps, updateProperty } from '../types'
   import * as UI from '..'
-  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
-  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
 
   const {
     component,

package/dist/Input/Input.svelte

@@ -63,7 +63,7 @@
         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)]'}
+              ${isValid ? 'border-(--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' : ''} 
@@ -87,8 +87,8 @@
       <textarea
         bind:value
         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)]'}
+          `h-full w-full resize-y rounded-2xl border border-(--border-color) px-2 py-1 text-center font-mono transition-all duration-300 outline-none focus:border-blue-400
+            ${isValid ? 'border-(--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' : ''}
@@ -158,7 +158,7 @@
 
       {#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"
+          class="absolute top-1/2 right-10 -translate-y-1/2 transform rounded-md bg-(--green-color) px-2 py-1 text-sm shadow-lg"
           transition:fly={{ x: 10, duration: 200 }}
         >
           ✓
@@ -167,9 +167,9 @@
     {/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)]">
+      <div class="absolute right-0 flex h-full w-8 flex-col items-center justify-center rounded-r-2xl border-l border-(--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"
+          class="flex h-1/2 w-full items-center rounded-tr-2xl border-b border-(--border-color) pl-2 transition-colors duration-150 hover:bg-(--gray-color)/30 active:bg-(--gray-color)/10"
           onclick={() => {
             if (!number.maxNum || !number.step) return
             if (Number(value) + number.step >= number.maxNum) {
@@ -184,7 +184,7 @@
         >
 
         <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"
+          class="flex h-1/2 w-full items-center rounded-br-2xl pl-2 transition-colors duration-150 hover:bg-(--gray-color)/30 active:bg-(--gray-color)/10"
           onclick={() => {
             if (number.minNum === null || number.minNum === undefined || !number.step) return
             if (Number(value) - number.step <= number.minNum) {
@@ -223,7 +223,7 @@
       {#if showInfo}
         <div
           transition:fly={{ x: -15, duration: 250 }}
-          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"
+          class="absolute top-1/2 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
         >
           {help?.info}
         </div>

package/dist/Input/InputProps.svelte

@@ -27,7 +27,7 @@
   )
 
   const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
@@ -87,7 +87,7 @@
   }
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col items-center px-2">
@@ -178,7 +178,7 @@
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value))}
       />
       <UI.Select
@@ -191,4 +191,136 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.componentclass') }}
+        value={component.properties.componentClass}
+        onUpdate={(value) => updateProperty('componentClass', value as string)}
+      />
+      <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 class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.value') }}
+        value={component.properties.value}
+        onUpdate={(value) => updateProperty('value', 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)}
+        />
+        {#if component.properties.type === 'text-area'}
+          <UI.Input
+            label={{ name: $t('constructor.props.textarea.rows') }}
+            value={component.properties.textareaRows}
+            onUpdate={(value) => updateProperty('textareaRows', value as string)}
+          />
+        {/if}
+      {: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) => {
+            updateProperty('number.minNum', Number(value))
+          }}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.maxnum') }}
+          value={component.properties.number.maxNum as number}
+          type="number"
+          onUpdate={(value) => {
+            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.Select
+        label={{ name: $t('constructor.props.autocomplete') }}
+        options={$optionsStore.AUTOCOMPLETE_OPTIONS}
+        value={$optionsStore.AUTOCOMPLETE_OPTIONS.find((opt) => opt.value === (component.properties.help.autocomplete || 'off'))}
+        onUpdate={(selectedOption) => updateProperty('help.autocomplete', selectedOption.value as string)}
+      />
+
+      <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)}
+      />
+      <UI.Switch
+        label={{ name: $t('constructor.props.disabled') }}
+        value={component.properties.disabled ? 2 : 1}
+        onChange={(value) => updateProperty('disabled', value === 2)}
+      />
+    </div>
+  </div>
 {/if}

package/dist/Modal.svelte

@@ -36,10 +36,10 @@
 {#if isOpen}
   <div class="fixed inset-0 z-60 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)}
+      class={twMerge(`flex w-300 flex-col overflow-hidden rounded-2xl bg-(--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">
+      <div class="flex items-end justify-between bg-(--field-color) px-6 py-3">
         <h4>{title}</h4>
         <button class="h-6 w-6 cursor-pointer" onclick={onCancel}> <CrossIcon /> </button>
       </div>
@@ -48,7 +48,7 @@
         {@render main?.()}
       </div>
       {#if footer}
-        <div class="flex flex-row-reverse justify-between bg-[var(--field-color)] p-1.5">
+        <div class="flex flex-row-reverse justify-between bg-(--field-color) p-1.5">
           {@render footer?.()}
         </div>
       {/if}

package/dist/ProgressBar/ProgressBar.svelte

@@ -5,6 +5,7 @@
 
   let {
     id = crypto.randomUUID(),
+    wrapperClass = '',
     label = { name: '', class: '' },
     value = $bindable(0),
     number = {
@@ -12,7 +13,6 @@
       maxNum: 100,
       units: '%',
     },
-    wrapperClass = '',
   }: IProgressBarProps = $props()
 
   const min = $derived(number.minNum ?? 0)
@@ -24,6 +24,7 @@
         return Math.max(min, Math.min(max, value))
       } else if (typeof value === 'string') {
         const parsedValue = parseFloat(value)
+        console.log(value)
         if (!isNaN(parsedValue)) {
           return Math.max(min, Math.min(max, parsedValue))
         }
@@ -47,7 +48,7 @@
 
   <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 class="absolute top-0 left-0 h-full rounded bg-(--bg-color)" style="width: {progressPercent()}%;"></div>
     </div>
     <span class="ml-2 font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
   </div>

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -20,7 +20,7 @@
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
   const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
+    $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
       (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
     ),
   )
@@ -32,7 +32,7 @@
   )
 </script>
 
-{#if component && component.properties}
+{#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col items-center px-2">
       <UI.Select
@@ -96,7 +96,7 @@
         label={{ name: $t('constructor.props.align') }}
         type="buttons"
         value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
+        options={$optionsStore.TEXT_ALIGN_OPTIONS}
         onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
       />
       <UI.Select
@@ -109,4 +109,68 @@
       />
     </div>
   </div>
+{:else}
+  <div class="relative flex flex-row items-start justify-center">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        wrapperClass="!h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS}
+        value={initialColor}
+        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      />
+    </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, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.value') }}
+        value={component.properties.value}
+        onUpdate={(value) => updateProperty('value', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.min') }}
+        value={component.properties.number.minNum as number}
+        type="number"
+        onUpdate={(value) => {
+          updateProperty('number.minNum', Number(value), component, onPropertyChange)
+        }}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.max') }}
+        value={component.properties.number.maxNum as number}
+        type="number"
+        onUpdate={(value) => {
+          updateProperty('number.maxNum', Number(value), component, onPropertyChange)
+        }}
+      />
+
+      <UI.Input
+        label={{ name: $t('constructor.props.units') }}
+        value={component.properties.number.units}
+        onUpdate={(value) => updateProperty('number.units', value, component, onPropertyChange)}
+      />
+    </div>
+  </div>
 {/if}