phx-react 1.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Igor Gaponov (gapon2401)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+## Installation:
+
+```bash
+npm install phx-react-components --save-dev
+```
+
+or
+
+```bash
+yarn add -D phx-react-components
+```

package/dist/cjs/commons/IconLoading.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface IconLoadingProps {
+    color?: 'bg-gray-50' | 'text-white' | 'text-red-50' | 'bg-transparent';
+}
+export declare const IconLoading: ({ color }: IconLoadingProps) => JSX.Element;

package/dist/cjs/commons/IconLoading.js

@@ -0,0 +1,20 @@
+"use strict";
+exports.__esModule = true;
+exports.IconLoading = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var IconLoading = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'text-white' : _b;
+    function classNames() {
+        var classes = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            classes[_i] = arguments[_i];
+        }
+        return classes.filter(Boolean).join(' ');
+    }
+    return (react_1["default"].createElement("svg", { className: classNames('animate-spin -ml-1 mr-3 h-5 w-5', color), xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24' },
+        react_1["default"].createElement("circle", { className: 'opacity-25', cx: '12', cy: '12', r: '10', stroke: 'currentColor', strokeWidth: '4' }),
+        react_1["default"].createElement("path", { className: 'opacity-75', fill: 'currentColor', d: 'M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z' })));
+};
+exports.IconLoading = IconLoading;
+//# sourceMappingURL=IconLoading.js.map

package/dist/cjs/commons/IconLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconLoading.js","sourceRoot":"","sources":["../../../src/commons/IconLoading.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AAMlB,IAAM,WAAW,GAAG,UAAC,EAA0C;QAAxC,aAAoB,EAApB,KAAK,mBAAG,YAAY,KAAA;IAChD,SAAS,UAAU;QAAC,iBAAoB;aAApB,UAAoB,EAApB,qBAAoB,EAApB,IAAoB;YAApB,4BAAoB;;QACtC,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC1C,CAAC;IAED,OAAO,CACL,0CACE,SAAS,EAAE,UAAU,CAAC,iCAAiC,EAAE,KAAK,CAAC,EAC/D,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW;QAEnB,6CAAQ,SAAS,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,GAAU;QACrG,2CACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GAC7G,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,WAAW,eAoBvB"}

package/dist/cjs/components/App.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const MyCounter: () => JSX.Element;
+export default MyCounter;

package/dist/cjs/components/App.js

