@locusgraph/components 0.2.0 → 0.2.1

package/dist/layout/sidebar/sidebar-context.js

@@ -1,9 +1,11 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import * as React from "react";
 import { TooltipProvider } from "../../overlay/tooltip.js";
 import { useIsMobile } from "../use-mobile.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "15rem";
@@ -12,61 +14,192 @@ const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SidebarContext = React.createContext(null);
 function useSidebar() {
-    const context = React.useContext(SidebarContext);
-    if (!context) {
-        throw new Error("useSidebar must be used within a SidebarProvider.");
-    }
-    return context;
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
 }
 function persistSidebarState(open) {
-    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 }
 function useSidebarKeyboardShortcut(toggleSidebar) {
-    React.useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                toggleSidebar();
-            }
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [toggleSidebar]);
+  const $ = _c(3);
+  let t0;
+  let t1;
+  if ($[0] !== toggleSidebar) {
+    t0 = () => {
+      const handleKeyDown = event => {
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    };
+    t1 = [toggleSidebar];
+    $[0] = toggleSidebar;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  React.useEffect(t0, t1);
 }
 const sidebarMobileHitArea = "after:absolute after:-inset-2 md:after:hidden";
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
-    const open = openProp ?? uncontrolledOpen;
-    const setOpen = React.useCallback((value) => {
-        const openState = typeof value === "function" ? value(open) : value;
-        if (setOpenProp) {
-            setOpenProp(openState);
-        }
-        else {
-            setUncontrolledOpen(openState);
-        }
-        persistSidebarState(openState);
-    }, [setOpenProp, open]);
-    const toggleSidebar = React.useCallback(() => {
-        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
-    useSidebarKeyboardShortcut(toggleSidebar);
-    const state = open ? "expanded" : "collapsed";
-    const contextValue = React.useMemo(() => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
-    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
-                    "--sidebar-width": SIDEBAR_WIDTH,
-                    "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                    ...style,
-                }, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
+function SidebarProvider(t0) {
+  const $ = _c(33);
+  let children;
+  let className;
+  let openProp;
+  let props;
+  let setOpenProp;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      defaultOpen: t1,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = openProp;
+    $[4] = props;
+    $[5] = setOpenProp;
+    $[6] = style;
+    $[7] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    openProp = $[3];
+    props = $[4];
+    setOpenProp = $[5];
+    style = $[6];
+    t1 = $[7];
+  }
+  const defaultOpen = t1 === undefined ? true : t1;
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  let t2;
+  if ($[8] !== open || $[9] !== setOpenProp) {
+    t2 = value => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        setUncontrolledOpen(openState);
+      }
+      persistSidebarState(openState);
+    };
+    $[8] = open;
+    $[9] = setOpenProp;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const setOpen = t2;
+  let t3;
+  if ($[11] !== isMobile || $[12] !== setOpen) {
+    t3 = () => isMobile ? setOpenMobile(_temp) : setOpen(_temp2);
+    $[11] = isMobile;
+    $[12] = setOpen;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  const toggleSidebar = t3;
+  useSidebarKeyboardShortcut(toggleSidebar);
+  const state = open ? "expanded" : "collapsed";
+  let t4;
+  if ($[14] !== isMobile || $[15] !== open || $[16] !== openMobile || $[17] !== setOpen || $[18] !== state || $[19] !== toggleSidebar) {
+    t4 = {
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    };
+    $[14] = isMobile;
+    $[15] = open;
+    $[16] = openMobile;
+    $[17] = setOpen;
+    $[18] = state;
+    $[19] = toggleSidebar;
+    $[20] = t4;
+  } else {
+    t4 = $[20];
+  }
+  const contextValue = t4;
+  let t5;
+  if ($[21] !== style) {
+    t5 = {
+      "--sidebar-width": SIDEBAR_WIDTH,
+      "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+      ...style
+    };
+    $[21] = style;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  let t6;
+  if ($[23] !== className) {
+    t6 = cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className);
+    $[23] = className;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  let t7;
+  if ($[25] !== children || $[26] !== props || $[27] !== t5 || $[28] !== t6) {
+    t7 = /*#__PURE__*/_jsx(TooltipProvider, {
+      delayDuration: 0,
+      children: /*#__PURE__*/_jsx("div", {
+        "data-slot": "sidebar-wrapper",
+        style: t5,
+        className: t6,
+        ...props,
+        children: children
+      })
+    });
+    $[25] = children;
+    $[26] = props;
+    $[27] = t5;
+    $[28] = t6;
+    $[29] = t7;
+  } else {
+    t7 = $[29];
+  }
+  let t8;
+  if ($[30] !== contextValue || $[31] !== t7) {
+    t8 = /*#__PURE__*/_jsx(SidebarContext.Provider, {
+      value: contextValue,
+      children: t7
+    });
+    $[30] = contextValue;
+    $[31] = t7;
+    $[32] = t8;
+  } else {
+    t8 = $[32];
+  }
+  return t8;
+}
+function _temp2(open_1) {
+  return !open_1;
+}
+function _temp(open_0) {
+  return !open_0;
 }
 export { SIDEBAR_WIDTH_MOBILE, SidebarProvider, sidebarMobileHitArea, useSidebar };

package/dist/layout/sidebar/sidebar-menu-sub.js

@@ -1,26 +1,231 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "cn";
 import * as Slot from "radix-ui/slot";
 import * as React from "react";
 import { Skeleton } from "../../display/status/skeleton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function randomSkeletonWidth() {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
+  return `${Math.floor(Math.random() * 40) + 50}%`;
 }
-function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
-    const width = React.useMemo(randomSkeletonWidth, []);
-    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
-                    "--skeleton-width": width,
-                } })] }));
+function SidebarMenuSkeleton(t0) {
+  const $ = _c(15);
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      showIcon: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const showIcon = t1 === undefined ? false : t1;
+  const [width] = React.useState(randomSkeletonWidth);
+  let t2;
+  if ($[4] !== className) {
+    t2 = cn("flex h-8 items-center gap-2 rounded-md px-2", className);
+    $[4] = className;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== showIcon) {
+    t3 = showIcon && /*#__PURE__*/_jsx(Skeleton, {
+      className: "size-4 rounded-md",
+      "data-sidebar": "menu-skeleton-icon"
+    });
+    $[6] = showIcon;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== width) {
+    t4 = /*#__PURE__*/_jsx(Skeleton, {
+      className: "h-4 max-w-(--skeleton-width) flex-1",
+      "data-sidebar": "menu-skeleton-text",
+      style: {
+        "--skeleton-width": width
+      }
+    });
+    $[8] = width;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== props || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: t2,
+      ...props,
+      children: [t3, t4]
+    });
+    $[10] = props;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
 }
