@solvapay/react 1.0.8-preview.5 → 1.0.8-preview.7

package/README.md

@@ -13,57 +13,6 @@ pnpm add @solvapay/react
 - `react` ^18.2.0 || ^19.0.0
 - `react-dom` ^18.2.0 || ^19.0.0
 
-## Tailwind setup
-
-SolvaPay primitives ship plain CSS. They work with Tailwind v3 and v4
-identically. Import `@solvapay/react/styles.css` **after** your Tailwind
-entry so the SolvaPay rules resolve above preflight.
-
-### Tailwind v4 (recommended for new projects)
-
-`src/index.css`:
-
-```css
-@import "tailwindcss";
-@import "@solvapay/react/styles.css";
-```
-
-No `tailwind.config.ts` needed. Theme via `@theme` block if desired.
-
-### Tailwind v3 (Lovable, older projects)
-
-`tailwind.config.ts`:
-
-```ts
-import type { Config } from 'tailwindcss'
-
-export default {
-  content: ['./src/**/*.{ts,tsx}'],
-  theme: { extend: {} },
-  plugins: [],
-} satisfies Config
-```
-
-`src/index.css`:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@import "@solvapay/react/styles.css";
-```
-
-No `content[]` entry for `@solvapay/react` is needed — primitives don't ship
-utility classes. `data-[state=*]:` variants work natively in v3.3+.
-
-### CSS loading order
-
-Always import `@solvapay/react/styles.css` **after** `@tailwind utilities`
-(v3) or `@import "tailwindcss"` (v4). SolvaPay rules are unlayered; they beat
-Tailwind's preflight when loaded last. See
-[`examples/spa-checkout/src/index.css`](../../examples/spa-checkout/src/index.css)
-for the canonical demonstration.
-
 ## Quick Start
 
 ### Zero-Config Usage (Recommended)
@@ -395,48 +344,23 @@ Displays current product subscription with render props or className pattern.
 
 ### PurchaseGate
 
-Controls access to content based on purchase status. Uses a compound
-primitive API (`PurchaseGate.Root`, `.Allowed`, `.Blocked`, `.Loading`,
-`.Error`). Matching is by stable reference — `productRef` (`prd_*`) and/or
-`planRef` (`pln_*`) — never by product or plan name.
-
-**Root props:**
-
-- `productRef?: string` - Require an active purchase for this product
-- `planRef?: string` - Require an active purchase for this specific plan
-- `asChild?: boolean` - Merge onto the consumer element via `Slot`
-
-Matching precedence:
+Controls access to content based on purchase status.
 
-- If neither is set, any `status === 'active'` purchase allows access
-- If only one is set, that field must match on an active purchase
-- If both are set, both must match on the **same** active purchase (AND)
-
-**Example — product-level gating:**
+**Props:**
 
-```tsx
-<PurchaseGate.Root productRef="prd_widget">
-  <PurchaseGate.Loading>Loading…</PurchaseGate.Loading>
-  <PurchaseGate.Allowed>
-    <PremiumContent />
-  </PurchaseGate.Allowed>
-  <PurchaseGate.Blocked>
-    <Paywall />
-  </PurchaseGate.Blocked>
-</PurchaseGate.Root>
-```
+- `requireProduct?: string` - Optional product name to check for an active purchase
+- `children: (props) => React.ReactNode` - Render prop function
 
-**Example — plan-level gating:**
+**Example:**
 
 ```tsx
-<PurchaseGate.Root planRef="pln_premium">
-  <PurchaseGate.Allowed>
-    <PremiumOnlyFeature />
-  </PurchaseGate.Allowed>
-  <PurchaseGate.Blocked>
-    <UpgradePrompt />
-  </PurchaseGate.Blocked>
-</PurchaseGate.Root>
+<PurchaseGate requireProduct="Pro Plan">
+  {({ hasAccess, loading, purchases }) => {
+    if (loading) return <Loading />
+    if (!hasAccess) return <Paywall />
+    return <PremiumContent />
+  }}
+</PurchaseGate>
 ```
 
 ## Hooks
@@ -451,15 +375,8 @@ const {
   loading, // Loading state
   hasPaidPurchase, // Boolean: has any paid purchase
   activePurchase, // Most recent active purchase
-  hasPurchase, // (criteria?: { productRef?, planRef? }) => boolean — predicate matching the PurchaseGate.Root shape
   refetch, // Function to refetch purchases
 } = usePurchase()
-
-// Examples — criteria-based checks:
-hasPurchase() // any active purchase
-hasPurchase({ productRef: 'prd_widget' }) // any active purchase for this product
-hasPurchase({ planRef: 'pln_premium' }) // any active purchase for this specific plan
-hasPurchase({ productRef: 'prd_widget', planRef: 'pln_premium' }) // both must match the same active purchase
 ```
 
 ### usePlans