@cornercue/react 0.1.0-beta.5

package/dist/index.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var react = require('react');
+var core = require('@cornercue/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/FeedbackButton.tsx
+var sharedWidget = null;
+var widgetRefCount = 0;
+function getSharedWidget(config) {
+  if (!sharedWidget) {
+    sharedWidget = new core.CornerCueWidget(config);
+  }
+  widgetRefCount++;
+  return sharedWidget;
+}
+function releaseSharedWidget() {
+  widgetRefCount--;
+  if (widgetRefCount <= 0 && sharedWidget) {
+    sharedWidget.destroy();
+    sharedWidget = null;
+    widgetRefCount = 0;
+  }
+}
+function FeedbackButton({
+  projectId,
+  user,
+  metadata,
+  defaultType,
+  config,
+  // events - reserved for future use
+  children,
+  className
+}) {
+  const triggerRef = react.useRef(null);
+  const widgetRef = react.useRef(null);
+  react.useEffect(() => {
+    widgetRef.current = getSharedWidget(config);
+    return () => {
+      releaseSharedWidget();
+      widgetRef.current = null;
+    };
+  }, [config]);
+  const handleClick = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const widget = widgetRef.current;
+      const trigger = triggerRef.current;
+      if (!widget || !trigger) return;
+      if (widget.isWidgetOpen()) {
+        widget.close();
+      } else {
+        widget.open(trigger, {
+          projectId,
+          user: user ?? null,
+          metadata: metadata ?? null,
+          defaultType
+        });
+      }
+    },
+    [projectId, user, metadata, defaultType]
+  );
+  if (!react.isValidElement(children)) {
+    console.warn("FeedbackButton: children must be a valid React element");
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const childElement = children;
+  return react.cloneElement(childElement, {
+    ref: triggerRef,
+    onClick: (e) => {
+      childElement.props.onClick?.(e);
+      handleClick(e);
+    },
+    className: className ? `${childElement.props.className || ""} ${className}`.trim() : childElement.props.className
+  });
+}
+
+Object.defineProperty(exports, "CornerCueWidget", {
+  enumerable: true,
+  get: function () { return core.CornerCueWidget; }
+});
+exports.FeedbackButton = FeedbackButton;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FeedbackButton.tsx"],"names":["CornerCueWidget","useRef","useEffect","useCallback","isValidElement","cloneElement"],"mappings":";;;;;;;AA+DA,IAAI,YAAA,GAAuC,IAAA;AAC3C,IAAI,cAAA,GAAiB,CAAA;AAErB,SAAS,gBAAgB,MAAA,EAAwC;AAC/D,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,YAAA,GAAe,IAAIA,qBAAgB,MAAM,CAAA;AAAA,EAC3C;AACA,EAAA,cAAA,EAAA;AACA,EAAA,OAAO,YAAA;AACT;AAEA,SAAS,mBAAA,GAA4B;AACnC,EAAA,cAAA,EAAA;AACA,EAAA,IAAI,cAAA,IAAkB,KAAK,YAAA,EAAc;AACvC,IAAA,YAAA,CAAa,OAAA,EAAQ;AACrB,IAAA,YAAA,GAAe,IAAA;AACf,IAAA,cAAA,GAAiB,CAAA;AAAA,EACnB;AACF;AAgBO,SAAS,cAAA,CAAe;AAAA,EAC7B,SAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA;AAAA,EAEA,QAAA;AAAA,EACA;AACF,CAAA,EAAsC;AACpC,EAAA,MAAM,UAAA,GAAaC,aAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAA,GAAYA,aAA+B,IAAI,CAAA;AAGrD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,OAAA,GAAU,gBAAgB,MAAM,CAAA;AAE1C,IAAA,OAAO,MAAM;AACX,MAAA,mBAAA,EAAoB;AACpB,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAGX,EAAA,MAAM,WAAA,GAAcC,iBAAA;AAAA,IAClB,CAAC,CAAA,KAAkB;AACjB,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,CAAA,CAAE,eAAA,EAAgB;AAElB,MAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AACzB,MAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAE3B,MAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,EAAS;AAEzB,MAAA,IAAI,MAAA,CAAO,cAAa,EAAG;AACzB,QAAA,MAAA,CAAO,KAAA,EAAM;AAAA,MACf,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,KAAK,OAAA,EAAS;AAAA,UACnB,SAAA;AAAA,UACA,MAAM,IAAA,IAAQ,IAAA;AAAA,UACd,UAAU,QAAA,IAAY,IAAA;AAAA,UACtB;AAAA,SACD,CAAA;AAAA,MACH;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,IAAA,EAAM,QAAA,EAAU,WAAW;AAAA,GACzC;AAGA,EAAA,IAAI,CAACC,oBAAA,CAAe,QAAQ,CAAA,EAAG;AAC7B,IAAA,OAAA,CAAQ,KAAK,wDAAwD,CAAA;AACrE,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,YAAA,GAAe,QAAA;AAMrB,EAAA,OAAOC,mBAAa,YAAA,EAAc;AAAA,IAChC,GAAA,EAAK,UAAA;AAAA,IACL,OAAA,EAAS,CAAC,CAAA,KAAkB;AAE1B,MAAA,YAAA,CAAa,KAAA,CAAM,UAAU,CAAC,CAAA;AAC9B,MAAA,WAAA,CAAY,CAAC,CAAA;AAAA,IACf,CAAA;AAAA,IACA,SAAA,EAAW,SAAA,GACP,CAAA,EAAG,YAAA,CAAa,KAAA,CAAM,SAAA,IAAa,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,GAC1D,aAAa,KAAA,CAAM;AAAA,GACxB,CAAA;AACH","file":"index.cjs","sourcesContent":["import React, {\n  useRef,\n  useEffect,\n  useCallback,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  type MouseEvent,\n} from \"react\";\nimport {\n  CornerCueWidget,\n  type WidgetConfig,\n  type UserInfo,\n  type Metadata,\n  type WidgetEvents,\n  type FeedbackType,\n} from \"@cornercue/core\";\n\nexport interface FeedbackButtonProps {\n  /**\n   * Project ID for submissions\n   */\n  projectId: string;\n\n  /**\n   * User information to attach to feedback\n   */\n  user?: UserInfo | null;\n\n  /**\n   * Additional metadata to attach to feedback\n   */\n  metadata?: Metadata | null;\n\n  /**\n   * Default feedback type to open directly (skips menu)\n   * Options: 'bug' | 'feature' | 'feedback'\n   */\n  defaultType?: FeedbackType;\n\n  /**\n   * Widget configuration overrides\n   */\n  config?: WidgetConfig;\n\n  /**\n   * Event callbacks\n   */\n  events?: WidgetEvents;\n\n  /**\n   * The trigger element (button, link, etc.)\n   */\n  children: ReactNode;\n\n  /**\n   * Additional class name for the wrapper\n   */\n  className?: string;\n}\n\n// Shared widget instance\nlet sharedWidget: CornerCueWidget | null = null;\nlet widgetRefCount = 0;\n\nfunction getSharedWidget(config?: WidgetConfig): CornerCueWidget {\n  if (!sharedWidget) {\n    sharedWidget = new CornerCueWidget(config);\n  }\n  widgetRefCount++;\n  return sharedWidget;\n}\n\nfunction releaseSharedWidget(): void {\n  widgetRefCount--;\n  if (widgetRefCount <= 0 && sharedWidget) {\n    sharedWidget.destroy();\n    sharedWidget = null;\n    widgetRefCount = 0;\n  }\n}\n\n/**\n * React component that wraps a trigger element and opens the feedback widget on click.\n *\n * @example\n * ```tsx\n * <FeedbackButton\n *   projectId=\"your-project-id\"\n *   user={{ id: 'user123', email: 'user@example.com' }}\n *   metadata={{ plan: 'pro' }}\n * >\n *   <button>Give Feedback</button>\n * </FeedbackButton>\n * ```\n */\nexport function FeedbackButton({\n  projectId,\n  user,\n  metadata,\n  defaultType,\n  config,\n  // events - reserved for future use\n  children,\n  className,\n}: FeedbackButtonProps): ReactElement {\n  const triggerRef = useRef<HTMLElement>(null);\n  const widgetRef = useRef<CornerCueWidget | null>(null);\n\n  // Initialize widget on mount\n  useEffect(() => {\n    widgetRef.current = getSharedWidget(config);\n\n    return () => {\n      releaseSharedWidget();\n      widgetRef.current = null;\n    };\n  }, [config]);\n\n  // Handle click on trigger\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const widget = widgetRef.current;\n      const trigger = triggerRef.current;\n\n      if (!widget || !trigger) return;\n\n      if (widget.isWidgetOpen()) {\n        widget.close();\n      } else {\n        widget.open(trigger, {\n          projectId,\n          user: user ?? null,\n          metadata: metadata ?? null,\n          defaultType,\n        });\n      }\n    },\n    [projectId, user, metadata, defaultType]\n  );\n\n  // Clone the child element to add ref and click handler\n  if (!isValidElement(children)) {\n    console.warn(\"FeedbackButton: children must be a valid React element\");\n    return <>{children}</>;\n  }\n\n  const childElement = children as ReactElement<{\n    ref?: React.Ref<HTMLElement>;\n    onClick?: (e: MouseEvent) => void;\n    className?: string;\n  }>;\n\n  return cloneElement(childElement, {\n    ref: triggerRef,\n    onClick: (e: MouseEvent) => {\n      // Call original onClick if present\n      childElement.props.onClick?.(e);\n      handleClick(e);\n    },\n    className: className\n      ? `${childElement.props.className || \"\"} ${className}`.trim()\n      : childElement.props.className,\n  });\n}\n\n// Re-export types\nexport type {\n  WidgetConfig,\n  UserInfo,\n  Metadata,\n  FeedbackType,\n  WidgetEvents,\n  OpenOptions,\n} from \"@cornercue/core\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,56 @@
+import { ReactNode, ReactElement } from 'react';
+import { UserInfo, Metadata, FeedbackType, WidgetConfig, WidgetEvents } from '@cornercue/core';
+export { CornerCueWidget, FeedbackType, Metadata, OpenOptions, UserInfo, WidgetConfig, WidgetEvents } from '@cornercue/core';
+
+interface FeedbackButtonProps {
+    /**
+     * Project ID for submissions
+     */
+    projectId: string;
+    /**
+     * User information to attach to feedback
+     */
+    user?: UserInfo | null;
+    /**
+     * Additional metadata to attach to feedback
+     */
+    metadata?: Metadata | null;
+    /**
+     * Default feedback type to open directly (skips menu)
+     * Options: 'bug' | 'feature' | 'feedback'
+     */
+    defaultType?: FeedbackType;
+    /**
+     * Widget configuration overrides
+     */
+    config?: WidgetConfig;
+    /**
+     * Event callbacks
+     */
+    events?: WidgetEvents;
+    /**
+     * The trigger element (button, link, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Additional class name for the wrapper
+     */
+    className?: string;
+}
+/**
+ * React component that wraps a trigger element and opens the feedback widget on click.
+ *
+ * @example
+ * ```tsx
+ * <FeedbackButton
+ *   projectId="your-project-id"
+ *   user={{ id: 'user123', email: 'user@example.com' }}
+ *   metadata={{ plan: 'pro' }}
+ * >
+ *   <button>Give Feedback</button>
+ * </FeedbackButton>
+ * ```
+ */
+declare function FeedbackButton({ projectId, user, metadata, defaultType, config, children, className, }: FeedbackButtonProps): ReactElement;
+
+export { FeedbackButton, type FeedbackButtonProps };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode, ReactElement } from 'react';
+import { UserInfo, Metadata, FeedbackType, WidgetConfig, WidgetEvents } from '@cornercue/core';
+export { CornerCueWidget, FeedbackType, Metadata, OpenOptions, UserInfo, WidgetConfig, WidgetEvents } from '@cornercue/core';
+
+interface FeedbackButtonProps {
+    /**
+     * Project ID for submissions
+     */
+    projectId: string;
+    /**
+     * User information to attach to feedback
+     */
+    user?: UserInfo | null;
+    /**
+     * Additional metadata to attach to feedback
+     */
+    metadata?: Metadata | null;
+    /**
+     * Default feedback type to open directly (skips menu)
+     * Options: 'bug' | 'feature' | 'feedback'
+     */
+    defaultType?: FeedbackType;
+    /**
+     * Widget configuration overrides
+     */
+    config?: WidgetConfig;
+    /**
+     * Event callbacks
+     */
+    events?: WidgetEvents;
+    /**
+     * The trigger element (button, link, etc.)
+     */
+    children: ReactNode;
+    /**
+     * Additional class name for the wrapper
+     */
+    className?: string;
+}
+/**
+ * React component that wraps a trigger element and opens the feedback widget on click.
+ *
+ * @example
+ * ```tsx
+ * <FeedbackButton
+ *   projectId="your-project-id"
+ *   user={{ id: 'user123', email: 'user@example.com' }}
+ *   metadata={{ plan: 'pro' }}
+ * >
+ *   <button>Give Feedback</button>
+ * </FeedbackButton>
+ * ```
+ */
+declare function FeedbackButton({ projectId, user, metadata, defaultType, config, children, className, }: FeedbackButtonProps): ReactElement;
+
+export { FeedbackButton, type FeedbackButtonProps };

