phx-react 1.3.1

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

@@ -0,0 +1,77 @@
+import type React from 'react';
+export declare type Target = '_blank' | '_self' | '_parent' | '_top';
+declare type Falsy = boolean | undefined | null | 0;
+export declare function classNames(...classes: (string | Falsy)[]): string;
+export interface BaseInput {
+    register?: any;
+    errors?: any;
+    setError?: any;
+    clearErrors?: any;
+}
+export interface BaseButton {
+    /** A unique identifier for the button */
+    id?: string;
+    /** A destination to link to, rendered in the href attribute of a link */
+    url?: string;
+    /** Forces url to open in a new tab */
+    external?: boolean;
+    /** Tells the browser to download the url instead of opening it. Provides a hint for the downloaded filename if it is a string value */
+    download?: string | boolean;
+    /** Allows the button to submit a form */
+    submit?: boolean;
+    /** Disables the button, disallowing merchant interaction */
+    disabled?: boolean;
+    /** Replaces button text with a spinner while a background action is being performed */
+    loading?: boolean;
+    /** Callback when clicked */
+    onClick?(): unknown;
+    className?: string;
+}
+export declare type IconSource = React.FunctionComponent<React.SVGProps<SVGSVGElement>> | 'placeholder' | string;
+export interface ComplexAction extends Action, SubmitAction, DisableableAction, DestructableAction, LoadableAction {
+}
+export interface MenuActionDescriptor extends ComplexAction, TooltipAction {
+    /** Zero-indexed numerical position. Overrides the action's order in the menu */
+    index?: number;
+}
+export interface Action {
+    /** A unique identifier for the action */
+    id?: string;
+    /** Content the action displays */
+    content?: string;
+    /** Visually hidden text for screen readers */
+    accessibilityLabel?: string;
+    /** A destination to link to, rendered in the action */
+    url?: string;
+    /** Forces url to open in a new tab */
+    external?: boolean;
+    /** Where to display the url */
+    target?: Target;
+    /** Callback when an action takes place */
+    onClick?(): void;
+    /** Callback when mouse enter */
+    onMouseEnter?(): void;
+    /** Callback when element is touched */
+    onTouchStart?(): void;
+}
+export interface DisableableAction extends Action {
+    /** Whether or not the action is disabled */
+    disabled?: boolean;
+}
+export interface SubmitAction extends Action {
+    /** Whether or not the action is disabled */
+    submit?: boolean;
+}
+export interface DestructableAction extends Action {
+    /** Destructive action */
+    destructive?: boolean;
+}
+export interface LoadableAction extends Action {
+    /** Should a spinner be displayed */
+    loading?: boolean;
+}
+export interface TooltipAction {
+    /** Text content to render in a tooltip */
+    helpText?: React.ReactNode;
+}
+export {};

package/dist/cjs/components/types.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.classNames = void 0;
+function classNames() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+}
+exports.classNames = classNames;
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/types.ts"],"names":[],"mappings":";;;AAKA,SAAgB,UAAU;IAAC,iBAA8B;SAA9B,UAA8B,EAA9B,qBAA8B,EAA9B,IAA8B;QAA9B,4BAA8B;;IACvD,OAAO,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC1C,CAAC;AAFD,gCAEC"}

package/dist/cjs/demo/AssessmentAction.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function AssessmentAction(props: any): JSX.Element;

package/dist/cjs/demo/AssessmentAction.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.AssessmentAction = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+function AssessmentAction(props) {
+    var itemBody = props.itemBody;
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement("span", { className: 'block max-w-xs truncate' }, itemBody)));
+}
+exports.AssessmentAction = AssessmentAction;
+//# sourceMappingURL=AssessmentAction.js.map

