sveltekit-ui 1.0.0

package/src/routes/[component]/Showcase/Tag/index.svelte

@@ -0,0 +1,27 @@
+<script>
+  // import Tag from "$lib/Components/Tag/index.svelte"
+  // import { create_tag_manager } from "$lib/Components/Tag/index.svelte.js"
+
+  // let tag_manager = create_tag_manager({ data_type: "text_literal", val: "test" })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>revisit in future</h4>
+      <!-- <Tag manager={tag_manager} /> -->
+    </div>
+  </div>
+</div>
+
+<!-- <Tag val={{ color: { h: 6 }, display_text: "Test", icon: "send" }} /> -->
+<!-- <Tag val={{ color: { h: 6 }, display_text: "Test", icon: "send" }} /> -->
+<!-- <Tag val={{ color: { h: 6, c: 12 }, display_text: "Test", icon: "send" }} /> -->
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/TextArrayInput/index.svelte

@@ -0,0 +1,23 @@
+<script>
+  import TextArrayInput from "$lib/Components/TextArrayInput/index.svelte"
+  import { create_text_array_input_manager } from "$lib/Components/TextArrayInput/index.svelte.js"
+
+  let text_array_manager = create_text_array_input_manager()
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <TextArrayInput manager={text_array_manager} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/TextInput/index.svelte