-function SidebarMenuSub({ className, ...props }) {
-    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className), ...props }));
+function SidebarMenuSub(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("ul", {
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function SidebarMenuSubItem({ className, ...props }) {
-    return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
+function SidebarMenuSubItem(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("group/menu-sub-item relative", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = /*#__PURE__*/_jsx("li", {
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: t1,
+      ...props
+    });
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 }
-function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
-    const Comp = asChild ? Slot.Root : "a";
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className), ...props }));
+function SidebarMenuSubButton(t0) {
+  const $ = _c(16);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      asChild: t1,
+      size: t2,
+      isActive: t3,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+  }
+  const asChild = t1 === undefined ? false : t1;
+  const size = t2 === undefined ? "md" : t2;
+  const isActive = t3 === undefined ? false : t3;
+  const Comp = asChild ? Slot.Root : "a";
+  const t4 = size === "sm" && "text-xs";
+  const t5 = size === "md" && "text-sm";
+  let t6;
+  if ($[6] !== className || $[7] !== t4 || $[8] !== t5) {
+    t6 = cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", t4, t5, "group-data-[collapsible=icon]:hidden", className);
+    $[6] = className;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== Comp || $[11] !== isActive || $[12] !== props || $[13] !== size || $[14] !== t6) {
+    t7 = /*#__PURE__*/_jsx(Comp, {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: t6,
+      ...props
+    });
+    $[10] = Comp;
+    $[11] = isActive;
+    $[12] = props;
+    $[13] = size;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
 }
 export { SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem };