phx-react 1.3.1747 → 1.3.1748

package/dist/cjs/components/PHXToggle/Toggle.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 interface ToggleButtonProps {
     onChange(active: boolean): void;
     active: boolean;
+    disabled?: boolean;
+    helpText?: string | React.ReactNode;
 }
-export default function PHXToggle({ onChange, active }: ToggleButtonProps): React.JSX.Element;
+export default function PHXToggle({ onChange, active, disabled, helpText }: ToggleButtonProps): React.JSX.Element;
 export {};

package/dist/cjs/components/PHXToggle/Toggle.js

@@ -3,9 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PHXToggle;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-function PHXToggle({ onChange, active }) {
-    return (react_1.default.createElement("label", { className: 'ml-2 inline-flex cursor-pointer items-center' },
-        react_1.default.createElement("input", { "aria-label": 'Toggle option', checked: active, className: 'peer absolute hidden', onClick: () => onChange(!active), type: 'checkbox' }),
-        react_1.default.createElement("div", { className: "\n           peer relative h-5 w-8 rounded-[0.4rem] bg-gray-300\n              after:absolute after:left-[4px] after:top-1/2 after:h-[12px]\n              after:w-[12px] after:translate-y-[-50%] after:rounded-[3px]\n              after:bg-white after:transition-transform\n              after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-3\n              dark:border-gray-600 dark:bg-gray-500\n            " })));
+const ToolTip_1 = tslib_1.__importDefault(require("../ToolTip/ToolTip"));
+function PHXToggle({ onChange, active, disabled = false, helpText }) {
+    const toggle = (react_1.default.createElement("label", { className: `ml-2 inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}` },
+        react_1.default.createElement("input", { "aria-label": 'Toggle option', checked: active, className: 'peer absolute hidden', disabled: disabled, onChange: () => {
+                if (!disabled)
+                    onChange(!active);
+            }, type: 'checkbox' }),
+        react_1.default.createElement("div", { className: "\n           peer relative h-5 w-8 rounded-[0.4rem] bg-slate-300 transition-colors\n              after:absolute after:left-[4px] after:top-1/2 after:h-[12px]\n              after:w-[12px] after:translate-y-[-50%] after:rounded-[3px]\n              after:bg-white after:transition-transform\n              after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-3\n              peer-disabled:bg-slate-200 peer-disabled:after:bg-slate-50\n              peer-disabled:peer-checked:bg-slate-300\n              dark:border-gray-600 dark:bg-gray-500\n            " })));
+    if (helpText) {
+        return (react_1.default.createElement(ToolTip_1.default, { content: helpText, placement: 'top' }, toggle));
+    }
+    return toggle;
 }
 //# sourceMappingURL=Toggle.js.map

package/dist/cjs/components/PHXToggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/components/PHXToggle/Toggle.tsx"],"names":[],"mappings":";;AAMA,4BAsBC;;AA5BD,0DAAyB;AAMzB,SAAwB,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAqB;IACvE,OAAO,CACL,yCAAO,SAAS,EAAC,8CAA8C;QAC7D,uDACa,eAAe,EAC1B,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAChC,IAAI,EAAC,UAAU,GACf;QACF,uCACE,SAAS,EAAC,6aAOL,GACL,CACI,CACT,CAAA;AACH,CAAC"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/components/PHXToggle/Toggle.tsx"],"names":[],"mappings":";;AASA,4BAqCC;;AA9CD,0DAAyB;AACzB,yEAA2C;AAQ3C,SAAwB,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAqB;IACnG,MAAM,MAAM,GAAG,CACb,yCAAO,SAAS,EAAE,iCAAiC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,EAAE;QAChH,uDACa,eAAe,EAC1B,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,sBAAsB,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,CAAC,QAAQ;oBAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;YAClC,CAAC,EACD,IAAI,EAAC,UAAU,GACf;QACF,uCACE,SAAS,EAAC,ikBASL,GACL,CACI,CACT,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,8BAAC,iBAAU,IAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,KAAK,IAC3C,MAAM,CACI,CACd,CAAA;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC"}

