sveltekit-ui 1.0.0 → 1.0.3

package/README.md

@@ -1,23 +1,45 @@
-## create a svelte project
+## Setup
 
-If you havent created one use `npx create-upppllc-site my-app`
+Refer to https://www.sveltekit-ui.com. for documentation
 
-## install sveltekit-ui
+You can use an existing sveltekit project and install this package in your project with
+`npm install sveltekit-ui`
 
-If you're seeing this, you've probably already done this step. Congrats!
+or to start a new project with a starter template (recommended). In your terminal cd into a folder you want to put your project files in such as /projects/my-project-all to use as the parent folder for stuff related to your project (but replace "my-project" with your own project name)
 
-```bash
-# create a new project in the current directory
-npm install @upppllc/sveltekit-ui
-```
+wait until july 1st for this part create-sveltekit-ui-site
+
+`npx create-sveltekit-ui-site my-project`
+
+## Open Code Editor
+
+`code .` should open the project in your code editor such as vscode
+
+## Update Package
+
+It's possible the starter template is a few updates behind. Check for updates by running `ncu -u`. You should run that periodically to keep the latest version of our components
 
 ## Developing
 
 Once you've created a project and installed dependencies start a development server:
 
 ```bash
+npm i
 npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
 ```
+
+## Browser
+
+That should spit out a url like http://localhost:5173/ where you should see your starting website.
+
+## Branding
+
+You'll want to create a Logo at some point and use that in the nav bar, browser tab, google search results, etc. If you can make an svg that is best but an image will work as well. If you are advanced I like https://affinity.serif.com/en-us/designer/ for macbook to make my logos and other graphics. It has a generous free trial period too.
+
+I like https://jakearchibald.github.io/svgomg/ to minify svg code and set to viewbox etc. Then you can generate favicons with https://realfavicongenerator.net
+
+download the favicons and drop them in the folder called static and overwrite the existing example ones. You dont need favicon.ico. Also add favicon.svg and favicon-inactive.svg if you want to show different icon when the browser tab is inactive (not at all a priority though)
+
+## Other
+
+Ask an ai for help if you have issues in your setup process.

package/dist/client/docs/index.js

@@ -7553,7 +7553,7 @@ export const docs_overview_code_sample = `<script>
     create_text_input_manager,
     TextInput,
     copy_to_clipboard,
-  } from "@upppllc/sveltekit-ui"
+  } from "sveltekit-ui"
 
   let manager = $state(null)
 
@@ -7596,12 +7596,12 @@ export const docs_overview_code_sample = `<script>
 export function docs_definition_to_sample_code(definition) {
   return definition?.is_not_builder
     ? `<script>
-import { ${definition?.component_name} } from "@upppllc/sveltekit-ui"
+import { ${definition?.component_name} } from "sveltekit-ui"
 <\/script>
 
 <${definition?.component_name} some_property="example" />`
     : `<script>
-import { ${definition?.builder_function_name}, ${definition?.component_name} } from "@upppllc/sveltekit-ui"
+import { ${definition?.builder_function_name}, ${definition?.component_name} } from "sveltekit-ui"
 
 let example_${definition?.builder_function_name?.slice(7)} = ${definition?.builder_function_name}({
   some_config_property: "example"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
     "qr-code-styling": "^1.9.2",
-    "svelte": "^5.34.9"
+    "svelte": "^5.35.2"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.22.2"
@@ -31,7 +31,7 @@
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@vercel/analytics": "^1.5.0",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5"
+    "vite": "^7.0.1"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [

package/src/lib/client/docs/index.js

@@ -7553,7 +7553,7 @@ export const docs_overview_code_sample = `<script>
     create_text_input_manager,
     TextInput,
     copy_to_clipboard,
-  } from "@upppllc/sveltekit-ui"
+  } from "sveltekit-ui"
 
   let manager = $state(null)
 
@@ -7596,12 +7596,12 @@ export const docs_overview_code_sample = `<script>
 export function docs_definition_to_sample_code(definition) {
   return definition?.is_not_builder
     ? `<script>
-import { ${definition?.component_name} } from "@upppllc/sveltekit-ui"
+import { ${definition?.component_name} } from "sveltekit-ui"
 <\/script>
 
 <${definition?.component_name} some_property="example" />`
     : `<script>
