@inkra/react 0.0.0-stage → 0.2.0

package/dist/PencilText.js

@@ -0,0 +1,338 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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 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 = 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;
+    canvas.width = Math.ceil(width * dpr);
+    canvas.height = Math.ceil(height * dpr);
+    Object.assign(canvas.style, {
+        left: `-${padding}px`,
+        top: `-${padding}px`,
+        right: 'auto',
+        bottom: 'auto',
+        width: `${width}px`,
+        height: `${height}px`,
+    });
+    context.scale(dpr, dpr);
+    context.font = `400 ${size}px ${style.fontFamily}`;
+    context.fontKerning = 'none';
+    const ascent = context.measureText(text).fontBoundingBoxAscent ?? size;
+    const lines = measureLocalTextLines(element, source, text, localWidth, localHeight);
+    for (const line of lines) {
+        const lineText = line.text.trimEnd();
+        if (!lineText)
+            continue;
+        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 - 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 [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) {
+            return undefined;
+        }
+        const node = elementRef.current;
+        const canvas = canvasRef.current;
+        if (!node || !canvas)
+            return undefined;
+        let disposed = false;
+        const fit = () => {
+            const width = node.clientWidth - 8;
+            if (width <= 0)
+                return;
+            const style = getComputedStyle(node);
+            const context = canvas.getContext('2d');
+            if (!context || context.isContextLost?.())
+                return;
+            context.font = `400 ${style.fontSize} ${style.fontFamily}`;
+            context.fontKerning = 'none';
+            const measure = (value) => context.measureText(value).width;
+            if (measure(children) <= width) {
+                setText(previous => previous === children ? previous : children);
+                return;
+            }
+            const characters = Array.from(children);
+            let low = 0;
+            let high = characters.length;
+            while (low < high) {
+                const middle = Math.ceil((low + high) / 2);
+                if (measure(`${characters.slice(0, middle).join('')}…`) <= width)
+                    low = middle;
+                else
+                    high = middle - 1;
+            }
+            const clipped = `${characters.slice(0, low).join('').trimEnd()}…`;
+            setText(previous => previous === clipped ? previous : clipped);
+        };
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(fit);
+        resize?.observe(node);
+        document.fonts?.ready.then(() => { if (!disposed)
+            fit(); });
+        fit();
+        return () => {
+            disposed = true;
+            resize?.disconnect();
+        };
+    }, [children, ellipsis]);
+    useBrowserLayoutEffect(() => {
+        const node = elementRef.current;
+        const source = sourceRef.current;
+        const canvas = canvasRef.current;
+        if (!node || !source || !canvas)
+            return undefined;
+        delete node.dataset.pencilReady;
+        let disposed = false;
+        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 || disposed)
+                return;
+            // Visible text is enhanced before paint; only nearby text waits for idle time.
+            if (inViewport()) {
+                pending?.();
+                pending = null;
+                paint();
+            }
+            else if (!pending) {
+                pending = queueTextPaint(paint);
+            }
+        };
+        const markDirty = () => {
+            dirty = true;
+            delete node.dataset.pencilReady;
+            schedule();
+        };
+        // 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 colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        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: '240px' });
+        intersection?.observe(node);
+        const fonts = document.fonts;
+        fonts?.addEventListener('loadingdone', refreshAppearance);
+        fonts?.addEventListener('loadingerror', refreshAppearance);
+        fonts?.ready.then(() => { if (!disposed)
+            refreshAppearance(); });
+        const stopRecovery = observeCanvasRecovery(() => {
+            pending?.();
+            pending = null;
+            markDirty();
+        });
+        schedule();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            pending?.();
+            resize?.disconnect();
+            intersection?.disconnect();
+            inheritedStyle.disconnect();
+            colorScheme.removeEventListener('change', refreshAppearance);
+            fonts?.removeEventListener('loadingdone', refreshAppearance);
+            fonts?.removeEventListener('loadingerror', refreshAppearance);
+        };
+    }, [text, resolvedSeed, glyphSeed]);
+    const classes = ['inkra-pencil-text', ellipsis && 'inkra-pencil-text--ellipsis', className]
+        .filter(Boolean).join(' ');
+    const title = props.title ?? (ellipsis ? children : undefined);
+    return (_jsxs(Element, { ...props, className: classes, ref: elementRef, title: title, children: [_jsx("span", { className: "inkra-pencil-text__source", ref: sourceRef, children: children }), _jsx("canvas", { "aria-hidden": "true", "data-renderer": "inkra-pencil-lettering-c", ref: canvasRef })] }));
+});
+export const PencilText = PencilTextImplementation;

