sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/Number/index.svelte

@@ -0,0 +1,47 @@
+<script>
+  let { manager } = $props()
+</script>
+
+<div style="display: inline-flex; align-items: center; gap: .5rem;">
+  {#if manager?.val?.is_progress_bar}
+    <div
+      class="progress_container"
+      role="progressbar"
+      aria-valuenow={manager?.val?.val}
+      aria-valuemin={manager?.val?.start_value}
+      aria-valuemax={manager?.val?.end_value}
+      style="--percentage_fill: {manager?.val?.percentage_fill ?? 0}%; --dynamic_color: {manager?.val?.font_color};"
+    ></div>
+  {/if}
+  {#if !manager?.val?.is_hide_number}
+    <p style={`font-weight: ${manager?.val?.font_weight}; color: ${manager?.val?.font_color};`}>
+      {manager?.val?.val_text}{#if manager?.val?.suffix}<span
+          style="margin-left: 0.1rem; font-size: 1.4rem; color: oklch(var(--l12-t) var(--c3) var(--h{manager?.val
+            ?.hue}))">{manager?.val?.suffix}</span
+        >{/if}
+    </p>
+  {/if}
+</div>
+
+<style>
+  .progress_container {
+    overflow: hidden;
+    border-radius: 0.6rem;
+    display: flex;
+    flex: 1;
+    min-width: 10rem;
+    background-color: var(--shadow1-t);
+    border: 1px solid var(--g12-t);
+    position: relative;
+  }
+
+  .progress_container::after {
+    content: "";
+    display: block;
+    height: 2rem;
+    background-color: var(--dynamic_color);
+    width: var(--percentage_fill);
+    transition: width 0.3s ease;
+    border-radius: 0.6rem;
+  }
+</style>

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

@@ -0,0 +1,151 @@
+import { deep_copy, set_closurable } from "../../client/index.js"
+
+export function create_number_manager(config) {
+  let val = $state(null)
+
+  function round_value(value, options) {
+    switch (options.round) {
+      case "nearest":
+        return Math.round(value / options.round_by) * options.round_by
+      case "floor":
+        return Math.floor(value / options.round_by) * options.round_by
+      case "ceil":
+        return Math.ceil(value / options.round_by) * options.round_by
+      case "precision":
+        return Number(value).toPrecision(options.precision)
+      default:
+        return value
+    }
+  }
+
+  function apply_shorthand(value, shorthand) {
+    let divider = 1
+    let suffix = ""
+    switch (shorthand) {
+      case "thousands":
+        divider = 1e3
+        suffix = "K"
+        break
+      case "millions":
+        divider = 1e6
+        suffix = "M"
+        break
+      case "billions":
+        divider = 1e9
+        suffix = "B"
+        break
+      case "trillions":
+        divider = 1e12
+        suffix = "T"
+        break
+      case "quadrillions":
+        divider = 1e15
+        suffix = "Qd"
+        break
+      default:
+        return { value, suffix }
+    }
+    return { value: (value / divider).toFixed(), suffix }
+  }
+
+  function format_separators(value, options) {
+    switch (options.separators) {
+      case "thousands_commas_period":
+        return parseFloat(value).toLocaleString("en-US")
+      case "thousands_periods_comma":
+        return parseFloat(value).toLocaleString("de-DE")
+      default:
+        return value
+    }
+  }
+
+  function init(config) {
+    let val_loc = set_closurable(config?.val)
+    let val_text_loc = null
+    let suffix_loc = ""
+    let hue_loc = 10
+    let chroma_loc = 10
+    let font_weight_loc = "400"
+    let font_color_loc = `oklch(var(--l9-t) var(--c${config?.base_color?.c}) var(--h${config?.base_color?.h}))`
+    if (config?.round) {
+      val_loc = round_value(val_loc, config)
+    }
+    if (config?.shorthand) {
+      const shorthand_val_loc = apply_shorthand(val_loc, config?.shorthand)
+      val_text_loc = shorthand_val_loc.value
+      suffix_loc = shorthand_val_loc.suffix
+    } else {
+      val_text_loc = String(val_loc)
+    }
+    if (config?.separators) {
+      val_text_loc = format_separators(val_text_loc, config)
+    }
+    if (config?.is_percentage) {
+      suffix_loc += "%"
+    }
+    font_color_loc = `oklch(var(--l9-t) var(--c${config?.base_color?.c}) var(--h${config?.base_color?.h}))`
+    hue_loc = config?.base_color?.h
+    chroma_loc = config?.base_color?.c
+    if (config?.is_dynamic_color) {
+      const progress = (val_loc - config?.start_value) / (config?.end_value - config?.start_value)
+      let start_h = config?.start_color.h
+      let end_h = config?.end_color.h
+      let delta_h
+      if (Math.abs(end_h - start_h) <= 12) {
+        delta_h = end_h - start_h
+      } else {
+        if (end_h > start_h) {
+          delta_h = end_h - 24 - start_h
+        } else {
+          delta_h = end_h + 24 - start_h
+        }
+      }
+      const h_at_progress_unrounded = (start_h + delta_h * progress) % 24
+      const h_at_progress = Math.round(h_at_progress_unrounded)
+      hue_loc = h_at_progress === 24 ? 0 : h_at_progress
+      let start_c = config?.start_color.c
+      let end_c = config?.end_color.c
+      let delta_c
+      if (Math.abs(end_c - start_c) <= 12) {
+        delta_c = end_c - start_c
+      } else {
+        if (end_c > start_c) {
+          delta_c = end_c - 24 - start_c
+        } else {
+          delta_c = end_c + 24 - start_c
+        }
+      }
+      const c_at_progress_unrounded = (start_c + delta_c * progress) % 24
+      const c_at_progress = Math.round(c_at_progress_unrounded)
+      chroma_loc = c_at_progress === 24 ? 0 : c_at_progress
+      font_color_loc = `oklch(var(--l9-t) var(--c${chroma_loc}) var(--h${hue_loc}))`
+    }
+    let percentage_fill_loc = 0
+    if (
+      typeof start_value === "number" &&
+      typeof config?.end_value === "number" &&
+      config?.end_value !== config?.start_value
+    ) {
+      percentage_fill_loc = ((val - config?.start_value) / (config?.end_value - config?.start_value)) * 100
+      percentage_fill_loc = Math.max(0, Math.min(percentage_fill_loc, 100))
+    }
+    val = {
+      val: val_loc,
+      val_text: val_text_loc,
+      suffix: suffix_loc,
+      font_weight: font_weight_loc,
+      font_color: font_color_loc,
+      hue: hue_loc,
+      chroma: chroma_loc,
+      percentage_fill: percentage_fill_loc,
+    }
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return val
+    },
+  }
+}

