@qoretechnologies/reqore 0.29.0 → 0.29.2

package/dist/hooks/useReqoreEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReqoreEffect.d.ts","sourceRoot":"","sources":["../../src/hooks/useReqoreEffect.ts"],"names":[],"mappings":"AACA,OAAO,EACL,aAAa,EAGd,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,eAAO,MAAM,eAAe,cACf,SAAS,SACb,YAAY,WACV,aAAa,KACrB,aAmCF,CAAC"}

package/dist/hooks/useReqoreEffect.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useReqoreEffect = void 0;
+var react_1 = require("react");
+var ThemeContext_1 = __importDefault(require("../context/ThemeContext"));
+var useReqoreEffect = function (component, theme, effect) {
+    var _theme = (0, react_1.useContext)(ThemeContext_1["default"]);
+    // Return the effect if the component is not defined in the theme
+    if (!theme[component]) {
+        return effect;
+    }
+    if (theme) {
+        // No other way to conditionally use a hook
+        _theme = theme;
+    }
+    var colors = (0, react_1.useMemo)(function () {
+        return _theme[component].gradient ? _theme.main : undefined;
+    }, [_theme, effect]);
+    var animate = (0, react_1.useMemo)(function () {
+        return _theme[component].animate;
+    }, [_theme, effect]);
+    var _effect = (0, react_1.useMemo)(function () {
+        return __assign(__assign({}, effect), { gradient: __assign({ colors: colors, animate: animate }, effect === null || effect === void 0 ? void 0 : effect.gradient) });
+    }, [colors, animate, effect]);
+    return _effect;
+};
+exports.useReqoreEffect = useReqoreEffect;
+//# sourceMappingURL=useReqoreEffect.js.map

package/dist/hooks/useReqoreEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReqoreEffect.js","sourceRoot":"","sources":["../../src/hooks/useReqoreEffect.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAA4C;AAO5C,yEAAmD;AAE5C,IAAM,eAAe,GAAG,UAC7B,SAAoB,EACpB,KAAmB,EACnB,MAAsB;IAEtB,IAAI,MAAM,GAAiB,IAAA,kBAAU,EAAe,yBAAY,CAAC,CAAC;IAElE,iEAAiE;IACjE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;QACrB,OAAO,MAAM,CAAC;KACf;IAED,IAAI,KAAK,EAAE;QACT,2CAA2C;QAC3C,MAAM,GAAG,KAAK,CAAC;KAChB;IAED,IAAM,MAAM,GAAoB,IAAA,eAAO,EAAC;QACtC,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,IAAM,OAAO,GAA0C,IAAA,eAAO,EAAC;QAC7D,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC;IACnC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,IAAM,OAAO,GAAG,IAAA,eAAO,EAAC;QACtB,6BACK,MAAM,KACT,QAAQ,aACN,MAAM,QAAA,EACN,OAAO,SAAA,IAGJ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAErB;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAvCW,QAAA,eAAe,mBAuC1B"}

package/dist/hooks/useTheme.d.ts

@@ -6,6 +6,7 @@ export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' |
         color?: TReqoreEffectColor;
         dim?: boolean;
     };
+    gradient?: boolean;
 }
 export declare const useReqoreTheme: (element?: string, customTheme?: IReqoreCustomTheme, intent?: TReqoreIntent) => IReqoreTheme;
 //# sourceMappingURL=useTheme.d.ts.map

package/dist/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIjE,MAAM,WAAW,kBAAmB,SAAQ,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACtF,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,kBAAkB,CAAC;QAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;CACH;AAED,eAAO,MAAM,cAAc,aACf,MAAM,gBACH,kBAAkB,WACtB,aAAa,iBAuBvB,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIjE,MAAM,WAAW,kBAAmB,SAAQ,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACtF,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,kBAAkB,CAAC;QAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,aACf,MAAM,gBACH,kBAAkB,WACtB,aAAa,KACrB,YAsBF,CAAC"}

package/dist/hooks/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAmC;AACnC,+BAAmC;AAGnC,yEAAmD;AACnD,4CAAyE;AAUlE,IAAM,cAAc,GAAG,UAC5B,OAAgB,EAChB,WAAoC,EACpC,MAAsB;;IADtB,4BAAA,EAAA,gBAAoC;IAGpC,IAAM,KAAK,GAAiB,IAAA,kBAAU,EAAe,yBAAY,CAAC,CAAC;IAEnE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IAED,IAAI,YAAY,GAAuB,IAAA,kBAAS,EAAC,WAAW,CAAC,CAAC;IAE9D,IAAI,YAAY,CAAC,IAAI,EAAE;QACrB,YAAY,CAAC,IAAI,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,IAAI,MAAA,YAAY,CAAC,IAAI,0CAAE,KAAK,EAAE;QAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClF;IAED,IAAI,OAAO,KAAK,MAAM,IAAI,MAAM,EAAE;QAChC,YAAY,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;KAC3C;IAED,OAAO,IAAA,oBAAW,EAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAiB,CAAC;AACnE,CAAC,CAAC;AA1BW,QAAA,cAAc,kBA0BzB"}
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":";;;;;;AAAA,iCAAmC;AACnC,+BAAmC;AAGnC,yEAAmD;AACnD,4CAAyE;AAWlE,IAAM,cAAc,GAAG,UAC5B,OAAgB,EAChB,WAAoC,EACpC,MAAsB;;IADtB,4BAAA,EAAA,gBAAoC;IAGpC,IAAM,KAAK,GAAiB,IAAA,kBAAU,EAAe,yBAAY,CAAC,CAAC;IAEnE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,KAAK,CAAC;KACd;IAED,IAAI,YAAY,GAAuB,IAAA,kBAAS,EAAC,WAAW,CAAC,CAAC;IAE9D,IAAI,YAAY,CAAC,IAAI,EAAE;QACrB,YAAY,CAAC,IAAI,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KACtE;IAED,IAAI,MAAA,YAAY,CAAC,IAAI,0CAAE,KAAK,EAAE;QAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,GAAG,IAAA,gCAAuB,EAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClF;IAED,IAAI,OAAO,KAAK,MAAM,IAAI,MAAM,EAAE;QAChC,YAAY,CAAC,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;KAC3C;IAED,OAAO,IAAA,oBAAW,EAAC,OAAO,EAAE,KAAK,EAAE,YAAY,CAAiB,CAAC;AACnE,CAAC,CAAC;AA1BW,QAAA,cAAc,kBA0BzB"}

package/dist/index.d.ts

@@ -46,6 +46,8 @@ export { default as ReqoreTextarea } from './components/Textarea';
 export { TimeAgo as ReqoreTimeAgo } from './components/TimeAgo';
 export { ReqoreTree } from './components/Tree';
 export { Colors as ReqoreColors } from './constants/colors';
+export { ReqoreSizes } from './constants/sizes';
+export { ReqoreIntents } from './constants/theme';
 export { default as ReqoreNotifications } from './containers/ReqoreProvider';
 export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -12,7 +12,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 }));
 exports.__esModule = true;
 exports.ReqoreTabsContent = exports.ReqoreTabs = exports.ReqoreTable = exports.ReqoreSpacer = exports.ReqoreSidebar = exports.ReqoreRadioGroup = exports.ReqorePopover = exports.ReqoreParagraph = exports.ReqoreP = exports.ReqorePanel = exports.ReqoreNotification = exports.ReqoreNotificationsWrapper = exports.ReqoreNavbarItem = exports.ReqoreNavbarGroup = exports.ReqoreNavbarDivider = exports.ReqoreHeader = exports.ReqoreFooter = exports.ReqoreMultiSelect = exports.ReqoreModal = exports.ReqoreMessage = exports.ReqoreMenuItem = exports.ReqoreMenuDivider = exports.ReqoreMenu = exports.ReqoreLayoutContent = exports.ReqoreInput = exports.ReqoreIcon = exports.ReqoreHeading = exports.ReqoreH6 = exports.ReqoreH5 = exports.ReqoreH4 = exports.ReqoreH3 = exports.ReqoreH2 = exports.ReqoreH1 = exports.ReqoreTextEffect = exports.ReqoreEffect = exports.ReqoreDropdownItem = exports.ReqoreDropdownDivider = exports.ReqoreDropdown = exports.ReqoreDrawer = exports.ReqoreControlGroup = exports.ReqoreContent = exports.ReqoreCommentFeed = exports.ReqoreComment = exports.ReqoreColumn = exports.ReqoreColumns = exports.ReqoreCollection = exports.ReqoreCheckbox = exports.ReqoreButton = exports.ReqoreBreadcrumbsItem = exports.ReqoreBreadcrumbs = void 0;
