@a-type/ui 6.1.13 → 6.1.14

package/dist/components/lightbox/Lightbox.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
         Content: (props: import("@base-ui/react").AlertDialogPopupProps) => import("react/jsx-runtime").JSX.Element;
         Image: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
         Root: typeof import("@base-ui/react").DialogRoot;
-        Trigger: import("react").FunctionComponent<import("@base-ui/react").AlertDialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>>;
+        Trigger: import("react").FunctionComponent<import("@base-ui/react").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>>;
         Close: (props: import("@base-ui/react").AlertDialogCloseProps) => import("react/jsx-runtime").JSX.Element;
         Title: () => import("react/jsx-runtime").JSX.Element;
         Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,7 @@
 import { DialogPopupProps, DialogRootProps } from '@base-ui/react/dialog';
 import { RefObject } from 'react';
 import { ButtonProps } from '../button/Button.js';
-export declare const QuickActionRoot: ({ children, onOpenChange, ...props }: Omit<DialogRootProps, "children"> & {
+export declare const QuickActionRoot: ({ children, ...props }: Omit<DialogRootProps, "children"> & {
     children?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export type QuickActionTriggerProps = ButtonProps;
@@ -11,7 +11,7 @@ interface QuickActionContentProps extends DialogPopupProps {
     align?: 'center' | 'start' | 'end';
     ref?: RefObject<HTMLDivElement>;
 }
-export declare const QuickAction: (({ children, onOpenChange, ...props }: Omit<DialogRootProps, "children"> & {
+export declare const QuickAction: (({ children, ...props }: Omit<DialogRootProps, "children"> & {
     children?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element) & {
     Trigger: ({ className, emphasis, children, ref, ...props }: QuickActionTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/quickAction/QuickAction.js

@@ -12,50 +12,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog, } from '@base-ui/react/dialog';
 import clsx from 'clsx';
-import { createContext, useCallback, useContext, useEffect, useId, useRef, } from 'react';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import { useMonitor, useValueMonitor, ValueMonitor, } from '../../systems/ValueMonitor.js';
+import { createContext, useContext, useId } from 'react';
 import { Button } from '../button/Button.js';
 import cls from './QuickAction.module.css';
 const QuickActionIdContext = createContext('qab');
-const TriggerSizeContext = createContext({
-    monitor: new ValueMonitor({ width: 0, height: 0 }),
-    onRemeasure: () => () => { },
-});
 export const QuickActionRoot = (_a) => {
-    var { children, onOpenChange } = _a, props = __rest(_a, ["children", "onOpenChange"]);
+    var { children } = _a, props = __rest(_a, ["children"]);
     const id = useId();
-    const triggerSizeMonitor = useValueMonitor({ width: 0, height: 0 });
-    const remeasureListener = useRef(() => { });
-    const onRemeasure = useCallback((cb) => {
-        remeasureListener.current = cb;
-        return () => {
-            remeasureListener.current = () => { };
-        };
-    }, []);
-    return (_jsx(TriggerSizeContext.Provider, { value: {
-            monitor: triggerSizeMonitor,
-            onRemeasure,
-        }, children: _jsx(Dialog.Root, Object.assign({ onOpenChange: (open, details) => {
-                remeasureListener.current();
-                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open, details);
-            } }, props, { children: _jsx(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) })) }));
+    return (_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 { monitor: sizeMonitor, onRemeasure } = useContext(TriggerSizeContext);
-    const measureRef = useRef(null);
-    useEffect(() => onRemeasure(() => {
-        const el = measureRef.current;
-        if (el) {
-            console.log('remeasuring trigger size', el.getBoundingClientRect());
-            const rect = el.getBoundingClientRect();
-            sizeMonitor.set({ width: rect.width, height: rect.height });
-        }
-    }), [onRemeasure, sizeMonitor]);
-    const finalRef = useMergedRef(ref, measureRef);
-    return (_jsx(Dialog.Trigger, Object.assign({}, props, { ref: finalRef, render: (_a) => {
+    return (_jsx(Dialog.Trigger, Object.assign({}, props, { ref: ref, 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
@@ -65,18 +34,8 @@ const QuickActionTrigger = (_a) => {
 };
 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 { monitor: 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 })) }));
+    return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Popup, Object.assign({ ref: ref, className: clsx(cls.popup, className), "data-align": align, style: Object.assign({ positionAnchor: `--${layoutId}` }, style) }, rest, { children: children })) }));
 };
 export const QuickAction = Object.assign(QuickActionRoot, {
     Trigger: QuickActionTrigger,

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

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,MAAM,GAGN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAE3C,MAAM,oBAAoB,GAAG,aAAa,CAAS,KAAK,CAAC,CAAC;AAE1D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAK/B,EAAE,EAAE;QAL2B,EAC/B,QAAQ,OAIR,EAHG,KAAK,cAFuB,YAG/B,CADQ;IAIR,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,OAAO,CACN,KAAC,MAAM,CAAC,IAAI,oBAAK,KAAK,cACrB,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,YACxD,QAAQ,GACsB,IACnB,CACd,CAAC;AACH,CAAC,CAAC;AAGF,MAAM,kBAAkB,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EAC3B,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,QAAQ,EACR,GAAG,OAEsB,EADtB,KAAK,cALmB,4CAM3B,CADQ;IAER,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,KAAC,MAAM,CAAC,OAAO,oBACV,KAAK,IACT,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,EAAyB,EAAE,EAAE;gBAA7B,EAAE,KAAK,EAAE,CAAC,OAAe,EAAV,QAAQ,cAAvB,SAAyB,CAAF;YAAO,OAAA,CACtC,KAAC,MAAM,kBACN,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,QAAQ,IACd,QAAQ,IACZ,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE;oBACN,aAAa;oBACb,UAAU,EAAE,KAAK,QAAQ,EAAE;iBAC3B,IACA,CACF,CAAA;SAAA,YAEA,QAAQ,IACO,CACjB,CAAC;AACH,CAAC,CAAC;AAQF,MAAM,kBAAkB,GAAG,CAAC,EAOF,EAAE,EAAE;QAPF,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,QAAQ,EAChB,GAAG,EACH,KAAK,OAEoB,EADtB,IAAI,cANoB,kDAO3B,CADO;IAEP,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAElD,OAAO,CACN,KAAC,MAAM,CAAC,MAAM,cACb,KAAC,MAAM,CAAC,KAAK,kBACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,gBACzB,KAAK,EACjB,KAAK,EACJ,gBACC,cAAc,EAAE,KAAK,QAAQ,EAAE,IAC5B,KAAK,CACD,IAEL,IAAI,cAEP,QAAQ,IACK,GACA,CAChB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACzD,OAAO,EAAE,kBAAkB;IAC3B,OAAO,EAAE,kBAAkB;CAC3B,CAAC,CAAC"}

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

@@ -18,6 +18,8 @@
 	padding: 0;
 
 	clip-path: inset(-50px -50px -50px -50px);
+	transform: translate(0px, 0px) scale(1);
+	will-change: transform;
 
 	bottom: anchor(bottom);
 	&[data-align='center'] {
@@ -32,24 +34,15 @@
 
 	&[data-starting-style],
 	&[data-ending-style] {
+		clip-path: inset(200px 200px 200px 200px);
 		&[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
-			);
+			transform: translate(0px, 60px) scale(0.8);
 		}
 		&[data-align='start'] {
-			clip-path: inset(
-				calc(100% - var(--trigger-height, 0px))
-					calc(100% - var(--trigger-width, 0px)) 0 0 round 200px
-			);
+			transform: translate(-60px, 60px) scale(0.8);
 		}
 		&[data-align='end'] {
-			clip-path: inset(
-				calc(100% - var(--trigger-height, 0px)) 0 0
-					calc(100% - var(--trigger-width, 0px)) round 200px
-			);
+			transform: translate(60px, 60px) scale(0.8);
 		}
 	}
 

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete } from '../autocomplete/Autocomplete.js';
 import clsx from 'clsx';
+import { NavBar, NavBarItem, NavBarItemIcon, NavBarItemText, PageNav, } from '../../index.js';
 import { Box } from '../box/Box.js';
 import { Icon } from '../icon/Icon.js';
 import { PageContent } from '../layouts/PageContent.js';
@@ -44,11 +45,11 @@ 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, {}) })] })) }) }) }));
+        return (_jsxs(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, {}) })] })) }) }), _jsx(PageNav, { children: _jsx(NavBar, { children: _jsxs(NavBarItem, { children: [_jsx(NavBarItemIcon, { name: "home" }), _jsx(NavBarItemText, { children: "Home" })] }) }) })] }));
     },
 };
 //# sourceMappingURL=QuickAction.stories.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.1.13",