package/dist/Components/PhoneCountryCode/index.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Dropdown from "../Dropdown/index.svelte.js"
+</script>
+
+<div style="min-width: 8rem;">
+  <Dropdown manager={manager?.dropdown_manager} />
+</div>

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

@@ -0,0 +1,260 @@
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+
+export function create_country_code_manager(config) {
+  let dropdown_manager = $state(null)
+
+  const countries = [
+    { code: "US", emoji: "🇺🇸", phone_code: 1, name: "United States" },
+    { code: "GB", emoji: "🇬🇧", phone_code: 44, name: "United Kingdom" },
+    { code: "AF", emoji: "🇦🇫", phone_code: 93, name: "Afghanistan" },
+    { code: "AL", emoji: "🇦🇱", phone_code: 355, name: "Albania" },
+    { code: "DZ", emoji: "🇩🇿", phone_code: 213, name: "Algeria" },
+    { code: "AS", emoji: "🇦🇸", phone_code: 1684, name: "American Samoa" },
+    { code: "AD", emoji: "🇦🇩", phone_code: 376, name: "Andorra" },
+    { code: "AO", emoji: "🇦🇴", phone_code: 244, name: "Angola" },
+    { code: "AI", emoji: "🇦🇮", phone_code: 1264, name: "Anguilla" },
+    { code: "AQ", emoji: "🇦🇶", phone_code: 0, name: "Antarctica" },
+    { code: "AR", emoji: "🇦🇷", phone_code: 54, name: "Argentina" },
+    { code: "AM", emoji: "🇦🇲", phone_code: 374, name: "Armenia" },
+    { code: "AW", emoji: "🇦🇼", phone_code: 297, name: "Aruba" },
+    { code: "AU", emoji: "🇦🇺", phone_code: 61, name: "Australia" },
+    { code: "AT", emoji: "🇦🇹", phone_code: 43, name: "Austria" },
+    { code: "AZ", emoji: "🇦🇿", phone_code: 994, name: "Azerbaijan" },
+    { code: "BH", emoji: "🇧🇭", phone_code: 973, name: "Bahrain" },
+    { code: "BD", emoji: "🇧🇩", phone_code: 880, name: "Bangladesh" },
+    { code: "BB", emoji: "🇧🇧", phone_code: 1246, name: "Barbados" },
+    { code: "BY", emoji: "🇧🇾", phone_code: 375, name: "Belarus" },
+    { code: "BE", emoji: "🇧🇪", phone_code: 32, name: "Belgium" },
+    { code: "BZ", emoji: "🇧🇿", phone_code: 501, name: "Belize" },
+    { code: "BJ", emoji: "🇧🇯", phone_code: 229, name: "Benin" },
+    { code: "BM", emoji: "🇧🇲", phone_code: 1441, name: "Bermuda" },
+    { code: "BT", emoji: "🇧🇹", phone_code: 975, name: "Bhutan" },
+    { code: "BO", emoji: "🇧🇴", phone_code: 591, name: "Bolivia" },
+    { code: "BW", emoji: "🇧🇼", phone_code: 267, name: "Botswana" },
+    { code: "BV", emoji: "🇧🇻", phone_code: 0, name: "Bouvet Island" },
+    { code: "BR", emoji: "🇧🇷", phone_code: 55, name: "Brazil" },
+    {
+      code: "IO",
+      emoji: "🇮🇴",
+      phone_code: 246,
+      name: "British Indian Ocean Territory",
+    },
+    { code: "BN", emoji: "🇧🇳", phone_code: 673, name: "Brunei" },
+    { code: "BG", emoji: "🇧🇬", phone_code: 359, name: "Bulgaria" },
+    { code: "BF", emoji: "🇧🇫", phone_code: 226, name: "Burkina Faso" },
+    { code: "BI", emoji: "🇧🇮", phone_code: 257, name: "Burundi" },
+    { code: "KH", emoji: "🇰🇭", phone_code: 855, name: "Cambodia" },
+    { code: "CM", emoji: "🇨🇲", phone_code: 237, name: "Cameroon" },
+    { code: "CA", emoji: "🇨🇦", phone_code: 1, name: "Canada" },
+    { code: "CV", emoji: "🇨🇻", phone_code: 238, name: "Cape Verde" },
+    { code: "KY", emoji: "🇰🇾", phone_code: 1345, name: "Cayman Islands" },
+    {
+      code: "CF",
+      emoji: "🇨🇫",
+      phone_code: 236,
+      name: "Central African Republic",
+    },
+    { code: "TD", emoji: "🇹🇩", phone_code: 235, name: "Chad" },
+    { code: "CL", emoji: "🇨🇱", phone_code: 56, name: "Chile" },
+    { code: "CN", emoji: "🇨🇳", phone_code: 86, name: "China" },
+    { code: "CX", emoji: "🇨🇽", phone_code: 61, name: "Christmas Island" },
+    { code: "CC", emoji: "🇨🇨", phone_code: 672, name: "Cocos (Keeling) Islands" },
+    { code: "CO", emoji: "🇨🇴", phone_code: 57, name: "Colombia" },
+    { code: "KM", emoji: "🇰🇲", phone_code: 269, name: "Comoros" },
+    { code: "CK", emoji: "🇨🇰", phone_code: 682, name: "Cook Islands" },
+    { code: "CR", emoji: "🇨🇷", phone_code: 506, name: "Costa Rica" },
+    { code: "CU", emoji: "🇨🇺", phone_code: 53, name: "Cuba" },
+    { code: "CY", emoji: "🇨🇾", phone_code: 357, name: "Cyprus" },
+    { code: "DK", emoji: "🇩🇰", phone_code: 45, name: "Denmark" },
+    { code: "DJ", emoji: "🇩🇯", phone_code: 253, name: "Djibouti" },
+    { code: "DM", emoji: "🇩🇲", phone_code: 1767, name: "Dominica" },
+    { code: "DO", emoji: "🇩🇴", phone_code: 1809, name: "Dominican Republic" },
+    { code: "EC", emoji: "🇪🇨", phone_code: 593, name: "Ecuador" },
+    { code: "EG", emoji: "🇪🇬", phone_code: 20, name: "Egypt" },
+    { code: "SV", emoji: "🇸🇻", phone_code: 503, name: "El Salvador" },
+    { code: "GQ", emoji: "🇬🇶", phone_code: 240, name: "Equatorial Guinea" },
+    { code: "ER", emoji: "🇪🇷", phone_code: 291, name: "Eritrea" },
+    { code: "EE", emoji: "🇪🇪", phone_code: 372, name: "Estonia" },
+    { code: "ET", emoji: "🇪🇹", phone_code: 251, name: "Ethiopia" },
+    { code: "FK", emoji: "🇫🇰", phone_code: 500, name: "Falkland Islands" },
+    { code: "FO", emoji: "🇫🇴", phone_code: 298, name: "Faroe Islands" },
+    { code: "FI", emoji: "🇫🇮", phone_code: 358, name: "Finland" },
+    { code: "FR", emoji: "🇫🇷", phone_code: 33, name: "France" },
+    { code: "GF", emoji: "🇬🇫", phone_code: 594, name: "French Guiana" },
+    { code: "PF", emoji: "🇵🇫", phone_code: 689, name: "French Polynesia" },
+    {
+      code: "TF",
+      emoji: "🇹🇫",
+      phone_code: 0,
+      name: "French Southern Territories",
+    },
+    { code: "GA", emoji: "🇬🇦", phone_code: 241, name: "Gabon" },
+    { code: "GE", emoji: "🇬🇪", phone_code: 995, name: "Georgia" },
+    { code: "DE", emoji: "🇩🇪", phone_code: 49, name: "Germany" },
+    { code: "GH", emoji: "🇬🇭", phone_code: 233, name: "Ghana" },
+    { code: "GI", emoji: "🇬🇮", phone_code: 350, name: "Gibraltar" },
+    { code: "GR", emoji: "🇬🇷", phone_code: 30, name: "Greece" },
+    { code: "GL", emoji: "🇬🇱", phone_code: 299, name: "Greenland" },
+    { code: "GD", emoji: "🇬🇩", phone_code: 1473, name: "Grenada" },
+    { code: "GP", emoji: "🇬🇵", phone_code: 590, name: "Guadeloupe" },
+    { code: "GU", emoji: "🇬🇺", phone_code: 1671, name: "Guam" },
+    { code: "GT", emoji: "🇬🇹", phone_code: 502, name: "Guatemala" },
+    { code: "GN", emoji: "🇬🇳", phone_code: 224, name: "Guinea" },
+    { code: "GW", emoji: "🇬🇼", phone_code: 245, name: "Guinea-Bissau" },
+    { code: "GY", emoji: "🇬🇾", phone_code: 592, name: "Guyana" },
+    { code: "HT", emoji: "🇭🇹", phone_code: 509, name: "Haiti" },
+    { code: "HN", emoji: "🇭🇳", phone_code: 504, name: "Honduras" },
+    { code: "HU", emoji: "🇭🇺", phone_code: 36, name: "Hungary" },
+    { code: "IS", emoji: "🇮🇸", phone_code: 354, name: "Iceland" },
+    { code: "IN", emoji: "🇮🇳", phone_code: 91, name: "India" },
+    { code: "ID", emoji: "🇮🇩", phone_code: 62, name: "Indonesia" },
+    { code: "IR", emoji: "🇮🇷", phone_code: 98, name: "Iran" },
+    { code: "IQ", emoji: "🇮🇶", phone_code: 964, name: "Iraq" },
+    { code: "IE", emoji: "🇮🇪", phone_code: 353, name: "Ireland" },
+    { code: "IL", emoji: "🇮🇱", phone_code: 972, name: "Israel" },
+    { code: "IT", emoji: "🇮🇹", phone_code: 39, name: "Italy" },
+    { code: "JM", emoji: "🇯🇲", phone_code: 1876, name: "Jamaica" },
+    { code: "JP", emoji: "🇯🇵", phone_code: 81, name: "Japan" },
+    { code: "JO", emoji: "🇯🇴", phone_code: 962, name: "Jordan" },
+    { code: "KZ", emoji: "🇰🇿", phone_code: 7, name: "Kazakhstan" },
+    { code: "KE", emoji: "🇰🇪", phone_code: 254, name: "Kenya" },
+    { code: "KI", emoji: "🇰🇮", phone_code: 686, name: "Kiribati" },
+    { code: "KW", emoji: "🇰🇼", phone_code: 965, name: "Kuwait" },
+    { code: "KG", emoji: "🇰🇬", phone_code: 996, name: "Kyrgyzstan" },
+    { code: "LA", emoji: "🇱🇦", phone_code: 856, name: "Laos" },
+    { code: "LV", emoji: "🇱🇻", phone_code: 371, name: "Latvia" },
+    { code: "LB", emoji: "🇱🇧", phone_code: 961, name: "Lebanon" },
+    { code: "LS", emoji: "🇱🇸", phone_code: 266, name: "Lesotho" },
+    { code: "LR", emoji: "🇱🇷", phone_code: 231, name: "Liberia" },
+    { code: "LY", emoji: "🇱🇾", phone_code: 218, name: "Libya" },
+    { code: "LI", emoji: "🇱🇮", phone_code: 423, name: "Liechtenstein" },
+    { code: "LT", emoji: "🇱🇹", phone_code: 370, name: "Lithuania" },
+    { code: "LU", emoji: "🇱🇺", phone_code: 352, name: "Luxembourg" },
+    { code: "MK", emoji: "🇲🇰", phone_code: 389, name: "Macedonia" },
+    { code: "MG", emoji: "🇲🇬", phone_code: 261, name: "Madagascar" },
+    { code: "MW", emoji: "🇲🇼", phone_code: 265, name: "Malawi" },
+    { code: "MY", emoji: "🇲🇾", phone_code: 60, name: "Malaysia" },
+    { code: "MV", emoji: "🇲🇻", phone_code: 960, name: "Maldives" },
+    { code: "ML", emoji: "🇲🇱", phone_code: 223, name: "Mali" },
+    { code: "MT", emoji: "🇲🇹", phone_code: 356, name: "Malta" },
+    { code: "MH", emoji: "🇲🇭", phone_code: 692, name: "Marshall Islands" },
+    { code: "MQ", emoji: "🇲🇶", phone_code: 596, name: "Martinique" },
+    { code: "MR", emoji: "🇲🇷", phone_code: 222, name: "Mauritania" },
+    { code: "MU", emoji: "🇲🇺", phone_code: 230, name: "Mauritius" },
+    { code: "YT", emoji: "🇾🇹", phone_code: 269, name: "Mayotte" },
+    { code: "MX", emoji: "🇲🇽", phone_code: 52, name: "Mexico" },
+    { code: "FM", emoji: "🇫🇲", phone_code: 691, name: "Micronesia" },
+    { code: "MD", emoji: "🇲🇩", phone_code: 373, name: "Moldova" },
+    { code: "MC", emoji: "🇲🇨", phone_code: 377, name: "Monaco" },
+    { code: "MN", emoji: "🇲🇳", phone_code: 976, name: "Mongolia" },
+    { code: "MS", emoji: "🇲🇸", phone_code: 1664, name: "Montserrat" },
+    { code: "MA", emoji: "🇲🇦", phone_code: 212, name: "Morocco" },
+    { code: "MZ", emoji: "🇲🇿", phone_code: 258, name: "Mozambique" },
+    { code: "NA", emoji: "🇳🇦", phone_code: 264, name: "Namibia" },
+    { code: "NR", emoji: "🇳🇷", phone_code: 674, name: "Nauru" },
+    { code: "NP", emoji: "🇳🇵", phone_code: 977, name: "Nepal" },
+    { code: "NC", emoji: "🇳🇨", phone_code: 687, name: "New Caledonia" },
+    { code: "NZ", emoji: "🇳🇿", phone_code: 64, name: "New Zealand" },
+    { code: "NI", emoji: "🇳🇮", phone_code: 505, name: "Nicaragua" },
+    { code: "NE", emoji: "🇳🇪", phone_code: 227, name: "Niger" },
+    { code: "NG", emoji: "🇳🇬", phone_code: 234, name: "Nigeria" },
+    { code: "NU", emoji: "🇳🇺", phone_code: 683, name: "Niue" },
+    { code: "NF", emoji: "🇳🇫", phone_code: 672, name: "Norfolk Island" },
+    {
+      code: "MP",
+      emoji: "🇲🇵",
+      phone_code: 1670,
+      name: "Northern Mariana Islands",
+    },
+    { code: "NO", emoji: "🇳🇴", phone_code: 47, name: "Norway" },
+    { code: "OM", emoji: "🇴🇲", phone_code: 968, name: "Oman" },
+    { code: "PK", emoji: "🇵🇰", phone_code: 92, name: "Pakistan" },
+    { code: "PW", emoji: "🇵🇼", phone_code: 680, name: "Palau" },
+    { code: "PA", emoji: "🇵🇦", phone_code: 507, name: "Panama" },
+    { code: "PY", emoji: "🇵🇾", phone_code: 595, name: "Paraguay" },
+    { code: "PE", emoji: "🇵🇪", phone_code: 51, name: "Peru" },
+    { code: "PH", emoji: "🇵🇭", phone_code: 63, name: "Philippines" },
+    { code: "PL", emoji: "🇵🇱", phone_code: 48, name: "Poland" },
+    { code: "PT", emoji: "🇵🇹", phone_code: 351, name: "Portugal" },
+    { code: "PR", emoji: "🇵🇷", phone_code: 1787, name: "Puerto Rico" },
+    { code: "QA", emoji: "🇶🇦", phone_code: 974, name: "Qatar" },
+    { code: "RO", emoji: "🇷🇴", phone_code: 40, name: "Romania" },
+    { code: "RU", emoji: "🇷🇺", phone_code: 70, name: "Russia" },
+    { code: "RW", emoji: "🇷🇼", phone_code: 250, name: "Rwanda" },
+    { code: "WS", emoji: "🇼🇸", phone_code: 684, name: "Samoa" },
+    { code: "SM", emoji: "🇸🇲", phone_code: 378, name: "San Marino" },
+    { code: "SA", emoji: "🇸🇦", phone_code: 966, name: "Saudi Arabia" },
+    { code: "SN", emoji: "🇸🇳", phone_code: 221, name: "Senegal" },
+    { code: "RS", emoji: "🇷🇸", phone_code: 381, name: "Serbia" },
+    { code: "SC", emoji: "🇸🇨", phone_code: 248, name: "Seychelles" },
+    { code: "SL", emoji: "🇸🇱", phone_code: 232, name: "Sierra Leone" },
+    { code: "SG", emoji: "🇸🇬", phone_code: 65, name: "Singapore" },
+    { code: "SK", emoji: "🇸🇰", phone_code: 421, name: "Slovakia" },
+    { code: "SI", emoji: "🇸🇮", phone_code: 386, name: "Slovenia" },
+    { code: "SB", emoji: "🇸🇧", phone_code: 677, name: "Solomon Islands" },
+    { code: "SO", emoji: "🇸🇴", phone_code: 252, name: "Somalia" },
+    { code: "ZA", emoji: "🇿🇦", phone_code: 27, name: "South Africa" },
+    { code: "SS", emoji: "🇸🇸", phone_code: 211, name: "South Sudan" },
+    { code: "ES", emoji: "🇪🇸", phone_code: 34, name: "Spain" },
+    { code: "LK", emoji: "🇱🇰", phone_code: 94, name: "Sri Lanka" },
+    { code: "SD", emoji: "🇸🇩", phone_code: 249, name: "Sudan" },
+    { code: "SR", emoji: "🇸🇷", phone_code: 597, name: "Suriname" },
+    { code: "SZ", emoji: "🇸🇿", phone_code: 268, name: "Swaziland" },
+    { code: "SE", emoji: "🇸🇪", phone_code: 46, name: "Sweden" },
+    { code: "CH", emoji: "🇨🇭", phone_code: 41, name: "Switzerland" },
+    { code: "SY", emoji: "🇸🇾", phone_code: 963, name: "Syria" },
+    { code: "TW", emoji: "🇹🇼", phone_code: 886, name: "Taiwan" },
+    { code: "TJ", emoji: "🇹🇯", phone_code: 992, name: "Tajikistan" },
+    { code: "TZ", emoji: "🇹🇿", phone_code: 255, name: "Tanzania" },
+    { code: "TH", emoji: "🇹🇭", phone_code: 66, name: "Thailand" },
+    { code: "TG", emoji: "🇹🇬", phone_code: 228, name: "Togo" },
+    { code: "TK", emoji: "🇹🇰", phone_code: 690, name: "Tokelau" },
+    { code: "TO", emoji: "🇹🇴", phone_code: 676, name: "Tonga" },
+    { code: "TN", emoji: "🇹🇳", phone_code: 216, name: "Tunisia" },
+    { code: "TR", emoji: "🇹🇷", phone_code: 90, name: "Turkey" },
+    { code: "TM", emoji: "🇹🇲", phone_code: 7370, name: "Turkmenistan" },
+    { code: "TV", emoji: "🇹🇻", phone_code: 688, name: "Tuvalu" },
+    { code: "UG", emoji: "🇺🇬", phone_code: 256, name: "Uganda" },
+    { code: "UA", emoji: "🇺🇦", phone_code: 380, name: "Ukraine" },
+    { code: "AE", emoji: "🇦🇪", phone_code: 971, name: "United Arab Emirates" },
+    { code: "UY", emoji: "🇺🇾", phone_code: 598, name: "Uruguay" },
+    { code: "UZ", emoji: "🇺🇿", phone_code: 998, name: "Uzbekistan" },
+    { code: "VU", emoji: "🇻🇺", phone_code: 678, name: "Vanuatu" },
+    { code: "VE", emoji: "🇻🇪", phone_code: 58, name: "Venezuela" },
+    { code: "VN", emoji: "🇻🇳", phone_code: 84, name: "Vietnam" },
+    { code: "EH", emoji: "🇪🇭", phone_code: 212, name: "Western Sahara" },
+    { code: "YE", emoji: "🇾🇪", phone_code: 967, name: "Yemen" },
+    { code: "ZM", emoji: "🇿🇲", phone_code: 260, name: "Zambia" },
+    { code: "ZW", emoji: "🇿🇼", phone_code: 26, name: "Zimbabwe" },
+  ]
+
+  function init(config) {
+    dropdown_manager = create_dropdown_manager({
+      button_type: "outlined",
+      selected_font_size: 1.2,
+      val: 1,
+      options: countries,
+      val_key: "phone_code",
+      button_display_keys: ["emoji", "name", "phone_code"],
+      row_display_keys: ["emoji", "name", "phone_code"],
+      is_show_arrow: false,
+      is_collapsed: true,
+      on_item_click: (input) => {
+        if (typeof config?.on_change == "function") {
+          config?.on_change(input?.key)
+        }
+      },
+    })
+  }
+
+  init(config)
+
+  return {
+    get val() {
+      return dropdown_manager?.val
+    },
+    get dropdown_manager() {
+      return dropdown_manager
+    },
+  }
+}

