@lockerverse/react 0.2.100 → 0.2.101

package/dist/auctions.css

@@ -1,19 +1,27 @@
+@import "./auction-catalog.css";
+@import "./auction-gallery.css";
+@import "./auction-checkout.css";
+
+/* Reference: lockerverse-web-app-next auction pages at 8ead019. */
 .lockerverse-auctions {
-  --lockerverse-accent: #5751f2;
-  --lockerverse-bg: #080808;
-  --lockerverse-border: rgb(255 255 255 / 12%);
-  --lockerverse-control: #101010;
-  --lockerverse-muted: rgb(255 255 255 / 66%);
-  --lockerverse-radius: 10px;
+  --lockerverse-accent: #6f8f6d;
+  --lockerverse-bg: #050505;
+  --lockerverse-border: rgb(255 255 255 / 10%);
+  --lockerverse-control: #111216;
+  --lockerverse-muted: #bbb7c2;
+  --lockerverse-radius: 24px;
   --lockerverse-text: #fff;
   --lockerverse-font-family: ui-sans-serif, system-ui, sans-serif;
   box-sizing: border-box;
   width: 100%;
-  padding: clamp(16px, 4%, 24px);
-  font: 15px / 1.5 var(--lockerverse-font-family);
+  max-width: 1520px;
+  padding: 40px 32px;
+  margin-inline: auto;
+  container-type: inline-size;
+  font: 14px / 1.5 var(--lockerverse-font-family);
   color: var(--lockerverse-text);
   background: var(--lockerverse-bg);
-  border-radius: var(--lockerverse-radius);
+  border-radius: 0;
 }
 
 .lockerverse-auctions[data-lockerverse-theme="light"] {
@@ -45,177 +53,357 @@
   overflow-wrap: anywhere;
   white-space: pre-line;
 }
