@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/selection-halo/selection-halo.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Selection"
+};
+const SelectionHalo = forwardRef(
+  (props, ref) => {
+    const {
+      bounds,
+      className,
+      label,
+      labels,
+      pulsing = false,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 rounded-md ring-2 ring-primary",
+          pulsing ? "animate-pulse" : "",
+          className
+        ),
+        "data-pulsing": pulsing ? "true" : void 0,
+        "data-selection-halo": true,
+        ref,
+        style: {
+          height: `${bounds.height.toString()}px`,
+          left: `${bounds.x.toString()}px`,
+          top: `${bounds.y.toString()}px`,
+          width: `${bounds.width.toString()}px`
+        },
+        ...rest,
+        children: [
+          ["nw", "ne", "se", "sw"].map((corner) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute size-2 rounded-sm border-2 border-primary bg-background",
+                corner === "nw" && "-left-1 -top-1",
+                corner === "ne" && "-right-1 -top-1",
+                corner === "se" && "-bottom-1 -right-1",
+                corner === "sw" && "-bottom-1 -left-1"
+              ),
+              "data-handle-corner": corner
+            },
+            corner
+          )),
+          label ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute -top-6 left-0 inline-flex items-center rounded-md bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow-sm",
+              "data-selection-label": true,
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+SelectionHalo.displayName = "SelectionHalo";
+export {
+  SelectionHalo
+};

package/dist/components/selection-presence/index.js

@@ -0,0 +1,6 @@
+import {
+  SelectionPresence
+} from "./selection-presence";
+export {
+  SelectionPresence
+};

package/dist/components/selection-presence/selection-presence.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Selection presence"
+};
+const SelectionPresence = forwardRef((props, ref) => {
+  const { className, color, height, labels, name, width, x, y, ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const accent = color ?? "var(--foreground)";
+  const ariaLabel = typeof name === "string" ? `${resolvedLabels.region}: ${name}` : resolvedLabels.region;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "pointer-events-none absolute z-20 rounded-md border-2 border-dashed",
+        className
+      ),
+      "data-selection-presence": true,
+      ref,
+      role: "img",
+      style: {
+        backgroundColor: `color-mix(in srgb, ${accent} 10%, transparent)`,
+        borderColor: accent,
+        height,
+        left: x,
+        top: y,
+        width
+      },
+      ...rest,
+      children: name === null || name === void 0 ? null : /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute -top-5 left-0 inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm",
+          "data-selection-presence-chip": true,
+          style: { backgroundColor: accent },
+          children: name
+        }
+      )
+    }
+  );
+});
+SelectionPresence.displayName = "SelectionPresence";
+export {
+  SelectionPresence
+};

package/dist/components/severity-badge/severity-badge.js