-exports.useReqoreTheme = exports.useReqore = exports.useLatestZIndex = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = void 0;
+exports.useReqoreTheme = exports.useReqore = exports.useLatestZIndex = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = void 0;
 var Breadcrumbs_1 = require("./components/Breadcrumbs");
 __createBinding(exports, Breadcrumbs_1, "default", "ReqoreBreadcrumbs");
 var item_1 = require("./components/Breadcrumbs/item");
@@ -119,6 +119,10 @@ var Tree_1 = require("./components/Tree");
 __createBinding(exports, Tree_1, "ReqoreTree");
 var colors_1 = require("./constants/colors");
 __createBinding(exports, colors_1, "Colors", "ReqoreColors");
+var sizes_1 = require("./constants/sizes");
+__createBinding(exports, sizes_1, "ReqoreSizes");
+var theme_1 = require("./constants/theme");
+__createBinding(exports, theme_1, "ReqoreIntents");
 var ReqoreProvider_1 = require("./containers/ReqoreProvider");
 __createBinding(exports, ReqoreProvider_1, "default", "ReqoreNotifications");
 var UIProvider_1 = require("./containers/UIProvider");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,gDAAgE;AAAvD,gEAAwB;AACjC,8CAAmD;AAA1C,mDAAY;AACrB,4CAA4D;AAAnD,4DAAsB;AAC/B,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAA8C;AAArC,mDAAS;AAClB,6CAAkD;AAAzC,uDAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,gDAAgE;AAAvD,gEAAwB;AACjC,8CAAmD;AAA1C,mDAAY;AACrB,4CAA4D;AAAnD,4DAAsB;AAC/B,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAA8C;AAArC,mDAAS;AAClB,6CAAkD;AAAzC,uDAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Button/index.tsx

