@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/storefront/components/section-nav.mjs

@@ -0,0 +1,128 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui-resolver/popover.mjs";
+import { useSectionObserver } from "../hooks/use-section-observer.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/section-nav.tsx
+function SectionNav({ links, visibleCount = 4, stickyOffset = 0, moreLabel = "More", className }) {
+	const ChevronDownIcon = useIcon("chevronDown");
+	const [isSticky, setIsSticky] = useState(false);
+	const [popoverOpen, setPopoverOpen] = useState(false);
+	const navRef = useRef(null);
+	const pillsRef = useRef(null);
+	const sentinelRef = useRef(null);
+	const activeHref = useSectionObserver(useMemo(() => links.map((l) => l.href), [links]), stickyOffset + 56);
+	const visibleLinks = links.slice(0, visibleCount);
+	const overflowLinks = links.slice(visibleCount);
+	const hasOverflow = overflowLinks.length > 0;
+	const groupedOverflow = useMemo(() => {
+		const groups = /* @__PURE__ */ new Map();
+		const ungrouped = [];
+		for (const link of overflowLinks) if (link.group) {
+			const existing = groups.get(link.group);
+			if (existing) existing.push(link);
+			else groups.set(link.group, [link]);
+		} else ungrouped.push(link);
+		return {
+			groups,
+			ungrouped
+		};
+	}, [overflowLinks]);
+	useEffect(() => {
+		const sentinel = sentinelRef.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry) setIsSticky(!entry.isIntersecting);
+		}, { threshold: 0 });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (!activeHref || !pillsRef.current) return;
+		const activePill = pillsRef.current.querySelector(`[data-href="${activeHref}"]`);
+		if (activePill) activePill.scrollIntoView({
+			inline: "nearest",
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [activeHref]);
+	const handleClick = useCallback((e, href) => {
+		e.preventDefault();
+		setPopoverOpen(false);
+		const id = href.slice(1);
+		const target = document.getElementById(id);
+		if (!target) return;
+		const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		target.scrollIntoView({
+			behavior: prefersReducedMotion ? "instant" : "smooth",
+			block: "start"
+		});
+		history.pushState(null, "", href);
+	}, []);
+	const pillClassName = (href) => cn("inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors", activeHref === href ? "border-primary bg-primary text-primary-foreground" : "border-border hover:bg-primary hover:text-primary-foreground");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: sentinelRef,
+		"aria-hidden": "true",
+		className: "h-0 w-full"
+	}), /* @__PURE__ */ jsx("nav", {
+		ref: navRef,
+		"aria-label": "Section navigation",
+		style: { top: stickyOffset },
+		className: cn("sticky z-30 overflow-x-auto bg-background/95 backdrop-blur-sm transition-shadow duration-200", isSticky && "shadow-[var(--enad-shadow-sm)]", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 py-3",
+			children: [/* @__PURE__ */ jsx("ul", {
+				ref: pillsRef,
+				className: "flex gap-2 overflow-x-auto scrollbar-none",
+				children: visibleLinks.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+					href: link.href,
+					"data-href": link.href,
+					onClick: (e) => handleClick(e, link.href),
+					className: pillClassName(link.href),
+					children: link.label
+				}) }, link.href))
+			}), hasOverflow && /* @__PURE__ */ jsxs(Popover, {
+				open: popoverOpen,
+				onOpenChange: setPopoverOpen,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: cn("inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors", overflowLinks.some((l) => l.href === activeHref) ? "border-primary bg-primary text-primary-foreground" : "border-border hover:bg-primary hover:text-primary-foreground"),
+						children: [moreLabel, /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-3.5 transition-transform duration-200", popoverOpen && "rotate-180") })]
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "end",
+					className: "w-52 p-2",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [groupedOverflow.ungrouped.map((link) => /* @__PURE__ */ jsx("a", {
+							href: link.href,
+							onClick: (e) => handleClick(e, link.href),
+							className: cn("rounded-md px-3 py-2 text-sm transition-colors", activeHref === link.href ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"),
+							children: link.label
+						}, link.href)), Array.from(groupedOverflow.groups.entries()).map(([groupName, groupLinks], i) => /* @__PURE__ */ jsxs("div", { children: [
+							(i > 0 || groupedOverflow.ungrouped.length > 0) && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+							/* @__PURE__ */ jsx("div", {
+								className: "px-3 py-1.5 text-xs font-medium text-muted-foreground",
+								children: groupName
+							}),
+							groupLinks.map((link) => /* @__PURE__ */ jsx("a", {
+								href: link.href,
+								onClick: (e) => handleClick(e, link.href),
+								className: cn("rounded-md px-3 py-2 text-sm transition-colors", activeHref === link.href ? "bg-accent font-medium text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"),
+								children: link.label
+							}, link.href))
+						] }, groupName))]
+					})
+				})]
+			})]
+		})
+	})] });
+}
+//#endregion
+export { SectionNav };
+
+//# sourceMappingURL=section-nav.mjs.map

