@a-type/ui 5.0.22 → 6.0.0

package/dist/components/pwaInstall/PwaInstall.js

@@ -0,0 +1,78 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useSnapshot } from 'valtio';
+import { getIsSafari, getOS, getSupportsPWAInstallPrompt, } from '../../platform.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Dialog } from '../dialog/Dialog.js';
+import { Icon } from '../icon/Icon.js';
+import { Lightbox } from '../lightbox/Lightbox.js';
+import { Ol } from '../lists/lists.js';
+import { P } from '../typography/typography.js';
+import { AndroidAddToHomeIcon, SafariAddToDockIcon, SafariIcon, SafariPlusSquareIcon, SafariShareIcon, } from './PlatformIcons.js';
+import cls from './PwaInstall.module.css';
+import { pwaInstallerState } from './state.js';
+import { triggerDeferredInstall, useIsInstalled, useIsInstallReady, } from './useIsInstallReady.js';
+import { useWebManifest } from './useWebManifest.js';
+export function PwaInstall(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var { manifestPath } = _a, rest = __rest(_a, ["manifestPath"]);
+    const installed = useIsInstalled();
+    const manifest = useWebManifest(manifestPath);
+    const { open } = useSnapshot(pwaInstallerState);
+    const [showInstructions, setShowInstructions] = useState(false);
+    if (installed) {
+        return null;
+    }
+    const primaryIcon = (_b = manifest === null || manifest === void 0 ? void 0 : manifest.icons) === null || _b === void 0 ? void 0 : _b[0];
+    return (_jsx(Dialog, Object.assign({}, rest, { open: open, onOpenChange: (isOpen, ev) => {
+            var _a;
+            pwaInstallerState.open = isOpen;
+            (_a = rest.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(rest, isOpen, ev);
+        }, children: _jsxs(Dialog.Content, { className: cls.dialogContent, id: "pwa-install-dialog", children: [_jsxs(Dialog.Title, { className: cls.dialogTitle, children: [primaryIcon && (_jsx("img", { src: primaryIcon.src, alt: (_e = (_d = (_c = primaryIcon.label) !== null && _c !== void 0 ? _c : manifest === null || manifest === void 0 ? void 0 : manifest.short_name) !== null && _d !== void 0 ? _d : manifest === null || manifest === void 0 ? void 0 : manifest.name) !== null && _e !== void 0 ? _e : 'App Icon', className: cls.appIcon })), "Install ", (_g = (_f = manifest === null || manifest === void 0 ? void 0 : manifest.short_name) !== null && _f !== void 0 ? _f : manifest === null || manifest === void 0 ? void 0 : manifest.name) !== null && _g !== void 0 ? _g : 'App'] }), showInstructions ? (_jsxs(_Fragment, { children: [_jsx(Dialog.Description, { children: "Follow the instructions below to install this app on your device." }), _jsx(InstallInstructions, {}), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, { render: _jsx(Button, { emphasis: "ghost" }), children: "Close" }), _jsxs(Button, { onClick: () => setShowInstructions(false), children: [_jsx(Icon, { name: "arrowLeft" }), " Back"] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Dialog.Description, { children: "This site is also an app. You can install it right now for easier access and more features." }), (manifest === null || manifest === void 0 ? void 0 : manifest.description) && (_jsx(P, { className: cls.appDescription, children: manifest.description })), _jsx(ManifestImageGallery, { manifestPath: manifestPath }), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, { render: _jsx(Button, { emphasis: "ghost" }), children: "Close" }), _jsx(InstallDeviceActions, { showInstructions: () => setShowInstructions(true) })] })] }))] }) })));
+}
+const supportsDirectInstall = getSupportsPWAInstallPrompt();
+function InstallInstructions() {
+    const os = getOS();
+    if (os === 'iOS' || os === 'Mac OS') {
+        if (getIsSafari()) {
+            if (os === 'iOS') {
+                return (_jsxs(Ol, { children: [_jsxs(Ol.Item, { children: [_jsx(SafariShareIcon, {}), " Tap the Share button in the toolbar."] }), _jsxs(Ol.Item, { children: [_jsx(SafariPlusSquareIcon, {}), " Scroll down and tap \"Add to Home Screen\"."] })] }));
+            }
+            else {
+                return (_jsxs(Ol, { children: [_jsxs(Ol.Item, { children: [_jsx(SafariShareIcon, {}), " Tap the Share button in the toolbar."] }), _jsxs(Ol.Item, { children: [_jsx(SafariAddToDockIcon, {}), " Tap \"Add to Dock\"."] })] }));
+            }
+        }
+        else {
+            return (_jsxs(_Fragment, { children: [_jsx(Ol, { children: _jsxs(Ol.Item, { children: [_jsx(SafariIcon, {}), " Open this site in Safari to continue."] }) }), _jsx(Box, { surface: true, p: true, children: "Apple does not allow non-Safari browsers to install web apps." })] }));
+        }
+    }
+    return (_jsxs(Ol, { children: [_jsxs(Ol.Item, { children: [_jsx(Icon, { name: "dots", className: "rotate-90" }), " Tap the menu button in the toolbar."] }), _jsxs(Ol.Item, { children: [_jsx(AndroidAddToHomeIcon, {}), " Tap \"Add to Home Screen.\""] })] }));
+}
+function ManifestImageGallery({ manifestPath }) {
+    var _a, _b;
+    const manifest = useWebManifest(manifestPath);
+    if (!((_a = manifest === null || manifest === void 0 ? void 0 : manifest.screenshots) === null || _a === void 0 ? void 0 : _a.length)) {
+        return null;
+    }
+    return (_jsx(Box, { overflow: "auto-x", p: "sm", gap: true, style: { height: 240 }, children: (_b = manifest.screenshots) === null || _b === void 0 ? void 0 : _b.map((screenshot, index) => (_jsxs(Lightbox.Root, { children: [_jsx(Lightbox.Trigger, { render: _jsx(Lightbox.Image, { tabIndex: 0, src: screenshot.src, alt: screenshot.label || `Screenshot ${index + 1}`, className: "border-default border rd-xs" }, index) }), _jsxs(Lightbox.Portal, { children: [_jsx(Lightbox.Overlay, { style: { zIndex: 10000 } }), _jsx(Lightbox.Content, { style: { zIndex: 10001 }, children: _jsx(Lightbox.Image, { src: screenshot.src, alt: screenshot.label || `Screenshot ${index + 1}` }) })] })] }, screenshot.src))) }));
+}
+function InstallDeviceActions({ showInstructions, }) {
+    const ready = useIsInstallReady();
+    if (supportsDirectInstall && ready) {
+        return (_jsxs(Button, { onClick: () => triggerDeferredInstall(), emphasis: "primary", children: [_jsx(Icon, { name: "download" }), " Install now"] }));
+    }
+    return (_jsxs(Button, { onClick: () => showInstructions(), emphasis: "primary", children: [_jsx(Icon, { name: "arrowRight" }), " Add to Home"] }));
+}
+//# sourceMappingURL=PwaInstall.js.map

