@starwind-ui/core 0.0.1 → 0.1.0

package/dist/src/components/textarea/Textarea.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"textarea"> & {
+	size?: "sm" | "md" | "lg";
+};
+
+const { size = "md", class: className, ...rest } = Astro.props;
+---
+
+<textarea
+	class:list={[
+		"border-input bg-background text-foreground ring-offset-background min-h-10 w-full rounded-md border",
+		"focus:outline-outline focus:ring-0 focus:outline-2 focus:outline-offset-2",
+		"file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium",
+		"disabled:cursor-not-allowed disabled:opacity-50",
+		"peer placeholder:text-muted-foreground",
+		{
+			"min-h-9 px-2 py-1 text-sm": size === "sm",
+			"min-h-10 px-3 py-2 text-base": size === "md",
+			"min-h-12 px-4 py-3 text-lg": size === "lg",
+		},
+		className,
+	]}
+	{...rest}></textarea>

package/dist/src/components/textarea/index.ts

@@ -0,0 +1,5 @@
+import Textarea from "./Textarea.astro";
+
+export { Textarea };
+
+export default Textarea;

package/dist/src/components/tooltip/Tooltip.astro

@@ -0,0 +1,233 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * Time in milliseconds to wait before showing the tooltip
+	 */
+	openDelay?: number;
+	/**
+	 * Time in milliseconds to wait before hiding the tooltip
+	 */
+	closeDelay?: number;
+	/**
+	 * When true, prevents the tooltip from staying open when hovering over its content
+	 */
+	disableHoverableContent?: boolean;
+};
+
+const {
+	openDelay = 200,
+	closeDelay = 200,
+	disableHoverableContent = false,
+	class: className,
+} = Astro.props;
+---
+
+<div
+	class:list={["starwind-tooltip relative inline-block", className]}
+	data-state="closed"
+	data-open-delay={openDelay}
+	data-close-delay={closeDelay}
+	{...!disableHoverableContent && { "data-content-hoverable": "" }}
+>
+	<slot />
+</div>
+
+<script>
+	class TooltipHandler {
+		private tooltip: HTMLElement;
+		private trigger: HTMLElement | null;
+		private content: HTMLElement | null;
+		private openTimerRef: number | null = null;
+		private closeTimerRef: number | null = null;
+		private contentId: string;
+		private animationDuration = 150;
+
+		constructor(tooltip: HTMLElement, idx: number) {
+			this.contentId = `starwind-tooltip${idx}`;
+			this.tooltip = tooltip;
+			this.content = tooltip.querySelector(".starwind-tooltip-content");
+
+			// if tooltip.firstElementChild is this.content, then get the next element
+			this.trigger = tooltip.firstElementChild as HTMLElement;
+			if (this.trigger === this.content) {
+				this.trigger = this.trigger.nextElementSibling as HTMLElement;
+			}
+
+			this.trigger.classList.add("starwind-tooltip-trigger");
+
+			if (!this.trigger || !this.content) return;
+
+			// animationDuration is set with inline styles through passed prop to TooltipContent
+			const animationDurationString = this.content.style.animationDuration;
+			if (animationDurationString.endsWith("ms")) {
+				this.animationDuration = parseFloat(animationDurationString);
+			} else if (animationDurationString.endsWith("s")) {
+				// using something like @playform/compress might optimize to use "s" instead of "ms"
+				this.animationDuration = parseFloat(animationDurationString) * 1000;
+			}
+			this.init();
+		}
+
+		private init() {
+			this.setupAccessibility();
+			this.setupEvents();
+		}
+
+		private setupAccessibility() {
+			if (!this.trigger || !this.content) return;
+			this.trigger.setAttribute("aria-describedby", this.contentId);
+			this.content.id = this.contentId;
+		}
+
+		private setupEvents() {
+			if (!this.trigger || !this.content) return;
+
+			// Trigger events
+			this.trigger.addEventListener("mouseenter", () => this.show());
+			this.trigger.addEventListener("mouseleave", () => this.hide());
+			this.trigger.addEventListener("focus", () => this.show(true));
+			this.trigger.addEventListener("blur", () => this.hide(true));
+
+			// Content events
+			if (this.tooltip.hasAttribute("data-content-hoverable")) {
+				this.content.addEventListener("mouseenter", () => this.show());
+				this.content.addEventListener("mouseleave", () => this.hide());
+			}
+
+			// if data-avoid-collisions exists, add resize listener to reset any translations
+			if (this.content.hasAttribute("data-avoid-collisions")) {
+				window.addEventListener(
+					"resize",
+					() => {
+						if (!this.content) return;
+						this.content.style.transform = "";
+					},
+					{ passive: true },
+				);
+			}
+
+			// Document events
+			document.addEventListener("keydown", (e) => {
+				if (e.key === "Escape" && this.tooltip.getAttribute("data-state") === "open") {
+					this.hide(true);
+				}
+			});
+
+			document.addEventListener("click", (e) => {
+				if (
+					!this.tooltip.contains(e.target as Node) &&
+					this.tooltip.getAttribute("data-state") === "open"
+				) {
+					this.hide(true);
+				}
+			});
+		}
+
+		private show(immediate: boolean = false) {
+			if (!this.content || !this.trigger) return;
+			if (immediate) {
+				this.tooltip.setAttribute("data-state", "open");
+				this.content.setAttribute("data-state", "open");
+				this.content.style.display = "block";
+				this.checkBoundary(this.content);
+				this.clearOpenTimer();
+				return;
+			}
+
+			this.clearCloseTimer();
+
+			const delay = parseInt(this.tooltip.getAttribute("data-open-delay") || "700");
+			this.openTimerRef = window.setTimeout(() => {
+				if (!this.content || !this.trigger) return;
+				this.tooltip.setAttribute("data-state", "open");
+				this.content.setAttribute("data-state", "open");
+				this.content.style.display = "block";
+				this.checkBoundary(this.content);
+				this.openTimerRef = null;
+			}, delay);
+		}
+
+		private hide(immediate: boolean = false) {
+			if (!this.content || !this.trigger) return;
+			this.clearOpenTimer();
+
+			if (immediate) {
+				this.clearCloseTimer();
+				this.tooltip.setAttribute("data-state", "closed");
+				setTimeout(() => {
+					if (!this.content) return;
+					this.content.style.display = "none";
+				}, this.animationDuration - 10);
+				this.content.setAttribute("data-state", "closed");
+				return;
+			}
+
+			this.closeTimerRef = window.setTimeout(
+				() => {
+					this.tooltip.setAttribute("data-state", "closed");
+					setTimeout(() => {
+						if (!this.content) return;
+						this.content.style.display = "none";
+					}, this.animationDuration - 10);
+					if (!this.content) return;
+					this.content.setAttribute("data-state", "closed");
+					this.closeTimerRef = null;
+				},
+				parseInt(this.tooltip.getAttribute("data-close-delay") || "300"),
+			);
+		}
+
+		private checkBoundary(tooltipElement: HTMLElement) {
+			if (!tooltipElement) return;
+
+			// if data-avoid-collisions does not exist, return
+			if (!tooltipElement.hasAttribute("data-avoid-collisions")) return;
+
+			const viewportWidth = window.innerWidth;
+			const tooltipRect = tooltipElement.getBoundingClientRect();
+			const padding = 16; // Add some padding from viewport edges
+
+			// Check if tooltip extends beyond right edge of viewport
+			if (tooltipRect.right > viewportWidth - padding) {
+				const overflow = tooltipRect.right - (viewportWidth - padding);
+				tooltipElement.style.transform = `translateX(-${overflow + padding}px)`;
+			}
+
+			// Check if tooltip extends beyond left edge of viewport
+			if (tooltipRect.left < padding) {
+				const overflow = padding - tooltipRect.left;
+				tooltipElement.style.transform = `translateX(${overflow + padding}px)`;
+			}
+		}
+
+		private clearOpenTimer() {
+			if (this.openTimerRef) {
+				window.clearTimeout(this.openTimerRef);
+				this.openTimerRef = null;
+			}
+		}
+
+		private clearCloseTimer() {
+			if (this.closeTimerRef) {
+				window.clearTimeout(this.closeTimerRef);
+				this.closeTimerRef = null;
+			}
+		}
+	}
+
+	// Store instances in a WeakMap to avoid memory leaks
+	const tooltipInstances = new WeakMap<HTMLElement, TooltipHandler>();
+
+	const setupTooltips = () => {
+		document.querySelectorAll<HTMLElement>(".starwind-tooltip").forEach((tooltip, idx) => {
+			if (!tooltipInstances.has(tooltip)) {
+				tooltipInstances.set(tooltip, new TooltipHandler(tooltip, idx));
+			}
+		});
+	};
+
+	setupTooltips();
+	document.addEventListener("astro:after-swap", setupTooltips);
+</script>

