@lockerverse/react 0.2.41 → 0.2.42

package/dist/styles.css

@@ -98,15 +98,11 @@
 
 .lockerverse-payment__form,
 .lockerverse-payment__contact,
-.lockerverse-payment__tip,
 .lockerverse-payment__additional-fields,
-.lockerverse-payment__custom-fields,
 .lockerverse-payment__address,
 .lockerverse-payment__shipping,
 .lockerverse-payment__actions,
-.lockerverse-payment__stripe-element,
-.lockerverse-payment label,
-.lockerverse-payment__field {
+.lockerverse-payment__stripe-element {
   display: grid;
 }
 
@@ -114,43 +110,24 @@
   gap: 16px;
 }
 
-.lockerverse-payment__tip {
-  gap: 10px;
-  padding: 12px;
-  background: color-mix(in srgb, var(--lockerverse-control) 88%, transparent);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__tip > strong {
-  padding-bottom: 2px;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.lockerverse-payment__tip > div[role="radiogroup"] {
+.lockerverse-payment__input-fieldset {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.lockerverse-payment__money-input {
-  position: relative;
+  gap: 16px;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }
 
-.lockerverse-payment__money-input > span {
-  position: absolute;
-  top: 50%;
-  left: 13px;
-  z-index: 1;
-  color: var(--lockerverse-placeholder);
-  pointer-events: none;
-  transform: translateY(-50%);
+.lockerverse-payment [data-lockerverse-input-region][inert] {
+  opacity: 0.72;
 }
 
-.lockerverse-payment__money-input
-  input:not([type="checkbox"]):not([type="radio"]) {
-  padding-left: 28px;
+.lockerverse-payment__payment-status {
+  margin: 0;
+  font-size: 14px;
+  color: var(--lockerverse-muted);
+  outline: none;
 }
 
 .lockerverse-payment__contact {
@@ -164,7 +141,6 @@
 }
 
 .lockerverse-payment__additional-fields,
-.lockerverse-payment__custom-fields,
 .lockerverse-payment__shipping,
 .lockerverse-payment__actions {
   gap: 16px;
@@ -175,10 +151,25 @@
   gap: 12px;
 }
 
-.lockerverse-payment label,
-.lockerverse-payment fieldset,
-.lockerverse-payment__field {
-  gap: 8px;
+.lockerverse-payment__stripe-mount {
+  visibility: visible;
+  min-width: 0;
+  opacity: 1;
+  transition: opacity 120ms ease;
+}
+
+.lockerverse-payment__stripe-element[data-ready="false"] {
+  position: relative;
+}
+
+.lockerverse-payment__stripe-element[data-ready="false"]
+  > .lockerverse-payment__stripe-mount {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
 }
 
 .lockerverse-payment__actions {
@@ -186,8 +177,15 @@
   margin-top: 4px;
 }
 
+.lockerverse-payment label:not(.lockerverse-payment__check-row),
+.lockerverse-payment__field,
+.lockerverse-payment fieldset {
+  display: grid;
+  gap: 8px;
+}
+
 .lockerverse-payment label > span,
-.lockerverse-payment__field > span,
+.lockerverse-payment .lockerverse-payment__field > span,
 .lockerverse-payment legend,
 .lockerverse-payment h2 {
   font-size: 14px;
@@ -197,23 +195,16 @@
 }
 
 .lockerverse-payment h2 {
-  font-size: 15px;
   font-weight: 600;
-  line-height: 20px;
   color: var(--lockerverse-text);
 }
 
 .lockerverse-payment fieldset {
-  display: grid;
   padding: 0;
   margin: 0;
   border: 0;
 }
 
-.lockerverse-payment legend {
-  margin-bottom: 8px;
-}
-
 .lockerverse-payment input:not([type="checkbox"]):not([type="radio"]),
 .lockerverse-payment select,
 .lockerverse-payment textarea {
@@ -337,7 +328,6 @@
   line-height: 1.5;
   color: var(--lockerverse-text);
   text-align: left;
-  white-space: nowrap;
   cursor: pointer;
   background: var(--lockerverse-control);
   border: 1px solid var(--lockerverse-border);
@@ -511,23 +501,8 @@
   color: var(--lockerverse-accent);
 }
 
-.lockerverse-payment__choice {
+.lockerverse-payment__check-row {
   display: flex;
-  grid-template-columns: none;
-  gap: 9px;
-  align-items: center;
-}
-
-.lockerverse-payment__choice input {
-  flex: 0 0 auto;
-  width: 20px;
-  height: 20px;
-  accent-color: var(--lockerverse-accent);
-}
-
-.lockerverse-payment .lockerverse-payment__check-row {
-  display: flex;
-  grid-template-columns: none;
   gap: 12px;
   align-items: center;
   min-height: 28px;
@@ -538,12 +513,6 @@
   color: color-mix(in srgb, var(--lockerverse-text) 86%, transparent);
 }
 
-.lockerverse-payment .lockerverse-payment__check-row > span {
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 1.35;
-}
-
 .lockerverse-payment__check-row input {
   display: grid;
   flex: 0 0 auto;
@@ -583,109 +552,123 @@
   transform: translateY(-1px) rotate(-45deg) scale(1);
 }
 
-.lockerverse-payment__check-row input:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--lockerverse-accent) 24%, transparent);
+.lockerverse-payment__check-row input[type="radio"] {
+  border-radius: 50%;
 }
 
-.lockerverse-payment button:where(:not([role="combobox"])) {
-  min-height: 44px;
-  padding: 10px 16px;
-  font: inherit;
-  font-weight: 650;
-  color: var(--lockerverse-accent-contrast);
-  cursor: pointer;
-  background: var(--lockerverse-accent);
-  border: 1px solid transparent;
-  border-radius: var(--lockerverse-radius);
+.lockerverse-payment__check-row input[type="radio"]::before {
+  width: 10px;
+  height: 10px;
+  background: currentcolor;
+  border: 0;
+  border-radius: 50%;
+  transform: scale(0.6);
 }
 
-.lockerverse-payment button[type="submit"] {
-  width: 100%;
-  min-height: 48px;
-  padding: 12px;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.25;
-  box-shadow: 0 14px 34px rgb(0 0 0 / 34%);
-  transition:
-    filter 140ms ease,
-    transform 140ms ease;
+.lockerverse-payment__check-row input[type="radio"]:checked::before {
+  transform: scale(1);
 }
 
-.lockerverse-payment button[type="submit"]:hover {
-  filter: brightness(1.06);
+.lockerverse-payment__tip-box {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  background: var(--lockerverse-subtle);
+  border: 1px solid var(--lockerverse-subtle);
+  border-radius: var(--lockerverse-radius);
 }
 
-.lockerverse-payment button[type="submit"]:active {
-  transform: translateY(1px);
+.lockerverse-payment__tip-box > p {
+  padding-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
 }
 
-.lockerverse-payment button:disabled {
-  cursor: wait;
-  opacity: 0.72;
+.lockerverse-payment__tip-box [role="radiogroup"] {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
 }
 
-.lockerverse-payment__additional-fields button {
-  color: var(--lockerverse-text);
-  background: transparent;
-  border-color: var(--lockerverse-border);
+.lockerverse-payment__tip-choice {
+  position: relative;
+  min-width: 0;
 }
 
-.lockerverse-payment__payment-status button {
-  margin-top: 12px;
+.lockerverse-payment__tip-choice input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
 }
 
-.lockerverse-payment__tip > div[role="radiogroup"] button {
-  min-width: 0;
-  min-height: 38px;
+.lockerverse-payment .lockerverse-payment__tip-choice > span {
+  display: grid;
+  place-items: center;
+  min-height: 40px;
   padding: 8px 4px;
+  font: inherit;
   font-size: 14px;
+  font-weight: 600;
   color: var(--lockerverse-muted);
-  background: color-mix(in srgb, var(--lockerverse-bg) 68%, transparent);
-  border-color: var(--lockerverse-subtle);
+  cursor: pointer;
+  background: color-mix(in srgb, var(--lockerverse-bg) 28%, transparent);
+  border: 1px solid color-mix(in srgb, var(--lockerverse-text) 9%, transparent);
+  border-radius: var(--lockerverse-radius);
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease,
+    transform 140ms ease;
+}
+
+.lockerverse-payment__tip-choice:hover span {
+  color: var(--lockerverse-text);
+  background: var(--lockerverse-control);
+}
+
+.lockerverse-payment__tip-choice:active span {
+  transform: translateY(1px);
 }
 
-.lockerverse-payment__tip > div[role="radiogroup"] button[aria-pressed="true"] {
+.lockerverse-payment__tip-choice input:checked + span {
   color: var(--lockerverse-accent-contrast);
   background: var(--lockerverse-accent);
   border-color: var(--lockerverse-accent);
 }
 
-.lockerverse-payment__payment-status,
-.lockerverse-payment [role="alert"] {
-  font-size: 14px;
-  color: var(--lockerverse-danger);
-}
-
-.lockerverse-payment__stripe-element[hidden] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
+.lockerverse-payment__tip-choice input:focus-visible + span {
+  outline: none;
+  border-color: var(--lockerverse-accent);
+  box-shadow: 0 0 0 1px var(--lockerverse-accent);
 }
 
-.lockerverse-payment__stripe-mount {
-  visibility: visible;
-  min-width: 0;
-  opacity: 1;
-  transition: opacity 120ms ease;
+.lockerverse-payment__tip-box
+  [role="radiogroup"]
+  .lockerverse-payment__tip-choice:hover
+  input:checked
+  + span {
+  color: var(--lockerverse-accent-contrast);
+  background: var(--lockerverse-accent);
 }
 
-.lockerverse-payment__stripe-element[data-ready="false"] {
+.lockerverse-payment__money-input {
   position: relative;
+  display: block;
 }
 
-.lockerverse-payment__stripe-element[data-ready="false"]
-  > .lockerverse-payment__stripe-mount {
+.lockerverse-payment .lockerverse-payment__money-input > span {
   position: absolute;
-  inset: 0;
-  z-index: -1;
-  visibility: hidden;
+  top: 50%;
+  left: 13px;
+  z-index: 1;
+  color: var(--lockerverse-muted);
   pointer-events: none;
-  opacity: 0;
+  transform: translateY(-50%);
+}
+
+.lockerverse-payment__money-input input {
+  padding-left: 28px !important;
 }
 
 .lockerverse-payment__stripe-loader {
@@ -720,8 +703,16 @@
   background: color-mix(in srgb, var(--lockerverse-text) 6%, transparent);
 }
 
-.lockerverse-payment__loading {
-  min-height: 420px;
+.lockerverse-payment__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
 }
 
 .lockerverse-payment__skeleton {
@@ -735,23 +726,6 @@
   align-items: center;
 }
 
-.lockerverse-payment__skeleton-contact,
-.lockerverse-payment__skeleton-field,
-.lockerverse-payment__skeleton-loader-content,
-.lockerverse-payment__skeleton-actions {
-  display: grid;
-}
-
-.lockerverse-payment__skeleton-contact {
-  gap: 12px;
-  padding-top: 14px;
-  border-top: 1px solid var(--lockerverse-subtle);
-}
-
-.lockerverse-payment__skeleton-field {
-  gap: 8px;
-}
-
 .lockerverse-payment__skeleton-avatar,
 .lockerverse-payment__skeleton-community,
 .lockerverse-payment__skeleton-label,
@@ -779,22 +753,30 @@
   border-radius: 4px;
 }
 
+.lockerverse-payment__skeleton-contact {
+  display: grid;
+  gap: 12px;
+  padding-top: 14px;
+  border-top: 1px solid var(--lockerverse-subtle);
+}
+
+.lockerverse-payment__skeleton-field {
+  display: grid;
+  gap: 8px;
+}
+
 .lockerverse-payment__skeleton-label {
   width: 48px;
   height: 16px;
   border-radius: 4px;
 }
 
-.lockerverse-payment__skeleton-input,
-.lockerverse-payment__skeleton-button {
+.lockerverse-payment__skeleton-input {
   width: 100%;
   height: 48px;
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-input {
   background: var(--lockerverse-control);
   border: 1px solid var(--lockerverse-subtle);
+  border-radius: var(--lockerverse-radius);
 }
 
 .lockerverse-payment__skeleton-loader-block {
@@ -811,7 +793,7 @@
 }
 
 .lockerverse-payment__skeleton-loader-content {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: grid;
   gap: 8px;
   margin-top: 12px;
 }
@@ -823,15 +805,21 @@
 }
 
 .lockerverse-payment__skeleton-loader-full {
-  grid-column: 1 / -1;
   background: color-mix(in srgb, var(--lockerverse-text) 6%, transparent);
 }
 
+.lockerverse-payment__skeleton-loader-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
 .lockerverse-payment__skeleton-loader-half {
   background: color-mix(in srgb, var(--lockerverse-text) 4.5%, transparent);
 }
 
 .lockerverse-payment__skeleton-actions {
+  display: grid;
   gap: 16px;
   padding: 20px 0 4px;
 }
@@ -843,19 +831,54 @@
 }
 
 .lockerverse-payment__skeleton-button {
+  width: 100%;
+  height: 48px;
   background: color-mix(in srgb, var(--lockerverse-text) 12%, transparent);
+  border-radius: var(--lockerverse-radius);
 }
 
-.lockerverse-payment__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  white-space: nowrap;
+.lockerverse-payment button[type="submit"] {
+  width: 100%;
+  min-height: 48px;
+  padding: 12px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--lockerverse-accent-contrast);
+  cursor: pointer;
+  background: var(--lockerverse-accent);
   border: 0;
-  clip: rect(0, 0, 0, 0);
+  border-radius: var(--lockerverse-radius);
+  box-shadow: 0 14px 34px rgb(0 0 0 / 34%);
+  transition:
+    filter 140ms ease,
+    transform 140ms ease;
+}
+
+.lockerverse-payment button[type="submit"]:hover {
+  filter: brightness(1.06);
+}
+
+.lockerverse-payment button[type="submit"]:active {
+  transform: translateY(1px);
+}
+
+.lockerverse-payment button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+
+.lockerverse-payment [role="alert"],
+.lockerverse-payment [id$="-error"] {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--lockerverse-danger);
+}
+
+.lockerverse-payment__field-message:empty {
+  display: none;
 }
 
 @keyframes lockerverse-pulse {
@@ -864,6 +887,26 @@
   }
 }
 
+@container (max-width: 360px) {
+  .lockerverse-payment__phone-control {
+    grid-template-columns: 78px minmax(0, 1fr);
+  }
+
+  .lockerverse-payment__tip-box [role="radiogroup"] {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .lockerverse-payment__tip-choice {
+    grid-column: span 2;
+  }
+
+  .lockerverse-payment__tip-box
+    [role="radiogroup"]
+    .lockerverse-payment__tip-choice:nth-last-child(-n + 2) {
+    grid-column: span 3;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .lockerverse-payment *,
   .lockerverse-payment *::before,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lockerverse/react",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "description": "React payment UI for Lockerverse",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@base-ui/react": "1.6.0",
     "valibot": "1.4.2",
-    "@lockerverse/sdk": "0.2.41"
+    "@lockerverse/sdk": "0.2.42"
   },
   "devDependencies": {
     "@size-limit/file": "13.0.3",
@@ -63,7 +63,7 @@
   "size-limit": [
     {
       "name": "React payment UI",
-      "limit": "10 kB",
+      "limit": "9.25 kB",
       "path": "dist/index.js"
     },
     {