@turnipxenon/pineapple 4.5.1 → 5.0.0-alpha.10

package/dist/ui/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/ui/components/randomized-background/RandomizedBackground.svelte

@@ -1,3 +1,7 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- TODO: add suspend? load images first before showing them up slowly? -->
+
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
@@ -9,7 +13,7 @@
 	import BgTiledTurnip from '../../../assets/bg_tiled/bg_tiled_turnip.png';
 	import RandomizedImage from './RandomizedImage.svelte';
 	import { generatedDailySeed, mulberry32Generator } from '../../../util/util';
-	import { appState } from "../../templates/PinyaPageLayout/runes.svelte";
+	import { appState } from "../../templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.js";
 
 	let { enabled }: {
 		enabled: boolean

package/dist/ui/components/randomized-background/RandomizedBackground.svelte.d.ts

@@ -4,3 +4,4 @@ type $$ComponentProps = {
 declare const RandomizedBackground: import("svelte").Component<$$ComponentProps, {}, "">;
 type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
 export default RandomizedBackground;
+//# sourceMappingURL=RandomizedBackground.svelte.d.ts.map

package/dist/ui/components/randomized-background/RandomizedBackground.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RandomizedBackground.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/randomized-background/RandomizedBackground.svelte.ts"],"names":[],"mappings":"AAeC,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAA;CAChB,CAAC;AA8EH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/ui/components/randomized-background/RandomizedImage.svelte

@@ -1,3 +1,5 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
 	let {
 		src,
@@ -31,8 +33,9 @@
     }
 
     img {
-        width: 8rem;
-        height: 8rem;
+		    --randomized-image-size: min(10vw, 10vh);
+        width: var(--randomized-image-size);
+        height: var(--randomized-image-size);
         transform: rotate(var(--rotateRandom));
     }
 

package/dist/ui/components/randomized-background/RandomizedImage.svelte.d.ts

@@ -5,3 +5,4 @@ type $$ComponentProps = {
 declare const RandomizedImage: import("svelte").Component<$$ComponentProps, {}, "">;
 type RandomizedImage = ReturnType<typeof RandomizedImage>;
 export default RandomizedImage;
+//# sourceMappingURL=RandomizedImage.svelte.d.ts.map

package/dist/ui/components/randomized-background/RandomizedImage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RandomizedImage.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/randomized-background/RandomizedImage.svelte.ts"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,MAAM,CAAA;CACjB,CAAC;AAyBH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ui/components/randomized-background/getSocialSection.remote.d.ts

@@ -0,0 +1,3 @@
+import type { RevealInfoRemoteQuery } from "../../../components/reveal-info/RevealInfoRemoteQuery";
+export declare const getSocialSectionRemote: RevealInfoRemoteQuery;
+//# sourceMappingURL=getSocialSection.remote.d.ts.map

package/dist/ui/components/randomized-background/getSocialSection.remote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSocialSection.remote.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/randomized-background/getSocialSection.remote.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAC;AAE/F,eAAO,MAAM,sBAAsB,EAAE,qBAKpC,CAAC"}

package/dist/ui/components/randomized-background/getSocialSection.remote.js

@@ -0,0 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { query } from "$app/server";
+export const getSocialSectionRemote = {
+    type: "void",
+    run: query(() => __awaiter(void 0, void 0, void 0, function* () {
+        return "";
+    })),
+};

package/dist/ui/components/socialSectionRemote.remote.d.ts

@@ -0,0 +1,3 @@
+export declare const getDefaultEmail: import("@sveltejs/kit").RemoteQueryFunction<void, string>;
+export declare const getDefaultLinkedin: import("@sveltejs/kit").RemoteQueryFunction<void, string>;
+//# sourceMappingURL=socialSectionRemote.remote.d.ts.map

package/dist/ui/components/socialSectionRemote.remote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"socialSectionRemote.remote.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/socialSectionRemote.remote.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,2DAAuC,CAAC;AACpE,eAAO,MAAM,kBAAkB,2DAAwB,CAAC"}

package/dist/ui/components/socialSectionRemote.remote.js

@@ -0,0 +1,3 @@
+import { query } from "$app/server";
+export const getDefaultEmail = query(() => "turnipxenon@gmail.com");
+export const getDefaultLinkedin = query(() => "turnip");

package/dist/ui/elements/CodeBlock/CodeBlock.svelte

@@ -1,6 +1,6 @@
 <!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
 
-<script module>
+<script module lang="ts">
 	import { addCopyButton } from "shiki-transformer-copy-button";
 	import { createHighlighterCoreSync } from "shiki/core";
 	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
@@ -17,6 +17,7 @@
 	import ts from "shiki/langs/typescript.mjs";
 	import markdown from "shiki/langs/markdown.mjs";
 	import xml from "shiki/langs/xml.mjs";
+	import svelte from "shiki/langs/svelte.mjs";
 
 	// https://shiki.style/guide/sync-usage
 	const shiki = createHighlighterCoreSync({
@@ -24,7 +25,7 @@
 		// Implement your import theme.
 		themes: [themeLight, themeDark],
 		// Implement your imported and supported languages.
-		langs: [console, html, css, js, ts, markdown, xml]
+		langs: [console, html, css, js, ts, markdown, xml, svelte]
 	});
 </script>
 
@@ -59,8 +60,20 @@
 </script>
 
 <div
-	class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
+	class="pinya-code-block {base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
 >
 	<!-- Output Shiki's Generated HTML -->
 	{@html generatedHtml}
-</div>
+</div>
+
+<style>
+	:global {
+			.pinya-code-block {
+					margin-bottom: 1rlh;
+			}
+
+			h2 + .pinya-code-block {
+					margin-top: 0.5rlh;
+			}
+	}
+</style>

package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts

@@ -3,3 +3,4 @@ import type { CodeBlockProps } from "./CodeBlockProps";
 declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
 type CodeBlock = ReturnType<typeof CodeBlock>;
 export default CodeBlock;
+//# sourceMappingURL=CodeBlock.svelte.d.ts.map

package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/CodeBlock/CodeBlock.svelte.ts"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA6CvD,kHAAkH;AAClH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts

@@ -1,11 +1,21 @@
 export interface CodeBlockProps {
+    /** Code string to render inside the block. */
     code?: string;
-    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown' | 'xml';
+    /** Highlighting language key. */
+    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown' | 'xml' | 'svelte';
+    /** Base wrapper classes. */
     base?: string;
+    /** Wrapper rounding classes. */
     rounded?: string;
+    /** Wrapper shadow classes. */
     shadow?: string;
+    /** Additional wrapper classes. */
     classes?: string;
+    /** Base classes applied to the nested pre element. */
     preBase?: string;
+    /** Padding classes applied to the nested pre element. */
     prePadding?: string;
+    /** Additional classes applied to the nested pre element. */
     preClasses?: string;
 }
+//# sourceMappingURL=CodeBlockProps.d.ts.map

package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/CodeBlock/CodeBlockProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,UAAU,GAAG,KAAK,GAAG,QAAQ,CAAC;IAEhF,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/ui/elements/CodeBlock/index.d.ts

@@ -1,2 +1,3 @@
 export { default as CodeBlock } from "./CodeBlock.svelte";
 export * from "./CodeBlockProps";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/elements/CodeBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/CodeBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,cAAc,kBAAkB,CAAC"}

package/dist/ui/elements/ColorScheme.d.ts

@@ -1,10 +1,11 @@
 export declare enum ColorScheme {
-    Primary = 0,
-    Secondary = 1,
-    Tertiary = 2,
-    Success = 3,
-    Warning = 4,
-    Error = 5,
-    Surface = 6,
-    Custom = 7
+    Primary = "primary",
+    Secondary = "secondary",
+    Tertiary = "tertiary",
+    Success = "success",
+    Warning = "warning",
+    Error = "error",
+    Surface = "surface",
+    Custom = "custom"
 }
+//# sourceMappingURL=ColorScheme.d.ts.map

package/dist/ui/elements/ColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/ColorScheme.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACtB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,MAAM,WAAY;CAClB"}

package/dist/ui/elements/ColorScheme.js

@@ -1,11 +1,11 @@
 export var ColorScheme;
 (function (ColorScheme) {
-    ColorScheme[ColorScheme["Primary"] = 0] = "Primary";
-    ColorScheme[ColorScheme["Secondary"] = 1] = "Secondary";
-    ColorScheme[ColorScheme["Tertiary"] = 2] = "Tertiary";
-    ColorScheme[ColorScheme["Success"] = 3] = "Success";
-    ColorScheme[ColorScheme["Warning"] = 4] = "Warning";
-    ColorScheme[ColorScheme["Error"] = 5] = "Error";
-    ColorScheme[ColorScheme["Surface"] = 6] = "Surface";
-    ColorScheme[ColorScheme["Custom"] = 7] = "Custom";
+    ColorScheme["Primary"] = "primary";
+    ColorScheme["Secondary"] = "secondary";
+    ColorScheme["Tertiary"] = "tertiary";
+    ColorScheme["Success"] = "success";
+    ColorScheme["Warning"] = "warning";
+    ColorScheme["Error"] = "error";
+    ColorScheme["Surface"] = "surface";
+    ColorScheme["Custom"] = "custom";
 })(ColorScheme || (ColorScheme = {}));

package/dist/ui/elements/ElementVisibilityDetector.svelte

@@ -1,28 +1,35 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
 	import { onMount, type Snippet } from "svelte";
 
-    interface Props {
-        isVisible?: boolean;
-        children?: Snippet;
-    }
+	interface Props {
+		isVisible?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		isVisible = $bindable(true),
+		children
+	}: Props = $props();
 
-    let {
-			isVisible = $bindable(true),
-	    children
-		}: Props = $props();
+	let stickyElem: HTMLElement | undefined = $state();
 
-    let stickyElem: HTMLElement = $state();
+	let observer: undefined | IntersectionObserver;
+	onMount(() => {
+		if (!stickyElem) {
+			console.warn("ElementVisibilityDetector: stickyElem is undefined, cannot observe visibility");
+			return;
+		}
 
-    let observer: undefined | IntersectionObserver;
-    onMount(() => {
-        observer = new IntersectionObserver(
-            ([e]) => {
-                isVisible = e.intersectionRatio >= 1;
-            },
-            {threshold: [1]}
-        );
-        observer.observe(stickyElem);
-    });
+		observer = new IntersectionObserver(
+			([e]) => {
+				isVisible = e.intersectionRatio >= 1;
+			},
+			{ threshold: [1] }
+		);
+		observer.observe(stickyElem);
+	});
 </script>
 
 <span bind:this={stickyElem}>

package/dist/ui/elements/ElementVisibilityDetector.svelte.d.ts

@@ -6,3 +6,4 @@ interface Props {
 declare const ElementVisibilityDetector: import("svelte").Component<Props, {}, "isVisible">;
 type ElementVisibilityDetector = ReturnType<typeof ElementVisibilityDetector>;
 export default ElementVisibilityDetector;
+//# sourceMappingURL=ElementVisibilityDetector.svelte.d.ts.map

package/dist/ui/elements/ElementVisibilityDetector.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementVisibilityDetector.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/ElementVisibilityDetector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAG9C,UAAU,KAAK;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAqCF,QAAA,MAAM,yBAAyB,oDAAwC,CAAC;AACxE,KAAK,yBAAyB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAC9E,eAAe,yBAAyB,CAAC"}

package/dist/ui/elements/GeneralUIProps.d.ts

@@ -10,3 +10,4 @@ export interface GeneralUIProps {
      */
     onBackground?: OnBackground;
 }
+//# sourceMappingURL=GeneralUIProps.d.ts.map

package/dist/ui/elements/GeneralUIProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralUIProps.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/GeneralUIProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,cAAc;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B"}

package/dist/ui/elements/ImageIcon.svelte

@@ -1,3 +1,9 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @component ImageIcon
+ todo: consider current-surface scss
+ -->
+
 <script lang="ts">
 	import type { HTMLImgAttributes } from 'svelte/elements';
 	import type { GeneralUIProps } from "./GeneralUIProps";
@@ -51,4 +57,4 @@
             filter: brightness(0) saturate(100%) invert(85%) sepia(3%) saturate(993%) hue-rotate(326deg) brightness(113%) contrast(105%);
         }
     }
-</style>
+</style>

package/dist/ui/elements/ImageIcon.svelte.d.ts

@@ -1,6 +1,11 @@
 import type { HTMLImgAttributes } from 'svelte/elements';
 import type { GeneralUIProps } from "./GeneralUIProps";
 type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
+/**
+ * ImageIcon
+ * todo: consider current-surface scss
+ */
 declare const ImageIcon: import("svelte").Component<PinyaButtonProps, {}, "">;
 type ImageIcon = ReturnType<typeof ImageIcon>;
 export default ImageIcon;
+//# sourceMappingURL=ImageIcon.svelte.d.ts.map

package/dist/ui/elements/ImageIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/ImageIcon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAIrE,KAAK,gBAAgB,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAuC5D;;;GAGG;AACH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ui/elements/OnBackground.d.ts

@@ -1,3 +1,4 @@
 export declare enum OnBackground {
     SurfaceCard = 0
 }
+//# sourceMappingURL=OnBackground.d.ts.map

package/dist/ui/elements/OnBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnBackground.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/OnBackground.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACvB,WAAW,IAAA;CACX"}

package/dist/ui/elements/PineappleSwitch.svelte

@@ -1,11 +1,12 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
-	import { Switch } from "@skeletonlabs/skeleton-svelte";
 	import type { Snippet } from "svelte";
 
 	interface Props {
 		checked?: boolean;
 		name: string;
-		onChange?: (() => void);
+		onChange?: ((val: boolean) => void);
 		children?: Snippet;
 	}
 
@@ -15,15 +16,81 @@
 		onChange = undefined,
 		children = undefined
 	}: Props = $props();