+  "version": "6.1.14",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@a-type/utils": "^1.1.9",
-    "@base-ui/react": "^1.4.1",
+    "@base-ui/react": "^1.6.0",
     "@use-gesture/react": "^10.3.1",
     "browser-image-resizer": "^2.4.1",
     "calendar-blocks": "^0.4.0",

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

@@ -18,6 +18,8 @@
 	padding: 0;
 
 	clip-path: inset(-50px -50px -50px -50px);
+	transform: translate(0px, 0px) scale(1);
+	will-change: transform;
 
 	bottom: anchor(bottom);
 	&[data-align='center'] {
@@ -32,24 +34,15 @@
 
 	&[data-starting-style],
 	&[data-ending-style] {
+		clip-path: inset(200px 200px 200px 200px);
 		&[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
-			);
+			transform: translate(0px, 60px) scale(0.8);
 		}
 		&[data-align='start'] {
-			clip-path: inset(
-				calc(100% - var(--trigger-height, 0px))
-					calc(100% - var(--trigger-width, 0px)) 0 0 round 200px
-			);
+			transform: translate(-60px, 60px) scale(0.8);
 		}
 		&[data-align='end'] {
-			clip-path: inset(
-				calc(100% - var(--trigger-height, 0px)) 0 0
-					calc(100% - var(--trigger-width, 0px)) round 200px
-			);
+			transform: translate(60px, 60px) scale(0.8);
 		}
 	}
 

