@inkra/react 0.1.0 → 0.3.0

package/dist/PencilText.js

@@ -1,24 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { useBrowserLayoutEffect } from './internal/useBrowserLayoutEffect.js';
 import { effectiveDpr } from './internal/cache.js';
 import { observeCanvasRecovery } from './internal/recovery.js';
 import { seedToNumber } from './internal/random.js';
-import { renderPencilText } from './internal/textRenderer.js';
+import { pencilLettering, renderPencilText } from './internal/textRenderer.js';
+import { readRenderToken } from './internal/renderTokens.js';
 import { queueTextPaint } from './internal/textQueue.js';
 function textSeed(text) {
     return Array.from(text).reduce((seed, character) => Math.imul(seed ^ character.codePointAt(0), 16777619), 71) >>> 0;
 }
-function paintText(element, source, canvas, text, seed) {
-    const box = element.getBoundingClientRect();
-    if (!box.width || !box.height || text.length > 4096 || !source.firstChild)
-        return false;
+function pixelValue(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function localBorderBox(element, style = getComputedStyle(element)) {
+    const horizontalExtras = pixelValue(style.paddingLeft) + pixelValue(style.paddingRight)
+        + pixelValue(style.borderLeftWidth) + pixelValue(style.borderRightWidth);
+    const verticalExtras = pixelValue(style.paddingTop) + pixelValue(style.paddingBottom)
+        + pixelValue(style.borderTopWidth) + pixelValue(style.borderBottomWidth);
+    const computedWidth = pixelValue(style.width);
+    const computedHeight = pixelValue(style.height);
+    return {
+        width: computedWidth > 0
+            ? computedWidth + (style.boxSizing === 'border-box' ? 0 : horizontalExtras)
+            : element.offsetWidth,
+        height: computedHeight > 0
+            ? computedHeight + (style.boxSizing === 'border-box' ? 0 : verticalExtras)
+            : element.offsetHeight,
+    };
+}
+function copyComputedStyle(source, target) {
+    for (const property of source) {
+        target.setProperty(property, source.getPropertyValue(property), source.getPropertyPriority(property));
+    }
+}
+function measureLocalTextLines(element, liveSource, text, width, height) {
+    if (!width || !height || !text)
+        return [];
+    const computed = getComputedStyle(element);
+    const sourceComputed = getComputedStyle(liveSource);
+    const probe = document.createElement(element.tagName.toLowerCase());
+    const source = document.createElement('span');
+    copyComputedStyle(computed, probe.style);
+    copyComputedStyle(sourceComputed, source.style);
+    probe.setAttribute('aria-hidden', 'true');
+    probe.inert = true;
+    Object.assign(probe.style, {
+        boxSizing: 'border-box',
+        contain: 'layout style paint',
+        height: `${height}px`,
+        left: '-100000px',
+        margin: '0',
+        maxHeight: `${height}px`,
+        maxWidth: `${width}px`,
+        minHeight: `${height}px`,
+        minWidth: `${width}px`,
+        overflow: 'visible',
+        pointerEvents: 'none',
+        position: 'fixed',
+        rotate: 'none',
+        scale: 'none',
+        top: '0',
+        transform: 'none',
+        translate: 'none',
+        visibility: 'hidden',
+        width: `${width}px`,
+    });
+    source.textContent = text;
+    probe.append(source);
+    document.body.append(probe);
+    try {
+        const box = probe.getBoundingClientRect();
+        const range = document.createRange();
+        const lines = [];
+        let offset = 0;
+        for (const character of text) {
+            range.setStart(source.firstChild, offset);
+            offset += character.length;
+            range.setEnd(source.firstChild, offset);
+            const rectangle = range.getBoundingClientRect();
+            const left = rectangle.left - box.left;
+            const top = rectangle.top - box.top;
+            let line = lines[lines.length - 1];
+            if (!line || Math.abs(line.top - top) > 1) {
+                line = { text: '', left, top };
+                lines.push(line);
+            }
+            line.text += character;
+        }
+        return lines;
+    }
+    finally {
+        probe.remove();
+    }
+}
+function paintText(element, source, canvas, text, seed, glyphSeed) {
     const style = getComputedStyle(element);
+    const { width: localWidth, height: localHeight } = localBorderBox(element, style);
+    if (!localWidth || !localHeight || text.length > 4096 || !source.firstChild)
+        return false;
     const size = Number.parseFloat(style.fontSize);
     const context = canvas.getContext('2d');
     const padding = 5;
-    const width = box.width + padding * 2;
-    const height = box.height + padding * 2;
+    const width = localWidth + padding * 2;
+    const height = localHeight + padding * 2;
     const dpr = effectiveDpr(2);
     if (width * height * dpr ** 2 > 2 * 1024 * 1024 || !context || context.isContextLost?.())
         return false;
@@ -36,21 +122,7 @@ function paintText(element, source, canvas, text, seed) {
     context.font = `400 ${size}px ${style.fontFamily}`;
     context.fontKerning = 'none';
     const ascent = context.measureText(text).fontBoundingBoxAscent ?? size;
-    const range = document.createRange();
-    const lines = [];
-    let offset = 0;
-    for (const character of text) {
-        range.setStart(source.firstChild, offset);
-        offset += character.length;
-        range.setEnd(source.firstChild, offset);
-        const rectangle = range.getBoundingClientRect();
-        let line = lines[lines.length - 1];
-        if (!line || Math.abs(line.top - rectangle.top) > 1) {
-            line = { text: '', left: rectangle.left, top: rectangle.top };
-            lines.push(line);
-        }
-        line.text += character;
-    }
+    const lines = measureLocalTextLines(element, source, text, localWidth, localHeight);
     for (const line of lines) {
         const lineText = line.text.trimEnd();
         if (!lineText)
@@ -58,28 +130,37 @@ function paintText(element, source, canvas, text, seed) {
         const sprite = renderPencilText(lineText, {
             size,
             seed: seedToNumber(seed) ^ textSeed(line.text),
+            glyphSeed,
             color: style.color,
             family: style.fontFamily,
             dpr,
+            settings: {
+                variation: readRenderToken(style, '--inkra-letter-variation', pencilLettering.variation, 0, 1),
+                breaks: readRenderToken(style, '--inkra-letter-breaks', pencilLettering.breaks, 0, 1),
+                outline: readRenderToken(style, '--inkra-letter-outline', pencilLettering.outline, 0, 1),
+                fill: readRenderToken(style, '--inkra-letter-fill', pencilLettering.fill, 0, 1),
+                grain: readRenderToken(style, '--inkra-letter-grain', pencilLettering.grain, 0, 1),
+            },
         });
         if (sprite.ink.getContext('2d')?.isContextLost?.())
             return false;
-        context.drawImage(sprite.ink, padding + line.left - box.left - sprite.padding, padding + line.top - box.top + ascent - sprite.ascent - sprite.padding, sprite.width, sprite.height);
+        context.drawImage(sprite.ink, padding + line.left - sprite.padding, padding + line.top + ascent - sprite.ascent - sprite.padding, sprite.width, sprite.height);
     }
     canvas.dataset.lines = String(lines.length);
     element.dataset.pencilReady = 'true';
     return true;
 }
 const PencilTextImplementation = forwardRef(function PencilText({ as: Element = 'span', children, seed, ellipsis = false, className = '', ...props }, forwardedRef) {
-    const [text, setText] = useState(children);
+    const [fittedText, setText] = useState(children);
+    const text = ellipsis ? fittedText : children;
     const elementRef = useRef(null);
     const sourceRef = useRef(null);
     const canvasRef = useRef(null);
     const resolvedSeed = seed ?? children;
+    const glyphSeed = seedToNumber(seed ?? 'inkra-latin-lettering-v1');
     useImperativeHandle(forwardedRef, () => elementRef.current);
     useBrowserLayoutEffect(() => {
         if (!ellipsis) {
-            setText(children);
             return undefined;
         }
         const node = elementRef.current;
@@ -125,7 +206,7 @@ const PencilTextImplementation = forwardRef(function PencilText({ as: Element =
             resize?.disconnect();
         };
     }, [children, ellipsis]);
-    useEffect(() => {
+    useBrowserLayoutEffect(() => {
         const node = elementRef.current;
         const source = sourceRef.current;
         const canvas = canvasRef.current;
@@ -133,51 +214,104 @@ const PencilTextImplementation = forwardRef(function PencilText({ as: Element =
             return undefined;
         delete node.dataset.pencilReady;
         let disposed = false;
-        let visible = typeof IntersectionObserver === 'undefined';
+        const inViewport = () => {
+            const box = node.getBoundingClientRect();
+            if (!box.width || !box.height || !node.isConnected)
+                return false;
+            let left = Math.max(0, box.left);
+            let top = Math.max(0, box.top);
+            let right = Math.min(window.innerWidth, box.right);
+            let bottom = Math.min(window.innerHeight, box.bottom);
+            for (let parent = node.parentElement; parent && left < right && top < bottom; parent = parent.parentElement) {
+                const style = getComputedStyle(parent);
+                if (style.overflowX === 'visible' && style.overflowY === 'visible')
+                    continue;
+                const clip = parent.getBoundingClientRect();
+                if (style.overflowX !== 'visible') {
+                    left = Math.max(left, clip.left);
+                    right = Math.min(right, clip.right);
+                }
+                if (style.overflowY !== 'visible') {
+                    top = Math.max(top, clip.top);
+                    bottom = Math.min(bottom, clip.bottom);
+                }
+            }
+            return left < right && top < bottom;
+        };
+        let visible = inViewport() || typeof IntersectionObserver === 'undefined';
         let pending = null;
         let dirty = true;
+        let lastAppearance = '';
+        const appearanceKey = () => {
+            const style = getComputedStyle(node);
+            const localBox = localBorderBox(node, style);
+            return JSON.stringify([
+                localBox.width, localBox.height, effectiveDpr(2),
+                style.fontSize && style.fontFamily
+                    ? document.fonts?.check(`400 ${style.fontSize} ${style.fontFamily}`, text) : false,
+                ...['color', 'font-family', 'font-size', 'line-height', 'text-align', 'text-indent',
+                    'letter-spacing', 'white-space', 'word-break', 'overflow-wrap', 'direction',
+                    'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
+                    '--inkra-letter-variation', '--inkra-letter-breaks', '--inkra-letter-outline',
+                    '--inkra-letter-fill', '--inkra-letter-grain'].map(name => style.getPropertyValue(name)),
+            ]);
+        };
+        const paint = () => {
+            pending = null;
+            if (!disposed && visible && dirty) {
+                try {
+                    if (paintText(node, source, canvas, text, resolvedSeed, glyphSeed))
+                        lastAppearance = appearanceKey();
+                }
+                catch {
+                    delete node.dataset.pencilReady;
+                }
+                dirty = false;
+            }
+        };
         const schedule = () => {
-            if (!visible || !dirty || pending || disposed)
+            if (!visible || !dirty || disposed)
                 return;
-            pending = queueTextPaint(() => {
+            // Visible text is enhanced before paint; only nearby text waits for idle time.
+            if (inViewport()) {
+                pending?.();
                 pending = null;
-                if (!disposed && visible && dirty) {
-                    try {
-                        paintText(node, source, canvas, text, resolvedSeed);
-                    }
-                    catch {
-                        delete node.dataset.pencilReady;
-                    }
-                    dirty = false;
-                }
-            });
+                paint();
+            }
+            else if (!pending) {
+                pending = queueTextPaint(paint);
+            }
         };
         const markDirty = () => {
             dirty = true;
             delete node.dataset.pencilReady;
             schedule();
         };
-        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(markDirty);
+        // Scroll locks and pointer-event changes must not hide already-painted text.
+        const refreshAppearance = () => {
+            if (disposed || !node.isConnected)
+                return;
+            if (appearanceKey() !== lastAppearance)
+                markDirty();
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(refreshAppearance);
         resize?.observe(node);
-        const appearance = new MutationObserver(markDirty);
-        appearance.observe(document.documentElement, {
-            attributes: true,
-            subtree: true,
-            attributeFilter: ['data-theme', 'data-inkra-theme'],
-        });
         const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
-        colorScheme.addEventListener('change', markDirty);
+        const inheritedStyle = new MutationObserver(refreshAppearance);
+        for (let element = node; element; element = element.parentElement) {
+            inheritedStyle.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
+        }
+        colorScheme.addEventListener('change', refreshAppearance);
         const intersection = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(entries => {
             visible = entries[entries.length - 1]?.isIntersecting ?? false;
             schedule();
-        }, { rootMargin: '80px' });
+        }, { rootMargin: '240px' });
         intersection?.observe(node);
         const fonts = document.fonts;
-        fonts?.addEventListener('loading', markDirty);
-        fonts?.addEventListener('loadingdone', markDirty);
-        fonts?.addEventListener('loadingerror', markDirty);
+        fonts?.addEventListener('loadingdone', refreshAppearance);
+        fonts?.addEventListener('loadingerror', refreshAppearance);
         fonts?.ready.then(() => { if (!disposed)
-            markDirty(); });
+            refreshAppearance(); });
         const stopRecovery = observeCanvasRecovery(() => {
             pending?.();
             pending = null;
@@ -190,13 +324,12 @@ const PencilTextImplementation = forwardRef(function PencilText({ as: Element =
             pending?.();
             resize?.disconnect();
             intersection?.disconnect();
-            appearance.disconnect();
-            colorScheme.removeEventListener('change', markDirty);
-            fonts?.removeEventListener('loading', markDirty);
-            fonts?.removeEventListener('loadingdone', markDirty);
-            fonts?.removeEventListener('loadingerror', markDirty);
+            inheritedStyle.disconnect();
+            colorScheme.removeEventListener('change', refreshAppearance);
+            fonts?.removeEventListener('loadingdone', refreshAppearance);
+            fonts?.removeEventListener('loadingerror', refreshAppearance);
         };
-    }, [text, resolvedSeed]);
+    }, [text, resolvedSeed, glyphSeed]);
     const classes = ['inkra-pencil-text', ellipsis && 'inkra-pencil-text--ellipsis', className]
         .filter(Boolean).join(' ');
     const title = props.title ?? (ellipsis ? children : undefined);

package/dist/alert-dialog/index.d.ts

@@ -0,0 +1,64 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ButtonProps } from '../Button.js';
+export interface AlertDialogRootProps extends Omit<DialogPrimitive.DialogProps, 'open' | 'defaultOpen' | 'onOpenChange' | 'modal'> {
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    pending?: boolean;
+}
+export declare function AlertDialogRoot({ defaultOpen, onOpenChange, open, pending, ...props }: AlertDialogRootProps): import("react").JSX.Element;
+export type AlertDialogTriggerProps = DialogPrimitive.DialogTriggerProps;
+export declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type AlertDialogPortalProps = DialogPrimitive.DialogPortalProps;
+export declare function AlertDialogPortal({ children, ...props }: AlertDialogPortalProps): ReactNode;
+export type AlertDialogBackdropProps = DialogPrimitive.DialogOverlayProps;
+export declare const AlertDialogBackdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AlertDialogContentProps extends DialogPrimitive.DialogContentProps {
+    seed?: string | number;
+}
+export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AlertDialogTitleProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface AlertDialogDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Description>, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export interface AlertDialogHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    divided?: boolean;
+}
+export declare const AlertDialogHeader: import("react").ForwardRefExoticComponent<AlertDialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export type AlertDialogBodyProps = ComponentPropsWithoutRef<'div'>;
+export declare const AlertDialogBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface AlertDialogFooterProps extends ComponentPropsWithoutRef<'div'> {
+    align?: 'start' | 'center' | 'end';
+    divided?: boolean;
+}
+export declare const AlertDialogFooter: import("react").ForwardRefExoticComponent<AlertDialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AlertDialogCancelProps extends Omit<ButtonProps, 'type'> {
+    children?: ReactNode;
+}
+export declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface AlertDialogActionProps extends Omit<ButtonProps, 'type'> {
+    children?: ReactNode;
+    closeOnAction?: boolean;
+}
+export declare const AlertDialogAction: import("react").ForwardRefExoticComponent<AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const AlertDialog: Readonly<{
+    Root: typeof AlertDialogRoot;
+    Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof AlertDialogPortal;
+    Backdrop: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<AlertDialogHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<AlertDialogFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Cancel: import("react").ForwardRefExoticComponent<AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Action: import("react").ForwardRefExoticComponent<AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

package/dist/alert-dialog/index.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { createContext, forwardRef, useContext, useId, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+const AlertDialogContext = createContext(null);
+export function AlertDialogRoot({ defaultOpen = false, onOpenChange, open, pending = false, ...props }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const cancelRef = useRef(null);
+    const controlled = open !== undefined;
+    const currentOpen = controlled ? open : uncontrolledOpen;
+    function handleOpenChange(nextOpen) {
+        if (!nextOpen && pending)
+            return;
+        if (!controlled)
+            setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }
+    return (_jsx(PortalThemeProvider, { children: _jsx(AlertDialogContext.Provider, { value: { cancelRef, pending }, children: _jsx(DialogPrimitive.Root, { ...props, modal: true, open: currentOpen, onOpenChange: handleOpenChange }) }) }));
+}
+export const AlertDialogTrigger = forwardRef(function AlertDialogTrigger(props, forwardedRef) {
+    return _jsx(DialogPrimitive.Trigger, { ...props, ref: usePortalTriggerRef(forwardedRef) });
+});
+export function AlertDialogPortal({ children, ...props }) {
+    return mapPortalChildren(children, child => _jsx(DialogPrimitive.Portal, { ...props, children: child }));
+}
+export const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop({ className, ...props }, ref) {
+    props = usePortalThemeProps(props);
+    return (_jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-alert-dialog__backdrop', className), ref: ref }));
+});
+export const AlertDialogContent = forwardRef(function AlertDialogContent({ children, className, onEscapeKeyDown, onInteractOutside, onOpenAutoFocus, onPointerDownOutside, seed, ...props }, forwardedRef) {
+    const context = useContext(AlertDialogContext);
+    const contentRef = useRef(null);
+    const id = useId();
+    props = usePortalThemeProps(props);
+    return (_jsx(DialogPrimitive.Content, { ...props, role: "alertdialog", "aria-busy": context?.pending || undefined, className: classes('inkra-alert-dialog__content', className), "data-pending": context?.pending || undefined, ref: node => {
+            contentRef.current = node;
+            assignRef(forwardedRef, node);
+        }, onEscapeKeyDown: event => {
+            onEscapeKeyDown?.(event);
+            if (context?.pending)
+                event.preventDefault();
+        }, onInteractOutside: event => {
+            onInteractOutside?.(event);
+            event.preventDefault();
+        }, onPointerDownOutside: event => {
+            onPointerDownOutside?.(event);
+            event.preventDefault();
+        }, onOpenAutoFocus: event => {
+            onOpenAutoFocus?.(event);
+            if (event.defaultPrevented)
+                return;
+            event.preventDefault();
+            queueMicrotask(() => (context?.cancelRef.current ?? contentRef.current)?.focus());
+        }, children: _jsx(PencilSurface, { className: "inkra-alert-dialog__surface", radius: 8, seed: seed ?? `inkra-alert-dialog-${id}`, variant: "paper", children: _jsx("div", { className: "inkra-alert-dialog__layout", children: children }) }) }));
+});
+export const AlertDialogTitle = forwardRef(function AlertDialogTitle({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Title, { ...props, className: classes('inkra-alert-dialog__title', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-alert-dialog-title-${id}`, children: children }) }));
+});
+export const AlertDialogDescription = forwardRef(function AlertDialogDescription({ children, className, seed, ...props }, ref) {
+    const id = useId();
+    return (_jsx(DialogPrimitive.Description, { ...props, className: classes('inkra-alert-dialog__description', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-alert-dialog-description-${id}`, children: children }) }));
+});
+export const AlertDialogHeader = forwardRef(function AlertDialogHeader({ children, className, divided = true, ...props }, ref) {
+    const id = useId();
+    return (_jsxs("div", { ...props, className: classes('inkra-alert-dialog__header', className), "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-alert-dialog__heading", children: children }), divided ? _jsx(PencilLine, { className: "inkra-alert-dialog__divider", seed: `alert-header-${id}` }) : null] }));
+});
+export const AlertDialogBody = forwardRef(function AlertDialogBody({ className, ...props }, ref) {
+    return _jsx("div", { ...props, className: classes('inkra-alert-dialog__body', className), ref: ref });
+});
+export const AlertDialogFooter = forwardRef(function AlertDialogFooter({ align = 'end', children, className, divided = true, ...props }, ref) {
+    const id = useId();
+    return (_jsxs("div", { ...props, className: classes('inkra-alert-dialog__footer', className), "data-align": align, "data-divided": divided || undefined, ref: ref, children: [divided ? _jsx(PencilLine, { className: "inkra-alert-dialog__divider", seed: `alert-footer-${id}` }) : null, children] }));
+});
+export const AlertDialogCancel = forwardRef(function AlertDialogCancel({ disabled, variant = 'secondary', ...props }, forwardedRef) {
+    const context = useContext(AlertDialogContext);
+    return (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { ...props, disabled: disabled || context?.pending, ref: node => {
+                assignRef(forwardedRef, node);
+                assignRef(context?.cancelRef, node);
+            }, type: "button", variant: variant }) }));
+});
+export const AlertDialogAction = forwardRef(function AlertDialogAction({ closeOnAction = true, disabled, loading, variant = 'destructive', ...props }, ref) {
+    const pending = useContext(AlertDialogContext)?.pending ?? false;
+    const button = (_jsx(Button, { ...props, "aria-busy": pending || undefined, disabled: disabled || pending, loading: loading || pending, ref: ref, type: "button", variant: variant }));
+    return closeOnAction ? _jsx(DialogPrimitive.Close, { asChild: true, children: button }) : button;
+});
+export const AlertDialog = Object.freeze({
+    Root: AlertDialogRoot,
+    Trigger: AlertDialogTrigger,
+    Portal: AlertDialogPortal,
+    Backdrop: AlertDialogBackdrop,
+    Content: AlertDialogContent,
+    Header: AlertDialogHeader,
+    Body: AlertDialogBody,
+    Footer: AlertDialogFooter,
+    Title: AlertDialogTitle,
+    Description: AlertDialogDescription,
+    Cancel: AlertDialogCancel,
+    Action: AlertDialogAction,
+});

package/dist/audio-player/index.d.ts

@@ -0,0 +1,60 @@
+import type { AudioHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type AudioPlayerStatus = 'idle' | 'loading' | 'ready' | 'playing' | 'paused' | 'buffering' | 'ended' | 'blocked' | 'error';
+export interface AudioPlayerState {
+    status: AudioPlayerStatus;
+    currentTime: number;
+    duration: number;
+    buffered: number;
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    canPlay: boolean;
+    error: MediaError | null;
+}
+export interface AudioPlayerControls {
+    audio: HTMLAudioElement | null;
+    state: AudioPlayerState;
+    play: () => Promise<void>;
+    pause: () => void;
+    togglePlay: () => Promise<void>;
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    setMuted: (muted: boolean) => void;
+    setPlaybackRate: (rate: number) => void;
+    focus: () => void;
+}
+export interface AudioPlayerLabels {
+    play?: string;
+    pause?: string;
+    mute?: string;
+    unmute?: string;
+    seek?: string;
+    volume?: string;
+    rate?: string;
+    loading?: string;
+    blocked?: string;
+    error?: string;
+    time?: (current: number, duration: number) => string;
+}
+export interface AudioPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onError' | 'onChange' | 'onVolumeChange'> {
+    src?: string;
+    preload?: AudioHTMLAttributes<HTMLAudioElement>['preload'];
+    autoPlay?: boolean;
+    crossOrigin?: AudioHTMLAttributes<HTMLAudioElement>['crossOrigin'];
+    defaultVolume?: number;
+    volume?: number;
+    defaultMuted?: boolean;
+    muted?: boolean;
+    defaultPlaybackRate?: number;
+    playbackRate?: number;
+    onVolumeChange?: (volume: number) => void;
+    onMutedChange?: (muted: boolean) => void;
+    onPlaybackRateChange?: (rate: number) => void;
+    onTimeChange?: (currentTime: number) => void;
+    onStateChange?: (state: AudioPlayerState) => void;
+    onError?: (error: MediaError | DOMException | null) => void;
+    labels?: AudioPlayerLabels;
+    renderControls?: (controls: AudioPlayerControls) => ReactNode;
+    audioProps?: Omit<AudioHTMLAttributes<HTMLAudioElement>, 'src' | 'controls' | 'autoPlay' | 'preload' | 'volume' | 'muted' | 'playbackRate' | 'onError'>;
+}
+export declare const AudioPlayer: import("react").ForwardRefExoticComponent<AudioPlayerProps & import("react").RefAttributes<AudioPlayerControls>>;