sveltekit-ui 1.0.72 → 1.0.74

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

@@ -16,17 +16,26 @@
 </script>
 
 <div style="display: flex; flex-direction: column; gap: .5rem;">
-  <div style="display: flex; flex: 0;">
-    <div
-      class="qr_container"
-      style="height: {manager?.size}px; background-color: {manager?.background_color}; border-radius: {manager?.border_radius}rem; box-shadow: 0 0 0 {manager?.border_width}px {manager?.border_color};"
-    >
-      <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
-      {#if !manager?.is_loaded}
-        <div class="load">
-          <LoadingWheel color={"var(--g14-t)"} sw={0.4} />
-        </div>
-      {/if}
+  <div
+    class="qr_wrap"
+    style="--base: {manager?.size}px; --scale: {manager?.scale}; --target: calc(var(--base) * var(--scale));"
+  >
+    <div class="qr_fit">
+      <div
+        class="qr_container"
+        style="
+        width: var(--base);
+        height: var(--base);
+        background-color: {manager?.background_color};
+        border-radius: {manager?.border_radius}rem;
+        box-shadow: 0 0 0 {manager?.border_width}px {manager?.border_color};
+      "
+      >
+        <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
+        {#if !manager?.is_loaded}
+          <div class="load"><LoadingWheel color={"var(--g14-t)"} sw={0.4} /></div>
+        {/if}
+      </div>
     </div>
   </div>
   {#if manager?.is_show_copy}
@@ -54,6 +63,19 @@
     display: grid;
     grid-template-areas: "stack";
   }
+  .qr_wrap {
+    width: var(--target);
+    height: var(--target);
+    position: relative;
+  }
+  .qr_fit {
+    position: absolute;
+    inset: 0;
+    width: var(--base);
+    height: var(--base);
+    transform: scale(var(--scale));
+    transform-origin: top left;
+  }
   .load {
     grid-area: stack;
     width: 50%;

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

@@ -7,6 +7,7 @@ export function create_qr_manager(config) {
   const id = create_unique_id(null, 20)
   let margin = $state(null)
   let size = $state(null)
+  let display_size = $state(200)
   let image_size = $state(null)
   let type_number = $state(null)
   let error_correction_level = $state(null)
@@ -20,7 +21,6 @@ export function create_qr_manager(config) {
   let image = $state(null)
   let extension = $state(null)
   let quality = $state(null)
-
   let copy_button_manager = $state(null)
   let download_button_manager = $state(null)
   let extention_dropdown_manager = $state(null)
@@ -31,6 +31,8 @@ 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 ? 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)
     const color_css = get_css_variable_value(color)
@@ -136,13 +138,14 @@ export function create_qr_manager(config) {
 
   function set_options(input) {
     margin = input?.margin ?? 10
-    size = input?.size ?? 200
+    size = input?.size ?? 800
+    display_size = input?.display_size ?? 200
     image_size = input?.image_size ?? 0.5
     type_number = input?.type_number ?? 0
     error_correction_level = input?.error_correction_level ?? "Q"
     color = color_to_css(input?.color ?? "var(--primary-t)")
     corner_color = color_to_css(input?.corner_color ?? "color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
-    background_color = color_to_css(input?.background_color ?? "var(--shadow1-t)")
+    background_color = color_to_css(input?.background_color ?? "#ffffff00")
     border_color = color_to_css(input?.border_color ?? "var(--shadow7-t)")
     border_radius = input?.border_radius ?? (size + 2 * margin) / 100
     border_width = input?.border_width ?? 1
@@ -287,6 +290,9 @@ export function create_qr_manager(config) {
     get error_message() {
       return error_message
     },
+    get scale() {
+      return scale
+    },
     init,
     on_mount,
     download,

package/dist/Components/QrInput/index.svelte

@@ -40,6 +40,8 @@
   <div style="border: 1px solid var(--shadow4-t); border-radius: 1rem; padding: 1rem;">
     <h2>Result</h2>
     <Button manager={manager?.set_changes_button_manager} />
-    <Qr manager={manager?.qr_manager} />
+    <div>
+      <Qr manager={manager?.qr_manager} />
+    </div>
   </div>
 </div>

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

@@ -44,23 +44,23 @@ export function create_qr_input_manager(config) {
   })
 
   function set_changes() {
-    qr_manager.update(val)
+    qr_manager.update({ ...val, display_size: 280 })
   }
 
   function init(config) {
     margin_slider_manager = create_slider_manager({
       label: "Margin",
       min: 0,
-      max: 20,
+      max: 100,
       step: 1,
-      val: config?.val?.margin ?? 10,
+      val: config?.val?.margin ?? 40,
     })
     size_slider_manager = create_slider_manager({
       label: "Size",
-      min: 50,
-      max: 1000,
+      min: 100,
+      max: 2000,
       step: 1,
-      val: config?.val?.size ?? 200,
+      val: config?.val?.size ?? 1000,
     })
     image_size_slider_manager = create_slider_manager({
       label: "Image Size",
@@ -78,16 +78,16 @@ export function create_qr_input_manager(config) {
     border_radius_slider_manager = create_slider_manager({
       label: "Border Radius",
       min: 0,
-      max: 5,
-      step: 0.5,
-      val: config?.val?.border_radius ?? 2,
+      max: 50,
+      step: 1,
+      val: config?.val?.border_radius ?? 10,
     })
     border_width_slider_manager = create_slider_manager({
       label: "Border Width",
       min: 0,
-      max: 5,
+      max: 10,
       step: 1,
-      val: config?.val?.border_width ?? 1,
+      val: config?.val?.border_width ?? 5,
     })
     error_correction_level_dropdown_manager = create_dropdown_manager({
       is_button_compressed: true,
@@ -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({
@@ -142,7 +146,7 @@ export function create_qr_input_manager(config) {
   <path id="part-2" fill="#1c82ff" fill-rule="nonzero" d="M400.3 328.6c0 22-5.6 41.7-17 59.2a113 113 0 0 1-49.6 41.2 186 186 0 0 1-77.6 14.8c-35.8 0-65.4-6.7-88.7-20.3-16.5-9.7-30-22.7-40.3-39a88.6 88.6 0 0 1-15.4-47.5c0-8.9 3-16.5 9.3-22.9 6.1-6.4 14-9.5 23.6-9.5a28 28 0 0 1 19.7 7.4c5.4 5 10 12.3 13.8 22 4.6 11.6 9.6 21.3 15 29 5.3 7.8 12.9 14.2 22.6 19.3q14.7 7.5 38.4 7.5c21.8 0 39.6-5 53.2-15.2a45.8 45.8 0 0 0 20.4-38c0-12.1-3.6-22-11-29.4a71 71 0 0 0-28.5-17.3 490 490 0 0 0-46.7-12.6c-26.1-6.1-48-13.2-65.5-21.4a106 106 0 0 1-42-33.5 86.8 86.8 0 0 1-15.4-52.6c0-20 5.4-37.8 16.4-53.3a103 103 0 0 1 47.3-35.8c20.6-8.4 45-12.5 72.8-12.5 22.3 0 41.6 2.7 57.9 8.3a122 122 0 0 1 40.5 22 92 92 0 0 1 23.5 28.9c5 10 7.5 19.9 7.5 29.5 0 8.7-3.1 16.6-9.3 23.6s-14 10.6-23.2 10.6q-12.6 0-19.2-6.3a85 85 0 0 1-14.2-20.7 94 94 0 0 0-23.8-32.1c-9.3-7.7-24.1-11.5-44.6-11.5-19 0-34.3 4.1-46 12.5-11.6 8.3-17.5 18.3-17.5 30 0 7.3 2 13.6 6 19a50 50 0 0 0 16.3 13.5c7 3.8 14 6.8 21.1 9 7.1 2.1 18.8 5.2 35.2 9.4 20.5 4.8 39 10 55.6 15.8a169 169 0 0 1 42.4 21.1 86.6 86.6 0 0 1 27.3 31.3c6.5 12.7 9.7 28.2 9.7 46.5"/>
 </svg>`,
     })
-    qr_manager = create_qr_manager(val)
+    qr_manager = create_qr_manager({ ...val, display_size: 280 })
     set_changes_button_manager = create_button_manager({
       c: 1,
       l: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -25,13 +25,13 @@
     "@sveltejs/kit": "^2.22.2"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^5.10.2",
+    "@sveltejs/adapter-vercel": "^5.10.3",
     "@sveltejs/kit": "^2.43.7",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.9.3",
-    "vite": "^7.1.7"
+    "vite": "^7.1.8"
   },
   "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

@@ -16,17 +16,26 @@
 </script>
 
 <div style="display: flex; flex-direction: column; gap: .5rem;">
-  <div style="display: flex; flex: 0;">
-    <div
-      class="qr_container"
-      style="height: {manager?.size}px; background-color: {manager?.background_color}; border-radius: {manager?.border_radius}rem; box-shadow: 0 0 0 {manager?.border_width}px {manager?.border_color};"
-    >
-      <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
-      {#if !manager?.is_loaded}
-        <div class="load">
-          <LoadingWheel color={"var(--g14-t)"} sw={0.4} />
-        </div>
-      {/if}
+  <div
+    class="qr_wrap"
+    style="--base: {manager?.size}px; --scale: {manager?.scale}; --target: calc(var(--base) * var(--scale));"
+  >
+    <div class="qr_fit">
+      <div
+        class="qr_container"
+        style="
+        width: var(--base);
+        height: var(--base);
+        background-color: {manager?.background_color};
+        border-radius: {manager?.border_radius}rem;
+        box-shadow: 0 0 0 {manager?.border_width}px {manager?.border_color};
+      "
+      >
+        <div style="grid-area: stack;" id={`qr_${manager?.id}`}></div>
+        {#if !manager?.is_loaded}
+          <div class="load"><LoadingWheel color={"var(--g14-t)"} sw={0.4} /></div>
+        {/if}
+      </div>
     </div>
   </div>
   {#if manager?.is_show_copy}
@@ -54,6 +63,19 @@
     display: grid;
     grid-template-areas: "stack";
   }
+  .qr_wrap {
+    width: var(--target);
+    height: var(--target);
+    position: relative;
+  }
+  .qr_fit {
+    position: absolute;
+    inset: 0;
+    width: var(--base);
+    height: var(--base);
+    transform: scale(var(--scale));
+    transform-origin: top left;
+  }
   .load {
     grid-area: stack;
     width: 50%;

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

@@ -7,6 +7,7 @@ export function create_qr_manager(config) {
   const id = create_unique_id(null, 20)
   let margin = $state(null)
   let size = $state(null)
+  let display_size = $state(200)
   let image_size = $state(null)
   let type_number = $state(null)
   let error_correction_level = $state(null)
@@ -20,7 +21,6 @@ export function create_qr_manager(config) {
   let image = $state(null)
   let extension = $state(null)
   let quality = $state(null)
-
   let copy_button_manager = $state(null)
   let download_button_manager = $state(null)
   let extention_dropdown_manager = $state(null)
@@ -31,6 +31,8 @@ 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 ? 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)
     const color_css = get_css_variable_value(color)
@@ -136,13 +138,14 @@ export function create_qr_manager(config) {
 
   function set_options(input) {
     margin = input?.margin ?? 10
-    size = input?.size ?? 200
+    size = input?.size ?? 800
+    display_size = input?.display_size ?? 200
     image_size = input?.image_size ?? 0.5
     type_number = input?.type_number ?? 0
     error_correction_level = input?.error_correction_level ?? "Q"
     color = color_to_css(input?.color ?? "var(--primary-t)")
     corner_color = color_to_css(input?.corner_color ?? "color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
-    background_color = color_to_css(input?.background_color ?? "var(--shadow1-t)")
+    background_color = color_to_css(input?.background_color ?? "#ffffff00")
     border_color = color_to_css(input?.border_color ?? "var(--shadow7-t)")
     border_radius = input?.border_radius ?? (size + 2 * margin) / 100
     border_width = input?.border_width ?? 1
@@ -287,6 +290,9 @@ export function create_qr_manager(config) {
     get error_message() {
       return error_message
     },
+    get scale() {
+      return scale
+    },
     init,
     on_mount,
     download,

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

@@ -40,6 +40,8 @@
   <div style="border: 1px solid var(--shadow4-t); border-radius: 1rem; padding: 1rem;">
     <h2>Result</h2>
     <Button manager={manager?.set_changes_button_manager} />
-    <Qr manager={manager?.qr_manager} />
+    <div>
+      <Qr manager={manager?.qr_manager} />
+    </div>
   </div>
 </div>

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

@@ -44,23 +44,23 @@ export function create_qr_input_manager(config) {
   })
 
   function set_changes() {
-    qr_manager.update(val)
+    qr_manager.update({ ...val, display_size: 280 })
   }
 
   function init(config) {
     margin_slider_manager = create_slider_manager({
       label: "Margin",
       min: 0,
-      max: 20,
+      max: 100,
       step: 1,
-      val: config?.val?.margin ?? 10,
+      val: config?.val?.margin ?? 40,
     })
     size_slider_manager = create_slider_manager({
       label: "Size",
-      min: 50,
-      max: 1000,
+      min: 100,
+      max: 2000,
       step: 1,
-      val: config?.val?.size ?? 200,
+      val: config?.val?.size ?? 1000,
     })
     image_size_slider_manager = create_slider_manager({
       label: "Image Size",
@@ -78,16 +78,16 @@ export function create_qr_input_manager(config) {
     border_radius_slider_manager = create_slider_manager({
       label: "Border Radius",
       min: 0,
-      max: 5,
-      step: 0.5,
-      val: config?.val?.border_radius ?? 2,
+      max: 50,
+      step: 1,
+      val: config?.val?.border_radius ?? 10,
     })
     border_width_slider_manager = create_slider_manager({
       label: "Border Width",
       min: 0,
-      max: 5,
+      max: 10,
       step: 1,
-      val: config?.val?.border_width ?? 1,
+      val: config?.val?.border_width ?? 5,
     })
     error_correction_level_dropdown_manager = create_dropdown_manager({
       is_button_compressed: true,
@@ -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({
@@ -142,7 +146,7 @@ export function create_qr_input_manager(config) {
   <path id="part-2" fill="#1c82ff" fill-rule="nonzero" d="M400.3 328.6c0 22-5.6 41.7-17 59.2a113 113 0 0 1-49.6 41.2 186 186 0 0 1-77.6 14.8c-35.8 0-65.4-6.7-88.7-20.3-16.5-9.7-30-22.7-40.3-39a88.6 88.6 0 0 1-15.4-47.5c0-8.9 3-16.5 9.3-22.9 6.1-6.4 14-9.5 23.6-9.5a28 28 0 0 1 19.7 7.4c5.4 5 10 12.3 13.8 22 4.6 11.6 9.6 21.3 15 29 5.3 7.8 12.9 14.2 22.6 19.3q14.7 7.5 38.4 7.5c21.8 0 39.6-5 53.2-15.2a45.8 45.8 0 0 0 20.4-38c0-12.1-3.6-22-11-29.4a71 71 0 0 0-28.5-17.3 490 490 0 0 0-46.7-12.6c-26.1-6.1-48-13.2-65.5-21.4a106 106 0 0 1-42-33.5 86.8 86.8 0 0 1-15.4-52.6c0-20 5.4-37.8 16.4-53.3a103 103 0 0 1 47.3-35.8c20.6-8.4 45-12.5 72.8-12.5 22.3 0 41.6 2.7 57.9 8.3a122 122 0 0 1 40.5 22 92 92 0 0 1 23.5 28.9c5 10 7.5 19.9 7.5 29.5 0 8.7-3.1 16.6-9.3 23.6s-14 10.6-23.2 10.6q-12.6 0-19.2-6.3a85 85 0 0 1-14.2-20.7 94 94 0 0 0-23.8-32.1c-9.3-7.7-24.1-11.5-44.6-11.5-19 0-34.3 4.1-46 12.5-11.6 8.3-17.5 18.3-17.5 30 0 7.3 2 13.6 6 19a50 50 0 0 0 16.3 13.5c7 3.8 14 6.8 21.1 9 7.1 2.1 18.8 5.2 35.2 9.4 20.5 4.8 39 10 55.6 15.8a169 169 0 0 1 42.4 21.1 86.6 86.6 0 0 1 27.3 31.3c6.5 12.7 9.7 28.2 9.7 46.5"/>
 </svg>`,
     })
-    qr_manager = create_qr_manager(val)
+    qr_manager = create_qr_manager({ ...val, display_size: 280 })
     set_changes_button_manager = create_button_manager({
       c: 1,
       l: 0,

package/src/routes/+layout.svelte

@@ -46,7 +46,6 @@
     { name: "Cron Input", key: "cron_input" },
     { name: "Dropdown", key: "dropdown" },
     { name: "File Input", key: "file_input" },
-    // { name: "Function Input", key: "function_input" },
     { name: "Icon", key: "icon" },
     { name: "Icon Input", key: "icon_input" },
     { name: "Image", key: "image" },
@@ -92,7 +91,7 @@
       text: h?.name,
       text_align: "left",
       selected_type: () => (page.params.component === h?.key ? "selected" : null),
-      on_click: () => layout_manager.goto_path(`/${h?.key}`),
+      on_click: () => layout_manager.goto_path(`/components/${h?.key}`),
     })
   )
 

package/src/routes/+page.svelte

@@ -233,7 +233,7 @@
     text: "Visit Docs",
     mt: 2,
     support_icon: "arrow_tailed",
-    on_click: () => goto("/button"),
+    on_click: () => goto("/components/button"),
   })
 
   let copy_all_docs_button_manager = create_button_manager({

package/src/routes/{[component] → components/[component]}/Showcase/QrInput/index.svelte

@@ -4,10 +4,6 @@
 
   let qr_input_manager = create_qr_input_manager({
     val: {
-      margin: 10,
-      size: 200,
-      image_size: 0.5,
-      type_number: 0,
       color: "var(--primary-t)",
       corner_color: "color-mix(in oklab, var(--primary-t), var(--bg) 20%)",
       background_color: null,

package/src/routes/sitemap.xml/+server.js

@@ -0,0 +1,80 @@
+const site = "https://www.sveltekit-ui.com"
+
+const components = [
+  { name: "Alert", key: "alert" },
+  { name: "Audio", key: "audio" },
+  { name: "Audio Editor", key: "audio_editor" },
+  { name: "Auth Code Input", key: "auth_code_input" },
+  { name: "Breadcrumbs", key: "breadcrumbs" },
+  { name: "Button", key: "button" },
+  { name: "Chart", key: "chart" },
+  { name: "Checkbox", key: "checkbox" },
+  { name: "Code", key: "code" },
+  { name: "Color", key: "color" },
+  { name: "Color Input", key: "color_input" },
+  { name: "Confetti", key: "confetti" },
+  { name: "Content", key: "content" },
+  { name: "Content Input", key: "content_input" },
+  { name: "Cron Input", key: "cron_input" },
+  { name: "Dropdown", key: "dropdown" },
+  { name: "File Input", key: "file_input" },
+  { name: "Icon", key: "icon" },
+  { name: "Icon Input", key: "icon_input" },
+  { name: "Image", key: "image" },
+  { name: "Image Editor", key: "image_editor" },
+  { name: "ImageSlider", key: "image_slider" },
+  { name: "InfoBox", key: "info_box" },
+  { name: "Json", key: "json" },
+  { name: "LabeledItem", key: "labeled_item" },
+  { name: "Layout", key: "layout" },
+  { name: "Link", key: "link" },
+  { name: "LoadingWheel", key: "loading_wheel" },
+  { name: "Location", key: "location" },
+  { name: "Location Input", key: "location_input" },
+  { name: "Number", key: "number" },
+  { name: "Popover", key: "popover" },
+  { name: "Qr", key: "qr" },
+  { name: "QrInput", key: "qr_input" },
+  { name: "Slider", key: "slider" },
+  { name: "Spacer", key: "spacer" },
+  { name: "StoragePicker", key: "storage_picker" },
+  { name: "Table Advanced", key: "table_advanced" },
+  { name: "Tag", key: "tag" },
+  { name: "Text Array Input", key: "text_array_input" },
+  { name: "Text Input", key: "text_input" },
+  { name: "Time", key: "time" },
+  { name: "Time Input", key: "time_input" },
+  { name: "Tooltip", key: "tooltip" },
+  { name: "TransparentBackground", key: "transparent_background" },
+  { name: "XPost", key: "x_post" },
+  { name: "XFollow", key: "x_follow" },
+  { name: "Youtube Follow Button", key: "youtube_channel_button" },
+  { name: "Youtube Video", key: "youtube_video" },
+]
+
+export async function GET() {
+  const components_urls = components
+    .map(
+      ({ key }) => `
+  <url>
+    <loc>${site}/components/${key}</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>`
+    )
+    .join("")
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>${site}</loc>
+    <changefreq>daily</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>${site}/components</loc>
+    <changefreq>daily</changefreq>
+    <priority>0.9</priority>
+  </url>${components_urls}
+</urlset>`.trim()
+  return new Response(xml, { headers: { "content-type": "application/xml" } })
+}