@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/notifications/notifications-menu.js

@@ -0,0 +1,201 @@
+import { useDirection, useFormatter, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { cssColor, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { NotificationActionButton } from "./flash-toasts.js";
+import { ScrollArea } from "../ui/scroll-area.js";
+import { NotificationCenter, notificationTintStyles, onDatabaseNotificationsSent, onOpenDatabaseNotifications } from "@alfakit/core";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BellIcon, CheckCheckIcon, Trash2Icon } from "lucide-react";
+//#region src/components/notifications/notifications-menu.tsx
+/**
+* Bell menu for database notifications. It also opens when something calls
+* `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).
+*/
+function NotificationsMenu({ variant = "topbar" } = {}) {
+	const t = useT();
+	const direction = useDirection();
+	const format = useFormatter();
+	const panel = usePanel();
+	const config = panel.databaseNotifications;
+	const endpoints = panel.endpoints;
+	const center = useMemo(() => endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll ? new NotificationCenter({
+		notifications: endpoints.notifications,
+		notificationsReadAll: endpoints.notificationsReadAll,
+		notificationsDestroyAll: endpoints.notificationsDestroyAll
+	}, config?.unreadCount ?? 0) : null, [
+		endpoints.notifications,
+		endpoints.notificationsReadAll,
+		endpoints.notificationsDestroyAll,
+		config?.unreadCount
+	]);
+	const [open, setOpen] = useState(false);
+	const state = useStore(center?.store ?? {
+		get: () => ({
+			notifications: [],
+			unreadCount: 0,
+			loading: false,
+			hasMore: false,
+			page: 0
+		}),
+		subscribe: () => () => {}
+	});
+	useEffect(() => {
+		if (!center) return;
+		center.startPolling(config?.pollingInterval);
+		return () => center.stopPolling();
+	}, [center, config?.pollingInterval]);
+	useEffect(() => {
+		if (open) center?.load();
+	}, [open, center]);
+	useEffect(() => onOpenDatabaseNotifications(() => setOpen(true)), []);
+	useEffect(() => center ? onDatabaseNotificationsSent(() => void center.load()) : void 0, [center]);
+	if (!config || !center) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: variant === "sidebar" ? /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "ghost",
+				className: "relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0",
+				"data-slot": "notifications-trigger",
+				"data-variant": "sidebar",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "alfakit::panels.topbar.open-database-notifications-button",
+						fallback: BellIcon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 text-start group-data-[collapsible=icon]:sr-only",
+						children: t("notifications", {}, "Notifications")
+					}),
+					state.unreadCount > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]",
+						children: [state.unreadCount > 99 ? "99+" : state.unreadCount, /* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [" ", t("unread_notifications", {}, "unread")]
+						})]
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				className: "relative",
+				"aria-label": t("notifications", {}, "Notifications"),
+				"data-slot": "notifications-trigger",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::panels.topbar.open-database-notifications-button",
+					fallback: BellIcon
+				}), state.unreadCount > 0 && /* @__PURE__ */ jsx("span", {
+					className: "bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium",
+					children: state.unreadCount > 99 ? "99+" : state.unreadCount
+				})]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: variant === "sidebar" ? "start" : "end",
+			side: variant === "sidebar" ? direction === "rtl" ? "left" : "right" : "bottom",
+			className: "w-80 p-0 sm:w-96",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between border-b px-3 py-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold",
+					children: t("notifications", {}, "Notifications")
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [state.unreadCount > 0 && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						title: t("mark_all_read", {}, "Mark all as read"),
+						onClick: () => void center.markAllAsRead(),
+						children: /* @__PURE__ */ jsx(CheckCheckIcon, {})
+					}), state.notifications.length > 0 && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						title: t("clear_notifications", {}, "Clear notifications"),
+						onClick: () => void center.clear(),
+						children: /* @__PURE__ */ jsx(Trash2Icon, {})
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs(ScrollArea, {
+				className: "max-h-96",
+				children: [state.loading && state.notifications.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center py-8",
+					children: /* @__PURE__ */ jsx(Spinner, {})
+				}) : state.notifications.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground px-3 py-8 text-center text-sm",
+					children: t("no_notifications", {}, "You have no notifications.")
+				}) : /* @__PURE__ */ jsx("ul", {
+					className: "divide-y",
+					children: state.notifications.map((notification) => /* @__PURE__ */ jsxs("li", {
+						className: cn("flex gap-3 px-3 py-3", !notification.readAt && "bg-primary/5"),
+						style: notification.color ? notificationTintStyles(cssColor(notification.color)).item : void 0,
+						children: [notification.icon && /* @__PURE__ */ jsx(Icon, {
+							name: notification.icon,
+							className: cn("mt-0.5 size-5 shrink-0", notification.iconColor && textColorClasses[notification.iconColor])
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 flex-col gap-1",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-start justify-between gap-2",
+									children: [/* @__PURE__ */ jsx("p", {
+										className: "text-sm font-medium",
+										children: notification.title
+									}), !notification.readAt && /* @__PURE__ */ jsx("button", {
+										type: "button",
+										className: "focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]",
+										"aria-label": t("mark_as_read", {}, "Mark as read"),
+										onClick: () => void center.markAsRead(notification.id),
+										children: /* @__PURE__ */ jsx("span", {
+											className: "bg-primary size-2 rounded-full",
+											"aria-hidden": "true"
+										})
+									})]
+								}),
+								notification.body && /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-sm",
+									dangerouslySetInnerHTML: { __html: notification.body }
+								}),
+								notification.date && /* @__PURE__ */ jsx("time", {
+									className: "text-muted-foreground text-xs",
+									children: format.relative(notification.date)
+								}),
+								notification.actions && /* @__PURE__ */ jsx("div", {
+									className: "flex flex-wrap gap-1",
+									children: notification.actions.map((action) => /* @__PURE__ */ jsx(NotificationActionButton, {
+										action,
+										onMarkAsRead: () => void center.markAsRead(notification.id),
+										onMarkAsUnread: () => void center.markAsUnread(notification.id)
+									}, action.name))
+								})
+							]
+						})]
+					}, notification.id))
+				}), state.hasMore && state.notifications.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center border-t p-2",
+					children: /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						disabled: state.loading,
+						onClick: () => void center.loadMore(),
+						children: [state.loading && /* @__PURE__ */ jsx(Spinner, {}), t("load_more", {}, "Load more")]
+					})
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { NotificationsMenu };
+
+//# sourceMappingURL=notifications-menu.js.map

