@noahbaumgartner/svelte-ui 0.0.5 → 0.0.7

package/dist/components/toaster/toast.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LucideIcon } from '@lucide/svelte';
+import type { IconComponent } from '../../icon.js';
 export type ToastAction = {
     label: string;
     onclick: () => void;
@@ -6,8 +6,8 @@ export type ToastAction = {
 export type ToastOptions = {
     /** Updates the toast with this id instead of adding a new one. */
     id?: number;
-    /** Any Lucide icon (import from `svelte-ui/icons`), shown on the left. */
-    icon?: LucideIcon;
+    /** Any icon component, e.g. from `@lucide/svelte`, shown on the left. */
+    icon?: IconComponent;
     /** Shows a Spinner instead of the icon and keeps the toast open until it is updated. */
     loading?: boolean;
     /** Button on the right; clicking it runs `onclick` and dismisses the toast. */

package/dist/components/toggle/Toggle.svelte

@@ -9,11 +9,18 @@
 		pressed?: boolean;
 	};
 
-	let { pressed = $bindable(false), class: className, onclick, ...rest }: Props = $props();
+	let {
+		pressed = $bindable(false),
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...rest
+	}: Props = $props();
 </script>
 
 <Button
 	{...rest}
+	bind:ref
 	variant="secondary"
 	aria-pressed={pressed}
 	class={['toggle', className]}
@@ -24,8 +31,22 @@
 />
 
 <style>
-	:global(.button.toggle[aria-pressed='true']),
-	:global(.button.toggle[aria-pressed='true']:hover:not(:disabled)) {
-		background-color: var(--color-surface-active);
+	@layer svelte-ui {
+		:global(.button.toggle[aria-pressed='true']),
+		:global(.button.toggle[aria-pressed='true']:hover:not(:disabled)) {
+			background-color: var(--color-surface-active);
+		}
+
+		@media (forced-colors: active) {
+			:global(.button.toggle[aria-pressed='true']),
+			:global(.button.toggle[aria-pressed='true']:hover:not(:disabled)) {
+				background-color: Highlight;
+				color: HighlightText;
+			}
+
+			:global(.button.toggle[aria-pressed='false']) {
+				border: 1px solid ButtonText;
+			}
+		}
 	}
 </style>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -3,6 +3,6 @@ import Button from '../button/Button.svelte';
 type Props = Omit<ComponentProps<typeof Button>, 'href' | 'target' | 'rel' | 'type' | 'variant'> & {
     pressed?: boolean;
 };
-declare const Toggle: import("svelte").Component<Props, {}, "pressed">;
+declare const Toggle: import("svelte").Component<Props, {}, "ref" | "pressed">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/components/tooltip/Tooltip.svelte

@@ -14,11 +14,12 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { fade } from 'svelte/transition';
 
 	type Side = 'top' | 'right' | 'bottom' | 'left';
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
 		/** Whether the tooltip is shown. Bindable. */
 		open?: boolean;
 		/** Preferred side; flips to the opposite one when there is not enough room. */
@@ -29,9 +30,19 @@
 		trigger: Snippet<[TooltipTriggerProps]>;
 		/** Tooltip content; may contain `Kbd` / `KbdGroup`. */
 		children: Snippet;
+		ref?: HTMLSpanElement | null;
 	};
 
-	let { open = $bindable(false), side = 'top', delay = 0, trigger, children }: Props = $props();
+	let {
+		open = $bindable(false),
+		side = 'top',
+		delay = 0,
+		trigger,
+		children,
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: Props = $props();
 
 	const id = $props.id();
 	const gap = 6;
@@ -45,6 +56,10 @@
 	// A click dismisses the tooltip until the pointer leaves the trigger.
 	let pressed = false;
 
+	function reducedMotion() {
+		return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
+
 	function show(wait: number) {
 		clearTimeout(timer);
 		if (pressed) return;
@@ -135,7 +150,7 @@
 	});
 </script>
 
-<span class="tooltip">
+<span {...rest} bind:this={ref} class={['tooltip', className]}>
 	{@render trigger(triggerProps)}
 
 	{#if open}
@@ -148,7 +163,7 @@
 			style:left="{position.left}px"
 			style:--tooltip-arrow="{position.arrow}px"
 			{@attach popover}
-			transition:fade={{ duration: 100 }}
+			transition:fade={{ duration: reducedMotion() ? 0 : 100 }}
 		>
 			{@render children()}
 			<span class="tooltip-arrow" aria-hidden="true"></span>
@@ -157,68 +172,82 @@
 </span>
 
 <style>
-	.tooltip {
-		display: inline-flex;
-		height: fit-content;
-	}
+	@layer svelte-ui {
+		.tooltip {
+			display: inline-flex;
+			height: fit-content;
+		}
 
-	.tooltip-content {
-		position: fixed;
-		inset: auto;
-		margin: 0;
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		width: max-content;
-		max-width: 280px;
-		padding: 6px 10px;
-		overflow: visible;
-		font-size: 12px;
-		line-height: 1.4;
-		text-wrap: balance;
-		background-color: var(--color-ink);
-		color: var(--color-base);
-		border: none;
-		border-radius: 10px;
-		pointer-events: none;
-	}
+		.tooltip-content {
+			position: fixed;
+			inset: auto;
+			margin: 0;
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			width: max-content;
+			max-width: 280px;
+			padding: 6px 10px;
+			overflow: visible;
+			font-size: 12px;
+			line-height: 1.4;
+			text-wrap: balance;
+			background-color: var(--color-ink);
+			color: var(--color-base);
+			border: none;
+			border-radius: 10px;
+			pointer-events: none;
+		}
 
-	.tooltip-content :global(:is(.kbd, .kbd-group)) {
-		font-size: inherit;
-	}
+		.tooltip-content :global(:is(.kbd, .kbd-group)) {
+			font-size: inherit;
+		}
 
-	.tooltip-arrow {
-		position: absolute;
-		width: 8px;
-		height: 8px;
-		background-color: inherit;
-		border-radius: 2px;
-		transform: rotate(45deg);
-	}
+		.tooltip-arrow {
+			position: absolute;
+			width: 8px;
+			height: 8px;
+			background-color: inherit;
+			border-radius: 2px;
+			transform: rotate(45deg);
+		}
 
-	.tooltip-content--top .tooltip-arrow,
-	.tooltip-content--bottom .tooltip-arrow {
-		left: calc(var(--tooltip-arrow) - 4px);
-	}
+		.tooltip-content--top .tooltip-arrow,
+		.tooltip-content--bottom .tooltip-arrow {
+			left: calc(var(--tooltip-arrow) - 4px);
+		}
 
-	.tooltip-content--left .tooltip-arrow,
-	.tooltip-content--right .tooltip-arrow {
-		top: calc(var(--tooltip-arrow) - 4px);
-	}
+		.tooltip-content--left .tooltip-arrow,
+		.tooltip-content--right .tooltip-arrow {
+			top: calc(var(--tooltip-arrow) - 4px);
+		}
 
-	.tooltip-content--top .tooltip-arrow {
-		bottom: -3px;
-	}
+		.tooltip-content--top .tooltip-arrow {
+			bottom: -3px;
+		}
 
-	.tooltip-content--bottom .tooltip-arrow {
-		top: -3px;
-	}
+		.tooltip-content--bottom .tooltip-arrow {
+			top: -3px;
+		}
 
-	.tooltip-content--left .tooltip-arrow {
-		right: -3px;
-	}
+		.tooltip-content--left .tooltip-arrow {
+			right: -3px;
+		}
+
+		.tooltip-content--right .tooltip-arrow {
+			left: -3px;
+		}
+
+		@media (forced-colors: active) {
+			.tooltip-content {
+				border: 1px solid CanvasText;
+				background-color: Canvas;
+				color: CanvasText;
+			}
 
-	.tooltip-content--right .tooltip-arrow {
-		left: -3px;
+			.tooltip-arrow {
+				display: none;
+			}
+		}
 	}
 </style>

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -9,8 +9,9 @@ export type TooltipTriggerProps = {
     [key: symbol]: Attachment<HTMLElement>;
 };
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Side = 'top' | 'right' | 'bottom' | 'left';
-type Props = {
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
     /** Whether the tooltip is shown. Bindable. */
     open?: boolean;
     /** Preferred side; flips to the opposite one when there is not enough room. */
@@ -21,7 +22,8 @@ type Props = {
     trigger: Snippet<[TooltipTriggerProps]>;
     /** Tooltip content; may contain `Kbd` / `KbdGroup`. */
     children: Snippet;
+    ref?: HTMLSpanElement | null;
 };
-declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+declare const Tooltip: import("svelte").Component<Props, {}, "ref" | "open">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/icon.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+/**
+ * A Svelte component that renders an icon, from any icon library
+ * (`@lucide/svelte`, `phosphor-svelte`, an inline SVG component, …).
+ *
+ * Components only pass `class` and `aria-hidden`; the size comes from CSS, so
+ * the icon should fill its box (`width`/`height: 1em` or a fixed size is fine).
+ */
+export type IconComponent = Component<{
+    class?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+}>;

package/dist/icon.js

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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { IconComponent } from './icon.js';
 export { default as Accordion } from './components/accordion/Accordion.svelte';
 export { default as AccordionItem } from './components/accordion/AccordionItem.svelte';
 export { default as AlertDialog } from './components/alert-dialog/AlertDialog.svelte';
@@ -21,6 +22,9 @@ export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 export { default as ColorPicker } from './components/color-picker/ColorPicker.svelte';
 export { default as ContextMenu } from './components/context-menu/ContextMenu.svelte';
 export { default as ContextMenuItem } from './components/context-menu/ContextMenuItem.svelte';
+export { default as ContextMenuSeparator } from './components/context-menu/ContextMenuSeparator.svelte';
+export { default as ContextMenuLabel } from './components/context-menu/ContextMenuLabel.svelte';
+export { default as ContextMenuInfo } from './components/context-menu/ContextMenuInfo.svelte';
 export { default as Dialog } from './components/dialog/Dialog.svelte';
 export { default as Drawer } from './components/drawer/Drawer.svelte';
 export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
@@ -35,6 +39,7 @@ export { default as FieldSeparator } from './components/field/FieldSeparator.sve
 export { default as FieldSet } from './components/field/FieldSet.svelte';
 export { default as Footer } from './components/footer/Footer.svelte';
 export { default as FooterColumn } from './components/footer/FooterColumn.svelte';
+export { default as Image } from './components/image/Image.svelte';
 export { default as Input } from './components/input/Input.svelte';
 export { default as Kbd } from './components/kbd/Kbd.svelte';
 export { default as KbdGroup } from './components/kbd/KbdGroup.svelte';
@@ -53,6 +58,7 @@ export { default as PreviewCard } from './components/preview-card/PreviewCard.sv
 export { default as Progress } from './components/progress/Progress.svelte';
 export { default as RadioGroup } from './components/radio-group/RadioGroup.svelte';
 export { default as RadioGroupItem } from './components/radio-group/RadioGroupItem.svelte';
+export { default as Section } from './components/section/Section.svelte';
 export { default as Select, type SelectOption } from './components/select/Select.svelte';
 export { default as Separator } from './components/separator/Separator.svelte';
 export { default as Sidebar } from './components/sidebar/Sidebar.svelte';

package/dist/index.js

@@ -21,6 +21,9 @@ export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 export { default as ColorPicker } from './components/color-picker/ColorPicker.svelte';
 export { default as ContextMenu } from './components/context-menu/ContextMenu.svelte';
 export { default as ContextMenuItem } from './components/context-menu/ContextMenuItem.svelte';
+export { default as ContextMenuSeparator } from './components/context-menu/ContextMenuSeparator.svelte';
+export { default as ContextMenuLabel } from './components/context-menu/ContextMenuLabel.svelte';
+export { default as ContextMenuInfo } from './components/context-menu/ContextMenuInfo.svelte';
 export { default as Dialog } from './components/dialog/Dialog.svelte';
 export { default as Drawer } from './components/drawer/Drawer.svelte';
 export { default as EmptyState } from './components/empty-state/EmptyState.svelte';
@@ -35,6 +38,7 @@ export { default as FieldSeparator } from './components/field/FieldSeparator.sve
 export { default as FieldSet } from './components/field/FieldSet.svelte';
 export { default as Footer } from './components/footer/Footer.svelte';
 export { default as FooterColumn } from './components/footer/FooterColumn.svelte';
+export { default as Image } from './components/image/Image.svelte';
 export { default as Input } from './components/input/Input.svelte';
 export { default as Kbd } from './components/kbd/Kbd.svelte';
 export { default as KbdGroup } from './components/kbd/KbdGroup.svelte';
@@ -53,6 +57,7 @@ export { default as PreviewCard } from './components/preview-card/PreviewCard.sv
 export { default as Progress } from './components/progress/Progress.svelte';
 export { default as RadioGroup } from './components/radio-group/RadioGroup.svelte';
 export { default as RadioGroupItem } from './components/radio-group/RadioGroupItem.svelte';
+export { default as Section } from './components/section/Section.svelte';
 export { default as Select } from './components/select/Select.svelte';
 export { default as Separator } from './components/separator/Separator.svelte';
 export { default as Sidebar } from './components/sidebar/Sidebar.svelte';

package/dist/internal/icons/ArrowDown.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['path', { d: 'M12 5v14' }],
+		['path', { d: 'm19 12-7 7-7-7' }]
+	]}
+/>

package/dist/internal/icons/ArrowDown.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const ArrowDown: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type ArrowDown = ReturnType<typeof ArrowDown>;
+export default ArrowDown;

package/dist/internal/icons/ArrowUp.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['path', { d: 'm5 12 7-7 7 7' }],
+		['path', { d: 'M12 19V5' }]
+	]}
+/>

package/dist/internal/icons/ArrowUp.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const ArrowUp: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type ArrowUp = ReturnType<typeof ArrowUp>;
+export default ArrowUp;

package/dist/internal/icons/Calendar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['path', { d: 'M8 2v3' }],
+		['path', { d: 'M16 2v3' }],
+		['rect', { x: '3', y: '3', width: '18', height: '18', rx: '2' }],
+		['path', { d: 'M3 9h18' }]
+	]}
+/>