package/dist/client/storefront/components/section-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-nav.mjs","names":[],"sources":["../../../../src/client/storefront/components/section-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui-resolver/popover\";\nimport { cn } from \"../../ui/utils\";\nimport { useSectionObserver } from \"../hooks/use-section-observer\";\n\ninterface SectionLink {\n  label: string;\n  /** Anchor href, e.g. \"#specs\" */\n  href: string;\n  /** Optional group name for the overflow popover */\n  group?: string;\n}\n\ninterface SectionNavProps {\n  links: SectionLink[];\n  /** How many pills to show inline before overflow (default: 4) */\n  visibleCount?: number;\n  /** Top offset in px for sticky positioning, e.g. header height (default: 0) */\n  stickyOffset?: number;\n  /** Label for the overflow trigger (default: \"More\") */\n  moreLabel?: string;\n  className?: string;\n}\n\nfunction SectionNav({\n  links,\n  visibleCount = 4,\n  stickyOffset = 0,\n  moreLabel = \"More\",\n  className,\n}: SectionNavProps) {\n  const ChevronDownIcon = useIcon(\"chevronDown\");\n  const [isSticky, setIsSticky] = useState(false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const navRef = useRef<HTMLElement>(null);\n  const pillsRef = useRef<HTMLUListElement>(null);\n  const sentinelRef = useRef<HTMLDivElement>(null);\n\n  const anchors = useMemo(() => links.map((l) => l.href), [links]);\n  const activeHref = useSectionObserver(anchors, stickyOffset + 56);\n\n  const visibleLinks = links.slice(0, visibleCount);\n  const overflowLinks = links.slice(visibleCount);\n  const hasOverflow = overflowLinks.length > 0;\n\n  // Group overflow links by their group field\n  const groupedOverflow = useMemo(() => {\n    const groups = new Map<string, SectionLink[]>();\n    const ungrouped: SectionLink[] = [];\n\n    for (const link of overflowLinks) {\n      if (link.group) {\n        const existing = groups.get(link.group);\n        if (existing) {\n          existing.push(link);\n        } else {\n          groups.set(link.group, [link]);\n        }\n      } else {\n        ungrouped.push(link);\n      }\n    }\n\n    return { groups, ungrouped };\n  }, [overflowLinks]);\n\n  // Detect sticky state via a sentinel element\n  useEffect(() => {\n    const sentinel = sentinelRef.current;\n    if (!sentinel) return;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry) {\n          setIsSticky(!entry.isIntersecting);\n        }\n      },\n      { threshold: 0 },\n    );\n\n    observer.observe(sentinel);\n    return () => observer.disconnect();\n  }, []);\n\n  // Auto-scroll the active pill into view\n  useEffect(() => {\n    if (!activeHref || !pillsRef.current) return;\n\n    const activePill = pillsRef.current.querySelector(`[data-href=\"${activeHref}\"]`);\n    if (activePill) {\n      activePill.scrollIntoView({\n        inline: \"nearest\",\n        block: \"nearest\",\n        behavior: \"smooth\",\n      });\n    }\n  }, [activeHref]);\n\n  const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, href: string) => {\n    e.preventDefault();\n    setPopoverOpen(false);\n\n    const id = href.slice(1);\n    const target = document.getElementById(id);\n    if (!target) return;\n\n    const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    target.scrollIntoView({\n      behavior: prefersReducedMotion ? \"instant\" : \"smooth\",\n      block: \"start\",\n    });\n\n    // Update URL hash without jumping\n    history.pushState(null, \"\", href);\n  }, []);\n\n  const pillClassName = (href: string) =>\n    cn(\n      \"inline-flex whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors\",\n      activeHref === href\n        ? \"border-primary bg-primary text-primary-foreground\"\n        : \"border-border hover:bg-primary hover:text-primary-foreground\",\n    );\n\n  return (\n    <>\n      {/* Sentinel: sits at the nav's natural position to detect when we scroll past */}\n      <div ref={sentinelRef} aria-hidden=\"true\" className=\"h-0 w-full\" />\n\n      <nav\n        ref={navRef}\n        aria-label=\"Section navigation\"\n        style={{ top: stickyOffset }}\n        className={cn(\n          \"sticky z-30 overflow-x-auto bg-background/95 backdrop-blur-sm transition-shadow duration-200\",\n          isSticky && \"shadow-[var(--enad-shadow-sm)]\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center gap-2 py-3\">\n          <ul ref={pillsRef} className=\"flex gap-2 overflow-x-auto scrollbar-none\">\n            {visibleLinks.map((link) => (\n              <li key={link.href}>\n                <a\n                  href={link.href}\n                  data-href={link.href}\n                  onClick={(e) => handleClick(e, link.href)}\n                  className={pillClassName(link.href)}\n                >\n                  {link.label}\n                </a>\n              </li>\n            ))}\n          </ul>\n\n          {hasOverflow && (\n            <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n              <PopoverTrigger asChild>\n                <button\n                  type=\"button\"\n                  className={cn(\n                    \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-[var(--enad-button-radius)] border px-4 py-2 text-sm transition-colors\",\n                    overflowLinks.some((l) => l.href === activeHref)\n                      ? \"border-primary bg-primary text-primary-foreground\"\n                      : \"border-border hover:bg-primary hover:text-primary-foreground\",\n                  )}\n                >\n                  {moreLabel}\n                  <ChevronDownIcon\n                    className={cn(\n                      \"size-3.5 transition-transform duration-200\",\n                      popoverOpen && \"rotate-180\",\n                    )}\n                  />\n                </button>\n              </PopoverTrigger>\n\n              <PopoverContent align=\"end\" className=\"w-52 p-2\">\n                <div className=\"flex flex-col gap-1\">\n                  {/* Ungrouped links first */}\n                  {groupedOverflow.ungrouped.map((link) => (\n                    <a\n                      key={link.href}\n                      href={link.href}\n                      onClick={(e) => handleClick(e, link.href)}\n                      className={cn(\n                        \"rounded-md px-3 py-2 text-sm transition-colors\",\n                        activeHref === link.href\n                          ? \"bg-accent font-medium text-accent-foreground\"\n                          : \"hover:bg-accent hover:text-accent-foreground\",\n                      )}\n                    >\n                      {link.label}\n                    </a>\n                  ))}\n\n                  {/* Grouped links with headings */}\n                  {Array.from(groupedOverflow.groups.entries()).map(\n                    ([groupName, groupLinks], i) => (\n                      <div key={groupName}>\n                        {(i > 0 || groupedOverflow.ungrouped.length > 0) && (\n                          <div className=\"my-1 border-t border-border\" />\n                        )}\n                        <div className=\"px-3 py-1.5 text-xs font-medium text-muted-foreground\">\n                          {groupName}\n                        </div>\n                        {groupLinks.map((link) => (\n                          <a\n                            key={link.href}\n                            href={link.href}\n                            onClick={(e) => handleClick(e, link.href)}\n                            className={cn(\n                              \"rounded-md px-3 py-2 text-sm transition-colors\",\n                              activeHref === link.href\n                                ? \"bg-accent font-medium text-accent-foreground\"\n                                : \"hover:bg-accent hover:text-accent-foreground\",\n                            )}\n                          >\n                            {link.label}\n                          </a>\n                        ))}\n                      </div>\n                    ),\n                  )}\n                </div>\n              </PopoverContent>\n            </Popover>\n          )}\n        </div>\n      </nav>\n    </>\n  );\n}\n\nexport { SectionNav, type SectionLink, type SectionNavProps };\n"],"mappings":"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"}