+
+	const _onChange = () => {
+		onChange?.(checked);
+	};
 </script>
 
-<Switch name={name}
-        controlActive="bg-secondary-400 dark:bg-secondary-500"
-        controlInactive="bg-surface-700 dark:bg-surface-800"
-        checked={checked}
-        onCheckedChange={(e) => {
-					checked = e.checked;
-					onChange?.();
-        }}>
+<!--
+Source - https://stackoverflow.com/a/79274945
+Posted by Naeem Akhtar
+Retrieved 2026-01-26, License - CC BY-SA 4.0
+-->
+<label class="pinya-toggle toggle">
+	<input type="checkbox" bind:checked={checked} {name} onchange={_onChange} />
+	<span class="slider"></span>
 	{@render children?.()}
-</Switch>
+</label>
+
+<style>
+    :root {
+        --pinya-toggle-radius: 0.8lh;
+        --pinya-toggle-margin: 0.2lh;
+    }
+
+    :global {
+        .pinya-toggle {
+            --inactive-toggle-bg: var(--color-surface-800);
+            --active-toggle-bg: var(--color-secondary-400);
+        }
+
+        .dark .pinya-toggle {
+            --inactive-toggle-bg: var(--color-surface-700);
+            --active-toggle-bg: var(--color-secondary-500);
+        }
+    }
+
+    .toggle {
+        position: relative;
+        display: inline-block;
+        width: calc((var(--pinya-toggle-radius) + var(--pinya-toggle-margin)) * 2);
+        height: calc(var(--pinya-toggle-radius) + (var(--pinya-toggle-margin) * 2));
+    }
+
+    .toggle input {
+        display: none;
+    }
+
+    .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--inactive-toggle-bg);
+        transition: 0.4s;
+        border-radius: calc(var(--pinya-toggle-radius) + (var(--pinya-toggle-margin) * 2));
+    }
+
+    .slider:before {
+        position: absolute;
+        content: "";
+        height: var(--pinya-toggle-radius);
+        width: var(--pinya-toggle-radius);
+        left: var(--pinya-toggle-margin);
+        bottom: var(--pinya-toggle-margin);
+        background-color: #FFF;
+        transition: 0.4s;
+        border-radius: 50%;
+    }
+
+    input:checked + .slider {
+        background-color: var(--active-toggle-bg);
+    }
+
+    input:checked + .slider:before {
+        transform: translateX(var(--pinya-toggle-radius));
+    }
+</style>

