@sudobility/subscription-components 1.0.0

package/README.md

@@ -0,0 +1,122 @@
+# @sudobility/subscription-components
+
+Subscription UI components for React with RevenueCat integration.
+
+## Installation
+
+```bash
+npm install @sudobility/subscription-components
+```
+
+## Peer Dependencies
+
+- `react` (^18.0.0 || ^19.0.0)
+- `react-dom` (^18.0.0 || ^19.0.0)
+- `@sudobility/components` (^4.0.0)
+- `@sudobility/design` (^1.0.0)
+- `@revenuecat/purchases-js` (^1.0.0) - optional, only needed for RevenueCat integration
+
+## Components
+
+### SubscriptionTile
+
+A customizable subscription plan tile component that displays pricing, features, and promotional information.
+
+```tsx
+import { SubscriptionTile } from '@sudobility/subscription-components';
+
+<SubscriptionTile
+  id="yearly"
+  title="Annual Plan"
+  price="$99.99"
+  periodLabel="/year"
+  features={['Unlimited access', 'Priority support', 'Early features']}
+  isSelected={selected === 'yearly'}
+  onSelect={() => setSelected('yearly')}
+  topBadge={{ text: 'Best Value', color: 'purple' }}
+  discountBadge={{ text: 'Save 40%', isBestValue: true }}
+/>
+```
+
+### SubscriptionLayout
+
+A container component for subscription selection UI with status display and action buttons.
+
+```tsx
+import { SubscriptionLayout, SubscriptionTile } from '@sudobility/subscription-components';
+
+<SubscriptionLayout
+  title="Choose Your Plan"
+  currentStatus={{
+    isActive: true,
+    activeContent: {
+      title: 'Active Subscription',
+      fields: [
+        { label: 'Plan', value: 'Annual' },
+        { label: 'Expires', value: 'Dec 31, 2025' },
+      ],
+    },
+  }}
+  primaryAction={{
+    label: 'Subscribe Now',
+    onClick: handleSubscribe,
+  }}
+  secondaryAction={{
+    label: 'Restore Purchase',
+    onClick: handleRestore,
+  }}
+  error={error}
+>
+  {plans.map(plan => (
+    <SubscriptionTile key={plan.id} {...plan} />
+  ))}
+</SubscriptionLayout>
+```
+
+### SubscriptionProvider
+
+A context provider for RevenueCat subscription management.
+
+```tsx
+import { SubscriptionProvider, useSubscriptionContext } from '@sudobility/subscription-components';
+
+// Wrap your app
+<SubscriptionProvider
+  apiKey="your_revenuecat_api_key"
+  entitlementId="premium"
+  onError={(error) => console.error(error)}
+>
+  <App />
+</SubscriptionProvider>
+
+// Use in components
+function PricingPage() {
+  const {
+    products,
+    currentSubscription,
+    isLoading,
+    purchase,
+    restore,
+  } = useSubscriptionContext();
+
+  // ...
+}
+```
+
+## Localization
+
+All text labels are passed through callbacks, allowing full control over localization:
+
+```tsx
+<SubscriptionTile
+  title={t('plans.annual.title')}
+  price={formatCurrency(99.99)}
+  periodLabel={t('periods.year')}
+  features={t('plans.annual.features', { returnObjects: true })}
+  // ...
+/>
+```
+
+## License
+
+MIT

package/dist/__tests__/setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @sudobility/subscription-components
+ *
+ * Subscription UI components for React with RevenueCat integration.
+ * All components support full localization - text labels are passed by the consumer.
+ */
+export { SubscriptionTile, type SubscriptionTileProps } from './subscription-tile';
+export { SubscriptionLayout, type SubscriptionLayoutProps, type SubscriptionStatusConfig, type ActionButtonConfig, } from './subscription-layout';
+export { SubscriptionProvider, useSubscriptionContext, clearRevenueCatCheckoutSessions, closeRevenueCatInstance, type SubscriptionProviderProps, } from './subscription-provider';
+export type { SubscriptionProduct, SubscriptionStatus, SubscriptionContextValue, SubscriptionProviderConfig, BadgeConfig, DiscountBadgeConfig, PremiumCalloutConfig, } from './types';
+export { cn } from './lib/cn';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACnF,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,GACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,+BAA+B,EAC/B,uBAAuB,EACvB,KAAK,yBAAyB,GAC/B,MAAM,yBAAyB,CAAC;AAGjC,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,EACxB,0BAA0B,EAC1B,WAAW,EACX,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC"}