package/dist/client/storefront/components/share-button.d.ts

@@ -0,0 +1,34 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/share-button.d.ts
+interface ShareButtonProps {
+  url: string;
+  title?: string;
+  text?: string;
+  /** Label shown on the button */
+  label?: string;
+  /** Message shown after copying the link */
+  copiedLabel?: string;
+  /** Duration (ms) to show the copied confirmation */
+  copiedDuration?: number;
+  /** Custom share icon — defaults to a built-in share icon */
+  icon?: React$1.ReactNode;
+  /** Optional social platform slots rendered alongside the share button */
+  children?: React$1.ReactNode;
+  className?: string;
+}
+declare function ShareButton({
+  url,
+  title,
+  text,
+  label,
+  copiedLabel,
+  copiedDuration,
+  icon,
+  children,
+  className
+}: ShareButtonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ShareButton, ShareButtonProps };
+//# sourceMappingURL=share-button.d.ts.map

package/dist/client/storefront/components/share-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"share-button.d.ts","names":[],"sources":["../../../../src/client/storefront/components/share-button.tsx"],"mappings":";;;;UAQiB,gBAAA;EACf,GAAA;EACA,KAAA;EACA,IAAA;EAH+B;EAK/B,KAAA;EAQ0B;EAN1B,WAAA;EALA;EAOA,cAAA;EAJA;EAMA,IAAA,GAAO,OAAA,CAAM,SAAA;EAFb;EAIA,QAAA,GAAW,OAAA,CAAM,SAAA;EACjB,SAAA;AAAA;AAAA,iBAqBc,WAAA,CAAA;EACd,GAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,cAAA;EACA,IAAA;EACA,QAAA;EACA;AAAA,GACC,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/share-button.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/share-button.tsx
+const DefaultShareIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", {
+	className,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }),
+		/* @__PURE__ */ jsx("polyline", { points: "16 6 12 2 8 6" }),
+		/* @__PURE__ */ jsx("line", {
+			x1: "12",
+			y1: "2",
+			x2: "12",
+			y2: "15"
+		})
+	]
+});
+function ShareButton({ url, title, text, label = "Share", copiedLabel = "Link copied!", copiedDuration = 2e3, icon, children, className }) {
+	const CheckIcon = useIcon("check");
+	const [copied, setCopied] = React$1.useState(false);
+	const timerRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		return () => clearTimeout(timerRef.current);
+	}, []);
+	const showCopied = () => {
+		setCopied(true);
+		clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setCopied(false), copiedDuration);
+	};
+	const handleShare = async () => {
+		if (typeof navigator !== "undefined" && navigator.share) try {
+			await navigator.share({
+				url,
+				title,
+				text
+			});
+			return;
+		} catch {}
+		try {
+			await navigator.clipboard.writeText(url);
+			showCopied();
+		} catch {
+			if (typeof document === "undefined") return;
+			const textarea = document.createElement("textarea");
+			textarea.value = url;
+			textarea.style.position = "fixed";
+			textarea.style.opacity = "0";
+			document.body.appendChild(textarea);
+			textarea.select();
+			document.execCommand("copy");
+			document.body.removeChild(textarea);
+			showCopied();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleShare,
+			className: cn("inline-flex items-center gap-2 rounded-(--enad-border-radius) border border-border px-3 py-2 text-sm font-medium transition-colors", copied ? "border-(--enad-success-color)/30 text-(--enad-success-color)" : "hover:bg-muted"),
+			"aria-label": copied ? copiedLabel : label,
+			children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: copiedLabel })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [icon ?? /* @__PURE__ */ jsx(DefaultShareIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", { children: label })] })
+		}), children]
+	});
+}
+//#endregion
+export { ShareButton };
+
+//# sourceMappingURL=share-button.mjs.map