package/dist/ui/elements/PineappleSwitch.svelte.d.ts

@@ -2,9 +2,10 @@ import type { Snippet } from "svelte";
 interface Props {
     checked?: boolean;
     name: string;
-    onChange?: (() => void);
+    onChange?: ((val: boolean) => void);
     children?: Snippet;
 }
 declare const PineappleSwitch: import("svelte").Component<Props, {}, "checked">;
 type PineappleSwitch = ReturnType<typeof PineappleSwitch>;
 export default PineappleSwitch;
+//# sourceMappingURL=PineappleSwitch.svelte.d.ts.map

package/dist/ui/elements/PineappleSwitch.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PineappleSwitch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/PineappleSwitch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA8BF,QAAA,MAAM,eAAe,kDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte

@@ -1,3 +1,9 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @component PinyaAnchorButton
+ todo: consider current-surface scss and tailwind cleanup
+ -->
+
 <script lang="ts">
 	import { ColorScheme } from "../ColorScheme";
 	import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
@@ -19,7 +25,7 @@
 
 <a
 	{...props}
-	class={`a-as-btn ${tailwindClass}}`}
+	class={`a-as-btn ${tailwindClass}`}
 >
 	{@render children()}
-</a>
+</a>

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts

@@ -1,4 +1,9 @@
 import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