package/dist/components/pwaInstall/PwaInstall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PwaInstall.js","sourceRoot":"","sources":["../../../src/components/pwaInstall/PwaInstall.tsx"],"names":[],"mappings":"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"}

package/dist/components/pwaInstall/PwaInstall.module.css

@@ -0,0 +1,23 @@
+.dialogContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-xs);
+}
+
+.dialogTitle {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-md);
+}
+
+.appIcon {
+	display: inline-block;
+	height: 1em;
+	width: 1em;
+	border-radius: var(--m-radius);
+}
+
+.appDescription {
+	margin-bottom: var(--m-spacing-sm);
+}

package/dist/components/pwaInstall/PwaInstallTrigger.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { pwaInstallerState } from './state.js';
+import { useIsInstalled } from './useIsInstallReady.js';
+export function PwaInstallTrigger(_a) {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    const installed = useIsInstalled();
+    if (installed) {
+        return null;
+    }
+    return (_jsx(Button, Object.assign({ color: "primary", emphasis: "light" }, rest, { onClick: () => {
+            pwaInstallerState.open = true;
+        }, children: children !== null && children !== void 0 ? children : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "star" }), " Install"] })) })));
+}
+//# sourceMappingURL=PwaInstallTrigger.js.map

package/dist/components/pwaInstall/PwaInstallTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PwaInstallTrigger.js","sourceRoot":"","sources":["../../../src/components/pwaInstall/PwaInstallTrigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,MAAM,UAAU,iBAAiB,CAAC,EAGT;QAHS,EACjC,QAAQ,OAEgB,EADrB,IAAI,cAF0B,YAGjC,CADO;IAEP,MAAM,SAAS,GAAG,cAAc,EAAE,CAAC;IACnC,IAAI,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO,CACN,KAAC,MAAM,kBACN,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,OAAO,IACZ,IAAI,IACR,OAAO,EAAE,GAAG,EAAE;YACb,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;QAC/B,CAAC,YAEA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CACZ,8BACC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,gBAClB,CACH,IACO,CACT,CAAC;AACH,CAAC"}

