hive-react-kit 0.6.3 → 0.6.4

package/README.md

@@ -279,6 +279,19 @@ import { HiveDetailPost } from 'hive-react-kit';
 | `onShare` | `() => void` | Called when share is clicked. Falls back to Web Share API / clipboard |
 | `onTip` | `() => void` | Called when tip is clicked |
 | `onReport` | `() => void` | Called when report is clicked |
+| `onVotePoll` | `(author: string, permlink: string, choiceNums: number[]) => void \| Promise<void>` | Called when user votes on a poll. `choiceNums` is an array of 1-based choice numbers |
+
+**Poll Voting Behaviour**
+
+When a post has `json_metadata.content_type === "poll"` the component renders a built-in poll widget:
+
+| Scenario | Behaviour |
+|----------|-----------|
+| Single-choice poll (`max_choices_voted === 1`) | Clicking a choice immediately calls `onVotePoll` |
+| Multi-choice poll (`max_choices_voted > 1`) | Checkboxes shown; selection capped at `max_choices_voted`; **Submit Vote** button appears once ≥ 1 option is selected |
+| Poll ended | Choices shown read-only with vote percentages; voting UI hidden |
+| Already voted (current session or via API) | Voted choices highlighted in green; "✓ Voted" shown in footer; voting UI hidden |
+| `onVotePoll` not provided | Poll results rendered read-only regardless of poll status |
 
 **Comment Composer Tokens**
 

package/dist/build.css

@@ -1225,6 +1225,12 @@
       border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
     }
   }
+  .border-blue-500\/60 {
+    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-blue-500) 60%, transparent);
+    }
+  }
   .border-blue-600 {
     border-color: var(--color-blue-600);
   }
@@ -1258,6 +1264,12 @@
   .border-gray-800 {
     border-color: var(--color-gray-800);
   }
+  .border-green-600\/60 {
+    border-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-green-600) 60%, transparent);
+    }
+  }
   .border-red-200 {
     border-color: var(--color-red-200);
   }
@@ -1444,6 +1456,12 @@
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
+  .bg-gray-700\/50 {
+    background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-700) 50%, transparent);
+    }
+  }
   .bg-gray-700\/60 {
     background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1459,6 +1477,12 @@
       background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
     }
   }
+  .bg-gray-800\/60 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
+    }
+  }
   .bg-gray-800\/95 {
     background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 95%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1504,6 +1528,18 @@
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
+  .bg-green-600\/20 {
+    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600) 20%, transparent);
+    }
+  }
+  .bg-green-900\/50 {
+    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-900) 50%, transparent);
+    }
+  }
   .bg-indigo-600 {
     background-color: var(--color-indigo-600);
   }
@@ -2027,6 +2063,9 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
+  .text-green-300 {
+    color: var(--color-green-300);
+  }
   .text-green-400 {
     color: var(--color-green-400);
   }
@@ -2143,6 +2182,9 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2775,6 +2817,11 @@
       background-color: var(--color-gray-700);
     }
   }
+  .disabled\:text-gray-500 {
+    &:disabled {
+      color: var(--color-gray-500);
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;

package/dist/components/HiveDetailPost.d.ts

@@ -9,6 +9,13 @@ export interface HiveDetailPostProps {
     onShare?: () => void;
     onTip?: () => void;
     onReport?: () => void;
+    /**
+     * Called when the user submits a poll vote.
+     * @param author - post author
+     * @param permlink - post permlink
+     * @param choiceNums - 1-based choice numbers selected by the user
+     */
+    onVotePoll?: (author: string, permlink: string, choiceNums: number[]) => void | Promise<void>;
     ecencyToken?: string;
     threeSpeakApiKey?: string;
     giphyApiKey?: string;
@@ -21,5 +28,5 @@ export interface HiveDetailPostProps {
     onBack?: () => void;
     onUserClick?: (username: string) => void;
 }
-export declare function HiveDetailPost({ author, permlink, currentUser, onUpvote, onSubmitComment, onClickCommentUpvote, onReblog, onShare, onTip, onReport, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hiveIconUrl, backgroundColor, onBack, onUserClick, }: HiveDetailPostProps): import("react/jsx-runtime").JSX.Element;
+export declare function HiveDetailPost({ author, permlink, currentUser, onUpvote, onSubmitComment, onClickCommentUpvote, onReblog, onShare, onTip, onReport, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hiveIconUrl, backgroundColor, onBack, onUserClick, onVotePoll, }: HiveDetailPostProps): import("react/jsx-runtime").JSX.Element;
 export default HiveDetailPost;