package/dist/internal/icons/Calendar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Calendar: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/internal/icons/Check.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon {...props} nodes={[['path', { d: 'M20 6 9 17l-5-5' }]]} />

package/dist/internal/icons/Check.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Check: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Check = ReturnType<typeof Check>;
+export default Check;

package/dist/internal/icons/ChevronDown.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon {...props} nodes={[['path', { d: 'm6 9 6 6 6-6' }]]} />

package/dist/internal/icons/ChevronDown.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const ChevronDown: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type ChevronDown = ReturnType<typeof ChevronDown>;
+export default ChevronDown;

package/dist/internal/icons/ChevronLeft.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon {...props} nodes={[['path', { d: 'm15 18-6-6 6-6' }]]} />

package/dist/internal/icons/ChevronLeft.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const ChevronLeft: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type ChevronLeft = ReturnType<typeof ChevronLeft>;
+export default ChevronLeft;

package/dist/internal/icons/ChevronRight.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon {...props} nodes={[['path', { d: 'm9 18 6-6-6-6' }]]} />

package/dist/internal/icons/ChevronRight.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const ChevronRight: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type ChevronRight = ReturnType<typeof ChevronRight>;
+export default ChevronRight;

package/dist/internal/icons/ChevronUp.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon {...props} nodes={[['path', { d: 'm18 15-6-6-6 6' }]]} />

