@lockerverse/react 0.2.105 → 0.2.108-dev.1

package/README.md

@@ -261,7 +261,7 @@ Auction checkout, payment, and signup use common email, phone, field-error, and
 
 Payment and auction Stripe forms resolve the rendered SDK font and theme tokens before passing them to Stripe. Custom font files are not loaded into Stripe by a font family name alone. See [the shared form foundation](https://github.com/Lockerverse/lockerverse-sdk/blob/main/docs/shared-form-foundation.md) for module boundaries and bundle measurement.
 
-Use `theme="dark"` or `theme="light"`. Lockerverse applies the community branding returned by the widget API. Pass the same `LockerverseStyle` object to payment, signup, and donate launcher components.
+Use `theme="dark"` or `theme="light"` to match the host background. The outer payment, signup, auction, and Events widgets are transparent, so the host controls their canvas. Lockerverse applies the community branding returned by the widget API. Pass the same `LockerverseStyle` object to payment, signup, and donate launcher components.
 
 ```tsx
 import type { LockerverseStyle } from "@lockerverse/react";
@@ -455,3 +455,28 @@ to host navigation. Resource identity changes require a new React key.
 
 [Complete direct-auction example](https://sdk.lockerverse.com/examples/auctions?community=lckrvrs-internal&auction=auction).
 Built-in styled UI is the default for Lovable. There is no automatic headless switch.
+
+## Public event listings
+
+Use the public Events entry to show future, publicly listed Events. It does not
+load ticket or payment UI.
+
+```tsx
+import {
+  LockerversePublicEvents,
+  useLockerversePublicEvents,
+} from "@lockerverse/react/public-events";
+import "@lockerverse/react/public-events.css";
+
+function CommunityEvents() {
+  const events = useLockerversePublicEvents({ communitySlug: "auburn" });
+  return <LockerversePublicEvents events={events} title="Events" theme="light" />;
+}
+```
+
+The hook returns `client`, `events`, `loading`, `error`, and `refresh`. The
+component takes the full hook result so it can show loading, empty, and retry
+states. `title` sets the visible heading, `showHeading` can hide it, and
+`timeZone` controls date display. The default time zone is
+`America/New_York`. Use `style` with `LockerverseStyle` tokens or `className`
+to match the host site. Links open in a new tab when they use HTTP or HTTPS.

package/dist/auction-base.css

@@ -22,7 +22,7 @@
   container-type: inline-size;
   font: 14px / 1.5 var(--lockerverse-font-family);
   color: var(--lockerverse-text);
-  background: var(--lockerverse-bg);
+  background: transparent;
   border-radius: 0;
 }
 

package/dist/auction-catalog.css

@@ -3,7 +3,7 @@
   padding: 48px 24px;
   margin-inline: auto;
   container-type: inline-size;
-  background: var(--lockerverse-bg, #050505);
+  background: transparent;
   border-radius: 0;
 }
 .lockerverse-auctions__catalog-header {

package/dist/immutable-resource-identity.js.map

@@ -1 +1 @@
-{"version":3,"file":"immutable-resource-identity.js","names":[],"sources":["../src/immutable-resource-identity.ts"],"sourcesContent":["import { useRef } from \"react\";\n\ntype LockerverseResourceIdentity = {\n  apiBaseUrl: string | undefined;\n  communitySlug: string;\n  mediaBaseUrl?: string | undefined;\n  environment: string | undefined;\n  slug: string;\n};\n\nfunction hasSameIdentity(\n  initial: LockerverseResourceIdentity,\n  current: LockerverseResourceIdentity\n) {\n  return (\n    initial.apiBaseUrl === current.apiBaseUrl &&\n    initial.communitySlug === current.communitySlug &&\n    initial.mediaBaseUrl === current.mediaBaseUrl &&\n    initial.environment === current.environment &&\n    initial.slug === current.slug\n  );\n}\n\nexport function useImmutableResourceIdentity(\n  resource: \"payment widget\" | \"signup\" | \"auctions\" | \"auction\",\n  identity: LockerverseResourceIdentity\n) {\n  const initial = useRef(identity);\n  if (!hasSameIdentity(initial.current, identity)) {\n    throw new TypeError(\n      `Lockerverse ${resource} identity cannot change after initialization. Remount with a new React key.`\n    );\n  }\n}\n"],"mappings":"+BAUA,SAAS,EACP,EACA,EACA,CACA,OACE,EAAQ,aAAe,EAAQ,YAC/B,EAAQ,gBAAkB,EAAQ,eAClC,EAAQ,eAAiB,EAAQ,cACjC,EAAQ,cAAgB,EAAQ,aAChC,EAAQ,OAAS,EAAQ,IAE7B,CAEA,SAAgB,EACd,EACA,EACA,CAEA,GAAI,CAAC,EADW,EAAO,CACI,CAAC,CAAC,QAAS,CAAQ,EAC5C,MAAU,UACR,eAAe,EAAS,4EAC1B,CAEJ"}
+{"version":3,"file":"immutable-resource-identity.js","names":[],"sources":["../src/immutable-resource-identity.ts"],"sourcesContent":["import { useRef } from \"react\";\n\ntype LockerverseResourceIdentity = {\n  apiBaseUrl: string | undefined;\n  communitySlug: string;\n  mediaBaseUrl?: string | undefined;\n  environment: string | undefined;\n  slug: string;\n};\n\nfunction hasSameIdentity(\n  initial: LockerverseResourceIdentity,\n  current: LockerverseResourceIdentity\n) {\n  return (\n    initial.apiBaseUrl === current.apiBaseUrl &&\n    initial.communitySlug === current.communitySlug &&\n    initial.mediaBaseUrl === current.mediaBaseUrl &&\n    initial.environment === current.environment &&\n    initial.slug === current.slug\n  );\n}\n\nexport function useImmutableResourceIdentity(\n  resource:\n    | \"payment widget\"\n    | \"signup\"\n    | \"auctions\"\n    | \"auction\"\n    | \"public events\",\n  identity: LockerverseResourceIdentity\n) {\n  const initial = useRef(identity);\n  if (!hasSameIdentity(initial.current, identity)) {\n    throw new TypeError(\n      `Lockerverse ${resource} identity cannot change after initialization. Remount with a new React key.`\n    );\n  }\n}\n"],"mappings":"+BAUA,SAAS,EACP,EACA,EACA,CACA,OACE,EAAQ,aAAe,EAAQ,YAC/B,EAAQ,gBAAkB,EAAQ,eAClC,EAAQ,eAAiB,EAAQ,cACjC,EAAQ,cAAgB,EAAQ,aAChC,EAAQ,OAAS,EAAQ,IAE7B,CAEA,SAAgB,EACd,EAMA,EACA,CAEA,GAAI,CAAC,EADW,EAAO,CACI,CAAC,CAAC,QAAS,CAAQ,EAC5C,MAAU,UACR,eAAe,EAAS,4EAC1B,CAEJ"}

package/dist/public-events.css

@@ -0,0 +1,163 @@
+.lockerverse-public-events {
+  --lockerverse-bg: #090a0b;
+  --lockerverse-text: #f8f8f7;
+  --lockerverse-muted: #a7aaac;
+  --lockerverse-border: rgb(255 255 255 / 18%);
+  --lockerverse-accent: #83baa1;
+  --lockerverse-font-family: ui-sans-serif, system-ui, sans-serif;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 28px;
+  font: 14px / 1.5 var(--lockerverse-font-family);
+  color: var(--lockerverse-text);
+  background: transparent;
+}
+
+.lockerverse-public-events[data-lockerverse-theme="light"] {
+  --lockerverse-bg: #fff;
+  --lockerverse-text: #171919;
+  --lockerverse-muted: #565f60;
+  --lockerverse-border: rgb(23 25 25 / 18%);
+  --lockerverse-accent: #2d7052;
+}
+
+.lockerverse-public-events *,
+.lockerverse-public-events *::before,
+.lockerverse-public-events *::after {
+  box-sizing: border-box;
+}
+
+.lockerverse-public-events h2,
+.lockerverse-public-events h3,
+.lockerverse-public-events p {
+  margin: 0;
+}
+
+.lockerverse-public-events h2 {
+  margin-bottom: 24px;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+.lockerverse-public-events h3 {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.lockerverse-public-events__list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.lockerverse-public-events__item {
+  border-top: 1px solid var(--lockerverse-border);
+}
+
+.lockerverse-public-events__item:last-child {
+  border-bottom: 1px solid var(--lockerverse-border);
+}
+
+.lockerverse-public-events__row {
+  display: grid;
+  grid-template-columns: 68px minmax(0, 1fr);
+  gap: 20px;
+  padding: 20px 0;
+}
+
+.lockerverse-public-events__date {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: 1;
+}
+
+.lockerverse-public-events__month {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--lockerverse-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.lockerverse-public-events__day {
+  margin-top: 5px;
+  font-size: 34px;
+  font-weight: 600;
+  letter-spacing: -0.04em;
+}
+
+.lockerverse-public-events__content {
+  min-width: 0;
+}
+
+.lockerverse-public-events .lockerverse-public-events__time,
+.lockerverse-public-events .lockerverse-public-events__place {
+  margin-top: 5px;
+  color: var(--lockerverse-muted);
+}
+
+.lockerverse-public-events .lockerverse-public-events__description {
+  margin-top: 12px;
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+}
+
+.lockerverse-public-events .lockerverse-public-events__link {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 44px;
+  padding: 8px 14px;
+  margin-top: 14px;
+  font-weight: 600;
+  color: var(--lockerverse-accent);
+  text-decoration: none;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: 8px;
+}
+
+.lockerverse-public-events .lockerverse-public-events__link:hover {
+  border-color: var(--lockerverse-accent);
+}
+
+.lockerverse-public-events a:focus-visible,
+.lockerverse-public-events button:focus-visible {
+  outline: 2px solid var(--lockerverse-accent);
+  outline-offset: 4px;
+}
+
+.lockerverse-public-events button {
+  min-height: 44px;
+  padding: 8px 12px;
+  margin-top: 12px;
+  font: inherit;
+  color: var(--lockerverse-text);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--lockerverse-border);
+}
+
+.lockerverse-public-events__empty {
+  padding: 24px 0;
+  color: var(--lockerverse-muted);
+}
+
+@media (max-width: 500px) {
+  .lockerverse-public-events {
+    padding: 20px;
+  }
+
+  .lockerverse-public-events__row {
+    grid-template-columns: 52px minmax(0, 1fr);
+    gap: 14px;
+  }
+
+  .lockerverse-public-events__day {
+    font-size: 28px;
+  }
+}

package/dist/public-events.d.ts

@@ -0,0 +1,31 @@
+import { n as LockerverseTheme, t as LockerverseStyle } from "./theme.js";
+import { CreateLockerversePublicEventsOptions, LockerversePublicEvent, LockerversePublicEventsClient, LockerverseSdkError } from "@lockerverse/sdk/public-events";
+//#region src/use-lockerverse-public-events.d.ts
+type UseLockerversePublicEventsResult = {
+  client: LockerversePublicEventsClient;
+  events: LockerversePublicEvent[] | null;
+  loading: boolean;
+  error: LockerverseSdkError | null;
+  refresh: () => void;
+};
+/** Load the public events list for one community. */
+declare function useLockerversePublicEvents(options: CreateLockerversePublicEventsOptions): UseLockerversePublicEventsResult;
+//#endregion
+//#region src/lockerverse-public-events.d.ts
+type LockerversePublicEventsProps = {
+  events: UseLockerversePublicEventsResult;
+  /** The visible heading. Defaults to Events. */
+  title?: string;
+  showHeading?: boolean;
+  emptyMessage?: string;
+  /** Used to show dates and times. Defaults to America/New_York. */
+  timeZone?: string;
+  theme?: LockerverseTheme;
+  style?: LockerverseStyle;
+  className?: string;
+};
+/** Optional public list that can be embedded in any React site. */
+declare function LockerversePublicEvents({ events, title, showHeading, emptyMessage, timeZone, theme, style, className }: LockerversePublicEventsProps): import("react").JSX.Element;
+//#endregion
+export { LockerversePublicEvents, type LockerversePublicEventsProps, type LockerverseStyle, type LockerverseTheme, type UseLockerversePublicEventsResult, useLockerversePublicEvents };
+//# sourceMappingURL=public-events.d.ts.map

package/dist/public-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-events.d.ts","names":[],"sources":["../src/use-lockerverse-public-events.ts","../src/lockerverse-public-events.tsx"],"mappings":";;;KAUY;EACV,QAAQ;EACR,QAAQ;EACR;EACA,OAAO;EACP;;;iBAIc,2BACd,SAAS,uCACR;;;KCjBS;EACV,QAAQ;;EAER;EACA;EACA;;EAEA;EACA,QAAQ;EACR,QAAQ;EACR;;;iBAoGc,0BACd,QACA,OACA,aACA,cACA,UACA,OACA,OACA,aACC,+CAA4B,IAAA"}

package/dist/public-events.js

@@ -0,0 +1,2 @@
+import{t as e}from"./immutable-resource-identity.js";import{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{createLockerversePublicEventsClient as s}from"@lockerverse/sdk/public-events";function c(e,t){return new Intl.DateTimeFormat(`en-US`,{day:`numeric`,month:`short`,timeZone:t,year:`numeric`}).format(new Date(e))}function l(e,t){return new Intl.DateTimeFormat(`en-US`,{hour:`numeric`,minute:`2-digit`,timeZone:t,timeZoneName:`short`}).format(new Date(e))}function u(e){if(!e)return null;try{let t=new URL(e);return t.protocol===`https:`||t.protocol===`http:`?t.toString():null}catch{return null}}function d({item:e,timeZone:t}){let n=new Date(e.startAt),r=new Intl.DateTimeFormat(`en-US`,{month:`short`,timeZone:t}).format(n),i=new Intl.DateTimeFormat(`en-US`,{day:`numeric`,timeZone:t}).format(n),s=c(e.startAt,t)===c(e.endAt,t)?l(e.endAt,t):`${c(e.endAt,t)} at ${l(e.endAt,t)}`,d=u(e.link);return a(`li`,{className:`lockerverse-public-events__item`,children:o(`article`,{className:`lockerverse-public-events__row`,children:[o(`div`,{"aria-hidden":`true`,className:`lockerverse-public-events__date`,children:[a(`span`,{className:`lockerverse-public-events__month`,children:r}),a(`span`,{className:`lockerverse-public-events__day`,children:i})]}),o(`div`,{className:`lockerverse-public-events__content`,children:[a(`h3`,{children:e.name}),o(`p`,{className:`lockerverse-public-events__time`,children:[o(`time`,{dateTime:e.startAt,children:[c(e.startAt,t),` at`,` `,l(e.startAt,t)]}),a(`span`,{"aria-hidden":`true`,children:` — `}),a(`time`,{dateTime:e.endAt,children:s})]}),e.location?a(`p`,{className:`lockerverse-public-events__place`,children:e.location}):null,e.description?a(`p`,{className:`lockerverse-public-events__description`,children:e.description}):null,d?o(`a`,{className:`lockerverse-public-events__link`,href:d,rel:`noopener noreferrer`,target:`_blank`,children:[`View event `,a(`span`,{"aria-hidden":`true`,children:`↗`})]}):null]})]})})}function f({events:e,title:t=`Events`,showHeading:n=!0,emptyMessage:r=`No events yet.`,timeZone:i=`America/New_York`,theme:s=`dark`,style:c,className:l}){return o(`section`,{"aria-busy":e.loading,"aria-label":t,className:[`lockerverse-public-events`,l].filter(Boolean).join(` `),"data-lockerverse-theme":s,style:c,children:[n?a(`h2`,{children:t}):null,e.loading&&!e.events?a(`p`,{role:`status`,children:`Loading events…`}):null,e.error?o(`div`,{role:`alert`,children:[a(`p`,{children:e.error.message}),a(`button`,{onClick:e.refresh,type:`button`,children:`Try again`})]}):null,e.events?.length===0?a(`p`,{className:`lockerverse-public-events__empty`,children:r}):null,e.events&&e.events.length>0?a(`ol`,{className:`lockerverse-public-events__list`,children:e.events.map(e=>a(d,{item:e,timeZone:i},e.id))}):null]})}function p(a){e(`public events`,{apiBaseUrl:a.apiBaseUrl,communitySlug:a.communitySlug,environment:a.environment,slug:``});let o=r(a.onError);o.current=a.onError;let[c]=i(()=>s({...a,onError:e=>o.current?.(e)})),[l,u]=i(0),[d,f]=i({error:null,events:null,loading:!0});n(()=>{let e=!0;return c.list().then(t=>{e&&f({error:null,events:t,loading:!1})},t=>{e&&f(e=>({...e,error:t,loading:!1}))}),()=>{e=!1}},[c,l]);let p=t(()=>{f(e=>({...e,error:null,loading:!0})),u(e=>e+1)},[]);return{...d,client:c,refresh:p}}export{f as LockerversePublicEvents,p as useLockerversePublicEvents};
+//# sourceMappingURL=public-events.js.map

package/dist/public-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-events.js","names":[],"sources":["../src/lockerverse-public-events.tsx","../src/use-lockerverse-public-events.ts"],"sourcesContent":["import type { LockerversePublicEvent } from \"@lockerverse/sdk/public-events\";\nimport type { LockerverseStyle, LockerverseTheme } from \"./theme.ts\";\nimport type { UseLockerversePublicEventsResult } from \"./use-lockerverse-public-events.ts\";\n\nexport type LockerversePublicEventsProps = {\n  events: UseLockerversePublicEventsResult;\n  /** The visible heading. Defaults to Events. */\n  title?: string;\n  showHeading?: boolean;\n  emptyMessage?: string;\n  /** Used to show dates and times. Defaults to America/New_York. */\n  timeZone?: string;\n  theme?: LockerverseTheme;\n  style?: LockerverseStyle;\n  className?: string;\n};\n\nfunction formatDate(value: string, timeZone: string) {\n  return new Intl.DateTimeFormat(\"en-US\", {\n    day: \"numeric\",\n    month: \"short\",\n    timeZone,\n    year: \"numeric\",\n  }).format(new Date(value));\n}\n\nfunction formatTime(value: string, timeZone: string) {\n  return new Intl.DateTimeFormat(\"en-US\", {\n    hour: \"numeric\",\n    minute: \"2-digit\",\n    timeZone,\n    timeZoneName: \"short\",\n  }).format(new Date(value));\n}\n\nfunction getLink(value: string | null) {\n  if (!value) {\n    return null;\n  }\n  try {\n    const url = new URL(value);\n    return url.protocol === \"https:\" || url.protocol === \"http:\"\n      ? url.toString()\n      : null;\n  } catch {\n    return null;\n  }\n}\n\nfunction PublicEventRow({\n  item,\n  timeZone,\n}: {\n  item: LockerversePublicEvent;\n  timeZone: string;\n}) {\n  const start = new Date(item.startAt);\n  const month = new Intl.DateTimeFormat(\"en-US\", {\n    month: \"short\",\n    timeZone,\n  }).format(start);\n  const day = new Intl.DateTimeFormat(\"en-US\", {\n    day: \"numeric\",\n    timeZone,\n  }).format(start);\n  const sameDay =\n    formatDate(item.startAt, timeZone) === formatDate(item.endAt, timeZone);\n  const endLabel = sameDay\n    ? formatTime(item.endAt, timeZone)\n    : `${formatDate(item.endAt, timeZone)} at ${formatTime(item.endAt, timeZone)}`;\n  const link = getLink(item.link);\n\n  return (\n    <li className=\"lockerverse-public-events__item\">\n      <article className=\"lockerverse-public-events__row\">\n        <div aria-hidden=\"true\" className=\"lockerverse-public-events__date\">\n          <span className=\"lockerverse-public-events__month\">{month}</span>\n          <span className=\"lockerverse-public-events__day\">{day}</span>\n        </div>\n        <div className=\"lockerverse-public-events__content\">\n          <h3>{item.name}</h3>\n          <p className=\"lockerverse-public-events__time\">\n            <time dateTime={item.startAt}>\n              {formatDate(item.startAt, timeZone)} at{\" \"}\n              {formatTime(item.startAt, timeZone)}\n            </time>\n            <span aria-hidden=\"true\"> — </span>\n            <time dateTime={item.endAt}>{endLabel}</time>\n          </p>\n          {item.location ? (\n            <p className=\"lockerverse-public-events__place\">{item.location}</p>\n          ) : null}\n          {item.description ? (\n            <p className=\"lockerverse-public-events__description\">\n              {item.description}\n            </p>\n          ) : null}\n          {link ? (\n            <a\n              className=\"lockerverse-public-events__link\"\n              href={link}\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n            >\n              View event <span aria-hidden=\"true\">↗</span>\n            </a>\n          ) : null}\n        </div>\n      </article>\n    </li>\n  );\n}\n\n/** Optional public list that can be embedded in any React site. */\nexport function LockerversePublicEvents({\n  events,\n  title = \"Events\",\n  showHeading = true,\n  emptyMessage = \"No events yet.\",\n  timeZone = \"America/New_York\",\n  theme = \"dark\",\n  style,\n  className,\n}: LockerversePublicEventsProps) {\n  return (\n    <section\n      aria-busy={events.loading}\n      aria-label={title}\n      className={[\"lockerverse-public-events\", className]\n        .filter(Boolean)\n        .join(\" \")}\n      data-lockerverse-theme={theme}\n      style={style}\n    >\n      {showHeading ? <h2>{title}</h2> : null}\n      {events.loading && !events.events ? (\n        <p role=\"status\">Loading events…</p>\n      ) : null}\n      {events.error ? (\n        <div role=\"alert\">\n          <p>{events.error.message}</p>\n          <button onClick={events.refresh} type=\"button\">\n            Try again\n          </button>\n        </div>\n      ) : null}\n      {events.events?.length === 0 ? (\n        <p className=\"lockerverse-public-events__empty\">{emptyMessage}</p>\n      ) : null}\n      {events.events && events.events.length > 0 ? (\n        <ol className=\"lockerverse-public-events__list\">\n          {events.events.map((item) => (\n            <PublicEventRow item={item} key={item.id} timeZone={timeZone} />\n          ))}\n        </ol>\n      ) : null}\n    </section>\n  );\n}\n","import {\n  type CreateLockerversePublicEventsOptions,\n  createLockerversePublicEventsClient,\n  type LockerversePublicEvent,\n  type LockerversePublicEventsClient,\n  type LockerverseSdkError,\n} from \"@lockerverse/sdk/public-events\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useImmutableResourceIdentity } from \"./immutable-resource-identity.ts\";\n\nexport type UseLockerversePublicEventsResult = {\n  client: LockerversePublicEventsClient;\n  events: LockerversePublicEvent[] | null;\n  loading: boolean;\n  error: LockerverseSdkError | null;\n  refresh: () => void;\n};\n\n/** Load the public events list for one community. */\nexport function useLockerversePublicEvents(\n  options: CreateLockerversePublicEventsOptions\n): UseLockerversePublicEventsResult {\n  useImmutableResourceIdentity(\"public events\", {\n    apiBaseUrl: options.apiBaseUrl,\n    communitySlug: options.communitySlug,\n    environment: options.environment,\n    slug: \"\",\n  });\n  const onErrorRef = useRef(options.onError);\n  onErrorRef.current = options.onError;\n  const [client] = useState(() =>\n    createLockerversePublicEventsClient({\n      ...options,\n      onError: (error) => onErrorRef.current?.(error),\n    })\n  );\n  const [revision, setRevision] = useState(0);\n  const [state, setState] = useState<\n    Pick<UseLockerversePublicEventsResult, \"events\" | \"loading\" | \"error\">\n  >({ error: null, events: null, loading: true });\n\n  useEffect(() => {\n    let active = true;\n    client.list().then(\n      (events) => {\n        if (active) {\n          setState({ error: null, events, loading: false });\n        }\n      },\n      (error: LockerverseSdkError) => {\n        if (active) {\n          setState((current) => ({ ...current, error, loading: false }));\n        }\n      }\n    );\n    return () => {\n      active = false;\n    };\n  }, [client, revision]);\n\n  const refresh = useCallback(() => {\n    setState((current) => ({ ...current, error: null, loading: true }));\n    setRevision((current) => current + 1);\n  }, []);\n\n  return { ...state, client, refresh };\n}\n"],"mappings":"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"}

package/dist/signup.css

@@ -38,7 +38,7 @@
   font-size: 15px;
   line-height: 1.4;
   color: var(--lockerverse-text);
-  background: var(--lockerverse-bg);
+  background: transparent;
   border-radius: var(--lockerverse-radius);
 }
 
@@ -54,7 +54,6 @@
   );
   --lockerverse-subtle: var(--lockerverse-signup-subtle, rgb(18 20 22 / 8%));
   --lockerverse-text: var(--lockerverse-signup-text, #121416);
-  box-shadow: 0 18px 55px rgb(20 25 32 / 10%);
 }
 
 .lockerverse-signup *,

package/dist/styles.css

@@ -26,7 +26,7 @@
   font-size: 15px;
   line-height: 1.4;
   color: var(--lockerverse-text);
-  background: var(--lockerverse-bg);
+  background: transparent;
   border-radius: var(--lockerverse-radius);
 }
 
@@ -41,7 +41,6 @@
   --lockerverse-subtle: rgb(18 20 22 / 8%);
   --lockerverse-success: #157a42;
   --lockerverse-text: #121416;
-  box-shadow: 0 18px 55px rgb(20 25 32 / 10%);
 }
 
 .lockerverse-payment *,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lockerverse/react",
-  "version": "0.2.105",
+  "version": "0.2.108-dev.1",
   "description": "Tree-shakable React payment and signup UI for Lockerverse",
   "repository": {
     "type": "git",
@@ -21,7 +21,8 @@
     "./dist/auction.css",
     "./dist/auction-item.css",
     "./dist/auction-base.css",
-    "./dist/auction-item-layout.css"
+    "./dist/auction-item-layout.css",
+    "./dist/public-events.css"
   ],
   "type": "module",
   "exports": {
@@ -93,6 +94,15 @@
     "./auction-item.css": {
       "types": "./dist/styles.d.ts",
       "default": "./dist/auction-item.css"
+    },
+    "./public-events": {
+      "types": "./dist/public-events.d.ts",
+      "import": "./dist/public-events.js",
+      "default": "./dist/public-events.js"
+    },
+    "./public-events.css": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/public-events.css"
     }
   },
   "module": "./dist/index.js",
@@ -107,7 +117,7 @@
     "embla-carousel-react": "8.6.0",
     "lucide-react": "0.536.0",
     "valibot": "1.4.2",
-    "@lockerverse/sdk": "0.2.105"
+    "@lockerverse/sdk": "0.2.108-dev.1"
   },
   "devDependencies": {
     "@size-limit/file": "13.0.3",
@@ -129,8 +139,8 @@
   "peerDependencies": {
     "@stripe/react-stripe-js": "^6.8.0",
     "@stripe/stripe-js": "^9.12.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": "^18.2.0 || ^19.2.0",
+    "react-dom": "^18.2.0 || ^19.2.0"
   },
   "peerDependenciesMeta": {
     "@stripe/react-stripe-js": {