package/dist/index.js

@@ -0,0 +1,80 @@
+import { useRef, useEffect, useCallback, isValidElement, cloneElement } from 'react';
+import { CornerCueWidget } from '@cornercue/core';
+export { CornerCueWidget } from '@cornercue/core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/FeedbackButton.tsx
+var sharedWidget = null;
+var widgetRefCount = 0;
+function getSharedWidget(config) {
+  if (!sharedWidget) {
+    sharedWidget = new CornerCueWidget(config);
+  }
+  widgetRefCount++;
+  return sharedWidget;
+}
+function releaseSharedWidget() {
+  widgetRefCount--;
+  if (widgetRefCount <= 0 && sharedWidget) {
+    sharedWidget.destroy();
+    sharedWidget = null;
+    widgetRefCount = 0;
+  }
+}
+function FeedbackButton({
+  projectId,
+  user,
+  metadata,
+  defaultType,
+  config,
+  // events - reserved for future use
+  children,
+  className
+}) {
+  const triggerRef = useRef(null);
+  const widgetRef = useRef(null);
+  useEffect(() => {
+    widgetRef.current = getSharedWidget(config);
+    return () => {
+      releaseSharedWidget();
+      widgetRef.current = null;
+    };
+  }, [config]);
+  const handleClick = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const widget = widgetRef.current;
+      const trigger = triggerRef.current;
+      if (!widget || !trigger) return;
+      if (widget.isWidgetOpen()) {
+        widget.close();
+      } else {
+        widget.open(trigger, {
+          projectId,
+          user: user ?? null,
+          metadata: metadata ?? null,
+          defaultType
+        });
+      }
+    },
+    [projectId, user, metadata, defaultType]
+  );
+  if (!isValidElement(children)) {
+    console.warn("FeedbackButton: children must be a valid React element");
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const childElement = children;
+  return cloneElement(childElement, {
+    ref: triggerRef,
+    onClick: (e) => {
+      childElement.props.onClick?.(e);
+      handleClick(e);
+    },
+    className: className ? `${childElement.props.className || ""} ${className}`.trim() : childElement.props.className
+  });
+}
+
+export { FeedbackButton };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FeedbackButton.tsx"],"names":[],"mappings":";;;;;;AA+DA,IAAI,YAAA,GAAuC,IAAA;AAC3C,IAAI,cAAA,GAAiB,CAAA;AAErB,SAAS,gBAAgB,MAAA,EAAwC;AAC/D,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,YAAA,GAAe,IAAI,gBAAgB,MAAM,CAAA;AAAA,EAC3C;AACA,EAAA,cAAA,EAAA;AACA,EAAA,OAAO,YAAA;AACT;AAEA,SAAS,mBAAA,GAA4B;AACnC,EAAA,cAAA,EAAA;AACA,EAAA,IAAI,cAAA,IAAkB,KAAK,YAAA,EAAc;AACvC,IAAA,YAAA,CAAa,OAAA,EAAQ;AACrB,IAAA,YAAA,GAAe,IAAA;AACf,IAAA,cAAA,GAAiB,CAAA;AAAA,EACnB;AACF;AAgBO,SAAS,cAAA,CAAe;AAAA,EAC7B,SAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA;AAAA,EAEA,QAAA;AAAA,EACA;AACF,CAAA,EAAsC;AACpC,EAAA,MAAM,UAAA,GAAa,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAA,GAAY,OAA+B,IAAI,CAAA;AAGrD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,OAAA,GAAU,gBAAgB,MAAM,CAAA;AAE1C,IAAA,OAAO,MAAM;AACX,MAAA,mBAAA,EAAoB;AACpB,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAGX,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,CAAA,KAAkB;AACjB,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,CAAA,CAAE,eAAA,EAAgB;AAElB,MAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AACzB,MAAA,MAAM,UAAU,UAAA,CAAW,OAAA;AAE3B,MAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,EAAS;AAEzB,MAAA,IAAI,MAAA,CAAO,cAAa,EAAG;AACzB,QAAA,MAAA,CAAO,KAAA,EAAM;AAAA,MACf,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,KAAK,OAAA,EAAS;AAAA,UACnB,SAAA;AAAA,UACA,MAAM,IAAA,IAAQ,IAAA;AAAA,UACd,UAAU,QAAA,IAAY,IAAA;AAAA,UACtB;AAAA,SACD,CAAA;AAAA,MACH;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,IAAA,EAAM,QAAA,EAAU,WAAW;AAAA,GACzC;AAGA,EAAA,IAAI,CAAC,cAAA,CAAe,QAAQ,CAAA,EAAG;AAC7B,IAAA,OAAA,CAAQ,KAAK,wDAAwD,CAAA;AACrE,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,YAAA,GAAe,QAAA;AAMrB,EAAA,OAAO,aAAa,YAAA,EAAc;AAAA,IAChC,GAAA,EAAK,UAAA;AAAA,IACL,OAAA,EAAS,CAAC,CAAA,KAAkB;AAE1B,MAAA,YAAA,CAAa,KAAA,CAAM,UAAU,CAAC,CAAA;AAC9B,MAAA,WAAA,CAAY,CAAC,CAAA;AAAA,IACf,CAAA;AAAA,IACA,SAAA,EAAW,SAAA,GACP,CAAA,EAAG,YAAA,CAAa,KAAA,CAAM,SAAA,IAAa,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,GAC1D,aAAa,KAAA,CAAM;AAAA,GACxB,CAAA;AACH","file":"index.js","sourcesContent":["import React, {\n  useRef,\n  useEffect,\n  useCallback,\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  type MouseEvent,\n} from \"react\";\nimport {\n  CornerCueWidget,\n  type WidgetConfig,\n  type UserInfo,\n  type Metadata,\n  type WidgetEvents,\n  type FeedbackType,\n} from \"@cornercue/core\";\n\nexport interface FeedbackButtonProps {\n  /**\n   * Project ID for submissions\n   */\n  projectId: string;\n\n  /**\n   * User information to attach to feedback\n   */\n  user?: UserInfo | null;\n\n  /**\n   * Additional metadata to attach to feedback\n   */\n  metadata?: Metadata | null;\n\n  /**\n   * Default feedback type to open directly (skips menu)\n   * Options: 'bug' | 'feature' | 'feedback'\n   */\n  defaultType?: FeedbackType;\n\n  /**\n   * Widget configuration overrides\n   */\n  config?: WidgetConfig;\n\n  /**\n   * Event callbacks\n   */\n  events?: WidgetEvents;\n\n  /**\n   * The trigger element (button, link, etc.)\n   */\n  children: ReactNode;\n\n  /**\n   * Additional class name for the wrapper\n   */\n  className?: string;\n}\n\n// Shared widget instance\nlet sharedWidget: CornerCueWidget | null = null;\nlet widgetRefCount = 0;\n\nfunction getSharedWidget(config?: WidgetConfig): CornerCueWidget {\n  if (!sharedWidget) {\n    sharedWidget = new CornerCueWidget(config);\n  }\n  widgetRefCount++;\n  return sharedWidget;\n}\n\nfunction releaseSharedWidget(): void {\n  widgetRefCount--;\n  if (widgetRefCount <= 0 && sharedWidget) {\n    sharedWidget.destroy();\n    sharedWidget = null;\n    widgetRefCount = 0;\n  }\n}\n\n/**\n * React component that wraps a trigger element and opens the feedback widget on click.\n *\n * @example\n * ```tsx\n * <FeedbackButton\n *   projectId=\"your-project-id\"\n *   user={{ id: 'user123', email: 'user@example.com' }}\n *   metadata={{ plan: 'pro' }}\n * >\n *   <button>Give Feedback</button>\n * </FeedbackButton>\n * ```\n */\nexport function FeedbackButton({\n  projectId,\n  user,\n  metadata,\n  defaultType,\n  config,\n  // events - reserved for future use\n  children,\n  className,\n}: FeedbackButtonProps): ReactElement {\n  const triggerRef = useRef<HTMLElement>(null);\n  const widgetRef = useRef<CornerCueWidget | null>(null);\n\n  // Initialize widget on mount\n  useEffect(() => {\n    widgetRef.current = getSharedWidget(config);\n\n    return () => {\n      releaseSharedWidget();\n      widgetRef.current = null;\n    };\n  }, [config]);\n\n  // Handle click on trigger\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const widget = widgetRef.current;\n      const trigger = triggerRef.current;\n\n      if (!widget || !trigger) return;\n\n      if (widget.isWidgetOpen()) {\n        widget.close();\n      } else {\n        widget.open(trigger, {\n          projectId,\n          user: user ?? null,\n          metadata: metadata ?? null,\n          defaultType,\n        });\n      }\n    },\n    [projectId, user, metadata, defaultType]\n  );\n\n  // Clone the child element to add ref and click handler\n  if (!isValidElement(children)) {\n    console.warn(\"FeedbackButton: children must be a valid React element\");\n    return <>{children}</>;\n  }\n\n  const childElement = children as ReactElement<{\n    ref?: React.Ref<HTMLElement>;\n    onClick?: (e: MouseEvent) => void;\n    className?: string;\n  }>;\n\n  return cloneElement(childElement, {\n    ref: triggerRef,\n    onClick: (e: MouseEvent) => {\n      // Call original onClick if present\n      childElement.props.onClick?.(e);\n      handleClick(e);\n    },\n    className: className\n      ? `${childElement.props.className || \"\"} ${className}`.trim()\n      : childElement.props.className,\n  });\n}\n\n// Re-export types\nexport type {\n  WidgetConfig,\n  UserInfo,\n  Metadata,\n  FeedbackType,\n  WidgetEvents,\n  OpenOptions,\n} from \"@cornercue/core\";\n"]}

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@cornercue/react",
+    "version": "0.1.0-beta.5",
+    "description": "CornerCue feedback widget - React component",
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            },
+            "require": {
+                "types": "./dist/index.d.cts",
+                "default": "./dist/index.cjs"
+            }
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@cornercue/core": "workspace:*"
+    },
+    "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "tsup": "^8.0.0",
+        "typescript": "^5.3.0"
+    },
+    "keywords": [
+        "feedback",
+        "widget",
+        "cornercue",
+        "react",
+        "component"
+    ],
+    "license": "MIT"
+}