@@ -0,0 +1,69 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var solid_1 = require("@heroicons/react/20/solid");
+var react_2 = require("@headlessui/react");
+var moods = [
+    { name: 'Excited', value: 'excited', icon: solid_1.FireIcon, iconColor: 'text-white', bgColor: 'bg-red-500' },
+    { name: 'Loved', value: 'loved', icon: solid_1.HeartIcon, iconColor: 'text-white', bgColor: 'bg-pink-400' },
+    { name: 'Happy', value: 'happy', icon: solid_1.FaceSmileIcon, iconColor: 'text-white', bgColor: 'bg-green-400' },
+    { name: 'Sad', value: 'sad', icon: solid_1.FaceFrownIcon, iconColor: 'text-white', bgColor: 'bg-yellow-400' },
+    { name: 'Thumbsy', value: 'thumbsy', icon: solid_1.HandThumbUpIcon, iconColor: 'text-white', bgColor: 'bg-blue-500' },
+    { name: 'I feel nothing', value: null, icon: solid_1.XMarkIcon, iconColor: 'text-gray-400', bgColor: 'bg-transparent' },
+];
+function classNames() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+}
+var MyCounter = function () {
+    var _a = (0, react_1.useState)(moods[5]), selected = _a[0], setSelected = _a[1];
+    return (react_1["default"].createElement("div", null,
+        react_1["default"].createElement("div", { className: 'flex items-start space-x-4' },
+            react_1["default"].createElement("div", { className: 'flex-shrink-0' },
+                react_1["default"].createElement("img", { className: 'inline-block h-10 w-10 rounded-full', src: 'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', alt: '' })),
+            react_1["default"].createElement("div", { className: 'min-w-0 flex-1' },
+                react_1["default"].createElement("form", { action: '#', className: 'relative' },
+                    react_1["default"].createElement("div", { className: 'overflow-hidden rounded-lg shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600' },
+                        react_1["default"].createElement("label", { htmlFor: 'comment', className: 'sr-only' }, "Add your comment"),
+                        react_1["default"].createElement("textarea", { rows: 3, name: 'comment', id: 'comment', className: 'block w-full resize-none border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6', placeholder: 'Add your comment...', defaultValue: '' }),
+                        react_1["default"].createElement("div", { className: 'py-2', "aria-hidden": 'true' },
+                            react_1["default"].createElement("div", { className: 'py-px' },
+                                react_1["default"].createElement("div", { className: 'h-9' })))),
+                    react_1["default"].createElement("div", { className: 'absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2' },
+                        react_1["default"].createElement("div", { className: 'flex items-center space-x-5' },
+                            react_1["default"].createElement("div", { className: 'flex items-center' },
+                                react_1["default"].createElement("button", { type: 'button', className: '-m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500' },
+                                    react_1["default"].createElement(solid_1.PaperClipIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }),
+                                    react_1["default"].createElement("span", { className: 'sr-only' }, "Attach a file"))),
+                            react_1["default"].createElement("div", { className: 'flex items-center' },
+                                react_1["default"].createElement(react_2.Listbox, { value: selected, onChange: setSelected }, function (_a) {
+                                    var open = _a.open;
+                                    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+                                        react_1["default"].createElement(react_2.Listbox.Label, { className: 'sr-only' }, "Your mood"),
+                                        react_1["default"].createElement("div", { className: 'relative' },
+                                            react_1["default"].createElement(react_2.Listbox.Button, { className: 'relative -m-2.5 flex h-10 w-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500' },
+                                                react_1["default"].createElement("span", { className: 'flex items-center justify-center' }, selected.value === null ? (react_1["default"].createElement("span", null,
+                                                    react_1["default"].createElement(solid_1.FaceSmileIcon, { className: 'h-5 w-5 flex-shrink-0', "aria-hidden": 'true' }),
+                                                    react_1["default"].createElement("span", { className: 'sr-only' }, "Add your mood"))) : (react_1["default"].createElement("span", null,
+                                                    react_1["default"].createElement("span", { className: classNames(selected.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
+                                                        react_1["default"].createElement(selected.icon, { className: 'h-5 w-5 flex-shrink-0 text-white', "aria-hidden": 'true' })),
+                                                    react_1["default"].createElement("span", { className: 'sr-only' }, selected.name))))),
+                                            react_1["default"].createElement(react_2.Transition, { show: open, as: react_1.Fragment, leave: 'transition ease-in duration-100', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
+                                                react_1["default"].createElement(react_2.Listbox.Options, { className: 'absolute z-10 -ml-6 mt-1 w-60 rounded-lg bg-white py-3 text-base shadow ring-1 ring-black ring-opacity-5 focus:outline-none sm:ml-auto sm:w-64 sm:text-sm' }, moods.map(function (mood) { return (react_1["default"].createElement(react_2.Listbox.Option, { key: mood.value, className: function (_a) {
+                                                        var active = _a.active;
+                                                        return classNames(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none px-3 py-2');
+                                                    }, value: mood },
+                                                    react_1["default"].createElement("div", { className: 'flex items-center' },
+                                                        react_1["default"].createElement("div", { className: classNames(mood.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
+                                                            react_1["default"].createElement(mood.icon, { className: classNames(mood.iconColor, 'h-5 w-5 flex-shrink-0'), "aria-hidden": 'true' })),
+                                                        react_1["default"].createElement("span", { className: 'ml-3 block truncate font-medium' }, mood.name)))); }))))));
+                                }))),
+                        react_1["default"].createElement("div", { className: 'flex-shrink-0' },
+                            react_1["default"].createElement("button", { type: 'submit', className: 'inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600' }, "Post"))))))));
+};
+exports["default"] = MyCounter;
+//# sourceMappingURL=App.js.map

package/dist/cjs/components/App.js.map

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

package/dist/cjs/components/Button/Button.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import * as SolidIcons from '@heroicons/react/24/solid';
+import * as OutlineIcons from '@heroicons/react/24/outline';
+import { BaseButton } from '../types';
+export declare type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
+export interface ButtonProps extends BaseButton {
+    primary?: boolean;
+    secondary?: boolean;
+    danger?: boolean;
+    danger2?: boolean;
+    soft?: boolean;
+    rounded?: boolean;
+    size?: 'micro' | 'small' | 'medium' | 'large' | 'extra-large';
+    children?: string | string[];
+    icon?: IconName;
+    iconClassName?: string;
+    iconOutline?: boolean;
+    iconPosition?: 'before' | 'after';
+}
+export declare const PHXButton: ({ primary, secondary, danger, danger2, soft, rounded, submit, size, children, icon, iconClassName, iconOutline, iconPosition, disabled, loading, id, onClick, className, }: ButtonProps) => JSX.Element;

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,43 @@
+"use strict";
+exports.__esModule = true;
+exports.PHXButton = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var SolidIcons = tslib_1.__importStar(require("@heroicons/react/24/solid"));
+var OutlineIcons = tslib_1.__importStar(require("@heroicons/react/24/outline"));
+var IconLoading_1 = require("../../commons/IconLoading");
+var types_1 = require("../types");
+var use_disable_interaction_1 = require("../../utils/use-disable-interaction");
+var PHXButton = function (_a) {
+    var primary = _a.primary, secondary = _a.secondary, danger = _a.danger, danger2 = _a.danger2, soft = _a.soft, rounded = _a.rounded, submit = _a.submit, _b = _a.size, size = _b === void 0 ? 'medium' : _b, children = _a.children, icon = _a.icon, iconClassName = _a.iconClassName, _c = _a.iconOutline, iconOutline = _c === void 0 ? false : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'before' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, id = _a.id, onClick = _a.onClick, className = _a.className;
+    var Icon;
+    if (icon) {
+        Icon = iconOutline ? OutlineIcons[icon] : SolidIcons[icon];
+    }
+    var commonProps = {
+        id: id,
+        onClick: onClick
+    };
+    var interactiveProps = tslib_1.__assign({}, commonProps);
+    var handleClick = (0, use_disable_interaction_1.useDisableClick)(disabled, onClick);
+    var binClassNames = (0, types_1.classNames)(primary &&
+        'bg-indigo-800 font-normal text-white shadow-sm hover:bg-indigo-900 hover:text-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 active:text-gray-400 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] active:bg-indigo-900', secondary &&
+        'bg-white font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 active:bg-gray-200 active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', danger &&
+        'bg-red-600 font-normal text-white shadow-sm hover:bg-red-700 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]', danger2 &&
+        'font-normal text-red-600 shadow-sm ring-1 ring-inset ring-red-600 hover:bg-red-100 active:bg-red-200 active:shadow-[0rem_0.125rem_0rem_0rem_#e73737_inset]', rounded && 'rounded-full', soft && 'bg-indigo-50 font-normal text-indigo-600 shadow-sm hover:bg-indigo-100', size === 'micro' && "px-2 py-1 text-xs rounded-lg active:pt-[0.35rem] active:pb-[0.2rem]", size === 'small' && "px-2.5 py-1.5 text-xs rounded-lg active:pt-[0.45rem] active:pb-[0.3rem]", size === 'medium' && "px-2.5 py-1.5 text-sm rounded-lg active:pt-[0.45rem] active:pb-[0.3rem]", size === 'large' && "px-3 py-2 text-sm rounded-lg active:pt-[0.55rem] active:pb-[0.45rem]", size === 'extra-large' && "px-3.5 py-2.5 text-sm rounded-lg active:pt-[0.7rem] active:pb-[0.55rem]", icon && (size === 'medium' || size === 'large') && 'inline-flex items-center gap-x-1.5', icon && size === 'extra-large' && 'inline-flex items-center gap-x-2', loading && 'opacity-30', 'relative', className);
+    var iconClass = (0, types_1.classNames)(icon && iconPosition === 'before' && '-ml-0.5 h-5 w-5', icon && iconPosition === 'after' && '-mr-0.5 h-5 w-5', iconClassName);
+    // Icon markup
+    var iconMarkup = Icon && react_1["default"].createElement(Icon, { className: iconClass });
+    // Loading markup
+    var loadingMarkup = loading ? (react_1["default"].createElement("span", { className: 'w-3 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2' },
+        react_1["default"].createElement(IconLoading_1.IconLoading, { color: primary ? 'text-white' : danger ? 'text-red-50' : 'bg-transparent' }))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
+    var buttonMarkup = (react_1["default"].createElement("button", tslib_1.__assign({}, interactiveProps, { type: submit ? 'submit' : 'button', onClick: handleClick, className: binClassNames }),
+        react_1["default"].createElement(react_1["default"].Fragment, null,
+            loadingMarkup,
+            iconPosition === 'before' ? iconMarkup : react_1["default"].createElement(react_1["default"].Fragment, null),
+            react_1["default"].createElement("span", { className: loading ? 'invisible' : '' }, children),
+            iconPosition === 'after' ? iconMarkup : react_1["default"].createElement(react_1["default"].Fragment, null))));
+    return react_1["default"].createElement(react_1["default"].Fragment, null, buttonMarkup);
+};
+exports.PHXButton = PHXButton;
+//# sourceMappingURL=Button.js.map

package/dist/cjs/components/Button/Button.js.map

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

package/dist/cjs/components/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/cjs/components/Button/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Button"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Button/index.ts"],"names":[],"mappings":";;;AAAA,mDAAwB"}

package/dist/cjs/components/Card/Card.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import Section from './Section';
+import WrapSection from './WrapSection';
+import Footer from './Footer';
+import { ComplexAction } from '../types';
+export interface CardProps {
+    title?: string;
+    children?: React.ReactNode;
+    primaryFooterAction?: ComplexAction;
+    primaryHeader?: boolean;
+    secondaryFooterActions?: ComplexAction[];
+}
+export declare const PHXCard: React.FunctionComponent<CardProps> & {
+    Section: typeof Section;
+    WrapSection: typeof WrapSection;
+    Footer: typeof Footer;
+};

package/dist/cjs/components/Card/Card.js

@@ -0,0 +1,28 @@
+"use strict";
+exports.__esModule = true;
+exports.PHXCard = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Section_1 = tslib_1.__importDefault(require("./Section"));
+var WrapSection_1 = tslib_1.__importDefault(require("./WrapSection"));
+var Footer_1 = tslib_1.__importDefault(require("./Footer"));
+var Button_1 = require("../Button");
+var PHXCard = function Card(_a) {
+    var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, secondaryFooterActions = _a.secondaryFooterActions;
+    var footerActionMarkup = primaryFooterAction || secondaryFooterActions ? (react_1["default"].createElement("div", { className: 'bg-gray-50 px-4 py-4 sm:px-6 flex justify-end gap-x-3' },
+        secondaryFooterActions && secondaryFooterActions.length === 1 && secondaryFooterActions[0].content && (react_1["default"].createElement(Button_1.PHXButton, { secondary: true, size: 'small', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
+        primaryFooterAction && primaryFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'small', onClick: primaryFooterAction.onClick }, primaryFooterAction.content)))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
+    var headerActionMarkup = primaryHeader ? (react_1["default"].createElement("div", { className: 'px-4 py-5 sm:px-6' },
+        react_1["default"].createElement("h3", { className: 'text-base font-semibold leading-6 text-gray-900' }, title))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
+    return (react_1["default"].createElement("div", { className: 'w-full' },
+        react_1["default"].createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
+            react_1["default"].createElement("div", { className: 'divide-y divide-gray-200 overflow-hidden shadow-[0rem_0.0825rem_0rem_#00000012] rounded-lg bg-white border border-gray-200' },
+                headerActionMarkup,
+                react_1["default"].createElement("div", { className: 'px-4 py-5 sm:p-6' }, children),
+                footerActionMarkup))));
+};
+exports.PHXCard = PHXCard;
+exports.PHXCard.Section = Section_1["default"];
+exports.PHXCard.WrapSection = WrapSection_1["default"];
+exports.PHXCard.Footer = Footer_1["default"];
+//# sourceMappingURL=Card.js.map

package/dist/cjs/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,8DAA+B;AAC/B,sEAAuC;AACvC,4DAA6B;AAE7B,oCAAqC;AAU9B,IAAM,OAAO,GAIhB,SAAS,IAAI,CAAC,EAA0F;QAAxF,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,mBAAmB,yBAAA,EAAE,aAAa,mBAAA,EAAE,sBAAsB,4BAAA;IAC7F,IAAM,kBAAkB,GACtB,mBAAmB,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAC9C,0CAAK,SAAS,EAAC,uDAAuD;QAEnE,sBAAsB,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CACrG,iCAAC,kBAAS,IAAC,SAAS,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IACzE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CACxB,CACb;QAGA,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,IAAI,CACrD,iCAAC,kBAAS,IACR,OAAO,QACP,MAAM,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACjD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,mBAAmB,CAAC,OAAO,IAEnC,mBAAmB,CAAC,OAAO,CAClB,CACb,CACG,CACP,CAAC,CAAC,CAAC,CACF,mEAAK,CACN,CAAA;IAEH,IAAM,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC,CACzC,0CAAK,SAAS,EAAC,mBAAmB;QAChC,yCAAI,SAAS,EAAC,iDAAiD,IAAE,KAAK,CAAM,CACxE,CACP,CAAC,CAAC,CAAC,CACF,mEAAK,CACN,CAAA;IAED,OAAO,CACL,0CAAK,SAAS,EAAC,QAAQ;QACrB,0CAAK,SAAS,EAAC,sCAAsC;YACnD,0CAAK,SAAS,EAAC,4HAA4H;gBACxI,kBAAkB;gBACnB,0CAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;gBACjD,kBAAkB,CACf,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAlDY,QAAA,OAAO,WAkDnB;AAED,eAAO,CAAC,OAAO,GAAG,oBAAO,CAAA;AACzB,eAAO,CAAC,WAAW,GAAG,wBAAW,CAAA;AACjC,eAAO,CAAC,MAAM,GAAG,mBAAM,CAAA"}

package/dist/cjs/components/Card/Footer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Footer: ({ children }: any) => JSX.Element;
+export default Footer;

package/dist/cjs/components/Card/Footer.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Footer = function (_a) {
+    var children = _a.children;
+    return (react_1["default"].createElement("div", { className: 'bg-gray-50 px-4 py-4 sm:px-6 flex justify-end' },
+        react_1["default"].createElement("button", { type: 'button', className: 'rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600' }, children)));
+};
+exports["default"] = Footer;
+//# sourceMappingURL=Footer.js.map

package/dist/cjs/components/Card/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../../src/components/Card/Footer.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,MAAM,GAAG,UAAC,EAAiB;QAAf,QAAQ,cAAA;IACxB,OAAO,CACL,0CAAK,SAAS,EAAC,+CAA+C;QAC5D,6CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qNAAqN,IAE9N,QAAQ,CACF,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,qBAAe,MAAM,CAAA"}

package/dist/cjs/components/Card/Section.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CardSectionProps {
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const Section: ({ title, subTitle, children }: CardSectionProps) => JSX.Element;
+export default Section;

package/dist/cjs/components/Card/Section.js

@@ -0,0 +1,16 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Section = function (_a) {
+    var title = _a.title, subTitle = _a.subTitle, children = _a.children;
+    var titleMarker = (title || subTitle) && (react_1["default"].createElement("div", { className: 'mb-5' },
+        title && react_1["default"].createElement("h3", { className: 'text-base font-semibold leading-6 text-gray-900' }, title),
+        subTitle && title && react_1["default"].createElement("p", { className: 'mt-1 text-sm text-slate-500' }, subTitle),
+        subTitle && !title && react_1["default"].createElement("p", { className: 'text-sm text-slate-500' }, subTitle)));
+    return (react_1["default"].createElement("div", { className: 'py-5' },
+        titleMarker,
+        children));
+};
+exports["default"] = Section;
+//# sourceMappingURL=Section.js.map

package/dist/cjs/components/Card/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/components/Card/Section.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAQzB,IAAM,OAAO,GAAG,UAAC,EAA+C;QAA7C,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAC1C,IAAM,WAAW,GAAG,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CACzC,0CAAK,SAAS,EAAC,MAAM;QAClB,KAAK,IAAI,yCAAI,SAAS,EAAC,iDAAiD,IAAE,KAAK,CAAM;QAErF,QAAQ,IAAI,KAAK,IAAI,wCAAG,SAAS,EAAC,6BAA6B,IAAE,QAAQ,CAAK;QAE9E,QAAQ,IAAI,CAAC,KAAK,IAAI,wCAAG,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAK,CACvE,CACP,CAAA;IAED,OAAO,CACL,0CAAK,SAAS,EAAC,MAAM;QAClB,WAAW;QACX,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,qBAAe,OAAO,CAAA"}

package/dist/cjs/components/Card/WrapSection.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const WrapSection: ({ children }: any) => JSX.Element;
+export default WrapSection;

package/dist/cjs/components/Card/WrapSection.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var WrapSection = function (_a) {
+    var children = _a.children;
+    return react_1["default"].createElement("div", { className: 'divide-y divide-gray-200' }, children);
+};
+exports["default"] = WrapSection;
+//# sourceMappingURL=WrapSection.js.map

package/dist/cjs/components/Card/WrapSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapSection.js","sourceRoot":"","sources":["../../../../src/components/Card/WrapSection.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,WAAW,GAAG,UAAC,EAAiB;QAAf,QAAQ,cAAA;IAC7B,OAAO,0CAAK,SAAS,EAAC,0BAA0B,IAAE,QAAQ,CAAO,CAAA;AACnE,CAAC,CAAA;AAED,qBAAe,WAAW,CAAA"}

package/dist/cjs/components/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './Card';

package/dist/cjs/components/Card/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Card"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Card/index.ts"],"names":[],"mappings":";;;AAAA,iDAAsB"}

package/dist/cjs/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import React, { InputHTMLAttributes } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+    children?: any;
+    id?: any;
+    label?: string;
+    title?: string;
+    helpText?: string;
+    expanded?: boolean;
+    register?: UseFormRegisterReturn;
+    onChange?: any;
+}
+export declare const PHXCheckbox: React.FC<CheckboxProps>;

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+"use strict";
+exports.__esModule = true;
+exports.PHXCheckbox = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var PHXCheckbox = function (_a) {
+    var children = _a.children, className = _a.className, id = _a.id, _b = _a.expanded, expanded = _b === void 0 ? true : _b, helpText = _a.helpText, label = _a.label, title = _a.title, register = _a.register, onChange = _a.onChange, rest = tslib_1.__rest(_a, ["children", "className", "id", "expanded", "helpText", "label", "title", "register", "onChange"]);
+    var _c = (0, react_1.useState)(false), show = _c[0], setShow = _c[1];
+    var handleChange = function (e) {
+        setShow(e.target.checked);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (react_1["default"].createElement("div", { className: className },
+        label && react_1["default"].createElement("label", { className: 'block text-xs font-normal text-gray-700' }, label),
+        react_1["default"].createElement("div", { className: 'py-1 flex items-center' },
+            react_1["default"].createElement("input", tslib_1.__assign({}, rest, register, { id: id, className: 'block h-4 w-4 rounded border border-gray-500 text-indigo-800 hover:cursor-pointer hover:bg-gray-100 focus:ring-transparent', onChange: handleChange, type: 'checkbox' })),
+            react_1["default"].createElement("label", { htmlFor: id, className: 'ml-2 leading-5 block text-xs font-normal text-gray-700 hover:cursor-pointer' }, title)),
+        helpText && expanded && show ? react_1["default"].createElement("div", { className: 'pl-7 text-xs font-light text-gray-400' }, helpText) : null,
+        expanded && show ? react_1["default"].createElement("div", { className: 'ml-7' }, children) : react_1["default"].createElement(react_1["default"].Fragment, null)));
+};
+exports.PHXCheckbox = PHXCheckbox;
+//# sourceMappingURL=Checkbox.js.map

package/dist/cjs/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAerD,IAAM,WAAW,GAA4B,UAAC,EAWrC;IAVd,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,EAAE,QAAA,EACF,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,IAAI,sBAV4C,iGAWpD,CADQ;IAED,IAAA,KAAkB,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAAzC,IAAI,QAAA,EAAE,OAAO,QAA4B,CAAA;IAEhD,IAAM,YAAY,GAAG,UAAC,CAAM;QAC1B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACzB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,CAAA;SACZ;IACH,CAAC,CAAA;IAED,OAAO,CACL,0CAAK,SAAS,EAAE,SAAS;QACtB,KAAK,IAAI,4CAAO,SAAS,EAAC,yCAAyC,IAAE,KAAK,CAAS;QACpF,0CAAK,SAAS,EAAC,wBAAwB;YACrC,+DACM,IAAI,EACJ,QAAQ,IACZ,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,4HAA4H,EACtI,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,UAAU,IACf;YACF,4CAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAC,6EAA6E,IACxG,KAAK,CACA,CACJ;QACL,QAAQ,IAAI,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,0CAAK,SAAS,EAAC,uCAAuC,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI;QAC7G,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,0CAAK,SAAS,EAAC,MAAM,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,mEAAK,CAC9D,CACP,CAAA;AACH,CAAC,CAAA;AAzCY,QAAA,WAAW,eAyCvB"}

package/dist/cjs/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/cjs/components/Checkbox/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Checkbox"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/index.ts"],"names":[],"mappings":";;;AAAA,qDAA0B"}