@@ -13,6 +13,7 @@ import ReqoreContext from '../../context/ReqoreContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreEffect } from '../../hooks/useReqoreEffect';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import {
@@ -304,7 +305,7 @@ export const ButtonBadge = memo((props: IReqoreButtonBadgeProps) => {
       <ReqoreTag
         key={key}
         size={getOneLessSize(size)}
-        badge
+        asBadge
         color={color}
         className='reqore-button-badge'
         minimal={!(content as IReqoreTagProps)?.effect?.gradient}
@@ -372,7 +373,8 @@ const ReqoreButton = memo(
     ) => {
       const { targetRef } = useCombinedRefs(ref);
       const { animations } = useContext(ReqoreContext);
-      const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
+      const theme = useReqoreTheme('main', customTheme, intent);
+      const fixedEffect = useReqoreEffect('buttons', theme, effect);
 
       /* A custom hook that is used to add a tooltip to the button. */
       useTooltip(targetRef.current, tooltip);
@@ -391,7 +393,7 @@ const ReqoreButton = memo(
           {...rest}
           effect={{
             interactive: !readOnly && !rest.disabled,
-            ...effect,
+            ...fixedEffect,
           }}
           as='button'
           theme={theme}

package/src/components/Checkbox/index.tsx

@@ -1,27 +1,40 @@
 import { rgba } from 'polished';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
+import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
 import { PADDING_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { getReadableColor } from '../../helpers/colors';
+import {
+  changeLightness,
+  getNthGradientColor,
+  getReadableColor,
+  getReadableColorFrom,
+} from '../../helpers/colors';
+import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { DisabledElement, ReadOnlyElement } from '../../styles';
 import {
   IReqoreDisabled,
+  IReqoreIntent,
   IReqoreReadOnly,
+  IWithReqoreCustomTheme,
   IWithReqoreEffect,
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { ReqoreTextEffect } from '../Effect';
-import ReqoreIcon from '../Icon';
+import { IReqoreEffect, ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
+import ReqoreIcon, { StyledIconWrapper } from '../Icon';
+import { ReqoreSpacer } from '../Spacer';
 
 export interface IReqoreCheckboxProps
   extends React.HTMLAttributes<HTMLDivElement>,
     IReqoreDisabled,
     IReqoreReadOnly,
-    IWithReqoreEffect {
+    IWithReqoreEffect,
+    IReqoreIntent,
+    IWithReqoreCustomTheme {
   label?: string;
   labelDetail?: any;
   labelDetailPosition?: 'left' | 'right';
@@ -35,6 +48,12 @@ export interface IReqoreCheckboxProps
   uncheckedIcon?: IReqoreIconName;
   checkedIcon?: IReqoreIconName;
   image?: string;
+  onText?: string | number;
+  offText?: string | number;
+  switchTextEffect?: IReqoreEffect;
+  labelEffect?: IReqoreEffect;
+  margin?: 'left' | 'right' | 'both' | 'none';
+  wrapLabel?: boolean;
 }
 
 export interface IReqoreCheckboxStyle extends IReqoreCheckboxProps {
@@ -48,38 +67,64 @@ const StyledSwitchToggle = styled.div`
   align-items: center;
   justify-content: center;
   position: absolute;
-  height: ${({ size }) => SIZE_TO_PX[size] - 13}px;
-  width: ${({ size }) => SIZE_TO_PX[size] - 13}px;
+  height: ${({ size }) => SIZE_TO_PX[size] - 4}px;
+  width: ${({ size, width }) => width || SIZE_TO_PX[size] - 4}px;
   top: 50%;
   transform: translateY(-50%);
-  left: ${({ checked, size }) =>
-    !checked ? '5px' : `${SIZE_TO_PX[size] * 1.8 - (SIZE_TO_PX[size] - 7)}px`};
-  border-radius: 100%;
-  background-color: ${({ theme, checked, transparent }) =>
+  left: ${({ checked, size, width }) =>
+    !checked ? '1px' : `calc(100% - ${width || SIZE_TO_PX[size] - 4}px - 1px)`};
+  border-radius: 50px;
+  background-color: ${({ theme, checked, transparent, parentEffect }) =>
     transparent
       ? 'transparent'
       : !checked
-      ? rgba(getReadableColor(theme, undefined, undefined), 0.2)
-      : getReadableColor(theme, undefined, undefined)};
+      ? parentEffect?.gradient
+        ? changeLightness(getNthGradientColor(theme, parentEffect?.gradient?.colors, 1), 0.2)
+        : changeLightness(theme.main, 0.2)
+      : parentEffect?.gradient
+      ? changeLightness(getNthGradientColor(theme, parentEffect?.gradient?.colors, 2), 0.2)
+      : changeLightness(theme.main, 0.25)};
 `;
 
-const StyledSwitch = styled.div<IReqoreCheckboxStyle>`
+const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   transition: all 0.2s ease-out;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 
-  height: ${({ size }) => SIZE_TO_PX[size] - 5}px;
-  width: ${({ size }) => SIZE_TO_PX[size] * 1.8}px;
+  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  min-width: ${({ size }) => SIZE_TO_PX[size] * 1.8}px;
 
-  border: 1px solid
-    ${({ theme, checked }) =>
-      rgba(getReadableColor(theme, undefined, undefined), checked ? 0.8 : 0.2)};
+  border: 1px solid ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.25 : 0.2)};
   border-radius: 50px;
 
-  margin-right: ${({ size }) => PADDING_FROM_SIZE[size]}px;
-  margin-left: ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  background-color: ${({ theme }) => rgba(changeLightness(theme.main, 0.3), 0.1)};
+
+  ${StyledIconWrapper} {
+    z-index: 1;
+  }
+`;
+
+const StyledSwitchTextWrapper = styled(StyledTextEffect)`
+  margin: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+`;
+
+const StyledOnSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
+  color: ${({ theme, checked, parentHasGradient }) =>
+    !parentHasGradient &&
+    getReadableColorFrom(checked ? changeLightness(theme.main, 0.25) : theme.originalMain)};
+`;
 
-  background-color: ${({ theme, checked }) =>
-    checked ? rgba(getReadableColor(theme, undefined, undefined), 0.1) : 'transparent'};
+const StyledOffSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
+  color: ${({ theme, checked, parentHasGradient }) =>
+    !parentHasGradient &&
+    getReadableColorFrom(checked ? theme.originalMain : changeLightness(theme.main, 0.2))};
 `;
 
 const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
@@ -106,14 +151,15 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
       ${ReadOnlyElement};
     `}
 
-  color: ${({ theme, checked }) => getReadableColor(theme, undefined, undefined, !checked)};
+  color: ${({ theme, checked }) =>
+    getReadableColor(theme, undefined, undefined, !checked, theme.originalMain)};
 
   &:hover {
-    color: ${({ theme }) => getReadableColor(theme, undefined, undefined, false)};
+    color: ${({ theme }) =>
+      getReadableColor(theme, undefined, undefined, false, theme.originalMain)};
 
     > ${StyledSwitch} {
-      border-color: ${({ theme, checked }) =>
-        rgba(getReadableColor(theme, undefined, undefined, false), checked ? 0.8 : 0.5)};
+      border-color: ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.3 : 0.25)};
     }
   }
 `;
@@ -125,72 +171,205 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
       labelDetail,
       labelDetailPosition = 'right',
       size = 'normal',
+      margin = 'left',
       checked,
       disabled,
       className,
       labelPosition = 'right',
       tooltip,
       asSwitch,
-      uncheckedIcon = 'CheckboxBlankCircleLine',
-      checkedIcon = 'CheckboxCircleFill',
+      uncheckedIcon,
+      checkedIcon,
       readOnly,
-      effect,
+      labelEffect,
+      switchTextEffect,
       image,
+      onText,
+      offText,
+      intent,
+      effect,
+      customTheme,
+      wrapLabel,
       ...rest
     }: IReqoreCheckboxProps,
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
+    const [offRef, { width: offWidth }] = useMeasure();
+    const [onRef, { width: onWidth }] = useMeasure();
+    const theme = useReqoreTheme('main', customTheme, intent);
 
     useTooltip(targetRef.current, tooltip);
 
+    const width = useMemo(() => {
+      if ((!image && !onText) || !offText) return undefined;
+
+      const selectedWidth = checked ? onWidth : offWidth;
+
+      return selectedWidth + PADDING_FROM_SIZE[size] * 2;
+    }, [checked, offWidth, onWidth, size]);
+
+    const hasText = useMemo(() => {
+      return !!onText || !!offText;
+    }, [onText, offText]);
+
     return (
       <StyledCheckbox
         {...rest}
         ref={targetRef}
+        theme={theme}
         size={size}
         disabled={disabled}
         checked={checked}
         readOnly={readOnly}
         className={`${className || ''} reqore-checkbox reqore-control`}
       >
+        {margin === 'left' || margin === 'both' ? (
+          <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+        ) : null}
         {label && labelPosition === 'left' ? (
           <>
             {labelDetailPosition === 'left' && labelDetail}
             <ReqoreTextEffect
-              effect={{ ...effect, interactive: !disabled && !readOnly && !checked }}
+              active={checked}
+              effect={{
+                ...labelEffect,
+                interactive: !disabled && !readOnly && !checked,
+                noWrap: !wrapLabel,
+              }}
             >
               {label}
             </ReqoreTextEffect>
             {labelDetailPosition === 'right' && labelDetail}
+            <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
           </>
         ) : null}
         {asSwitch ? (
-          <StyledSwitch size={size} labelPosition={labelPosition} checked={checked}>
-            <StyledSwitchToggle size={size} checked={checked} transparent={!!image}>
-              {image ? <ReqoreIcon size={size} image={image} grayscale={!checked} /> : null}
+          <StyledSwitch
+            size={size}
+            labelPosition={labelPosition}
+            checked={checked}
+            theme={theme}
+            as='div'
+            effect={
+              {
+                interactive: !disabled && !readOnly,
+                ...effect,
+              } as IReqoreEffect
+            }
+          >
+            <>
+              {offText || offText === 0 ? (
+                <StyledOffSwitchText
+                  ref={offRef}
+                  size={size}
+                  theme={theme}
+                  checked={checked}
+                  parentHasGradient={!!effect?.gradient}
+                  effect={
+                    {
+                      uppercase: true,
+                      textSize: getOneLessSize(size),
+                      weight: 'bold',
+                      ...switchTextEffect,
+                      opacity: checked ? 0.8 : 1,
+                    } as IReqoreEffect
+                  }
+                >
+                  {image || uncheckedIcon ? (
+                    <ReqoreIcon
+                      size={size}
+                      image={image}
+                      icon={uncheckedIcon}
+                      effect={{ grayscale: true }}
+                      margin={offText ? 'right' : undefined}
+                    />
+                  ) : null}
+                  {offText}
+                </StyledOffSwitchText>
+              ) : null}
+              {onText || onText === 0 ? (
+                <StyledOnSwitchText
+                  ref={onRef}
+                  size={size}
+                  theme={theme}
+                  checked={checked}
+                  parentHasGradient={!!effect?.gradient}
+                  effect={
+                    {
+                      uppercase: true,
+                      textSize: getOneLessSize(size),
+                      weight: 'thick',
+                      ...switchTextEffect,
+                      opacity: checked ? 1 : 0.3,
+                    } as IReqoreEffect
+                  }
+                >
+                  {image || checkedIcon ? (
+                    <ReqoreIcon
+                      size={size}
+                      image={image}
+                      margin={onText ? 'right' : undefined}
+                      icon={checkedIcon}
+                    />
+                  ) : null}
+                  {onText}
+                </StyledOnSwitchText>
+              ) : null}
+            </>
+            <StyledSwitchToggle
+              size={size}
+              checked={checked}
+              width={width}
+              theme={theme}
+              parentEffect={effect}
+              transparent={(image || checkedIcon) && !hasText}
+            >
+              {!onText && !offText ? (
+                <ReqoreIcon
+                  size={size}
+                  image={image}
+                  icon={checked ? checkedIcon : uncheckedIcon}
+                  effect={{ grayscale: !checked, opacity: checked ? 1 : 0.5 }}
+                />
+              ) : null}
             </StyledSwitchToggle>
           </StyledSwitch>
         ) : (
           <ReqoreIcon
             size={size}
-            icon={!image ? (checked ? checkedIcon : uncheckedIcon) : undefined}
+            icon={
+              !image
+                ? checked
+                  ? checkedIcon || 'CheckboxCircleFill'
+                  : uncheckedIcon || 'CheckboxBlankCircleLine'
+                : undefined
+            }
             image={image}
-            grayscale={image ? !checked : undefined}
-            margin='both'
+            effect={{ grayscale: image ? !checked : undefined, opacity: checked ? 1 : 0.5 }}
+            intent={intent}
           />
         )}
         {label && labelPosition === 'right' ? (
           <>
+            <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
             {labelDetailPosition === 'left' && labelDetail}
             <ReqoreTextEffect
-              effect={{ ...effect, interactive: !disabled && !readOnly && !checked }}
+              active={checked}
+              effect={{
+                ...labelEffect,
+                interactive: !disabled && !readOnly && !checked,
+                noWrap: !wrapLabel,
+              }}
             >
               {label}
             </ReqoreTextEffect>
             {labelDetailPosition === 'right' && labelDetail}
           </>
         ) : null}
+        {margin === 'right' || margin === 'both' ? (
+          <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+        ) : null}
       </StyledCheckbox>
     );
   }