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

package/dist/ui/elements/TextLink.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-	import { type Snippet } from 'svelte';
-
-	let {
-		children,
-		href
-	}: { href: string, children: Snippet } = $props();
-</script>
-
-<a
-	{href}
-	class="visited:text-surface-950 dark:visited:text-surface-400">
-	{@render children?.()}
-</a>
-
-<style>
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	let {
+		children,
+		href
+	}: { href: string, children: Snippet } = $props();
+</script>
+
+<a
+	{href}
+	class="visited:text-surface-950 dark:visited:text-surface-400">
+	{@render children?.()}
+</a>
+
+<style>
 </style>

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

@@ -4,8 +4,8 @@ export { default as ElementVisibilityDetector } from "./ElementVisibilityDetecto
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";
-export * from "./pinya-card/index";
+export * from "./PinyaCard/index";
 export * from "./WrapperProps";
-export * from "./pinya-button/index";
+export * from "./PinyaButton/index";
 export * from "./text-chip";
 export * from "./CodeBlock";

package/dist/ui/elements/index.js

@@ -4,8 +4,8 @@ export { default as ElementVisibilityDetector } from "./ElementVisibilityDetecto
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";
-export * from "./pinya-card/index";
+export * from "./PinyaCard/index";
 export * from "./WrapperProps";
-export * from "./pinya-button/index";
+export * from "./PinyaButton/index";
 export * from "./text-chip";
 export * from "./CodeBlock";

package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" generics="T extends string">
-	import { Combobox } from '@skeletonlabs/skeleton-svelte';
-	import { getLocale, localizeHref } from '../../../paraglide/runtime';
-	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
-
-	let {
-		contentZIndex = 'auto',
-		value = $bindable(),
-		onValueChange = () => {},
-		onValueChangeBase = undefined,
-		...props
-	}: PinyaComboboxProps<T> = $props();
-
-	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
-		value = e.value as T[];
-		onValueChange(e);
-	};
-</script>
-
-<Combobox
-	width="w-full"
-	labelText="text-md"
-	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
-	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
-	inputGroupButton="size-[3rem]"
-	inputGroupArrow="size-[2rem] m-auto"
-	contentBackground="bg-surface-100-900 border-primary-500 border-2"
-	zIndex={contentZIndex}
-	optionActive="bg-secondary-400-600"
-	optionHover="hover:brightness-75 dark:hover:brightness-125"
-	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
-	onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
-	{value}
-	{...props}
+<script lang="ts" generics="T extends string">
+	import { Combobox } from '@skeletonlabs/skeleton-svelte';
+	import { getLocale, localizeHref } from '../../../paraglide/runtime';
+	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
+
+	let {
+		contentZIndex = 'auto',
+		value = $bindable(),
+		onValueChange = () => {},
+		onValueChangeBase = undefined,
+		...props
+	}: PinyaComboboxProps<T> = $props();
+
+	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
+		value = e.value as T[];
+		onValueChange(e);
+	};
+</script>
+
+<Combobox
+	width="w-full"
+	labelText="text-md"
+	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
+	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
+	inputGroupButton="size-[3rem]"
+	inputGroupArrow="size-[2rem] m-auto"
+	contentBackground="bg-surface-100-900 border-primary-500 border-2"
+	zIndex={contentZIndex}
+	optionActive="bg-secondary-400-600"
+	optionHover="hover:brightness-75 dark:hover:brightness-125"
+	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
+	onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
+	{value}
+	{...props}
 />

package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts

@@ -15,4 +15,5 @@ export interface PinyaComboboxProps<T extends string> {
     onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
     onValueChangeBase?: (selectedList: ValueChangeDetails<T>) => void;
     contentZIndex?: string;
+    disabled?: boolean;
 }