package/dist/accordion/Accordion.d.ts

@@ -0,0 +1,27 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import type { ReactNode } from 'react';
+export type AccordionRootProps = AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps;
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends AccordionPrimitive.AccordionItemProps {
+    dividerSeed?: string | number;
+    showDivider?: boolean;
+}
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type AccordionHeaderProps = AccordionPrimitive.AccordionHeaderProps;
+export declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export interface AccordionTriggerProps extends AccordionPrimitive.AccordionTriggerProps {
+    icon?: ReactNode;
+    seed?: string | number;
+}
+export declare const AccordionTrigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface AccordionContentProps extends AccordionPrimitive.AccordionContentProps {
+    contentClassName?: string;
+}
+export declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Accordion: Readonly<{
+    Root: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<AccordionPrimitive.AccordionHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/accordion/Accordion.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { createContext, forwardRef, useContext, useId } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const chevronDownPaths = [
+    { d: 'M6 9L12 15L18 9' },
+];
+const AccordionOrientationContext = createContext('vertical');
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export const AccordionRoot = forwardRef(function AccordionRoot({ className, orientation = 'vertical', ...props }, ref) {
+    return (_jsx(AccordionOrientationContext.Provider, { value: orientation, children: _jsx(AccordionPrimitive.Root, { ...props, className: classes('inkra-accordion', className), orientation: orientation, ref: ref }) }));
+});
+export const AccordionItem = forwardRef(function AccordionItem({ children, className, dividerSeed, showDivider = true, value, ...props }, ref) {
+    const orientation = useContext(AccordionOrientationContext);
+    return (_jsxs(AccordionPrimitive.Item, { ...props, className: classes('inkra-accordion__item', className), ref: ref, value: value, children: [children, showDivider ? (_jsx(PencilLine, { className: "inkra-accordion__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: dividerSeed ?? `inkra-accordion-divider-${value}`, weight: 0.8 })) : null] }));
+});
+export const AccordionHeader = forwardRef(function AccordionHeader({ className, ...props }, ref) {
+    return (_jsx(AccordionPrimitive.Header, { ...props, className: classes('inkra-accordion__header', className), ref: ref }));
+});
+export const AccordionTrigger = forwardRef(function AccordionTrigger({ children, className, icon, seed, ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-accordion-trigger-${generatedId}`;
+    const triggerIcon = icon === undefined ? (_jsx(PencilIcon, { className: "inkra-accordion__trigger-glyph", paths: chevronDownPaths, seed: `${resolvedSeed}-chevron`, size: 16, sourceSize: 24 })) : icon;
+    return (_jsxs(AccordionPrimitive.Trigger, { ...props, className: classes('inkra-accordion__trigger', className), ref: ref, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-accordion__focus-ring", radius: 6, seed: `${resolvedSeed}-focus`, variant: "outline" }), _jsx("span", { className: "inkra-accordion__trigger-label", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }), triggerIcon == null ? null : (_jsx("span", { "aria-hidden": "true", className: "inkra-accordion__trigger-icon", children: triggerIcon }))] }));
+});
+export const AccordionContent = forwardRef(function AccordionContent({ children, className, contentClassName, ...props }, ref) {
+    return (_jsx(AccordionPrimitive.Content, { ...props, className: classes('inkra-accordion__content', className), ref: ref, children: _jsx("div", { className: classes('inkra-accordion__content-body', contentClassName), children: children }) }));
+});
+export const Accordion = Object.freeze({
+    Root: AccordionRoot,
+    Item: AccordionItem,
+    Header: AccordionHeader,
+    Trigger: AccordionTrigger,
+    Content: AccordionContent,
+});

package/dist/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, } from './Accordion.js';
+export type { AccordionContentProps, AccordionHeaderProps, AccordionItemProps, AccordionRootProps, AccordionTriggerProps, } from './Accordion.js';

package/dist/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger, } from './Accordion.js';

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): import("react").JSX.Element;
+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,109 @@
+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 { PortalThemeBridge, PortalThemeProvider, 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 (_jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop({ className, ...props }, ref) {
+    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();
+    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>>;