@appfunnel-dev/sdk 0.7.0 → 0.8.0

package/README.md

@@ -8,84 +8,6 @@ Headless SDK for building AppFunnel pages with React. Write funnel pages as Reac
 npm install @appfunnel-dev/sdk
 ```
 
-## Quick Start
+## Documentation
 
-### 1. Define your config
-
-```ts
-// appfunnel.config.ts
-import { defineConfig } from '@appfunnel-dev/sdk'
-
-export default defineConfig({
-  projectId: 'clxxx...',
-  name: 'My Onboarding Funnel',
-  pages: {
-    index:    { name: 'Landing',  type: 'default' },
-    quiz:     { name: 'Quiz',     type: 'default' },
-    checkout: { name: 'Checkout', type: 'checkout' },
-    success:  { name: 'Success',  type: 'finish' },
-  },
-  routes: {
-    index:    [{ to: 'quiz' }],
-    quiz:     [
-      { to: 'checkout', when: { variable: 'plan', equals: 'premium' } },
-      { to: 'success' },
-    ],
-    checkout: [{ to: 'success' }],
-  },
-  variables: {
-    email: { type: 'string' },
-    plan:  { type: 'string', default: 'free' },
-  },
-  products: {
-    items: [
-      { id: 'monthly', name: 'Monthly Plan', storePriceId: 'clyyy...' },
-      { id: 'yearly',  name: 'Yearly Plan',  storePriceId: 'clzzz...' },
-    ],
-    defaultId: 'yearly',
-  },
-})
-```
-
-### 2. Write pages
-
-```tsx
-// pages/index.tsx
-import { useVariable, useNavigation } from '@appfunnel-dev/sdk'
-
-export default function Landing() {
-  const [email, setEmail] = useVariable<string>('email')
-  const { goToNextPage } = useNavigation()
-
-  return (
-    <div>
-      <h1>Start your journey</h1>
-      <input
-        type="email"
-        value={email}
-        onChange={e => setEmail(e.target.value)}
-      />
-      <button onClick={goToNextPage}>Continue</button>
-    </div>
-  )
-}
-```
-
-## Hooks
-
-| Hook | Description |
-|------|-------------|
-| `useVariable(id)` | Read/write a single variable with typed actions |
-| `useVariables()` | Read all variables (read-only) |
-| `useNavigation()` | Page navigation, progress, history |
-| `useProducts()` | Product list, selection |
-| `useTracking()` | Event tracking, user identification |
-| `usePayment()` | Payment state (card details, loading, errors) |
-| `useFunnel()` | Convenience — combines all hooks above |
-
-## Components
-
-| Component | Description |
-|-----------|-------------|
-| `<PaymentForm>` | Stripe Elements wrapper for card collection & payment |
-| `<PaddleCheckout>` | Paddle checkout (overlay or inline) |
+Full documentation, guides, and API reference available at **[appfunnel.net/docs](https://appfunnel.net/docs)**.

package/dist/elements/index.cjs

@@ -11417,8 +11417,8 @@ var Dialog2 = React27.forwardRef(function Dialog3({
   overlayColor = "rgba(0, 0, 0, 0.5)",
   backgroundColor = "#ffffff",
   borderRadius = 16,
-  maxWidth = 500,
-  padding = 24,
+  maxWidth = 600,
+  padding = 16,
   style,
   className
 }, ref) {
@@ -11505,8 +11505,7 @@ var Dialog2 = React27.forwardRef(function Dialog3({
                     display: "flex",
                     flexDirection: "row",
                     alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: "16px 16px"
+                    justifyContent: "space-between"
                   },
                   children: [
                     showClose ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -12156,11 +12155,57 @@ function MultiSelect({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => handleToggle(key), style: { cursor: "pointer" }, children: renderItem({ item, index, active }) }, key);
   }) });
 }
+var SIZE = {
+  xs: { size: 20, border: 2 },
+  sm: { size: 30, border: 3 },
+  md: { size: 40, border: 3 },
+  lg: { size: 50, border: 4 },
+  xl: { size: 60, border: 4 }
+};
+function Loading({
+  color: color2,
+  size = "md",
+  customSize,
+  borderWidth,
+  speed = 800,
+  className,
+  style
+}) {
+  const preset = SIZE[size];
+  const finalSize = customSize ?? preset.size;
+  const finalBorder = borderWidth ?? preset.border;
+  const borderColor = color2 ? `color-mix(in srgb, ${color2} 30%, transparent)` : "color-mix(in srgb, currentColor 30%, transparent)";
+  const topColor = color2 ?? "currentColor";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes appfunnel-loading-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className,
+        style: {
+          display: "inline-block",
+          width: finalSize,
+          height: finalSize,
+          border: `${finalBorder}px solid ${borderColor}`,
+          borderRadius: "50%",
+          borderTopColor: topColor,
+          animation: `appfunnel-loading-spin ${speed}ms linear infinite`,
+          ...style
+        }
+      }
+    )
+  ] });
+}
 
 exports.Carousel = Carousel;
 exports.CountUp = CountUp;
 exports.Dialog = Dialog2;
 exports.Drawer = Drawer;
+exports.Loading = Loading;
 exports.Marquee = Marquee;
 exports.MultiSelect = MultiSelect;
 exports.ProgressBar = ProgressBar;