package/dist/components/notifications/notifications-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-menu.js","names":[],"sources":["../../../src/components/notifications/notifications-menu.tsx"],"sourcesContent":["import {\n  NotificationCenter,\n  notificationTintStyles,\n  onDatabaseNotificationsSent,\n  onOpenDatabaseNotifications,\n} from '@alfakit/core'\nimport { BellIcon, CheckCheckIcon, Trash2Icon } from 'lucide-react'\nimport { useEffect, useMemo, useState } from 'react'\nimport { useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { cssColor, textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\nimport { ScrollArea } from '../ui/scroll-area'\nimport { Spinner } from '../ui/spinner'\nimport { NotificationActionButton } from './flash-toasts'\n\nexport interface NotificationsMenuProps {\n  /**\n   * Where the trigger sits: `topbar` (an icon button, default) or `sidebar` (a full-width\n   * row with a label, for layouts that move the bell into the sidebar).\n   */\n  variant?: 'topbar' | 'sidebar'\n}\n\n/**\n * Bell menu for database notifications. It also opens when something calls\n * `openDatabaseNotifications()` (or an action with `->openDatabaseNotifications()`).\n */\nexport function NotificationsMenu({ variant = 'topbar' }: NotificationsMenuProps = {}) {\n  const t = useT()\n  const direction = useDirection()\n  const format = useFormatter()\n  const panel = usePanel()\n  const config = panel.databaseNotifications\n  const endpoints = panel.endpoints\n\n  const center = useMemo(\n    () =>\n      endpoints.notifications && endpoints.notificationsReadAll && endpoints.notificationsDestroyAll\n        ? new NotificationCenter(\n            {\n              notifications: endpoints.notifications,\n              notificationsReadAll: endpoints.notificationsReadAll,\n              notificationsDestroyAll: endpoints.notificationsDestroyAll,\n            },\n            config?.unreadCount ?? 0,\n          )\n        : null,\n    [\n      endpoints.notifications,\n      endpoints.notificationsReadAll,\n      endpoints.notificationsDestroyAll,\n      config?.unreadCount,\n    ],\n  )\n\n  const [open, setOpen] = useState(false)\n  const state = useStore(\n    center?.store ?? {\n      get: () => ({ notifications: [], unreadCount: 0, loading: false, hasMore: false, page: 0 }),\n      subscribe: () => () => {},\n    },\n  )\n\n  useEffect(() => {\n    if (!center) return\n\n    center.startPolling(config?.pollingInterval)\n\n    return () => center.stopPolling()\n  }, [center, config?.pollingInterval])\n\n  useEffect(() => {\n    if (open) void center?.load()\n  }, [open, center])\n\n  // `openDatabaseNotifications()`: opened from code or an action.\n  useEffect(() => onOpenDatabaseNotifications(() => setOpen(true)), [])\n\n  // Realtime notifications announce stored ones, so the unread count updates right away.\n  useEffect(\n    () => (center ? onDatabaseNotificationsSent(() => void center.load()) : undefined),\n    [center],\n  )\n\n  if (!config || !center) {\n    return null\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        {variant === 'sidebar' ? (\n          // In a collapsed (icon) sidebar only the bell and its badge stay visible.\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            className=\"relative w-full justify-start gap-2 group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0\"\n            data-slot=\"notifications-trigger\"\n            data-variant=\"sidebar\"\n          >\n            <Icon\n              name=\"alfakit::panels.topbar.open-database-notifications-button\"\n              fallback={BellIcon}\n            />\n            <span className=\"flex-1 text-start group-data-[collapsible=icon]:sr-only\">\n              {t('notifications', {}, 'Notifications')}\n            </span>\n            {state.unreadCount > 0 && (\n              <span className=\"bg-primary text-primary-foreground flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-medium group-data-[collapsible=icon]:absolute group-data-[collapsible=icon]:-end-1 group-data-[collapsible=icon]:-top-1 group-data-[collapsible=icon]:h-4 group-data-[collapsible=icon]:min-w-4 group-data-[collapsible=icon]:text-[10px]\">\n                {state.unreadCount > 99 ? '99+' : state.unreadCount}\n                <span className=\"sr-only\"> {t('unread_notifications', {}, 'unread')}</span>\n              </span>\n            )}\n          </Button>\n        ) : (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"relative\"\n            aria-label={t('notifications', {}, 'Notifications')}\n            data-slot=\"notifications-trigger\"\n          >\n            <Icon\n              name=\"alfakit::panels.topbar.open-database-notifications-button\"\n              fallback={BellIcon}\n            />\n            {state.unreadCount > 0 && (\n              <span className=\"bg-primary text-primary-foreground absolute -end-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-medium\">\n                {state.unreadCount > 99 ? '99+' : state.unreadCount}\n              </span>\n            )}\n          </Button>\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        align={variant === 'sidebar' ? 'start' : 'end'}\n        side={variant === 'sidebar' ? (direction === 'rtl' ? 'left' : 'right') : 'bottom'}\n        className=\"w-80 p-0 sm:w-96\"\n      >\n        <div className=\"flex items-center justify-between border-b px-3 py-2\">\n          <span className=\"text-sm font-semibold\">{t('notifications', {}, 'Notifications')}</span>\n          <div className=\"flex items-center gap-1\">\n            {state.unreadCount > 0 && (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                title={t('mark_all_read', {}, 'Mark all as read')}\n                onClick={() => void center.markAllAsRead()}\n              >\n                <CheckCheckIcon />\n              </Button>\n            )}\n            {state.notifications.length > 0 && (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                title={t('clear_notifications', {}, 'Clear notifications')}\n                onClick={() => void center.clear()}\n              >\n                <Trash2Icon />\n              </Button>\n            )}\n          </div>\n        </div>\n        <ScrollArea className=\"max-h-96\">\n          {state.loading && state.notifications.length === 0 ? (\n            <div className=\"flex justify-center py-8\">\n              <Spinner />\n            </div>\n          ) : state.notifications.length === 0 ? (\n            <p className=\"text-muted-foreground px-3 py-8 text-center text-sm\">\n              {t('no_notifications', {}, 'You have no notifications.')}\n            </p>\n          ) : (\n            <ul className=\"divide-y\">\n              {state.notifications.map((notification) => (\n                <li\n                  key={notification.id}\n                  className={cn('flex gap-3 px-3 py-3', !notification.readAt && 'bg-primary/5')}\n                  style={\n                    notification.color\n                      ? notificationTintStyles(cssColor(notification.color)).item\n                      : undefined\n                  }\n                >\n                  {notification.icon && (\n                    <Icon\n                      name={notification.icon}\n                      className={cn(\n                        'mt-0.5 size-5 shrink-0',\n                        notification.iconColor && textColorClasses[notification.iconColor],\n                      )}\n                    />\n                  )}\n                  <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                    <div className=\"flex items-start justify-between gap-2\">\n                      <p className=\"text-sm font-medium\">{notification.title}</p>\n                      {!notification.readAt && (\n                        <button\n                          type=\"button\"\n                          className=\"focus-visible:ring-ring/50 -me-2 -mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-[3px]\"\n                          aria-label={t('mark_as_read', {}, 'Mark as read')}\n                          onClick={() => void center.markAsRead(notification.id)}\n                        >\n                          <span className=\"bg-primary size-2 rounded-full\" aria-hidden=\"true\" />\n                        </button>\n                      )}\n                    </div>\n                    {notification.body && (\n                      <p\n                        className=\"text-muted-foreground text-sm\"\n                        dangerouslySetInnerHTML={{ __html: notification.body }}\n                      />\n                    )}\n                    {notification.date && (\n                      <time className=\"text-muted-foreground text-xs\">\n                        {format.relative(notification.date)}\n                      </time>\n                    )}\n                    {notification.actions && (\n                      <div className=\"flex flex-wrap gap-1\">\n                        {notification.actions.map((action) => (\n                          <NotificationActionButton\n                            key={action.name}\n                            action={action}\n                            onMarkAsRead={() => void center.markAsRead(notification.id)}\n                            onMarkAsUnread={() => void center.markAsUnread(notification.id)}\n                          />\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                </li>\n              ))}\n            </ul>\n          )}\n          {state.hasMore && state.notifications.length > 0 && (\n            <div className=\"flex justify-center border-t p-2\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                disabled={state.loading}\n                onClick={() => void center.loadMore()}\n              >\n                {state.loading && <Spinner />}\n                {t('load_more', {}, 'Load more')}\n              </Button>\n            </div>\n          )}\n        </ScrollArea>\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":"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"}

package/dist/components/notifications/realtime-notifications.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/notifications/realtime-notifications.d.ts
+/**
+ * With `Panel::realtimeNotifications()` (or `realtime()`) and Laravel Echo, shows broadcast
+ * notifications as toasts and refreshes the bell when one is stored. Renders nothing; the
+ * subscription only starts in the browser.
+ */
+export declare function RealtimeNotifications(): null;
+//#endregion
+//# sourceMappingURL=realtime-notifications.d.ts.map

package/dist/components/notifications/realtime-notifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-notifications.d.ts","names":[],"sources":["../../../src/components/notifications/realtime-notifications.tsx"],"mappings":";;;;;;wBAcgB"}

package/dist/components/notifications/realtime-notifications.js

@@ -0,0 +1,30 @@
+import { useOptionalRegistry, usePanel } from "../../context.js";
+import { showToast } from "./flash-toasts.js";
+import { announceDatabaseNotificationsSent, configureRealtime, subscribeToNotifications } from "@alfakit/core";
+import { useEffect } from "react";
+//#region src/components/notifications/realtime-notifications.tsx
+/**
+* With `Panel::realtimeNotifications()` (or `realtime()`) and Laravel Echo, shows broadcast
+* notifications as toasts and refreshes the bell when one is stored. Renders nothing; the
+* subscription only starts in the browser.
+*/
+function RealtimeNotifications() {
+	const panel = usePanel();
+	const registry = useOptionalRegistry();
+	const realtime = panel?.realtime;
+	const channel = realtime?.channel;
+	if (typeof window !== "undefined") configureRealtime(realtime ?? null, { csrfToken: panel?.csrf });
+	useEffect(() => {
+		if (!channel) return;
+		return subscribeToNotifications({
+			channel,
+			onNotification: (notification) => showToast(notification, registry?.resolve(notification.view ?? "")),
+			onDatabaseNotificationsSent: announceDatabaseNotificationsSent
+		});
+	}, [channel, registry]);
+	return null;
+}
+//#endregion
+export { RealtimeNotifications };
+
+//# sourceMappingURL=realtime-notifications.js.map

package/dist/components/notifications/realtime-notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-notifications.js","names":[],"sources":["../../../src/components/notifications/realtime-notifications.tsx"],"sourcesContent":["import {\n  announceDatabaseNotificationsSent,\n  configureRealtime,\n  subscribeToNotifications,\n} from '@alfakit/core'\nimport { useEffect } from 'react'\nimport { useOptionalRegistry, usePanel } from '../../context'\nimport { showToast } from './flash-toasts'\n\n/**\n * With `Panel::realtimeNotifications()` (or `realtime()`) and Laravel Echo, shows broadcast\n * notifications as toasts and refreshes the bell when one is stored. Renders nothing; the\n * subscription only starts in the browser.\n */\nexport function RealtimeNotifications() {\n  const panel = usePanel()\n  const registry = useOptionalRegistry()\n  const realtime = panel?.realtime\n  const channel = realtime?.channel\n\n  // `Panel::realtime()`: where Echo authorises the panel's channels (used when the app has\n  // no `window.Echo` of its own). Set while rendering, before any page component (presence,\n  // live tables) starts listening in its effects.\n  if (typeof window !== 'undefined') {\n    configureRealtime(realtime ?? null, { csrfToken: panel?.csrf })\n  }\n\n  useEffect(() => {\n    if (!channel) return\n\n    return subscribeToNotifications({\n      channel,\n      onNotification: (notification) =>\n        showToast(notification, registry?.resolve(notification.view ?? '')),\n      onDatabaseNotificationsSent: announceDatabaseNotificationsSent,\n    })\n  }, [channel, registry])\n\n  return null\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,wBAAwB;CACtC,MAAM,QAAQ,SAAS;CACvB,MAAM,WAAW,oBAAoB;CACrC,MAAM,WAAW,OAAO;CACxB,MAAM,UAAU,UAAU;CAK1B,IAAI,OAAO,WAAW,aACpB,kBAAkB,YAAY,MAAM,EAAE,WAAW,OAAO,KAAK,CAAC;CAGhE,gBAAgB;EACd,IAAI,CAAC,SAAS;EAEd,OAAO,yBAAyB;GAC9B;GACA,iBAAiB,iBACf,UAAU,cAAc,UAAU,QAAQ,aAAa,QAAQ,EAAE,CAAC;GACpE,6BAA6B;EAC/B,CAAC;CACH,GAAG,CAAC,SAAS,QAAQ,CAAC;CAEtB,OAAO;AACT"}

package/dist/components/notifications/undo-button.d.ts

@@ -0,0 +1,13 @@
+import { NotificationUndoSchema } from "@alfakit/core";
+//#region src/components/notifications/undo-button.d.ts
+/**
+ * The "Undo" button of an `Action::undoable()` toast: a countdown, Ctrl/Cmd+Z while the
+ * toast is up (outside text fields), and the undo request. The toast closes when the offer
+ * ends.
+ */
+export declare function UndoButton({ undo, toastId }: {
+  undo: NotificationUndoSchema;
+  toastId: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=undo-button.d.ts.map

package/dist/components/notifications/undo-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"undo-button.d.ts","names":[],"sources":["../../../src/components/notifications/undo-button.tsx"],"mappings":";;;;;;;wBAagB,aAAa,MAAM;EAAa,MAAM;EAAwB;oBAAiB,IAAA"}

package/dist/components/notifications/undo-button.js

@@ -0,0 +1,54 @@
+import { useT } from "../../context.js";
+import { Button } from "../ui/button.js";
+import { bindUndo } from "@alfakit/core";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Undo2Icon } from "lucide-react";
+import { toast } from "sonner";
+//#region src/components/notifications/undo-button.tsx
+/**
+* The "Undo" button of an `Action::undoable()` toast: a countdown, Ctrl/Cmd+Z while the
+* toast is up (outside text fields), and the undo request. The toast closes when the offer
+* ends.
+*/
+function UndoButton({ undo, toastId }) {
+	const t = useT();
+	const [remaining, setRemaining] = useState(undo.seconds);
+	const [busy, setBusy] = useState(false);
+	const run = useRef(async () => {});
+	useEffect(() => {
+		const binding = bindUndo(toastId, undo, {
+			onTick: setRemaining,
+			onBusy: setBusy,
+			onClose: () => toast.dismiss(toastId)
+		});
+		run.current = binding.undo;
+		return binding.stop;
+	}, [toastId, undo]);
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		"data-slot": "undo-button",
+		variant: "outline",
+		size: "xs",
+		disabled: busy,
+		"aria-keyshortcuts": "Control+Z Meta+Z",
+		"aria-label": t("undo.aria", { seconds: remaining }, "Undo (Ctrl+Z), :seconds seconds left"),
+		onClick: () => void run.current(),
+		children: [
+			/* @__PURE__ */ jsx(Undo2Icon, {
+				className: "size-3.5 rtl:-scale-x-100",
+				"aria-hidden": "true"
+			}),
+			t("undo.label", {}, "Undo"),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-muted-foreground tabular-nums",
+				children: remaining
+			})
+		]
+	});
+}
+//#endregion
+export { UndoButton };
+
+//# sourceMappingURL=undo-button.js.map