package/dist/cjs/demo/AssessmentAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssessmentAction.js","sourceRoot":"","sources":["../../../src/demo/AssessmentAction.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AAEzB,SAAgB,gBAAgB,CAAC,KAAU;IACjC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAU;IAE1B,OAAO,CACL;QACE,2CAAM,SAAS,EAAC,yBAAyB,IAAE,QAAQ,CAAQ,CAC1D,CACJ,CAAA;AACH,CAAC;AARD,4CAQC"}

package/dist/cjs/demo/ContentWrap.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const ContentWrap: {
+    (): JSX.Element;
+    propTypes: {};
+};
+export default ContentWrap;

package/dist/cjs/demo/ContentWrap.js

@@ -0,0 +1,10 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var ContentWrap = function () {
+    return (react_1["default"].createElement("div", null, "Content wrap Content wrap Content wrapContent wrapContent wrapContent wrapContent wrapContent wrapContent wrapContent wrapContent wrap"));
+};
+ContentWrap.propTypes = {};
+exports["default"] = ContentWrap;
+//# sourceMappingURL=ContentWrap.js.map

package/dist/cjs/demo/ContentWrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWrap.js","sourceRoot":"","sources":["../../../src/demo/ContentWrap.tsx"],"names":[],"mappings":";;;AAAA,wDAAyB;AAEzB,IAAM,WAAW,GAAG;IAClB,OAAO,CACL,uLAGM,CACP,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,SAAS,GAAG,EAAE,CAAA;AAE1B,qBAAe,WAAW,CAAA"}

package/dist/cjs/demo/TableDemo.d.ts

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

package/dist/cjs/demo/TableDemo.js

