@turnipxenon/pineapple 5.0.0 → 5.1.0

package/README.md

@@ -6,13 +6,13 @@ NPM package: https://www.npmjs.com/package/@turnipxenon/pineapple
 
 ## Developing
 
-Once you've created a project and installed dependencies with `yarn`, start a development server:
+Once you've created a project and installed dependencies with `pnpm`, start a development server:
 
 ```bash
-yarn dev
+pnpm dev
 
 # or start the server and open the app in a new browser tab
-yarn dev -- --open
+pnpm dev -- --open
 ```
 
 ## Building
@@ -20,10 +20,10 @@ yarn dev -- --open
 To create a production version of your app:
 
 ```bash
-yarn build
+pnpm build
 ```
 
-You can preview the production build with `yarn preview`.
+You can preview the production build with `pnpm preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
 
@@ -35,7 +35,7 @@ TODO: If you're curious how to install this on a fresh package or a package not
 ## Migration from v2 to v3
 
 ```bash
-yarn add @turnipxenon2/pineapple
+pnpm add @turnipxenon2/pineapple
 ```
 
 **Manual steps**
@@ -119,13 +119,13 @@ kit: {
 
 ## Local linking
 
-1. In pineapple, run `yarn link`
-2. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
+1. In pineapple, run `pnpm link`
+2. In seaweed2, run `pnpm link @turnipxenon/pineapple`
 
 **To unlink:**
 
-1. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
-2. In pineapple, run `yarn unlink`
+1. In seaweed2, run `pnpm unlink @turnipxenon/pineapple`
+2. In pineapple, run `pnpm unlink`
 3. **If unlinking, remember to restart PC cause Windows symlinking is tricky**
 
-To reinstall a single package: `yarn add @turnipxenon/pineapple --no-package-lock --no-save`
+To reinstall a single package: `pnpm add @turnipxenon/pineapple --no-package-lock --no-save`

package/dist/ui/components/FourPartCard.svelte

@@ -57,5 +57,9 @@
                 border-top-left-radius: var(--radius-xl);
             }
         }
+
+		    html.dark .pinya-four-part-card {
+				    border: 0;
+		    }
     }
 </style>

package/dist/ui/components/SortDropdown.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import PinyaCombobox from "../elements/pinya-combobox/PinyaCombobox.svelte";
+	import type { GenericComboboxItem } from "../elements/pinya-combobox/PinyaComboboxProps";
+	import { SectionType } from "../templates/SeaweedLayout/props";
+
+	interface SortDropdownProps {
+		sortBy: string[];              // Current sort value (bindable)
+		sectionType: SectionType;    // Determines available sort options
+	}
+
+	let {
+		sortBy = $bindable(["default"]),
+		sectionType = SectionType.Projects
+	}: SortDropdownProps = $props();
+
+	const projectSortOptions: GenericComboboxItem<string>[] = [
+		{ label: "Default order", value: "default" },
+		{ label: "Most recently finished", value: "date-desc" },
+		{ label: "Oldest finished", value: "date-asc" },
+		{ label: "Longest projects", value: "duration-desc" },
+		{ label: "Shortest projects", value: "duration-asc" }
+	];
+
+	const experienceSortOptions: GenericComboboxItem<string>[] = [
+		{ label: "Default order", value: "default" },
+		{ label: "Most recent first", value: "date-desc" },
+		{ label: "Oldest first", value: "date-asc" }
+	];
+
+	const sortOptions = $derived(
+		sectionType === SectionType.Experience
+			? experienceSortOptions
+			: projectSortOptions
+	);
+</script>
+
+<div class="sort-dropdown">
+	<PinyaCombobox
+		data={sortOptions}
+		bind:value={sortBy}
+		label="Sort by"
+		placeholder="Select sort order"
+	/>
+</div>
+
+<style>
+    .sort-dropdown {
+        min-width: 200px;
+    }
+</style>

package/dist/ui/components/SortDropdown.svelte.d.ts

@@ -0,0 +1,9 @@
+import { SectionType } from "../templates/SeaweedLayout/props";
+interface SortDropdownProps {
+    sortBy: string[];
+    sectionType: SectionType;
+}
+declare const SortDropdown: import("svelte").Component<SortDropdownProps, {}, "sortBy">;
+type SortDropdown = ReturnType<typeof SortDropdown>;
+export default SortDropdown;
+//# sourceMappingURL=SortDropdown.svelte.d.ts.map

package/dist/ui/components/SortDropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/SortDropdown.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAGnE,UAAU,iBAAiB;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CACzB;AAyCF,QAAA,MAAM,YAAY,6DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ui/components/TagFilter.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import PinyaCombobox from "../elements/pinya-combobox/PinyaCombobox.svelte";
+
+	interface TagFilterProps {
+		allTags: string[];           // All available tags
+		selectedTags: string[];      // Currently selected tags (bindable)
+		label?: string;              // Optional label
+	}
+
+	let {
+		allTags,
+		selectedTags = $bindable([]),
+		label = "Filter by tags"
+	}: TagFilterProps = $props();
+</script>
+
+<div class="tag-filter">
+	<PinyaCombobox
+		bind:value={selectedTags}
+		data={allTags.map(t => ({value: t, label: t}))}
+		multiple={true}
+		{label}
+	/>
+</div>
+
+<style>
+    .tag-filter {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+</style>

package/dist/ui/components/TagFilter.svelte.d.ts

@@ -0,0 +1,9 @@
+interface TagFilterProps {
+    allTags: string[];
+    selectedTags: string[];
+    label?: string;
+}
+declare const TagFilter: import("svelte").Component<TagFilterProps, {}, "selectedTags">;
+type TagFilter = ReturnType<typeof TagFilter>;
+export default TagFilter;
+//# sourceMappingURL=TagFilter.svelte.d.ts.map

package/dist/ui/components/TagFilter.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagFilter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/TagFilter.svelte.ts"],"names":[],"mappings":"AAMC,UAAU,cAAc;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAoBF,QAAA,MAAM,SAAS,gEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -4,7 +4,7 @@
 	import { Accordion } from "melt/builders";
 	import { setContext } from "svelte";
 	import type { SvelteSet } from "svelte/reactivity";
-	import { accordionContextKey, type AccordionContext } from "./accordionContext";
+	import { type AccordionContext, accordionContextKey } from "./accordionContext";
 	import type { PinyaAccordionProps } from "./PinyaAccordionProps";
 
 	let {
@@ -13,6 +13,7 @@
 		multiple = true,
 		...props
 	}: PinyaAccordionProps = $props();
+
 	let accordion = $derived(new Accordion({
 		value: (() => {
 			if (openItems) {
@@ -33,10 +34,11 @@
 			} else {
 				openItems = [];
 			}
-		}, multiple
+		},
+		multiple,
 	}));
 	setContext<AccordionContext>(accordionContextKey, (key) => accordion.getItem(key));
-	setContext<string[]>('accordionOpenItems', openItems);
+	setContext<string[]>("accordionOpenItems", openItems);
 </script>
 
 <div {...props} class={`pinya-accordion-root ${props.class ?? ''}`} {...accordion.root}>

package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinyaAccordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordion.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAmDjE,QAAA,MAAM,cAAc,kEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"PinyaAccordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordion.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAqDjE,QAAA,MAAM,cAAc,kEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

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

@@ -95,7 +95,11 @@
             font-style: var(--shiki-dark-font-style) !important;
             font-weight: var(--shiki-dark-font-weight) !important;
             -webkit-text-decoration: var(--shiki-dark-text-decoration) !important;
-            text-decoration: var(--shiki-dark-text-decoration) !important
+            text-decoration: var(--shiki-dark-text-decoration) !important;
+
+		        span[style*="color:#4C4F69"] {
+                color: oklch(0.835 0.043 279.325) !important;
+            }
         }
 
 		    html.dark .shiki.has-diff span.diff.add {
@@ -119,15 +123,17 @@
                 padding-inline-end: 0;
 
                 code {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 0.2lh;
+                    display: block;
 
                     & > span {
-                        display: flex;
-                        flex-wrap: wrap;
+                        display: block;
                         padding-inline-start: 2em;
                         padding-inline-end: 1em;
+                        margin-block-end: -1lh;
+
+                        &:last-child {
+                            margin-block-end: 0;
+                        }
                     }
                 }
 

package/dist/ui/elements/PineappleSwitch.svelte

@@ -5,14 +5,14 @@
 
 	interface Props {
 		checked?: boolean;
-		name: string;
+		name?: string;
 		onChange?: ((val: boolean) => void);
 		children?: Snippet;
 	}
 
 	let {
 		checked = $bindable(false),
-		name,
+		name = undefined,
 		onChange = undefined,
 		children = undefined
 	}: Props = $props();

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

@@ -1,7 +1,7 @@
 import type { Snippet } from "svelte";
 interface Props {
     checked?: boolean;
-    name: string;
+    name?: string;
     onChange?: ((val: boolean) => void);
     children?: Snippet;
 }

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

@@ -1 +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"}
+{"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,CAAC,EAAE,MAAM,CAAC;IACd,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/pinya-combobox/PinyaCombobox.svelte

@@ -1,42 +1,132 @@
-<!-- TODO: Documentation: consider documentation showcase -->
-
 <script lang="ts" generics="T extends string">
 	import type { PinyaComboboxProps } from "./PinyaComboboxProps";
 	import { Combobox } from "melt/builders";
+	import { SvelteSet } from "svelte/reactivity";
 
 	let {
 		// todo: fix this
-		contentZIndex = "auto",
-		value = $bindable(),
+		value = $bindable([]),
 		onValueChange = () => {
 		},
-		onValueChangeBase = undefined,
+		multiple = false,
+		name = "",
 		...props
 	}: PinyaComboboxProps<T> = $props();
 
-	const onValueChangeBaseImpl = (e: T | undefined) => {
-		value = e;
-		console.log("change", e);
-		onValueChange({
-			value: e,
-			items: props.data
-		});
-	};
+	const uid = $props.id();
+	const _name = $derived(name ? name : `combobox-${uid}`);
 
-	const combobox = new Combobox<T, false>({
-		value: props.defaultValue,
-		inputValue: function() {
-			return props.data.find((o) => o.value === value)?.label ?? "---";
+	const combobox = $derived(new Combobox({
+		value: (() => {
+			if (value) {
+				if (multiple) {
+					return value;
+				} else if (value.length > 0) {
+					return value[0];
+				}
+			}
+
+			return undefined;
+		})(),
+		// todo: investigate later why typescript says it's the wrong type?
+		onValueChange: (t: T | SvelteSet<T> | undefined) => {
+			if (t instanceof SvelteSet) {
+				if (t.size > 0) {
+					value = [...t];
+				} else {
+					value = [];
+				}
+			} else if (t) {
+				value = [t];
+			} else {
+				value = [];
+			}
+			onValueChange?.(value);
 		},
-		onValueChange: onValueChangeBase ?? onValueChangeBaseImpl,
-	});
+		inputValue: (() => {
+			if (value.length === props.data.length) {
+				return "All";
+			}
+			if (value.length === 0) {
+				return "---";
+			}
+			return props.data.filter(d => value.includes(d.value))
+				.map(d => d.label)
+				.join(", ");
+		})(),
+		multiple
+	}));
+
+	let inputValue = $state("");
+	let wrapperEl: HTMLDivElement | undefined = $state();
+
+	const onfocusin = (event: FocusEvent) => {
+		// Don't clear filter when navigating to/between options
+		const target = event.target as HTMLElement;
+		if (!target?.hasAttribute('data-melt-combobox-option')) {
+			inputValue = "";
+		}
+	};
+
+	const onblur = (event: FocusEvent) => {
+		// Don't reset if focus moved to another element within the wrapper
+		if (wrapperEl && event.relatedTarget instanceof Node && wrapperEl.contains(event.relatedTarget)) {
+			return;
+		}
+
+		if (value.length === props.data.length) {
+			inputValue = "All";
+			return;
+		}
+		if (value.length === 0) {
+			inputValue = "---";
+			return;
+		}
+
+		inputValue = props.data.filter(d => value.includes(d.value))
+			.map(d => d.label)
+			.join(", ");
+	};
+
+	const onOptionKeydown = (event: KeyboardEvent, index: number) => {
+		const options = wrapperEl?.querySelectorAll<HTMLElement>('[data-melt-combobox-option]');
+		if (!options) return;
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			options[index + 1]?.focus();
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			if (index === 0) {
+				wrapperEl?.querySelector<HTMLElement>('input')?.focus();
+			} else {
+				options[index - 1]?.focus();
+			}
+		}
+	};
+
+	const onInputKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Tab' && !event.shiftKey && combobox.open) {
+			event.preventDefault();
+			const firstOption = wrapperEl?.querySelector('[data-melt-combobox-option]') as HTMLElement | null;
+			if (firstOption) {
+				firstOption.focus();
+				return;
+			}
+		}
+		// Delegate to Melt's keydown handler for all other keys
+		(combobox.input as { onkeydown?: (e: KeyboardEvent) => void }).onkeydown?.(event);
+	};
 
 	const filtered = $derived.by(() => {
 		if (!combobox.touched) return props.data;
 		return props.data.filter((o) =>
-			o.value.toLowerCase().includes(combobox.inputValue.trim().toLowerCase())
+			o.value.toLowerCase().includes(inputValue.trim().toLowerCase())
+			|| o.label.toLowerCase().includes(inputValue.trim().toLowerCase())
 		);
 	});
+
+	const clearAll = () => value = [];
 </script>
 
 <!--
@@ -46,10 +136,29 @@ Melt-based Combobox
 When migrating from Skeleton to Melt, change the value is no longer an array T[] but it's now T | undefined
 -->
 
-<div class={`pinya-combobox-wrapper ${props.class}`} {...props}>
-	<label {...combobox.label}>{props.label}</label>
+<div
+	class={`pinya-combobox-wrapper ${props.class}`}
+	{...props}
+	onfocusin={onfocusin}
+	onfocusout={onblur}
+	bind:this={wrapperEl}
+>
+	<div class="label-section">
+		<label {...combobox.label} for={_name}>{props.label}</label>
+		{#if value.length > 0 && multiple}
+			<button class="clear-btn" onclick={clearAll}>Clear all</button>
+		{:else }
+			<button class="clear-btn invisible" onclick={clearAll}>Clear all</button>
+		{/if}
+	</div>
 	<div class="pinya-combobox-control">
-		<input {...combobox.input} disabled={props.disabled} />
+		<input
+			{...combobox.input}
+			disabled={props.disabled}
+			name={_name}
+			bind:value={inputValue}
+			onkeydown={onInputKeydown}
+		/>
 		<button class="size-[3rem]" {...combobox.trigger} disabled={props.disabled}>
 			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.5" class="size-[2rem] m-auto">
 				<path d="m6 9 6 6 6-6"></path>
@@ -59,13 +168,13 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
 
 
 	<div {...combobox.content}>
-		{#each filtered as option (option)}
-			<div {...combobox.getOption(option.value)}>
+		{#each filtered as option, i (option)}
+			<button {...combobox.getOption(option.value)} tabindex="0" onkeydown={(e) => onOptionKeydown(e, i)}>
 				{option.label}
 				{#if combobox.isSelected(option.value)}
 					✓
 				{/if}
-			</div>
+			</button>
 		{:else}
 			<span>No results found</span>
 		{/each}
@@ -95,11 +204,20 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
 }
 [data-melt-combobox-content][data-open] {
   display: flex;
+  overflow-y: auto;
+  max-height: 8lh;
 }
 [data-melt-combobox-content] [data-melt-combobox-option] {
   padding-block: calc(var(--spacing) * 1);
   padding-inline: calc(var(--spacing) * 4);
   border-radius: var(--radius-lg);
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
 }
 [data-melt-combobox-content] [data-melt-combobox-option][aria-selected=true] {
   background-color: light-dark(var(--color-secondary-400), var(--color-secondary-600));
@@ -108,6 +226,7 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
 .pinya-combobox-wrapper {
   display: flex;
   flex-direction: column;
+  gap: 0.2lh;
 }
 
 .pinya-combobox-control {
@@ -128,4 +247,28 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
   text-overflow: ellipsis;
   padding: var(--spacing-2) var(--spacing-4);
   padding-right: 0;
+}
+
+.clear-btn {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-primary-500);
+  background: transparent;
+  color: var(--color-primary-500);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.clear-btn.invisible {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.clear-btn:hover {
+  background: var(--color-primary-100);
+}
+
+.label-section {
+  display: flex;
+  gap: 0.5em;
 }</style>

package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinyaCombobox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/pinya-combobox/PinyaCombobox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AAE7F,iBAAS,QAAQ,CAAC,CAAC,SAAS,MAAM;WAuEL,kBAAkB,CAAC,CAAC,CAAC;;;;;EAAiF;AACnI,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM;IACpC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3Y,CAAC,CAAC,SAAS,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD;;;;GAIG;AACH,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/E,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PinyaCombobox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/pinya-combobox/PinyaCombobox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AAG7F,iBAAS,QAAQ,CAAC,CAAC,SAAS,MAAM;WAwKL,kBAAkB,CAAC,CAAC,CAAC;;;;;EAAiF;AACnI,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM;IACpC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3Y,CAAC,CAAC,SAAS,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD;;;;GAIG;AACH,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/E,eAAe,aAAa,CAAC"}

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

@@ -9,13 +9,12 @@ export interface ValueChangeDetails<T extends string> {
 }
 export type PinyaComboboxProps<T extends string> = {
     data: GenericComboboxItem<T>[];
-    defaultValue: T | undefined;
-    value: T | undefined;
-    label: string;
-    placeholder: string;
-    onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
-    onValueChangeBase?: (e: T | undefined) => void;
-    contentZIndex?: string;
+    value?: T[];
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    onValueChange?: (selectedList: T[]) => void;
     disabled?: boolean;
+    multiple?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 //# sourceMappingURL=PinyaComboboxProps.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PinyaComboboxProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/pinya-combobox/PinyaComboboxProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM;IACnD,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI;IAElD,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9B,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;IAE5B,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAG9D,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"PinyaComboboxProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/pinya-combobox/PinyaComboboxProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM;IACnD,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI;IAElD,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;IAE9B,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/ui/modules/experience/ExampleJob1.svelte

@@ -0,0 +1,79 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<script module lang="ts">
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { TextChip } from "../../elements/TextChip";
+	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+
+	const key = "Software Engineer at Old Company";
+	const dateStarted = "2022-01-01";
+	const dateFinished = "2024-12-31";
+	const tags = ["typescript", "svelte", "web"];
+
+	// note that we can cheat the regex by doing this!
+	// qt-web
+	export { component, key, dateStarted, dateFinished, tags };
+</script>
+
+<script lang="ts">
+
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<div class="company-logo-placeholder">
+				<h1>CX</h1>
+			</div>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Software Engineer</h3>
+			<h4>Old Company</h4>
+			<p class="date-range">Jan 2022 - Dec 2024</p>
+		{/snippet}
+
+		<p>
+			<span class="qt-typescript">TypeScript</span> and
+			<span class="qt-svelte">Svelte</span>. Why would anyone hire that though?
+		</p>
+
+		<div class="text-chip-container">
+			{#each tags as t (t)}
+				<TextChip queryClass="qt-{t}">{t}</TextChip>
+			{/each}
+		</div>
+	</FourPartCard>
+{/snippet}
+
+<style>
+    :global {
+        .company-logo-placeholder {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            min-height: 150px;
+            background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
+            color: white;
+            font-size: 2rem;
+            font-weight: bold;
+            border-top-right-radius: var(--radius-xl);
+            border-top-left-radius: var(--radius-xl);
+        }
+
+    }
+
+    .date-range {
+        font-size: 0.875rem;
+        color: var(--color-text-secondary);
+        margin-bottom: 0.5rem;
+    }
+
+    h4 {
+        margin-top: 0.25rem;
+        margin-bottom: 0.5rem;
+        color: var(--color-text-secondary);
+    }
+</style>