@ifhover/leaf-ui 0.0.0-stage → 0.5.0

package/dist/esm/browser/modules/message/store.js

@@ -0,0 +1,101 @@
+"use client";
+import { createContext } from "react";
+const emptyMessages = [];
+function createMessageStore() {
+    let entries = emptyMessages;
+    let sequence = 0;
+    let available = true;
+    const listeners = new Set();
+    const publish = (next)=>{
+        entries = next;
+        for (const listener of listeners)listener();
+    };
+    const open = (options, scope, config)=>{
+        const key = options.key ?? `leaf-message-${++sequence}`;
+        if (!available) return key;
+        const existing = entries.find((entry)=>entry.key === key);
+        const entry = {
+            ...options,
+            key,
+            scope,
+            config,
+            open: true,
+            revision: (existing?.revision ?? 0) + 1
+        };
+        publish(existing ? entries.map((item)=>item.key === key ? entry : item) : [
+            ...entries,
+            entry
+        ]);
+        return key;
+    };
+    const close = (key)=>{
+        const closing = entries.filter((entry)=>entry.open && (void 0 === key || entry.key === key));
+        if (!closing.length) return;
+        publish(entries.map((entry)=>closing.includes(entry) ? {
+                ...entry,
+                open: false
+            } : entry));
+        for (const entry of closing)entry.onClose?.();
+    };
+    return {
+        getSnapshot: ()=>entries,
+        subscribe: (listener)=>{
+            available = true;
+            listeners.add(listener);
+            return ()=>{
+                listeners.delete(listener);
+                if (!listeners.size) {
+                    available = false;
+                    entries = emptyMessages;
+                }
+            };
+        },
+        close,
+        remove: (key)=>{
+            publish(entries.filter((entry)=>entry.key !== key || entry.open));
+        },
+        updateScope: (scope, config)=>{
+            if (!entries.some((entry)=>entry.scope === scope && entry.config !== config)) return;
+            publish(entries.map((entry)=>entry.scope === scope ? {
+                    ...entry,
+                    config
+                } : entry));
+        },
+        api: (scope, getConfig)=>{
+            const show = (options)=>open(options, scope, getConfig?.());
+            return {
+                open: show,
+                close,
+                success: (content, duration)=>show({
+                        content,
+                        duration,
+                        type: 'success'
+                    }),
+                info: (content, duration)=>show({
+                        content,
+                        duration,
+                        type: 'info'
+                    }),
+                warning: (content, duration)=>show({
+                        content,
+                        duration,
+                        type: 'warning'
+                    }),
+                error: (content, duration)=>show({
+                        content,
+                        duration,
+                        type: 'error'
+                    }),
+                loading: (content)=>show({
+                        content,
+                        duration: 0,
+                        type: 'loading'
+                    })
+            };
+        }
+    };
+}
+const MessageContext = createContext(null);
+export { MessageContext, createMessageStore, emptyMessages };
+
+//# sourceMappingURL=store.js.map