package/dist/internal/icons/ChevronUp.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const ChevronUp: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type ChevronUp = ReturnType<typeof ChevronUp>;
+export default ChevronUp;

package/dist/internal/icons/ChevronsUpDown.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['path', { d: 'm7 15 5 5 5-5' }],
+		['path', { d: 'm7 9 5-5 5 5' }]
+	]}
+/>

package/dist/internal/icons/ChevronsUpDown.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const ChevronsUpDown: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type ChevronsUpDown = ReturnType<typeof ChevronsUpDown>;
+export default ChevronsUpDown;

package/dist/internal/icons/Clock.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['circle', { cx: '12', cy: '12', r: '10' }],
+		['path', { d: 'M12 6v6l4 2' }]
+	]}
+/>

package/dist/internal/icons/Clock.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Clock: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Clock = ReturnType<typeof Clock>;
+export default Clock;

package/dist/internal/icons/Ellipsis.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon
+	{...props}
+	nodes={[
+		['circle', { cx: '12', cy: '12', r: '1' }],
+		['circle', { cx: '19', cy: '12', r: '1' }],
+		['circle', { cx: '5', cy: '12', r: '1' }]
+	]}
+/>

package/dist/internal/icons/Ellipsis.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Ellipsis: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Ellipsis = ReturnType<typeof Ellipsis>;
+export default Ellipsis;

