phx-react 1.3.1263 → 1.3.1264

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.
@@ -1,5 +1,4 @@
1
- import type { ReactNode } from 'react';
2
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
3
2
  type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
4
3
  type DrawerSize = 'sm' | 'md' | 'lg';
5
4
  export interface PHXDrawerProps {
@@ -5,43 +5,45 @@ exports.PHXDrawer = void 0;
5
5
  var tslib_1 = require("tslib");
6
6
  var react_1 = require("@headlessui/react");
7
7
  var outline_1 = require("@heroicons/react/24/outline");
8
+ var react_2 = tslib_1.__importStar(require("react"));
8
9
  var framer_motion_1 = require("framer-motion");
9
- var react_2 = tslib_1.__importDefault(require("react"));
10
10
  var types_1 = require("../types");
11
11
  var PHXDrawer = function (_a) {
12
- var open = _a.open, onClose = _a.onClose, _b = _a.title, title = _b === void 0 ? 'Panel Title' : _b, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.width, width = _e === void 0 ? 420 : _e, _f = _a.height, height = _f === void 0 ? 320 : _f, _g = _a.showFooter, showFooter = _g === void 0 ? false : _g, onSave = _a.onSave, onCancel = _a.onCancel, children = _a.children, className = _a.className, disabled = _a.disabled, error = _a.error, errorText = _a.errorText, _h = _a.closeOutsiteClick, closeOutsiteClick = _h === void 0 ? true : _h;
13
- var variants = {
14
- right: { hidden: { x: '100%' }, visible: { x: 0 } },
15
- left: { hidden: { x: '-100%' }, visible: { x: 0 } },
16
- top: { hidden: { y: '-100%' }, visible: { y: 0 } },
17
- bottom: { hidden: { y: '100%' }, visible: { y: 0 } },
18
- };
12
+ var open = _a.open, onClose = _a.onClose, _b = _a.title, title = _b === void 0 ? 'Panel Title' : _b, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.width, width = _e === void 0 ? 420 : _e, _f = _a.height, height = _f === void 0 ? 320 : _f, showFooter = _a.showFooter, onSave = _a.onSave, onCancel = _a.onCancel, children = _a.children, className = _a.className, disabled = _a.disabled, _g = _a.closeOutsiteClick, closeOutsiteClick = _g === void 0 ? true : _g;
19
13
  var isSide = position === 'left' || position === 'right';
20
14
  var dimensionStyle = isSide ? { width: width } : { height: height };
21
15
  var sizeClass = size === 'sm' ? 'p-3 text-sm' : size === 'lg' ? 'p-6 text-base' : 'p-4 text-sm';
22
- return (react_2.default.createElement(react_1.Dialog, { open: open, onClose: function () {
23
- if (disabled)
24
- return;
25
- if (closeOutsiteClick)
26
- onClose(false);
27
- }, className: 'relative z-50' },
28
- react_2.default.createElement("div", { className: 'fixed inset-0 bg-black/35', "aria-hidden": 'true', onClick: function () {
29
- if (closeOutsiteClick && !disabled)
16
+ return (react_2.default.createElement(react_1.Transition.Root, { as: react_2.Fragment, show: open },
17
+ react_2.default.createElement(react_1.Dialog, { as: 'div', className: 'relative z-50', static: true, onClose: function () {
18
+ if (!disabled && closeOutsiteClick)
30
19
  onClose(false);
31
- } }),
32
- react_2.default.createElement("div", { className: 'fixed inset-0 overflow-hidden' },
33
- react_2.default.createElement("div", { className: 'absolute inset-0 overflow-hidden' },
34
- react_2.default.createElement("div", { className: (0, types_1.classNames)('pointer-events-none fixed flex', isSide ? 'inset-y-0 max-h-full' : 'inset-x-0 max-w-full justify-center', position === 'right' && 'right-0 pl-16', position === 'left' && 'left-0 pr-16', position === 'top' && 'top-0 pb-16', position === 'bottom' && 'bottom-0 pt-16') },
35
- react_2.default.createElement(framer_motion_1.motion.div, { initial: 'hidden', animate: open ? 'visible' : 'hidden', transition: { type: 'tween', duration: 0.35 }, variants: variants[position], style: dimensionStyle, className: (0, types_1.classNames)('pointer-events-auto bg-white shadow-xl flex flex-col', isSide ? 'h-screen' : 'w-screen', disabled && 'opacity-50 cursor-not-allowed', className) },
36
- react_2.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-between border-b border-gray-200', sizeClass) },
37
- react_2.default.createElement(react_1.Dialog.Title, { className: 'font-semibold text-gray-900 text-sm' }, title),
38
- !disabled && (react_2.default.createElement("button", { type: 'button', onClick: function () { return onClose(false); }, "aria-label": 'Close', className: 'rounded-md text-gray-400 hover:text-gray-600' },
39
- react_2.default.createElement(outline_1.XMarkIcon, { className: 'h-6 w-6' })))),
40
- react_2.default.createElement("div", { className: (0, types_1.classNames)('flex-1 overflow-y-auto text-xs text-gray-500', sizeClass) }, children),
41
- showFooter && (react_2.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50', sizeClass) },
42
- react_2.default.createElement("button", { onClick: onCancel !== null && onCancel !== void 0 ? onCancel : (function () { return onClose(false); }), disabled: disabled, className: (0, types_1.classNames)('px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 text-gray-800', disabled && 'opacity-50 cursor-not-allowed') }, "Cancel"),
43
- react_2.default.createElement("button", { onClick: onSave, disabled: disabled, className: (0, types_1.classNames)('px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white', disabled && 'opacity-50 cursor-not-allowed') }, "Save"))),
44
- error && errorText && (react_2.default.createElement("div", { className: 'text-red-700 px-4 py-2 text-sm border-t border-red-300 bg-red-50' }, errorText))))))));
20
+ } },
21
+ react_2.default.createElement(react_1.Transition.Child, { as: react_2.Fragment, enter: 'ease-out duration-200', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'ease-in duration-150', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
22
+ react_2.default.createElement("div", { className: 'fixed inset-0 bg-black/40' })),
23
+ react_2.default.createElement("div", { className: 'fixed inset-0 overflow-hidden' },
24
+ react_2.default.createElement("div", { className: (0, types_1.classNames)('absolute flex pointer-events-none', isSide ? 'inset-y-0' : 'inset-x-0 justify-center', position === 'right' && 'right-0', position === 'left' && 'left-0', position === 'top' && 'top-0', position === 'bottom' && 'bottom-0') },
25
+ react_2.default.createElement(react_1.Transition.Child, { as: react_2.Fragment, enter: 'transform transition ease-out duration-300', enterFrom: position === 'right'
26
+ ? 'translate-x-full'
27
+ : position === 'left'
28
+ ? '-translate-x-full'
29
+ : position === 'top'
30
+ ? '-translate-y-full'
31
+ : 'translate-y-full', enterTo: 'translate-x-0 translate-y-0', leave: 'transform transition ease-in duration-200', leaveFrom: 'translate-x-0 translate-y-0', leaveTo: position === 'right'
32
+ ? 'translate-x-full'
33
+ : position === 'left'
34
+ ? '-translate-x-full'
35
+ : position === 'top'
36
+ ? '-translate-y-full'
37
+ : 'translate-y-full' },
38
+ react_2.default.createElement(react_1.Dialog.Panel, { as: framer_motion_1.motion.div, style: dimensionStyle, className: (0, types_1.classNames)('pointer-events-auto bg-white shadow-xl flex flex-col', isSide ? 'h-screen' : 'w-screen', className) },
39
+ react_2.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-between border-b border-gray-200', sizeClass) },
40
+ react_2.default.createElement(react_1.Dialog.Title, { className: 'font-semibold text-gray-900 text-sm' }, title),
41
+ !disabled && (react_2.default.createElement("button", { className: 'rounded-md text-gray-400 hover:text-gray-600', onClick: function () { return onClose(false); } },
42
+ react_2.default.createElement(outline_1.XMarkIcon, { className: 'w-6 h-6' })))),
43
+ react_2.default.createElement("div", { className: (0, types_1.classNames)('flex-1 overflow-y-auto text-xs text-gray-500', sizeClass) }, children),
44
+ showFooter && (react_2.default.createElement("div", { className: (0, types_1.classNames)('flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50', sizeClass) },
45
+ react_2.default.createElement("button", { disabled: disabled, onClick: onCancel !== null && onCancel !== void 0 ? onCancel : (function () { return onClose(false); }), className: 'px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300' }, "Cancel"),
46
+ react_2.default.createElement("button", { disabled: disabled, onClick: onSave, className: 'px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white' }, "Save"))))))))));
45
47
  };