package/dist/components/pwaInstall/PwaInstallTrigger.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { PwaInstallTrigger } from './PwaInstallTrigger.js';
+declare const meta: {
+    title: string;
+    component: typeof PwaInstallTrigger;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof PwaInstallTrigger>;
+export declare const Default: Story;

package/dist/components/pwaInstall/PwaInstallTrigger.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { PwaInstallTrigger } from './PwaInstallTrigger.js';
+const meta = {
+    title: 'Components/PwaInstallTrigger',
+    component: PwaInstallTrigger,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return (_jsxs(PwaInstallTrigger, Object.assign({}, args, { render: _jsx(Button, { color: "primary", emphasis: "light" }), children: [_jsx(Icon, { name: "star" }), " Install"] })));
+    },
+};
+//# sourceMappingURL=PwaInstallTrigger.stories.js.map

package/dist/components/pwaInstall/PwaInstallTrigger.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PwaInstallTrigger.stories.js","sourceRoot":"","sources":["../../../src/components/pwaInstall/PwaInstallTrigger.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACwC,CAAC;AAE3C,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,iBAAiB,oBACb,IAAI,IACR,MAAM,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,GAAG,aAEnD,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,iBACD,CACpB,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/pwaInstall/index.js

@@ -0,0 +1,5 @@
+export * from './PwaInstallTrigger.js';
+export * from './state.js';
+export * from './useIsInstallReady.js';
+export * from './useWebManifest.js';
+//# sourceMappingURL=index.js.map

package/dist/components/pwaInstall/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/pwaInstall/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}

package/dist/components/pwaInstall/state.js

@@ -0,0 +1,8 @@
+import { proxy } from 'valtio';
+export const pwaInstallerState = proxy({
+    open: false,
+});
+export function showPwaInstall() {
+    pwaInstallerState.open = true;
+}
+//# sourceMappingURL=state.js.map

package/dist/components/pwaInstall/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../src/components/pwaInstall/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE/B,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC;IACtC,IAAI,EAAE,KAAK;CACX,CAAC,CAAC;AAEH,MAAM,UAAU,cAAc;IAC7B,iBAAiB,CAAC,IAAI,GAAG,IAAI,CAAC;AAC/B,CAAC"}

package/dist/components/pwaInstall/useIsInstallReady.js

@@ -0,0 +1,52 @@
+import { proxy, useSnapshot } from 'valtio';
+import { getIsPWAInstalled, PRETEND_INSTALLABLE } from '../../platform.js';
+let deferredPrompt = null;
+const installState = proxy({
+    installReady: false,
+    installed: getIsPWAInstalled(),
+});
+if (typeof window !== 'undefined') {
+    window.addEventListener('beforeinstallprompt', (e) => {
+        // Prevent the mini-infobar from appearing on mobile
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        e.stopPropagation();
+        // Stash the event so it can be triggered later.
+        deferredPrompt = e;
+        // Update UI notify the user they can install the PWA
+        installState.installReady = true;
+        // Optionally, send analytics event that PWA install promo was shown.
+        console.log(`Ready to show custom install prompt`);
+    });
+}
+if (PRETEND_INSTALLABLE) {
+    installState.installReady = true;
+}
+export function useIsInstallReady() {
+    return useSnapshot(installState).installReady;
+}
+export function useIsInstalled() {
+    return useSnapshot(installState).installed;
+}
+export function triggerDeferredInstall() {
+    if (!deferredPrompt) {
+        return false;
+    }
+    // Show the install prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+            console.log('User accepted the install prompt');
+            installState.installed = true;
+        }
+        else {
+            console.log('User dismissed the install prompt');
+        }
+        // Clear the deferredPrompt so it can only be used once.
+        deferredPrompt = null;
+        installState.installReady = false;
+    });
+    return true;
+}
+//# sourceMappingURL=useIsInstallReady.js.map