package/dist/internal/icons/Icon.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	/*
+	 * Renders the small glyphs the components draw themselves (checkmarks,
+	 * chevrons, …) so the library needs no icon package. The paths are taken
+	 * from Lucide (https://lucide.dev), ISC License; portions Feather, MIT
+	 * License, Copyright (c) 2013-2022 Cole Bemis. Icons passed in through an
+	 * `icon` prop come from the consumer's own icon library, not from here.
+	 */
+	import type { SVGAttributes } from 'svelte/elements';
+
+	type GlyphNode = [tag: string, attrs: Record<string, string | number>];
+
+	type Props = SVGAttributes<SVGSVGElement> & { nodes: GlyphNode[] };
+
+	let { nodes, ...rest }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	{...rest}
+>
+	{#each nodes as [tag, attrs], i (i)}
+		<svelte:element this={tag} {...attrs} />
+	{/each}
+</svg>

package/dist/internal/icons/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SVGAttributes } from 'svelte/elements';
+type GlyphNode = [tag: string, attrs: Record<string, string | number>];
+type Props = SVGAttributes<SVGSVGElement> & {
+    nodes: GlyphNode[];
+};
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/internal/icons/Minus.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
+	import Icon from './Icon.svelte';
+
+	let props: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Icon {...props} nodes={[['path', { d: 'M5 12h14' }]]} />

package/dist/internal/icons/Minus.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from 'svelte/elements';
+declare const Minus: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Minus = ReturnType<typeof Minus>;
+export default Minus;