@@ -0,0 +1,85 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var AssessmentAction_1 = require("./AssessmentAction");
+var Table_1 = require("../components/Table");
+var apollo_wrapper_1 = require("../lib/apollo-wrapper");
+var list = function (pagination, fieldSort, sortDirection) {
+    return {
+        keyResult: 'admissions_form_data',
+        query: "query getListAdmissions {\n                    admissions_form_data(\n                      limit: 10,\n                      offset: ".concat(pagination * 10, ", \n                      order_by: {").concat(fieldSort, ": ").concat(sortDirection, "}\n                      where: {\n                          deleted_at: {_is_null: true}}, \n                      ) {\n                    id\n                    admissions_code\n                    student_name\n                    created_at\n                    address_id                  \n                    email\n                    gender\n                    parent_name\n                    phone_number\n                    classroom {\n                       code\n                       name\n                     }\n                    }\n  \n                    admissions_form_data_aggregate(where: {deleted_at: {_is_null: true}}) {\n                      aggregate {\n                      count\n                      }\n                  }\n                }")
+    };
+};
+var search = function (pagination, fieldSort, sortDirection) {
+    return {
+        enable: true,
+        keyResult: 'admissions_form_data',
+        query: "query getListadmissionsBySearch {\n              admissions_form_data(\n                  limit: 10, \n                  offset: ".concat(pagination * 10, ",\n                  order_by: {").concat(fieldSort, ": ").concat(sortDirection, "},\n                  where: {_or: [{admissions_code: {_ilike: \"%@value%\"}}, {student_name: {_ilike: \"%@value%\"}}], deleted_at: {_is_null: true}}\n              ){\n                  id\n                  admissions_code\n                  student_name\n                  created_at\n                  address_id\n                  email\n                  gender\n                  parent_name\n                  phone_number\n              }\n  \n              admissions_form_data_aggregate(\n                where: {_or: [{admissions_code: {_ilike: \"%@value%\"}}, {student_name: {_ilike: \"%@value%\"}}], deleted_at: {_is_null: true}}\n                ){\n                    aggregate {\n                    count\n                    }\n                }\n          }")
+    };
+};
+var dateStrToDate = function (date) {
+    return date ? date.slice(8, 10) + '/' + date.slice(5, 7) + '/' + date.slice(0, 4) : '';
+};
+var TableDemo = function () {
+    var _a = (0, react_1.useState)('created_at'), fieldSort = _a[0], setFieldSort = _a[1];
+    var _b = (0, react_1.useState)('desc'), sortDirection = _b[0], setSortDirection = _b[1];
+    var sortData = function (fieldSort, sortDirection) {
+        setFieldSort(fieldSort);
+        setSortDirection(sortDirection);
+    };
+    var _c = (0, react_1.useState)(0), pagination = _c[0], setPagination = _c[1];
+    var paginationData = function (pagi) {
+        setPagination(pagi);
+    };
+    var searchQuery = search(pagination, fieldSort, sortDirection);
+    var thHeader = ['Mã tuyển sinh', 'Học sinh', 'Ngày tạo'];
+    var thBody = ['id', 'admissions_code', 'student_name', 'created_at'];
+    var thComponent = {
+        // @ts-ignore
+        created_at: function bind(value, itemBody) {
+            return dateStrToDate(itemBody.created_at);
+        },
+        student_name: function bind(itemBody) {
+            return react_1["default"].createElement(AssessmentAction_1.AssessmentAction, { itemBody: itemBody });
+        }
+    };
+    var thBodyFilter = function (value) { return value; };
+    var listQuery = list(pagination, fieldSort, sortDirection);
+    var sort = {
+        enable: true,
+        sortList: [
+            {
+                id: 'TenAZ',
+                name: 'Theo tên từ A đến Z',
+                field: 'student_name',
+                sortDirection: 'asc'
+            },
+            {
+                id: 'TenZA',
+                name: 'Theo tên từ Z đến A',
+                field: 'student_name',
+                sortDirection: 'desc'
+            },
+            {
+                id: 'ngayTaoMoiNhat',
+                name: 'Mới nhất',
+                field: 'created_at',
+                sortDirection: 'desc'
+            },
+            {
+                id: 'ngayTaoCuNhat',
+                name: 'Cũ nhất',
+                field: 'created_at',
+                sortDirection: 'asc'
+            },
+        ],
+        defaultActive: 'ngayTaoMoiNhat'
+    };
+    return (react_1["default"].createElement(apollo_wrapper_1.ApolloWrapper, null,
+        react_1["default"].createElement(Table_1.PHXTable, { list: listQuery, paginationData: paginationData, search: searchQuery, sort: sort, sortData: sortData, thBody: thBody, thBodyComponent: thComponent, 
+            // @ts-ignore
+            thBodyFilter: thBodyFilter, thHeader: thHeader })));
+};
+exports["default"] = TableDemo;
+//# sourceMappingURL=TableDemo.js.map

package/dist/cjs/demo/TableDemo.js.map

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

package/dist/cjs/index.d.ts

@@ -0,0 +1,18 @@
+import { PHXStep } from './components/Step/Step';
+import MyCounter from './components/App';
+import { PHXButton } from './components/Button';
+import { PHXCard } from './components/Card';
+import { PHXSpinner } from './components/Loading';
+import { MainWrap } from './components/MainWrap';
+import { PHXTable } from './components/Table';
+import { PHXFormWrap } from './components/FormWrap';
+import { PHXHeaderBar } from './components/HeaderBar';
+import { PHXInput } from './components/Input';
+import { PHXSelect } from './components/Select';
+import { PHXRadio } from './components/Radio';
+import { PHXCheckbox } from './components/Checkbox';
+import { PHXFormStep } from './components/FormStep';
+import { PHXNotifications } from './components/Notifications';
+import { PHXSkeletonLarge } from './components/Skeleton';
+import funcGetLoggedInfo from './components/Func/getLoginInfo';
+export { MyCounter, PHXButton, PHXCard, PHXSpinner, MainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXRadio, PHXCheckbox, PHXFormStep, PHXNotifications, PHXStep, PHXSkeletonLarge, funcGetLoggedInfo, };

package/dist/cjs/index.js