package/dist/esm/components/PHXToggle/Toggle.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 interface ToggleButtonProps {
     onChange(active: boolean): void;
     active: boolean;
+    disabled?: boolean;
+    helpText?: string | React.ReactNode;
 }
-export default function PHXToggle({ onChange, active }: ToggleButtonProps): React.JSX.Element;
+export default function PHXToggle({ onChange, active, disabled, helpText }: ToggleButtonProps): React.JSX.Element;
 export {};

package/dist/esm/components/PHXToggle/Toggle.js

@@ -1,7 +1,15 @@
 import React from 'react';
-export default function PHXToggle({ onChange, active }) {
-    return (React.createElement("label", { className: 'ml-2 inline-flex cursor-pointer items-center' },
-        React.createElement("input", { "aria-label": 'Toggle option', checked: active, className: 'peer absolute hidden', onClick: () => onChange(!active), type: 'checkbox' }),
-        React.createElement("div", { className: "\n           peer relative h-5 w-8 rounded-[0.4rem] bg-gray-300\n              after:absolute after:left-[4px] after:top-1/2 after:h-[12px]\n              after:w-[12px] after:translate-y-[-50%] after:rounded-[3px]\n              after:bg-white after:transition-transform\n              after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-3\n              dark:border-gray-600 dark:bg-gray-500\n            " })));
+import PHXTooltip from '../ToolTip/ToolTip';
+export default function PHXToggle({ onChange, active, disabled = false, helpText }) {
+    const toggle = (React.createElement("label", { className: `ml-2 inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}` },
+        React.createElement("input", { "aria-label": 'Toggle option', checked: active, className: 'peer absolute hidden', disabled: disabled, onChange: () => {
+                if (!disabled)
+                    onChange(!active);
+            }, type: 'checkbox' }),
+        React.createElement("div", { className: "\n           peer relative h-5 w-8 rounded-[0.4rem] bg-slate-300 transition-colors\n              after:absolute after:left-[4px] after:top-1/2 after:h-[12px]\n              after:w-[12px] after:translate-y-[-50%] after:rounded-[3px]\n              after:bg-white after:transition-transform\n              after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-3\n              peer-disabled:bg-slate-200 peer-disabled:after:bg-slate-50\n              peer-disabled:peer-checked:bg-slate-300\n              dark:border-gray-600 dark:bg-gray-500\n            " })));
+    if (helpText) {
+        return (React.createElement(PHXTooltip, { content: helpText, placement: 'top' }, toggle));
+    }
+    return toggle;
 }
 //# sourceMappingURL=Toggle.js.map

package/dist/esm/components/PHXToggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/components/PHXToggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAqB;IACvE,OAAO,CACL,+BAAO,SAAS,EAAC,8CAA8C;QAC7D,6CACa,eAAe,EAC1B,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAChC,IAAI,EAAC,UAAU,GACf;QACF,6BACE,SAAS,EAAC,6aAOL,GACL,CACI,CACT,CAAA;AACH,CAAC"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/components/PHXToggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,oBAAoB,CAAA;AAQ3C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAqB;IACnG,MAAM,MAAM,GAAG,CACb,+BAAO,SAAS,EAAE,iCAAiC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,EAAE;QAChH,6CACa,eAAe,EAC1B,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,sBAAsB,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EAAE;gBACb,IAAI,CAAC,QAAQ;oBAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;YAClC,CAAC,EACD,IAAI,EAAC,UAAU,GACf;QACF,6BACE,SAAS,EAAC,ikBASL,GACL,CACI,CACT,CAAA;IAED,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,oBAAC,UAAU,IAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,KAAK,IAC3C,MAAM,CACI,CACd,CAAA;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phx-react",
-  "version": "1.3.1747",
+  "version": "1.3.1748",
   "description": "PHX REACT",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",