@@ -0,0 +1,95 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+
+  let text_manager = create_text_input_manager({ val: "some val" })
+  let text_clear_button_manager = create_button_manager({
+    text: "clear",
+    support_icon: "x",
+    is_compressed: true,
+    on_click: () => text_manager.set_val(null),
+  })
+  let text_manager2 = create_text_input_manager({
+    val: "some hidable val",
+    is_text_hidable: true,
+    is_text_hidden: true,
+  })
+  let text_manager3 = create_text_input_manager({ type: "email" })
+  let text_manager4 = create_text_input_manager({ type: "tel" })
+  let text_manager5 = create_text_input_manager({ type: "password", is_password_tooltip_used: true })
+  let text_manager6 = create_text_input_manager({ type: "text_area", val: "some longer val meant for a text area" })
+  let text_manager7 = create_text_input_manager({
+    val: null,
+    type: "number",
+    max: 2100,
+    placeholder: "some num",
+    is_disabled: () => false,
+  })
+  let text_manager8 = create_text_input_manager({
+    val: null,
+    type: "number",
+    max: 2100,
+    placeholder: "some num",
+    is_popover: true,
+    on_finish: (input) => console.log("finish_text_edit", input),
+  })
+  let text_manager8_button_manager = create_button_manager({
+    text: "test_edit",
+    support_icon: "edit",
+    is_compressed: true,
+    popover_target: `popover_${text_manager8?.popover_manager?.id}`,
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <div style="display: flex;">
+        <TextInput manager={text_manager} />
+        <Button manager={text_clear_button_manager} />
+      </div>
+    </div>
+    <div>
+      <h4>Hidable Example</h4>
+      <TextInput manager={text_manager2} />
+    </div>
+    <div>
+      <h4>Limit Width Email</h4>
+      <div style="max-width: 8rem">
+        <TextInput manager={text_manager3} />
+      </div>
+    </div>
+    <div>
+      <h4>Phone Example</h4>
+      <TextInput manager={text_manager4} />
+    </div>
+    <div>
+      <h4>Password Hidden</h4>
+      <TextInput manager={text_manager5} />
+    </div>
+    <div>
+      <h4>Number</h4>
+      <TextInput manager={text_manager7} />
+    </div>
+    <div>
+      <h4>Text Area</h4>
+      <TextInput manager={text_manager6} />
+    </div>
+    <div>
+      <h4>Popover Edit</h4>
+      <Button manager={text_manager8_button_manager} />
+      <TextInput manager={text_manager8} />
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/Time/index.svelte

@@ -0,0 +1,43 @@
+<script>
+  import Time from "$lib/Components/Time/index.svelte"
+  import { create_time_manager } from "$lib/Components/Time/index.svelte.js"
+
+  let time_manager1 = create_time_manager({
+    val: {
+      hour: null,
+      year: 1996,
+      epoch: 842720061,
+      month: 9,
+      minute: null,
+      second: null,
+      content: "Saturday, September 14, 1996",
+      datetime: "1996-09-14",
+      timezone: "America/New_York",
+      day_of_week: 6,
+      day_of_year: 258,
+      granularity: "day",
+      day_of_month: 14,
+      week_of_year: 38,
+    },
+    format: "time_full",
+  })
+
+  let time_manager2 = create_time_manager({
+    val: null,
+    format: "epoch",
+  })
+  let time_manager3 = create_time_manager({
+    val: 842720061,
+    // granularity: "day",
+    format: "epoch",
+  })
+</script>
+
+<div>
+  <h4 class="label">time_full</h4>
+  <Time manager={time_manager1} /><br />
+  <h4 class="label">epoch null</h4>
+  <Time manager={time_manager2} /> <br />
+  <h4 class="label">epoch</h4>
+  <Time manager={time_manager3} />
+</div>

package/src/routes/[component]/Showcase/TimeInput/index.svelte

@@ -0,0 +1,100 @@
+<script>
+  import TimeInput from "$lib/Components/TimeInput/index.svelte"
+  import { create_time_input_manager } from "$lib/Components/TimeInput/index.svelte.js"
+
+  let time_manager1 = create_time_input_manager({
+    is_popover: true,
+    format: "time_full",
+    granularity: "second",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager2 = create_time_input_manager({
+    is_popover: true,
+    format: "epoch",
+    val: 1723158000,
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager3 = create_time_input_manager({
+    is_popover: true,
+    format: "calendar_date",
+    val: "2024-08-07",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager4 = create_time_input_manager({
+    is_popover: true,
+    format: "datetime",
+    granularity: "minute",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager5 = create_time_input_manager({
+    is_popover: true,
+    format: "datetime_utc",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager6 = create_time_input_manager({
+    is_popover: true,
+    format: "datetime_zoned",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager7 = create_time_input_manager({
+    is_popover: true,
+    format: "year",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager8 = create_time_input_manager({
+    is_popover: true,
+    format: "year_month",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager9 = create_time_input_manager({
+    is_popover: true,
+    format: "hour_minute",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager10 = create_time_input_manager({
+    is_popover: true,
+    format: "hour_minute_second",
+    on_finish: (input) => console.log("finish", input),
+  })
+  let time_manager11 = create_time_input_manager({
+    is_popover: true,
+    format: "year_week",
+    on_finish: (input) => console.log("finish", input),
+  })
+</script>
+
+<div>
+  <h4>time_full</h4>
+  <TimeInput manager={time_manager1} />
+  <pre>{JSON.stringify(time_manager1?.val, null, 2)}</pre>
+  <h4>epoch</h4>
+  <TimeInput manager={time_manager2} />
+  <pre>{JSON.stringify(time_manager2?.val, null, 2)}</pre>
+  <h4>calendar_date</h4>
+  <TimeInput manager={time_manager3} />
+  <pre>{JSON.stringify(time_manager3?.val, null, 2)}</pre>
+  <h4>datetime</h4>
+  <TimeInput manager={time_manager4} />
+  <pre>{JSON.stringify(time_manager4?.val, null, 2)}</pre>
+  <h4>datetime_utc</h4>
+  <TimeInput manager={time_manager5} />
+  <pre>{JSON.stringify(time_manager5?.val, null, 2)}</pre>
+  <h4>datetime_zoned</h4>
+  <TimeInput manager={time_manager6} />
+  <pre>{JSON.stringify(time_manager6?.val, null, 2)}</pre>
+  <h4>year</h4>
+  <TimeInput manager={time_manager7} />
+  <pre>{JSON.stringify(time_manager7?.val, null, 2)}</pre>
+  <h4>year_month</h4>
+  <TimeInput manager={time_manager8} />
+  <pre>{JSON.stringify(time_manager8?.val, null, 2)}</pre>
+  <h4>hour_minute</h4>
+  <TimeInput manager={time_manager9} />
+  <pre>{JSON.stringify(time_manager9?.val, null, 2)}</pre>
+  <h4>hour_minute_second</h4>
+  <TimeInput manager={time_manager10} />
+  <pre>{JSON.stringify(time_manager10?.val, null, 2)}</pre>
+  <h4>year_week</h4>
+  <TimeInput manager={time_manager11} />
+  <pre>{JSON.stringify(time_manager11?.val, null, 2)}</pre>
+</div>

package/src/routes/[component]/Showcase/Tooltip/index.svelte

@@ -0,0 +1,37 @@
+<script>
+  import Tooltip from "$lib/Components/Tooltip/index.svelte"
+
+  let val = "This is a test. Stay Gold, Ponyboy"
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <div>
+        <Tooltip>
+          {#snippet tooltip_content()}
+            <p>{val}</p>
+          {/snippet}
+          {#snippet target_content()}
+            <p>Test Hover Me</p>
+          {/snippet}
+        </Tooltip>
+      </div>
+    </div>
+  </div>
+  <div class="grid">
+    <div>
+      <h3>tag</h3>
+      <p>Tooltip</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/TransparentBackground/index.svelte

@@ -0,0 +1,26 @@
+<script>
+  import TransparentBackground from "$lib/Components/TransparentBackground/index.svelte"
+</script>
+
+<div>
+  <div>
+    <h4>Example</h4>
+    <TransparentBackground>
+      {#snippet content()}
+        <p style="color: navy; font-weight: 800;">Hello World</p>
+      {/snippet}
+    </TransparentBackground>
+    <h4>Example2</h4>
+    <TransparentBackground>
+      {#snippet content()}
+        <div style="min-width: 20rem; max-width: 20rem; min-height: 20rem; border: 2px solid red;"></div>
+      {/snippet}
+    </TransparentBackground>
+    <h4>Example 3 odd size</h4>
+    <TransparentBackground>
+      {#snippet content()}
+        <div style="min-width: 20.6rem; max-width: 24.2rem; min-height: 20rem; border: 2px solid green;"></div>
+      {/snippet}
+    </TransparentBackground>
+  </div>
+</div>

package/src/routes/[component]/Showcase/XFollow/index.svelte

@@ -0,0 +1,7 @@
+<script>
+  import XFollow from "$lib/Components/XFollow/index.svelte"
+</script>
+
+<div>
+  <XFollow x_handle={"contibase"} />
+</div>

package/src/routes/[component]/Showcase/XPost/index.svelte

@@ -0,0 +1,24 @@
+<script>
+  import XPost from "$lib/Components/XPost/index.svelte"
+  import { create_x_post_manager } from "$lib/Components/XPost/index.svelte.js"
+
+  let x_post_manager = create_x_post_manager({
+    post_id: "1751623669518930420",
+    is_dark_theme: false,
+  })
+  let x_post_manager2 = create_x_post_manager({
+    post_id: "1751623669518930420",
+    is_dark_theme: true,
+  })
+</script>
+
+<div>
+  <div>
+    <h4>Example</h4>
+    <XPost manager={x_post_manager} />
+  </div>
+  <div>
+    <h4>Dark Mode</h4>
+    <XPost manager={x_post_manager2} />
+  </div>
+</div>

package/src/routes/[component]/Showcase/YoutubeVideo/index.svelte

@@ -0,0 +1,17 @@
+<script>
+  import YoutubeVideo from "$lib/Components/YoutubeVideo/index.svelte"
+  import { create_youtube_video_manager } from "$lib/Components/YoutubeVideo/index.svelte.js"
+
+  let youtube_video_manager = create_youtube_video_manager({
+    video_id: "L8YefjVWWTo?si=Q9Adtj9p-iOZqS_-",
+  })
+
+  // https://youtu.be/L8YefjVWWTo?si=Q9Adtj9p-iOZqS_-
+</script>
+
+<div>
+  <div style="max-width: 400px;">
+    <h4>Example</h4>
+    <YoutubeVideo manager={youtube_video_manager} />
+  </div>
+</div>

package/src/routes/test/+page.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+  import TextInput from "$lib/Components/TextInput/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+
+  function v(config) {
+    let val = $state(null)
+
+    function on_change(from_id = null) {
+      if (typeof config?.on_change == "function") {
+        config?.on_change({ val, from_id: from_id })
+      }
+    }
+
+    function init(config) {
+      val = config?.val
+    }
+
+    init(config)
+
+    return {
+      get val() {
+        return val
+      },
+      set_val(input) {
+        if (typeof input == "object" && input?.from_id) {
+          val = input?.val
+          on_change(input?.from_id)
+        } else {
+          val = input
+          on_change()
+        }
+      },
+    }
+  }
+
+  let test = v({ val: 5, on_change: (input) => console.log("on_ch", input) })
+
+  let number_text_input_manager = create_text_input_manager({
+    type: "number",
+    val: 5,
+    on_change: (input) => {
+      console.log("search_table", input)
+      // test.val = input
+      test.set_val(input)
+    },
+  })
+</script>
+
+<TextInput manager={number_text_input_manager} />
+
+<p>test?.val</p>
+{test?.val}

package/static/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/static/favicon-inactive.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 512 512">
+  <rect x="0" y="0" width="512" height="512" rx="56" ry="56" fill="#D4E7FF"/>
+  <path d="M400.3 328.6c0 22-5.6 41.7-17 59.2a112.8 112.8 0 0 1-49.6 41.2 186.2 186.2 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.3 9.8 5 22.6 7.5 38.4 7.5 21.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.1 71.1 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.1 103.1 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.3 122.3 0 0 1 40.5 22 92.1 92.1 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.6-6.2 7-14 10.6-23.2 10.6-8.4 0-14.8-2.1-19.2-6.3a85.1 85.1 0 0 1-14.2-20.7 93.8 93.8 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.5Z" style="fill:#1C82FF;fill-rule:nonzero"></path>
+</svg>

package/static/favicon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 512 512">
+  <style>
+    .main_color {
+      fill: #0055BD;
+    }
+    @media (prefers-color-scheme: dark) {
+      .main_color {
+        fill: #1C82FF;
+      }
+    }
+  </style>
+  <path d="M0 0h512v512H0z" style="fill:none"></path>
+  <path class="main_color" d="M400.3 328.6c0 22-5.6 41.7-17 59.2a112.8 112.8 0 0 1-49.6 41.2 186.2 186.2 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.3 9.8 5 22.6 7.5 38.4 7.5 21.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.1 71.1 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.1 103.1 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.3 122.3 0 0 1 40.5 22 92.1 92.1 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.6-6.2 7-14 10.6-23.2 10.6-8.4 0-14.8-2.1-19.2-6.3a85.1 85.1 0 0 1-14.2-20.7 93.8 93.8 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.5Z" style="fill-rule:nonzero"></path>
+</svg>

package/static/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Sveltekit-UI",
+  "short_name": "Sveltekit-UI",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

package/svelte.config.js

@@ -0,0 +1,12 @@
+import adapter from "@sveltejs/adapter-vercel"
+
+export default {
+  kit: {
+    adapter: adapter({
+      runtime: "nodejs22.x",
+      trailingSlash: false,
+      cleanUrls: true,
+      maxDuration: 60,
+    }),
+  },
+}

package/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});