+/**
+ * PinyaAnchorButton
+ * todo: consider current-surface scss and tailwind cleanup
+ */
 declare const PinyaAnchorButton: import("svelte").Component<PinyaAnchorButtonProps, {}, "">;
 type PinyaAnchorButton = ReturnType<typeof PinyaAnchorButton>;
 export default PinyaAnchorButton;
+//# sourceMappingURL=PinyaAnchorButton.svelte.d.ts.map

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaAnchorButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AA+BvE;;;GAGG;AACH,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.d.ts

@@ -2,3 +2,4 @@ import type { HTMLAnchorAttributes } from "svelte/elements";
 import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
 import type { WrapperProps } from "../index";
 export type PinyaAnchorButtonProps = WrapperProps & HTMLAnchorAttributes & PinyaButtonCommonProps;
+//# sourceMappingURL=PinyaAnchorButtonProps.d.ts.map

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaAnchorButtonProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAC9C,oBAAoB,GACpB,sBAAsB,CAAC"}

package/dist/ui/elements/PinyaAnchorButton/index.d.ts

@@ -1,2 +1,3 @@
 export { default as PinyaAnchorButton } from "./PinyaAnchorButton.svelte";
 export * from "./PinyaAnchorButtonProps";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/elements/PinyaAnchorButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaAnchorButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,cAAc,0BAA0B,CAAC"}

