hive-react-kit 0.6.3 → 0.6.5

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

@@ -550,6 +550,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
@@ -559,6 +562,9 @@
   .ml-8 {
     margin-left: calc(var(--spacing) * 8);
   }
+  .ml-9 {
+    margin-left: calc(var(--spacing) * 9);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -853,6 +859,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-\[250px\] {
+    max-width: 250px;
+  }
   .max-w-\[280px\] {
     max-width: 280px;
   }
@@ -1009,6 +1018,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1120,6 +1132,14 @@
       border-color: var(--color-gray-700);
     }
   }
+  .divide-gray-800\/50 {
+    :where(& > :not(:last-child)) {
+      border-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
+      }
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1225,6 +1245,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 +1284,18 @@
   .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-green-800\/40 {
+    border-color: color-mix(in srgb, oklch(44.8% 0.119 151.328) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-green-800) 40%, transparent);
+    }
+  }
   .border-red-200 {
     border-color: var(--color-red-200);
   }
@@ -1444,6 +1482,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 +1503,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 +1554,24 @@
   .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\/10 {
+    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-900) 10%, 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 +2095,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);
   }
@@ -2036,6 +2107,9 @@
   .text-green-600 {
     color: var(--color-green-600);
   }
+  .text-green-700 {
+    color: var(--color-green-700);
+  }
   .text-green-800 {
     color: var(--color-green-800);
   }
@@ -2143,6 +2217,9 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .opacity-50 {
+    opacity: 50%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2464,6 +2541,16 @@
       }
     }
   }
+  .hover\:bg-gray-700\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-gray-700) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-gray-800 {
     &:hover {
       @media (hover: hover) {
@@ -2673,6 +2760,13 @@
       }
     }
   }
+  .hover\:opacity-90 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 90%;
+      }
+    }
+  }
   .hover\:opacity-100 {
     &:hover {
       @media (hover: hover) {
@@ -2775,6 +2869,11 @@
       background-color: var(--color-gray-700);
     }
   }
+  .disabled\:text-gray-500 {
+    &:disabled {
+      color: var(--color-gray-500);
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -3018,6 +3117,11 @@
       line-height: var(--tw-leading, var(--text-xs--line-height));
     }
   }
+  .md\:ml-6 {
+    @media (width >= 48rem) {
+      margin-left: calc(var(--spacing) * 6);
+    }
+  }
   .md\:ml-7 {
     @media (width >= 48rem) {
       margin-left: calc(var(--spacing) * 7);
@@ -3164,6 +3268,11 @@
       padding: calc(var(--spacing) * 8);
     }
   }
+  .md\:px-3 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -3174,6 +3283,11 @@
       padding-block: calc(var(--spacing) * 6);
     }
   }
