@trackunit/react-modal 2.6.48 → 2.6.50-alpha-7317206cecd.0

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.
Files changed (7) hide show
  1. package/index.cjs.js +50 -49
  2. package/index.esm.js +51 -50
  3. package/package.json +6 -6
  4. package/src/modal/Modal.variants.d.ts +95 -10
  5. package/src/modal/ModalBody/ModalBody.variants.d.ts +6 -1
  6. package/src/modal/ModalFooter/ModalFooter.variants.d.ts +6 -1
  7. package/src/modal/ModalHeader/ModalHeader.variants.d.ts +24 -4
package/index.cjs.js CHANGED
@@ -54,16 +54,18 @@ const setupLibraryTranslations = () => {
54
54
  i18nLibraryTranslation.registerTranslations(translations);
55
55
  };
56
56
 
57
- const cvaModalContainer = cssClassVarianceUtilities.cvaMerge([
58
- "flex",
59
- "items-center",
60
- // Allow clicks to pass through to FloatingOverlay for dismiss behavior
61
- "pointer-events-none",
62
- // Animate scale changes when stacking modals
63
- "transition-transform",
64
- "duration-200",
65
- "ease-out",
66
- ]);
57
+ const cvaModalContainer = cssClassVarianceUtilities.cva({
58
+ base: [
59
+ "flex",
60
+ "items-center",
61
+ // Allow clicks to pass through to FloatingOverlay for dismiss behavior
62
+ "pointer-events-none",
63
+ // Animate scale changes when stacking modals
64
+ "transition-transform",
65
+ "duration-200",
66
+ "ease-out",
67
+ ],
68
+ });
67
69
  const modalSizeConfigs = {
68
70
  small: {
69
71
  // Small modal — confirmations / short messages
@@ -130,17 +132,18 @@ const getModalCardCSSVariables = (size, options) => {
130
132
  * Sheet's scroll area. A nested overflow here would absorb content height,
131
133
  * preventing Sheet's fit-height measurement from seeing the true size.
132
134
  */
133
- const cvaModalContentEnvironment = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "min-h-0", "@container"]);
134
- const cvaModalCard = cssClassVarianceUtilities.cvaMerge([
135
- "m-auto",
136
- "shadow-2xl",
137
- "min-h-0",
138
- "overflow-y-auto",
139
- "w-[clamp(var(--modal-min-width),calc(var(--modal-viewport-width-percent)-var(--modal-padding-offset)-((var(--modal-viewport-span)-var(--modal-breakpoint))*var(--modal-transition-rate))),var(--modal-max-width))]",
140
- "max-h-[var(--modal-max-height)]",
141
- "@container",
142
- "pointer-events-auto",
143
- ], {
135
+ const cvaModalContentEnvironment = cssClassVarianceUtilities.cva({ base: ["flex", "flex-col", "min-h-0", "@container"] });
136
+ const cvaModalCard = cssClassVarianceUtilities.cva({
137
+ base: [
138
+ "m-auto",
139
+ "shadow-2xl",
140
+ "min-h-0",
141
+ "overflow-y-auto",
142
+ "w-[clamp(var(--modal-min-width),calc(var(--modal-viewport-width-percent)-var(--modal-padding-offset)-((var(--modal-viewport-span)-var(--modal-breakpoint))*var(--modal-transition-rate))),var(--modal-max-width))]",
143
+ "max-h-[var(--modal-max-height)]",
144
+ "@container",
145
+ "pointer-events-auto",
146
+ ],
144
147
  variants: {
145
148
  animation: {
146
149
  // First modal in stack: simple fade
@@ -155,7 +158,8 @@ const cvaModalCard = cssClassVarianceUtilities.cvaMerge([
155
158
  animation: "fade",
156
159
  },
157
160
  });
158
- const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "inset-0", "w-full", "h-full", "z-overlay"], {
161
+ const cvaModalBackdrop = cssClassVarianceUtilities.cva({
162
+ base: ["flex", "justify-center", "inset-0", "w-full", "h-full", "z-overlay"],
159
163
  variants: {
160
164
  contained: {
161
165
  true: ["absolute"],
@@ -393,16 +397,9 @@ const Modal = ({ children, container, dismiss, isOpen, mode, requestClose, role
393
397
  return (jsxRuntime.jsx(reactComponents.Portal, { root: rootElement, children: jsxRuntime.jsx(react$1.FloatingOverlay, { className: cvaModalBackdrop({ isFrontmost: depthFromFront === 0, shouldAnimate: stackSizeAtOpen === 0 }), lockScroll: true, children: cardModeInner }) }));
394
398
  };
395
399
 
396
- const cvaModalBodyContainer = cssClassVarianceUtilities.cvaMerge([
397
- "flex",
398
- "flex-grow",
399
- "min-h-0",
400
- "overflow-auto",
401
- "bg-neutral-50",
402
- "flex-col",
403
- "p-4",
404
- "gap-4",
405
- ]);
400
+ const cvaModalBodyContainer = cssClassVarianceUtilities.cva({
401
+ base: ["flex", "flex-grow", "min-h-0", "overflow-auto", "bg-neutral-50", "flex-col", "p-4", "gap-4"],
402
+ });
406
403
 
407
404
  /**
408
405
  * Modal body container.
@@ -446,19 +443,21 @@ const ModalBody = react.forwardRef(({ children, id, "data-testid": dataTestId, c
446
443
  return (jsxRuntime.jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, ref: ref, style: style, children: children }));
447
444
  });
448
445
 
449
- const cvaModalFooterContainer = cssClassVarianceUtilities.cvaMerge([
450
- "flex",
451
- "flex-none",
452
- // flex-wrap
453
- "justify-end",
454
- "flex-row",
455
- "px-4",
456
- "pb-4",
457
- "gap-3",
458
- "bg-neutral-50",
459
- "border-neutral-200",
460
- "modal-footer",
461
- ]);
446
+ const cvaModalFooterContainer = cssClassVarianceUtilities.cva({
447
+ base: [
448
+ "flex",
449
+ "flex-none",
450
+ // flex-wrap
451
+ "justify-end",
452
+ "flex-row",
453
+ "px-4",
454
+ "pb-4",
455
+ "gap-3",
456
+ "bg-neutral-50",
457
+ "border-neutral-200",
458
+ "modal-footer",
459
+ ],
460
+ });
462
461
 
463
462
  function isCustom(props) {
464
463
  return props.children !== null && props.children !== undefined;
@@ -541,10 +540,12 @@ const ModalFooter = react.forwardRef((props, ref) => {
541
540
  onClick: primaryAction, role: "button", type: "submit", variant: primaryVariant, children: primaryLabel })) : null] }));
542
541
  });
543
542
 
544
- const cvaContainer = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"]);
545
- const cvaHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "gap-1"]);
546
- const cvaTitleContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "gap-1"]);
547
- const cvaIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "place-items-center"]);
543
+ const cvaContainer = cssClassVarianceUtilities.cva({
544
+ base: ["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"],
545
+ });
546
+ const cvaHeadingContainer = cssClassVarianceUtilities.cva({ base: ["flex", "flex-col", "justify-center", "gap-1"] });
547
+ const cvaTitleContainer = cssClassVarianceUtilities.cva({ base: ["flex", "items-center", "gap-1"] });
548
+ const cvaIconContainer = cssClassVarianceUtilities.cva({ base: ["flex", "place-items-center"] });
548
549
 
549
550
  /**
550
551
  * Modal header section.
package/index.esm.js CHANGED
@@ -3,7 +3,7 @@ import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-l
3
3
  import { useMergeRefs, FloatingFocusManager, FloatingOverlay, useFloating, autoUpdate, shift, useDismiss, useInteractions } from '@floating-ui/react';
4
4
  import { useOverflowBorder, useSheetSnap, useWatch, Card, Portal, Sheet, Button, Heading, Text, IconButton, Icon, useContainerBreakpoints, useViewportBreakpoints, useTimeout, SHEET_TRANSITION_DURATION_MS } from '@trackunit/react-components';
5
5
  import { useRef, useEffect, useCallback, useState, useReducer, useMemo, forwardRef, useId, useSyncExternalStore, useLayoutEffect, useContext } from 'react';
6
- import { cvaMerge } from '@trackunit/css-class-variance-utilities';
6
+ import { cva } from '@trackunit/css-class-variance-utilities';
7
7
  import { ModalDialogContext, ErrorHandlingContext } from '@trackunit/react-core-contexts-api';
8
8
 
9
9
  var defaultTranslations = {
@@ -52,16 +52,18 @@ const setupLibraryTranslations = () => {
52
52
  registerTranslations(translations);
53
53
  };
54
54
 
55
- const cvaModalContainer = cvaMerge([
56
- "flex",
57
- "items-center",
58
- // Allow clicks to pass through to FloatingOverlay for dismiss behavior
59
- "pointer-events-none",
60
- // Animate scale changes when stacking modals
61
- "transition-transform",
62
- "duration-200",
63
- "ease-out",
64
- ]);
55
+ const cvaModalContainer = cva({
56
+ base: [
57
+ "flex",
58
+ "items-center",
59
+ // Allow clicks to pass through to FloatingOverlay for dismiss behavior
60
+ "pointer-events-none",
61
+ // Animate scale changes when stacking modals
62
+ "transition-transform",
63
+ "duration-200",
64
+ "ease-out",
65
+ ],
66
+ });
65
67
  const modalSizeConfigs = {
66
68
  small: {
67
69
  // Small modal — confirmations / short messages
@@ -128,17 +130,18 @@ const getModalCardCSSVariables = (size, options) => {
128
130
  * Sheet's scroll area. A nested overflow here would absorb content height,
129
131
  * preventing Sheet's fit-height measurement from seeing the true size.
130
132
  */
131
- const cvaModalContentEnvironment = cvaMerge(["flex", "flex-col", "min-h-0", "@container"]);
132
- const cvaModalCard = cvaMerge([
133
- "m-auto",
134
- "shadow-2xl",
135
- "min-h-0",
136
- "overflow-y-auto",
137
- "w-[clamp(var(--modal-min-width),calc(var(--modal-viewport-width-percent)-var(--modal-padding-offset)-((var(--modal-viewport-span)-var(--modal-breakpoint))*var(--modal-transition-rate))),var(--modal-max-width))]",
138
- "max-h-[var(--modal-max-height)]",
139
- "@container",
140
- "pointer-events-auto",
141
- ], {
133
+ const cvaModalContentEnvironment = cva({ base: ["flex", "flex-col", "min-h-0", "@container"] });
134
+ const cvaModalCard = cva({
135
+ base: [
136
+ "m-auto",
137
+ "shadow-2xl",
138
+ "min-h-0",
139
+ "overflow-y-auto",
140
+ "w-[clamp(var(--modal-min-width),calc(var(--modal-viewport-width-percent)-var(--modal-padding-offset)-((var(--modal-viewport-span)-var(--modal-breakpoint))*var(--modal-transition-rate))),var(--modal-max-width))]",
141
+ "max-h-[var(--modal-max-height)]",
142
+ "@container",
143
+ "pointer-events-auto",
144
+ ],
142
145
  variants: {
143
146
  animation: {
144
147
  // First modal in stack: simple fade
@@ -153,7 +156,8 @@ const cvaModalCard = cvaMerge([
153
156
  animation: "fade",
154
157
  },
155
158
  });
156
- const cvaModalBackdrop = cvaMerge(["flex", "justify-center", "inset-0", "w-full", "h-full", "z-overlay"], {
159
+ const cvaModalBackdrop = cva({
160
+ base: ["flex", "justify-center", "inset-0", "w-full", "h-full", "z-overlay"],
157
161
  variants: {
158
162
  contained: {
159
163
  true: ["absolute"],
@@ -391,16 +395,9 @@ const Modal = ({ children, container, dismiss, isOpen, mode, requestClose, role
391
395
  return (jsx(Portal, { root: rootElement, children: jsx(FloatingOverlay, { className: cvaModalBackdrop({ isFrontmost: depthFromFront === 0, shouldAnimate: stackSizeAtOpen === 0 }), lockScroll: true, children: cardModeInner }) }));
392
396
  };
393
397
 
394
- const cvaModalBodyContainer = cvaMerge([
395
- "flex",
396
- "flex-grow",
397
- "min-h-0",
398
- "overflow-auto",
399
- "bg-neutral-50",
400
- "flex-col",
401
- "p-4",
402
- "gap-4",
403
- ]);
398
+ const cvaModalBodyContainer = cva({
399
+ base: ["flex", "flex-grow", "min-h-0", "overflow-auto", "bg-neutral-50", "flex-col", "p-4", "gap-4"],
400
+ });
404
401
 
405
402
  /**
406
403
  * Modal body container.
@@ -444,19 +441,21 @@ const ModalBody = forwardRef(({ children, id, "data-testid": dataTestId, classNa
444
441
  return (jsx("div", { className: cvaModalBodyContainer({ className }), "data-modal-body": true, "data-testid": dataTestId, id: id, ref: ref, style: style, children: children }));
445
442
  });
446
443
 
447
- const cvaModalFooterContainer = cvaMerge([
448
- "flex",
449
- "flex-none",
450
- // flex-wrap
451
- "justify-end",
452
- "flex-row",
453
- "px-4",
454
- "pb-4",
455
- "gap-3",
456
- "bg-neutral-50",
457
- "border-neutral-200",
458
- "modal-footer",
459
- ]);
444
+ const cvaModalFooterContainer = cva({
445
+ base: [
446
+ "flex",
447
+ "flex-none",
448
+ // flex-wrap
449
+ "justify-end",
450
+ "flex-row",
451
+ "px-4",
452
+ "pb-4",
453
+ "gap-3",
454
+ "bg-neutral-50",
455
+ "border-neutral-200",
456
+ "modal-footer",
457
+ ],
458
+ });
460
459
 
461
460
  function isCustom(props) {
462
461
  return props.children !== null && props.children !== undefined;
@@ -539,10 +538,12 @@ const ModalFooter = forwardRef((props, ref) => {
539
538
  onClick: primaryAction, role: "button", type: "submit", variant: primaryVariant, children: primaryLabel })) : null] }));
540
539
  });
541
540
 
542
- const cvaContainer = cvaMerge(["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"]);
543
- const cvaHeadingContainer = cvaMerge(["flex", "flex-col", "justify-center", "gap-1"]);
544
- const cvaTitleContainer = cvaMerge(["flex", "items-center", "gap-1"]);
545
- const cvaIconContainer = cvaMerge(["flex", "place-items-center"]);
541
+ const cvaContainer = cva({
542
+ base: ["flex", "justify-between", "border-b", "border-neutral-200", "p-4", "flex-none"],
543
+ });
544
+ const cvaHeadingContainer = cva({ base: ["flex", "flex-col", "justify-center", "gap-1"] });
545
+ const cvaTitleContainer = cva({ base: ["flex", "items-center", "gap-1"] });
546
+ const cvaIconContainer = cva({ base: ["flex", "place-items-center"] });
546
547
 
547
548
  /**
548
549
  * Modal header section.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-modal",
3
- "version": "2.6.48",
3
+ "version": "2.6.50-alpha-7317206cecd.0",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -8,12 +8,12 @@
8
8
  },
9
9
  "dependencies": {
10
10
  "@floating-ui/react": "^0.26.25",
11
- "@trackunit/react-components": "2.13.0",
12
- "@trackunit/css-class-variance-utilities": "1.14.29",
13
- "@trackunit/shared-utils": "1.16.32",
11
+ "@trackunit/react-components": "2.13.2-alpha-7317206cecd.0",
12
+ "@trackunit/css-class-variance-utilities": "2.0.1-alpha-7317206cecd.0",
13
+ "@trackunit/shared-utils": "1.16.34-alpha-7317206cecd.0",
14
14
  "@floating-ui/react-dom": "2.1.2",
15
- "@trackunit/react-core-contexts-api": "1.18.41",
16
- "@trackunit/i18n-library-translation": "2.4.41"
15
+ "@trackunit/react-core-contexts-api": "1.18.43-alpha-7317206cecd.0",
16
+ "@trackunit/i18n-library-translation": "2.4.43-alpha-7317206cecd.0"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "@tanstack/react-router": "^1.114.29",
package/src/modal/Modal.variants.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import { Size } from "@trackunit/react-components";
2
2
  import { CSSProperties } from "react";
3
- export declare const cvaModalContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
3
+ export declare const cvaModalContainer: import("cva").CVAComponent<Omit<{
4
+ base: string[];
5
+ }, "defaultVariants"> & {
6
+ variants: unknown;
7
+ defaultVariants: Omit<{}, never>;
8
+ }, unknown>;
4
9
  type GetModalCardCSSVariablesOptions = Readonly<{
5
10
  /**
6
11
  * When true, width math uses container query units (`cqw`) so the card tracks
@@ -24,13 +29,93 @@ export declare const getModalCardCSSVariables: (size: Size, options?: GetModalCa
24
29
  * Sheet's scroll area. A nested overflow here would absorb content height,
25
30
  * preventing Sheet's fit-height measurement from seeing the true size.
26
31
  */
27
- export declare const cvaModalContentEnvironment: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
28
- export declare const cvaModalCard: (props?: ({
29
- animation?: "fade" | "rise" | "none" | null | undefined;
30
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
31
- export declare const cvaModalBackdrop: (props?: ({
32
- contained?: boolean | null | undefined;
33
- isFrontmost?: boolean | null | undefined;
34
- shouldAnimate?: boolean | null | undefined;
35
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
32
+ export declare const cvaModalContentEnvironment: import("cva").CVAComponent<Omit<{
33
+ base: string[];
34
+ }, "defaultVariants"> & {
35
+ variants: unknown;
36
+ defaultVariants: Omit<{}, never>;
37
+ }, unknown>;
38
+ export declare const cvaModalCard: import("cva").CVAComponent<Omit<{
39
+ base: string[];
40
+ variants: {
41
+ animation: {
42
+ fade: string;
43
+ rise: string;
44
+ none: never[];
45
+ };
46
+ };
47
+ defaultVariants: {
48
+ animation: "fade";
49
+ };
50
+ }, "defaultVariants"> & {
51
+ variants: {
52
+ animation: {
53
+ fade: string;
54
+ rise: string;
55
+ none: never[];
56
+ };
57
+ };
58
+ defaultVariants: Omit<{}, "animation"> & {
59
+ animation: "fade";
60
+ };
61
+ }, {
62
+ animation: {
63
+ fade: string;
64
+ rise: string;
65
+ none: never[];
66
+ };
67
+ }>;
68
+ export declare const cvaModalBackdrop: import("cva").CVAComponent<Omit<{
69
+ base: string[];
70
+ variants: {
71
+ contained: {
72
+ true: string[];
73
+ false: string[];
74
+ };
75
+ isFrontmost: {
76
+ true: string[];
77
+ false: string[];
78
+ };
79
+ shouldAnimate: {
80
+ true: string;
81
+ false: never[];
82
+ };
83
+ };
84
+ defaultVariants: {
85
+ isFrontmost: true;
86
+ shouldAnimate: true;
87
+ };
88
+ }, "defaultVariants"> & {
89
+ variants: {
90
+ contained: {
91
+ true: string[];
92
+ false: string[];
93
+ };
94
+ isFrontmost: {
95
+ true: string[];
96
+ false: string[];
97
+ };
98
+ shouldAnimate: {
99
+ true: string;
100
+ false: never[];
101
+ };
102
+ };
103
+ defaultVariants: Omit<{}, "isFrontmost" | "shouldAnimate"> & {
104
+ isFrontmost: true;
105
+ shouldAnimate: true;
106
+ };
107
+ }, {
108
+ contained: {
109
+ true: string[];
110
+ false: string[];
111
+ };
112
+ isFrontmost: {
113
+ true: string[];
114
+ false: string[];
115
+ };
116
+ shouldAnimate: {
117
+ true: string;
118
+ false: never[];
119
+ };
120
+ }>;
36
121
  export {};
package/src/modal/ModalBody/ModalBody.variants.d.ts CHANGED
@@ -1 +1,6 @@
1
- export declare const cvaModalBodyContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
1
+ export declare const cvaModalBodyContainer: import("cva").CVAComponent<Omit<{
2
+ base: string[];
3
+ }, "defaultVariants"> & {
4
+ variants: unknown;
5
+ defaultVariants: Omit<{}, never>;
6
+ }, unknown>;
package/src/modal/ModalFooter/ModalFooter.variants.d.ts CHANGED
@@ -1 +1,6 @@
1
- export declare const cvaModalFooterContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
1
+ export declare const cvaModalFooterContainer: import("cva").CVAComponent<Omit<{
2
+ base: string[];
3
+ }, "defaultVariants"> & {
4
+ variants: unknown;
5
+ defaultVariants: Omit<{}, never>;
6
+ }, unknown>;
package/src/modal/ModalHeader/ModalHeader.variants.d.ts CHANGED
@@ -1,4 +1,24 @@
1
- export declare const cvaContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
2
- export declare const cvaHeadingContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
3
- export declare const cvaTitleContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
4
- export declare const cvaIconContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
1
+ export declare const cvaContainer: import("cva").CVAComponent<Omit<{
2
+ base: string[];
3
+ }, "defaultVariants"> & {
4
+ variants: unknown;
5
+ defaultVariants: Omit<{}, never>;
6
+ }, unknown>;
7
+ export declare const cvaHeadingContainer: import("cva").CVAComponent<Omit<{
8
+ base: string[];
9
+ }, "defaultVariants"> & {
10
+ variants: unknown;
11
+ defaultVariants: Omit<{}, never>;
12
+ }, unknown>;
13
+ export declare const cvaTitleContainer: import("cva").CVAComponent<Omit<{
14
+ base: string[];
15
+ }, "defaultVariants"> & {
16
+ variants: unknown;
17
+ defaultVariants: Omit<{}, never>;
18
+ }, unknown>;
19
+ export declare const cvaIconContainer: import("cva").CVAComponent<Omit<{
20
+ base: string[];
21
+ }, "defaultVariants"> & {
22
+ variants: unknown;
23
+ defaultVariants: Omit<{}, never>;
24
+ }, unknown>;