package/dist/ui/elements/PinyaButton/PinyaButton.svelte

@@ -1,8 +1,10 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
-	import { type PinyaButtonProps } from "./PinyaButtonProps";
 	import { ColorScheme } from "../ColorScheme";
 	import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
 	import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
+	import { type PinyaButtonProps } from "./PinyaButtonProps";
 
 	let {
 		children,
@@ -19,7 +21,51 @@
 
 <button
 	{...props}
-	class={tailwindClass}
+	class={`pinya-button ${props.class ?? ''} ${tailwindClass}`}
 >
 	{@render children()}
-</button>
+</button>
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+:global .btn {
+  --current-surface-color: var(--color-primary-400-600);
+  --current-surface-contrast: var(--color-secondary-950-0);
+  background-color: var(--current-surface-color);
+  color: var(--current-surface-contrast);
+  --link-color: var(--color-secondary-400);
+  --visited-link-color: var(--color-secondary-900);
+  --link-color-dark: var(--color-secondary-600);
+  --visited-link-color-dark: var(--color-secondary-800);
+}
+
+:global .btn.secondary {
+  --current-surface-color: var(--color-secondary-400-600);
+  --current-surface-contrast: var(--color-secondary-950-0);
+  background-color: var(--current-surface-color);
+  color: var(--current-surface-contrast);
+  --link-color: var(--color-secondary-400);
+  --visited-link-color: var(--color-secondary-900);
+  --link-color-dark: var(--color-secondary-200);
+  --visited-link-color-dark: var(--color-secondary-300);
+}
+
+:global .btn {
+  padding-block: var(--spacing-1);
+}
+:global .btn.image-button {
+  padding: var(--spacing-2) var(--spacing-3);
+}
+:global .btn:hover {
+  filter: brightness(110%);
+}
+:global .btn.warning {
+  color: var(--color-secondary-0-950);
+  background-color: var(--color-warning-700-400);
+}
+:global .btn.surface {
+  background-color: var(--color-surface-700-600);
+  color: var(--color-surface-50-950);
+}</style>

package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts

@@ -2,3 +2,4 @@ import { type PinyaButtonProps } from "./PinyaButtonProps";
 declare const PinyaButton: import("svelte").Component<PinyaButtonProps, {}, "">;
 type PinyaButton = ReturnType<typeof PinyaButton>;
 export default PinyaButton;
+//# sourceMappingURL=PinyaButton.svelte.d.ts.map

package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButton/PinyaButton.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AA+B3D,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ui/elements/PinyaButton/PinyaButtonProps.d.ts

@@ -2,3 +2,4 @@ import type { HTMLButtonAttributes } from "svelte/elements";
 import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
 import type { WrapperProps } from "../index";
 export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & PinyaButtonCommonProps;
+//# sourceMappingURL=PinyaButtonProps.d.ts.map

package/dist/ui/elements/PinyaButton/PinyaButtonProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaButtonProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButton/PinyaButtonProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AAC1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG,YAAY,GACxC,oBAAoB,GACpB,sBAAsB,CAAC"}

package/dist/ui/elements/PinyaButton/index.d.ts

@@ -1,2 +1,3 @@
 export { default as PinyaButton } from './PinyaButton.svelte';
 export * from './PinyaButtonProps';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/elements/PinyaButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,cAAc,oBAAoB,CAAC"}