package/dist/client/storefront/components/share-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"share-button.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/share-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\n\n/* ─── Types ─── */\n\nexport interface ShareButtonProps {\n  url: string;\n  title?: string;\n  text?: string;\n  /** Label shown on the button */\n  label?: string;\n  /** Message shown after copying the link */\n  copiedLabel?: string;\n  /** Duration (ms) to show the copied confirmation */\n  copiedDuration?: number;\n  /** Custom share icon — defaults to a built-in share icon */\n  icon?: React.ReactNode;\n  /** Optional social platform slots rendered alongside the share button */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nconst DefaultShareIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\" />\n    <polyline points=\"16 6 12 2 8 6\" />\n    <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\" />\n  </svg>\n);\n\nexport function ShareButton({\n  url,\n  title,\n  text,\n  label = \"Share\",\n  copiedLabel = \"Link copied!\",\n  copiedDuration = 2000,\n  icon,\n  children,\n  className,\n}: ShareButtonProps) {\n  const CheckIcon = useIcon(\"check\");\n  const [copied, setCopied] = React.useState(false);\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  React.useEffect(() => {\n    return () => clearTimeout(timerRef.current);\n  }, []);\n\n  const showCopied = () => {\n    setCopied(true);\n    clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(() => setCopied(false), copiedDuration);\n  };\n\n  const handleShare = async () => {\n    // Try native Web Share API first\n    if (typeof navigator !== \"undefined\" && navigator.share) {\n      try {\n        await navigator.share({ url, title, text });\n        return;\n      } catch {\n        // User cancelled or API failed, fall through to clipboard\n      }\n    }\n\n    // Clipboard fallback\n    try {\n      await navigator.clipboard.writeText(url);\n      showCopied();\n    } catch {\n      // Last resort: legacy approach\n      if (typeof document === \"undefined\") return;\n      const textarea = document.createElement(\"textarea\");\n      textarea.value = url;\n      textarea.style.position = \"fixed\";\n      textarea.style.opacity = \"0\";\n      document.body.appendChild(textarea);\n      textarea.select();\n      document.execCommand(\"copy\");\n      document.body.removeChild(textarea);\n      showCopied();\n    }\n  };\n\n  return (\n    <div className={cn(\"inline-flex items-center gap-2\", className)}>\n      <button\n        type=\"button\"\n        onClick={handleShare}\n        className={cn(\n          \"inline-flex items-center gap-2 rounded-(--enad-border-radius) border border-border px-3 py-2 text-sm font-medium transition-colors\",\n          copied\n            ? \"border-(--enad-success-color)/30 text-(--enad-success-color)\"\n            : \"hover:bg-muted\",\n        )}\n        aria-label={copied ? copiedLabel : label}\n      >\n        {copied ? (\n          <>\n            <CheckIcon className=\"size-4\" />\n            <span>{copiedLabel}</span>\n          </>\n        ) : (\n          <>\n            {icon ?? <DefaultShareIcon className=\"size-4\" />}\n            <span>{label}</span>\n          </>\n        )}\n      </button>\n\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA2BA,MAAM,oBAAoB,EAAE,gBAC1B,qBAAC,OAAD;CACa;CACX,SAAQ;CACR,MAAK;CACL,QAAO;CACP,aAAY;CACZ,eAAc;CACd,gBAAe;WAPjB;EASE,oBAAC,QAAD,EAAM,GAAE,6CAA8C,CAAA;EACtD,oBAAC,YAAD,EAAU,QAAO,iBAAkB,CAAA;EACnC,oBAAC,QAAD;GAAM,IAAG;GAAK,IAAG;GAAI,IAAG;GAAK,IAAG;GAAO,CAAA;EACnC;;AAGR,SAAgB,YAAY,EAC1B,KACA,OACA,MACA,QAAQ,SACR,cAAc,gBACd,iBAAiB,KACjB,MACA,UACA,aACmB;CACnB,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,CAAC,QAAQ,aAAaA,QAAM,SAAS,MAAM;CACjD,MAAM,WAAWA,QAAM,OAAkD,KAAA,EAAU;AAEnF,SAAM,gBAAgB;AACpB,eAAa,aAAa,SAAS,QAAQ;IAC1C,EAAE,CAAC;CAEN,MAAM,mBAAmB;AACvB,YAAU,KAAK;AACf,eAAa,SAAS,QAAQ;AAC9B,WAAS,UAAU,iBAAiB,UAAU,MAAM,EAAE,eAAe;;CAGvE,MAAM,cAAc,YAAY;AAE9B,MAAI,OAAO,cAAc,eAAe,UAAU,MAChD,KAAI;AACF,SAAM,UAAU,MAAM;IAAE;IAAK;IAAO;IAAM,CAAC;AAC3C;UACM;AAMV,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,IAAI;AACxC,eAAY;UACN;AAEN,OAAI,OAAO,aAAa,YAAa;GACrC,MAAM,WAAW,SAAS,cAAc,WAAW;AACnD,YAAS,QAAQ;AACjB,YAAS,MAAM,WAAW;AAC1B,YAAS,MAAM,UAAU;AACzB,YAAS,KAAK,YAAY,SAAS;AACnC,YAAS,QAAQ;AACjB,YAAS,YAAY,OAAO;AAC5B,YAAS,KAAK,YAAY,SAAS;AACnC,eAAY;;;AAIhB,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,kCAAkC,UAAU;YAA/D,CACE,oBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW,GACT,sIACA,SACI,iEACA,iBACL;GACD,cAAY,SAAS,cAAc;aAElC,SACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA,EAChC,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,CACzB,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACG,QAAQ,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA,EAChD,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACnB,EAAA,CAAA;GAEE,CAAA,EAER,SACG"}

