@turnipxenon/pineapple 4.5.1 → 5.0.0-alpha.10

package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.d.ts

@@ -1,5 +1,6 @@
 export declare enum ButtonVariant {
-    Default = 0,
-    Image = 1,
-    SmallIcon = 2
+    Default = "default",
+    Image = "image-button",
+    SmallIcon = "small-icon-button"
 }
+//# sourceMappingURL=ButtonVariant.d.ts.map

package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonVariant.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButtonCommon/ButtonVariant.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACxB,OAAO,YAAY;IACnB,KAAK,iBAAiB;IACtB,SAAS,sBAAuB;CAChC"}

package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.js

@@ -1,6 +1,6 @@
 export var ButtonVariant;
 (function (ButtonVariant) {
-    ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
-    ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
-    ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
+    ButtonVariant["Default"] = "default";
+    ButtonVariant["Image"] = "image-button";
+    ButtonVariant["SmallIcon"] = "small-icon-button";
 })(ButtonVariant || (ButtonVariant = {}));

package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.d.ts

@@ -1,8 +1,12 @@
 import { type GeneralUIProps } from "../GeneralUIProps";
 import { ButtonVariant } from "./ButtonVariant";
 export type PinyaButtonCommonProps = GeneralUIProps & {
+    /** @deprecated */
     paddingClass?: string;
     buttonVariant?: ButtonVariant;
+    /** @deprecated */
     colorClass?: string;
+    /** @deprecated */
     classes?: string;
 };
+//# sourceMappingURL=PinyaButtonCommonProps.d.ts.map

package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaButtonCommonProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAC;AAEjF,MAAM,MAAM,sBAAsB,GAC/B,cAAc,GACd;IACF,kBAAkB;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAA"}

package/dist/ui/elements/PinyaButtonCommon/createButtonClass.d.ts

@@ -1,2 +1,3 @@
 import type { PinyaButtonCommonProps } from "./PinyaButtonCommonProps";
 export declare const createButtonClass: (props: PinyaButtonCommonProps) => string;
+//# sourceMappingURL=createButtonClass.d.ts.map

package/dist/ui/elements/PinyaButtonCommon/createButtonClass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createButtonClass.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButtonCommon/createButtonClass.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGvE,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,WAkB9D,CAAC"}

package/dist/ui/elements/PinyaButtonCommon/createButtonClass.js

@@ -2,30 +2,12 @@ import { ColorScheme } from "../ColorScheme";
 import { ButtonVariant } from "./ButtonVariant";
 export const createButtonClass = (props) => {
     let { colorScheme, paddingClass, buttonVariant, colorClass, classes } = props;
-    colorScheme ??= ColorScheme.Primary;
-    buttonVariant ??= ButtonVariant.Default;
-    paddingClass ??= buttonVariant === ButtonVariant.Image
-        ? "pl-3 pr-3 pt-2 pb-2"
-        : "pl-3 pr-3";
-    colorClass ??= "";
-    classes ??= "";
-    const chooseTailwindClass = () => {
-        switch (colorScheme) {
-            case ColorScheme.Custom:
-                return colorClass;
-            case ColorScheme.Warning:
-                return "bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110";
-            case ColorScheme.Surface:
-                return "bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110";
-            default:
-                console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
-            // eslint-disable-next-line no-fallthrough
-            case ColorScheme.Primary:
-                return "bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110";
-        }
-    };
-    const tailwindClass = chooseTailwindClass();
-    return `btn rounded-2xl text-xl font-bold 
-	${buttonVariant === ButtonVariant.SmallIcon ? 'small-icon-button' : ''}
-	${tailwindClass} ${paddingClass} ${classes}`;
+    colorScheme !== null && colorScheme !== void 0 ? colorScheme : (colorScheme = ColorScheme.Primary);
+    buttonVariant !== null && buttonVariant !== void 0 ? buttonVariant : (buttonVariant = ButtonVariant.Default);
+    colorClass !== null && colorClass !== void 0 ? colorClass : (colorClass = "");
+    classes !== null && classes !== void 0 ? classes : (classes = "");
+    return `btn rounded-2xl text-xl font-bold 
+	${buttonVariant === ButtonVariant.SmallIcon ? 'small-icon-button' : ''}
+	${colorScheme.toString()}
+	${paddingClass} ${classes}`;
 };

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