package/dist/components/notifications/undo-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"undo-button.js","names":[],"sources":["../../../src/components/notifications/undo-button.tsx"],"sourcesContent":["import type { NotificationUndoSchema } from '@alfakit/core'\nimport { bindUndo } from '@alfakit/core'\nimport { Undo2Icon } from 'lucide-react'\nimport { useEffect, useRef, useState } from 'react'\nimport { toast } from 'sonner'\nimport { useT } from '../../context'\nimport { Button } from '../ui/button'\n\n/**\n * The \"Undo\" button of an `Action::undoable()` toast: a countdown, Ctrl/Cmd+Z while the\n * toast is up (outside text fields), and the undo request. The toast closes when the offer\n * ends.\n */\nexport function UndoButton({ undo, toastId }: { undo: NotificationUndoSchema; toastId: string }) {\n  const t = useT()\n  const [remaining, setRemaining] = useState(undo.seconds)\n  const [busy, setBusy] = useState(false)\n  const run = useRef<() => Promise<void>>(async () => {})\n\n  useEffect(() => {\n    const binding = bindUndo(toastId, undo, {\n      onTick: setRemaining,\n      onBusy: setBusy,\n      onClose: () => toast.dismiss(toastId),\n    })\n\n    run.current = binding.undo\n\n    return binding.stop\n  }, [toastId, undo])\n\n  return (\n    <Button\n      type=\"button\"\n      data-slot=\"undo-button\"\n      variant=\"outline\"\n      size=\"xs\"\n      disabled={busy}\n      aria-keyshortcuts=\"Control+Z Meta+Z\"\n      aria-label={t('undo.aria', { seconds: remaining }, 'Undo (Ctrl+Z), :seconds seconds left')}\n      onClick={() => void run.current()}\n    >\n      <Undo2Icon className=\"size-3.5 rtl:-scale-x-100\" aria-hidden=\"true\" />\n      {t('undo.label', {}, 'Undo')}\n      <span aria-hidden=\"true\" className=\"text-muted-foreground tabular-nums\">\n        {remaining}\n      </span>\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgB,WAAW,EAAE,MAAM,WAA8D;CAC/F,MAAM,IAAI,KAAK;CACf,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK,OAAO;CACvD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,MAAM,OAA4B,YAAY,CAAC,CAAC;CAEtD,gBAAgB;EACd,MAAM,UAAU,SAAS,SAAS,MAAM;GACtC,QAAQ;GACR,QAAQ;GACR,eAAe,MAAM,QAAQ,OAAO;EACtC,CAAC;EAED,IAAI,UAAU,QAAQ;EAEtB,OAAO,QAAQ;CACjB,GAAG,CAAC,SAAS,IAAI,CAAC;CAElB,OACE,qBAAC,QAAD;EACE,MAAK;EACL,aAAU;EACV,SAAQ;EACR,MAAK;EACL,UAAU;EACV,qBAAkB;EAClB,cAAY,EAAE,aAAa,EAAE,SAAS,UAAU,GAAG,sCAAsC;EACzF,eAAe,KAAK,IAAI,QAAQ;EARlC,UAAA;GAUE,oBAAC,WAAD;IAAW,WAAU;IAA4B,eAAY;GAAQ,CAAA;GACpE,EAAE,cAAc,CAAC,GAAG,MAAM;GAC3B,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IAChC,UAAA;GACG,CAAA;EACA;;AAEZ"}

package/dist/components/panel/app-sidebar.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/panel/app-sidebar.d.ts
+export declare function Brand({ className }: {
+  className?: string;
+}): import("react").JSX.Element;
+export declare function AppSidebar(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=app-sidebar.d.ts.map

package/dist/components/panel/app-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-sidebar.d.ts","names":[],"sources":["../../../src/components/panel/app-sidebar.tsx"],"mappings":";wBAiDgB,QAAQ;EAAe;oBAAoB,IAAA;wBAmT3C,8BAAU,IAAA"}