package/dist/client/storefront/components/skeleton.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/skeleton.d.ts
+interface SkeletonProps {
+  className?: string;
+}
+declare function Skeleton({
+  className
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+declare function ProductCardSkeleton({
+  className
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+declare function HeroSkeleton({
+  className
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+declare function FilterPanelSkeleton({
+  className
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+declare function ProductDetailSkeleton({
+  className
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+declare function GallerySkeleton({
+  className,
+  count
+}: SkeletonProps & {
+  count?: number;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { FilterPanelSkeleton, GallerySkeleton, HeroSkeleton, ProductCardSkeleton, ProductDetailSkeleton, Skeleton, SkeletonProps };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/client/storefront/components/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","names":[],"sources":["../../../../src/client/storefront/components/skeleton.tsx"],"mappings":";;;UAAiB,aAAA;EACf,SAAA;AAAA;AAAA,iBAGc,QAAA,CAAA;EAAW;AAAA,GAAkB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQ1C,mBAAA,CAAA;EAAsB;AAAA,GAAkB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAarD,YAAA,CAAA;EAAe;AAAA,GAAkB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAa9C,mBAAA,CAAA;EAAsB;AAAA,GAAkB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBrD,qBAAA,CAAA;EAAwB;AAAA,GAAkB,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoCvD,eAAA,CAAA;EAAkB,SAAA;EAAgB;AAAA,GAAa,aAAA;EAAkB,KAAA;AAAA,IAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/skeleton.mjs

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/skeleton.tsx
+function Skeleton({ className = "" }) {
+	return /* @__PURE__ */ jsx("div", { className: `animate-pulse rounded-(--enad-border-radius) bg-(--enad-text-muted-color)/15 ${className}` });
+}
+function ProductCardSkeleton({ className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `space-y-3 ${className}`,
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" })
+		]
+	});
+}
+function HeroSkeleton({ className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative w-full ${className}`,
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-[16/9] w-full sm:aspect-[2/1]" }), /* @__PURE__ */ jsxs("div", {
+			className: "absolute inset-0 flex flex-col items-start justify-end gap-3 p-8 sm:p-12",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64 sm:h-10 sm:w-96" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" })
+			]
+		})]
+	});
+}
+function FilterPanelSkeleton({ className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `flex flex-col gap-6 ${className}`,
+		children: Array.from({ length: 3 }, (_, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-2",
+				children: Array.from({ length: 4 }, (_, j) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-4 rounded-sm" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-20" })]
+				}, j))
+			})]
+		}, i))
+	});
+}
+function ProductDetailSkeleton({ className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `grid gap-8 md:grid-cols-2 ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-[4/5] w-full" }), /* @__PURE__ */ jsx("div", {
+				className: "flex gap-2",
+				children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "size-16 shrink-0" }, i))
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 py-2",
+			children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-3/4" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-24" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2 pt-4",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-16" }), /* @__PURE__ */ jsx("div", {
+						className: "flex gap-2",
+						children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-14" }, i))
+					})]
+				}),
+				/* @__PURE__ */ jsx(Skeleton, { className: "mt-4 h-11 w-full" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2 pt-4",
+					children: [
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-full" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-5/6" }),
+						/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-2/3" })
+					]
+				})
+			]
+		})]
+	});
+}
+function GallerySkeleton({ className = "", count = 6 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `grid grid-cols-2 gap-4 sm:grid-cols-3 ${className}`,
+		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full" }, i))
+	});
+}
+//#endregion
+export { FilterPanelSkeleton, GallerySkeleton, HeroSkeleton, ProductCardSkeleton, ProductDetailSkeleton, Skeleton };
+
+//# sourceMappingURL=skeleton.mjs.map

