@pip-it-up/react 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Saurabh Shakya and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# @pip-it-up/react
+
+React bindings for the `pip-it-up` engine.
+
+## Installation
+
+```bash
+npm install @pip-it-up/react @pip-it-up/core
+```
+
+## Components
+
+### `<PipWrapper>`
+
+Wraps the content you want to move into the PiP window. 
+
+#### Uncontrolled (Default)
+```tsx
+<PipWrapper>
+  <div>Content to move</div>
+  <PipTrigger>Toggle</PipTrigger>
+</PipWrapper>
+```
+
+#### Controlled
+```tsx
+const [isOpen, setIsOpen] = useState(false);
+
+<PipWrapper open={isOpen} onOpenChange={setIsOpen}>
+  <div>Content to move</div>
+</PipWrapper>
+```
+
+#### Props
+Supports all `PipOptions` from `@pip-it-up/core` (`mode`, `copyStyles`, `fallback`, etc.), plus:
+- `open`: Controlled boolean state.
+- `onOpenChange`: Callback for controlled state.
+- `defaultOpen`: Initial uncontrolled state.
+
+### `<PipTrigger>`
+
+A button that toggles the PiP window.
+
+```tsx
+<PipTrigger asChild>
+  <button className="my-custom-btn">Open PiP</button>
+</PipTrigger>
+```
+
+## Hooks
+
+### `usePip()`
+Returns the context state.
+```tsx
+const { isOpen, pipWindow, instance } = usePip();
+```
+
+### `useIsPipSupported()`
+Returns boolean if the browser natively supports Document PiP.
+```tsx
+const isSupported = useIsPipSupported();
+```
+
+## Next.js / SSR
+Because the Document PiP API is browser-only, ensure components interacting with it are rendered on the client (`"use client"`).

package/dist/index.d.mts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import React__default, { ElementType, ReactNode } from 'react';
+import { PipOptions, PipInstance, PipState } from '@pip-it-up/core';
+
+interface PipWrapperProps extends PipOptions {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    as?: ElementType;
+    originAs?: ElementType;
+    children?: ReactNode;
+}
+declare const PipWrapper: React__default.ForwardRefExoticComponent<PipWrapperProps & React__default.RefAttributes<HTMLElement>>;
+
+interface PipTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    pipId?: string;
+    asChild?: boolean;
+    openLabel?: string;
+    closeLabel?: string;
+    renderOpen?: React__default.ReactNode;
+    renderClose?: React__default.ReactNode;
+    renderUnsupported?: React__default.ReactNode | null;
+}
+declare const PipTrigger: React__default.ForwardRefExoticComponent<PipTriggerProps & React__default.RefAttributes<HTMLElement>>;
+
+declare function usePip<T extends HTMLElement = HTMLDivElement>(options?: PipOptions): {
+    contentRef: React.RefObject<T>;
+    originRef: React.RefObject<T>;
+    open: () => Promise<void>;
+    close: () => void;
+    toggle: () => Promise<void>;
+    isOpen: boolean;
+    isSupported: boolean;
+    pipWindow: Window | null;
+};
+
+interface PipContextValue<T = unknown> {
+    instance: PipInstance;
+    state: PipState;
+}
+declare const PipContext: React.Context<PipContextValue<any> | null>;
+
+declare function usePipContext<T = unknown>(): PipContextValue<T>;
+
+declare const useIsPipSupported: () => boolean;
+
+export { PipContext, type PipContextValue, PipTrigger, type PipTriggerProps, PipWrapper, type PipWrapperProps, useIsPipSupported, usePip, usePipContext };

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import React__default, { ElementType, ReactNode } from 'react';
+import { PipOptions, PipInstance, PipState } from '@pip-it-up/core';
+
+interface PipWrapperProps extends PipOptions {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    as?: ElementType;
+    originAs?: ElementType;
+    children?: ReactNode;
+}
+declare const PipWrapper: React__default.ForwardRefExoticComponent<PipWrapperProps & React__default.RefAttributes<HTMLElement>>;
+
+interface PipTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    pipId?: string;
+    asChild?: boolean;
+    openLabel?: string;
+    closeLabel?: string;
+    renderOpen?: React__default.ReactNode;
+    renderClose?: React__default.ReactNode;
+    renderUnsupported?: React__default.ReactNode | null;
+}
+declare const PipTrigger: React__default.ForwardRefExoticComponent<PipTriggerProps & React__default.RefAttributes<HTMLElement>>;
+
+declare function usePip<T extends HTMLElement = HTMLDivElement>(options?: PipOptions): {
+    contentRef: React.RefObject<T>;
+    originRef: React.RefObject<T>;
+    open: () => Promise<void>;
+    close: () => void;
+    toggle: () => Promise<void>;
+    isOpen: boolean;
+    isSupported: boolean;
+    pipWindow: Window | null;
+};
+
+interface PipContextValue<T = unknown> {
+    instance: PipInstance;
+    state: PipState;
+}
+declare const PipContext: React.Context<PipContextValue<any> | null>;
+
+declare function usePipContext<T = unknown>(): PipContextValue<T>;
+
+declare const useIsPipSupported: () => boolean;
+
+export { PipContext, type PipContextValue, PipTrigger, type PipTriggerProps, PipWrapper, type PipWrapperProps, useIsPipSupported, usePip, usePipContext };

