banner

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