@websline/system-components 0.0.5 → 0.0.6

package/dist/components/molecules/navigationItem/NavigationItem.svelte

@@ -1,80 +0,0 @@
-<script>
-	import { Icon } from "../../../index.js";
-	import { fly } from "svelte/transition";
-	import { cubicOut } from "svelte/easing";
-	import { navigationItemVariants } from "./navigationItem.variants.js";
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [as="a"] The HTML element to use for the navigation item
-	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the navigation item is disabled
-	 * @property {boolean} [hasAlert=false] Whether the navigation item has an alert
-	 * @property {string} [href=""] The URL the navigation item links to
-	 * @property {string} [icon=""] The name of the icon to display
-	 * @property {string} [label=""] The label of the navigation item
-	 * @property {boolean} [selected=false] Whether the navigation item is selected
-	 * @property {"_self" | "_blank" | "_parent" | "_top"} [target="_self"] The target attribute for the link
-	 */
-
-	/** @type {Props} */
-	let {
-		as = "a",
-		class: className = "",
-		disabled = false,
-		hasAlert = false,
-		href = "",
-		icon = "",
-		label = "",
-		selected = false,
-		target = "_self",
-		...rest
-	} = $props();
-
-	let styles = $derived(navigationItemVariants({ disabled }));
-	let hideTimer;
-
-	let showLabel = $state(false);
-
-	function enter() {
-		clearTimeout(hideTimer);
-		showLabel = true;
-	}
-
-	function leave() {
-		clearTimeout(hideTimer);
-		hideTimer = setTimeout(() => (showLabel = false), 50);
-	}
-</script>
-
-<svelte:element
-	this={as}
-	class={styles.base({ class: className })}
-	{href}
-	onmouseenter={enter}
-	onmouseleave={leave}
-	{target}
-	{...rest}>
-	{#if icon}
-		<div class={styles.icon({ hasAlert, selected })}>
-			<Icon name={icon} />
-		</div>
-	{/if}
-	{#if label && showLabel}
-		<span
-			class={styles.label()}
-			in:fly={{
-				x: -32,
-				y: 0,
-				duration: 300,
-				delay: 0,
-				easing: cubicOut,
-			}}
-			out:fly={{
-				x: -32,
-				y: 0,
-				duration: 300,
-				delay: 0,
-			}}>{label}</span>
-	{/if}
-</svelte:element>

package/dist/components/molecules/navigationItem/NavigationItem.svelte.d.ts

@@ -1,81 +0,0 @@
-export default NavigationItem;
-type NavigationItem = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const NavigationItem: import("svelte").Component<{
-    /**
-     * The HTML element to use for the navigation item
-     */
-    as?: string;
-    /**
-     * Additional CSS classes to apply to the component
-     */
-    class?: string;
-    /**
-     * Whether the navigation item is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the navigation item has an alert
-     */
-    hasAlert?: boolean;
-    /**
-     * The URL the navigation item links to
-     */
-    href?: string;
-    /**
-     * The name of the icon to display
-     */
-    icon?: string;
-    /**
-     * The label of the navigation item
-     */
-    label?: string;
-    /**
-     * Whether the navigation item is selected
-     */
-    selected?: boolean;
-    /**
-     * The target attribute for the link
-     */
-    target?: "_self" | "_blank" | "_parent" | "_top";
-}, {}, "">;
-type Props = {
-    /**
-     * The HTML element to use for the navigation item
-     */
-    as?: string;
-    /**
-     * Additional CSS classes to apply to the component
-     */
-    class?: string;
-    /**
-     * Whether the navigation item is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the navigation item has an alert
-     */
-    hasAlert?: boolean;
-    /**
-     * The URL the navigation item links to
-     */
-    href?: string;
-    /**
-     * The name of the icon to display
-     */
-    icon?: string;
-    /**
-     * The label of the navigation item
-     */
-    label?: string;
-    /**
-     * Whether the navigation item is selected
-     */
-    selected?: boolean;
-    /**
-     * The target attribute for the link
-     */
-    target?: "_self" | "_blank" | "_parent" | "_top";
-};

package/dist/components/molecules/navigationItem/navigationItem.variants.d.ts

@@ -1,61 +0,0 @@
-export const navigationItemVariants: import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-    hasAlert: {
-        true: {
-            icon: string;
-        };
-    };
-    selected: {
-        true: {
-            icon: string;
-        };
-    };
-}, {
-    base: string;
-    icon: string;
-    label: string;
-}, undefined, {
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-    hasAlert: {
-        true: {
-            icon: string;
-        };
-    };
-    selected: {
-        true: {
-            icon: string;
-        };
-    };
-}, {
-    base: string;
-    icon: string;
-    label: string;
-}, import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-    hasAlert: {
-        true: {
-            icon: string;
-        };
-    };
-    selected: {
-        true: {
-            icon: string;
-        };
-    };
-}, {
-    base: string;
-    icon: string;
-    label: string;
-}, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/navigationItem/navigationItem.variants.js

@@ -1,29 +0,0 @@
-import { tv } from "tailwind-variants";
-
-const navigationItemVariants = tv({
-	slots: {
-		base: "inline-flex relative cursor-pointer select-none hover:pr-2 hover:[&>div]:bg-neutral-100 dark:hover:[&>div]:bg-neutral-700 dark:text-white",
-		icon: "bg-white dark:bg-neutral-900 p-2.5 rounded-sm transition duration-200 relative z-2",
-		label:
-			"body-small shadow-[0_2px_16px_0_rgba(0,_0,_0,_0.08)] px-2.5 flex items-center rounded-sm left-12 h-full absolute z-1",
-	},
-	variants: {
-		disabled: {
-			true: {
-				base: "opacity-40 pointer-events-none",
-			},
-		},
-		hasAlert: {
-			true: {
-				icon: "after:content-[''] after:absolute after:top-1 after:right-1 after:w-2 after:h-2 after:rounded-full after:bg-blue-500 dark:after:bg-blue-400",
-			},
-		},
-		selected: {
-			true: {
-				icon: "bg-neutral-300 dark:bg-neutral-700",
-			},
-		},
-	},
-});
-
-export { navigationItemVariants };