package/dist/esm/browser/modules/message/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message/store.js","sources":["../../../../../src/message/store.ts"],"sourcesContent":["import { createContext } from 'react';\nimport type { LeafConfig } from '../config-provider/context';\nimport type { MessageApi, MessageOptions } from './message';\n\nexport interface MessageEntry extends MessageOptions {\n  key: string;\n  open: boolean;\n  revision: number;\n  scope?: string;\n  config?: LeafConfig;\n}\nexport const emptyMessages: readonly MessageEntry[] = [];\n\n/** One queue per mounted provider, never shared between SSR requests or React roots. */\nexport function createMessageStore() {\n  let entries = emptyMessages;\n  let sequence = 0;\n  let available = true;\n  const listeners = new Set<() => void>();\n  const publish = (next: readonly MessageEntry[]) => {\n    entries = next;\n    for (const listener of listeners) listener();\n  };\n  const open = (options: MessageOptions, scope?: string, config?: LeafConfig) => {\n    const key = options.key ?? `leaf-message-${++sequence}`;\n    if (!available) return key;\n    const existing = entries.find((entry) => entry.key === key);\n    const entry: MessageEntry = {\n      ...options,\n      key,\n      scope,\n      config,\n      open: true,\n      revision: (existing?.revision ?? 0) + 1,\n    };\n    publish(\n      existing ? entries.map((item) => (item.key === key ? entry : item)) : [...entries, entry],\n    );\n    return key;\n  };\n  const close = (key?: string) => {\n    const closing = entries.filter(\n      (entry) => entry.open && (key === undefined || entry.key === key),\n    );\n    if (!closing.length) return;\n    publish(entries.map((entry) => (closing.includes(entry) ? { ...entry, open: false } : entry)));\n    for (const entry of closing) entry.onClose?.();\n  };\n  return {\n    getSnapshot: () => entries,\n    subscribe: (listener: () => void) => {\n      available = true;\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n        if (!listeners.size) {\n          available = false;\n          entries = emptyMessages;\n        }\n      };\n    },\n    close,\n    remove: (key: string) => {\n      publish(entries.filter((entry) => entry.key !== key || entry.open));\n    },\n    updateScope: (scope: string, config: LeafConfig) => {\n      if (!entries.some((entry) => entry.scope === scope && entry.config !== config)) return;\n      publish(entries.map((entry) => (entry.scope === scope ? { ...entry, config } : entry)));\n    },\n    api: (scope?: string, getConfig?: () => LeafConfig): MessageApi => {\n      const show = (options: MessageOptions) => open(options, scope, getConfig?.());\n      return {\n        open: show,\n        close,\n        success: (content, duration) => show({ content, duration, type: 'success' }),\n        info: (content, duration) => show({ content, duration, type: 'info' }),\n        warning: (content, duration) => show({ content, duration, type: 'warning' }),\n        error: (content, duration) => show({ content, duration, type: 'error' }),\n        loading: (content) => show({ content, duration: 0, type: 'loading' }),\n      };\n    },\n  };\n}\nexport type MessageStore = ReturnType<typeof createMessageStore>;\nexport const MessageContext = createContext<MessageStore | null>(null);\n"],"names":["emptyMessages","createMessageStore","entries","sequence","available","listeners","Set","publish","next","listener","open","options","scope","config","key","existing","entry","item","close","closing","undefined","getConfig","show","content","duration","MessageContext","createContext"],"mappings":";;AAWO,MAAMA,gBAAyC,EAAE;AAGjD,SAASC;IACd,IAAIC,UAAUF;IACd,IAAIG,WAAW;IACf,IAAIC,YAAY;IAChB,MAAMC,YAAY,IAAIC;IACtB,MAAMC,UAAU,CAACC;QACfN,UAAUM;QACV,KAAK,MAAMC,YAAYJ,UAAWI;IACpC;IACA,MAAMC,OAAO,CAACC,SAAyBC,OAAgBC;QACrD,MAAMC,MAAMH,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,EAAER,UAAU;QACvD,IAAI,CAACC,WAAW,OAAOU;QACvB,MAAMC,WAAWb,QAAQ,IAAI,CAAC,CAACc,QAAUA,MAAM,GAAG,KAAKF;QACvD,MAAME,QAAsB;YAC1B,GAAGL,OAAO;YACVG;YACAF;YACAC;YACA,MAAM;YACN,UAAWE,AAAAA,CAAAA,UAAU,YAAY,KAAK;QACxC;QACAR,QACEQ,WAAWb,QAAQ,GAAG,CAAC,CAACe,OAAUA,KAAK,GAAG,KAAKH,MAAME,QAAQC,QAAS;eAAIf;YAASc;SAAM;QAE3F,OAAOF;IACT;IACA,MAAMI,QAAQ,CAACJ;QACb,MAAMK,UAAUjB,QAAQ,MAAM,CAC5B,CAACc,QAAUA,MAAM,IAAI,IAAKF,CAAAA,AAAQM,WAARN,OAAqBE,MAAM,GAAG,KAAKF,GAAE;QAEjE,IAAI,CAACK,QAAQ,MAAM,EAAE;QACrBZ,QAAQL,QAAQ,GAAG,CAAC,CAACc,QAAWG,QAAQ,QAAQ,CAACH,SAAS;gBAAE,GAAGA,KAAK;gBAAE,MAAM;YAAM,IAAIA;QACtF,KAAK,MAAMA,SAASG,QAASH,MAAM,OAAO;IAC5C;IACA,OAAO;QACL,aAAa,IAAMd;QACnB,WAAW,CAACO;YACVL,YAAY;YACZC,UAAU,GAAG,CAACI;YACd,OAAO;gBACLJ,UAAU,MAAM,CAACI;gBACjB,IAAI,CAACJ,UAAU,IAAI,EAAE;oBACnBD,YAAY;oBACZF,UAAUF;gBACZ;YACF;QACF;QACAkB;QACA,QAAQ,CAACJ;YACPP,QAAQL,QAAQ,MAAM,CAAC,CAACc,QAAUA,MAAM,GAAG,KAAKF,OAAOE,MAAM,IAAI;QACnE;QACA,aAAa,CAACJ,OAAeC;YAC3B,IAAI,CAACX,QAAQ,IAAI,CAAC,CAACc,QAAUA,MAAM,KAAK,KAAKJ,SAASI,MAAM,MAAM,KAAKH,SAAS;YAChFN,QAAQL,QAAQ,GAAG,CAAC,CAACc,QAAWA,MAAM,KAAK,KAAKJ,QAAQ;oBAAE,GAAGI,KAAK;oBAAEH;gBAAO,IAAIG;QACjF;QACA,KAAK,CAACJ,OAAgBS;YACpB,MAAMC,OAAO,CAACX,UAA4BD,KAAKC,SAASC,OAAOS;YAC/D,OAAO;gBACL,MAAMC;gBACNJ;gBACA,SAAS,CAACK,SAASC,WAAaF,KAAK;wBAAEC;wBAASC;wBAAU,MAAM;oBAAU;gBAC1E,MAAM,CAACD,SAASC,WAAaF,KAAK;wBAAEC;wBAASC;wBAAU,MAAM;oBAAO;gBACpE,SAAS,CAACD,SAASC,WAAaF,KAAK;wBAAEC;wBAASC;wBAAU,MAAM;oBAAU;gBAC1E,OAAO,CAACD,SAASC,WAAaF,KAAK;wBAAEC;wBAASC;wBAAU,MAAM;oBAAQ;gBACtE,SAAS,CAACD,UAAYD,KAAK;wBAAEC;wBAAS,UAAU;wBAAG,MAAM;oBAAU;YACrE;QACF;IACF;AACF;AAEO,MAAME,iBAAiBC,cAAmC"}

package/dist/esm/browser/modules/modal/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Modal } from "./modal.js";

package/dist/esm/browser/modules/modal/modal.js