package/dist/client/storefront/components/skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.mjs","names":[],"sources":["../../../../src/client/storefront/components/skeleton.tsx"],"sourcesContent":["export interface SkeletonProps {\n  className?: string;\n}\n\nexport function Skeleton({ className = \"\" }: SkeletonProps) {\n  return (\n    <div\n      className={`animate-pulse rounded-(--enad-border-radius) bg-(--enad-text-muted-color)/15 ${className}`}\n    />\n  );\n}\n\nexport function ProductCardSkeleton({ className = \"\" }: SkeletonProps) {\n  return (\n    <div className={`space-y-3 ${className}`}>\n      {/* Image placeholder */}\n      <Skeleton className=\"aspect-square w-full\" />\n      {/* Title line */}\n      <Skeleton className=\"h-4 w-3/4\" />\n      {/* Price line */}\n      <Skeleton className=\"h-4 w-1/3\" />\n    </div>\n  );\n}\n\nexport function HeroSkeleton({ className = \"\" }: SkeletonProps) {\n  return (\n    <div className={`relative w-full ${className}`}>\n      <Skeleton className=\"aspect-[16/9] w-full sm:aspect-[2/1]\" />\n      <div className=\"absolute inset-0 flex flex-col items-start justify-end gap-3 p-8 sm:p-12\">\n        <Skeleton className=\"h-4 w-20\" />\n        <Skeleton className=\"h-8 w-64 sm:h-10 sm:w-96\" />\n        <Skeleton className=\"h-10 w-32\" />\n      </div>\n    </div>\n  );\n}\n\nexport function FilterPanelSkeleton({ className = \"\" }: SkeletonProps) {\n  return (\n    <div className={`flex flex-col gap-6 ${className}`}>\n      {Array.from({ length: 3 }, (_, i) => (\n        <div key={i} className=\"flex flex-col gap-3\">\n          <Skeleton className=\"h-4 w-24\" />\n          <div className=\"flex flex-col gap-2\">\n            {Array.from({ length: 4 }, (_, j) => (\n              <div key={j} className=\"flex items-center gap-2\">\n                <Skeleton className=\"size-4 rounded-sm\" />\n                <Skeleton className=\"h-3.5 w-20\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function ProductDetailSkeleton({ className = \"\" }: SkeletonProps) {\n  return (\n    <div className={`grid gap-8 md:grid-cols-2 ${className}`}>\n      {/* Image gallery column */}\n      <div className=\"flex flex-col gap-3\">\n        <Skeleton className=\"aspect-[4/5] w-full\" />\n        <div className=\"flex gap-2\">\n          {Array.from({ length: 4 }, (_, i) => (\n            <Skeleton key={i} className=\"size-16 shrink-0\" />\n          ))}\n        </div>\n      </div>\n      {/* Info column */}\n      <div className=\"flex flex-col gap-4 py-2\">\n        <Skeleton className=\"h-3 w-32\" />\n        <Skeleton className=\"h-7 w-3/4\" />\n        <Skeleton className=\"h-5 w-24\" />\n        <div className=\"flex flex-col gap-2 pt-4\">\n          <Skeleton className=\"h-3.5 w-16\" />\n          <div className=\"flex gap-2\">\n            {Array.from({ length: 4 }, (_, i) => (\n              <Skeleton key={i} className=\"h-9 w-14\" />\n            ))}\n          </div>\n        </div>\n        <Skeleton className=\"mt-4 h-11 w-full\" />\n        <div className=\"flex flex-col gap-2 pt-4\">\n          <Skeleton className=\"h-3.5 w-full\" />\n          <Skeleton className=\"h-3.5 w-5/6\" />\n          <Skeleton className=\"h-3.5 w-2/3\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function GallerySkeleton({ className = \"\", count = 6 }: SkeletonProps & { count?: number }) {\n  return (\n    <div className={`grid grid-cols-2 gap-4 sm:grid-cols-3 ${className}`}>\n      {Array.from({ length: count }, (_, i) => (\n        <Skeleton key={i} className=\"aspect-square w-full\" />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;AAIA,SAAgB,SAAS,EAAE,YAAY,MAAqB;AAC1D,QACE,oBAAC,OAAD,EACE,WAAW,gFAAgF,aAC3F,CAAA;;AAIN,SAAgB,oBAAoB,EAAE,YAAY,MAAqB;AACrE,QACE,qBAAC,OAAD;EAAK,WAAW,aAAa;YAA7B;GAEE,oBAAC,UAAD,EAAU,WAAU,wBAAyB,CAAA;GAE7C,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;GAElC,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;GAC9B;;;AAIV,SAAgB,aAAa,EAAE,YAAY,MAAqB;AAC9D,QACE,qBAAC,OAAD;EAAK,WAAW,mBAAmB;YAAnC,CACE,oBAAC,UAAD,EAAU,WAAU,wCAAyC,CAAA,EAC7D,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;IACjC,oBAAC,UAAD,EAAU,WAAU,4BAA6B,CAAA;IACjD,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;IAC9B;KACF;;;AAIV,SAAgB,oBAAoB,EAAE,YAAY,MAAqB;AACrE,QACE,oBAAC,OAAD;EAAK,WAAW,uBAAuB;YACpC,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAC7B,qBAAC,OAAD;GAAa,WAAU;aAAvB,CACE,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA,EACjC,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAC7B,qBAAC,OAAD;KAAa,WAAU;eAAvB,CACE,oBAAC,UAAD,EAAU,WAAU,qBAAsB,CAAA,EAC1C,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA,CAC/B;OAHI,EAGJ,CACN;IACE,CAAA,CACF;KAVI,EAUJ,CACN;EACE,CAAA;;AAIV,SAAgB,sBAAsB,EAAE,YAAY,MAAqB;AACvE,QACE,qBAAC,OAAD;EAAK,WAAW,6BAA6B;YAA7C,CAEE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,UAAD,EAAU,WAAU,uBAAwB,CAAA,EAC5C,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAC7B,oBAAC,UAAD,EAAkB,WAAU,oBAAqB,EAAlC,EAAkC,CACjD;IACE,CAAA,CACF;MAEN,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;IACjC,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA;IAClC,oBAAC,UAAD,EAAU,WAAU,YAAa,CAAA;IACjC,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA,EACnC,oBAAC,OAAD;MAAK,WAAU;gBACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAC7B,oBAAC,UAAD,EAAkB,WAAU,YAAa,EAA1B,EAA0B,CACzC;MACE,CAAA,CACF;;IACN,oBAAC,UAAD,EAAU,WAAU,oBAAqB,CAAA;IACzC,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,UAAD,EAAU,WAAU,gBAAiB,CAAA;MACrC,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;MACpC,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;MAChC;;IACF;KACF;;;AAIV,SAAgB,gBAAgB,EAAE,YAAY,IAAI,QAAQ,KAAyC;AACjG,QACE,oBAAC,OAAD;EAAK,WAAW,yCAAyC;YACtD,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,GAAG,MACjC,oBAAC,UAAD,EAAkB,WAAU,wBAAyB,EAAtC,EAAsC,CACrD;EACE,CAAA"}

package/dist/client/storefront/components/star-rating.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/components/star-rating.d.ts
+interface StarRatingProps {
+  rating: number;
+  max?: number;
+  size?: "sm" | "md" | "lg";
+  showValue?: boolean;
+  reviewCount?: number;
+  className?: string;
+  filledClassName?: string;
+  interactive?: boolean;
+  onRate?: (rating: number) => void;
+}
+declare function StarRating({
+  rating,
+  max,
+  size,
+  showValue,
+  reviewCount,
+  className,
+  filledClassName,
+  interactive,
+  onRate
+}: StarRatingProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StarRating, StarRatingProps };
+//# sourceMappingURL=star-rating.d.ts.map

package/dist/client/storefront/components/star-rating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-rating.d.ts","names":[],"sources":["../../../../src/client/storefront/components/star-rating.tsx"],"mappings":";;;UAKiB,eAAA;EACf,MAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;EACA,WAAA;EACA,MAAA,IAAU,MAAA;AAAA;AAAA,iBAkPI,UAAA,CAAA;EACd,MAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;EACA,WAAA;EACA;AAAA,GACC,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/components/star-rating.mjs

@@ -0,0 +1,167 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { useCallback, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/components/star-rating.tsx
+const sizeMap = {
+	sm: "h-3.5 w-3.5",
+	md: "h-5 w-5",
+	lg: "h-6 w-6"
+};
+function getHoverRating(event, starIndex) {
+	const rect = event.currentTarget.getBoundingClientRect();
+	return event.clientX - rect.left < rect.width / 2 ? starIndex + .5 : starIndex + 1;
+}
+function RatingMeta({ showValue, clampedRating, reviewCount }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [showValue && /* @__PURE__ */ jsx("span", {
+		className: "text-sm text-(--enad-text-primary-color) font-medium",
+		children: clampedRating.toFixed(1)
+	}), reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", {
+		className: "text-sm text-(--enad-text-muted-color)",
+		children: [
+			"(",
+			reviewCount,
+			" ",
+			reviewCount === 1 ? "review" : "reviews",
+			")"
+		]
+	})] });
+}
+function StarIcon_({ fillLevel, iconSize, filledColor, StarIcon, StarFilledIcon }) {
+	if (fillLevel >= 1) return /* @__PURE__ */ jsx(StarFilledIcon, { className: `${iconSize} fill-current ${filledColor}` });
+	if (fillLevel > 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StarIcon, { className: `absolute inset-0 ${iconSize} text-(--enad-text-muted-color)` }), /* @__PURE__ */ jsx("span", {
+		className: "absolute inset-0 overflow-hidden",
+		style: { clipPath: `inset(0 ${(1 - fillLevel) * 100}% 0 0)` },
+		children: /* @__PURE__ */ jsx(StarFilledIcon, { className: `${iconSize} fill-current ${filledColor}` })
+	})] });
+	return /* @__PURE__ */ jsx(StarIcon, { className: `${iconSize} text-(--enad-text-muted-color)` });
+}
+function InteractiveStarRating({ rating, max, iconSize, filledColor, showValue, reviewCount, className, onRate }) {
+	const StarIcon = useIcon("star");
+	const StarFilledIcon = useIcon("starFilled");
+	const [hoveredRating, setHoveredRating] = useState(null);
+	const [selectedRating, setSelectedRating] = useState(null);
+	const containerRef = useRef(null);
+	const baseRating = selectedRating ?? rating;
+	const displayRating = hoveredRating !== null ? hoveredRating : baseRating;
+	const clampedRating = Math.max(0, Math.min(displayRating, max));
+	const handleKeyDown = useCallback((event) => {
+		const current = hoveredRating ?? baseRating;
+		let next = current;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				next = Math.min(max, current + .5);
+				event.preventDefault();
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				next = Math.max(.5, current - .5);
+				event.preventDefault();
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				setSelectedRating(current);
+				onRate?.(current);
+				return;
+			default: return;
+		}
+		setHoveredRating(next);
+	}, [
+		hoveredRating,
+		baseRating,
+		max,
+		onRate
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `inline-flex items-center gap-1 font-enad ${className}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "flex items-center gap-0.5",
+			role: "radiogroup",
+			"aria-label": `Rate from 1 to ${max} stars`,
+			onMouseLeave: () => setHoveredRating(null),
+			onKeyDown: handleKeyDown,
+			children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsx("span", {
+				className: `relative inline-flex ${iconSize} cursor-pointer transition-transform duration-150 motion-reduce:transition-none ${hoveredRating !== null && hoveredRating >= i + .5 ? "scale-110" : ""}`,
+				role: "radio",
+				"aria-checked": rating === i + 1 || rating === i + .5,
+				"aria-label": `${i + 1} star${i + 1 === 1 ? "" : "s"}`,
+				tabIndex: i === 0 ? 0 : -1,
+				onMouseMove: (e) => setHoveredRating(getHoverRating(e, i)),
+				onClick: (e) => {
+					const value = getHoverRating(e, i);
+					setSelectedRating(value);
+					onRate?.(value);
+				},
+				onKeyDown: handleKeyDown,
+				children: /* @__PURE__ */ jsx(StarIcon_, {
+					fillLevel: Math.max(0, Math.min(1, clampedRating - i)),
+					iconSize,
+					filledColor,
+					StarIcon,
+					StarFilledIcon
+				})
+			}, i))
+		}), /* @__PURE__ */ jsx(RatingMeta, {
+			showValue,
+			clampedRating,
+			reviewCount
+		})]
+	});
+}
+function DisplayStarRating({ rating, max, iconSize, filledColor, showValue, reviewCount, className }) {
+	const StarIcon = useIcon("star");
+	const StarFilledIcon = useIcon("starFilled");
+	const clampedRating = Math.max(0, Math.min(rating, max));
+	return /* @__PURE__ */ jsxs("div", {
+		className: `inline-flex items-center gap-1 font-enad ${className}`,
+		role: "img",
+		"aria-label": `${clampedRating} out of ${max} stars`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-0.5",
+			children: Array.from({ length: max }, (_, i) => /* @__PURE__ */ jsx("span", {
+				className: `relative inline-flex ${iconSize}`,
+				children: /* @__PURE__ */ jsx(StarIcon_, {
+					fillLevel: Math.max(0, Math.min(1, clampedRating - i)),
+					iconSize,
+					filledColor,
+					StarIcon,
+					StarFilledIcon
+				})
+			}, i))
+		}), /* @__PURE__ */ jsx(RatingMeta, {
+			showValue,
+			clampedRating,
+			reviewCount
+		})]
+	});
+}
+function StarRating({ rating, max = 5, size = "md", showValue = false, reviewCount, className = "", filledClassName, interactive = false, onRate }) {
+	const iconSize = sizeMap[size];
+	const filledColor = filledClassName || "text-(--enad-star-color)";
+	if (interactive) return /* @__PURE__ */ jsx(InteractiveStarRating, {
+		rating,
+		max,
+		iconSize,
+		filledColor,
+		showValue,
+		reviewCount,
+		className,
+		onRate
+	});
+	return /* @__PURE__ */ jsx(DisplayStarRating, {
+		rating,
+		max,
+		iconSize,
+		filledColor,
+		showValue,
+		reviewCount,
+		className
+	});
+}
+//#endregion
+export { StarRating };
+
+//# sourceMappingURL=star-rating.mjs.map