hive-react-kit 0.9.6 → 0.9.7

package/dist/build.css

@@ -65,6 +65,7 @@
     --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-purple-900: oklch(38.1% 0.176 304.987);
+    --color-pink-400: oklch(71.8% 0.202 349.761);
     --color-rose-400: oklch(71.2% 0.194 13.428);
     --color-slate-50: oklch(98.4% 0.003 247.858);
     --color-slate-800: oklch(27.9% 0.041 260.031);
@@ -833,9 +834,15 @@
   .w-4\/5 {
     width: calc(4 / 5 * 100%);
   }
+  .w-4\/6 {
+    width: calc(4 / 6 * 100%);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-5\/6 {
+    width: calc(5 / 6 * 100%);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -851,6 +858,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-11\/12 {
+    width: calc(11 / 12 * 100%);
+  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -1108,6 +1118,13 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-1\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1188,6 +1205,11 @@
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
+  .divide-\[\#3a424a\] {
+    :where(& > :not(:last-child)) {
+      border-color: #3a424a;
+    }
+  }
   .divide-gray-700 {
     :where(& > :not(:last-child)) {
       border-color: var(--color-gray-700);
@@ -1218,6 +1240,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1291,6 +1316,15 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-\[\#3a424a\] {
+    border-color: #3a424a;
+  }
+  .border-\[\#3a424a\]\/60 {
+    border-color: color-mix(in oklab, #3a424a 60%, transparent);
+  }
+  .border-\[\#e31337\] {
+    border-color: #e31337;
+  }
   .border-amber-700\/40 {
     border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1423,6 +1457,24 @@
     background-color: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
+  .bg-\[\#2f353d\] {
+    background-color: #2f353d;
+  }
+  .bg-\[\#2f353d\]\/70 {
+    background-color: color-mix(in oklab, #2f353d 70%, transparent);
+  }
+  .bg-\[\#3a424a\] {
+    background-color: #3a424a;
+  }
+  .bg-\[\#262b30\] {
+    background-color: #262b30;
+  }
+  .bg-\[\#212529\] {
+    background-color: #212529;
+  }
+  .bg-\[\#e31337\] {
+    background-color: #e31337;
+  }
   .bg-amber-500\/15 {
     background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1741,6 +1793,12 @@
   .bg-red-900 {
     background-color: var(--color-red-900);
   }
+  .bg-red-900\/20 {
+    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
+    }
+  }
   .bg-sky-500\/20 {
     background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1976,6 +2034,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -2173,6 +2234,24 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-\[\#3a424a\] {
+    color: #3a424a;
+  }
+  .text-\[\#6f7780\] {
+    color: #6f7780;
+  }
+  .text-\[\#9ca3b0\] {
+    color: #9ca3b0;
+  }
+  .text-\[\#e7e7f1\] {
+    color: #e7e7f1;
+  }
+  .text-\[\#e31337\] {
+    color: #e31337;
+  }
+  .text-\[\#f0f0f8\] {
+    color: #f0f0f8;
+  }
   .text-amber-300 {
     color: var(--color-amber-300);
   }
@@ -2263,6 +2342,9 @@
   .text-orange-400 {
     color: var(--color-orange-400);
   }
+  .text-pink-400 {
+    color: var(--color-pink-400);
+  }
   .text-purple-200 {
     color: var(--color-purple-200);
   }
@@ -2348,6 +2430,11 @@
   .underline {
     text-decoration-line: underline;
   }
+  .placeholder-\[\#9ca3b0\] {
+    &::placeholder {
+      color: #9ca3b0;
+    }
+  }
   .placeholder-gray-400 {
     &::placeholder {
       color: var(--color-gray-400);
@@ -2621,6 +2708,13 @@
       }
     }
   }
+  .hover\:border-\[\#e31337\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: #e31337;
+      }
+    }
+  }
   .hover\:border-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -2645,6 +2739,20 @@
       }
     }
   }
+  .hover\:bg-\[\#2f353d\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #2f353d;
+      }
+    }
+  }
+  .hover\:bg-\[\#262b30\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: #262b30;
+      }
+    }
+  }
   .hover\:bg-black\/60 {
     &:hover {
       @media (hover: hover) {
@@ -2799,13 +2907,6 @@
       }
     }
   }
-  .hover\:bg-slate-800 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-slate-800);
-      }
-    }
-  }
   .hover\:bg-white\/20 {
     &:hover {
       @media (hover: hover) {
@@ -2852,6 +2953,20 @@
       }
     }
   }