@@ -1,3 +1,4 @@
 export * from "./ButtonVariant";
 export * from "./createButtonClass";
 export * from "./PinyaButtonCommonProps";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButtonCommon/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC"}

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

@@ -1,30 +1,78 @@
-<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",
-	colorClass = "bg-surface-200 dark:bg-surface-900",
-	marginClass = "",
-	className,
-	includeDataNoSnippet = false,
-	children
-}: PinyaCardProps = $props();
-
-let cardClass = $derived(`card text-start rounded-xl
-	${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass} ${colorClass}`);
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @component
+# Note:
+When with texts, wrap the text content inside a div so flex wont apply
+-->
+
+<script lang="ts">
+	import type { PinyaCardProps } from "./PinyaCardProps";
+
+	let _props: PinyaCardProps = $props();
+
+	let cardClass = $derived(`pinya-card
+	${_props.paddingClass ?? "default-padding"} ${_props.flexClass ?? "default-flex"} ${_props.className ?? ""}
+	${_props.widthClass ?? "default-width"} ${_props.borderClass ?? "default-border"} ${_props.marginClass ?? "default-margin"}
+	${_props.colorClass ?? "default-color"}
+	${_props.class ?? ""}
+	`);
 </script>
 
-{#if includeDataNoSnippet}
-	<div data-nosnippet class={cardClass}>
-		{@render children?.()}
+{#if _props.includeDataNoSnippet}
+	<div
+		id={_props.id}
+		data-nosnippet
+		class={`card text-start rounded-xl pinya-card ${cardClass}`}
+	>
+		{@render _props?.children?.()}
 	</div>
 {:else }
-	<div class={cardClass}>
-		{@render children?.()}
+	<div
+		id={_props.id}
+		class={`card text-start rounded-xl pinya-card ${cardClass}`}
+	>
+		{@render _props?.children?.()}
 	</div>
 {/if}
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+.default-color {
+  --current-surface-color: var(--pinya-card-bg-color);
+  background-color: var(--pinya-card-bg-color);
+}
+
+:global html {
+  --pinya-card-bg-color: var(--color-surface-200);
+  --pinya-card-border-color: var(--color-primary-500);
+}
+:global html.dark {
+  --pinya-card-bg-color: var(--color-surface-900);
+  --pinya-card-border-color: transparent;
+}
+:global :root {
+  scrollbar-color: var(--color-primary-400-600) var(--pinya-card-bg-color);
+  scrollbar-width: thin;
+}
+
+/*might need to switch*/
+.default-padding {
+  padding: 1lh calc(var(--spacing) * 8);
+}
+
+.default-flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.default-width {
+  width: 100%;
+  max-width: var(--container-md);
+}
+
+.default-border {
+  border-width: 2px;
+  border-color: var(--pinya-card-border-color);
+}</style>

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

@@ -1,7 +1,9 @@
+import type { PinyaCardProps } from "./PinyaCardProps";
 /**
+ * # Note:
  * 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;
+//# sourceMappingURL=PinyaCard.svelte.d.ts.map

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

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

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

@@ -1,11 +1,20 @@
-import type { WrapperProps } from '..';
-export interface PinyaCardProps extends WrapperProps {
+import type { WrapperProps } from "..";
+import type { HTMLAttributes } from "svelte/elements";
+export type PinyaCardProps = HTMLAttributes<HTMLDivElement> & WrapperProps & {
+    /** @deprecated */
     paddingClass?: string;
+    /** @deprecated */
     className?: string;
+    /** @deprecated */
     flexClass?: string;
+    /** @deprecated */
     widthClass?: string;
+    /** @deprecated */
     borderClass?: string;
+    /** @deprecated */
     marginClass?: string;
+    /** @deprecated */
     colorClass?: string;
     includeDataNoSnippet?: boolean;
-}
+};
+//# sourceMappingURL=PinyaCardProps.d.ts.map

package/dist/ui/elements/PinyaCard/PinyaCardProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaCardProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaCard/PinyaCardProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,YAAY,GAAG;IAC5E,kBAAkB;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAA"}

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

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

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

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

package/dist/ui/elements/Placeholder.svelte

