Track HiveGrid Cloud planning reference

hivegrid-cloud/apps/web/app/ui/components/HelpCircle/HelpCircle.tsx

@@ -0,0 +1,59 @@
+"use client";
+/*
+ * Documentation:
+ * Help circle — https://app.subframe.com/f023064a5ca0/library?component=Help+circle_bdf8292f-ad00-49d7-9ca6-98c24f58f842
+ */
+
+import React from "react";
+import { FeatherHelpCircle } from "@subframe/core";
+import * as SubframeCore from "@subframe/core";
+import * as SubframeUtils from "../../utils";
+
+export interface HelpCircleRootProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  size?: "small" | "medium" | "large";
+  shape?: "default" | "background";
+  className?: string;
+}
+
+const HelpCircleRoot = React.forwardRef<HTMLDivElement, HelpCircleRootProps>(
+  function HelpCircleRoot(
+    {
+      icon = <FeatherHelpCircle />,
+      size = "medium",
+      shape = "default",
+      className,
+      ...otherProps
+    }: HelpCircleRootProps,
+    ref
+  ) {
+    return (
+      <div
+        className={SubframeUtils.twClassNames(
+          "group/bdf8292f flex cursor-pointer items-center justify-center rounded-md",
+          className
+        )}
+        ref={ref}
+        {...otherProps}
+      >
+        {icon ? (
+          <SubframeCore.IconWrapper
+            className={SubframeUtils.twClassNames(
+              "text-body-default-medium-0 font-body-default-medium-0 text-icon-neutral-tertiary group-hover/bdf8292f:text-icon-neutral-secondary",
+              {
+                "text-body-large-0 font-body-large-0": size === "large",
+                "text-body-small-regular-0 font-body-small-regular-0":
+                  size === "small",
+              }
+            )}
+          >
+            {icon}
+          </SubframeCore.IconWrapper>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+export const HelpCircle = HelpCircleRoot;

hivegrid-cloud/apps/web/app/ui/components/HelpCircle/index.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { HelpCircle as HelpCircleComponent } from "./HelpCircle";
+
+/**
+ * Add wrapper components and business logic here.
+ * If you modify this file, disable Subframe sync for it to prevent overwrites.
+ * Learn more: https://docs.subframe.com/concepts/syncing-components#wrapping-components
+ */
+
+export const HelpCircle = HelpCircleComponent;