bitsnap-react 1.6.0 → 1.7.0
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 +456 -0
- package/dist/CartProvider-FQCDE3HZ.mjs +2 -0
- package/dist/CartProvider-FQCDE3HZ.mjs.map +1 -0
- package/dist/CartProvider-PDEV6GCV.css +2 -0
- package/dist/CartProvider-PDEV6GCV.css.map +1 -0
- package/dist/appearance-core-Dt2grZdl.d.mts +19 -0
- package/dist/appearance-core-Dt2grZdl.d.ts +19 -0
- package/dist/catalog.css +2 -0
- package/dist/catalog.css.map +1 -0
- package/dist/catalog.d.mts +214 -0
- package/dist/catalog.d.ts +214 -0
- package/dist/catalog.js +2 -0
- package/dist/catalog.js.map +1 -0
- package/dist/catalog.mjs +2 -0
- package/dist/catalog.mjs.map +1 -0
- package/dist/chunk-3TENJTY4.mjs +2 -0
- package/dist/chunk-3TENJTY4.mjs.map +1 -0
- package/dist/chunk-4HOZFM6V.mjs +2 -0
- package/dist/chunk-4HOZFM6V.mjs.map +1 -0
- package/dist/chunk-6KQBDN7M.mjs +2 -0
- package/dist/chunk-6KQBDN7M.mjs.map +1 -0
- package/dist/chunk-6N24OFUB.mjs +4 -0
- package/dist/chunk-6N24OFUB.mjs.map +1 -0
- package/dist/chunk-6W4FCL22.mjs +2 -0
- package/dist/chunk-6W4FCL22.mjs.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +57 -23
- package/dist/index.d.ts +57 -23
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -3
- package/dist/index.mjs.map +1 -1
- package/dist/methods-J7S63RTQ.mjs +2 -0
- package/dist/methods-J7S63RTQ.mjs.map +1 -0
- package/dist/methods-QAZED7TJ.css +2 -0
- package/dist/methods-QAZED7TJ.css.map +1 -0
- package/dist/models.d.mts +54 -0
- package/dist/models.d.ts +54 -0
- package/dist/models.js +1 -1
- package/dist/models.js.map +1 -1
- package/dist/models.mjs +1 -1
- package/dist/models.mjs.map +1 -1
- package/dist/returns.d.mts +602 -52
- package/dist/returns.d.ts +602 -52
- package/dist/returns.js +1 -1
- package/dist/returns.js.map +1 -1
- package/dist/returns.mjs +1 -1
- package/package.json +21 -26
- package/dist/chunk-O4ICBP4G.mjs +0 -2
- package/dist/chunk-O4ICBP4G.mjs.map +0 -1
package/README.md
CHANGED
|
@@ -210,6 +210,461 @@ conflicting Tailwind utilities from the library are resolved in your favor.
|
|
|
210
210
|
focus ring and stacking) as soon as you pass an `appearance`; without one it
|
|
211
211
|
renders exactly as before.
|
|
212
212
|
|
|
213
|
+
## Returns
|
|
214
|
+
|
|
215
|
+
`BitsnapReturns` is the customer return flow: email, verification code, orders,
|
|
216
|
+
line and quantity selection, confirmation, result, plus a list of earlier returns
|
|
217
|
+
with their status. The views are themeable from the start, with the same
|
|
218
|
+
`appearance` shape as the checkout. It needs the same stylesheet
|
|
219
|
+
(`bitsnap-react/dist/index.css`).
|
|
220
|
+
|
|
221
|
+
```tsx
|
|
222
|
+
import { BitsnapReturns } from "bitsnap-react";
|
|
223
|
+
import "bitsnap-react/dist/index.css";
|
|
224
|
+
|
|
225
|
+
function ReturnsPage() {
|
|
226
|
+
return <BitsnapReturns projectID="your-project-id" />;
|
|
227
|
+
}
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
It is an inline page section, not an overlay, and it is safe to render on the
|
|
231
|
+
server.
|
|
232
|
+
|
|
233
|
+
**Upgrading from 1.6.0.** 1.6.0 code keeps working without changes, imported
|
|
234
|
+
from `bitsnap-react` or `bitsnap-react/returns`. Both paths now export this
|
|
235
|
+
implementation.
|
|
236
|
+
- **`BitsnapReturns` props:** it still accepts the `Environment` enum, `theme.brandColor` (prefer `appearance.tokens`) and the old text keys (`title`, `email`, `sendCode`, `code`, `verify`, `orders`, `submit`, `note`, `loading`, `history`).
|
|
237
|
+
- **Provider:** `BitsnapReturnsProvider` is an alias of `ReturnsProvider`.
|
|
238
|
+
- **Hooks:** they accept both the 1.6.0 calls (`useReturnOrders(pageSize, pageToken)`, `useMyReturns(pageSize, pageToken)`) and the new object form. Their results include the 1.6.0 fields (`data`, `mutateAsync`, `startSession`, `verifySession`, `starting`, `verifying`) next to the new ones.
|
|
239
|
+
- **Visual change:** the widget now uses the new themed views.
|
|
240
|
+
- **Wording:** without `texts`, the wording follows the library locale (`setLocale`). 1.6.0 was always English.
|
|
241
|
+
|
|
242
|
+
| Prop | Meaning |
|
|
243
|
+
| ------------------- | -------------------------------------------------------------------------- |
|
|
244
|
+
| `projectID` | Bitsnap project ID |
|
|
245
|
+
| `host` | API host. Falls back to `setCustomHost`, then `https://bitsnap.pl` |
|
|
246
|
+
| `environment` | `"production"` (default) or `"test"` |
|
|
247
|
+
| `appearance` | `{ theme, tokens, elements }`, see below |
|
|
248
|
+
| `texts` | Partial text overrides, see [Texts](#texts) |
|
|
249
|
+
| `locale` | Locale of texts, dates and money. Defaults to `getLocale()` |
|
|
250
|
+
| `panelAccessToken` | Customer panel token; skips email and code, see [Panel](#returns-in-the-customer-panel) |
|
|
251
|
+
| `className` | Class of the themed root element |
|
|
252
|
+
|
|
253
|
+
The session token lives in React state and `sessionStorage` (one key per project),
|
|
254
|
+
never in `localStorage`, and is never logged. An expired session returns the flow
|
|
255
|
+
to the email step.
|
|
256
|
+
|
|
257
|
+
### Shared brand
|
|
258
|
+
|
|
259
|
+
One object can style the checkout and the returns views:
|
|
260
|
+
|
|
261
|
+
```tsx
|
|
262
|
+
import { BitsnapCheckout, BitsnapReturns } from "bitsnap-react";
|
|
263
|
+
|
|
264
|
+
const brand = {
|
|
265
|
+
theme: "light",
|
|
266
|
+
tokens: {
|
|
267
|
+
fontFamily: '"Inter", sans-serif',
|
|
268
|
+
buttonBackground: "#635bff",
|
|
269
|
+
buttonForeground: "#ffffff",
|
|
270
|
+
radius: "12px",
|
|
271
|
+
},
|
|
272
|
+
} as const;
|
|
273
|
+
|
|
274
|
+
<BitsnapCheckout projectID="your-project-id" appearance={brand} />
|
|
275
|
+
<BitsnapReturns
|
|
276
|
+
projectID="your-project-id"
|
|
277
|
+
appearance={{
|
|
278
|
+
...brand,
|
|
279
|
+
elements: {
|
|
280
|
+
title: { style: { fontFamily: '"Georgia", serif' } },
|
|
281
|
+
submitButton: { className: "store-primary-button" },
|
|
282
|
+
},
|
|
283
|
+
}}
|
|
284
|
+
/>
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
`theme` is `"light"` or `"dark"`. The default for returns is `"light"`; the
|
|
288
|
+
checkout keeps its `"dark"` default. `elements` take `{ className, style }`,
|
|
289
|
+
merged after the built-in classes and styles, exactly like the checkout slots.
|
|
290
|
+
|
|
291
|
+
### Return tokens
|
|
292
|
+
|
|
293
|
+
The returns views use the checkout tokens, plus five more. `overlay` is
|
|
294
|
+
checkout-only and ignored by returns.
|
|
295
|
+
|
|
296
|
+
| Token | Applies to | Returns only |
|
|
297
|
+
| ------------------------- | ---------------------------------------------------------- | ------------ |
|
|
298
|
+
| `fontFamily`, `fontSize` | All returns views | |
|
|
299
|
+
| `background` | Page background | |
|
|
300
|
+
| `surface` | Cards, summaries, loading skeletons | |
|
|
301
|
+
| `foreground` | Titles, names, amounts | |
|
|
302
|
+
| `mutedForeground` | Descriptions, dates, hints | |
|
|
303
|
+
| `border` | Cards, inputs, separators | |
|
|
304
|
+
| `buttonBackground` | Primary buttons | |
|
|
305
|
+
| `buttonForeground` | Primary buttons | |
|
|
306
|
+
| `buttonHoverBackground` | Primary buttons on hover | |
|
|
307
|
+
| `hoverSurface` | Secondary buttons, selectable cards | |
|
|
308
|
+
| `focusRing` | Focus rings | |
|
|
309
|
+
| `error` | Error messages | |
|
|
310
|
+
| `radius` | Rounded elements | |
|
|
311
|
+
| `success` | Result screen, completed and refunded statuses | yes |
|
|
312
|
+
| `warning` | Statuses that need attention | yes |
|
|
313
|
+
| `badgeBackground` | Status badges | yes |
|
|
314
|
+
| `badgeForeground` | Status badges | yes |
|
|
315
|
+
| `inputBackground` | Text inputs and the note field | yes |
|
|
316
|
+
|
|
317
|
+
### Return slots
|
|
318
|
+
|
|
319
|
+
Slots are exported as `RETURNS_SLOT_NAMES` and rendered as
|
|
320
|
+
`data-bitsnap-returns-slot` attributes.
|
|
321
|
+
|
|
322
|
+
| Group | Slots |
|
|
323
|
+
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
324
|
+
| Frame | `root`, `header`, `title`, `description`, `backButton`, `stepIndicator`, `error`, `emptyState`, `skeleton` |
|
|
325
|
+
| Auth | `emailForm`, `emailInput`, `codeForm`, `codeInput`, `resendButton`, `logoutButton` |
|
|
326
|
+
| Orders | `orderList`, `orderCard`, `orderReference`, `orderDate`, `orderTotal`, `pagination` |
|
|
327
|
+
| Selection | `lineList`, `line`, `lineName`, `linePrice`, `lineQuantityControl`, `quantityButton`, `quantityInput`, `lineIneligibleReason`, `noteInput` |
|
|
328
|
+
| Confirmation and result | `summary`, `submitButton`, `secondaryButton`, `successState`, `returnReference`, `returnInstructions` |
|
|
329
|
+
| My returns | `returnList`, `returnCard`, `statusBadge`, `history`, `historyEntry` |
|
|
330
|
+
|
|
331
|
+
### Texts
|
|
332
|
+
|
|
333
|
+
Both `BitsnapCheckout` and `BitsnapReturns` accept a `texts` prop: a partial
|
|
334
|
+
object that overrides the default strings whatever the locale. Without it the
|
|
335
|
+
strings are unchanged, and `setLocale`/`getLocale` keep working. For different
|
|
336
|
+
copy per language, pass a different object.
|
|
337
|
+
|
|
338
|
+
```tsx
|
|
339
|
+
<BitsnapCheckout
|
|
340
|
+
projectID="your-project-id"
|
|
341
|
+
texts={{ cart: "Your basket", nextStep: "Pay now" }}
|
|
342
|
+
/>
|
|
343
|
+
|
|
344
|
+
<BitsnapReturns
|
|
345
|
+
projectID="your-project-id"
|
|
346
|
+
locale="en"
|
|
347
|
+
texts={{
|
|
348
|
+
emailStepTitle: "Return a product",
|
|
349
|
+
successDescription: "We'll email you once it arrives.",
|
|
350
|
+
statusAwaitingReceipt: "On its way to us",
|
|
351
|
+
}}
|
|
352
|
+
/>
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
Checkout keys (`CheckoutTexts`): `cart`, `emptyCart`, `total`, `delivery`,
|
|
356
|
+
`chooseCountry`, `nextStep`, `unavailableProducts`.
|
|
357
|
+
|
|
358
|
+
Returns keys (`ReturnsTexts`) cover each step (`emailStepTitle`,
|
|
359
|
+
`codeStepDescription`, `ordersEmpty`, `confirmationSubmit`, `successTitle`,
|
|
360
|
+
`myReturnsTitle`, ...), the request statuses (`statusSubmitted`,
|
|
361
|
+
`statusApproved`, `statusAwaitingReceipt`, `statusReceived`, `statusRefunded`,
|
|
362
|
+
`statusFallback`, ...) and the error messages (`errorGeneric`,
|
|
363
|
+
`errorInvalidCode`, `errorSessionExpired`, ...). Strings with placeholders such
|
|
364
|
+
as `{reference}` or `{count}` keep them in overrides. See `ReturnsTexts` and
|
|
365
|
+
`CheckoutTexts` in the type declarations for the full list and the placeholders.
|
|
366
|
+
|
|
367
|
+
### Custom layout
|
|
368
|
+
|
|
369
|
+
Compose your own page from the step components under `ReturnsProvider`. The
|
|
370
|
+
provider holds the session, appearance, texts and the transport, and renders the
|
|
371
|
+
themed root. Each step takes small navigation callbacks and the IDs it needs, and
|
|
372
|
+
throws a clear error when rendered outside the provider.
|
|
373
|
+
|
|
374
|
+
```tsx
|
|
375
|
+
import {
|
|
376
|
+
ReturnsConfirmation,
|
|
377
|
+
ReturnsEmailStep,
|
|
378
|
+
ReturnsCodeStep,
|
|
379
|
+
ReturnsOrderDetail,
|
|
380
|
+
ReturnsOrderList,
|
|
381
|
+
ReturnsProvider,
|
|
382
|
+
ReturnsResult,
|
|
383
|
+
useReturnSession,
|
|
384
|
+
type SelectedReturnLine,
|
|
385
|
+
} from "bitsnap-react";
|
|
386
|
+
|
|
387
|
+
function Flow() {
|
|
388
|
+
const { isAuthenticated } = useReturnSession();
|
|
389
|
+
const [step, setStep] = useState<"email" | "code" | "orders" | "order" | "confirm" | "done">("email");
|
|
390
|
+
const [orderId, setOrderId] = useState("");
|
|
391
|
+
const [items, setItems] = useState<SelectedReturnLine[]>([]);
|
|
392
|
+
const [note, setNote] = useState("");
|
|
393
|
+
const [returnId, setReturnId] = useState("");
|
|
394
|
+
|
|
395
|
+
if (!isAuthenticated) {
|
|
396
|
+
return step === "code" ? (
|
|
397
|
+
<ReturnsCodeStep onBack={() => setStep("email")} />
|
|
398
|
+
) : (
|
|
399
|
+
<ReturnsEmailStep onSubmitted={() => setStep("code")} />
|
|
400
|
+
);
|
|
401
|
+
}
|
|
402
|
+
if (step === "order") {
|
|
403
|
+
return (
|
|
404
|
+
<ReturnsOrderDetail
|
|
405
|
+
orderId={orderId}
|
|
406
|
+
initialItems={items}
|
|
407
|
+
initialNote={note}
|
|
408
|
+
onBack={() => setStep("orders")}
|
|
409
|
+
onContinue={(selection) => {
|
|
410
|
+
setItems(selection.items);
|
|
411
|
+
setNote(selection.note);
|
|
412
|
+
setStep("confirm");
|
|
413
|
+
}}
|
|
414
|
+
/>
|
|
415
|
+
);
|
|
416
|
+
}
|
|
417
|
+
if (step === "confirm") {
|
|
418
|
+
return (
|
|
419
|
+
<ReturnsConfirmation
|
|
420
|
+
orderId={orderId}
|
|
421
|
+
items={items}
|
|
422
|
+
note={note}
|
|
423
|
+
onBack={() => setStep("order")}
|
|
424
|
+
onSubmitted={(id) => {
|
|
425
|
+
setReturnId(id);
|
|
426
|
+
setStep("done");
|
|
427
|
+
}}
|
|
428
|
+
/>
|
|
429
|
+
);
|
|
430
|
+
}
|
|
431
|
+
if (step === "done") {
|
|
432
|
+
return <ReturnsResult returnId={returnId} onContinue={() => setStep("orders")} />;
|
|
433
|
+
}
|
|
434
|
+
return (
|
|
435
|
+
<ReturnsOrderList
|
|
436
|
+
onSelectOrder={(id) => {
|
|
437
|
+
setOrderId(id);
|
|
438
|
+
setStep("order");
|
|
439
|
+
}}
|
|
440
|
+
/>
|
|
441
|
+
);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
<ReturnsProvider projectID="your-project-id" appearance={brand}>
|
|
445
|
+
<Flow />
|
|
446
|
+
</ReturnsProvider>;
|
|
447
|
+
```
|
|
448
|
+
|
|
449
|
+
Available steps: `ReturnsEmailStep`, `ReturnsCodeStep`, `ReturnsOrderList`
|
|
450
|
+
(`onSelectOrder`, `onOpenMyReturns`, `showLogout`), `ReturnsOrderDetail`,
|
|
451
|
+
`ReturnsConfirmation`, `ReturnsResult`, `ReturnsMyReturnsList` and
|
|
452
|
+
`ReturnsMyReturnDetail`. Each accepts its own `className`. A session left in
|
|
453
|
+
`sessionStorage` is picked up on the next visit, so `useReturnSession().status`
|
|
454
|
+
is `"hydrating"` until the provider has read it on the client.
|
|
455
|
+
|
|
456
|
+
### Headless hooks
|
|
457
|
+
|
|
458
|
+
To build the markup yourself, use the hooks under `ReturnsProvider`: they return
|
|
459
|
+
data, loading and error state, and actions, and no markup.
|
|
460
|
+
|
|
461
|
+
| Hook | Returns |
|
|
462
|
+
| ---------------------------- | ----------------------------------------------------------------------- |
|
|
463
|
+
| `useReturnSession()` | `status`, `isAuthenticated`, `start(email)`, `verify(code)`, `resend()`, `logout()`, `error` |
|
|
464
|
+
| `useReturnOrders(options?)` | Paged returnable `orders`, `total`, `next()`, `previous()`, `refetch()` |
|
|
465
|
+
| `useReturnableOrder(id)` | `order` with per-line eligibility, `returnHistory` |
|
|
466
|
+
| `useCreateReturn()` | `submit({ orderId, items, note })`; retries reuse one idempotency key |
|
|
467
|
+
| `useMyReturns(options?)` | Paged earlier returns |
|
|
468
|
+
| `useMyReturn(id)` | One return with its status and history |
|
|
469
|
+
|
|
470
|
+
```tsx
|
|
471
|
+
function Orders() {
|
|
472
|
+
const { orders, isLoading, errorKey } = useReturnOrders();
|
|
473
|
+
if (isLoading) return null;
|
|
474
|
+
return <ul>{orders.map((order) => <li key={order.canonicalOrderId}>{order.displayReference}</li>)}</ul>;
|
|
475
|
+
}
|
|
476
|
+
```
|
|
477
|
+
|
|
478
|
+
A request that fails with `SESSION_EXPIRED` drops the session, so
|
|
479
|
+
`useReturnSession().status` becomes `"anonymous"`.
|
|
480
|
+
|
|
481
|
+
### CSS only
|
|
482
|
+
|
|
483
|
+
Everything is also addressable without props. The root carries
|
|
484
|
+
`data-bitsnap-returns` and the theme class (`light` or `dark`), and every slot
|
|
485
|
+
carries `data-bitsnap-returns-slot`. The library rules sit in `@layer components`,
|
|
486
|
+
so ordinary stylesheets win:
|
|
487
|
+
|
|
488
|
+
```css
|
|
489
|
+
/* the theme is applied as inline custom properties, so overrides need !important */
|
|
490
|
+
[data-bitsnap-returns] {
|
|
491
|
+
--bitsnap-returns-button-background: #635bff !important;
|
|
492
|
+
--bitsnap-returns-radius: 12px !important;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
[data-bitsnap-returns-slot="orderCard"]:hover {
|
|
496
|
+
border-color: #635bff;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
[data-bitsnap-returns-slot="line"][data-ineligible] {
|
|
500
|
+
opacity: 0.5;
|
|
501
|
+
}
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
Token variables are named `--bitsnap-returns-<token in kebab case>`, for example
|
|
505
|
+
`--bitsnap-returns-muted-foreground`.
|
|
506
|
+
|
|
507
|
+
### Returns in the customer panel
|
|
508
|
+
|
|
509
|
+
The `Panel` has a Returns screen (`/panel?state=returns`, with `orderId` and
|
|
510
|
+
`returnId` in the URL for the selected order and return). It is built from the
|
|
511
|
+
step components above and reuses the panel login: the panel access token is
|
|
512
|
+
exchanged for a returns session, so the customer sees their orders with no
|
|
513
|
+
second code, and there is no email, code or logout step. When the panel session
|
|
514
|
+
has expired, the customer is sent to the panel login.
|
|
515
|
+
|
|
516
|
+
```tsx
|
|
517
|
+
<Panel
|
|
518
|
+
returnsAppearance={{ theme: "light", tokens: { buttonBackground: "#635bff" } }}
|
|
519
|
+
returnsTexts={{ ordersTitle: "Choose an order to return" }}
|
|
520
|
+
/>
|
|
521
|
+
```
|
|
522
|
+
|
|
523
|
+
| Prop | Meaning |
|
|
524
|
+
| ------------------- | ------------------------------------------------------------------------------- |
|
|
525
|
+
| `returnsAppearance` | `ReturnsAppearance` of the screen |
|
|
526
|
+
| `returnsTexts` | `Partial<ReturnsTexts>` of the screen |
|
|
527
|
+
|
|
528
|
+
Without `returnsAppearance`, `buttonBackground` and `focusRing` come from the
|
|
529
|
+
panel's `theme.colors.brand` (set with `setTheme`) and `buttonForeground` is
|
|
530
|
+
chosen for contrast. Other panel screens and `setTheme` are unchanged. The
|
|
531
|
+
navigation label follows `setLocale` ("Zwroty" / "Returns").
|
|
532
|
+
|
|
533
|
+
## Product list
|
|
534
|
+
|
|
535
|
+
`ProductList` renders a shop's product catalog: a responsive grid of cards with
|
|
536
|
+
image, name, price, "add to cart" and pagination. It is the same component the
|
|
537
|
+
Bitsnap custom-domain shop home page uses, and it can be embedded on any site.
|
|
538
|
+
It needs the same stylesheet (`bitsnap-react/dist/index.css`) and is safe to
|
|
539
|
+
render on the server.
|
|
540
|
+
|
|
541
|
+
```tsx
|
|
542
|
+
import { ProductList } from "bitsnap-react";
|
|
543
|
+
import "bitsnap-react/dist/index.css";
|
|
544
|
+
|
|
545
|
+
function ShopPage() {
|
|
546
|
+
return (
|
|
547
|
+
<ProductList
|
|
548
|
+
projectID="your-project-id"
|
|
549
|
+
locale="pl-PL"
|
|
550
|
+
pageSize={24}
|
|
551
|
+
productHref={(product) => `https://shop.example.com/p/${product.uniqueSlug}`}
|
|
552
|
+
/>
|
|
553
|
+
);
|
|
554
|
+
}
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
Import it from `bitsnap-react/catalog` when you do not use the checkout on that
|
|
558
|
+
page: the entry exposes only the list and its hook, and the cart (the heavy
|
|
559
|
+
part of the package) is loaded on the first "Add to cart" click, or never when
|
|
560
|
+
you pass `onAddToCart`. The CommonJS build of the entry re-exports
|
|
561
|
+
`bitsnap-react`, so it shares state with it but is not lean; use ESM for the
|
|
562
|
+
smaller entry.
|
|
563
|
+
|
|
564
|
+
```tsx
|
|
565
|
+
import { ProductList, useProducts } from "bitsnap-react/catalog";
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
### Props
|
|
569
|
+
|
|
570
|
+
| Prop | Meaning |
|
|
571
|
+
| --------------- | ---------------------------------------------------------------------------------------------------- |
|
|
572
|
+
| `projectID` | Project (shop) ID. Required. |
|
|
573
|
+
| `host` | Backend origin. Defaults to `https://bitsnap.pl` (or what `setCustomHost` set at first render). `""` = same origin. |
|
|
574
|
+
| `locale` | Language of the texts, price format and product translations. Defaults to `pl-PL`. |
|
|
575
|
+
| `pageSize` | Products per page, 1 to 48. Defaults to 24. |
|
|
576
|
+
| `search` | Text filter. A change goes back to page 1. |
|
|
577
|
+
| `initialData` | First page (`{ items, totalCount }`) fetched on the server. Always used for the first request (so it must be page 1 for the same props). |
|
|
578
|
+
| `productHref` | `(product) => string`. Defaults to the relative `/p/{uniqueSlug}`, which works on a custom domain. |
|
|
579
|
+
| `appearance` | `{ theme, tokens, elements }`, like the checkout. Light theme by default. |
|
|
580
|
+
| `texts` | `Partial<ProductListTexts>`. Polish and English defaults, picked by `locale`. |
|
|
581
|
+
| `renderItem` | `(product, context) => ReactNode` replaces the content of a card (`context` has `href`, `price`). |
|
|
582
|
+
| `onAddToCart` | `(product) => void \| Promise<void>`. Replaces the default add to cart. |
|
|
583
|
+
| `showCartOnAdd` | Open the cart drawer after the default add to cart. Defaults to `true`. |
|
|
584
|
+
| `className` | Class of the root element. |
|
|
585
|
+
|
|
586
|
+
Prices are in minor units (grosze, cents), as everywhere else in the library.
|
|
587
|
+
Cards show "od {price}" when the variants differ in price, a struck-through
|
|
588
|
+
regular price for discounts and an "unavailable" state for products out of
|
|
589
|
+
stock.
|
|
590
|
+
|
|
591
|
+
### Add to cart
|
|
592
|
+
|
|
593
|
+
Products the backend marks `addToCart` (a single price, not a subscription) get
|
|
594
|
+
an "Add to cart" button. By default it calls `Bitsnap.addProductToCart` with
|
|
595
|
+
quantity 1 and then opens the cart (`BitsnapCheckout` must be mounted on the
|
|
596
|
+
page, see [Checkout appearance](#checkout-appearance)). The list aligns the
|
|
597
|
+
cart's project ID and host from the list's `projectID`/`host` props, but only
|
|
598
|
+
when the page has not set them yet (`setProjectID`, `setCustomHost`, or the
|
|
599
|
+
cart script tag). When the page cart already belongs to another project or
|
|
600
|
+
host, the list does not take it over: it logs a warning and shows the error
|
|
601
|
+
message, so pass `onAddToCart` there. The cart item is `cartItemId ?? id`, the
|
|
602
|
+
variant ID for single-variant products.
|
|
603
|
+
Products with variants or a subscription link to the product page ("Wybierz" /
|
|
604
|
+
"Zobacz"). Pass `onAddToCart` to do something else, for example to use your own
|
|
605
|
+
cart.
|
|
606
|
+
|
|
607
|
+
### Server rendering
|
|
608
|
+
|
|
609
|
+
```tsx
|
|
610
|
+
const firstPage = await fetch(
|
|
611
|
+
"https://bitsnap.pl/api/integrations/your-project-id/public-commerce/product-list?limit=24&offset=0",
|
|
612
|
+
).then((response) => response.json());
|
|
613
|
+
|
|
614
|
+
<ProductList projectID="your-project-id" pageSize={24} initialData={firstPage} />;
|
|
615
|
+
```
|
|
616
|
+
|
|
617
|
+
Without `initialData` the server renders a loading skeleton and the browser
|
|
618
|
+
fetches the first page. The component never reads `window` while rendering.
|
|
619
|
+
|
|
620
|
+
### Appearance and texts
|
|
621
|
+
|
|
622
|
+
```tsx
|
|
623
|
+
<ProductList
|
|
624
|
+
projectID="your-project-id"
|
|
625
|
+
appearance={{
|
|
626
|
+
theme: "dark",
|
|
627
|
+
tokens: { buttonBackground: "#635bff", radius: "12px", fontFamily: "Inter" },
|
|
628
|
+
elements: { card: { className: "my-card" }, name: { style: { fontSize: 18 } } },
|
|
629
|
+
}}
|
|
630
|
+
texts={{ addToCart: "Do koszyka" }}
|
|
631
|
+
/>
|
|
632
|
+
```
|
|
633
|
+
|
|
634
|
+
Tokens: `fontFamily`, `fontSize`, `background`, `surface`, `foreground`,
|
|
635
|
+
`mutedForeground`, `border`, `buttonBackground`, `buttonForeground`,
|
|
636
|
+
`buttonHoverBackground`, `hoverSurface`, `focusRing`, `error`, `badgeBackground`,
|
|
637
|
+
`badgeForeground`, `radius`. Slots (`PRODUCT_LIST_SLOT_NAMES`, also exposed as
|
|
638
|
+
`data-bitsnap-products-slot`): `root`, `grid`, `card`, `cardLink`, `image`,
|
|
639
|
+
`imagePlaceholder`, `body`, `name`, `description`, `price`, `comparePrice`,
|
|
640
|
+
`badge`, `actions`, `addToCartButton`, `selectButton`, `message`, `pagination`,
|
|
641
|
+
`paginationButton`, `pageIndicator`, `emptyState`, `error`, `retryButton`,
|
|
642
|
+
`skeleton`. All rules are scoped to `[data-bitsnap-products]`.
|
|
643
|
+
|
|
644
|
+
### `useProducts`
|
|
645
|
+
|
|
646
|
+
Build your own layout on the same data:
|
|
647
|
+
|
|
648
|
+
```tsx
|
|
649
|
+
const { products, totalCount, page, pageCount, setPage, isLoading, error, refetch } =
|
|
650
|
+
useProducts({ projectID: "your-project-id", pageSize: 12, search });
|
|
651
|
+
```
|
|
652
|
+
|
|
653
|
+
It uses a plain `fetch` without credentials, does not read the global project ID
|
|
654
|
+
or host, aborts the request when the inputs change, does nothing during server
|
|
655
|
+
rendering and uses `initialData` for the first request instead of fetching
|
|
656
|
+
(so it must be page 1 for the same options). If the catalog shrinks below the
|
|
657
|
+
current page, `page` falls back to the last page. `page` starts at 1; `products` keeps the previous page while the next one
|
|
658
|
+
loads.
|
|
659
|
+
|
|
660
|
+
### Embedding on your own site (CORS)
|
|
661
|
+
|
|
662
|
+
The list calls `GET {host}/api/integrations/{projectID}/public-commerce/product-list`
|
|
663
|
+
from the browser. The domain of the embedding site must be known to the project:
|
|
664
|
+
add it to the project's site, success or cancel URLs, or to the allowed domains
|
|
665
|
+
in the Bitsnap dashboard. Otherwise the browser blocks the response. On a Bitsnap
|
|
666
|
+
custom domain nothing has to be configured.
|
|
667
|
+
|
|
213
668
|
# Examples
|
|
214
669
|
|
|
215
670
|
1. `BitsnapCheckout` Component:
|
|
@@ -603,6 +1058,7 @@ The panel provides the following screens:
|
|
|
603
1058
|
| Profile | `/panel?state=profile` | User profile and settings |
|
|
604
1059
|
| Notifications | `/panel?state=notifications` | Notification preferences |
|
|
605
1060
|
| Plans | `/panel?state=plans` | Subscription management |
|
|
1061
|
+
| Returns | `/panel?state=returns` | Return products, track returns |
|
|
606
1062
|
|
|
607
1063
|
## Features Detail
|
|
608
1064
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{L as c,M as d,N as e,O as f,P as g,Q as h,R as i}from"./chunk-6N24OFUB.mjs";import"./chunk-4HOZFM6V.mjs";import{k as a,l as b}from"./chunk-3TENJTY4.mjs";import"./chunk-U6FLIRIV.mjs";export{c as MARKETING_AGREEMENT_ID,d as bitsnapProjectID,h as default,i as getCheckoutMethods,b as getLocale,f as getProjectID,a as setLocale,e as setProjectID,g as useCartProvider};
|
|
2
|
+
//# sourceMappingURL=CartProvider-FQCDE3HZ.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.bitsnap-react #audio-player-container{--seek-before-width: 0%;--buffered-width: 0%}.bitsnap-react input[type=range]{position:relative;-webkit-appearance:none;width:100%;margin:0;padding:0;height:19px;float:left;outline:none;background:transparent}.bitsnap-react input[type=range]::-webkit-slider-runnable-track{width:100%;height:3px;cursor:pointer;background:#d9d9d9}.bitsnap-react input[type=range]:before{position:absolute;content:"";top:8px;left:0;width:var(--seek-before-width);height:3px;background-color:#8c8c8c;cursor:pointer}.bitsnap-react input[type=range]::-webkit-slider-thumb{position:relative;-webkit-appearance:none;box-sizing:content-box;border:1px solid #d9d9d9;height:15px;width:15px;border-radius:50%;background-color:#8c8c8c;cursor:pointer;margin:-7px 0 0}.bitsnap-react input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background:#e2e8f0}.bitsnap-react input[type=range]::-moz-range-track{width:100%;height:3px;cursor:pointer;background:linear-gradient(to right,rgba(0,125,181,.6) var(--buffered-width),rgba(0,125,181,.2) var(--buffered-width))}.bitsnap-react input[type=range]::-moz-range-progress{background-color:#007db5}.bitsnap-react input[type=range]::-moz-focus-outer{border:0}.bitsnap-react input[type=range]::-moz-range-thumb{box-sizing:content-box;border:1px solid #007db5;height:15px;width:15px;border-radius:50%;background-color:#fff;cursor:pointer}.bitsnap-react input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background:#007db5}.bitsnap-react input[type=range]::-ms-track{width:100%;height:3px;cursor:pointer;background:transparent;border:solid transparent;color:transparent}.bitsnap-react input[type=range]::-ms-fill-lower{background-color:#007db5}.bitsnap-react input[type=range]::-ms-fill-upper{background:linear-gradient(to right,rgba(0,125,181,.6) var(--buffered-width),rgba(0,125,181,.2) var(--buffered-width))}.bitsnap-react input[type=range]::-ms-thumb{box-sizing:content-box;border:1px solid #007db5;height:15px;width:15px;border-radius:50%;background-color:#fff;cursor:pointer}.bitsnap-react input[type=range]:active::-ms-thumb{transform:scale(1.2);background:#007db5}.bitsnap-react .SliderRoot{position:relative;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;width:200px;height:20px}.bitsnap-react .SliderTrack{background-color:var(--black-a10);position:relative;flex-grow:1;border-radius:9999px;height:3px}.bitsnap-react .SliderRange{position:absolute;background-color:#fff;border-radius:9999px;height:100%}.bitsnap-react .SliderThumb{display:block;width:20px;height:20px;background-color:#fff;box-shadow:0 2px 10px var(--black-a7);border-radius:10px}.bitsnap-react .SliderThumb:hover{background-color:var(--violet-3)}.bitsnap-react .SliderThumb:focus{outline:none;box-shadow:0 0 0 5px var(--black-a8)}
|
|
2
|
+
/*# sourceMappingURL=CartProvider-PDEV6GCV.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/panel/audio-player/audio-player.css"],"sourcesContent":[".bitsnap-react #audio-player-container {\n --seek-before-width: 0%;\n --buffered-width: 0%;\n}\n\n.bitsnap-react input[type=\"range\"] {\n position: relative;\n -webkit-appearance: none;\n width: 100%;\n margin: 0;\n padding: 0;\n height: 19px;\n float: left;\n outline: none;\n background: transparent;\n}\n.bitsnap-react input[type=\"range\"]::-webkit-slider-runnable-track {\n width: 100%;\n height: 3px;\n cursor: pointer;\n /*background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));*/\n background: #d9d9d9;\n}\n.bitsnap-react input[type=\"range\"]::before {\n position: absolute;\n content: \"\";\n top: 8px;\n left: 0;\n width: var(--seek-before-width);\n height: 3px;\n background-color: #8c8c8c;\n cursor: pointer;\n}\n.bitsnap-react input[type=\"range\"]::-webkit-slider-thumb {\n position: relative;\n -webkit-appearance: none;\n box-sizing: content-box;\n border: 1px solid #d9d9d9;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: #8c8c8c;\n cursor: pointer;\n margin: -7px 0 0 0;\n}\n.bitsnap-react input[type=\"range\"]:active::-webkit-slider-thumb {\n transform: scale(1.2);\n background: #e2e8f0;\n}\n.bitsnap-react input[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: 3px;\n cursor: pointer;\n background: linear-gradient(\n to right,\n rgba(0, 125, 181, 0.6) var(--buffered-width),\n rgba(0, 125, 181, 0.2) var(--buffered-width)\n );\n}\n.bitsnap-react input[type=\"range\"]::-moz-range-progress {\n background-color: #007db5;\n}\n.bitsnap-react input[type=\"range\"]::-moz-focus-outer {\n border: 0;\n}\n.bitsnap-react input[type=\"range\"]::-moz-range-thumb {\n box-sizing: content-box;\n border: 1px solid #007db5;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: #fff;\n cursor: pointer;\n}\n.bitsnap-react input[type=\"range\"]:active::-moz-range-thumb {\n transform: scale(1.2);\n background: #007db5;\n}\n.bitsnap-react input[type=\"range\"]::-ms-track {\n width: 100%;\n height: 3px;\n cursor: pointer;\n background: transparent;\n border: solid transparent;\n color: transparent;\n}\n.bitsnap-react input[type=\"range\"]::-ms-fill-lower {\n background-color: #007db5;\n}\n.bitsnap-react input[type=\"range\"]::-ms-fill-upper {\n background: linear-gradient(\n to right,\n rgba(0, 125, 181, 0.6) var(--buffered-width),\n rgba(0, 125, 181, 0.2) var(--buffered-width)\n );\n}\n.bitsnap-react input[type=\"range\"]::-ms-thumb {\n box-sizing: content-box;\n border: 1px solid #007db5;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: #fff;\n cursor: pointer;\n}\n.bitsnap-react input[type=\"range\"]:active::-ms-thumb {\n transform: scale(1.2);\n background: #007db5;\n}\n\n.bitsnap-react .SliderRoot {\n position: relative;\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n touch-action: none;\n width: 200px;\n height: 20px;\n}\n\n.bitsnap-react .SliderTrack {\n background-color: var(--black-a10);\n position: relative;\n flex-grow: 1;\n border-radius: 9999px;\n height: 3px;\n}\n\n.bitsnap-react .SliderRange {\n position: absolute;\n background-color: white;\n border-radius: 9999px;\n height: 100%;\n}\n\n.bitsnap-react .SliderThumb {\n display: block;\n width: 20px;\n height: 20px;\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n border-radius: 10px;\n}\n.bitsnap-react .SliderThumb:hover {\n background-color: var(--violet-3);\n}\n.bitsnap-react .SliderThumb:focus {\n outline: none;\n box-shadow: 0 0 0 5px var(--black-a8);\n}\n"],"mappings":"AAAA,CAAC,cAAc,CAAC,uBACd,qBAAqB,GACrB,kBAAkB,EACpB,CAEA,CALC,cAKc,KAAK,CAAC,YACnB,SAAU,SACV,mBAAoB,KACpB,MAAO,KART,OASU,EATV,QAUW,EACT,OAAQ,KACR,MAAO,KACP,QAAS,KACT,WAAY,WACd,CACA,CAhBC,cAgBc,KAAK,CAAC,WAAa,gCAChC,MAAO,KACP,OAAQ,IACR,OAAQ,QAER,WAAY,OACd,CACA,CAvBC,cAuBc,KAAK,CAAC,WAAa,QAChC,SAAU,SACV,QAAS,GACT,IAAK,IACL,KAAM,EACN,MAAO,IAAI,qBACX,OAAQ,IACR,iBAAkB,QAClB,OAAQ,OACV,CACA,CAjCC,cAiCc,KAAK,CAAC,WAAa,uBAChC,SAAU,SACV,mBAAoB,KACpB,WAAY,YACZ,OAAQ,IAAI,MAAM,QAClB,OAAQ,KACR,MAAO,KAvCT,cAwCiB,IACf,iBAAkB,QAClB,OAAQ,QA1CV,OA2CU,KAAK,EAAE,CACjB,CACA,CA7CC,cA6Cc,KAAK,CAAC,WAAa,OAAO,uBACvC,UAAW,MAAM,KACjB,WAAY,OACd,CACA,CAjDC,cAiDc,KAAK,CAAC,WAAa,mBAChC,MAAO,KACP,OAAQ,IACR,OAAQ,QACR,WAAY,gBACV,GAAG,KAAK,CACR,KAAK,CAAC,CAAE,GAAG,CAAE,GAAG,CAAE,IAAK,IAAI,iBAAiB,CAC5C,KAAK,CAAC,CAAE,GAAG,CAAE,GAAG,CAAE,IAAK,IAAI,kBAE/B,CACA,CA3DC,cA2Dc,KAAK,CAAC,WAAa,sBAChC,iBAAkB,OACpB,CACA,CA9DC,cA8Dc,KAAK,CAAC,WAAa,mBAChC,OAAQ,CACV,CACA,CAjEC,cAiEc,KAAK,CAAC,WAAa,mBAChC,WAAY,YACZ,OAAQ,IAAI,MAAM,QAClB,OAAQ,KACR,MAAO,KArET,cAsEiB,IACf,iBAAkB,KAClB,OAAQ,OACV,CACA,CA1EC,cA0Ec,KAAK,CAAC,WAAa,OAAO,mBACvC,UAAW,MAAM,KACjB,WAAY,OACd,CACA,CA9EC,cA8Ec,KAAK,CAAC,WAAa,YAChC,MAAO,KACP,OAAQ,IACR,OAAQ,QACR,WAAY,YACZ,OAAQ,MAAM,YACd,MAAO,WACT,CACA,CAtFC,cAsFc,KAAK,CAAC,WAAa,iBAChC,iBAAkB,OACpB,CACA,CAzFC,cAyFc,KAAK,CAAC,WAAa,iBAChC,WAAY,gBACV,GAAG,KAAK,CACR,KAAK,CAAC,CAAE,GAAG,CAAE,GAAG,CAAE,IAAK,IAAI,iBAAiB,CAC5C,KAAK,CAAC,CAAE,GAAG,CAAE,GAAG,CAAE,IAAK,IAAI,kBAE/B,CACA,CAhGC,cAgGc,KAAK,CAAC,WAAa,YAChC,WAAY,YACZ,OAAQ,IAAI,MAAM,QAClB,OAAQ,KACR,MAAO,KApGT,cAqGiB,IACf,iBAAkB,KAClB,OAAQ,OACV,CACA,CAzGC,cAyGc,KAAK,CAAC,WAAa,OAAO,YACvC,UAAW,MAAM,KACjB,WAAY,OACd,CAEA,CA9GC,cA8Gc,CAAC,WACd,SAAU,SACV,QAAS,KACT,YAAa,OACb,oBAAqB,KAClB,iBAAkB,KACb,YAAa,KACrB,aAAc,KACd,MAAO,MACP,OAAQ,IACV,CAEA,CA1HC,cA0Hc,CAAC,YACd,iBAAkB,IAAI,aACtB,SAAU,SACV,UAAW,EA7Hb,cA8HiB,OACf,OAAQ,GACV,CAEA,CAlIC,cAkIc,CAAC,YACd,SAAU,SACV,iBAAkB,KApIpB,cAqIiB,OACf,OAAQ,IACV,CAEA,CAzIC,cAyIc,CAAC,YACd,QAAS,MACT,MAAO,KACP,OAAQ,KACR,iBAAkB,KAClB,WAAY,EAAE,IAAI,KAAK,IAAI,YA9I7B,cA+IiB,IACjB,CACA,CAjJC,cAiJc,CARC,WAQW,OACzB,iBAAkB,IAAI,WACxB,CACA,CApJC,cAoJc,CAXC,WAWW,OACzB,QAAS,KACT,WAAY,EAAE,EAAE,EAAE,IAAI,IAAI,WAC5B","names":[]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Generic building blocks shared by the appearance modules (checkout, and
|
|
5
|
+
* later returns). Each module supplies its own token to CSS variable map, theme
|
|
6
|
+
* presets and shadcn mapping, and keeps its own public types. Everything here
|
|
7
|
+
* is pure so it can be tested without a DOM.
|
|
8
|
+
*/
|
|
9
|
+
/** Caller overrides for a single slot. */
|
|
10
|
+
type SlotAppearance = {
|
|
11
|
+
/** Merged after the built-in classes with `cn`, so Tailwind conflicts resolve. */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Merged after the built-in inline styles. */
|
|
14
|
+
style?: CSSProperties;
|
|
15
|
+
};
|
|
16
|
+
/** Typed partial map of slot name to its overrides. */
|
|
17
|
+
type AppearanceElements<Slot extends string> = Partial<Record<Slot, SlotAppearance>>;
|
|
18
|
+
|
|
19
|
+
export type { AppearanceElements as A, SlotAppearance as S };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Generic building blocks shared by the appearance modules (checkout, and
|
|
5
|
+
* later returns). Each module supplies its own token to CSS variable map, theme
|
|
6
|
+
* presets and shadcn mapping, and keeps its own public types. Everything here
|
|
7
|
+
* is pure so it can be tested without a DOM.
|
|
8
|
+
*/
|
|
9
|
+
/** Caller overrides for a single slot. */
|
|
10
|
+
type SlotAppearance = {
|
|
11
|
+
/** Merged after the built-in classes with `cn`, so Tailwind conflicts resolve. */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Merged after the built-in inline styles. */
|
|
14
|
+
style?: CSSProperties;
|
|
15
|
+
};
|
|
16
|
+
/** Typed partial map of slot name to its overrides. */
|
|
17
|
+
type AppearanceElements<Slot extends string> = Partial<Record<Slot, SlotAppearance>>;
|
|
18
|
+
|
|
19
|
+
export type { AppearanceElements as A, SlotAppearance as S };
|
package/dist/catalog.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.bitsnap-react #audio-player-container{--seek-before-width: 0%;--buffered-width: 0%}.bitsnap-react input[type=range]{position:relative;-webkit-appearance:none;width:100%;margin:0;padding:0;height:19px;float:left;outline:none;background:transparent}.bitsnap-react input[type=range]::-webkit-slider-runnable-track{width:100%;height:3px;cursor:pointer;background:#d9d9d9}.bitsnap-react input[type=range]:before{position:absolute;content:"";top:8px;left:0;width:var(--seek-before-width);height:3px;background-color:#8c8c8c;cursor:pointer}.bitsnap-react input[type=range]::-webkit-slider-thumb{position:relative;-webkit-appearance:none;box-sizing:content-box;border:1px solid #d9d9d9;height:15px;width:15px;border-radius:50%;background-color:#8c8c8c;cursor:pointer;margin:-7px 0 0}.bitsnap-react input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background:#e2e8f0}.bitsnap-react input[type=range]::-moz-range-track{width:100%;height:3px;cursor:pointer;background:linear-gradient(to right,rgba(0,125,181,.6) var(--buffered-width),rgba(0,125,181,.2) var(--buffered-width))}.bitsnap-react input[type=range]::-moz-range-progress{background-color:#007db5}.bitsnap-react input[type=range]::-moz-focus-outer{border:0}.bitsnap-react input[type=range]::-moz-range-thumb{box-sizing:content-box;border:1px solid #007db5;height:15px;width:15px;border-radius:50%;background-color:#fff;cursor:pointer}.bitsnap-react input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background:#007db5}.bitsnap-react input[type=range]::-ms-track{width:100%;height:3px;cursor:pointer;background:transparent;border:solid transparent;color:transparent}.bitsnap-react input[type=range]::-ms-fill-lower{background-color:#007db5}.bitsnap-react input[type=range]::-ms-fill-upper{background:linear-gradient(to right,rgba(0,125,181,.6) var(--buffered-width),rgba(0,125,181,.2) var(--buffered-width))}.bitsnap-react input[type=range]::-ms-thumb{box-sizing:content-box;border:1px solid #007db5;height:15px;width:15px;border-radius:50%;background-color:#fff;cursor:pointer}.bitsnap-react input[type=range]:active::-ms-thumb{transform:scale(1.2);background:#007db5}.bitsnap-react .SliderRoot{position:relative;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;width:200px;height:20px}.bitsnap-react .SliderTrack{background-color:var(--black-a10);position:relative;flex-grow:1;border-radius:9999px;height:3px}.bitsnap-react .SliderRange{position:absolute;background-color:#fff;border-radius:9999px;height:100%}.bitsnap-react .SliderThumb{display:block;width:20px;height:20px;background-color:#fff;box-shadow:0 2px 10px var(--black-a7);border-radius:10px}.bitsnap-react .SliderThumb:hover{background-color:var(--violet-3)}.bitsnap-react .SliderThumb:focus{outline:none;box-shadow:0 0 0 5px var(--black-a8)}
|
|
2
|
+
/*# sourceMappingURL=catalog.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/panel/audio-player/audio-player.css"],"sourcesContent":[".bitsnap-react #audio-player-container {\n --seek-before-width: 0%;\n --buffered-width: 0%;\n}\n\n.bitsnap-react input[type=\"range\"] {\n position: relative;\n -webkit-appearance: none;\n width: 100%;\n margin: 0;\n padding: 0;\n height: 19px;\n float: left;\n outline: none;\n background: transparent;\n}\n.bitsnap-react input[type=\"range\"]::-webkit-slider-runnable-track {\n width: 100%;\n height: 3px;\n cursor: pointer;\n /*background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));*/\n background: #d9d9d9;\n}\n.bitsnap-react input[type=\"range\"]::before {\n position: absolute;\n content: \"\";\n top: 8px;\n left: 0;\n width: var(--seek-before-width);\n height: 3px;\n background-color: #8c8c8c;\n cursor: pointer;\n}\n.bitsnap-react input[type=\"range\"]::-webkit-slider-thumb {\n position: relative;\n -webkit-appearance: none;\n box-sizing: content-box;\n border: 1px solid #d9d9d9;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: #8c8c8c;\n cursor: pointer;\n margin: -7px 0 0 0;\n}\n.bitsnap-react input[type=\"range\"]:active::-webkit-slider-thumb {\n transform: scale(1.2);\n background: #e2e8f0;\n}\n.bitsnap-react input[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: 3px;\n cursor: pointer;\n background: linear-gradient(\n to right,\n rgba(0, 125, 181, 0.6) var(--buffered-width),\n rgba(0, 125, 181, 0.2) var(--buffered-width)\n );\n}\n.bitsnap-react input[type=\"range\"]::-moz-range-progress {\n background-color: #007db5;\n}\n.bitsnap-react input[type=\"range\"]::-moz-focus-outer {\n border: 0;\n}\n.bitsnap-react input[type=\"range\"]::-moz-range-thumb {\n box-sizing: content-box;\n border: 1px solid #007db5;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: #fff;\n cursor: pointer;\n}\n.bitsnap-react input[type=\"range\"]:active::-moz-range-thumb {\n transform: scale(1.2);\n background: #007db5;\n}\n.bitsnap-react input[type=\"range\"]::-ms-track {\n width: 100%;\n height: 3px;\n cursor: pointer;\n background: transparent;\n border: solid transparent;\n color: transparent;\n}\n.bitsnap-react input[type=\"range\"]::-ms-fill-lower {\n background-color: #007db5;\n}\n.bitsnap-react input[type=\"range\"]::-ms-fill-upper {\n background: linear-gradient(\n to right,\n rgba(0, 125, 181, 0.6) var(--buffered-width),\n rgba(0, 125, 181, 0.2) var(--buffered-width)\n );\n}\n.bitsnap-react input[type=\"range\"]::-ms-thumb {\n box-sizing: content-box;\n border: 1px solid #007db5;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: #fff;\n cursor: pointer;\n}\n.bitsnap-react input[type=\"range\"]:active::-ms-thumb {\n transform: scale(1.2);\n background: #007db5;\n}\n\n.bitsnap-react .SliderRoot {\n position: relative;\n display: flex;\n align-items: center;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n touch-action: none;\n width: 200px;\n height: 20px;\n}\n\n.bitsnap-react .SliderTrack {\n background-color: var(--black-a10);\n position: relative;\n flex-grow: 1;\n border-radius: 9999px;\n height: 3px;\n}\n\n.bitsnap-react .SliderRange {\n position: absolute;\n background-color: white;\n border-radius: 9999px;\n height: 100%;\n}\n\n.bitsnap-react .SliderThumb {\n display: block;\n width: 20px;\n height: 20px;\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n border-radius: 10px;\n}\n.bitsnap-react .SliderThumb:hover {\n background-color: var(--violet-3);\n}\n.bitsnap-react .SliderThumb:focus {\n outline: none;\n box-shadow: 0 0 0 5px var(--black-a8);\n}\n"],"mappings":"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","names":[]}
|