sveltekit-ui 1.0.73 → 1.0.75

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

@@ -5,16 +5,30 @@ import { create_popover_manager } from "../Popover/index.svelte.js"
 
 export function create_color_input_manager(config) {
   const base_range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
-  const val_base = {
+  let val_base = $state({
     l: 19,
     c: 10,
     h: 15,
     o: 24,
     is_dark_theme_invert: true,
-  }
+  })
 
   let id = create_unique_id(null, 20)
   let val = $state(null)
+  let is_dark_theme_invert_checkbox_manager = $state(null)
+  let popover_manager = $state(null)
+  let toggle_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let lightness_up_button_manager = $state(null)
+  let lightness_down_button_manager = $state(null)
+  let chroma_up_button_manager = $state(null)
+  let chroma_down_button_manager = $state(null)
+  let hue_up_button_manager = $state(null)
+  let hue_down_button_manager = $state(null)
+  let opacity_up_button_manager = $state(null)
+  let opacity_down_button_manager = $state(null)
+  let set_null_button_manager = $state(null)
+
   let is_show_opacity = $derived(set_closurable(config?.is_show_opacity, true))
   let l_options = $derived(order_num_options(set_closurable(config?.l_options, base_range)))
   let c_options = $derived(order_num_options(set_closurable(config?.c_options, base_range)))
@@ -30,20 +44,6 @@ export function create_color_input_manager(config) {
     return null
   }
 
-  let is_dark_theme_invert_checkbox_manager = $state(null)
-  let popover_manager = $state(null)
-  let toggle_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let lightness_up_button_manager = $state(null)
-  let lightness_down_button_manager = $state(null)
-  let chroma_up_button_manager = $state(null)
-  let chroma_down_button_manager = $state(null)
-  let hue_up_button_manager = $state(null)
-  let hue_down_button_manager = $state(null)
-  let opacity_up_button_manager = $state(null)
-  let opacity_down_button_manager = $state(null)
-  let set_null_button_manager = $state(null)
-
   let css_val = $derived(
     typeof val?.l === "number" && typeof val?.c === "number" && typeof val?.h === "number" && typeof val?.o === "number"
       ? `oklch(var(--l${val.l}) var(--c${val.c}) var(--h${val.h}) / var(--o${val.o}))`
@@ -70,12 +70,12 @@ export function create_color_input_manager(config) {
         c: val_static?.c ?? val_base?.c,
         h: val_static?.h ?? val_base?.h,
         o: val_static?.o ?? val_base?.o,
-        is_dark_theme_invert: val_static?.is_dark_theme_invert ?? true,
+        is_dark_theme_invert: val_static?.is_dark_theme_invert ?? is_dark_theme_invert_checkbox_manager?.val,
       }
     } else {
       val = null
     }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
+    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert ?? val_base?.is_dark_theme_invert)
     if (config?.on_change) {
       config?.on_change(val)
     }
@@ -183,8 +183,9 @@ export function create_color_input_manager(config) {
   }
 
   function init(config) {
+    val_base.is_dark_theme_invert = config?.is_dark_theme_invert
     is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
-      val: val?.is_dark_theme_invert,
+      val: config?.is_dark_theme_invert,
       type: "toggle",
       on_change: (input) => set_is_dark_theme_invert(input),
     })
