@a-type/ui 4.1.2 → 4.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/quickAction/QuickAction.d.ts +5 -4
- package/dist/cjs/components/quickAction/QuickAction.js +16 -22
- package/dist/cjs/components/quickAction/QuickAction.js.map +1 -1
- package/dist/esm/components/quickAction/QuickAction.d.ts +5 -4
- package/dist/esm/components/quickAction/QuickAction.js +11 -17
- package/dist/esm/components/quickAction/QuickAction.js.map +1 -1
- package/package.json +1 -1
- package/src/components/quickAction/QuickAction.tsx +27 -36
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { DialogRootProps } from '@base-ui/react/dialog';
|
|
1
2
|
import { ButtonProps } from '../button/Button.js';
|
|
2
|
-
export declare const QuickActionRoot: ({ children, }: {
|
|
3
|
-
children
|
|
3
|
+
export declare const QuickActionRoot: ({ children, ...props }: Omit<DialogRootProps, "children"> & {
|
|
4
|
+
children?: React.ReactNode;
|
|
4
5
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
5
6
|
export type QuickActionTriggerProps = ButtonProps;
|
|
6
7
|
interface QuickActionContentProps {
|
|
@@ -8,8 +9,8 @@ interface QuickActionContentProps {
|
|
|
8
9
|
className?: string;
|
|
9
10
|
align?: 'center' | 'start' | 'end';
|
|
10
11
|
}
|
|
11
|
-
export declare const QuickAction: (({ children, }: {
|
|
12
|
-
children
|
|
12
|
+
export declare const QuickAction: (({ children, ...props }: Omit<DialogRootProps, "children"> & {
|
|
13
|
+
children?: React.ReactNode;
|
|
13
14
|
}) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
14
15
|
Trigger: ({ className, emphasis, children, ...props }: QuickActionTriggerProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
15
16
|
Content: ({ children, className, align, }: QuickActionContentProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -19,24 +19,18 @@ exports.QuickAction = exports.QuickActionRoot = void 0;
|
|
|
19
19
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
20
20
|
const dialog_1 = require("@base-ui/react/dialog");
|
|
21
21
|
const clsx_1 = __importDefault(require("clsx"));
|
|
22
|
-
const react_1 = require("
|
|
23
|
-
const react_2 = require("react");
|
|
22
|
+
const react_1 = require("react");
|
|
24
23
|
const Button_js_1 = require("../button/Button.js");
|
|
25
|
-
const QuickActionIdContext = (0,
|
|
26
|
-
const QuickActionRoot = (
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
const QuickActionIdContext = (0, react_1.createContext)('qab');
|
|
25
|
+
const QuickActionRoot = (_a) => {
|
|
26
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
27
|
+
const id = (0, react_1.useId)();
|
|
28
|
+
return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog.Root, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) })));
|
|
29
29
|
};
|
|
30
30
|
exports.QuickActionRoot = QuickActionRoot;
|
|
31
|
-
const transition = {
|
|
32
|
-
type: 'spring',
|
|
33
|
-
damping: 25,
|
|
34
|
-
stiffness: 300,
|
|
35
|
-
mass: 0.5,
|
|
36
|
-
};
|
|
37
31
|
const QuickActionTrigger = (_a) => {
|
|
38
32
|
var { className, emphasis = 'primary', children } = _a, props = __rest(_a, ["className", "emphasis", "children"]);
|
|
39
|
-
const layoutId = (0,
|
|
33
|
+
const layoutId = (0, react_1.useContext)(QuickActionIdContext);
|
|
40
34
|
return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog.Trigger, Object.assign({}, props, { render: (_a) => {
|
|
41
35
|
var { color: _ } = _a, composed = __rest(_a, ["color"]);
|
|
42
36
|
return ((0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ color: props.color, emphasis: emphasis }, composed, { className: (0, clsx_1.default)('layer-composed:relative layer-composed:min-h-[2.5rem] layer-composed:min-w-[2.5rem] layer-composed:justify-center layer-composed:rounded-full layer-composed:p-xs', className), style: {
|
|
@@ -46,15 +40,15 @@ const QuickActionTrigger = (_a) => {
|
|
|
46
40
|
}, children: children })));
|
|
47
41
|
};
|
|
48
42
|
const QuickActionContent = ({ children, className, align = 'center', }) => {
|
|
49
|
-
const layoutId = (0,
|
|
50
|
-
return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog.Portal, { children: (0, jsx_runtime_1.jsx)(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
43
|
+
const layoutId = (0, react_1.useContext)(QuickActionIdContext);
|
|
44
|
+
return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog.Portal, { children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog.Popup, { className: (0, clsx_1.default)('layer-components:contain-layout layer-components:border-1 layer-components:rounded-md layer-components:border-solid layer-components:shadow-lg layer-components:transition-all layer-components:bg-white layer-components:border-black', 'layer-components:fixed layer-components:bottom-[anchor(bottom)] layer-components:overflow-clip', {
|
|
45
|
+
'[justify-self:anchor-center]': align === 'center',
|
|
46
|
+
'left-[anchor(left)]': align === 'start',
|
|
47
|
+
'right-[anchor(right)]': align === 'end',
|
|
48
|
+
}, 'data-[starting-style]:[will-change:width,height,transform] data-[starting-style]:h-[anchor-size(height)] data-[starting-style]:w-[anchor-size(width)] data-[starting-style]:rounded-200px data-[starting-style]:opacity-0', 'layer-components:[&[data-starting-style]>*]:opacity-0', 'data-[ending-style]:[will-change:width,height,transform] data-[ending-style]:h-[anchor-size(height)] data-[ending-style]:w-[anchor-size(width)] data-[ending-style]:rounded-200px data-[ending-style]:opacity-80', 'layer-components:[&[data-ending-style]>*]:opacity-0', className), style: {
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
'position-anchor': `--${layoutId}`,
|
|
51
|
+
}, children: children }) }));
|
|
58
52
|
};
|
|
59
53
|
exports.QuickAction = Object.assign(exports.QuickActionRoot, {
|
|
60
54
|
Trigger: QuickActionTrigger,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,kDAAgE;AAChE,gDAAwB;AACxB,iCAAyD;AACzD,mDAA0D;AAE1D,MAAM,oBAAoB,GAAG,IAAA,qBAAa,EAAS,KAAK,CAAC,CAAC;AAEnD,MAAM,eAAe,GAAG,CAAC,EAK/B,EAAE,EAAE;QAL2B,EAC/B,QAAQ,OAIR,EAHG,KAAK,cAFuB,YAG/B,CADQ;IAIR,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,OAAO,CACN,uBAAC,eAAM,CAAC,IAAI,oBAAK,KAAK,cACrB,uBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,YACxD,QAAQ,GACsB,IACnB,CACd,CAAC;AACH,CAAC,CAAC;AAdW,QAAA,eAAe,mBAc1B;AAGF,MAAM,kBAAkB,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EAC3B,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,QAAQ,OAEiB,EADtB,KAAK,cAJmB,qCAK3B,CADQ;IAER,MAAM,QAAQ,GAAG,IAAA,kBAAU,EAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,uBAAC,eAAM,CAAC,OAAO,oBACV,KAAK,IACT,MAAM,EAAE,CAAC,EAAyB,EAAE,EAAE;gBAA7B,EAAE,KAAK,EAAE,CAAC,OAAe,EAAV,QAAQ,cAAvB,SAAyB,CAAF;YAAO,OAAA,CACtC,uBAAC,kBAAM,kBACN,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,QAAQ,IACd,QAAQ,IACZ,SAAS,EAAE,IAAA,cAAI,EACd,0FAA0F,EAC1F,SAAS,CACT,EACD,KAAK,EAAE;oBACN,aAAa;oBACb,UAAU,EAAE,KAAK,QAAQ,EAAE;iBAC3B,IACA,CACF,CAAA;SAAA,YAEA,QAAQ,IACO,CACjB,CAAC;AACH,CAAC,CAAC;AAOF,MAAM,kBAAkB,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,QAAQ,GACS,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,IAAA,kBAAU,EAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,uBAAC,eAAM,CAAC,MAAM,cACb,uBAAC,eAAM,CAAC,KAAK,IACZ,SAAS,EAAE,IAAA,cAAI,EACd,mHAAmH,EACnH,gEAAgE,EAChE;gBACC,8BAA8B,EAAE,KAAK,KAAK,QAAQ;gBAClD,qBAAqB,EAAE,KAAK,KAAK,OAAO;gBACxC,uBAAuB,EAAE,KAAK,KAAK,KAAK;aACxC,EACD,qIAAqI,EACrI,uDAAuD,EACvD,oIAAoI,EACpI,qDAAqD,EACrD,SAAS,CACT,EACD,KAAK,EAAE;gBACN,aAAa;gBACb,iBAAiB,EAAE,KAAK,QAAQ,EAAE;aAClC,YAEA,QAAQ,GACK,GACA,CAChB,CAAC;AACH,CAAC,CAAC;AAEW,QAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAe,EAAE;IACzD,OAAO,EAAE,kBAAkB;IAC3B,OAAO,EAAE,kBAAkB;CAC3B,CAAC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { DialogRootProps } from '@base-ui/react/dialog';
|
|
1
2
|
import { ButtonProps } from '../button/Button.js';
|
|
2
|
-
export declare const QuickActionRoot: ({ children, }: {
|
|
3
|
-
children
|
|
3
|
+
export declare const QuickActionRoot: ({ children, ...props }: Omit<DialogRootProps, "children"> & {
|
|
4
|
+
children?: React.ReactNode;
|
|
4
5
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
export type QuickActionTriggerProps = ButtonProps;
|
|
6
7
|
interface QuickActionContentProps {
|
|
@@ -8,8 +9,8 @@ interface QuickActionContentProps {
|
|
|
8
9
|
className?: string;
|
|
9
10
|
align?: 'center' | 'start' | 'end';
|
|
10
11
|
}
|
|
11
|
-
export declare const QuickAction: (({ children, }: {
|
|
12
|
-
children
|
|
12
|
+
export declare const QuickAction: (({ children, ...props }: Omit<DialogRootProps, "children"> & {
|
|
13
|
+
children?: React.ReactNode;
|
|
13
14
|
}) => import("react/jsx-runtime").JSX.Element) & {
|
|
14
15
|
Trigger: ({ className, emphasis, children, ...props }: QuickActionTriggerProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
Content: ({ children, className, align, }: QuickActionContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -13,19 +13,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import { Dialog } from '@base-ui/react/dialog';
|
|
15
15
|
import clsx from 'clsx';
|
|
16
|
-
import { AnimatePresence } from 'motion/react';
|
|
17
16
|
import { createContext, useContext, useId } from 'react';
|
|
18
17
|
import { Button } from '../button/Button.js';
|
|
19
18
|
const QuickActionIdContext = createContext('qab');
|
|
20
|
-
export const QuickActionRoot = (
|
|
19
|
+
export const QuickActionRoot = (_a) => {
|
|
20
|
+
var { children } = _a, props = __rest(_a, ["children"]);
|
|
21
21
|
const id = useId();
|
|
22
|
-
return (_jsx(Dialog.Root, { children: _jsx(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) }));
|
|
23
|
-
};
|
|
24
|
-
const transition = {
|
|
25
|
-
type: 'spring',
|
|
26
|
-
damping: 25,
|
|
27
|
-
stiffness: 300,
|
|
28
|
-
mass: 0.5,
|
|
22
|
+
return (_jsx(Dialog.Root, Object.assign({}, props, { children: _jsx(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) })));
|
|
29
23
|
};
|
|
30
24
|
const QuickActionTrigger = (_a) => {
|
|
31
25
|
var { className, emphasis = 'primary', children } = _a, props = __rest(_a, ["className", "emphasis", "children"]);
|
|
@@ -40,14 +34,14 @@ const QuickActionTrigger = (_a) => {
|
|
|
40
34
|
};
|
|
41
35
|
const QuickActionContent = ({ children, className, align = 'center', }) => {
|
|
42
36
|
const layoutId = useContext(QuickActionIdContext);
|
|
43
|
-
return (_jsx(Dialog.Portal, { children: _jsx(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
37
|
+
return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Popup, { className: clsx('layer-components:contain-layout layer-components:border-1 layer-components:rounded-md layer-components:border-solid layer-components:shadow-lg layer-components:transition-all layer-components:bg-white layer-components:border-black', 'layer-components:fixed layer-components:bottom-[anchor(bottom)] layer-components:overflow-clip', {
|
|
38
|
+
'[justify-self:anchor-center]': align === 'center',
|
|
39
|
+
'left-[anchor(left)]': align === 'start',
|
|
40
|
+
'right-[anchor(right)]': align === 'end',
|
|
41
|
+
}, 'data-[starting-style]:[will-change:width,height,transform] data-[starting-style]:h-[anchor-size(height)] data-[starting-style]:w-[anchor-size(width)] data-[starting-style]:rounded-200px data-[starting-style]:opacity-0', 'layer-components:[&[data-starting-style]>*]:opacity-0', 'data-[ending-style]:[will-change:width,height,transform] data-[ending-style]:h-[anchor-size(height)] data-[ending-style]:w-[anchor-size(width)] data-[ending-style]:rounded-200px data-[ending-style]:opacity-80', 'layer-components:[&[data-ending-style]>*]:opacity-0', className), style: {
|
|
42
|
+
// @ts-ignore
|
|
43
|
+
'position-anchor': `--${layoutId}`,
|
|
44
|
+
}, children: children }) }));
|
|
51
45
|
};
|
|
52
46
|
export const QuickAction = Object.assign(QuickActionRoot, {
|
|
53
47
|
Trigger: QuickActionTrigger,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAmB,MAAM,uBAAuB,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,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,EAKF,EAAE,EAAE;QALF,EAC3B,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,QAAQ,OAEiB,EADtB,KAAK,cAJmB,qCAK3B,CADQ;IAER,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,KAAC,MAAM,CAAC,OAAO,oBACV,KAAK,IACT,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,CACd,0FAA0F,EAC1F,SAAS,CACT,EACD,KAAK,EAAE;oBACN,aAAa;oBACb,UAAU,EAAE,KAAK,QAAQ,EAAE;iBAC3B,IACA,CACF,CAAA;SAAA,YAEA,QAAQ,IACO,CACjB,CAAC;AACH,CAAC,CAAC;AAOF,MAAM,kBAAkB,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,QAAQ,GACS,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,KAAC,MAAM,CAAC,MAAM,cACb,KAAC,MAAM,CAAC,KAAK,IACZ,SAAS,EAAE,IAAI,CACd,mHAAmH,EACnH,gEAAgE,EAChE;gBACC,8BAA8B,EAAE,KAAK,KAAK,QAAQ;gBAClD,qBAAqB,EAAE,KAAK,KAAK,OAAO;gBACxC,uBAAuB,EAAE,KAAK,KAAK,KAAK;aACxC,EACD,qIAAqI,EACrI,uDAAuD,EACvD,oIAAoI,EACpI,qDAAqD,EACrD,SAAS,CACT,EACD,KAAK,EAAE;gBACN,aAAa;gBACb,iBAAiB,EAAE,KAAK,QAAQ,EAAE;aAClC,YAEA,QAAQ,GACK,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/package.json
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { Dialog } from '@base-ui/react/dialog';
|
|
1
|
+
import { Dialog, DialogRootProps } from '@base-ui/react/dialog';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { AnimatePresence, Transition } from 'motion/react';
|
|
4
3
|
import { createContext, useContext, useId } from 'react';
|
|
5
4
|
import { Button, ButtonProps } from '../button/Button.js';
|
|
6
5
|
|
|
@@ -8,12 +7,13 @@ const QuickActionIdContext = createContext<string>('qab');
|
|
|
8
7
|
|
|
9
8
|
export const QuickActionRoot = ({
|
|
10
9
|
children,
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
...props
|
|
11
|
+
}: Omit<DialogRootProps, 'children'> & {
|
|
12
|
+
children?: React.ReactNode;
|
|
13
13
|
}) => {
|
|
14
14
|
const id = useId();
|
|
15
15
|
return (
|
|
16
|
-
<Dialog.Root>
|
|
16
|
+
<Dialog.Root {...props}>
|
|
17
17
|
<QuickActionIdContext.Provider value={id.replace(/:/g, '')}>
|
|
18
18
|
{children}
|
|
19
19
|
</QuickActionIdContext.Provider>
|
|
@@ -21,13 +21,6 @@ export const QuickActionRoot = ({
|
|
|
21
21
|
);
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
const transition: Transition = {
|
|
25
|
-
type: 'spring',
|
|
26
|
-
damping: 25,
|
|
27
|
-
stiffness: 300,
|
|
28
|
-
mass: 0.5,
|
|
29
|
-
};
|
|
30
|
-
|
|
31
24
|
export type QuickActionTriggerProps = ButtonProps;
|
|
32
25
|
const QuickActionTrigger = ({
|
|
33
26
|
className,
|
|
@@ -73,30 +66,28 @@ const QuickActionContent = ({
|
|
|
73
66
|
const layoutId = useContext(QuickActionIdContext);
|
|
74
67
|
return (
|
|
75
68
|
<Dialog.Portal>
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
</Dialog.Popup>
|
|
99
|
-
</AnimatePresence>
|
|
69
|
+
<Dialog.Popup
|
|
70
|
+
className={clsx(
|
|
71
|
+
'layer-components:(contain-layout border-1 rounded-md border-solid shadow-lg transition-all bg-white border-black)',
|
|
72
|
+
'layer-components:(fixed bottom-[anchor(bottom)] overflow-clip)',
|
|
73
|
+
{
|
|
74
|
+
'[justify-self:anchor-center]': align === 'center',
|
|
75
|
+
'left-[anchor(left)]': align === 'start',
|
|
76
|
+
'right-[anchor(right)]': align === 'end',
|
|
77
|
+
},
|
|
78
|
+
'data-[starting-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-0)',
|
|
79
|
+
'layer-components:[&[data-starting-style]>*]:opacity-0',
|
|
80
|
+
'data-[ending-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-80)',
|
|
81
|
+
'layer-components:[&[data-ending-style]>*]:opacity-0',
|
|
82
|
+
className,
|
|
83
|
+
)}
|
|
84
|
+
style={{
|
|
85
|
+
// @ts-ignore
|
|
86
|
+
'position-anchor': `--${layoutId}`,
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
89
|
+
{children}
|
|
90
|
+
</Dialog.Popup>
|
|
100
91
|
</Dialog.Portal>
|
|
101
92
|
);
|
|
102
93
|
};
|