+  .hover\:text-\[\#e31337\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #e31337;
+      }
+    }
+  }
+  .hover\:text-\[\#f0f0f8\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #f0f0f8;
+      }
+    }
+  }
   .hover\:text-blue-300 {
     &:hover {
       @media (hover: hover) {
@@ -3012,6 +3127,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-\[\#e31337\] {
+    &:focus {
+      --tw-ring-color: #e31337;
+    }
+  }
   .focus\:ring-blue-500 {
     &:focus {
       --tw-ring-color: var(--color-blue-500);
@@ -3829,6 +3949,15 @@
       }
     }
   }
+  .dark\:hover\:bg-\[\#2f353d\] {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: #2f353d;
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-gray-600 {
     @media (prefers-color-scheme: dark) {
       &:hover {

package/dist/components/BlogPostList.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Standalone "Blogs" feed list — same per-post card layout as the Blogs tab
+ * in <UserDetailProfile/>, but accepts a `posts: Post[]` array directly so
+ * the consumer owns the data source (per-user blogs, global trending,
+ * tag-filtered, search results, etc.).
+ *
+ * Cards render: avatar + side image carousel + author/time + title + body
+ * preview + community tag, and a <PostActionButton/> action bar at the
+ * bottom (upvote / comment / reblog / share / tip / report).
+ *
+ * Helpers (`formatTimeAgo`, `extractPlainText`, `PostImageCarousel`) are
+ * inlined here to keep the component self-contained — they mirror the
+ * implementations in UserDetailProfile and can be lifted to a shared util
+ * module later if more lists need them.
+ */
+import { type FC } from 'react';
+import type { Post } from '@/types/post';
+import type { RewardOption } from '../utils/commentOptions';
+export interface BlogPostListProps {
+    /** Post records, in the order they should render. */
+    posts: Post[];
+    /** Logged-in username (used by the action bar's auth-gated buttons). */
+    currentUser?: string;
+    /** Initial-page loader spinner. */
+    loading?: boolean;
+    /** Pagination loader (shown at the bottom while fetching the next page). */
+    loadingMore?: boolean;
+    /** True when more pages are available. Drives "Load more" + observer. */
+    hasMore?: boolean;
+    /** Called when the user requests the next page (button click or scroll). */
+    onLoadMore?: () => void;
+    /** Optional empty-state message override. */
+    emptyMessage?: string;
+    onUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    onSubmitComment?: (parentAuthor: string, parentPermlink: string, body: string) => void | Promise<void>;
+    onClickCommentUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    onReblog?: (author: string, permlink: string) => void;
+    onTip?: (author: string, permlink: string) => void;
+    onSharePost?: (author: string, permlink: string) => void;
+    onCommentClick?: (author: string, permlink: string) => void;
+    onReportPost?: (author: string, permlink: string) => void;
+    onUserClick?: (username: string) => void;
+    onPostClick?: (author: string, permlink: string, title?: string) => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    defaultVotePercent?: number;
+    voteWeightStep?: number;
+    /** Allow landscape video uploads in the inline comment composer. */
+    allowLandscapeVideos?: boolean;
+    /** Default reward routing for inline comment composers. */
+    defaultReward?: RewardOption;
+}
+export declare const BlogPostList: FC<BlogPostListProps>;
+export default BlogPostList;

package/dist/components/community/CommunitiesList.d.ts

@@ -1,5 +1,6 @@
 interface CommunitiesListProps {
     onSelectCommunity: (communityId: string) => void;
+    /** Visual variant. Default `"dark"` — uses hivesuite Hive-red tokens. */
     theme?: "light" | "dark";
 }
 declare const CommunitiesList: ({ onSelectCommunity, theme, }: CommunitiesListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/community/CommunityDetail.d.ts

@@ -1,16 +1,32 @@
-interface CommunityDetailProps {
+import type { RewardOption } from '../../utils/commentOptions';
+export interface CommunityDetailProps {
+    /** Community id (e.g. `hive-167922`). */
     communityId: string;
-    onVideoClick: (video: any) => void;
-    onAuthorClick: (author: string) => void;
+    /** Logged-in observer username — drives feed personalisation + auth-gated actions. */
+    currentUser?: string;
+    /** Back-arrow handler. */
     onBack: () => void;
-    onclickAboutTab?: () => void;
-    onclickTeamTab?: () => void;
-    onclickMemberTab?: () => void;
+    onUserClick?: (username: string) => void;
+    onPostClick?: (author: string, permlink: string, title?: string) => void;
+    onCommentClick?: (author: string, permlink: string) => void;
+    onUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    onSubmitComment?: (parentAuthor: string, parentPermlink: string, body: string) => void | Promise<void>;
+    onClickCommentUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    onReblog?: (author: string, permlink: string) => void;
+    onTip?: (author: string, permlink: string) => void;
+    onSharePost?: (author: string, permlink: string) => void;
+    onReportPost?: (author: string, permlink: string) => void;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
+    defaultVotePercent?: number;
+    voteWeightStep?: number;
+    allowLandscapeVideos?: boolean;
+    defaultReward?: RewardOption;
     onShare?: () => void;
-    onFavourite?: () => void;
     onRss?: () => void;
-    onMoreVertical?: () => void;
-    showMoreVertical?: boolean;
 }
-declare const CommunityDetail: ({ communityId, onVideoClick, onAuthorClick, onBack, onclickAboutTab, onclickTeamTab, onclickMemberTab, onShare, onFavourite, onRss, onMoreVertical, showMoreVertical, }: CommunityDetailProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommunityDetail: ({ communityId, currentUser, onBack, onUserClick, onPostClick, onCommentClick, onUpvote, onSubmitComment, onClickCommentUpvote, onReblog, onTip, onSharePost, onReportPost, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, defaultVotePercent, voteWeightStep, allowLandscapeVideos, defaultReward, onShare, onRss, }: CommunityDetailProps) => import("react/jsx-runtime").JSX.Element;
 export default CommunityDetail;