@ifhover/leaf-ui 0.0.0-stage → 0.6.0

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

@@ -0,0 +1,234 @@
+"use client";
+import '../../../styles/foundation.css';
+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 { ButtonControl } from "../button/button.js";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { ScrollbarControl } from "../scrollbar/scrollbar.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(ButtonControl, {
+            type: "button",
+            variant: "outline",
+            ...cancelButtonProps,
+            disabled: busy || cancelButtonProps?.disabled,
+            onClick: (event)=>{
+                cancelButtonProps?.onClick?.(event);
+                if (!event.defaultPrevented) cancel();
+            },
+            children: cancelText ?? messages.common.cancel
+        }),
+        confirmButton: /*#__PURE__*/ jsx(ButtonControl, {
+            type: "button",
+            ...confirmButtonProps,
+            loading: busy || confirmButtonProps?.loading,
+            onClick: (event)=>{
+                confirmButtonProps?.onClick?.(event);
+                if (!event.defaultPrevented) accept();
+            },
+            children: confirmText ?? messages.common.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.common.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.common.close,
+                                    onClick: ()=>close.current?.(),
+                                    children: /*#__PURE__*/ jsx(X, {
+                                        size: 18,
+                                        "aria-hidden": "true"
+                                    })
+                                })
+                            ]
+                        }),
+                        (null != children && false !== children || null != error) && /*#__PURE__*/ jsx(ScrollbarControl, {
+                            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.common.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 ModalBase(props) {
+    return /*#__PURE__*/ jsx(ScopedPortal, {
+        container: props.container,
+        children: /*#__PURE__*/ jsx(ModalSurface, {
+            ...props
+        })
+    });
+}
+function Modal(rawProps) {
+    const props = useComponentProps('Modal', rawProps);
+    return /*#__PURE__*/ jsx(ModalBase, {
+        ...props
+    });
+}
+export { Modal, ModalBase };
+
+//# 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 { ButtonControl, type ButtonProps } from '../button/button';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { ScrollbarControl as Scrollbar } from '../scrollbar/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      <ButtonControl\n        type=\"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.common.cancel}\n      </ButtonControl>\n    ),\n    confirmButton: (\n      <ButtonControl\n        type=\"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.common.confirm}\n      </ButtonControl>\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.common.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.common.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={\n                title == null ? (props['aria-label'] ?? messages.common.confirm) : undefined\n              }\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}\n// Other components reuse the dialog mechanics without inheriting public Modal defaults.\nexport function ModalBase(props: ModalProps) {\n  return (\n    <ScopedPortal container={props.container}>\n      <ModalSurface {...props} />\n    </ScopedPortal>\n  );\n}\nexport function Modal(rawProps: ModalProps) {\n  const props = useComponentProps('Modal', rawProps);\n  return <ModalBase {...props} />;\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","ButtonControl","event","renderedFooter","panel","content","backdrop","present","usePresence","useNaturalHeightTransition","titleId","useId","descriptionId","modalId","close","wasPresent","useDialog","visited","inertProps","Boolean","classes","OverlayOwner","X","Scrollbar","ModalBase","ScopedPortal","Modal","rawProps","useComponentProps"],"mappings":"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"}

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,293 @@
+"use client";
+import '../../../styles/foundation.css';
+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 { ComponentDefaultsContext, mergeComponentProps, useComponentProps } from "../config-provider/component-defaults.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, components)=>{
+            if (entries.some((item)=>item.scope === scope && (item.config !== config || item.components !== components))) publish(entries.map((item)=>item.scope === scope ? {
+                    ...item,
+                    config,
+                    components
+                } : item));
+        },
+        api: (scope, getConfig, getComponents)=>{
+            const open = (rawOptions)=>{
+                const components = getComponents();
+                const options = mergeComponentProps(components.Notification, rawOptions);
+                const key = options.key ?? `leaf-notification-${++sequence}`;
+                const existing = entries.find((item)=>item.key === key);
+                const entry = {
+                    ...options,
+                    key,
+                    scope,
+                    config: getConfig(),
+                    components,
+                    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 components = useContext(ComponentDefaultsContext);
+    const latestComponents = useRef(components);
+    latestComponents.current = components;
+    const latest = useRef(config);
+    latest.current = config;
+    const scope = useId();
+    useEffect(()=>store?.update(scope, config, components), [
+        store,
+        scope,
+        config,
+        components
+    ]);
+    const api = useMemo(()=>store?.api(scope, ()=>latest.current, ()=>latestComponents.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(ComponentDefaultsContext.Provider, {
+                        value: entry.components ?? {},
+                        children: /*#__PURE__*/ jsx(NotificationItem, {
+                            entry: entry,
+                            close: ()=>store.close(entry.key),
+                            remove: ()=>store.remove(entry.key)
+                        })
+                    }, entry.key))
+            }, placement))
+    });
+}
+function Notification(rawProps) {
+    const { open, afterClose, onClose, ...options } = useComponentProps('Notification', rawProps);
+    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.common.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification/notification.js","sources":["../../../../../src/notification/notification.tsx"],"sourcesContent":["import { X } from 'lucide-react';\nimport {\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react';\nimport { FeedbackIcon, type FeedbackType } from '../alert/alert';\nimport {\n  ComponentDefaultsContext,\n  type LeafComponentDefaults,\n  mergeComponentProps,\n  useComponentProps,\n} from '../config-provider/component-defaults';\nimport { ConfigContext, type LeafConfig, useLeafConfig } from '../config-provider/context';\nimport { inertProps } from '../shared/inert';\nimport { useContentTransition, usePresence } from '../shared/presence';\nimport { ScopedPortal } from '../shared/scoped-portal';\nimport { leafThemeVariables } from '../theme';\nexport interface NotificationOptions {\n  key?: string;\n  title: ReactNode;\n  description?: ReactNode;\n  type?: FeedbackType;\n  icon?: ReactNode;\n  actions?: ReactNode;\n  duration?: number;\n  placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n  closable?: boolean;\n  onClose?: () => void;\n}\nexport interface NotificationApi {\n  open: (options: NotificationOptions) => string;\n  success: (options: Omit<NotificationOptions, 'type'>) => string;\n  info: (options: Omit<NotificationOptions, 'type'>) => string;\n  warning: (options: Omit<NotificationOptions, 'type'>) => string;\n  error: (options: Omit<NotificationOptions, 'type'>) => string;\n  close: (key?: string) => void;\n}\nexport interface NotificationProps extends Omit<NotificationOptions, 'key'> {\n  open: boolean;\n  afterClose?: () => void;\n}\ninterface Entry extends NotificationOptions {\n  key: string;\n  open: boolean;\n  revision: number;\n  scope?: string;\n  config?: LeafConfig;\n  components?: LeafComponentDefaults;\n}\nconst empty: readonly Entry[] = [];\nfunction createStore(maxCount: number) {\n  let entries = empty;\n  let sequence = 0;\n  const listeners = new Set<() => void>();\n  const publish = (next: readonly Entry[]) => {\n    entries = next;\n    for (const listener of listeners) listener();\n  };\n  const close = (key?: string) => {\n    const closing = entries.filter((item) => item.open && (key === undefined || item.key === key));\n    if (!closing.length) return;\n    publish(entries.map((item) => (closing.includes(item) ? { ...item, open: false } : item)));\n    for (const item of closing) item.onClose?.();\n  };\n  return {\n    getSnapshot: () => entries,\n    subscribe: (listener: () => void) => {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n        if (!listeners.size) entries = empty;\n      };\n    },\n    close,\n    remove: (key: string) => publish(entries.filter((item) => item.key !== key || item.open)),\n    update: (scope: string, config: LeafConfig, components?: LeafComponentDefaults) => {\n      if (\n        entries.some(\n          (item) =>\n            item.scope === scope && (item.config !== config || item.components !== components),\n        )\n      )\n        publish(\n          entries.map((item) => (item.scope === scope ? { ...item, config, components } : item)),\n        );\n    },\n    api: (\n      scope: string,\n      getConfig: () => LeafConfig,\n      getComponents: () => LeafComponentDefaults,\n    ): NotificationApi => {\n      const open = (rawOptions: NotificationOptions) => {\n        const components = getComponents();\n        const options = mergeComponentProps<NotificationOptions>(\n          components.Notification,\n          rawOptions,\n        );\n        const key = options.key ?? `leaf-notification-${++sequence}`;\n        const existing = entries.find((item) => item.key === key);\n        const entry: Entry = {\n          ...options,\n          key,\n          scope,\n          config: getConfig(),\n          components,\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        const active = entries.filter((item) => item.open);\n        if (active.length > Math.max(1, maxCount))\n          for (const item of active.slice(0, active.length - Math.max(1, maxCount)))\n            close(item.key);\n        return key;\n      };\n      return {\n        open,\n        close,\n        success: (options) => open({ ...options, type: 'success' }),\n        info: (options) => open({ ...options, type: 'info' }),\n        warning: (options) => open({ ...options, type: 'warning' }),\n        error: (options) => open({ ...options, type: 'error' }),\n      };\n    },\n  };\n}\nconst Context = createContext<ReturnType<typeof createStore> | null>(null);\nexport interface NotificationProviderProps {\n  children?: ReactNode;\n  maxCount?: number;\n}\nexport function NotificationProvider({ children, maxCount = 5 }: NotificationProviderProps) {\n  const [store] = useState(() => createStore(maxCount));\n  return (\n    <Context.Provider value={store}>\n      <NotificationHost store={store} />\n      {children}\n    </Context.Provider>\n  );\n}\nexport function NotificationScope({ children }: { children?: ReactNode }) {\n  return useContext(Context) ? children : <NotificationProvider>{children}</NotificationProvider>;\n}\nexport function useNotification(): NotificationApi {\n  const store = useContext(Context);\n  const config = useLeafConfig();\n  const components = useContext(ComponentDefaultsContext);\n  const latestComponents = useRef(components);\n  latestComponents.current = components;\n  const latest = useRef(config);\n  latest.current = config;\n  const scope = useId();\n  useEffect(() => store?.update(scope, config, components), [store, scope, config, components]);\n  const api = useMemo(\n    () =>\n      store?.api(\n        scope,\n        () => latest.current,\n        () => latestComponents.current,\n      ),\n    [store, scope],\n  );\n  if (!api) throw new Error('useNotification requires ConfigProvider or NotificationProvider.');\n  return api;\n}\nfunction NotificationHost({ store }: { store: ReturnType<typeof createStore> }) {\n  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, () => empty);\n  if (!entries.length) return null;\n  return (\n    <ScopedPortal>\n      {(['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const).map((placement) => (\n        <div\n          key={placement}\n          className={`leaf-notification-region leaf-notification-region--${placement}`}\n        >\n          {entries\n            .filter((entry) => (entry.placement ?? 'top-right') === placement)\n            .map((entry) => (\n              <ComponentDefaultsContext.Provider key={entry.key} value={entry.components ?? {}}>\n                <NotificationItem\n                  entry={entry}\n                  close={() => store.close(entry.key)}\n                  remove={() => store.remove(entry.key)}\n                />\n              </ComponentDefaultsContext.Provider>\n            ))}\n        </div>\n      ))}\n    </ScopedPortal>\n  );\n}\nexport function Notification(rawProps: NotificationProps) {\n  const { open, afterClose, onClose, ...options } = useComponentProps('Notification', rawProps);\n  return (\n    <ScopedPortal>\n      <div\n        className={`leaf-notification-region leaf-notification-region--${options.placement ?? 'top-right'}`}\n      >\n        <NotificationItem\n          entry={{ ...options, key: 'single', open, revision: 0 }}\n          close={() => onClose?.()}\n          remove={() => afterClose?.()}\n        />\n      </div>\n    </ScopedPortal>\n  );\n}\nfunction NotificationItem({\n  entry,\n  close,\n  remove,\n}: {\n  entry: Entry;\n  close: () => void;\n  remove: () => void;\n}) {\n  const inherited = useLeafConfig();\n  const config = entry.config ?? inherited;\n  const ref = useRef<HTMLDivElement>(null);\n  const icon = useRef<HTMLSpanElement>(null);\n  const present = usePresence(entry.open, ref);\n  const type = entry.type ?? 'info';\n  useContentTransition(icon, `${entry.open}:${type}`);\n  const [hover, setHover] = useState(false);\n  const [focus, setFocus] = useState(false);\n  const duration = entry.duration ?? 4.5;\n  const remaining = useRef(duration * 1000);\n  const cycle = useRef({ open: entry.open, revision: entry.revision, duration });\n  useEffect(() => {\n    if (\n      cycle.current.revision !== entry.revision ||\n      cycle.current.duration !== duration ||\n      (entry.open && !cycle.current.open)\n    )\n      remaining.current = duration * 1000;\n    cycle.current = { open: entry.open, revision: entry.revision, duration };\n    if (!entry.open || hover || focus || duration <= 0) return;\n    const started = Date.now();\n    const timer = setTimeout(close, remaining.current);\n    return () => {\n      clearTimeout(timer);\n      remaining.current = Math.max(0, remaining.current - (Date.now() - started));\n    };\n  }, [entry.open, entry.revision, duration, hover, focus, close]);\n  const previous = useRef(present);\n  useEffect(() => {\n    if (previous.current && !present) remove();\n    previous.current = present;\n  }, [present, remove]);\n  if (!present) return null;\n  return (\n    <ConfigContext.Provider value={config}>\n      <div\n        ref={ref}\n        className=\"leaf-notification-slot\"\n        data-state={entry.open ? 'open' : 'closing'}\n        style={entry.config ? leafThemeVariables(config.theme) : undefined}\n        {...inertProps(!entry.open)}\n        aria-hidden={!entry.open || undefined}\n      >\n        <div className=\"leaf-notification-slot__content\">\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Pause auto-dismiss while reading or interacting with the notification. */}\n          <div\n            className={`leaf-notification leaf-notification--${type}`}\n            role={type === 'error' || type === 'warning' ? 'alert' : 'status'}\n            onPointerEnter={() => setHover(true)}\n            onPointerLeave={() => setHover(false)}\n            onFocus={() => setFocus(true)}\n            onBlur={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) setFocus(false);\n            }}\n          >\n            <span ref={icon} className=\"leaf-notification__icon\" aria-hidden=\"true\">\n              {entry.icon ?? <FeedbackIcon type={type} />}\n            </span>\n            <div className=\"leaf-notification__body\">\n              <div className=\"leaf-notification__header\">\n                <div className=\"leaf-notification__title\">{entry.title}</div>\n                {entry.closable !== false && (\n                  <button\n                    type=\"button\"\n                    className=\"leaf-notification__close\"\n                    aria-label={config.messages.common.close}\n                    onClick={close}\n                  >\n                    <X size={16} aria-hidden=\"true\" />\n                  </button>\n                )}\n              </div>\n              {entry.description && (\n                <div className=\"leaf-notification__description\">{entry.description}</div>\n              )}\n              {entry.actions && <div className=\"leaf-notification__actions\">{entry.actions}</div>}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ConfigContext.Provider>\n  );\n}\n"],"names":["empty","createStore","maxCount","entries","sequence","listeners","Set","publish","next","listener","close","key","closing","item","undefined","scope","config","components","getConfig","getComponents","open","rawOptions","options","mergeComponentProps","existing","entry","active","Math","Context","createContext","NotificationProvider","children","store","useState","NotificationHost","NotificationScope","useContext","useNotification","useLeafConfig","ComponentDefaultsContext","latestComponents","useRef","latest","useId","useEffect","api","useMemo","Error","useSyncExternalStore","ScopedPortal","placement","NotificationItem","Notification","rawProps","afterClose","onClose","useComponentProps","remove","inherited","ref","icon","present","usePresence","type","useContentTransition","hover","setHover","focus","setFocus","duration","remaining","cycle","started","Date","timer","setTimeout","clearTimeout","previous","ConfigContext","leafThemeVariables","inertProps","event","FeedbackIcon","X"],"mappings":"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"}

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

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