{"_id":"@arkipay/booking-widget","_rev":"2-ede42a8e0c3b733096fd3788bdea9a6a","name":"@arkipay/booking-widget","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@arkipay/booking-widget","version":"0.1.0","license":"UNLICENSED","_id":"@arkipay/booking-widget@0.1.0","maintainers":[{"name":"jerome.vanherpe.arkipay","email":"jerome.vanherpe@arkipay.com"}],"dist":{"shasum":"230ecd4b19c40a45b5969b9ec348eb85b8565e3a","tarball":"https://registry.npmjs.org/@arkipay/booking-widget/-/booking-widget-0.1.0.tgz","fileCount":9,"integrity":"sha512-GGqJpSwRVgDJcFGP/kU91X7+Ih/G6erNt5b4Kj7HhUSxpjsfuqSRw8yKiz1EKT7EujZW6HGbZKkQ3PrkZSlmHg==","signatures":[{"sig":"MEYCIQD3IX8UrOSlGWe2/8RwS1YBIiLbuq+pfrI9hBsFRMm1VQIhALEjljLnf+faa3z885LW+hR1SzhSOOGtSdf/vP2kN3Qv","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":470600},"main":"./dist/index.cjs","type":"module","_from":"file:arkipay-booking-widget-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","$schema":"https://json.schemastore.org/package","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"dev":"node -e \"process.stdout.write('@arkipay/booking-widget\\n')\"","lint":"eslint . --max-warnings 0","test":"vitest run --config vitest.config.ts","build":"tsup","typecheck":"tsc -p tsconfig.json --pretty false"},"_npmUser":{"name":"jerome.vanherpe.arkipay","email":"jerome.vanherpe@arkipay.com"},"_resolved":"C:\\Users\\jerom\\AppData\\Local\\Temp\\a11479fbf44ce391bde7b0686632dd40\\arkipay-booking-widget-0.1.0.tgz","_integrity":"sha512-GGqJpSwRVgDJcFGP/kU91X7+Ih/G6erNt5b4Kj7HhUSxpjsfuqSRw8yKiz1EKT7EujZW6HGbZKkQ3PrkZSlmHg==","_npmVersion":"11.6.2","description":"Embeddable React booking widget for the ArkiPay / EasyAppts appointment platform. Drop-in BookingProvider + BookingWidget that inherits the host site's theme.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.0.0","dependencies":{"botid":"^1.5.11","@js-temporal/polyfill":"^0.5.1"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^19.1.0","vitest":"^3.2.2","react-dom":"^19.1.0","@ea/config":"0.0.0","typescript":"~5.8.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@ea/api-contracts":"0.0.0"},"peerDependencies":{"react":"^18.3.1 || ^19.0.0","react-dom":"^18.3.1 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/booking-widget_0.1.0_1782399050708_0.5533783573299083","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Renamed to @pinoybiz/booking-widget"}},"time":{"created":"2026-06-25T14:50:50.571Z","modified":"2026-07-29T17:34:07.590Z","0.1.0":"2026-06-25T14:50:50.913Z"},"license":"UNLICENSED","description":"Embeddable React booking widget for the ArkiPay / EasyAppts appointment platform. Drop-in BookingProvider + BookingWidget that inherits the host site's theme.","maintainers":[{"name":"jerome.vanherpe.arkipay","email":"jerome.vanherpe@arkipay.com"}],"readme":"# @arkipay/booking-widget\n\nEmbeddable React booking widget for the ArkiPay / EasyAppts appointment platform. Drop\n`<BookingProvider>` + `<BookingWidget>` into any React app and your customers can book\nappointments against your tenant — service → provider → date/time → details → confirmation,\nincluding the online-payment redirect. The widget **inherits your site's theme** automatically.\n\n## Install\n\n```bash\nnpm install @arkipay/booking-widget\n# or: pnpm add @arkipay/booking-widget\n```\n\n`react` and `react-dom` (v18.3+ or v19) are peer dependencies you already have.\n\n## Quick start\n\n```tsx\nimport { BookingProvider, BookingWidget } from \"@arkipay/booking-widget\";\nimport \"@arkipay/booking-widget/styles.css\";\n\nexport default function BookingPage() {\n  return (\n    <BookingProvider publishableKey=\"pk_live_xxx\">\n      <BookingWidget />\n    </BookingProvider>\n  );\n}\n```\n\nUse your **publishable** key (`pk_live_…` / `pk_test_…`) — never a secret key. The widget talks\nonly to the public API, so the key is safe to ship in browser code.\n\n### Next.js App Router\n\nThe package ships with a `\"use client\"` directive, so you can import it directly into a Server\nComponent — no wrapper needed.\n\n## Theming\n\nThe widget is fully tokenised. Every visual value resolves in this order (highest wins):\n\n1. an explicit `theme` prop on `<BookingProvider>`\n2. **your site's own CSS design-system token** (e.g. `--brand`, `--fg`) — inherited automatically\n3. tenant config (brand colour, configured in the platform)\n4. a built-in default\n\n### Inherit your site's theme (zero config)\n\nIf your site already defines any of these CSS variables on an ancestor element, the widget picks\nthem up with no props at all:\n\n| Host token        | Controls                         | Widget token   |\n| ----------------- | -------------------------------- | -------------- |\n| `--brand` / `--accent` | Primary / call-to-action colour | `--ea-brand`   |\n| `--fg`            | Body text                        | `--ea-text`    |\n| `--fg-muted`      | Secondary / hint text            | `--ea-muted`   |\n| `--border`        | Card & input borders             | `--ea-border`  |\n| `--bg-elevated`   | Card / input / surface background | `--ea-surface` |\n| `--danger`        | Error / validation colour        | `--ea-error`   |\n| `--radius-md`     | Corner radius                    | `--ea-radius`  |\n| `--font-sans`     | Font stack                       | `--ea-font`    |\n\n```tsx\n// Your app already sets these on :root or a wrapper — the widget just follows.\n<div style={{ \"--brand\": \"#ff6b35\", \"--font-sans\": \"Inter, sans-serif\" }}>\n  <BookingProvider publishableKey=\"pk_live_xxx\">\n    <BookingWidget />\n  </BookingProvider>\n</div>\n```\n\n### Explicit `theme` prop\n\nFor one-off overrides without a design system:\n\n```tsx\n<BookingProvider\n  publishableKey=\"pk_live_xxx\"\n  theme={{\n    brandColor: \"#0f6b8c\",\n    fontFamily: \"Geist, system-ui, sans-serif\",\n    borderRadius: \"12px\",\n    colorScheme: \"system\", // \"light\" | \"dark\" | \"system\"\n  }}\n>\n  <BookingWidget />\n</BookingProvider>\n```\n\nFull `theme` surface: `brandColor`, `onBrandColor`, `textColor`, `mutedColor`, `borderColor`,\n`surfaceColor`, `errorColor`, `borderRadius`, `fontFamily`, `maxWidth`, `colorScheme`.\n\n### Dark mode\n\nPass `theme={{ colorScheme: \"dark\" }}` (or `\"system\"` to follow `prefers-color-scheme`). If your\nhost already flips its own `--fg` / `--bg-elevated` tokens, the widget follows those instead — no\nextra config needed.\n\n### Override via plain CSS\n\nBecause every element is scoped under `.ea-booking-widget`, you can override any token from your\nown stylesheet without collisions:\n\n```css\n.ea-booking-widget {\n  --ea-radius: 4px;\n}\n.ea-booking-widget .ea-btn-primary {\n  font-weight: 600;\n}\n```\n\n## `BookingProvider` props\n\n| Prop               | Type                                   | Default                     | Notes |\n| ------------------ | -------------------------------------- | --------------------------- | ----- |\n| `publishableKey`   | `string`                               | —                           | Required. `pk_live_…` / `pk_test_…` |\n| `apiUrl`           | `string`                               | `https://api.easyappts.com` | Override for self-hosted / sandbox |\n| `theme`            | `BookingTheme`                         | `{}`                        | See Theming |\n| `locale`           | `string`                               | tenant default              | e.g. `\"en\"` |\n| `onBooked`         | `(appointment) => void`                | —                           | Fires on successful booking |\n| `initialServiceId` / `initialProviderId` | `string`             | URL `?service=`/`?provider=` | Pre-select a step |\n| `className` / `style` | `string` / `CSSProperties`           | —                           | Applied to the widget root |\n| `botProtection`    | `boolean`                              | `true`                      | See below |\n\n### Bot protection\n\nThe widget uses [Vercel BotID](https://vercel.com/docs/botid) on the booking request. Full\nprotection requires the Vercel BotID proxy on your host. If you're **not** on Vercel, set\n`botProtection={false}` — the API's server-side rate limiter remains the backstop.\n\n## Composing your own flow\n\nPrefer your own layout? Import the step components and drive them with `useBooking()`:\n\n```tsx\nimport {\n  BookingProvider, ServicePicker, ProviderPicker, DatePicker,\n  TimeSlotPicker, CustomerForm, ConfirmStep, BookedSummary, useBooking,\n} from \"@arkipay/booking-widget\";\n```\n\nA non-React / server integration can use the bundled API client directly:\n\n```ts\nimport { createBookingClient } from \"@arkipay/booking-widget\";\nconst client = createBookingClient({ publishableKey: \"pk_live_xxx\" });\nconst config = await client.getTenantConfig();\n```\n\n## License\n\nUNLICENSED — for use by ArkiPay customers integrating the booking platform.\n","readmeFilename":"README.md"}