46
48
  exports.PHXDrawer = PHXDrawer;
47
49
  //# sourceMappingURL=Drawer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
@@ -1,5 +1,4 @@
1
- import type { ReactNode } from 'react';
2
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
3
2
  type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
4
3
  type DrawerSize = 'sm' | 'md' | 'lg';
5
4
  export interface PHXDrawerProps {
@@ -1,42 +1,44 @@
1
1
  'use client';
2
- import { Dialog } from '@headlessui/react';
2
+ import { Dialog, Transition } from '@headlessui/react';
3
3
  import { XMarkIcon } from '@heroicons/react/24/outline';
4
+ import React, { Fragment } from 'react';
4
5
  import { motion } from 'framer-motion';
5
- import React from 'react';
6
6
  import { classNames } from '../types';
7
7
  export var PHXDrawer = function (_a) {
8
- var open = _a.open, onClose = _a.onClose, _b = _a.title, title = _b === void 0 ? 'Panel Title' : _b, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.width, width = _e === void 0 ? 420 : _e, _f = _a.height, height = _f === void 0 ? 320 : _f, _g = _a.showFooter, showFooter = _g === void 0 ? false : _g, onSave = _a.onSave, onCancel = _a.onCancel, children = _a.children, className = _a.className, disabled = _a.disabled, error = _a.error, errorText = _a.errorText, _h = _a.closeOutsiteClick, closeOutsiteClick = _h === void 0 ? true : _h;
9
- var variants = {
10
- right: { hidden: { x: '100%' }, visible: { x: 0 } },
11
- left: { hidden: { x: '-100%' }, visible: { x: 0 } },
12
- top: { hidden: { y: '-100%' }, visible: { y: 0 } },
13
- bottom: { hidden: { y: '100%' }, visible: { y: 0 } },
14
- };
8
+ var open = _a.open, onClose = _a.onClose, _b = _a.title, title = _b === void 0 ? 'Panel Title' : _b, _c = _a.position, position = _c === void 0 ? 'right' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.width, width = _e === void 0 ? 420 : _e, _f = _a.height, height = _f === void 0 ? 320 : _f, showFooter = _a.showFooter, onSave = _a.onSave, onCancel = _a.onCancel, children = _a.children, className = _a.className, disabled = _a.disabled, _g = _a.closeOutsiteClick, closeOutsiteClick = _g === void 0 ? true : _g;
15
9
  var isSide = position === 'left' || position === 'right';
16
10
  var dimensionStyle = isSide ? { width: width } : { height: height };
17
11
  var sizeClass = size === 'sm' ? 'p-3 text-sm' : size === 'lg' ? 'p-6 text-base' : 'p-4 text-sm';
18
- return (React.createElement(Dialog, { open: open, onClose: function () {
19
- if (disabled)
20
- return;
21
- if (closeOutsiteClick)
22
- onClose(false);
23
- }, className: 'relative z-50' },
24
- React.createElement("div", { className: 'fixed inset-0 bg-black/35', "aria-hidden": 'true', onClick: function () {
25
- if (closeOutsiteClick && !disabled)
12
+ return (React.createElement(Transition.Root, { as: Fragment, show: open },
13
+ React.createElement(Dialog, { as: 'div', className: 'relative z-50', static: true, onClose: function () {
14
+ if (!disabled && closeOutsiteClick)
26
15
  onClose(false);
27
- } }),
28
- React.createElement("div", { className: 'fixed inset-0 overflow-hidden' },
29
- React.createElement("div", { className: 'absolute inset-0 overflow-hidden' },
30
- React.createElement("div", { className: classNames('pointer-events-none fixed flex', isSide ? 'inset-y-0 max-h-full' : 'inset-x-0 max-w-full justify-center', position === 'right' && 'right-0 pl-16', position === 'left' && 'left-0 pr-16', position === 'top' && 'top-0 pb-16', position === 'bottom' && 'bottom-0 pt-16') },
31
- React.createElement(motion.div, { initial: 'hidden', animate: open ? 'visible' : 'hidden', transition: { type: 'tween', duration: 0.35 }, variants: variants[position], style: dimensionStyle, className: classNames('pointer-events-auto bg-white shadow-xl flex flex-col', isSide ? 'h-screen' : 'w-screen', disabled && 'opacity-50 cursor-not-allowed', className) },
32
- React.createElement("div", { className: classNames('flex items-center justify-between border-b border-gray-200', sizeClass) },
33
- React.createElement(Dialog.Title, { className: 'font-semibold text-gray-900 text-sm' }, title),
34
- !disabled && (React.createElement("button", { type: 'button', onClick: function () { return onClose(false); }, "aria-label": 'Close', className: 'rounded-md text-gray-400 hover:text-gray-600' },
35
- React.createElement(XMarkIcon, { className: 'h-6 w-6' })))),
36
- React.createElement("div", { className: classNames('flex-1 overflow-y-auto text-xs text-gray-500', sizeClass) }, children),
37
- showFooter && (React.createElement("div", { className: classNames('flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50', sizeClass) },
38
- React.createElement("button", { onClick: onCancel !== null && onCancel !== void 0 ? onCancel : (function () { return onClose(false); }), disabled: disabled, className: classNames('px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300 text-gray-800', disabled && 'opacity-50 cursor-not-allowed') }, "Cancel"),
39
- React.createElement("button", { onClick: onSave, disabled: disabled, className: classNames('px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white', disabled && 'opacity-50 cursor-not-allowed') }, "Save"))),
40
- error && errorText && (React.createElement("div", { className: 'text-red-700 px-4 py-2 text-sm border-t border-red-300 bg-red-50' }, errorText))))))));
16
+ } },
17
+ React.createElement(Transition.Child, { as: Fragment, enter: 'ease-out duration-200', enterFrom: 'opacity-0', enterTo: 'opacity-100', leave: 'ease-in duration-150', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
18
+ React.createElement("div", { className: 'fixed inset-0 bg-black/40' })),
19
+ React.createElement("div", { className: 'fixed inset-0 overflow-hidden' },
20
+ React.createElement("div", { className: classNames('absolute flex pointer-events-none', isSide ? 'inset-y-0' : 'inset-x-0 justify-center', position === 'right' && 'right-0', position === 'left' && 'left-0', position === 'top' && 'top-0', position === 'bottom' && 'bottom-0') },
21
+ React.createElement(Transition.Child, { as: Fragment, enter: 'transform transition ease-out duration-300', enterFrom: position === 'right'
22
+ ? 'translate-x-full'
23
+ : position === 'left'
24
+ ? '-translate-x-full'
25
+ : position === 'top'
26
+ ? '-translate-y-full'
27
+ : 'translate-y-full', enterTo: 'translate-x-0 translate-y-0', leave: 'transform transition ease-in duration-200', leaveFrom: 'translate-x-0 translate-y-0', leaveTo: position === 'right'
28
+ ? 'translate-x-full'
29
+ : position === 'left'
30
+ ? '-translate-x-full'
31
+ : position === 'top'
32
+ ? '-translate-y-full'
33
+ : 'translate-y-full' },
34
+ React.createElement(Dialog.Panel, { as: motion.div, style: dimensionStyle, className: classNames('pointer-events-auto bg-white shadow-xl flex flex-col', isSide ? 'h-screen' : 'w-screen', className) },
35
+ React.createElement("div", { className: classNames('flex items-center justify-between border-b border-gray-200', sizeClass) },
36
+ React.createElement(Dialog.Title, { className: 'font-semibold text-gray-900 text-sm' }, title),
37
+ !disabled && (React.createElement("button", { className: 'rounded-md text-gray-400 hover:text-gray-600', onClick: function () { return onClose(false); } },
38
+ React.createElement(XMarkIcon, { className: 'w-6 h-6' })))),
39
+ React.createElement("div", { className: classNames('flex-1 overflow-y-auto text-xs text-gray-500', sizeClass) }, children),
40
+ showFooter && (React.createElement("div", { className: classNames('flex items-center justify-end gap-3 border-t border-gray-200 bg-gray-50', sizeClass) },
41
+ React.createElement("button", { disabled: disabled, onClick: onCancel !== null && onCancel !== void 0 ? onCancel : (function () { return onClose(false); }), className: 'px-4 py-2 rounded-md bg-gray-200 hover:bg-gray-300' }, "Cancel"),
42
+ React.createElement("button", { disabled: disabled, onClick: onSave, className: 'px-4 py-2 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white' }, "Save"))))))))));
41
43
  };
42
44
  //# sourceMappingURL=Drawer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "phx-react",
3
- "version": "1.3.1263",
3
+ "version": "1.3.1264",
4
4
  "description": "PHX REACT",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",