@@ -0,0 +1,39 @@
+"use strict";
+exports.__esModule = true;
+exports.funcGetLoggedInfo = exports.PHXSkeletonLarge = exports.PHXStep = exports.PHXNotifications = exports.PHXFormStep = exports.PHXCheckbox = exports.PHXRadio = exports.PHXSelect = exports.PHXInput = exports.PHXTable = exports.PHXHeaderBar = exports.PHXFormWrap = exports.MainWrap = exports.PHXSpinner = exports.PHXCard = exports.PHXButton = exports.MyCounter = void 0;
+var tslib_1 = require("tslib");
+var Step_1 = require("./components/Step/Step");
+exports.PHXStep = Step_1.PHXStep;
+var App_1 = tslib_1.__importDefault(require("./components/App"));
+exports.MyCounter = App_1["default"];
+var Button_1 = require("./components/Button");
+exports.PHXButton = Button_1.PHXButton;
+var Card_1 = require("./components/Card");
+exports.PHXCard = Card_1.PHXCard;
+var Loading_1 = require("./components/Loading");
+exports.PHXSpinner = Loading_1.PHXSpinner;
+var MainWrap_1 = require("./components/MainWrap");
+exports.MainWrap = MainWrap_1.MainWrap;
+var Table_1 = require("./components/Table");
+exports.PHXTable = Table_1.PHXTable;
+var FormWrap_1 = require("./components/FormWrap");
+exports.PHXFormWrap = FormWrap_1.PHXFormWrap;
+var HeaderBar_1 = require("./components/HeaderBar");
+exports.PHXHeaderBar = HeaderBar_1.PHXHeaderBar;
+var Input_1 = require("./components/Input");
+exports.PHXInput = Input_1.PHXInput;
+var Select_1 = require("./components/Select");
+exports.PHXSelect = Select_1.PHXSelect;
+var Radio_1 = require("./components/Radio");
+exports.PHXRadio = Radio_1.PHXRadio;
+var Checkbox_1 = require("./components/Checkbox");
+exports.PHXCheckbox = Checkbox_1.PHXCheckbox;
+var FormStep_1 = require("./components/FormStep");
+exports.PHXFormStep = FormStep_1.PHXFormStep;
+var Notifications_1 = require("./components/Notifications");
+exports.PHXNotifications = Notifications_1.PHXNotifications;
+var Skeleton_1 = require("./components/Skeleton");
+exports.PHXSkeletonLarge = Skeleton_1.PHXSkeletonLarge;
+var getLoginInfo_1 = tslib_1.__importDefault(require("./components/Func/getLoginInfo"));
+exports.funcGetLoggedInfo = getLoginInfo_1["default"];
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,+CAAgD;AAiC9C,kBAjCO,cAAO,CAiCP;AAhCT,iEAAwC;AAkBtC,oBAlBK,gBAAS,CAkBL;AAjBX,8CAA+C;AAkB7C,oBAlBO,kBAAS,CAkBP;AAjBX,0CAA2C;AAkBzC,kBAlBO,cAAO,CAkBP;AAjBT,gDAAiD;AAkB/C,qBAlBO,oBAAU,CAkBP;AAjBZ,kDAAgD;AAkB9C,mBAlBO,mBAAQ,CAkBP;AAjBV,4CAA6C;AAoB3C,mBApBO,gBAAQ,CAoBP;AAnBV,kDAAmD;AAiBjD,sBAjBO,sBAAW,CAiBP;AAhBb,oDAAqD;AAiBnD,uBAjBO,wBAAY,CAiBP;AAhBd,4CAA6C;AAkB3C,mBAlBO,gBAAQ,CAkBP;AAjBV,8CAA+C;AAkB7C,oBAlBO,kBAAS,CAkBP;AAjBX,4CAA6C;AAkB3C,mBAlBO,gBAAQ,CAkBP;AAjBV,kDAAmD;AAkBjD,sBAlBO,sBAAW,CAkBP;AAjBb,kDAAmD;AAkBjD,sBAlBO,sBAAW,CAkBP;AAjBb,4DAA6D;AAkB3D,2BAlBO,gCAAgB,CAkBP;AAjBlB,kDAAwD;AAmBtD,2BAnBO,2BAAgB,CAmBP;AAlBlB,wFAA8D;AAmB5D,4BAnBK,yBAAiB,CAmBL"}

