@jis3r/icons 1.2.0 → 1.6.0

package/dist/components/navbar.svelte

@@ -0,0 +1,78 @@
+<script>
+	import { Button } from './ui/button';
+	import { Sun, Moon } from '@lucide/svelte';
+	import { toggleMode } from 'mode-watcher';
+	import { onMount, onDestroy } from 'svelte';
+	import Github from './github.svelte';
+	import NumberFlow from '@number-flow/svelte';
+	import iflog from 'iflog';
+
+	let stars = $state(0);
+	let interval;
+
+	onMount(async () => {
+		try {
+			const res = await fetch('https://api.github.com/repos/jis3r/icons');
+			if (!res.ok) {
+				throw new Error(`GitHub API error: ${res.status}`);
+			}
+			const data = await res.json();
+
+			const targetStars = data.stargazers_count || 0;
+			if (targetStars === 0) return;
+
+			const maxIncrement = Math.max(5, Math.ceil(targetStars / 30));
+			const delay = 10;
+
+			interval = setInterval(() => {
+				if (stars < targetStars) {
+					const remaining = targetStars - stars;
+					const progress = remaining / targetStars;
+					const easeOutFactor = progress * progress;
+					const currentIncrement = Math.max(1, Math.ceil(maxIncrement * easeOutFactor));
+
+					stars = Math.min(stars + currentIncrement, targetStars);
+				} else {
+					clearInterval(interval);
+				}
+			}, delay);
+		} catch (err) {
+			iflog.error('Failed to fetch GitHub stars:', err);
+			stars = 312;
+		}
+	});
+
+	onDestroy(() => {
+		if (interval) {
+			clearInterval(interval);
+		}
+	});
+</script>
+
+<header
+	class="bg-background bg-opacity-40 fixed top-0 z-50 h-[72px] w-full border-b backdrop-blur-xl"
+>
+	<nav class="container flex items-center justify-between py-4">
+		<a href="/" class="cursor-pointer text-base"> moving icons </a>
+		<div class="flex gap-1">
+			<Button
+				variant="outline"
+				class="flex w-[85px] justify-between gap-2"
+				href="https://github.com/jis3r/icons"
+			>
+				<Github size="20" />
+				<NumberFlow value={stars} />
+			</Button>
+
+			<Button onclick={toggleMode} variant="outline" size="icon">
+				<Sun
+					class="h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
+				/>
+				<Moon
+					class="absolute h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
+				/>
+				<span class="sr-only">Toggle theme</span>
+			</Button>
+		</div>
+	</nav>
+</header>

package/dist/components/navbar.svelte.d.ts

@@ -0,0 +1,6 @@
+export default Navbar;
+type Navbar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Navbar: import("svelte").Component<Record<string, never>, {}, "">;

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

