poe-svelte-ui-lib 1.2.20 → 1.2.22

package/dist/Accordion/Accordion.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div
-  {id}
+  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
   class={twMerge(
     `${outline ? 'border-none' : 'rounded-xl hover:shadow-md'} w-full
     border border-(--border-color) bg-(--container-color) p-0 transition-shadow duration-250`,

package/dist/Accordion/AccordionProps.svelte

@@ -163,8 +163,9 @@
 
       <UI.Switch
         label={{ name: $t('constructor.props.open') }}
-        value={component.properties.isOpen ? 2 : 1}
-        onChange={(value) => updateProperty('isOpen', value === 2, component, onPropertyChange)}
+        value={component.properties.isOpen}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('isOpen', value, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">

package/dist/Button/Button.svelte

@@ -67,7 +67,7 @@
 
 <div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
   <button
-    {id}
+    id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
     class="{twMerge(
       `relative m-0 inline-block w-full items-center rounded-2xl 
         px-2 py-1 font-semibold  transition duration-200 select-none

package/dist/Button/ButtonProps.svelte

@@ -141,8 +141,9 @@
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+        value={component.properties.disabled}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('disabled', value, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">

package/dist/ColorPicker/ColorPicker.svelte

@@ -129,7 +129,7 @@
   })
 </script>
 
-<div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}

package/dist/FileAttach/FileAttach.svelte

@@ -77,12 +77,19 @@
           <span class="text-sm text-gray-500">Image</span>
         {/if}
       </button>
-      <input {id} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
+      <input
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+        type="file"
+        class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0"
+        {accept}
+        {disabled}
+        onchange={handleFileChange}
+      />
     </div>
   {:else}
     <label class="relative inline-block w-full">
       <input
-        {id}
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         type="file"
         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 

package/dist/Graph/Graph.svelte

@@ -218,7 +218,7 @@
   }
 </script>
 
-<div {id} class={`relative flex w-full flex-col items-center justify-center ${wrapperClass}`}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} 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

@@ -67,8 +67,9 @@
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.istest') }}
-        value={component.properties.isTest ? 2 : 1}
-        onChange={(value) => updateProperty('isTest', value === 2, component, onPropertyChange)}
+        value={component.properties.isTest}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('isTest', value, component, onPropertyChange)}
       />
     </div>
   </div>

package/dist/Input/Input.svelte

@@ -74,7 +74,7 @@
           componentClass,
         )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-        {id}
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         {placeholder}
         {disabled}
         autocomplete={help?.autocomplete}
@@ -99,7 +99,7 @@
           componentClass,
         )}
         style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-        {id}
+        id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
         {disabled}
         {maxlength}
         rows={textareaRows}

package/dist/Input/InputProps.svelte

@@ -161,13 +161,15 @@
       />
       <UI.Switch
         label={{ name: $t('constructor.props.readonly') }}
-        value={component.properties.readonly ? 2 : 1}
-        onChange={(value) => updateProperty('readonly', value === 2)}
+        value={component.properties.readonly}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('readonly', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}
-        value={component.properties.help.copyButton ? 2 : 1}
-        onChange={(value) => updateProperty('help.copyButton', value === 2)}
+        value={component.properties.help.copyButton}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('help.copyButton', value)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -320,18 +322,21 @@
 
       <UI.Switch
         label={{ name: $t('constructor.props.readonly') }}
-        value={component.properties.readonly ? 2 : 1}
-        onChange={(value) => updateProperty('readonly', value === 2)}
+        value={component.properties.readonly}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('readonly', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.copy') }}
-        value={component.properties.help.copyButton ? 2 : 1}
-        onChange={(value) => updateProperty('help.copyButton', value === 2)}
+        value={component.properties.help.copyButton}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('help.copyButton', value)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2)}
+        value={component.properties.disabled}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('disabled', value)}
       />
     </div>
   </div>

package/dist/Joystick/Joystick.svelte

@@ -166,13 +166,14 @@
   let angle = 360 / directions.length
 </script>
 
-<div {id} class={twMerge(`bg-blue relative flex w-full flex-col items-center`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-red relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class=" flex items-center justify-center">
+  <div class=" flex w-1/2 items-center justify-center">
     <div class="relative z-10 flex size-40 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_20px_rgb(0_0_0_/0.25)]">
+      <!-- Основные кнопки (оси pitch и yaw) -->
       <div class="absolute h-full w-full overflow-hidden rounded-full">
         {#each directions as direction, index}
           <button
@@ -205,6 +206,7 @@
           </button>
         {/each}
       </div>
+      <!-- Линии для разделения на сектора -->
       <div class="pointer-events-none absolute h-full w-full overflow-hidden rounded-full">
         {#each directions as direction, index}
           <span
@@ -216,6 +218,7 @@
           </span>
         {/each}
       </div>
+      <!-- Кнопка домой -->
       <div
         class="z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)] transition hover:scale-103"
       >
@@ -235,6 +238,7 @@
         >
       </div>
     </div>
+    <!-- Боковые кнопки (ось roll) -->
     <div
       class="absolute flex h-15 w-65 items-center justify-between rounded-full shadow-[0_0_15px_rgb(0_0_0_/0.25)]"
       style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
@@ -288,40 +292,50 @@
     </div>
   </div>
 
-  <p>{value[0]}</p>
-  <p>{value[1]}</p>
-  <p>{value[2]}</p>
-
-  <div {id} class="flex h-full w-full flex-row justify-center rounded-full p-10">
-    {#each sensitivityOptions as option, index}
-      <button
-        id={crypto.randomUUID()}
-        class={twMerge(`m-0 inline-block min-w-0 flex-1 cursor-pointer items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300
+  <div class="absolute right-10 flex items-center">
+    <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full flex-col justify-center rounded-full p-10">
+      {#each sensitivityOptions as option, index}
+        <button
+          id={crypto.randomUUID()}
+          class={twMerge(`m-0 inline-block min-w-0 flex-1 cursor-pointer items-center px-2 py-1 font-semibold shadow-sm transition-all duration-300
             select-none hover:shadow-md
             ${
               option === sensitivity && sensitivity !== null
                 ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]'
                 : ''
             }  
-            ${sensitivityOptions.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${
-              index === sensitivityOptions.length - 1 ? 'rounded-r-2xl' : ''
+            ${sensitivityOptions.length > 0 && index === 0 ? 'rounded-t-2xl' : ''} ${
+              index === sensitivityOptions.length - 1 ? 'rounded-b-2xl' : ''
             } bg-(--back-color)`)}
-        onclick={() => {
-          sensitivity = option
-        }}
-      >
-        <span class="flex flex-row items-center justify-center gap-4">
-          {#if option}
-            <div class="flex-1">
-              {option}
-            </div>
-          {/if}
-        </span>
-      </button>
-    {/each}
+          onclick={() => {
+            sensitivity = option
+          }}
+        >
+          <span class="flex flex-row items-center justify-center gap-4">
+            {#if option}
+              <div class="flex-1">
+                {option}
+              </div>
+            {/if}
+          </span>
+        </button>
+      {/each}
+    </div>
+
+    <div>
+      {#each [0, 1, 2] as num}
+        <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{num == 0 ? 'Roll' : num == 1 ? 'Pitch' : 'Yaw'}</h5>
+        <input
+          class={`w-20 rounded-2xl border border-(--border-color) px-4 py-1 text-center transition-all duration-300 outline-none
+              hover:shadow-md 
+              [&::-webkit-inner-spin-button]:hidden
+              [&::-webkit-outer-spin-button]:hidden`}
+          style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
+          value={sensitivity == 0.01 ? value[num].toFixed(2) : sensitivity == 0.1 ? value[num].toFixed(1) : value[num].toFixed(0)}
+          id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+          readonly
+        />
+      {/each}
+    </div>
   </div>
-  <!-- {direction.content ? 2 * 6.25 * Math.sin((Math.PI * 65) / 360) : 2 * 6.25 * Math.sin((Math.PI * 25) / 360)} -->
-  <!-- angle / 2 + angle * index -->
-  <!--             ? 'shadow-[0_-2px_5px_rgb(254_202_202)] '
-            : 'shadow-[0_2px_5px_rgb(254_202_202)]'}" -->
 </div>

package/dist/ProgressBar/ProgressBar.svelte

@@ -40,7 +40,7 @@
   })
 </script>
 
-<div {id} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}

package/dist/Select/Select.svelte

@@ -92,7 +92,7 @@
   {/if}
   {#if type === 'select'}
     <button
-      {id}
+      id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       value={value?.value ? String(value.value) : ''}
       class={twMerge(
         `w-full rounded-2xl border border-(--border-color) p-1 text-center duration-250
@@ -133,7 +133,7 @@
       </div>
     {/if}
   {:else if type === 'buttons'}
-    <div {id} class="flex h-full w-full flex-row justify-center rounded-full border border-(--bg-color)">
+    <div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="flex h-full w-full flex-row justify-center rounded-full border border-(--bg-color)">
       {#each options as option, index (option.id)}
         <button
           id={option.id}
@@ -165,7 +165,7 @@
           [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
           {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'} border-(--border-color)"
       style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-      {id}
+      id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
       {disabled}
       oninput={(e) => handleSearch((e.currentTarget as HTMLInputElement).value)}
       onclick={(e) => {

package/dist/Select/SelectProps.svelte

@@ -232,8 +232,9 @@
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+        value={component.properties.disabled }
+                options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('disabled', value , component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">

package/dist/Slider/Slider.svelte

@@ -98,7 +98,10 @@
   {/if}
 
   <!-- Слайдер -->
-  <div {id} class="relative flex h-7 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}">
+  <div
+    id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+    class="relative flex h-7 w-full justify-center rounded-full {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+  >
     {#if isRange}
       <!-- Трек и активная зона -->
       <div

package/dist/Slider/SliderProps.svelte

@@ -138,8 +138,9 @@
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+        value={component.properties.disabled}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('disabled', value, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">

package/dist/Switch/Switch.svelte

@@ -5,39 +5,42 @@
 
   let {
     id = crypto.randomUUID(),
-    disabled = false,
     wrapperClass = '',
     label = { name: '', class: '', captionLeft: '', captionRight: '' },
     height = '2rem',
     type = 'horizontal',
+    options = [],
+    bitMode = false,
     value = $bindable(),
     onChange = () => {},
   }: ISwitchProps = $props()
 
-  const options = [1, 2]
-  let checked = $derived(value === options[1])
+  let localOptions = $derived(bitMode ? options : options.slice(0, 1))
 
-  let knobTransform = $derived(
-    checked
-      ? `${type === 'horizontal' ? `translateX(calc(${height}))` : `translateY(calc(-${height}/2))`}`
-      : `${type === 'horizontal' ? 'translateX(0)' : `translateY(calc(${height}/2))`}`,
+  let checkedOptions: boolean[] = $derived(
+    (() => {
+      if (bitMode) {
+        return localOptions.map((option) => ((value ?? 0) & (1 << (option?.value ?? 0))) == Math.pow(2, option.value ?? 0))
+      } else {
+        return [value == 1]
+      }
+    })(),
   )
+  let ID = $derived(`${id}-${crypto.randomUUID().slice(0, 6)}`)
 
   $effect(() => {
-    if (value === undefined || value === null) value = options[0]
+    if (value === undefined || value === null) value = 0
   })
 
-  const handleToggle = () => {
-    if (disabled) return
-    const newValue = checked ? options[1] : options[0]
+  const handleToggle = (index: number) => {
+    if (localOptions[index].disabled) return
+    value = (value ?? 0) ^ (1 << (localOptions[index].value ?? 0))
 
-    value = newValue
-
-    onChange(newValue)
+    onChange(value)
   }
 
   const handleCaptionClick = (newValue: number) => {
-    if (disabled || value === newValue) return
+    if (localOptions[0].disabled || value === newValue) return
     value = newValue
     onChange(newValue)
   }
@@ -50,67 +53,81 @@
 </script>
 
 {#if type !== 'checkbox'}
-  <div class={twMerge(`bg-blue relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
+  <div class={twMerge(`relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
     {#if label.name}
       <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
     {/if}
+    <div class="flex w-full flex-wrap justify-center gap-5">
+      {#each localOptions as option, index}
+        <div class={twMerge(`bg-blue flex flex-col`, option.class)}>
+          {#if option.name}
+            <span>{option.name}</span>
+          {/if}
+
+          <div class="relative flex w-full grow items-center justify-center bg-transparent">
+            {#if type === 'horizontal' && label.captionLeft}
+              <button
+                class="mr-2 {option.disabled ? 'opacity-60' : 'cursor-pointer'}"
+                style="width: {maxCaptionWidth}; text-align: end;"
+                onclick={() => handleCaptionClick(0)}>{label.captionLeft}</button
+              >
+            {/if}
 
-    <div class="relative flex w-full grow items-center justify-center bg-transparent">
-      {#if type === 'horizontal'}
-        <button
-          class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
-          style="width: {maxCaptionWidth}; text-align: end;"
-          onclick={() => handleCaptionClick(1)}>{label.captionLeft}</button
-        >
-      {/if}
+            <label
+              class="relative flex items-center justify-between rounded-full border
+      {checkedOptions[index] ? 'border-(--bg-color)' : 'border-(--gray-color)'}
+      {option.disabled ? 'opacity-60' : ''}"
+            >
+              <input
+                id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+                type="checkbox"
+                class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
+                checked={checkedOptions[index]}
+                disabled={option.disabled}
+                onchange={() => handleToggle(index)}
+              />
+              <span
+                class="relative flex items-center rounded-full transition-all duration-250
+        {checkedOptions[index] ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
+        {option.disabled ? '' : 'cursor-pointer'}"
+                style="{type === 'horizontal' ? 'width' : 'height'}: {`calc(${height} * 2)`}; {type === 'horizontal' ? 'height' : 'width'}: {height};"
+              >
+                <span
+                  class="absolute rounded-full bg-(--back-color) transition-all duration-250
+          {option.disabled ? 'opacity-60' : 'cursor-pointer'}"
+                  style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {checkedOptions[
+                    index
+                  ]
+                    ? `${type === 'horizontal' ? `translateX(calc(${height}))` : `translateY(calc(-${height}/2))`}`
+                    : `${type === 'horizontal' ? 'translateX(0)' : `translateY(calc(${height}/2))`}`};"
+                ></span>
+              </span>
+            </label>
 
-      <label
-        class="relative flex items-center justify-between rounded-full border
-      {checked ? 'border-(--bg-color)' : 'border-(--gray-color)'}
-      {disabled ? 'opacity-60' : ''}"
-      >
-        <input
-          {id}
-          type="checkbox"
-          class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
-          bind:checked
-          {disabled}
-          onchange={handleToggle}
-        />
-        <span
-          class="relative flex items-center rounded-full transition-all duration-250
-        {checked ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
-        {disabled ? '' : 'cursor-pointer'}"
-          style="{type === 'horizontal' ? 'width' : 'height'}: {`calc(${height} * 2)`}; {type === 'horizontal' ? 'height' : 'width'}: {height};"
-        >
-          <span
-            class="absolute rounded-full bg-(--back-color) transition-all duration-250
-          {disabled ? 'opacity-60' : 'cursor-pointer'}"
-            style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
-          ></span>
-        </span>
-      </label>
-      {#if type === 'horizontal'}
-        <button
-          class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
-          style="width: {maxCaptionWidth}; text-align: start;"
-          onclick={() => handleCaptionClick(2)}>{label.captionRight}</button
-        >
-      {/if}
+            {#if type === 'horizontal' && label.captionRight}
+              <button
+                class="ml-2 {option.disabled ? 'opacity-60' : 'cursor-pointer'}"
+                style="width: {maxCaptionWidth}; text-align: start;"
+                onclick={() => handleCaptionClick(1)}>{label.captionRight}</button
+              >
+            {/if}
+          </div>
+        </div>
+      {/each}
     </div>
   </div>
 {:else}
   <div class={twMerge('bg-blue m-1 flex items-center justify-center gap-2', wrapperClass)}>
     <input
-      {id}
+      id={ID}
       type="checkbox"
-      bind:checked
-      {disabled}
+      bind:checked={checkedOptions[0]}
+      disabled={localOptions[0].disabled}
       class="
       relative size-8 cursor-pointer appearance-none rounded-2xl border border-(--bg-color)
       bg-white transition duration-300 after:origin-bottom-left after:opacity-0
       checked:border-(--bg-color)
-      checked:bg-(--bg-color) checked:after:absolute checked:after:left-[5.5px]
+      checked:bg-(--bg-color) checked:after:absolute checked:after:-top-px checked:after:left-[5.5px]
       checked:after:h-[13.5px] checked:after:w-[7.5px] checked:after:rotate-43
       checked:after:border-2 checked:after:border-t-0
       checked:after:border-l-0 checked:after:border-solid
@@ -118,9 +135,9 @@
       checked:after:content-[''] hover:shadow-md
       disabled:cursor-not-allowed disabled:opacity-70
     "
-      onchange={handleToggle}
+      onchange={() => handleToggle(0)}
     />
-    <label for={id} class={twMerge("{disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'} ml-1 select-none", label.class)}>
+    <label for={ID} class={twMerge("{disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'} ml-1 select-none", label.class)}>
       {label.name}
     </label>
   </div>

package/dist/Switch/SwitchProps.svelte

@@ -5,6 +5,8 @@
   import * as UI from '..'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
+  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
+  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
 
   const {
     component,
@@ -47,41 +49,160 @@
           updateProperty('eventHandler.Argument', option.value as string, component, onPropertyChange)
         }}
       />
+      {#if !component.properties.bitMode}
+        <UI.Select
+          wrapperClass="!h-14"
+          label={{ name: $t('constructor.props.type') }}
+          type="buttons"
+          options={$optionsStore.SWITCH_OPTIONS}
+          value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
+          onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
+        />
+      {/if}
     </div>
-    <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        label={{ name: $t('constructor.props.caption.left') }}
-        value={component.properties.label.captionLeft}
-        onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
-      />
-      <UI.Input
-        label={{ name: $t('constructor.props.caption.right') }}
-        value={component.properties.label.captionRight}
-        onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
-      />
-      <UI.Switch
-        wrapperClass="bg-blue"
-        label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
-      />
-    </div>
+    {#if !component.properties.bitMode}
+      <div class="flex w-1/3 flex-col px-2">
+        <UI.Input
+          label={{ name: $t('constructor.props.caption.left') }}
+          value={component.properties.label.captionLeft}
+          onUpdate={(value) => updateProperty('label.captionLeft', value as string, component, onPropertyChange)}
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.caption.right') }}
+          value={component.properties.label.captionRight}
+          onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
+        />
+
+        <UI.Switch
+          wrapperClass="bg-blue"
+          label={{ name: $t('constructor.props.disabled') }}
+          value={component.properties.options[0].disabled}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+          onChange={(value) => {
+            const options = [...(component.properties?.options || [])]
+            options[0]['disabled'] = value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+    {/if}
     <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.Select
-        wrapperClass="!h-14"
-        label={{ name: $t('constructor.props.colors') }}
-        type="buttons"
-        options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
-        value={initialColor}
-        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      {#if !component.properties.bitMode}
+        <UI.Select
+          wrapperClass="!h-14"
+          label={{ name: $t('constructor.props.colors') }}
+          type="buttons"
+          options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
+          value={initialColor}
+          onUpdate={(option) => {
+            const options = [...(component.properties?.options || [])]
+            options[0]['class'] = option.value
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      {/if}
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.bitmode') }}
+        value={component.properties.bitMode}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => {
+          updateProperty('bitMode', value, component, onPropertyChange)
+          updateProperty('value', 1, component, onPropertyChange)
+        }}
       />
     </div>
   </div>
+  {#if component.properties.bitMode}
+    <hr class="border-gray-400" />
+
+    <!-- Настройки опций -->
+    <div class="space-y-4">
+      <div class="m-0 flex items-center justify-center gap-2">
+        <h4>{$t('constructor.props.bits.title')}</h4>
+        <UI.Button
+          wrapperClass="w-8"
+          content={{ icon: ButtonAdd }}
+          onClick={() => {
+            const newOption: ISelectOption = {
+              id: crypto.randomUUID(),
+              name: `Option ${component.properties?.options.length + 1}`,
+              value: component.properties?.options.length,
+              class: 'bg-blue',
+            }
+            const options = [...(component.properties?.options || []), newOption]
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+
+      {#each component.properties.options || [] as option, index (option.id)}
+        <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+          <UI.Input
+            label={{ name: $t('constructor.props.optionname') }}
+            wrapperClass="!w-3/10"
+            value={option.name}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['name'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.optionvalue') }}
+            wrapperClass="!w-3/10"
+            value={option.value}
+            type="number"
+            number={{ minNum: 0, maxNum: 31, step: 1 }}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['value'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Select
+            wrapperClass="w-80 h-14.5"
+            label={{ name: $t('constructor.props.colors') }}
+            type="buttons"
+            options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
+            value={$optionsStore.COLOR_OPTIONS.find((c) =>
+              (c.value as string).includes(option.class.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+            )}
+            onUpdate={(option) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['class'] = option.value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Switch
+            wrapperClass=" w-1/10 bg-blue"
+            label={{ name: $t('constructor.props.disabled') }}
+            value={option.disabled}
+            options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+            onChange={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['disabled'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const options = [...(component.properties?.options || [])]
+              options.splice(index, 1)
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
 {:else}
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
@@ -128,6 +249,14 @@
         value={component.properties.label.captionRight}
         onUpdate={(value) => updateProperty('label.captionRight', value as string, component, onPropertyChange)}
       />
+      <UI.Select
+        wrapperClass="!h-14"
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        options={$optionsStore.SWITCH_OPTIONS}
+        value={$optionsStore.SWITCH_OPTIONS.find((option) => option.value == component.properties.type)}
+        onUpdate={(option) => updateProperty('type', option.value as string, component, onPropertyChange)}
+      />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <UI.Input
@@ -139,15 +268,100 @@
         label={{ name: $t('constructor.props.value') }}
         value={component.properties.value}
         type="number"
-        number={{ minNum: 1, maxNum: 2, step: 1 }}
+        number={{ minNum: 0, maxNum: component.properties.bitMode ? Math.pow(2, 32) : 1, step: 1 }}
         onUpdate={(value) => updateProperty('value', value as number, component, onPropertyChange)}
       />
       <UI.Switch
         wrapperClass="bg-blue"
         label={{ name: $t('constructor.props.disabled') }}
-        value={component.properties.disabled ? 2 : 1}
-        onChange={(value) => updateProperty('disabled', value === 2, component, onPropertyChange)}
+        value={component.properties.disabled}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('disabled', value, component, onPropertyChange)}
+      />
+      <UI.Switch
+        wrapperClass="bg-blue"
+        label={{ name: $t('constructor.props.bitmode') }}
+        value={component.properties.bitMode}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => {
+          updateProperty('bitMode', value, component, onPropertyChange)
+          updateProperty('value', 1, component, onPropertyChange)
+        }}
       />
     </div>
   </div>
+  {#if component.properties.bitMode}
+    <hr class="border-gray-400" />
+
+    <!-- Настройки опций -->
+    <div class="space-y-4">
+      <div class="m-0 flex items-center justify-center gap-2">
+        <h4>{$t('constructor.props.bits.title')}</h4>
+        <UI.Button
+          wrapperClass="w-8"
+          content={{ icon: ButtonAdd }}
+          onClick={() => {
+            const newOption: ISelectOption = {
+              id: crypto.randomUUID(),
+              name: `Option ${component.properties?.options.length + 1}`,
+              value: component.properties?.options.length,
+              class: 'bg-blue',
+            }
+            const options = [...(component.properties?.options || []), newOption]
+            updateProperty('options', options, component, onPropertyChange)
+          }}
+        />
+      </div>
+
+      {#each component.properties.options || [] as option, index (option.id)}
+        <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+          <UI.Input
+            label={{ name: $t('constructor.props.optionname') }}
+            wrapperClass="!w-3/10"
+            value={option.name}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['name'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Input
+            label={{ name: $t('constructor.props.optionvalue') }}
+            wrapperClass="!w-3/10"
+            value={option.value}
+            type="number"
+            number={{ minNum: 0, maxNum: 31, step: 1 }}
+            onUpdate={(value) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['value'] = value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Select
+            wrapperClass="w-80 h-14.5"
+            label={{ name: $t('constructor.props.colors') }}
+            type="buttons"
+            options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== 'bg-max' && option.value !== 'bg-gray')}
+            value={$optionsStore.COLOR_OPTIONS.find((c) =>
+              (c.value as string).includes(option.class.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+            )}
+            onUpdate={(option) => {
+              const options = [...(component.properties?.options || [])]
+              options[index]['class'] = option.value
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const options = [...(component.properties?.options || [])]
+              options.splice(index, 1)
+              updateProperty('options', options, component, onPropertyChange)
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
 {/if}

package/dist/Table/Table.svelte

@@ -155,7 +155,7 @@
   })
 </script>
 
-<div {id} class={twMerge(`bg-blue flex h-full w-full flex-col overflow-hidden`, wrapperClass)}>
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`bg-blue flex h-full w-full flex-col overflow-hidden`, wrapperClass)}>
   {#if label.name}
     <h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}

package/dist/Table/TableProps.svelte

@@ -97,8 +97,9 @@
       />
       <UI.Switch
         label={{ name: $t('constructor.props.outline') }}
-        value={component.properties.outline ? 2 : 1}
-        onChange={(value) => updateProperty('outline', value === 2, component, onPropertyChange)}
+        value={component.properties.outline}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('outline', value, component, onPropertyChange)}
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -168,14 +169,16 @@
         <UI.Switch
           wrapperClass="w-2/10"
           label={{ name: $t('constructor.props.table.columns.sortable') }}
-          value={column.sortable ? 2 : 1}
-          onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+          value={column.sortable}
+          onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
         />
         <UI.Switch
           wrapperClass="w-2/10"
           label={{ name: $t('constructor.props.copy') }}
-          value={column.overflow?.copy ? 2 : 1}
-          onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2 })}
+          options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+          value={column.overflow?.copy}
+          onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value })}
         />
         <UI.Button
           wrapperClass="w-8"
@@ -302,8 +305,9 @@
       />
       <UI.Switch
         label={{ name: $t('constructor.props.outline') }}
-        value={component.properties.outline ? 2 : 1}
-        onChange={(value) => updateProperty('outline', value === 2, component, onPropertyChange)}
+        value={component.properties.outline}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('outline', value, component, onPropertyChange)}
       />
     </div>
   </div>
@@ -370,14 +374,16 @@
               <UI.Switch
                 label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
                 wrapperClass="w-30"
-                value={column.sortable ? 2 : 1}
-                onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+                options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+                value={column.sortable}
+                onChange={(value) => updateTableHeader(columnIndex, 'sortable', value)}
               />
               <UI.Switch
                 label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
                 wrapperClass="w-30"
-                value={column.overflow?.copy ? 2 : 1}
-                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2, truncated: column.overflow?.truncated })}
+                options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+                value={column.overflow?.copy}
+                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value, truncated: column.overflow?.truncated })}
               />
               <UI.Button
                 wrapperClass="w-8"
@@ -414,8 +420,9 @@
               <UI.Switch
                 wrapperClass="w-2/10"
                 label={{ name: $t('constructor.props.table.columns.truncated') }}
-                value={column.overflow?.truncated ? 2 : 1}
-                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { truncated: value === 2, copy: column.overflow?.copy })}
+                options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+                value={column.overflow?.truncated}
+                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { truncated: value, copy: column.overflow?.copy })}
               />
               <div class="relative mt-6 flex w-full gap-2">
                 <UI.Button

package/dist/Tabs/Tabs.svelte

@@ -26,7 +26,7 @@
   let currentTabIndex: number = $state(activeTab)
 </script>
 
-<div {id} class="w-full rounded-2xl bg-(--back-color)">
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full rounded-2xl bg-(--back-color)">
   <!-- Вкладки -->
   <div
     class="{twMerge('bg-blue sticky top-0 z-50 flex h-fit items-center overflow-x-auto rounded-t-2xl px-1', wrapperClass)} 
@@ -75,7 +75,7 @@
         {@render Components(comp, false)}
       {/each}
     {:else if children}
-      {@render children(items[activeTab])}
+      {@render children(items[currentTabIndex])}
     {:else}
       {@render items[currentTabIndex]?.children?.()}
     {/if}

package/dist/Tabs/TabsProps.svelte

@@ -52,9 +52,9 @@
   const initialWidth = $derived(() => {
     let width = component.properties.items.find((item: ISelectOption) => item.class?.split(' ').find((cls: string) => cls.startsWith('w-')))
     if (!width) {
-      return 1
-    } else if (width.class.includes('w-auto')) return 1
-    else return 2
+      return 0
+    } else if (width.class.includes('w-auto')) return 0
+    else return 1
   })
 </script>
 
@@ -107,10 +107,11 @@
           captionRight: $t('constructor.props.equal'),
         }}
         value={initialWidth()}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => {
           component.properties.items.forEach((_item: any, index: number) => {
             const items = [...(component.properties?.items || [])]
-            items[index]['class'] = twMerge(items[index].class, value === 2 ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
+            items[index]['class'] = twMerge(items[index].class, value ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
             updateProperty('items', items, component, onPropertyChange)
           })
         }}
@@ -132,7 +133,7 @@
           }
           const items = [...(component.properties?.items || []), newItem]
           items.forEach((_item: any, index: number) => {
-            items[index]['class'] = twMerge(items[index].class, initialWidth() === 2 ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
+            items[index]['class'] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
             updateProperty('items', items, component, onPropertyChange)
           })
         }}
@@ -176,7 +177,7 @@
               const items = [...(component.properties?.items || [])]
               items.splice(index, 1)
               items.forEach((_item: any, index: number) => {
-                items[index]['class'] = twMerge(items[index].class, initialWidth() === 2 ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
+                items[index]['class'] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : 'w-auto')
                 updateProperty('items', items, component, onPropertyChange)
               })
               updateProperty('items', items, component, onPropertyChange)
@@ -289,6 +290,7 @@
           captionRight: $t('constructor.props.equal'),
         }}
         value={initialWidth()}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) => {
           if (value === 2) {
             component.properties.items.forEach((_item: any, index: number) => {
@@ -319,7 +321,7 @@
           let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
           const newItem: { name: string; icon: string; class: string } = {
             name: `Tab ${component.properties?.items.length + 1}`,
-            class: `w-${initialWidth() === 2 ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
+            class: `w-${initialWidth() ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
             icon: '',
           }
           const items = [...(component.properties?.items || []), newItem]

package/dist/TextField/TextField.svelte

@@ -13,7 +13,10 @@
   } as const
 </script>
 
-<div {id} class={twMerge(`relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-(--back-color) px-6 py-2' : ''}`, wrapperClass)}>
+<div
+  id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
+  class={twMerge(`relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-(--back-color) px-6 py-2' : ''}`, wrapperClass)}
+>
   <p class={twMerge(`w-full text-center ${textSize[content.size ?? 'base']}`, content.class)}>
     {content.name}
   </p>

package/dist/TextField/TextFieldProps.svelte

@@ -79,30 +79,28 @@
     <div class="flex w-1/3 flex-col px-2">
       <UI.Switch
         label={{ name: $t('constructor.props.bold') }}
-        value={initialBold ? 2 : 1}
+        value={initialBold}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
           updateProperty(
             'content.class',
-            `${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`,
+            `${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`,
             component,
             onPropertyChange,
           )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.italic') }}
-        value={initialItalic ? 2 : 1}
+        value={initialItalic}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
-          updateProperty(
-            'content.class',
-            `${component.properties.content.class} ${value === 2 ? 'italic' : 'not-italic'}`,
-            component,
-            onPropertyChange,
-          )}
+          updateProperty('content.class', `${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`, component, onPropertyChange)}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.background') }}
-        value={component.properties.background ? 2 : 1}
-        onChange={(value) => updateProperty('background', value === 2, component, onPropertyChange)}
+        value={component.properties.background}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('background', value, component, onPropertyChange)}
       />
     </div>
   </div>
@@ -152,30 +150,33 @@
     <div class="flex w-1/3 flex-col px-2">
       <UI.Switch
         label={{ name: $t('constructor.props.bold') }}
-        value={initialBold ? 2 : 1}
+        value={initialBold}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
           updateProperty(
             'content.class',
-            twMerge(`${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`),
+            twMerge(`${component.properties.content.class} ${value ? 'font-bold' : 'font-normal'}`),
             component,
             onPropertyChange,
           )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.italic') }}
-        value={initialItalic ? 2 : 1}
+        value={initialItalic}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
         onChange={(value) =>
           updateProperty(
             'content.class',
-            twMerge(`${component.properties.content.class} ${value === 2 ? 'italic' : 'not-italic'}`),
+            twMerge(`${component.properties.content.class} ${value ? 'italic' : 'not-italic'}`),
             component,
             onPropertyChange,
           )}
       />
       <UI.Switch
         label={{ name: $t('constructor.props.background') }}
-        value={component.properties.background ? 2 : 1}
-        onChange={(value) => updateProperty('background', value === 2, component, onPropertyChange)}
+        value={component.properties.background}
+        options={[{ id: crypto.randomUUID(), value: 0, class: '' }]}
+        onChange={(value) => updateProperty('background', value, component, onPropertyChange)}
       />
     </div>
   </div>

package/dist/locales/translations.js

@@ -37,6 +37,9 @@ const translations = {
         'constructor.props.type.contain': 'Полный',
         'constructor.props.type.square': 'Квадрат',
         'constructor.props.type.circle': 'Круг',
+        'constructor.props.type.horizontal': 'Горизонтально',
+        'constructor.props.type.vertical': 'Вертикально',
+        'constructor.props.type.checkbox': 'Галочка',
         /* Общие для редактора свойств */
         'constructor.props.id': 'Идентификатор',
         'constructor.props.label': 'Текст надписи',
@@ -95,6 +98,7 @@ const translations = {
         'constructor.props.widthMode': 'Ширина кнопок',
         'constructor.props.graphdata.title': 'Начальные данные ',
         'constructor.props.options.title': 'Опции компонента',
+        'constructor.props.bits.title': 'Биты',
         'constructor.props.tabs.title': 'Вкладки меню',
         'constructor.props.valuetype': 'Тип значения',
         'constructor.props.action': 'Действие при переключении',
@@ -114,6 +118,7 @@ const translations = {
         'constructor.props.size.width': 'Ширина сетки',
         'constructor.props.icon.text.position': 'Положение иконки',
         'constructor.props.equal': 'Равные',
+        'constructor.props.bitmode': 'Битовый режим',
         'constructor.props.table.columns': 'Колонки таблицы',
         'constructor.props.table.columns.key': 'Ключ',
         'constructor.props.table.columns.label': 'Название колонки',

package/dist/options.d.ts

@@ -95,6 +95,11 @@ export declare const optionsStore: import("svelte/store").Readable<{
         value: string;
         name: string;
     }[];
+    SWITCH_OPTIONS: {
+        id: string;
+        value: string;
+        name: string;
+    }[];
     INFO_SIDE_OPTIONS: {
         id: string;
         value: string;

package/dist/options.js

@@ -104,6 +104,11 @@ export const optionsStore = derived(t, ($t) => {
             { id: id(), value: 'cover', name: $t('constructor.props.type.cover') },
             { id: id(), value: 'contain', name: $t('constructor.props.type.contain') },
         ],
+        SWITCH_OPTIONS: [
+            { id: id(), value: 'horizontal', name: $t('constructor.props.type.horizontal') },
+            { id: id(), value: 'vertical', name: $t('constructor.props.type.vertical') },
+            { id: id(), value: 'checkbox', name: $t('constructor.props.type.checkbox') },
+        ],
         INFO_SIDE_OPTIONS: [
             { id: id(), value: 'top', name: $t('constructor.props.info.top') },
             { id: id(), value: 'bottom', name: $t('constructor.props.info.bottom') },

package/dist/types.d.ts

@@ -106,6 +106,7 @@ export interface ISelectProps<T = unknown> {
     type?: 'select' | 'buttons' | 'input';
     value?: ISelectOption<T> | null;
     options?: ISelectOption<T>[];
+    bitMode?: boolean;
     eventHandler?: IUIComponentHandler;
     onUpdate?: (value: ISelectOption<T>) => void;
 }
@@ -127,6 +128,8 @@ export interface ISwitchProps {
         captionLeft?: string;
         captionRight?: string;
     };
+    options?: ISelectOption<number>[];
+    bitMode?: boolean;
     type?: 'horizontal' | 'vertical' | 'checkbox';
     value?: number;
     eventHandler?: IUIComponentHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -48,7 +48,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
     "publint": "^0.3.15",
-    "svelte": "^5.43.6",
+    "svelte": "^5.43.8",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.2.2",
     "vite-plugin-compression": "^0.5.1"