@momentumworld/ui-react 0.17.0

package/src/components/ui/time-picker.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import { format } from "date-fns";
+import { CalendarClockIcon, ClockIcon } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "./button";
+import { Calendar } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { cn } from "../../lib/utils/css";
+
+/**
+ * A time of day is a STRING here, not a `Date`.
+ *
+ * "Nine in the morning, every Tuesday" has no date, and giving it one forces every
+ * caller to invent a day and then remember to ignore it — which is how a weekly
+ * opening hour ends up shifted by a timezone that was never part of the question.
+ * `TimePicker` therefore speaks `"HH:mm"`, zero-padded and 24-hour, which is also
+ * what a DRF `TimeField` parses. `DateTimePicker` below takes a real `Date`, because
+ * an instant genuinely is one.
+ */
+type TimeValue = string;
+
+/** `"09:30"` → 570. Anything unparseable is `null` — read as "no time yet". */
+function toMinutes(value?: TimeValue | null): number | null {
+  if (!value) return null;
+  const match = /^(\d{1,2}):(\d{2})/.exec(value.trim());
+  if (!match) return null;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  if (hours > 23 || minutes > 59) return null;
+  return hours * 60 + minutes;
+}
+
+/** 570 → `"09:30"`. The value on the wire. */
+function toValue(minutes: number): TimeValue {
+  return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+}
+
+/** 570 → `"9:30 AM"`, or `"09:30"` on a 24-hour clock. What a person reads. */
+function toLabel(minutes: number, hour12: boolean): string {
+  if (!hour12) return toValue(minutes);
+  const hours = Math.floor(minutes / 60);
+  const twelve = hours % 12 === 0 ? 12 : hours % 12;
+  return `${twelve}:${String(minutes % 60).padStart(2, "0")} ${hours < 12 ? "AM" : "PM"}`;
+}
+
+/** Every offered time, as minutes past midnight. */
+function timeOptions(step: number, min?: TimeValue, max?: TimeValue): number[] {
+  const size = Math.max(1, Math.round(step));
+  const first = toMinutes(min) ?? 0;
+  const last = toMinutes(max) ?? 24 * 60 - 1;
+  const out: number[] = [];
+  for (let at = Math.ceil(first / size) * size; at <= last; at += size) out.push(at);
+  return out;
+}
+
+/**
+ * The list of times inside a popover.
+ *
+ * A plain `overflow-y-auto` rather than `ScrollArea`: this list opens scrolled to the
+ * current value, and setting `scrollTop` on an element we own is exact. The obvious
+ * alternative, `scrollIntoView`, walks up the tree and will scroll the dialog behind
+ * the popover along with the list inside it.
+ */
+function TimeList({
+  hour12,
+  onSelect,
+  options,
+  selected,
+}: {
+  hour12: boolean;
+  onSelect: (minutes: number) => void;
+  options: number[];
+  selected: number | null;
+}) {
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const activeRef = React.useRef<HTMLButtonElement>(null);
+
+  React.useEffect(() => {
+    const list = listRef.current;
+    const active = activeRef.current;
+    if (!list || !active) return;
+    list.scrollTop = active.offsetTop - list.clientHeight / 2 + active.clientHeight / 2;
+  }, []);
+
+  return (
+    <div
+      className="max-h-64 w-32 shrink-0 overflow-y-auto p-1"
+      data-slot="time-picker-list"
+      ref={listRef}
+      role="listbox"
+    >
+      {options.map((minutes) => {
+        const isSelected = minutes === selected;
+        return (
+          <button
+            aria-selected={isSelected}
+            className={cn(
+              "flex w-full items-center rounded-lg px-2.5 py-1.5 text-left text-base sm:text-sm text-foreground outline-none",
+              "hover:bg-accent focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+              isSelected && "bg-primary text-primary-foreground hover:bg-primary",
+            )}
+            key={minutes}
+            onClick={() => onSelect(minutes)}
+            ref={isSelected ? activeRef : undefined}
+            role="option"
+            type="button"
+          >
+            {toLabel(minutes, hour12)}
+          </button>
+        );
+      })}
+      {options.length === 0 ? (
+        <p className="px-2.5 py-1.5 text-sm text-muted-foreground">No time in range.</p>
+      ) : null}
+    </div>
+  );
+}
+
+interface TimePickerProps {
+  /** The selected time as `"HH:mm"` (controlled). */
+  value?: TimeValue | null;
+  onValueChange?: (value: TimeValue | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Minutes between offered times. 15 by default; 5 and 30 are the other useful ones. */
+  step?: number;
+  /** Bounds, inclusive, as `"HH:mm"`. */
+  min?: TimeValue;
+  max?: TimeValue;
+  /** `false` shows a 24-hour clock. The value on the wire is 24-hour either way. */
+  hour12?: boolean;
+  align?: "start" | "center" | "end";
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * A time picker: a button that opens a list of times in a popover. The canonical way
+ * to take a time of day in this system — never a native `<input type="time">`, which
+ * draws the *browser's* control (light in dark mode, its own glyph, its own idea of a
+ * locale) in the middle of one of our forms, and asks somebody to type `--:-- --`.
+ *
+ * Deliberately a fixed list rather than two spinners: the times these are used for are
+ * office hours and appointment slots, which land on the quarter hour, and a list can be
+ * read and clicked in one gesture. Pass `step={5}` where a finer time is real.
+ */
+function TimePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a time",
+  disabled,
+  step = 15,
+  min,
+  max,
+  hour12 = true,
+  align = "start",
+  className,
+  id,
+  ...props
+}: TimePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const selected = toMinutes(value);
+  const options = React.useMemo(() => timeOptions(step, min, max), [step, min, max]);
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger
+        render={
+          <Button
+            aria-label={props["aria-label"]}
+            className={cn("w-full justify-start font-normal", selected === null && "text-muted-foreground", className)}
+            disabled={disabled}
+            id={id}
+            variant="outline"
+          />
+        }
+      >
+        <ClockIcon aria-hidden />
+        {selected === null ? <span>{placeholder}</span> : toLabel(selected, hour12)}
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-auto p-0" data-slot="time-picker">
+        {open ? (
+          <TimeList
+            hour12={hour12}
+            onSelect={(minutes) => {
+              onValueChange?.(toValue(minutes));
+              setOpen(false);
+            }}
+            options={options}
+            selected={selected}
+          />
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DateTimePickerProps {
+  /** The selected instant (controlled). */
+  value?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  fromDate?: Date;
+  toDate?: Date;
+  step?: number;
+  hour12?: boolean;
+  /** The time a day picked before any time gets. */
+  defaultTime?: TimeValue;
+  /** date-fns format for the date half of the trigger label. */
+  displayFormat?: string;
+  align?: "start" | "center" | "end";
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+}
+
+/**
+ * A date *and* a time, in one popover: the calendar beside the list of times.
+ *
+ * One control and not two fields, because the two halves are one answer — "from when"
+ * — and two controls make it possible to submit half of it. Picking a day keeps the
+ * time already chosen (or `defaultTime`), and picking a time keeps the day, so the
+ * order they are pressed in does not matter.
+ */
+function DateTimePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date and time",
+  disabled,
+  fromDate,
+  toDate,
+  step = 15,
+  hour12 = true,
+  defaultTime = "09:00",
+  displayFormat = "LLL dd, y",
+  align = "start",
+  className,
+  id,
+  ...props
+}: DateTimePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const options = React.useMemo(() => timeOptions(step), [step]);
+  const selectedMinutes = value ? value.getHours() * 60 + value.getMinutes() : null;
+
+  /** A new instant from a day and a time, without ever going through UTC. */
+  const combine = (day: Date, minutes: number): Date => {
+    const next = new Date(day);
+    next.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
+    return next;
+  };
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger
+        render={
+          <Button
+            aria-label={props["aria-label"]}
+            className={cn("w-full justify-start font-normal", !value && "text-muted-foreground", className)}
+            disabled={disabled}
+            id={id}
+            variant="outline"
+          />
+        }
+      >
+        <CalendarClockIcon aria-hidden />
+        {value && selectedMinutes !== null ? (
+          `${format(value, displayFormat)} · ${toLabel(selectedMinutes, hour12)}`
+        ) : (
+          <span>{placeholder}</span>
+        )}
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-auto p-0" data-slot="date-time-picker">
+        <div className="flex divide-x divide-border">
+          <Calendar
+            autoFocus
+            disabled={
+              fromDate || toDate
+                ? [...(fromDate ? [{ before: fromDate }] : []), ...(toDate ? [{ after: toDate }] : [])]
+                : undefined
+            }
+            mode="single"
+            onSelect={(day) =>
+              onValueChange?.(day ? combine(day, selectedMinutes ?? toMinutes(defaultTime) ?? 0) : undefined)
+            }
+            selected={value}
+          />
+          {open ? (
+            <TimeList
+              hour12={hour12}
+              onSelect={(minutes) => {
+                onValueChange?.(combine(value ?? new Date(), minutes));
+                setOpen(false);
+              }}
+              options={options}
+              selected={selectedMinutes}
+            />
+          ) : null}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { DateTimePicker, TimePicker, type DateTimePickerProps, type TimePickerProps, type TimeValue };

package/src/components/ui/timeline.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Timeline({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      className={cn(
+        "flex flex-col [&>li:last-child_[data-slot=timeline-connector]]:hidden",
+        className,
+      )}
+      data-slot="timeline"
+      {...props}
+    />
+  );
+}
+
+function TimelineItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={cn("group/timeline-item flex gap-4", className)}
+      data-slot="timeline-item"
+      {...props}
+    />
+  );
+}
+
+/** The marker column: a dot and the connecting line beneath it. */
+function TimelineDot({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className="flex w-7 shrink-0 flex-col items-center"
+      data-slot="timeline-marker"
+    >
+      <div
+        className={cn(
+          "mt-0.5 flex size-3 shrink-0 items-center justify-center rounded-full border-2 border-primary bg-background [&_svg]:size-3.5 has-[svg]:mt-0 has-[svg]:size-7 has-[svg]:border-transparent has-[svg]:bg-primary has-[svg]:text-primary-foreground",
+          className,
+        )}
+        data-slot="timeline-dot"
+        {...props}
+      >
+        {children}
+      </div>
+      <div
+        className="my-1 w-0.5 flex-1 rounded-full bg-border"
+        data-slot="timeline-connector"
+      />
+    </div>
+  );
+}
+
+function TimelineContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col gap-1 pb-8 group-last/timeline-item:pb-0",
+        className,
+      )}
+      data-slot="timeline-content"
+      {...props}
+    />
+  );
+}
+
+function TimelineTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-medium text-sm leading-tight", className)}
+      data-slot="timeline-title"
+      {...props}
+    />
+  );
+}
+
+function TimelineTime({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "font-medium text-muted-foreground text-xs tabular-nums",
+        className,
+      )}
+      data-slot="timeline-time"
+      {...props}
+    />
+  );
+}
+
+function TimelineDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="timeline-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  Timeline,
+  TimelineItem,
+  TimelineDot,
+  TimelineContent,
+  TimelineTitle,
+  TimelineTime,
+  TimelineDescription,
+};