@@ -1,14 +1,24 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @component Placeholder
+ todo: consider current-surface scss
+ -->
+
 <script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
 	let {
 		isCircle = false,
 		classes = '',
+		...props
 	}: {
 		isCircle?: boolean;
 		classes?: string;
-	} = $props();
+	} & HTMLAttributes<HTMLDivElement>= $props();
 </script>
 
 <div
+	{...props}
 	class="
 	{isCircle ?'placeholder-circle' : 'placeholder'}
 	animate-pulse bg-surface-600 dark:bg-surface-800

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

@@ -1,7 +1,13 @@
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     isCircle?: boolean;
     classes?: string;
-};
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * Placeholder
+ * todo: consider current-surface scss
+ */
 declare const Placeholder: import("svelte").Component<$$ComponentProps, {}, "">;
 type Placeholder = ReturnType<typeof Placeholder>;
 export default Placeholder;
+//# sourceMappingURL=Placeholder.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/Placeholder.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErD,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAuBpC;;;GAGG;AACH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ui/elements/TextChip/TextChip.svelte

@@ -1,3 +1,9 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @component TextChip
+ todo: consider current-surface scss and tailwind cleanup
+ -->
+
 <script lang="ts">
 	import type { TextChipProps } from "./TextChipProps";
 
@@ -12,4 +18,4 @@
         background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
         color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
     }
-</style>
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextChip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/TextChip/TextChip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAkBrD;;;GAGG;AACH,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ui/elements/TextChip/TextChipProps.d.ts

@@ -2,3 +2,4 @@ import type { WrapperProps } from "../index";
 export interface TextChipProps extends WrapperProps {
     queryClass?: string;
 }
+//# sourceMappingURL=TextChipProps.d.ts.map

package/dist/ui/elements/TextChip/TextChipProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextChipProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/TextChip/TextChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,YAAY;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

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

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

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

package/dist/ui/elements/TextLink.svelte

@@ -1,17 +1,63 @@
+<!-- @component TextLink
+ todo: consider current-surface scss
+ -->
+
 <script lang="ts">
-	import { type Snippet } from 'svelte';
+	import type { TextLinkProps } from "./TextLinkProps";
 
 	let {
 		children,
-		href
-	}: { href: string, children: Snippet } = $props();
+		...props
+	}: TextLinkProps = $props();
 </script>
 
-<a
-	{href}
-	class="visited:text-surface-950 dark:visited:text-surface-400">
+<a {...props}>
 	{@render children?.()}
 </a>
 
 <style>
-</style>
+    :global {
+        :root {
+            --link-color: var(--color-secondary-400);
+            --visited-link-color: var(--color-secondary-700);
+        }
+
+        html.dark {
+		        /* when adding new surfaces, apply the property like this */
+            --link-color-dark: var(--color-secondary-300);
+            --visited-link-color-dark: var(--color-secondary-400);
+        }
+
+        a.a-as-btn {
+            text-decoration: none;
+        }
+
+        a:not(.a-as-btn) {
+            text-decoration: underline;
+            color: var(--link-color);
+        }
+
+		    /* when adding new states for elements, apply the property like this */
+        html.dark a:not(.a-as-btn) {
+            color: var(--link-color-dark);
+        }
+
+        a:not(.a-as-btn):hover, a:not(.a-as-btn):focus {
+            filter: brightness(150%);
+        }
+
+        /*  we're fighting a specificity war with skeleton components */
+
+        .a-as-btn:hover {
+            filter: brightness(110%);
+        }
+
+        a:not(.a-as-btn):visited {
+            color: var(--visited-link-color);
+        }
+
+        html.dark a:not(.a-as-btn):visited {
+            color: var(--visited-link-color-dark);
+        }
+    }
+</style>

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

@@ -1,8 +1,9 @@
-import { type Snippet } from 'svelte';
-type $$ComponentProps = {
-    href: string;
-    children: Snippet;
-};
-declare const TextLink: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { TextLinkProps } from "./TextLinkProps";
+/**
+ * TextLink
+ * todo: consider current-surface scss
+ */
+declare const TextLink: import("svelte").Component<TextLinkProps, {}, "">;
 type TextLink = ReturnType<typeof TextLink>;
 export default TextLink;