package/dist/index.js

@@ -0,0 +1,294 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PipContext: () => PipContext,
+  PipTrigger: () => PipTrigger,
+  PipWrapper: () => PipWrapper,
+  useIsPipSupported: () => useIsPipSupported,
+  usePip: () => usePip,
+  usePipContext: () => usePipContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/PipWrapper.tsx
+var import_react2 = require("react");
+var import_core = require("@pip-it-up/core");
+
+// src/PipContext.tsx
+var import_react = require("react");
+var PipContext = (0, import_react.createContext)(null);
+
+// src/PipPortal.tsx
+var import_react_dom = require("react-dom");
+var PipPortal = ({ children, pipWindow }) => {
+  return (0, import_react_dom.createPortal)(children, pipWindow.document.body);
+};
+
+// src/PipWrapper.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var emptyServerState = { isOpen: false, isSupported: false, pipWindow: null };
+var getServerState = () => emptyServerState;
+var PipWrapper = (0, import_react2.forwardRef)((props, ref) => {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    as: Component = "div",
+    originAs: OriginComponent = "div",
+    children,
+    ...coreOptions
+  } = props;
+  const contentRef = (0, import_react2.useRef)(null);
+  const originRef = (0, import_react2.useRef)(null);
+  const instanceRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(ref, () => originRef.current);
+  if (!instanceRef.current) {
+    instanceRef.current = (0, import_core.createPip)(coreOptions);
+  }
+  const instance = instanceRef.current;
+  (0, import_react2.useEffect)(() => {
+    instance.updateElements({
+      contentEl: contentRef.current || void 0,
+      originEl: originRef.current || void 0
+    });
+  });
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      instance.destroy();
+    };
+  }, [instance]);
+  const state = (0, import_react2.useSyncExternalStore)(
+    instance.subscribe,
+    instance.getState,
+    getServerState
+  );
+  const isControlled = controlledOpen !== void 0;
+  const prevOpenRef = (0, import_react2.useRef)(state.isOpen);
+  (0, import_react2.useEffect)(() => {
+    if (state.isOpen !== prevOpenRef.current) {
+      if (onOpenChange) {
+        onOpenChange(state.isOpen);
+      }
+      prevOpenRef.current = state.isOpen;
+    }
+  }, [state.isOpen, onOpenChange]);
+  (0, import_react2.useEffect)(() => {
+    if (isControlled) {
+      if (controlledOpen && !state.isOpen) {
+        instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
+      } else if (!controlledOpen && state.isOpen) {
+        instance.close();
+      }
+    }
+  }, [controlledOpen, isControlled, state.isOpen, instance]);
+  const defaultOpenHandled = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!isControlled && defaultOpen && !defaultOpenHandled.current) {
+      defaultOpenHandled.current = true;
+      instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
+    }
+  }, [defaultOpen, isControlled, instance]);
+  const mode = coreOptions.mode || "move";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipContext.Provider, { value: { instance, state }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OriginComponent, { ref: originRef, children: mode === "portal" && state.isOpen && state.pipWindow ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PipPortal, { pipWindow: state.pipWindow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: contentRef, children }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: contentRef, children }) }) });
+});
+PipWrapper.displayName = "PipWrapper";
+
+// src/PipTrigger.tsx
+var import_react5 = require("react");
+var import_core3 = require("@pip-it-up/core");
+
+// src/useIsPipSupported.ts
+var import_react3 = require("react");
+var import_core2 = require("@pip-it-up/core");
+var useIsPipSupported = () => {
+  const [supported, setSupported] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    setSupported((0, import_core2.isSupported)());
+  }, []);
+  return supported;
+};
+
+// src/Slot.tsx
+var import_react4 = __toESM(require("react"));
+var Slot = (0, import_react4.forwardRef)((props, ref) => {
+  const { children, ...slotProps } = props;
+  if (import_react4.default.isValidElement(children)) {
+    return import_react4.default.cloneElement(children, {
+      ...slotProps,
+      ...children.props,
+      style: {
+        ...slotProps.style,
+        ...children.props.style
+      },
+      className: [slotProps.className, children.props.className].filter(Boolean).join(" "),
+      ref: (node) => {
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+        const childRef = children.ref;
+        if (typeof childRef === "function") childRef(node);
+        else if (childRef) childRef.current = node;
+      }
+    });
+  }
+  if (import_react4.default.Children.count(children) > 1) {
+    import_react4.default.Children.only(null);
+  }
+  return null;
+});
+Slot.displayName = "Slot";
+
+// src/PipTrigger.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var emptySubscribe = () => () => {
+};
+var emptyServerState2 = { isOpen: false, isSupported: false, pipWindow: null };
+var emptyGetState = () => emptyServerState2;
+var PipTrigger = (0, import_react5.forwardRef)((props, ref) => {
+  const {
+    pipId,
+    asChild,
+    openLabel = "\u2197 Pop out",
+    closeLabel = "\u22A0 Close",
+    renderOpen,
+    renderClose,
+    renderUnsupported = null,
+    onClick,
+    children,
+    ...rest
+  } = props;
+  const isSupported2 = useIsPipSupported();
+  const context = (0, import_react5.useContext)(PipContext);
+  const [registryInstance, setRegistryInstance] = (0, import_react5.useState)(pipId ? (0, import_core3.getPip)(pipId) : null);
+  (0, import_react5.useEffect)(() => {
+    if (pipId) {
+      setRegistryInstance((0, import_core3.getPip)(pipId));
+      const unsub = (0, import_core3.subscribeRegistry)(pipId, () => {
+        setRegistryInstance((0, import_core3.getPip)(pipId));
+      });
+      return unsub;
+    }
+  }, [pipId]);
+  const instance = pipId ? registryInstance : context?.instance;
+  const subscribe = instance?.subscribe || emptySubscribe;
+  const getState = instance?.getState || emptyGetState;
+  const state = (0, import_react5.useSyncExternalStore)(
+    subscribe,
+    getState,
+    emptyGetState
+  );
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => setMounted(true), []);
+  if (!instance && pipId) {
+    return null;
+  }
+  if (!mounted) {
+    return null;
+  }
+  if (!isSupported2) {
+    if (renderUnsupported === null) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderUnsupported });
+  }
+  const handleClick = async (e) => {
+    if (onClick) onClick(e);
+    if (instance) {
+      await instance.toggle();
+    }
+  };
+  const isOpen = state.isOpen;
+  const content = isOpen ? renderClose ?? closeLabel : renderOpen ?? openLabel;
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Comp,
+    {
+      ref,
+      onClick: handleClick,
+      ...asChild ? {} : { type: "button" },
+      ...rest,
+      children: asChild ? children : content
+    }
+  );
+});
+PipTrigger.displayName = "PipTrigger";
+
+// src/usePip.ts
+var import_react6 = require("react");
+var import_core4 = require("@pip-it-up/core");
+var emptyServerState3 = { isOpen: false, isSupported: false, pipWindow: null };
+var emptyGetState2 = () => emptyServerState3;
+function usePip(options = {}) {
+  const contentRef = (0, import_react6.useRef)(null);
+  const originRef = (0, import_react6.useRef)(null);
+  const instanceRef = (0, import_react6.useRef)(null);
+  if (!instanceRef.current) {
+    instanceRef.current = (0, import_core4.createPip)(options);
+  }
+  const instance = instanceRef.current;
+  (0, import_react6.useEffect)(() => {
+    return () => {
+      instance.destroy();
+    };
+  }, [instance]);
+  const state = (0, import_react6.useSyncExternalStore)(
+    instance.subscribe,
+    instance.getState,
+    emptyGetState2
+  );
+  return {
+    contentRef,
+    originRef,
+    open: () => instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 }),
+    close: instance.close,
+    toggle: () => instance.toggle({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 }),
+    isOpen: state.isOpen,
+    isSupported: state.isSupported,
+    pipWindow: state.pipWindow
+  };
+}
+
+// src/usePipContext.ts
+var import_react7 = require("react");
+function usePipContext() {
+  const context = (0, import_react7.useContext)(PipContext);
+  if (!context) {
+    throw new Error("usePipContext must be used within a <PipWrapper>");
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PipContext,
+  PipTrigger,
+  PipWrapper,
+  useIsPipSupported,
+  usePip,
+  usePipContext
+});