package/dist/components/pwaInstall/useIsInstallReady.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsInstallReady.js","sourceRoot":"","sources":["../../../src/components/pwaInstall/useIsInstallReady.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE3E,IAAI,cAAc,GAAoC,IAAI,CAAC;AAC3D,MAAM,YAAY,GAAG,KAAK,CAAC;IAC1B,YAAY,EAAE,KAAK;IACnB,SAAS,EAAE,iBAAiB,EAAE;CAC9B,CAAC,CAAC;AAEH,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACnC,MAAM,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC,CAAC,EAAE,EAAE;QACpD,oDAAoD;QACpD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,gDAAgD;QAChD,cAAc,GAAG,CAAC,CAAC;QACnB,qDAAqD;QACrD,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC;QACjC,qEAAqE;QACrE,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,IAAI,mBAAmB,EAAE,CAAC;IACzB,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC;AAClC,CAAC;AAED,MAAM,UAAU,iBAAiB;IAChC,OAAO,WAAW,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,cAAc;IAC7B,OAAO,WAAW,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,sBAAsB;IACrC,IAAI,CAAC,cAAc,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC;IACd,CAAC;IACD,0BAA0B;IAC1B,cAAc,CAAC,MAAM,EAAE,CAAC;IACxB,6CAA6C;IAC7C,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE;QAC/C,IAAI,YAAY,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YACzC,OAAO,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;YAChD,YAAY,CAAC,SAAS,GAAG,IAAI,CAAC;QAC/B,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;QAClD,CAAC;QACD,wDAAwD;QACxD,cAAc,GAAG,IAAI,CAAC;QACtB,YAAY,CAAC,YAAY,GAAG,KAAK,CAAC;IACnC,CAAC,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACb,CAAC"}

package/dist/components/pwaInstall/useWebManifest.js

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { proxy, useSnapshot } from 'valtio';
+async function fetchManifest(manifestPath = '/manifest.json', controller) {
+    const response = await fetch(manifestPath, {
+        signal: controller === null || controller === void 0 ? void 0 : controller.signal,
+    });
+    if (!response.ok) {
+        console.debug(`Failed to fetch web manifest: ${response.status} ${response.statusText}`);
+        return {};
+    }
+    try {
+        const manifest = await response.json();
+        return manifest;
+    }
+    catch (error) {
+        console.debug(`Error parsing web manifest JSON: ${error}`);
+        return {};
+    }
+}
+function abortableManifestSync(manifestPath) {
+    const controller = new AbortController();
+    fetchManifest(manifestPath, controller)
+        .then((manifest) => {
+        if (manifest) {
+            manifestState.value = manifest;
+        }
+    })
+        .catch((error) => {
+        if (error.name === 'AbortError') {
+            return;
+        }
+        console.debug(`Error fetching web manifest in useWebManifest (${manifestPath}): ${error}`);
+    });
+    return controller;
+}
+const manifestState = proxy({
+    value: {},
+});
+let abortController = null;
+export function useWebManifest(manifestPath = '/manifest.json') {
+    useEffect(() => {
+        if (abortController) {
+            abortController.abort('Component unmounted');
+        }
+        abortController = abortableManifestSync(manifestPath);
+        return () => {
+            if (abortController) {
+                abortController.abort('Component unmounted');
+            }
+        };
+    }, [manifestPath]);
+    return useSnapshot(manifestState).value;
+}
+//# sourceMappingURL=useWebManifest.js.map