@@ -132,7 +132,7 @@ function SeverityBadge({
       "data-level": level,
       ...props,
       children: [
-        showDot ? /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative flex h-2 w-2", children: [
+        showDot ? /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "relative flex size-2", children: [
           pulse ? /* @__PURE__ */ jsx(
             "span",
             {
@@ -146,7 +146,7 @@ function SeverityBadge({
             "span",
             {
               className: cn(
-                "relative inline-flex h-2 w-2 rounded-full",
+                "relative inline-flex size-2 rounded-full",
                 DOT_COLOR[level]
               )
             }

package/dist/components/share-dialog/share-dialog.js

@@ -13,7 +13,7 @@ function PlatformButton({
   onClick,
   platform
 }) {
-  const handleClick = () => {
+  const handleSelectPlatform = () => {
     onClick(platform.key);
   };
   return /* @__PURE__ */ jsx(
@@ -26,7 +26,7 @@ function PlatformButton({
         "hover:bg-accent hover:text-accent-foreground",
         "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
       ),
-      onClick: handleClick,
+      onClick: handleSelectPlatform,
       type: "button",
       children: platform.label
     }

package/dist/components/share-section/share-section.js

@@ -26,6 +26,7 @@ function buildShareUrl(platform, url, title) {
   }
 }
 function ShareSection({
+  as: Heading = "h3",
   buildUrl: buildUrlFunction = buildShareUrl,
   platforms = defaultPlatforms,
   shareOn,
@@ -34,7 +35,7 @@ function ShareSection({
   url
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-6 mt-8", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: shareTitle }),
+    /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold mb-4", children: shareTitle }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: platforms.map((platform) => /* @__PURE__ */ jsxs(
       "a",
       {

package/dist/components/sheet/sheet.js

@@ -47,7 +47,7 @@ const SheetContent = forwardRef(({ children, className, side = "right", ...props
       ...props,
       children: [
         /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] }),
         children

package/dist/components/sidebar/sidebar.js

@@ -1,29 +1,29 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { ChevronDown } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
-import { useSidebar } from "../sidebar-provider";
+import { useSidebar } from "../sidebar-provider/sidebar-provider";
+const getMobileSnapshot = () => typeof window === "undefined" ? false : window.innerWidth < 1024;
+const getServerMobileSnapshot = () => false;
+const subscribeToViewportResize = (onStoreChange) => {
+  window.addEventListener("resize", onStoreChange);
+  return () => {
+    window.removeEventListener("resize", onStoreChange);
+  };
+};
 function useMobile(setOpen) {
-  const [isMobile, setIsMobile] = useState(false);
+  const isMobile = useSyncExternalStore(
+    subscribeToViewportResize,
+    getMobileSnapshot,
+    getServerMobileSnapshot
+  );
   useEffect(() => {
-    const checkMobile = () => {
-      const mobile = window.innerWidth < 1024;
-      setIsMobile(mobile);
-      if (mobile) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    };
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => {
-      window.removeEventListener("resize", checkMobile);
-    };
-  }, [setOpen]);
+    setOpen(!isMobile);
+  }, [isMobile, setOpen]);
   return isMobile;
 }
 function useScrollFade(containerReference) {
@@ -38,7 +38,7 @@ function useScrollFade(containerReference) {
       setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
     };
     checkScroll();
-    container.addEventListener("scroll", checkScroll);
+    container.addEventListener("scroll", checkScroll, { passive: true });
     return () => {
       container.removeEventListener("scroll", checkScroll);
     };
@@ -73,7 +73,7 @@ function CollapsibleSection({
             ChevronDown,
             {
               className: cn(
-                "h-3 w-3 transition-transform duration-200",
+                "size-3 transition-transform duration-200",
                 isOpen && "rotate-180"
               )
             }
@@ -88,6 +88,7 @@ function CollapsibleSection({
           "grid transition-all duration-200 ease-in-out",
           isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
         ),
+        hidden: !isOpen,
         children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
       }
     )
@@ -97,15 +98,18 @@ function Sidebar({ sections }) {
   const pathname = usePathname();
   const { open, setOpen } = useSidebar();
   const isMobile = useMobile(setOpen);
+  const mounted = useMounted();
   const scrollContainerReference = useRef(null);
   const { showBottomFade, showTopFade } = useScrollFade(
     scrollContainerReference
   );
+  const collapsed = mounted && !isMobile && !open;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isMobile && open ? /* @__PURE__ */ jsx(
       "div",
       {
         className: "fixed inset-0 bg-black/50 z-40 lg:hidden",
+        "data-testid": "sidebar-overlay",
         onClick: () => {
           setOpen(false);
         },
@@ -122,15 +126,16 @@ function Sidebar({ sections }) {
       "aside",
       {
         className: cn(
-          "fixed lg:relative top-16 lg:top-0 bottom-0 lg:bottom-auto left-0 z-40 lg:h-full border-r bg-background transition-transform duration-300 ease-in-out",
+          "fixed lg:relative top-16 lg:top-0 bottom-0 lg:bottom-auto left-0 z-40 lg:h-full bg-background transition-[transform,width] duration-300 ease-in-out",
           "flex flex-col",
           "overflow-hidden",
           "shrink-0",
-          isMobile ? "w-full" : "w-64",
-          isMobile && !open && "-translate-x-full",
+          collapsed ? "border-r-0" : "border-r",
+          collapsed ? "w-0" : isMobile ? "w-full" : "w-64",
           isMobile && open && "translate-x-0",
-          !isMobile && !open && "-translate-x-full lg:translate-x-0",
-          !isMobile && "lg:translate-x-0"
+          isMobile && !open && "-translate-x-full",
+          !isMobile && !collapsed && "-translate-x-full lg:translate-x-0",
+          !isMobile && collapsed && "-translate-x-full"
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
           showTopFade ? /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 h-8 bg-gradient-to-b from-background to-transparent pointer-events-none z-20" }) : null,
@@ -138,7 +143,7 @@ function Sidebar({ sections }) {
           /* @__PURE__ */ jsx(
             "nav",
             {
-              className: "flex-1 p-4 overflow-y-auto h-full",
+              className: "flex-1 p-4 overflow-y-auto overscroll-contain h-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               ref: scrollContainerReference,
               children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: sections.map((section, sectionIndex) => {
                 const sectionItems = /* @__PURE__ */ jsx("div", { className: section.title ? "space-y-0.5" : "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx(

package/dist/components/sidebar-toggle/sidebar-toggle.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Menu, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function SidebarToggle({
   className,
   onToggle,
@@ -12,21 +12,23 @@ function SidebarToggle({
     /* @__PURE__ */ jsx(
       Button,
       {
+        "aria-label": open ? "Close menu" : "Open menu",
         className: cn("lg:hidden", className),
         onClick: onToggle,
         size: "icon",
         variant: "ghost",
-        children: open ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+        children: open ? /* @__PURE__ */ jsx(X, { className: "size-5" }) : /* @__PURE__ */ jsx(Menu, { className: "size-5" })
       }
     ),
     /* @__PURE__ */ jsx(
       Button,
       {
+        "aria-label": "Toggle sidebar",
         className: cn("hidden lg:flex", className),
         onClick: onToggle,
         size: "icon",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
       }
     )
   ] });

package/dist/components/slider/slider.js

@@ -14,7 +14,7 @@ const Slider = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs
     ...props,
     children: [
       /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
     ]
   }
 ));

package/dist/components/slideshow/slideshow.js

@@ -4,7 +4,7 @@ import { memo, useCallback, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
-import { CompletionDialog } from "../completion-dialog";
+import { CompletionDialog } from "../completion-dialog/completion-dialog";
 const DEFAULT_LABELS = {
   closeLabel: "Close",
   closeTocLabel: "Close table of contents",
@@ -15,11 +15,13 @@ const DEFAULT_LABELS = {
   prevLabel: "Prev",
   sectionsLabel: "Sections"
 };
+const EMPTY_SLIDESHOW_LABELS = {};
 function SlideshowImpl({
+  as: SectionsHeading = "h3",
   completedSections,
   completionDialogTitle = "Mark section as complete?",
   currentIndex,
-  labels = {},
+  labels = EMPTY_SLIDESHOW_LABELS,
   onComplete,
   onExit,
   onNavigate,
@@ -145,7 +147,7 @@ function SlideshowImpl({
               children: isTocOpen ? /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -162,7 +164,7 @@ function SlideshowImpl({
               ) : /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -200,7 +202,7 @@ function SlideshowImpl({
               children: /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-5 w-5",
+                  className: "size-5",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -248,7 +250,7 @@ function SlideshowImpl({
                   role: "dialog",
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
-                      /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: mergedLabels.sectionsLabel }),
+                      /* @__PURE__ */ jsx(SectionsHeading, { className: "font-semibold", children: mergedLabels.sectionsLabel }),
                       /* @__PURE__ */ jsx(
                         "button",
                         {
@@ -261,7 +263,7 @@ function SlideshowImpl({
                           children: /* @__PURE__ */ jsx(
                             "svg",
                             {
-                              className: "h-4 w-4",
+                              className: "size-4",
                               fill: "none",
                               stroke: "currentColor",
                               viewBox: "0 0 24 24",
@@ -298,13 +300,13 @@ function SlideshowImpl({
                               "div",
                               {
                                 className: cn(
-                                  "flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center",
+                                  "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
                                   isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"
                                 ),
                                 children: isCompleted ? /* @__PURE__ */ jsx(
                                   "svg",
                                   {
-                                    className: "h-3 w-3 text-background",
+                                    className: "size-3 text-background",
                                     fill: "none",
                                     stroke: "currentColor",
                                     viewBox: "0 0 24 24",
@@ -333,7 +335,7 @@ function SlideshowImpl({
                             )
                           ]
                         },
-                        `${section.id}-${index}`
+                        section.id
                       );
                     }) })
                   ]
@@ -355,7 +357,7 @@ function SlideshowImpl({
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center justify-between px-4 py-4 border-t border-border bg-background", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center justify-between p-4 border-t border-border bg-background", children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -367,7 +369,7 @@ function SlideshowImpl({
               /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-4 w-4",
+                  className: "size-4",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",
@@ -397,7 +399,7 @@ function SlideshowImpl({
               !isLastSection && /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  className: "h-4 w-4",
+                  className: "size-4",
                   fill: "none",
                   stroke: "currentColor",
                   viewBox: "0 0 24 24",

package/dist/components/snap-guides/index.js

@@ -0,0 +1,6 @@
+import {
+  SnapGuides
+} from "./snap-guides";
+export {
+  SnapGuides
+};

package/dist/components/snap-guides/snap-guides.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Snap guides"
+};
+const SnapGuides = forwardRef(
+  (props, ref) => {
+    const { className, guides, labels, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("pointer-events-none absolute inset-0 z-30", className),
+        "data-snap-guide-count": guides.length,
+        ref,
+        ...rest,
+        children: guides.map((guide) => {
+          const isVertical = guide.orientation === "vertical";
+          const offset = isVertical ? guide.x : guide.y;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute border-primary/70",
+                isVertical ? "inset-y-0 w-px border-l border-dashed" : "inset-x-0 h-px border-t border-dashed"
+              ),
+              "data-snap-guide-id": guide.id,
+              "data-snap-orientation": guide.orientation,
+              style: isVertical ? { left: `${offset.toString()}px` } : { top: `${offset.toString()}px` }
+            },
+            guide.id
+          );
+        })
+      }
+    );
+  }
+);
+SnapGuides.displayName = "SnapGuides";
+export {
+  SnapGuides
+};

package/dist/components/social-fab/social-fab.js

@@ -7,15 +7,15 @@ function ShareMenu({
   onPlatformSelect,
   platforms
 }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: platforms.map((p) => {
-    const handleClick = () => {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: platforms.map((p) => {
+    const handleSelectSharePlatform = () => {
       onPlatformSelect(p.key);
     };
     return /* @__PURE__ */ jsx(
       "button",
       {
         className: "rounded px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-        onClick: handleClick,
+        onClick: handleSelectSharePlatform,
         type: "button",
         children: p.label
       },
@@ -24,12 +24,12 @@ function ShareMenu({
   }) });
 }
 function ActionButton({ action }) {
-  const handleClick = action.onClick;
+  const handleRunAction = action.onClick;
   return /* @__PURE__ */ jsx(
     "button",
     {
       className: "rounded px-3 py-1.5 text-left text-sm transition-colors hover:bg-accent",
-      onClick: handleClick,
+      onClick: handleRunAction,
       type: "button",
       children: action.label
     }
@@ -47,7 +47,7 @@ function ActionPanel({
   const handleShareClick = shareAction?.onClick;
   const handleShareMouseEnter = isMobile ? void 0 : onShareHover;
   const handleShareMouseLeave = isMobile ? void 0 : onShareLeave;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-gray-300 bg-background p-1.5 shadow-md dark:border-gray-600", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 rounded-md border border-zinc-300 bg-background p-1.5 shadow-md dark:border-zinc-600", children: [
     shareAction ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -69,7 +69,7 @@ function MainFabButton({
   mainText,
   onToggle
 }) {
-  const handleClick = onToggle;
+  const handleToggleSharePanel = onToggle;
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -77,11 +77,11 @@ function MainFabButton({
       "aria-label": isExpanded ? labels.close : labels.share,
       className: cn(
         "flex size-10 items-center justify-center rounded-md",
-        "border border-gray-300 bg-background dark:border-gray-600",
+        "border border-zinc-300 bg-background dark:border-zinc-600",
         "transition-all duration-200 ease-out",
-        "hover:-translate-y-0.5 hover:border-gray-400 hover:shadow-md dark:hover:border-gray-500"
+        "hover:-translate-y-0.5 hover:border-zinc-400 hover:shadow-md dark:hover:border-zinc-500"
       ),
-      onClick: handleClick,
+      onClick: handleToggleSharePanel,
       type: "button",
       children: /* @__PURE__ */ jsx("span", { className: "text-sm font-mono", children: isMobile && isExpanded ? "\u2715" : mainText })
     }
@@ -140,6 +140,7 @@ function ExpandedPanel({
     }
   );
 }
+const EMPTY_SHARE_PLATFORMS = [];
 function SocialFAB({
   actions,
   bottomOffset = 24,
@@ -150,7 +151,7 @@ function SocialFAB({
   onClose,
   onOpen,
   rightOffset = 24,
-  sharePlatforms = []
+  sharePlatforms = EMPTY_SHARE_PLATFORMS
 }) {
   const options = { onAction, onClose, onOpen };
   const fab = useSocialFab(options);

package/dist/components/sparkline-grid/sparkline-grid.js

@@ -30,7 +30,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
       children: items.map((item) => {
         const isPositive = item.change >= 0;
         const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;
-        const stroke = isPositive ? "hsl(142 71% 45%)" : "hsl(348 83% 47%)";
+        const strokeClass = isPositive ? "text-emerald-600 dark:text-emerald-400" : "text-rose-600 dark:text-rose-400";
         return /* @__PURE__ */ jsxs(
           "section",
           {
@@ -49,7 +49,7 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
                       isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TrendIcon, { className: "h-3.5 w-3.5" }),
+                      /* @__PURE__ */ jsx(TrendIcon, { className: "size-3.5" }),
                       item.change > 0 ? "+" : "",
                       item.change.toFixed(2),
                       "%"
@@ -67,9 +67,10 @@ const SparklineGrid = React.forwardRef(({ className, columns = 2, items, ...prop
                   children: /* @__PURE__ */ jsx(
                     "path",
                     {
+                      className: strokeClass,
                       d: buildSparklinePath(item.data, 120, 48),
                       fill: "none",
-                      stroke,
+                      stroke: "currentColor",
                       strokeLinecap: "round",
                       strokeLinejoin: "round",
                       strokeWidth: "2.5",