compote-ui 0.2.0 → 0.5.0

package/dist/components/tree-view/tree-view.svelte

@@ -0,0 +1,210 @@
+<script lang="ts" generics="T extends TreeNode">
+	import { TreeView, createTreeCollection } from '@ark-ui/svelte/tree-view';
+	import { useFilter } from '@ark-ui/svelte/locale';
+	import type { TreeNode, TreeViewProps } from './types';
+	import { Debounced } from 'runed';
+	import PhX from '../../icons/PhX.svelte';
+	import PhCaretRight from '../../icons/PhCaretRight.svelte';
+	import PhMinus from '../../icons/PhMinus.svelte';
+	import PhCheck from '../../icons/PhCheck.svelte';
+	import PhListMagnifyingGlass from '../../icons/PhListMagnifyingGlass.svelte';
+	import PhArrowsInSimple from '../../icons/PhArrowsInSimple.svelte';
+	import { Button, Field } from '../..';
+	import { SvelteSet } from 'svelte/reactivity';
+	import PhMagnifyingGlass from '../../icons/PhMagnifyingGlass.svelte';
+
+	let {
+		items = [],
+		label,
+		// eslint-disable-next-line no-useless-assignment
+		contextNode = $bindable(null),
+		selectedValue = $bindable([]),
+		checkedValue = $bindable([]),
+		selectionMode = 'single',
+		onSelectionChange,
+		onExpandedChange,
+		onCheckedChange,
+		...restProps
+	}: TreeViewProps<T> = $props();
+
+	const filterFns = useFilter({ sensitivity: 'base' });
+	let searchTerm: string | undefined = $state();
+	const debouncedSearchTerm = new Debounced(() => searchTerm, 250);
+	const baseCollection = $derived(
+		createTreeCollection<T>({
+			nodeToValue: (node) => node.value.toString(),
+			nodeToString: (node) => node.label,
+			rootNode: { value: 'ROOT', label: '', children: items } as unknown as T
+		})
+	);
+	const collection = $derived.by(() => {
+		const term = debouncedSearchTerm.current ?? '';
+		return term.length > 0
+			? baseCollection.filter((node) => filterFns().contains(node.label, term))
+			: baseCollection;
+	});
+	const getParentValues = (targetValues: string[]): string[] => {
+		if (!targetValues?.length) return [];
+		const allParentValues = new SvelteSet<string>();
+		for (const targetValue of targetValues) {
+			const parentNodes = baseCollection.getParentNodes(targetValue);
+			if (parentNodes) {
+				parentNodes.forEach((node) => allParentValues.add(node.value.toString()));
+			}
+		}
+		return Array.from(allParentValues);
+	};
+
+	// User's manually expanded state — initialized from selected parents
+	let userExpandedValue = $state<string[]>(getParentValues(selectedValue ?? []));
+
+	// When search is active, expand everything; otherwise use user's state
+	const expandedValue = $derived.by(() => {
+		const cur = debouncedSearchTerm.current ?? '';
+		return cur.length > 0 ? baseCollection.getBranchValues() : userExpandedValue;
+	});
+
+	function handleContextMenu(event: MouseEvent) {
+		event.preventDefault();
+		const target = event.target as HTMLElement;
+		const targetNode = target.closest('[data-part="item"], [data-part="branch-control"]');
+		if (targetNode) {
+			const nodeId = targetNode.getAttribute('data-value');
+			contextNode = nodeId ?? null;
+		}
+	}
+	$inspect('searchTerm:', searchTerm);
+</script>
+
+<div class="flex h-full flex-col" role="none" oncontextmenu={handleContextMenu}>
+	<!--
+    | Varijabla       | Vrednost | Opis |
+    |---|---|---|
+    | `--tree-indent` | `0.75rem` | indent po nivou |
+    | `--tree-icon`   | `1rem`    | širina ikone |
+    | `--tree-gap`    | `0.5rem`  | razmak između elemenata |
+    | `--tree-px`     | `0.75rem` | bazni levi padding
+    -->
+	<TreeView.Root
+		{...restProps}
+		{collection}
+		{selectionMode}
+		{selectedValue}
+		{expandedValue}
+		{checkedValue}
+		onSelectionChange={(details) => {
+			onSelectionChange?.(details);
+		}}
+		onExpandedChange={(details) => {
+			userExpandedValue = details.expandedValue;
+			onExpandedChange?.(details);
+		}}
+		onCheckedChange={(details) => {
+			checkedValue = details.checkedValue;
+			onCheckedChange?.(details);
+		}}
+		class="flex h-full flex-col"
+		style="--tree-indent: 0rem; --tree-icon: 1rem; --tree-gap: 0.5rem; --tree-px: 0.75rem"
+	>
+		{#if label}
+			<TreeView.Label class="px-3 pt-3 text-sm font-medium">{label}</TreeView.Label>
+		{/if}
+
+		<div class="flex gap-2 p-3">
+			<TreeView.Context>
+				{#snippet render(tree)}
+					<Button
+						variant="outline"
+						size="icon"
+						title="Collapse all"
+						onclick={() => tree().collapse()}
+					>
+						<PhArrowsInSimple class="size-4" />
+					</Button>
+				{/snippet}
+			</TreeView.Context>
+
+			<div class="flex-1">
+				<Field.Root>
+					<Field.Input bind:value={searchTerm} placeholder="Search...">
+						{#snippet startIcon()}
+							<PhMagnifyingGlass class="size-4" />
+						{/snippet}
+						{#snippet endIcon()}
+							<Button variant="ghost" size="icon" onclick={() => (searchTerm = '')}>
+								<PhX />
+							</Button>
+						{/snippet}
+					</Field.Input>
+				</Field.Root>
+			</div>
+		</div>
+
+		<div class="flex-1 overflow-x-hidden overflow-y-auto">
+			<TreeView.Tree class="flex flex-col text-sm">
+				{#each collection.rootNode.children ?? [] as node, index (node.value)}
+					{@render renderNode(node as T, [index])}
+				{/each}
+			</TreeView.Tree>
+		</div>
+	</TreeView.Root>
+</div>
+
+{#snippet nodeCheckbox()}
+	<TreeView.NodeCheckbox
+		class="border-input bg-background text-primary-foreground inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
+	>
+		<TreeView.NodeCheckboxIndicator>
+			{#snippet indeterminate()}
+				<PhMinus class="size-3" />
+			{/snippet}
+			{#snippet fallback()}
+				<span class="size-3"></span>
+			{/snippet}
+			<PhCheck class="size-3" />
+		</TreeView.NodeCheckboxIndicator>
+	</TreeView.NodeCheckbox>
+{/snippet}
+
+{#snippet renderNode(node: T, indexPath: number[])}
+	<TreeView.NodeProvider {node} {indexPath}>
+		{#if node.children}
+			<TreeView.Branch class="relative">
+				<TreeView.BranchControl
+					class="hover:bg-accent data-selected:bg-accent data-selected:text-accent-foreground flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-3 text-sm select-none"
+					style="padding-inline-start: calc(var(--tree-px) + (var(--depth) - 1) * (var(--tree-indent) + var(--tree-icon) * 0.5))"
+				>
+					{#if selectionMode === 'multiple'}
+						{@render nodeCheckbox()}
+					{/if}
+					<TreeView.BranchIndicator
+						class="text-muted-foreground inline-flex items-center justify-center transition-transform duration-150 data-[state=open]:rotate-90"
+					>
+						<PhCaretRight class="size-3.5" />
+					</TreeView.BranchIndicator>
+					<TreeView.BranchText class="flex-1 truncate">
+						{node.label}
+					</TreeView.BranchText>
+				</TreeView.BranchControl>
+				<TreeView.BranchContent class="relative">
+					<TreeView.BranchIndentGuide class="bg-border absolute inset-y-0 w-px" />
+					{#each node.children as child, childIndex (child.value)}
+						{@render renderNode(child as T, [...indexPath, childIndex])}
+					{/each}
+				</TreeView.BranchContent>
+			</TreeView.Branch>
+		{:else}
+			<TreeView.Item
+				class="hover:bg-accent data-selected:bg-accent data-selected:text-accent-foreground flex w-full cursor-pointer items-center gap-2 rounded-md py-1.5 pr-3 text-sm select-none"
+				style="padding-inline-start: calc(var(--tree-px) + (var(--depth) - 1) * (var(--tree-indent) + var(--tree-icon) * 0.5) + var(--tree-icon) + var(--tree-gap))"
+			>
+				{#if selectionMode === 'multiple'}
+					{@render nodeCheckbox()}
+				{/if}
+				<TreeView.ItemText class="flex-1 truncate">
+					{node.label}
+				</TreeView.ItemText>
+			</TreeView.Item>
+		{/if}
+	</TreeView.NodeProvider>
+{/snippet}

package/dist/components/tree-view/tree-view.svelte.d.ts

@@ -0,0 +1,26 @@
+import { TreeView } from '@ark-ui/svelte/tree-view';
+import type { TreeNode, TreeViewProps } from './types';
+declare function $$render<T extends TreeNode>(): {
+    props: TreeViewProps<T>;
+    exports: {};
+    bindings: "selectedValue" | "checkedValue" | "contextNode";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TreeNode> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selectedValue" | "checkedValue" | "contextNode";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TreeNode>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TreeNode>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TreeView: $$IsomorphicComponent;
+type TreeView<T extends TreeNode> = InstanceType<typeof TreeView<T>>;
+export default TreeView;

package/dist/components/tree-view/types.d.ts

@@ -0,0 +1,12 @@
+import type { UseTreeViewProps } from '@ark-ui/svelte/tree-view';
+export interface TreeNode {
+    value: number | string;
+    label: string;
+    disabled?: boolean;
+    children?: TreeNode[];
+}
+export interface TreeViewProps<T extends TreeNode> extends Omit<UseTreeViewProps<T>, 'collection'> {
+    items?: T[];
+    label?: string;
+    contextNode?: string | null;
+}

package/dist/components/tree-view/types.js

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

package/dist/icons/PhArrowLeft.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhArrowLeft.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhArrowLeft: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhArrowLeft = ReturnType<typeof PhArrowLeft>;
+export default PhArrowLeft;

package/dist/icons/PhArrowRight.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhArrowRight.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhArrowRight: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhArrowRight = ReturnType<typeof PhArrowRight>;
+export default PhArrowRight;

package/dist/icons/PhArrowsInSimple.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE --><path
+		fill="currentColor"
+		d="M213.66 53.66L163.31 104H192a8 8 0 0 1 0 16h-48a8 8 0 0 1-8-8V64a8 8 0 0 1 16 0v28.69l50.34-50.35a8 8 0 0 1 11.32 11.32M112 136H64a8 8 0 0 0 0 16h28.69l-50.35 50.34a8 8 0 0 0 11.32 11.32L104 163.31V192a8 8 0 0 0 16 0v-48a8 8 0 0 0-8-8"
+	/>
+</svg>

package/dist/icons/PhArrowsInSimple.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhArrowsInSimple: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhArrowsInSimple = ReturnType<typeof PhArrowsInSimple>;
+export default PhArrowsInSimple;

package/dist/icons/PhCaretDown.svelte

@@ -2,7 +2,6 @@
 	let { class: className = '', ...restProps } = $props();
 </script>
 
-<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	width="1em"
@@ -16,3 +15,5 @@
 		d="m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32"
 	/>
 </svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhCaretRight.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE --><path
+		fill="currentColor"
+		d="m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32"
+	/>
+</svg>

package/dist/icons/PhCaretRight.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhCaretRight: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhCaretRight = ReturnType<typeof PhCaretRight>;
+export default PhCaretRight;

package/dist/icons/PhCaretUp.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M213.66 165.66a8 8 0 0 1-11.32 0L128 91.31l-74.34 74.35a8 8 0 0 1-11.32-11.32l80-80a8 8 0 0 1 11.32 0l80 80a8 8 0 0 1 0 11.32"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhCaretUp.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhCaretUp: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhCaretUp = ReturnType<typeof PhCaretUp>;
+export default PhCaretUp;

package/dist/icons/PhCheck.svelte

@@ -2,7 +2,6 @@
 	let { class: className = '', ...restProps } = $props();
 </script>
 
-<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	width="1em"
@@ -16,3 +15,5 @@
 		d="m229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69L218.34 66.34a8 8 0 0 1 11.32 11.32"
 	/>
 </svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhFile.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhFile.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhFile: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhFile = ReturnType<typeof PhFile>;
+export default PhFile;

package/dist/icons/PhFileArchive.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+	<path
+		fill="currentColor"
+		d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216h-88v-16h8a8 8 0 0 0 0-16h-8v-16h8a8 8 0 0 0 0-16h-8v-16h8a8 8 0 0 0 0-16h-8v-8a8 8 0 0 0-16 0v8h-8a8 8 0 0 0 0 16h8v16h-8a8 8 0 0 0 0 16h8v16h-8a8 8 0 0 0 0 16h8v16H56V40h88v48a8 8 0 0 0 8 8h48z"
+	/>
+</svg>

package/dist/icons/PhFileArchive.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhFileArchive: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhFileArchive = ReturnType<typeof PhFileArchive>;
+export default PhFileArchive;

package/dist/icons/PhFileText.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="m213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v176a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66M160 51.31L188.69 80H160ZM200 216H56V40h88v48a8 8 0 0 0 8 8h48zm-32-80a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8m0 32a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhFileText.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhFileText: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhFileText = ReturnType<typeof PhFileText>;
+export default PhFileText;

package/dist/icons/PhHeadphones.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+	><!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+	<path
+		fill="currentColor"
+		d="M201.89 54.66A103.43 103.43 0 0 0 128.79 24H128A104 104 0 0 0 24 128v56a24 24 0 0 0 24 24h16a24 24 0 0 0 24-24v-40a24 24 0 0 0-24-24H40.36A88 88 0 0 1 128 40h.67a87.71 87.71 0 0 1 87 80H192a24 24 0 0 0-24 24v40a24 24 0 0 0 24 24h16a24 24 0 0 0 24-24v-56a103.4 103.4 0 0 0-30.11-73.34M64 136a8 8 0 0 1 8 8v40a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8v-48Zm152 48a8 8 0 0 1-8 8h-16a8 8 0 0 1-8-8v-40a8 8 0 0 1 8-8h24Z"
+	/>
+</svg>

package/dist/icons/PhHeadphones.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhHeadphones: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhHeadphones = ReturnType<typeof PhHeadphones>;
+export default PhHeadphones;

package/dist/icons/PhImage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 16v102.75l-26.07-26.06a16 16 0 0 0-22.63 0l-20 20l-44-44a16 16 0 0 0-22.62 0L40 149.37V56ZM40 172l52-52l80 80H40Zm176 28h-21.37l-36-36l20-20L216 181.38zm-72-100a12 12 0 1 1 12 12a12 12 0 0 1-12-12"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhImage.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhImage: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhImage = ReturnType<typeof PhImage>;
+export default PhImage;

package/dist/icons/PhListMagnifyingGlass.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE --><path
+		fill="currentColor"
+		d="M32 64a8 8 0 0 1 8-8h176a8 8 0 0 1 0 16H40a8 8 0 0 1-8-8m8 72h72a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16m88 48H40a8 8 0 0 0 0 16h88a8 8 0 0 0 0-16m109.66 13.66a8 8 0 0 1-11.32 0L206 177.36A40 40 0 1 1 217.36 166l20.3 20.3a8 8 0 0 1 0 11.36M184 168a24 24 0 1 0-24-24a24 24 0 0 0 24 24"
+	/>
+</svg>

package/dist/icons/PhListMagnifyingGlass.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhListMagnifyingGlass: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhListMagnifyingGlass = ReturnType<typeof PhListMagnifyingGlass>;
+export default PhListMagnifyingGlass;

package/dist/icons/PhMagnifyingGlass.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE --><path
+		fill="currentColor"
+		d="m229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32M40 112a72 72 0 1 1 72 72a72.08 72.08 0 0 1-72-72"
+	/>
+</svg>

package/dist/icons/PhMagnifyingGlass.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhMagnifyingGlass: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhMagnifyingGlass = ReturnType<typeof PhMagnifyingGlass>;
+export default PhMagnifyingGlass;

package/dist/icons/PhMicrosoftExcelLogo.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+	><!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+	<path
+		fill="currentColor"
+		d="M200 24H72a16 16 0 0 0-16 16v24H40a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h16v24a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V40a16 16 0 0 0-16-16m-40 80h40v48h-40Zm40-16h-40v-8a16 16 0 0 0-16-16V40h56ZM72 40h56v24H72ZM40 80h104v96H40Zm32 112h56v24H72Zm72 24v-24a16 16 0 0 0 16-16v-8h40v48Zm-78.15-69.12L81.59 128l-15.74-18.88a8 8 0 0 1 12.3-10.24L92 115.5l13.85-16.62a8 8 0 1 1 12.3 10.24L102.41 128l15.74 18.88a8 8 0 0 1-12.3 10.24L92 140.5l-13.85 16.62a8 8 0 0 1-12.3-10.24"
+	/>
+</svg>

package/dist/icons/PhMicrosoftExcelLogo.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhMicrosoftExcelLogo: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhMicrosoftExcelLogo = ReturnType<typeof PhMicrosoftExcelLogo>;
+export default PhMicrosoftExcelLogo;

package/dist/icons/PhStar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M239.18 97.26A16.38 16.38 0 0 0 224.92 86l-59-4.76l-22.78-55.09a16.36 16.36 0 0 0-30.27 0L90.11 81.23L31.08 86a16.46 16.46 0 0 0-9.37 28.86l45 38.83L53 211.75a16.38 16.38 0 0 0 24.5 17.82l50.5-31.08l50.53 31.08A16.4 16.4 0 0 0 203 211.75l-13.76-58.07l45-38.83a16.43 16.43 0 0 0 4.94-17.59m-15.34 5.47l-48.7 42a8 8 0 0 0-2.56 7.91l14.88 62.8a.37.37 0 0 1-.17.48c-.18.14-.23.11-.38 0l-54.72-33.65a8 8 0 0 0-8.38 0l-54.72 33.67c-.15.09-.19.12-.38 0a.37.37 0 0 1-.17-.48l14.88-62.8a8 8 0 0 0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16a8 8 0 0 0 6.72-4.94l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153 91.86a8 8 0 0 0 6.75 4.92l63.92 5.16c.15 0 .24 0 .33.29s0 .4-.16.5"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhStar.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhStar: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhStar = ReturnType<typeof PhStar>;
+export default PhStar;