package/dist/components/pwaInstall/useWebManifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebManifest.js","sourceRoot":"","sources":["../../../src/components/pwaInstall/useWebManifest.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG5C,KAAK,UAAU,aAAa,CAC3B,eAAuB,gBAAgB,EACvC,UAA4B;IAE5B,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,YAAY,EAAE;QAC1C,MAAM,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM;KAC1B,CAAC,CAAC;IACH,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QAClB,OAAO,CAAC,KAAK,CACZ,iCAAiC,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,UAAU,EAAE,CACzE,CAAC;QACF,OAAO,EAAE,CAAC;IACX,CAAC;IAED,IAAI,CAAC;QACJ,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvC,OAAO,QAAQ,CAAC;IACjB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QAChB,OAAO,CAAC,KAAK,CAAC,oCAAoC,KAAK,EAAE,CAAC,CAAC;QAC3D,OAAO,EAAE,CAAC;IACX,CAAC;AACF,CAAC;AAED,SAAS,qBAAqB,CAAC,YAAoB;IAClD,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;IACzC,aAAa,CAAC,YAAY,EAAE,UAAU,CAAC;SACrC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;QAClB,IAAI,QAAQ,EAAE,CAAC;YACd,aAAa,CAAC,KAAK,GAAG,QAAQ,CAAC;QAChC,CAAC;IACF,CAAC,CAAC;SACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;QAChB,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;YACjC,OAAO;QACR,CAAC;QACD,OAAO,CAAC,KAAK,CACZ,kDAAkD,YAAY,MAAM,KAAK,EAAE,CAC3E,CAAC;IACH,CAAC,CAAC,CAAC;IACJ,OAAO,UAAU,CAAC;AACnB,CAAC;AAED,MAAM,aAAa,GAAG,KAAK,CAAC;IAC3B,KAAK,EAAE,EAAoB;CAC3B,CAAC,CAAC;AACH,IAAI,eAAe,GAA2B,IAAI,CAAC;AAEnD,MAAM,UAAU,cAAc,CAC7B,YAAY,GAAG,gBAAgB;IAE/B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,eAAe,EAAE,CAAC;YACrB,eAAe,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;QAC9C,CAAC;QACD,eAAe,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;QAEtD,OAAO,GAAG,EAAE;YACX,IAAI,eAAe,EAAE,CAAC;gBACrB,eAAe,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;YAC9C,CAAC;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,WAAW,CAAC,aAAa,CAAC,CAAC,KAAuB,CAAC;AAC3D,CAAC"}

package/dist/components/quickAction/QuickAction.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog, } from '@base-ui/react/dialog';
+import clsx from 'clsx';
+import { createContext, useContext, useId, useRef } from 'react';
+import { useSize } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { useMonitor, useValueMonitor, ValueMonitor, } from '../../systems/ValueMonitor.js';
+import { Button } from '../button/Button.js';
+import cls from './QuickAction.module.css';
+const QuickActionIdContext = createContext('qab');
+const TriggerSizeContext = createContext(new ValueMonitor({ width: 0, height: 0 }));
+export const QuickActionRoot = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const id = useId();
+    const triggerSizeMonitor = useValueMonitor({ width: 0, height: 0 });
+    return (_jsx(TriggerSizeContext.Provider, { value: triggerSizeMonitor, children: _jsx(Dialog.Root, Object.assign({}, props, { children: _jsx(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) })) }));
+};
+const QuickActionTrigger = (_a) => {
+    var { className, emphasis = 'primary', children, ref } = _a, props = __rest(_a, ["className", "emphasis", "children", "ref"]);
+    const layoutId = useContext(QuickActionIdContext);
+    const sizeMonitor = useContext(TriggerSizeContext);
+    const measureRef = useSize((size) => {
+        sizeMonitor.set(size);
+    });
+    const finalRef = useMergedRef(ref, measureRef);
+    return (_jsx(Dialog.Trigger, Object.assign({}, props, { ref: finalRef, render: (_a) => {
+            var { color: _ } = _a, composed = __rest(_a, ["color"]);
+            return (_jsx(Button, Object.assign({ color: props.color, emphasis: emphasis }, composed, { className: clsx(cls.trigger, className), style: {
+                    // @ts-ignore
+                    anchorName: `--${layoutId}`,
+                } })));
+        }, children: children })));
+};
+const QuickActionContent = (_a) => {
+    var { children, className, align = 'center', ref, style } = _a, rest = __rest(_a, ["children", "className", "align", "ref", "style"]);
+    const innerRef = useRef(null);
+    const finalRef = useMergedRef(innerRef, ref);
+    const layoutId = useContext(QuickActionIdContext);
+    const triggerSizeMonitor = useContext(TriggerSizeContext);
+    useMonitor(triggerSizeMonitor, (size) => {
+        if (innerRef.current) {
+            const style = innerRef.current.style;
+            style.setProperty('--trigger-width', `${size.width}px`);
+            style.setProperty('--trigger-height', `${size.height}px`);
+        }
+    });
+    return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Popup, Object.assign({ ref: finalRef, className: clsx(cls.popup, className), "data-align": align, style: Object.assign({ positionAnchor: `--${layoutId}`, '--trigger-width': triggerSizeMonitor.get().width + 'px', '--trigger-height': triggerSizeMonitor.get().height + 'px' }, style) }, rest, { children: children })) }));
+};
+export const QuickAction = Object.assign(QuickActionRoot, {
+    Trigger: QuickActionTrigger,
+    Content: QuickActionContent,
+});
+//# sourceMappingURL=QuickAction.js.map