@@ -306,7 +307,9 @@ export function create_color_input_manager(config) {
 
   return {
     id,
-    val_base,
+    get val_base() {
+      return val_base
+    },
     get val() {
       return val
     },

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

@@ -31,7 +31,7 @@ export function create_qr_manager(config) {
   let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
   let is_show_download = $derived(set_closurable(config?.is_show_download, false))
 
-  let scale = $derived(display_size / size)
+  let scale = $derived(display_size && size ? display_size / size : 0.25)
 
   function get_options() {
     // convert "var(--primary-t)" to css the works for qr_ download like oklch(0.67 0.26 203)

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

@@ -101,22 +101,26 @@ export function create_qr_input_manager(config) {
     })
     color_manager = create_color_input_manager({
       is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.color ?? null,
     })
     corner_color_manager = create_color_input_manager({
       is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.corner_color ?? null,
     })
     background_color_manager = create_color_input_manager({
       is_show_opacity: true,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.background_color ?? null,
     })
     border_color_manager = create_color_input_manager({
       is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.border_color ?? null,
     })
     is_show_copy_checkbox_manager = create_checkbox_manager({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,19 +19,19 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.39.8"
+    "svelte": "^5.39.9"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^5.10.3",
-    "@sveltejs/kit": "^2.43.7",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.8"
+    "vite": "^7.1.9"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

package/src/lib/Components/ColorInput/index.svelte.js

@@ -5,16 +5,30 @@ import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
 
 export function create_color_input_manager(config) {
   const base_range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
-  const val_base = {
+  let val_base = $state({
     l: 19,
     c: 10,
     h: 15,
     o: 24,
     is_dark_theme_invert: true,
-  }
+  })
 
   let id = create_unique_id(null, 20)
   let val = $state(null)
+  let is_dark_theme_invert_checkbox_manager = $state(null)
+  let popover_manager = $state(null)
+  let toggle_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let lightness_up_button_manager = $state(null)
+  let lightness_down_button_manager = $state(null)
+  let chroma_up_button_manager = $state(null)
+  let chroma_down_button_manager = $state(null)
+  let hue_up_button_manager = $state(null)
+  let hue_down_button_manager = $state(null)
+  let opacity_up_button_manager = $state(null)
+  let opacity_down_button_manager = $state(null)
+  let set_null_button_manager = $state(null)
+
   let is_show_opacity = $derived(set_closurable(config?.is_show_opacity, true))
   let l_options = $derived(order_num_options(set_closurable(config?.l_options, base_range)))
   let c_options = $derived(order_num_options(set_closurable(config?.c_options, base_range)))
@@ -30,20 +44,6 @@ export function create_color_input_manager(config) {
     return null
   }
 
-  let is_dark_theme_invert_checkbox_manager = $state(null)
-  let popover_manager = $state(null)
-  let toggle_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let lightness_up_button_manager = $state(null)
-  let lightness_down_button_manager = $state(null)
-  let chroma_up_button_manager = $state(null)
-  let chroma_down_button_manager = $state(null)
-  let hue_up_button_manager = $state(null)
-  let hue_down_button_manager = $state(null)
-  let opacity_up_button_manager = $state(null)
-  let opacity_down_button_manager = $state(null)
-  let set_null_button_manager = $state(null)
-
   let css_val = $derived(
     typeof val?.l === "number" && typeof val?.c === "number" && typeof val?.h === "number" && typeof val?.o === "number"
       ? `oklch(var(--l${val.l}) var(--c${val.c}) var(--h${val.h}) / var(--o${val.o}))`
@@ -70,12 +70,12 @@ export function create_color_input_manager(config) {
         c: val_static?.c ?? val_base?.c,
         h: val_static?.h ?? val_base?.h,
         o: val_static?.o ?? val_base?.o,
-        is_dark_theme_invert: val_static?.is_dark_theme_invert ?? true,
+        is_dark_theme_invert: val_static?.is_dark_theme_invert ?? is_dark_theme_invert_checkbox_manager?.val,
       }
     } else {
       val = null
     }
-    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
+    is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert ?? val_base?.is_dark_theme_invert)
     if (config?.on_change) {
       config?.on_change(val)
     }
@@ -183,8 +183,9 @@ export function create_color_input_manager(config) {
   }
 
   function init(config) {
+    val_base.is_dark_theme_invert = config?.is_dark_theme_invert
     is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
-      val: val?.is_dark_theme_invert,
+      val: config?.is_dark_theme_invert,
       type: "toggle",
       on_change: (input) => set_is_dark_theme_invert(input),
     })
@@ -306,7 +307,9 @@ export function create_color_input_manager(config) {
 
   return {
     id,
-    val_base,
+    get val_base() {
+      return val_base
+    },
     get val() {
       return val
     },

package/src/lib/Components/Qr/index.svelte.js

@@ -31,7 +31,7 @@ export function create_qr_manager(config) {
   let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
   let is_show_download = $derived(set_closurable(config?.is_show_download, false))
 
-  let scale = $derived(display_size / size)
+  let scale = $derived(display_size && size ? display_size / size : 0.25)
 
   function get_options() {
     // convert "var(--primary-t)" to css the works for qr_ download like oklch(0.67 0.26 203)

package/src/lib/Components/QrInput/index.svelte.js

@@ -101,22 +101,26 @@ export function create_qr_input_manager(config) {
     })
     color_manager = create_color_input_manager({
       is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.color ?? null,
     })
     corner_color_manager = create_color_input_manager({
       is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.corner_color ?? null,
     })
     background_color_manager = create_color_input_manager({
       is_show_opacity: true,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.background_color ?? null,
     })
     border_color_manager = create_color_input_manager({
       is_show_opacity: false,
-      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+      is_dark_theme_invert: false,
+      l_options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25],
       val: config?.val?.border_color ?? null,
     })
     is_show_copy_checkbox_manager = create_checkbox_manager({