@@ -0,0 +1,224 @@
+"use client";
+import '../../../styles/components/modal.css';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "../button/index.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { Scrollbar } from "../scrollbar/index.js";
+import { classes } from "../shared/classes.js";
+import { useDialog } from "../shared/dialog.js";
+import { inertProps } from "../shared/inert.js";
+import { OverlayOwner } from "../shared/overlay-owner.js";
+import { useNaturalHeightTransition, usePresence } from "../shared/presence.js";
+import { ScopedPortal } from "../shared/scoped-portal.js";
+function ModalSurface({ open, title, description, icon, divided = true, footer, confirmText, cancelText, confirmLoading = false, confirmButtonProps, cancelButtonProps, onConfirm, onCancel, width = 480, closable = true, maskClosable = true, keyboard = true, onClose, afterClose, forceRender = false, destroyOnClose = false, preserve, initialFocus, returnFocus, container: _container, children, className, style, ...props }) {
+    const { messages, maskBlur } = useLeafConfig();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState();
+    const mounted = useRef(true);
+    const accepting = useRef(false);
+    const generation = useRef(0);
+    useEffect(()=>{
+        mounted.current = true;
+        return ()=>{
+            mounted.current = false;
+        };
+    }, []);
+    useEffect(()=>{
+        generation.current++;
+        accepting.current = false;
+        setPending(false);
+        if (open) setError(void 0);
+    }, [
+        open
+    ]);
+    const busy = pending || confirmLoading;
+    async function accept() {
+        if (accepting.current || busy) return;
+        if (!onConfirm) {
+            if (confirmButtonProps?.type !== 'submit') onClose?.();
+            return;
+        }
+        accepting.current = true;
+        const request = generation.current;
+        setPending(true);
+        setError(void 0);
+        try {
+            await onConfirm();
+        } catch (reason) {
+            if (mounted.current && generation.current === request) setError(reason instanceof Error ? reason.message : String(reason));
+        } finally{
+            if (generation.current === request) {
+                accepting.current = false;
+                if (mounted.current) setPending(false);
+            }
+        }
+    }
+    const cancel = ()=>{
+        if (!busy) (onCancel ?? onClose)?.();
+    };
+    const actions = {
+        cancelButton: /*#__PURE__*/ jsx(Button, {
+            variant: "outline",
+            ...cancelButtonProps,
+            disabled: busy || cancelButtonProps?.disabled,
+            onClick: (event)=>{
+                cancelButtonProps?.onClick?.(event);
+                if (!event.defaultPrevented) cancel();
+            },
+            children: cancelText ?? messages.cancel
+        }),
+        confirmButton: /*#__PURE__*/ jsx(Button, {
+            ...confirmButtonProps,
+            loading: busy || confirmButtonProps?.loading,
+            onClick: (event)=>{
+                confirmButtonProps?.onClick?.(event);
+                if (!event.defaultPrevented) accept();
+            },
+            children: confirmText ?? messages.confirm
+        })
+    };
+    const renderedFooter = 'function' == typeof footer ? footer(actions) : void 0 === footer ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            actions.cancelButton,
+            actions.confirmButton
+        ]
+    }) : footer;
+    const panel = useRef(null);
+    const content = useRef(null);
+    const backdrop = useRef(null);
+    const present = usePresence(open, backdrop);
+    useNaturalHeightTransition(panel, content, open);
+    const titleId = `${useId()}-title`;
+    const descriptionId = `${useId()}-description`;
+    const modalId = `${useId()}-dialog`;
+    const close = useRef(cancel);
+    close.current = cancel;
+    const wasPresent = useRef(false);
+    useEffect(()=>{
+        if (wasPresent.current && !present) afterClose?.();
+        wasPresent.current = present;
+    }, [
+        present,
+        afterClose
+    ]);
+    useDialog(open, panel, modalId, cancel, keyboard, {
+        initialFocus,
+        returnFocus
+    });
+    const visited = useRef(false);
+    if (open) visited.current = true;
+    if (!present && !forceRender && ((void 0 === preserve ? destroyOnClose : !preserve) || !visited.current)) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        hidden: !present,
+        className: "leaf-modal-mask",
+        "data-blur": maskBlur ? void 0 : 'off',
+        "data-state": open ? 'open' : 'closing',
+        "aria-hidden": !open || void 0,
+        ...inertProps(!open),
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                ref: backdrop,
+                type: "button",
+                className: "leaf-modal-backdrop",
+                tabIndex: -1,
+                "aria-label": messages.close,
+                onClick: ()=>{
+                    if (maskClosable) close.current?.();
+                }
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ...props,
+                ref: panel,
+                id: props.id ?? modalId,
+                role: props.role ?? 'dialog',
+                "aria-modal": "true",
+                "aria-labelledby": null != title ? titleId : props['aria-labelledby'],
+                "aria-describedby": [
+                    props['aria-describedby'],
+                    null != description && descriptionId
+                ].filter(Boolean).join(' ') || void 0,
+                tabIndex: -1,
+                className: classes('leaf-modal', divided && 'leaf-modal--divided', className),
+                style: {
+                    width,
+                    ...style
+                },
+                children: /*#__PURE__*/ jsxs(OverlayOwner.Provider, {
+                    value: modalId,
+                    children: [
+                        (null != title || null != description || null != icon || closable) && /*#__PURE__*/ jsxs("div", {
+                            className: classes('leaf-modal__header', null == description && 'leaf-modal__header--simple', null == title && null == description && null == icon && 'leaf-modal__header--compact'),
+                            children: [
+                                null != icon && /*#__PURE__*/ jsx("span", {
+                                    className: "leaf-modal__icon",
+                                    "aria-hidden": "true",
+                                    children: icon
+                                }),
+                                (null != title || null != description) && /*#__PURE__*/ jsxs("div", {
+                                    className: "leaf-modal__heading",
+                                    children: [
+                                        null != title && /*#__PURE__*/ jsx("h2", {
+                                            id: titleId,
+                                            children: title
+                                        }),
+                                        null != description && /*#__PURE__*/ jsx("div", {
+                                            id: descriptionId,
+                                            className: "leaf-modal__description",
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                closable && /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "leaf-modal__close",
+                                    "aria-label": messages.close,
+                                    onClick: ()=>close.current?.(),
+                                    children: /*#__PURE__*/ jsx(X, {
+                                        size: 18,
+                                        "aria-hidden": "true"
+                                    })
+                                })
+                            ]
+                        }),
+                        (null != children && false !== children || null != error) && /*#__PURE__*/ jsx(Scrollbar, {
+                            className: "leaf-modal__body",
+                            viewportClassName: "leaf-modal__viewport",
+                            orientation: "vertical",
+                            "aria-labelledby": null != title ? titleId : void 0,
+                            "aria-label": null == title ? props['aria-label'] ?? messages.confirm : void 0,
+                            children: /*#__PURE__*/ jsxs("div", {
+                                ref: content,
+                                className: "leaf-modal__content",
+                                children: [
+                                    children,
+                                    error && /*#__PURE__*/ jsx("p", {
+                                        role: "alert",
+                                        className: "leaf-confirm-error",
+                                        children: error
+                                    })
+                                ]
+                            })
+                        }),
+                        null != renderedFooter && /*#__PURE__*/ jsx("div", {
+                            className: "leaf-modal__footer",
+                            children: renderedFooter
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function Modal(props) {
+    return /*#__PURE__*/ jsx(ScopedPortal, {
+        container: props.container,
+        children: /*#__PURE__*/ jsx(ModalSurface, {
+            ...props
+        })
+    });
+}
+export { Modal };
+
+//# sourceMappingURL=modal.js.map

package/dist/esm/browser/modules/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal/modal.js","sources":["../../../../../src/modal/modal.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport { type HTMLAttributes, type ReactNode, useEffect, useId, useRef, useState } from 'react';\nimport { Button, type ButtonProps } from '../button';\nimport { useLeafConfig } from '../config-provider/context';\nimport { Scrollbar } from '../scrollbar';\nimport { classes } from '../shared/classes';\nimport { type DialogFocusOptions, useDialog } from '../shared/dialog';\nimport { inertProps } from '../shared/inert';\nimport { OverlayOwner } from '../shared/overlay-owner';\nimport { useNaturalHeightTransition, usePresence } from '../shared/presence';\nimport { ScopedPortal } from '../shared/scoped-portal';\n\nexport interface ModalFooterActions {\n  confirmButton: ReactNode;\n  cancelButton: ReactNode;\n}\nexport interface ModalProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,\n    DialogFocusOptions {\n  open: boolean;\n  title?: ReactNode;\n  /** Supporting text displayed below the title. */\n  description?: ReactNode;\n  /** Decorative header icon. */\n  icon?: ReactNode;\n  /** Separate the header and footer with subtle borders. */\n  divided?: boolean;\n  footer?: ReactNode | ((actions: ModalFooterActions) => ReactNode);\n  confirmText?: ReactNode;\n  cancelText?: ReactNode;\n  confirmLoading?: boolean;\n  confirmButtonProps?: ButtonProps;\n  cancelButtonProps?: ButtonProps;\n  onConfirm?: () => void | Promise<void>;\n  onCancel?: () => void;\n  width?: number | string;\n  closable?: boolean;\n  maskClosable?: boolean;\n  keyboard?: boolean;\n  onClose?: () => void;\n  afterClose?: () => void;\n  forceRender?: boolean;\n  destroyOnClose?: boolean;\n  preserve?: boolean;\n  container?: Element | DocumentFragment | (() => Element | DocumentFragment);\n}\n\nfunction ModalSurface({\n  open,\n  title,\n  description,\n  icon,\n  divided = true,\n  footer,\n  confirmText,\n  cancelText,\n  confirmLoading = false,\n  confirmButtonProps,\n  cancelButtonProps,\n  onConfirm,\n  onCancel,\n  width = 480,\n  closable = true,\n  maskClosable = true,\n  keyboard = true,\n  onClose,\n  afterClose,\n  forceRender = false,\n  destroyOnClose = false,\n  preserve,\n  initialFocus,\n  returnFocus,\n  container: _container,\n  children,\n  className,\n  style,\n  ...props\n}: ModalProps) {\n  const { messages, maskBlur } = useLeafConfig();\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<string>();\n  const mounted = useRef(true);\n  const accepting = useRef(false);\n  const generation = useRef(0);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  useEffect(() => {\n    generation.current++;\n    accepting.current = false;\n    setPending(false);\n    if (open) setError(undefined);\n  }, [open]);\n  const busy = pending || confirmLoading;\n  async function accept() {\n    if (accepting.current || busy) return;\n    if (!onConfirm) {\n      if (confirmButtonProps?.type !== 'submit') onClose?.();\n      return;\n    }\n    accepting.current = true;\n    const request = generation.current;\n    setPending(true);\n    setError(undefined);\n    try {\n      await onConfirm();\n    } catch (reason) {\n      if (mounted.current && generation.current === request)\n        setError(reason instanceof Error ? reason.message : String(reason));\n    } finally {\n      if (generation.current === request) {\n        accepting.current = false;\n        if (mounted.current) setPending(false);\n      }\n    }\n  }\n  const cancel = () => {\n    if (!busy) (onCancel ?? onClose)?.();\n  };\n  const actions: ModalFooterActions = {\n    cancelButton: (\n      <Button\n        variant=\"outline\"\n        {...cancelButtonProps}\n        disabled={busy || cancelButtonProps?.disabled}\n        onClick={(event) => {\n          cancelButtonProps?.onClick?.(event);\n          if (!event.defaultPrevented) cancel();\n        }}\n      >\n        {cancelText ?? messages.cancel}\n      </Button>\n    ),\n    confirmButton: (\n      <Button\n        {...confirmButtonProps}\n        loading={busy || confirmButtonProps?.loading}\n        onClick={(event) => {\n          confirmButtonProps?.onClick?.(event);\n          if (!event.defaultPrevented) void accept();\n        }}\n      >\n        {confirmText ?? messages.confirm}\n      </Button>\n    ),\n  };\n  const renderedFooter =\n    typeof footer === 'function' ? (\n      footer(actions)\n    ) : footer === undefined ? (\n      <>\n        {actions.cancelButton}\n        {actions.confirmButton}\n      </>\n    ) : (\n      footer\n    );\n  const panel = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const backdrop = useRef<HTMLButtonElement>(null);\n  const present = usePresence(open, backdrop);\n  useNaturalHeightTransition(panel, content, open);\n  const titleId = `${useId()}-title`;\n  const descriptionId = `${useId()}-description`;\n  const modalId = `${useId()}-dialog`;\n  const close = useRef(cancel);\n  close.current = cancel;\n  const wasPresent = useRef(false);\n  useEffect(() => {\n    if (wasPresent.current && !present) afterClose?.();\n    wasPresent.current = present;\n  }, [present, afterClose]);\n  useDialog(open, panel, modalId, cancel, keyboard, { initialFocus, returnFocus });\n  const visited = useRef(false);\n  if (open) visited.current = true;\n  if (\n    !present &&\n    !forceRender &&\n    ((preserve === undefined ? destroyOnClose : !preserve) || !visited.current)\n  )\n    return null;\n  return (\n    <div\n      hidden={!present}\n      className=\"leaf-modal-mask\"\n      data-blur={maskBlur ? undefined : 'off'}\n      data-state={open ? 'open' : 'closing'}\n      aria-hidden={!open || undefined}\n      {...inertProps(!open)}\n    >\n      <button\n        ref={backdrop}\n        type=\"button\"\n        className=\"leaf-modal-backdrop\"\n        tabIndex={-1}\n        aria-label={messages.close}\n        onClick={() => {\n          if (maskClosable) close.current?.();\n        }}\n      />\n      {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: dialog and alertdialog both support aria-modal. */}\n      <div\n        {...props}\n        ref={panel}\n        id={props.id ?? modalId}\n        role={props.role ?? 'dialog'}\n        aria-modal=\"true\"\n        aria-labelledby={title != null ? titleId : props['aria-labelledby']}\n        aria-describedby={\n          [props['aria-describedby'], description != null && descriptionId]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n        tabIndex={-1}\n        className={classes('leaf-modal', divided && 'leaf-modal--divided', className)}\n        style={{ width, ...style }}\n      >\n        <OverlayOwner.Provider value={modalId}>\n          {(title != null || description != null || icon != null || closable) && (\n            <div\n              className={classes(\n                'leaf-modal__header',\n                description == null && 'leaf-modal__header--simple',\n                title == null &&\n                  description == null &&\n                  icon == null &&\n                  'leaf-modal__header--compact',\n              )}\n            >\n              {icon != null && (\n                <span className=\"leaf-modal__icon\" aria-hidden=\"true\">\n                  {icon}\n                </span>\n              )}\n              {(title != null || description != null) && (\n                <div className=\"leaf-modal__heading\">\n                  {title != null && <h2 id={titleId}>{title}</h2>}\n                  {description != null && (\n                    <div id={descriptionId} className=\"leaf-modal__description\">\n                      {description}\n                    </div>\n                  )}\n                </div>\n              )}\n              {closable && (\n                <button\n                  type=\"button\"\n                  className=\"leaf-modal__close\"\n                  aria-label={messages.close}\n                  onClick={() => close.current?.()}\n                >\n                  <X size={18} aria-hidden=\"true\" />\n                </button>\n              )}\n            </div>\n          )}\n          {((children != null && children !== false) || error != null) && (\n            <Scrollbar\n              className=\"leaf-modal__body\"\n              viewportClassName=\"leaf-modal__viewport\"\n              orientation=\"vertical\"\n              aria-labelledby={title != null ? titleId : undefined}\n              aria-label={title == null ? (props['aria-label'] ?? messages.confirm) : undefined}\n            >\n              <div ref={content} className=\"leaf-modal__content\">\n                {children}\n                {error && (\n                  <p role=\"alert\" className=\"leaf-confirm-error\">\n                    {error}\n                  </p>\n                )}\n              </div>\n            </Scrollbar>\n          )}\n          {renderedFooter != null && <div className=\"leaf-modal__footer\">{renderedFooter}</div>}\n        </OverlayOwner.Provider>\n      </div>\n    </div>\n  );\n}\nexport function Modal(props: ModalProps) {\n  return (\n    <ScopedPortal container={props.container}>\n      <ModalSurface {...props} />\n    </ScopedPortal>\n  );\n}\n"],"names":["ModalSurface","open","title","description","icon","divided","footer","confirmText","cancelText","confirmLoading","confirmButtonProps","cancelButtonProps","onConfirm","onCancel","width","closable","maskClosable","keyboard","onClose","afterClose","forceRender","destroyOnClose","preserve","initialFocus","returnFocus","_container","children","className","style","props","messages","maskBlur","useLeafConfig","pending","setPending","useState","error","setError","mounted","useRef","accepting","generation","useEffect","undefined","busy","accept","request","reason","Error","String","cancel","actions","Button","event","renderedFooter","panel","content","backdrop","present","usePresence","useNaturalHeightTransition","titleId","useId","descriptionId","modalId","close","wasPresent","useDialog","visited","inertProps","Boolean","classes","OverlayOwner","X","Scrollbar","Modal","ScopedPortal"],"mappings":";;;;;;;;;;;;;;AA+CA,SAASA,aAAa,EACpBC,IAAI,EACJC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,UAAU,IAAI,EACdC,MAAM,EACNC,WAAW,EACXC,UAAU,EACVC,iBAAiB,KAAK,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,GAAG,EACXC,WAAW,IAAI,EACfC,eAAe,IAAI,EACnBC,WAAW,IAAI,EACfC,OAAO,EACPC,UAAU,EACVC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtBC,QAAQ,EACRC,YAAY,EACZC,WAAW,EACX,WAAWC,UAAU,EACrBC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACL,GAAGC,OACQ;IACX,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGC;IAC/B,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IACvC,MAAM,CAACC,OAAOC,SAAS,GAAGF;IAC1B,MAAMG,UAAUC,OAAO;IACvB,MAAMC,YAAYD,OAAO;IACzB,MAAME,aAAaF,OAAO;IAC1BG,UAAU;QACRJ,QAAQ,OAAO,GAAG;QAClB,OAAO;YACLA,QAAQ,OAAO,GAAG;QACpB;IACF,GAAG,EAAE;IACLI,UAAU;QACRD,WAAW,OAAO;QAClBD,UAAU,OAAO,GAAG;QACpBN,WAAW;QACX,IAAIjC,MAAMoC,SAASM;IACrB,GAAG;QAAC1C;KAAK;IACT,MAAM2C,OAAOX,WAAWxB;IACxB,eAAeoC;QACb,IAAIL,UAAU,OAAO,IAAII,MAAM;QAC/B,IAAI,CAAChC,WAAW;YACd,IAAIF,oBAAoB,SAAS,UAAUQ;YAC3C;QACF;QACAsB,UAAU,OAAO,GAAG;QACpB,MAAMM,UAAUL,WAAW,OAAO;QAClCP,WAAW;QACXG,SAASM;QACT,IAAI;YACF,MAAM/B;QACR,EAAE,OAAOmC,QAAQ;YACf,IAAIT,QAAQ,OAAO,IAAIG,WAAW,OAAO,KAAKK,SAC5CT,SAASU,kBAAkBC,QAAQD,OAAO,OAAO,GAAGE,OAAOF;QAC/D,SAAU;YACR,IAAIN,WAAW,OAAO,KAAKK,SAAS;gBAClCN,UAAU,OAAO,GAAG;gBACpB,IAAIF,QAAQ,OAAO,EAAEJ,WAAW;YAClC;QACF;IACF;IACA,MAAMgB,SAAS;QACb,IAAI,CAACN,MAAO/B,CAAAA,YAAYK,OAAM;IAChC;IACA,MAAMiC,UAA8B;QAClC,cAAc,WAAd,GACE,IAACC,QAAMA;YACL,SAAQ;YACP,GAAGzC,iBAAiB;YACrB,UAAUiC,QAAQjC,mBAAmB;YACrC,SAAS,CAAC0C;gBACR1C,mBAAmB,UAAU0C;gBAC7B,IAAI,CAACA,MAAM,gBAAgB,EAAEH;YAC/B;sBAEC1C,cAAcsB,SAAS,MAAM;;QAGlC,eAAe,WAAf,GACE,IAACsB,QAAMA;YACJ,GAAG1C,kBAAkB;YACtB,SAASkC,QAAQlC,oBAAoB;YACrC,SAAS,CAAC2C;gBACR3C,oBAAoB,UAAU2C;gBAC9B,IAAI,CAACA,MAAM,gBAAgB,EAAOR;YACpC;sBAECtC,eAAeuB,SAAS,OAAO;;IAGtC;IACA,MAAMwB,iBACJ,AAAkB,cAAlB,OAAOhD,SACLA,OAAO6C,WACL7C,AAAWqC,WAAXrC,SAAuB,WAAZqC,GACb;;YACGQ,QAAQ,YAAY;YACpBA,QAAQ,aAAa;;SAGxB7C;IAEJ,MAAMiD,QAAQhB,OAAuB;IACrC,MAAMiB,UAAUjB,OAAuB;IACvC,MAAMkB,WAAWlB,OAA0B;IAC3C,MAAMmB,UAAUC,YAAY1D,MAAMwD;IAClCG,2BAA2BL,OAAOC,SAASvD;IAC3C,MAAM4D,UAAU,GAAGC,QAAQ,MAAM,CAAC;IAClC,MAAMC,gBAAgB,GAAGD,QAAQ,YAAY,CAAC;IAC9C,MAAME,UAAU,GAAGF,QAAQ,OAAO,CAAC;IACnC,MAAMG,QAAQ1B,OAAOW;IACrBe,MAAM,OAAO,GAAGf;IAChB,MAAMgB,aAAa3B,OAAO;IAC1BG,UAAU;QACR,IAAIwB,WAAW,OAAO,IAAI,CAACR,SAASvC;QACpC+C,WAAW,OAAO,GAAGR;IACvB,GAAG;QAACA;QAASvC;KAAW;IACxBgD,UAAUlE,MAAMsD,OAAOS,SAASd,QAAQjC,UAAU;QAAEM;QAAcC;IAAY;IAC9E,MAAM4C,UAAU7B,OAAO;IACvB,IAAItC,MAAMmE,QAAQ,OAAO,GAAG;IAC5B,IACE,CAACV,WACD,CAACtC,eACCE,CAAAA,CAAAA,AAAaqB,WAAbrB,WAAyBD,iBAAiB,CAACC,QAAO,KAAM,CAAC8C,QAAQ,OAAM,GAEzE,OAAO;IACT,OAAO,WAAP,GACE,KAAC;QACC,QAAQ,CAACV;QACT,WAAU;QACV,aAAW3B,WAAWY,SAAY;QAClC,cAAY1C,OAAO,SAAS;QAC5B,eAAa,CAACA,QAAQ0C;QACrB,GAAG0B,WAAW,CAACpE,KAAK;;0BAErB,IAAC;gBACC,KAAKwD;gBACL,MAAK;gBACL,WAAU;gBACV,UAAU;gBACV,cAAY3B,SAAS,KAAK;gBAC1B,SAAS;oBACP,IAAId,cAAciD,MAAM,OAAO;gBACjC;;0BAGF,IAAC;gBACE,GAAGpC,KAAK;gBACT,KAAK0B;gBACL,IAAI1B,MAAM,EAAE,IAAImC;gBAChB,MAAMnC,MAAM,IAAI,IAAI;gBACpB,cAAW;gBACX,mBAAiB3B,AAAS,QAATA,QAAgB2D,UAAUhC,KAAK,CAAC,kBAAkB;gBACnE,oBACE;oBAACA,KAAK,CAAC,mBAAmB;oBAAiB,QAAf1B,eAAuB4D;iBAAc,CAC9D,MAAM,CAACO,SACP,IAAI,CAAC,QAAQ3B;gBAElB,UAAU;gBACV,WAAW4B,QAAQ,cAAclE,WAAW,uBAAuBsB;gBACnE,OAAO;oBAAEb;oBAAO,GAAGc,KAAK;gBAAC;0BAEzB,mBAAC4C,aAAa,QAAQ;oBAAC,OAAOR;;wBAC1B9D,CAAAA,AAAS,QAATA,SAAiBC,AAAe,QAAfA,eAAuBC,AAAQ,QAARA,QAAgBW,QAAO,mBAC/D,KAAC;4BACC,WAAWwD,QACT,sBACApE,AAAe,QAAfA,eAAuB,8BACvBD,AAAS,QAATA,SACEC,AAAe,QAAfA,eACAC,AAAQ,QAARA,QACA;;gCAGK,QAARA,QAAgB,WAAR,GACP,IAAC;oCAAK,WAAU;oCAAmB,eAAY;8CAC5CA;;gCAGHF,CAAAA,AAAS,QAATA,SAAiBC,AAAe,QAAfA,WAAkB,mBACnC,KAAC;oCAAI,WAAU;;wCACH,QAATD,SAAiB,WAAR,GAAQ,IAAC;4CAAG,IAAI2D;sDAAU3D;;wCACpB,QAAfC,eAAuB,WAAR,GACd,IAAC;4CAAI,IAAI4D;4CAAe,WAAU;sDAC/B5D;;;;gCAKRY,YAAY,WAAZA,GACC,IAAC;oCACC,MAAK;oCACL,WAAU;oCACV,cAAYe,SAAS,KAAK;oCAC1B,SAAS,IAAMmC,MAAM,OAAO;8CAE5B,kBAACQ,GAACA;wCAAC,MAAM;wCAAI,eAAY;;;;;wBAK9B/C,CAAAA,AAAY,QAAZA,YAAoBA,AAAa,UAAbA,YAAuBU,AAAS,QAATA,KAAY,mBACxD,IAACsC,WAASA;4BACR,WAAU;4BACV,mBAAkB;4BAClB,aAAY;4BACZ,mBAAiBxE,AAAS,QAATA,QAAgB2D,UAAUlB;4BAC3C,cAAYzC,AAAS,QAATA,QAAiB2B,KAAK,CAAC,aAAa,IAAIC,SAAS,OAAO,GAAIa;sCAExE,mBAAC;gCAAI,KAAKa;gCAAS,WAAU;;oCAC1B9B;oCACAU,SAAS,WAATA,GACC,IAAC;wCAAE,MAAK;wCAAQ,WAAU;kDACvBA;;;;;wBAMQ,QAAlBkB,kBAA0B,WAAR,GAAQ,IAAC;4BAAI,WAAU;sCAAsBA;;;;;;;AAK1E;AACO,SAASqB,MAAM9C,KAAiB;IACrC,OAAO,WAAP,GACE,IAAC+C,cAAYA;QAAC,WAAW/C,MAAM,SAAS;kBACtC,kBAAC7B,cAAYA;YAAE,GAAG6B,KAAK;;;AAG7B"}

package/dist/esm/browser/modules/notification/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Notification, NotificationProvider, useNotification } from "./notification.js";

package/dist/esm/browser/modules/notification/notification.js

@@ -0,0 +1,279 @@
+"use client";
+import '../../../styles/components/notification.css';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { FeedbackIcon } from "../alert/alert.js";
+import { ConfigContext, useLeafConfig } from "../config-provider/context.js";
+import { inertProps } from "../shared/inert.js";
+import { useContentTransition, usePresence } from "../shared/presence.js";
+import { ScopedPortal } from "../shared/scoped-portal.js";
+import { leafThemeVariables } from "../theme.js";
+const empty = [];
+function createStore(maxCount) {
+    let entries = empty;
+    let sequence = 0;
+    const listeners = new Set();
+    const publish = (next)=>{
+        entries = next;
+        for (const listener of listeners)listener();
+    };
+    const close = (key)=>{
+        const closing = entries.filter((item)=>item.open && (void 0 === key || item.key === key));
+        if (!closing.length) return;
+        publish(entries.map((item)=>closing.includes(item) ? {
+                ...item,
+                open: false
+            } : item));
+        for (const item of closing)item.onClose?.();
+    };
+    return {
+        getSnapshot: ()=>entries,
+        subscribe: (listener)=>{
+            listeners.add(listener);
+            return ()=>{
+                listeners.delete(listener);
+                if (!listeners.size) entries = empty;
+            };
+        },
+        close,
+        remove: (key)=>publish(entries.filter((item)=>item.key !== key || item.open)),
+        update: (scope, config)=>{
+            if (entries.some((item)=>item.scope === scope && item.config !== config)) publish(entries.map((item)=>item.scope === scope ? {
+                    ...item,
+                    config
+                } : item));
+        },
+        api: (scope, getConfig)=>{
+            const open = (options)=>{
+                const key = options.key ?? `leaf-notification-${++sequence}`;
+                const existing = entries.find((item)=>item.key === key);
+                const entry = {
+                    ...options,
+                    key,
+                    scope,
+                    config: getConfig(),
+                    open: true,
+                    revision: (existing?.revision ?? 0) + 1
+                };
+                publish(existing ? entries.map((item)=>item.key === key ? entry : item) : [
+                    ...entries,
+                    entry
+                ]);
+                const active = entries.filter((item)=>item.open);
+                if (active.length > Math.max(1, maxCount)) for (const item of active.slice(0, active.length - Math.max(1, maxCount)))close(item.key);
+                return key;
+            };
+            return {
+                open,
+                close,
+                success: (options)=>open({
+                        ...options,
+                        type: 'success'
+                    }),
+                info: (options)=>open({
+                        ...options,
+                        type: 'info'
+                    }),
+                warning: (options)=>open({
+                        ...options,
+                        type: 'warning'
+                    }),
+                error: (options)=>open({
+                        ...options,
+                        type: 'error'
+                    })
+            };
+        }
+    };
+}
+const Context = /*#__PURE__*/ createContext(null);
+function NotificationProvider({ children, maxCount = 5 }) {
+    const [store] = useState(()=>createStore(maxCount));
+    return /*#__PURE__*/ jsxs(Context.Provider, {
+        value: store,
+        children: [
+            /*#__PURE__*/ jsx(NotificationHost, {
+                store: store
+            }),
+            children
+        ]
+    });
+}
+function NotificationScope({ children }) {
+    return useContext(Context) ? children : /*#__PURE__*/ jsx(NotificationProvider, {
+        children: children
+    });
+}
+function useNotification() {
+    const store = useContext(Context);
+    const config = useLeafConfig();
+    const latest = useRef(config);
+    latest.current = config;
+    const scope = useId();
+    useEffect(()=>store?.update(scope, config), [
+        store,
+        scope,
+        config
+    ]);
+    const api = useMemo(()=>store?.api(scope, ()=>latest.current), [
+        store,
+        scope
+    ]);
+    if (!api) throw new Error('useNotification requires ConfigProvider or NotificationProvider.');
+    return api;
+}
+function NotificationHost({ store }) {
+    const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, ()=>empty);
+    if (!entries.length) return null;
+    return /*#__PURE__*/ jsx(ScopedPortal, {
+        children: [
+            'top-right',
+            'top-left',
+            'bottom-right',
+            'bottom-left'
+        ].map((placement)=>/*#__PURE__*/ jsx("div", {
+                className: `leaf-notification-region leaf-notification-region--${placement}`,
+                children: entries.filter((entry)=>(entry.placement ?? 'top-right') === placement).map((entry)=>/*#__PURE__*/ jsx(NotificationItem, {
+                        entry: entry,
+                        close: ()=>store.close(entry.key),
+                        remove: ()=>store.remove(entry.key)
+                    }, entry.key))
+            }, placement))
+    });
+}
+function Notification({ open, afterClose, onClose, ...options }) {
+    return /*#__PURE__*/ jsx(ScopedPortal, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: `leaf-notification-region leaf-notification-region--${options.placement ?? 'top-right'}`,
+            children: /*#__PURE__*/ jsx(NotificationItem, {
+                entry: {
+                    ...options,
+                    key: 'single',
+                    open,
+                    revision: 0
+                },
+                close: ()=>onClose?.(),
+                remove: ()=>afterClose?.()
+            })
+        })
+    });
+}
+function NotificationItem({ entry, close, remove }) {
+    const inherited = useLeafConfig();
+    const config = entry.config ?? inherited;
+    const ref = useRef(null);
+    const icon = useRef(null);
+    const present = usePresence(entry.open, ref);
+    const type = entry.type ?? 'info';
+    useContentTransition(icon, `${entry.open}:${type}`);
+    const [hover, setHover] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const duration = entry.duration ?? 4.5;
+    const remaining = useRef(1000 * duration);
+    const cycle = useRef({
+        open: entry.open,
+        revision: entry.revision,
+        duration
+    });
+    useEffect(()=>{
+        if (cycle.current.revision !== entry.revision || cycle.current.duration !== duration || entry.open && !cycle.current.open) remaining.current = 1000 * duration;
+        cycle.current = {
+            open: entry.open,
+            revision: entry.revision,
+            duration
+        };
+        if (!entry.open || hover || focus || duration <= 0) return;
+        const started = Date.now();
+        const timer = setTimeout(close, remaining.current);
+        return ()=>{
+            clearTimeout(timer);
+            remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+        };
+    }, [
+        entry.open,
+        entry.revision,
+        duration,
+        hover,
+        focus,
+        close
+    ]);
+    const previous = useRef(present);
+    useEffect(()=>{
+        if (previous.current && !present) remove();
+        previous.current = present;
+    }, [
+        present,
+        remove
+    ]);
+    if (!present) return null;
+    return /*#__PURE__*/ jsx(ConfigContext.Provider, {
+        value: config,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: "leaf-notification-slot",
+            "data-state": entry.open ? 'open' : 'closing',
+            style: entry.config ? leafThemeVariables(config.theme) : void 0,
+            ...inertProps(!entry.open),
+            "aria-hidden": !entry.open || void 0,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "leaf-notification-slot__content",
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: `leaf-notification leaf-notification--${type}`,
+                    role: 'error' === type || 'warning' === type ? 'alert' : 'status',
+                    onPointerEnter: ()=>setHover(true),
+                    onPointerLeave: ()=>setHover(false),
+                    onFocus: ()=>setFocus(true),
+                    onBlur: (event)=>{
+                        if (!event.currentTarget.contains(event.relatedTarget)) setFocus(false);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            ref: icon,
+                            className: "leaf-notification__icon",
+                            "aria-hidden": "true",
+                            children: entry.icon ?? /*#__PURE__*/ jsx(FeedbackIcon, {
+                                type: type
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "leaf-notification__body",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "leaf-notification__header",
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "leaf-notification__title",
+                                            children: entry.title
+                                        }),
+                                        false !== entry.closable && /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            className: "leaf-notification__close",
+                                            "aria-label": config.messages.close,
+                                            onClick: close,
+                                            children: /*#__PURE__*/ jsx(X, {
+                                                size: 16,
+                                                "aria-hidden": "true"
+                                            })
+                                        })
+                                    ]
+                                }),
+                                entry.description && /*#__PURE__*/ jsx("div", {
+                                    className: "leaf-notification__description",
+                                    children: entry.description
+                                }),
+                                entry.actions && /*#__PURE__*/ jsx("div", {
+                                    className: "leaf-notification__actions",
+                                    children: entry.actions
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+export { Notification, NotificationProvider, NotificationScope, useNotification };
+
+//# sourceMappingURL=notification.js.map