package/dist/ui/elements/text-chip/TextChip.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-	import type { TextChipProps } from "./TextChipProps";
-
-	let { children, queryClass = "" }: TextChipProps = $props();
-</script>
-
-<span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
-
-<style>
-    /*noinspection CssUnusedSymbol*/
-    :global(.highlight-chip.text-chip) {
-        background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
-        color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
-    }
+<script lang="ts">
+	import type { TextChipProps } from "./TextChipProps";
+
+	let { children, queryClass = "" }: TextChipProps = $props();
+</script>
+
+<span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
+
+<style>
+    /*noinspection CssUnusedSymbol*/
+    :global(.highlight-chip.text-chip) {
+        background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+        color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+    }
 </style>

package/dist/{components/navigation_component → ui/modules/NavigationMenu}/NavigationControl.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { page } from "$app/state";
-
-	import { Card } from "../index";
 	import { goto } from "$app/navigation";
+	import { PinyaButton, PinyaCard } from "../../elements/index";
 
 	interface Props {
 		currentIndex?: number;
@@ -11,7 +10,11 @@
 		pageSize: number;
 	}
 
-	let { currentIndex = $bindable(0), contentLength, pageSize = $bindable() }: Props = $props();
+	let {
+		currentIndex = $bindable(0),
+		contentLength,
+		pageSize = $bindable()
+	}: Props = $props();
 
 	const queryIndex = page.url.searchParams.get("index");
 	if (queryIndex) {
@@ -43,28 +46,29 @@
 </script>
 
 <div class="navigation-control-container">
-	<button class="navigation-control-button"
-	        disabled={currentIndex <= 0}
-	        onclick={() => {movePage(false)}}>{"<"}</button>
-	<Card marginBottom="0">
-		{#snippet content()}
-			<p style="margin: 1em">Page {currentIndex + 1}</p>
-		{/snippet}
-	</Card>
-	<button class="navigation-control-button"
-	        disabled={(currentIndex + 1) * pageSize >= contentLength}
-	        onclick={() => {movePage(true)}}>{">"}</button>
+	<PinyaButton
+		classes="w-12 h-12"
+		disabled={currentIndex <= 0}
+		onclick={() => {movePage(false)}}
+	>&lt;
+	</PinyaButton>
+	<div>
+		<PinyaCard widthClass="" paddingClass="pt-2 pb-2 pl-8 pr-8">
+			<span class="fake-h2">Page {currentIndex + 1}</span>
+		</PinyaCard>
+	</div>
+	<PinyaButton
+		classes="w-12 h-12"
+		disabled={(currentIndex + 1) * pageSize >= contentLength}
+		onclick={() => {movePage(true)}}
+	>&gt;
+	</PinyaButton>
 </div>
 
 <style>
     .navigation-control-container {
         display: flex;
         justify-content: space-between;
-        margin: 1lh 0;
-    }
-
-    .navigation-control-button {
-		    /* todo: migration */
-        /*@apply btn preset-filled-secondary-500;*/
+        align-items: center;
     }
 </style>

package/dist/{components/navigation_component/NavigationComponent.svelte → ui/modules/NavigationMenu/NavigationMenu.svelte}

@@ -1,20 +1,19 @@
 <script lang="ts">
 	import NavigationControl from "./NavigationControl.svelte";
 	import { parsePageMeta, type ParsePageMetaCompareFn } from "./PageMeta";
-	import { Card } from "../index";
-	import { createGoToFunction } from "../../util/util";
+	import { Card } from "../../../components/index";
+	import { PinyaCard } from "../../elements/index";
+	import { localizeHref } from "../../../paraglide/runtime.js";
 
-
-	
 	interface Props {
 		fileList: Record<string, unknown>;
 		jsonList: Record<string, unknown>;
 		title?: string | undefined;
-		imageMap?: any;
+		imageMap?: Map<string, string>;
 		shouldAllowControl?: boolean;
 		/**
-	 * Should include a slash before and after the path
-	 */
+		 * Should include a slash before and after the path
+		 */
 		parentSubpath: string;
 		allowUpperControl?: boolean;
 		compareFn?: undefined | ParsePageMetaCompareFn;
@@ -42,60 +41,65 @@
 
 <div class="navigation-wrapper">
 	{#if (title)}
-		<Card>
-			{#snippet content()}
-						<h1  class="default-card navigation-title">
+		<div>
+			<PinyaCard widthClass="">
+				<h1 class="navigation-title">
 					{title}
 				</h1>
-					{/snippet}
-		</Card>
+			</PinyaCard>
+		</div>
 	{/if}
 
 	{#if allowUpperControl && shouldAllowControl}
-		<NavigationControl bind:currentIndex={currentIndex}
-		                   bind:contentLength={pageFlatList.length}
-		                   bind:pageSize={pageSize}></NavigationControl>
+		<NavigationControl
+			bind:currentIndex={currentIndex}
+			contentLength={pageFlatList.length}
+			bind:pageSize={pageSize}></NavigationControl
+		>
 	{/if}
 
 	<div class="navigation-component">
 		<!-- all the misc routes-->
-		{#each visiblePages as pageMeta}
+		{#each visiblePages as pageMeta (pageMeta.title)}
 			{@const fullPath=`${parentSubpath}${pageMeta.relativeLink}`}
-			<button class="navigation-element"
-			        title={fullPath}
-			        onclick={createGoToFunction(fullPath)}>
-				{#if pageMeta.imageUrl}
-					<img src={pageMeta.imageUrl}
-					     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
-				{/if}
-				<section class="blurb-text">
-					<h2>{pageMeta.title}</h2>
-					<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
-					<p>{pageMeta.description ?? ""}</p>
-					Tags:
-					{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
-						{#each pageMeta.tags as tagValue}
-							&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
-						{/each}
-					{:else}
-						None
+			<a href={localizeHref(fullPath)} class="card-anchor">
+				<PinyaCard
+					widthClass="w-full"
+					className="navigation-element"
+				>
+					{#if pageMeta.imageUrl}
+						<img src={pageMeta.imageUrl}
+						     alt={pageMeta.imageAlt ?? "placeholder alt text please replace me or report me!"} />
 					{/if}
-				</section>
-			</button>
+					<section class="blurb-text">
+						<h2>{pageMeta.title}</h2>
+						<p>Published: {pageMeta.datePublished ?? "N/A"} | Last updated: {pageMeta.lastUpdated ?? "N/A"}</p>
+						<p>{pageMeta.description ?? ""}</p>
+						Tags:
+						{#if (pageMeta.tags && pageMeta.tags.length !== 0)}
+							{#each pageMeta.tags as tagValue, idx (idx)}
+								&nbsp;<span class="badge variant-filled tag-container">{tagValue}</span>
+							{/each}
+						{:else}
+							None
+						{/if}
+					</section>
+				</PinyaCard>
+			</a>
 		{/each}
 
 		{#if visiblePages.length === 0}
 			<Card>
 				{#snippet content()}
-								<p class="default-card" >Sorry, no content was found</p>
-							{/snippet}
+					<p class="default-card">Sorry, no content was found</p>
+				{/snippet}
 			</Card>
 		{/if}
 	</div>
 
 	{#if shouldAllowControl}
 		<NavigationControl bind:currentIndex={currentIndex}
-		                   bind:contentLength={pageFlatList.length}
+		                   contentLength={pageFlatList.length}
 		                   bind:pageSize={pageSize}></NavigationControl>
 	{/if}
 
@@ -110,13 +114,13 @@
             border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
         }
 
-        .navigation-element {
+        :global(.navigation-element) {
             flex-direction: column;
         }
     }
 
     @container (min-width: 801px) {
-        .navigation-element {
+        :global(.navigation-element) {
             flex-direction: row;
         }
 
@@ -125,8 +129,8 @@
         }
     }
 
-    .navigation-element {
-		    /* todo: migration */
+    :global(.navigation-element) {
+        /* todo: migration */
         /*@apply btn card card-hover bg-surface-100 dark:bg-surface-900;*/
         container-type: inline-size;
         display: flex;
@@ -166,9 +170,31 @@
         flex-direction: column;
         max-width: 1000px;
         width: 100%;
+		    gap: 1lh;
     }
 
     .tag-container {
         margin: 0.25lh 0;
     }
+
+    a.card-anchor {
+		    filter: none;
+    }
+
+    :global(.navigation-element) {
+		    transition: 0.3s;
+    }
+
+    :global(.navigation-element:hover) {
+        transform: scale(1.02);
+		    box-shadow: 10px 5px 5px rgba(49, 8, 0, 0.25);
+    }
+
+    :global(.dark .navigation-element:hover) {
+		    box-shadow: 10px 5px 5px rgba(16, 0, 0, 0.35);
+    }
+
+    h2 {
+		    text-align: start;
+    }
 </style>

package/dist/{components/navigation_component/NavigationComponent.svelte.d.ts → ui/modules/NavigationMenu/NavigationMenu.svelte.d.ts}

@@ -3,17 +3,17 @@ interface Props {
     fileList: Record<string, unknown>;
     jsonList: Record<string, unknown>;
     title?: string | undefined;
-    imageMap?: any;
+    imageMap?: Map<string, string>;
     shouldAllowControl?: boolean;
     /**
- * Should include a slash before and after the path
- */
+     * Should include a slash before and after the path
+     */
     parentSubpath: string;
     allowUpperControl?: boolean;
     compareFn?: undefined | ParsePageMetaCompareFn;
     pageSize?: number;
     currentIndex?: number;
 }
-declare const NavigationComponent: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
-type NavigationComponent = ReturnType<typeof NavigationComponent>;
-export default NavigationComponent;
+declare const NavigationMenu: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
+type NavigationMenu = ReturnType<typeof NavigationMenu>;
+export default NavigationMenu;

package/dist/{components/navigation_component → ui/modules/NavigationMenu}/PageMeta.d.ts

@@ -3,14 +3,14 @@ export interface PageMeta {
     description?: string;
     imageAlt?: string;
     /**
-     * imageID is an ID that NavigationComponent can use to identify imported images
+     * imageID is an ID that NavigationMenu can use to identify imported images
      *
      * To use imageID:
      * 1. Add the imageID entry to the meta.json for the page
      * 2. Create a typescript file with the variable ImageMap: Map<string, string>
      * 3. Add a new entry with your imageID as key, and the image url as the value. Since this is
      * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
-     * 4. Add ImageMap as an argument to your NavigationComponent.
+     * 4. Add ImageMap as an argument to your NavigationMenu.
      * Overall, this involves four files
      * - Your navigation page: ./+page.svelte
      * - Your image map typescript: ImageMap.ts
@@ -45,14 +45,14 @@ export interface SimplePageMeta {
     description?: string;
     imageAlt?: string;
     /**
-     * imageID is an ID that NavigationComponent can use to identify imported images
+     * imageID is an ID that NavigationMenu can use to identify imported images
      *
      * To use imageID:
      * 1. Add the imageID entry to the meta.json for the page
      * 2. Create a typescript file with the variable ImageMap: Map<string, string>
      * 3. Add a new entry with your imageID as key, and the image url as the value. Since this is
      * Typescript, you can use import ImageUrl from "./path.png" as you would normally do.N
-     * 4. Add ImageMap as an argument to your NavigationComponent.
+     * 4. Add ImageMap as an argument to your NavigationMenu.
      * Overall, this involves four files
      * - Your navigation page: ./+page.svelte
      * - Your image map typescript: ImageMap.ts

package/dist/ui/modules/NavigationMenu/index.d.ts

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

package/dist/ui/modules/NavigationMenu/index.js

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

package/dist/ui/modules/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./seaweed";
 export * from "./projects";
+export * from "./NavigationMenu";

package/dist/ui/modules/index.js

@@ -1,2 +1,2 @@
-export * from "./seaweed";
 export * from "./projects";
+export * from "./NavigationMenu";