package/src/components/quickAction/QuickAction.stories.tsx

@@ -2,6 +2,13 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Autocomplete } from '../autocomplete/Autocomplete.js';
 
 import clsx from 'clsx';
+import {
+	NavBar,
+	NavBarItem,
+	NavBarItemIcon,
+	NavBarItemText,
+	PageNav,
+} from '../../index.js';
 import { Box } from '../box/Box.js';
 import { Icon } from '../icon/Icon.js';
 import { PageContent } from '../layouts/PageContent.js';
@@ -101,6 +108,14 @@ export const Default: Story = {
 						</QuickAction>
 					</PageNowPlaying>
 				</PageContent>
+				<PageNav>
+					<NavBar>
+						<NavBarItem>
+							<NavBarItemIcon name="home" />
+							<NavBarItemText>Home</NavBarItemText>
+						</NavBarItem>
+					</NavBar>
+				</PageNav>
 			</PageRoot>
 		);
 	},

package/src/components/quickAction/QuickAction.tsx

@@ -4,69 +4,25 @@ import {
 	DialogRootProps,
 } from '@base-ui/react/dialog';
 import clsx from 'clsx';
-import {
-	createContext,
-	RefObject,
-	useCallback,
-	useContext,
-	useEffect,
-	useId,
-	useRef,
-} from 'react';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import {
-	useMonitor,
-	useValueMonitor,
-	ValueMonitor,
-} from '../../systems/ValueMonitor.js';
+import { createContext, RefObject, useContext, useId } from 'react';
 import { Button, ButtonProps } from '../button/Button.js';
 import cls from './QuickAction.module.css';
 
 const QuickActionIdContext = createContext<string>('qab');
 
-const TriggerSizeContext = createContext<{
-	monitor: ValueMonitor<{ width: number; height: number }>;
-	onRemeasure: (cb: () => void) => () => void;
-}>({
-	monitor: new ValueMonitor({ width: 0, height: 0 }),
-	onRemeasure: () => () => {},
-});
-
 export const QuickActionRoot = ({
 	children,
-	onOpenChange,
 	...props
 }: Omit<DialogRootProps, 'children'> & {
 	children?: React.ReactNode;
 }) => {
 	const id = useId();
-	const triggerSizeMonitor = useValueMonitor({ width: 0, height: 0 });
-	const remeasureListener = useRef<() => void>(() => {});
-	const onRemeasure = useCallback((cb: () => void) => {
-		remeasureListener.current = cb;
-		return () => {
-			remeasureListener.current = () => {};
-		};
-	}, []);
 	return (
-		<TriggerSizeContext.Provider
-			value={{
-				monitor: triggerSizeMonitor,
-				onRemeasure,
-			}}
-		>
-			<Dialog.Root
-				onOpenChange={(open, details) => {
-					remeasureListener.current();
-					onOpenChange?.(open, details);
-				}}
-				{...props}
-			>
-				<QuickActionIdContext.Provider value={id.replace(/:/g, '')}>
-					{children}
-				</QuickActionIdContext.Provider>
-			</Dialog.Root>
-		</TriggerSizeContext.Provider>
+		<Dialog.Root {...props}>
+			<QuickActionIdContext.Provider value={id.replace(/:/g, '')}>
+				{children}
+			</QuickActionIdContext.Provider>
+		</Dialog.Root>
 	);
 };
 
@@ -79,25 +35,10 @@ const QuickActionTrigger = ({
 	...props
 }: QuickActionTriggerProps) => {
 	const layoutId = useContext(QuickActionIdContext);
-	const { monitor: sizeMonitor, onRemeasure } = useContext(TriggerSizeContext);
-	const measureRef = useRef<HTMLButtonElement>(null);
-	useEffect(
-		() =>
-			onRemeasure(() => {
-				const el = measureRef.current;
-				if (el) {
-					console.log('remeasuring trigger size', el.getBoundingClientRect());
-					const rect = el.getBoundingClientRect();
-					sizeMonitor.set({ width: rect.width, height: rect.height });
-				}
-			}),
-		[onRemeasure, sizeMonitor],
-	);
-	const finalRef = useMergedRef(ref, measureRef);
 	return (
 		<Dialog.Trigger
 			{...props}
-			ref={finalRef}
+			ref={ref}
 			render={({ color: _, ...composed }) => (
 				<Button
 					color={props.color}
@@ -130,29 +71,17 @@ const QuickActionContent = ({
 	style,
 	...rest
 }: QuickActionContentProps) => {
-	const innerRef = useRef<HTMLDivElement>(null);
-	const finalRef = useMergedRef(innerRef, ref);
 	const layoutId = useContext(QuickActionIdContext);
-	const { monitor: 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 (
 		<Dialog.Portal>
 			<Dialog.Popup
-				ref={finalRef}
+				ref={ref}
 				className={clsx(cls.popup, className)}
 				data-align={align}
 				style={
 					{
 						positionAnchor: `--${layoutId}`,
-						'--trigger-width': triggerSizeMonitor.get().width + 'px',
-						'--trigger-height': triggerSizeMonitor.get().height + 'px',
 						...style,
 					} as any
 				}