package/dist/components/quickAction/QuickAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":"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"}

package/dist/components/quickAction/QuickAction.module.css

@@ -0,0 +1,59 @@
+.trigger {
+	position: relative;
+	justify-content: center;
+	padding: var(--m-spacing-xs);
+	border-radius: var(--m-action-radius);
+}
+
+.popup {
+	transition-property: all;
+	transition-duration: var(--m-duration);
+	transition-timing-function: var(--m-easing-loose);
+
+	position: fixed;
+	contain: layout;
+
+	@apply --mx-shadow(var(--m-shadow-lg));
+	@apply --mx-surface-ambient;
+	padding: 0;
+
+	clip-path: inset(-50px -50px -50px -50px);
+
+	bottom: anchor(bottom);
+	&[data-align='center'] {
+		justify-self: anchor-center;
+	}
+	&[data-align='start'] {
+		justify-self: anchor-start;
+	}
+	&[data-align='end'] {
+		justify-self: anchor-end;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		&[data-align='center'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc((100% - var(--trigger-width, 0px)) / 2) 0
+					calc((100% - var(--trigger-width, 0px)) / 2) round 200px
+			);
+		}
+		&[data-align='start'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc(100% - var(--trigger-width, 0px)) 0 0 round 200px
+			);
+		}
+		&[data-align='end'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px)) 0 0
+					calc(100% - var(--trigger-width, 0px)) round 200px
+			);
+		}
+	}
+
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}

