@bind-ts/react-bind 0.0.1

package/dist/cjs/index.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),oe=require("@bind/core"),W=require("@tanstack/react-store");var h={exports:{}},R={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var M;function ae(){if(M)return R;M=1;var a=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function l(i,t,u){var f=null;if(u!==void 0&&(f=""+u),t.key!==void 0&&(f=""+t.key),"key"in t){u={};for(var E in t)E!=="key"&&(u[E]=t[E])}else u=t;return t=u.ref,{$$typeof:a,type:i,key:f,ref:t!==void 0?t:null,props:u}}return R.Fragment=n,R.jsx=l,R.jsxs=l,R}var x={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var L;function ue(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===re?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case z:return"Profiler";case J:return"StrictMode";case Z:return"Suspense";case Q:return"SuspenseList";case ee:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case V:return"Portal";case H:return e.displayName||"Context";case G:return(e._context.displayName||"Context")+".Consumer";case X:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case K:return r=e.displayName||null,r!==null?r:a(e.type)||"Memo";case y:r=e._payload,e=e._init;try{return a(e(r))}catch{}}return null}function n(e){return""+e}function l(e){try{n(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),n(e)}}function i(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var r=a(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function t(){var e=O.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function f(e){if(N.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function o(){Y||(Y=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function T(){var e=a(this.type);return F[e]||(F[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,r,o,s,S,g){var c=o.ref;return e={$$typeof:A,type:e,key:r,props:o,_owner:s},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:T}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:g}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,r,o,s,S,g){var c=r.children;if(c!==void 0)if(s)if(te(c)){for(s=0;s<c.length;s++)p(c[s]);Object.freeze&&Object.freeze(c)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else p(c);if(N.call(r,"key")){c=a(e);var _=Object.keys(r).filter(function(ne){return ne!=="key"});s=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",I[c+s]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,s,c,_,c),I[c+s]=!0)}if(c=null,o!==void 0&&(l(o),c=""+o),f(r)&&(l(r.key),c=""+r.key),"key"in r){o={};for(var C in r)C!=="key"&&(o[C]=r[C])}else o=r;return c&&E(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,c,o,t(),S,g)}function p(e){v(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?v(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function v(e){return typeof e=="object"&&e!==null&&e.$$typeof===A}var b=d,A=Symbol.for("react.transitional.element"),V=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),J=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),G=Symbol.for("react.consumer"),H=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),K=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),ee=Symbol.for("react.activity"),re=Symbol.for("react.client.reference"),O=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,te=Array.isArray,P=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(e){return e()}};var Y,F={},$=b.react_stack_bottom_frame.bind(b,u)(),B=P(i(u)),I={};x.Fragment=j,x.jsx=function(e,r,o){var s=1e4>O.recentlyCreatedOwnerStacks++;return w(e,r,o,!1,s?Error("react-stack-top-frame"):$,s?P(i(e)):B)},x.jsxs=function(e,r,o){var s=1e4>O.recentlyCreatedOwnerStacks++;return w(e,r,o,!0,s?Error("react-stack-top-frame"):$,s?P(i(e)):B)}})()),x}var D;function se(){return D||(D=1,process.env.NODE_ENV==="production"?h.exports=ae():h.exports=ue()),h.exports}var m=se();const q=typeof window<"u"?d.useLayoutEffect:d.useEffect;function ce({bindApi:a,selector:n,children:l}){const i=W.useStore(a.store,n);return typeof l=="function"?m.jsx(m.Fragment,{children:l(i)}):m.jsx(m.Fragment,{children:l})}function le({bindApi:a,value:n,children:l}){const i=W.useStore(a.store,u=>u),t={state:{value:n},meta:{isActive:i.value===n},handleChange:()=>a.setValue(n)};return m.jsx(m.Fragment,{children:l(t)})}function U(a){const[n]=d.useState(()=>new oe.BindApi(a)),l=d.useMemo(()=>{const i=n;return i.Element=function(u){return m.jsx(le,{bindApi:n,value:u.value,children:u.children})},i.Subscribe=function(u){const f=u.selector??(E=>E);return m.jsx(ce,{bindApi:n,selector:f,children:u.children})},i},[n]);return q(n.mount,[]),q(()=>{n.update(a)}),l}d.createContext(null);d.createContext(null);function ie(){const a=d.createContext(null),n=d.createContext(null);function l(){const t=d.useContext(a);if(!t)throw new Error("`useElementContext` must be used within an `Element` component created by `createBindHook`");return t}function i(){const t=d.useContext(n);if(!t)throw new Error("`useBindContext` must be used within an `AppBind` component created by `createBindHook`");return t}return{elementContext:a,bindContext:n,useElementContext:l,useBindContext:i}}function fe({elementContext:a,bindContext:n,components:l}){function i(t,u){const f=U(u),E=l[t],T=d.useMemo(()=>({children:p})=>m.jsx(n.Provider,{value:f,children:p}),[f]),k=d.useMemo(()=>function(v){return m.jsx(f.Element,{value:v.value,children:b=>{const A={...b,...E};return m.jsx(a.Provider,{value:b,children:v.children(A)})}})},[f,E]);return d.useMemo(()=>Object.assign({},f,{Element:k,AppBind:T}),[f,k,T])}return{useAppBind:i}}exports.createBindContexts=ie;exports.createBindHook=fe;exports.useBind=U;

package/dist/esm/createBindHook.d.ts

@@ -0,0 +1,112 @@
+import type { BindOptions } from "@bind/bind-core";
+import type { ComponentType, Context, FunctionComponent, PropsWithChildren, ReactNode } from "react";
+import type { ReactBindExtendedApi } from "./useBind";
+import type { ElementContext } from "./types";
+/**
+ * Creates the contexts and hooks needed for bind composition.
+ *
+ * @example
+ * ```tsx
+ * export const { bindContext, elementContext, useElementContext, useBindContext } =
+ *   createBindContexts();
+ * ```
+ */
+export declare function createBindContexts(): {
+    elementContext: Context<ElementContext<readonly string[]>>;
+    bindContext: Context<ReactBindExtendedApi<readonly string[]>>;
+    useElementContext: <TValues extends readonly string[] = readonly string[]>() => ElementContext<TValues>;
+    useBindContext: <TValues extends readonly string[] = readonly string[]>() => ReactBindExtendedApi<TValues>;
+};
+/**
+ * A record of component groups, where each key is a group name
+ * and the value is a record of components in that group.
+ */
+type ComponentGroups = Record<string, Record<string, ComponentType<any>>>;
+/**
+ * Props for the createBindHook factory function.
+ */
+interface CreateBindHookProps<TComponentGroups extends ComponentGroups> {
+    elementContext: Context<ElementContext<readonly string[]>>;
+    bindContext: Context<ReactBindExtendedApi<readonly string[]>>;
+    components: TComponentGroups;
+}
+/**
+ * Context passed to Element children, including the element render context
+ * and the selected component group.
+ */
+export type AppElementContext<TValues extends readonly string[], TComponents extends Record<string, ComponentType<any>>> = ElementContext<TValues> & TComponents;
+/**
+ * Props for the Element component in composition API.
+ */
+export interface AppElementProps<TValues extends readonly string[], TComponents extends Record<string, ComponentType<any>>> {
+    /** The value this element represents */
+    value: TValues[number];
+    /** Render prop receiving the element context with components */
+    children: (context: AppElementContext<TValues, TComponents>) => ReactNode;
+}
+/**
+ * Extended bind API with composition support.
+ */
+export type AppBindExtendedApi<TValues extends readonly string[], TComponents extends Record<string, ComponentType<any>>> = Omit<ReactBindExtendedApi<TValues>, "Element"> & {
+    /**
+     * An element component that provides both element context and the selected component group.
+     * Use this to render pre-bound custom components.
+     */
+    Element: (props: AppElementProps<TValues, TComponents>) => ReturnType<FunctionComponent>;
+    /**
+     * A wrapper component that provides bind context to children.
+     * Use this when you need access to the bind API in deeply nested components.
+     */
+    AppBind: ComponentType<PropsWithChildren<{}>>;
+};
+/**
+ * Creates a custom bind hook factory with pre-bound component groups.
+ *
+ * @example
+ * ```tsx
+ * const { elementContext, bindContext, useElementContext } = createBindContexts();
+ *
+ * function Tab({ children }: { children: React.ReactNode }) {
+ *   const element = useElementContext();
+ *   return <button onClick={element.handleChange}>{children}</button>;
+ * }
+ *
+ * function TabPanel({ children }: { children: React.ReactNode }) {
+ *   const element = useElementContext();
+ *   if (!element.meta.isActive) return null;
+ *   return <div>{children}</div>;
+ * }
+ *
+ * const { useAppBind } = createBindHook({
+ *   elementContext,
+ *   bindContext,
+ *   components: {
+ *     Tab: { Tab, TabPanel },
+ *     Wizard: { Step, Button },
+ *   },
+ * });
+ *
+ * function MyTabs() {
+ *   const tabs = useAppBind('Tab', {
+ *     defaultValue: 'tab1',
+ *     values: ['tab1', 'tab2'] as const,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <tabs.Element value="tab1">
+ *         {(bindApi) => <bindApi.Tab>Tab 1</bindApi.Tab>}
+ *       </tabs.Element>
+ *       <tabs.Element value="tab1">
+ *         {(bindApi) => <bindApi.TabPanel>Panel 1</bindApi.TabPanel>}
+ *       </tabs.Element>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function createBindHook<const TComponentGroups extends ComponentGroups>({ elementContext, bindContext, components, }: CreateBindHookProps<TComponentGroups>): {
+    useAppBind: <TGroupKey extends keyof TComponentGroups, TValues extends readonly string[]>(groupKey: TGroupKey, opts: BindOptions<TValues>) => AppBindExtendedApi<TValues, TComponentGroups[TGroupKey]>;
+};
+export {};
+//# sourceMappingURL=createBindHook.d.ts.map

package/dist/esm/createBindHook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBindHook.d.ts","sourceRoot":"","sources":["../../src/createBindHook.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EACX,aAAa,EACb,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAc9C;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB;;;wBAKN,OAAO,SAAS,SAAS,MAAM,EAAE,2BASzC,cAAc,CAAC,OAAO,CAAC;qBAGlB,OAAO,SAAS,SAAS,MAAM,EAAE,2BAS3B,oBAAoB,CAAC,OAAO,CAAC;EAS3D;AAED;;;GAGG;AACH,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAE1E;;GAEG;AACH,UAAU,mBAAmB,CAAC,gBAAgB,SAAS,eAAe;IACrE,cAAc,EAAE,OAAO,CAAC,cAAc,CAAC,SAAS,MAAM,EAAE,CAAC,CAAC,CAAC;IAC3D,WAAW,EAAE,OAAO,CAAC,oBAAoB,CAAC,SAAS,MAAM,EAAE,CAAC,CAAC,CAAC;IAC9D,UAAU,EAAE,gBAAgB,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,MAAM,iBAAiB,CAC5B,OAAO,SAAS,SAAS,MAAM,EAAE,EACjC,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC,IACnD,cAAc,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,eAAe,CAC/B,OAAO,SAAS,SAAS,MAAM,EAAE,EACjC,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAEtD,wCAAwC;IACxC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,OAAO,EAAE,iBAAiB,CAAC,OAAO,EAAE,WAAW,CAAC,KAAK,SAAS,CAAC;CAC1E;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,CAC7B,OAAO,SAAS,SAAS,MAAM,EAAE,EACjC,WAAW,SAAS,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC,IACnD,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,GAAG;IACpD;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,KAAK,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAEzF;;;OAGG;IACH,OAAO,EAAE,aAAa,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC;CAC9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,gBAAgB,SAAS,eAAe,EAAE,EAC9E,cAAc,EACd,WAAW,EACX,UAAU,GACV,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;iBAEtC,SAAS,SAAS,MAAM,gBAAgB,EACxC,OAAO,SAAS,SAAS,MAAM,EAAE,YAEvB,SAAS,QACb,WAAW,CAAC,OAAO,CAAC,KACxB,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;EAqD3D"}

package/dist/esm/index.d.ts

@@ -0,0 +1,7 @@
+export { useBind } from "./useBind";
+export type { ReactBindApi, ReactBindExtendedApi } from "./useBind";
+export type { ElementContext, ElementState, ElementMeta, ElementProps, SubscribeProps, } from "./types";
+export { createBindContexts, createBindHook } from "./createBindHook";
+export type { AppElementContext, AppElementProps, AppBindExtendedApi } from "./createBindHook";
+export type { BindOptions, BindState } from "@bind/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACpE,YAAY,EACX,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,GACd,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACtE,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAG/F,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,388 @@
+import ae, { useLayoutEffect as ue, useEffect as se, useState as ce, useMemo as w, createContext as S, useContext as D } from "react";
+import { BindApi as le } from "@bind/core";
+import { useStore as q } from "@tanstack/react-store";
+var h = { exports: {} }, v = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var M;
+function ie() {
+  if (M) return v;
+  M = 1;
+  var a = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function l(i, t, u) {
+    var f = null;
+    if (u !== void 0 && (f = "" + u), t.key !== void 0 && (f = "" + t.key), "key" in t) {
+      u = {};
+      for (var m in t)
+        m !== "key" && (u[m] = t[m]);
+    } else u = t;
+    return t = u.ref, {
+      $$typeof: a,
+      type: i,
+      key: f,
+      ref: t !== void 0 ? t : null,
+      props: u
+    };
+  }
+  return v.Fragment = n, v.jsx = l, v.jsxs = l, v;
+}
+var R = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var W;
+function fe() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
+    function a(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === te ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case O:
+          return "Fragment";
+        case G:
+          return "Profiler";
+        case z:
+          return "StrictMode";
+        case Q:
+          return "Suspense";
+        case K:
+          return "SuspenseList";
+        case re:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case J:
+            return "Portal";
+          case X:
+            return e.displayName || "Context";
+          case H:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case Z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ee:
+            return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
+          case y:
+            r = e._payload, e = e._init;
+            try {
+              return a(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function n(e) {
+      return "" + e;
+    }
+    function l(e) {
+      try {
+        n(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var o = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          s
+        ), n(e);
+      }
+    }
+    function i(e) {
+      if (e === O) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === y)
+        return "<...>";
+      try {
+        var r = a(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function t() {
+      var e = P.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function f(e) {
+      if (Y.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function m(e, r) {
+      function o() {
+        F || (F = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
+        configurable: !0
+      });
+    }
+    function T() {
+      var e = a(this.type);
+      return $[e] || ($[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function x(e, r, o, s, A, C) {
+      var c = o.ref;
+      return e = {
+        $$typeof: k,
+        type: e,
+        key: r,
+        props: o,
+        _owner: s
+      }, (c !== void 0 ? c : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: T
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: A
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: C
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function j(e, r, o, s, A, C) {
+      var c = r.children;
+      if (c !== void 0)
+        if (s)
+          if (ne(c)) {
+            for (s = 0; s < c.length; s++)
+              b(c[s]);
+            Object.freeze && Object.freeze(c);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else b(c);
+      if (Y.call(r, "key")) {
+        c = a(e);
+        var p = Object.keys(r).filter(function(oe) {
+          return oe !== "key";
+        });
+        s = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", B[c + s] || (p = 0 < p.length ? "{" + p.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          s,
+          c,
+          p,
+          c
+        ), B[c + s] = !0);
+      }
+      if (c = null, o !== void 0 && (l(o), c = "" + o), f(r) && (l(r.key), c = "" + r.key), "key" in r) {
+        o = {};
+        for (var N in r)
+          N !== "key" && (o[N] = r[N]);
+      } else o = r;
+      return c && m(
+        o,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), x(
+        e,
+        c,
+        o,
+        t(),
+        A,
+        C
+      );
+    }
+    function b(e) {
+      _(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === y && (e._payload.status === "fulfilled" ? _(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function _(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === k;
+    }
+    var E = ae, k = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), H = Symbol.for("react.consumer"), X = Symbol.for("react.context"), Z = Symbol.for("react.forward_ref"), Q = Symbol.for("react.suspense"), K = Symbol.for("react.suspense_list"), ee = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), re = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), P = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, ne = Array.isArray, g = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    E = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var F, $ = {}, I = E.react_stack_bottom_frame.bind(
+      E,
+      u
+    )(), L = g(i(u)), B = {};
+    R.Fragment = O, R.jsx = function(e, r, o) {
+      var s = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return j(
+        e,
+        r,
+        o,
+        !1,
+        s ? Error("react-stack-top-frame") : I,
+        s ? g(i(e)) : L
+      );
+    }, R.jsxs = function(e, r, o) {
+      var s = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return j(
+        e,
+        r,
+        o,
+        !0,
+        s ? Error("react-stack-top-frame") : I,
+        s ? g(i(e)) : L
+      );
+    };
+  })()), R;
+}
+var U;
+function de() {
+  return U || (U = 1, process.env.NODE_ENV === "production" ? h.exports = ie() : h.exports = fe()), h.exports;
+}
+var d = de();
+const V = typeof window < "u" ? ue : se;
+function me({
+  bindApi: a,
+  selector: n,
+  children: l
+}) {
+  const i = q(a.store, n);
+  return typeof l == "function" ? /* @__PURE__ */ d.jsx(d.Fragment, { children: l(i) }) : /* @__PURE__ */ d.jsx(d.Fragment, { children: l });
+}
+function Ee({
+  bindApi: a,
+  value: n,
+  children: l
+}) {
+  const i = q(a.store, (u) => u), t = {
+    state: {
+      value: n
+    },
+    meta: {
+      isActive: i.value === n
+    },
+    handleChange: () => a.setValue(n)
+  };
+  return /* @__PURE__ */ d.jsx(d.Fragment, { children: l(t) });
+}
+function pe(a) {
+  const [n] = ce(() => new le(a)), l = w(() => {
+    const i = n;
+    return i.Element = function(u) {
+      return /* @__PURE__ */ d.jsx(Ee, { bindApi: n, value: u.value, children: u.children });
+    }, i.Subscribe = function(u) {
+      const f = u.selector ?? ((m) => m);
+      return /* @__PURE__ */ d.jsx(me, { bindApi: n, selector: f, children: u.children });
+    }, i;
+  }, [n]);
+  return V(n.mount, []), V(() => {
+    n.update(a);
+  }), l;
+}
+S(null);
+S(null);
+function Re() {
+  const a = S(null), n = S(null);
+  function l() {
+    const t = D(a);
+    if (!t)
+      throw new Error(
+        "`useElementContext` must be used within an `Element` component created by `createBindHook`"
+      );
+    return t;
+  }
+  function i() {
+    const t = D(n);
+    if (!t)
+      throw new Error(
+        "`useBindContext` must be used within an `AppBind` component created by `createBindHook`"
+      );
+    return t;
+  }
+  return {
+    elementContext: a,
+    bindContext: n,
+    useElementContext: l,
+    useBindContext: i
+  };
+}
+function Te({
+  elementContext: a,
+  bindContext: n,
+  components: l
+}) {
+  function i(t, u) {
+    const f = pe(u), m = l[t], T = w(() => ({ children: b }) => /* @__PURE__ */ d.jsx(
+      n.Provider,
+      {
+        value: f,
+        children: b
+      }
+    ), [f]), x = w(() => function(_) {
+      return /* @__PURE__ */ d.jsx(f.Element, { value: _.value, children: (E) => {
+        const k = {
+          ...E,
+          ...m
+        };
+        return /* @__PURE__ */ d.jsx(
+          a.Provider,
+          {
+            value: E,
+            children: _.children(k)
+          }
+        );
+      } });
+    }, [f, m]);
+    return w(() => Object.assign({}, f, {
+      Element: x,
+      AppBind: T
+    }), [f, x, T]);
+  }
+  return {
+    useAppBind: i
+  };
+}
+export {
+  Re as createBindContexts,
+  Te as createBindHook,
+  pe as useBind
+};

package/dist/esm/types.d.ts

@@ -0,0 +1,46 @@
+import type { BindState } from "@bind/core";
+import type { ReactNode } from "react";
+/**
+ * State object for Element context
+ */
+export interface ElementState<TValues extends readonly string[]> {
+    /** The value this element represents */
+    value: TValues[number];
+}
+/**
+ * Meta information for Element context
+ */
+export interface ElementMeta {
+    /** Whether this value is currently active */
+    isActive: boolean;
+}
+/**
+ * Context provided to Element render props
+ */
+export interface ElementContext<TValues extends readonly string[]> {
+    /** State object containing the element's value */
+    state: ElementState<TValues>;
+    /** Meta information about the element */
+    meta: ElementMeta;
+    /** Handler to set this value as active */
+    handleChange: () => void;
+}
+/**
+ * Props for the Element component
+ */
+export interface ElementProps<TValues extends readonly string[]> {
+    /** The value this element represents */
+    value: TValues[number];
+    /** Render prop receiving the element context */
+    children: (context: ElementContext<TValues>) => ReactNode;
+}
+/**
+ * Props for the Subscribe component
+ */
+export interface SubscribeProps<TValues extends readonly string[], TSelected = BindState<TValues>> {
+    /** Optional selector to pick specific state */
+    selector?: (state: BindState<TValues>) => TSelected;
+    /** Render prop receiving the selected state */
+    children: ((state: TSelected) => ReactNode) | ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,OAAO,SAAS,SAAS,MAAM,EAAE;IAC9D,wCAAwC;IACxC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC3B,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,OAAO,SAAS,SAAS,MAAM,EAAE;IAChE,kDAAkD;IAClD,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,yCAAyC;IACzC,IAAI,EAAE,WAAW,CAAC;IAClB,0CAA0C;IAC1C,YAAY,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,OAAO,SAAS,SAAS,MAAM,EAAE;IAC9D,wCAAwC;IACxC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACvB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,SAAS,CAAC;CAC1D;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,OAAO,SAAS,SAAS,MAAM,EAAE,EAAE,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC;IAChG,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK,SAAS,CAAC;IACpD,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;CACxD"}

package/dist/esm/useBind.d.ts

@@ -0,0 +1,49 @@
+import { BindApi, type BindOptions, type BindState } from "@bind/core";
+import type { ElementProps, SubscribeProps } from "./types";
+import type { FunctionComponent } from "react";
+/**
+ * React-specific API additions to BindApi
+ */
+export interface ReactBindApi<TValues extends readonly string[]> {
+    /**
+     * A component that renders based on a specific value.
+     * Provides context for both reading state and setting the value.
+     */
+    Element: (props: ElementProps<TValues>) => ReturnType<FunctionComponent>;
+    /**
+     * A component that subscribes to bind state changes.
+     * Use the selector prop to optimize re-renders.
+     */
+    Subscribe: <TSelected = BindState<TValues>>(props: SubscribeProps<TValues, TSelected>) => ReturnType<FunctionComponent>;
+}
+/**
+ * The extended API returned by useBind, combining core API with React components
+ */
+export type ReactBindExtendedApi<TValues extends readonly string[]> = BindApi<TValues> & ReactBindApi<TValues>;
+/**
+ * A custom React Hook that returns an extended instance of the `BindApi` class.
+ *
+ * This API encapsulates all the necessary functionalities for managing exclusive selection state
+ * like tabs, accordions, and multi-step forms.
+ *
+ * @example
+ * ```tsx
+ * const tabs = useBind({
+ *   defaultValue: "tab1",
+ *   values: ["tab1", "tab2"] as const,
+ * });
+ *
+ * return (
+ *   <div>
+ *     <tabs.Element value="tab1">
+ *       {(bindApi) => <button onClick={bind.handleChange}>Tab 1</button>}
+ *     </tabs.Element>
+ *     <tabs.Element value="tab1">
+ *       {(bindApi) => bind.meta.isActive && <div>Panel 1</div>}
+ *     </tabs.Element>
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useBind<TValues extends readonly string[]>(opts: BindOptions<TValues>): ReactBindExtendedApi<TValues>;
+//# sourceMappingURL=useBind.d.ts.map

package/dist/esm/useBind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBind.d.ts","sourceRoot":"","sources":["../../src/useBind.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAIvE,OAAO,KAAK,EAAE,YAAY,EAAkB,cAAc,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,OAAO,SAAS,SAAS,MAAM,EAAE;IAC9D;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,KAAK,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAEzE;;;OAGG;IACH,SAAS,EAAE,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,EACzC,KAAK,EAAE,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,KACrC,UAAU,CAAC,iBAAiB,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,MAAM,oBAAoB,CAAC,OAAO,SAAS,SAAS,MAAM,EAAE,IAAI,OAAO,CAAC,OAAO,CAAC,GACrF,YAAY,CAAC,OAAO,CAAC,CAAC;AAiDvB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,OAAO,CAAC,OAAO,SAAS,SAAS,MAAM,EAAE,EACxD,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,GACxB,oBAAoB,CAAC,OAAO,CAAC,CAmC/B"}

package/dist/esm/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,6 @@
+import { useLayoutEffect } from "react";
+/**
+ * useLayoutEffect on client, useEffect on server (SSR safe)
+ */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+//# sourceMappingURL=useIsomorphicLayoutEffect.d.ts.map

package/dist/esm/useIsomorphicLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../../src/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,eAAe,EAAE,MAAM,OAAO,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,yBAAyB,wBACsB,CAAC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "@bind-ts/react-bind",
+	"version": "0.0.1",
+	"description": "React bindings for @bind-ts/core - type-safe compound component binding",
+	"author": "",
+	"license": "MIT",
+	"type": "module",
+	"types": "dist/esm/index.d.ts",
+	"main": "dist/cjs/index.cjs",
+	"module": "dist/esm/index.js",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/esm/index.d.ts",
+				"default": "./dist/esm/index.js"
+			},
+			"require": {
+				"types": "./dist/cjs/index.d.cts",
+				"default": "./dist/cjs/index.cjs"
+			}
+		},
+		"./package.json": "./package.json"
+	},
+	"sideEffects": false,
+	"files": [
+		"dist",
+		"src",
+		"!**/__tests__"
+	],
+	"scripts": {
+		"build": "vite build && tsc --emitDeclarationOnly --outDir dist/esm",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@bind-ts/bind-core": "^0.0.1",
+		"@tanstack/react-store": "^0.7.0"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0"
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "^6.6.0",
+		"@testing-library/react": "^16.0.0",
+		"@types/react": "^19.0.0",
+		"jsdom": "^26.1.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"typescript": "^5.9.2",
+		"vite": "^6.3.5",
+		"vitest": "^3.2.4"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/src/createBindHook.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { createContext, useContext, useMemo } from "react";
+import { useBind } from "./useBind";
+import type { BindOptions, BindState } from "@bind/bind-core";
+import type {
+	ComponentType,
+	Context,
+	FunctionComponent,
+	PropsWithChildren,
+	ReactNode,
+} from "react";
+import type { ReactBindExtendedApi } from "./useBind";
+import type { ElementContext } from "./types";
+
+/**
+ * Context for the element render context, providing access to value state
+ * within custom element components.
+ */
+const defaultElementContext = createContext<ElementContext<readonly string[]>>(null as never);
+
+/**
+ * Context for the bind API, providing access to the bind instance
+ * within custom components.
+ */
+const defaultBindContext = createContext<ReactBindExtendedApi<readonly string[]>>(null as never);
+
+/**
+ * Creates the contexts and hooks needed for bind composition.
+ *
+ * @example
+ * ```tsx
+ * export const { bindContext, elementContext, useElementContext, useBindContext } =
+ *   createBindContexts();
+ * ```
+ */
+export function createBindContexts() {
+	const elementContext = createContext<ElementContext<readonly string[]>>(null as never);
+
+	const bindContext = createContext<ReactBindExtendedApi<readonly string[]>>(null as never);
+
+	function useElementContext<TValues extends readonly string[] = readonly string[]>() {
+		const element = useContext(elementContext);
+
+		if (!element) {
+			throw new Error(
+				"`useElementContext` must be used within an `Element` component created by `createBindHook`",
+			);
+		}
+
+		return element as ElementContext<TValues>;
+	}
+
+	function useBindContext<TValues extends readonly string[] = readonly string[]>() {
+		const bindApi = useContext(bindContext);
+
+		if (!bindApi) {
+			throw new Error(
+				"`useBindContext` must be used within an `AppBind` component created by `createBindHook`",
+			);
+		}
+
+		return bindApi as unknown as ReactBindExtendedApi<TValues>;
+	}
+
+	return {
+		elementContext,
+		bindContext,
+		useElementContext,
+		useBindContext,
+	};
+}
+
+/**
+ * A record of component groups, where each key is a group name
+ * and the value is a record of components in that group.
+ */
+type ComponentGroups = Record<string, Record<string, ComponentType<any>>>;
+
+/**
+ * Props for the createBindHook factory function.
+ */
+interface CreateBindHookProps<TComponentGroups extends ComponentGroups> {
+	elementContext: Context<ElementContext<readonly string[]>>;
+	bindContext: Context<ReactBindExtendedApi<readonly string[]>>;
+	components: TComponentGroups;
+}
+
+/**
+ * Context passed to Element children, including the element render context
+ * and the selected component group.
+ */
+export type AppElementContext<
+	TValues extends readonly string[],
+	TComponents extends Record<string, ComponentType<any>>,
+> = ElementContext<TValues> & TComponents;
+
+/**
+ * Props for the Element component in composition API.
+ */
+export interface AppElementProps<
+	TValues extends readonly string[],
+	TComponents extends Record<string, ComponentType<any>>,
+> {
+	/** The value this element represents */
+	value: TValues[number];
+	/** Render prop receiving the element context with components */
+	children: (context: AppElementContext<TValues, TComponents>) => ReactNode;
+}
+
+/**
+ * Extended bind API with composition support.
+ */
+export type AppBindExtendedApi<
+	TValues extends readonly string[],
+	TComponents extends Record<string, ComponentType<any>>,
+> = Omit<ReactBindExtendedApi<TValues>, "Element"> & {
+	/**
+	 * An element component that provides both element context and the selected component group.
+	 * Use this to render pre-bound custom components.
+	 */
+	Element: (props: AppElementProps<TValues, TComponents>) => ReturnType<FunctionComponent>;
+
+	/**
+	 * A wrapper component that provides bind context to children.
+	 * Use this when you need access to the bind API in deeply nested components.
+	 */
+	AppBind: ComponentType<PropsWithChildren<{}>>;
+};
+
+/**
+ * Creates a custom bind hook factory with pre-bound component groups.
+ *
+ * @example
+ * ```tsx
+ * const { elementContext, bindContext, useElementContext } = createBindContexts();
+ *
+ * function Tab({ children }: { children: React.ReactNode }) {
+ *   const element = useElementContext();
+ *   return <button onClick={element.handleChange}>{children}</button>;
+ * }
+ *
+ * function TabPanel({ children }: { children: React.ReactNode }) {
+ *   const element = useElementContext();
+ *   if (!element.meta.isActive) return null;
+ *   return <div>{children}</div>;
+ * }
+ *
+ * const { useAppBind } = createBindHook({
+ *   elementContext,
+ *   bindContext,
+ *   components: {
+ *     Tab: { Tab, TabPanel },
+ *     Wizard: { Step, Button },
+ *   },
+ * });
+ *
+ * function MyTabs() {
+ *   const tabs = useAppBind('Tab', {
+ *     defaultValue: 'tab1',
+ *     values: ['tab1', 'tab2'] as const,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <tabs.Element value="tab1">
+ *         {(bindApi) => <bindApi.Tab>Tab 1</bindApi.Tab>}
+ *       </tabs.Element>
+ *       <tabs.Element value="tab1">
+ *         {(bindApi) => <bindApi.TabPanel>Panel 1</bindApi.TabPanel>}
+ *       </tabs.Element>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function createBindHook<const TComponentGroups extends ComponentGroups>({
+	elementContext,
+	bindContext,
+	components,
+}: CreateBindHookProps<TComponentGroups>) {
+	function useAppBind<
+		TGroupKey extends keyof TComponentGroups,
+		TValues extends readonly string[],
+	>(
+		groupKey: TGroupKey,
+		opts: BindOptions<TValues>,
+	): AppBindExtendedApi<TValues, TComponentGroups[TGroupKey]> {
+		const bindApi = useBind(opts);
+		const componentGroup = components[groupKey];
+
+		const AppBind = useMemo<ComponentType<PropsWithChildren<{}>>>(() => {
+			return ({ children }) => {
+				return (
+					<bindContext.Provider
+						value={bindApi as unknown as ReactBindExtendedApi<readonly string[]>}
+					>
+						{children}
+					</bindContext.Provider>
+				);
+			};
+		}, [bindApi]);
+
+		const Element = useMemo(() => {
+			return function Element(props: AppElementProps<TValues, TComponentGroups[TGroupKey]>) {
+				return (
+					<bindApi.Element value={props.value}>
+						{(bindApi) => {
+							// Merge element context with component group
+							const appElementContext = {
+								...bindApi,
+								...componentGroup,
+							} as AppElementContext<TValues, TComponentGroups[TGroupKey]>;
+
+							return (
+								<elementContext.Provider
+									value={bindApi as ElementContext<readonly string[]>}
+								>
+									{props.children(appElementContext)}
+								</elementContext.Provider>
+							);
+						}}
+					</bindApi.Element>
+				);
+			};
+		}, [bindApi, componentGroup]);
+
+		const extendedApi = useMemo(() => {
+			return Object.assign({}, bindApi, {
+				Element,
+				AppBind,
+			}) as AppBindExtendedApi<TValues, TComponentGroups[TGroupKey]>;
+		}, [bindApi, Element, AppBind]);
+
+		return extendedApi;
+	}
+
+	return {
+		useAppBind,
+	};
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+export { useBind } from "./useBind";
+export type { ReactBindApi, ReactBindExtendedApi } from "./useBind";
+export type {
+	ElementContext,
+	ElementState,
+	ElementMeta,
+	ElementProps,
+	SubscribeProps,
+} from "./types";
+
+// Composition APIs
+export { createBindContexts, createBindHook } from "./createBindHook";
+export type { AppElementContext, AppElementProps, AppBindExtendedApi } from "./createBindHook";
+
+// Re-export core types for convenience
+export type { BindOptions, BindState } from "@bind/core";

package/src/types.ts

@@ -0,0 +1,50 @@
+import type { BindState } from "@bind/core";
+import type { ReactNode } from "react";
+
+/**
+ * State object for Element context
+ */
+export interface ElementState<TValues extends readonly string[]> {
+	/** The value this element represents */
+	value: TValues[number];
+}
+
+/**
+ * Meta information for Element context
+ */
+export interface ElementMeta {
+	/** Whether this value is currently active */
+	isActive: boolean;
+}
+
+/**
+ * Context provided to Element render props
+ */
+export interface ElementContext<TValues extends readonly string[]> {
+	/** State object containing the element's value */
+	state: ElementState<TValues>;
+	/** Meta information about the element */
+	meta: ElementMeta;
+	/** Handler to set this value as active */
+	handleChange: () => void;
+}
+
+/**
+ * Props for the Element component
+ */
+export interface ElementProps<TValues extends readonly string[]> {
+	/** The value this element represents */
+	value: TValues[number];
+	/** Render prop receiving the element context */
+	children: (context: ElementContext<TValues>) => ReactNode;
+}
+
+/**
+ * Props for the Subscribe component
+ */
+export interface SubscribeProps<TValues extends readonly string[], TSelected = BindState<TValues>> {
+	/** Optional selector to pick specific state */
+	selector?: (state: BindState<TValues>) => TSelected;
+	/** Render prop receiving the selected state */
+	children: ((state: TSelected) => ReactNode) | ReactNode;
+}

package/src/useBind.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { BindApi, type BindOptions, type BindState } from "@bind/core";
+import { useStore } from "@tanstack/react-store";
+import { useMemo, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+import type { ElementProps, ElementContext, SubscribeProps } from "./types";
+import type { FunctionComponent, ReactNode } from "react";
+
+/**
+ * React-specific API additions to BindApi
+ */
+export interface ReactBindApi<TValues extends readonly string[]> {
+	/**
+	 * A component that renders based on a specific value.
+	 * Provides context for both reading state and setting the value.
+	 */
+	Element: (props: ElementProps<TValues>) => ReturnType<FunctionComponent>;
+
+	/**
+	 * A component that subscribes to bind state changes.
+	 * Use the selector prop to optimize re-renders.
+	 */
+	Subscribe: <TSelected = BindState<TValues>>(
+		props: SubscribeProps<TValues, TSelected>,
+	) => ReturnType<FunctionComponent>;
+}
+
+/**
+ * The extended API returned by useBind, combining core API with React components
+ */
+export type ReactBindExtendedApi<TValues extends readonly string[]> = BindApi<TValues> &
+	ReactBindApi<TValues>;
+
+/**
+ * Internal Subscribe component that handles store subscription
+ */
+function LocalSubscribe<TValues extends readonly string[], TSelected>({
+	bindApi,
+	selector,
+	children,
+}: {
+	bindApi: BindApi<TValues>;
+	selector: (state: BindState<TValues>) => TSelected;
+	children: ((state: TSelected) => ReactNode) | ReactNode;
+}): ReturnType<FunctionComponent> {
+	const data = useStore(bindApi.store, selector);
+
+	if (typeof children === "function") {
+		return <>{children(data)}</>;
+	}
+	return <>{children}</>;
+}
+
+/**
+ * Internal Element component that renders based on value state
+ */
+function LocalElement<TValues extends readonly string[]>({
+	bindApi,
+	value,
+	children,
+}: {
+	bindApi: BindApi<TValues>;
+	value: TValues[number];
+	children: (context: ElementContext<TValues>) => ReactNode;
+}): ReturnType<FunctionComponent> {
+	const storeState = useStore(bindApi.store, (s: BindState<TValues>) => s);
+
+	const context: ElementContext<TValues> = {
+		state: {
+			value: value,
+		},
+		meta: {
+			isActive: storeState.value === value,
+		},
+		handleChange: () => bindApi.setValue(value),
+	};
+
+	return <>{children(context)}</>;
+}
+
+/**
+ * A custom React Hook that returns an extended instance of the `BindApi` class.
+ *
+ * This API encapsulates all the necessary functionalities for managing exclusive selection state
+ * like tabs, accordions, and multi-step forms.
+ *
+ * @example
+ * ```tsx
+ * const tabs = useBind({
+ *   defaultValue: "tab1",
+ *   values: ["tab1", "tab2"] as const,
+ * });
+ *
+ * return (
+ *   <div>
+ *     <tabs.Element value="tab1">
+ *       {(bindApi) => <button onClick={bind.handleChange}>Tab 1</button>}
+ *     </tabs.Element>
+ *     <tabs.Element value="tab1">
+ *       {(bindApi) => bind.meta.isActive && <div>Panel 1</div>}
+ *     </tabs.Element>
+ *   </div>
+ * );
+ * ```
+ */
+export function useBind<TValues extends readonly string[]>(
+	opts: BindOptions<TValues>,
+): ReactBindExtendedApi<TValues> {
+	const [bindApi] = useState(() => new BindApi<TValues>(opts));
+
+	const extendedApi = useMemo(() => {
+		const api = bindApi as ReactBindExtendedApi<TValues>;
+
+		api.Element = function Element(props: ElementProps<TValues>) {
+			return (
+				<LocalElement bindApi={bindApi} value={props.value}>
+					{props.children}
+				</LocalElement>
+			);
+		};
+
+		api.Subscribe = function Subscribe<TSelected = BindState<TValues>>(
+			props: SubscribeProps<TValues, TSelected>,
+		) {
+			const selector = props.selector ?? ((s) => s as unknown as TSelected);
+			return (
+				<LocalSubscribe bindApi={bindApi} selector={selector} children={props.children} />
+			);
+		};
+
+		return api;
+	}, [bindApi]);
+
+	// Mount/unmount lifecycle
+	useIsomorphicLayoutEffect(bindApi.mount, []);
+
+	// Keep options in sync (like a ref, no side effects)
+	useIsomorphicLayoutEffect(() => {
+		bindApi.update(opts);
+	});
+
+	return extendedApi;
+}

package/src/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,7 @@
+import { useEffect, useLayoutEffect } from "react";
+
+/**
+ * useLayoutEffect on client, useEffect on server (SSR safe)
+ */
+export const useIsomorphicLayoutEffect =
+	typeof window !== "undefined" ? useLayoutEffect : useEffect;