sveltekit-ui 1.1.73 → 1.1.75

package/.vercel/output/functions/![-]/catchall.func/.svelte-kit/output/server/entries/pages/_page.svelte.js

@@ -1,345 +0,0 @@
-import { C as escape_html } from "../../chunks/server.js";
-import { r as Button, t as create_button_manager } from "../../chunks/index.svelte.js";
-import { a as copy_to_clipboard } from "../../chunks/client2.js";
-import { J as YoutubeVideo, O as Content, i as create_content_manager, n as docs_definition_to_sample_code, r as docs_overview_code_sample, s as create_youtube_video_manager, t as definitions } from "../../chunks/docs.js";
-//#region src/routes/+page.svelte
-function _page($$renderer, $$props) {
-	$$renderer.component(($$renderer) => {
-		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
-			};
-		}
-		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" });
-		$$renderer.push(`<div class="container svelte-1uha8ag"><div>`);
-		YoutubeVideo($$renderer, { manager: youtube_video_manager });
-		$$renderer.push(`<!----></div> `);
-		Content($$renderer, { manager: content_manager });
-		$$renderer.push(`<!----> `);
-		Button($$renderer, { manager: button_manager });
-		$$renderer.push(`<!----> `);
-		Button($$renderer, { manager: copy_all_docs_button_manager });
-		$$renderer.push(`<!----> <div style="max-height: 30rem; overflow: scroll;"><h3>All Docs</h3> ${escape_html(all_docs)}</div></div>`);
-	});
-}
-//#endregion
-export { _page as default };