@solhun/feedback-kit-web 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -854,7 +854,7 @@ var import_feedback_kit_core3 = require("@solhun/feedback-kit-core");
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = true ? "0.4.0" : "dev";
+var VERSION = true ? "0.5.0" : "dev";
 
 // src/feedback-kit.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1012,6 +1012,96 @@ var inputStyle = {
   padding: "10px 11px",
   font: "inherit"
 };
+function PickToggle({
+  active,
+  disabled,
+  variant,
+  focusId,
+  onToggle
+}) {
+  const floating = variant === "floating";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": active,
+      "aria-label": "\uC694\uC18C \uC9C0\uBAA9 \uBAA8\uB4DC",
+      "data-fk-pick-toggle": active ? "on" : "off",
+      "data-fk-focus-id": focusId,
+      disabled,
+      onClick: onToggle,
+      style: {
+        ...baseButton,
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        opacity: disabled ? 0.5 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        // 항상 값을 준다. 조건부로 빼면 리렌더 때 shorthand(border)와 충돌한다고 React 가 경고한다.
+        borderColor: active ? TOKENS.accent : TOKENS.line,
+        ...floating ? {
+          position: "fixed",
+          top: 16,
+          left: "50%",
+          transform: "translateX(-50%)",
+          // 오버레이 자체는 클릭을 통과시킨다(pointerEvents:none) — 이 토글만 되살린다.
+          pointerEvents: "auto",
+          background: TOKENS.surface,
+          boxShadow: TOKENS.shadow
+        } : {
+          width: "100%",
+          justifyContent: "space-between",
+          marginBottom: 16,
+          background: active ? "rgba(49, 93, 115, 0.06)" : TOKENS.surface
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", alignItems: "center", gap: 7 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: active ? TOKENS.accent : TOKENS.muted }, children: "\u25CE" }),
+          "\uC694\uC18C \uC9C0\uBAA9 \uBAA8\uB4DC"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { "aria-hidden": "true", style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: { fontSize: 12, fontWeight: 600, color: active ? TOKENS.accent : TOKENS.muted },
+              children: active ? "\uCF1C\uC9D0" : "\uAEBC\uC9D0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                position: "relative",
+                display: "inline-block",
+                width: 38,
+                height: 22,
+                borderRadius: 11,
+                background: active ? TOKENS.accent : TOKENS.line
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 3,
+                    left: active ? 19 : 3,
+                    width: 16,
+                    height: 16,
+                    borderRadius: "50%",
+                    background: TOKENS.surface,
+                    boxShadow: "0 1px 3px rgba(23, 32, 42, 0.35)"
+                  }
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function MarkerStatus({ status }) {
   const presentation = status === "sending" ? { icon: "\u21BB", text: "\uC804\uC1A1 \uC911", color: TOKENS.accent } : status === "done" ? { icon: "\u2713", text: "\uC644\uB8CC", color: TOKENS.success } : { icon: "\u25F7", text: "\uB300\uAE30", color: TOKENS.warning };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "inline-flex", gap: 4, alignItems: "center", color: presentation.color }, children: [
@@ -1120,8 +1210,12 @@ function FeedbackKit(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...OWN_UI_PROPS, "data-feedback-kit-loading": "true" });
   }
   const activeKit = kit;
-  const { modal, screen } = widgetState;
+  const { modal, screen, pickingActive } = widgetState;
   const draftLocked = modal.submitStatus === "sending" || modal.submitStatus === "pending";
+  function togglePicking() {
+    if (pickingActive) activeKit.widget.stopPicking();
+    else activeKit.widget.startPicking();
+  }
   async function withOwnUiHidden(action) {
     const root = rootRef.current;
     const previousVisibility = root?.style.visibility ?? "";
@@ -1193,8 +1287,7 @@ function FeedbackKit(props) {
             ref: floatingButtonRef,
             id: import_feedback_kit_core3.FLOATING_BUTTON_ID,
             type: "button",
-            disabled: screen === "picking",
-            "aria-label": screen === "picking" ? "\uC694\uC18C \uC9C0\uBAA9 \uC911" : "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
+            "aria-label": "\uD53C\uB4DC\uBC31 \uBCF4\uB0B4\uAE30",
             onClick: () => void openReport(),
             style: {
               ...primaryButton,
@@ -1205,11 +1298,9 @@ function FeedbackKit(props) {
               minWidth: 112,
               minHeight: 46,
               borderRadius: 24,
-              boxShadow: TOKENS.shadow,
-              opacity: screen === "picking" ? 0.76 : 1,
-              cursor: screen === "picking" ? "default" : "pointer"
+              boxShadow: TOKENS.shadow
             },
-            children: screen === "picking" ? "\uC9C0\uBAA9 \uC911" : "\uD53C\uB4DC\uBC31"
+            children: "\uD53C\uB4DC\uBC31"
           }
         ) : null,
         announcement && !modal.open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1293,7 +1384,17 @@ function FeedbackKit(props) {
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "0 0 18px", color: TOKENS.muted }, children: "\uD604\uC7AC \uD654\uBA74\uC758 \uBB38\uC81C\uB098 \uC758\uACAC\uC744 \uB0A8\uACA8\uC8FC\uC138\uC694." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "0 0 14px", color: TOKENS.muted }, children: "\uD604\uC7AC \uD654\uBA74\uC758 \uBB38\uC81C\uB098 \uC758\uACAC\uC744 \uB0A8\uACA8\uC8FC\uC138\uC694." }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      PickToggle,
+                      {
+                        variant: "inline",
+                        active: pickingActive,
+                        disabled: draftLocked,
+                        focusId: import_feedback_kit_core3.MODAL_ACTION_PICK,
+                        onToggle: togglePicking
+                      }
+                    ),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { "aria-labelledby": "feedback-kit-screenshot-label", style: { marginBottom: 16 }, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { id: "feedback-kit-screenshot-label", children: "\uC2A4\uD06C\uB9B0\uC0F7" }),
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1407,19 +1508,6 @@ function FeedbackKit(props) {
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        role: "switch",
-                        "aria-checked": "false",
-                        disabled: draftLocked,
-                        "data-fk-focus-id": import_feedback_kit_core3.MODAL_ACTION_PICK,
-                        onClick: () => kit.widget.startPicking(),
-                        style: { ...baseButton, width: "100%", marginTop: 16 },
-                        children: "\uC694\uC18C \uC9C0\uBAA9"
-                      }
-                    ),
                     modal.submitStatus !== "idle" || modal.pending > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                       "div",
                       {
@@ -1542,22 +1630,7 @@ function FeedbackKit(props) {
                   }
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => kit.widget.stopPicking(),
-                  style: {
-                    ...primaryButton,
-                    position: "fixed",
-                    top: 18,
-                    right: 18,
-                    pointerEvents: "auto",
-                    boxShadow: TOKENS.shadow
-                  },
-                  children: "\uC9C0\uBAA9 \uC885\uB8CC"
-                }
-              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PickToggle, { variant: "floating", active: true, onToggle: togglePicking }),
               pickingState.markers.map((marker, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "div",
                 {