sveltekit-ui 1.1.74 → 1.1.76

package/src/routes/+layout.svelte

@@ -1,241 +0,0 @@
-<script>
-  import "$lib/style.css"
-  import Layout from "$lib/Components/Layout/index.svelte"
-  import { create_layout_manager } from "$lib/Components/Layout/index.svelte.js"
-  import Button from "$lib/Components/Button/index.svelte"
-  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-  import Checkbox from "$lib/Components/Checkbox/index.svelte"
-  import { onNavigate, invalidateAll } from "$app/navigation"
-  import { page } from "$app/state"
-
-  onNavigate(async () => {
-    // testiing something tbd
-    await invalidateAll()
-    if (!document?.startViewTransition) {
-      return
-    }
-    return new Promise((fulfil) => {
-      document.startViewTransition(() => new Promise(fulfil))
-    })
-  })
-
-  let layout_manager = create_layout_manager({
-    favicons: {
-      favicon: "/favicon.svg",
-      favicon_inactive: "/favicon-inactive.svg",
-    },
-  })
-
-  let { children } = $props()
-
-  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" },
-    // { name: "Conditions Input TBD", key: "conditions_input" },
-    // { name: "Text Array TBD", key: "text_array" },
-    // { name: "Array TBD", key: "array" },
-  ]
-
-  let nav_component_button_managers = components.map((h) =>
-    create_button_manager({
-      type: "soft",
-      l: 3,
-      c: 2,
-      text: h?.name,
-      text_align: "left",
-      selected_type: () => (page.params.component === h?.key ? "selected" : null),
-      on_click: () => layout_manager.goto_path(`/components/${h?.key}`),
-    }),
-  )
-
-  // let show_confetti_button_manager = create_button_manager({
-  //   text: "Show Confetti",
-  //   is_compressed: true,
-  //   on_click: () => layout_manager?.confetti_manager.show_confetti(),
-  // })
-</script>
-
-<svelte:head>
-  <title>Sveltekit-UI</title>
-  <meta name="description" content="Svelte UI component library for coding websites." />
-  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
-  <meta property="og:title" content="Sveltekit-UI" />
-  <meta property="og:description" content="Svelte UI component library for coding websites." />
-  <meta property="og:image" content="https://www.sveltekit-ui.com/thumbnail.webp" />
-  <meta property="og:url" content="https://www.sveltekit-ui.com" />
-  <meta property="og:type" content="website" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Contibase" />
-  <meta name="twitter:description" content="Svelte UI component library for coding websites" />
-  <meta name="twitter:image" content="https://www.sveltekit-ui.com/thumbnail.webp" />
-  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-17171374425"></script>
-  <script>
-    window.dataLayer = window.dataLayer || []
-    function gtag() {
-      dataLayer.push(arguments)
-    }
-    gtag("js", new Date())
-    gtag("config", "AW-17171374425")
-  </script>
-</svelte:head>
-
-<Layout manager={layout_manager}>
-  {#snippet nav_bar_logo()}
-    <div class="container" style="--color1: var(--primary-t);">
-      <h1 class="logo_text">Sveltekit-UI</h1>
-    </div>
-  {/snippet}
-  {#snippet app_nav_bar_logo()}
-    <div class="container" style="--color1: var(--primary-t);">
-      <h1 class="logo_text">Sveltekit-UI</h1>
-    </div>
-  {/snippet}
-  {#snippet nav_bar_extra()}
-    <div style="display: flex; align-iems: center; gap: .5rem;">
-      <!-- <TextInput placeholder="Search" /> -->
-      <!-- <Button manager={alert_button_manager} /> -->
-      <!-- <Button manager={show_confetti_button_manager} /> -->
-      <Checkbox manager={layout_manager?.dark_theme_manager} />
-    </div>
-  {/snippet}
-  {#snippet sub_bar()}
-    <!-- <div>
-      <p style="background-color: red;">Nav Bar slot</p>
-    </div> -->
-  {/snippet}
-  {#snippet full_nav()}
-    <div style="margin: 1rem;">
-      <h4>Components</h4>
-      {#if Array.isArray(nav_component_button_managers) && nav_component_button_managers.length > 0}
-        {#each nav_component_button_managers as nav_button_manager}
-          <div style={nav_button_manager?.selected_type == "selected" ? "view-transition-name: test;" : ""}>
-            <Button manager={nav_button_manager} />
-          </div>
-        {/each}
-      {:else}
-        Error getting nav
-      {/if}
-    </div>
-  {/snippet}
-  {#snippet content()}
-    {#if children}
-      {@render children()}
-    {/if}
-    <div style="display: flex; justify-content: start; padding: 1rem; margin-top: 2rem;">
-      <a
-        href="https://www.contibase.com?ref=skui"
-        target="_blank"
-        rel="noopener noreferrer"
-        style="display: flex; align-items: center; justify-content: center; padding: .5rem 2rem; width: fit-content; background-color: var(--g0-t); border-radius: 10px; font-family: Quicksand; text-decoration: none;"
-      >
-        <img
-          height="12px"
-          width="auto"
-          style="max-height: 12px; max-width: 40px; width: auto; margin-right: 10px;"
-          src="https://www.contibase.com/favicon.svg"
-          alt="icon"
-        />
-        <div style="display: flex; flex-direction: column; flex: 0;">
-          <span style="font-size: 1rem; line-height: 1; color: var(--g16-t)">Sponsored by </span><span
-            style="line-height: 1; color: oklch(var(--l12-t) var(--c12) var(--h10));">Contibase</span
-          >
-        </div>
-      </a>
-    </div>
-  {/snippet}
-  <!-- {#snippet additional()}
-  {/snippet} -->
-</Layout>
-
-<style>
-  @font-face {
-    font-family: "Proxima Vara";
-    src:
-      local(""),
-      url("/fonts/ProximaVara.woff2") format("woff2 supports variations"),
-      url("/fonts/ProximaVara.woff2") format("woff2-variations");
-    font-weight: 100 900;
-    font-stretch: 50% 100%;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: "Roboto Serif";
-    src:
-      url("/fonts/RobotoSerif-VariableFont.woff2") format("woff2 supports variations"),
-      url("/fonts/RobotoSerif-VariableFont.woff2") format("woff2-variations");
-    font-weight: 100 1000;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: "Quicksand";
-    src:
-      url("/fonts/Quicksand-VariableFont.woff2") format("woff2 supports variations"),
-      url("/fonts/Quicksand-VariableFont.woff2") format("woff2-variations");
-    font-weight: 100 1000;
-    font-display: swap;
-  }
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-  }
-  .logo_text {
-    font-family: "Quicksand", sans-serif;
-    width: max-content;
-    z-index: 1;
-    font-size: clamp(2rem, 5.2vw, 2.6rem) !important;
-    font-weight: 700 !important;
-    color: var(--color1);
-    font-size: var(--font_size);
-    letter-spacing: 0.02rem;
-    line-height: clamp(2.2rem, 5.2vw, 2.9rem);
-  }
-</style>

package/src/routes/+page.svelte

@@ -1,369 +0,0 @@
-<script>
-  import Content from "$lib/Components/Content/index.svelte"
-  import { create_content_manager } from "$lib/Components/Content/index.svelte.js"
-  import Button from "$lib/Components/Button/index.svelte"
-  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-  import YoutubeVideo from "$lib/Components/YoutubeVideo/index.svelte"
-  import { create_youtube_video_manager } from "$lib/Components/YoutubeVideo/index.svelte.js"
-  import { definitions, docs_definition_to_sample_code, docs_overview_code_sample } from "$lib/client/docs/index.js"
-  import { copy_to_clipboard } from "$lib/client/index.js"
-
-  const colors_section = `color system (oklch css variables)
-
-overview
-- all colors are exposed as css custom properties (variables).
-- most of the time you should use the "-t" themed versions (they automatically flip for dark mode).
-- variables are designed to be composable: oklch(lightness chroma hue / alpha).
-
-core pieces
-1) lightness scale
-- --l0 ... --l24 are lightness steps for the default (light) theme.
-- --l0-t ... --l24-t are the themed lightness steps (invert in dark theme).
-
-2) hue + chroma scales
-- --h0 ... --h24 are hue steps (0-360-ish).
-- --c0 ... --c24 are chroma steps (0-1-ish).
-- --o0 ... --o24 are opacity steps (0-1).
-
-3) grayscale system tied to the primary hue
-- --g0 ... --g24 and --g0-t ... --g24-t are “neutral grays” but actually oklch grays tinted toward --primary-h.
-- use these for almost everything (text, borders, surfaces) because they stay cohesive with your primary color.
-
-theme guidance
-- use *-t variables by default (ex: var(--g6-t), var(--bg), var(--shadow3-t)).
-- use non -t variables only if you explicitly want the same value in light and dark modes.
-
-recommended usage patterns
-- page background: var(--bg)
-- elevated/surface background: var(--bg2) or var(--shadow1-t) (subtle)
-- primary brand color: var(--primary) or var(--primary-t)
-- primary text: var(--g6-t)
-- muted text / labels: var(--g10-t) to var(--g14-t)
-- borders / dividers: var(--g16-t) or var(--shadow7-t)
-- shadows: var(--shadow1-t) ... var(--shadow10-t)
-- tints (light overlays): var(--tint1-t) ... var(--tint10-t)
-
-states
-- focus ring: var(--selected-t) with contrast ring var(--g1-t)
-- error/warning/success: var(--error-t), var(--warning-t), var(--success-t)
-
-examples
-- text color: color: var(--g6-t);
-- surface: background: var(--bg2);
-- border: box-shadow: inset 0 0 0 1px var(--shadow7-t);
-- primary button: background: var(--primary-t); color: var(--primary-contrast-t);
-- translucent primary: background: var(--primary-transparent1-t);
-
-dark theme
-- dark theme is activated with [data-theme="dark"] on a parent element.
-- in dark theme, the -t lightness ramp is inverted so your chosen step numbers still "mean" the same thing (lower = darker surface, higher = brighter surface), without rewriting styles.
-`
-
-  let content_manager = create_content_manager({
-    val: {
-      type_id: "div",
-      children: [
-        {
-          type_id: "h1",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: { content: "Welcome to Sveltekit-UI", text_color: null },
-              selector_id: "bbnzrnzw",
-            },
-          ],
-          attributes: null,
-          selector_id: "pbteeefl",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "link",
-              children: [
-                {
-                  type_id: "base_text",
-                  children: [],
-                  attributes: { content: "View on npm", text_color: null },
-                  selector_id: "blkoesdt",
-                },
-              ],
-              attributes: {
-                href: "https://www.npmjs.com/package/sveltekit-ui",
-                display_text: "View on npm",
-                text_color: null,
-                is_show_preview: null,
-              },
-              selector_id: "ubywmlua",
-            },
-          ],
-          attributes: null,
-          selector_id: "eqmjdjek",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: { content: "Install using: ", text_color: null },
-              selector_id: "dfbrrcxs",
-            },
-            {
-              type_id: "code_inline",
-              children: [],
-              attributes: { content: "npm i sveltekit-ui" },
-              selector_id: "wzxmkjdq",
-            },
-          ],
-          attributes: null,
-          selector_id: "hqknvvyg",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: { content: "Quick start with our recommended starter template:", text_color: null },
-              selector_id: "nkrvpazw",
-            },
-            {
-              type_id: "code_inline",
-              children: [],
-              attributes: { content: "npx create-sveltekit-ui-site my-project" },
-              selector_id: "fvxsjfnx",
-            },
-          ],
-          attributes: null,
-          selector_id: "ooilajut",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: {
-                content:
-                  "Our components use Svelte 5 and are primarily built in JavaScript. This architecture gives you complete control over your component tree via a single parent object, which you can pass down through your HTML components as needed.",
-                text_color: null,
-              },
-              selector_id: "wfysglbt",
-            },
-          ],
-          attributes: null,
-          selector_id: "inasxfam",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: {
-                content:
-                  "As of late 2025 the components are in pretty good shape and likely won't have many extreme changes, though, we are constantly improving the package as things come up.",
-                text_color: null,
-              },
-              selector_id: "padlkhfq",
-            },
-          ],
-          attributes: null,
-          selector_id: "nvyunqlk",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: { content: "For easier building, check out the ", text_color: null },
-              selector_id: "upxajwlo",
-            },
-            {
-              type_id: "link",
-              children: [
-                {
-                  type_id: "base_text",
-                  children: [],
-                  attributes: { content: "contibase quick-start guide", text_color: null },
-                  selector_id: "dwwoaka",
-                },
-              ],
-              attributes: {
-                href: "https://www.contibase.com/blog/quick-start-guide",
-                display_text: "contibase quick-start guide",
-                text_color: null,
-                is_show_preview: null,
-              },
-              selector_id: "cbmddeuw",
-            },
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: { content: "or the ", text_color: null },
-              selector_id: "upxaddo",
-            },
-            {
-              type_id: "link",
-              children: [
-                {
-                  type_id: "base_text",
-                  children: [],
-                  attributes: { content: "contibase code generator", text_color: null },
-                  selector_id: "gfxhzqfl",
-                },
-              ],
-              attributes: {
-                href: "https://www.contibase.com/code_generator",
-                display_text: "contibase code generator",
-                text_color: null,
-                is_show_preview: null,
-              },
-              selector_id: "cbmfgeuw",
-            },
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: {
-                content: ". Contibase is also highly compatible with sveltekit-ui and is a great companion project.",
-                text_color: null,
-              },
-              selector_id: "jygcousk",
-            },
-          ],
-          attributes: null,
-          selector_id: "tdiisewe",
-        },
-        {
-          type_id: "h2",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: { content: "Sample Usage", text_color: null },
-              selector_id: "rlhqrfgt",
-            },
-          ],
-          attributes: null,
-          selector_id: "zxmfiiet",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: {
-                content:
-                  "A clean setup is to make a Components folder and when you make a component put the create_some_example_manager() in a +index.svelte.js file and put the HTML/CSS in an index.svelte file.",
-                text_color: null,
-              },
-              selector_id: "kkjdnhgf",
-            },
-          ],
-          attributes: null,
-          selector_id: "amkqaomx",
-        },
-        {
-          type_id: "code",
-          children: [],
-          attributes: {
-            content: docs_overview_code_sample,
-            language: "svelte",
-          },
-          selector_id: "tqjlpmsi",
-        },
-        {
-          type_id: "p",
-          children: [
-            {
-              type_id: "base_text",
-              children: [],
-              attributes: {
-                content: "Explore the documentation to learn more about each component and for further usage examples.",
-                text_color: null,
-              },
-              selector_id: "gsqceimv",
-            },
-          ],
-          attributes: null,
-          selector_id: "amkvgomx",
-        },
-      ],
-      attributes: {
-        background_color: null,
-        border_color: null,
-        border_radius: null,
-        padding: null,
-        align_content: null,
-        justify_content: null,
-      },
-      selector_id: "nguqpvmf",
-    },
-  })
-
-  const overview = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file.
-      
-${docs_overview_code_sample}
-
-${colors_section}
-
-below are the docs for each component individually
-
-`
-
-  let docs_prepped = {}
-  for (let [key, definition] of Object.entries(definitions)) {
-    let sample_code = docs_definition_to_sample_code(definition)
-    docs_prepped[key] = {
-      ...definition,
-      sample_code: sample_code,
-    }
-  }
-  const all_docs = overview + JSON.stringify(docs_prepped)
-
-  let button_manager = create_button_manager({
-    text: "Visit Docs",
-    mt: 2,
-    support_icon: "arrow_tailed",
-    href: "/components/button",
-  })
-
-  let copy_all_docs_button_manager = create_button_manager({
-    type: "outlined",
-    text: "Copy All Docs",
-    is_compressed: true,
-    is_success_animation: true,
-    mt: 2,
-    support_icon: "clipboard",
-    on_click: () => copy_to_clipboard(all_docs),
-  })
-
-  let youtube_video_manager = create_youtube_video_manager({
-    video_id: "Ic_FgSQYdj8",
-  })
-</script>
-
-<div class="container">
-  <div>
-    <YoutubeVideo manager={youtube_video_manager} />
-  </div>
-  <Content manager={content_manager} />
-  <Button manager={button_manager} />
-  <Button manager={copy_all_docs_button_manager} />
-  <div style="max-height: 30rem; overflow: scroll;">
-    <h3>All Docs</h3>
-    {all_docs}
-  </div>
-</div>
-
-<style>
-  .container {
-    margin: auto;
-    padding: 0 2rem 10rem 2rem;
-    width: clamp(20rem, 100%, 70rem);
-  }
-</style>