sveltekit-ui 1.1.15 → 1.1.17

package/dist/Components/Checkbox/index.svelte

@@ -1,411 +0,0 @@
-<script>
-  import LoadingWheel from "../LoadingWheel/index.svelte"
-  import ErrorX from "../ErrorX/index.svelte"
-  import Icon from "../Icon/index.svelte"
-  import Button from "../Button/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div>
-  {#if manager?.label || manager?.error_message}
-    <div style="display: inline-flex;">
-      {#if manager?.label}
-        <p class="label">{manager?.label}:</p>
-      {/if}
-      {#if manager?.error_message}
-        <p class="error_text">{manager?.error_message}</p>
-      {/if}
-    </div>
-  {/if}
-  <div
-    class="container"
-    style="--ml: {manager?.ml}rem; --mr: {manager?.mr}rem; --mt: {manager?.mt}rem; --mb: {manager?.mb}rem; --size:{manager?.size}rem;"
-  >
-    {#if manager?.is_nullable}
-      <div style="min-width: 9rem;">
-        <Button manager={manager?.toggle_null_button_manager} />
-      </div>
-    {/if}
-    {#if manager?.is_nullable == false || manager?.val != null}
-      <label
-        class:checkbox_switch={manager?.type == "checkbox"}
-        class:toggle_switch={manager?.type == "toggle"}
-        class:dark_theme_switch={manager?.type == "dark_theme"}
-        for={manager?.id}
-        onpointerenter={() => manager?.handle_on_hover_change(true)}
-        onpointerleave={() => manager?.handle_on_hover_change(false)}
-      >
-        <input
-          id={manager?.id}
-          name={manager?.name}
-          required={manager?.is_required}
-          readonly={manager?.is_read_only}
-          style="min-height: {manager?.size}rem; min-width: {manager?.size}rem;"
-          class:dark_theme_input={manager?.type == "dark_theme"}
-          type="checkbox"
-          disabled={manager?.is_disabled}
-          checked={manager?.val_bool}
-          tabindex="0"
-          onkeydown={(e) => {
-            if (e.key === "Enter") {
-              manager.set_val_from_bool(!manager?.val_bool, true)
-            }
-          }}
-          onclick={(e) => manager?.set_val_from_bool(e?.target?.checked, true)}
-        />
-        {#if manager?.type == "checkbox"}
-          <span class="checkbox" style="--color: {manager?.color};" class:checkbox_is_disabled={manager?.is_disabled}>
-            {#if manager?.val_bool}
-              <Icon manager={manager?.check_icon_manager} />
-            {/if}
-          </span>
-          {#if manager?.is_loading}
-            <div class="checkbox_load">
-              <LoadingWheel color={manager?.val ? "var(--primary-contrast-t)" : "var(--g12-t)"} sw={0.2} />
-            </div>
-          {:else if manager?.error_message}
-            <div class="checkbox_icon">
-              <ErrorX color={manager?.val ? "var(--primary-contrast-t)" : "var(--g12-t)"} sw={50} />
-            </div>
-          {/if}
-        {:else if manager?.type == "toggle"}
-          <span
-            class="toggle"
-            style="--color: {manager?.color}; --border_color: {manager?.is_disabled
-              ? 'var(--g14-t)'
-              : manager?.val_bool
-                ? manager?.color
-                : 'var(--g11-t)'}"
-            class:toggle_is_disabled={manager?.is_disabled}
-          ></span>
-          {#if manager?.is_loading}
-            <div class="toggle_load" style="--left: {manager?.val_bool ? 1.8 : 0.4}rem;">
-              <LoadingWheel color="var(--g4)" sw={0.2} />
-            </div>
-          {:else if manager?.error_message}
-            <div class="toggle_icon" style="--left: {manager?.val_bool ? 1.6 : 0.2}rem;">
-              <ErrorX color="var(--g4)" sw={42} />
-            </div>
-          {/if}
-        {:else if manager?.type == "dark_theme"}
-          <span
-            class="dark_theme_toggle"
-            style="--color: {manager?.color};"
-            class:dark_theme_is_disabled={manager?.is_disabled}
-          ></span>
-          {#if manager?.is_loading}
-            <div class="dark_theme_load" style="--left: {manager?.val ? 1.8 : 0.4}rem;">
-              <LoadingWheel color="var(--g4)" sw={0.2} />
-            </div>
-          {:else if manager?.error_message}
-            <div class="dark_theme_icon" style="--left: {manager?.val ? 1.6 : 0.2}rem;">
-              <ErrorX color="var(--g4)" sw={42} />
-            </div>
-          {:else if manager?.val}
-            <div class="dark_theme_icon2" style="--left: 1.5rem;">
-              <Icon manager={manager?.moon_icon_manager} />
-            </div>
-          {:else}
-            <div class="dark_theme_icon2" style="--left: 0.5rem;">
-              <Icon manager={manager?.sun_icon_manager} />
-            </div>
-          {/if}
-        {/if}
-      </label>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .label {
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: var(--g12-t);
-    line-height: 1.6rem;
-    margin-right: 0.5rem;
-  }
-  input[type="checkbox"]:focus + .checkbox {
-    box-shadow:
-      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
-      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
-      inset 0 0 0 2px var(--color),
-      0 0 0 1px var(--selected-t),
-      0 0 0 2px var(--g1-t) !important;
-  }
-  input[type="checkbox"]:focus + .toggle {
-    box-shadow:
-      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
-      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
-      inset 0 0 0 1px var(--border_color),
-      0 0 0 1px var(--selected-t),
-      0 0 0 2px var(--g1-t) !important;
-  }
-  input[type="checkbox"]:focus + .dark_theme_toggle {
-    box-shadow:
-      inset 0.1rem 0.1rem 0.2rem var(--shadow7-t),
-      inset -0.1rem -0.1rem 0.2rem var(--shadow7-t),
-      inset 0 0 0 1px var(--g10-t),
-      0 0 0 1px var(--selected-t),
-      0 0 0 2px var(--g1-t) !important;
-  }
-  .error_text {
-    font-size: 1.2rem;
-    color: oklch(var(--l5-t) var(--c7) var(--h1));
-    line-height: 1.2rem;
-    line-height: 1.2rem;
-  }
-  .container {
-    margin-left: var(--ml);
-    margin-right: var(--mr);
-    margin-top: var(--mt);
-    margin-bottom: var(--mb);
-    display: flex;
-    /* padding: 0.1rem; */
-  }
-  .checkbox_switch {
-    position: relative;
-    min-width: var(--size);
-    max-width: var(--size);
-    min-height: var(--size);
-    max-height: var(--size);
-  }
-  .checkbox_switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  .checkbox {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    min-width: var(--size);
-    max-width: var(--size);
-    min-height: var(--size);
-    max-height: var(--size);
-    border-radius: 0.5rem;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    background: var(--bg2);
-    box-shadow:
-      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
-      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
-      inset 0 0 0 2px var(--color);
-    display: grid;
-    place-items: center;
-  }
-  .checkbox:hover {
-    background: var(--shadow5-t);
-  }
-  input:checked + .checkbox {
-    background: var(--color);
-  }
-  input:checked + .checkbox_is_disabled {
-    background: var(--g12-t);
-  }
-  .checkbox_is_disabled {
-    background: var(--g12-t);
-    box-shadow:
-      inset 0.2rem 0.2rem 0.4rem var(--shadow2),
-      inset -0.2rem -0.2rem 0.4rem var(--shadow3),
-      inset 0 0 0 2px var(--g8-t) !important;
-  }
-  .checkbox_load {
-    position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
-    bottom: 0.5rem;
-    right: 0.5rem;
-    max-width: 1.5rem;
-    max-height: 1.5rem;
-    display: grid;
-    place-items: center;
-  }
-  .checkbox_icon {
-    position: absolute;
-    top: 0.3rem;
-    left: 0.3rem;
-    bottom: 0.3rem;
-    right: 0.3rem;
-    max-width: 2rem;
-    max-height: 2rem;
-    display: grid;
-    place-items: center;
-  }
-  .toggle_load {
-    position: absolute;
-    top: 0.4rem;
-    left: var(--left);
-    margin: auto;
-    width: 1.2rem;
-    height: 1.2rem;
-  }
-  .toggle_icon {
-    position: absolute;
-    top: 0.2rem;
-    left: var(--left);
-    margin: auto;
-    width: 1.6rem;
-    height: 1.6rem;
-  }
-  .toggle_switch {
-    position: relative;
-    min-width: 3.4rem;
-    max-width: 3.4rem;
-    min-height: 2rem;
-    max-height: 2rem;
-    margin-left: var(--ml);
-    margin-right: var(--mr);
-    margin-top: var(--mt);
-    margin-bottom: var(--mb);
-  }
-  .toggle_switch input {
-    opacity: 0;
-  }
-  .toggle {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    min-width: 3.4rem;
-    max-width: 3.4rem;
-    min-height: 2rem;
-    max-height: 2rem;
-    border-radius: 1rem;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    background: var(--bg2);
-    box-shadow:
-      inset 0.2rem 0.2rem 0.4rem var(--shadow2-t),
-      inset -0.2rem -0.2rem 0.4rem var(--shadow2-t),
-      inset 0 0 0 1px var(--border_color);
-  }
-  .toggle:before {
-    position: absolute;
-    content: "";
-    height: 1.6rem;
-    width: 1.6rem;
-    left: 0.2rem;
-    bottom: 0.2rem;
-    border-radius: 50%;
-    background: linear-gradient(-45deg, var(--g24), var(--g20));
-    box-shadow:
-      0.1rem 0.1rem 0.2rem var(--shadow3),
-      -0.1rem -0.1rem 0.2rem var(--shadow2);
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-  }
-  input:checked + .toggle {
-    background: var(--color);
-  }
-  input:checked + .toggle_is_disabled {
-    background: var(--g12-t);
-  }
-  input:checked + .toggle:before {
-    -webkit-transform: translateX(1.4rem);
-    -ms-transform: translateX(1.4rem);
-    transform: translateX(1.4rem);
-  }
-  .toggle_is_disabled:before {
-    background: linear-gradient(-45deg, var(--g16), var(--g16));
-  }
-
-  .dark_theme_input {
-    min-height: 2rem;
-    min-width: 3.4rem;
-  }
-
-  .dark_theme_switch {
-    position: relative;
-    min-width: 3.4rem;
-    max-width: 3.4rem;
-    min-height: 2.4rem;
-    max-height: 2.4rem;
-    margin-left: var(--ml);
-    margin-right: var(--mr);
-    margin-top: var(--mt);
-    margin-bottom: var(--mb);
-  }
-  .dark_theme_switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-  .dark_theme_toggle {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    min-width: 3.4rem;
-    max-width: 3.4rem;
-    min-height: 2.4rem;
-    max-height: 2.4rem;
-    border-radius: 1.2rem;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    background: var(--bg2);
-    overflow: hidden;
-    box-shadow:
-      inset 0.1rem 0.1rem 0.2rem var(--shadow7-t),
-      inset -0.1rem -0.1rem 0.2rem var(--shadow7-t),
-      inset 0 0 0 1px var(--g10-t);
-  }
-  .dark_theme_toggle:before {
-    position: absolute;
-    content: "";
-    height: 2rem;
-    width: 2rem;
-    left: 0.2rem;
-    bottom: 0.2rem;
-    border-radius: 50%;
-    background: linear-gradient(-45deg, var(--g24-t), var(--g22-t));
-    box-shadow:
-      0 0 0.5rem var(--shadow8-t),
-      inset 0 0 0 1px var(--g16-t);
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-  }
-  input:checked + .dark_theme_is_disabled {
-    background: var(--g12-t);
-  }
-  input:checked + .dark_theme_toggle:before {
-    -webkit-transform: translateX(1rem);
-    -ms-transform: translateX(1rem);
-    transform: translateX(1rem);
-  }
-  .dark_theme_is_disabled:before {
-    background: linear-gradient(-45deg, var(--g16-t), var(--g16-t));
-  }
-  .dark_theme_load {
-    position: absolute;
-    top: 0.5rem;
-    left: var(--left);
-    margin: auto;
-    width: 1.4rem;
-    height: 1.4rem;
-  }
-  .dark_theme_icon {
-    position: absolute;
-    top: 0.5rem;
-    left: var(--left);
-    margin: auto;
-    width: 2rem;
-    height: 2rem;
-  }
-  .dark_theme_icon2 {
-    position: absolute;
-    top: 0.5rem;
-    left: var(--left);
-    margin: auto;
-    width: 1.8rem;
-    height: 1.8rem;
-    cursor: pointer;
-  }
-</style>

package/dist/Components/Checkbox/index.svelte.js

@@ -1,178 +0,0 @@
-import { create_unique_id, set_closurable, set_closurable_color } from "../../client/index.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-
-export function create_checkbox_manager(config) {
-  let id = create_unique_id(null, 20)
-  let type = $derived(set_closurable(config?.type, "checkbox"))
-  let val_initial = $state(null)
-  let val = $state(null)
-  let val_bool = $state(false)
-  let label = $derived(set_closurable(config?.label, null))
-  let name = $derived(set_closurable(config?.name, "checkbox"))
-  let on_val = $derived(set_closurable(config?.on_val, true))
-  let off_val = $derived(set_closurable(config?.off_val, false))
-  let color = $derived(set_closurable_color(config?.color, "var(--primary-t)"))
-  let is_required = $derived(set_closurable(config?.is_required, false))
-  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
-  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
-  let is_loading = $derived(set_closurable(config?.is_loading, false))
-  let size = $derived(set_closurable(config?.size, 2.4))
-  let ml = $derived(set_closurable(config?.ml, 0))
-  let mr = $derived(set_closurable(config?.mr, 0))
-  let mt = $derived(set_closurable(config?.mt, 0))
-  let mb = $derived(set_closurable(config?.mb, 0))
-  let is_nullable = $derived(set_closurable(config?.is_nullable, false))
-  let error_message = $derived(set_closurable(config?.error_message, null))
-  let toggle_null_button_manager = $state(null)
-
-  let check_icon_manager = create_icon_manager({
-    icon_id: "check",
-    color: () => (is_disabled ? "var(--g17-t)" : "var(--primary-contrast-t)"),
-    size: 1.6,
-    sw: 75,
-  })
-
-  let moon_icon_manager = create_icon_manager({
-    icon_id: "moon",
-    size: 1.4,
-    color: "var(--g6-t)",
-    sw: 50,
-  })
-
-  let sun_icon_manager = create_icon_manager({
-    icon_id: "sun",
-    size: 1.4,
-    color: "var(--g6-t)",
-    sw: 50,
-  })
-
-  function set_val(val_input) {
-    const desired_val = val_input == on_val ? on_val : off_val
-    if (is_nullable && val_input == null) {
-      val = null
-      val_bool = false
-    } else if (val != desired_val) {
-      val = val_input
-      val_bool = val_input == on_val
-    }
-  }
-
-  function set_val_from_bool(val_bool_input, is_trigger_on_change = false) {
-    if (val_bool != !!val_bool_input) {
-      const desired_val = val_bool_input ? on_val : off_val
-      val = desired_val
-      val_bool = !!val_bool_input
-      if (is_trigger_on_change) {
-        if (config?.on_change) {
-          config?.on_change(desired_val)
-        }
-      }
-    }
-  }
-
-  function handle_on_hover_change(input) {
-    if (config?.on_hover_change) {
-      config?.on_hover_change(input)
-    }
-  }
-
-  function init(config) {
-    val_initial = set_closurable(config?.val) ?? null
-    val = set_closurable(config?.val) ?? null
-    val_bool = val == on_val
-    if (error_message) {
-      handle_error_trigger()
-    }
-    toggle_null_button_manager = create_button_manager({
-      type: "outlined",
-      font_size: 1.2,
-      min_height: 3,
-      is_no_wrap: true,
-      mr: 0.5,
-      text: () => (val == null ? "Select Value" : "Set Null"),
-      on_click: () => set_val(val == null ? true : null),
-    })
-  }
-
-  init(config)
-
-  return {
-    id,
-    get type() {
-      return type
-    },
-    get val_initial() {
-      return val_initial
-    },
-    get val() {
-      return val
-    },
-    get val_bool() {
-      return val_bool
-    },
-    get off_val() {
-      return off_val
-    },
-    get on_val() {
-      return on_val
-    },
-    get name() {
-      return name
-    },
-    get label() {
-      return label
-    },
-    get color() {
-      return color
-    },
-    get is_required() {
-      return is_required
-    },
-    get is_read_only() {
-      return is_read_only
-    },
-    get is_disabled() {
-      return is_disabled
-    },
-    get is_loading() {
-      return is_loading
-    },
-    get error_message() {
-      return error_message
-    },
-    get size() {
-      return size
-    },
-    get ml() {
-      return ml
-    },
-    get mr() {
-      return mr
-    },
-    get mt() {
-      return mt
-    },
-    get mb() {
-      return mb
-    },
-    get check_icon_manager() {
-      return check_icon_manager
-    },
-    get moon_icon_manager() {
-      return moon_icon_manager
-    },
-    get sun_icon_manager() {
-      return sun_icon_manager
-    },
-    get is_nullable() {
-      return is_nullable
-    },
-    get toggle_null_button_manager() {
-      return toggle_null_button_manager
-    },
-    set_val,
-    set_val_from_bool,
-    handle_on_hover_change,
-  }
-}

package/dist/Components/Code/index.svelte

@@ -1,23 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import Audio from "../Audio/index.svelte"
-  import LoadingWheel from "../LoadingWheel/index.svelte"
-
-  let { manager } = $props()
-
-  // in future can figure out colors like maybe need to even call server like how images work
-</script>
-
-{#if manager?.content}
-  <div id={manager?.id} class="code_container">
-    <div class="code_top_bar">
-      <p>
-        {manager?.language ?? ""}
-      </p>
-      <Button manager={manager?.copy_button_manager} />
-    </div>
-    <pre><code id={manager?.selector_id} style="padding: .5rem 0;"
-        >{typeof manager?.content == "string" ? manager?.content : JSON.stringify(manager?.content, null, 2)}</code
-      ></pre>
-  </div>
-{/if}

package/dist/Components/Code/index.svelte.js

@@ -1,33 +0,0 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_unique_id, copy_to_clipboard, set_closurable } from "../../client/index.js"
-
-export function create_code_manager(config) {
-  const id = create_unique_id(null, 20)
-  let content = $derived(set_closurable(config?.content, null))
-  let copy_button_manager = $state(null)
-
-  function init() {
-    copy_button_manager = create_button_manager({
-      type: "soft",
-      is_uniform: true,
-      support_icon: "clipboard",
-      is_success_animation: true,
-      on_click: () => copy_to_clipboard(typeof content == "string" ? content : JSON.stringify(content)),
-    })
-  }
-
-  init(config)
-
-  return {
-    id,
-    get copy_button_manager() {
-      return copy_button_manager
-    },
-    get language() {
-      return config?.language
-    },
-    get content() {
-      return content
-    },
-  }
-}

package/dist/Components/Color/index.svelte

@@ -1,51 +0,0 @@
-<script>
-  import TransparentBackground from "../TransparentBackground/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#if manager?.val}
-<div>
-  <TransparentBackground>
-    {#snippet content()}
-      <div
-        id={manager?.id}
-        class="color_overlay"
-        style="
-          background-color: {manager?.color}; 
-          width: {manager?.size}rem; 
-          height: {manager?.size}rem; 
-          border-radius: {manager?.border_radius}rem;
-        "
-      ></div>
-    {/snippet}
-  </TransparentBackground>
-  {#if manager?.is_show_details}
-    <div>
-      l: {manager?.val?.l ?? 24}, c: {manager?.val?.c ?? 24}, h: {manager?.val?.h ?? 24}, o: {manager?.val?.o ?? 24}, is_dark_theme_invert: {manager?.val?.is_dark_theme_invert}
-    </div>
-  {/if}
-</div>
-{:else}
-  <div
-    id={manager?.id}
-    class="color_overlay"
-    style="
-      width: {manager?.size}rem; 
-      height: {manager?.size}rem; 
-      border-radius: {manager?.border_radius}rem;
-      border: 1px solid var(--shadow2-t);
-      display: grid;
-      place-items: center;
-    "
-  >
-  <p style="font-size: 1.2rem;">null</p>
-</div>
-{/if}
-
-<style>
-  .color_overlay {
-    box-shadow: inset 0 0 0 .1rem var(--g15-t);
-    overflow: hidden;
-  }
-</style>