@bind-ts/react-bind 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +222 -0
- package/dist/cjs/index.cjs +1 -1
- package/dist/esm/createBindHook.d.ts +1 -1
- package/dist/esm/createBindHook.d.ts.map +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/types.d.ts +1 -1
- package/dist/esm/types.d.ts.map +1 -1
- package/dist/esm/useBind.d.ts +1 -1
- package/dist/esm/useBind.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/createBindHook.tsx +1 -1
- package/src/index.ts +1 -1
- package/src/types.ts +1 -1
- package/src/useBind.tsx +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
# @bind-ts/react-bind
|
|
2
|
+
|
|
3
|
+
**Headless UI for building type-safe compound components.** Stop writing repetitive context boilerplate for tabs, accordions, wizards, and other UI patterns that need "one active item at a time" logic.
|
|
4
|
+
|
|
5
|
+
Built on top of [@tanstack/store](https://tanstack.com/store), heavily inspired by [@tanstack/form](https://tanstack.com/form).
|
|
6
|
+
|
|
7
|
+
## Just want to see a full example?
|
|
8
|
+
|
|
9
|
+
Check out [`page.tsx`](apps/web/app/page.tsx) and [`bind-context.ts`](apps/web/app/bind-context.ts) for example usage.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @bind-ts/react-bind
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## The Problem
|
|
18
|
+
|
|
19
|
+
Building compound components like tabs requires creating context providers, hooks, and managing state manually:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
const TabsContext = React.createContext<
|
|
23
|
+
| {
|
|
24
|
+
tab: string;
|
|
25
|
+
changeTab: (tab: string) => void;
|
|
26
|
+
}
|
|
27
|
+
| undefined
|
|
28
|
+
>(undefined);
|
|
29
|
+
|
|
30
|
+
function useTabsContext() {
|
|
31
|
+
const context = React.useContext(TabsContext);
|
|
32
|
+
if (!context) {
|
|
33
|
+
throw new Error("useTabsContext must be used within a TabsContextProvider");
|
|
34
|
+
}
|
|
35
|
+
return context;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function Tabs({ children, defaultTab }: { children: React.ReactNode; defaultTab: string }) {
|
|
39
|
+
const [tab, setTab] = React.useState(defaultTab);
|
|
40
|
+
return (
|
|
41
|
+
<TabsContext.Provider value={{ tab, changeTab: setTab }}>{children}</TabsContext.Provider>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function Tab({ children, tab }: { children: React.ReactNode; tab: string }) {
|
|
46
|
+
const { tab: currentTab, changeTab } = useTabsContext();
|
|
47
|
+
if (tab !== currentTab) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
return <div>{children}</div>;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function TabPanel({ children, tab }: { children: React.ReactNode; tab: string }) {
|
|
54
|
+
const { tab: currentTab } = useTabsContext();
|
|
55
|
+
if (tab !== currentTab) {
|
|
56
|
+
return null;
|
|
57
|
+
}
|
|
58
|
+
return <div>{children}</div>;
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
This is a lot of boilerplate for a common pattern and you'll need to repeat it for accordions, wizards, radio groups, and more.
|
|
63
|
+
|
|
64
|
+
## The Solution: `useBind`
|
|
65
|
+
|
|
66
|
+
`useBind` provides all the state management and element binding you need in a single hook:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { useBind } from "@bind-ts/react-bind";
|
|
70
|
+
|
|
71
|
+
function Example() {
|
|
72
|
+
const bind = useBind({
|
|
73
|
+
defaultValue: "tab1",
|
|
74
|
+
values: ["tab1", "tab2"],
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<>
|
|
79
|
+
<div className="flex gap-2">
|
|
80
|
+
<bind.Element value="tab1">
|
|
81
|
+
{(bindApi) => {
|
|
82
|
+
return <button onClick={bindApi.handleChange}>Tab 1</button>;
|
|
83
|
+
}}
|
|
84
|
+
</bind.Element>
|
|
85
|
+
<bind.Element value="tab2">
|
|
86
|
+
{(bindApi) => {
|
|
87
|
+
return <button onClick={bindApi.handleChange}>Tab 2</button>;
|
|
88
|
+
}}
|
|
89
|
+
</bind.Element>
|
|
90
|
+
</div>
|
|
91
|
+
<bind.Element value="tab1">
|
|
92
|
+
{(bindApi) => {
|
|
93
|
+
if (!bindApi.meta.isActive) {
|
|
94
|
+
return null;
|
|
95
|
+
}
|
|
96
|
+
return <div>Viewing {bindApi.state.value}</div>;
|
|
97
|
+
}}
|
|
98
|
+
</bind.Element>
|
|
99
|
+
<bind.Element value="tab2">
|
|
100
|
+
{(bindApi) => {
|
|
101
|
+
if (!bindApi.meta.isActive) {
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
return <div>Viewing {bindApi.state.value}</div>;
|
|
105
|
+
}}
|
|
106
|
+
</bind.Element>
|
|
107
|
+
</>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Each `bind.Element` receives a render prop with full access to:
|
|
113
|
+
|
|
114
|
+
- `bindApi.state.value` — the element's value
|
|
115
|
+
- `bindApi.meta.isActive` — whether this element is currently active
|
|
116
|
+
- `bindApi.handleChange` — a handler to activate this element
|
|
117
|
+
|
|
118
|
+
## Subscribing to State
|
|
119
|
+
|
|
120
|
+
Need to display or react to the current active value outside of an `Element`? Use `bind.Subscribe`:
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
function Example() {
|
|
124
|
+
const bind = useBind({
|
|
125
|
+
defaultValue: "tab1",
|
|
126
|
+
values: ["tab1", "tab2"],
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
return (
|
|
130
|
+
<>
|
|
131
|
+
{/* Subscribe with a selector for fine-grained reactivity */}
|
|
132
|
+
<bind.Subscribe selector={(state) => state.value}>
|
|
133
|
+
{(activeValue) => <span>Active: {activeValue}</span>}
|
|
134
|
+
</bind.Subscribe>
|
|
135
|
+
|
|
136
|
+
{/* Or subscribe to the full state */}
|
|
137
|
+
<bind.Subscribe>
|
|
138
|
+
{(state) => (
|
|
139
|
+
<span>
|
|
140
|
+
{state.value} of {state.values.length} tabs
|
|
141
|
+
</span>
|
|
142
|
+
)}
|
|
143
|
+
</bind.Subscribe>
|
|
144
|
+
</>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
The `selector` prop lets you pick exactly what state you need, preventing unnecessary re-renders when unrelated state changes.
|
|
150
|
+
|
|
151
|
+
## Component Composition API
|
|
152
|
+
|
|
153
|
+
Redefining these render props for every use can become cumbersome. The **Composition API** lets you define reusable components that automatically receive bind context:
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { createBindContexts, createBindHook } from "@bind-ts/react-bind";
|
|
157
|
+
|
|
158
|
+
// Create shared contexts
|
|
159
|
+
export const { bindContext, elementContext, useElementContext } = createBindContexts();
|
|
160
|
+
|
|
161
|
+
// Define reusable components
|
|
162
|
+
function Tab({ children }: { children: React.ReactNode }) {
|
|
163
|
+
const element = useElementContext();
|
|
164
|
+
return <button onClick={element.handleChange}>{children}</button>;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
function TabPanel({ children }: { children: React.ReactNode }) {
|
|
168
|
+
const element = useElementContext();
|
|
169
|
+
|
|
170
|
+
if (!element.meta.isActive) {
|
|
171
|
+
return null;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
return <div>{children}</div>;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Create a typed hook with your components
|
|
178
|
+
const { useAppBind } = createBindHook({
|
|
179
|
+
elementContext,
|
|
180
|
+
bindContext,
|
|
181
|
+
components: {
|
|
182
|
+
Tab: {
|
|
183
|
+
Tab,
|
|
184
|
+
TabPanel,
|
|
185
|
+
},
|
|
186
|
+
// define other groups of components here such as Wizard, Accordion, etc.
|
|
187
|
+
},
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
// Usage becomes clean and declarative
|
|
191
|
+
function CompositionExample() {
|
|
192
|
+
const bind = useAppBind("Tab", {
|
|
193
|
+
defaultValue: "tab1",
|
|
194
|
+
values: ["tab1", "tab2"],
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
return (
|
|
198
|
+
<>
|
|
199
|
+
<div className="flex gap-2">
|
|
200
|
+
<bind.Element value="tab1">
|
|
201
|
+
{(bindApi) => <bindApi.Tab>Tab 1</bindApi.Tab>}
|
|
202
|
+
</bind.Element>
|
|
203
|
+
<bind.Element value="tab2">
|
|
204
|
+
{(bindApi) => <bindApi.Tab>Tab 2</bindApi.Tab>}
|
|
205
|
+
</bind.Element>
|
|
206
|
+
</div>
|
|
207
|
+
<bind.Element value="tab1">
|
|
208
|
+
{(bindApi) => <bindApi.TabPanel>Tab 1 Content</bindApi.TabPanel>}
|
|
209
|
+
</bind.Element>
|
|
210
|
+
<bind.Element value="tab2">
|
|
211
|
+
{(bindApi) => <bindApi.TabPanel>Tab 2 Content</bindApi.TabPanel>}
|
|
212
|
+
</bind.Element>
|
|
213
|
+
</>
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
With the Composition API, you define your component library once and get type-safe access to the right components for each use case.
|
|
219
|
+
|
|
220
|
+
## License
|
|
221
|
+
|
|
222
|
+
MIT
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"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={};/**
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),oe=require("@bind-ts/bind-core"),W=require("@tanstack/react-store");var h={exports:{}},R={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { BindOptions } from "@bind/bind-core";
|
|
1
|
+
import type { BindOptions } from "@bind-ts/bind-core";
|
|
2
2
|
import type { ComponentType, Context, FunctionComponent, PropsWithChildren, ReactNode } from "react";
|
|
3
3
|
import type { ReactBindExtendedApi } from "./useBind";
|
|
4
4
|
import type { ElementContext } from "./types";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createBindHook.d.ts","sourceRoot":"","sources":["../../src/createBindHook.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,
|
|
1
|
+
{"version":3,"file":"createBindHook.d.ts","sourceRoot":"","sources":["../../src/createBindHook.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,oBAAoB,CAAC;AACjE,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
CHANGED
|
@@ -3,5 +3,5 @@ export type { ReactBindApi, ReactBindExtendedApi } from "./useBind";
|
|
|
3
3
|
export type { ElementContext, ElementState, ElementMeta, ElementProps, SubscribeProps, } from "./types";
|
|
4
4
|
export { createBindContexts, createBindHook } from "./createBindHook";
|
|
5
5
|
export type { AppElementContext, AppElementProps, AppBindExtendedApi } from "./createBindHook";
|
|
6
|
-
export type { BindOptions, BindState } from "@bind/core";
|
|
6
|
+
export type { BindOptions, BindState } from "@bind-ts/bind-core";
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,oBAAoB,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import ae, { useLayoutEffect as ue, useEffect as se, useState as ce, useMemo as w, createContext as S, useContext as D } from "react";
|
|
2
|
-
import { BindApi as le } from "@bind/core";
|
|
2
|
+
import { BindApi as le } from "@bind-ts/bind-core";
|
|
3
3
|
import { useStore as q } from "@tanstack/react-store";
|
|
4
4
|
var h = { exports: {} }, v = {};
|
|
5
5
|
/**
|
package/dist/esm/types.d.ts
CHANGED
package/dist/esm/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BindApi, type BindOptions, type BindState } from "@bind/core";
|
|
1
|
+
import { BindApi, type BindOptions, type BindState } from "@bind-ts/bind-core";
|
|
2
2
|
import type { ElementProps, SubscribeProps } from "./types";
|
|
3
3
|
import type { FunctionComponent } from "react";
|
|
4
4
|
/**
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,oBAAoB,CAAC;AAI/E,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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bind-ts/react-bind",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "React bindings for @bind-ts/core - type-safe compound component binding",
|
|
5
5
|
"author": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"check-types": "tsc --noEmit"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@bind-ts/bind-core": "
|
|
37
|
+
"@bind-ts/bind-core": "0.0.1",
|
|
38
38
|
"@tanstack/react-store": "^0.7.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
package/src/createBindHook.tsx
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { createContext, useContext, useMemo } from "react";
|
|
4
4
|
import { useBind } from "./useBind";
|
|
5
|
-
import type { BindOptions, BindState } from "@bind/bind-core";
|
|
5
|
+
import type { BindOptions, BindState } from "@bind-ts/bind-core";
|
|
6
6
|
import type {
|
|
7
7
|
ComponentType,
|
|
8
8
|
Context,
|
package/src/index.ts
CHANGED
|
@@ -13,4 +13,4 @@ export { createBindContexts, createBindHook } from "./createBindHook";
|
|
|
13
13
|
export type { AppElementContext, AppElementProps, AppBindExtendedApi } from "./createBindHook";
|
|
14
14
|
|
|
15
15
|
// Re-export core types for convenience
|
|
16
|
-
export type { BindOptions, BindState } from "@bind/core";
|
|
16
|
+
export type { BindOptions, BindState } from "@bind-ts/bind-core";
|
package/src/types.ts
CHANGED
package/src/useBind.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { BindApi, type BindOptions, type BindState } from "@bind/core";
|
|
3
|
+
import { BindApi, type BindOptions, type BindState } from "@bind-ts/bind-core";
|
|
4
4
|
import { useStore } from "@tanstack/react-store";
|
|
5
5
|
import { useMemo, useState } from "react";
|
|
6
6
|
import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
|