package/dist/cjs/lib/apollo-wrapper.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function ApolloWrapper({ children }: React.PropsWithChildren): JSX.Element;

package/dist/cjs/lib/apollo-wrapper.js

@@ -0,0 +1,36 @@
+"use strict";
+exports.__esModule = true;
+exports.ApolloWrapper = void 0;
+var tslib_1 = require("tslib");
+var client_1 = require("@apollo/client");
+var ssr_1 = require("@apollo/experimental-nextjs-app-support/ssr");
+var react_1 = tslib_1.__importDefault(require("react"));
+function makeClient() {
+    var uri = 'https://graphql-iris.phx.asia/v1/graphql';
+    var key = 'jcVC8tvmdx8yhWkcv7GZDyvN3gD8elWGqFC0O6ocncgdIFqqDuj87u65Zv6ToP6kRA';
+    var httpLink = new client_1.HttpLink({
+        uri: uri,
+        headers: {
+            // @ts-ignore
+            'x-hasura-admin-secret': key
+        }
+    });
+    return new ssr_1.NextSSRApolloClient({
+        cache: new ssr_1.NextSSRInMemoryCache(),
+        link: typeof window === 'undefined'
+            ? client_1.ApolloLink.from([
+                new ssr_1.SSRMultipartLink({
+                    stripDefer: true
+                }),
+                httpLink,
+            ])
+            : httpLink
+    });
+}
+// eslint-disable-next-line no-undef
+function ApolloWrapper(_a) {
+    var children = _a.children;
+    return react_1["default"].createElement(ssr_1.ApolloNextAppProvider, { makeClient: makeClient }, children);
+}
+exports.ApolloWrapper = ApolloWrapper;
+//# sourceMappingURL=apollo-wrapper.js.map

package/dist/cjs/lib/apollo-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apollo-wrapper.js","sourceRoot":"","sources":["../../../src/lib/apollo-wrapper.tsx"],"names":[],"mappings":";;;;AAAA,yCAAqD;AACrD,mEAKoD;AACpD,wDAAyB;AAEzB,SAAS,UAAU;IACjB,IAAM,GAAG,GAAG,0CAA0C,CAAA;IACtD,IAAM,GAAG,GAAG,oEAAoE,CAAA;IAEhF,IAAM,QAAQ,GAAG,IAAI,iBAAQ,CAAC;QAC5B,GAAG,KAAA;QACH,OAAO,EAAE;YACP,aAAa;YACb,uBAAuB,EAAE,GAAG;SAC7B;KACF,CAAC,CAAA;IAEF,OAAO,IAAI,yBAAmB,CAAC;QAC7B,KAAK,EAAE,IAAI,0BAAoB,EAAE;QACjC,IAAI,EACF,OAAO,MAAM,KAAK,WAAW;YAC3B,CAAC,CAAC,mBAAU,CAAC,IAAI,CAAC;gBACd,IAAI,sBAAgB,CAAC;oBACnB,UAAU,EAAE,IAAI;iBACjB,CAAC;gBACF,QAAQ;aACT,CAAC;YACJ,CAAC,CAAC,QAAQ;KACf,CAAC,CAAA;AACJ,CAAC;AAED,oCAAoC;AACpC,SAAgB,aAAa,CAAC,EAAqC;QAAnC,QAAQ,cAAA;IACtC,OAAO,iCAAC,2BAAqB,IAAC,UAAU,EAAE,UAAU,IAAG,QAAQ,CAAyB,CAAA;AAC1F,CAAC;AAFD,sCAEC"}