package/dist/Components/PhoneNumber/index.svelte

@@ -0,0 +1,22 @@
+<script>
+  import Button from "../Button/index.svelte"
+
+  let { manager } = $props()
+</script>
+
+<div class="container">
+  {#if manager?.phone_number_to_use}
+    <p>{manager?.phone_number_to_use}</p>
+    <Button manager={manager?.button_manager} />
+  {:else}
+    <p>-</p>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex: 0;
+    gap: 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,41 @@
+import { create_button_manager } from "../Button/index.svelte.js"
+import { set_closurable } from "../../client/index.js"
+
+export function create_phone_number_manager(config) {
+  let val = $derived(set_closurable(config?.val, null))
+  let main_number = $derived(set_closurable(config?.main_number, null))
+  let country_code = $derived(set_closurable(config?.country_code, null))
+
+  let phone_number_to_use = $derived(
+    val
+      ? typeof val == "object"
+        ? `${val?.country_code}${val?.main_number}`
+        : val
+      : country_code || main_number
+      ? `${country_code}${main_number}`
+      : null
+  )
+
+  let button_manager = $state(
+    create_button_manager({
+      type: "soft",
+      pl: 0.2,
+      pr: 0.2,
+      support_icon: "link",
+      icon_size: 1.5,
+      on_click: () => call_number(),
+    })
+  )
+
+  function call_number() {
+    Object.assign(document.createElement("a"), {
+      href: "tel:" + phone_number_to_use,
+    }).click()
+  }
+  return {
+    get phone_number_to_use() {
+      return phone_number_to_use
+    },
+    button_manager,
+  }
+}