@@ -5,21 +5,7 @@ export const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}>, {
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", {
     variant: {
         default: string;
         secondary: string;
@@ -33,21 +19,7 @@ export const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", unknown, unknown, undefined>>;
 export default Badge;
 type Badge = {
     $on?(type: string, callback: (e: any) => void): () => void;

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

@@ -13,37 +13,7 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}>, {
+}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
     variant: {
         default: string;
         destructive: string;
@@ -73,37 +43,7 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         lg: string;
         icon: string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", unknown, unknown, undefined>>;
 export default Button;
 type Button = {
     $on?(type: string, callback: (e: any) => void): () => void;

package/dist/components/ui/card/card-description.svelte

@@ -4,6 +4,6 @@
 	let { ref = $bindable(null), class: className, children, ...restProps } = $props();
 </script>
 
-<p bind:this={ref} class={cn('text-sm text-muted-foreground', className)} {...restProps}>
+<p bind:this={ref} class={cn('text-muted-foreground text-sm', className)} {...restProps}>
 	{@render children?.()}
 </p>

package/dist/components/ui/card/card-title.svelte

@@ -8,7 +8,7 @@
 	role="heading"
 	aria-level={level}
 	bind:this={ref}
-	class={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+	class={cn('text-2xl leading-none font-semibold tracking-tight', className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/card/card.svelte

@@ -6,7 +6,7 @@
 
 <div
 	bind:this={ref}
-	class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+	class={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/input/input.svelte

@@ -15,7 +15,7 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			className
 		)}
 		type="file"
@@ -27,7 +27,7 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			className
 		)}
 		{type}

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -9,7 +9,7 @@
 	bind:ref
 	{sideOffset}
 	class={cn(
-		'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+		'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
 		className
 	)}
 	{...restProps}

package/dist/icons/arrow-down-0-1.svelte.d.ts

@@ -1,9 +1,9 @@
-export default ArrowDown_0_1;
-type ArrowDown_0_1 = {
+export default ArrowDown01;
+type ArrowDown01 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const ArrowDown_0_1: import("svelte").Component<{
+declare const ArrowDown01: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/arrow-down-1-0.svelte.d.ts

@@ -1,9 +1,9 @@
-export default ArrowDown_1_0;
-type ArrowDown_1_0 = {
+export default ArrowDown10;
+type ArrowDown10 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const ArrowDown_1_0: import("svelte").Component<{
+declare const ArrowDown10: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/arrow-up-0-1.svelte.d.ts

@@ -1,9 +1,9 @@
-export default ArrowUp_0_1;
-type ArrowUp_0_1 = {
+export default ArrowUp01;
+type ArrowUp01 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const ArrowUp_0_1: import("svelte").Component<{
+declare const ArrowUp01: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/arrow-up-1-0.svelte.d.ts

@@ -1,9 +1,9 @@
-export default ArrowUp_1_0;
-type ArrowUp_1_0 = {
+export default ArrowUp10;
+type ArrowUp10 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const ArrowUp_1_0: import("svelte").Component<{
+declare const ArrowUp10: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/book-up-2.svelte.d.ts

@@ -1,9 +1,9 @@
-export default BookUp_2;
-type BookUp_2 = {
+export default BookUp2;
+type BookUp2 = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<Props>): void;
 };
-declare const BookUp_2: import("svelte").Component<{
+declare const BookUp2: import("svelte").Component<{
     color?: string;
     size?: number;
     strokeWidth?: number;

package/dist/icons/bookmark-check.svelte

@@ -21,7 +21,7 @@
 		isHovered = true;
 		setTimeout(() => {
 			isHovered = false;
-		}, 500);
+		}, 600);
 	}
 </script>
 
@@ -39,7 +39,7 @@
 		class="bookmark-check-icon"
 		class:animate={isHovered}
 	>
-		<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
+		<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" class="bookmark-path" />
 		<path d="m9 10 2 2 4-4" class="check-path" />
 	</svg>
 </div>
@@ -51,6 +51,13 @@
 	.bookmark-check-icon {
 		overflow: visible;
 	}
+	.bookmark-path {
+		transform-origin: center;
+		transition: transform 0.3s ease-out;
+	}
+	.bookmark-check-icon.animate .bookmark-path {
+		animation: bookmarkBounce 0.6s ease-out;
+	}
 	.check-path {
 		stroke-dasharray: 9;
 		stroke-dashoffset: 0;
@@ -61,6 +68,23 @@
 	.bookmark-check-icon.animate .check-path {
 		animation: checkAnimation 0.5s ease-out backwards;
 	}
+	@keyframes bookmarkBounce {
+		0% {
+			transform: scale(1, 1);
+		}
+		25% {
+			transform: scale(0.9, 1.3);
+		}
+		50% {
+			transform: scale(1.1, 0.9);
+		}
+		75% {
+			transform: scale(0.95, 1.05);
+		}
+		100% {
+			transform: scale(1, 1);
+		}
+	}
 	@keyframes checkAnimation {
 		0% {
 			stroke-dashoffset: 9;

package/dist/icons/bookmark-minus.svelte

@@ -0,0 +1,108 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+
+		setTimeout(() => {
+			isHovered = false;
+		}, 600);
+	}
+</script>
+
+<div class={className} aria-label="bookmark-minus" role="img" onmouseenter={handleMouseEnter}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="bookmark-minus-icon"
+		class:animate={isHovered}
+	>
+		<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class="bookmark-path" />
+		<path d="M9 10h6" class="horizontal" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.bookmark-minus-icon {
+		overflow: visible;
+	}
+
+	.bookmark-path {
+		transform-origin: center;
+		transition: transform 0.3s ease-out;
+	}
+
+	.horizontal {
+		stroke-dasharray: 6;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.bookmark-minus-icon.animate .bookmark-path {
+		animation: bookmarkBounce 0.6s ease-out;
+	}
+
+	.bookmark-minus-icon.animate .horizontal {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	@keyframes bookmarkBounce {
+		0% {
+			transform: scale(1, 1);
+		}
+		25% {
+			transform: scale(0.9, 1.3);
+		}
+		50% {
+			transform: scale(1.1, 0.9);
+		}
+		75% {
+			transform: scale(0.95, 1.05);
+		}
+		100% {
+			transform: scale(1, 1);
+		}
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 6;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 6;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/icons/bookmark-minus.svelte.d.ts

@@ -0,0 +1,19 @@
+export default BookmarkMinus;
+type BookmarkMinus = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const BookmarkMinus: import("svelte").Component<{
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+}, {}, "">;
+type Props = {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+};

package/dist/icons/bookmark-plus.svelte

@@ -0,0 +1,114 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color]
+	 * @property {number} [size]
+	 * @property {number} [strokeWidth]
+	 * @property {boolean} [isHovered]
+	 * @property {string} [class]
+	 */
+
+	/** @type {Props} */
+	let {
+		color = 'currentColor',
+		size = 24,
+		strokeWidth = 2,
+		isHovered = false,
+		class: className = ''
+	} = $props();
+
+	function handleMouseEnter() {
+		isHovered = true;
+		setTimeout(() => {
+			isHovered = false;
+		}, 500);
+	}
+</script>
+
+<div class={className} aria-label="bookmark-plus" role="img" onmouseenter={handleMouseEnter}>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="bookmark-plus-icon"
+		class:animate={isHovered}
+	>
+		<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class="bookmark-path" />
+		<path d="M9 10h6" class="horizontal" />
+		<path d="M12 7v6" class="vertical" />
+	</svg>
+</div>
+
+<style>
+	div {
+		display: inline-block;
+	}
+	.bookmark-plus-icon {
+		overflow: visible;
+	}
+
+	.bookmark-path {
+		transform-origin: center;
+		transition: transform 0.3s ease-out;
+	}
+
+	.horizontal,
+	.vertical {
+		stroke-dasharray: 8;
+		stroke-dashoffset: 0;
+		transition: stroke-dashoffset 0.15s ease-out;
+	}
+
+	.bookmark-plus-icon.animate .bookmark-path {
+		animation: bookmarkBounce 0.6s ease-out;
+	}
+
+	.bookmark-plus-icon.animate .horizontal {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out forwards;
+	}
+
+	.bookmark-plus-icon.animate .vertical {
+		opacity: 0;
+		animation: lineAnimation 0.3s ease-out 0.25s forwards;
+	}
+
+	@keyframes bookmarkBounce {
+		0% {
+			transform: scale(1, 1);
+		}
+		25% {
+			transform: scale(0.9, 1.3);
+		}
+		50% {
+			transform: scale(1.1, 0.9);
+		}
+		75% {
+			transform: scale(0.95, 1.05);
+		}
+		100% {
+			transform: scale(1, 1);
+		}
+	}
+
+	@keyframes lineAnimation {
+		0% {
+			opacity: 0;
+			stroke-dashoffset: 8;
+		}
+		15% {
+			opacity: 1;
+			stroke-dashoffset: 8;
+		}
+		100% {
+			opacity: 1;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/icons/bookmark-plus.svelte.d.ts

@@ -0,0 +1,19 @@
+export default BookmarkPlus;
+type BookmarkPlus = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const BookmarkPlus: import("svelte").Component<{
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+}, {}, "">;
+type Props = {
+    color?: string;
+    size?: number;
+    strokeWidth?: number;
+    isHovered?: boolean;
+    class?: string;
+};