package/dist/index.mjs

@@ -0,0 +1,252 @@
+// src/PipWrapper.tsx
+import { forwardRef, useEffect, useRef, useSyncExternalStore, useImperativeHandle } from "react";
+import { createPip } from "@pip-it-up/core";
+
+// src/PipContext.tsx
+import { createContext } from "react";
+var PipContext = createContext(null);
+
+// src/PipPortal.tsx
+import { createPortal } from "react-dom";
+var PipPortal = ({ children, pipWindow }) => {
+  return createPortal(children, pipWindow.document.body);
+};
+
+// src/PipWrapper.tsx
+import { jsx } from "react/jsx-runtime";
+var emptyServerState = { isOpen: false, isSupported: false, pipWindow: null };
+var getServerState = () => emptyServerState;
+var PipWrapper = forwardRef((props, ref) => {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    as: Component = "div",
+    originAs: OriginComponent = "div",
+    children,
+    ...coreOptions
+  } = props;
+  const contentRef = useRef(null);
+  const originRef = useRef(null);
+  const instanceRef = useRef(null);
+  useImperativeHandle(ref, () => originRef.current);
+  if (!instanceRef.current) {
+    instanceRef.current = createPip(coreOptions);
+  }
+  const instance = instanceRef.current;
+  useEffect(() => {
+    instance.updateElements({
+      contentEl: contentRef.current || void 0,
+      originEl: originRef.current || void 0
+    });
+  });
+  useEffect(() => {
+    return () => {
+      instance.destroy();
+    };
+  }, [instance]);
+  const state = useSyncExternalStore(
+    instance.subscribe,
+    instance.getState,
+    getServerState
+  );
+  const isControlled = controlledOpen !== void 0;
+  const prevOpenRef = useRef(state.isOpen);
+  useEffect(() => {
+    if (state.isOpen !== prevOpenRef.current) {
+      if (onOpenChange) {
+        onOpenChange(state.isOpen);
+      }
+      prevOpenRef.current = state.isOpen;
+    }
+  }, [state.isOpen, onOpenChange]);
+  useEffect(() => {
+    if (isControlled) {
+      if (controlledOpen && !state.isOpen) {
+        instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
+      } else if (!controlledOpen && state.isOpen) {
+        instance.close();
+      }
+    }
+  }, [controlledOpen, isControlled, state.isOpen, instance]);
+  const defaultOpenHandled = useRef(false);
+  useEffect(() => {
+    if (!isControlled && defaultOpen && !defaultOpenHandled.current) {
+      defaultOpenHandled.current = true;
+      instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 });
+    }
+  }, [defaultOpen, isControlled, instance]);
+  const mode = coreOptions.mode || "move";
+  return /* @__PURE__ */ jsx(PipContext.Provider, { value: { instance, state }, children: /* @__PURE__ */ jsx(OriginComponent, { ref: originRef, children: mode === "portal" && state.isOpen && state.pipWindow ? /* @__PURE__ */ jsx(PipPortal, { pipWindow: state.pipWindow, children: /* @__PURE__ */ jsx(Component, { ref: contentRef, children }) }) : /* @__PURE__ */ jsx(Component, { ref: contentRef, children }) }) });
+});
+PipWrapper.displayName = "PipWrapper";
+
+// src/PipTrigger.tsx
+import { forwardRef as forwardRef3, useEffect as useEffect3, useState as useState2, useSyncExternalStore as useSyncExternalStore2, useContext } from "react";
+import { getPip, subscribeRegistry } from "@pip-it-up/core";
+
+// src/useIsPipSupported.ts
+import { useState, useEffect as useEffect2 } from "react";
+import { isSupported } from "@pip-it-up/core";
+var useIsPipSupported = () => {
+  const [supported, setSupported] = useState(false);
+  useEffect2(() => {
+    setSupported(isSupported());
+  }, []);
+  return supported;
+};
+
+// src/Slot.tsx
+import React2, { forwardRef as forwardRef2 } from "react";
+var Slot = forwardRef2((props, ref) => {
+  const { children, ...slotProps } = props;
+  if (React2.isValidElement(children)) {
+    return React2.cloneElement(children, {
+      ...slotProps,
+      ...children.props,
+      style: {
+        ...slotProps.style,
+        ...children.props.style
+      },
+      className: [slotProps.className, children.props.className].filter(Boolean).join(" "),
+      ref: (node) => {
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+        const childRef = children.ref;
+        if (typeof childRef === "function") childRef(node);
+        else if (childRef) childRef.current = node;
+      }
+    });
+  }
+  if (React2.Children.count(children) > 1) {
+    React2.Children.only(null);
+  }
+  return null;
+});
+Slot.displayName = "Slot";
+
+// src/PipTrigger.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var emptySubscribe = () => () => {
+};
+var emptyServerState2 = { isOpen: false, isSupported: false, pipWindow: null };
+var emptyGetState = () => emptyServerState2;
+var PipTrigger = forwardRef3((props, ref) => {
+  const {
+    pipId,
+    asChild,
+    openLabel = "\u2197 Pop out",
+    closeLabel = "\u22A0 Close",
+    renderOpen,
+    renderClose,
+    renderUnsupported = null,
+    onClick,
+    children,
+    ...rest
+  } = props;
+  const isSupported2 = useIsPipSupported();
+  const context = useContext(PipContext);
+  const [registryInstance, setRegistryInstance] = useState2(pipId ? getPip(pipId) : null);
+  useEffect3(() => {
+    if (pipId) {
+      setRegistryInstance(getPip(pipId));
+      const unsub = subscribeRegistry(pipId, () => {
+        setRegistryInstance(getPip(pipId));
+      });
+      return unsub;
+    }
+  }, [pipId]);
+  const instance = pipId ? registryInstance : context?.instance;
+  const subscribe = instance?.subscribe || emptySubscribe;
+  const getState = instance?.getState || emptyGetState;
+  const state = useSyncExternalStore2(
+    subscribe,
+    getState,
+    emptyGetState
+  );
+  const [mounted, setMounted] = useState2(false);
+  useEffect3(() => setMounted(true), []);
+  if (!instance && pipId) {
+    return null;
+  }
+  if (!mounted) {
+    return null;
+  }
+  if (!isSupported2) {
+    if (renderUnsupported === null) return null;
+    return /* @__PURE__ */ jsx2(Fragment, { children: renderUnsupported });
+  }
+  const handleClick = async (e) => {
+    if (onClick) onClick(e);
+    if (instance) {
+      await instance.toggle();
+    }
+  };
+  const isOpen = state.isOpen;
+  const content = isOpen ? renderClose ?? closeLabel : renderOpen ?? openLabel;
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      ref,
+      onClick: handleClick,
+      ...asChild ? {} : { type: "button" },
+      ...rest,
+      children: asChild ? children : content
+    }
+  );
+});
+PipTrigger.displayName = "PipTrigger";
+
+// src/usePip.ts
+import { useRef as useRef2, useEffect as useEffect4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { createPip as createPip2 } from "@pip-it-up/core";
+var emptyServerState3 = { isOpen: false, isSupported: false, pipWindow: null };
+var emptyGetState2 = () => emptyServerState3;
+function usePip(options = {}) {
+  const contentRef = useRef2(null);
+  const originRef = useRef2(null);
+  const instanceRef = useRef2(null);
+  if (!instanceRef.current) {
+    instanceRef.current = createPip2(options);
+  }
+  const instance = instanceRef.current;
+  useEffect4(() => {
+    return () => {
+      instance.destroy();
+    };
+  }, [instance]);
+  const state = useSyncExternalStore3(
+    instance.subscribe,
+    instance.getState,
+    emptyGetState2
+  );
+  return {
+    contentRef,
+    originRef,
+    open: () => instance.open({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 }),
+    close: instance.close,
+    toggle: () => instance.toggle({ contentEl: contentRef.current || void 0, originEl: originRef.current || void 0 }),
+    isOpen: state.isOpen,
+    isSupported: state.isSupported,
+    pipWindow: state.pipWindow
+  };
+}
+
+// src/usePipContext.ts
+import { useContext as useContext2 } from "react";
+function usePipContext() {
+  const context = useContext2(PipContext);
+  if (!context) {
+    throw new Error("usePipContext must be used within a <PipWrapper>");
+  }
+  return context;
+}
+export {
+  PipContext,
+  PipTrigger,
+  PipWrapper,
+  useIsPipSupported,
+  usePip,
+  usePipContext
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@pip-it-up/react",
+  "version": "0.1.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Shakya47/pip-it-up.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Shakya47/pip-it-up/issues"
+  },
+  "homepage": "https://github.com/Shakya47/pip-it-up/tree/main/packages/react#readme",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@pip-it-up/core": "0.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.4.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint \"src/**/*.{ts,tsx}\" \"tests/**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  }
+}