@turnipxenon/pineapple 3.0.0-alpha.9 → 3.1.0-alpha.1

package/dist/ui/components/ModalBase.svelte

@@ -1,75 +1,75 @@
-<script lang="ts">
-	import { scale } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
-
-	import type { ModalProps } from 'svelte-modals';
-
-	import { onMount, type Snippet } from 'svelte';
-	import { PinyaCard } from '../elements';
-
-	// https://svelte-modals.mattjennin.gs/modal-components/props/#typescript
-	interface ModalBaseProps extends ModalProps {
-		children: Snippet,
-	}
-
-	let {
-		children,
-		isOpen,
-		close
-	}: ModalBaseProps = $props();
-
-	let container: HTMLDivElement;
-	onMount(() => {
-		const focusableElement = container.querySelector('input, select, textarea, button, object, a, area[href], [tabindex]');
-		if (focusableElement) {
-			(focusableElement as HTMLElement).focus();
-		}
-
-		document.addEventListener('keydown', (e) => {
-			if (e.code === 'Escape') {
-				close();
-			}
-		});
-	});
-</script>
-
-{#if isOpen}
-	<dialog aria-modal="true" in:scale|global={{
-		start: 0.95,
-		duration: 750,
-		easing: elasticOut,
-		opacity: 0.9
-	}}>
-		<div class="interactable" bind:this={container}>
-			<PinyaCard
-				widthClass="max-w-xl2"
-				paddingClass="pl-8 pr-8 pt-4 pb-8"
-			>
-				{@render children?.()}
-			</PinyaCard>
-		</div>
-	</dialog>
-{/if}
-
-<style>
-    dialog {
-        padding: 0;
-        background-color: transparent;
-        border-color: transparent;
-        z-index: 20;
-        position: fixed;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        /* allow click-through to backdrop */
-        pointer-events: none;
-    }
-
-    .interactable {
-        pointer-events: auto;
-    }
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+
+	import type { ModalProps } from 'svelte-modals';
+
+	import { onMount, type Snippet } from 'svelte';
+	import { PinyaCard } from '../elements';
+
+	// https://svelte-modals.mattjennin.gs/modal-components/props/#typescript
+	interface ModalBaseProps extends ModalProps {
+		children: Snippet,
+	}
+
+	let {
+		children,
+		isOpen,
+		close
+	}: ModalBaseProps = $props();
+
+	let container: HTMLDivElement;
+	onMount(() => {
+		const focusableElement = container.querySelector('input, select, textarea, button, object, a, area[href], [tabindex]');
+		if (focusableElement) {
+			(focusableElement as HTMLElement).focus();
+		}
+
+		document.addEventListener('keydown', (e) => {
+			if (e.code === 'Escape') {
+				close();
+			}
+		});
+	});
+</script>
+
+{#if isOpen}
+	<dialog aria-modal="true" in:scale|global={{
+		start: 0.95,
+		duration: 750,
+		easing: elasticOut,
+		opacity: 0.9
+	}}>
+		<div class="interactable" bind:this={container}>
+			<PinyaCard
+				widthClass="max-w-xl2"
+				paddingClass="pl-8 pr-8 pt-4 pb-8"
+			>
+				{@render children?.()}
+			</PinyaCard>
+		</div>
+	</dialog>
+{/if}
+
+<style>
+    dialog {
+        padding: 0;
+        background-color: transparent;
+        border-color: transparent;
+        z-index: 20;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /* allow click-through to backdrop */
+        pointer-events: none;
+    }
+
+    .interactable {
+        pointer-events: auto;
+    }
 </style>

package/dist/ui/components/SocialSection.svelte

@@ -5,8 +5,9 @@
 	import MailIcon from "../../assets/icons/mail.svg";
 	import GithubIcon from "../../assets/icons/github-mark.svg";
 	import LinkedinIcon from "../../assets/icons/linkedin.svg";
-	import { ButtonVariant, ImageIcon, PinyaButton } from "../elements/index";
 	import { ItchLogoHotLink } from "../../consts";
+	import { ButtonVariant, PinyaButton } from "../elements/PinyaButton/index";
+	import ImageIcon from "../elements/ImageIcon.svelte";
 
 	/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
 	let {
@@ -63,7 +64,9 @@
 			<PinyaButton
 				buttonVariant={ButtonVariant.SmallIcon}
 				title="https://turnipxenon.itch.io/"
-				onclick={() => window.open("https://turnipxenon.itch.io/")}>
+				onclick={() => window.open("https://turnipxenon.itch.io/")}
+				classes="h-full"
+			>
 				<ImageIcon src={ItchLogoHotLink} alt="itch icon" />
 				{#if (!isSmallVersion)}
 					<span>TurnipXenon</span>
@@ -83,5 +86,6 @@
         flex-wrap: wrap;
         justify-content: var(--preferred-justify-content);
         gap: 0.7rem;
+		    align-items: stretch;
     }
 </style>

package/dist/ui/components/accordion/PinyaAccordion.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
-
-	let {
-		value = $bindable(),
-		children,
-	}: {
-		value: string[],
-		children: Snippet,
-	} = $props();
-</script>
-
-<Accordion
-	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
-	{value}
-	onValueChange={(e) => (value = e.value)}
-	collapsible
->
-	{@render children()}
+<script lang="ts">
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value = $bindable(),
+		children,
+	}: {
+		value: string[],
+		children: Snippet,
+	} = $props();
+</script>
+
+<Accordion
+	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
+	{value}
+	onValueChange={(e) => (value = e.value)}
+	collapsible
+>
+	{@render children()}
 </Accordion>

package/dist/ui/components/accordion/PinyaAccordionItem.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	// noinspection ES6UnusedImports
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
-
-	let {
-		value,
-		control: controlSnippet,
-		panel: panelSnippet,
-	}: {
-		value: string,
-		control: Snippet;
-		panel: Snippet;
-	} = $props();
-</script>
-
-<Accordion.Item
-	{value}
-	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
->
-	<!-- Control -->
-	{#snippet control()}
-		{@render controlSnippet()}
-	{/snippet}
-	<!-- Panel -->
-	{#snippet panel()}
-		{@render panelSnippet()}
-	{/snippet}
+<script lang="ts">
+	// noinspection ES6UnusedImports
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value,
+		control: controlSnippet,
+		panel: panelSnippet,
+	}: {
+		value: string,
+		control: Snippet;
+		panel: Snippet;
+	} = $props();
+</script>
+
+<Accordion.Item
+	{value}
+	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
+>
+	<!-- Control -->
+	{#snippet control()}
+		{@render controlSnippet()}
+	{/snippet}
+	<!-- Panel -->
+	{#snippet panel()}
+		{@render panelSnippet()}
+	{/snippet}
 </Accordion.Item>

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

@@ -1,65 +1,65 @@
-<!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
-
-<script module>
-	import { addCopyButton } from "shiki-transformer-copy-button";
-	import { createHighlighterCoreSync } from "shiki/core";
-	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-	// Themes
-	// https://shiki.style/themes
-	import themeLight from "shiki/themes/catppuccin-latte.mjs";
-	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
-	// Languages
-	// https://shiki.style/languages
-	import console from "shiki/langs/console.mjs";
-	import html from "shiki/langs/html.mjs";
-	import css from "shiki/langs/css.mjs";
-	import js from "shiki/langs/javascript.mjs";
-	import ts from "shiki/langs/typescript.mjs";
-	import markdown from "shiki/langs/markdown.mjs";
-
-	// https://shiki.style/guide/sync-usage
-	const shiki = createHighlighterCoreSync({
-		engine: createJavaScriptRegexEngine(),
-		// Implement your import theme.
-		themes: [themeLight, themeDark],
-		// Implement your imported and supported languages.
-		langs: [console, html, css, js, ts, markdown]
-	});
-</script>
-
-<script lang="ts">
-	import type { CodeBlockProps } from "./CodeBlockProps";
-
-	let {
-		code = "",
-		lang = "console",
-		// Base Style Props
-		base = " overflow-hidden",
-		rounded = "rounded-container",
-		shadow = "",
-		classes = "",
-		// Pre Style Props
-		preBase = "",
-		prePadding = "[&>pre]:p-4",
-		preClasses = ""
-	}: CodeBlockProps = $props();
-
-	// Shiki convert to HTML
-	const generatedHtml = $derived(shiki.codeToHtml(code, {
-		lang,
-		themes: {
-			light: "catppuccin-latte",
-			dark: "catppuccin-frappe"
-		},
-		transformers: [
-			addCopyButton({ toggle: 2000 })
-		]
-	}));
-</script>
-
-<div
-	class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
->
-	<!-- Output Shiki's Generated HTML -->
-	{@html generatedHtml}
+<!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
+
+<script module>
+	import { addCopyButton } from "shiki-transformer-copy-button";
+	import { createHighlighterCoreSync } from "shiki/core";
+	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+	// Themes
+	// https://shiki.style/themes
+	import themeLight from "shiki/themes/catppuccin-latte.mjs";
+	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
+	// Languages
+	// https://shiki.style/languages
+	import console from "shiki/langs/console.mjs";
+	import html from "shiki/langs/html.mjs";
+	import css from "shiki/langs/css.mjs";
+	import js from "shiki/langs/javascript.mjs";
+	import ts from "shiki/langs/typescript.mjs";
+	import markdown from "shiki/langs/markdown.mjs";
+
+	// https://shiki.style/guide/sync-usage
+	const shiki = createHighlighterCoreSync({
+		engine: createJavaScriptRegexEngine(),
+		// Implement your import theme.
+		themes: [themeLight, themeDark],
+		// Implement your imported and supported languages.
+		langs: [console, html, css, js, ts, markdown]
+	});
+</script>
+
+<script lang="ts">
+	import type { CodeBlockProps } from "./CodeBlockProps";
+
+	let {
+		code = "",
+		lang = "console",
+		// Base Style Props
+		base = " overflow-hidden",
+		rounded = "rounded-container",
+		shadow = "",
+		classes = "",
+		// Pre Style Props
+		preBase = "",
+		prePadding = "[&>pre]:p-4",
+		preClasses = ""
+	}: CodeBlockProps = $props();
+
+	// Shiki convert to HTML
+	const generatedHtml = $derived(shiki.codeToHtml(code, {
+		lang,
+		themes: {
+			light: "catppuccin-latte",
+			dark: "catppuccin-frappe"
+		},
+		transformers: [
+			addCopyButton({ toggle: 2000 })
+		]
+	}));
+</script>
+
+<div
+	class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
+>
+	<!-- Output Shiki's Generated HTML -->
+	{@html generatedHtml}
 </div>

package/dist/ui/elements/ImageIcon.svelte

@@ -1,54 +1,54 @@
-<script lang="ts">
-	import type { HTMLImgAttributes } from 'svelte/elements';
-	import type { GeneralUIProps } from './GeneralUIProps';
-	import { ColorScheme } from './ColorScheme';
-
-	type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
-
-	const {
-		colorScheme = ColorScheme.Primary,
-		...props
-	}: PinyaButtonProps = $props();
-
-	const chooseTailwindClass = () => {
-		switch (colorScheme) {
-			case ColorScheme.Warning:
-				return 'btn preset-filled-warning-600-400 text-surface-100 hover:brightness-110';
-			case ColorScheme.Surface:
-				return 'btn preset-filled-surface-800-200 text-surface-100-900 hover:brightness-110';
-			default:
-				console.error('Unimplemented color scheme');
-			// eslint-disable-next-line no-fallthrough
-			case ColorScheme.Primary:
-				return 'icon-filter-on-primary-button';
-		}
-	};
-
-	const tailwindClass = chooseTailwindClass();
-</script>
-
-<img
-	{...props}
-	class={`image-icon ${tailwindClass}`}>
-
-<style>
-		:global(.image-icon) {
-        height: calc(var(--spacing) * 8);
-		}
-
-		:global(.small-icon-button .image-icon) {
-        height: calc(var(--spacing) * 6);
-		}
-
-    :global(.icon-filter-on-primary-button) {
-				/* based on secondary-950 */
-        filter: brightness(0) saturate(100%) invert(18%) sepia(10%) saturate(4620%) hue-rotate(331deg) brightness(90%) contrast(88%);
-    }
-
-    @media (prefers-color-scheme: dark) {
-        :global(.icon-filter-on-primary-button) {
-						/* based on surface-0 */
-            filter: brightness(0) saturate(100%) invert(85%) sepia(3%) saturate(993%) hue-rotate(326deg) brightness(113%) contrast(105%);
-        }
-    }
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import type { GeneralUIProps } from './GeneralUIProps';
+	import { ColorScheme } from './ColorScheme';
+
+	type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
+
+	const {
+		colorScheme = ColorScheme.Primary,
+		...props
+	}: PinyaButtonProps = $props();
+
+	const chooseTailwindClass = () => {
+		switch (colorScheme) {
+			case ColorScheme.Warning:
+				return 'btn preset-filled-warning-600-400 text-surface-100 hover:brightness-110';
+			case ColorScheme.Surface:
+				return 'btn preset-filled-surface-800-200 text-surface-100-900 hover:brightness-110';
+			default:
+				console.error('Unimplemented color scheme');
+			// eslint-disable-next-line no-fallthrough
+			case ColorScheme.Primary:
+				return 'icon-filter-on-primary-button';
+		}
+	};
+
+	const tailwindClass = chooseTailwindClass();
+</script>
+
+<img
+	{...props}
+	class={`image-icon ${tailwindClass}`}>
+
+<style>
+		:global(.image-icon) {
+        height: calc(var(--spacing) * 8);
+		}
+
+		:global(.small-icon-button .image-icon) {
+        height: calc(var(--spacing) * 6);
+		}
+
+    :global(.icon-filter-on-primary-button) {
+				/* based on secondary-950 */
+        filter: brightness(0) saturate(100%) invert(18%) sepia(10%) saturate(4620%) hue-rotate(331deg) brightness(90%) contrast(88%);
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :global(.icon-filter-on-primary-button) {
+						/* based on surface-0 */
+            filter: brightness(0) saturate(100%) invert(85%) sepia(3%) saturate(993%) hue-rotate(326deg) brightness(113%) contrast(105%);
+        }
+    }
 </style>

package/dist/ui/elements/{pinya-button/component.svelte → PinyaButton/PinyaButton.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ColorScheme } from '..';
-	import { ButtonVariant, type PinyaButtonProps } from './props';
+	import { ButtonVariant, type PinyaButtonProps } from './PinyaButtonProps';
+	import { ColorScheme } from "../ColorScheme";
 
 	let {
 		children,
@@ -8,6 +8,7 @@
 		paddingClass = '',
 		buttonVariant = ButtonVariant.Default,
 		colorClass = '',
+		classes = '',
 		...props
 	}: PinyaButtonProps = $props();
 
@@ -41,7 +42,7 @@
 <button
 	{...props}
 	class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
-	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass}`}
+	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
 >
 	{@render children()}
 </button>

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

@@ -0,0 +1,4 @@
+import { type PinyaButtonProps } from './PinyaButtonProps';
+declare const PinyaButton: import("svelte").Component<PinyaButtonProps, {}, "">;
+type PinyaButton = ReturnType<typeof PinyaButton>;
+export default PinyaButton;

package/dist/ui/elements/{pinya-button/props.d.ts → PinyaButton/PinyaButtonProps.d.ts}

@@ -10,4 +10,5 @@ export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIPr
     paddingClass?: string;
     buttonVariant?: ButtonVariant;
     colorClass?: string;
+    classes?: string;
 };

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

@@ -0,0 +1,2 @@
+export { default as PinyaButton } from './PinyaButton.svelte';
+export * from './PinyaButtonProps';

package/dist/ui/elements/PinyaButton/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaButton } from './PinyaButton.svelte';
+export * from './PinyaButtonProps';

package/dist/ui/elements/{pinya-card/component.svelte → PinyaCard/PinyaCard.svelte}

@@ -1,21 +1,22 @@
-<script lang="ts">/**
- * When with texts, wrap the text content inside a div so flex wont apply
- */
-import type { PinyaCardProps } from "./props";
-
-let {
-	paddingClass = "pt-[1lh] pb-[1lh] pl-16 pr-16",
-	flexClass = "flex flex-col",
-	widthClass = "max-w-md",
-	borderClass = "border-[2px] border-primary-500 dark:border-0",
-	marginClass = "",
-	className,
-	children
-}: PinyaCardProps = $props();
-</script>
-
-<div
-	class={`card bg-surface-200 dark:bg-surface-900 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`}
->
-	{@render children?.()}
+<script lang="ts">/**
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./PinyaCardProps";
+
+let {
+	paddingClass = "pt-[1lh] pb-[1lh] pl-16 pr-16",
+	flexClass = "flex flex-col",
+	widthClass = "w-full max-w-md",
+	borderClass = "border-[2px] border-primary-500 dark:border-0",
+	marginClass = "",
+	className,
+	children
+}: PinyaCardProps = $props();
+</script>
+
+<div
+	class={`card bg-surface-200 dark:bg-surface-900 text-start rounded-xl
+	${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`}
+>
+	{@render children?.()}
 </div>

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

@@ -0,0 +1,7 @@
+/**
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./PinyaCardProps";
+declare const PinyaCard: import("svelte").Component<PinyaCardProps, {}, "">;
+type PinyaCard = ReturnType<typeof PinyaCard>;
+export default PinyaCard;

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

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./PinyaCard.svelte";
+export * from "./PinyaCardProps";

package/dist/ui/elements/PinyaCard/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaCard } from "./PinyaCard.svelte";
+export * from "./PinyaCardProps";

package/dist/ui/elements/Placeholder.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	let {
-		isCircle = false,
-		classes = '',
-	}: {
-		isCircle?: boolean;
-		classes?: string;
-	} = $props();
-</script>
-
-<div
-	class="
-	{isCircle ?'placeholder-circle' : 'placeholder'}
-	animate-pulse bg-surface-600 dark:bg-surface-800
-	{classes}
-"
-></div>
+<script lang="ts">
+	let {
+		isCircle = false,
+		classes = '',
+	}: {
+		isCircle?: boolean;
+		classes?: string;
+	} = $props();
+</script>
+
+<div
+	class="
+	{isCircle ?'placeholder-circle' : 'placeholder'}
+	animate-pulse bg-surface-600 dark:bg-surface-800
+	{classes}
+"
+></div>