+//# sourceMappingURL=TextLink.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/TextLink.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAqBrD;;;GAGG;AACH,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+export type TextLinkProps = {
+    /** Link destination. */
+    href: string;
+    /** Link label content. */
+    children: Snippet;
+} & HTMLAnchorAttributes;
+//# sourceMappingURL=TextLinkProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextLinkProps.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/TextLinkProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC3B,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,QAAQ,EAAE,OAAO,CAAC;CAClB,GAAG,oBAAoB,CAAC"}

package/dist/ui/elements/TextLinkProps.js

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

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

@@ -2,3 +2,4 @@ import type { Snippet } from 'svelte';
 export type WrapperProps = {
     children: Snippet;
 };
+//# sourceMappingURL=WrapperProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WrapperProps.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/WrapperProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC"}

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

@@ -11,3 +11,4 @@ export * from "./PinyaButton";
 export * from "./PinyaAnchorButton";
 export * from "./TextChip";
 export * from "./CodeBlock";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AAGpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAE1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

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

@@ -1,34 +1,131 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts" generics="T extends string">
-	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
-	import { Combobox } from "@skeletonlabs/skeleton-svelte";
+	import type { PinyaComboboxProps } from "./PinyaComboboxProps";
+	import { Combobox } from "melt/builders";
 
 	let {
+		// todo: fix this
 		contentZIndex = "auto",
 		value = $bindable(),
-		onValueChange = () => {},
+		onValueChange = () => {
+		},
 		onValueChangeBase = undefined,
 		...props
 	}: PinyaComboboxProps<T> = $props();
 
-	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
-		value = e.value as T[];
-		onValueChange(e);
+	const onValueChangeBaseImpl = (e: T | undefined) => {
+		value = e;
+		console.log("change", e);
+		onValueChange({
+			value: e,
+			items: props.data
+		});
 	};
+
+	const combobox = new Combobox<T, false>({
+		value: props.defaultValue,
+		inputValue: function() {
+			return props.data.find((o) => o.value === value)?.label ?? "---";
+		},
+		onValueChange: onValueChangeBase ?? onValueChangeBaseImpl
+	});
+
+	const filtered = $derived.by(() => {
+		if (!combobox.touched) return props.data;
+		return props.data.filter((o) =>
+			o.value.toLowerCase().includes(combobox.inputValue.trim().toLowerCase())
+		);
+	});
 </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}
-/>
+<!--
+@component
+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}`}>
+	<label {...combobox.label}>{props.label}</label>
+	<div class="pinya-combobox-control">
+		<input {...combobox.input} />
+		<button class="size-[3rem]" {...combobox.trigger}>
+			<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>
+			</svg>
+		</button>
+	</div>
+
+
+	<div {...combobox.content}>
+		{#each filtered as option (option)}
+			<div {...combobox.getOption(option.value)}>
+				{option.label}
+				{#if combobox.isSelected(option.value)}
+					✓
+				{/if}
+			</div>
+		{:else}
+			<span>No results found</span>
+		{/each}
+	</div>
+</div>
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+[data-melt-combobox-content] {
+  --current-surface-color: var(--body-background-color);
+  background-color: var(--current-surface-color);
+}
+
+[data-melt-combobox-content] {
+  border-color: var(--color-primary-500);
+  border-style: var(--tw-border-style);
+  border-radius: var(--radius-xl);
+  border-width: 2px;
+  font-size: var(--text-base);
+  display: none;
+  flex-direction: column;
+  gap: 0.25lh;
+  padding: 0.25lh 0.5em;
+  box-shadow: 3px 3px 3px var(--shadow-color);
+}
+[data-melt-combobox-content][data-open] {
+  display: flex;
+}
+[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);
+}
+[data-melt-combobox-content] [data-melt-combobox-option][aria-selected=true] {
+  background-color: light-dark(var(--color-secondary-400), var(--color-secondary-600));
+}
+
+.pinya-combobox-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.pinya-combobox-control {
+  background-color: transparent;
+  border-color: var(--color-primary-500);
+  border-style: var(--tw-border-style);
+  border-radius: var(--radius-xl);
+  border-width: 2px;
+  font-size: var(--text-base);
+  padding-right: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+.pinya-combobox-control input {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  padding: var(--spacing-2) var(--spacing-4);
+  padding-right: 0;
+}</style>