package/src/components/ui/toast.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { Toast } from "@base-ui/react/toast";
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  LoaderCircleIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { buttonVariants } from "./button";
+import { cn } from "../../lib/utils/css";
+
+const toastManager = Toast.createToastManager();
+const anchoredToastManager = Toast.createToastManager();
+
+const TOAST_ICONS = {
+  error: CircleAlertIcon,
+  info: InfoIcon,
+  loading: LoaderCircleIcon,
+  success: CircleCheckIcon,
+  warning: TriangleAlertIcon,
+} as const;
+
+type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+interface ToastProviderProps extends Toast.Provider.Props {
+  position?: ToastPosition;
+}
+
+function ToastProvider({
+  children,
+  position = "bottom-right",
+  ...props
+}: ToastProviderProps) {
+  return (
+    <Toast.Provider toastManager={toastManager} {...props}>
+      {children}
+      <Toasts position={position} />
+    </Toast.Provider>
+  );
+}
+
+function Toasts({ position = "bottom-right" }: { position: ToastPosition }) {
+  const { toasts } = Toast.useToastManager();
+  const isTop = position.startsWith("top");
+
+  return (
+    <Toast.Portal data-slot="toast-portal">
+      <Toast.Viewport
+        className={cn(
+          "fixed z-60 mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]",
+          // Vertical positioning
+          "data-[position*=top]:top-(--toast-inset)",
+          "data-[position*=bottom]:bottom-(--toast-inset)",
+          // Horizontal positioning
+          "data-[position*=left]:left-(--toast-inset)",
+          "data-[position*=right]:right-(--toast-inset)",
+          "data-[position*=center]:-translate-x-1/2 data-[position*=center]:left-1/2",
+        )}
+        data-position={position}
+        data-slot="toast-viewport"
+      >
+        {toasts.map((toast) => {
+          const Icon = toast.type
+            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]
+            : null;
+
+          return (
+            <Toast.Root
+              className={cn(
+                "absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full select-none rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+                // Base positioning using data-position
+                "data-[position*=right]:right-0 data-[position*=right]:left-auto",
+                "data-[position*=left]:right-auto data-[position*=left]:left-0",
+                "data-[position*=center]:right-0 data-[position*=center]:left-0",
+                "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top",
+                "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom",
+                // Gap fill for hover
+                "after:absolute after:left-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full",
+                "data-[position*=top]:after:top-full",
+                "data-[position*=bottom]:after:bottom-full",
+                // Define some variables
+                "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]",
+                // Define offset-y variable
+                "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]",
+                "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]",
+                // Default state transform
+                "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+                "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]",
+                // Limited state
+                "data-limited:opacity-0",
+                // Expanded state
+                "data-expanded:h-(--toast-height)",
+                "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]",
+                // Starting and ending animations
+                "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]",
+                "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-ending-style:opacity-0",
+                // Ending animations (direction-aware)
+                "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]",
+                "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+                "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+                // Ending animations (expanded)
+                "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]",
+                "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]",
+              )}
+              data-position={position}
+              key={toast.id}
+              swipeDirection={
+                position.includes("center")
+                  ? [isTop ? "up" : "down"]
+                  : position.includes("left")
+                    ? ["left", isTop ? "up" : "down"]
+                    : ["right", isTop ? "up" : "down"]
+              }
+              toast={toast}
+            >
+              <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 data-behind:not-data-expanded:pointer-events-none data-behind:opacity-0 data-expanded:opacity-100">
+                <div className="flex gap-2">
+                  {Icon && (
+                    <div
+                      className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+                      data-slot="toast-icon"
+                    >
+                      <Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
+                    </div>
+                  )}
+
+                  <div className="flex flex-col gap-0.5">
+                    <Toast.Title
+                      className="font-medium"
+                      data-slot="toast-title"
+                    />
+                    <Toast.Description
+                      className="text-muted-foreground"
+                      data-slot="toast-description"
+                    />
+                  </div>
+                </div>
+                {toast.actionProps && (
+                  <Toast.Action
+                    className={buttonVariants({ size: "xs" })}
+                    data-slot="toast-action"
+                  >
+                    {toast.actionProps.children}
+                  </Toast.Action>
+                )}
+              </Toast.Content>
+            </Toast.Root>
+          );
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  );
+}
+
+function AnchoredToastProvider({ children, ...props }: Toast.Provider.Props) {
+  return (
+    <Toast.Provider toastManager={anchoredToastManager} {...props}>
+      {children}
+      <AnchoredToasts />
+    </Toast.Provider>
+  );
+}
+
+function AnchoredToasts() {
+  const { toasts } = Toast.useToastManager();
+
+  return (
+    <Toast.Portal data-slot="toast-portal-anchored">
+      <Toast.Viewport
+        className="outline-none"
+        data-slot="toast-viewport-anchored"
+      >
+        {toasts.map((toast) => {
+          const Icon = toast.type
+            ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]
+            : null;
+          const tooltipStyle =
+            (toast.data as { tooltipStyle?: boolean })?.tooltipStyle ?? false;
+          const positionerProps = toast.positionerProps;
+
+          if (!positionerProps?.anchor) {
+            return null;
+          }
+
+          return (
+            <Toast.Positioner
+              className="z-50 max-w-[min(--spacing(64),var(--available-width))]"
+              data-slot="toast-positioner"
+              key={toast.id}
+              sideOffset={positionerProps.sideOffset ?? 4}
+              toast={toast}
+            >
+              <Toast.Root
+                className={cn(
+                  "relative text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/6%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+                  tooltipStyle
+                    ? "rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]"
+                    : "rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]",
+                )}
+                data-slot="toast-popup"
+                toast={toast}
+              >
+                {tooltipStyle ? (
+                  <Toast.Content className="pointer-events-auto px-2 py-1">
+                    <Toast.Title data-slot="toast-title" />
+                  </Toast.Content>
+                ) : (
+                  <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm">
+                    <div className="flex gap-2">
+                      {Icon && (
+                        <div
+                          className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+                          data-slot="toast-icon"
+                        >
+                          <Icon className="in-data-[type=loading]:animate-spin in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:opacity-80" />
+                        </div>
+                      )}
+
+                      <div className="flex flex-col gap-0.5">
+                        <Toast.Title
+                          className="font-medium"
+                          data-slot="toast-title"
+                        />
+                        <Toast.Description
+                          className="text-muted-foreground"
+                          data-slot="toast-description"
+                        />
+                      </div>
+                    </div>
+                    {toast.actionProps && (
+                      <Toast.Action
+                        className={buttonVariants({ size: "xs" })}
+                        data-slot="toast-action"
+                      >
+                        {toast.actionProps.children}
+                      </Toast.Action>
+                    )}
+                  </Toast.Content>
+                )}
+              </Toast.Root>
+            </Toast.Positioner>
+          );
+        })}
+      </Toast.Viewport>
+    </Toast.Portal>
+  );
+}
+
+export {
+  ToastProvider,
+  type ToastPosition,
+  toastManager,
+  AnchoredToastProvider,
+  anchoredToastManager,
+};