@sunboard/react 0.6.1 → 0.8.0

package/dist/styles.css

@@ -16,7 +16,7 @@
   --sunboard-checklist-background: #ffffff;
   --sunboard-checklist-foreground: #111827;
   --sunboard-checklist-border: #e5e7eb;
-  --sunboard-checklist-shadow: 0 18px 60px rgb(15 23 42 / 16%);
+  --sunboard-checklist-shadow: 0 4px 12px rgb(0 0 0 / 10%);
   --sunboard-checklist-muted: #f3f4f6;
   --sunboard-checklist-muted-foreground: #6b7280;
   --sunboard-checklist-primary: #2563eb;
@@ -25,13 +25,9 @@
 
   --sunboard-launcher-background: var(--sunboard-checklist-primary);
   --sunboard-launcher-foreground: var(--sunboard-checklist-primary-foreground);
-  --sunboard-launcher-border: var(--sunboard-checklist-border);
   --sunboard-launcher-shadow: var(--sunboard-checklist-shadow);
-  --sunboard-launcher-count-background: color-mix(
-    in srgb,
-    var(--sunboard-launcher-foreground) 18%,
-    transparent
-  );
+  --sunboard-launcher-badge-background: #ef4444;
+  --sunboard-launcher-badge-foreground: #ffffff;
 
   --sunboard-tour-background: var(--sunboard-checklist-background);
   --sunboard-tour-foreground: var(--sunboard-checklist-foreground);
@@ -91,7 +87,7 @@
   width: 56px;
   height: 56px;
   place-items: center;
-  border: 1px solid var(--sunboard-launcher-border);
+  border: 0;
   border-radius: 999px;
   background: var(--sunboard-launcher-background);
   box-shadow: var(--sunboard-launcher-shadow);
@@ -99,18 +95,34 @@
   cursor: pointer;
   font-family: var(--sunboard-font);
   padding: 0;
+  transition: transform 160ms ease;
 }
 
-.sunboard-launcher-count {
-  display: grid;
-  min-width: 24px;
+.sunboard-launcher:hover {
+  transform: scale(1.05);
+}
+
+.sunboard-launcher svg {
+  width: 24px;
   height: 24px;
+}
+
+.sunboard-launcher-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: grid;
+  min-width: 22px;
+  height: 22px;
   place-items: center;
   border-radius: 999px;
-  background: var(--sunboard-launcher-count-background);
-  font-size: 14px;
-  font-weight: 800;
+  background: var(--sunboard-launcher-badge-background);
+  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  color: var(--sunboard-launcher-badge-foreground);
+  font-size: 12px;
+  font-weight: 700;
   line-height: 1;
+  padding: 0 6px;
 }
 
 .sunboard-launcher:focus-visible,
@@ -174,21 +186,26 @@
 
 .sunboard-close {
   display: grid;
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   place-items: center;
-  border: 1px solid var(--sunboard-checklist-border);
+  border: 0;
   border-radius: 999px;
-  background: var(--sunboard-checklist-background);
+  background: transparent;
   color: var(--sunboard-checklist-muted-foreground);
   cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  font-weight: 800;
-  line-height: 1;
   padding: 0;
 }
 
+.sunboard-close:hover {
+  background: var(--sunboard-checklist-muted);
+}
+
+.sunboard-close svg {
+  width: 14px;
+  height: 14px;
+}
+
 .sunboard-progress {
   height: 8px;
   overflow: hidden;
@@ -206,58 +223,99 @@
 
 .sunboard-step-list {
   display: grid;
-  gap: 20px;
+  gap: 4px;
   list-style: none;
-  margin: 16px 0 0;
+  margin: 8px 0 0;
   padding: 0;
 }
 
 .sunboard-step-row {
   display: grid;
   width: 100%;
-  grid-template-columns: 24px minmax(0, 1fr);
-  gap: 10px;
+  grid-template-columns: 20px minmax(0, 1fr);
+  gap: 12px;
   align-items: start;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: default;
-  font: inherit;
-  text-align: left;
-  padding: 6px;
-  margin: -6px;
+  padding: 10px 8px;
+  margin: 0 -8px;
   border-radius: 8px;
 }
 
-button.sunboard-step-row {
-  cursor: pointer;
+/* Hovering anywhere on a row with something to click (an action, a checkable
+   checkbox, or both) highlights the whole row, like the old row-button did. */
+.sunboard-step-row[data-interactive="true"]:hover {
+  background: var(--sunboard-checklist-muted);
 }
 
-button.sunboard-step-row:hover {
-  background: var(--sunboard-checklist-muted);
+.sunboard-step-main {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) 16px;
+  gap: 12px;
+  align-items: start;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  padding: 0;
+  margin: 0;
+  border-radius: 4px;
 }
 
-button.sunboard-step-row:focus-visible {
+.sunboard-step-main:focus-visible {
   outline: 2px solid var(--sunboard-checklist-primary);
   outline-offset: 2px;
 }
 
 .sunboard-step-status {
   display: grid;
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
   place-items: center;
-  border: 1px solid var(--sunboard-checklist-border);
-  border-radius: 999px;
+  border: 2px solid var(--sunboard-checklist-border);
+  border-radius: 6px;
+  background: transparent;
+  padding: 0;
   color: var(--sunboard-checklist-primary-foreground);
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 1;
 }
 
 .sunboard-step-status svg {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
+  stroke-width: 3;
+}
+
+/* Checkable: the status is a button; preview the check on hover/focus. */
+button.sunboard-step-status {
+  cursor: pointer;
+}
+
+button.sunboard-step-status svg {
+  opacity: 0;
+  color: var(--sunboard-checklist-muted-foreground);
+  transition: opacity 120ms ease;
+}
+
+button.sunboard-step-status:hover,
+button.sunboard-step-status:focus-visible {
+  border-color: var(--sunboard-checklist-success);
+}
+
+button.sunboard-step-status:hover svg,
+button.sunboard-step-status:focus-visible svg {
+  opacity: 1;
+}
+
+button.sunboard-step-status:focus-visible {
+  outline: 2px solid var(--sunboard-checklist-primary);
+  outline-offset: 2px;
+}
+
+/* manual: false and not yet complete: the checkbox is inert and says so. */
+.sunboard-step-status[data-locked="true"] {
+  border-style: dashed;
+  opacity: 0.55;
 }
 
 .sunboard-step[data-completed="true"] .sunboard-step-status {
@@ -265,6 +323,24 @@ button.sunboard-step-row:focus-visible {
   background: var(--sunboard-checklist-success);
 }
 
+.sunboard-step[data-completed="true"] .sunboard-step-title {
+  color: var(--sunboard-checklist-muted-foreground);
+  text-decoration: line-through;
+}
+
+.sunboard-step-arrow {
+  display: grid;
+  width: 16px;
+  height: 20px;
+  place-items: center;
+  color: var(--sunboard-checklist-muted-foreground);
+}
+
+.sunboard-step-arrow svg {
+  width: 16px;
+  height: 16px;
+}
+
 .sunboard-step-content {
   min-width: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunboard/react",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "React SDK for the Sunboard onboarding runtime.",
   "license": "MIT",
   "type": "module",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
-    "@sunboard/core": "0.8.1"
+    "@sunboard/core": "0.9.0"
   },
   "peerDependencies": {
     "react": ">=18.3.0 || >=19.0.0",