bitsnap-react 1.6.1 → 1.7.0

package/README.md

@@ -530,6 +530,141 @@ panel's `theme.colors.brand` (set with `setTheme`) and `buttonForeground` is
 chosen for contrast. Other panel screens and `setTheme` are unchanged. The
 navigation label follows `setLocale` ("Zwroty" / "Returns").
 
+## Product list
+
+`ProductList` renders a shop's product catalog: a responsive grid of cards with
+image, name, price, "add to cart" and pagination. It is the same component the
+Bitsnap custom-domain shop home page uses, and it can be embedded on any site.
+It needs the same stylesheet (`bitsnap-react/dist/index.css`) and is safe to
+render on the server.
+
+```tsx
+import { ProductList } from "bitsnap-react";
+import "bitsnap-react/dist/index.css";
+
+function ShopPage() {
+  return (
+    <ProductList
+      projectID="your-project-id"
+      locale="pl-PL"
+      pageSize={24}
+      productHref={(product) => `https://shop.example.com/p/${product.uniqueSlug}`}
+    />
+  );
+}
+```
+
+Import it from `bitsnap-react/catalog` when you do not use the checkout on that
+page: the entry exposes only the list and its hook, and the cart (the heavy
+part of the package) is loaded on the first "Add to cart" click, or never when
+you pass `onAddToCart`. The CommonJS build of the entry re-exports
+`bitsnap-react`, so it shares state with it but is not lean; use ESM for the
+smaller entry.
+
+```tsx
+import { ProductList, useProducts } from "bitsnap-react/catalog";
+```
+
+### Props
+
+| Prop            | Meaning                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------- |
+| `projectID`     | Project (shop) ID. Required.                                                                         |
+| `host`          | Backend origin. Defaults to `https://bitsnap.pl` (or what `setCustomHost` set at first render). `""` = same origin. |
+| `locale`        | Language of the texts, price format and product translations. Defaults to `pl-PL`.                   |
+| `pageSize`      | Products per page, 1 to 48. Defaults to 24.                                                          |
+| `search`        | Text filter. A change goes back to page 1.                                                           |
+| `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). |
+| `productHref`   | `(product) => string`. Defaults to the relative `/p/{uniqueSlug}`, which works on a custom domain.   |
+| `appearance`    | `{ theme, tokens, elements }`, like the checkout. Light theme by default.                            |
+| `texts`         | `Partial<ProductListTexts>`. Polish and English defaults, picked by `locale`.                        |
+| `renderItem`    | `(product, context) => ReactNode` replaces the content of a card (`context` has `href`, `price`).    |
+| `onAddToCart`   | `(product) => void \| Promise<void>`. Replaces the default add to cart.                              |
+| `showCartOnAdd` | Open the cart drawer after the default add to cart. Defaults to `true`.                              |
+| `className`     | Class of the root element.                                                                           |
+
+Prices are in minor units (grosze, cents), as everywhere else in the library.
+Cards show "od {price}" when the variants differ in price, a struck-through
+regular price for discounts and an "unavailable" state for products out of
+stock.
+
+### Add to cart
+
+Products the backend marks `addToCart` (a single price, not a subscription) get
+an "Add to cart" button. By default it calls `Bitsnap.addProductToCart` with
+quantity 1 and then opens the cart (`BitsnapCheckout` must be mounted on the
+page, see [Checkout appearance](#checkout-appearance)). The list aligns the
+cart's project ID and host from the list's `projectID`/`host` props, but only
+when the page has not set them yet (`setProjectID`, `setCustomHost`, or the
+cart script tag). When the page cart already belongs to another project or
+host, the list does not take it over: it logs a warning and shows the error
+message, so pass `onAddToCart` there. The cart item is `cartItemId ?? id`, the
+variant ID for single-variant products.
+Products with variants or a subscription link to the product page ("Wybierz" /
+"Zobacz"). Pass `onAddToCart` to do something else, for example to use your own
+cart.
+
+### Server rendering
+
+```tsx
+const firstPage = await fetch(
+  "https://bitsnap.pl/api/integrations/your-project-id/public-commerce/product-list?limit=24&offset=0",
+).then((response) => response.json());
+
+<ProductList projectID="your-project-id" pageSize={24} initialData={firstPage} />;
+```
+
+Without `initialData` the server renders a loading skeleton and the browser
+fetches the first page. The component never reads `window` while rendering.
+
+### Appearance and texts
+
+```tsx
+<ProductList
+  projectID="your-project-id"
+  appearance={{
+    theme: "dark",
+    tokens: { buttonBackground: "#635bff", radius: "12px", fontFamily: "Inter" },
+    elements: { card: { className: "my-card" }, name: { style: { fontSize: 18 } } },
+  }}
+  texts={{ addToCart: "Do koszyka" }}
+/>
+```
+
+Tokens: `fontFamily`, `fontSize`, `background`, `surface`, `foreground`,
+`mutedForeground`, `border`, `buttonBackground`, `buttonForeground`,
+`buttonHoverBackground`, `hoverSurface`, `focusRing`, `error`, `badgeBackground`,
+`badgeForeground`, `radius`. Slots (`PRODUCT_LIST_SLOT_NAMES`, also exposed as
+`data-bitsnap-products-slot`): `root`, `grid`, `card`, `cardLink`, `image`,
+`imagePlaceholder`, `body`, `name`, `description`, `price`, `comparePrice`,
+`badge`, `actions`, `addToCartButton`, `selectButton`, `message`, `pagination`,
+`paginationButton`, `pageIndicator`, `emptyState`, `error`, `retryButton`,
+`skeleton`. All rules are scoped to `[data-bitsnap-products]`.
+
+### `useProducts`
+
+Build your own layout on the same data:
+
+```tsx
+const { products, totalCount, page, pageCount, setPage, isLoading, error, refetch } =
+  useProducts({ projectID: "your-project-id", pageSize: 12, search });
+```
+
+It uses a plain `fetch` without credentials, does not read the global project ID
+or host, aborts the request when the inputs change, does nothing during server
+rendering and uses `initialData` for the first request instead of fetching
+(so it must be page 1 for the same options). If the catalog shrinks below the
+current page, `page` falls back to the last page. `page` starts at 1; `products` keeps the previous page while the next one
+loads.
+
+### Embedding on your own site (CORS)
+
+The list calls `GET {host}/api/integrations/{projectID}/public-commerce/product-list`
+from the browser. The domain of the embedding site must be known to the project:
+add it to the project's site, success or cancel URLs, or to the allowed domains
+in the Bitsnap dashboard. Otherwise the browser blocks the response. On a Bitsnap
+custom domain nothing has to be configured.
+
 # Examples
 
 1. `BitsnapCheckout` Component:

package/dist/CartProvider-FQCDE3HZ.mjs

@@ -0,0 +1,2 @@
+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};
+//# sourceMappingURL=CartProvider-FQCDE3HZ.mjs.map

package/dist/CartProvider-FQCDE3HZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/CartProvider-PDEV6GCV.css

@@ -0,0 +1,2 @@
+.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)}
+/*# sourceMappingURL=CartProvider-PDEV6GCV.css.map */

package/dist/CartProvider-PDEV6GCV.css.map

@@ -0,0 +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":[]}

package/dist/appearance-core-Dt2grZdl.d.mts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+
+/**
+ * Generic building blocks shared by the appearance modules (checkout, and
+ * later returns). Each module supplies its own token to CSS variable map, theme
+ * presets and shadcn mapping, and keeps its own public types. Everything here
+ * is pure so it can be tested without a DOM.
+ */
+/** Caller overrides for a single slot. */
+type SlotAppearance = {
+    /** Merged after the built-in classes with `cn`, so Tailwind conflicts resolve. */
+    className?: string;
+    /** Merged after the built-in inline styles. */
+    style?: CSSProperties;
+};
+/** Typed partial map of slot name to its overrides. */
+type AppearanceElements<Slot extends string> = Partial<Record<Slot, SlotAppearance>>;
+
+export type { AppearanceElements as A, SlotAppearance as S };

package/dist/appearance-core-Dt2grZdl.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+
+/**
+ * Generic building blocks shared by the appearance modules (checkout, and
+ * later returns). Each module supplies its own token to CSS variable map, theme
+ * presets and shadcn mapping, and keeps its own public types. Everything here
+ * is pure so it can be tested without a DOM.
+ */
+/** Caller overrides for a single slot. */
+type SlotAppearance = {
+    /** Merged after the built-in classes with `cn`, so Tailwind conflicts resolve. */
+    className?: string;
+    /** Merged after the built-in inline styles. */
+    style?: CSSProperties;
+};
+/** Typed partial map of slot name to its overrides. */
+type AppearanceElements<Slot extends string> = Partial<Record<Slot, SlotAppearance>>;
+
+export type { AppearanceElements as A, SlotAppearance as S };

package/dist/catalog.css

@@ -0,0 +1,2 @@
+.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)}
+/*# sourceMappingURL=catalog.css.map */

package/dist/catalog.css.map

@@ -0,0 +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":[]}

package/dist/catalog.d.mts

@@ -0,0 +1,214 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { S as SlotAppearance, A as AppearanceElements } from './appearance-core-Dt2grZdl.mjs';
+import { BitsnapModels } from './models.mjs';
+import 'zod';
+
+/**
+ * Product list appearance API.
+ *
+ * It mirrors `CheckoutAppearance` and `ReturnsAppearance` (theme, tokens,
+ * elements) so a shop can reuse one brand object for all of them. The resolver
+ * is pure: it turns the caller input into a theme name, the tokens in effect,
+ * the slot overrides and the inline style for the theme boundary.
+ */
+type ProductListTheme = "light" | "dark";
+type ProductListAppearanceTokens = {
+    /** Font family of the list. The library never loads fonts. */
+    fontFamily?: string;
+    /** Base font size. */
+    fontSize?: string;
+    /** List background. */
+    background?: string;
+    /** Raised surfaces: cards, image placeholders, skeletons. */
+    surface?: string;
+    /** Main text color. */
+    foreground?: string;
+    /** Secondary text: descriptions, the struck-through price. */
+    mutedForeground?: string;
+    /** Borders of cards and buttons. */
+    border?: string;
+    /** "Add to cart" button background. */
+    buttonBackground?: string;
+    /** "Add to cart" button text. */
+    buttonForeground?: string;
+    /** "Add to cart" button background on hover. */
+    buttonHoverBackground?: string;
+    /** Hover surface of cards and secondary buttons. */
+    hoverSurface?: string;
+    /** Focus ring color. */
+    focusRing?: string;
+    /** Error and unavailable state color. */
+    error?: string;
+    /** Badge background (subscription, unavailable). */
+    badgeBackground?: string;
+    /** Badge text. */
+    badgeForeground?: string;
+    /** Corner radius of cards, images and buttons. */
+    radius?: string;
+};
+/**
+ * Stable slot names. They are exposed as `data-bitsnap-products-slot`
+ * attributes so they can also be targeted from plain CSS.
+ */
+declare const PRODUCT_LIST_SLOT_NAMES: readonly ["root", "grid", "card", "cardLink", "image", "imagePlaceholder", "body", "name", "description", "price", "comparePrice", "badge", "actions", "addToCartButton", "selectButton", "message", "pagination", "paginationButton", "pageIndicator", "emptyState", "error", "retryButton", "skeleton"];
+type ProductListSlotName = (typeof PRODUCT_LIST_SLOT_NAMES)[number];
+type ProductListSlotAppearance = SlotAppearance;
+type ProductListAppearanceElements = AppearanceElements<ProductListSlotName>;
+type ProductListAppearance = {
+    /** `"light"` or `"dark"`. Omitted means `"light"`. */
+    theme?: ProductListTheme;
+    /** Partial overrides applied over the theme preset. */
+    tokens?: ProductListAppearanceTokens;
+    /** Per element `className`/`style` overrides. */
+    elements?: ProductListAppearanceElements;
+};
+
+type PublicListProduct = BitsnapModels.PublicListProduct;
+type ProductListData = BitsnapModels.ProductListResponse;
+
+/**
+ * Every string `ProductList` renders. Pass a partial object through the
+ * `texts` prop to override any of them, whatever the locale. Placeholders
+ * (`{price}`, `{page}`, `{pageCount}`) are filled by the component.
+ */
+type ProductListTexts = {
+    /** "Add to cart" button of products that can be bought straight from the list. */
+    addToCart: string;
+    /** Button label while the product is being added. */
+    addingToCart: string;
+    /** Button label after the product was added. */
+    addedToCart: string;
+    /** Message shown when adding to the cart failed. */
+    addToCartError: string;
+    /** Link of products with variants, to pick one on the product page. */
+    chooseOptions: string;
+    /** Link of products that cannot be added from the list (subscriptions). */
+    viewProduct: string;
+    /** Label of products that are out of stock. */
+    unavailable: string;
+    /** Badge of subscription products. */
+    subscription: string;
+    /** Price of products whose variants differ in price. `{price}` is the lowest one. */
+    priceFrom: string;
+    /** Screen reader label of the struck-through regular price. */
+    originalPrice: string;
+    /** Accessible label of the loading skeleton. */
+    loading: string;
+    /** Shown when the shop has no products (or none matches the search). */
+    empty: string;
+    /** Shown when the products could not be loaded. */
+    error: string;
+    /** Retry button of the error state. */
+    retry: string;
+    /** Accessible label of the pagination. */
+    pagination: string;
+    previousPage: string;
+    nextPage: string;
+    /** Page indicator. `{page}` and `{pageCount}` are filled in. */
+    pageOf: string;
+};
+type ProductListTextKey = keyof ProductListTexts;
+
+type UseProductsOptions = {
+    /** Project (shop) ID. */
+    projectID: string;
+    /**
+     * Origin of the Bitsnap backend. Defaults to the library host
+     * (`https://bitsnap.pl`, or what `setCustomHost` had set when the component
+     * first rendered; later `setCustomHost` calls do not move an existing list).
+     * On a custom domain pass the domain itself, or an empty string for
+     * same-origin requests.
+     */
+    host?: string;
+    locale?: string;
+    /** Products per page, 1 to 48. Defaults to 24. */
+    pageSize?: number;
+    search?: string;
+    /**
+     * First page, loaded on the server. It is always used for the first request
+     * of the mounted list (the first fetch is skipped and the products are
+     * available on the first render), so it has to be the page the props ask
+     * for: page 1 with the same `pageSize`, `locale` and `search`. Later changes
+     * of the props fetch again.
+     */
+    initialData?: ProductListData;
+};
+type UseProductsResult = {
+    /** Products of the current page. Keeps the previous page while loading. */
+    products: PublicListProduct[];
+    totalCount: number;
+    /** Current page, starting at 1. */
+    page: number;
+    pageCount: number;
+    setPage: (page: number) => void;
+    /** `true` until the current page is available, also during server rendering. */
+    isLoading: boolean;
+    error: Error | undefined;
+    /** Loads the current page again. */
+    refetch: () => void;
+};
+/**
+ * Loads the product catalog page by page. It uses a plain `fetch` without
+ * credentials, never reads global state (`setProjectID`, `setCustomHost`) other
+ * than the default host, and does nothing during server rendering - pass
+ * `initialData` to render products in the server HTML.
+ */
+declare function useProducts(options: UseProductsOptions): UseProductsResult;
+
+/** What `renderItem` gets next to the product. */
+type ProductListItemContext = {
+    /** Product page URL from `productHref`. */
+    href: string;
+    /** Price formatted for the locale and currency, without the "from" prefix. */
+    price: string;
+    /** Formatted regular price when the product is discounted. */
+    compareAtPrice: string | null;
+    texts: ProductListTexts;
+    locale: string;
+    /** Adds the product to the cart the way the built-in button does. */
+    addToCart: () => Promise<void>;
+};
+type ProductListProps = UseProductsOptions & {
+    /**
+     * Product page URL. Defaults to the relative `/p/{uniqueSlug}`, which works
+     * on a Bitsnap custom domain. Embedded on another site, return the full
+     * URL of the product page.
+     */
+    productHref?: (product: PublicListProduct) => string;
+    appearance?: ProductListAppearance;
+    /** Text overrides, applied whatever the locale. */
+    texts?: Partial<ProductListTexts>;
+    /** Replaces the content of a card. The card frame stays. */
+    renderItem?: (product: PublicListProduct, context: ProductListItemContext) => ReactNode;
+    /**
+     * Called by the "Add to cart" button instead of the default action
+     * (`Bitsnap.addProductToCart`). A rejected promise shows the error message.
+     */
+    onAddToCart?: (product: PublicListProduct) => void | Promise<void>;
+    /** Open the cart drawer after the default add to cart. Defaults to `true`. */
+    showCartOnAdd?: boolean;
+    className?: string;
+};
+/**
+ * Responsive grid of the shop's products with pagination, loading, empty and
+ * error states. Cards link to the product page and can add to the cart.
+ *
+ * ```tsx
+ * <ProductList projectID="…" locale="pl-PL" initialData={firstPage} />
+ * ```
+ *
+ * It renders on the server: pass `initialData` (the first page, fetched on the
+ * server) to have the products in the HTML; without it the server renders the
+ * loading skeleton and the browser fetches the first page.
+ */
+declare function ProductList({ productHref, appearance, texts, renderItem, onAddToCart, showCartOnAdd, className, ...options }: ProductListProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Formats a price in minor units (grosze, cents) for the locale, the same way
+ * the cart does (`amount / 100`). An unknown locale falls back to Polish and an
+ * invalid currency code to a plain number followed by the code.
+ */
+declare function formatProductPrice(amount: number, currency: string, locale?: string): string;
+
+export { PRODUCT_LIST_SLOT_NAMES, ProductList, type ProductListAppearance, type ProductListAppearanceElements, type ProductListAppearanceTokens, type ProductListData, type ProductListItemContext, type ProductListProps, type ProductListSlotAppearance, type ProductListSlotName, type ProductListTextKey, type ProductListTexts, type ProductListTheme, type PublicListProduct, type UseProductsOptions, type UseProductsResult, formatProductPrice, useProducts };