package/dist/src/components/tooltip/TooltipContent.astro

@@ -0,0 +1,76 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+type Props = HTMLAttributes<"div"> & {
+	/**
+	 * Side of the tooltip
+	 * @default top
+	 */
+	side?: "top" | "right" | "bottom" | "left";
+	/**
+	 * Alignment of the tooltip
+	 * @default center
+	 */
+	align?: "start" | "center" | "end";
+	/**
+	 * Offset distance in pixels
+	 * @default 4
+	 */
+	sideOffset?: number;
+	/**
+	 * Prevent the tooltip from colliding with other elements
+	 * @default true
+	 */
+	avoidCollisions?: boolean;
+	/**
+	 * Open and close animation duration in milliseconds
+	 * @default 150
+	 */
+	animationDuration?: number;
+};
+
+const {
+	side = "top",
+	align = "center",
+	sideOffset = 4,
+	avoidCollisions = true,
+	animationDuration = 150,
+	class: className,
+} = Astro.props;
+---
+
+<div
+	class:list={[
+		"starwind-tooltip-content",
+		"absolute z-50 hidden px-3 py-1.5 whitespace-nowrap shadow-sm",
+		"bg-popover text-popover-foreground rounded-md border",
+		"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",
+		{
+			"slide-in-from-right-2 right-(--tooltip-offset)": side === "left",
+			"slide-in-from-left-2 left-(--tooltip-offset)": side === "right",
+			"slide-in-from-top-2 top-(--tooltip-offset)": side === "bottom",
+			"slide-in-from-bottom-2 bottom-(--tooltip-offset)": side === "top",
+		},
+		{
+			"left-[50%] translate-x-[-50%]": align === "center" && (side === "top" || side === "bottom"),
+			"top-[50%] translate-y-[-50%]": align === "center" && (side === "left" || side === "right"),
+			"left-0": align === "start" && (side === "top" || side === "bottom"),
+			"right-0": align === "end" && (side === "top" || side === "bottom"),
+			"top-0": align === "start" && (side === "left" || side === "right"),
+			"bottom-0": align === "end" && (side === "left" || side === "right"),
+		},
+		className,
+	]}
+	data-state="closed"
+	data-side={side}
+	data-align={align}
+	{...avoidCollisions && { "data-avoid-collisions": "" }}
+	role="tooltip"
+	style={{
+		"--tooltip-offset": `calc(100% + ${sideOffset}px)`,
+		animationDuration: `${animationDuration}ms`,
+	}}
+>
+	<slot> My tooltip! </slot>
+</div>

package/dist/src/components/tooltip/TooltipTrigger.astro

@@ -0,0 +1,11 @@
+---
+/**
+ * This component is used to trigger the tooltip
+ * All it does is require a slot
+ */
+type Props = {
+	children: any;
+};
+---
+
+<slot />

package/dist/src/components/tooltip/index.ts

@@ -0,0 +1,11 @@
+import Tooltip from "./Tooltip.astro";
+import TooltipContent from "./TooltipContent.astro";
+import TooltipTrigger from "./TooltipTrigger.astro";
+
+export { Tooltip, TooltipContent, TooltipTrigger };
+
+export default {
+	Root: Tooltip,
+	Trigger: TooltipTrigger,
+	Content: TooltipContent,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starwind-ui/core",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Starwind UI core components and registry",
   "type": "module",
   "main": "./dist/index.js",