sveltekit-ui 1.0.0

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

@@ -0,0 +1,31 @@
+import { color_var } from "../../client/index.js"
+import { create_unique_id, set_closurable } from "../../client/index.js"
+
+export function create_color_manager(config) {
+  const id = create_unique_id(null, 20)
+  let val = $derived(set_closurable(config?.val, null))
+  let is_show_details = $derived(set_closurable(config?.is_show_details, false))
+  let size = $derived(set_closurable(config?.size, 3))
+  let border_radius = $derived(set_closurable(config?.border_radius, 0.5))
+
+  let color = $derived(val ? color_var(val?.l, val?.c, val?.h, val?.o, val?.is_dark_theme_invert) : "transparent")
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get color() {
+      return color
+    },
+    get is_show_details() {
+      return is_show_details
+    },
+    get size() {
+      return size
+    },
+    get border_radius() {
+      return border_radius
+    },
+  }
+}

package/dist/Components/ColorInput/ChromaPicker/index.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { color_var } from "../../../client/index.js"
+
+  let { manager } = $props()
+</script>
+
+<div class="color_grid_container" style="--columns: {manager?.c_options.length};">
+  {#if Array.isArray(manager?.c_options) && manager?.c_options.length > 0}
+    {#each manager?.c_options as c_option}
+      <div
+        id={`chroma_square_${manager?.id}_${c_option}`}
+        class="color_box"
+        role="button"
+        tabindex={manager?.val?.c == c_option ? 0 : -1}
+        class:is_selected={manager?.val?.c == c_option}
+        style="--bg_col: {`${color_var(manager?.val?.l ?? manager?.val_base?.l, c_option, manager?.val?.h ?? manager?.val_base?.h, 24, false)}`}"
+        onclick={() => manager?.set_chroma(c_option)}
+        onkeydown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            manager?.set_chroma(c_option)
+          } else if (event.key === "ArrowRight") {
+            manager?.set_chroma(c_option + 1)
+          } else if (event.key === "ArrowLeft") {
+            manager?.set_chroma(c_option - 1)
+          }
+        }}
+      ></div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .color_grid_container {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    border: 1px solid var(--shadow5-t);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+  .color_box {
+    background-color: var(--bg_col);
+    display: flex;
+    width: 100%;
+    aspect-ratio: 1;
+  }
+  .is_selected {
+    outline: 1px solid var(--g24);
+    z-index: 2;
+  }
+</style>

package/dist/Components/ColorInput/ColorPalette/index.svelte

@@ -0,0 +1,62 @@
+<script>
+  import { color_var } from "../../../client/index.js"
+
+  let { manager } = $props()
+</script>
+
+{#if Array.isArray(manager?.l_options) && manager?.l_options.length > 0 && Array.isArray(manager?.h_options) && manager?.h_options.length > 0}
+  <div
+    class="color_grid_container"
+    style="--columns: {manager?.h_options.length}; --rows: {manager?.l_options.length};"
+  >
+    {#each manager?.l_options as l_option}
+      {#each manager?.h_options as h_option}
+        <div
+          id={`lightness_hue_square_${manager?.id}_${l_option}_${h_option}`}
+          class="color_box"
+          class:is_selected={manager?.val?.l == l_option && manager?.val?.h == h_option}
+          role="button"
+          tabindex={manager?.val?.l == l_option && manager?.val?.h == h_option ? 0 : -1}
+          style="--bg_col: {`${color_var(l_option, manager?.val?.c ?? manager?.val_base?.c, h_option, 24, false)}`}"
+          onclick={() => manager?.set_lightness_and_hue(l_option, h_option)}
+          onkeydown={(event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              manager?.set_lightness_and_hue(l_option, h_option)
+            } else if (event.key === "ArrowRight") {
+              manager?.set_lightness_and_hue(l_option, h_option + 1)
+            } else if (event.key === "ArrowLeft") {
+              manager?.set_lightness_and_hue(l_option, h_option - 1)
+            } else if (event.key === "ArrowDown") {
+              manager?.set_lightness_and_hue(l_option + 1, h_option)
+            } else if (event.key === "ArrowUp") {
+              manager?.set_lightness_and_hue(l_option - 1, h_option)
+            }
+          }}
+        ></div>
+      {/each}
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .color_grid_container {
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+    grid-template-rows: repeat(var(--rows), 1fr);
+    border: 1px solid var(--shadow5-t);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+  .color_box {
+    background-color: var(--bg_col);
+    display: flex;
+    flex: 1;
+    aspect-ratio: 1;
+    align-items: center;
+    justify-content: center;
+  }
+  .is_selected {
+    outline: 1px solid var(--g24);
+    z-index: 2;
+  }
+</style>

package/dist/Components/ColorInput/OpacityPicker/index.svelte

@@ -0,0 +1,68 @@
+<script>
+  import TransparentBackground from "../../TransparentBackground/index.svelte"
+  import { color_var } from "../../../client/index.js"
+
+  let { manager } = $props()
+</script>
+
+{#if Array.isArray(manager?.o_options) && manager?.o_options.length > 0}
+  <div class="container">
+    <TransparentBackground>
+      {#snippet content()}
+        <div class="color_grid_container" style="--columns: {manager?.o_options.length};">
+          {#each manager?.o_options as o_option}
+            <div class="opacity_bg" class:is_selected={manager?.val?.o == o_option}>
+              <div
+                id={`opacity_square_${manager?.id}_${o_option}`}
+                class="color_box"
+                role="button"
+                tabindex={manager?.val?.o == o_option ? 0 : -1}
+                style="--bg_col: {`${color_var(manager?.val?.l ?? manager?.val_base?.l, manager?.val?.c?? manager?.val_base?.c, manager?.val?.h?? manager?.val_base?.h, o_option, false)}`}"
+                onclick={() => manager?.set_opacity(o_option)}
+                onkeydown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    manager?.set_opacity(o_option)
+                  } else if (event.key === "ArrowRight") {
+                    manager?.set_opacity(o_option + 1)
+                  } else if (event.key === "ArrowLeft") {
+                    manager?.set_opacity(o_option - 1)
+                  }
+                }}
+              ></div>
+            </div>
+          {/each}
+        </div>
+      {/snippet}
+    </TransparentBackground>
+  </div>
+{/if}
+
+<style>
+  .container{
+    border: 1px solid var(--shadow5-t);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+  .color_grid_container {
+    background-color: none;
+    display: grid;
+    grid-template-columns: repeat(var(--columns), 1fr);
+  }
+  .opacity_bg {
+    position: relative;
+    display: flex;
+    width: 100%;
+    aspect-ratio: 1;
+    overflow: hidden;
+  }
+  .color_box {
+    position: absolute;
+    background-color: var(--bg_col);
+    height: 100%;
+    width: 100%;
+  }
+  .is_selected {
+    outline: 1px solid var(--g24);
+    z-index: 2;
+  }
+</style>

package/dist/Components/ColorInput/ShowcasePicker/index.svelte

@@ -0,0 +1,136 @@
+<script>
+  import Button from "../../Button/index.svelte"
+  import TransparentBackground from "../../TransparentBackground/index.svelte"
+  import Checkbox from "../../Checkbox/index.svelte"
+  import { color_var } from "../../../client/index.js"
+
+  let { manager } = $props()
+</script>
+
+<div>
+  <TransparentBackground>
+    {#snippet content()}
+      <div
+        class="color_overlay"
+        style="--bg_col: {`${color_var(
+          manager?.val?.l,
+          manager?.val?.c,
+          manager?.val?.h,
+          manager?.val?.o,
+          manager?.val?.is_dark_theme_invert
+        )}`}"
+      ></div>
+    {/snippet}
+  </TransparentBackground>
+</div>
+<div class="part_container">
+  <div class="segment" style="gap: .5rem; border: none;">
+    <div style="display: flex; flex: 1; width: 100%;">
+      <div class="swatch_bg" style="background-color: var(--g24); border: 1px solid var(--shadow5-t);">
+        <div
+          class="swatch"
+          style="--bg_col: {`${color_var(manager?.val?.l, manager?.val?.c, manager?.val?.h, manager?.val?.o, false)}`}"
+        ></div>
+      </div>
+      <div class="swatch_bg" style="background-color: var(--g1); border: 1px solid var(--shadow5-t);">
+        <div
+          class="swatch"
+          style="--bg_col: {`${color_var(
+            manager?.val?.is_dark_theme_invert ? 25 - manager?.val?.l : manager?.val?.l,
+            manager?.val?.c,
+            manager?.val?.h,
+            manager?.val?.o,
+            false
+          )}`}"
+        ></div>
+      </div>
+    </div>
+    <Button manager={manager?.set_null_button_manager} />
+  </div>
+  <div class="segment">
+    <div style="width: 100%;">
+      <Button manager={manager?.lightness_up_button_manager} />
+    </div>
+    <p class="part_text">Lightness</p>
+    <p>{manager?.val?.l ?? "-"}</p>
+    <div style="width: 100%;">
+      <Button manager={manager?.lightness_down_button_manager} />
+    </div>
+  </div>
+  <div class="segment">
+    <div style="width: 100%;">
+      <Button manager={manager?.chroma_up_button_manager} />
+    </div>
+    <p class="part_text">Chroma</p>
+    <p>{manager?.val?.c ?? "-"}</p>
+    <div style="width: 100%;">
+      <Button manager={manager?.chroma_down_button_manager} />
+    </div>
+  </div>
+  <div class="segment">
+    <div style="width: 100%;">
+      <Button manager={manager?.hue_up_button_manager} />
+    </div>
+    <p class="part_text">Hue</p>
+    <p>{manager?.val?.h ?? "-"}</p>
+    <div style="width: 100%;">
+      <Button manager={manager?.hue_down_button_manager} />
+    </div>
+  </div>
+  {#if manager?.is_show_opacity}
+    <div class="segment">
+      <div style="width: 100%;">
+        <Button manager={manager?.opacity_up_button_manager} />
+      </div>
+      <p class="part_text">Opacity</p>
+      <p>{manager?.val?.o ?? "-"}</p>
+      <div style="width: 100%;">
+        <Button manager={manager?.opacity_down_button_manager} />
+      </div>
+    </div>
+  {/if}
+  <div class="segment">
+    <p class="part_text">Dark Theme Invert</p>
+    <Checkbox manager={manager?.is_dark_theme_invert_checkbox_manager} />
+  </div>
+</div>
+
+<style>
+  .part_container {
+    display: flex;
+    flex: 1;
+  }
+  .segment {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--shadow5-t);
+    border-radius: 1rem;
+    margin: 0.1rem;
+  }
+  .part_text {
+    font-size: 1.2rem;
+    color: var(--g8-t);
+    text-align: center;
+    line-height: 1.6rem;
+    margin: 0 0.5rem;
+  }
+  .swatch_bg {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    border-radius: 1rem;
+    padding: .4rem;
+    overflow: hidden;
+  }
+  .swatch {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background-color: var(--bg_col);
+  }
+</style>

package/dist/Components/ColorInput/index.svelte

@@ -0,0 +1,70 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import ColorPalette from "./ColorPalette/index.svelte"
+  import TransparentBackground from "../TransparentBackground/index.svelte"
+  import OpacityPicker from "./OpacityPicker/index.svelte"
+  import ChromaPicker from "./ChromaPicker/index.svelte"
+  import ShowcasePicker from "./ShowcasePicker/index.svelte"
+  import { color_var, deep_copy } from "../../client/index.js"
+  import Popover from "../Popover/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+{#if manager?.label}
+  <div>
+    {#if manager?.label}
+      <p class="label">{manager?.label}:</p>
+    {/if}
+  </div>
+{/if}
+<Button manager={manager?.toggle_button_manager}>
+  {#snippet content()}
+    <div id={`toggle_el_${manager?.popover_manager?.id}`}>
+      {#if manager?.val}
+        <TransparentBackground>
+          {#snippet content()}
+            <div
+              class="color_overlay"
+              style="--bg_col: {`${color_var(manager?.val?.l, manager?.val?.c, manager?.val?.h, manager?.val?.o, manager?.val?.is_dark_theme_invert)}`}"
+            ></div>
+          {/snippet}
+        </TransparentBackground>
+      {:else}
+        <div
+          class="color_overlay"
+          style="display: grid; place-items: center;"
+        >
+          <p style="font-size: 1.2rem;">null</p>
+        </div>
+      {/if}
+    </div>
+  {/snippet}
+</Button>
+<Popover manager={manager?.popover_manager}>
+  {#snippet content()}
+    <div>
+      <div style="display: flex; flex-direction: column; gap: .5rem;">
+        <ShowcasePicker {manager} />
+        <ColorPalette {manager} />
+        {#if manager?.is_show_opacity}
+          <OpacityPicker {manager} />
+        {/if}
+        <ChromaPicker {manager} />
+      </div>
+    </div>
+  {/snippet}
+  {#snippet footer()}
+    <Button manager={manager?.finish_button_manager} />
+  {/snippet}
+</Popover>
+
+<style>
+  .color_overlay {
+    border-radius: 0.8rem;
+    height: 30px;
+    width: 30px;
+    box-shadow: inset 0 0 0 .1rem var(--g15-t);
+    background-color: var(--bg_col);
+  }
+</style>