package/dist/cjs/components/FormStep/FormStep.d.ts

@@ -0,0 +1,26 @@
+import { UseFormRegisterReturn } from 'react-hook-form';
+import React, { ReactNode } from 'react';
+import { FooterBarProps } from '../FormWrap';
+export interface FormStepProps {
+    className?: string;
+    register?: UseFormRegisterReturn;
+    steps?: Array<{
+        step: number;
+        title: string;
+        status?: 'current' | 'complete' | 'upcoming';
+        component: ReactNode;
+    }>;
+    nextLabel: string;
+    backLabel: string;
+    formMode: 'addNew' | 'edit' | 'readOnly';
+    onSubmit: any;
+    size?: FooterBarProps['size'];
+    title: FooterBarProps['title'];
+    triggerStep?: Array<{
+        step: number;
+        onNext?: any;
+        onBack?: any;
+    }>;
+    backRout: any;
+}
+export declare const PHXFormStep: React.FC<FormStepProps>;

package/dist/cjs/components/FormStep/FormStep.js

@@ -0,0 +1,102 @@
+"use strict";
+exports.__esModule = true;
+exports.PHXFormStep = void 0;
+var tslib_1 = require("tslib");
+var react_hook_form_1 = require("react-hook-form");
+var react_1 = tslib_1.__importDefault(require("react"));
+var solid_1 = require("@heroicons/react/24/solid");
+var Card_1 = require("../Card");
+var FormWrap_1 = require("../FormWrap");
+var PHXFormStep = function (_a) {
+    var _b;
+    var className = _a.className, steps = _a.steps, nextLabel = _a.nextLabel, backLabel = _a.backLabel, formMode = _a.formMode, onSubmit = _a.onSubmit, _c = _a.size, size = _c === void 0 ? 'large' : _c, title = _a.title, triggerStep = _a.triggerStep, backRout = _a.backRout;
+    var _d = react_1["default"].useState(1), currentStep = _d[0], setCurrentStep = _d[1];
+    var _e = react_1["default"].useState([]), listSteps = _e[0], setListSteps = _e[1];
+    var form = (0, react_hook_form_1.useForm)();
+    var nextStep = function (data) {
+        var _a;
+        try {
+            var funcCallNextStep = (_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find(function (func) { return func.step === currentStep; })) === null || _a === void 0 ? void 0 : _a.onNext;
+            if (funcCallNextStep)
+                funcCallNextStep();
+            if (currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length)) {
+                onSubmit(data);
+                return;
+            }
+            else {
+                listSteps === null || listSteps === void 0 ? void 0 : listSteps.forEach(function (item) {
+                    if (item.step === currentStep + 1 && item.status !== 'complete')
+                        item.status = 'current';
+                    if (item.step === currentStep)
+                        item.status = 'complete';
+                });
+            }
+            setCurrentStep(function (currentStep) { return currentStep + 1; });
+        }
+        catch (error) {
+            console.error;
+        }
+    };
+    var handleBackStep = function (stepItem) {
+        var _a;
+        var funcCallBackStep = (_a = triggerStep === null || triggerStep === void 0 ? void 0 : triggerStep.find(function (func) { return func.step === currentStep; })) === null || _a === void 0 ? void 0 : _a.onBack;
+        if (funcCallBackStep && formMode !== 'readOnly')
+            funcCallBackStep();
+        if (stepItem && stepItem.step) {
+            setCurrentStep(stepItem.step);
+        }
+        else {
+            setCurrentStep(function (currentStep) { return currentStep - 1; });
+        }
+    };
+    var handleNextStep = function () {
+        setCurrentStep(function (currentStep) { return currentStep + 1; });
+    };
+    react_1["default"].useEffect(function () {
+        if (steps) {
+            var listNew = steps === null || steps === void 0 ? void 0 : steps.map(function (item, index) {
+                if (index === 0) {
+                    return tslib_1.__assign(tslib_1.__assign({}, item), { status: 'current' });
+                }
+                else {
+                    return tslib_1.__assign(tslib_1.__assign({}, item), { status: 'upcoming' });
+                }
+            });
+            if (formMode !== 'addNew')
+                listNew = steps === null || steps === void 0 ? void 0 : steps.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { status: 'complete' })); });
+            setListSteps(listNew);
+        }
+    }, [steps, formMode]);
+    return (react_1["default"].createElement("div", { className: className },
+        react_1["default"].createElement(react_hook_form_1.FormProvider, tslib_1.__assign({}, form),
+            react_1["default"].createElement(FormWrap_1.PHXFormWrap, { className: 'w-full', size: size, title: title, onSubmit: formMode === 'readOnly' ? form.handleSubmit(handleNextStep) : form.handleSubmit(nextStep), onCancel: backRout, footerAction: false },
+                react_1["default"].createElement(Card_1.PHXCard, { primaryFooterAction: {
+                        content: currentStep === (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) ? (formMode !== 'readOnly' ? 'Submit' : '') : nextLabel,
+                        submit: true
+                    }, secondaryFooterActions: [{ content: currentStep !== 1 ? backLabel : '', onClick: handleBackStep }] },
+                    react_1["default"].createElement("nav", { "aria-label": 'Progress' },
+                        react_1["default"].createElement("ol", { role: 'list', className: 'divide-y divide-gray-300 rounded-md border border-gray-300 md:flex md:divide-y-0' }, listSteps &&
+                            listSteps.map(function (stepItem, stepIdx) { return (react_1["default"].createElement("li", { key: stepIdx, className: 'relative cursor-pointer md:flex md:flex-1' },
+                                react_1["default"].createElement("button", { type: "".concat(stepItem.step > currentStep && formMode !== 'readOnly' ? 'submit' : 'button'), onClick: function () {
+                                        return (stepItem.step < currentStep || formMode === 'readOnly') && handleBackStep(stepItem);
+                                    } },
+                                    stepItem.status === 'complete' ? (react_1["default"].createElement("div", { className: 'group flex w-full items-center' },
+                                        react_1["default"].createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
+                                            react_1["default"].createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-indigo-600 group-hover:bg-indigo-800' },
+                                                react_1["default"].createElement(solid_1.CheckIcon, { className: 'h-6 w-6 text-white', "aria-hidden": 'true' })),
+                                            react_1["default"].createElement("span", { className: 'ml-4 text-sm font-medium text-gray-900' }, stepItem.title)))) : stepItem.status === 'current' ? (react_1["default"].createElement("div", { className: 'flex items-center px-6 py-3 text-sm font-medium', "aria-current": 'step' },
+                                        react_1["default"].createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-indigo-600' },
+                                            react_1["default"].createElement("span", { className: 'text-indigo-600' }, stepItem.step)),
+                                        react_1["default"].createElement("span", { className: 'ml-4 text-sm font-medium text-indigo-600' }, stepItem.title))) : (react_1["default"].createElement("div", { className: 'group flex items-center' },
+                                        react_1["default"].createElement("span", { className: 'flex items-center px-6 py-3 text-sm font-medium' },
+                                            react_1["default"].createElement("span", { className: 'flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-gray-300 group-hover:border-gray-400' },
+                                                react_1["default"].createElement("span", { className: 'text-gray-500 group-hover:text-gray-900' }, stepItem.step)),
+                                            react_1["default"].createElement("span", { className: 'ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900' }, stepItem.title)))),
+                                    stepIdx !== (listSteps === null || listSteps === void 0 ? void 0 : listSteps.length) - 1 ? (react_1["default"].createElement(react_1["default"].Fragment, null,
+                                        react_1["default"].createElement("div", { className: 'absolute right-0 top-0 hidden h-full w-5 md:block', "aria-hidden": 'true' },
+                                            react_1["default"].createElement("svg", { className: 'h-full w-full text-gray-300', viewBox: '0 0 22 80', fill: 'none', preserveAspectRatio: 'none' },
+                                                react_1["default"].createElement("path", { d: 'M0 -2L20 40L0 82', vectorEffect: 'non-scaling-stroke', stroke: 'currentcolor', strokeLinejoin: 'round' }))))) : null))); }))), (_b = listSteps === null || listSteps === void 0 ? void 0 : listSteps.find(function (item) { return item.step === currentStep; })) === null || _b === void 0 ? void 0 :
+                    _b.component)))));
+};
+exports.PHXFormStep = PHXFormStep;
+//# sourceMappingURL=FormStep.js.map

package/dist/cjs/components/FormStep/FormStep.js.map

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

package/dist/cjs/components/FormStep/index.d.ts

@@ -0,0 +1 @@
+export * from './FormStep';