@zappie/kit 0.1.12 → 0.1.13
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @zappie/kit
|
|
2
2
|
|
|
3
|
+
## 0.1.13
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- a444bdf: The kit adds `cart-notice` 1.0.0, one toast for a cart change the server refused. `cart-button` 1.2.0 and `cart-line` 1.1.0 (which requires `@zappie/foundations` ^0.8.0) show the quoted subtotal and line total, not the local estimate. The starter shows the toast from its header.
|
|
8
|
+
|
|
3
9
|
## 0.1.12
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"2026-10-10","items":[{"name":"account-page","type":"block","version":"1.3.0","title":"Account page","description":"Show your profile, manage saved addresses, open your Zappie account and contact the branch or Zappie support."},{"name":"address-picker","type":"component","version":"1.0.0","title":"Address picker","description":"Find delivery addresses and show them on a map."},{"name":"cart-button","type":"component","version":"1.
|
|
1
|
+
{"version":"2026-10-10","items":[{"name":"account-page","type":"block","version":"1.3.0","title":"Account page","description":"Show your profile, manage saved addresses, open your Zappie account and contact the branch or Zappie support."},{"name":"address-picker","type":"component","version":"1.0.0","title":"Address picker","description":"Find delivery addresses and show them on a map."},{"name":"cart-button","type":"component","version":"1.2.0","title":"Cart button","description":"Open the cart from a floating or inline button with the count and the quoted subtotal."},{"name":"cart-drawer","type":"component","version":"1.1.0","title":"Cart drawer","description":"Show cart lines, issues and totals in a responsive drawer."},{"name":"cart-line","type":"component","version":"1.1.0","title":"Cart line","description":"Show options and let shoppers change quantity or remove a line."},{"name":"cart-notice","type":"component","version":"1.0.0","title":"Cart notice","description":"Show one message when the server refuses a cart change and the cart puts it back."},{"name":"category-nav","type":"component","version":"1.0.0","title":"Category navigation","description":"Navigate categories with tabs that follow scrolling."},{"name":"checkout-button","type":"component","version":"1.1.1","title":"Checkout button","description":"Open checkout with quote checks, safe retries and visit attribution."},{"name":"checkout-page","type":"block","version":"1.0.1","title":"Checkout page","description":"Collect contact and delivery details, resolve cart issues and continue to payment."},{"name":"checkout-return","type":"block","version":"1.0.0","title":"Checkout return","description":"Confirm payment and link to the completed order."},{"name":"consent","type":"component","version":"1.0.0","title":"Consent","description":"Save your privacy choice and withdraw consent when you choose."},{"name":"fulfilment-switch","type":"component","version":"1.0.0","title":"Fulfilment switch","description":"Choose pickup or delivery from the branch options."},{"name":"item-card","type":"component","version":"1.1.0","title":"Item card","description":"Show an item, its price, availability and cart feedback."},{"name":"item-sheet","type":"component","version":"1.0.0","title":"Item sheet","description":"Let shoppers configure an item, with optional v2 URL navigation."},{"name":"menu-page","type":"block","version":"1.0.0","title":"Menu page","description":"Combine the catalogue, item view and cart in your framework."},{"name":"money","type":"component","version":"1.0.0","title":"Money","description":"Format SDK money with your theme styles."},{"name":"open-status","type":"component","version":"1.0.0","title":"Open status","description":"Show whether a branch is open and when that changes."},{"name":"order-page","type":"block","version":"1.0.0","title":"Order page","description":"Show order progress and your support links."},{"name":"order-status","type":"component","version":"1.0.0","title":"Order status","description":"Show live order progress, items and totals."},{"name":"orders-page","type":"block","version":"1.0.0","title":"Orders page","description":"Browse your orders and load older orders."},{"name":"provider","type":"component","version":"1.0.0","title":"Zappie provider","description":"Create a storefront client and apply scoped tokens and fonts."},{"name":"quantity","type":"component","version":"1.0.0","title":"Quantity","description":"Adjust quantity within its limits."},{"name":"schedule-picker","type":"component","version":"1.1.0","title":"Schedule picker","description":"Choose ASAP or an available time for the cart."},{"name":"search","type":"component","version":"1.0.0","title":"Search","description":"Search the menu as shoppers type and discard outdated results."},{"name":"sign-in-button","type":"component","version":"1.0.0","title":"Sign-in button","description":"Show customer sign-in and sign-out controls."},{"name":"store-footer","type":"component","version":"1.0.0","title":"Store footer","description":"Show branch contacts, social links and your legal links."},{"name":"store-header","type":"component","version":"1.1.0","title":"Store header","description":"Show store details, opening status and fulfilment."}]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"cart-button","type":"component","version":"1.
|
|
1
|
+
{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"cart-button","type":"component","version":"1.2.0","title":"Cart button","description":"Open the cart from a floating or inline button with the count and the quoted subtotal.","requires":{"@zappie/sdk":"^0.1.0","@zappie/tokens":"^0.1.0"},"dependencies":{"lucide-react":"^0.546.0"},"registryDependencies":["money"],"files":[{"path":"cart-button.tsx","target":"components/zappie/cart-button.tsx","sha256":"b19bb20a0f49b24e1ffa573d08fa99eaaf07734eca9a8715fd26ff74a5b078fb","content":"\"use client\";\n\nimport { Money } from \"@/components/zappie/money\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { ShoppingBag } from \"lucide-react\";\nimport \"./cart-button.css\";\n\nexport type CartButtonProps = {\n onOpen: () => void;\n /** Called when the shopper reaches for the button, to start loading the cart's code. */\n onIntent?: () => void;\n variant?: \"floating\" | \"inline\";\n};\n\nexport function CartButton({\n onOpen,\n onIntent,\n variant = \"floating\",\n}: CartButtonProps) {\n const cart = useCart();\n // Money comes from the server. The count moves at once; the subtotal waits for the quote.\n const quote = \"quote\" in cart.state ? cart.state.quote : undefined;\n return (\n <button\n type=\"button\"\n className=\"z-kit-cart-button\"\n data-variant={variant}\n data-zappie-cart-trigger=\"\"\n data-zappie-overlay-trigger=\"bag\"\n disabled={!cart.isHydrated}\n onClick={onOpen}\n onPointerEnter={onIntent}\n onPointerDown={onIntent}\n onFocus={onIntent}\n >\n <ShoppingBag aria-hidden=\"true\" />\n <span>Cart</span>\n <span aria-hidden=\"true\">{cart.count}</span>\n {quote ? (\n <Money value={quote.subtotal} />\n ) : (\n cart.count > 0 && (\n <span className=\"z-kit-cart-button__pending\" aria-hidden=\"true\">\n …\n </span>\n )\n )}\n {/* The accessible name starts with the visible label, so voice control matches it (WCAG 2.5.3). */}\n <span className=\"z-kit-cart-button__hidden\">\n {`, ${cart.count} ${cart.count === 1 ? \"item\" : \"items\"}`}\n </span>\n </button>\n );\n}\n"},{"path":"cart-button.css","target":"components/zappie/cart-button.css","sha256":"d146ff6807df5608cf69d8288bb74b073b5eb5479d57d6c9f129b78ccc438601","content":".z-kit-cart-button {\n display: inline-flex;\n align-items: center;\n gap: var(--z-space-2);\n border: 0;\n border-radius: var(--z-radius-pill);\n padding: var(--z-space-3) var(--z-space-5);\n background: var(--z-accent);\n color: var(--z-accent-contrast);\n font-family: var(--z-font-body);\n font-size: var(--z-text-md);\n cursor: pointer;\n}\n\n.z-kit-cart-button[data-variant=\"floating\"] {\n position: fixed;\n right: var(--z-space-4);\n bottom: var(--z-space-4);\n border: 1px solid var(--z-border);\n}\n\n.z-kit-cart-button:focus-visible {\n outline: 2px solid var(--z-focus-ring);\n outline-offset: 2px;\n}\n\n.z-kit-cart-button:disabled {\n background: var(--z-border);\n color: var(--z-text-muted);\n cursor: not-allowed;\n}\n\n.z-kit-cart-button svg {\n width: var(--z-text-lg);\n height: var(--z-text-lg);\n}\n\n.z-kit-cart-button__hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n}\n\n.z-kit-cart-button__pending {\n min-width: 2ch;\n opacity: 0.7;\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-space-5","--z-border","--z-radius-pill","--z-accent","--z-accent-contrast","--z-text-muted","--z-focus-ring","--z-font-body","--z-text-md","--z-text-lg"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/cart-button"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"cart-line","type":"component","version":"1.
|
|
1
|
+
{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"cart-line","type":"component","version":"1.1.0","title":"Cart line","description":"Show options and let shoppers change quantity or remove a line.","requires":{"@zappie/foundations":"^0.8.0","@zappie/sdk":"^0.1.0","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":["money","quantity"],"files":[{"path":"cart-line.tsx","target":"components/zappie/cart-line.tsx","sha256":"aeccc19c76a0c4a1adf98e27e43f4ab4b95ea9691b3370b792ea015edfbd25c9","content":"\"use client\";\n\nimport { Money } from \"@/components/zappie/money\";\nimport { Quantity } from \"@/components/zappie/quantity\";\nimport { Cart } from \"@zappie/foundations\";\nimport type { CartLine as Line } from \"@zappie/sdk\";\nimport { Fragment } from \"react\";\nimport \"./cart-line.css\";\n\nexport function CartLine({ line }: { line: Line }) {\n return (\n <Cart.Line line={line} className=\"z-kit-cart-line\">\n {({ item, total, pending }) => (\n <Fragment>\n <div className=\"z-kit-cart-line__heading\">\n <h3>{line.name}</h3>\n {total ? (\n <Money value={total} />\n ) : (\n pending && (\n <span className=\"z-kit-cart-line__pending\" aria-hidden=\"true\">\n …\n </span>\n )\n )}\n </div>\n {line.choices.length > 0 && (\n <ul>\n {line.choices.map((selection) => {\n const group = item?.optionGroups.find(\n (candidate) => candidate.id === selection.groupId,\n );\n const choice = group?.choices.find(\n (candidate) => candidate.id === selection.choiceId,\n );\n return (\n <li key={`${selection.groupId}:${selection.choiceId}`}>\n {choice?.name ?? \"Unavailable option\"}\n {selection.quantity > 1 ? ` × ${selection.quantity}` : \"\"}\n </li>\n );\n })}\n </ul>\n )}\n {line.note && <p>{line.note}</p>}\n <div className=\"z-kit-cart-line__actions\">\n <Cart.Quantity lineId={line.id}>\n {({ value, min, max, step, setValue, disabled }) => (\n <Quantity\n value={value}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n label={`${line.name} quantity`}\n onValueChange={setValue}\n />\n )}\n </Cart.Quantity>\n <Cart.Remove lineId={line.id} aria-label={`Remove ${line.name}`}>\n Remove\n </Cart.Remove>\n </div>\n </Fragment>\n )}\n </Cart.Line>\n );\n}\n"},{"path":"cart-line.css","target":"components/zappie/cart-line.css","sha256":"9b9660e2dca388c96d0f451233dca6213d18cbbd0f21e1be0a8380ec4d651198","content":".z-kit-cart-line {\n display: grid;\n gap: var(--z-space-3);\n padding: var(--z-space-4) 0;\n border-bottom: 1px solid var(--z-border);\n color: var(--z-text);\n font-family: var(--z-font-body);\n}\n\n.z-kit-cart-line__heading,\n.z-kit-cart-line__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--z-space-3);\n}\n\n.z-kit-cart-line h3,\n.z-kit-cart-line p,\n.z-kit-cart-line ul {\n margin: 0;\n}\n\n.z-kit-cart-line ul {\n padding-left: var(--z-space-5);\n color: var(--z-text-muted);\n font-size: var(--z-text-sm);\n}\n\n.z-kit-cart-line__actions > button {\n border: 0;\n padding: var(--z-space-2);\n background: transparent;\n color: var(--z-text);\n font: inherit;\n}\n\n.z-kit-cart-line button:focus-visible {\n outline: 2px solid var(--z-focus-ring);\n outline-offset: 2px;\n}\n\n.z-kit-cart-line__pending {\n color: var(--z-text-muted);\n}\n"}],"tokens":["--z-space-2","--z-space-3","--z-space-4","--z-space-5","--z-border","--z-text","--z-text-muted","--z-danger","--z-focus-ring","--z-font-body","--z-text-sm"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/cart-line"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"$schema":"https://registry.zappie.ai/v1/schema/item.json","name":"cart-notice","type":"component","version":"1.0.0","title":"Cart notice","description":"Show one message when the server refuses a cart change and the cart puts it back.","requires":{"@zappie/sdk":"^0.8.0","@zappie/tokens":"^0.1.0"},"dependencies":{},"registryDependencies":[],"files":[{"path":"cart-notice.tsx","target":"components/zappie/cart-notice.tsx","sha256":"b1f8aecfffe6b470ca996655fc394dfe0b88d0a6c3096e400373de471c5b21fd","content":"\"use client\";\n\nimport { useCartNotice } from \"@zappie/sdk/react\";\nimport { useEffect, useRef } from \"react\";\nimport \"./cart-notice.css\";\n\n/**\n * One message when the server refuses a cart change and the cart puts it back, such as \"Only 2 left\".\n * The SDK announces it to screen readers, so this part is visual only.\n */\nexport function CartNotice({ duration = 6000 }: { duration?: number }) {\n const { notice, dismiss } = useCartNotice();\n const ref = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (!notice) {\n return;\n }\n // The top layer keeps the message above an open cart.\n (ref.current as { showPopover?: () => void } | null)?.showPopover?.();\n const timer = setTimeout(dismiss, duration);\n return () => clearTimeout(timer);\n }, [notice, dismiss, duration]);\n return notice ? (\n <div\n ref={ref}\n popover=\"manual\"\n className=\"z-kit-cart-notice\"\n data-zappie-cart-notice={notice.code}\n >\n {notice.message}\n </div>\n ) : null;\n}\n"},{"path":"cart-notice.css","target":"components/zappie/cart-notice.css","sha256":"53f352f208d1fc9e8190bd16d5ebf339c74998db128477015d1f2acce39a830e","content":".z-kit-cart-notice {\n position: fixed;\n inset: auto var(--z-space-4) var(--z-space-4);\n max-width: 28rem;\n margin: 0 auto;\n border: 1px solid var(--z-border);\n border-inline-start: 3px solid var(--z-danger);\n border-radius: var(--z-radius-md);\n padding: var(--z-space-3) var(--z-space-4);\n background: var(--z-surface-raised);\n color: var(--z-text);\n font: var(--z-text-sm) var(--z-font-body);\n pointer-events: none;\n}\n"}],"tokens":["--z-space-3","--z-space-4","--z-border","--z-danger","--z-radius-md","--z-surface-raised","--z-text","--z-text-sm","--z-font-body"],"frameworks":["react-router","next","vite","astro-react"],"docs":"https://docs.zappie.ai/kit/cart-notice"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zappie/kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "The registry of copy-in Zappie storefront components, installed with the zappie CLI.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"vite": "8.3.5",
|
|
21
21
|
"vitest": "^4.1.12",
|
|
22
22
|
"zod": "^4.6.7",
|
|
23
|
-
"@zappie/foundations": "^0.
|
|
24
|
-
"@zappie/sdk": "^0.
|
|
23
|
+
"@zappie/foundations": "^0.8.0",
|
|
24
|
+
"@zappie/sdk": "^0.8.0",
|
|
25
25
|
"@zappie/tokens": "^0.1.3"
|
|
26
26
|
},
|
|
27
27
|
"license": "MIT",
|