@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-njzgqdwy.js

@@ -0,0 +1,445 @@
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  button_default
+} from "./components-b2wyq2cq.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  tooltip_default
+} from "./components-ng72k97e.js";
+import {
+  SidebarTrigger2,
+  SidebarInput2,
+  SidebarMenu2,
+  SidebarMenuItem2,
+  SidebarMenuButton2,
+  sidebar_default
+} from "./components-ca2c898n.js";
+import {
+  MenuItem2,
+  DropdownMenu2,
+  DropdownTrigger2,
+  DropdownContent2
+} from "./components-nh8tma1n.js";
+
+// blocks/sidebar-app/index.tsx
+import { useState } from "react";
+
+// blocks/sidebar-app/inset-topbar.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SidebarInsetTopbar({ children, className }) {
+  return /* @__PURE__ */ jsxs("header", {
+    className: cn2("flex h-12 shrink-0 items-center gap-2 px-1.5", className),
+    children: [
+      /* @__PURE__ */ jsx(SidebarTrigger2, {}),
+      children
+    ]
+  });
+}
+
+// blocks/sidebar-app/nav-data.ts
+var NAV_SECTIONS = [
+  {
+    label: "fluid-functionalism",
+    items: [
+      { label: "New pricing page exploration", status: "active" },
+      { label: "Component library audit", status: "idle" },
+      { label: "Dark mode token pass", status: "unread" }
+    ]
+  },
+  {
+    label: "portfolio-site",
+    items: [
+      { label: "Scrollbar fade regression", status: "idle" },
+      { label: "Registry deploy pipeline", status: "unread" }
+    ]
+  }
+];
+
+// blocks/sidebar-app/search-field.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SidebarSearchField({ placeholder = "Search…", shortcut = "⌘K", ...props }) {
+  const iconSize = useSize2().icon;
+  const SearchIcon = useIcon("search");
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "group/search relative",
+    children: [
+      /* @__PURE__ */ jsx2(SearchIcon, {
+        size: iconSize,
+        strokeWidth: 1.5,
+        className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
+      }),
+      /* @__PURE__ */ jsx2(SidebarInput2, {
+        placeholder,
+        "aria-label": "Search",
+        className: "pl-8 pr-12",
+        ...props
+      }),
+      shortcut && /* @__PURE__ */ jsx2("kbd", {
+        className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 font-sans text-micro text-muted-foreground opacity-0 transition-opacity duration-fast group-hover/search:opacity-100 group-focus-within/search:opacity-100",
+        children: shortcut
+      })
+    ]
+  });
+}
+
+// blocks/sidebar-app/menu-grid.ts
+var SIDEBAR_MENU_GRID = "[&_[role=menuitem]]:pl-2 [&_[role=menuitem]]:pr-1.5 [&_[role=menuitem]]:gap-2 [&_[role=menuitemradio]]:pl-2 [&_[role=menuitemradio]]:pr-1.5 [&_[role=menuitemradio]]:gap-2";
+var SIDEBAR_MENU_POPUP = `min-w-[240px] w-[calc(var(--anchor-width)_+_10px)] ${SIDEBAR_MENU_GRID}`;
+
+// blocks/sidebar-app/user-footer.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SidebarUserFooter({ name, avatar, menu, className }) {
+  const iconSize = useSize2().icon;
+  const ChevronsUpDown = useIcon("chevrons-up-down");
+  return /* @__PURE__ */ jsx3(SidebarMenu2, {
+    "aria-label": "User",
+    className: cn2(className),
+    children: /* @__PURE__ */ jsx3(SidebarMenuItem2, {
+      children: /* @__PURE__ */ jsxs3(DropdownMenu2, {
+        children: [
+          /* @__PURE__ */ jsx3(DropdownTrigger2, {
+            render: /* @__PURE__ */ jsxs3(SidebarMenuButton2, {
+              "aria-label": "Open user menu",
+              children: [
+                /* @__PURE__ */ jsx3("span", {
+                  className: "-ml-0.5 -mr-0.5 flex size-5 shrink-0 items-center justify-center",
+                  children: avatar
+                }),
+                /* @__PURE__ */ jsx3("span", {
+                  className: "min-w-0 truncate text-body text-foreground",
+                  children: name
+                }),
+                /* @__PURE__ */ jsx3("span", {
+                  className: "ml-auto -mr-0.5 flex size-6 shrink-0 items-center justify-center",
+                  children: /* @__PURE__ */ jsx3(ChevronsUpDown, {
+                    size: iconSize,
+                    strokeWidth: 1.5,
+                    className: "text-muted-foreground"
+                  })
+                })
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsx3(DropdownContent2, {
+            className: SIDEBAR_MENU_POPUP,
+            side: "top",
+            align: "start",
+            sideOffset: 6,
+            children: menu
+          })
+        ]
+      })
+    })
+  });
+}
+
+// blocks/sidebar-app/workspace-header.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function SidebarWorkspaceHeader({
+  name,
+  tile,
+  menu,
+  checkedIndex,
+  defaultCheckedIndex
+}) {
+  const iconSize = useSize2().icon;
+  const ChevronDown = useIcon("chevron-down");
+  const tileSlot = /* @__PURE__ */ jsx4("span", {
+    "aria-hidden": true,
+    className: "pointer-events-none absolute left-1.5 top-1/2 -translate-y-1/2",
+    children: tile
+  });
+  const nameSpan = /* @__PURE__ */ jsx4("span", {
+    className: "min-w-0 truncate text-body weight-semibold text-foreground",
+    children: name
+  });
+  if (!menu) {
+    return /* @__PURE__ */ jsxs4("div", {
+      className: "relative flex h-8 items-center pl-8 pr-2",
+      children: [
+        tileSlot,
+        nameSpan
+      ]
+    });
+  }
+  return /* @__PURE__ */ jsx4(SidebarMenu2, {
+    "aria-label": "Workspace",
+    className: "@container",
+    children: /* @__PURE__ */ jsx4(SidebarMenuItem2, {
+      children: /* @__PURE__ */ jsxs4(DropdownMenu2, {
+        children: [
+          /* @__PURE__ */ jsx4(DropdownTrigger2, {
+            render: /* @__PURE__ */ jsxs4(SidebarMenuButton2, {
+              "aria-label": "Switch workspace",
+              className: "pl-8",
+              children: [
+                tileSlot,
+                nameSpan,
+                /* @__PURE__ */ jsx4("span", {
+                  className: "ml-auto inline-flex @max-[7rem]:hidden",
+                  children: /* @__PURE__ */ jsx4(ChevronDown, {
+                    size: iconSize,
+                    strokeWidth: 1.5,
+                    className: "text-muted-foreground"
+                  })
+                })
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsx4(DropdownContent2, {
+            className: SIDEBAR_MENU_POPUP,
+            align: "start",
+            sideOffset: 4,
+            checkedIndex,
+            defaultCheckedIndex,
+            children: menu
+          })
+        ]
+      })
+    })
+  });
+}
+function WorkspaceTile({ children, className }) {
+  const shape = useShape();
+  return /* @__PURE__ */ jsx4("span", {
+    className: cn2("flex size-5 shrink-0 items-center justify-center bg-foreground text-micro-compact weight-semibold text-background", shape.bgRadius >= 20 ? "rounded-full" : "rounded-md", className),
+    children
+  });
+}
+
+// blocks/sidebar-app/index.tsx
+import { jsx as jsx5, jsxs as jsxs5, Fragment } from "react/jsx-runtime";
+function AppSidebar({ variant, side, className, value, onValueChange }) {
+  const PlusIcon = useIcon("plus");
+  const PencilIcon = useIcon("pencil");
+  const MoreVerticalIcon = useIcon("more-vertical");
+  const LinkIcon = useIcon("link");
+  const UserIcon = useIcon("user");
+  const SettingsIcon = useIcon("settings");
+  const ArrowLeftIcon = useIcon("arrow-left");
+  const MoonIcon = useIcon("moon");
+  return /* @__PURE__ */ jsxs5(sidebar_default, {
+    variant,
+    side,
+    className,
+    value,
+    onValueChange,
+    children: [
+      /* @__PURE__ */ jsxs5(sidebar_default.Header, {
+        children: [
+          /* @__PURE__ */ jsx5(SidebarWorkspaceHeader, {
+            name: "Acme Inc",
+            tile: /* @__PURE__ */ jsx5(WorkspaceTile, {
+              children: "A"
+            }),
+            defaultCheckedIndex: 0,
+            menu: /* @__PURE__ */ jsxs5(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx5(MenuItem2, {
+                  index: 0,
+                  label: "Acme Inc"
+                }),
+                /* @__PURE__ */ jsx5(MenuItem2, {
+                  index: 1,
+                  label: "Personal"
+                }),
+                /* @__PURE__ */ jsx5(MenuItem2, {
+                  index: 2,
+                  icon: PlusIcon,
+                  label: "New workspace"
+                })
+              ]
+            })
+          }),
+          /* @__PURE__ */ jsxs5("div", {
+            className: "flex flex-col gap-0.5",
+            children: [
+              /* @__PURE__ */ jsx5(SidebarSearchField, {}),
+              /* @__PURE__ */ jsx5(sidebar_default.Menu, {
+                children: /* @__PURE__ */ jsx5(sidebar_default.MenuItem, {
+                  children: /* @__PURE__ */ jsxs5(sidebar_default.MenuButton, {
+                    icon: PlusIcon,
+                    children: [
+                      "New",
+                      /* @__PURE__ */ jsx5("span", {
+                        className: "ml-auto inline-flex opacity-0 transition-opacity duration-fast group-hover/menu-item:opacity-100 group-focus-within/menu-item:opacity-100",
+                        children: /* @__PURE__ */ jsx5("kbd", {
+                          className: "font-sans text-micro text-muted-foreground",
+                          children: "⇧⌘O"
+                        })
+                      })
+                    ]
+                  })
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx5(sidebar_default.Content, {
+        children: NAV_SECTIONS.map((section) => /* @__PURE__ */ jsxs5(sidebar_default.Group, {
+          collapsible: true,
+          children: [
+            /* @__PURE__ */ jsx5(sidebar_default.GroupLabel, {
+              children: section.label
+            }),
+            /* @__PURE__ */ jsx5(sidebar_default.GroupActions, {
+              children: /* @__PURE__ */ jsx5(tooltip_default, {
+                content: "Add item",
+                side: "top",
+                children: /* @__PURE__ */ jsx5(sidebar_default.GroupAction, {
+                  "aria-label": "Add item",
+                  children: /* @__PURE__ */ jsx5(PlusIcon, {})
+                })
+              })
+            }),
+            /* @__PURE__ */ jsx5(sidebar_default.Menu, {
+              children: section.items.map((item) => /* @__PURE__ */ jsxs5(sidebar_default.MenuItem, {
+                children: [
+                  /* @__PURE__ */ jsx5(sidebar_default.MenuButton, {
+                    status: item.status,
+                    value: item.label,
+                    children: item.label
+                  }),
+                  /* @__PURE__ */ jsxs5(DropdownMenu2, {
+                    children: [
+                      /* @__PURE__ */ jsx5(DropdownTrigger2, {
+                        render: /* @__PURE__ */ jsx5(sidebar_default.MenuAction, {
+                          showOnHover: true,
+                          "aria-label": "More options",
+                          children: /* @__PURE__ */ jsx5(MoreVerticalIcon, {})
+                        })
+                      }),
+                      /* @__PURE__ */ jsxs5(DropdownContent2, {
+                        className: "min-w-0 w-[240px]",
+                        align: "start",
+                        sideOffset: 4,
+                        children: [
+                          /* @__PURE__ */ jsx5(MenuItem2, {
+                            index: 0,
+                            icon: PencilIcon,
+                            label: "Rename"
+                          }),
+                          /* @__PURE__ */ jsx5(MenuItem2, {
+                            index: 1,
+                            icon: LinkIcon,
+                            label: "Share"
+                          })
+                        ]
+                      })
+                    ]
+                  })
+                ]
+              }, item.label))
+            })
+          ]
+        }, section.label))
+      }),
+      /* @__PURE__ */ jsx5(sidebar_default.Footer, {
+        children: /* @__PURE__ */ jsxs5("div", {
+          className: "flex items-center gap-1 pr-1.5",
+          children: [
+            /* @__PURE__ */ jsx5(SidebarUserFooter, {
+              name: "Jane Doe",
+              avatar: /* @__PURE__ */ jsx5("span", {
+                className: "flex size-5 items-center justify-center rounded-full bg-muted-foreground text-micro-compact text-background",
+                children: "J"
+              }),
+              className: "min-w-0 flex-1",
+              menu: /* @__PURE__ */ jsxs5(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx5(MenuItem2, {
+                    index: 0,
+                    icon: UserIcon,
+                    label: "Profile"
+                  }),
+                  /* @__PURE__ */ jsx5(MenuItem2, {
+                    index: 1,
+                    icon: SettingsIcon,
+                    label: "Settings"
+                  }),
+                  /* @__PURE__ */ jsx5(MenuItem2, {
+                    index: 2,
+                    icon: ArrowLeftIcon,
+                    label: "Log out"
+                  })
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx5(tooltip_default, {
+              content: "Settings",
+              side: "top",
+              children: /* @__PURE__ */ jsx5(button_default, {
+                variant: "ghost",
+                size: "icon-compact",
+                "aria-label": "Settings",
+                className: "size-6 shrink-0",
+                children: /* @__PURE__ */ jsx5(SettingsIcon, {})
+              })
+            }),
+            /* @__PURE__ */ jsx5(tooltip_default, {
+              content: "Theme",
+              side: "top",
+              children: /* @__PURE__ */ jsx5(button_default, {
+                variant: "ghost",
+                size: "icon-compact",
+                "aria-label": "Theme",
+                className: "size-6 shrink-0",
+                children: /* @__PURE__ */ jsx5(MoonIcon, {})
+              })
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+function SidebarApp2({
+  defaultOpen = false,
+  variant = "inset",
+  side = "left",
+  openOnHover = false,
+  contained = false
+}) {
+  const [thread, setThread] = useState(NAV_SECTIONS[0]?.items[0]?.label ?? "");
+  return /* @__PURE__ */ jsxs5(sidebar_default.Provider, {
+    defaultOpen,
+    openOnHover,
+    className: contained ? "h-full min-h-0" : undefined,
+    children: [
+      /* @__PURE__ */ jsx5(AppSidebar, {
+        variant,
+        side,
+        className: contained ? "h-full" : undefined,
+        value: thread,
+        onValueChange: setThread
+      }),
+      /* @__PURE__ */ jsxs5(sidebar_default.Inset, {
+        className: cn2(contained && "min-h-0", variant === "floating" && "pt-2"),
+        children: [
+          /* @__PURE__ */ jsx5(SidebarInsetTopbar, {
+            children: /* @__PURE__ */ jsx5("span", {
+              className: "truncate text-body text-muted-foreground",
+              children: thread
+            })
+          }),
+          /* @__PURE__ */ jsx5("main", {
+            className: "flex flex-1 flex-col gap-4 p-4"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { SidebarApp2 };