@snowcone-app/ui 0.8.1 → 0.8.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.8.3
+
+### Patch Changes
+
+- [#3131](https://github.com/snowcone-app/snowcone-monorepo/pull/3131) [`84f6ac3`](https://github.com/snowcone-app/snowcone-monorepo/commit/84f6ac38e54c57c483ff49c18548cd9ba832d30e) Thanks [@kevinsproles](https://github.com/kevinsproles)! - Realtime `spreadCrops` pieces can carry `part: { index, count }`: a placement cut into strips that sit on different spread artboards is assembled server-side once every strip has arrived.
+
+- Updated dependencies [[`84f6ac3`](https://github.com/snowcone-app/snowcone-monorepo/commit/84f6ac38e54c57c483ff49c18548cd9ba832d30e)]:
+  - @snowcone-app/sdk@0.24.2
+
+## 0.8.2
+
+### Patch Changes
+
+- Updated dependencies [[`1804866`](https://github.com/snowcone-app/snowcone-monorepo/commit/1804866916ee79bf7e3db0ea65ce803a1fc005b8)]:
+  - @snowcone-app/sdk@0.24.1
+
 ## 0.8.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -342,6 +342,7 @@ __export(src_exports, {
   isWideMonitor: () => isWideMonitor,
   kbdVariants: () => kbdVariants,
   linkVariants: () => linkVariants,
+  linkedPlacementsLabel: () => linkedPlacementsLabel,
   listProducts: () => import_sdk11.listProducts,
   normalizeHex: () => normalizeHex,
   observe: () => observe,
@@ -5750,6 +5751,11 @@ function PlacementClipShapeSelector() {
 // src/composed/PlacementTabs.tsx
 var import_react21 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
+function linkedPlacementsLabel(count) {
+  return count === 2 ? "Both sides" : `All ${count} areas`;
+}
+var ACTION_CLASS = "transition-colors duration-200 cursor-pointer text-muted-foreground hover:text-foreground underline underline-offset-4 decoration-muted-foreground/40 hover:decoration-foreground";
+var PILL_CLASS = "inline-flex items-center rounded-full bg-foreground/[0.08] px-3 py-1 font-medium text-foreground";
 function PlacementTabs({
   placements,
   selectedPlacement,
@@ -5757,7 +5763,13 @@ function PlacementTabs({
   isDesktop = false,
   toolbarPlaceholderId = "toolbar-placeholder",
   toolbarSize = 120,
-  className = ""
+  className = "",
+  linked,
+  onSplitAll,
+  onLinkAll,
+  linkedLabel,
+  splitAllLabel = "Customize separately",
+  linkAllLabel = "Use one design for all"
 }) {
   const containerRef = (0, import_react21.useRef)(null);
   const [lineHeight, setLineHeight] = (0, import_react21.useState)(24);
@@ -5774,7 +5786,7 @@ function PlacementTabs({
     if (isDesktop) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `flex justify-end w-full ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `flex justify-end w-full ${className}`, "data-placement-tabs": true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "span",
       {
         id: toolbarPlaceholderId,
@@ -5783,16 +5795,68 @@ function PlacementTabs({
       }
     ) });
   }
+  const dataLinked = linked === void 0 ? void 0 : linked ? "true" : "false";
+  const labels = placements.map((p) => p.label);
+  const renderItems = (tabClass) => {
+    if (linked === true) {
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "span",
+          {
+            className: `${tabClass} ${PILL_CLASS}`,
+            "data-placement-pill": true,
+            title: labels.join(" \xB7 "),
+            "aria-label": `One design on ${labels.join(", ")}`,
+            children: linkedLabel ?? linkedPlacementsLabel(placements.length)
+          }
+        ),
+        onSplitAll && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onSplitAll,
+            className: `${tabClass} ${ACTION_CLASS}`,
+            "data-action": "split-all",
+            children: splitAllLabel
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => onPlacementChange(p.label),
+          "data-placement-tab": p.label,
+          "aria-pressed": selectedPlacement === p.label,
+          className: `${tabClass} transition-all duration-200 cursor-pointer border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
+          children: p.label
+        },
+        p.label
+      )),
+      linked === false && onLinkAll && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onLinkAll,
+          className: `${tabClass} ${ACTION_CLASS}`,
+          "data-action": "link-all",
+          children: linkAllLabel
+        }
+      )
+    ] });
+  };
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: `flex flex-wrap gap-x-3 text-sm leading-relaxed w-full ${className}`, children: placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      "div",
       {
-        onClick: () => onPlacementChange(p.label),
-        className: `transition-all duration-200 cursor-pointer border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
-        children: p.label
-      },
-      p.label
-    )) });
+        className: `flex flex-wrap items-center gap-x-3 gap-y-1 text-sm leading-relaxed w-full ${className}`,
+        "data-placement-tabs": true,
+        "data-linked": dataLinked,
+        children: renderItems("")
+      }
+    );
   }
   const linesForToolbar = Math.ceil(toolbarSize / lineHeight);
   const shapeInsetPx = linesForToolbar * lineHeight;
@@ -5801,6 +5865,8 @@ function PlacementTabs({
     {
       ref: containerRef,
       className: `flex overflow-hidden text-sm leading-relaxed w-full ${className}`,
+      "data-placement-tabs": true,
+      "data-linked": dataLinked,
       children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "m-0 w-full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "span",
@@ -5819,15 +5885,7 @@ function PlacementTabs({
             )
           }
         ),
-        placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-          "button",
-          {
-            onClick: () => onPlacementChange(p.label),
-            className: `inline transition-all duration-200 cursor-pointer mr-3 border-b-2 ${selectedPlacement === p.label ? "text-foreground border-primary" : "text-foreground/70 hover:text-foreground border-muted-foreground/20 hover:border-muted-foreground/40"}`,
-            children: p.label
-          },
-          p.label
-        ))
+        renderItems("inline mr-3")
       ] })
     }
   );
@@ -16554,6 +16612,7 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
   isWideMonitor,
   kbdVariants,
   linkVariants,
+  linkedPlacementsLabel,
   listProducts,
   normalizeHex,
   observe,