-import { ${definition?.builder_function_name}, ${definition?.component_name} } from "@upppllc/sveltekit-ui"
+import { ${definition?.builder_function_name}, ${definition?.component_name} } from "sveltekit-ui"
 
 let example_${definition?.builder_function_name?.slice(7)} = ${definition?.builder_function_name}({
   some_config_property: "example"

package/src/routes/+layout.svelte

@@ -1,6 +1,5 @@
 <script>
   import "$lib/style.css"
-  import Logo from "../notlib/assets/static/Logo/index.svelte"
   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"
@@ -47,7 +46,7 @@
     { name: "Cron Input", key: "cron_input" },
     { name: "Dropdown", key: "dropdown" },
     { name: "File Input", key: "file_input" },
-    { name: "Function Input", key: "function_input" },
+    // { name: "Function Input", key: "function_input" },
     { name: "Icon", key: "icon" },
     { name: "Icon Input", key: "icon_input" },
     { name: "Image", key: "image" },
@@ -104,10 +103,14 @@
 
 <Layout manager={layout_manager}>
   {#snippet nav_bar_logo()}
-    <Logo />
+    <div class="container" style="--color1: var(--primary-t);">
+      <h1 class="logotext">Sveltekit-UI</h1>
+    </div>
   {/snippet}
   {#snippet app_nav_bar_logo()}
-    <Logo />
+    <div class="container" style="--color1: var(--primary-t);">
+      <h1 class="logotext">Sveltekit-UI</h1>
+    </div>
   {/snippet}
   {#snippet nav_bar_extra()}
     <div style="display: flex; align-iems: center; gap: .5rem;">
@@ -173,4 +176,21 @@
     font-weight: 100 1000;
     font-display: swap;
   }
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+  }
+  .logotext {
+    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,9 +1,9 @@
 <script>
   import Button from "$lib/Components/Button/index.svelte"
   import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-  import { goto } from "$app/navigation"
   import Code from "$lib/Components/Code/index.svelte"
   import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
+  import { goto } from "$app/navigation"
   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"
 
@@ -19,7 +19,7 @@
     content: docs_overview_code_sample,
   })
 
-  const overview_intro = `Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of docs should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file. For a .svelte page or custom component you might combine components in a way such as the following:`
+  const overview_intro = `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.`
 
   let copy_all_docs_button_manager = create_button_manager({
     type: "outlined",
@@ -51,16 +51,17 @@ below are the docs for each component individually
 </script>
 
 <div class="container">
-  <h1>Not currently available for public Use</h1>
+  <h1>Welcome to Sveltekit-UI</h1>
   <p>
-    As of January, 2025, I have been working on these components for a few years one by one. As a perfectionist I am
-    frequently making breaking changes.
+    Our components use svelte 5 runes. We have taken an approach where components are mostly built in javascript to
+    allow for control of your entire tree of components in one parent object that can then be passed down through all
+    HTML and CSS components
   </p>
   <p>
-    I have made some basic docs so far but currently still have the package set to private on npm but may release a
-    public version in the coming months or make it available to www.contibase.com users only. tbd.
+    After a lot of work these components are in a state that we are happy to release to the public and encourage people
+    to use. You can also go to <a href="https://www.contibase.com/code_generate">www.contibase.com/code_generate</a> to help
+    you build with sveltekit-ui. Contibase is also a very compatable project to use along side Sveltekit-UI.
   </p>
-  <p>{overview_intro}</p>
   <br />
   <Code manager={overview_sample_code_manager} />
   <p>Explore the docs for details on each individual component</p>
@@ -74,7 +75,7 @@ below are the docs for each component individually
 <style>
   .container {
     margin: auto;
-    padding: 2rem;
+    padding: 0 2rem 10rem 2rem;
     max-width: 60rem;
   }
   p {

package/src/notlib/assets/static/Logo/index.svelte

@@ -1,27 +0,0 @@
-<script>
-  let { color1 = "var(--primary-t)" } = $props()
-</script>
-
-<div class="container" style="--color1: {color1};">
-  <h1 class="logotext">Sveltekit-UI</h1>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-  }
-  .logotext {
-    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>