package/dist/cjs/utils/query.d.ts

@@ -0,0 +1,3 @@
+import { MutationOptions, QueryOptions, ApolloClient, NormalizedCacheObject } from '@apollo/client';
+export declare function clientQuery(option: QueryOptions, client: ApolloClient<NormalizedCacheObject>): Promise<any>;
+export declare function clientMutation(option: MutationOptions, client: ApolloClient<NormalizedCacheObject>): Promise<any>;

package/dist/cjs/utils/query.js

@@ -0,0 +1,55 @@
+"use strict";
+'use client';
+exports.__esModule = true;
+exports.clientMutation = exports.clientQuery = void 0;
+var tslib_1 = require("tslib");
+// import client from '../apollo-client'
+function clientQuery(option, client) {
+    return tslib_1.__awaiter(this, void 0, void 0, function () {
+        var startTime, data, endTime, duration;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    startTime = performance.now();
+                    return [4 /*yield*/, client.query(option)];
+                case 1:
+                    data = (_a.sent()).data;
+                    endTime = performance.now();
+                    duration = endTime - startTime;
+                    if (!(duration < 100)) return [3 /*break*/, 3];
+                    console.info('promise delay...');
+                    return [4 /*yield*/, new Promise(function (r) { return setTimeout(r, 500); })];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3: return [2 /*return*/, data];
+            }
+        });
+    });
+}
+exports.clientQuery = clientQuery;
+function clientMutation(option, client) {
+    return tslib_1.__awaiter(this, void 0, void 0, function () {
+        var startTime, data, endTime, duration;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    startTime = performance.now();
+                    return [4 /*yield*/, client.mutate(option)];
+                case 1:
+                    data = (_a.sent()).data;
+                    endTime = performance.now();
+                    duration = endTime - startTime;
+                    if (!(duration < 100)) return [3 /*break*/, 3];
+                    console.info('promise delay...');
+                    return [4 /*yield*/, new Promise(function (r) { return setTimeout(r, 500); })];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3: return [2 /*return*/, data];
+            }
+        });
+    });
+}
+exports.clientMutation = clientMutation;
+//# sourceMappingURL=query.js.map

package/dist/cjs/utils/query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.js","sourceRoot":"","sources":["../../../src/utils/query.ts"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,wCAAwC;AAExC,SAAsB,WAAW,CAAC,MAAoB,EAAE,MAA2C;;;;;;oBAC3F,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;oBAClB,qBAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAA;;oBAAnC,IAAI,GAAK,CAAA,SAA0B,CAAA,KAA/B;oBACN,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;oBAC3B,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;yBAGhC,CAAA,QAAQ,GAAG,GAAG,CAAA,EAAd,wBAAc;oBAChB,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;oBAChC,qBAAM,IAAI,OAAO,CAAC,UAAC,CAAC,IAAK,OAAA,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC,EAAlB,CAAkB,CAAC,EAAA;;oBAA5C,SAA4C,CAAA;;wBAE9C,sBAAO,IAAI,EAAA;;;;CACZ;AAZD,kCAYC;AAED,SAAsB,cAAc,CAClC,MAAuB,EACvB,MAA2C;;;;;;oBAErC,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;oBAClB,qBAAM,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAA;;oBAApC,IAAI,GAAK,CAAA,SAA2B,CAAA,KAAhC;oBACN,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;oBAC3B,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;yBAGhC,CAAA,QAAQ,GAAG,GAAG,CAAA,EAAd,wBAAc;oBAChB,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;oBAChC,qBAAM,IAAI,OAAO,CAAC,UAAC,CAAC,IAAK,OAAA,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC,EAAlB,CAAkB,CAAC,EAAA;;oBAA5C,SAA4C,CAAA;;wBAE9C,sBAAO,IAAI,EAAA;;;;CACZ;AAfD,wCAeC"}

package/dist/cjs/utils/use-disable-interaction.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function useDisableClick(disabled?: boolean, handleClick?: () => void): ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;