+  .md\:pl-4 {
+    @media (width >= 48rem) {
+      padding-left: calc(var(--spacing) * 4);
+    }
+  }
   .md\:pl-6 {
     @media (width >= 48rem) {
       padding-left: calc(var(--spacing) * 6);

package/dist/components/HiveDetailPost.d.ts

@@ -9,17 +9,33 @@ 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;
     templateToken?: string;
     templateApiBaseUrl?: string;
+    /** Array of usernames whose comments should be hidden from the current user's view. */
+    reportedAuthors?: string[];
+    /** Array of {author, permlink} posts/comments to hide from the current user's view. */
+    reportedPosts?: {
+        author: string;
+        permlink: string;
+    }[];
     /** URL to a Hive logo icon shown next to the payout value. Defaults to "/images/hive_logo.png". */
     hiveIconUrl?: string;
     /** Background color for the component. Pass a single color string for a solid background, or an array of colors for a gradient (e.g. `["#0f172a", "#1e293b"]` or `["#1a1a2e", "#16213e", "#0f3460"]`). Defaults to gray-900. */
     backgroundColor?: string | string[];
     onBack?: () => void;
     onUserClick?: (username: string) => void;
+    /** Called when user clicks "View parent post" — navigate to the parent post. */
+    onNavigateToPost?: (author: string, permlink: 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, reportedAuthors, reportedPosts, hiveIconUrl, backgroundColor, onBack, onUserClick, onNavigateToPost, onVotePoll, }: HiveDetailPostProps): import("react/jsx-runtime").JSX.Element;
 export default HiveDetailPost;

package/dist/components/actionButtons/PostActionButton.d.ts

@@ -40,6 +40,8 @@ export interface PostActionButtonProps {
     templateToken?: string;
     /** Custom template API endpoint */
     templateApiBaseUrl?: string;
+    /** When true, clicking the comment icon calls onComments instead of opening the CommentsModal popup */
+    disableCommentsModal?: boolean;
 }
-export declare function PostActionButton({ author, permlink, currentUser: currentUserProp, hiveValue, hiveIconUrl, payoutTooltip, initialVotes, initialCommentsCount, onUpvote, onSubmitComment, onComments, onReblog, onShare, onTip, onReport, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PostActionButton({ author, permlink, currentUser: currentUserProp, hiveValue, hiveIconUrl, payoutTooltip, initialVotes, initialCommentsCount, onUpvote, onSubmitComment, onComments, onReblog, onShare, onTip, onReport, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, disableCommentsModal, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export default PostActionButton;

package/dist/components/comments/AddCommentInput.d.ts

@@ -60,11 +60,13 @@ export interface PostComposerProps {
     bgColor?: string;
     /** Custom border color for the composer container (e.g. "#3a424a", "transparent") */
     borderColor?: string;
+    /** Disable auto-focus on mount (default false). Use when the composer is always visible and shouldn't steal scroll. */
+    disableAutoFocus?: boolean;
 }
 /** @deprecated Use PostComposerProps instead */
 export type AddCommentInputProps = PostComposerProps;
-declare const PostComposer: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, hidePoll, onPollChange, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
+declare const PostComposer: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, hidePoll, onPollChange, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, disableAutoFocus, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated Use PostComposer instead */
-declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, hidePoll, onPollChange, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
+declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, hidePoll, onPollChange, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, disableAutoFocus, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
 export { PostComposer };
 export default AddCommentInput;

package/dist/components/inlineComments/InlineCommentItem.d.ts

@@ -0,0 +1,23 @@
+import { Discussion } from '@/types/comment';
+interface InlineCommentItemProps {
+    comment: Discussion;
+    allComments: Discussion[];
+    onReply: (author: string, permlink: string) => void;
+    onCancelReply: () => void;
+    onCommentSubmit: (parentAuthor: string, parentPermlink: string, body: string) => Promise<void>;
+    /** "author/permlink" key of the comment currently being replied to (null = none) */
+    activeReplyKey: string | null;
+    currentUser?: string;
+    token?: string;
+    depth?: number;
+    onVotedRefresh?: () => void;
+    onClickCommentUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    /** Composer props passed through */
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+}
+export default function InlineCommentItem({ comment, allComments, onReply, onCancelReply, onCommentSubmit, activeReplyKey, currentUser, token, depth, onVotedRefresh, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, }: InlineCommentItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inlineComments/InlineCommentSection.d.ts

@@ -0,0 +1,22 @@
+interface InlineCommentSectionProps {
+    author: string;
+    permlink: string;
+    currentUser?: string;
+    token?: string;
+    onSubmitComment?: (parentAuthor: string, parentPermlink: string, body: string) => void | Promise<void>;
+    onClickCommentUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    /** Usernames whose comments should be hidden for the current logged-in user. */
+    reportedAuthors?: string[];
+    /** Specific posts/comments to hide for the current logged-in user. */
+    reportedPosts?: {
+        author: string;
+        permlink: string;
+    }[];
+}
+export default function InlineCommentSection({ author, permlink, currentUser, token, onSubmitComment, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, reportedAuthors, reportedPosts, }: InlineCommentSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};