@turnipxenon/pineapple 4.5.1 → 5.0.0-alpha.10

package/dist/ui/components/NestedNavigation.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import type { PageMeta } from "../..";
+	import { deLocalizeUrl, localizeHref } from "../../external/paraglide/runtime";
+	import { PinyaAccordion, PinyaAccordionItem } from "./accordion/index";
+	import { PinyaCard, TextLink } from "../elements/index";
+	import Placeholder from "../elements/Placeholder.svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import Self from "./NestedNavigation.svelte";
+
+	let {
+		layout,
+		depth,
+		close = () => {
+		},
+		openBehavior,
+		...props
+	}: {
+		layout: PageMeta[],
+		depth: number,
+		close?: () => void,
+		openBehavior?: "open-all" | "open-active" | "close-all"
+		// we have to omit id since id is auto assigned by melt
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'id'> = $props();
+
+	let openItems = $state<string[]>([]);
+
+	let currentPath = $state("");
+
+	$effect(() => {
+		currentPath = deLocalizeUrl(page.url).pathname.replace(/^\/|\/$/g, "");
+
+		switch (openBehavior) {
+			case "close-all":
+				openItems = [];
+				break;
+
+			case "open-all":
+				openItems = layout.map(site => site.relativeLink);
+				break;
+
+			case "open-active":
+				// find the biggest match
+				// for example if our current link is documentation/test/test2
+				// if the relativeLink are documentation-test, documentation, doc
+				// we return [documentation]
+			{
+				let bestMatch: string | null = null;
+
+				layout.forEach(site => {
+					console.log(`Current path (${currentPath}) vs layout path (${site.relativeLink})`);
+					const link = site.relativeLink;
+					if (!link) {
+						return;
+					}
+
+					const isMatch = currentPath === link || currentPath.startsWith(`${link}/`);
+					if (isMatch && (!bestMatch || link.length > bestMatch.length)) {
+						bestMatch = link;
+					}
+				});
+
+				if (bestMatch) {
+					openItems = [bestMatch];
+				}
+				break;
+			}
+
+			default:
+				break;
+		}
+	});
+</script>
+
+{#if layout.length > 0}
+	<PinyaAccordion bind:openItems={openItems} {...props} class="pinya-nested-navigation {props.class ?? ''}">
+		{#each layout as site (site.relativeLink)}
+			<!-- todo: add highlighted class when relativeLink === page.url -->
+			<PinyaAccordionItem
+				class="{currentPath === site.relativeLink ? 'highlighted' : ''}"
+				hasNoChild={site.nestedPages.length === 0}
+				pinyaValue={site.relativeLink}>
+				{#snippet control()}
+					<TextLink href={localizeHref(site.relativeLink)} onclick={() => close()}>
+						{site.title}
+					</TextLink>
+				{/snippet}
+				{#snippet panel()}
+					{#if site.nestedPages.length > 0 && depth < 5}
+						<div class="wrapper">
+							<Self layout={site.nestedPages} depth={depth + 1} {close} {openBehavior}></Self>
+						</div>
+					{/if}
+				{/snippet}
+			</PinyaAccordionItem>
+		{/each}
+	</PinyaAccordion>
+{:else }
+	<PinyaCard {...props} class={`nested-navigation-placeholder ${props.class ?? ''}`} colorClass="bg-primary-100 dark:bg-tertiary-900">
+		{#each { length: 10 } as _, idx (idx)}
+			<Placeholder class="mb-2 placeholder" />
+		{/each}
+	</PinyaCard>
+{/if}
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+:global .pinya-accordion-item.highlighted > .accordion-heading > .like-button, :global .pinya-accordion-item.highlighted > .accordion-heading > button {
+  --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);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  text-align: start;
+  gap: 0.4lh;
+}
+
+:global .pinya-accordion-item.highlighted > .accordion-heading > .like-button, :global .pinya-accordion-item.highlighted > .accordion-heading > button {
+  font-weight: bolder;
+}
+:global .nested-navigation-placeholder.pinya-card {
+  width: 10em;
+  padding: 1em;
+  gap: 0.5lh;
+}</style>

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

@@ -0,0 +1,12 @@
+import type { PageMeta } from "../..";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = {
+    layout: PageMeta[];
+    depth: number;
+    close?: () => void;
+    openBehavior?: "open-all" | "open-active" | "close-all";
+} & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
+declare const NestedNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
+type NestedNavigation = ReturnType<typeof NestedNavigation>;
+export default NestedNavigation;
+//# sourceMappingURL=NestedNavigation.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NestedNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/NestedNavigation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAKrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;CAEvD,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;AAqGhD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ui/components/SocialSection.svelte

@@ -1,23 +1,50 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-	import { scale } from "svelte/transition";
+<!-- TODO: Documentation: consider documentation showcase -->
 
-	import MailIcon from "../../assets/icons/mail.svg";
+<script lang="ts">
 	import GithubIcon from "../../assets/icons/github-mark.svg";
 	import LinkedinIcon from "../../assets/icons/linkedin.svg";
+
+	import MailIcon from "../../assets/icons/mail.svg";
+	import RevealInfo from "../../components/reveal-info/RevealInfo.svelte";
+	import type { RevealInfoRecord } from "../../components/reveal-info/RevealInfoCollection";
 	import { ItchLogoHotLink } from "../../consts";
-	import { PinyaButton } from "../elements/PinyaButton/index";
+	import { getDefaultEmail, getDefaultLinkedin } from "./socialSectionRemote.remote";
 	import ImageIcon from "../elements/ImageIcon.svelte";
+	import { PinyaButton } from "../elements/PinyaButton/index";
 	import { ButtonVariant } from "../elements/PinyaButtonCommon/ButtonVariant";
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	type SocialSectionProps = {
+		isSmallVersion?: boolean,
+		emailRemoteQuery?: RevealInfoRecord,
+		linkedinRemoteQuery?: RevealInfoRecord,
+		isSlot?: boolean,
+		allowLinkedIn?: boolean
+	};
 
-	/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
 	let {
 		isSmallVersion = false,
-		email = "turnipxenon@gmail.com",
-		linkedinSlug = "turnip-xenon",
+		emailRemoteQuery,
+		linkedinRemoteQuery,
 		isSlot = false,
 		allowLinkedIn = true
-	} = $props();
+	}: SocialSectionProps = $props();
+
+	const getDefaultEmailQuery = {
+		query: {
+			run: getDefaultEmail,
+			type: "void"
+		},
+		placeholder: "See email"
+	} as const;
+	const getDefaultLinkedinQuery = {
+		query: {
+			run: getDefaultLinkedin,
+			type: "void"
+		},
+		placeholder: "See Linkedin"
+	} as const;
 
 	let shouldShowExtra = $state(false);
 	const style = `
@@ -41,26 +68,32 @@
 		{/if}
 	</PinyaButton>
 	{#if allowLinkedIn}
-		<PinyaButton
+		<RevealInfo
+			infoRecord={linkedinRemoteQuery ?? getDefaultLinkedinQuery}
 			buttonVariant={ButtonVariant.SmallIcon}
-			title={`https://www.linkedin.com/in/${linkedinSlug}/`}
-			onclick={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
-			<ImageIcon src={LinkedinIcon} alt="linkedin icon" />
-			{#if (!isSmallVersion)}
-				<span>{linkedinSlug}</span>
-			{/if}
-		</PinyaButton>
+			titleBuilder={(info) => `https://www.linkedin.com/in/${info}/`}
+			onclickBuilder={(info) => (() => window.open(`https://www.linkedin.com/in/${info}/`))}>
+			{#snippet bodySnippet(info)}
+				<ImageIcon src={LinkedinIcon} alt="linkedin icon" />
+				{#if (!isSmallVersion)}
+					<span>{info}</span>
+				{/if}
+			{/snippet}
+		</RevealInfo>
 	{/if}
-	<PinyaButton
+	<RevealInfo
+		infoRecord={emailRemoteQuery ?? getDefaultEmailQuery}
 		buttonVariant={ButtonVariant.SmallIcon}
-		title={`mailto:${email}`}
-		onclick={() => window.open(`mailto:${email}`)}
+		titleBuilder={(info) => `mailto:${info}`}
+		onclickBuilder={(info) => (() => window.open(`mailto:${info}`))}
 	>
-		<ImageIcon src={MailIcon} alt="mail icon" />
-		{#if (!isSmallVersion)}
-			<span>{email}</span>
-		{/if}
-	</PinyaButton>
+		{#snippet bodySnippet(info)}
+			<ImageIcon src={MailIcon} aria-hidden />
+			{#if (!isSmallVersion)}
+				<span>{info}</span>
+			{/if}
+		{/snippet}
+	</RevealInfo>
 	{#if (shouldShowExtra)}
 		<div transition:scale>
 			<PinyaButton
@@ -79,7 +112,7 @@
 </div>
 
 <style>
-    span {
+    :global(.socials button span) {
         font-size: 0.8em;
     }
 
@@ -88,6 +121,6 @@
         flex-wrap: wrap;
         justify-content: var(--preferred-justify-content);
         gap: 0.7rem;
-		    align-items: stretch;
+        align-items: stretch;
     }
 </style>

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

@@ -1,9 +1,12 @@
-declare const SocialSection: import("svelte").Component<{
+import type { RevealInfoRecord } from "../../components/reveal-info/RevealInfoCollection";
+type SocialSectionProps = {
     isSmallVersion?: boolean;
-    email?: string;
-    linkedinSlug?: string;
+    emailRemoteQuery?: RevealInfoRecord;
+    linkedinRemoteQuery?: RevealInfoRecord;
     isSlot?: boolean;
     allowLinkedIn?: boolean;
-}, {}, "">;
+};
+declare const SocialSection: import("svelte").Component<SocialSectionProps, {}, "">;
 type SocialSection = ReturnType<typeof SocialSection>;
 export default SocialSection;
+//# sourceMappingURL=SocialSection.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialSection.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/SocialSection.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AAUxF,KAAK,kBAAkB,GAAG;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,mBAAmB,CAAC,EAAE,gBAAgB,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB,CAAC;AA8FH,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -1,21 +1,69 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
+	import { Accordion } from "melt/builders";
+	import { setContext } from "svelte";
+	import type { SvelteSet } from "svelte/reactivity";
+	import { accordionContextKey, type AccordionContext } from "./accordionContext";
+	import type { PinyaAccordionProps } from "./PinyaAccordionProps";
 
 	let {
-		value = $bindable(),
 		children,
-	}: {
-		value: string[],
-		children: Snippet,
-	} = $props();
+		openItems = $bindable([]),
+		multiple = true,
+		...props
+	}: PinyaAccordionProps = $props();
+	let accordion = $derived(new Accordion({
+		value: (() => {
+			if (openItems) {
+				if (multiple) {
+					return new Set(openItems);
+				} else if (openItems.length > 0) {
+					return openItems[0];
+				}
+			}
+
+			return undefined;
+		})(),
+		onValueChange: (t: SvelteSet<string> | string | undefined) => {
+			if (typeof t === "string") {
+				openItems = t ? [t] : [];
+			} else if (t) {
+				openItems = [...t];
+			} else {
+				openItems = [];
+			}
+		}, multiple
+	}));
+	setContext<AccordionContext>(accordionContextKey, (key) => accordion.getItem(key));
+	setContext<string[]>('accordionOpenItems', openItems);
 </script>
 
-<Accordion
-	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
-	{value}
-	onValueChange={(e) => (value = e.value)}
-	collapsible
->
-	{@render children()}
-</Accordion>
+<div {...props} class={`pinya-accordion-root ${props.class ?? ''}`} {...accordion.root}>
+	{@render children?.()}
+</div>
+
+<style>
+    :global {
+        .pinya-accordion-root {
+            .pinya-accordion-item {
+                &:first-child,
+                &:first-child > .accordion-heading,
+                &:first-child > .accordion-heading .consider-top-edge {
+                    border-top-left-radius: var(--radius-lg);
+                    border-top-right-radius: var(--radius-lg);
+                }
+            }
+
+            .pinya-accordion-item {
+                &:last-child,
+                &:last-child > .accordion-panel,
+                &:last-child > .accordion-heading .consider-bottom-edge,
+                &:last-child > .accordion-heading .consider-top-edge[data-state="closed"] {
+                    border-bottom-left-radius: var(--radius-lg);
+                    border-bottom-right-radius: var(--radius-lg);
+                }
+            }
+        }
+    }
+</style>

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

@@ -1,8 +1,5 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    value: string[];
-    children: Snippet;
-};
-declare const PinyaAccordion: import("svelte").Component<$$ComponentProps, {}, "value">;
+import type { PinyaAccordionProps } from "./PinyaAccordionProps";
+declare const PinyaAccordion: import("svelte").Component<PinyaAccordionProps, {}, "openItems">;
 type PinyaAccordion = ReturnType<typeof PinyaAccordion>;
 export default PinyaAccordion;
+//# sourceMappingURL=PinyaAccordion.svelte.d.ts.map

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

@@ -0,0 +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"}

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

@@ -1,29 +1,146 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- TODO: remove tailwind like classes -->
+
 <script lang="ts">
-	// noinspection ES6UnusedImports
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
+	import Placeholder from "../../elements/Placeholder.svelte";
+	import { getContext } from "svelte";
+	import { type AccordionContext, accordionContextKey } from "./accordionContext";
+	import type { PinyaAccordionItemProps } from "./PinyaAccordionItemProps";
 
 	let {
-		value,
 		control: controlSnippet,
-		panel: panelSnippet,
-	}: {
-		value: string,
-		control: Snippet;
-		panel: Snippet;
-	} = $props();
+		controlIndicator = undefined,
+		panel: panelSnippet = undefined,
+		hasNoChild = false,
+		pinyaValue,
+		...props
+	}: PinyaAccordionItemProps = $props();
+
+	let uid = $props.id();
+	let accordionContext = getContext<AccordionContext>(accordionContextKey);
+	let accordionItem = $derived(hasNoChild
+		? { heading: {}, trigger: {}, content: {} }
+		: accordionContext({ id: pinyaValue ?? uid })
+	);
 </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>
+<div {...props} class="pinya-accordion-item consider-top-edge consider-bottom-edge bg-primary-100 dark:bg-tertiary-900 {props.class}">
+	{#if accordionItem}
+		<div {...accordionItem.heading} class="consider-top-edge accordion-heading">
+			{#if hasNoChild}
+				<div {...accordionItem.trigger} class="consider-top-edge add-padding like-button consider-bottom-edge">
+					{#if controlIndicator}
+						{@render controlSnippet?.()}
+						{@render controlIndicator()}
+					{:else }
+						<div>{@render controlSnippet?.()}</div>
+					{/if}
+				</div>
+			{:else}
+				<button {...accordionItem.trigger} class="consider-top-edge add-padding">
+					{#if controlIndicator}
+						{@render controlSnippet?.()}
+						{@render controlIndicator()}
+					{:else }
+						<div>{@render controlSnippet?.()}</div>
+						<svg class="indicator" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+							<line class="line-h" x1="5" y1="12" x2="19" y2="12" />
+							<line class="line-v" x1="12" y1="5" x2="12" y2="19" />
+						</svg>
+					{/if}
+				</button>
+			{/if}
+		</div>
+		{#if !hasNoChild}
+			<div {...accordionItem.content} class="accordion-panel consider-bottom-edge add-padding">
+				{@render panelSnippet?.()}
+			</div>
+		{/if}
+	{:else }
+		<Placeholder classes="mb-2" />
+	{/if}
+</div>
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+button, .like-button {
+  --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);
+}
+
+.pinya-accordion-item:not(:last-child) > .accordion-heading::after {
+  content: "";
+  display: block;
+  height: 2px;
+  width: 100%;
+  background-color: var(--color-primary-300-700);
+}
+
+button, .like-button {
+  width: 100%;
+  text-align: start;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.add-padding {
+  padding: 0.25lh 1rem;
+}
+
+.indicator {
+  width: 1rem;
+  height: 1rem;
+  margin-left: auto;
+  transition: transform 200ms ease;
+}
+
+.indicator line {
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.indicator .line-v {
+  transform-origin: 50% 50%;
+  transition: transform 200ms ease;
+}
+
+button[data-state=open] .indicator {
+  transform: rotate(180deg);
+}
+
+button[data-state=open] .indicator .line-v {
+  transform: scaleY(0);
+}
+
+[data-melt-accordion-content] {
+  overflow: hidden;
+  max-height: 1000px;
+  opacity: 1;
+  transform: translateY(0);
+  transition: max-height 200ms ease, opacity 200ms ease, padding 200ms ease;
+}
+
+[data-melt-accordion-content][data-state=closed] {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-8px);
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-melt-accordion-content] {
+    transition: none;
+  }
+}</style>

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

@@ -1,9 +1,5 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    value: string;
-    control: Snippet;
-    panel: Snippet;
-};
-declare const PinyaAccordionItem: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { PinyaAccordionItemProps } from "./PinyaAccordionItemProps";
+declare const PinyaAccordionItem: import("svelte").Component<PinyaAccordionItemProps, {}, "">;
 type PinyaAccordionItem = ReturnType<typeof PinyaAccordionItem>;
 export default PinyaAccordionItem;
+//# sourceMappingURL=PinyaAccordionItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaAccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordionItem.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAsEzE,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/ui/components/accordion/PinyaAccordionItemProps.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type PinyaAccordionItemProps = {
+    /** Control snippet, used as the clickable header content. */
+    control: Snippet;
+    /** Optional custom indicator snippet for open/close state. */
+    controlIndicator?: Snippet;
+    /** Panel snippet for expandable content. */
+    panel?: Snippet;
+    /** Optional explicit value for the item; defaults to a generated id. */
+    pinyaValue?: string;
+    /** When true, renders a header-only row with no panel. */
+    hasNoChild?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+//# sourceMappingURL=PinyaAccordionItemProps.d.ts.map

package/dist/ui/components/accordion/PinyaAccordionItemProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaAccordionItemProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordionItemProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,uBAAuB,GAAG;IACrC,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAC;IACjB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/ui/components/accordion/PinyaAccordionItemProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/accordion/PinyaAccordionProps.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type PinyaAccordionProps = {
+    /** Accordion contents, typically PinyaAccordionItem components. */
+    children: Snippet;
+    /** Controlled set of open item ids. */
+    openItems?: string[];
+    /** Allow multiple items to be open at once. */
+    multiple?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+//# sourceMappingURL=PinyaAccordionProps.d.ts.map

package/dist/ui/components/accordion/PinyaAccordionProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaAccordionProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordionProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IACjC,mEAAmE;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/ui/components/accordion/PinyaAccordionProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/accordion/accordionContext.d.ts

@@ -0,0 +1,5 @@
+import { Accordion } from "melt/builders";
+export declare const accordionContextKey: unique symbol;
+export type AccordionInstance = InstanceType<typeof Accordion>;
+export type AccordionContext = AccordionInstance["getItem"];
+//# sourceMappingURL=accordionContext.d.ts.map

package/dist/ui/components/accordion/accordionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionContext.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/accordionContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,eAAO,MAAM,mBAAmB,eAAoC,CAAC;AAErE,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAC/D,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC"}

package/dist/ui/components/accordion/accordionContext.js

@@ -0,0 +1,2 @@
+import { Accordion } from "melt/builders";
+export const accordionContextKey = Symbol("pinya-accordion-context");

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC"}

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

@@ -2,3 +2,4 @@ export * from "./accordion";
 export { default as ModalBase } from "./ModalBase.svelte";
 export { default as FourPartCard } from "./FourPartCard.svelte";
 export { default as SocialSection } from "./SocialSection.svelte";
+//# sourceMappingURL=index.d.ts.map