package/dist/components/quickAction/QuickAction.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    argTypes: {
+        align: {
+            control: "select";
+            options: string[];
+            description: string;
+            defaultValue: string;
+        };
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<{
+    align?: 'center' | 'start' | 'end';
+}>;
+export declare const Default: Story;

package/dist/components/quickAction/QuickAction.stories.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete } from '../autocomplete/Autocomplete.js';
+import clsx from 'clsx';
+import { Box } from '../box/Box.js';
+import { Icon } from '../icon/Icon.js';
+import { PageContent } from '../layouts/PageContent.js';
+import { PageNowPlaying } from '../layouts/PageNowPlaying.js';
+import { PageRoot } from '../layouts/PageRoot.js';
+import { QuickAction } from './QuickAction.js';
+const meta = {
+    title: 'Components/QuickAction',
+    argTypes: {
+        align: {
+            control: 'select',
+            options: ['center', 'start', 'end'],
+            description: 'Alignment of the QuickAction content relative to the trigger.',
+            defaultValue: 'center',
+        },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const groupedItems = [
+    {
+        category: 'Fruits',
+        items: [
+            { id: 'apple', label: 'Apple' },
+            { id: 'banana', label: 'Banana' },
+            { id: 'cherry', label: 'Cherry' },
+        ],
+    },
+    {
+        category: 'Berries',
+        items: [
+            { id: 'strawberry', label: 'Strawberry' },
+            { id: 'blueberry', label: 'Blueberry' },
+            { id: 'raspberry', label: 'Raspberry' },
+        ],
+    },
+];
+const GroupedAutocomplete = Autocomplete.createGrouped();
+const ActionContent = () => (_jsx(GroupedAutocomplete, { items: groupedItems, children: _jsxs(Box, { p: true, col: true, children: [_jsx(GroupedAutocomplete.List, { children: (group) => (_jsxs(GroupedAutocomplete.Group, { children: [_jsx(GroupedAutocomplete.GroupLabel, { children: group.category }), _jsx(GroupedAutocomplete.GroupList, { children: group.items.map((item) => (_jsx(GroupedAutocomplete.Item, { value: item.id, children: item.label }, item.id))) })] }, group.category)) }), _jsx(GroupedAutocomplete.Empty, { children: "No results found." }), _jsx(GroupedAutocomplete.Input, { disableCaret: true, style: { width: '100%' } })] }) }));
+export const Default = {
+    render(args) {
+        return (_jsx(PageRoot, { children: _jsx(PageContent, { children: _jsx(PageNowPlaying, { className: clsx({
+                        'items-center': args.align === 'center',
+                        'items-start': args.align === 'start',
+                        'items-end': args.align === 'end',
+                    }), style: { display: 'flex', flexDirection: 'column' }, children: _jsxs(QuickAction, Object.assign({}, args, { children: [_jsx(QuickAction.Trigger, { children: _jsx(Icon, { name: "plus" }) }), _jsx(QuickAction.Content, { style: { width: '95vw' }, align: args.align, children: _jsx(ActionContent, {}) })] })) }) }) }));
+    },
+};
+//# sourceMappingURL=QuickAction.stories.js.map

package/dist/components/quickAction/QuickAction.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickAction.stories.js","sourceRoot":"","sources":["../../../src/components/quickAction/QuickAction.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/relativeTime/RelativeTime.js

@@ -0,0 +1,39 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { shortenTimeUnits } from '@a-type/utils';
+import { differenceInMinutes } from 'date-fns/differenceInMinutes';
+import { formatDistanceToNowStrict } from 'date-fns/formatDistanceToNowStrict';
+import { useEffect, useMemo, useState } from 'react';
+function formatDistanceToNow(date, relativeText = true) {
+    const now = Date.now();
+    if (Math.abs(date.getTime() - now) < 1000) {
+        return 'just now';
+    }
+    return (formatDistanceToNowStrict(date) +
+        (relativeText ? (date.getTime() < now ? ' ago' : ' from now') : ''));
+}
+export function RelativeTime({ value, abbreviate, countdownSeconds, disableRelativeText, }) {
+    const asDate = useMemo(() => new Date(value), [value]);
+    const [time, setTime] = useState(() => abbreviate
+        ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
+        : formatDistanceToNow(asDate, !disableRelativeText));
+    // increase update rate if the date is less than 1 minute away and in the future
+    // (past is ok to just leave ~1 minute)
+    const updateRate = countdownSeconds &&
+        asDate.getTime() > Date.now() &&
+        Math.abs(differenceInMinutes(asDate, new Date())) < 1
+        ? 1000
+        : 60 * 1000;
+    useEffect(() => {
+        const update = () => {
+            setTime(abbreviate
+                ? shortenTimeUnits(formatDistanceToNow(asDate, !disableRelativeText))
+                : formatDistanceToNow(asDate, !disableRelativeText));
+        };
+        const interval = setInterval(update, updateRate);
+        update();
+        return () => clearInterval(interval);
+    }, [asDate, abbreviate, updateRate, disableRelativeText]);
+    return _jsx(_Fragment, { children: time });
+}
+//# sourceMappingURL=RelativeTime.js.map

package/dist/components/relativeTime/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","sourceRoot":"","sources":["../../../src/components/relativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgBrD,SAAS,mBAAmB,CAAC,IAAU,EAAE,YAAY,GAAG,IAAI;IAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC;QAC3C,OAAO,UAAU,CAAC;IACnB,CAAC;IACD,OAAO,CACN,yBAAyB,CAAC,IAAI,CAAC;QAC/B,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CACnE,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,mBAAmB,GACA;IACnB,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CACrC,UAAU;QACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;QACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;IACF,gFAAgF;IAChF,uCAAuC;IACvC,MAAM,UAAU,GACf,gBAAgB;QAChB,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;QAC7B,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC;QACpD,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CACN,UAAU;gBACT,CAAC,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CAAC;gBACrE,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,CAAC,mBAAmB,CAAC,CACpD,CAAC;QACH,CAAC,CAAC;QACF,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACjD,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAE1D,OAAO,4BAAG,IAAI,GAAI,CAAC;AACpB,CAAC"}

package/dist/components/relativeTime/RelativeTime.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { RelativeTime } from './RelativeTime.js';
+declare const meta: {
+    title: string;
+    component: typeof RelativeTime;
+    argTypes: {};
+    args: {
+        value: number;
+        abbreviate: false;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof RelativeTime>;
+export declare const Default: Story;

package/dist/components/relativeTime/RelativeTime.stories.js

@@ -0,0 +1,16 @@
+import { RelativeTime } from './RelativeTime.js';
+const meta = {
+    title: 'Components/RelativeTime',
+    component: RelativeTime,
+    argTypes: {},
+    args: {
+        value: Date.now() + 60 * 1000 * 2,
+        abbreviate: false,
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=RelativeTime.stories.js.map