package/dist/cjs/utils/use-disable-interaction.js

@@ -0,0 +1,18 @@
+"use strict";
+exports.__esModule = true;
+exports.useDisableClick = void 0;
+var react_1 = require("react");
+function useDisableClick(disabled, handleClick) {
+    var handleClickWrapper = (0, react_1.useCallback)(function (event) {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [disabled]);
+    if (!disabled) {
+        return handleClick;
+    }
+    return handleClickWrapper;
+}
+exports.useDisableClick = useDisableClick;
+//# sourceMappingURL=use-disable-interaction.js.map

package/dist/cjs/utils/use-disable-interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-disable-interaction.js","sourceRoot":"","sources":["../../../src/utils/use-disable-interaction.ts"],"names":[],"mappings":";;;AAAA,+BAA0C;AAE1C,SAAgB,eAAe,CAAC,QAAkB,EAAE,WAAwB;IAC1E,IAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,UAAC,KAA0C;QACzC,IAAI,QAAQ,EAAE;YACZ,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,KAAK,CAAC,eAAe,EAAE,CAAA;SACxB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,WAAW,CAAA;KACnB;IAED,OAAO,kBAAkB,CAAA;AAC3B,CAAC;AAhBD,0CAgBC"}

package/dist/esm/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/esm/commons/IconLoading.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export 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.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.createElement("circle", { className: 'opacity-25', cx: '12', cy: '12', r: '10', stroke: 'currentColor', strokeWidth: '4' }),
+        React.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' })));
+};
+//# sourceMappingURL=IconLoading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconLoading.js","sourceRoot":"","sources":["../../../src/commons/IconLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,CAAC,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,6BACE,SAAS,EAAE,UAAU,CAAC,iCAAiC,EAAE,KAAK,CAAC,EAC/D,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW;QAEnB,gCAAQ,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,8BACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GAC7G,CACJ,CACP,CAAA;AACH,CAAC,CAAA"}

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

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

package/dist/esm/components/App.js