-.lockerverse-auctions__header {
-  margin-bottom: 24px;
+.lockerverse-auctions button {
+  font-family: inherit;
+  touch-action: manipulation;
+  cursor: pointer;
+}
+.lockerverse-auctions button:hover {
+  border-color: var(--lockerverse-text);
+}
+.lockerverse-auctions button:focus-visible,
+.lockerverse-auctions h2:focus-visible {
+  outline: 2px solid var(--lockerverse-accent);
+  outline-offset: 3px;
 }
-.lockerverse-auctions__grid {
+.lockerverse-auctions__field {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
-  gap: 20px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+  gap: 8px;
 }
-.lockerverse-auctions__card {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
+.lockerverse-auctions__field input {
+  width: 100%;
+  min-width: 0;
+  min-height: 48px;
+  padding: 10px 12px;
+  font: inherit;
+  font-size: 16px;
+  color: var(--lockerverse-text);
   background: var(--lockerverse-control);
   border: 1px solid var(--lockerverse-border);
   border-radius: var(--lockerverse-radius);
 }
-.lockerverse-auctions__image {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 1.28;
-  object-fit: cover;
+.lockerverse-auctions__notice {
+  padding: 12px;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
 }
-.lockerverse-auctions__body {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 12px;
-  padding: 20px;
+.lockerverse-auctions input:focus-visible {
+  outline: 2px solid var(--lockerverse-accent);
+  outline-offset: 3px;
 }
-.lockerverse-auctions__meta {
-  font-size: 13px;
-  color: var(--lockerverse-muted);
+.lockerverse-auctions__detail {
+  display: grid;
+  grid-template-columns: minmax(360px, 0.9fr) minmax(540px, 1.1fr);
+  gap: 32px;
+  align-items: start;
+}
+.lockerverse-auctions__item-summary {
+  min-width: 0;
+  overflow: hidden;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 12px;
+}
+.lockerverse-auctions__item-copy {
+  padding: 20px 24px;
+  border-top: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__item-copy h2 {
+  margin-top: 16px;
+  font-size: 36px;
+  font-weight: 600;
+  line-height: 1.12;
+}
+.lockerverse-auctions .lockerverse-auctions__eyebrow {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.7;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+}
+.lockerverse-auctions__item-description {
+  margin-top: 16px;
+}
+.lockerverse-auctions__description {
+  line-height: 2;
+  overflow-wrap: anywhere;
+}
+.lockerverse-auctions__description p {
+  color: inherit;
+}
+.lockerverse-auctions__description ul {
+  padding-left: 20px;
+  list-style: disc;
+}
+.lockerverse-auctions__description ol {
+  padding-left: 20px;
+  list-style: decimal;
+}
+.lockerverse-auctions__description li {
+  margin-block: 4px;
+}
+.lockerverse-auctions__description a {
+  color: inherit;
+  text-decoration: underline;
+}
+.lockerverse-auctions__description blockquote {
+  padding-left: 16px;
+  margin-inline: 0;
+  border-left: 2px solid currentColor;
+}
+.lockerverse-auctions__description pre {
+  overflow-x: auto;
+}
+.lockerverse-auctions__description-clamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 4;
+}
+.lockerverse-auctions .lockerverse-auctions__description-toggle {
+  min-height: 32px;
+  padding: 6px 12px;
+  margin-top: 12px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--lockerverse-text);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 999px;
+}
+.lockerverse-auctions__stat-panel {
+  margin: 20px 0 0;
+  overflow: hidden;
+  background: rgb(0 0 0 / 18%);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 24px;
 }
-.lockerverse-auctions__metrics {
+.lockerverse-auctions__stat-row {
   display: flex;
-  flex-wrap: wrap;
   gap: 16px;
-  margin: 0 0 4px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__stat-row:last-child {
+  border-bottom: 0;
 }
-.lockerverse-auctions__metrics dt {
-  font-size: 13px;
+.lockerverse-auctions__stat-panel dt {
+  font-size: 11px;
+  font-weight: 500;
   color: var(--lockerverse-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
 }
-.lockerverse-auctions__metrics dd {
+.lockerverse-auctions__stat-panel dd {
   margin: 0;
-  font-size: 18px;
-  font-weight: 600;
+  font-size: 20px;
+  font-weight: 500;
   font-variant-numeric: tabular-nums;
+  text-align: right;
 }
-.lockerverse-auctions button {
-  min-height: 44px;
-  padding: 10px 16px;
-  font: inherit;
-  font-weight: 600;
-  color: var(--lockerverse-text);
-  touch-action: manipulation;
-  cursor: pointer;
-  background: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
+.lockerverse-auctions__stat-panel .lockerverse-auctions__stat-date {
+  font-size: 15px;
 }
-.lockerverse-auctions button:hover {
-  border-color: var(--lockerverse-text);
+.lockerverse-auctions__stat-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
 }
-.lockerverse-auctions button:focus-visible,
-.lockerverse-auctions h2:focus-visible {
-  outline: 2px solid var(--lockerverse-accent);
-  outline-offset: 3px;
+.lockerverse-auctions__stat-footer > div {
+  padding: 12px 24px;
 }
-.lockerverse-auctions__body > button {
-  width: 100%;
-  margin-top: auto;
+.lockerverse-auctions__stat-footer > div + div {
+  border-left: 1px solid var(--lockerverse-border);
 }
-.lockerverse-auctions__back {
-  margin-bottom: 20px;
+.lockerverse-auctions__stat-footer dd {
+  margin-top: 4px;
+  font-size: 14px;
+  text-align: left;
 }
-
-.lockerverse-auctions__detail {
+.lockerverse-auctions__transaction {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 32px;
+  gap: 24px;
+  min-width: 0;
 }
-.lockerverse-auctions__gallery {
+.lockerverse-auctions__progress {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
-  min-width: 0;
-  padding: 0;
+  padding: 24px;
+  background: rgb(128 128 128 / 4%);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 28px;
+}
+.lockerverse-auctions__progress span {
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 999px;
+}
+.lockerverse-auctions__selection {
+  overflow: hidden;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 32px;
+  box-shadow: 0 30px 90px rgb(0 0 0 / 20%);
+}
+.lockerverse-auctions__selection-header,
+.lockerverse-auctions__selection-body {
+  padding: 28px;
+}
+.lockerverse-auctions__selection-header {
+  border-bottom: 1px solid var(--lockerverse-border);
+}
+.lockerverse-auctions__selection h3 {
   margin-top: 12px;
-  overflow-x: auto;
-  border: 0;
+  font-size: 30px;
+  font-weight: 600;
+  letter-spacing: -0.04em;
 }
-.lockerverse-auctions__gallery button {
-  padding: 2px;
-  cursor: pointer;
-  background: none;
-  border: 2px solid transparent;
-  border-radius: 4px;
+.lockerverse-auctions__selection p {
+  margin-top: 12px;
+  font-size: 14px;
+  line-height: 2;
 }
-.lockerverse-auctions__gallery button[aria-pressed="true"] {
-  border-color: var(--lockerverse-accent);
+.lockerverse-auctions__selection strong {
+  color: var(--lockerverse-text);
 }
-.lockerverse-auctions__gallery img {
+.lockerverse-auctions__amount-control {
+  position: relative;
   display: block;
-  object-fit: cover;
 }
-.lockerverse-auctions__checkout {
-  display: grid;
-  gap: 16px;
-  padding: 24px;
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
+.lockerverse-auctions__amount-control > span {
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  font-size: 24px;
+  color: var(--lockerverse-muted);
+  transform: translateY(-50%);
 }
-.lockerverse-auctions__checkout fieldset {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
+.lockerverse-auctions__amount-control input {
+  height: 78px;
+  padding-left: 24px;
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.05em;
+  background: rgb(0 0 0 / 25%);
+  border-radius: 24px;
 }
-.lockerverse-auctions__checkout h4 {
-  margin: 4px 0 0;
+.lockerverse-auctions__amount-control > span + input {
+  padding-left: 48px;
 }
-.lockerverse-auctions__field {
-  display: grid;
-  gap: 8px;
+.lockerverse-auctions__selection-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 20px;
+  margin-top: 24px;
+  border-top: 1px solid var(--lockerverse-border);
 }
-.lockerverse-auctions__field input {
-  width: 100%;
-  min-width: 0;
+.lockerverse-auctions__selection-footer > p {
+  flex: 1 1 220px;
+  margin: 0;
+}
+.lockerverse-auctions .lockerverse-auctions__button {
   min-height: 48px;
-  padding: 10px 12px;
-  font: inherit;
-  font-size: 16px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  background: var(--lockerverse-accent);
+  border: 0;
+  border-radius: 999px;
+}
+.lockerverse-auctions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.lockerverse-auctions .lockerverse-auctions__back {
+  min-height: 40px;
+  padding: 8px 12px;
+  margin-bottom: 16px;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--lockerverse-text);
-  background: var(--lockerverse-control);
+  background: rgb(128 128 128 / 6%);
   border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
+  border-radius: 999px;
 }
-.lockerverse-auctions__fee {
-  display: flex;
-  gap: 10px;
-  align-items: center;
+.lockerverse-auctions .lockerverse-auctions__footer-back {
+  justify-self: end;
   min-height: 44px;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--lockerverse-muted);
+  background: transparent;
+  border: 0;
 }
-.lockerverse-auctions__fee input {
-  width: 20px;
-  height: 20px;
-  accent-color: var(--lockerverse-accent);
+.lockerverse-auctions__read-only {
+  padding: 24px;
 }
-.lockerverse-auctions__notice {
-  padding: 12px;
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
+.lockerverse-auctions__read-only > p {
+  line-height: 2;
 }
-.lockerverse-auctions input:focus-visible,
-.lockerverse-auctions__gallery button:focus-visible {
-  outline: 2px solid var(--lockerverse-accent);
-  outline-offset: 3px;
+.lockerverse-auctions__read-only .lockerverse-auctions__button {
+  margin-top: 20px;
 }
-@media (max-width: 720px) {
+@media (max-width: 1279px) {
   .lockerverse-auctions__detail {
     grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 720px) {
+  .lockerverse-auctions__detail {
     gap: 24px;
   }
-  .lockerverse-auctions__checkout {
-    padding: 16px;
+}
+@media (max-width: 639px) {
+  .lockerverse-auctions {
+    padding: 32px 16px;
+  }
+  .lockerverse-auctions__item-copy {
+    padding: 20px;
+  }
+  .lockerverse-auctions__item-copy h2 {
+    font-size: 30px;
+  }
+  .lockerverse-auctions__selection-header,
+  .lockerverse-auctions__selection-body {
+    padding: 24px;
+  }
+  .lockerverse-auctions__selection-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .lockerverse-auctions__selection-footer > p {
+    flex-basis: auto;
   }
 }
+
+@container (max-width: 1150px) {
+  .lockerverse-auctions__detail {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.lockerverse-auctions__stat-row dt,
+.lockerverse-auctions__progress span {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.lockerverse-auctions__progress svg,
+.lockerverse-auctions__stat-row dt svg {
+  flex-shrink: 0;
+  opacity: 0.65;
+}

package/dist/auctions.d.ts

@@ -18,7 +18,7 @@ type LockerverseAuctionsProps = {
   style?: LockerverseStyle;
   className?: string;
 };
-/** Optional catalog UI. Use onSelectItem to open your item view or LockerverseAuctionItem. */
+/** Optional catalog UI, shared with the Lockerverse auction design. */
 declare function LockerverseAuctions({ auctions, onSelectItem, theme, style, className }: LockerverseAuctionsProps): import("react").JSX.Element;
 //#endregion
 export { LockerverseAuctions, type LockerverseStyle, type LockerverseTheme, type UseLockerverseAuctionsResult, useLockerverseAuctions };

package/dist/auctions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auctions.d.ts","names":[],"sources":["../src/use-lockerverse-auctions.ts","../src/lockerverse-auctions.tsx"],"mappings":";;;KAUY;EACV,QAAQ;EACR,UAAU;EACV;EACA,OAAO;EACP;;iBAQc,uBACd,SAAS,kCACR;;;KCfS;EACV,UAAU;EACV,eACE,SAAS,oBACT,MAAM;EAER,QAAQ;EACR,QAAQ;EACR;;;iBAwIc,sBACd,UACA,cACA,OACA,OACA,aACC,2CAAwB,IAAA"}
+{"version":3,"file":"auctions.d.ts","names":[],"sources":["../src/use-lockerverse-auctions.ts","../src/lockerverse-auctions.tsx"],"mappings":";;;KAUY;EACV,QAAQ;EACR,UAAU;EACV;EACA,OAAO;EACP;;iBAQc,uBACd,SAAS,kCACR;;;KCTS;EACV,UAAU;EACV,eACE,SAAS,oBACT,MAAM;EAER,QAAQ;EACR,QAAQ;EACR;;;iBA4Sc,sBACd,UACA,cACA,OACA,OACA,aACC,2CAAwB,IAAA"}

package/dist/auctions.js

@@ -1,2 +1,2 @@
-import{t as e}from"./format-money.js";import{t}from"./immutable-resource-identity.js";import{useCallback as n,useEffect as r,useRef as i,useState as a}from"react";import{createLockerverseAuctionClient as o}from"@lockerverse/sdk/auctions";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l={active:`Live now`,draft:`Coming soon`,finished:`Closed`},u=new Intl.DateTimeFormat(`en-US`,{dateStyle:`medium`,timeStyle:`short`,timeZone:`UTC`});function d({auction:e}){let t=e.status===`draft`?e.startAt:e.endAt,n=new Date(t);if(!Number.isFinite(n.getTime()))return null;let r={active:`Ends`,draft:`Opens`,finished:`Ended`}[e.status];return c(`span`,{className:`lockerverse-auctions__meta`,children:[r,` `,c(`time`,{dateTime:t,children:[u.format(n),` UTC`]})]})}function f({src:e}){return e?s(`img`,{alt:``,className:`lockerverse-auctions__image`,height:250,loading:`lazy`,src:e,width:320}):null}function p({auction:e,onSelect:t}){return c(`article`,{className:`lockerverse-auctions__card`,children:[s(f,{src:e.configuration.image??e.items.find(e=>e.image)?.image}),c(`div`,{className:`lockerverse-auctions__body`,children:[c(`span`,{className:`lockerverse-auctions__meta`,children:[l[e.status],` · `,e.items.length,` `,e.items.length===1?`item`:`items`]}),s(`h3`,{children:e.name}),s(d,{auction:e}),s(`button`,{"aria-label":`View items in ${e.name}`,onClick:t,type:`button`,children:`View items`})]})]})}function m({auction:t,item:n,onSelect:r}){let i=t.status===`active`?n.status:t.status,a=n.saleMode!==`auction`,o=n.saleMode!==`buy_now`;return c(`article`,{className:`lockerverse-auctions__card`,children:[s(f,{src:n.image??n.images[0]??t.configuration.image}),c(`div`,{className:`lockerverse-auctions__body`,children:[s(`span`,{className:`lockerverse-auctions__meta`,children:a&&n.isSoldOut?`Sold out`:l[i]}),s(`h3`,{children:n.name}),c(`dl`,{className:`lockerverse-auctions__metrics`,children:[o?c(`div`,{children:[s(`dt`,{children:n.maxBidAmount===null?`Starting bid`:`Current bid`}),s(`dd`,{children:e(n.maxBidAmount??n.minBidAmount??0)})]}):null,a&&n.buyNowPriceAmount!==null?c(`div`,{children:[s(`dt`,{children:`Buy now`}),s(`dd`,{children:e(n.buyNowPriceAmount)})]}):null,a&&n.availableQuantity!==null?c(`div`,{children:[s(`dt`,{children:`Available`}),s(`dd`,{children:n.availableQuantity})]}):null]}),s(`button`,{"aria-label":`View ${n.name}`,onClick:r,type:`button`,children:`View item`})]})]})}function h({auctions:e,onSelectItem:t,theme:n=`dark`,style:o,className:l}){let[u,f]=a(null),h=i(null),g=i(u),_=e.auctions?.find(e=>e.id===u);return r(()=>{g.current!==u&&(h.current?.focus(),g.current=u)},[u]),c(`section`,{"aria-busy":e.loading,"aria-label":`Auctions`,className:[`lockerverse-auctions`,l].filter(Boolean).join(` `),"data-lockerverse-theme":n,style:o,children:[c(`header`,{className:`lockerverse-auctions__header`,children:[_?s(`button`,{className:`lockerverse-auctions__back`,onClick:()=>f(null),type:`button`,children:`Back to auctions`}):null,s(`h2`,{ref:h,tabIndex:-1,children:_?.name??`Auctions`}),_?.description?s(`p`,{children:_.description}):null,_?s(d,{auction:_}):null]}),e.loading?s(`p`,{role:`status`,children:`Loading auctions…`}):null,e.error?c(`div`,{role:`alert`,children:[s(`p`,{children:e.error.message}),s(`button`,{onClick:e.refresh,type:`button`,children:`Try again`})]}):null,_&&_.items.length===0?s(`p`,{children:`No items are available in this auction.`}):null,_&&_.items.length>0?s(`ul`,{className:`lockerverse-auctions__grid`,children:_.items.map(e=>s(`li`,{children:s(m,{auction:_,item:e,onSelect:()=>t(_,e)})},e.id))}):null,!_&&e.auctions?.length===0?s(`p`,{children:`No auctions are available.`}):null,!_&&e.auctions&&e.auctions.length>0?s(`ul`,{className:`lockerverse-auctions__grid`,children:e.auctions.map(e=>s(`li`,{children:s(p,{auction:e,onSelect:()=>f(e.id)})},e.id))}):null]})}function g(e){t(`auctions`,{apiBaseUrl:e.apiBaseUrl,communitySlug:e.communitySlug,environment:e.environment,slug:``});let s=i(e.onError);s.current=e.onError;let[c]=a(()=>o({...e,onError:e=>s.current?.(e)})),[l,u]=a(0),[d,f]=a({auctions:null,error:null});r(()=>{let e=!0;return c.list().then(t=>{e&&f({auctions:t,error:null})},t=>{e&&f({auctions:null,error:t})}),()=>{e=!1}},[c,l]);let p=n(()=>{f({auctions:null,error:null}),u(e=>e+1)},[]);return{...d,client:c,loading:d.auctions===null&&d.error===null,refresh:p}}export{h as LockerverseAuctions,g as useLockerverseAuctions};
+import{a as e,i as t,o as n,r,t as i}from"./auction-description.js";import{t as a}from"./immutable-resource-identity.js";import{useCallback as o,useEffect as s,useRef as c,useState as l}from"react";import{createLockerverseAuctionClient as u}from"@lockerverse/sdk/auctions";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";const m={active:`Live now`,draft:`Coming soon`,finished:`Closed`},h=[{label:`All`,value:`all`},{label:`Live`,value:`active`},{label:`Upcoming`,value:`draft`},{label:`Closed`,value:`finished`}];function g({images:e,fallback:t,name:n}){let r=[...new Set(e?.filter(Boolean))];!r.length&&t&&r.push(t);let[i,a]=l(0),o=c(null),u=c(new Set),d=r.length,p=d?i%d:0;return s(()=>{if(d<2)return;let e=window.matchMedia(`(prefers-reduced-motion: reduce)`),t=window.setInterval(()=>{document.hidden||e.matches||o.current?.closest(`article`)?.matches(`:hover, :focus-within`)||a(e=>u.current.has(r[(e+1)%d]??``)?(e+1)%d:e)},5e3);return()=>window.clearInterval(t)},[d,r]),f(`div`,{className:`lockerverse-auctions__catalog-images`,ref:o,children:d?[p,...d>1?[(p+1)%d]:[]].map(e=>f(`img`,{alt:e===p?n:``,"aria-hidden":e!==p,className:`lockerverse-auctions__catalog-photo`,"data-visible":e===p,height:500,loading:`lazy`,onLoad:()=>u.current.add(r[e]??``),src:r[e],width:640},r[e])):null})}function _({icon:e,label:t,value:n}){return p(`div`,{className:`lockerverse-auctions__catalog-metric`,children:[p(`dt`,{children:[f(r,{kind:e}),t]}),f(`dd`,{children:n})]})}function v({auction:e,status:r=n(e),item:i=!1}){let a=``;return r===`draft`&&(a=`Opens `),r===`active`&&(a=i?`Closes `:`Ends `),p(`span`,{className:`lockerverse-auctions__catalog-timing`,children:[a,t(e,r)]})}function y({auction:e,onSelect:t}){let a=e.configuration.image||e.items.find(e=>e.image||e.images.length)?.image||e.items.find(e=>e.images.length)?.images[0]||e.community?.banner||e.community?.thumbnail,o=e.description||{active:`Bidding is open across this auction's items.`,draft:`Preview the lineup before bidding opens.`,finished:`Bidding has wrapped. Review the completed items.`}[n(e)];return p(`article`,{className:`lockerverse-auctions__catalog-card`,children:[f(`button`,{"aria-label":`View items in ${e.name}`,className:`lockerverse-auctions__catalog-select`,onClick:t,type:`button`}),p(`div`,{className:`lockerverse-auctions__catalog-media`,children:[f(g,{fallback:a,name:e.name}),p(`div`,{className:`lockerverse-auctions__catalog-chips`,children:[f(`span`,{className:`lockerverse-auctions__catalog-chip`,children:m[n(e)]}),f(v,{auction:e})]}),p(`dl`,{className:`lockerverse-auctions__catalog-metrics`,children:[f(_,{icon:`items`,label:`Items`,value:String(e.items.length)}),f(_,{icon:`gavel`,label:`Bids`,value:String(e.items.reduce((e,t)=>e+t.bidCount,0))})]})]}),p(`div`,{className:`lockerverse-auctions__catalog-body`,children:[f(`h3`,{children:e.name}),f(i,{className:`lockerverse-auctions__catalog-description`,description:o,links:!1}),p(`div`,{className:`lockerverse-auctions__catalog-footer`,children:[f(`span`,{className:`lockerverse-auctions__catalog-cta`,children:n(e)===`draft`?`Preview items`:`View items`}),f(`span`,{className:`lockerverse-auctions__catalog-arrow`,children:f(r,{kind:`arrow`})})]})]})]})}function b(t,n){if(t.saleMode===`buy_now`){let n=t.isSoldOut?`Sold out`:`Buy now`;return{chip:n,cta:n,price:e(t.buyNowPriceAmount??0),priceLabel:`Buy Now`,secondary:t.availableQuantity===null?`Available`:String(t.availableQuantity)}}return{chip:n===`active`?`Live`:m[n],cta:{active:`Bid now`,draft:`Preview item`,finished:`View item`}[n],price:n===`finished`&&!t.maxBidAmount?`No bids`:e(t.maxBidAmount??0),priceLabel:n===`finished`?`Final bid`:`Current`,secondary:e(t.minBidAmount??0)}}function x({auction:e,item:t,onSelect:a}){let o=n(e,t),s=t.saleMode===`buy_now`,c=b(t,o);return p(`article`,{className:`lockerverse-auctions__catalog-card`,children:[f(`button`,{"aria-label":`View ${t.name}`,className:`lockerverse-auctions__catalog-select`,onClick:a,type:`button`}),p(`div`,{className:`lockerverse-auctions__catalog-media`,children:[f(g,{fallback:t.image||e.configuration.image||e.community?.banner||e.community?.thumbnail,images:t.images,name:t.name}),p(`div`,{className:`lockerverse-auctions__catalog-chips`,children:[f(`span`,{className:`lockerverse-auctions__catalog-chip`,"data-live":o===`active`,children:c.chip}),f(v,{auction:t.finishedAt&&o===`finished`?{...e,endAt:t.finishedAt}:e,item:!0,status:o})]}),p(`dl`,{className:`lockerverse-auctions__catalog-metrics`,children:[f(_,{icon:s?`bag`:`gavel`,label:c.priceLabel,value:c.price}),f(_,{icon:`clock`,label:s?`Available`:`Floor`,value:c.secondary})]})]}),p(`div`,{className:`lockerverse-auctions__catalog-body`,children:[f(`h3`,{children:t.name}),f(i,{className:`lockerverse-auctions__catalog-description`,description:t.description||`View auction item details.`,links:!1}),f(`div`,{className:`lockerverse-auctions__catalog-footer lockerverse-auctions__catalog-footer--item`,children:p(`span`,{className:`lockerverse-auctions__catalog-cta`,children:[c.cta,f(r,{kind:`arrow`})]})})]})]})}function S({auctions:e,onSelectItem:t,theme:a=`dark`,style:o,className:u}){let[m,g]=l(null),[_,v]=l(`all`),y=c(null),b=c(m),x=e.auctions?.find(e=>e.id===m);s(()=>{b.current!==m&&(y.current?.focus(),b.current=m)},[m]);let S=[...x?.items??[]].sort((e,t)=>e.position-t.position||e.createdAt.localeCompare(t.createdAt)),w=x?S.filter(e=>_===`all`||n(x,e)===_):[];return p(`section`,{"aria-busy":e.loading,"aria-label":`Auctions`,className:[`lockerverse-auctions`,`lockerverse-auctions--catalog`,u].filter(Boolean).join(` `),"data-lockerverse-theme":a,style:o,children:[p(`header`,{className:`lockerverse-auctions__catalog-header`,children:[x?p(`button`,{className:`lockerverse-auctions__catalog-back`,onClick:()=>{g(null),v(`all`)},type:`button`,children:[f(r,{kind:`back`}),`Auctions`]}):null,f(`h2`,{ref:y,tabIndex:-1,children:x?.name??`Auctions`}),x?.description?f(i,{description:x.description}):null]}),e.loading?f(`p`,{role:`status`,children:`Loading auctions…`}):null,e.error?p(`div`,{role:`alert`,children:[f(`p`,{children:e.error.message}),f(`button`,{onClick:e.refresh,type:`button`,children:`Try again`})]}):null,e.auctions&&(x||e.auctions.length>0)?p(d,{children:[p(`div`,{className:`lockerverse-auctions__catalog-lineup`,children:[p(`div`,{children:[f(`h3`,{children:`Auction lineup`}),f(`p`,{children:`Browse the current collection.`})]}),f(`span`,{children:x?`${w.length} ${w.length===1?`item`:`items`}`:`${e.auctions.length} ${e.auctions.length===1?`auction`:`auctions`}`})]}),x?f(`fieldset`,{"aria-label":`Filter auction items`,className:`lockerverse-auctions__catalog-filters`,children:h.map(e=>p(`button`,{"aria-pressed":_===e.value,onClick:()=>v(e.value),type:`button`,children:[e.label,f(`span`,{children:e.value===`all`?S.length:S.filter(t=>n(x,t)===e.value).length})]},e.value))}):null]}):null,f(C,{auctions:e.auctions,filtered:w,onSelectAuction:e=>{g(e),v(`all`)},onSelectItem:t,selected:x})]})}function C({selected:e,filtered:t,auctions:n,onSelectItem:r,onSelectAuction:i}){return e?t.length?f(`ul`,{className:`lockerverse-auctions__catalog-grid`,children:t.map(t=>f(`li`,{children:f(x,{auction:e,item:t,onSelect:()=>r(e,t)})},t.id))}):f(`p`,{className:`lockerverse-auctions__catalog-empty`,children:`No items match this auction view.`}):n?n.length?f(`ul`,{className:`lockerverse-auctions__catalog-grid`,children:n.map(e=>f(`li`,{children:f(y,{auction:e,onSelect:()=>i(e.id)})},e.id))}):p(`div`,{className:`lockerverse-auctions__catalog-empty`,children:[f(`h3`,{children:`No auctions yet.`}),f(`p`,{children:`Published auctions will appear here once they are available.`})]}):null}function w(e){a(`auctions`,{apiBaseUrl:e.apiBaseUrl,communitySlug:e.communitySlug,environment:e.environment,slug:``});let t=c(e.onError);t.current=e.onError;let[n]=l(()=>u({...e,onError:e=>t.current?.(e)})),[r,i]=l(0),[d,f]=l({auctions:null,error:null});s(()=>{let e=!0;return n.list().then(t=>{e&&f({auctions:t,error:null})},t=>{e&&f({auctions:null,error:t})}),()=>{e=!1}},[n,r]);let p=o(()=>{f({auctions:null,error:null}),i(e=>e+1)},[]);return{...d,client:n,loading:d.auctions===null&&d.error===null,refresh:p}}export{S as LockerverseAuctions,w as useLockerverseAuctions};
 //# sourceMappingURL=auctions.js.map