hive-react-kit 1.10.3 → 1.10.5

package/dist/build.css

@@ -59,6 +59,8 @@
     --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-indigo-600: oklch(51.1% 0.262 276.966);
+    --color-violet-200: oklch(89.4% 0.057 293.283);
+    --color-violet-400: oklch(70.2% 0.183 293.541);
     --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-purple-300: oklch(82.7% 0.119 306.383);
@@ -71,6 +73,8 @@
     --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-300: oklch(86.9% 0.022 252.894);
+    --color-slate-400: oklch(70.4% 0.04 256.788);
     --color-slate-800: oklch(27.9% 0.041 260.031);
     --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-slate-950: oklch(12.9% 0.042 264.695);
@@ -1720,6 +1724,12 @@
   .border-\[var\(--hs-border-subtle\,\#3a424a\)\] {
     border-color: var(--hs-border-subtle,#3a424a);
   }
+  .border-amber-400\/40 {
+    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
+    }
+  }
   .border-amber-500\/40 {
     border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1861,9 +1871,21 @@
   .border-red-700 {
     border-color: var(--color-red-700);
   }
+  .border-slate-400\/40 {
+    border-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-slate-400) 40%, transparent);
+    }
+  }
   .border-transparent {
     border-color: transparent;
   }
+  .border-violet-400\/40 {
+    border-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-violet-400) 40%, transparent);
+    }
+  }
   .border-white {
     border-color: var(--color-white);
   }
@@ -2128,6 +2150,12 @@
   .bg-\[var\(--hs-brand\,\#e31337\)\] {
     background-color: var(--hs-brand,#e31337);
   }
+  .bg-amber-400\/15 {
+    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
+    }
+  }
   .bg-amber-500\/10 {
     background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2503,6 +2531,12 @@
   .bg-slate-50 {
     background-color: var(--color-slate-50);
   }
+  .bg-slate-400\/15 {
+    background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-slate-400) 15%, transparent);
+    }
+  }
   .bg-slate-800 {
     background-color: var(--color-slate-800);
   }
@@ -2518,6 +2552,12 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-violet-400\/15 {
+    background-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-violet-400) 15%, transparent);
+    }
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -3214,6 +3254,12 @@
   .text-sky-400 {
     color: var(--color-sky-400);
   }
+  .text-slate-300 {
+    color: var(--color-slate-300);
+  }
+  .text-violet-200 {
+    color: var(--color-violet-200);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -3371,6 +3417,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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);
   }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3379,6 +3429,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-\[3px\] {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-blue-500\/10 {
     --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3394,12 +3448,21 @@
   .ring-\[var\(--hrk-border-subtle\)\] {
     --tw-ring-color: var(--hrk-border-subtle);
   }
+  .ring-amber-400 {
+    --tw-ring-color: var(--color-amber-400);
+  }
   .ring-blue-500 {
     --tw-ring-color: var(--color-blue-500);
   }
   .ring-gray-700 {
     --tw-ring-color: var(--color-gray-700);
   }
+  .ring-slate-400 {
+    --tw-ring-color: var(--color-slate-400);
+  }
+  .ring-violet-400 {
+    --tw-ring-color: var(--color-violet-400);
+  }
   .ring-white\/30 {
     --tw-ring-color: color-mix(in srgb, #fff 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -5511,6 +5574,12 @@
       line-height: var(--tw-leading, var(--text-xl--line-height));
     }
   }
+  .md\:text-xs {
+    @media (width >= 48rem) {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
   .md\:text-\[10px\] {
     @media (width >= 48rem) {
       font-size: 10px;

package/dist/context/SupporterTierContext.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export type SupporterTier = 'silver' | 'gold' | 'platinum';
+export type SupporterTierMap = Record<string, SupporterTier>;
+export declare function SupporterTierProvider({ tierMap, children, }: {
+    tierMap: SupporterTierMap;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Use in list components to avoid per-item hook calls inside map(). */
+export declare function useSupporterTierMap(): SupporterTierMap;
+/** Use in single-author components (SnapsFeedCard, CommentTile, etc.). */
+export declare function useSupporterTier(username: string): SupporterTier | undefined;
+/** Returns the ring className for avatar border, or the fallback if no tier. */
+export declare function getSupporterRing(tier: SupporterTier | undefined, fallback?: string): string;
+/** Returns the badge className for username highlight, or '' if no tier. */
+export declare function getSupporterBadge(tier: SupporterTier | undefined): string;