hive-react-kit 0.6.4 → 0.6.6

package/dist/build.css

@@ -313,6 +313,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -550,15 +553,24 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
   .ml-6 {
     margin-left: calc(var(--spacing) * 6);
   }
+  .ml-7 {
+    margin-left: calc(var(--spacing) * 7);
+  }
   .ml-8 {
     margin-left: calc(var(--spacing) * 8);
   }
+  .ml-9 {
+    margin-left: calc(var(--spacing) * 9);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -853,6 +865,9 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-\[250px\] {
+    max-width: 250px;
+  }
   .max-w-\[280px\] {
     max-width: 280px;
   }
@@ -1009,6 +1024,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1106,6 +1124,9 @@
   .gap-y-1 {
     row-gap: calc(var(--spacing) * 1);
   }
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -1120,6 +1141,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;
@@ -1270,6 +1299,12 @@
       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);
   }
@@ -1339,6 +1374,12 @@
       background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
     }
   }
+  .bg-black\/40 {
+    background-color: color-mix(in srgb, #000 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+    }
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1510,6 +1551,12 @@
       background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
     }
   }
+  .bg-gray-900\/95 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 95%, transparent);
+    }
+  }
   .bg-gray-950 {
     background-color: var(--color-gray-950);
   }
@@ -1534,6 +1581,12 @@
       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)) {
@@ -1933,6 +1986,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[9px\] {
+    font-size: 9px;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2075,6 +2131,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);
   }
@@ -2196,6 +2255,10 @@
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_-4px_20px_rgba\(0\,0\,0\,0\.5\)\] {
+    --tw-shadow: 0 -4px 20px var(--tw-shadow-color, rgba(0,0,0,0.5));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2506,6 +2569,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) {
@@ -2715,6 +2788,13 @@
       }
     }
   }
+  .hover\:opacity-90 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 90%;
+      }
+    }
+  }
   .hover\:opacity-100 {
     &:hover {
       @media (hover: hover) {
@@ -3065,6 +3145,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);
@@ -3075,6 +3160,11 @@
       margin-left: calc(var(--spacing) * 8);
     }
   }
+  .md\:ml-9 {
+    @media (width >= 48rem) {
+      margin-left: calc(var(--spacing) * 9);
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -3095,6 +3185,11 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .md\:h-7 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 7);
+    }
+  }
   .md\:h-10 {
     @media (width >= 48rem) {
       height: calc(var(--spacing) * 10);
@@ -3110,6 +3205,11 @@
       width: calc(var(--spacing) * 4);
     }
   }
+  .md\:w-7 {
+    @media (width >= 48rem) {
+      width: calc(var(--spacing) * 7);
+    }
+  }
   .md\:w-10 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 10);
@@ -3155,6 +3255,11 @@
       align-items: center;
     }
   }
+  .md\:gap-2 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 2);
+    }
+  }
   .md\:space-y-4 {
     @media (width >= 48rem) {
       :where(& > :not(:last-child)) {
@@ -3211,16 +3316,31 @@
       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);
     }
   }
+  .md\:py-3 {
+    @media (width >= 48rem) {
+      padding-block: calc(var(--spacing) * 3);
+    }
+  }
   .md\:py-6 {
     @media (width >= 48rem) {
       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);
@@ -3262,6 +3382,11 @@
       line-height: var(--tw-leading, var(--text-xl--line-height));
     }
   }
+  .md\:text-\[10px\] {
+    @media (width >= 48rem) {
+      font-size: 10px;
+    }
+  }
   .lg\:col-span-2 {
     @media (width >= 64rem) {
       grid-column: span 2 / span 2;

package/dist/components/HiveDetailPost.d.ts

@@ -9,6 +9,9 @@ export interface HiveDetailPostProps {
     onShare?: () => void;
     onTip?: () => void;
     onReport?: () => void;
+    onShareComment?: (author: string, permlink: string) => void;
+    onTipComment?: (author: string, permlink: string) => void;
+    onReportComment?: (author: string, permlink: string) => void;
     /**
      * Called when the user submits a poll vote.
      * @param author - post author
@@ -21,12 +24,21 @@ export interface HiveDetailPostProps {
     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, onVotePoll, }: HiveDetailPostProps): import("react/jsx-runtime").JSX.Element;
+export declare function HiveDetailPost({ author, permlink, currentUser, onUpvote, onSubmitComment, onClickCommentUpvote, onReblog, onShare, onTip, onReport, onShareComment, onTipComment, onReportComment, 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,27 @@
+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;
+    hiveIconUrl?: string;
+    onShareComment?: (author: string, permlink: string) => void;
+    onTipComment?: (author: string, permlink: string) => void;
+    onReportComment?: (author: string, permlink: string) => void;
+}
+export default function InlineCommentItem({ comment, allComments, onReply, onCancelReply, onCommentSubmit, activeReplyKey, currentUser, token, depth, onVotedRefresh, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hiveIconUrl, onShareComment, onTipComment, onReportComment, }: InlineCommentItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+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;
+    }[];
+    hiveIconUrl?: string;
+    onShareComment?: (author: string, permlink: string) => void;
+    onTipComment?: (author: string, permlink: string) => void;
+    onReportComment?: (author: string, permlink: string) => void;
+}
+export default function InlineCommentSection({ author, permlink, currentUser, token, onSubmitComment, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, reportedAuthors, reportedPosts, hiveIconUrl, onShareComment, onTipComment, onReportComment, }: InlineCommentSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/user/UserDetailProfile.d.ts

@@ -47,6 +47,8 @@ export interface UserDetailProfileProps {
     onActivitySelect?: (activity: any) => void;
     onShare?: (username: string) => void;
     onSharePost?: (author: string, permlink: string) => void;
+    /** When provided, clicking the comment icon navigates to the post detail instead of opening the comments modal. */
+    onCommentClick?: (author: string, permlink: string) => void;
 }
 type TabType = "blogs" | "posts" | "snaps" | "polls" | "comments" | "replies" | "activities" | "authorRewards" | "curationRewards" | "followers" | "following" | "wallet" | "votingPower" | "badges" | "witnessVotes";
 declare const UserDetailProfile: React.FC<UserDetailProfileProps>;