banner

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { X } from "lucide-react";
5import { Slot as SlotPrimitive } from "radix-ui";
6import * as React from "react";
7import * as ReactDOM from "react-dom";
8import { cn } from "@/lib/utils";
9import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
10import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
11import { Button } from "@/registry/bases/radix/ui/button";
12 
13const BANNER_ANIMATION_DURATION = 400;
14const DEFAULT_BANNER_PRIORITY = 0;
15const DEFAULT_BANNER_DISMISSIBLE = true;
16 
17type BannerVariant = "default" | "info" | "success" | "warning" | "destructive";
18type BannerSide = "top" | "bottom";
19type BannerStrategy = "fixed" | "static" | "sticky" | "absolute";
20 
21interface DivProps extends React.ComponentProps<"div"> {
22  asChild?: boolean;
23}
24 
25type CloseElement = React.ComponentRef<typeof BannerClose>;
26 
27interface BannerRenderProps {
28  id: string;
29  variant?: BannerVariant;
30  dismissible: boolean;
31  onClose: () => void;
32  onRemove: () => void;
33}
34 
35type BannerContent =
36  | React.ReactNode
37  | ((props: BannerRenderProps) => React.ReactNode);
38 
39interface BannerData {
40  id: string;
41  content: BannerContent;
42  variant?: BannerVariant;
43  priority?: number;
44  duration?: number;
45  dismissible?: boolean;
46  onDismiss?: () => void;
47}
48 
49interface StoreState {
50  banners: BannerData[];
51  removing: Set<string>;
52  heights: Map<string, number>;
53}
54 
55interface Store {
56  subscribe: (callback: () => void) => () => void;
57  getState: () => StoreState;
58  notify: () => void;
59  onBannerAdd: (banner: Omit<BannerData, "id">) => string;
60  onBannerRemove: (id: string) => void;
61  onBannersClear: () => void;
62  onRemovingChange: (id: string, value: boolean) => void;
63  onHeightChange: (id: string, height: number) => void;
64  onHeightRemove: (id: string) => void;
65}
66 
67const StoreContext = React.createContext<Store | null>(null);
68 
69function useStoreContext(consumerName: string) {
70  const context = React.useContext(StoreContext);
71  if (!context) {
72    throw new Error(`\`${consumerName}\` must be used within \`Banners\``);
73  }
74  return context;
75}
76 
77function useStore<T>(store: Store, selector: (state: StoreState) => T): T {
78  return React.useSyncExternalStore(
79    store.subscribe,
80    () => selector(store.getState()),
81    () => selector(store.getState()),
82  );
83}
84 
85interface BannerContextValue {
86  id?: string;
87  variant?: BannerVariant | null;
88  dismissible?: boolean;
89  onClose?: () => void;
90}
91 
92// … truncated