@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/dist/shared/{components-z0bqtvcp.js → components-w90endve.js}

@@ -1,78 +1,58 @@
-"use client";
 import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   ScrollArea2
-} from "./components-ctqmge8t.js";
-import {
-  spring2,
-  exitFallbackMs2
-} from "./components-3ey0hzpb.js";
-import {
-  surfaceClasses2
-} from "./components-vf45j12c.js";
+} from "./components-b0eac83j.js";
 import {
+  surfaceClasses2,
   useSurface2,
   SurfaceProvider2
-} from "./components-dhgk6mbt.js";
+} from "./components-zx6b6yby.js";
 import {
-  useIcon2
-} from "./components-jqpefjsn.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
   useSizeVariant2,
   useSize2
-} from "./components-h83az0bz.js";
+} from "./components-0sn7ypjw.js";
 import {
   Button2
-} from "./components-9sttq78t.js";
+} from "./components-b2wyq2cq.js";
 import {
   Sheet2
-} from "./components-8rb25gbe.js";
-import {
-  fieldVariants2
-} from "./components-124epb7f.js";
+} from "./components-rr7a6ja9.js";
 import {
-  inertProps2
-} from "./components-z3v0n0de.js";
+  fieldVariants
+} from "./components-raknhppb.js";
 import {
-  useIsMobile2
-} from "./components-rrbpmfx4.js";
+  useIsMobile
+} from "./components-c6s6b43g.js";
 import {
   Tooltip2
-} from "./components-cwg1d0w6.js";
-import {
-  sidebarMenuButtonVariants2,
-  SIDEBAR_COOKIE_NAME2,
-  SIDEBAR_COOKIE_MAX_AGE2,
-  SIDEBAR_WIDTH2,
-  SIDEBAR_WIDTH_MOBILE2,
-  SIDEBAR_KEYBOARD_SHORTCUT2,
-  SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2,
-  SIDEBAR_MIN_WIDTH2,
-  SIDEBAR_MAX_WIDTH2,
-  SIDEBAR_COLLAPSE_SLOP2,
-  SIDEBAR_HOVER_STRIP2,
-  SIDEBAR_HOVER_TRIGGER_GAP2
-} from "./components-kswxnm3h.js";
+} from "./components-ng72k97e.js";
 import {
-  GooIndicator2
-} from "./components-pw06rbxq.js";
+  GooIndicator
+} from "./components-chacnk61.js";
 import {
   FluidHoverHighlight2
-} from "./components-qdm3yh26.js";
+} from "./components-kvr7f9hy.js";
 import {
   useFluidHover2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
+import {
+  spring2,
+  exitFallbackMs2
+} from "./components-1v7rxytx.js";
 
 // components/navigation/sidebar/index.tsx
 import {
@@ -99,6 +79,17 @@ import {
   useState
 } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var SIDEBAR_COOKIE_NAME2 = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE2 = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH2 = "16rem";
+var SIDEBAR_WIDTH_MOBILE2 = "18rem";
+var SIDEBAR_KEYBOARD_SHORTCUT2 = "[";
+var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2 = "]";
+var SIDEBAR_MIN_WIDTH2 = 160;
+var SIDEBAR_MAX_WIDTH2 = 360;
+var SIDEBAR_COLLAPSE_SLOP = 56;
+var SIDEBAR_HOVER_STRIP = 12;
+var SIDEBAR_HOVER_TRIGGER_GAP = 24;
 var mountedProviders = [];
 var SidebarContext = createContext(null);
 function useSidebar2() {
@@ -115,11 +106,11 @@ function inHoverZone(event, side, frame, shell, triggers) {
     return false;
   const box = shell.getBoundingClientRect();
   const inner = side === "left" ? box.right : box.left;
-  let reach = SIDEBAR_HOVER_STRIP2;
+  let reach = SIDEBAR_HOVER_STRIP;
   for (const trigger of triggers) {
     const button = trigger.getBoundingClientRect();
     const gap = side === "left" ? button.left - inner : inner - button.right;
-    if (gap >= 0 && gap <= SIDEBAR_HOVER_TRIGGER_GAP2)
+    if (gap >= 0 && gap <= SIDEBAR_HOVER_TRIGGER_GAP)
       reach = Math.max(reach, gap + button.width);
   }
   return side === "left" ? event.clientX >= bounds.left && event.clientX < inner + reach : event.clientX <= bounds.right && event.clientX > inner - reach;
@@ -139,7 +130,7 @@ var SidebarProvider2 = forwardRef(({
   children,
   ...props
 }, ref) => {
-  const isMobile = useIsMobile2(mobileBreakpoint);
+  const isMobile = useIsMobile(mobileBreakpoint);
   const [openMobile, setOpenMobile] = useState(false);
   const [side, setSide] = useState("left");
   const wrapperRef = useRef(null);
@@ -384,7 +375,7 @@ var BREAKPOINT_HIDDEN = {
 var SidebarShell = forwardRef(({ side, variant, bordered = true, rail = true, railTooltipOpen, className, children, ...props }, ref) => {
   const { open: kept, hoverOpen, width, mobileBreakpoint, isMobile, isResizing, shellRef } = useSidebar2();
   const open = kept || hoverOpen;
-  const shape = useShape2();
+  const shape = useShape();
   const substrate = useSurface2();
   const floatingLevel = Math.min(substrate + 1, 8);
   const reduceMotion = useReducedMotion() ?? false;
@@ -429,7 +420,7 @@ var SidebarShell = forwardRef(({ side, variant, bordered = true, rail = true, ra
       initial: false,
       animate: { x: open ? "0%" : side === "left" ? "-100%" : "100%" },
       transition: widthTransition,
-      ...inertProps2(!(open || isResizing)),
+      ...open || isResizing ? {} : { inert: "" },
       children: [
         variant === "floating" ? /* @__PURE__ */ jsx("div", {
           "data-sidebar": "sidebar",
@@ -470,7 +461,7 @@ var SidebarTrigger2 = forwardRef(({ onClick, size, children, ...props }, ref) =>
   const { toggleSidebar, open, openMobile, isMobile, side, openOnHover, registerTrigger } = useSidebar2();
   const shortcutKey = useShortcutKey();
   const hoverMode = openOnHover && !isMobile;
-  const TriggerIcon = useIcon2(`panel-${side}${hoverMode && !open ? "-dashed" : ""}`);
+  const TriggerIcon = useIcon(`panel-${side}${hoverMode && !open ? "-dashed" : ""}`);
   const iconSize = useSizeVariant2() === "compact" ? "icon-compact" : "icon";
   const collapsed = isMobile ? !openMobile : !open;
   const label = hoverMode ? open ? "Show sidebar on hover" : "Keep sidebar open" : collapsed ? "Expand sidebar" : "Collapse sidebar";
@@ -545,7 +536,7 @@ var SidebarRail2 = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
     }
     const delta = side === "left" ? dx : -dx;
     const raw = drag.startWidth + delta;
-    if (raw < SIDEBAR_MIN_WIDTH2 - SIDEBAR_COLLAPSE_SLOP2) {
+    if (raw < SIDEBAR_MIN_WIDTH2 - SIDEBAR_COLLAPSE_SLOP) {
       if (!drag.collapsed) {
         drag.collapsed = true;
         setWidth(`${SIDEBAR_MIN_WIDTH2}px`);
@@ -639,7 +630,7 @@ var SidebarRail2 = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
 });
 SidebarRail2.displayName = "SidebarRail";
 var SidebarInset2 = forwardRef(({ className, ...props }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   return /* @__PURE__ */ jsx("main", {
     ref,
     "data-slot": "sidebar-inset",
@@ -649,12 +640,12 @@ var SidebarInset2 = forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInset2.displayName = "SidebarInset";
 var SidebarInput2 = forwardRef(({ className, ...props }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   const size = useSize2();
   return /* @__PURE__ */ jsx("input", {
     ref,
     "data-sidebar": "input",
-    className: cn2(fieldVariants2(), "w-full px-3 text-foreground placeholder:text-muted-foreground outline-none", "focus-visible:ring-focus-ring", size.variant === "compact" ? "h-7" : "h-8", size.text, shape.input, className),
+    className: cn2(fieldVariants(), "w-full px-3 text-foreground placeholder:text-muted-foreground outline-none", "focus-visible:ring-focus-ring", size.variant === "compact" ? "h-7" : "h-8", size.text, shape.input, className),
     ...props
   });
 });
@@ -755,7 +746,7 @@ var SidebarGroup2 = forwardRef(({ className, collapsible = false, open: openProp
             children: /* @__PURE__ */ jsx("div", {
               ref: contentRef,
               className: "flex w-full min-w-0 flex-col",
-              ...inertProps2(!open),
+              ...open ? {} : { inert: "" },
               children: rest
             })
           })
@@ -781,8 +772,8 @@ var SidebarGroupLabel2 = forwardRef(({ className, render, asChild, children, ...
   const sizeVariant = useSizeVariant2();
   const sizeClasses = useSize2();
   const group = useContext(SidebarGroupContext);
-  const shape = useShape2();
-  const ChevronRightIcon = useIcon2("chevron-right");
+  const shape = useShape();
+  const ChevronRightIcon = useIcon("chevron-right");
   const { template, content } = resolveSlotTemplate(render, asChild, children);
   const nodes = Children.toArray(content);
   let textEnd = 0;
@@ -839,7 +830,7 @@ var SidebarGroupLabel2 = forwardRef(({ className, render, asChild, children, ...
 SidebarGroupLabel2.displayName = "SidebarGroupLabel";
 var GroupActionsContext = createContext(false);
 var SidebarGroupAction2 = forwardRef(({ className, render, asChild, children, ...props }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const inCluster = useContext(GroupActionsContext);
   const { template, content } = resolveSlotTemplate(render, asChild, children);
@@ -878,6 +869,7 @@ var SidebarGroupContent2 = forwardRef(({ className, ...props }, ref) => /* @__PU
 SidebarGroupContent2.displayName = "SidebarGroupContent";
 
 // components/navigation/sidebar/sidebar-menu.tsx
+import { cva } from "class-variance-authority";
 import { AnimatePresence, motion as motion2 } from "motion/react";
 import {
   Children as Children2,
@@ -1055,7 +1047,7 @@ function useMenuScope(containerRef, { focusRing = true } = {}) {
     hasActive: activeRows.length > 0,
     refreshVisibility
   }), [registerRow, setRowButton, setRowActive, hoveredRowEl, activeRows, orderedRows, refreshVisibility]);
-  const shape = useShape2();
+  const shape = useShape();
   const rowLevel = useCallback2((row) => row.closest('[data-sidebar="menu-sub"]') ?? containerRef.current, [containerRef]);
   const prevTargetsRef = useRef2({ hover: null, focus: null, actives: new Map });
   const levelOccurrence = new Map;
@@ -1101,7 +1093,7 @@ function useMenuScope(containerRef, { focusRing = true } = {}) {
           initial: false,
           animate: { opacity: 1 },
           exit: { opacity: 0, transition: spring2.moderate.exit },
-          children: /* @__PURE__ */ jsx2(GooIndicator2, {
+          children: /* @__PURE__ */ jsx2(GooIndicator, {
             rect,
             className: cn2("bg-active", shape.bg),
             transition: rowChanged ? spring2.moderate : false
@@ -1210,7 +1202,7 @@ function useMenuRow(rowRef, isSubRow = false, sub) {
   });
   const setActions = useCallback2((count, showOnHover) => setTrailing((prev) => prev.actionCount === count && prev.actionsShowOnHover === showOnHover ? prev : { ...prev, actionCount: count, actionsShowOnHover: showOnHover }), []);
   const setHasBadge = useCallback2((hasBadge) => setTrailing((prev) => prev.hasBadge === hasBadge ? prev : { ...prev, hasBadge }), []);
-  const [open, setOpen] = useControllableState2(sub?.open, sub?.defaultOpen ?? false, sub?.onOpenChange);
+  const [open, setOpen] = useControllableState(sub?.open, sub?.defaultOpen ?? false, sub?.onOpenChange);
   const subOpen = sub?.collapsible ? open : undefined;
   const toggleSub = useCallback2(() => setOpen((prev) => !prev), [setOpen]);
   return useMemo2(() => ({
@@ -1341,6 +1333,15 @@ function MenuRowLabel({
     ]
   });
 }
+var sidebarMenuButtonVariants2 = cva("peer/menu-button relative z-10 flex w-full cursor-pointer select-none items-center gap-2 pl-2 text-left outline-none disabled:opacity-50 disabled:pointer-events-none transition-[padding] duration-fast pr-[var(--row-gutter)] group-hover/menu-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-item:pr-[var(--row-gutter-hover)] group-hover/menu-sub-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-sub-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-sub-item:pr-[var(--row-gutter-hover)]", {
+  variants: {
+    variant: {
+      default: "",
+      outline: "border border-border bg-background"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
 var SidebarMenuButton2 = forwardRef2(({
   isActive = false,
   size = "default",
@@ -1360,10 +1361,10 @@ var SidebarMenuButton2 = forwardRef2(({
   const scope = useContext2(MenuScopeContext);
   const item = useContext2(MenuItemContext);
   const selection = useContext2(SidebarSelection2);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const buttonRef = useRef2(null);
-  const ChevronRightIcon = useIcon2("chevron-right");
+  const ChevronRightIcon = useIcon("chevron-right");
   const subOpen = item?.subOpen;
   const collapsible = subOpen !== undefined;
   const effectiveActive = isActive || (value === undefined ? status === "active" : selection?.value === value);
@@ -1463,7 +1464,7 @@ var SidebarMenuButton2 = forwardRef2(({
 });
 SidebarMenuButton2.displayName = "SidebarMenuButton";
 var SidebarMenuAction2 = forwardRef2(({ className, showOnHover = false, render, asChild, children, onClick, ...props }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const item = useContext2(MenuItemContext);
   const inCluster = useContext2(MenuActionsClusterContext);
@@ -1602,7 +1603,7 @@ var SidebarMenuSub2 = forwardRef2(({ className, open: openProp, children, ...pro
       "data-sidebar": "menu-sub",
       "data-state": open ? "open" : "closed",
       "aria-hidden": open ? undefined : true,
-      ...inertProps2(!open),
+      ...open ? {} : { inert: "" },
       className: cn2("relative ml-[15px] flex min-w-0 flex-col border-l border-border pl-2 select-none", className),
       ...props,
       children
@@ -1625,7 +1626,7 @@ var SidebarMenuSubButton2 = forwardRef2(({
   const item = useContext2(MenuItemContext);
   const selection = useContext2(SidebarSelection2);
   const isActive = isActiveProp || value !== undefined && selection?.value === value;
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const buttonRef = useRef2(null);
   const setActive = item?.setActive;
@@ -1724,7 +1725,7 @@ var Sidebar2 = forwardRef3(({
   ...props
 }, ref) => {
   const { isMobile, width, registerSide } = useSidebar2();
-  const [value, setValue] = useControllableState2(valueProp, defaultValue, onValueChange);
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
   const selection = useMemo3(() => ({ value, select: setValue }), [value, setValue]);
   const children = /* @__PURE__ */ jsx3(SidebarSelection2.Provider, {
     value: selection,
@@ -1824,4 +1825,4 @@ Object.assign(Sidebar2, {
 });
 var sidebar_default = Sidebar2;
 
-export { useSidebar2, SidebarProvider2, SidebarTrigger2, SidebarRail2, SidebarInset2, SidebarInput2, SidebarHeader2, SidebarFooter2, SidebarSeparator2, SidebarGroup2, SidebarGroupLabel2, SidebarGroupAction2, SidebarGroupActions2, SidebarGroupContent2, SidebarSelection2, SidebarMenu2, SidebarMenuItem2, SidebarMenuSubItem2, SidebarMenuButton2, SidebarMenuAction2, SidebarMenuActions2, SidebarMenuBadge2, SidebarMenuSkeleton2, SidebarMenuSub2, SidebarMenuSubButton2, Sidebar2, SidebarContent2, sidebar_default };
+export { SIDEBAR_COOKIE_NAME2, SIDEBAR_COOKIE_MAX_AGE2, SIDEBAR_WIDTH2, SIDEBAR_WIDTH_MOBILE2, SIDEBAR_KEYBOARD_SHORTCUT2, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2, SIDEBAR_MIN_WIDTH2, SIDEBAR_MAX_WIDTH2, useSidebar2, SidebarProvider2, SidebarTrigger2, SidebarRail2, SidebarInset2, SidebarInput2, SidebarHeader2, SidebarFooter2, SidebarSeparator2, SidebarGroup2, SidebarGroupLabel2, SidebarGroupAction2, SidebarGroupActions2, SidebarGroupContent2, SidebarSelection2, SidebarMenu2, SidebarMenuItem2, SidebarMenuSubItem2, sidebarMenuButtonVariants2, SidebarMenuButton2, SidebarMenuAction2, SidebarMenuActions2, SidebarMenuBadge2, SidebarMenuSkeleton2, SidebarMenuSub2, SidebarMenuSubButton2, Sidebar2, SidebarContent2, sidebar_default };