@@ -0,0 +1,66 @@
+import React, { Fragment, useState } from 'react';
+import { FaceFrownIcon, FaceSmileIcon, FireIcon, HandThumbUpIcon, HeartIcon, PaperClipIcon, XMarkIcon, } from '@heroicons/react/20/solid';
+import { Listbox, Transition } from '@headlessui/react';
+var moods = [
+    { name: 'Excited', value: 'excited', icon: FireIcon, iconColor: 'text-white', bgColor: 'bg-red-500' },
+    { name: 'Loved', value: 'loved', icon: HeartIcon, iconColor: 'text-white', bgColor: 'bg-pink-400' },
+    { name: 'Happy', value: 'happy', icon: FaceSmileIcon, iconColor: 'text-white', bgColor: 'bg-green-400' },
+    { name: 'Sad', value: 'sad', icon: FaceFrownIcon, iconColor: 'text-white', bgColor: 'bg-yellow-400' },
+    { name: 'Thumbsy', value: 'thumbsy', icon: HandThumbUpIcon, iconColor: 'text-white', bgColor: 'bg-blue-500' },
+    { name: 'I feel nothing', value: null, icon: 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 = useState(moods[5]), selected = _a[0], setSelected = _a[1];
+    return (React.createElement("div", null,
+        React.createElement("div", { className: 'flex items-start space-x-4' },
+            React.createElement("div", { className: 'flex-shrink-0' },
+                React.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.createElement("div", { className: 'min-w-0 flex-1' },
+                React.createElement("form", { action: '#', className: 'relative' },
+                    React.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.createElement("label", { htmlFor: 'comment', className: 'sr-only' }, "Add your comment"),
+                        React.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.createElement("div", { className: 'py-2', "aria-hidden": 'true' },
+                            React.createElement("div", { className: 'py-px' },
+                                React.createElement("div", { className: 'h-9' })))),
+                    React.createElement("div", { className: 'absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2' },
+                        React.createElement("div", { className: 'flex items-center space-x-5' },
+                            React.createElement("div", { className: 'flex items-center' },
+                                React.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.createElement(PaperClipIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }),
+                                    React.createElement("span", { className: 'sr-only' }, "Attach a file"))),
+                            React.createElement("div", { className: 'flex items-center' },
+                                React.createElement(Listbox, { value: selected, onChange: setSelected }, function (_a) {
+                                    var open = _a.open;
+                                    return (React.createElement(React.Fragment, null,
+                                        React.createElement(Listbox.Label, { className: 'sr-only' }, "Your mood"),
+                                        React.createElement("div", { className: 'relative' },
+                                            React.createElement(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.createElement("span", { className: 'flex items-center justify-center' }, selected.value === null ? (React.createElement("span", null,
+                                                    React.createElement(FaceSmileIcon, { className: 'h-5 w-5 flex-shrink-0', "aria-hidden": 'true' }),
+                                                    React.createElement("span", { className: 'sr-only' }, "Add your mood"))) : (React.createElement("span", null,
+                                                    React.createElement("span", { className: classNames(selected.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
+                                                        React.createElement(selected.icon, { className: 'h-5 w-5 flex-shrink-0 text-white', "aria-hidden": 'true' })),
+                                                    React.createElement("span", { className: 'sr-only' }, selected.name))))),
+                                            React.createElement(Transition, { show: open, as: Fragment, leave: 'transition ease-in duration-100', leaveFrom: 'opacity-100', leaveTo: 'opacity-0' },
+                                                React.createElement(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.createElement(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.createElement("div", { className: 'flex items-center' },
+                                                        React.createElement("div", { className: classNames(mood.bgColor, 'flex h-8 w-8 items-center justify-center rounded-full') },
+                                                            React.createElement(mood.icon, { className: classNames(mood.iconColor, 'h-5 w-5 flex-shrink-0'), "aria-hidden": 'true' })),
+                                                        React.createElement("span", { className: 'ml-3 block truncate font-medium' }, mood.name)))); }))))));
+                                }))),
+                        React.createElement("div", { className: 'flex-shrink-0' },
+                            React.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"))))))));
+};
+export default MyCounter;
+//# sourceMappingURL=App.js.map

package/dist/esm/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/esm/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/esm/components/Button/Button.js

@@ -0,0 +1,39 @@
+import { __assign } from "tslib";
+import React from 'react';
+import * as SolidIcons from '@heroicons/react/24/solid';
+import * as OutlineIcons from '@heroicons/react/24/outline';
+import { IconLoading } from '../../commons/IconLoading';
+import { classNames } from '../types';
+import { useDisableClick } from '../../utils/use-disable-interaction';
+export 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 = __assign({}, commonProps);
+    var handleClick = useDisableClick(disabled, onClick);
+    var binClassNames = 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 = 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.createElement(Icon, { className: iconClass });
+    // Loading markup
+    var loadingMarkup = loading ? (React.createElement("span", { className: 'w-3 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2' },
+        React.createElement(IconLoading, { color: primary ? 'text-white' : danger ? 'text-red-50' : 'bg-transparent' }))) : (React.createElement(React.Fragment, null));
+    var buttonMarkup = (React.createElement("button", __assign({}, interactiveProps, { type: submit ? 'submit' : 'button', onClick: handleClick, className: binClassNames }),
+        React.createElement(React.Fragment, null,
+            loadingMarkup,
+            iconPosition === 'before' ? iconMarkup : React.createElement(React.Fragment, null),
+            React.createElement("span", { className: loading ? 'invisible' : '' }, children),
+            iconPosition === 'after' ? iconMarkup : React.createElement(React.Fragment, null))));
+    return React.createElement(React.Fragment, null, buttonMarkup);
+};
+//# sourceMappingURL=Button.js.map