@vllnt/ui 0.2.1 → 0.3.0-canary.0572c35

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" })
     ]
   }
 ));